diff --git a/.prettierrc b/.oxfmtrc.json
similarity index 52%
rename from .prettierrc
rename to .oxfmtrc.json
index ef155d4a139..cf1c0efa798 100644
--- a/.prettierrc
+++ b/.oxfmtrc.json
@@ -1,5 +1,11 @@
 {
-  "$schema": "https://json.schemastore.org/prettierrc",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "sortTailwindcss": {
+    "stylesheet": "packages/tailwind-config/index.css",
+    "functions": ["cn", "clsx", "cva"]
+  },
   "overrides": [
     {
       "files": ["packages/codemods/**/*"],
@@ -7,9 +13,5 @@
         "printWidth": 80
       }
     }
-  ],
-  "plugins": ["@prettier/plugin-oxc"],
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
+  ]
 }
diff --git a/apps/admin/app/(all)/(dashboard)/ai/form.tsx b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
index f1fb49261e2..affbda4808b 100644
--- a/apps/admin/app/(all)/(dashboard)/ai/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
@@ -120,16 +120,16 @@ export function InstanceAIForm(props: IInstanceAIForm) {
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 items-start">
+      <div className="flex flex-col items-start gap-4">
         <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving" : "Save changes"}
         </Button>
 
-        <div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary  ">
+        <div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary">
           <Lightbulb className="size-4" />
           <div>
             If you have a preferred AI models vendor, please get in{" "}
-            <a className="underline font-medium" href="https://plane.so/contact">
+            <a className="font-medium underline" href="https://plane.so/contact">
               touch with us.
             </a>
           </div>
diff --git a/apps/admin/app/(all)/(dashboard)/ai/page.tsx b/apps/admin/app/(all)/(dashboard)/ai/page.tsx
index c0281300ca0..dec32009827 100644
--- a/apps/admin/app/(all)/(dashboard)/ai/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/ai/page.tsx
@@ -34,7 +34,7 @@ const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentP
       ) : (
         <Loader className="space-y-8">
           <Loader.Item height="50px" width="40%" />
-          <div className="w-2/3 grid grid-cols-2 gap-x-8 gap-y-4">
+          <div className="grid w-2/3 grid-cols-2 gap-x-8 gap-y-4">
             <Loader.Item height="50px" />
             <Loader.Item height="50px" />
           </div>
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
index 5e137ee4578..f05464a41a9 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
@@ -176,8 +176,8 @@ export function InstanceGiteaConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
             <div className="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
             {GITEA_FORM_FIELDS.map((field) => (
               <ControllerInput
@@ -211,7 +211,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             </div>
           </div>
           <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-1 rounded-lg">
+            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 pt-1.5 pb-4">
               <div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
               {GITEA_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
index 166fc44d239..2425216b3a0 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
@@ -197,8 +197,8 @@ export function InstanceGithubConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
             <div className="pt-2.5 text-18 font-medium">GitHub-provided details for Plane</div>
             {GITHUB_FORM_FIELDS.map((field) => (
               <ControllerInput
@@ -231,24 +231,24 @@ export function InstanceGithubConfigForm(props: Props) {
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+          <div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
             <div className="pt-2 text-18 font-medium">Plane-provided details for GitHub</div>
 
             <div className="flex flex-col gap-y-4">
               {/* common service details */}
-              <div className="flex flex-col gap-y-4 px-6 py-4 bg-layer-1 rounded-lg">
+              <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
                 {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
                   <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                 ))}
               </div>
 
               {/* web service details */}
-              <div className="flex flex-col rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
-                  <Monitor className="w-3 h-3" />
+              <div className="flex flex-col overflow-hidden rounded-lg">
+                <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
+                  <Monitor className="h-3 w-3" />
                   Web
                 </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
+                <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
                   {GITHUB_SERVICE_DETAILS.map((field) => (
                     <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                   ))}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
index 6f0a4f460bb..7df6faf17af 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
@@ -180,8 +180,8 @@ export function InstanceGitlabConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
             <div className="pt-2.5 text-18 font-medium">GitLab-provided details for Plane</div>
             {GITLAB_FORM_FIELDS.map((field) => (
               <ControllerInput
@@ -215,7 +215,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             </div>
           </div>
           <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-3 rounded-lg">
+            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-3 px-6 pt-1.5 pb-4">
               <div className="pt-2 text-18 font-medium">Plane-provided details for GitLab</div>
               {GITLAB_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
index f1310ae4fae..698ff34e9cb 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
@@ -185,8 +185,8 @@ export function InstanceGoogleConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
             <div className="pt-2.5 text-18 font-medium">Google-provided details for Plane</div>
             {GOOGLE_FORM_FIELDS.map((field) => (
               <ControllerInput
@@ -219,24 +219,24 @@ export function InstanceGoogleConfigForm(props: Props) {
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+          <div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
             <div className="pt-2 text-18 font-medium">Plane-provided details for Google</div>
 
             <div className="flex flex-col gap-y-4">
               {/* common service details */}
-              <div className="flex flex-col gap-y-4 px-6 py-4 bg-layer-1 rounded-lg">
+              <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
                 {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
                   <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                 ))}
               </div>
 
               {/* web service details */}
-              <div className="flex flex-col rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
-                  <Monitor className="w-3 h-3" />
+              <div className="flex flex-col overflow-hidden rounded-lg">
+                <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
+                  <Monitor className="h-3 w-3" />
                   Web
                 </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
+                <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
                   {GOOGLE_SERVICE_DETAILS.map((field) => (
                     <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                   ))}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/page.tsx
index 65d1f0b79e5..26e5fc56f9d 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/page.tsx
@@ -117,11 +117,11 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
     >
       {formattedConfig ? (
         <div className="space-y-3">
-          <div className={cn("w-full flex items-center gap-14 rounded-sm")}>
+          <div className={cn("flex w-full items-center gap-14 rounded-sm")}>
             <div className="flex grow items-center gap-4">
               <div className="grow">
-                <div className="text-16 font-medium pb-1">Allow anyone to sign up even without an invite</div>
-                <div className={cn("font-regular leading-5 text-tertiary text-11")}>
+                <div className="pb-1 text-16 font-medium">Allow anyone to sign up even without an invite</div>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
                   Toggling this off will only let users sign up when they are invited.
                 </div>
               </div>
@@ -143,7 +143,7 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
               </div>
             </div>
           </div>
-          <div className="text-lg font-medium pt-6">Available authentication modes</div>
+          <div className="text-lg pt-6 font-medium">Available authentication modes</div>
           {authenticationModes.map((method) => (
             <AuthenticationMethodCard
               key={method.key}
diff --git a/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx b/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
index 08eb78c3aa2..794d39a3a05 100644
--- a/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
@@ -179,7 +179,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             </CustomSelect>
           </div>
         </div>
-        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-subtle">
+        <div className="my-6 flex flex-col gap-6 border-t border-subtle pt-4">
           <div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
             <div className="mr-8 flex items-center gap-10 pt-4">
               <div className="grow">
@@ -207,7 +207,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
           </div>
         </div>
       </div>
-      <div className="flex max-w-4xl items-center py-1 gap-4">
+      <div className="flex max-w-4xl items-center gap-4 py-1">
         <Button
           variant="primary"
           size="lg"
diff --git a/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx b/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
index a028faedfe4..630b886b307 100644
--- a/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
@@ -91,8 +91,8 @@ export function SendTestEmailModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all w-full sm:max-w-xl">
-                <h3 className="text-16 font-medium leading-6 text-primary">
+              <Dialog.Panel className="relative w-full transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all sm:max-w-xl">
+                <h3 className="text-16 leading-6 font-medium text-primary">
                   {sendEmailStep === ESendEmailSteps.SEND_EMAIL
                     ? "Send test email"
                     : sendEmailStep === ESendEmailSteps.SUCCESS
@@ -121,7 +121,7 @@ export function SendTestEmailModal(props: Props) {
                     </div>
                   )}
                   {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
-                  <div className="flex items-center gap-2 justify-end mt-5">
+                  <div className="mt-5 flex items-center justify-end gap-2">
                     <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
                       {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
                     </Button>
diff --git a/apps/admin/app/(all)/(dashboard)/general/form.tsx b/apps/admin/app/(all)/(dashboard)/general/form.tsx
index a090959606a..0b402b76c7a 100644
--- a/apps/admin/app/(all)/(dashboard)/general/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/form.tsx
@@ -112,18 +112,18 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
       </div>
 
       <div className="space-y-6">
-        <div className="text-16 font-medium text-primary pb-1.5 border-b border-subtle">Chat + telemetry</div>
+        <div className="border-b border-subtle pb-1.5 text-16 font-medium text-primary">Chat + telemetry</div>
         <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
         <div className="flex items-center gap-14">
-          <div className="grow flex items-center gap-4">
+          <div className="flex grow items-center gap-4">
             <div className="shrink-0">
-              <div className="flex items-center justify-center size-11 bg-layer-1 rounded-lg">
+              <div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
                 <Telescope className="size-5 text-tertiary" />
               </div>
             </div>
             <div className="grow">
-              <div className="text-13 font-medium text-primary leading-5">Let Plane collect anonymous usage data</div>
-              <div className="text-11 font-regular text-tertiary leading-5">
+              <div className="text-13 leading-5 font-medium text-primary">Let Plane collect anonymous usage data</div>
+              <div className="text-11 leading-5 font-regular text-tertiary">
                 No PII is collected.This anonymized data is used to understand how you use Plane and build new features
                 in line with{" "}
                 <a
diff --git a/apps/admin/app/(all)/(dashboard)/general/intercom.tsx b/apps/admin/app/(all)/(dashboard)/general/intercom.tsx
index 06aa2508a1f..656e2d69022 100644
--- a/apps/admin/app/(all)/(dashboard)/general/intercom.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/intercom.tsx
@@ -56,16 +56,16 @@ export const IntercomConfig = observer(function IntercomConfig(props: TIntercomC
   return (
     <>
       <div className="flex items-center gap-14">
-        <div className="grow flex items-center gap-4">
+        <div className="flex grow items-center gap-4">
           <div className="shrink-0">
-            <div className="flex items-center justify-center size-11 bg-layer-1 rounded-lg">
-              <MessageSquare className="size-5 text-tertiary p-0.5" />
+            <div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
+              <MessageSquare className="size-5 p-0.5 text-tertiary" />
             </div>
           </div>
 
           <div className="grow">
-            <div className="text-13 font-medium text-primary leading-5">Chat with us</div>
-            <div className="text-11 font-regular text-tertiary leading-5">
+            <div className="text-13 leading-5 font-medium text-primary">Chat with us</div>
+            <div className="text-11 leading-5 font-regular text-tertiary">
               Let your users chat with us via Intercom or another service. Toggling Telemetry off turns this off
               automatically.
             </div>
diff --git a/apps/admin/app/(all)/(dashboard)/layout.tsx b/apps/admin/app/(all)/(dashboard)/layout.tsx
index 8b771dc7969..e56acf7f9cb 100644
--- a/apps/admin/app/(all)/(dashboard)/layout.tsx
+++ b/apps/admin/app/(all)/(dashboard)/layout.tsx
@@ -42,7 +42,7 @@ function AdminLayout(_props: Route.ComponentProps) {
         <AdminSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
           <AdminHeader />
-          <div className="h-full w-full overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
+          <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-scroll">
             <Outlet />
           </div>
         </main>
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
index 960415567bb..d1ddb1f5a31 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
@@ -39,14 +39,14 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   const getSidebarMenuItems = () => (
     <Menu.Items
       className={cn(
-        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 shadow-lg outline-none",
+        "shadow-lg absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 outline-none",
         {
           "left-4": isSidebarCollapsed,
         }
       )}
     >
       <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-secondary truncate">{currentUser?.email}</span>
+        <span className="truncate px-2 text-secondary">{currentUser?.email}</span>
       </div>
       <div className="py-2">
         <Menu.Item
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
index 9ee63f3be68..b4908ff2045 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
@@ -50,9 +50,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
   return (
     <div
       className={cn(
-        "flex w-full items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4 h-14 flex-shrink-0",
+        "flex h-14 w-full flex-shrink-0 items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4",
         {
-          "flex-col h-auto py-1.5": isSidebarCollapsed,
+          "h-auto flex-col py-1.5": isSidebarCollapsed,
         }
       )}
     >
@@ -60,7 +60,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
           <a
             href={redirectionLink}
-            className={`relative px-2 py-1 flex items-center gap-1 rounded-sm bg-layer-1 text-body-xs-medium text-secondary whitespace-nowrap`}
+            className={`relative flex items-center gap-1 rounded-sm bg-layer-1 px-2 py-1 text-body-xs-medium whitespace-nowrap text-secondary`}
           >
             <NewTabIcon width={14} height={14} />
             {!isSidebarCollapsed && "Redirect to Plane"}
@@ -101,9 +101,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
           leaveTo="transform opacity-0 scale-95"
         >
           <div
-            className={`absolute bottom-2 min-w-[10rem] z-[15] ${
+            className={`absolute bottom-2 z-[15] min-w-[10rem] ${
               isSidebarCollapsed ? "left-full" : "-left-[75px]"
-            } divide-y divide-subtle-1 whitespace-nowrap rounded-sm bg-surface-1 p-1 shadow-raised-100`}
+            } divide-y divide-subtle-1 rounded-sm bg-surface-1 p-1 whitespace-nowrap shadow-raised-100`}
             ref={helpOptionsRef}
           >
             <div className="space-y-1 pb-2">
@@ -134,7 +134,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
                   );
               })}
             </div>
-            <div className="px-2 pb-1 pt-2 text-10">Version: v{instance?.current_version}</div>
+            <div className="px-2 pt-2 pb-1 text-10">Version: v{instance?.current_version}</div>
           </div>
         </Transition>
       </div>
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
index 35434cc9419..319cf0173dd 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
@@ -29,7 +29,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
   };
 
   return (
-    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 py-4">
+    <div className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
       {sidebarMenu.map((item, index) => {
         const isActive = item.href === pathName || pathName?.includes(item.href);
         return (
@@ -38,9 +38,9 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
               <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <div
                   className={cn(
-                    "group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors",
+                    "group flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors outline-none",
                     {
-                      "text-primary !bg-layer-transparent-active": isActive,
+                      "!bg-layer-transparent-active text-primary": isActive,
                       "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
                     },
                     isSidebarCollapsed ? "justify-center" : "w-[260px]"
@@ -48,7 +48,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
                 >
                   {<item.Icon className="h-4 w-4 flex-shrink-0" />}
                   {!isSidebarCollapsed && (
-                    <div className="w-full ">
+                    <div className="w-full">
                       <div className={cn(`text-body-xs-medium transition-colors`)}>{item.name}</div>
                       <div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
                     </div>
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar.tsx b/apps/admin/app/(all)/(dashboard)/sidebar.tsx
index 76eb7b1fddd..6d9c970c2a5 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar.tsx
@@ -44,13 +44,7 @@ export const AdminSidebar = observer(function AdminSidebar() {
 
   return (
     <div
-      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300
-        fixed md:relative
-        ${isSidebarCollapsed ? "-ml-[290px]" : ""}
-        sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}
-        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
-        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
-      `}
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300 md:relative ${isSidebarCollapsed ? "-ml-[290px]" : ""} sm:${isSidebarCollapsed ? "-ml-[290px]" : ""} md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} `}
     >
       <div ref={ref} className="flex h-full w-full flex-1 flex-col">
         <AdminSidebarDropdown />
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
index 46238940d65..d250b763059 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
@@ -123,8 +123,8 @@ export function WorkspaceCreateForm() {
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-13 text-tertiary">Set your workspace&apos;s URL</h4>
-          <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-subtle px-3">
-            <span className="whitespace-nowrap text-13 text-secondary">{workspaceBaseURL}</span>
+          <div className="flex w-full items-center gap-0.5 rounded-md border-[0.5px] border-subtle px-3">
+            <span className="text-13 whitespace-nowrap text-secondary">{workspaceBaseURL}</span>
             <Controller
               control={control}
               name="slug"
@@ -188,7 +188,7 @@ export function WorkspaceCreateForm() {
           </div>
         </div>
       </div>
-      <div className="flex max-w-4xl items-center py-1 gap-4">
+      <div className="flex max-w-4xl items-center gap-4 py-1">
         <Button
           variant="primary"
           size="lg"
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/page.tsx b/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
index 53aa04972b6..5816ac9599d 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
@@ -83,11 +83,11 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
     >
       <div className="space-y-3">
         {formattedConfig ? (
-          <div className={cn("w-full flex items-center gap-14 rounded-sm")}>
+          <div className={cn("flex w-full items-center gap-14 rounded-sm")}>
             <div className="flex grow items-center gap-4">
               <div className="grow">
-                <div className="text-16 font-medium pb-1">Prevent anyone else from creating a workspace.</div>
-                <div className={cn("font-regular leading-5 text-tertiary text-11")}>
+                <div className="pb-1 text-16 font-medium">Prevent anyone else from creating a workspace.</div>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
                   Toggling this on will let only you create workspaces. You will have to invite users to new workspaces.
                 </div>
               </div>
@@ -116,15 +116,15 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
         )}
         {workspaceLoader !== "init-loader" ? (
           <>
-            <div className="pt-6 flex items-center justify-between gap-2">
+            <div className="flex items-center justify-between gap-2 pt-6">
               <div className="flex flex-col items-start gap-x-2">
                 <div className="flex items-center gap-2 text-16 font-medium">
                   All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
                   {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
-                    <LoaderIcon className="w-4 h-4 animate-spin" />
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
                   )}
                 </div>
-                <div className={cn("font-regular leading-5 text-tertiary text-11")}>
+                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
                   You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
                   Member.
                 </div>
@@ -149,7 +149,7 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
                   disabled={workspaceLoader === "pagination"}
                 >
                   Load more
-                  {workspaceLoader === "pagination" && <LoaderIcon className="w-3 h-3 animate-spin" />}
+                  {workspaceLoader === "pagination" && <LoaderIcon className="h-3 w-3 animate-spin" />}
                 </Button>
               </div>
             )}
diff --git a/apps/admin/app/(all)/(home)/auth-banner.tsx b/apps/admin/app/(all)/(home)/auth-banner.tsx
index 057c04e32b8..43df781bbb0 100644
--- a/apps/admin/app/(all)/(home)/auth-banner.tsx
+++ b/apps/admin/app/(all)/(home)/auth-banner.tsx
@@ -20,16 +20,16 @@ export function AuthBanner(props: TAuthBanner) {
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
-      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+    <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
+      <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
         <Info size={16} className="text-accent-primary" />
       </div>
       <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
       <div
-        className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary"
+        className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary transition-all hover:bg-accent-primary/20"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <CloseIcon className="w-4 h-4 flex-shrink-0" />
+        <CloseIcon className="h-4 w-4 flex-shrink-0" />
       </div>
     </div>
   );
diff --git a/apps/admin/app/(all)/(home)/auth-header.tsx b/apps/admin/app/(all)/(home)/auth-header.tsx
index 6d18d4bdc6d..ae94821af9a 100644
--- a/apps/admin/app/(all)/(home)/auth-header.tsx
+++ b/apps/admin/app/(all)/(home)/auth-header.tsx
@@ -9,7 +9,7 @@ import { PlaneLockup } from "@plane/propel/icons";
 
 export function AuthHeader() {
   return (
-    <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
       <Link href="/">
         <PlaneLockup height={20} width={95} className="text-primary" />
       </Link>
diff --git a/apps/admin/app/(all)/(home)/auth-helpers.tsx b/apps/admin/app/(all)/(home)/auth-helpers.tsx
index 35c146eacda..ea18dc99599 100644
--- a/apps/admin/app/(all)/(home)/auth-helpers.tsx
+++ b/apps/admin/app/(all)/(home)/auth-helpers.tsx
@@ -50,7 +50,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -62,7 +62,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
diff --git a/apps/admin/app/(all)/(home)/layout.tsx b/apps/admin/app/(all)/(home)/layout.tsx
index 47eeca42dc9..a334536840c 100644
--- a/apps/admin/app/(all)/(home)/layout.tsx
+++ b/apps/admin/app/(all)/(home)/layout.tsx
@@ -22,7 +22,7 @@ function RootLayout() {
   }, [replace, isUserLoggedIn]);
 
   return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8 bg-surface-1">
+    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-surface-1 px-8 pt-6 pb-10">
       <Outlet />
     </div>
   );
diff --git a/apps/admin/app/(all)/(home)/page.tsx b/apps/admin/app/(all)/(home)/page.tsx
index 014e880952a..7947adcdcce 100644
--- a/apps/admin/app/(all)/(home)/page.tsx
+++ b/apps/admin/app/(all)/(home)/page.tsx
@@ -22,7 +22,7 @@ function HomePage() {
   // if instance is not fetched, show loading
   if (!instance && !error) {
     return (
-      <div className="flex items-center justify-center h-screen w-full">
+      <div className="flex h-screen w-full items-center justify-center">
         <LogoSpinner />
       </div>
     );
diff --git a/apps/admin/app/(all)/(home)/sign-in-form.tsx b/apps/admin/app/(all)/(home)/sign-in-form.tsx
index e850d190e08..4e0afb8ea13 100644
--- a/apps/admin/app/(all)/(home)/sign-in-form.tsx
+++ b/apps/admin/app/(all)/(home)/sign-in-form.tsx
@@ -111,8 +111,8 @@ export function InstanceSignInForm() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
           <FormHeader
             heading="Manage your Plane instance"
             subHeading="Configure instance-wide settings to secure your instance"
@@ -134,7 +134,7 @@ export function InstanceSignInForm() {
             <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="email">
+              <label className="text-13 font-medium text-tertiary" htmlFor="email">
                 Email <span className="text-danger-primary">*</span>
               </label>
               <Input
@@ -152,7 +152,7 @@ export function InstanceSignInForm() {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="password">
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
                 Password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
@@ -170,7 +170,7 @@ export function InstanceSignInForm() {
                 {showPassword ? (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(false)}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -178,7 +178,7 @@ export function InstanceSignInForm() {
                 ) : (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(true)}
                   >
                     <Eye className="h-4 w-4" />
diff --git a/apps/admin/app/root.tsx b/apps/admin/app/root.tsx
index 3627aa86275..65baafd7127 100644
--- a/apps/admin/app/root.tsx
+++ b/apps/admin/app/root.tsx
@@ -75,7 +75,7 @@ export const meta: Route.MetaFunction = () => [
 
 export default function Root() {
   return (
-    <div className="bg-canvas min-h-screen">
+    <div className="min-h-screen bg-canvas">
       <Outlet />
     </div>
   );
diff --git a/apps/admin/components/authentication/authentication-method-card.tsx b/apps/admin/components/authentication/authentication-method-card.tsx
index 8c848e10293..86934bbe752 100644
--- a/apps/admin/components/authentication/authentication-method-card.tsx
+++ b/apps/admin/components/authentication/authentication-method-card.tsx
@@ -22,8 +22,8 @@ export function AuthenticationMethodCard(props: Props) {
 
   return (
     <div
-      className={cn("w-full flex items-center gap-14 rounded-lg bg-layer-2", {
-        "px-4 py-3 border border-subtle": withBorder,
+      className={cn("flex w-full items-center gap-14 rounded-lg bg-layer-2", {
+        "border border-subtle px-4 py-3": withBorder,
       })}
     >
       <div
@@ -36,7 +36,7 @@ export function AuthenticationMethodCard(props: Props) {
         </div>
         <div className="grow">
           <div
-            className={cn("font-medium leading-5 text-primary", {
+            className={cn("leading-5 font-medium text-primary", {
               "text-13": withBorder,
               "text-18": !withBorder,
             })}
@@ -44,7 +44,7 @@ export function AuthenticationMethodCard(props: Props) {
             {name}
           </div>
           <div
-            className={cn("font-regular leading-5 text-tertiary", {
+            className={cn("leading-5 font-regular text-tertiary", {
               "text-11": withBorder,
               "text-13": !withBorder,
             })}
diff --git a/apps/admin/components/common/banner.tsx b/apps/admin/components/common/banner.tsx
index 32bb3489506..1c56afa3c70 100644
--- a/apps/admin/components/common/banner.tsx
+++ b/apps/admin/components/common/banner.tsx
@@ -16,12 +16,12 @@ export function Banner(props: TBanner) {
 
   return (
     <div
-      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-subtle border-danger-strong" : "bg-success-subtle border-success-strong"}`}
+      className={`w-full rounded-md border p-2 ${type === "error" ? "border-danger-strong bg-danger-subtle" : "border-success-strong bg-success-subtle"}`}
     >
       <div className="flex items-center justify-center">
         <div className="flex-shrink-0">
           {type === "error" ? (
-            <span className="flex items-center justify-center h-6 w-6 rounded-full">
+            <span className="flex h-6 w-6 items-center justify-center rounded-full">
               <AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
             </span>
           ) : (
diff --git a/apps/admin/components/common/breadcrumb-link.tsx b/apps/admin/components/common/breadcrumb-link.tsx
index 6e90249db75..46d4fd1da0f 100644
--- a/apps/admin/components/common/breadcrumb-link.tsx
+++ b/apps/admin/components/common/breadcrumb-link.tsx
@@ -22,12 +22,12 @@ export function BreadcrumbLink(props: Props) {
           {href ? (
             <Link className="flex items-center gap-1 text-13 font-medium text-tertiary hover:text-primary" href={href}>
               {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-16">{icon}</div>}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+              <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
             </Link>
           ) : (
             <div className="flex cursor-default items-center gap-1 text-13 font-medium text-primary">
               {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+              <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
             </div>
           )}
         </div>
diff --git a/apps/admin/components/common/code-block.tsx b/apps/admin/components/common/code-block.tsx
index c532651e9c2..02c44be22e0 100644
--- a/apps/admin/components/common/code-block.tsx
+++ b/apps/admin/components/common/code-block.tsx
@@ -16,9 +16,9 @@ export function CodeBlock({ children, className, darkerShade }: TProps) {
   return (
     <span
       className={cn(
-        "px-0.5 text-11 text-tertiary bg-surface-2 font-semibold rounded-md border border-subtle",
+        "rounded-md border border-subtle bg-surface-2 px-0.5 text-11 font-semibold text-tertiary",
         {
-          "text-secondary bg-layer-1 border-subtle": darkerShade,
+          "border-subtle bg-layer-1 text-secondary": darkerShade,
         },
         className
       )}
diff --git a/apps/admin/components/common/confirm-discard-modal.tsx b/apps/admin/components/common/confirm-discard-modal.tsx
index 2d30d01c8bb..7b4786d8c05 100644
--- a/apps/admin/components/common/confirm-discard-modal.tsx
+++ b/apps/admin/components/common/confirm-discard-modal.tsx
@@ -46,10 +46,10 @@ export function ConfirmDiscardModal(props: Props) {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-tertiary">
+                      <Dialog.Title as="h3" className="text-16 leading-6 font-medium text-tertiary">
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
@@ -60,7 +60,7 @@ export function ConfirmDiscardModal(props: Props) {
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
+                <div className="flex items-center justify-end gap-2 p-4 sm:px-6">
                   <Button variant="secondary" size="lg" onClick={handleClose}>
                     Keep editing
                   </Button>
diff --git a/apps/admin/components/common/controller-input.tsx b/apps/admin/components/common/controller-input.tsx
index 1b7a5ccb6c6..3d95b4484e0 100644
--- a/apps/admin/components/common/controller-input.tsx
+++ b/apps/admin/components/common/controller-input.tsx
@@ -67,7 +67,7 @@ export function ControllerInput(props: Props) {
           (showPassword ? (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
+              className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(false)}
             >
               <EyeOff className="h-4 w-4" />
@@ -75,7 +75,7 @@ export function ControllerInput(props: Props) {
           ) : (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
+              className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(true)}
             >
               <Eye className="h-4 w-4" />
diff --git a/apps/admin/components/common/empty-state.tsx b/apps/admin/components/common/empty-state.tsx
index 25f9351be11..0f33f13cc7d 100644
--- a/apps/admin/components/common/empty-state.tsx
+++ b/apps/admin/components/common/empty-state.tsx
@@ -25,7 +25,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
     <div className={`flex h-full w-full items-center justify-center`}>
       <div className="flex w-full flex-col items-center text-center">
         {image && <img src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
-        <h6 className="mb-3 mt-6 text-18 font-semibold sm:mt-8">{title}</h6>
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">{title}</h6>
         {description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
         <div className="flex items-center gap-4">
           {primaryButton && (
diff --git a/apps/admin/components/common/header/index.tsx b/apps/admin/components/common/header/index.tsx
index 403e078c5e3..48b9ca78e9c 100644
--- a/apps/admin/components/common/header/index.tsx
+++ b/apps/admin/components/common/header/index.tsx
@@ -21,10 +21,10 @@ export const HamburgerToggle = observer(function HamburgerToggle() {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   return (
     <button
-      className="size-7 rounded-sm flex justify-center items-center bg-layer-1 transition-all hover:bg-layer-1-hover cursor-pointer group md:hidden"
+      className="group flex size-7 cursor-pointer items-center justify-center rounded-sm bg-layer-1 transition-all hover:bg-layer-1-hover md:hidden"
       onClick={() => toggleSidebar(!isSidebarCollapsed)}
     >
-      <Menu size={14} className="text-secondary group-hover:text-primary transition-all" />
+      <Menu size={14} className="text-secondary transition-all group-hover:text-primary" />
     </button>
   );
 });
diff --git a/apps/admin/components/common/new-user-popup.tsx b/apps/admin/components/common/new-user-popup.tsx
index d9e33a97362..30dda8d2dc1 100644
--- a/apps/admin/components/common/new-user-popup.tsx
+++ b/apps/admin/components/common/new-user-popup.tsx
@@ -24,7 +24,7 @@ export const NewUserPopup = observer(function NewUserPopup() {
 
   if (!isNewUserPopup) return <></>;
   return (
-    <div className="absolute bottom-8 right-8 p-6 w-96 border border-subtle shadow-md rounded-lg bg-surface-1">
+    <div className="shadow-md absolute right-8 bottom-8 w-96 rounded-lg border border-subtle bg-surface-1 p-6">
       <div className="flex gap-4">
         <div className="grow">
           <div className="text-14 font-semibold">Create workspace</div>
@@ -41,7 +41,7 @@ export const NewUserPopup = observer(function NewUserPopup() {
             </Button>
           </div>
         </div>
-        <div className="shrink-0 flex items-center justify-center">
+        <div className="flex shrink-0 items-center justify-center">
           <img
             src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
             height={80}
diff --git a/apps/admin/components/common/page-wrapper.tsx b/apps/admin/components/common/page-wrapper.tsx
index d316d7a51b3..b5a19e6c689 100644
--- a/apps/admin/components/common/page-wrapper.tsx
+++ b/apps/admin/components/common/page-wrapper.tsx
@@ -24,25 +24,25 @@ export const PageWrapper = (props: TPageWrapperProps) => {
 
   return (
     <div
-      className={cn("mx-auto w-full h-full space-y-6 py-4", {
-        "md:px-4 max-w-[1000px] 2xl:max-w-[1200px]": size === "md",
+      className={cn("mx-auto h-full w-full space-y-6 py-4", {
+        "max-w-[1000px] md:px-4 2xl:max-w-[1200px]": size === "md",
         "px-4 lg:px-12": size === "lg",
       })}
     >
       {customHeader ? (
-        <div className="border-b border-subtle mx-4 py-4 space-y-1 shrink-0">{customHeader}</div>
+        <div className="mx-4 shrink-0 space-y-1 border-b border-subtle py-4">{customHeader}</div>
       ) : (
         header && (
-          <div className="flex items-center justify-between gap-4 border-b border-subtle mx-4 py-4 space-y-1 shrink-0">
+          <div className="mx-4 flex shrink-0 items-center justify-between gap-4 space-y-1 border-b border-subtle py-4">
             <div className={header.actions ? "flex flex-col gap-1" : "space-y-1"}>
-              <div className="text-primary text-h5-semibold">{header.title}</div>
-              <div className="text-secondary text-body-sm-regular">{header.description}</div>
+              <div className="text-h5-semibold text-primary">{header.title}</div>
+              <div className="text-body-sm-regular text-secondary">{header.description}</div>
             </div>
             {header.actions && <div className="shrink-0">{header.actions}</div>}
           </div>
         )
       )}
-      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 pb-4">
+      <div className="vertical-scrollbar scrollbar-sm flex-grow overflow-hidden overflow-y-scroll px-4 pb-4">
         {children}
       </div>
     </div>
diff --git a/apps/admin/components/instance/failure.tsx b/apps/admin/components/instance/failure.tsx
index 3492c8fd1ee..1f1610fbe14 100644
--- a/apps/admin/components/instance/failure.tsx
+++ b/apps/admin/components/instance/failure.tsx
@@ -24,12 +24,12 @@ export const InstanceFailureView = observer(function InstanceFailureView() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
-          <div className="relative flex flex-col justify-center items-center space-y-4">
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
+          <div className="relative flex flex-col items-center justify-center space-y-4">
             <img src={instanceImage} alt="Instance failure illustration" />
-            <h3 className="font-medium text-20 text-on-color text-center">Unable to fetch instance details.</h3>
-            <p className="font-medium text-14 text-center">
+            <h3 className="text-center text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
+            <p className="text-center text-14 font-medium">
               We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
             </p>
           </div>
diff --git a/apps/admin/components/instance/form-header.tsx b/apps/admin/components/instance/form-header.tsx
index c9f020d04d2..652b7d30471 100644
--- a/apps/admin/components/instance/form-header.tsx
+++ b/apps/admin/components/instance/form-header.tsx
@@ -7,8 +7,8 @@
 export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
   return (
     <div className="flex flex-col gap-1">
-      <span className="text-20 font-semibold text-primary leading-7">{heading}</span>
-      <span className="text-16 font-semibold text-placeholder leading-7">{subHeading}</span>
+      <span className="text-20 leading-7 font-semibold text-primary">{heading}</span>
+      <span className="text-16 leading-7 font-semibold text-placeholder">{subHeading}</span>
     </div>
   );
 }
diff --git a/apps/admin/components/instance/instance-not-ready.tsx b/apps/admin/components/instance/instance-not-ready.tsx
index 578986959b7..4fa5e06705a 100644
--- a/apps/admin/components/instance/instance-not-ready.tsx
+++ b/apps/admin/components/instance/instance-not-ready.tsx
@@ -11,12 +11,12 @@ import PlaneTakeOffImage from "@/app/assets/images/plane-takeoff.png?url";
 
 export function InstanceNotReady() {
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <h1 className="text-24 font-bold pb-3">Welcome aboard Plane!</h1>
+    <div className="relative container mx-auto flex h-full w-full items-center justify-center px-5">
+      <div className="relative w-auto max-w-2xl space-y-8 py-10">
+        <div className="relative flex flex-col items-center justify-center space-y-4">
+          <h1 className="pb-3 text-24 font-bold">Welcome aboard Plane!</h1>
           <img src={PlaneTakeOffImage} alt="Plane Logo" />
-          <p className="font-medium text-14 text-placeholder">Get started by setting up your instance and workspace</p>
+          <p className="text-14 font-medium text-placeholder">Get started by setting up your instance and workspace</p>
         </div>
 
         <div>
diff --git a/apps/admin/components/instance/setup-form.tsx b/apps/admin/components/instance/setup-form.tsx
index 4295413b490..74e80db45b6 100644
--- a/apps/admin/components/instance/setup-form.tsx
+++ b/apps/admin/components/instance/setup-form.tsx
@@ -139,8 +139,8 @@ export function InstanceSetupForm() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
           <FormHeader
             heading="Setup your Plane Instance"
             subHeading="Post setup you will be able to manage this Plane instance."
@@ -160,9 +160,9 @@ export function InstanceSetupForm() {
             <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
             <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
 
-            <div className="flex flex-col sm:flex-row items-center gap-4">
+            <div className="flex flex-col items-center gap-4 sm:flex-row">
               <div className="w-full space-y-1">
-                <label className="text-13 text-tertiary font-medium" htmlFor="first_name">
+                <label className="text-13 font-medium text-tertiary" htmlFor="first_name">
                   First name <span className="text-danger-primary">*</span>
                 </label>
                 <Input
@@ -185,7 +185,7 @@ export function InstanceSetupForm() {
                 />
               </div>
               <div className="w-full space-y-1">
-                <label className="text-13 text-tertiary font-medium" htmlFor="last_name">
+                <label className="text-13 font-medium text-tertiary" htmlFor="last_name">
                   Last name <span className="text-danger-primary">*</span>
                 </label>
                 <Input
@@ -209,7 +209,7 @@ export function InstanceSetupForm() {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="email">
+              <label className="text-13 font-medium text-tertiary" htmlFor="email">
                 Email <span className="text-danger-primary">*</span>
               </label>
               <Input
@@ -230,7 +230,7 @@ export function InstanceSetupForm() {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="company_name">
+              <label className="text-13 font-medium text-tertiary" htmlFor="company_name">
                 Company name <span className="text-danger-primary">*</span>
               </label>
               <Input
@@ -252,7 +252,7 @@ export function InstanceSetupForm() {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="password">
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
                 Set a password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
@@ -274,7 +274,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -283,7 +283,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <Eye className="h-4 w-4" />
@@ -297,7 +297,7 @@ export function InstanceSetupForm() {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
+              <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
                 Confirm password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
@@ -318,7 +318,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -327,7 +327,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <Eye className="h-4 w-4" />
@@ -344,21 +344,21 @@ export function InstanceSetupForm() {
             <div className="relative flex gap-2">
               <div>
                 <Checkbox
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   iconClassName="w-3 h-3"
                   id="is_telemetry_enabled"
                   onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
                   checked={formData.is_telemetry_enabled}
                 />
               </div>
-              <label className="text-13 text-tertiary font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+              <label className="cursor-pointer text-13 font-medium text-tertiary" htmlFor="is_telemetry_enabled">
                 Allow Plane to anonymously collect usage events.{" "}
                 <a
                   tabIndex={-1}
                   href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-13 font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                  className="text-blue-500 hover:text-blue-600 flex-shrink-0 text-13 font-medium"
                 >
                   See More
                 </a>
diff --git a/apps/admin/components/workspace/list-item.tsx b/apps/admin/components/workspace/list-item.tsx
index 3e111972146..9594d7f2196 100644
--- a/apps/admin/components/workspace/list-item.tsx
+++ b/apps/admin/components/workspace/list-item.tsx
@@ -30,19 +30,19 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
       key={workspaceId}
       href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
       target="_blank"
-      className="group flex items-center justify-between p-3 gap-2.5 truncate border border-subtle hover:border-subtle-1 bg-layer-1 hover:bg-layer-1-hover hover:shadow-raised-100 rounded-lg"
+      className="group flex items-center justify-between gap-2.5 truncate rounded-lg border border-subtle bg-layer-1 p-3 hover:border-subtle-1 hover:bg-layer-1-hover hover:shadow-raised-100"
       rel="noreferrer"
     >
       <div className="flex items-start gap-4">
         <span
-          className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 mt-1 text-11 uppercase ${
+          className={`relative mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 text-11 uppercase ${
             !workspace?.logo_url && "rounded-lg bg-accent-primary text-on-color"
           }`}
         >
           {workspace?.logo_url && workspace.logo_url !== "" ? (
             <img
               src={getFileURL(workspace.logo_url)}
-              className="absolute left-0 top-0 h-full w-full rounded-sm object-cover"
+              className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
               alt="Workspace Logo"
             />
           ) : (
@@ -50,7 +50,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
           )}
         </span>
         <div className="flex flex-col items-start gap-1">
-          <div className="flex flex-wrap w-full items-center gap-2.5">
+          <div className="flex w-full flex-wrap items-center gap-2.5">
             <h3 className={`text-14 font-medium capitalize`}>{workspace.name}</h3>/
             <Tooltip tooltipContent="The unique URL of your workspace">
               <h4 className="text-13 text-tertiary">[{workspace.slug}]</h4>
@@ -58,14 +58,14 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
           </div>
           {workspace.owner.email && (
             <div className="flex items-center gap-1 text-11">
-              <h3 className="text-secondary font-medium">Owned by:</h3>
+              <h3 className="font-medium text-secondary">Owned by:</h3>
               <h4 className="text-tertiary">{workspace.owner.email}</h4>
             </div>
           )}
           <div className="flex items-center gap-2.5 text-11">
             {workspace.total_projects !== null && (
               <span className="flex items-center gap-1">
-                <h3 className="text-secondary font-medium">Total projects:</h3>
+                <h3 className="font-medium text-secondary">Total projects:</h3>
                 <h4 className="text-tertiary">{workspace.total_projects}</h4>
               </span>
             )}
@@ -73,7 +73,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
               <>
                 •
                 <span className="flex items-center gap-1">
-                  <h3 className="text-secondary font-medium">Total members:</h3>
+                  <h3 className="font-medium text-secondary">Total members:</h3>
                   <h4 className="text-tertiary">{workspace.total_members}</h4>
                 </span>
               </>
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 96e7ad24a3b..aee6075b991 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -1,9 +1,9 @@
 {
   "name": "admin",
-  "description": "Admin UI for Plane",
   "version": "1.2.0",
-  "license": "AGPL-3.0",
   "private": true,
+  "description": "Admin UI for Plane",
+  "license": "AGPL-3.0",
   "type": "module",
   "scripts": {
     "dev": "react-router dev --port 3001",
@@ -13,9 +13,9 @@
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist && rm -rf build",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=485",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=485",
-    "fix:format": "prettier . --cache --write"
+    "fix:format": "oxfmt ."
   },
   "dependencies": {
     "@bprogress/core": "catalog:",
diff --git a/apps/live/package.json b/apps/live/package.json
index 938adcb9876..1c13108b135 100644
--- a/apps/live/package.json
+++ b/apps/live/package.json
@@ -1,16 +1,17 @@
 {
   "name": "live",
   "version": "1.2.0",
-  "license": "AGPL-3.0",
+  "private": true,
   "description": "A realtime collaborative server powers Plane's rich text editor",
+  "license": "AGPL-3.0",
+  "author": "Plane Software Inc.",
+  "type": "module",
   "main": "./dist/start.mjs",
   "module": "./dist/start.mjs",
   "exports": {
     ".": "./dist/start.mjs",
     "./package.json": "./package.json"
   },
-  "private": true,
-  "type": "module",
   "scripts": {
     "build": "tsc --noEmit && tsdown",
     "dev": "tsdown --watch --onSuccess \"node --env-file=.env .\"",
@@ -20,12 +21,11 @@
     "test:coverage": "vitest run --coverage",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=160",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=160",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
-  "author": "Plane Software Inc.",
   "dependencies": {
     "@dotenvx/dotenvx": "catalog:",
     "@effect/platform": "^0.94.0",
diff --git a/apps/space/app/[workspaceSlug]/[projectId]/page.tsx b/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
index c260d918386..b14ec17c099 100644
--- a/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
+++ b/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
@@ -50,7 +50,7 @@ export const clientLoader = async ({ params, request }: Route.ClientLoaderArgs)
 
 export default function IssuesPage() {
   return (
-    <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+    <div className="flex h-screen min-h-[500px] w-full items-center justify-center">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/space/app/error.tsx b/apps/space/app/error.tsx
index 3050a89ae8e..54c74f6c851 100644
--- a/apps/space/app/error.tsx
+++ b/apps/space/app/error.tsx
@@ -13,11 +13,11 @@ function ErrorPage() {
   };
 
   return (
-    <div className="bg-surface-1 grid h-screen place-items-center p-4">
+    <div className="grid h-screen place-items-center bg-surface-1 p-4">
       <div className="space-y-8 text-center">
         <div className="space-y-2">
           <h3 className="text-16 font-semibold">Yikes! That doesn{"'"}t look good.</h3>
-          <p className="mx-auto md:w-1/2 text-13 text-secondary">
+          <p className="mx-auto text-13 text-secondary md:w-1/2">
             That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
             details, please write to{" "}
             <a href="mailto:support@plane.so" className="text-accent-primary">
diff --git a/apps/space/app/issues/[anchor]/layout.tsx b/apps/space/app/issues/[anchor]/layout.tsx
index 1c82e032303..6dbc2e711e8 100644
--- a/apps/space/app/issues/[anchor]/layout.tsx
+++ b/apps/space/app/issues/[anchor]/layout.tsx
@@ -120,7 +120,7 @@ function IssuesLayout(props: Route.ComponentProps) {
 
   if (!publishSettings && !error) {
     return (
-      <div className="bg-surface-1 flex items-center justify-center h-screen w-full">
+      <div className="flex h-screen w-full items-center justify-center bg-surface-1">
         <LogoSpinner />
       </div>
     );
@@ -133,10 +133,10 @@ function IssuesLayout(props: Route.ComponentProps) {
   return (
     <>
       <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
-        <div className="relative flex h-[60px] shrink-0 select-none items-center border-b border-subtle-1 bg-surface-1">
+        <div className="relative flex h-[60px] shrink-0 items-center border-b border-subtle-1 bg-surface-1 select-none">
           <IssuesNavbarRoot publishSettings={publishSettings} />
         </div>
-        <div className="relative size-full bg-surface-2 overflow-hidden">
+        <div className="relative size-full overflow-hidden bg-surface-2">
           <Outlet />
         </div>
       </div>
diff --git a/apps/space/app/not-found.tsx b/apps/space/app/not-found.tsx
index 8835c3d4d20..e137fdd8700 100644
--- a/apps/space/app/not-found.tsx
+++ b/apps/space/app/not-found.tsx
@@ -9,15 +9,15 @@ import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
 function NotFound() {
   return (
-    <div className="h-screen w-screen grid place-items-center bg-surface-1">
+    <div className="grid h-screen w-screen place-items-center bg-surface-1">
       <div className="text-center">
-        <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full">
-          <div className="size-16 md:size-32 grid place-items-center">
+        <div className="mx-auto grid size-32 place-items-center rounded-full md:size-52">
+          <div className="grid size-16 place-items-center md:size-32">
             <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
           </div>
         </div>
-        <h1 className="mt-8 md:mt-12 text-18 md:text-24 font-semibold">That didn{"'"}t work</h1>
-        <p className="mt-2 md:mt-4 text-13 md:text-14">
+        <h1 className="mt-8 text-18 font-semibold md:mt-12 md:text-24">That didn{"'"}t work</h1>
+        <p className="mt-2 text-13 md:mt-4 md:text-14">
           Check the URL you are entering in the browser{"'"}s address bar and try again.
         </p>
       </div>
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
index 7256d391c86..02a9a564993 100644
--- a/apps/space/app/page.tsx
+++ b/apps/space/app/page.tsx
@@ -35,7 +35,7 @@ const HomePage = observer(function HomePage() {
 
   if (isInitializing)
     return (
-      <div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
+      <div className="flex h-screen min-h-[500px] w-full items-center justify-center bg-surface-1">
         <LogoSpinner />
       </div>
     );
@@ -43,7 +43,7 @@ const HomePage = observer(function HomePage() {
   if (currentUser && isAuthenticated) {
     if (nextPath && isValidNextPath(nextPath)) {
       return (
-        <div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
+        <div className="flex h-screen min-h-[500px] w-full items-center justify-center bg-surface-1">
           <LogoSpinner />
         </div>
       );
diff --git a/apps/space/app/root.tsx b/apps/space/app/root.tsx
index de13a13f960..d04aced587e 100644
--- a/apps/space/app/root.tsx
+++ b/apps/space/app/root.tsx
@@ -90,7 +90,7 @@ export default function Root() {
 
 export function HydrateFallback() {
   return (
-    <div className="bg-surface-1 relative flex h-screen w-full items-center justify-center">
+    <div className="relative flex h-screen w-full items-center justify-center bg-surface-1">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/space/core/components/account/auth-forms/auth-banner.tsx b/apps/space/core/components/account/auth-forms/auth-banner.tsx
index 23c350560e4..4a9c517b7d4 100644
--- a/apps/space/core/components/account/auth-forms/auth-banner.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-banner.tsx
@@ -19,16 +19,16 @@ export function AuthBanner(props: TAuthBanner) {
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
-      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+    <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
+      <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
         <Info size={16} className="text-accent-primary" />
       </div>
       <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
       <div
-        className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary/80"
+        className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-accent-primary/20"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <CloseIcon className="w-4 h-4 flex-shrink-0" />
+        <CloseIcon className="h-4 w-4 flex-shrink-0" />
       </div>
     </div>
   );
diff --git a/apps/space/core/components/account/auth-forms/auth-header.tsx b/apps/space/core/components/account/auth-forms/auth-header.tsx
index 20df0cb4233..a2063fe736d 100644
--- a/apps/space/core/components/account/auth-forms/auth-header.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-header.tsx
@@ -50,8 +50,8 @@ export function AuthHeader(props: TAuthHeader) {
   return (
     <>
       <div className="flex flex-col gap-1">
-        <span className="text-20 font-semibold text-primary leading-7">{header}</span>
-        <span className="text-20 font-semibold text-placeholder leading-7">{subHeader}</span>
+        <span className="text-20 leading-7 font-semibold text-primary">{header}</span>
+        <span className="text-20 leading-7 font-semibold text-placeholder">{subHeader}</span>
       </div>
     </>
   );
diff --git a/apps/space/core/components/account/auth-forms/auth-root.tsx b/apps/space/core/components/account/auth-forms/auth-root.tsx
index 1c34193f7b5..d31649f789e 100644
--- a/apps/space/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-root.tsx
@@ -147,8 +147,8 @@ export const AuthRoot = observer(function AuthRoot() {
   };
 
   return (
-    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+    <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+      <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
         {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
           <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
         )}
diff --git a/apps/space/core/components/account/auth-forms/email.tsx b/apps/space/core/components/account/auth-forms/email.tsx
index c3970b59c00..303f9038e60 100644
--- a/apps/space/core/components/account/auth-forms/email.tsx
+++ b/apps/space/core/components/account/auth-forms/email.tsx
@@ -52,12 +52,12 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
   return (
     <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
       <div className="space-y-1">
-        <label className="text-13 text-tertiary font-medium" htmlFor="email">
+        <label className="text-13 font-medium text-tertiary" htmlFor="email">
           Email
         </label>
         <div
           className={cn(
-            `relative flex items-center rounded-md bg-surface-1 border`,
+            `relative flex items-center rounded-md border bg-surface-1`,
             !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-subtle`
           )}
           onFocus={() => {
@@ -74,7 +74,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-subtle border-0 focus:bg-none active:bg-transparent`}
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder autofill:bg-danger-subtle focus:bg-none active:bg-transparent`}
             autoComplete="off"
             autoFocus
             ref={inputRef}
@@ -89,12 +89,12 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
               }}
               tabIndex={-1}
             >
-              <XCircle className="h-10 w-11 px-3 stroke-placeholder hover:cursor-pointer text-11" />
+              <XCircle className="h-10 w-11 stroke-placeholder px-3 text-11 hover:cursor-pointer" />
             </button>
           )}
         </div>
         {emailError?.email && !isFocused && (
-          <p className="flex items-center gap-1 text-11 text-danger-primary px-0.5">
+          <p className="flex items-center gap-1 px-0.5 text-11 text-danger-primary">
             <CircleAlert height={12} width={12} />
             {emailError.email}
           </p>
diff --git a/apps/space/core/components/account/auth-forms/password.tsx b/apps/space/core/components/account/auth-forms/password.tsx
index 97cfa1fafb1..7bf8971fa4a 100644
--- a/apps/space/core/components/account/auth-forms/password.tsx
+++ b/apps/space/core/components/account/auth-forms/password.tsx
@@ -125,7 +125,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
         <label className="text-13 font-medium text-tertiary" htmlFor="email">
           Email
         </label>
-        <div className={`relative flex items-center rounded-md bg-surface-1 border border-subtle`}>
+        <div className={`relative flex items-center rounded-md border border-subtle bg-surface-1`}>
           <Input
             id="email"
             name="email"
@@ -133,7 +133,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             value={passwordFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
             disabled
           />
           {passwordFormData.email.length > 0 && (
@@ -146,7 +146,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
       </div>
 
       <div className="space-y-1">
-        <label className="text-13 text-tertiary font-medium" htmlFor="password">
+        <label className="text-13 font-medium text-tertiary" htmlFor="password">
           {mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
         </label>
         <div className="relative flex items-center rounded-md bg-surface-1">
@@ -156,7 +156,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             value={passwordFormData.password}
             onChange={(e) => handleFormChange("password", e.target.value)}
             placeholder="Enter password"
-            className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
+            className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
             onFocus={() => setIsPasswordInputFocused(true)}
             onBlur={() => setIsPasswordInputFocused(false)}
             autoComplete="off"
@@ -179,7 +179,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
 
       {mode === EAuthModes.SIGN_UP && (
         <div className="space-y-1">
-          <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
             Confirm password
           </label>
           <div className="relative flex items-center rounded-md bg-surface-1">
@@ -189,7 +189,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               value={passwordFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder="Confirm password"
-              className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
+              className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
               autoComplete="off"
diff --git a/apps/space/core/components/account/auth-forms/unique-code.tsx b/apps/space/core/components/account/auth-forms/unique-code.tsx
index 6a5f4e0fade..c1dd21278b6 100644
--- a/apps/space/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/core/components/account/auth-forms/unique-code.tsx
@@ -89,7 +89,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
         <label className="text-13 font-medium text-tertiary" htmlFor="email">
           Email
         </label>
-        <div className={`relative flex items-center rounded-md bg-surface-1 border border-subtle`}>
+        <div className={`relative flex items-center rounded-md border border-subtle bg-surface-1`}>
           <Input
             id="email"
             name="email"
@@ -97,7 +97,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
             value={uniqueCodeFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
             autoComplete="off"
             disabled
           />
@@ -119,11 +119,11 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
           placeholder="123456"
-          className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
+          className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
           autoComplete="off"
           autoFocus
         />
-        <div className="flex w-full items-center justify-between px-1 text-11 pt-1">
+        <div className="flex w-full items-center justify-between px-1 pt-1 text-11">
           <p className="flex items-center gap-1 font-medium text-success-primary">
             <CircleCheck height={12} width={12} />
             Paste the code sent to your email
diff --git a/apps/space/core/components/account/terms-and-conditions.tsx b/apps/space/core/components/account/terms-and-conditions.tsx
index c683e9fc189..3cca35b93e4 100644
--- a/apps/space/core/components/account/terms-and-conditions.tsx
+++ b/apps/space/core/components/account/terms-and-conditions.tsx
@@ -14,7 +14,7 @@ export function TermsAndConditions(props: Props) {
   const { isSignUp = false } = props;
   return (
     <span className="flex items-center justify-center py-6">
-      <p className="text-center text-13 text-secondary whitespace-pre-line">
+      <p className="text-center text-13 whitespace-pre-line text-secondary">
         {isSignUp ? "By creating an account" : "By signing in"}, you agree to our{" \n"}
         <Link href="https://plane.so/legals/terms-and-conditions" target="_blank" rel="noopener noreferrer">
           <span className="text-13 font-medium underline hover:cursor-pointer">Terms of Service</span>
diff --git a/apps/space/core/components/account/user-logged-in.tsx b/apps/space/core/components/account/user-logged-in.tsx
index e6dd723dbd6..42815b013b4 100644
--- a/apps/space/core/components/account/user-logged-in.tsx
+++ b/apps/space/core/components/account/user-logged-in.tsx
@@ -21,21 +21,21 @@ export const UserLoggedIn = observer(function UserLoggedIn() {
   if (!user) return null;
 
   return (
-    <div className="flex flex-col h-screen w-screen">
+    <div className="flex h-screen w-screen flex-col">
       <div className="relative flex w-full items-center justify-between gap-4 border-b border-subtle px-6 py-5">
         <PlaneLockup className="h-6 w-auto text-primary" />
         <UserAvatar />
       </div>
 
-      <div className="size-full grid place-items-center p-6">
+      <div className="grid size-full place-items-center p-6">
         <div className="text-center">
-          <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-layer-1">
-            <div className="size-16 md:size-32 grid place-items-center">
-              <img src={UserLoggedInImage} alt="User already logged in" className="w-full h-full object-cover" />
+          <div className="mx-auto grid size-32 place-items-center rounded-full bg-layer-1 md:size-52">
+            <div className="grid size-16 place-items-center md:size-32">
+              <img src={UserLoggedInImage} alt="User already logged in" className="h-full w-full object-cover" />
             </div>
           </div>
-          <h1 className="mt-8 md:mt-12 text-18 md:text-24 font-semibold">Nice! Just one more step.</h1>
-          <p className="mt-2 md:mt-4 text-13 md:text-14">
+          <h1 className="mt-8 text-18 font-semibold md:mt-12 md:text-24">Nice! Just one more step.</h1>
+          <p className="mt-2 text-13 md:mt-4 md:text-14">
             Enter the public-share URL or link of the view or Page you are trying to see in the browser{"'"}s address
             bar.
           </p>
diff --git a/apps/space/core/components/common/powered-by.tsx b/apps/space/core/components/common/powered-by.tsx
index af64caedd3c..05da512100b 100644
--- a/apps/space/core/components/common/powered-by.tsx
+++ b/apps/space/core/components/common/powered-by.tsx
@@ -21,7 +21,7 @@ export function PoweredBy(props: TPoweredBy) {
   return (
     <a
       href={WEBSITE_URL}
-      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
+      className="fixed right-5 bottom-2.5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
       target="_blank"
       rel="noreferrer noopener"
     >
diff --git a/apps/space/core/components/editor/embeds/mentions/user.tsx b/apps/space/core/components/editor/embeds/mentions/user.tsx
index 6e4eb52bf4f..24c817df4a1 100644
--- a/apps/space/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/space/core/components/editor/embeds/mentions/user.tsx
@@ -25,7 +25,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
 
   if (!userDetails) {
     return (
-      <div className="not-prose inline px-1 py-0.5 rounded-sm bg-layer-1 text-tertiary no-underline">
+      <div className="not-prose inline rounded-sm bg-layer-1 px-1 py-0.5 text-tertiary no-underline">
         @deactivated user
       </div>
     );
@@ -33,7 +33,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
 
   return (
     <div
-      className={cn("not-prose inline px-1 py-0.5 rounded-sm bg-accent-primary/20 text-accent-primary no-underline", {
+      className={cn("not-prose inline rounded-sm bg-accent-primary/20 px-1 py-0.5 text-accent-primary no-underline", {
         "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
       })}
     >
diff --git a/apps/space/core/components/editor/lite-text-editor.tsx b/apps/space/core/components/editor/lite-text-editor.tsx
index 0dbcb0b1997..89fb1ce4d8a 100644
--- a/apps/space/core/components/editor/lite-text-editor.tsx
+++ b/apps/space/core/components/editor/lite-text-editor.tsx
@@ -65,7 +65,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
   });
 
   return (
-    <div className="border border-subtle rounded-sm p-3 space-y-3">
+    <div className="space-y-3 rounded-sm border border-subtle p-3">
       <LiteTextEditorWithRef
         ref={ref}
         disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
diff --git a/apps/space/core/components/editor/toolbar.tsx b/apps/space/core/components/editor/toolbar.tsx
index 54369fd5ee9..ce2a0a2c6b7 100644
--- a/apps/space/core/components/editor/toolbar.tsx
+++ b/apps/space/core/components/editor/toolbar.tsx
@@ -81,7 +81,7 @@ export function IssueCommentToolbar(props: Props) {
                       type="button"
                       onClick={() => executeCommand(item)}
                       className={cn(
-                        "grid place-items-center aspect-square rounded-xs p-0.5 text-placeholder hover:bg-layer-transparent-hover",
+                        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder hover:bg-layer-transparent-hover",
                         {
                           "bg-layer-transparent-hover text-primary": isItemActive,
                         }
diff --git a/apps/space/core/components/instance/instance-failure-view.tsx b/apps/space/core/components/instance/instance-failure-view.tsx
index bc4e153a8ba..2bf810e9d01 100644
--- a/apps/space/core/components/instance/instance-failure-view.tsx
+++ b/apps/space/core/components/instance/instance-failure-view.tsx
@@ -20,12 +20,12 @@ export function InstanceFailureView() {
   };
 
   return (
-    <div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
+    <div className="relative container mx-auto flex h-screen items-center justify-center overflow-x-hidden overflow-y-auto px-5">
+      <div className="relative w-auto max-w-2xl space-y-8 py-10">
+        <div className="relative flex flex-col items-center justify-center space-y-4">
           <img src={instanceImage} alt="Plane instance failure image" />
-          <h3 className="font-medium text-20 text-on-color ">Unable to fetch instance details.</h3>
-          <p className="font-medium text-14 text-center">
+          <h3 className="text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
+          <p className="text-center text-14 font-medium">
             We were unable to fetch the details of the instance. <br />
             Fret not, it might just be a connectivity work items.
           </p>
diff --git a/apps/space/core/components/issues/filters/labels.tsx b/apps/space/core/components/issues/filters/labels.tsx
index 50c1fa81d81..db235c5b798 100644
--- a/apps/space/core/components/issues/filters/labels.tsx
+++ b/apps/space/core/components/issues/filters/labels.tsx
@@ -73,7 +73,7 @@ export function FilterLabels(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/space/core/components/issues/filters/priority.tsx b/apps/space/core/components/issues/filters/priority.tsx
index 06103d5eed3..06e4a532a81 100644
--- a/apps/space/core/components/issues/filters/priority.tsx
+++ b/apps/space/core/components/issues/filters/priority.tsx
@@ -52,7 +52,7 @@ export const FilterPriority = observer(function FilterPriority(props: Props) {
               />
             ))
           ) : (
-            <p className="text-11 italic text-placeholder">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/apps/space/core/components/issues/filters/state.tsx b/apps/space/core/components/issues/filters/state.tsx
index c11efb84a51..f9275a2d24e 100644
--- a/apps/space/core/components/issues/filters/state.tsx
+++ b/apps/space/core/components/issues/filters/state.tsx
@@ -73,7 +73,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/space/core/components/issues/issue-layouts/error.tsx b/apps/space/core/components/issues/issue-layouts/error.tsx
index 97f7cdd91c9..40e4f554038 100644
--- a/apps/space/core/components/issues/issue-layouts/error.tsx
+++ b/apps/space/core/components/issues/issue-layouts/error.tsx
@@ -9,14 +9,14 @@ import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
 export function SomethingWentWrongError() {
   return (
-    <div className="bg-surface-1 grid min-h-screen w-full place-items-center p-6">
+    <div className="grid min-h-screen w-full place-items-center bg-surface-1 p-6">
       <div className="text-center">
         <div className="mx-auto grid h-52 w-52 place-items-center rounded-full">
           <div className="grid h-32 w-32 place-items-center">
             <img
               src={SomethingWentWrongImage}
               alt="Oops! Something went wrong"
-              className="w-full h-full object-contain"
+              className="h-full w-full object-contain"
             />
           </div>
         </div>
diff --git a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
index f6e481feff6..6a9a719bcd3 100644
--- a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
+++ b/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
@@ -27,14 +27,14 @@ export const IssueLayoutHOC = observer(function IssueLayoutHOC(props: Props) {
 
   if (getIssueLoader() === "init-loader" || issueCount === undefined) {
     return (
-      <div className="relative size-full grid place-items-center">
+      <div className="relative grid size-full place-items-center">
         <LogoSpinner />
       </div>
     );
   }
 
   if (getGroupIssueCount(undefined, undefined, false) === 0) {
-    return <div className="size-full grid place-items-center text-secondary">No work items found</div>;
+    return <div className="grid size-full place-items-center text-secondary">No work items found</div>;
   }
 
   return <>{props.children}</>;
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 462d1d1ca80..6da0ce2e2bc 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -55,7 +55,7 @@ export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(pro
   return (
     <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
       <div
-        className="horizontal-scrollbar scrollbar-lg relative flex size-full overflow-x-auto overflow-y-hidden"
+        className="horizontal-scrollbar relative flex scrollbar-lg size-full overflow-x-auto overflow-y-hidden"
         ref={scrollableContainerRef}
       >
         <div className="relative h-full w-max min-w-full">
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx b/apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
index b4590af2743..78e16a43c79 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
@@ -26,12 +26,12 @@ export const BlockReactions = observer(function BlockReactions(props: Props) {
   if (!canVote && !canReact) return <></>;
 
   return (
-    <div className="flex flex-wrap border-t-[1px] outline-transparent w-full border-t-subtle-1 bg-surface-2 rounded-b-lg">
-      <div className="py-2 px-3 flex flex-wrap items-center gap-2">
+    <div className="flex w-full flex-wrap rounded-b-lg border-t-[1px] border-t-subtle-1 bg-surface-2 outline-transparent">
+      <div className="flex flex-wrap items-center gap-2 px-3 py-2">
         {canVote && (
           <div
             className={cn(`flex items-center gap-2 pr-1`, {
-              "after:h-6 after:ml-1 after:w-[1px] after:bg-layer-3": canReact,
+              "after:ml-1 after:h-6 after:w-[1px] after:bg-layer-3": canReact,
             })}
           >
             <IssueVotes anchor={anchor.toString()} issueIdFromProps={issueId} size="sm" />
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx b/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
index abc1147ace4..2fb44344b8b 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
@@ -56,14 +56,14 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
         </div>
       </WithDisplayPropertiesHOC>
 
-      <div className="w-full line-clamp-1 text-13 text-primary mb-1.5">
+      <div className="mb-1.5 line-clamp-1 w-full text-13 text-primary">
         <Tooltip tooltipContent={issue.name}>
           <span>{issue.name}</span>
         </Tooltip>
       </div>
 
       <IssueProperties
-        className="flex flex-wrap items-center gap-2 whitespace-nowrap text-tertiary pt-1.5"
+        className="flex flex-wrap items-center gap-2 pt-1.5 whitespace-nowrap text-tertiary"
         issue={issue}
         displayProperties={displayProperties}
       />
@@ -93,7 +93,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
     <div className={cn("group/kanban-block relative p-1.5")}>
       <div
         className={cn(
-          "relative block w-full border border-subtle border-strong bg-layer-2 text-13 transition-all rounded-lg bg-layer-2 hover:bg-layer-2-hover",
+          "relative block w-full rounded-lg border border-strong border-subtle bg-layer-2 text-13 transition-all hover:bg-layer-2-hover",
           {
             "border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
           }
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/default.tsx b/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
index 3c0ffd7f544..fa934aeb995 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
@@ -86,7 +86,7 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
   };
 
   return (
-    <div className="relative size-full flex gap-2 px-2">
+    <div className="relative flex size-full gap-2 px-2">
       {groupList?.map((subList) => {
         const groupByVisibilityToggle = visibilityGroupBy(subList);
 
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 99897e870db..b66127ca422 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -21,13 +21,13 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
 
   return (
     <>
-      <div className="relative flex shrink-0 gap-2 p-1.5 w-full flex-row items-center">
+      <div className="relative flex w-full shrink-0 flex-row items-center gap-2 p-1.5">
         <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-xs">
           {icon ? icon : <Circle width={14} strokeWidth={2} />}
         </div>
-        <div className="relative flex items-center gap-1 w-full flex-row overflow-hidden">
-          <div className="line-clamp-1 inline-block overflow-hidden truncate font-medium text-primary">{title}</div>
-          <div className="shrink-0 text-13 font-medium text-tertiary pl-2">{count || 0}</div>
+        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
+          <div className="line-clamp-1 inline-block truncate overflow-hidden font-medium text-primary">{title}</div>
+          <div className="shrink-0 pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
         </div>
       </div>
     </>
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 619f681ab75..6f429aeb86c 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -21,7 +21,7 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
   const { icon, title, count, isExpanded, toggleExpanded } = props;
   return (
     <div
-      className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-xs p-1.5 cursor-pointer`}
+      className={`relative flex w-full flex-shrink-0 cursor-pointer flex-row items-center gap-2 rounded-xs p-1.5`}
       onClick={() => toggleExpanded()}
     >
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index 6786881763a..360b5e901e4 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -45,7 +45,7 @@ const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader(
   ref: React.ForwardedRef<HTMLSpanElement>
 ) {
   return (
-    <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-[var(--illustration-fill-quaternary)] rounded-sm" />
+    <span ref={ref} className="m-1.5 block h-28 animate-pulse rounded-sm bg-[var(--illustration-fill-quaternary)]" />
   );
 });
 KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
@@ -96,7 +96,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <KanbanIssueBlockLoader />
   ) : (
     <div
-      className="w-full p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
+      className="w-full cursor-pointer p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       onClick={loadMoreIssuesInThisGroup}
       role="button"
     >
@@ -110,7 +110,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
   return (
     <div
       id={`${groupId}__${subGroupId}`}
-      className={cn("relative h-full transition-all min-h-[120px]", { "vertical-scrollbar scrollbar-md": !subGroupBy })}
+      className={cn("relative h-full min-h-[120px] transition-all", { "vertical-scrollbar scrollbar-md": !subGroupBy })}
       ref={columnRef}
     >
       <KanbanIssueBlocksList
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
index f91dea832e8..977bf5bb0a2 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -275,7 +275,7 @@ const SubGroup = observer(function SubGroup(props: ISubGroup) {
   return (
     <>
       <div className="flex flex-shrink-0 flex-col">
-        <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-layer-1 border-y-[0.5px] border-subtle">
+        <div className="sticky top-[50px] z-[3] flex w-full items-center border-y-[0.5px] border-subtle bg-layer-1 py-1">
           <div className="sticky left-0 flex-shrink-0">
             <HeaderSubGroupByCard
               icon={group.icon as any}
diff --git a/apps/space/core/components/issues/issue-layouts/list/block.tsx b/apps/space/core/components/issues/issue-layouts/list/block.tsx
index 026a580164b..69b4373f3fd 100644
--- a/apps/space/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/block.tsx
@@ -56,7 +56,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
     <div
       ref={issueRef}
       className={cn(
-        "group/list-block min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 hover:bg-layer-transparent-hover p-3 pl-1.5 text-13 transition-colors border border-transparent border-b-subtle",
+        "group/list-block relative flex min-h-11 flex-col gap-3 border border-transparent border-b-subtle p-3 pl-1.5 text-13 transition-colors hover:bg-layer-transparent-hover md:flex-row md:items-center",
         {
           "border-accent-strong!": getIsIssuePeeked(issue.id),
           "last:border-b-transparent": !getIsIssuePeeked(issue.id),
@@ -67,7 +67,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
         <div className="flex grow items-center gap-0.5 truncate">
           <div className="flex items-center gap-1">
             {displayProperties && displayProperties?.key && (
-              <div className="shrink-0 text-11 font-medium text-tertiary px-4">
+              <div className="shrink-0 px-4 text-11 font-medium text-tertiary">
                 {projectIdentifier}-{issue.sequence_id}
               </div>
             )}
@@ -77,7 +77,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
             id={`issue-${issue.id}`}
             href={`?${queryParam}`}
             onClick={handleIssuePeekOverview}
-            className="w-full truncate cursor-pointer text-13 text-primary"
+            className="w-full cursor-pointer truncate text-13 text-primary"
           >
             <Tooltip tooltipContent={issue.name} position="top-start">
               <p className="truncate">{issue.name}</p>
@@ -87,7 +87,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
       </div>
       <div className="flex shrink-0 items-center gap-2">
         <IssueProperties
-          className="relative flex flex-wrap md:grow md:shrink-0 items-center gap-2 whitespace-nowrap"
+          className="relative flex flex-wrap items-center gap-2 whitespace-nowrap md:shrink-0 md:grow"
           issue={issue}
           displayProperties={displayProperties}
         />
diff --git a/apps/space/core/components/issues/issue-layouts/list/default.tsx b/apps/space/core/components/issues/issue-layouts/list/default.tsx
index 776245c310d..f8f545b47ee 100644
--- a/apps/space/core/components/issues/issue-layouts/list/default.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/default.tsx
@@ -65,12 +65,12 @@ export const List = observer(function List(props: IList) {
   if (!groupList) return null;
 
   return (
-    <div className="relative size-full flex flex-col">
+    <div className="relative flex size-full flex-col">
       {groupList && (
         <>
           <div
             ref={containerRef}
-            className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
+            className="vertical-scrollbar vertical-scrollbar-margin-top-md relative scrollbar-lg size-full overflow-auto"
           >
             {groupList.map((group) => (
               <ListGroup
diff --git a/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 2c5f5efd62c..5f37484face 100644
--- a/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -21,16 +21,16 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
   return (
     <>
       <div
-        className="group/list-header relative w-full shrink-0 flex items-center gap-2 py-1.5 hover:bg-layer-transparent-hover px-2 py-1"
+        className="group/list-header relative flex w-full shrink-0 items-center gap-2 px-2 py-1 py-1.5 hover:bg-layer-transparent-hover"
         onClick={() => toggleListGroup(groupID)}
         role="button"
       >
-        <div className="shrink-0 size-3.5 grid place-items-center overflow-hidden">
+        <div className="grid size-3.5 shrink-0 place-items-center overflow-hidden">
           {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
         </div>
 
-        <div className="relative flex w-full items-center gap-1 overflow-hidden cursor-pointer">
-          <div className="inline-block line-clamp-1 truncate font-medium text-primary">{title}</div>
+        <div className="relative flex w-full cursor-pointer items-center gap-1 overflow-hidden">
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
           <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
         </div>
       </div>
diff --git a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx b/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
index e78c2aaa715..26bc4993515 100644
--- a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
@@ -47,15 +47,15 @@ const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   return (
-    <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-subtle">
+    <div ref={ref} className="flex h-11 items-center justify-between border-b border-subtle p-3">
       <div className="flex items-center gap-3">
-        <span className="h-5 w-10 bg-layer-1 rounded-sm animate-pulse" />
-        <span className={`h-5 w-52 bg-layer-1 rounded-sm animate-pulse`} />
+        <span className="h-5 w-10 animate-pulse rounded-sm bg-layer-1" />
+        <span className={`h-5 w-52 animate-pulse rounded-sm bg-layer-1`} />
       </div>
       <div className="flex items-center gap-2">
         {[...Array(6)].map((_, index) => (
           <Fragment key={index}>
-            <span key={index} className="h-5 w-5 bg-layer-1 rounded-sm animate-pulse" />
+            <span key={index} className="h-5 w-5 animate-pulse rounded-sm bg-layer-1" />
           </Fragment>
         ))}
       </div>
@@ -100,7 +100,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   ) : (
     <div
       className={
-        "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-6 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
+        "relative flex h-11 cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-6 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       }
       onClick={() => loadMoreIssues(group.id)}
       role="button"
diff --git a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
index 948593c8dcc..9d9c9dace58 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -143,7 +143,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
             className={cn(
               "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1",
               {
-                "hover:bg-layer-1 cursor-pointer": issue.sub_issues_count,
+                "cursor-pointer hover:bg-layer-1": issue.sub_issues_count,
               }
             )}
           >
diff --git a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx b/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
index 38b6cae326b..4f70bac2a5b 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
@@ -27,13 +27,13 @@ export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shou
     <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? "No Cycle"}>
       <div
         className={cn(
-          "flex h-full w-full items-center justify-between gap-1 rounded-sm px-2.5 py-1 text-11  duration-300 focus:outline-none",
+          "flex h-full w-full items-center justify-between gap-1 rounded-sm px-2.5 py-1 text-11 duration-300 focus:outline-none",
           { "border-[0.5px] border-strong": shouldShowBorder }
         )}
       >
-        <div className="flex w-full items-center text-11 gap-1.5">
+        <div className="flex w-full items-center gap-1.5 text-11">
           <CycleIcon className="h-3 w-3 flex-shrink-0" />
-          <div className="max-w-40 truncate ">{cycle?.name ?? "No Cycle"}</div>
+          <div className="max-w-40 truncate">{cycle?.name ?? "No Cycle"}</div>
         </div>
       </div>
     </Tooltip>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/labels.tsx b/apps/space/core/components/issues/issue-layouts/properties/labels.tsx
index df08e946fc1..4a6d1ab0a03 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/labels.tsx
@@ -27,7 +27,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
     return (
       <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
         <div
-          className={`flex h-full items-center justify-center gap-2 rounded-sm px-2.5 py-1 text-11 border-[0.5px] border-strong`}
+          className={`flex h-full items-center justify-center gap-2 rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
           <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
           {shouldShowLabel && <span>No Labels</span>}
@@ -43,7 +43,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
             <Tooltip key={label.id} position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
               <div
                 key={label?.id}
-                className={`flex overflow-hidden h-full max-w-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
+                className={`flex h-full max-w-full flex-shrink-0 items-center overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
               >
                 <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-secondary">
                   <span
@@ -60,8 +60,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
         </>
       ) : (
         <div
-          className={`flex h-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11 cursor-not-allowed"
-            `}
+          className={`cursor-not-allowed" flex h-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
           <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelsString}>
             <div className="flex h-full items-center gap-1.5 text-secondary">
diff --git a/apps/space/core/components/issues/issue-layouts/properties/member.tsx b/apps/space/core/components/issues/issue-layouts/properties/member.tsx
index b2116e9d9e9..c24f115932e 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/member.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/member.tsx
@@ -56,7 +56,7 @@ export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps)
   return Icon ? (
     <Icon className="h-3 w-3 flex-shrink-0" />
   ) : (
-    <MembersPropertyIcon className="h-3 w-3 mx-[4px] flex-shrink-0" />
+    <MembersPropertyIcon className="mx-[4px] h-3 w-3 flex-shrink-0" />
   );
 });
 
@@ -66,7 +66,7 @@ export const IssueBlockMembers = observer(function IssueBlockMembers({ memberIds
   const members = getMembersByIds(memberIds);
 
   return (
-    <div className="relative h-full flex flex-wrap items-center gap-1">
+    <div className="relative flex h-full flex-wrap items-center gap-1">
       <div
         className={cn("flex flex-shrink-0 cursor-default items-center rounded-md text-11", {
           "border-[0.5px] border-strong px-2.5 py-1": shouldShowBorder && !members?.length,
diff --git a/apps/space/core/components/issues/issue-layouts/properties/priority.tsx b/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
index 34436de7851..9b4dc3d0176 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
@@ -38,7 +38,7 @@ export function IssueBlockPriority({
     <Tooltip tooltipHeading="Priority" tooltipContent={t(priority_detail?.titleTranslationKey || "")}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] rounded-sm text-11 px-2 py-0.5",
+          "flex h-full items-center gap-1.5 rounded-sm border-[0.5px] px-2 py-0.5 text-11",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
diff --git a/apps/space/core/components/issues/navbar/layout-selection.tsx b/apps/space/core/components/issues/navbar/layout-selection.tsx
index 74cf5370b65..927fd7d13cc 100644
--- a/apps/space/core/components/issues/navbar/layout-selection.tsx
+++ b/apps/space/core/components/issues/navbar/layout-selection.tsx
@@ -56,7 +56,7 @@ export const IssuesLayoutSelection = observer(function IssuesLayoutSelection(pro
           <Tooltip key={layout.key} tooltipContent={t(layout.titleTranslationKey)}>
             <button
               type="button"
-              className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all bg-layer-transparent hover:bg-layer-transparent-hover ${
+              className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover ${
                 activeLayout == layout.key ? "bg-layer-transparent-active hover:bg-layer-transparent-selected" : ""
               }`}
               onClick={() => handleCurrentBoardView(layout.key)}
diff --git a/apps/space/core/components/issues/navbar/root.tsx b/apps/space/core/components/issues/navbar/root.tsx
index 4bc3254bdbf..7f5221f646f 100644
--- a/apps/space/core/components/issues/navbar/root.tsx
+++ b/apps/space/core/components/issues/navbar/root.tsx
@@ -23,11 +23,11 @@ export const IssuesNavbarRoot = observer(function IssuesNavbarRoot(props: Props)
   const { project_details } = publishSettings;
 
   return (
-    <div className="relative flex justify-between w-full gap-4 px-5">
+    <div className="relative flex w-full justify-between gap-4 px-5">
       {/* project detail */}
       <div className="flex shrink-0 items-center gap-2">
         {project_details ? (
-          <span className="size-7 shrink-0 grid place-items-center">
+          <span className="grid size-7 shrink-0 place-items-center">
             <ProjectLogo logo={project_details.logo_props} className="text-16" />
           </span>
         ) : (
diff --git a/apps/space/core/components/issues/navbar/theme.tsx b/apps/space/core/components/issues/navbar/theme.tsx
index 4e241b751f6..63c85e3cdff 100644
--- a/apps/space/core/components/issues/navbar/theme.tsx
+++ b/apps/space/core/components/issues/navbar/theme.tsx
@@ -28,9 +28,9 @@ export const NavbarTheme = observer(function NavbarTheme() {
     <button
       type="button"
       onClick={handleTheme}
-      className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover text-primary"
+      className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent text-primary hover:bg-layer-transparent-hover"
     >
-      {appTheme === "light" ? <Moon className="shrink-0 size-3.5" /> : <Sun className="shrink-0 size-3.5" />}
+      {appTheme === "light" ? <Moon className="size-3.5 shrink-0" /> : <Sun className="size-3.5 shrink-0" />}
     </button>
   );
 });
diff --git a/apps/space/core/components/issues/navbar/user-avatar.tsx b/apps/space/core/components/issues/navbar/user-avatar.tsx
index ad877818678..ac7cb03a2a1 100644
--- a/apps/space/core/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/core/components/issues/navbar/user-avatar.tsx
@@ -93,7 +93,7 @@ export const UserAvatar = observer(function UserAvatar() {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200 p-1"
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-raised-200"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
@@ -104,7 +104,7 @@ export const UserAvatar = observer(function UserAvatar() {
                       <input type="hidden" name="next_path" value={`${pathName}?${queryParam}`} />
                       <button
                         type="submit"
-                        className="flex items-center gap-2 rounded-sm p-2 whitespace-nowrap hover:bg-layer-transparent-hover text-13 min-w-36 cursor-pointer"
+                        className="flex min-w-36 cursor-pointer items-center gap-2 rounded-sm p-2 text-13 whitespace-nowrap hover:bg-layer-transparent-hover"
                       >
                         <LogOut size={12} className="shrink-0 text-danger-primary" />
                         <div>Sign out</div>
diff --git a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
index 73a0201597c..27506d837bb 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -80,7 +80,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
           />
         ) : (
           <div
-            className={`grid size-7 place-items-center rounded-full border-2 border-strong-1 bg-gray-500 text-on-color`}
+            className={`bg-gray-500 grid size-7 place-items-center rounded-full border-2 border-strong-1 text-on-color`}
           >
             {comment.actor_detail.is_bot
               ? comment?.actor_detail?.first_name?.charAt(0)
@@ -88,7 +88,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
           </div>
         )}
 
-        <span className="absolute -bottom-0.5 -right-1 rounded-tl-sm bg-layer-1 px-0.5 py-px">
+        <span className="absolute -right-1 -bottom-0.5 rounded-tl-sm bg-layer-1 px-0.5 py-px">
           <MessageSquare className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
         </span>
       </div>
@@ -138,13 +138,13 @@ export const CommentCard = observer(function CommentCard(props: Props) {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-success-primary"
+                className="group shadow-md rounded-sm border border-success-strong bg-success-primary p-2 duration-300 hover:bg-success-primary"
               >
                 <CheckIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
               </button>
               <button
                 type="button"
-                className="group rounded-sm border border-danger-strong bg-danger-primary p-2 shadow-md duration-300 hover:bg-danger-primary-hover"
+                className="group shadow-md rounded-sm border border-danger-strong bg-danger-primary p-2 duration-300 hover:bg-danger-primary-hover"
                 onClick={() => setIsEditing(false)}
               >
                 <CloseIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
@@ -186,7 +186,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-strong bg-surface-1 p-1 text-11 shadow-lg focus:outline-none">
+            <Menu.Items className="shadow-lg absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll rounded-md border border-strong bg-surface-1 p-1 text-11 whitespace-nowrap focus:outline-none">
               <Menu.Item>
                 {({ active }) => (
                   <div className="py-1">
@@ -195,7 +195,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className={`w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-transparent-hover ${
+                      className={`w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none hover:bg-layer-transparent-hover ${
                         active ? "bg-layer-transparent-hover" : ""
                       }`}
                     >
@@ -210,7 +210,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                     <button
                       type="button"
                       onClick={handleDelete}
-                      className={`w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-transparent-hover ${
+                      className={`w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none hover:bg-layer-transparent-hover ${
                         active ? "bg-layer-transparent-hover" : ""
                       }`}
                     >
diff --git a/apps/space/core/components/issues/peek-overview/header.tsx b/apps/space/core/components/issues/peek-overview/header.tsx
index ff98e47e9ea..764ac4ebf87 100644
--- a/apps/space/core/components/issues/peek-overview/header.tsx
+++ b/apps/space/core/components/issues/peek-overview/header.tsx
@@ -92,14 +92,14 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-strong bg-surface-2 text-11 shadow-lg focus:outline-none">
+              <Listbox.Options className="shadow-lg absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto rounded-md border border-strong bg-surface-2 text-11 whitespace-nowrap focus:outline-none">
                 <div className="space-y-1 p-2">
                   {PEEK_MODES.map((mode) => (
                     <Listbox.Option
                       key={mode.key}
                       value={mode.key}
                       className={({ active, selected }) =>
-                        `cursor-pointer select-none truncate rounded-sm px-1 py-1.5 ${
+                        `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
                           active ? "bg-layer-transparent-hover" : ""
                         } ${selected ? "text-primary" : "text-secondary"}`
                       }
@@ -119,7 +119,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
           <button
             type="button"
             onClick={handleCopyLink}
-            className="shrink-0 focus:outline-none text-tertiary hover:text-secondary"
+            className="shrink-0 text-tertiary hover:text-secondary focus:outline-none"
             tabIndex={1}
           >
             <LinkIcon className="h-4 w-4 -rotate-45" />
diff --git a/apps/space/core/components/issues/peek-overview/issue-activity.tsx b/apps/space/core/components/issues/peek-overview/issue-activity.tsx
index 68b93e1c0c0..eaadb903825 100644
--- a/apps/space/core/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-activity.tsx
@@ -58,8 +58,8 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
             </>
           ) : (
             <div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-2 px-2 py-2.5">
-              <p className="flex items-center gap-2 overflow-hidden break-words text-13 text-secondary">
-                <Lock className="shrink-0 size-3" />
+              <p className="flex items-center gap-2 overflow-hidden text-13 break-words text-secondary">
+                <Lock className="size-3 shrink-0" />
                 Sign in to add your comment
               </p>
               <Link href={`/?next_path=${pathname}`}>
diff --git a/apps/space/core/components/issues/peek-overview/issue-details.tsx b/apps/space/core/components/issues/peek-overview/issue-details.tsx
index 37b5e73ff63..51139b46031 100644
--- a/apps/space/core/components/issues/peek-overview/issue-details.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-details.tsx
@@ -30,7 +30,7 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
       <h6 className="text-14 font-medium text-placeholder">
         {project_details?.identifier}-{issueDetails?.sequence_id}
       </h6>
-      <h4 className="break-words text-20 font-medium">{issueDetails.name}</h4>
+      <h4 className="text-20 font-medium break-words">{issueDetails.name}</h4>
       {description && description !== "" && description !== "<p></p>" && (
         <RichTextEditor
           editable={false}
diff --git a/apps/space/core/components/issues/peek-overview/issue-properties.tsx b/apps/space/core/components/issues/peek-overview/issue-properties.tsx
index d476483ed38..1c010ddafaf 100644
--- a/apps/space/core/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-properties.tsx
@@ -69,31 +69,31 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
           </h6>
           <div className="flex items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <LinkIcon className="shrink-0 size-3.5" />
+              <LinkIcon className="size-3.5 shrink-0" />
             </button>
           </div>
         </div>
       )}
       <div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
-        <div className="flex items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+        <div className="flex h-8 items-center gap-3">
+          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
             <StatePropertyIcon className="size-4 flex-shrink-0" />
             <span>State</span>
           </div>
-          <div className="w-3/4 flex items-center gap-1.5 py-0.5 text-13">
+          <div className="flex w-3/4 items-center gap-1.5 py-0.5 text-13">
             <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
             {addSpaceIfCamelCase(state?.name ?? "")}
           </div>
         </div>
 
-        <div className="flex items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+        <div className="flex h-8 items-center gap-3">
+          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
             <PriorityPropertyIcon className="size-4 flex-shrink-0" />
             <span>Priority</span>
           </div>
           <div className="w-3/4">
             <div
-              className={`inline-flex items-center gap-1.5 rounded-sm px-2.5 py-0.5 text-left text-13 capitalize bg-layer-2 ${
+              className={`inline-flex items-center gap-1.5 rounded-sm bg-layer-2 px-2.5 py-0.5 text-left text-13 capitalize ${
                 priority?.key === "urgent"
                   ? "border-priority-urgent text-priority-urgent"
                   : priority?.key === "high"
@@ -111,8 +111,8 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
           </div>
         </div>
 
-        <div className="flex items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
+        <div className="flex h-8 items-center gap-3">
+          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
             <DueDatePropertyIcon className="size-4 flex-shrink-0" />
             <span>Due date</span>
           </div>
@@ -127,7 +127,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
                 {renderFormattedDate(issueDetails.target_date)}
               </div>
             ) : (
-              <span className="text-secondary text-13">Empty</span>
+              <span className="text-13 text-secondary">Empty</span>
             )}
           </div>
         </div>
diff --git a/apps/space/core/components/issues/peek-overview/layout.tsx b/apps/space/core/components/issues/peek-overview/layout.tsx
index ca12aff417c..ebde720fadd 100644
--- a/apps/space/core/components/issues/peek-overview/layout.tsx
+++ b/apps/space/core/components/issues/peek-overview/layout.tsx
@@ -74,7 +74,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-surface-1 shadow-raised-200 border-l border-subtle-1">
+            <Dialog.Panel className="fixed top-0 right-0 z-20 h-full w-1/2 border-l border-subtle-1 bg-surface-1 shadow-raised-200">
               <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
             </Dialog.Panel>
           </Transition.Child>
@@ -104,7 +104,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
           >
             <Dialog.Panel>
               <div
-                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-surface-1 transition-all duration-300 ${
+                className={`fixed top-1/2 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-surface-1 transition-all duration-300 ${
                   peekMode === "modal" ? "h-[70%] w-3/5" : "size-[95%]"
                 }`}
               >
diff --git a/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx b/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
index cafd3a19fd9..c41609317f0 100644
--- a/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
+++ b/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
@@ -106,7 +106,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
           className={cn(
-            "flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border focus:outline-none hover:bg-layer-transparent-hover",
+            "flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border hover:bg-layer-transparent-hover focus:outline-none",
             votingDimensions,
             {
               "border-accent-strong-200 text-accent-secondary": isUpVotedByUser,
@@ -115,7 +115,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             }
           )}
         >
-          <ArrowUp className="shrink-0 size-3.5" />
+          <ArrowUp className="size-3.5 shrink-0" />
           <span className="text-13 font-regular transition-opacity ease-in-out">{allUpVotes.length}</span>
         </button>
       </Tooltip>
@@ -147,7 +147,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
           className={cn(
-            "flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border focus:outline-none hover:bg-layer-transparent-hover",
+            "flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border hover:bg-layer-transparent-hover focus:outline-none",
             votingDimensions,
             {
               "border-danger-strong text-danger-primary": isDownVotedByUser,
@@ -156,7 +156,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             }
           )}
         >
-          <ArrowDown className="shrink-0 size-3.5" />
+          <ArrowDown className="size-3.5 shrink-0" />
           <span className="text-13 font-regular transition-opacity ease-in-out">{allDownVotes.length}</span>
         </button>
       </Tooltip>
diff --git a/apps/space/core/components/ui/not-found.tsx b/apps/space/core/components/ui/not-found.tsx
index 4b7267df26e..e3952f58c89 100644
--- a/apps/space/core/components/ui/not-found.tsx
+++ b/apps/space/core/components/ui/not-found.tsx
@@ -13,7 +13,7 @@ export function PageNotFound() {
       <div className="grid h-full place-items-center p-4">
         <div className="space-y-8 text-center">
           <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
-            <img src={Image404} alt="404- Page not found" className="w-full h-full object-contain" />
+            <img src={Image404} alt="404- Page not found" className="h-full w-full object-contain" />
           </div>
           <div className="space-y-2">
             <h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>
diff --git a/apps/space/core/components/views/auth.tsx b/apps/space/core/components/views/auth.tsx
index 7a5ea1980cb..11591ea8cf8 100644
--- a/apps/space/core/components/views/auth.tsx
+++ b/apps/space/core/components/views/auth.tsx
@@ -12,7 +12,7 @@ import { AuthHeader } from "./header";
 
 export function AuthView() {
   return (
-    <div className="bg-surface-1 relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-surface-1 px-8 pt-6 pb-10">
       <AuthHeader />
       <AuthRoot />
       <PoweredBy />
diff --git a/apps/space/core/components/views/header.tsx b/apps/space/core/components/views/header.tsx
index e78bcee0058..92b87507643 100644
--- a/apps/space/core/components/views/header.tsx
+++ b/apps/space/core/components/views/header.tsx
@@ -10,7 +10,7 @@ import { PlaneLockup } from "@plane/propel/icons";
 
 export function AuthHeader() {
   return (
-    <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
       <Link href="/">
         <PlaneLockup height={20} width={95} className="text-primary" />
       </Link>
diff --git a/apps/space/core/lib/instance-provider.tsx b/apps/space/core/lib/instance-provider.tsx
index 7ec9bfac97d..1fc38a6849c 100644
--- a/apps/space/core/lib/instance-provider.tsx
+++ b/apps/space/core/lib/instance-provider.tsx
@@ -41,7 +41,7 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
 
   if (!instance && !error)
     return (
-      <div className="flex items-center justify-center h-screen w-full">
+      <div className="flex h-screen w-full items-center justify-center">
         <LogoSpinner />
       </div>
     );
@@ -49,8 +49,8 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
   if (error) {
     return (
       <div className="relative">
-        <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
-          <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+        <div className="flex h-screen w-full flex-col overflow-hidden overflow-y-auto">
+          <div className="z-50 container mx-auto flex h-[110px] flex-shrink-0 items-center justify-between gap-5 px-5 lg:px-0">
             <div className="flex items-center gap-x-2 py-10">
               <Link href={`${SPACE_BASE_PATH}/`}>
                 <PlaneLockup className="h-7 w-auto text-primary" />
@@ -58,10 +58,10 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
             </div>
           </div>
           <div className="absolute inset-0 z-0">
-            <img src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+            <img src={patternBackground} className="h-full w-screen object-cover" alt="Plane background pattern" />
           </div>
           <div className="relative z-10 flex-grow">
-            <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+            <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-y-auto px-6 py-10">
               <InstanceFailureView />
             </div>
           </div>
diff --git a/apps/space/helpers/authentication.helper.tsx b/apps/space/helpers/authentication.helper.tsx
index a5c7eb8bc50..917fede7895 100644
--- a/apps/space/helpers/authentication.helper.tsx
+++ b/apps/space/helpers/authentication.helper.tsx
@@ -129,7 +129,7 @@ const errorCodeMessages: {
       <div>
         Your account is already registered.&nbsp;
         <Link
-          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
           href={`/sign-in${email ? `?email=${encodeURIComponent(email)}` : ``}`}
         >
           Sign In
@@ -171,7 +171,7 @@ const errorCodeMessages: {
       <div>
         No account found.&nbsp;
         <Link
-          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
           href={`/${email ? `?email=${encodeURIComponent(email)}` : ``}`}
         >
           Create one
@@ -317,7 +317,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -329,7 +329,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
diff --git a/apps/space/package.json b/apps/space/package.json
index 5cf9f734f18..35c105c87fb 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -12,9 +12,9 @@
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf .react-router && rm -rf node_modules && rm -rf dist && rm -rf build",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=932",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=932",
-    "fix:format": "prettier . --cache --write"
+    "fix:format": "oxfmt ."
   },
   "dependencies": {
     "@bprogress/core": "catalog:",
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
index 710b7773063..82fe31cce46 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
@@ -24,7 +24,7 @@ export const WorkspaceActiveCycleHeader = observer(function WorkspaceActiveCycle
             component={
               <BreadcrumbLink
                 label={t("active_cycles")}
-                icon={<CycleIcon className="h-4 w-4 text-tertiary rotate-180" />}
+                icon={<CycleIcon className="h-4 w-4 rotate-180 text-tertiary" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
index a77ec91e66e..63321351dfe 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -72,22 +72,22 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
       {workspaceProjectIds && (
         <>
           {workspaceProjectIds.length > 0 || loader === "init-loader" ? (
-            <div className="flex h-full overflow-hidden ">
-              <Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
-                <div className={"flex flex-col w-full h-full"}>
+            <div className="flex h-full overflow-hidden">
+              <Tabs value={selectedTab} onValueChange={handleTabChange} className="h-full w-full">
+                <div className={"flex h-full w-full flex-col"}>
                   <div
                     className={cn(
-                      "px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-surface-1"
+                      "flex w-full items-center justify-between gap-4 overflow-hidden border-b border-subtle bg-surface-1 px-6 py-2"
                     )}
                   >
-                    <Tabs.List className={"overflow-x-auto flex w-fit h-7"}>
+                    <Tabs.List className={"flex h-7 w-fit overflow-x-auto"}>
                       {ANALYTICS_TABS.map((tab) => (
                         <Tabs.Trigger
                           key={tab.key}
                           value={tab.key}
                           disabled={tab.isDisabled}
                           size="md"
-                          className="px-3 h-6"
+                          className="h-6 px-3"
                           onClick={() => {
                             if (!tab.isDisabled) {
                               handleTabChange(tab.key);
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
index 50f6bf84eb0..88df260539d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
@@ -38,9 +38,9 @@ export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDet
     <>
       {projectPreferences.navigationMode === "TABBED" && (
         <div className="z-20">
-          <Row className="h-header flex gap-2 w-full items-center border-b border-subtle bg-surface-1">
-            <div className="flex items-center gap-2 divide-x divide-subtle h-full w-full">
-              <div className="flex items-center gap-2 size-full flex-1">
+          <Row className="flex h-header w-full items-center gap-2 border-b border-subtle bg-surface-1">
+            <div className="flex h-full w-full items-center gap-2 divide-x divide-subtle">
+              <div className="flex size-full flex-1 items-center gap-2">
                 {sidebarCollapsed && (
                   <div className="shrink-0">
                     <AppSidebarToggleButton />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
index 51f98ba9fa0..348559cf0e8 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -110,15 +110,15 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
         excludedElementId="extended-project-sidebar-toggle"
         className="px-0"
       >
-        <div className="flex flex-col gap-1 w-full sticky top-4 px-4">
+        <div className="sticky top-4 flex w-full flex-col gap-1 px-4">
           <div className="flex items-center justify-between">
-            <span className="text-13 font-semibold text-tertiary py-1.5">Projects</span>
+            <span className="py-1.5 text-13 font-semibold text-tertiary">Projects</span>
             {isAuthorizedUser && (
               <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
                 <button
                   type="button"
                   data-ph-element={PROJECT_TRACKER_ELEMENTS.EXTENDED_SIDEBAR_ADD_BUTTON}
-                  className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0 text-tertiary hover:text-secondary transition-colors"
+                  className="flex-shrink-0 rounded-sm p-0.5 text-tertiary transition-colors hover:bg-layer-1 hover:text-secondary"
                   onClick={() => {
                     setIsProjectModalOpen(true);
                   }}
@@ -128,7 +128,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
               </Tooltip>
             )}
           </div>
-          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1 w-full">
+          <div className="ml-auto flex w-full items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1">
             <SearchIcon className="h-3.5 w-3.5 text-placeholder" />
             <input
               className="w-full max-w-[234px] border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
@@ -140,7 +140,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
           </div>
         </div>
         {filteredProjects.length === 0 ? (
-          <div className="flex flex-col items-center mt-4 p-10">
+          <div className="mt-4 flex flex-col items-center p-10">
             <EmptyStateCompact
               title={t("common_empty_state.search.title")}
               description={t("common_empty_state.search.description")}
@@ -150,7 +150,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
             />
           </div>
         ) : (
-          <div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 pl-9 pr-2">
+          <div className="vertical-scrollbar mt-4 flex scrollbar-sm flex-grow flex-col gap-0.5 overflow-x-hidden overflow-y-auto pr-2 pl-9">
             {filteredProjects.map((projectId, index) => (
               <SidebarProjectsListItem
                 key={projectId}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index cd51cd49247..561c21ed49a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -44,10 +44,10 @@ export const ExtendedSidebarWrapper = observer(function ExtendedSidebarWrapper(p
       id={excludedElementId}
       ref={extendedSidebarRef}
       className={cn(
-        "absolute h-full z-[21] flex flex-col py-2 transform transition-all duration-300 ease-in-out bg-surface-1 border-r border-subtle p-4 shadow-sm",
+        "shadow-sm absolute z-[21] flex h-full transform flex-col border-r border-subtle bg-surface-1 p-4 py-2 transition-all duration-300 ease-in-out",
         {
           "opacity-100": isExtendedSidebarOpened,
-          "opacity-0 hidden": !isExtendedSidebarOpened,
+          "hidden opacity-0": !isExtendedSidebarOpened,
         },
         className
       )}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
index 8ef999a0508..090eefbf6b1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
@@ -15,8 +15,8 @@ function WorkspaceLayout() {
   return (
     <>
       <ProjectsAppPowerKProvider />
-      <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-subtle">
-        <div id="full-screen-portal" className="inset-0 absolute w-full" />
+      <div className="relative flex h-full w-full flex-col overflow-hidden rounded-lg border border-subtle">
+        <div id="full-screen-portal" className="absolute inset-0 w-full" />
         <div className="relative flex size-full overflow-hidden">
           <ProjectAppSidebar />
           <ExtendedProjectSidebar />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
index 34f9c58ac56..5188dfd419c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
@@ -10,9 +10,9 @@ import { NotificationsSidebarRoot } from "@/components/workspace-notifications/s
 
 export default function ProjectInboxIssuesLayout() {
   return (
-    <div className="relative w-full h-full overflow-hidden flex items-center">
+    <div className="relative flex h-full w-full items-center overflow-hidden">
       <NotificationsSidebarRoot />
-      <div className="w-full h-full overflow-hidden overflow-y-auto">
+      <div className="h-full w-full overflow-hidden overflow-y-auto">
         <Outlet />
       </div>
     </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
index 7bd93646c28..69e02a43bc7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
@@ -60,7 +60,7 @@ function ProfileActivityPage() {
           <h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
           {canDownloadActivity && <DownloadActivityButton />}
         </div>
-        <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
+        <div className="vertical-scrollbar flex scrollbar-md h-full flex-col overflow-y-auto px-5 md:px-9">
           {activityPages}
           {pageCount < totalPages && resultsCount !== 0 && (
             <div className="flex w-full items-center justify-center text-11">
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
index 46462efd698..a07a9e31192 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
@@ -59,8 +59,8 @@ function UseProfileLayout({ params }: Route.ComponentProps) {
     <>
       {/* Passing the type prop from the current route value as we need the header as top most component.
             TODO: We are depending on the route path to handle the mobile header type. If the path changes, this logic will break. */}
-      <div className="h-full w-full flex flex-col md:flex-row overflow-hidden">
-        <div className="h-full w-full flex flex-col overflow-hidden">
+      <div className="flex h-full w-full flex-col overflow-hidden md:flex-row">
+        <div className="flex h-full w-full flex-col overflow-hidden">
           <AppHeader
             header={
               <UserProfileHeader
@@ -72,11 +72,11 @@ function UseProfileLayout({ params }: Route.ComponentProps) {
             mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
           />
           <ContentWrapper>
-            <div className="h-full w-full flex flex-row md:flex-col  md:overflow-hidden">
+            <div className="flex h-full w-full flex-row md:flex-col md:overflow-hidden">
               <div className="flex w-full flex-col md:h-full md:overflow-hidden">
                 <ProfileNavbar isAuthorized={!!isAuthorized} />
                 {isAuthorized || !isAuthorizedPath ? (
-                  <div className={`w-full overflow-hidden h-full`}>
+                  <div className={`h-full w-full overflow-hidden`}>
                     <Outlet />
                   </div>
                 ) : (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
index 362bdd18216..0b9dded5ef2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -90,9 +90,9 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
         className="flex flex-grow justify-center text-13 text-secondary"
         placement="bottom-start"
         customButton={
-          <div className="flex flex-center text-13 text-secondary">
+          <div className="flex-center flex text-13 text-secondary">
             {t("common.layout")}
-            <ChevronDownIcon className="ml-2  h-4 w-4 text-secondary my-auto" strokeWidth={2} />
+            <ChevronDownIcon className="my-auto ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
           </div>
         }
         customButtonClassName="flex flex-center text-secondary text-13"
@@ -119,7 +119,7 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
           title={t("common.display")}
           placement="bottom-end"
           menuButton={
-            <div className="flex flex-center text-13 text-secondary">
+            <div className="flex-center flex text-13 text-secondary">
               {t("common.display")}
               <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
             </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
index dbbef4b9197..4d99983dd74 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@@ -31,7 +31,7 @@ export function ProfileNavbar(props: Props) {
           <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
             <span
               className={cn(
-                `flex whitespace-nowrap border-b-2 p-4 text-13 font-medium outline-none text-tertiary hover:text-primary ${
+                `flex border-b-2 p-4 text-13 font-medium whitespace-nowrap text-tertiary outline-none hover:text-primary ${
                   pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
                     ? "border-accent-strong text-accent-primary hover:text-accent-primary"
                     : "border-transparent"
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index e8ccabf9701..f7b5e90e596 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -99,7 +99,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
               tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`}
               position="bottom"
             >
-              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-11 font-semibold rounded-xl">
+              <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2.5 py-0.5 text-center text-11 font-semibold text-accent-primary">
                 {issueCount}
               </span>
             </Tooltip>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
index 41f5553bd19..49e6479aded 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
@@ -72,7 +72,7 @@ function CycleDetailPage({ params }: Route.ComponentProps) {
             {!isSidebarCollapsed && (
               <div
                 className={cn(
-                  "flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-13 shadow-raised-200"
+                  "vertical-scrollbar absolute right-0 z-13 flex scrollbar-sm h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 shadow-raised-200 duration-300"
                 )}
               >
                 <CycleDetailsSidebar
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 78478a5a88f..05f4cca2d0a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -184,7 +184,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
           </div>
         </Header.LeftItem>
         <Header.RightItem className="items-center">
-          <div className="hidden items-center gap-2 md:flex ">
+          <div className="hidden items-center gap-2 md:flex">
             <div className="hidden @4xl:flex">
               <LayoutSelection
                 layouts={[
@@ -259,7 +259,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
               icon={PanelRight}
               onClick={toggleSidebar}
               className={cn({
-                "text-accent-primary bg-accent-subtle": !isSidebarCollapsed,
+                "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
               })}
             />
             <CycleQuickActions
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
index eb219a64c3f..56ef5ef3a85 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -96,13 +96,13 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="flex justify-evenly py-2 border-b border-subtle md:hidden bg-surface-1">
+      <div className="flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-secondary text-13"
+          className="flex flex-grow justify-center text-13 text-secondary"
           placement="bottom-start"
           customButton={
-            <span className="flex flex-grow justify-center text-secondary text-13">{t("common.layout")}</span>
+            <span className="flex flex-grow justify-center text-13 text-secondary">{t("common.layout")}</span>
           }
           customButtonClassName="flex flex-grow justify-center text-secondary text-13"
           closeOnSelect
@@ -115,19 +115,19 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
               }}
               className="flex items-center gap-2"
             >
-              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="w-3 h-3" />
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
               <div className="text-tertiary">{t(layout.titleTranslationKey)}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-subtle items-center text-secondary text-13">
+        <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <FiltersDropdown
             title={t("common.display")}
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-secondary text-13">
+              <span className="flex items-center text-13 text-secondary">
                 {t("common.display")}
-                <ChevronDownIcon className="text-secondary h-4 w-4 ml-2" />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" />
               </span>
             }
           >
@@ -148,7 +148,7 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
 
         <span
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-secondary text-13 border-l border-subtle"
+          className="flex flex-grow justify-center border-l border-subtle text-13 text-secondary"
         >
           {t("common.analytics")}
         </span>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
index 337e59b0b43..62cac65eaf9 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@@ -68,7 +68,7 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
               toggleCreateCycleModal(true);
             }}
           >
-            <div className="sm:hidden block">{t("add")}</div>
+            <div className="block sm:hidden">{t("add")}</div>
             <div className="hidden sm:block">{t("project_cycles.add_cycle")}</div>
           </Button>
         </Header.RightItem>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
index 4726971adff..b5108be8100 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
@@ -46,12 +46,12 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
     <div className="flex justify-center sm:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-center text-secondary text-13 py-2 border-b border-subtle bg-surface-1"
+        className="flex flex-grow justify-center border-b border-subtle bg-surface-1 py-2 text-13 text-secondary"
         // placement="bottom-start"
         customButton={
           <span className="flex items-center gap-2">
             <ListLayoutIcon className="h-4 w-4" />
-            <span className="flex flex-grow justify-center text-secondary text-13">Layout</span>
+            <span className="flex flex-grow justify-center text-13 text-secondary">Layout</span>
           </span>
         }
         customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
@@ -69,7 +69,7 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="w-3 h-3" />
+              <layout.icon className="h-3 w-3" />
               <div className="text-tertiary">{layout.title}</div>
             </CustomMenu.MenuItem>
           );
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
index 0f314d55837..d92cd737433 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
@@ -73,7 +73,7 @@ function ProjectCyclesPage({ params }: Route.ComponentProps) {
   // No access to cycle
   if (currentProjectDetails?.cycle_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.cycle.title")}
           description={t("disabled_project.empty_state.cycle.description")}
@@ -94,7 +94,7 @@ function ProjectCyclesPage({ params }: Route.ComponentProps) {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="w-full h-full">
+      <div className="h-full w-full">
         <CycleCreateUpdateModal
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
index 4125ce356b6..64739d60b6a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
@@ -45,7 +45,7 @@ function ProjectInboxPage({ params }: Route.ComponentProps) {
   // No access to inbox
   if (currentProjectDetails?.inbox_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.inbox.title")}
           description={t("disabled_project.empty_state.inbox.description")}
@@ -79,7 +79,7 @@ function ProjectInboxPage({ params }: Route.ComponentProps) {
   return (
     <div className="flex h-full flex-col">
       <PageHead title={pageTitle} />
-      <div className="w-full h-full overflow-hidden">
+      <div className="h-full w-full overflow-hidden">
         <InboxIssueRoot
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
index bc2632ee4c2..1fab5aa6334 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
@@ -50,7 +50,7 @@ export default function IssueDetailsPage({ loaderData }: Route.ComponentProps) {
 
   if (loaderData.error) {
     return (
-      <div className="flex items-center justify-center size-full">
+      <div className="flex size-full items-center justify-center">
         <EmptyState
           image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
           title={t("issue.empty_state.issue_detail.title")}
@@ -65,7 +65,7 @@ export default function IssueDetailsPage({ loaderData }: Route.ComponentProps) {
   }
 
   return (
-    <div className="flex items-center justify-center size-full">
+    <div className="flex size-full items-center justify-center">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
index 50555cee534..dfe400d3bea 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@@ -68,7 +68,7 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div className="md:hidden flex justify-evenly border-b border-subtle py-2 z-[13] bg-surface-1">
+      <div className="z-[13] flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
         <MobileLayoutSelection
           layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
           onChange={handleLayoutChange}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
index b6706190cda..e43b6eb92bf 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
@@ -32,16 +32,16 @@ function ProjectLayout({ params }: Route.ComponentProps) {
     <>
       {projectPreferences.navigationMode === "TABBED" && (
         <div className="z-20">
-          <Row className="h-header flex gap-2 w-full items-center border-b border-subtle bg-surface-1">
-            <div className="flex items-center gap-2 divide-x divide-subtle h-full w-full">
-              <div className="flex items-center gap-2 size-full flex-1">
+          <Row className="flex h-header w-full items-center gap-2 border-b border-subtle bg-surface-1">
+            <div className="flex h-full w-full items-center gap-2 divide-x divide-subtle">
+              <div className="flex size-full flex-1 items-center gap-2">
                 {sidebarCollapsed && (
                   <div className="shrink-0">
                     <AppSidebarToggleButton />
                   </div>
                 )}
                 <Header className={cn("h-full", { "pl-1.5": !sidebarCollapsed })}>
-                  <Header.LeftItem className="h-full max-w-full flex items-center gap-2">
+                  <Header.LeftItem className="flex h-full max-w-full items-center gap-2">
                     <TabNavigationRoot workspaceSlug={workspaceSlug} projectId={projectId} />
                   </Header.LeftItem>
                 </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
index 9b4a68bc109..1066ed4e2ce 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
@@ -68,7 +68,7 @@ function ModuleIssuesPage({ params }: Route.ComponentProps) {
           {!isSidebarCollapsed && (
             <div
               className={cn(
-                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-13 shadow-raised-200"
+                "vertical-scrollbar absolute right-0 z-13 flex scrollbar-sm h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 shadow-raised-200 duration-300"
               )}
             >
               <ModuleAnalyticsSidebar moduleId={moduleId} handleClose={toggleSidebar} />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 45d9b0aad99..5524626e04d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -255,7 +255,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
             icon={PanelRight}
             onClick={toggleSidebar}
             className={cn({
-              "text-accent-primary bg-accent-subtle": !isSidebarCollapsed,
+              "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
             })}
           />
           {moduleId && (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
index 6b5eb42dc85..67688828b7a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@@ -73,7 +73,7 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
             }}
             size="lg"
           >
-            <div className="sm:hidden block">{t("add")}</div>
+            <div className="block sm:hidden">{t("add")}</div>
             <div className="hidden sm:block">{t("project_module.add_module")}</div>
           </Button>
         ) : (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
index e5bb7b6507d..a571f7c2d27 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
@@ -22,11 +22,11 @@ export const ModulesListMobileHeader = observer(function ModulesListMobileHeader
     <div className="flex justify-start md:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-start text-secondary text-13 py-2 border-b border-subtle bg-surface-1"
+        className="flex flex-grow justify-start border-b border-subtle bg-surface-1 py-2 text-13 text-secondary"
         // placement="bottom-start"
         customButton={
-          <Row className="flex flex-grow justify-center text-secondary text-13 gap-2">
-            <span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-secondary my-auto" strokeWidth={1} />
+          <Row className="flex flex-grow justify-center gap-2 text-13 text-secondary">
+            <span>Layout</span> <ChevronDownIcon className="my-auto h-4 w-4 text-secondary" strokeWidth={1} />
           </Row>
         }
         customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
index 0b60c82520b..12e0be1ecd1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
@@ -66,7 +66,7 @@ function ProjectModulesPage({ params }: Route.ComponentProps) {
   // No access to
   if (currentProjectDetails?.module_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.module.title")}
           description={t("disabled_project.empty_state.module.description")}
@@ -85,7 +85,7 @@ function ProjectModulesPage({ params }: Route.ComponentProps) {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="h-full w-full flex flex-col">
+      <div className="flex h-full w-full flex-col">
         {(calculateTotalFilters(currentProjectFilters) !== 0 || currentProjectDisplayFilters?.favorites) && (
           <ModuleAppliedFiltersList
             appliedFilters={currentProjectFilters}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
index 37bed714205..ec332bbe10d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
@@ -153,16 +153,16 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
 
   if ((!page || !id) && !pageDetailsError)
     return (
-      <div className="size-full grid place-items-center">
+      <div className="grid size-full place-items-center">
         <LogoSpinner />
       </div>
     );
 
   if (pageDetailsError || !canCurrentUserAccessPage)
     return (
-      <div className="h-full w-full flex flex-col items-center justify-center">
-        <h3 className="text-16 font-semibold text-center">Page not found</h3>
-        <p className="text-13 text-secondary text-center mt-3">
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <h3 className="text-center text-16 font-semibold">Page not found</h3>
+        <p className="mt-3 text-center text-13 text-secondary">
           The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it.
         </p>
         <Link
@@ -180,7 +180,7 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
     <>
       <PageHead title={name} />
       <div className="flex h-full flex-col justify-between">
-        <div className="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
+        <div className="relative flex h-full w-full flex-shrink-0 flex-col overflow-hidden">
           <PageRoot
             config={pageRootConfig}
             handlers={pageRootHandlers}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index 08fe3b55c3c..271d0a159d4 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@@ -53,7 +53,7 @@ export const PageDetailsHeader = observer(function PageDetailsHeader() {
         value: _page.id,
         query: _page.name,
         content: (
-          <div className="flex gap-2 items-center justify-between">
+          <div className="flex items-center justify-between gap-2">
             <SwitcherLabel logo_props={_page.logo_props} name={getPageName(_page.name)} LabelIcon={PageIcon} />
             <PageAccessIcon {..._page} />
           </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
index 8a4250a59c7..e5e1de9dedf 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
@@ -57,7 +57,7 @@ function ProjectPagesPage({ params }: Route.ComponentProps) {
   // No access to cycle
   if (currentProjectDetails?.page_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.page.title")}
           description={t("disabled_project.empty_state.page.description")}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
index 1e4dd349cf3..73e5f722bae 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
@@ -26,7 +26,7 @@ export const ViewMobileHeader = observer(function ViewMobileHeader() {
 
   return (
     <>
-      <div className="md:hidden flex justify-evenly border-b border-subtle py-2 z-[13] bg-surface-1">
+      <div className="z-[13] flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
         <Row className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <ViewOrderByDropdown
             sortBy={filters.sortBy}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
index b827d89771c..b8f7f3688b4 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
@@ -69,7 +69,7 @@ function ProjectViewsPage({ params }: Route.ComponentProps) {
   // No access to
   if (currentProjectDetails?.issue_views_view === false)
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <div className="flex h-full w-full items-center justify-center">
         <DetailedEmptyState
           title={t("disabled_project.empty_state.view.title")}
           description={t("disabled_project.empty_state.view.description")}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
index 008dfca0646..8043f47f8cb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
@@ -29,8 +29,8 @@ function WorkspaceViewsPage() {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="flex flex-col h-full w-full overflow-hidden">
-        <div className="flex h-11 w-full items-center gap-2.5  px-5 py-3 overflow-hidden border-b border-subtle">
+      <div className="flex h-full w-full flex-col overflow-hidden">
+        <div className="flex h-11 w-full items-center gap-2.5 overflow-hidden border-b border-subtle px-5 py-3">
           <SearchIcon className="text-secondary" width={14} height={14} strokeWidth={2} />
           <Input
             className="w-full bg-transparent !p-0 text-11 leading-5 text-secondary placeholder:text-placeholder focus:outline-none"
@@ -40,7 +40,7 @@ function WorkspaceViewsPage() {
             mode="true-transparent"
           />
         </div>
-        <div className="flex flex-col h-full w-full vertical-scrollbar scrollbar-lg">
+        <div className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col">
           {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => t(v.i18n_label).toLowerCase().includes(query.toLowerCase())).map(
             (option) => (
               <GlobalDefaultViewListItem key={option.key} view={option} />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
index 8b800d9c778..a8d2c4b0ba0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
@@ -16,7 +16,7 @@ export default function SettingsLayout() {
       <div className="relative flex size-full overflow-hidden rounded-lg border border-subtle">
         <main className="relative flex size-full flex-col overflow-hidden">
           {/* Content */}
-          <ContentWrapper className="md:flex w-full bg-surface-1">
+          <ContentWrapper className="w-full bg-surface-1 md:flex">
             <div className="size-full overflow-hidden">
               <Outlet />
             </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
index ee5cb8c3e8c..af6141be080 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
@@ -44,7 +44,7 @@ function ExportsPage() {
     <SettingsContentWrapper header={<ExportsWorkspaceSettingsHeader />} hugging>
       <PageHead title={pageTitle} />
       <div
-        className={cn("w-full flex flex-col gap-y-6", {
+        className={cn("flex w-full flex-col gap-y-6", {
           "opacity-60": !canPerformWorkspaceMemberActions,
         })}
       >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
index 73542932b86..a57df1e70d7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
@@ -43,12 +43,12 @@ const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout({ params
         hamburgerContent={WorkspaceSettingsSidebarRoot}
         activePath={getWorkspaceActivePath(pathname) || ""}
       />
-      <div className="inset-y-0 flex flex-row w-full h-full">
+      <div className="inset-y-0 flex h-full w-full flex-row">
         {workspaceUserInfo && !isAuthorized ? (
           <NotAuthorizedView section="settings" className="h-auto" />
         ) : (
           <div className="relative flex size-full">
-            <div className="h-full hidden md:block">
+            <div className="hidden h-full md:block">
               <WorkspaceSettingsSidebarRoot />
             </div>
             <Outlet />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
index cc6a92fee32..1e09ef32b11 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
@@ -113,11 +113,11 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
           "opacity-60": !canPerformWorkspaceMemberActions,
         })}
       >
-        <div className="flex justify-between gap-4 pb-3.5 items-center">
+        <div className="flex items-center justify-between gap-4 pb-3.5">
           <h4 className="flex items-center gap-2.5 text-h3-medium">
             {t("workspace_settings.settings.members.title")}
             {workspaceMemberIds && workspaceMemberIds.length > 0 && (
-              <CountChip count={workspaceMemberIds.length} className="h-5 m-auto" />
+              <CountChip count={workspaceMemberIds.length} className="m-auto h-5" />
             )}
           </h4>
           <div className="flex items-center gap-2">
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
index 3e1517f123f..099a0ee40aa 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
@@ -89,7 +89,7 @@ function WebhooksListPage({ params }: Route.ComponentProps) {
           </div>
         ) : (
           <div className="flex h-full w-full flex-col">
-            <div className="h-full w-full flex items-center justify-center">
+            <div className="flex h-full w-full items-center justify-center">
               <EmptyStateCompact
                 assetKey="webhook"
                 title={t("settings_empty_state.webhooks.title")}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx
index c3a6a29e674..6ebe9df3eaf 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx
@@ -27,9 +27,9 @@ function ProjectDetailSettingsLayout({ params }: Route.ComponentProps) {
         hamburgerContent={(props) => <ProjectSettingsSidebarRoot {...props} projectId={projectId} />}
         activePath={getProjectActivePath(pathname) || ""}
       />
-      <div className="inset-y-0 flex flex-row w-full h-full">
+      <div className="inset-y-0 flex h-full w-full flex-row">
         <div className="relative flex size-full">
-          <div className="shrink-0 h-full hidden md:block">
+          <div className="hidden h-full shrink-0 md:block">
             <ProjectSettingsSidebarRoot projectId={projectId} />
           </div>
           <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
index c783250f5c8..86bd9f85f42 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
@@ -24,10 +24,10 @@ function ProjectSettingsPage() {
   // derived values
   const resolvedPath = resolvedTheme === "dark" ? ProjectDarkEmptyState : ProjectLightEmptyState;
   return (
-    <div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
+    <div className="mx-auto flex h-full max-w-[480px] flex-col items-center justify-center gap-4">
       <img src={resolvedPath} alt="No projects yet" />
       <div className="text-16 font-semibold text-tertiary">No projects yet</div>
-      <div className="text-13 text-tertiary text-center">
+      <div className="text-center text-13 text-tertiary">
         Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you
         need to get things done.
       </div>
diff --git a/apps/web/app/(all)/accounts/forgot-password/page.tsx b/apps/web/app/(all)/accounts/forgot-password/page.tsx
index 35d684c6d20..eb71311cb2c 100644
--- a/apps/web/app/(all)/accounts/forgot-password/page.tsx
+++ b/apps/web/app/(all)/accounts/forgot-password/page.tsx
@@ -18,7 +18,7 @@ function ForgotPasswordPage() {
   return (
     <DefaultLayout>
       <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+        <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
           <AuthHeader type={EAuthModes.SIGN_IN} />
           <ForgotPasswordForm />
         </div>
diff --git a/apps/web/app/(all)/accounts/reset-password/page.tsx b/apps/web/app/(all)/accounts/reset-password/page.tsx
index 68fc71e9342..c9914f08de6 100644
--- a/apps/web/app/(all)/accounts/reset-password/page.tsx
+++ b/apps/web/app/(all)/accounts/reset-password/page.tsx
@@ -19,7 +19,7 @@ function ResetPasswordPage() {
   return (
     <DefaultLayout>
       <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+        <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
           <AuthHeader type={EAuthModes.SIGN_IN} />
           <ResetPasswordForm />
         </div>
diff --git a/apps/web/app/(all)/accounts/set-password/page.tsx b/apps/web/app/(all)/accounts/set-password/page.tsx
index 886f8887297..493f86de8af 100644
--- a/apps/web/app/(all)/accounts/set-password/page.tsx
+++ b/apps/web/app/(all)/accounts/set-password/page.tsx
@@ -19,7 +19,7 @@ function SetPasswordPage() {
   return (
     <DefaultLayout>
       <AuthenticationWrapper pageType={EPageTypes.SET_PASSWORD}>
-        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+        <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
           <AuthHeader type={EAuthModes.SIGN_IN} />
           <ResetPasswordForm />
         </div>
diff --git a/apps/web/app/(all)/create-workspace/page.tsx b/apps/web/app/(all)/create-workspace/page.tsx
index cee5209c119..38087189cc3 100644
--- a/apps/web/app/(all)/create-workspace/page.tsx
+++ b/apps/web/app/(all)/create-workspace/page.tsx
@@ -58,34 +58,34 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {
 
   return (
     <AuthenticationWrapper>
-      <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0 bg-surface-1">
+      <div className="flex h-full flex-col gap-y-2 overflow-hidden bg-surface-1 sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute top-1/2 left-0 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:top-0 sm:left-1/2 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <Link
-            className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
+            className="absolute top-1/2 left-5 grid -translate-y-1/2 place-items-center px-3 sm:top-12 sm:left-1/2 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
             href="/"
           >
             <PlaneLogo className="h-9 w-auto text-primary" />
           </Link>
-          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-13 text-primary sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+          <div className="absolute top-1/4 right-4 -translate-y-1/2 text-13 text-primary sm:fixed sm:top-12 sm:right-16 sm:translate-y-0 sm:py-5">
             {currentUser?.email}
           </div>
         </div>
         <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
           {isWorkspaceCreationDisabled ? (
-            <div className="w-4/5 h-full flex flex-col items-center justify-center text-16 font-medium gap-1">
+            <div className="flex h-full w-4/5 flex-col items-center justify-center gap-1 text-16 font-medium">
               <img
                 src={WorkspaceCreationDisabled}
-                className="w-full h-full object-contain mb-4"
+                className="mb-4 h-full w-full object-contain"
                 alt="Workspace creation disabled"
               />
-              <div className="text-16 font-medium text-center">
+              <div className="text-center text-16 font-medium">
                 {t("workspace_creation.errors.creation_disabled.title")}
               </div>
-              <p className="text-13 text-tertiary break-words text-center">
+              <p className="text-center text-13 break-words text-tertiary">
                 {t("workspace_creation.errors.creation_disabled.description")}
               </p>
-              <div className="flex gap-4 mt-6">
+              <div className="mt-6 flex gap-4">
                 <Button variant="primary" onClick={() => router.back()}>
                   {t("common.go_back")}
                 </Button>
diff --git a/apps/web/app/(all)/invitations/page.tsx b/apps/web/app/(all)/invitations/page.tsx
index 3f7751ce6c6..6921f5b841a 100644
--- a/apps/web/app/(all)/invitations/page.tsx
+++ b/apps/web/app/(all)/invitations/page.tsx
@@ -113,14 +113,14 @@ function UserInvitationsPage() {
     <AuthenticationWrapper>
       <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute top-1/2 left-0 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:top-0 sm:left-1/2 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <Link
             href="/"
-            className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
+            className="absolute top-1/2 left-5 z-10 grid -translate-y-1/2 place-items-center px-3 sm:top-12 sm:left-1/2 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
           >
             <PlaneLogo className="h-9 w-auto text-primary" />
           </Link>
-          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-13 text-primary sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+          <div className="absolute top-1/4 right-4 -translate-y-1/2 text-13 text-primary sm:fixed sm:top-12 sm:right-16 sm:translate-y-0 sm:py-5">
             {currentUser?.email}
           </div>
         </div>
@@ -182,7 +182,7 @@ function UserInvitationsPage() {
               </div>
             </div>
           ) : (
-            <div className="fixed left-0 top-0 grid h-full w-full place-items-center">
+            <div className="fixed top-0 left-0 grid h-full w-full place-items-center">
               <EmptyState
                 title={t("no_pending_invites")}
                 description={t("you_can_see_here_if_someone_invites_you_to_a_workspace")}
diff --git a/apps/web/app/(all)/onboarding/page.tsx b/apps/web/app/(all)/onboarding/page.tsx
index e2479d7d52a..28e677e227b 100644
--- a/apps/web/app/(all)/onboarding/page.tsx
+++ b/apps/web/app/(all)/onboarding/page.tsx
@@ -46,9 +46,9 @@ function OnboardingPage() {
 
   return (
     <AuthenticationWrapper pageType={EPageTypes.ONBOARDING}>
-      <div className="flex relative size-full overflow-hidden bg-canvas rounded-lg transition-all ease-in-out duration-300">
-        <div className="size-full p-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden">
-          <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg bg-surface-1 shadow-md border border-subtle">
+      <div className="relative flex size-full overflow-hidden rounded-lg bg-canvas transition-all duration-300 ease-in-out">
+        <div className="size-full flex-grow overflow-hidden p-2 transition-all duration-300 ease-in-out">
+          <div className="shadow-md relative flex h-full w-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
             {user && !invitationsLoader ? (
               <OnboardingRoot invitations={invitations ?? []} />
             ) : (
diff --git a/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx b/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
index 0a2ba9c9ac6..d7df27ccbcd 100644
--- a/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
+++ b/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
@@ -33,7 +33,7 @@ function ProfileSettingsPage(props: Route.ComponentProps) {
 
   if (!currentUser || !isAValidTab)
     return (
-      <div className="size-full grid place-items-center px-4">
+      <div className="grid size-full place-items-center px-4">
         <LogoSpinner />
       </div>
     );
@@ -42,7 +42,7 @@ function ProfileSettingsPage(props: Route.ComponentProps) {
     <>
       <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
       <div className="relative size-full">
-        <div className="size-full flex">
+        <div className="flex size-full">
           <ProfileSettingsSidebarRoot
             activeTab={profileTabId as TProfileSettingsTabs}
             className="w-[250px]"
@@ -50,7 +50,7 @@ function ProfileSettingsPage(props: Route.ComponentProps) {
           />
           <ProfileSettingsContent
             activeTab={profileTabId as TProfileSettingsTabs}
-            className="grow py-20 px-page-x mx-auto w-fit max-w-225"
+            className="mx-auto w-fit max-w-225 grow px-page-x py-20"
           />
         </div>
       </div>
diff --git a/apps/web/app/(all)/settings/profile/layout.tsx b/apps/web/app/(all)/settings/profile/layout.tsx
index 5b346776713..a30518f658c 100644
--- a/apps/web/app/(all)/settings/profile/layout.tsx
+++ b/apps/web/app/(all)/settings/profile/layout.tsx
@@ -16,7 +16,7 @@ export default function ProfileSettingsLayout() {
       <ProjectsAppPowerKProvider />
       <AuthenticationWrapper>
         <div className="relative flex size-full overflow-hidden bg-canvas p-2">
-          <main className="relative flex flex-col size-full overflow-hidden bg-surface-1 rounded-lg border border-subtle">
+          <main className="relative flex size-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
             <div className="size-full overflow-hidden">
               <Outlet />
             </div>
diff --git a/apps/web/app/(all)/workspace-invitations/page.tsx b/apps/web/app/(all)/workspace-invitations/page.tsx
index 6d681360977..5c079c5c833 100644
--- a/apps/web/app/(all)/workspace-invitations/page.tsx
+++ b/apps/web/app/(all)/workspace-invitations/page.tsx
@@ -80,7 +80,7 @@ function WorkspaceInvitationPage() {
       <div className="flex h-full w-full flex-col items-center justify-center px-3">
         {invitationDetail && !invitationDetail.responded_at ? (
           error ? (
-            <div className="flex w-full flex-col space-y-4 rounded-sm border border-subtle bg-surface-1 px-4 py-8 text-center shadow-2xl md:w-1/3">
+            <div className="shadow-2xl flex w-full flex-col space-y-4 rounded-sm border border-subtle bg-surface-1 px-4 py-8 text-center md:w-1/3">
               <h2 className="text-18 uppercase">INVITATION NOT FOUND</h2>
             </div>
           ) : (
diff --git a/apps/web/app/error/dev.tsx b/apps/web/app/error/dev.tsx
index 787f4baf907..0269dcbdcb1 100644
--- a/apps/web/app/error/dev.tsx
+++ b/apps/web/app/error/dev.tsx
@@ -40,8 +40,8 @@ interface DevErrorComponentProps {
 export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorComponentProps) {
   if (isRouteErrorResponse(error)) {
     return (
-      <div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
-        <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
+      <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
+        <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
           <Banner
             variant="error"
             icon={<InfoFillIcon className="size-5" />}
@@ -52,16 +52,16 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
           <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
             <div className="space-y-4">
               <div>
-                <h2 className="text-20 font-semibold text-danger-primary mb-2">
+                <h2 className="mb-2 text-20 font-semibold text-danger-primary">
                   {error.status} {error.statusText}
                 </h2>
-                <div className="h-px w-full bg-subtle-1" />
+                <div className="bg-subtle-1 h-px w-full" />
               </div>
 
               <div className="space-y-2">
-                <h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Error Data</h3>
-                <div className="bg-layer-1 rounded-md p-4">
-                  <p className="text-13 text-secondary font-code">{error.data}</p>
+                <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Error Data</h3>
+                <div className="rounded-md bg-layer-1 p-4">
+                  <p className="font-code text-13 text-secondary">{error.data}</p>
                 </div>
               </div>
 
@@ -75,8 +75,8 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
 
   if (error instanceof Error) {
     return (
-      <div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
-        <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
+      <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
+        <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
           <Banner
             variant="error"
             icon={<InfoFillIcon className="size-5" />}
@@ -86,22 +86,22 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
           <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
             <div className="space-y-4">
               <div>
-                <h2 className="text-20 font-semibold text-danger-primary mb-2">Error</h2>
-                <div className="h-px w-full bg-subtle-1" />
+                <h2 className="mb-2 text-20 font-semibold text-danger-primary">Error</h2>
+                <div className="bg-subtle-1 h-px w-full" />
               </div>
 
               <div className="space-y-2">
-                <h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Message</h3>
-                <div className="bg-layer-1 rounded-md p-4">
-                  <p className="text-13 text-primary font-medium">{error.message}</p>
+                <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Message</h3>
+                <div className="rounded-md bg-layer-1 p-4">
+                  <p className="text-13 font-medium text-primary">{error.message}</p>
                 </div>
               </div>
 
               {error.stack && (
                 <div className="space-y-2">
-                  <h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Stack Trace</h3>
-                  <div className="bg-layer-1 rounded-md border border-subtle max-h-96 overflow-auto">
-                    <pre className="p-4 text-11 text-secondary font-code whitespace-pre-wrap break-words">
+                  <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Stack Trace</h3>
+                  <div className="max-h-96 overflow-auto rounded-md border border-subtle bg-layer-1">
+                    <pre className="p-4 font-code text-11 break-words whitespace-pre-wrap text-secondary">
                       {error.stack}
                     </pre>
                   </div>
@@ -112,9 +112,9 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
             </div>
           </Card>
 
-          <Card variant={ECardVariant.WITHOUT_SHADOW} className="!p-4 bg-layer-1 transition-none">
+          <Card variant={ECardVariant.WITHOUT_SHADOW} className="bg-layer-1 !p-4 transition-none">
             <div className="flex items-start gap-3">
-              <InfoFillIcon className="size-5 text-tertiary flex-shrink-0 mt-0.5" />
+              <InfoFillIcon className="mt-0.5 size-5 flex-shrink-0 text-tertiary" />
               <div className="space-y-1">
                 <p className="text-13 font-medium text-secondary">Development Mode</p>
                 <p className="text-11 text-tertiary">
@@ -130,8 +130,8 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
   }
 
   return (
-    <div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
-      <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
+    <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
+      <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
         <Banner
           variant="error"
           icon={<InfoFillIcon className="size-5" />}
@@ -142,11 +142,11 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
         <Card variant={ECardVariant.WITH_SHADOW} className="!p-6">
           <div className="space-y-4">
             <div>
-              <h2 className="text-20 font-semibold text-primary mb-2">Unknown Error</h2>
-              <div className="h-px w-full bg-subtle-1" />
+              <h2 className="mb-2 text-20 font-semibold text-primary">Unknown Error</h2>
+              <div className="bg-subtle-1 h-px w-full" />
             </div>
 
-            <div className="bg-layer-1 rounded-md p-4">
+            <div className="rounded-md bg-layer-1 p-4">
               <p className="text-13 text-secondary">
                 An unknown error occurred. Please try refreshing the page or contact support if the problem persists.
               </p>
diff --git a/apps/web/app/error/prod.tsx b/apps/web/app/error/prod.tsx
index fdbfcd5f1d3..a8d61829e35 100644
--- a/apps/web/app/error/prod.tsx
+++ b/apps/web/app/error/prod.tsx
@@ -45,33 +45,33 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
 
   return (
     <DefaultLayout>
-      <div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-surface-1 text-center px-6">
+      <div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 px-6 text-center">
         <div className="relative w-full">
           <img
             src={maintenanceModeImage}
             height="176"
             width="288"
             alt="ProjectSettingImg"
-            className="w-full h-full object-fill object-center"
+            className="h-full w-full object-fill object-center"
           />
         </div>
-        <div className="w-full relative flex flex-col gap-4 mt-4">
+        <div className="relative mt-4 flex w-full flex-col gap-4">
           <div className="flex flex-col gap-2.5">
-            <h1 className="text-18 font-semibold text-primary text-left">&#x1F6A7; Looks like something went wrong!</h1>
-            <span className="text-14 font-medium text-secondary text-left">
+            <h1 className="text-left text-18 font-semibold text-primary">&#x1F6A7; Looks like something went wrong!</h1>
+            <span className="text-left text-14 font-medium text-secondary">
               We track these errors automatically and working on getting things back up and running. If the problem
               persists feel free to contact us. In the meantime, try refreshing.
             </span>
           </div>
 
-          <div className="flex items-center justify-start gap-6 mt-1">
+          <div className="mt-1 flex items-center justify-start gap-6">
             {linkMap.map((link) => (
               <div key={link.key}>
                 <a
                   href={link.value}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-accent-primary hover:underline text-13"
+                  className="text-13 text-accent-primary hover:underline"
                 >
                   {link.label}
                 </a>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index ab41f06d4e6..df5a8daf3f6 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -82,8 +82,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <div id="context-menu-portal" />
         <div id="editor-portal" />
         <AppProvider>
-          <div className={cn("h-screen w-full overflow-hidden relative flex flex-col", "app-container")}>
-            <main className="w-full h-full overflow-hidden relative">{children}</main>
+          <div className={cn("relative flex h-screen w-full flex-col overflow-hidden", "app-container")}>
+            <main className="relative h-full w-full overflow-hidden">{children}</main>
           </div>
         </AppProvider>
       </body>
diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
index 1125cab3929..c220f474928 100644
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -124,8 +124,8 @@ export const meta: Route.MetaFunction = () => [
 export default function Root() {
   return (
     <AppProvider>
-      <div className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "desktop-app-container")}>
-        <main className="w-full h-full overflow-hidden relative">
+      <div className={cn("relative flex h-screen w-full flex-col overflow-hidden bg-canvas", "desktop-app-container")}>
+        <main className="relative h-full w-full overflow-hidden">
           <Outlet />
         </main>
       </div>
@@ -140,7 +140,7 @@ export function HydrateFallback() {
   if (typeof window === "undefined" || resolvedTheme === undefined) return <div />;
 
   return (
-    <div className="relative flex bg-canvas h-screen w-full items-center justify-center">
+    <div className="relative flex h-screen w-full items-center justify-center bg-canvas">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx b/apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
index d1702b94ced..ff1ee254394 100644
--- a/apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ b/apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
@@ -81,7 +81,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyc
     <ContentWrapper className="gap-10">
       <div
         className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
-          "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": userProfile?.theme.theme === "dark",
+          "bg-gradient-to-l from-[#CFCFCF] to-[#212121]": userProfile?.theme.theme === "dark",
           "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": userProfile?.theme.theme === "light",
         })}
       >
@@ -101,29 +101,29 @@ export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyc
               {t("upgrade")}
             </a>
           </div>
-          <span className="absolute left-0 top-0">
+          <span className="absolute top-0 left-0">
             <img
               src={isDarkMode ? ctaL1Dark : ctaL1Light}
-              className="w-[125px] h-[125px] object-contain rounded-xl"
+              className="h-[125px] w-[125px] rounded-xl object-contain"
               alt="l-1"
             />
           </span>
         </div>
         <div className="relative hidden w-1/2 lg:block">
-          <span className="absolute bottom-0 right-0">
-            <img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="w-full h-full object-contain" alt="r-1" />
+          <span className="absolute right-0 bottom-0">
+            <img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="h-full w-full object-contain" alt="r-1" />
           </span>
-          <span className="absolute -bottom-16 right-1/2 rounded-xl">
-            <img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="w-full h-full object-contain" alt="r-2" />
+          <span className="absolute right-1/2 -bottom-16 rounded-xl">
+            <img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="h-full w-full object-contain" alt="r-2" />
           </span>
         </div>
       </div>
       <div className="grid h-full grid-cols-1 gap-5 pb-8 lg:grid-cols-2 xl:grid-cols-3">
         {WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
           <div key={item.title} className="flex min-h-32 w-full flex-col gap-2 rounded-md bg-layer-1 p-4">
-            <div className="flex gap-2 justify-between">
+            <div className="flex justify-between gap-2">
               <h3 className="font-medium">{t(item.key)}</h3>
-              <item.icon className="mt-1 h-4 w-4 text-blue-500" />
+              <item.icon className="text-blue-500 mt-1 h-4 w-4" />
             </div>
             <span className="text-13 text-tertiary">{t(`${item.key}_description`)}</span>
           </div>
diff --git a/apps/web/ce/components/breadcrumbs/project.tsx b/apps/web/ce/components/breadcrumbs/project.tsx
index b83ecf04700..9793ecccc83 100644
--- a/apps/web/ce/components/breadcrumbs/project.tsx
+++ b/apps/web/ce/components/breadcrumbs/project.tsx
@@ -55,7 +55,7 @@ export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TPro
 
   // helpers
   const renderIcon = (projectDetails: TProject) => (
-    <span className="grid place-items-center flex-shrink-0 size-4">
+    <span className="grid size-4 flex-shrink-0 place-items-center">
       <Logo logo={projectDetails.logo_props} size={14} />
     </span>
   );
diff --git a/apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx b/apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx
index f9e2497b00d..3188e1b42cc 100644
--- a/apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx
+++ b/apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx
@@ -29,7 +29,7 @@ export const PowerKProjectStatesMenuItems = observer(function PowerKProjectState
       {states.map((state) => (
         <PowerKModalCommandItem
           key={state.id}
-          iconNode={<StateGroupIcon stateGroup={state.group} color={state.color} className="shrink-0 size-3.5" />}
+          iconNode={<StateGroupIcon stateGroup={state.group} color={state.color} className="size-3.5 shrink-0" />}
           label={state.name}
           isSelected={state.id === selectedStateId}
           onSelect={() => handleSelect(state.id)}
diff --git a/apps/web/ce/components/comments/comment-block.tsx b/apps/web/ce/components/comments/comment-block.tsx
index 84feaa6ee3c..c08454e96ea 100644
--- a/apps/web/ce/components/comments/comment-block.tsx
+++ b/apps/web/ce/components/comments/comment-block.tsx
@@ -31,18 +31,18 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock)
       ref={commentBlockRef}
     >
       <div
-        className="absolute left-[13px] top-0 bottom-0 w-px transition-border duration-1000 bg-layer-3"
+        className="transition-border absolute top-0 bottom-0 left-[13px] w-px bg-layer-3 duration-1000"
         aria-hidden
       />
       <div
         className={cn(
-          "flex-shrink-0 relative w-7 h-7  rounded-lg transition-border duration-1000 flex justify-center items-center z-[3] uppercase shadow-raised-100 bg-layer-2 border border-subtle"
+          "transition-border relative z-[3] flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg border border-subtle bg-layer-2 uppercase shadow-raised-100 duration-1000"
         )}
       >
         <CommentReplyIcon width={14} height={14} className="text-secondary" aria-hidden="true" />
       </div>
-      <div className="flex flex-col gap-3 truncate flex-grow">
-        <div className="text-body-sm-regular mb-2 bg-layer-2 border border-subtle shadow-raised-100 rounded-lg p-3">
+      <div className="flex flex-grow flex-col gap-3 truncate">
+        <div className="mb-2 rounded-lg border border-subtle bg-layer-2 p-3 text-body-sm-regular shadow-raised-100">
           {children}
         </div>
       </div>
diff --git a/apps/web/ce/components/cycles/active-cycle/root.tsx b/apps/web/ce/components/cycles/active-cycle/root.tsx
index 99ffdae74f8..7c15122e1e1 100644
--- a/apps/web/ce/components/cycles/active-cycle/root.tsx
+++ b/apps/web/ce/components/cycles/active-cycle/root.tsx
@@ -75,7 +75,7 @@ const ActiveCyclesComponent = observer(function ActiveCyclesComponent({
         className="!border-b-transparent"
       />
       <Row className="bg-surface-1 pt-3 pb-6">
-        <div className="grid grid-cols-1 bg-surface-1 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+        <div className="grid grid-cols-1 gap-3 bg-surface-1 lg:grid-cols-2 xl:grid-cols-3">
           <ActiveCycleProgress
             handleFiltersUpdate={handleFiltersUpdate}
             projectId={projectId}
@@ -121,7 +121,7 @@ export const ActiveCycleRoot = observer(function ActiveCycleRoot(props: IActiveC
         <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
           {({ open }) => (
             <>
-              <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle bg-layer-1 cursor-pointer">
+              <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
                 <CycleListGroupHeader title={t("project_cycles.active_cycle.label")} type="current" isExpanded={open} />
               </Disclosure.Button>
               <Disclosure.Panel>
diff --git a/apps/web/ce/components/cycles/analytics-sidebar/base.tsx b/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
index 5dd97c32dd6..9467ec63afc 100644
--- a/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
+++ b/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
@@ -79,7 +79,7 @@ export const SidebarChart = observer(function SidebarChart(props: ProgressChartP
               />
             </Fragment>
           ) : (
-            <Loader className="w-full h-[160px] mt-4">
+            <Loader className="mt-4 h-[160px] w-full">
               <Loader.Item width="100%" height="100%" />
             </Loader>
           )}
diff --git a/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx b/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
index 02934a23113..a289ca0f751 100644
--- a/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
+++ b/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
@@ -24,7 +24,7 @@ export const EstimateListItemButtons = observer(function EstimateListItemButtons
   return (
     <div className="relative flex items-center gap-1">
       <button
-        className="relative flex-shrink-0 w-6 h-6 flex justify-center items-center rounded-sm cursor-pointer transition-colors overflow-hidden hover:bg-layer-1"
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors hover:bg-layer-1"
         onClick={() => onDeleteClick && onDeleteClick(estimateId)}
         data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_LIST_ITEM}
       >
diff --git a/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx b/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx
index 25cb82a6457..4d6da6696c2 100644
--- a/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx
+++ b/apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx
@@ -35,7 +35,7 @@ export function GanttChartRowList(props: GanttChartBlocksProps) {
   } = props;
 
   return (
-    <div className="absolute top-0 left-0 min-w-full w-max">
+    <div className="absolute top-0 left-0 w-max min-w-full">
       {blockIds?.map((blockId) => (
         <>
           <RenderIfVisible
@@ -43,7 +43,7 @@ export function GanttChartRowList(props: GanttChartBlocksProps) {
             horizontalOffset={100}
             verticalOffset={200}
             classNames="relative min-w-full w-max"
-            placeholderChildren={<div className="w-full pointer-events-none" style={{ height: `${BLOCK_HEIGHT}px` }} />}
+            placeholderChildren={<div className="pointer-events-none w-full" style={{ height: `${BLOCK_HEIGHT}px` }} />}
             shouldRecordHeights={false}
           >
             <BlockRow
diff --git a/apps/web/ce/components/global/product-updates/changelog.tsx b/apps/web/ce/components/global/product-updates/changelog.tsx
index 2418a4f397d..06de2360829 100644
--- a/apps/web/ce/components/global/product-updates/changelog.tsx
+++ b/apps/web/ce/components/global/product-updates/changelog.tsx
@@ -72,15 +72,15 @@ export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog
   }
 
   return (
-    <div className="flex flex-col h-[550px] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5 relative">
+    <div className="vertical-scrollbar relative mx-0.5 flex scrollbar-xs h-[550px] flex-col overflow-hidden overflow-y-scroll px-6">
       {isLoading && (
-        <Loader className="flex flex-col gap-3 absolute inset-0 w-full h-full items-center justify-center">
+        <Loader className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-3">
           <Loader.Item height="95%" width="95%" />
         </Loader>
       )}
       <iframe
         src={changeLogUrl}
-        className={`w-full h-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
+        className={`h-full w-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
         onLoad={handleIframeLoad}
         onError={handleIframeError}
       />
diff --git a/apps/web/ce/components/global/product-updates/header.tsx b/apps/web/ce/components/global/product-updates/header.tsx
index 93720d58c2d..375ecaeb8e7 100644
--- a/apps/web/ce/components/global/product-updates/header.tsx
+++ b/apps/web/ce/components/global/product-updates/header.tsx
@@ -13,12 +13,12 @@ import { cn } from "@plane/utils";
 export const ProductUpdatesHeader = observer(function ProductUpdatesHeader() {
   const { t } = useTranslation();
   return (
-    <div className="flex gap-2 mx-6 my-4 items-center justify-between flex-shrink-0">
+    <div className="mx-6 my-4 flex flex-shrink-0 items-center justify-between gap-2">
       <div className="flex w-full items-center">
         <div className="flex gap-2 text-18 font-medium">{t("whats_new")}</div>
         <div
           className={cn(
-            "px-2 mx-2 py-0.5 text-center text-11 font-medium rounded-full bg-accent-primary/20 text-accent-primary"
+            "mx-2 rounded-full bg-accent-primary/20 px-2 py-0.5 text-center text-11 font-medium text-accent-primary"
           )}
         >
           {t("version")}: v{packageJson.version}
diff --git a/apps/web/ce/components/instance/maintenance-message.tsx b/apps/web/ce/components/instance/maintenance-message.tsx
index d33b3e2badb..f2d662c9a29 100644
--- a/apps/web/ce/components/instance/maintenance-message.tsx
+++ b/apps/web/ce/components/instance/maintenance-message.tsx
@@ -16,22 +16,22 @@ export function MaintenanceMessage() {
   return (
     <>
       <div className="flex flex-col gap-2.5">
-        <h1 className="text-18 font-semibold text-primary text-left">
+        <h1 className="text-left text-18 font-semibold text-primary">
           &#x1F6A7; Looks like Plane didn&apos;t start up correctly!
         </h1>
-        <span className="text-14 font-medium text-secondary text-left">
+        <span className="text-left text-14 font-medium text-secondary">
           Some services might have failed to start. Please check your container logs to identify and resolve the issue.
           If you&apos;re stuck, reach out to our support team for more help.
         </span>
       </div>
-      <div className="flex items-center justify-start gap-6 mt-1">
+      <div className="mt-1 flex items-center justify-start gap-6">
         {linkMap.map((link) => (
           <div key={link.key}>
             <a
               href={link.value}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-accent-primary hover:underline text-13"
+              className="text-13 text-accent-primary hover:underline"
             >
               {link.label}
             </a>
diff --git a/apps/web/ce/components/issues/issue-details/issue-creator.tsx b/apps/web/ce/components/issues/issue-details/issue-creator.tsx
index 6b82ad6fd81..2c25079ad04 100644
--- a/apps/web/ce/components/issues/issue-details/issue-creator.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-creator.tsx
@@ -28,11 +28,11 @@ export function IssueCreatorDisplay(props: TIssueUser) {
   return (
     <>
       {customUserName ? (
-        <span className="text-primary font-medium">{customUserName || "Plane"}</span>
+        <span className="font-medium text-primary">{customUserName || "Plane"}</span>
       ) : (
         <Link
           href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
-          className="hover:underline text-primary font-medium"
+          className="font-medium text-primary hover:underline"
         >
           {activity.actor_detail?.display_name}
         </Link>
diff --git a/apps/web/ce/components/issues/issue-details/issue-identifier.tsx b/apps/web/ce/components/issues/issue-details/issue-identifier.tsx
index f2f8a55790f..c6e6a4bb8f2 100644
--- a/apps/web/ce/components/issues/issue-details/issue-identifier.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-identifier.tsx
@@ -30,7 +30,7 @@ export const IssueIdentifier = observer(function IssueIdentifier(props: TIssueId
   if (!shouldRenderIssueID) return null;
 
   return (
-    <div className="shrink-0 flex items-center space-x-2">
+    <div className="flex shrink-0 items-center space-x-2">
       <IdentifierText
         identifier={`${projectIdentifier}-${issueSequenceId}`}
         enableClickToCopyIdentifier={enableClickToCopyIdentifier}
diff --git a/apps/web/ce/components/license/modal/upgrade-modal.tsx b/apps/web/ce/components/license/modal/upgrade-modal.tsx
index c7e35a18332..eebabe44a27 100644
--- a/apps/web/ce/components/license/modal/upgrade-modal.tsx
+++ b/apps/web/ce/components/license/modal/upgrade-modal.tsx
@@ -49,13 +49,13 @@ export const PaidPlanUpgradeModal = observer(function PaidPlanUpgradeModal(props
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VIIXL} className="rounded-2xl">
-      <div className="p-10 max-h-[90vh] overflow-auto">
-        <div className="grid grid-cols-12 gap-6 h-full">
+      <div className="max-h-[90vh] overflow-auto p-10">
+        <div className="grid h-full grid-cols-12 gap-6">
           {/* Free Plan Section */}
           <div className={cn(COMMON_CARD_CLASSNAME)}>
-            <div className="text-24 font-bold leading-8 flex">Upgrade to a paid plan and unlock missing features.</div>
+            <div className="flex text-24 leading-8 font-bold">Upgrade to a paid plan and unlock missing features.</div>
             <div className="mt-4 mb-2">
-              <p className="text-13 mb-4 pr-8 text-primary">
+              <p className="mb-4 pr-8 text-13 text-primary">
                 Dashboards, Workflows, Approvals, Time Management, and other superpowers are just a click away. Upgrade
                 today to unlock features your teams need yesterday.
               </p>
diff --git a/apps/web/ce/components/navigations/top-navigation-root.tsx b/apps/web/ce/components/navigations/top-navigation-root.tsx
index 324494e013d..2571ecee6b0 100644
--- a/apps/web/ce/components/navigations/top-navigation-root.tsx
+++ b/apps/web/ce/components/navigations/top-navigation-root.tsx
@@ -46,12 +46,12 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
 
   return (
     <div
-      className={cn("flex items-center min-h-10 w-full px-3.5 bg-canvas z-[27] transition-all duration-300", {
+      className={cn("z-[27] flex min-h-10 w-full items-center bg-canvas px-3.5 transition-all duration-300", {
         "px-2": !showLabel,
       })}
     >
       {/* Workspace Menu */}
-      <div className="shrink-0 flex-1">
+      <div className="flex-1 shrink-0">
         <WorkspaceMenuRoot variant="top-navigation" />
       </div>
       {/* Power K Search */}
@@ -59,7 +59,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
         <TopNavPowerK />
       </div>
       {/* Additional Actions */}
-      <div className="shrink-0 flex-1 flex gap-1 items-center justify-end">
+      <div className="flex flex-1 shrink-0 items-center justify-end gap-1">
         <Tooltip tooltipContent="Inbox" position="bottom">
           <AppSidebarItem
             variant="link"
@@ -79,7 +79,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
         </Tooltip>
         <HelpMenuRoot />
         <StarUsOnGitHubLink />
-        <div className="flex items-center justify-center size-8 hover:bg-layer-1-hover rounded-md">
+        <div className="flex size-8 items-center justify-center rounded-md hover:bg-layer-1-hover">
           <UserMenuRoot />
         </div>
       </div>
diff --git a/apps/web/ce/components/onboarding/tour/root.tsx b/apps/web/ce/components/onboarding/tour/root.tsx
index 2f68467b351..46100a8c74b 100644
--- a/apps/web/ce/components/onboarding/tour/root.tsx
+++ b/apps/web/ce/components/onboarding/tour/root.tsx
@@ -134,10 +134,10 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
         <div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-surface-1 sm:h-3/4 md:w-1/2 lg:w-3/5">
           <button
             type="button"
-            className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-strong p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
+            className="fixed top-[19%] right-[9%] z-10 translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border border-strong p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
             onClick={onComplete}
           >
-            <CloseIcon className="h-3 w-3 text-primary border-strong-" />
+            <CloseIcon className="border-strong- h-3 w-3 text-primary" />
           </button>
           <TourSidebar step={step} setStep={setStep} />
           <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
@@ -146,7 +146,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
                 currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
               }`}
             >
-              <img src={currentStep?.image} className="w-full h-full object-cover" alt={currentStep?.title} />
+              <img src={currentStep?.image} className="h-full w-full object-cover" alt={currentStep?.title} />
             </div>
             <div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
               <h3 className="font-semibold sm:text-18">{currentStep?.title}</h3>
diff --git a/apps/web/ce/components/onboarding/tour/sidebar.tsx b/apps/web/ce/components/onboarding/tour/sidebar.tsx
index 03b827b5f53..7a54ec79d35 100644
--- a/apps/web/ce/components/onboarding/tour/sidebar.tsx
+++ b/apps/web/ce/components/onboarding/tour/sidebar.tsx
@@ -59,7 +59,7 @@ export function TourSidebar({ step, setStep }: Props) {
         {sidebarOptions.map((option) => (
           <h5
             key={option.key}
-            className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-13 font-medium capitalize ${
+            className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pr-2 pl-3 text-13 font-medium capitalize ${
               step === option.key ? "border-accent-strong text-accent-primary" : "border-transparent text-secondary"
             }`}
             onClick={() => setStep(option.key)}
diff --git a/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx b/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
index 686021bb56f..6f47e7f8cbc 100644
--- a/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
@@ -39,7 +39,7 @@ export function AskPiMenu(props: Props) {
           "items-start": response,
         })}
       >
-        <span className="flex-shrink-0 size-7 grid place-items-center text-secondary rounded-full border border-subtle">
+        <span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
           <Sparkles className="size-3" />
         </span>
         {response ? (
@@ -59,7 +59,7 @@ export function AskPiMenu(props: Props) {
             <div className="mt-3 flex items-center gap-4">
               <button
                 type="button"
-                className="p-1 text-tertiary text-13 font-medium rounded-sm hover:bg-layer-1 outline-none"
+                className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
                 onClick={() => handleInsertText(false)}
               >
                 Replace selection
@@ -67,16 +67,16 @@ export function AskPiMenu(props: Props) {
               <Tooltip tooltipContent="Add to next line">
                 <button
                   type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
                   onClick={() => handleInsertText(true)}
                 >
-                  <CornerDownRight className="text-tertiary size-4" />
+                  <CornerDownRight className="size-4 text-tertiary" />
                 </button>
               </Tooltip>
               <Tooltip tooltipContent="Re-generate response">
                 <button
                   type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -85,7 +85,7 @@ export function AskPiMenu(props: Props) {
                   disabled={isRegenerating}
                 >
                   <RefreshCcw
-                    className={cn("text-tertiary size-4", {
+                    className={cn("size-4 text-tertiary", {
                       "animate-spin": isRegenerating,
                     })}
                   />
@@ -97,19 +97,19 @@ export function AskPiMenu(props: Props) {
           <p className="text-13 text-secondary">AI is answering...</p>
         )}
       </div>
-      <div className="py-3 px-4">
-        <div className="flex items-center gap-2 border border-subtle rounded-md p-2">
-          <span className="flex-shrink-0 size-3 grid place-items-center">
+      <div className="px-4 py-3">
+        <div className="flex items-center gap-2 rounded-md border border-subtle p-2">
+          <span className="grid size-3 flex-shrink-0 place-items-center">
             <Sparkles className="size-3 text-secondary" />
           </span>
           <input
             type="text"
-            className="w-full bg-transparent border-none outline-none placeholder:text-placeholder text-13"
+            className="w-full border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder="Tell AI what to do..."
           />
-          <span className="flex-shrink-0 size-4 grid place-items-center">
+          <span className="grid size-4 flex-shrink-0 place-items-center">
             <CircleArrowUp className="size-4 text-secondary" />
           </span>
         </div>
diff --git a/apps/web/ce/components/pages/editor/ai/menu.tsx b/apps/web/ce/components/pages/editor/ai/menu.tsx
index 0aaa6f36dde..284af138ab5 100644
--- a/apps/web/ce/components/pages/editor/ai/menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/menu.tsx
@@ -144,7 +144,7 @@ export function EditorAIMenu(props: Props) {
   return (
     <div
       className={cn(
-        "w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
+        "flex w-[210px] flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
         {
           "w-[700px]": activeTask,
         }
@@ -155,7 +155,7 @@ export function EditorAIMenu(props: Props) {
           "divide-x divide-subtle-1": activeTask,
         })}
       >
-        <div className="flex-shrink-0 w-[210px] overflow-y-auto px-2 py-2.5 transition-all">
+        <div className="w-[210px] flex-shrink-0 overflow-y-auto px-2 py-2.5 transition-all">
           {MENU_ITEMS.map((item) => {
             const isActiveTask = activeTask === item.key;
 
@@ -164,7 +164,7 @@ export function EditorAIMenu(props: Props) {
                 key={item.key}
                 type="button"
                 className={cn(
-                  "w-full flex items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-11 text-secondary hover:bg-layer-1 transition-colors",
+                  "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-11 text-secondary transition-colors hover:bg-layer-1",
                   {
                     "bg-layer-1": isActiveTask,
                   }
@@ -175,13 +175,13 @@ export function EditorAIMenu(props: Props) {
                   handleClick(item.key);
                 }}
               >
-                <span className="flex-shrink-0 flex items-center gap-2 truncate">
-                  <item.icon className="flex-shrink-0 size-3" />
+                <span className="flex flex-shrink-0 items-center gap-2 truncate">
+                  <item.icon className="size-3 flex-shrink-0" />
                   {item.label}
                 </span>
                 <ChevronRightIcon
-                  className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
-                    "opacity-100 pointer-events-auto": isActiveTask,
+                  className={cn("pointer-events-none size-3 flex-shrink-0 opacity-0 transition-opacity", {
+                    "pointer-events-auto opacity-100": isActiveTask,
                   })}
                 />
               </button>
@@ -190,8 +190,8 @@ export function EditorAIMenu(props: Props) {
         </div>
         <div
           ref={responseContainerRef}
-          className={cn("flex-shrink-0 w-0 overflow-hidden transition-all", {
-            "w-[490px] overflow-auto vertical-scrollbar scrollbar-sm": activeTask,
+          className={cn("w-0 flex-shrink-0 overflow-hidden transition-all", {
+            "vertical-scrollbar scrollbar-sm w-[490px] overflow-auto": activeTask,
           })}
         >
           {activeTask === AI_EDITOR_TASKS.ASK_ANYTHING ? (
@@ -209,7 +209,7 @@ export function EditorAIMenu(props: Props) {
                   "items-start": response,
                 })}
               >
-                <span className="flex-shrink-0 size-7 grid place-items-center text-secondary rounded-full border border-subtle">
+                <span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
                   <Sparkles className="size-3" />
                 </span>
                 {response ? (
@@ -229,7 +229,7 @@ export function EditorAIMenu(props: Props) {
                     <div className="mt-3 flex items-center gap-4">
                       <button
                         type="button"
-                        className="p-1 text-tertiary text-13 font-medium rounded-sm hover:bg-layer-1 outline-none"
+                        className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
                         onClick={() => handleInsertText(false)}
                       >
                         Replace selection
@@ -237,16 +237,16 @@ export function EditorAIMenu(props: Props) {
                       <Tooltip tooltipContent="Add to next line">
                         <button
                           type="button"
-                          className="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
+                          className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
                           onClick={() => handleInsertText(true)}
                         >
-                          <CornerDownRight className="text-tertiary size-4" />
+                          <CornerDownRight className="size-4 text-tertiary" />
                         </button>
                       </Tooltip>
                       <Tooltip tooltipContent="Re-generate response">
                         <button
                           type="button"
-                          className="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
+                          className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -255,7 +255,7 @@ export function EditorAIMenu(props: Props) {
                           disabled={isRegenerating}
                         >
                           <RefreshCcw
-                            className={cn("text-tertiary size-4", {
+                            className={cn("size-4 text-tertiary", {
                               "animate-spin": isRegenerating,
                             })}
                           />
@@ -269,13 +269,13 @@ export function EditorAIMenu(props: Props) {
                   </p>
                 )}
               </div>
-              <div className="sticky bottom-0 w-full bg-surface-1 pl-[54.8px] py-2 flex items-center gap-2">
+              <div className="sticky bottom-0 flex w-full items-center gap-2 bg-surface-1 py-2 pl-[54.8px]">
                 {TONES_LIST.map((tone) => (
                   <button
                     key={tone.key}
                     type="button"
                     className={cn(
-                      "p-1 text-11 text-secondary font-medium bg-layer-1 rounded-sm transition-colors outline-none",
+                      "rounded-sm bg-layer-1 p-1 text-11 font-medium text-secondary transition-colors outline-none",
                       {
                         "bg-accent-primary/20 text-accent-primary": tone.key === "default",
                       }
@@ -295,8 +295,8 @@ export function EditorAIMenu(props: Props) {
         </div>
       </div>
       {activeTask && (
-        <div className="bg-surface-2 rounded-b-md py-2 px-4 text-tertiary flex items-center gap-2 border-t border-subtle">
-          <span className="flex-shrink-0 size-4 grid place-items-center">
+        <div className="flex items-center gap-2 rounded-b-md border-t border-subtle bg-surface-2 px-4 py-2 text-tertiary">
+          <span className="grid size-4 flex-shrink-0 place-items-center">
             <TriangleAlert className="size-3" />
           </span>
           <p className="flex-shrink-0 text-11 font-medium">
diff --git a/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx b/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
index 703fab3660a..bcd5cebc409 100644
--- a/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
+++ b/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
@@ -14,15 +14,15 @@ export function IssueEmbedUpgradeCard(props: any) {
   return (
     <div
       className={cn(
-        "w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-raised-100 flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
+        "flex w-full items-center justify-between gap-5 rounded-md border-[0.5px] border-subtle bg-layer-1 px-5 py-2 shadow-raised-100 max-md:flex-wrap",
         {
           "border-2": props.selected,
         }
       )}
     >
       <div className="flex items-center gap-4">
-        <ProIcon className="flex-shrink-0 size-4" />
-        <p className="text-secondary !text-14">
+        <ProIcon className="size-4 flex-shrink-0" />
+        <p className="!text-14 text-secondary">
           Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
         </p>
       </div>
diff --git a/apps/web/ce/components/pages/header/lock-control.tsx b/apps/web/ce/components/pages/header/lock-control.tsx
index c65cdfe59a8..c60341237c2 100644
--- a/apps/web/ce/components/pages/header/lock-control.tsx
+++ b/apps/web/ce/components/pages/header/lock-control.tsx
@@ -82,7 +82,7 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
           <button
             type="button"
             onClick={toggleLock}
-            className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-secondary hover:text-primary hover:bg-layer-1 transition-colors"
+            className="grid size-6 flex-shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
             aria-label="Lock"
           >
             <LockKeyhole className="size-3.5" />
@@ -94,11 +94,11 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
         <button
           type="button"
           onClick={toggleLock}
-          className="h-6 flex items-center gap-1 px-2 rounded-sm text-accent-primary bg-accent-primary/20 hover:bg-accent-primary/30 transition-colors"
+          className="flex h-6 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary transition-colors hover:bg-accent-primary/30"
           aria-label="Locked"
         >
-          <LockKeyhole className="flex-shrink-0 size-3.5 animate-lock-icon" />
-          <span className="text-11 font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in">
+          <LockKeyhole className="animate-lock-icon size-3.5 flex-shrink-0" />
+          <span className="animate-text-slide-in overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
             Locked
           </span>
         </button>
@@ -106,11 +106,11 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
 
       {displayState === "unlocked" && (
         <div
-          className="h-6 flex items-center gap-1 px-2 rounded-sm text-secondary animate-fade-out"
+          className="flex h-6 animate-fade-out items-center gap-1 rounded-sm px-2 text-secondary"
           aria-label="Unlocked"
         >
-          <LockKeyholeOpen className="flex-shrink-0 size-3.5 animate-unlock-icon" />
-          <span className="text-11 font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in animate-text-fade-out">
+          <LockKeyholeOpen className="animate-unlock-icon size-3.5 flex-shrink-0" />
+          <span className="animate-text-slide-in animate-text-fade-out overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
             Unlocked
           </span>
         </div>
diff --git a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx
index 776d722ee89..2829806981b 100644
--- a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx
+++ b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx
@@ -20,12 +20,12 @@ export function PageNavigationPaneAssetsTabEmptyState() {
   const { t } = useTranslation();
 
   return (
-    <div className="size-full grid place-items-center">
+    <div className="grid size-full place-items-center">
       <div className="flex flex-col items-center gap-y-6 text-center">
         <img src={resolvedPath} className="size-40 object-contain" alt="depicts the assets of a page" />
         <div className="space-y-2.5">
           <h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
-          <p className="text-13 text-secondary font-medium">
+          <p className="text-13 font-medium text-secondary">
             {t("page_navigation_pane.tabs.assets.empty_state.description")}
           </p>
         </div>
diff --git a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
index e4158078dae..720da755673 100644
--- a/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
+++ b/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
@@ -20,12 +20,12 @@ export function PageNavigationPaneOutlineTabEmptyState() {
   const { t } = useTranslation();
 
   return (
-    <div className="size-full grid place-items-center">
+    <div className="grid size-full place-items-center">
       <div className="flex flex-col items-center gap-y-6 text-center">
         <img src={resolvedPath} className="size-40 object-contain" alt="depicts the outline of a page" />
         <div className="space-y-2.5">
           <h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
-          <p className="text-13 text-secondary font-medium">
+          <p className="text-13 font-medium text-secondary">
             {t("page_navigation_pane.tabs.outline.empty_state.description")}
           </p>
         </div>
diff --git a/apps/web/ce/components/projects/create/attributes.tsx b/apps/web/ce/components/projects/create/attributes.tsx
index 5e6614eaa84..b5dd64e69ec 100644
--- a/apps/web/ce/components/projects/create/attributes.tsx
+++ b/apps/web/ce/components/projects/create/attributes.tsx
@@ -33,12 +33,12 @@ function ProjectAttributes(props: Props) {
           const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
 
           return (
-            <div className="flex-shrink-0 h-7" tabIndex={getIndex("network")}>
+            <div className="h-7 flex-shrink-0" tabIndex={getIndex("network")}>
               <CustomSelect
                 value={value}
                 onChange={onChange}
                 label={
-                  <div className="flex items-center gap-1 h-full">
+                  <div className="flex h-full items-center gap-1">
                     {currentNetwork ? (
                       <>
                         <ProjectNetworkIcon iconKey={currentNetwork.iconKey} />
@@ -77,7 +77,7 @@ function ProjectAttributes(props: Props) {
         render={({ field: { value, onChange } }) => {
           if (value === undefined || value === null || typeof value === "string")
             return (
-              <div className="flex-shrink-0 h-7" tabIndex={getIndex("lead")}>
+              <div className="h-7 flex-shrink-0" tabIndex={getIndex("lead")}>
                 <MemberDropdown
                   value={value ?? null}
                   onChange={(lead) => onChange(lead === value ? null : lead)}
diff --git a/apps/web/ce/components/projects/mobile-header.tsx b/apps/web/ce/components/projects/mobile-header.tsx
index e1d3bfbd82c..d2bf83f25ea 100644
--- a/apps/web/ce/components/projects/mobile-header.tsx
+++ b/apps/web/ce/components/projects/mobile-header.tsx
@@ -58,7 +58,7 @@ export const ProjectsListMobileHeader = observer(function ProjectsListMobileHead
   const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
 
   return (
-    <div className="flex py-2 border-b border-subtle md:hidden bg-surface-1 w-full">
+    <div className="flex w-full border-b border-subtle bg-surface-1 py-2 md:hidden">
       <ProjectOrderByDropdown
         value={displayFilters?.order_by}
         onChange={(val) => {
@@ -69,13 +69,13 @@ export const ProjectsListMobileHeader = observer(function ProjectsListMobileHead
         }}
         isMobile
       />
-      <div className="border-l border-subtle flex justify-around w-full">
+      <div className="flex w-full justify-around border-l border-subtle">
         <FiltersDropdown
           icon={<ListFilter className="h-3 w-3" />}
           title={t("common.filters")}
           placement="bottom-end"
           menuButton={
-            <div className="flex text-13 items-center gap-2 text-secondary">
+            <div className="flex items-center gap-2 text-13 text-secondary">
               <ListFilter className="h-3 w-3" />
               {t("common.filters")}
               <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
diff --git a/apps/web/ce/components/projects/settings/intake/header.tsx b/apps/web/ce/components/projects/settings/intake/header.tsx
index 89db4e931c4..c60466e41a8 100644
--- a/apps/web/ce/components/projects/settings/intake/header.tsx
+++ b/apps/web/ce/components/projects/settings/intake/header.tsx
@@ -45,7 +45,7 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
   return (
     <Header>
       <Header.LeftItem>
-        <div className="flex items-center gap-4 flex-grow">
+        <div className="flex flex-grow items-center gap-4">
           <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
             <Breadcrumbs.Item
diff --git a/apps/web/ce/components/rich-filters/filter-value-input/root.tsx b/apps/web/ce/components/rich-filters/filter-value-input/root.tsx
index 06a04cb8238..374bf279ff4 100644
--- a/apps/web/ce/components/rich-filters/filter-value-input/root.tsx
+++ b/apps/web/ce/components/rich-filters/filter-value-input/root.tsx
@@ -17,7 +17,7 @@ export const AdditionalFilterValueInput = observer(function AdditionalFilterValu
 >(_props: TFilterValueInputProps<P, V>) {
   return (
     // Fallback
-    <div className="h-full flex items-center px-4 text-11 text-placeholder transition-opacity duration-200 cursor-not-allowed">
+    <div className="flex h-full cursor-not-allowed items-center px-4 text-11 text-placeholder transition-opacity duration-200">
       Filter type not supported
     </div>
   );
diff --git a/apps/web/ce/components/workspace-notifications/notification-card/root.tsx b/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
index 9c07b8e3084..d6e9afafb2d 100644
--- a/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
+++ b/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
@@ -45,12 +45,12 @@ export const NotificationCardListRoot = observer(function NotificationCardListRo
       {paginationInfo && paginationInfo?.next_page_results && (
         <>
           {loader === ENotificationLoader.PAGINATION_LOADER ? (
-            <div className="py-4 flex justify-center items-center text-13 font-medium">
+            <div className="flex items-center justify-center py-4 text-13 font-medium">
               <div className="text-accent-secondary">{t("loading")}...</div>
             </div>
           ) : (
-            <div className="py-4 flex justify-center items-center text-13 font-medium" onClick={getNextNotifications}>
-              <div className="text-accent-secondary hover:text-accent-primary transition-all cursor-pointer">
+            <div className="flex items-center justify-center py-4 text-13 font-medium" onClick={getNextNotifications}>
+              <div className="cursor-pointer text-accent-secondary transition-all hover:text-accent-primary">
                 {t("load_more")}
               </div>
             </div>
diff --git a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
index e18ea7f2280..da81c45f1b3 100644
--- a/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
@@ -23,15 +23,15 @@ export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props:
   const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
 
   return (
-    <div className="flex w-full items-center cursor-pointer py-1">
-      <div className="flex space-x-1 rounded-md bg-layer-3 p-0.5 w-full">
+    <div className="flex w-full cursor-pointer items-center py-1">
+      <div className="flex w-full space-x-1 rounded-md bg-layer-3 p-0.5">
         <button
           type="button"
           onClick={() => setSelectedFrequency("month")}
           className={cn(
-            "w-full rounded-sm px-1 py-0.5 text-caption-sm-medium leading-5 text-center",
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
             selectedFrequency === "month"
-              ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
               : "text-tertiary hover:text-secondary"
           )}
         >
@@ -41,15 +41,15 @@ export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props:
           type="button"
           onClick={() => setSelectedFrequency("year")}
           className={cn(
-            "w-full rounded-sm px-1 py-0.5 text-caption-sm-medium leading-5 text-center",
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
             selectedFrequency === "year"
-              ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
               : "text-tertiary hover:text-secondary"
           )}
         >
           Yearly
           {yearlyDiscount > 0 && (
-            <span className="bg-accent-primary text-on-color rounded-full px-1 py-0.5 ml-1.5 text-caption-xs-regular">
+            <span className="ml-1.5 rounded-full bg-accent-primary px-1 py-0.5 text-caption-xs-regular text-on-color">
               -{yearlyDiscount}%
             </span>
           )}
diff --git a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
index a11c6e7a775..c253244c593 100644
--- a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
@@ -53,18 +53,18 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
   };
 
   return (
-    <div className="flex flex-col justify-between col-span-1 p-3 space-y-0.5">
+    <div className="col-span-1 flex flex-col justify-between space-y-0.5 p-3">
       {/* Plan name and pricing section */}
       <div className="flex flex-col items-start">
-        <div className="flex w-full gap-2 items-center text-h4-semibold">
+        <div className="flex w-full items-center gap-2 text-h4-semibold">
           <span>{subscriptionName}</span>
           {subscriptionType === EProductSubscriptionEnum.PRO && (
-            <span className="px-2 py-0.5 rounded-sm text-on-color bg-accent-primary text-caption-sm-medium">
+            <span className="rounded-sm bg-accent-primary px-2 py-0.5 text-caption-sm-medium text-on-color">
               Popular
             </span>
           )}
         </div>
-        <div className="flex gap-x-2 items-start text-tertiary pb-1">
+        <div className="flex items-start gap-x-2 pb-1 text-tertiary">
           {isSubscriptionActive && displayPrice !== undefined && (
             <div className="flex items-center gap-1 text-h3-semibold text-primary">
               <DiscountInfo
@@ -99,7 +99,7 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
       )}
 
       {/* Subscription button */}
-      <div className="flex flex-col gap-1 py-3 items-start">
+      <div className="flex flex-col items-start gap-1 py-3">
         <Button variant="primary" size="lg" onClick={handleRedirection} className="w-full">
           {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
         </Button>
diff --git a/apps/web/ce/components/workspace/billing/root.tsx b/apps/web/ce/components/workspace/billing/root.tsx
index ee456702dd5..33100a4372a 100644
--- a/apps/web/ce/components/workspace/billing/root.tsx
+++ b/apps/web/ce/components/workspace/billing/root.tsx
@@ -44,7 +44,7 @@ export const BillingRoot = observer(function BillingRoot() {
     setProductBillingFrequency({ ...productBillingFrequency, [subscriptionType]: frequency });
 
   return (
-    <section className="relative size-full overflow-y-auto scrollbar-hide">
+    <section className="relative scrollbar-hide size-full overflow-y-auto">
       <div>
         <SettingsHeading
           title={t("workspace_settings.settings.billing_and_plans.heading")}
diff --git a/apps/web/ce/components/workspace/content-wrapper.tsx b/apps/web/ce/components/workspace/content-wrapper.tsx
index 868ea946de0..46d1d609b99 100644
--- a/apps/web/ce/components/workspace/content-wrapper.tsx
+++ b/apps/web/ce/components/workspace/content-wrapper.tsx
@@ -22,14 +22,14 @@ export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper
   const { shouldRenderAppRail } = useAppRailVisibility();
 
   return (
-    <div className="flex flex-col relative size-full overflow-hidden bg-canvas transition-all ease-in-out duration-300">
+    <div className="relative flex size-full flex-col overflow-hidden bg-canvas transition-all duration-300 ease-in-out">
       <TopNavigationRoot />
       <div className="relative flex size-full overflow-hidden">
         {/* Conditionally render AppRailRoot based on context */}
         {shouldRenderAppRail && <AppRailRoot />}
         <div
           className={cn(
-            "relative size-full pl-2 pb-2 pr-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden",
+            "relative size-full flex-grow overflow-hidden pr-2 pb-2 pl-2 transition-all duration-300 ease-in-out",
             {
               "pl-0!": shouldRenderAppRail,
             }
diff --git a/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx b/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
index 008c8901e19..4014f8fb28c 100644
--- a/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
+++ b/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -165,7 +165,7 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
       <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
       <div
         className={cn(
-          "group/project-item relative w-full  flex items-center rounded-md text-primary hover:bg-surface-2"
+          "group/project-item relative flex w-full items-center rounded-md text-primary hover:bg-surface-2"
         )}
         id={`${item.key}`}
       >
@@ -179,7 +179,7 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
             <button
               type="button"
               className={cn(
-                "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-placeholder cursor-grab group-hover/project-item:opacity-100 opacity-0",
+                "absolute top-1/2 -left-3 flex -translate-y-1/2 cursor-grab items-center justify-center rounded text-placeholder opacity-0 group-hover/project-item:opacity-100",
                 {
                   "cursor-grabbing": isDragging,
                   "opacity-100": isDragging,
@@ -207,14 +207,14 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
             {isPinned ? (
               <Tooltip tooltipContent="Unpin">
                 <PinOff
-                  className="size-3.5 flex-shrink-0 hover:text-tertiary outline-none text-placeholder"
+                  className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
                   onClick={() => unPinNavigationItem(item.key)}
                 />
               </Tooltip>
             ) : (
               <Tooltip tooltipContent="Pin">
                 <Pin
-                  className="size-3.5 flex-shrink-0 hover:text-tertiary outline-none text-placeholder"
+                  className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
                   onClick={() => pinNavigationItem(item.key)}
                 />
               </Tooltip>
diff --git a/apps/web/ce/components/workspace/upgrade-badge.tsx b/apps/web/ce/components/workspace/upgrade-badge.tsx
index b6f30f63e8d..039ac280af2 100644
--- a/apps/web/ce/components/workspace/upgrade-badge.tsx
+++ b/apps/web/ce/components/workspace/upgrade-badge.tsx
@@ -22,10 +22,10 @@ export function UpgradeBadge(props: TUpgradeBadge) {
   return (
     <div
       className={cn(
-        "w-fit cursor-pointer rounded-2xl text-accent-secondary bg-accent-primary/20 text-center font-medium outline-none",
+        "w-fit cursor-pointer rounded-2xl bg-accent-primary/20 text-center font-medium text-accent-secondary outline-none",
         {
-          "text-13 px-3": size === "md",
-          "text-11 px-2": size === "sm",
+          "px-3 text-13": size === "md",
+          "px-2 text-11": size === "sm",
         },
         className
       )}
diff --git a/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx b/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
index 67753b1cfe7..c4b6f3f0b20 100644
--- a/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
+++ b/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
@@ -180,7 +180,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
         filterIcon: LabelPropertyIcon,
         labels: workItemLabels ?? [],
         getOptionIcon: (color) => (
-          <span className="flex flex-shrink-0 size-2.5 rounded-full" style={{ backgroundColor: color }} />
+          <span className="flex size-2.5 flex-shrink-0 rounded-full" style={{ backgroundColor: color }} />
         ),
         ...operatorConfigs,
       }),
diff --git a/apps/web/core/components/account/auth-forms/auth-banner.tsx b/apps/web/core/components/account/auth-forms/auth-banner.tsx
index 496a6eddfbf..1cd0520b3d1 100644
--- a/apps/web/core/components/account/auth-forms/auth-banner.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-banner.tsx
@@ -25,15 +25,15 @@ export function AuthBanner(props: TAuthBanner) {
   return (
     <div
       role="alert"
-      className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10"
+      className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2"
     >
-      <div className="size-4 flex-shrink-0 grid place-items-center">
+      <div className="grid size-4 flex-shrink-0 place-items-center">
         <Info size={16} className="text-accent-primary" />
       </div>
       <p className="w-full text-13 font-medium text-accent-primary">{message}</p>
       <button
         type="button"
-        className="relative ml-auto size-6 rounded-xs grid place-items-center transition-all hover:bg-accent-primary/20 text-accent-primary/80"
+        className="relative ml-auto grid size-6 place-items-center rounded-xs text-accent-primary/80 transition-all hover:bg-accent-primary/20"
         onClick={() => handleBannerData?.(undefined)}
         aria-label={t("aria_labels.auth_forms.close_alert")}
       >
diff --git a/apps/web/core/components/account/auth-forms/auth-root.tsx b/apps/web/core/components/account/auth-forms/auth-root.tsx
index 9f075d03f5c..5cba8a178e9 100644
--- a/apps/web/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-root.tsx
@@ -151,8 +151,8 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
 
 function AuthContainer({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">{children}</div>
+    <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+      <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">{children}</div>
     </div>
   );
 }
diff --git a/apps/web/core/components/account/auth-forms/common/container.tsx b/apps/web/core/components/account/auth-forms/common/container.tsx
index 618c183ebe2..ecf13f9dddf 100644
--- a/apps/web/core/components/account/auth-forms/common/container.tsx
+++ b/apps/web/core/components/account/auth-forms/common/container.tsx
@@ -6,8 +6,8 @@
 
 export function FormContainer({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">{children}</div>
+    <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+      <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">{children}</div>
     </div>
   );
 }
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 7db78762d2d..8abddb42efa 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -51,12 +51,12 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
   return (
     <form onSubmit={handleFormSubmit} className="space-y-4">
       <div className="space-y-1">
-        <label htmlFor="email" className="text-13 text-tertiary font-medium">
+        <label htmlFor="email" className="text-13 font-medium text-tertiary">
           {t("auth.common.email.label")}
         </label>
         <div
           className={cn(
-            `relative flex items-center rounded-md bg-surface-1 border`,
+            `relative flex items-center rounded-md border bg-surface-1`,
             !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-strong`
           )}
           onFocus={() => {
@@ -73,7 +73,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder={t("auth.common.email.placeholder")}
-            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder autofill:bg-danger-primary focus:bg-none active:bg-transparent`}
             autoComplete="off"
             autoFocus
             ref={inputRef}
@@ -85,7 +85,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
                 setEmail("");
                 inputRef.current?.focus();
               }}
-              className="absolute right-3 size-5 grid place-items-center"
+              className="absolute right-3 grid size-5 place-items-center"
               aria-label={t("aria_labels.auth_forms.clear_email")}
               tabIndex={-1}
             >
@@ -94,7 +94,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
           )}
         </div>
         {emailError?.email && !isFocused && (
-          <p className="flex items-center gap-1 text-11 text-danger-primary px-0.5">
+          <p className="flex items-center gap-1 px-0.5 text-11 text-danger-primary">
             <CircleAlert height={12} width={12} />
             {t(emailError.email)}
           </p>
diff --git a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
index 1ef9fb71cb4..8b8e640c434 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
@@ -44,7 +44,7 @@ export function ForgotPasswordPopover() {
       <Popover.Panel className="fixed z-10">
         {({ close }) => (
           <div
-            className="border border-strong bg-surface-1 rounded-sm z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
+            className="z-10 ml-3 flex w-64 items-start gap-3 rounded-sm border border-strong bg-surface-1 px-2 py-1 text-left break-words"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
@@ -53,7 +53,7 @@ export function ForgotPasswordPopover() {
             <p className="text-11">{t("auth.forgot_password.errors.smtp_not_enabled")}</p>
             <button
               type="button"
-              className="flex-shrink-0 size-3 grid place-items-center"
+              className="grid size-3 flex-shrink-0 place-items-center"
               onClick={() => close()}
               aria-label={t("aria_labels.auth_forms.close_popover")}
             >
diff --git a/apps/web/core/components/account/auth-forms/forgot-password.tsx b/apps/web/core/components/account/auth-forms/forgot-password.tsx
index 3ccdfee20c8..ebb9345c35c 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx
@@ -110,7 +110,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
             )}
           />
           {resendTimerCode > 0 && (
-            <p className="flex items-start w-full gap-1 px-1 text-11 font-medium text-success-primary">
+            <p className="flex w-full items-start gap-1 px-1 text-11 font-medium text-success-primary">
               <CircleCheck height={12} width={12} className="mt-0.5" />
               {t("auth.forgot_password.email_sent")}
             </p>
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 92bcdfe9d1a..6fed9e88893 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -128,8 +128,8 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
   return (
     <>
       {isBannerMessage && mode === EAuthModes.SIGN_UP && (
-        <div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-subtle">
-          <div className="w-4 h-4 shrink-0 relative flex justify-center items-center">
+        <div className="relative flex items-center gap-2 rounded-md border border-danger-strong/50 bg-danger-subtle p-2">
+          <div className="relative flex h-4 w-4 shrink-0 items-center justify-center">
             <Info size={16} className="text-danger-primary" />
           </div>
           <div className="w-full text-13 font-medium text-danger-primary">
@@ -137,10 +137,10 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           </div>
           <button
             type="button"
-            className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-subtle-hover text-accent-primary/80"
+            className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-danger-subtle-hover"
             onClick={() => setBannerMessage(false)}
           >
-            <CloseIcon className="w-4 h-4 shrink-0 text-danger-primary" />
+            <CloseIcon className="h-4 w-4 shrink-0 text-danger-primary" />
           </button>
         </div>
       )}
@@ -174,7 +174,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
           <label htmlFor="email" className="text-13 font-medium text-tertiary">
             {t("auth.common.email.label")}
           </label>
-          <div className={`relative flex items-center rounded-md bg-surface-1 border border-strong`}>
+          <div className={`relative flex items-center rounded-md border border-strong bg-surface-1`}>
             <Input
               id="email"
               name="email"
@@ -182,7 +182,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               value={passwordFormData.email}
               onChange={(e) => handleFormChange("email", e.target.value)}
               placeholder={t("auth.common.email.placeholder")}
-              className={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
+              className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
               disabled
             />
             {passwordFormData.email.length > 0 && (
@@ -199,7 +199,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
         </div>
 
         <div className="space-y-1">
-          <label htmlFor="password" className="text-13 text-tertiary font-medium">
+          <label htmlFor="password" className="text-13 font-medium text-tertiary">
             {mode === EAuthModes.SIGN_IN ? t("auth.common.password.label") : t("auth.common.password.set_password")}
           </label>
           <div className="relative flex items-center rounded-md bg-surface-1">
@@ -210,7 +210,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               value={passwordFormData.password}
               onChange={(e) => handleFormChange("password", e.target.value)}
               placeholder={t("auth.common.password.placeholder")}
-              className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
+              className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
               autoComplete="off"
@@ -219,7 +219,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             <button
               type="button"
               onClick={() => handleShowPassword("password")}
-              className="absolute right-3 size-5 grid place-items-center"
+              className="absolute right-3 grid size-5 place-items-center"
               aria-label={t(
                 showPassword?.password ? "aria_labels.auth_forms.hide_password" : "aria_labels.auth_forms.show_password"
               )}
@@ -236,7 +236,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
 
         {mode === EAuthModes.SIGN_UP && (
           <div className="space-y-1">
-            <label htmlFor="confirm-password" className="text-13 text-tertiary font-medium">
+            <label htmlFor="confirm-password" className="text-13 font-medium text-tertiary">
               {t("auth.common.password.confirm_password.label")}
             </label>
             <div className="relative flex items-center rounded-md bg-surface-1">
@@ -247,14 +247,14 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
                 value={passwordFormData.confirm_password}
                 onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                 placeholder={t("auth.common.password.confirm_password.placeholder")}
-                className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
+                className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
                 onFocus={() => setIsRetryPasswordInputFocused(true)}
                 onBlur={() => setIsRetryPasswordInputFocused(false)}
                 autoComplete="off"
               />
               <button
                 type="button"
-                className="absolute right-3 size-5 grid place-items-center"
+                className="absolute right-3 grid size-5 place-items-center"
                 aria-label={t(
                   showPassword?.retypePassword
                     ? "aria_labels.auth_forms.hide_password"
diff --git a/apps/web/core/components/account/auth-forms/reset-password.tsx b/apps/web/core/components/account/auth-forms/reset-password.tsx
index 2f8ee050981..98283d35054 100644
--- a/apps/web/core/components/account/auth-forms/reset-password.tsx
+++ b/apps/web/core/components/account/auth-forms/reset-password.tsx
@@ -111,7 +111,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
       >
         <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
         <div className="space-y-1">
-          <label className="text-13 text-tertiary font-medium" htmlFor="email">
+          <label className="text-13 font-medium text-tertiary" htmlFor="email">
             {t("auth.common.email.label")}
           </label>
           <div className="relative flex items-center rounded-md bg-surface-1">
@@ -122,14 +122,14 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
               value={resetFormData.email}
               //hasError={Boolean(errors.email)}
               placeholder={t("auth.common.email.placeholder")}
-              className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
+              className="h-10 w-full cursor-not-allowed border border-strong !bg-surface-1 pr-12 text-placeholder"
               autoComplete="off"
               disabled
             />
           </div>
         </div>
         <div className="space-y-1">
-          <label className="text-13 text-tertiary font-medium" htmlFor="password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="password">
             {t("auth.common.password.label")}
           </label>
           <div className="relative flex items-center rounded-md bg-surface-1">
@@ -162,7 +162,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
           <PasswordStrengthIndicator password={resetFormData.password} isFocused={isPasswordInputFocused} />
         </div>
         <div className="space-y-1">
-          <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
             {t("auth.common.password.confirm_password.label")}
           </label>
           <div className="relative flex items-center rounded-md bg-surface-1">
diff --git a/apps/web/core/components/account/auth-forms/set-password.tsx b/apps/web/core/components/account/auth-forms/set-password.tsx
index 1c4790797b1..f16db6650bb 100644
--- a/apps/web/core/components/account/auth-forms/set-password.tsx
+++ b/apps/web/core/components/account/auth-forms/set-password.tsx
@@ -114,7 +114,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
       <AuthFormHeader title="Set password" description="Create a new password." />
       <form className="space-y-4" onSubmit={(e) => handleSubmit(e)}>
         <div className="space-y-1">
-          <label className="text-13 text-tertiary font-medium" htmlFor="email">
+          <label className="text-13 font-medium text-tertiary" htmlFor="email">
             {t("auth.common.email.label")}
           </label>
           <div className="relative flex items-center rounded-md bg-surface-1">
@@ -125,14 +125,14 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
               value={user?.email}
               //hasError={Boolean(errors.email)}
               placeholder={t("auth.common.email.placeholder")}
-              className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
+              className="h-10 w-full cursor-not-allowed border border-strong !bg-surface-1 pr-12 text-placeholder"
               autoComplete="off"
               disabled
             />
           </div>
         </div>
         <div className="space-y-1">
-          <label className="text-13 text-tertiary font-medium" htmlFor="password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="password">
             {t("auth.common.password.label")}
           </label>
           <div className="relative flex items-center rounded-md bg-surface-1">
@@ -165,7 +165,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
           <PasswordStrengthIndicator password={passwordFormData.password} isFocused={isPasswordInputFocused} />
         </div>
         <div className="space-y-1">
-          <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
+          <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
             {t("auth.common.password.confirm_password.label")}
           </label>
           <div className="relative flex items-center rounded-md bg-surface-1">
diff --git a/apps/web/core/components/account/auth-forms/unique-code.tsx b/apps/web/core/components/account/auth-forms/unique-code.tsx
index a2209129527..aa65175b49d 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -98,7 +98,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
         <label htmlFor="email" className="text-13 font-medium text-tertiary">
           {t("auth.common.email.label")}
         </label>
-        <div className={`relative flex items-center rounded-md bg-surface-1 border border-strong`}>
+        <div className={`relative flex items-center rounded-md border border-strong bg-surface-1`}>
           <Input
             id="email"
             name="email"
@@ -106,14 +106,14 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
             value={uniqueCodeFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder={t("auth.common.email.placeholder")}
-            className="disable-autofill-style h-10 w-full placeholder:text-placeholder border-0"
+            className="h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder"
             autoComplete="off"
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
             <button
               type="button"
-              className="absolute right-3 size-5 grid place-items-center"
+              className="absolute right-3 grid size-5 place-items-center"
               aria-label={t("aria_labels.auth_forms.clear_email")}
               onClick={handleEmailClear}
             >
@@ -133,11 +133,11 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
           placeholder={t("auth.common.unique_code.placeholder")}
-          className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
+          className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
           autoComplete="off"
           autoFocus
         />
-        <div className="flex w-full items-center justify-between px-1 text-11 pt-1">
+        <div className="flex w-full items-center justify-between px-1 pt-1 text-11">
           <p className="flex items-center gap-1 font-medium text-success-primary">
             <CircleCheck height={12} width={12} />
             {t("auth.common.unique_code.paste_code")}
diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx
index b094e5d3973..f4dba2a81c7 100644
--- a/apps/web/core/components/account/deactivate-account-modal.tsx
+++ b/apps/web/core/components/account/deactivate-account-modal.tsx
@@ -62,17 +62,17 @@ export function DeactivateAccountModal(props: Props) {
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
-      <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+      <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
         <div className="">
           <div className="flex items-start gap-x-4">
-            <div className="mt-3 grid place-items-center rounded-full bg-danger-subtle p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
+            <div className="mt-3 grid place-items-center rounded-full bg-danger-subtle p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4">
               <TrashIcon
                 className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
                 aria-hidden="true"
               />
             </div>
             <div>
-              <h3 className="my-4 text-20 font-medium leading-6 text-primary">{t("deactivate_your_account")}</h3>
+              <h3 className="my-4 text-20 leading-6 font-medium text-primary">{t("deactivate_your_account")}</h3>
               <p className="mt-6 list-disc pr-4 text-14 font-regular text-secondary">
                 {t("deactivate_your_account_description")}
               </p>
diff --git a/apps/web/core/components/account/terms-and-conditions.tsx b/apps/web/core/components/account/terms-and-conditions.tsx
index 131e61083eb..f6be5963491 100644
--- a/apps/web/core/components/account/terms-and-conditions.tsx
+++ b/apps/web/core/components/account/terms-and-conditions.tsx
@@ -35,7 +35,7 @@ function LegalLink({ href, children }: { href: string; children: React.ReactNode
 export function TermsAndConditions({ authType = EAuthModes.SIGN_IN }: TermsAndConditionsProps) {
   return (
     <div className="flex items-center justify-center">
-      <p className="text-center text-13 text-tertiary whitespace-pre-line">
+      <p className="text-center text-13 whitespace-pre-line text-tertiary">
         {`${MESSAGES[authType]}, you understand and agree to \n our `}
         <LegalLink href={LEGAL_LINKS.termsOfService}>Terms of Service</LegalLink> and{" "}
         <LegalLink href={LEGAL_LINKS.privacyPolicy}>Privacy Policy</LegalLink>.
diff --git a/apps/web/core/components/analytics/analytics-section-wrapper.tsx b/apps/web/core/components/analytics/analytics-section-wrapper.tsx
index 1585c3581da..9a3af1171b8 100644
--- a/apps/web/core/components/analytics/analytics-section-wrapper.tsx
+++ b/apps/web/core/components/analytics/analytics-section-wrapper.tsx
@@ -19,9 +19,9 @@ function AnalyticsSectionWrapper(props: Props) {
   const { title, children, className, subtitle, actions, headerClassName } = props;
   return (
     <div className={className}>
-      <div className={cn("mb-6 flex items-center gap-2 text-nowrap ", headerClassName)}>
+      <div className={cn("mb-6 flex items-center gap-2 text-nowrap", headerClassName)}>
         {title && (
-          <div className="flex  items-center gap-2 ">
+          <div className="flex items-center gap-2">
             <h1 className={"text-16 font-medium"}>{title}</h1>
             {/* {subtitle && <p className="text-16 text-tertiary"> • {subtitle}</p>} */}
           </div>
diff --git a/apps/web/core/components/analytics/empty-state.tsx b/apps/web/core/components/analytics/empty-state.tsx
index 0f862bdee17..8c2a7219392 100644
--- a/apps/web/core/components/analytics/empty-state.tsx
+++ b/apps/web/core/components/analytics/empty-state.tsx
@@ -41,7 +41,7 @@ function AnalyticsEmptyState({ title, description, assetPath, className }: Props
         )}
         <div className="flex flex-shrink flex-col items-center gap-1.5 text-center">
           <h3 className={cn("text-18 font-semibold")}>{title}</h3>
-          {description && <p className="text-13 text-tertiary max-w-[350px]">{description}</p>}
+          {description && <p className="max-w-[350px] text-13 text-tertiary">{description}</p>}
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/analytics/insight-table/data-table.tsx b/apps/web/core/components/analytics/insight-table/data-table.tsx
index 8836bc89e81..9c24d1aa572 100644
--- a/apps/web/core/components/analytics/insight-table/data-table.tsx
+++ b/apps/web/core/components/analytics/insight-table/data-table.tsx
@@ -67,9 +67,9 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
   return (
     <div className="space-y-4">
       <div className="flex w-full items-center justify-between">
-        <div className="relative flex max-w-[300px] items-center gap-4 ">
+        <div className="relative flex max-w-[300px] items-center gap-4">
           {table.getHeaderGroups()?.[0]?.headers?.[0]?.id && (
-            <div className="flex items-center gap-2 whitespace-nowrap text-13 text-placeholder">
+            <div className="flex items-center gap-2 text-13 whitespace-nowrap text-placeholder">
               {searchPlaceholder}
             </div>
           )}
diff --git a/apps/web/core/components/analytics/overview/active-project-item.tsx b/apps/web/core/components/analytics/overview/active-project-item.tsx
index 82127daa42d..e71ae52d530 100644
--- a/apps/web/core/components/analytics/overview/active-project-item.tsx
+++ b/apps/web/core/components/analytics/overview/active-project-item.tsx
@@ -41,9 +41,9 @@ function ActiveProjectItem(props: Props) {
   if (!projectDetails) return null;
 
   return (
-    <div className="flex items-center justify-between gap-2 w-full">
-      <div className="flex items-center gap-2 flex-1 overflow-hidden">
-        <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-layer-1 shrink-0">
+    <div className="flex w-full items-center justify-between gap-2">
+      <div className="flex flex-1 items-center gap-2 overflow-hidden">
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-layer-1">
           <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
             {projectDetails?.logo_props ? (
               <Logo logo={projectDetails?.logo_props} size={16} />
@@ -55,7 +55,7 @@ function ActiveProjectItem(props: Props) {
           </span>
         </div>
         <Tooltip tooltipContent={projectDetails?.name} position="top-start">
-          <p className="text-13 font-medium truncate">{projectDetails?.name}</p>
+          <p className="truncate text-13 font-medium">{projectDetails?.name}</p>
         </Tooltip>
       </div>
       <CompletionPercentage
diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx
index b34aebcf800..1ad22dc5423 100644
--- a/apps/web/core/components/analytics/overview/active-projects.tsx
+++ b/apps/web/core/components/analytics/overview/active-projects.tsx
@@ -38,7 +38,7 @@ const ActiveProjects = observer(function ActiveProjects() {
       subtitle={selectedDurationLabel}
       className="md:col-span-2"
     >
-      <div className="flex flex-col gap-4 h-[350px] overflow-auto">
+      <div className="flex h-[350px] flex-col gap-4 overflow-auto">
         {isProjectAnalyticsCountLoading &&
           Array.from({ length: 5 }).map((_, index) => <Loader.Item key={index} height="40px" width="100%" />)}
         {!isProjectAnalyticsCountLoading &&
diff --git a/apps/web/core/components/analytics/overview/project-insights.tsx b/apps/web/core/components/analytics/overview/project-insights.tsx
index 65735e8a4f8..6987ce19450 100644
--- a/apps/web/core/components/analytics/overview/project-insights.tsx
+++ b/apps/web/core/components/analytics/overview/project-insights.tsx
@@ -71,7 +71,7 @@ const ProjectInsights = observer(function ProjectInsights() {
           {projectInsightsData && (
             <Suspense fallback={<ProjectInsightsLoader />}>
               <RadarChart
-                className="h-[350px] w-full lg:w-3/5 text-accent-primary"
+                className="h-[350px] w-full text-accent-primary lg:w-3/5"
                 data={projectInsightsData}
                 dataKey="key"
                 radars={[
@@ -97,7 +97,7 @@ const ProjectInsights = observer(function ProjectInsights() {
           )}
           <div className="w-full lg:w-2/5">
             <div className="text-13 text-tertiary">{t("workspace_analytics.summary_of_projects")}</div>
-            <div className=" mb-3 border-b border-subtle py-2">{t("workspace_analytics.all_projects")}</div>
+            <div className="mb-3 border-b border-subtle py-2">{t("workspace_analytics.all_projects")}</div>
             <div className="flex flex-col gap-4">
               <div className="flex items-center justify-between text-13 text-tertiary">
                 <div>{t("workspace_analytics.trend_on_charts")}</div>
diff --git a/apps/web/core/components/analytics/overview/root.tsx b/apps/web/core/components/analytics/overview/root.tsx
index 600d5692a08..4b191ca2fea 100644
--- a/apps/web/core/components/analytics/overview/root.tsx
+++ b/apps/web/core/components/analytics/overview/root.tsx
@@ -15,7 +15,7 @@ function Overview() {
     <AnalyticsWrapper i18nTitle="common.overview">
       <div className="flex flex-col gap-14">
         <TotalInsights analyticsType="overview" />
-        <div className="grid grid-cols-1 gap-14 md:grid-cols-5 ">
+        <div className="grid grid-cols-1 gap-14 md:grid-cols-5">
           <ProjectInsights />
           <ActiveProjects />
         </div>
diff --git a/apps/web/core/components/analytics/select/duration.tsx b/apps/web/core/components/analytics/select/duration.tsx
index afeb8f75404..695e5c12ebf 100644
--- a/apps/web/core/components/analytics/select/duration.tsx
+++ b/apps/web/core/components/analytics/select/duration.tsx
@@ -45,7 +45,7 @@ function DurationDropdown({ placeholder = "Duration", onChange, value }: Props)
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2 p-1 ">
+        <div className="flex items-center gap-2 p-1">
           <Calendar className="h-4 w-4" />
           {value ? ANALYTICS_DURATION_FILTER_OPTIONS.find((opt) => opt.value === value)?.name : placeholder}
         </div>
diff --git a/apps/web/core/components/analytics/trend-piece.tsx b/apps/web/core/components/analytics/trend-piece.tsx
index f246c4e4185..744e40cbf53 100644
--- a/apps/web/core/components/analytics/trend-piece.tsx
+++ b/apps/web/core/components/analytics/trend-piece.tsx
@@ -64,7 +64,7 @@ function TrendPiece(props: Props) {
   return (
     <div
       className={cn(
-        "flex items-center gap-1 p-1 rounded-md",
+        "flex items-center gap-1 rounded-md p-1",
         variants[variant][isOnTrack ? "ontrack" : isOffTrack ? "offtrack" : "atrisk"],
         config.text,
         className
diff --git a/apps/web/core/components/analytics/work-items/priority-chart.tsx b/apps/web/core/components/analytics/work-items/priority-chart.tsx
index 48180c0fabc..f5ba27d6105 100644
--- a/apps/web/core/components/analytics/work-items/priority-chart.tsx
+++ b/apps/web/core/components/analytics/work-items/priority-chart.tsx
@@ -196,7 +196,7 @@ const PriorityChart = observer(function PriorityChart(props: Props) {
   );
 
   return (
-    <div className="flex flex-col gap-12 ">
+    <div className="flex flex-col gap-12">
       {priorityChartLoading ? (
         <ChartLoader />
       ) : parsedData?.data && parsedData.data.length > 0 ? (
diff --git a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
index fec1a703604..d63b84da8e1 100644
--- a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
+++ b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
@@ -116,11 +116,11 @@ const WorkItemsInsightTable = observer(function WorkItemsInsightTable() {
                       shape="circle"
                     />
                   ) : (
-                    <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-layer-1  capitalize overflow-hidden">
+                    <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-layer-1 capitalize">
                       {row.original.display_name ? (
                         row.original.display_name?.[0]
                       ) : (
-                        <UserRound className="text-secondary " size={12} />
+                        <UserRound className="text-secondary" size={12} />
                       )}
                     </div>
                   )}
diff --git a/apps/web/core/components/api-token/empty-state.tsx b/apps/web/core/components/api-token/empty-state.tsx
index 16b101b0ed6..944d19e34be 100644
--- a/apps/web/core/components/api-token/empty-state.tsx
+++ b/apps/web/core/components/api-token/empty-state.tsx
@@ -22,8 +22,8 @@ export function ApiTokenEmptyState(props: Props) {
       className={`mx-auto flex w-full items-center justify-center rounded-xs border border-subtle bg-surface-2 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
-        <img src={emptyApiTokens} className="w-52 sm:w-60 object-contain" alt="empty" />
-        <h6 className="mb-3 mt-6 text-18 font-semibold sm:mt-8">No API tokens</h6>
+        <img src={emptyApiTokens} className="w-52 object-contain sm:w-60" alt="empty" />
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">No API tokens</h6>
         <p className="mb-7 text-tertiary sm:mb-8">
           Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
         </p>
diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 87d7af327ac..d345c80d0b1 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -164,7 +164,7 @@ export function CreateApiTokenForm(props: Props) {
                 onChange={onChange}
                 hasError={Boolean(errors.description)}
                 placeholder={t("description")}
-                className="w-full text-14 resize-none min-h-24"
+                className="min-h-24 w-full resize-none text-14"
               />
             )}
           />
@@ -181,7 +181,7 @@ export function CreateApiTokenForm(props: Props) {
                       customButton={
                         <div
                           className={cn(
-                            "h-7 flex items-center gap-2 rounded-sm border-[0.5px] border-strong px-2 py-0.5",
+                            "flex h-7 items-center gap-2 rounded-sm border-[0.5px] border-strong px-2 py-0.5",
                             {
                               "text-placeholder": neverExpires,
                             }
@@ -237,7 +237,7 @@ export function CreateApiTokenForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-subtle">
+      <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <div className="flex cursor-pointer items-center gap-1.5" onClick={toggleNeverExpires}>
           <div className="flex cursor-pointer items-center justify-center">
             <ToggleSwitch value={neverExpires} onChange={() => {}} size="sm" />
diff --git a/apps/web/core/components/api-token/modal/generated-token-details.tsx b/apps/web/core/components/api-token/modal/generated-token-details.tsx
index 8995c438e08..aad163191f8 100644
--- a/apps/web/core/components/api-token/modal/generated-token-details.tsx
+++ b/apps/web/core/components/api-token/modal/generated-token-details.tsx
@@ -39,17 +39,17 @@ export function GeneratedTokenDetails(props: Props) {
   return (
     <div className="w-full p-5">
       <div className="w-full space-y-3 text-wrap">
-        <h3 className="text-16 font-medium leading-6 text-primary">{t("workspace_settings.key_created")}</h3>
+        <h3 className="text-16 leading-6 font-medium text-primary">{t("workspace_settings.key_created")}</h3>
         <p className="text-13 text-placeholder">{t("workspace_settings.copy_key")}</p>
       </div>
       <button
         type="button"
         onClick={() => copyApiToken(tokenDetails.token ?? "")}
-        className="mt-4 flex truncate w-full items-center justify-between rounded-md border-[0.5px] border-subtle px-3 py-2 text-13 font-medium outline-none"
+        className="mt-4 flex w-full items-center justify-between truncate rounded-md border-[0.5px] border-subtle px-3 py-2 text-13 font-medium outline-none"
       >
         <span className="truncate pr-2">{tokenDetails.token}</span>
         <Tooltip tooltipContent="Copy secret key" isMobile={isMobile}>
-          <CopyIcon className="h-4 w-4 text-placeholder flex-shrink-0" />
+          <CopyIcon className="h-4 w-4 flex-shrink-0 text-placeholder" />
         </Tooltip>
       </button>
       <div className="mt-6 flex items-center justify-between">
diff --git a/apps/web/core/components/api-token/token-list-item.tsx b/apps/web/core/components/api-token/token-list-item.tsx
index 8b40b9b16cc..833a7df429d 100644
--- a/apps/web/core/components/api-token/token-list-item.tsx
+++ b/apps/web/core/components/api-token/token-list-item.tsx
@@ -52,7 +52,7 @@ export function ApiTokenListItem(props: Props) {
         </div>
         <div className="mt-1 flex w-full flex-col justify-center">
           {token.description.trim() !== "" && (
-            <p className="mb-1 max-w-[70%] break-words text-13">{token.description}</p>
+            <p className="mb-1 max-w-[70%] text-13 break-words">{token.description}</p>
           )}
           <p className="mb-1 text-11 leading-6 text-placeholder">
             {token.is_active
diff --git a/apps/web/core/components/archives/archive-tabs-list.tsx b/apps/web/core/components/archives/archive-tabs-list.tsx
index 1b29c14156d..96396b9a930 100644
--- a/apps/web/core/components/archives/archive-tabs-list.tsx
+++ b/apps/web/core/components/archives/archive-tabs-list.tsx
@@ -54,10 +54,10 @@ export const ArchiveTabsList = observer(function ArchiveTabsList() {
           tab.shouldRender(projectDetails) && (
             <Link key={tab.key} href={`/${workspaceSlug}/projects/${projectId}/archives/${tab.key}`}>
               <span
-                className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 py-4 px-4 text-13 font-medium outline-none ${
+                className={`flex min-w-min flex-shrink-0 border-b-2 px-4 py-4 text-13 font-medium whitespace-nowrap outline-none ${
                   pathname.includes(tab.key)
                     ? "border-accent-strong text-accent-primary"
-                    : "border-transparent hover:border-subtle text-tertiary hover:text-placeholder"
+                    : "border-transparent text-tertiary hover:border-subtle hover:text-placeholder"
                 }`}
               >
                 {tab.label}
diff --git a/apps/web/core/components/auth-screens/auth-base.tsx b/apps/web/core/components/auth-screens/auth-base.tsx
index c0b19af250b..9d7af0d3523 100644
--- a/apps/web/core/components/auth-screens/auth-base.tsx
+++ b/apps/web/core/components/auth-screens/auth-base.tsx
@@ -16,7 +16,7 @@ type AuthBaseProps = {
 
 export function AuthBase({ authType }: AuthBaseProps) {
   return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
       <AuthHeader type={authType} />
       <AuthRoot authMode={authType} />
       <AuthFooter />
diff --git a/apps/web/core/components/auth-screens/footer.tsx b/apps/web/core/components/auth-screens/footer.tsx
index fbe6b842893..7ed0b4e7e5e 100644
--- a/apps/web/core/components/auth-screens/footer.tsx
+++ b/apps/web/core/components/auth-screens/footer.tsx
@@ -32,10 +32,10 @@ const BRAND_LOGOS: {
 export function AuthFooter() {
   return (
     <div className="flex flex-col items-center gap-6">
-      <span className="text-13 text-tertiary whitespace-nowrap">Join 10,000+ teams building with Plane</span>
-      <div className="flex items-center justify-center gap-x-10 gap-y-4 w-full flex-wrap">
+      <span className="text-13 whitespace-nowrap text-tertiary">Join 10,000+ teams building with Plane</span>
+      <div className="flex w-full flex-wrap items-center justify-center gap-x-10 gap-y-4">
         {BRAND_LOGOS.map((brand) => (
-          <div className="flex items-center justify-center h-7 flex-1" key={brand.id}>
+          <div className="flex h-7 flex-1 items-center justify-center" key={brand.id}>
             {brand.icon}
           </div>
         ))}
diff --git a/apps/web/core/components/auth-screens/header.tsx b/apps/web/core/components/auth-screens/header.tsx
index 31ddfeff8d2..817bdf4464c 100644
--- a/apps/web/core/components/auth-screens/header.tsx
+++ b/apps/web/core/components/auth-screens/header.tsx
@@ -45,7 +45,7 @@ export const AuthHeader = observer(function AuthHeader({ type }: AuthHeaderProps
       pageTitle={t(authContentMap[type].pageTitle)}
       additionalAction={
         enableSignUpConfig && (
-          <div className="flex flex-col items-end text-13 font-medium text-center sm:items-center sm:gap-2 sm:flex-row text-tertiary">
+          <div className="flex flex-col items-end text-center text-13 font-medium text-tertiary sm:flex-row sm:items-center sm:gap-2">
             <span className="text-body-sm-regular text-tertiary">{t(authContentMap[type].text)}</span>
             <Link
               data-ph-element={AUTH_TRACKER_ELEMENTS.NAVIGATE_TO_SIGN_UP}
@@ -71,7 +71,7 @@ export function AuthHeaderBase(props: TAuthHeaderBase) {
   return (
     <>
       <PageHead title={pageTitle + " - Plane"} />
-      <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+      <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
         <Link href="/">
           <PlaneLockup height={20} width={95} className="text-primary" />
         </Link>
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
index d724f43db7a..1221e232674 100644
--- a/apps/web/core/components/automation/auto-archive-automation.tsx
+++ b/apps/web/core/components/automation/auto-archive-automation.tsx
@@ -69,8 +69,8 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
       />
       <div className="flex flex-col gap-4 border-b border-subtle py-2">
         <div className="flex items-center gap-3">
-          <div className="shrink-0 size-10 grid place-items-center rounded-sm bg-layer-2">
-            <ArchiveRestore className="shrink-0 size-4 text-primary" />
+          <div className="grid size-10 shrink-0 place-items-center rounded-sm bg-layer-2">
+            <ArchiveRestore className="size-4 shrink-0 text-primary" />
           </div>
           <SettingsControlItem
             title={t("project_settings.automations.auto-archive.title")}
@@ -106,7 +106,7 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
 
                       <button
                         type="button"
-                        className="flex w-full select-none items-center rounded-sm px-1 py-1.5 text-13 text-secondary hover:bg-layer-1"
+                        className="flex w-full items-center rounded-sm px-1 py-1.5 text-13 text-secondary select-none hover:bg-layer-1"
                         onClick={() => setmonthModal(true)}
                       >
                         {t("common.customize_time_range")}
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index 51c3fdddc73..48c7203abde 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -87,8 +87,8 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
       />
       <div className="flex flex-col gap-4 py-2">
         <div className="flex items-center gap-3">
-          <div className="shrink-0 size-10 grid place-items-center rounded-sm bg-layer-2">
-            <ArchiveX className="shrink-0 size-4 text-danger-primary" />
+          <div className="grid size-10 shrink-0 place-items-center rounded-sm bg-layer-2">
+            <ArchiveX className="size-4 shrink-0 text-danger-primary" />
           </div>
           <SettingsControlItem
             title={t("project_settings.automations.auto-close.title")}
@@ -136,7 +136,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
                         ))}
                         <button
                           type="button"
-                          className="flex w-full select-none items-center rounded-sm px-1 py-1.5 text-secondary hover:bg-layer-1"
+                          className="flex w-full items-center rounded-sm px-1 py-1.5 text-secondary select-none hover:bg-layer-1"
                           onClick={() => setmonthModal(true)}
                         >
                           {t("common.customize_time_range")}
@@ -146,7 +146,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
                   </div>
                 </div>
 
-                <div className="ppy sm:py-10 flex w-full items-center justify-between gap-2 px-5 py-4">
+                <div className="ppy flex w-full items-center justify-between gap-2 px-5 py-4 sm:py-10">
                   <div className="w-1/2 text-13 font-medium">
                     {t("project_settings.automations.auto-close.auto_close_status")}
                   </div>
diff --git a/apps/web/core/components/automation/select-month-modal.tsx b/apps/web/core/components/automation/select-month-modal.tsx
index e29e247df20..ed847676ac3 100644
--- a/apps/web/core/components/automation/select-month-modal.tsx
+++ b/apps/web/core/components/automation/select-month-modal.tsx
@@ -48,7 +48,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
     <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div>
-          <h3 className="text-16 font-medium leading-6 text-primary">Customize time range</h3>
+          <h3 className="text-16 leading-6 font-medium text-primary">Customize time range</h3>
           <div className="mt-8 flex items-center gap-2">
             <div className="flex w-full flex-col justify-center gap-1">
               {type === "auto-close" ? (
@@ -76,7 +76,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
                           min={1}
                           max={12}
                         />
-                        <span className="absolute right-8 top-2.5 text-13 text-secondary">Months</span>
+                        <span className="absolute top-2.5 right-8 text-13 text-secondary">Months</span>
                       </div>
                     )}
                   />
@@ -110,7 +110,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
                           min={1}
                           max={12}
                         />
-                        <span className="absolute right-8 top-2.5 text-13 text-secondary">Months</span>
+                        <span className="absolute top-2.5 right-8 text-13 text-secondary">Months</span>
                       </div>
                     )}
                   />
diff --git a/apps/web/core/components/base-layouts/gantt/sidebar.tsx b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
index c044cca45f1..4b125d680f7 100644
--- a/apps/web/core/components/base-layouts/gantt/sidebar.tsx
+++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
@@ -109,7 +109,7 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBa
                       >
                         <Row
                           className={cn(
-                            "group w-full flex items-center gap-2 pr-4 bg-layer-transparent hover:bg-layer-transparent-hover",
+                            "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
                             {
                               "bg-layer-transparent-hover": isBlockHoveredOn,
                             }
@@ -138,7 +138,7 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBa
           })}
           {canLoadMoreBlocks && (
             <div ref={setIntersectionElement} className="p-2">
-              <div className="flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm md:px-1 px-4 py-1.5 bg-layer-1 animate-pulse" />
+              <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
             </div>
           )}
         </>
diff --git a/apps/web/core/components/base-layouts/kanban/group.tsx b/apps/web/core/components/base-layouts/kanban/group.tsx
index 87dadf36d50..691d8f6c4b6 100644
--- a/apps/web/core/components/base-layouts/kanban/group.tsx
+++ b/apps/web/core/components/base-layouts/kanban/group.tsx
@@ -41,7 +41,7 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
     <div
       ref={groupRef}
       className={cn(
-        "relative flex flex-shrink-0 flex-col w-[350px] border-[1px] border-transparent p-2 pt-0 max-h-full overflow-y-auto bg-layer-1 rounded-md",
+        "relative flex max-h-full w-[350px] flex-shrink-0 flex-col overflow-y-auto rounded-md border-[1px] border-transparent bg-layer-1 p-2 pt-0",
         {
           "bg-layer-1": isDraggingOver,
         },
@@ -49,7 +49,7 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
       )}
     >
       {/* Group Header */}
-      <div className="sticky top-0 z-[2] w-full flex-shrink-0 px-1 py-2 cursor-pointer">
+      <div className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer px-1 py-2">
         {renderGroupHeader ? (
           renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
         ) : (
@@ -93,8 +93,8 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
       )}
 
       {isDraggingOver && enableDragDrop && (
-        <div className="absolute top-0 left-0 h-full w-full flex items-center justify-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 border-[1px] border-strong z-[2]">
-          <div className="p-3 my-8 flex flex-col rounded-sm items-center text-secondary">
+        <div className="absolute top-0 left-0 z-[2] flex h-full w-full items-center justify-center rounded-sm border-[1px] border-strong bg-layer-1/85 text-13 font-medium text-tertiary">
+          <div className="my-8 flex flex-col items-center rounded-sm p-3 text-secondary">
             {t("common.drop_here_to_move")}
           </div>
         </div>
diff --git a/apps/web/core/components/base-layouts/kanban/layout.tsx b/apps/web/core/components/base-layouts/kanban/layout.tsx
index 8305ad9ce88..ffa0c2d7313 100644
--- a/apps/web/core/components/base-layouts/kanban/layout.tsx
+++ b/apps/web/core/components/base-layouts/kanban/layout.tsx
@@ -44,7 +44,7 @@ export const BaseKanbanLayout = observer(function BaseKanbanLayout<T extends IBa
   );
 
   return (
-    <div ref={containerRef} className={cn("relative w-full flex gap-2 p-3 h-full overflow-x-auto", className)}>
+    <div ref={containerRef} className={cn("relative flex h-full w-full gap-2 overflow-x-auto p-3", className)}>
       {groups.map((group) => {
         const itemIds = groupedItemIds[group.id] || [];
         const isCollapsed = collapsedGroups.includes(group.id);
diff --git a/apps/web/core/components/base-layouts/list/group.tsx b/apps/web/core/components/base-layouts/list/group.tsx
index 8cda8691ade..a11ae4a7769 100644
--- a/apps/web/core/components/base-layouts/list/group.tsx
+++ b/apps/web/core/components/base-layouts/list/group.tsx
@@ -44,7 +44,7 @@ export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayo
       })}
     >
       {/* Group Header */}
-      <div className="sticky top-0 w-full shrink-0 border-b border-subtle bg-layer-1 hover:bg-layer-1-hover py-1 px-6 cursor-pointer z-10">
+      <div className="sticky top-0 z-10 w-full shrink-0 cursor-pointer border-b border-subtle bg-layer-1 px-6 py-1 hover:bg-layer-1-hover">
         {renderGroupHeader ? (
           renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
         ) : (
@@ -82,8 +82,8 @@ export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayo
       )}
 
       {isDraggingOver && enableDragDrop && (
-        <div className="absolute top-0 left-0 h-full w-full flex items-center justify-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 border-[1px] border-strong z-[2]">
-          <div className="p-3 my-8 flex flex-col rounded-sm items-center text-secondary">
+        <div className="absolute top-0 left-0 z-[2] flex h-full w-full items-center justify-center rounded-sm border-[1px] border-strong bg-layer-1/85 text-13 font-medium text-tertiary">
+          <div className="my-8 flex flex-col items-center rounded-sm p-3 text-secondary">
             {t("common.drop_here_to_move")}
           </div>
         </div>
diff --git a/apps/web/core/components/base-layouts/list/layout.tsx b/apps/web/core/components/base-layouts/list/layout.tsx
index 7e631e24343..288d356f940 100644
--- a/apps/web/core/components/base-layouts/list/layout.tsx
+++ b/apps/web/core/components/base-layouts/list/layout.tsx
@@ -44,7 +44,7 @@ export const BaseListLayout = observer(function BaseListLayout<T extends IBaseLa
 
   return (
     <div ref={containerRef} className={cn("relative size-full overflow-auto bg-surface-1", className)}>
-      <div className="relative size-full flex flex-col">
+      <div className="relative flex size-full flex-col">
         {groups.map((group) => {
           const itemIds = groupedItemIds[group.id] || [];
           const isCollapsed = collapsedGroups.includes(group.id);
diff --git a/apps/web/core/components/comments/card/display.tsx b/apps/web/core/components/comments/card/display.tsx
index 17de130527e..213ee3e6eae 100644
--- a/apps/web/core/components/comments/card/display.tsx
+++ b/apps/web/core/components/comments/card/display.tsx
@@ -108,7 +108,7 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: TC
   return (
     <div id={commentBlockId} className="relative flex flex-col gap-2">
       {showAccessSpecifier && (
-        <div className="absolute right-2.5 top-2.5 z-[1] text-tertiary">
+        <div className="absolute top-2.5 right-2.5 z-[1] text-tertiary">
           {comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
             <LockIcon className="size-3" />
           ) : (
@@ -116,9 +116,9 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: TC
           )}
         </div>
       )}
-      <div className="flex relative w-full gap-2 items-center mb-3">
+      <div className="relative mb-3 flex w-full items-center gap-2">
         <Avatar size="sm" name={displayName} src={getFileURL(avatarUrl)} className="shrink-0" />
-        <div className="flex-1 flex flex-wrap items-center gap-1">
+        <div className="flex flex-1 flex-wrap items-center gap-1">
           <div className="text-caption-sm-medium">{displayName}</div>
           <div className="text-caption-sm-regular text-tertiary">
             commented{" "}
@@ -134,7 +134,7 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: TC
           </div>
         </div>
         {!disabled && (
-          <div className="flex items-center gap-1 shrink-0">
+          <div className="flex shrink-0 items-center gap-1">
             <EmojiReactionPicker
               isOpen={isPickerOpen}
               handleToggle={setIsPickerOpen}
diff --git a/apps/web/core/components/comments/card/edit-form.tsx b/apps/web/core/components/comments/card/edit-form.tsx
index a8cac90455f..9be8b135521 100644
--- a/apps/web/core/components/comments/card/edit-form.tsx
+++ b/apps/web/core/components/comments/card/edit-form.tsx
@@ -117,7 +117,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
             onClick={handleSubmit(onEnter)}
             disabled={isDisabled}
             className={cn(
-              "group rounded-lg border border-success-subtle size-7 grid place-items-center shadow-raised-100 bg-success-subtle duration-300",
+              "group grid size-7 place-items-center rounded-lg border border-success-subtle bg-success-subtle shadow-raised-100 duration-300",
               isDisabled ? "" : "hover:bg-success-subtle-1"
             )}
           >
@@ -128,7 +128,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
           type="button"
           disabled={isSubmitting}
           className={cn(
-            "group rounded-lg border border-danger-subtle size-7 grid place-items-center shadow-raised-100 bg-danger-subtle duration-300",
+            "group grid size-7 place-items-center rounded-lg border border-danger-subtle bg-danger-subtle shadow-raised-100 duration-300",
             isSubmitting ? "" : "hover:bg-danger-subtle-hover"
           )}
           onClick={() => {
diff --git a/apps/web/core/components/comments/comments.tsx b/apps/web/core/components/comments/comments.tsx
index b5fe0194ae8..88befc2de26 100644
--- a/apps/web/core/components/comments/comments.tsx
+++ b/apps/web/core/components/comments/comments.tsx
@@ -56,9 +56,9 @@ export const CommentsWrapper = observer(function CommentsWrapper(props: TComment
   );
 
   return (
-    <div className="relative flex flex-col gap-y-2 h-full overflow-hidden">
+    <div className="relative flex h-full flex-col gap-y-2 overflow-hidden">
       {renderCommentCreate}
-      <div className="flex-grow py-4 overflow-y-auto">
+      <div className="flex-grow overflow-y-auto py-4">
         {comments?.map((data, index) => {
           let comment;
           if (typeof data === "string") {
diff --git a/apps/web/core/components/comments/quick-actions.tsx b/apps/web/core/components/comments/quick-actions.tsx
index 5d20f5a231d..8facbe0abfc 100644
--- a/apps/web/core/components/comments/quick-actions.tsx
+++ b/apps/web/core/components/comments/quick-actions.tsx
@@ -101,12 +101,12 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
             )}
             disabled={item.disabled}
           >
-            {item.icon && <item.icon className={cn("shrink-0 size-3", item.iconClassName)} />}
+            {item.icon && <item.icon className={cn("size-3 shrink-0", item.iconClassName)} />}
             <div>
               <h5>{item.title}</h5>
               {item.description && (
                 <p
-                  className={cn("text-tertiary whitespace-pre-line", {
+                  className={cn("whitespace-pre-line text-tertiary", {
                     "text-placeholder": item.disabled,
                   })}
                 >
diff --git a/apps/web/core/components/common/access-field.tsx b/apps/web/core/components/common/access-field.tsx
index 14ee044bc42..0df21b1805a 100644
--- a/apps/web/core/components/common/access-field.tsx
+++ b/apps/web/core/components/common/access-field.tsx
@@ -39,7 +39,7 @@ export function AccessField(props: Props) {
               type="button"
               onClick={() => onChange(access.key)}
               className={cn(
-                "flex-shrink-0 relative flex justify-center items-center w-5 h-5 rounded-xs p-1 transition-all",
+                "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs p-1 transition-all",
                 value === access.key ? "bg-layer-1" : "hover:bg-layer-1"
               )}
               tabIndex={2 + index}
diff --git a/apps/web/core/components/common/activity/activity-block.tsx b/apps/web/core/components/common/activity/activity-block.tsx
index 25b3b2767c3..61ab1d25d07 100644
--- a/apps/web/core/components/common/activity/activity-block.tsx
+++ b/apps/web/core/components/common/activity/activity-block.tsx
@@ -33,11 +33,11 @@ export function ActivityBlockComponent(props: TActivityBlockComponent) {
   if (!activity) return <></>;
   return (
     <div
-      className={`relative flex items-start gap-2 text-caption-sm-regular  ${
+      className={`relative flex items-start gap-2 text-caption-sm-regular ${
         ends === "top" ? `pb-3` : ends === "bottom" ? `pt-3` : `py-3`
       }`}
     >
-      <div className="shrink-0  w-7 h-7 rounded-lg overflow-hidden flex justify-center items-center mt-0.5 z-[4] text-secondary border border-subtle shadow-raised-100">
+      <div className="z-[4] mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-subtle text-secondary shadow-raised-100">
         {Icon ? <Icon className="h-3.5 w-3.5 shrink-0" /> : <Network className="h-3.5 w-3.5 shrink-0" />}
       </div>
       <div className="w-full text-secondary">
@@ -49,7 +49,7 @@ export function ActivityBlockComponent(props: TActivityBlockComponent) {
             isMobile={isMobile}
             tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
           >
-            <span className="whitespace-nowrap text-tertiary font-medium cursor-help">
+            <span className="cursor-help font-medium whitespace-nowrap text-tertiary">
               {calculateTimeAgo(activity.created_at)}
             </span>
           </Tooltip>
diff --git a/apps/web/core/components/common/activity/user.tsx b/apps/web/core/components/common/activity/user.tsx
index 0fda94d3bfb..9254ad3eb8e 100644
--- a/apps/web/core/components/common/activity/user.tsx
+++ b/apps/web/core/components/common/activity/user.tsx
@@ -30,11 +30,11 @@ export const User = observer(function User(props: TUser) {
   return (
     <>
       {customUserName || actorDetail?.display_name.includes("-intake") ? (
-        <span className="text-primary font-medium">{customUserName || "Plane"}</span>
+        <span className="font-medium text-primary">{customUserName || "Plane"}</span>
       ) : (
         <Link
           href={`/${workspaceDetail?.slug}/profile/${actorDetail?.id}`}
-          className="hover:underline text-primary font-medium"
+          className="font-medium text-primary hover:underline"
         >
           {actorDetail?.display_name}
         </Link>
diff --git a/apps/web/core/components/common/applied-filters/date.tsx b/apps/web/core/components/common/applied-filters/date.tsx
index 9638efac3d5..6a5051fd9be 100644
--- a/apps/web/core/components/common/applied-filters/date.tsx
+++ b/apps/web/core/components/common/applied-filters/date.tsx
@@ -42,7 +42,7 @@ export const AppliedDateFilters = observer(function AppliedDateFilters(props: Pr
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 py-1 px-1.5 text-11">
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
diff --git a/apps/web/core/components/common/applied-filters/members.tsx b/apps/web/core/components/common/applied-filters/members.tsx
index ad19a8fd0be..fe5e6a5cc0e 100644
--- a/apps/web/core/components/common/applied-filters/members.tsx
+++ b/apps/web/core/components/common/applied-filters/members.tsx
@@ -34,7 +34,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
         if (!memberDetails) return null;
 
         return (
-          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 py-1 px-1.5 text-11">
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             <Avatar
               name={memberDetails.display_name}
               src={getFileURL(memberDetails.avatar_url)}
diff --git a/apps/web/core/components/common/breadcrumb-link.tsx b/apps/web/core/components/common/breadcrumb-link.tsx
index 3e5fcd0700e..dd7567997d8 100644
--- a/apps/web/core/components/common/breadcrumb-link.tsx
+++ b/apps/web/core/components/common/breadcrumb-link.tsx
@@ -25,7 +25,7 @@ const IconWrapper = React.memo(function IconWrapper({ icon }: { icon: React.Reac
 IconWrapper.displayName = "IconWrapper";
 
 const LabelWrapper = React.memo(function LabelWrapper({ label }: { label: React.ReactNode }) {
-  return <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate text-primary">{label}</div>;
+  return <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden text-primary">{label}</div>;
 });
 
 LabelWrapper.displayName = "LabelWrapper";
diff --git a/apps/web/core/components/common/count-chip.tsx b/apps/web/core/components/common/count-chip.tsx
index df413f217ae..113dc4264cd 100644
--- a/apps/web/core/components/common/count-chip.tsx
+++ b/apps/web/core/components/common/count-chip.tsx
@@ -19,7 +19,7 @@ export function CountChip(props: TCountChip) {
   return (
     <div
       className={cn(
-        "relative flex justify-center items-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-caption-sm-semibold rounded-xl",
+        "relative flex flex-shrink-0 items-center justify-center rounded-xl bg-accent-primary/20 px-2.5 py-0.5 text-caption-sm-semibold text-accent-primary",
         className
       )}
     >
diff --git a/apps/web/core/components/common/cover-image.tsx b/apps/web/core/components/common/cover-image.tsx
index 2162e254d61..85fed57e301 100644
--- a/apps/web/core/components/common/cover-image.tsx
+++ b/apps/web/core/components/common/cover-image.tsx
@@ -41,7 +41,7 @@ export function CoverImage(props: TCoverImageProps) {
 
   // Show loading skeleton when src is undefined/null and we don't want to show default
   if (!src && !showDefaultWhenEmpty) {
-    return <div className={cn("bg-layer-2 animate-pulse", className)} />;
+    return <div className={cn("animate-pulse bg-layer-2", className)} />;
   }
 
   const displayUrl = getCoverImageDisplayURL(src, fallbackUrl);
diff --git a/apps/web/core/components/common/empty-state.tsx b/apps/web/core/components/common/empty-state.tsx
index d259d65988e..a5f469deb7d 100644
--- a/apps/web/core/components/common/empty-state.tsx
+++ b/apps/web/core/components/common/empty-state.tsx
@@ -26,8 +26,8 @@ export function EmptyState({ title, description, image, primaryButton, secondary
   return (
     <div className={`flex h-full w-full items-center justify-center`}>
       <div className="flex w-full flex-col items-center text-center">
-        <img src={image} className="w-52 sm:w-60 object-contain" alt={primaryButton?.text || "button image"} />
-        <h6 className="mb-3 mt-6 text-18 font-semibold sm:mt-8">{title}</h6>
+        <img src={image} className="w-52 object-contain sm:w-60" alt={primaryButton?.text || "button image"} />
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">{title}</h6>
         {description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
         <div className="flex items-center gap-4">
           {primaryButton && (
diff --git a/apps/web/core/components/common/filters/created-at.tsx b/apps/web/core/components/common/filters/created-at.tsx
index 7fa0870dee7..7e298fa007a 100644
--- a/apps/web/core/components/common/filters/created-at.tsx
+++ b/apps/web/core/components/common/filters/created-at.tsx
@@ -73,7 +73,7 @@ export const FilterCreatedDate = observer(function FilterCreatedDate(props: Prop
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx
index b3ccacee923..0009496db0f 100644
--- a/apps/web/core/components/common/filters/created-by.tsx
+++ b/apps/web/core/components/common/filters/created-by.tsx
@@ -99,7 +99,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/common/layout/sidebar/property-list-item.tsx b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
index 9ca01cb1932..418830c6e52 100644
--- a/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
+++ b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
@@ -20,12 +20,12 @@ export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
 
   return (
     <div className="flex items-start gap-2">
-      <div className="flex shrink-0 items-center gap-1.5 w-30 text-body-xs-regular text-tertiary h-7.5">
+      <div className="flex h-7.5 w-30 shrink-0 items-center gap-1.5 text-body-xs-regular text-tertiary">
         <Icon className="size-4 shrink-0" />
         <span>{label}</span>
         {appendElement}
       </div>
-      <div className={cn("grow flex items-center flex-wrap gap-1", childrenClassName)}>{children}</div>
+      <div className={cn("flex grow flex-wrap items-center gap-1", childrenClassName)}>{children}</div>
     </div>
   );
 }
diff --git a/apps/web/core/components/common/logo-spinner.tsx b/apps/web/core/components/common/logo-spinner.tsx
index 039cff59e71..9dfad1d8634 100644
--- a/apps/web/core/components/common/logo-spinner.tsx
+++ b/apps/web/core/components/common/logo-spinner.tsx
@@ -16,7 +16,7 @@ export function LogoSpinner() {
 
   return (
     <div className="flex items-center justify-center">
-      <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" />
+      <img src={logoSrc} alt="logo" className="h-6 w-auto object-contain sm:h-11" />
     </div>
   );
 }
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
index af4e51a4073..742ea3a6a88 100644
--- a/apps/web/core/components/common/new-empty-state.tsx
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -39,12 +39,12 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
   };
   return (
     <div className="flex items-center justify-center overflow-y-auto">
-      <div className=" flex h-full w-full flex-col items-center justify-center ">
-        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-subtle px-10 py-7 shadow-sm md:m-8">
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <div className="shadow-sm m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-subtle px-10 py-7 md:m-8">
           <h3 className="text-20 font-semibold">{title}</h3>
-          {description && <p className=" text-16">{description}</p>}
+          {description && <p className="text-16">{description}</p>}
           <div className="relative w-full max-w-6xl">
-            <img src={image} className="w-full h-full object-contain" alt={primaryButton?.text || "button image"} />
+            <img src={image} className="h-full w-full object-contain" alt={primaryButton?.text || "button image"} />
           </div>
 
           <div className="relative flex items-start justify-center">
@@ -60,12 +60,12 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
                 <div
                   onMouseEnter={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
-                  className={`absolute bg-blue-300 ${
+                  className={`bg-blue-300 absolute ${
                     comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
                   } z-10 h-2.5 w-2.5 animate-ping rounded-full`}
                 />
                 <div
-                  className={`absolute bg-blue-400/40 ${
+                  className={`bg-blue-400/40 absolute ${
                     comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
                   } h-1.5 w-1.5 rounded-full`}
                 />
@@ -75,12 +75,12 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
               isHovered &&
               (comicBox.direction === "right" ? (
                 <div
-                  className={`absolute left-1/2 top-0 flex max-w-sm ${
+                  className={`absolute top-0 left-1/2 flex max-w-sm ${
                     comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
                   } pb-5`}
                 >
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-subtle border-y-transparent">
-                    <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-surface-1 border-y-transparent" />
+                  <div className="relative mt-5 h-0 w-0 border-t-[11px] border-r-[11px] border-b-[11px] border-subtle border-y-transparent">
+                    <div className="border-surface-1 absolute top-[-10px] right-[-12px] h-0 w-0 border-t-[10px] border-r-[10px] border-b-[10px] border-y-transparent" />
                   </div>
                   <div className="rounded-md border border-subtle bg-surface-1">
                     <h1 className="p-5">
@@ -90,9 +90,9 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
                   </div>
                 </div>
               ) : (
-                <div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-subtle border-y-transparent">
-                    <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-surface-1 border-y-transparent" />
+                <div className="absolute top-0 right-1/2 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
+                  <div className="relative mt-5 h-0 w-0 border-t-[11px] border-b-[11px] border-l-[11px] border-subtle border-y-transparent">
+                    <div className="border-surface-1 absolute top-[-10px] left-[-12px] h-0 w-0 border-t-[10px] border-b-[10px] border-l-[10px] border-y-transparent" />
                   </div>
                   <div className="rounded-md border border-subtle bg-surface-1">
                     <h1 className="p-5">
diff --git a/apps/web/core/components/common/pro-icon.tsx b/apps/web/core/components/common/pro-icon.tsx
index 177b9cb32c5..30e7ea97191 100644
--- a/apps/web/core/components/common/pro-icon.tsx
+++ b/apps/web/core/components/common/pro-icon.tsx
@@ -16,5 +16,5 @@ type TProIcon = {
 export function ProIcon(props: TProIcon) {
   const { className } = props;
 
-  return <Crown className={cn("inline-block h-3.5 w-3.5 text-amber-400", className)} />;
+  return <Crown className={cn("text-amber-400 inline-block h-3.5 w-3.5", className)} />;
 }
diff --git a/apps/web/core/components/core/activity.tsx b/apps/web/core/components/core/activity.tsx
index dd8705fcdd0..cfda5937ac0 100644
--- a/apps/web/core/components/core/activity.tsx
+++ b/apps/web/core/components/core/activity.tsx
@@ -71,7 +71,7 @@ export function IssueLink({ activity }: { activity: IIssueActivity }) {
           <span className="font-regular break-all">{activity.issue_detail?.name}</span>
         </a>
       ) : (
-        <span className="inline-flex items-center gap-1 font-medium text-primary whitespace-nowrap">
+        <span className="inline-flex items-center gap-1 font-medium whitespace-nowrap text-primary">
           {" a work item"}{" "}
         </span>
       )}
@@ -328,7 +328,7 @@ const activityDetails: {
             added a new label{" "}
             <span className="inline-flex items-center gap-2 rounded-full border border-strong px-2 py-0.5 text-11">
               <LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
-              <span className="flex-shrink font-medium text-primary break-all line-clamp-1">{activity.new_value}</span>
+              <span className="line-clamp-1 flex-shrink font-medium break-all text-primary">{activity.new_value}</span>
             </span>
             {showIssue && (
               <span className="">
@@ -344,7 +344,7 @@ const activityDetails: {
             removed the label{" "}
             <span className="inline-flex items-center gap-2 rounded-full border border-strong px-2 py-0.5 text-11">
               <LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
-              <span className="flex-shrink font-medium text-primary break-all line-clamp-1">{activity.old_value}</span>
+              <span className="line-clamp-1 flex-shrink font-medium break-all text-primary">{activity.old_value}</span>
             </span>
             {showIssue && (
               <span>
@@ -538,7 +538,7 @@ const activityDetails: {
       if (!activity.new_value)
         return (
           <>
-            removed the parent <span className="font-medium text-primary whitespace-nowrap">{activity.old_value}</span>
+            removed the parent <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -550,7 +550,7 @@ const activityDetails: {
       else
         return (
           <>
-            set the parent to <span className="font-medium text-primary whitespace-nowrap">{activity.new_value}</span>
+            set the parent to <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -585,14 +585,14 @@ const activityDetails: {
         return (
           <>
             marked that {showIssue ? <IssueLink activity={activity} /> : "this work item"} relates to{" "}
-            <span className="font-medium text-primary whitespace-nowrap">{activity.new_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed the relation from{" "}
-            <span className="font-medium text-primary whitespace-nowrap">{activity.old_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
           </>
         );
     },
@@ -604,14 +604,14 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} is blocking work item{" "}
-            <span className="font-medium text-primary whitespace-nowrap">{activity.new_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed the blocking work item{" "}
-            <span className="font-medium text-primary whitespace-nowrap">{activity.old_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
           </>
         );
     },
@@ -623,14 +623,14 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} is being blocked by{" "}
-            <span className="font-medium text-primary whitespace-nowrap">{activity.new_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed {showIssue ? <IssueLink activity={activity} /> : "this work item"} being blocked by work item{" "}
-            <span className="font-medium text-primary whitespace-nowrap">{activity.old_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
           </>
         );
     },
@@ -642,14 +642,14 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} as duplicate of{" "}
-            <span className="font-medium text-primary whitespace-nowrap">{activity.new_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed {showIssue ? <IssueLink activity={activity} /> : "this work item"} as a duplicate of{" "}
-            <span className="font-medium text-primary whitespace-nowrap">{activity.old_value}</span>.
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
           </>
         );
     },
@@ -658,7 +658,7 @@ const activityDetails: {
   state: {
     message: (activity, showIssue) => (
       <>
-        set the state to <span className="font-medium text-primary break-all">{activity.new_value}</span>
+        set the state to <span className="font-medium break-all text-primary">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
@@ -687,7 +687,7 @@ const activityDetails: {
         return (
           <>
             set the start date to{" "}
-            <span className="font-medium text-primary whitespace-nowrap">
+            <span className="font-medium whitespace-nowrap text-primary">
               {renderFormattedDate(activity.new_value)}
             </span>
             {showIssue && (
@@ -719,7 +719,7 @@ const activityDetails: {
         return (
           <>
             set the due date to{" "}
-            <span className="font-medium text-primary whitespace-nowrap">
+            <span className="font-medium whitespace-nowrap text-primary">
               {renderFormattedDate(activity.new_value)}
             </span>
             {showIssue && (
diff --git a/apps/web/core/components/core/app-header.tsx b/apps/web/core/components/core/app-header.tsx
index 2badf4574ec..4ea58e36968 100644
--- a/apps/web/core/components/core/app-header.tsx
+++ b/apps/web/core/components/core/app-header.tsx
@@ -24,7 +24,7 @@ export const AppHeader = observer(function AppHeader(props: AppHeaderProps) {
 
   return (
     <div className={cn("z-[18]", className)}>
-      <Row className={cn("h-11 flex gap-2 w-full items-center border-b border-subtle bg-surface-1", rowClassName)}>
+      <Row className={cn("flex h-11 w-full items-center gap-2 border-b border-subtle bg-surface-1", rowClassName)}>
         <ExtendedAppHeader header={header} />
       </Row>
       {mobileHeader && mobileHeader}
diff --git a/apps/web/core/components/core/content-overflow-HOC.tsx b/apps/web/core/components/core/content-overflow-HOC.tsx
index 963429cc294..06f1524f345 100644
--- a/apps/web/core/components/core/content-overflow-HOC.tsx
+++ b/apps/web/core/components/core/content-overflow-HOC.tsx
@@ -134,7 +134,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
         <div
           className={cn(
             "bottom-0 left-0 w-full transition-all duration-300 ease-in-out",
-            `bg-gradient-to-t from-surface-1 to-transparent flex flex-col items-center justify-end`,
+            `flex flex-col items-center justify-end bg-gradient-to-t from-surface-1 to-transparent`,
             "text-center",
             {
               "absolute h-[100px] opacity-100": !showAll,
@@ -148,7 +148,7 @@ export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(p
           {customButton || (
             <button
               className={cn(
-                "gap-1 w-full text-accent-primary text-13 font-medium transition-opacity duration-300",
+                "w-full gap-1 text-13 font-medium text-accent-primary transition-opacity duration-300",
                 buttonClassName
               )}
               onClick={handleToggle}
diff --git a/apps/web/core/components/core/description-versions/dropdown-item.tsx b/apps/web/core/components/core/description-versions/dropdown-item.tsx
index 4b66274a581..b8abb5baadd 100644
--- a/apps/web/core/components/core/description-versions/dropdown-item.tsx
+++ b/apps/web/core/components/core/description-versions/dropdown-item.tsx
@@ -36,7 +36,7 @@ export const DescriptionVersionsDropdownItem = observer(function DescriptionVers
           src={getFileURL(versionCreator?.avatar_url ?? "")}
         />
       </span>
-      <p className="text-11 text-secondary flex items-center gap-1.5">
+      <p className="flex items-center gap-1.5 text-11 text-secondary">
         <span className="font-medium">{versionCreator?.display_name ?? t("common.deactivated_user")}</span>
         <span>{calculateTimeAgo(version.last_saved_at)}</span>
       </p>
diff --git a/apps/web/core/components/core/description-versions/dropdown.tsx b/apps/web/core/components/core/description-versions/dropdown.tsx
index f12f2011f66..7749066444f 100644
--- a/apps/web/core/components/core/description-versions/dropdown.tsx
+++ b/apps/web/core/components/core/description-versions/dropdown.tsx
@@ -41,7 +41,7 @@ export const DescriptionVersionsDropdown = observer(function DescriptionVersions
     <CustomMenu
       label={
         <div className="flex items-center gap-1 text-tertiary">
-          <span className="flex-shrink-0 size-4 grid place-items-center">
+          <span className="grid size-4 flex-shrink-0 place-items-center">
             <History className="size-3.5" />
           </span>
           <p className="text-11">
@@ -58,7 +58,7 @@ export const DescriptionVersionsDropdown = observer(function DescriptionVersions
       disabled={disabled}
       closeOnSelect
     >
-      <p className="text-11 text-tertiary font-medium mb-1">{t("description_versions.previously_edited_by")}</p>
+      <p className="mb-1 text-11 font-medium text-tertiary">{t("description_versions.previously_edited_by")}</p>
       {versions?.map((version) => (
         <DescriptionVersionsDropdownItem key={version.id} onClick={onVersionClick} version={version} />
       ))}
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index d0e0989bc28..854b50922cf 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -80,7 +80,7 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
       <div className="p-4" data-prevent-outside-click>
         {/* Header */}
         <div className="flex items-center justify-between gap-2 py-0.5">
-          <div className="flex-shrink-0 flex items-center gap-2 text-13">
+          <div className="flex flex-shrink-0 items-center gap-2 text-13">
             <p className="flex items-center gap-1">
               {t("description_versions.edited_by")}
               <span className="flex-shrink-0">
@@ -95,11 +95,11 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
               {calculateTimeAgo(activeVersionDetails?.last_saved_at ?? "")}
             </p>
           </div>
-          <div className="flex-shrink-0 flex items-center">
+          <div className="flex flex-shrink-0 items-center">
             <button
               type="button"
               onClick={() => handleNavigation("prev")}
-              className={cn("size-6 text-secondary grid place-items-center rounded-sm outline-none transition-colors", {
+              className={cn("grid size-6 place-items-center rounded-sm text-secondary transition-colors outline-none", {
                 "hover:bg-layer-1": !isPrevDisabled,
                 "opacity-50": isPrevDisabled,
               })}
@@ -110,7 +110,7 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
             <button
               type="button"
               onClick={() => handleNavigation("next")}
-              className={cn("size-6 text-secondary grid place-items-center rounded-sm outline-none transition-colors", {
+              className={cn("grid size-6 place-items-center rounded-sm text-secondary transition-colors outline-none", {
                 "hover:bg-layer-1": !isNextDisabled,
                 "opacity-50": isNextDisabled,
               })}
@@ -155,7 +155,7 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
         </div>
         {/* End version description */}
         {/* Footer */}
-        <div className="flex items-center justify-between gap-2 pt-4 border-t-[0.5px] border-subtle">
+        <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle pt-4">
           <Tooltip tooltipContent={t("common.actions.copy_markdown")}>
             <IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={CopyIcon} />
           </Tooltip>
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index 36828455451..dd7d7dde4b1 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -211,7 +211,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                 ))}
                 <Tabs.Indicator />
               </Tabs.List>
-              <div className="vertical-scrollbar scrollbar-sm p-3 mt-3 flex-1 overflow-y-auto overflow-x-hidden">
+              <div className="vertical-scrollbar mt-3 scrollbar-sm flex-1 overflow-x-hidden overflow-y-auto p-3">
                 <Tabs.Content value="unsplash" className="h-full w-full space-y-4">
                   {(unsplashImages || !unsplashError) && (
                     <>
@@ -257,7 +257,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                                 <img
                                   src={image.urls.small}
                                   alt={image.alt_description}
-                                  className="absolute left-0 top-0 h-full w-full cursor-pointer rounded-sm object-cover"
+                                  className="absolute top-0 left-0 h-full w-full cursor-pointer rounded-sm object-cover"
                                 />
                               </div>
                             ))}
@@ -291,7 +291,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                         <img
                           src={imageUrl}
                           alt={`Cover image ${index + 1}`}
-                          className="absolute left-0 top-0 h-full w-full cursor-pointer rounded-sm object-cover hover:opacity-80 transition-opacity"
+                          className="absolute top-0 left-0 h-full w-full cursor-pointer rounded-sm object-cover transition-opacity hover:opacity-80"
                         />
                       </div>
                     ))}
@@ -302,7 +302,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                     <div className="flex w-full flex-1 items-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
+                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
                           (image === null && isDragActive) || !value
                             ? "border-2 border-dashed border-subtle hover:bg-surface-2"
                             : ""
@@ -310,7 +310,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       >
                         <button
                           type="button"
-                          className="absolute right-0 top-0 z-40 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
+                          className="absolute top-0 right-0 z-40 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
                         >
                           Edit
                         </button>
@@ -319,7 +319,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                             <img
                               src={image ? URL.createObjectURL(image) : getCoverImageDisplayURL(value, "")}
                               alt="image"
-                              className="rounded-lg h-full w-full object-cover"
+                              className="h-full w-full rounded-lg object-cover"
                             />
                           </>
                         ) : (
diff --git a/apps/web/core/components/core/list/list-item.tsx b/apps/web/core/components/core/list/list-item.tsx
index fa48c8ebc65..cd862196580 100644
--- a/apps/web/core/components/core/list/list-item.tsx
+++ b/apps/web/core/components/core/list/list-item.tsx
@@ -69,12 +69,12 @@ export function ListItem(props: IListItemProps) {
     <div ref={parentRef} className="relative">
       <Row
         className={cn(
-          "group min-h-[52px] flex w-full flex-col items-center justify-between gap-3 py-4 text-13 border-b border-subtle bg-layer-transparent hover:bg-layer-transparent-hover",
-          { "xl:gap-5 xl:py-0 xl:flex-row": isSidebarOpen, "lg:gap-5 lg:py-0 lg:flex-row": !isSidebarOpen },
+          "group flex min-h-[52px] w-full flex-col items-center justify-between gap-3 border-b border-subtle bg-layer-transparent py-4 text-13 hover:bg-layer-transparent-hover",
+          { "xl:flex-row xl:gap-5 xl:py-0": isSidebarOpen, "lg:flex-row lg:gap-5 lg:py-0": !isSidebarOpen },
           className
         )}
       >
-        <div className={cn("relative flex w-full items-center justify-between gap-3 truncate ", itemClassName)}>
+        <div className={cn("relative flex w-full items-center justify-between gap-3 truncate", itemClassName)}>
           <ControlLink
             id={id}
             className="relative flex w-full items-center gap-3 overflow-hidden"
@@ -85,13 +85,13 @@ export function ListItem(props: IListItemProps) {
             data-prevent-progress={preventDefaultProgress}
           >
             <div className={cn("flex items-center gap-4 truncate", leftElementClassName)}>
-              {prependTitleElement && <span className="flex items-center flex-shrink-0">{prependTitleElement}</span>}
+              {prependTitleElement && <span className="flex flex-shrink-0 items-center">{prependTitleElement}</span>}
               <Tooltip tooltipContent={title} position="top" isMobile={isMobile}>
                 <span className="truncate text-13">{title}</span>
               </Tooltip>
             </div>
             {appendTitleElement && (
-              <span className={cn("flex items-center flex-shrink-0", rightElementClassName)}>{appendTitleElement}</span>
+              <span className={cn("flex flex-shrink-0 items-center", rightElementClassName)}>{appendTitleElement}</span>
             )}
           </ControlLink>
           {quickActionElement && quickActionElement}
@@ -99,10 +99,10 @@ export function ListItem(props: IListItemProps) {
         {actionableItems && (
           <div
             className={cn(
-              "relative flex items-center justify-start gap-4 flex-wrap w-full flex-shrink-0",
+              "relative flex w-full flex-shrink-0 flex-wrap items-center justify-start gap-4",
               {
-                "xl:flex-nowrap xl:w-auto xl:flex-shrink-0": isSidebarOpen,
-                "lg:flex-nowrap lg:w-auto lg:flex-shrink-0": !isSidebarOpen,
+                "xl:w-auto xl:flex-shrink-0 xl:flex-nowrap": isSidebarOpen,
+                "lg:w-auto lg:flex-shrink-0 lg:flex-nowrap": !isSidebarOpen,
               },
               actionItemContainerClassName
             )}
diff --git a/apps/web/core/components/core/list/list-root.tsx b/apps/web/core/components/core/list/list-root.tsx
index a47075454e5..a965478597a 100644
--- a/apps/web/core/components/core/list/list-root.tsx
+++ b/apps/web/core/components/core/list/list-root.tsx
@@ -17,7 +17,7 @@ export function ListLayout(props: IListContainer) {
   return (
     <Row
       variant={ERowVariant.HUGGING}
-      className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg"
+      className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col overflow-y-auto"
     >
       {children}
     </Row>
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx
index 7f3615959f7..f76cb4cba95 100644
--- a/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx
@@ -27,7 +27,7 @@ export const BulkDeleteIssuesModalItem = observer(function BulkDeleteIssuesModal
       as="div"
       value={issue.id}
       className={({ active }) =>
-        `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 my-0.5 ${
+        `my-0.5 flex cursor-pointer items-center justify-between rounded-md px-3 py-2 select-none ${
           active ? "bg-layer-1 text-primary" : ""
         }`
       }
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
index aec8f832720..c2cde2998f5 100644
--- a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
@@ -133,7 +133,7 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
     issues.length > 0 ? (
       <li className="p-2">
         {query === "" && (
-          <h2 className="mb-2 mt-4 px-3 text-11 font-semibold text-primary">Select work items to delete</h2>
+          <h2 className="mt-4 mb-2 px-3 text-11 font-semibold text-primary">Select work items to delete</h2>
         )}
         <ul className="text-13 text-secondary">
           {issues.map((issue) => (
@@ -171,12 +171,12 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
         >
           <div className="relative m-1">
             <SearchIcon
-              className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
+              className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
               aria-hidden="true"
             />
             <input
               type="text"
-              className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-primary outline-none focus:ring-0 sm:text-13"
+              className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none focus:ring-0 sm:text-13"
               placeholder="Search..."
               onChange={(event) => setQuery(event.target.value)}
             />
diff --git a/apps/web/core/components/core/modals/change-email-modal.tsx b/apps/web/core/components/core/modals/change-email-modal.tsx
index c13b03775eb..1b9e5f4441c 100644
--- a/apps/web/core/components/core/modals/change-email-modal.tsx
+++ b/apps/web/core/components/core/modals/change-email-modal.tsx
@@ -133,8 +133,8 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
-      <div className="py-4 space-y-0 px-4">
-        <h3 className="text-16 font-medium leading-6 text-primary">{changeEmailT("title")}</h3>
+      <div className="space-y-0 px-4 py-4">
+        <h3 className="text-16 leading-6 font-medium text-primary">{changeEmailT("title")}</h3>
         <p className="my-4 text-13 text-secondary">{changeEmailT("description")}</p>
       </div>
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 px-4" noValidate>
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
index 146d5e7a589..71836435185 100644
--- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -148,11 +148,11 @@ export function ExistingIssuesListModal(props: Props) {
       >
         <div className="relative m-1">
           <SearchIcon
-            className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
             aria-hidden="true"
           />
           <Combobox.Input
-            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-13 text-primary outline-none placeholder:text-placeholder focus:ring-0"
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-13 text-primary outline-none placeholder:text-placeholder focus:ring-0"
             placeholder={t("common.search.placeholder")}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
@@ -166,7 +166,7 @@ export function ExistingIssuesListModal(props: Props) {
               {selectedIssues.map((issue) => (
                 <div
                   key={issue.id}
-                  className="flex items-center gap-1 whitespace-nowrap rounded-md border border-subtle bg-layer-1 py-1 pl-2 text-11 text-primary"
+                  className="flex items-center gap-1 rounded-md border border-subtle bg-layer-1 py-1 pl-2 text-11 whitespace-nowrap text-primary"
                 >
                   <IssueIdentifier
                     projectId={issue.project_id}
@@ -187,7 +187,7 @@ export function ExistingIssuesListModal(props: Props) {
               ))}
             </div>
           ) : (
-            <div className="w-min whitespace-nowrap rounded-md border border-subtle bg-layer-1 p-2 text-11">
+            <div className="w-min rounded-md border border-subtle bg-layer-1 p-2 text-11 whitespace-nowrap">
               {t("issue.select.empty")}
             </div>
           )}
@@ -253,7 +253,7 @@ export function ExistingIssuesListModal(props: Props) {
                         htmlFor={`issue-${issue.id}`}
                         value={issue}
                         className={({ active }) =>
-                          `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-secondary ${
+                          `group my-0.5 flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-3 py-2 text-secondary select-none ${
                             active ? "bg-layer-1 text-primary" : ""
                           } ${selected ? "text-primary" : ""}`
                         }
@@ -287,7 +287,7 @@ export function ExistingIssuesListModal(props: Props) {
                             sequenceId: issue?.sequence_id,
                           })}
                           target="_blank"
-                          className="z-1 relative hidden flex-shrink-0 text-secondary hover:text-primary group-hover:block"
+                          className="relative z-1 hidden flex-shrink-0 text-secondary group-hover:block hover:text-primary"
                           rel="noopener noreferrer"
                           onClick={(e) => e.stopPropagation()}
                         >
@@ -302,7 +302,7 @@ export function ExistingIssuesListModal(props: Props) {
           )}
         </Combobox.Options>
       </Combobox>
-      <div className="flex justify-between items-center p-3">
+      <div className="flex items-center justify-between p-3">
         <Button
           variant="link"
           onClick={handleSelectIssues}
diff --git a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
index 12cd2474cfe..8b932742c4e 100644
--- a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
+++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -214,7 +214,7 @@ export function GptAssistantPopover(props: Props) {
       >
         <Popover.Panel
           as="div"
-          className={`fixed z-10 flex w-full min-w-[50rem] max-w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-subtle bg-surface-1 p-4 shadow ${className}`}
+          className={`shadow fixed z-10 flex w-full max-w-full min-w-[50rem] flex-col space-y-4 overflow-hidden rounded-[10px] border border-subtle bg-surface-1 p-4 ${className}`}
           ref={setPopperElement as Ref<HTMLDivElement>}
           style={styles.popper}
           {...attributes.popper}
@@ -275,7 +275,7 @@ export function GptAssistantPopover(props: Props) {
               />
             )}
           />
-          <div className="flex gap-2 justify-between">
+          <div className="flex justify-between gap-2">
             {responseActionButton ? (
               <>{responseActionButton}</>
             ) : (
diff --git a/apps/web/core/components/core/modals/user-image-upload-modal.tsx b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
index 74796e93a7b..ff688c7285e 100644
--- a/apps/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -96,12 +96,12 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
       <div className="space-y-5 px-5 py-8 sm:p-6">
-        <h3 className="text-16 font-medium leading-6 text-primary">Upload Image</h3>
+        <h3 className="text-16 leading-6 font-medium text-primary">Upload Image</h3>
         <div className="space-y-3">
           <div className="flex items-center justify-center gap-3">
             <div
               {...getRootProps()}
-              className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
+              className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
                 (image === null && isDragActive) || !value
                   ? "border-2 border-dashed border-subtle hover:bg-surface-2"
                   : ""
@@ -111,14 +111,14 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
                 <>
                   <button
                     type="button"
-                    className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
+                    className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
                   >
                     Edit
                   </button>
                   <img
                     src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
                     alt="image"
-                    className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
+                    className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
                   />
                 </>
               ) : (
diff --git a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
index 2c2f64cf459..c22ce52aad9 100644
--- a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -109,12 +109,12 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
       <div className="space-y-5 px-5 py-8 sm:p-6">
-        <h3 className="text-16 font-medium leading-6 text-primary">Upload image</h3>
+        <h3 className="text-16 leading-6 font-medium text-primary">Upload image</h3>
         <div className="space-y-3">
           <div className="flex items-center justify-center gap-3">
             <div
               {...getRootProps()}
-              className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
+              className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
                 (image === null && isDragActive) || !value
                   ? "border-2 border-dashed border-subtle hover:bg-surface-2"
                   : ""
@@ -124,14 +124,14 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
                 <>
                   <button
                     type="button"
-                    className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
+                    className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
                   >
                     Edit
                   </button>
                   <img
                     src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
                     alt="image"
-                    className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
+                    className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
                   />
                 </>
               ) : (
diff --git a/apps/web/core/components/core/multiple-select/entity-select-action.tsx b/apps/web/core/components/core/multiple-select/entity-select-action.tsx
index a4b40e56104..c6e7407327a 100644
--- a/apps/web/core/components/core/multiple-select/entity-select-action.tsx
+++ b/apps/web/core/components/core/multiple-select/entity-select-action.tsx
@@ -29,7 +29,7 @@ export const MultipleSelectEntityAction = observer(function MultipleSelectEntity
 
   return (
     <Checkbox
-      className={cn("!outline-none size-3.5", className)}
+      className={cn("size-3.5 !outline-none", className)}
       iconClassName="size-3"
       onClick={(e) => {
         e.stopPropagation();
diff --git a/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx b/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
index 374cd7adfff..102123bea31 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
+++ b/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
@@ -62,7 +62,7 @@ export const AssigneeStatComponent = observer(function AssigneeStatComponent(pro
                 title={
                   <div className="flex items-center gap-2">
                     <div className="h-4 w-4 rounded-full border-2 border-subtle bg-layer-1">
-                      <img src={userImage} className="rounded-full w-full h-full object-cover" alt="User" />
+                      <img src={userImage} className="h-full w-full rounded-full object-cover" alt="User" />
                     </div>
                     <span>{t("no_assignee")}</span>
                   </div>
diff --git a/apps/web/core/components/core/sidebar/progress-stats/label.tsx b/apps/web/core/components/core/sidebar/progress-stats/label.tsx
index 0fb9b95bd52..c4754b76451 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/label.tsx
+++ b/apps/web/core/components/core/sidebar/progress-stats/label.tsx
@@ -41,12 +41,12 @@ export const LabelStatComponent = observer(function LabelStatComponent(props: TL
                 title={
                   <div className="flex items-center gap-2 truncate">
                     <span
-                      className="block h-3 w-3 rounded-full flex-shrink-0"
+                      className="block h-3 w-3 flex-shrink-0 rounded-full"
                       style={{
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-11 text-ellipsis truncate">{label.title ?? t("no_labels_yet")}</span>
+                    <span className="truncate text-11 text-ellipsis">{label.title ?? t("no_labels_yet")}</span>
                   </div>
                 }
                 completed={label.completed}
diff --git a/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 72d8d8f920e..39f104d3583 100644
--- a/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -21,7 +21,7 @@ export const SidebarHamburgerToggle = observer(function SidebarHamburgerToggle()
   return (
     <button
       type="button"
-      className="group flex-shrink-0 size-7 grid place-items-center rounded-sm hover:bg-layer-1 transition-all bg-surface-2"
+      className="group grid size-7 flex-shrink-0 place-items-center rounded-sm bg-surface-2 transition-all hover:bg-layer-1"
       onClick={handleClick}
     >
       <PanelRight className="size-3.5 text-secondary transition-all group-hover:text-primary" />
diff --git a/apps/web/core/components/core/theme/color-inputs.tsx b/apps/web/core/components/core/theme/color-inputs.tsx
index 3b08acfd525..bb3f7995279 100644
--- a/apps/web/core/components/core/theme/color-inputs.tsx
+++ b/apps/web/core/components/core/theme/color-inputs.tsx
@@ -26,7 +26,7 @@ export const CustomThemeColorInputs = observer(function CustomThemeColorInputs(p
   };
 
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
       {/* Neutral Color */}
       <div className="flex flex-col gap-2">
         <h3 className="text-body-sm-medium">
diff --git a/apps/web/core/components/core/theme/custom-theme-selector.tsx b/apps/web/core/components/core/theme/custom-theme-selector.tsx
index 416a5468adb..359770100f9 100644
--- a/apps/web/core/components/core/theme/custom-theme-selector.tsx
+++ b/apps/web/core/components/core/theme/custom-theme-selector.tsx
@@ -103,7 +103,7 @@ export const CustomThemeSelector = observer(function CustomThemeSelector() {
       onSubmit={(e) => {
         void handleSubmit(handleUpdateTheme)(e);
       }}
-      className="bg-layer-1 border border-subtle rounded-lg py-3 px-4"
+      className="rounded-lg border border-subtle bg-layer-1 px-4 py-3"
     >
       <div className="space-y-5">
         <ProfileSettingsHeading
@@ -114,7 +114,7 @@ export const CustomThemeSelector = observer(function CustomThemeSelector() {
         {/* Color Inputs */}
         <CustomThemeColorInputs control={control} />
       </div>
-      <div className="mt-5 flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
+      <div className="mt-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         {/* Save Theme Button */}
         <Button variant="primary" size="lg" type="submit" loading={isSubmitting || isLoadingPalette}>
           {isSubmitting ? t("creating_theme") : isLoadingPalette ? "Generating" : t("set_theme")}
diff --git a/apps/web/core/components/core/theme/theme-mode-selector.tsx b/apps/web/core/components/core/theme/theme-mode-selector.tsx
index 06cc6375003..c9d31cb0842 100644
--- a/apps/web/core/components/core/theme/theme-mode-selector.tsx
+++ b/apps/web/core/components/core/theme/theme-mode-selector.tsx
@@ -27,7 +27,7 @@ export const CustomThemeModeSelector = observer(function CustomThemeModeSelector
         name="darkPalette"
         render={({ field: { value, onChange } }) => (
           <div className="mt-2 flex items-center gap-3">
-            <label className="bg-layer-2 hover:bg-layer-2-hover border border-subtle-1 rounded-lg py-2 px-3 flex items-center gap-1.5 text-body-sm-regular cursor-pointer transition-colors">
+            <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-subtle-1 bg-layer-2 px-3 py-2 text-body-sm-regular transition-colors hover:bg-layer-2-hover">
               <input
                 type="radio"
                 name="darkPalette"
@@ -38,7 +38,7 @@ export const CustomThemeModeSelector = observer(function CustomThemeModeSelector
               />
               Light mode
             </label>
-            <label className="bg-layer-2 hover:bg-layer-2-hover border border-subtle-1 rounded-lg py-2 px-3 flex items-center gap-1.5 text-body-sm-regular cursor-pointer transition-colors">
+            <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-subtle-1 bg-layer-2 px-3 py-2 text-body-sm-regular transition-colors hover:bg-layer-2-hover">
               <input
                 type="radio"
                 name="darkPalette"
diff --git a/apps/web/core/components/core/theme/theme-switch.tsx b/apps/web/core/components/core/theme/theme-switch.tsx
index 15785d9f4e8..3560e997840 100644
--- a/apps/web/core/components/core/theme/theme-switch.tsx
+++ b/apps/web/core/components/core/theme/theme-switch.tsx
@@ -30,7 +30,7 @@ export function ThemeSwitch(props: Props) {
         value ? (
           <div className="flex items-center gap-2">
             <div
-              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full"
+              className="relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border-1"
               style={{
                 borderColor: value.icon.border,
               }}
@@ -64,7 +64,7 @@ export function ThemeSwitch(props: Props) {
         <CustomSelect.Option key={themeOption.value} value={themeOption}>
           <div className="flex items-center gap-2">
             <div
-              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+              className="relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border border-1"
               style={{
                 borderColor: themeOption.icon.border,
               }}
diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
index 78f52aa13fb..678fe682d50 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -106,7 +106,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
   );
 
   return cycleId ? (
-    <div className="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-1 lg:col-span-2 xl:col-span-1 border border-subtle rounded-lg">
+    <div className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden rounded-lg border border-subtle bg-surface-1 p-4 lg:col-span-2 xl:col-span-1">
       <Tab.Group
         as={Fragment}
         defaultIndex={currentValue(tab)}
@@ -126,7 +126,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
       >
         <Tab.List
           as="div"
-          className="relative border-[0.5px] border-subtle rounded-sm bg-layer-1 p-[1px] grid"
+          className="relative grid rounded-sm border-[0.5px] border-subtle bg-layer-1 p-[1px]"
           style={{
             gridTemplateColumns: `repeat(3, 1fr)`,
           }}
@@ -134,9 +134,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
           <Tab
             className={({ selected }) =>
               cn(
-                "relative z-[1] font-semibold text-11 rounded-[3px] py-1.5 text-placeholder focus:outline-none transition duration-500",
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
                 {
-                  "text-tertiary bg-surface-1": selected,
+                  "bg-surface-1 text-tertiary": selected,
                   "hover:text-tertiary": !selected,
                 }
               )
@@ -147,9 +147,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
           <Tab
             className={({ selected }) =>
               cn(
-                "relative z-[1] font-semibold text-11 rounded-[3px] py-1.5 text-placeholder focus:outline-none transition duration-500",
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
                 {
-                  "text-tertiary bg-surface-1": selected,
+                  "bg-surface-1 text-tertiary": selected,
                   "hover:text-tertiary": !selected,
                 }
               )
@@ -160,9 +160,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
           <Tab
             className={({ selected }) =>
               cn(
-                "relative z-[1] font-semibold text-11 rounded-[3px] py-1.5 text-placeholder focus:outline-none transition duration-500",
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
                 {
-                  "text-tertiary bg-surface-1": selected,
+                  "bg-surface-1 text-tertiary": selected,
                   "hover:text-tertiary": !selected,
                 }
               )
@@ -175,11 +175,11 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
         <Tab.Panels as={Fragment}>
           <Tab.Panel
             as="div"
-            className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-secondary vertical-scrollbar scrollbar-sm"
+            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             <div
               ref={issuesContainerRef}
-              className="flex flex-col gap-1 h-full w-full overflow-y-auto vertical-scrollbar scrollbar-sm"
+              className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-1 overflow-y-auto"
             >
               {cycleIssueDetails && "issueIds" in cycleIssueDetails ? (
                 cycleIssueDetails.issueCount > 0 ? (
@@ -192,7 +192,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                       return (
                         <div
                           key={issue.id}
-                          className="group flex cursor-pointer items-center justify-between gap-2 rounded-md hover:bg-surface-2 p-1"
+                          className="group flex cursor-pointer items-center justify-between gap-2 rounded-md p-1 hover:bg-surface-2"
                           onClick={() => {
                             if (issue.id) {
                               setPeekIssue({
@@ -207,14 +207,14 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                             }
                           }}
                         >
-                          <div className="flex items-center gap-1.5 flex-grow w-full min-w-24 truncate">
+                          <div className="flex w-full min-w-24 flex-grow items-center gap-1.5 truncate">
                             <IssueIdentifier issueId={issue.id} projectId={projectId} size="xs" variant="secondary" />
                             <Tooltip position="top-start" tooltipHeading="Title" tooltipContent={issue.name}>
-                              <span className="text-13 text-primary truncate">{issue.name}</span>
+                              <span className="truncate text-13 text-primary">{issue.name}</span>
                             </Tooltip>
                           </div>
                           <PriorityIcon priority={issue.priority} withContainer size={12} />
-                          <div className="flex items-center gap-1.5 flex-shrink-0">
+                          <div className="flex flex-shrink-0 items-center gap-1.5">
                             <StateDropdown
                               value={issue.state_id}
                               onChange={() => {}}
@@ -229,9 +229,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                                 tooltipHeading="Target Date"
                                 tooltipContent={renderFormattedDate(issue.target_date)}
                               >
-                                <div className="h-full flex truncate items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 bg-layer-1 group-hover:bg-surface-1 cursor-pointer">
+                                <div className="flex h-full cursor-pointer items-center gap-1.5 truncate rounded-sm bg-layer-1 px-2 py-0.5 text-11 group-hover:bg-surface-1">
                                   <CalendarCheck className="h-3 w-3 flex-shrink-0" />
-                                  <span className="text-11 truncate">
+                                  <span className="truncate text-11">
                                     {renderFormattedDateWithoutYear(issue.target_date)}
                                   </span>
                                 </div>
@@ -245,13 +245,13 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                       <div
                         ref={setIssueLoaderElement}
                         className={
-                          "h-11 relative flex items-center gap-3 bg-layer-1 p-3 text-13 cursor-pointer animate-pulse"
+                          "relative flex h-11 animate-pulse cursor-pointer items-center gap-3 bg-layer-1 p-3 text-13"
                         }
                       />
                     )}
                   </>
                 ) : (
-                  <div className="flex items-center justify-center h-full w-full">
+                  <div className="flex h-full w-full items-center justify-center">
                     <SimpleEmptyState
                       title={t("active_cycle.empty_state.priority_issue.title")}
                       assetPath={priorityResolvedPath}
@@ -266,7 +266,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
           <Tab.Panel
             as="div"
-            className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
+            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
@@ -314,7 +314,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                     );
                 })
               ) : (
-                <div className="flex items-center justify-center h-full w-full">
+                <div className="flex h-full w-full items-center justify-center">
                   <SimpleEmptyState
                     title={t("active_cycle.empty_state.assignee.title")}
                     assetPath={assigneesResolvedPath}
@@ -328,7 +328,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
           <Tab.Panel
             as="div"
-            className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-secondary vertical-scrollbar scrollbar-sm"
+            className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
           >
             {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
@@ -338,12 +338,12 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                     title={
                       <div className="flex items-center gap-2 truncate">
                         <span
-                          className="block h-3 w-3 rounded-full flex-shrink-0"
+                          className="block h-3 w-3 flex-shrink-0 rounded-full"
                           style={{
                             backgroundColor: label.color ?? "#000000",
                           }}
                         />
-                        <span className="text-11 text-ellipsis truncate">{label.label_name ?? "No labels"}</span>
+                        <span className="truncate text-11 text-ellipsis">{label.label_name ?? "No labels"}</span>
                       </div>
                     }
                     completed={label.completed_issues}
@@ -360,7 +360,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                   />
                 ))
               ) : (
-                <div className="flex items-center justify-center h-full w-full">
+                <div className="flex h-full w-full items-center justify-center">
                   <SimpleEmptyState title={t("active_cycle.empty_state.label.title")} assetPath={labelsResolvedPath} />
                 </div>
               )
@@ -372,7 +372,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
       </Tab.Group>
     </div>
   ) : (
-    <Loader className="flex flex-col gap-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-1 lg:col-span-2 xl:col-span-1">
+    <Loader className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden bg-surface-1 lg:col-span-2 xl:col-span-1">
       <Loader.Item width="100%" height="17rem" />
     </Loader>
   );
diff --git a/apps/web/core/components/cycles/active-cycle/productivity.tsx b/apps/web/core/components/cycles/active-cycle/productivity.tsx
index f78c2f11134..21720abc5c3 100644
--- a/apps/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/apps/web/core/components/cycles/active-cycle/productivity.tsx
@@ -51,10 +51,10 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
   const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
 
   return cycle && completionChartDistributionData ? (
-    <div className="flex flex-col min-h-[17rem] gap-5 px-3.5 py-4 bg-surface-1 border border-subtle rounded-lg">
+    <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1 px-3.5 py-4">
       <div className="relative flex items-center justify-between gap-4">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
-          <h3 className="text-14 text-tertiary font-semibold">{t("project_cycles.active_cycle.issue_burndown")}</h3>
+          <h3 className="text-14 font-semibold text-tertiary">{t("project_cycles.active_cycle.issue_burndown")}</h3>
         </Link>
         <EstimateTypeDropdown value={estimateType} onChange={onChange} cycleId={cycle.id} projectId={projectId} />
       </div>
@@ -71,7 +71,7 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
                 )}
               </div>
 
-              <div className="relative  h-full">
+              <div className="relative h-full">
                 {completionChartDistributionData && (
                   <Fragment>
                     {estimateType === "points" ? (
@@ -94,7 +94,7 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
           </>
         ) : (
           <>
-            <div className="flex items-center justify-center h-full w-full">
+            <div className="flex h-full w-full items-center justify-center">
               <SimpleEmptyState title={t("active_cycle.empty_state.chart.title")} assetPath={resolvedPath} />
             </div>
           </>
@@ -102,7 +102,7 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
       </Link>
     </div>
   ) : (
-    <Loader className="flex flex-col min-h-[17rem] gap-5 bg-surface-1 border border-subtle rounded-lg">
+    <Loader className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
       <Loader.Item width="100%" height="100%" />
     </Loader>
   );
diff --git a/apps/web/core/components/cycles/active-cycle/progress.tsx b/apps/web/core/components/cycles/active-cycle/progress.tsx
index 61a02339b13..d781920b6c3 100644
--- a/apps/web/core/components/cycles/active-cycle/progress.tsx
+++ b/apps/web/core/components/cycles/active-cycle/progress.tsx
@@ -50,12 +50,12 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
   const resolvedPath = resolvedTheme === "light" ? lightProgressAsset : darkProgressAsset;
 
   return cycle && cycle.hasOwnProperty("started_issues") ? (
-    <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-surface-1 border border-subtle rounded-lg">
+    <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1 px-3.5 py-4">
       <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-4">
-          <h3 className="text-14 text-tertiary font-semibold">{t("project_cycles.active_cycle.progress")}</h3>
+          <h3 className="text-14 font-semibold text-tertiary">{t("project_cycles.active_cycle.progress")}</h3>
           {cycle.total_issues > 0 && (
-            <span className="flex gap-1 text-13 text-placeholder font-medium whitespace-nowrap rounded-xs px-3 py-1 ">
+            <span className="flex gap-1 rounded-xs px-3 py-1 text-13 font-medium whitespace-nowrap text-placeholder">
               {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
                 cycle.completed_issues + cycle.cancelled_issues > 1 ? "Work items" : "Work item"
               } closed`}
@@ -72,7 +72,7 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
               {groupedIssues[group] > 0 && (
                 <div key={index}>
                   <div
-                    className="flex items-center justify-between gap-2 text-13 cursor-pointer"
+                    className="flex cursor-pointer items-center justify-between gap-2 text-13"
                     onClick={() => {
                       handleFiltersUpdate([{ property: "state_group", operator: "in", value: [group] }]);
                     }}
@@ -84,7 +84,7 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
                           backgroundColor: PROGRESS_STATE_GROUPS_DETAILS[index].color,
                         }}
                       />
-                      <span className="text-tertiary capitalize font-medium w-16">{group}</span>
+                      <span className="w-16 font-medium text-tertiary capitalize">{group}</span>
                     </div>
                     <span className="text-tertiary">{`${groupedIssues[group]} ${
                       groupedIssues[group] > 1 ? "Work items" : "Work item"
@@ -105,13 +105,13 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
           )}
         </div>
       ) : (
-        <div className="flex items-center justify-center h-full w-full">
+        <div className="flex h-full w-full items-center justify-center">
           <SimpleEmptyState title={t("active_cycle.empty_state.progress.title")} assetPath={resolvedPath} />
         </div>
       )}
     </div>
   ) : (
-    <Loader className="flex flex-col min-h-[17rem] gap-5 bg-surface-1 border border-subtle rounded-lg">
+    <Loader className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
       <Loader.Item width="100%" height="100%" />
     </Loader>
   );
diff --git a/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
index c05d967f97d..4e4e579b875 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -104,15 +104,15 @@ export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(p
 
   if (!cycleDetails) return <></>;
   return (
-    <div className="border-t border-subtle space-y-4 py-5">
+    <div className="space-y-4 border-t border-subtle py-5">
       <Disclosure defaultOpen>
         {({ open }) => (
           <div className="flex flex-col">
             {/* progress bar header */}
             {isCycleDateValid ? (
-              <div className="relative w-full flex justify-between items-center gap-2">
-                <Disclosure.Button className="relative flex items-center gap-2 w-full">
-                  <div className="font-medium text-secondary text-13">{t("project_cycles.active_cycle.progress")}</div>
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <Disclosure.Button className="relative flex w-full items-center gap-2">
+                  <div className="text-13 font-medium text-secondary">{t("project_cycles.active_cycle.progress")}</div>
                 </Disclosure.Button>
                 <Disclosure.Button className="ml-auto">
                   {open ? (
@@ -123,8 +123,8 @@ export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(p
                 </Disclosure.Button>
               </div>
             ) : (
-              <div className="relative w-full flex justify-between items-center gap-2">
-                <div className="font-medium text-secondary text-13">{t("project_cycles.active_cycle.progress")}</div>
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <div className="text-13 font-medium text-secondary">{t("project_cycles.active_cycle.progress")}</div>
               </div>
             )}
             <Transition show={open}>
@@ -162,7 +162,7 @@ export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(p
                     )}
                   </>
                 ) : (
-                  <div className="my-2 py-2 text-13 text-tertiary  bg-surface-2 rounded-md px-2 w-full">
+                  <div className="my-2 w-full rounded-md bg-surface-2 px-2 py-2 text-13 text-tertiary">
                     {t("no_data_yet")}
                   </div>
                 )}
diff --git a/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
index a6735f43572..856bebbd507 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
@@ -134,7 +134,7 @@ export const CycleProgressStats = observer(function CycleProgressStats(props: TC
           {PROGRESS_STATS.map((stat) => (
             <Tab
               className={cn(
-                `p-1 w-full text-primary outline-none focus:outline-none cursor-pointer transition-all`,
+                `w-full cursor-pointer p-1 text-primary transition-all outline-none focus:outline-none`,
                 roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
                 stat.key === currentTab
                   ? "bg-layer-transparent-active text-secondary"
diff --git a/apps/web/core/components/cycles/analytics-sidebar/root.tsx b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
index b714e9daf44..7c84e4daeac 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -49,7 +49,7 @@ export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props:
 
   return (
     <div className="relative pb-2">
-      <div className="flex flex-col gap-5 w-full">
+      <div className="flex w-full flex-col gap-5">
         <CycleSidebarHeader
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index c2cada51d44..65137162603 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -67,16 +67,16 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
         ? `0 ${t("common.work_item")}`
         : `${cycleDetails?.completed_estimate_points}/${cycleDetails?.total_estimate_points}`;
   return (
-    <div className="flex flex-col gap-5 w-full">
+    <div className="flex w-full flex-col gap-5">
       {cycleDetails?.description && (
         <TextArea
-          className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-13 leading-5 text-secondary"
+          className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
           value={cycleDetails.description}
           disabled
         />
       )}
 
-      <div className="flex flex-col gap-5 pb-6 pt-2.5">
+      <div className="flex flex-col gap-5 pt-2.5 pb-6">
         <div className="flex items-center justify-start gap-1">
           <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
             <SquareUser className="h-4 w-4" />
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
index c5ddb037962..e2a825ccc24 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -121,22 +121,22 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
 
   return (
     <>
-      <div className="sticky z-10 top-0 pt-2 flex items-center justify-between bg-surface-1">
-        <div className="flex items-center justify-center size-5">
+      <div className="sticky top-0 z-10 flex items-center justify-between bg-surface-1 pt-2">
+        <div className="flex size-5 items-center justify-center">
           <button
-            className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0"
+            className="flex size-6 flex-shrink-0 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover"
             onClick={() => handleClose()}
           >
             <ChevronRightIcon className="size-4 stroke-2 text-secondary" />
           </button>
         </div>
       </div>
-      <div className="flex flex-col gap-2 w-full">
+      <div className="flex w-full flex-col gap-2">
         <div className="flex items-start justify-between gap-3 pt-2">
-          <h4 className="w-full break-words text-18 font-semibold text-primary">{cycleDetails.name}</h4>
+          <h4 className="w-full text-18 font-semibold break-words text-primary">{cycleDetails.name}</h4>
           {currentCycle && (
             <span
-              className="flex h-6 min-w-20 px-3 items-center justify-center rounded-sm text-center text-11 font-medium whitespace-nowrap truncate"
+              className="flex h-6 min-w-20 items-center justify-center truncate rounded-sm px-3 text-center text-11 font-medium whitespace-nowrap"
               style={{
                 color: currentCycle.color,
                 backgroundColor: `${currentCycle.color}20`,
@@ -151,7 +151,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
           control={control}
           name="start_date"
           render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <Controller
                 control={control}
                 name="end_date"
@@ -179,7 +179,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
                     customTooltipContent={
                       <span className="flex gap-1">
                         {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")}
-                        <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" />
+                        <ArrowRight className="my-auto h-3 w-3 flex-shrink-0" />
                         {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}
                       </span>
                     }
@@ -191,7 +191,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
                 )}
               />
               {projectUTCOffset && (
-                <span className="rounded-md text-11 px-2 cursor-default  py-1 bg-layer-1 text-tertiary">
+                <span className="cursor-default rounded-md bg-layer-1 px-2 py-1 text-11 text-tertiary">
                   {projectUTCOffset}
                 </span>
               )}
diff --git a/apps/web/core/components/cycles/applied-filters/date.tsx b/apps/web/core/components/cycles/applied-filters/date.tsx
index 85e2210c80c..798d1a60ebb 100644
--- a/apps/web/core/components/cycles/applied-filters/date.tsx
+++ b/apps/web/core/components/cycles/applied-filters/date.tsx
@@ -42,7 +42,7 @@ export const AppliedDateFilters = observer(function AppliedDateFilters(props: Pr
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-3 py-1 px-1.5 text-11">
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-3 px-1.5 py-1 text-11">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
diff --git a/apps/web/core/components/cycles/applied-filters/status.tsx b/apps/web/core/components/cycles/applied-filters/status.tsx
index 762b1b05d4d..3a077748db7 100644
--- a/apps/web/core/components/cycles/applied-filters/status.tsx
+++ b/apps/web/core/components/cycles/applied-filters/status.tsx
@@ -29,7 +29,7 @@ export const AppliedStatusFilters = observer(function AppliedStatusFilters(props
           <div
             key={status}
             className={cn(
-              "flex items-center gap-1 rounded-sm py-1 px-1.5 text-11",
+              "flex items-center gap-1 rounded-sm px-1.5 py-1 text-11",
               statusDetails?.bgColor,
               statusDetails?.textColor
             )}
diff --git a/apps/web/core/components/cycles/archived-cycles/header.tsx b/apps/web/core/components/cycles/archived-cycles/header.tsx
index bf54518f62c..7b9cc569979 100644
--- a/apps/web/core/components/cycles/archived-cycles/header.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/header.tsx
@@ -72,15 +72,15 @@ export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() {
 
   return (
     <div className="group relative flex border-b border-subtle">
-      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+      <div className="horizontal-scrollbar flex scrollbar-sm w-full items-center gap-2 overflow-x-auto px-4">
         <ArchiveTabsList />
       </div>
       {/* filter options */}
-      <div className="h-full flex items-center gap-3 self-end px-8">
+      <div className="flex h-full items-center gap-3 self-end px-8">
         {!isSearchOpen && (
           <button
             type="button"
-            className="-mr-5 p-2 hover:bg-layer-1 rounded-sm text-placeholder grid place-items-center"
+            className="-mr-5 grid place-items-center rounded-sm p-2 text-placeholder hover:bg-layer-1"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
@@ -91,9 +91,9 @@ export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() {
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
diff --git a/apps/web/core/components/cycles/archived-cycles/view.tsx b/apps/web/core/components/cycles/archived-cycles/view.tsx
index 15959585708..48a1f6a097a 100644
--- a/apps/web/core/components/cycles/archived-cycles/view.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/view.tsx
@@ -34,15 +34,15 @@ export const ArchivedCyclesView = observer(function ArchivedCyclesView(props: IA
 
   if (filteredArchivedCycleIds.length === 0)
     return (
-      <div className="h-full w-full grid place-items-center">
+      <div className="grid h-full w-full place-items-center">
         <div className="text-center">
           <img
             src={archivedCyclesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
-            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
             alt="No matching cycles"
           />
-          <h5 className="text-18 font-medium mt-7 mb-1">No matching cycles</h5>
-          <p className="text-placeholder text-14">
+          <h5 className="mt-7 mb-1 text-18 font-medium">No matching cycles</h5>
+          <p className="text-14 text-placeholder">
             {archivedCyclesSearchQuery.trim() === ""
               ? "Remove the filters to see all cycles"
               : "Remove the search criteria to see all cycles"}
diff --git a/apps/web/core/components/cycles/cycle-peek-overview.tsx b/apps/web/core/components/cycles/cycle-peek-overview.tsx
index 6b0b65f6c81..1b984de6788 100644
--- a/apps/web/core/components/cycles/cycle-peek-overview.tsx
+++ b/apps/web/core/components/cycles/cycle-peek-overview.tsx
@@ -51,7 +51,7 @@ export const CyclePeekOverview = observer(function CyclePeekOverview(props: Prop
       {peekCycle && projectId && (
         <div
           ref={ref}
-          className="flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 duration-300 fixed md:relative right-0 z-[9]"
+          className="fixed right-0 z-[9] flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 duration-300 md:relative"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/apps/web/core/components/cycles/cycles-view-header.tsx b/apps/web/core/components/cycles/cycles-view-header.tsx
index cdbc189720a..8c3cd0a0c9b 100644
--- a/apps/web/core/components/cycles/cycles-view-header.tsx
+++ b/apps/web/core/components/cycles/cycles-view-header.tsx
@@ -90,9 +90,9 @@ export const CyclesViewHeader = observer(function CyclesViewHeader(props: Props)
       ) : (
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
diff --git a/apps/web/core/components/cycles/cycles-view.tsx b/apps/web/core/components/cycles/cycles-view.tsx
index fb2885e4beb..223c3a959f4 100644
--- a/apps/web/core/components/cycles/cycles-view.tsx
+++ b/apps/web/core/components/cycles/cycles-view.tsx
@@ -44,10 +44,10 @@ export const CyclesView = observer(function CyclesView(props: ICyclesView) {
         <div className="text-center">
           <img
             src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
-            className="mx-auto h-36 w-36 sm:h-48 sm:w-48 object-contain"
+            className="mx-auto h-36 w-36 object-contain sm:h-48 sm:w-48"
             alt="No matching cycles"
           />
-          <h5 className="mb-1 mt-7 text-18 font-medium">{t("project_cycles.no_matching_cycles")}</h5>
+          <h5 className="mt-7 mb-1 text-18 font-medium">{t("project_cycles.no_matching_cycles")}</h5>
           <p className="text-14 text-placeholder">
             {searchQuery.trim() === ""
               ? t("project_cycles.remove_filters_to_see_all_cycles")
diff --git a/apps/web/core/components/cycles/delete-modal.tsx b/apps/web/core/components/cycles/delete-modal.tsx
index 0bfadd28764..04f99b27b6d 100644
--- a/apps/web/core/components/cycles/delete-modal.tsx
+++ b/apps/web/core/components/cycles/delete-modal.tsx
@@ -86,7 +86,7 @@ export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycle
       content={
         <>
           Are you sure you want to delete cycle{' "'}
-          <span className="break-words font-medium text-primary">{cycle?.name}</span>
+          <span className="font-medium break-words text-primary">{cycle?.name}</span>
           {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be undone.
         </>
       }
diff --git a/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx b/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
index ce34f56f808..b405b78649f 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
@@ -73,7 +73,7 @@ export const FilterEndDate = observer(function FilterEndDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/cycles/dropdowns/filters/root.tsx b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
index 014542210e8..3f1aa8cdc67 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
@@ -49,7 +49,7 @@ export const CycleFiltersSelection = observer(function CycleFiltersSelection(pro
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         {/* cycle status */}
         {!isArchived && (
           <div className="py-2">
diff --git a/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx b/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
index 655f739311b..911feb7ab47 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
@@ -74,7 +74,7 @@ export const FilterStartDate = observer(function FilterStartDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/cycles/dropdowns/filters/status.tsx b/apps/web/core/components/cycles/dropdowns/filters/status.tsx
index ce39377da4a..4de895c0a2f 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/status.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/status.tsx
@@ -48,7 +48,7 @@ export const FilterStatus = observer(function FilterStatus(props: Props) {
               />
             ))
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index 55e978e0d6f..3d26c0b360c 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -137,7 +137,7 @@ export function CycleForm(props: Props) {
                 <TextArea
                   name="description"
                   placeholder={t("description")}
-                  className="w-full text-14 resize-none min-h-24"
+                  className="min-h-24 w-full resize-none text-14"
                   hasError={Boolean(errors?.description)}
                   value={value}
                   onChange={onChange}
@@ -183,7 +183,7 @@ export function CycleForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
           {t("common.cancel")}
         </Button>
diff --git a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
index 0ac641ff1c9..903e1086be9 100644
--- a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
@@ -26,18 +26,18 @@ export function CycleListGroupHeader(props: Props) {
   const { type, title, count, showCount = false, isExpanded = false } = props;
   return (
     <Row className="flex items-center justify-between py-2.5">
-      <div className="flex items-center gap-5 flex-shrink-0">
+      <div className="flex flex-shrink-0 items-center gap-5">
         <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
           <CycleGroupIcon cycleGroup={type} className="h-5 w-5" />
         </div>
 
         <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
-          <div className="inline-block line-clamp-1 truncate font-medium text-primary">{title}</div>
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
           {showCount && <div className="pl-2 text-13 font-medium text-tertiary">{`${count ?? "0"}`}</div>}
         </div>
       </div>
       <ChevronDownIcon
-        className={cn("shrink-0 size-4 text-tertiary transition-transform", {
+        className={cn("size-4 shrink-0 text-tertiary transition-transform", {
           "rotate-180": isExpanded,
         })}
       />
diff --git a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
index 93b5227eac1..adade682f75 100644
--- a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -181,9 +181,9 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
       />
       <button
         onClick={openCycleOverview}
-        className={`z-[1] flex text-accent-secondary text-11 gap-1 flex-shrink-0 ${isMobile || (isActive && !searchParams.has("peekCycle")) ? "flex" : "hidden group-hover:flex"}`}
+        className={`z-[1] flex flex-shrink-0 gap-1 text-11 text-accent-secondary ${isMobile || (isActive && !searchParams.has("peekCycle")) ? "flex" : "hidden group-hover:flex"}`}
       >
-        <Eye className="h-4 w-4 my-auto  text-accent-secondary" />
+        <Eye className="my-auto h-4 w-4 text-accent-secondary" />
         <span>{t("project_cycles.more_details")}</span>
       </button>
       {showIssueCount && (
@@ -195,12 +195,12 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
       <CycleAdditionalActions cycleId={cycleId} projectId={projectId} />
       {showTransferIssues && (
         <div
-          className="px-2 h-6  text-accent-secondary flex items-center gap-1 cursor-pointer"
+          className="flex h-6 cursor-pointer items-center gap-1 px-2 text-accent-secondary"
           onClick={() => {
             setTransferIssuesModal(true);
           }}
         >
-          <TransferIcon className="fill-accent-primary w-4" />
+          <TransferIcon className="w-4 fill-accent-primary" />
           <span>{t("project_cycles.transfer_work_items", { count: transferableIssuesCount })}</span>
         </div>
       )}
@@ -212,20 +212,20 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
               tooltipContent={
                 <span className="flex gap-1">
                   {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")}
-                  <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" />
+                  <ArrowRight className="my-auto h-3 w-3 flex-shrink-0" />
                   {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}
                 </span>
               }
               disabled={!isProjectTimeZoneDifferent()}
               tooltipHeading={t("project_cycles.in_your_timezone")}
             >
-              <div className="flex gap-1 text-11 text-tertiary font-medium items-center">
-                <CalendarDays className="h-3 w-3 flex-shrink-0 my-auto" />
+              <div className="flex items-center gap-1 text-11 font-medium text-tertiary">
+                <CalendarDays className="my-auto h-3 w-3 flex-shrink-0" />
                 <MergedDateDisplay startDate={cycleDetails.start_date} endDate={cycleDetails.end_date} />
               </div>
             </Tooltip>
             {projectUTCOffset && (
-              <span className="rounded-md text-11 px-2 cursor-default  py-1 bg-layer-1 text-tertiary">
+              <span className="cursor-default rounded-md bg-layer-1 px-2 py-1 text-11 text-tertiary">
                 {projectUTCOffset}
               </span>
             )}
@@ -254,7 +254,7 @@ export const CycleListItemAction = observer(function CycleListItemAction(props:
               customTooltipContent={
                 <span className="flex gap-1">
                   {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")}
-                  <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" />
+                  <ArrowRight className="my-auto h-3 w-3 flex-shrink-0" />
                   {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}
                 </span>
               }
diff --git a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
index 8b055872eaf..9e6f5c134fa 100644
--- a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
@@ -31,9 +31,9 @@ export const CycleListProjectGroupHeader = observer(function CycleListProjectGro
 
   if (!project) return null;
   return (
-    <Row className="flex items-center gap-2 flex-shrink-0 py-2.5">
+    <Row className="flex flex-shrink-0 items-center gap-2 py-2.5">
       <ChevronRightIcon
-        className={cn("h-4 w-4 text-tertiary duration-300 ", {
+        className={cn("h-4 w-4 text-tertiary duration-300", {
           "rotate-90": isExpanded,
         })}
         strokeWidth={2}
@@ -42,7 +42,7 @@ export const CycleListProjectGroupHeader = observer(function CycleListProjectGro
         <Logo logo={project.logo_props} size={16} />
       </div>
       <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
-        <div className="inline-block line-clamp-1 truncate font-medium text-primary">{project.name}</div>
+        <div className="line-clamp-1 inline-block truncate font-medium text-primary">{project.name}</div>
         {showCount && <div className="pl-2 text-13 font-medium text-tertiary">{`${count ?? "0"}`}</div>}
       </div>
     </Row>
diff --git a/apps/web/core/components/cycles/list/root.tsx b/apps/web/core/components/cycles/list/root.tsx
index a1155e577b3..0b2a4ed044f 100644
--- a/apps/web/core/components/cycles/list/root.tsx
+++ b/apps/web/core/components/cycles/list/root.tsx
@@ -46,7 +46,7 @@ export const CyclesList = observer(function CyclesList(props: ICyclesList) {
               <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
                 {({ open }) => (
                   <>
-                    <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle bg-layer-1 cursor-pointer">
+                    <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
                       <CycleListGroupHeader
                         title={t("project_cycles.upcoming_cycle.label")}
                         type="upcoming"
@@ -65,7 +65,7 @@ export const CyclesList = observer(function CyclesList(props: ICyclesList) {
             <Disclosure as="div" className="flex flex-shrink-0 flex-col pb-7">
               {({ open }) => (
                 <>
-                  <Disclosure.Button className="sticky top-0 z-2 w-full flex-shrink-0 border-b border-subtle bg-layer-1 cursor-pointer">
+                  <Disclosure.Button className="sticky top-0 z-2 w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
                     <CycleListGroupHeader
                       title={t("project_cycles.completed_cycle.label")}
                       type="completed"
diff --git a/apps/web/core/components/cycles/quick-actions.tsx b/apps/web/core/components/cycles/quick-actions.tsx
index 72b4bf10d2f..0c4e8be7cf6 100644
--- a/apps/web/core/components/cycles/quick-actions.tsx
+++ b/apps/web/core/components/cycles/quick-actions.tsx
@@ -168,7 +168,7 @@ export const CycleQuickActions = observer(function CycleQuickActions(props: Prop
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/cycles/transfer-issues-modal.tsx b/apps/web/core/components/cycles/transfer-issues-modal.tsx
index 2518eea8c30..3f1bda0d667 100644
--- a/apps/web/core/components/cycles/transfer-issues-modal.tsx
+++ b/apps/web/core/components/cycles/transfer-issues-modal.tsx
@@ -91,7 +91,7 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
         <div className="flex items-center gap-2 border-b border-subtle px-5 pb-3">
           <SearchIcon className="h-4 w-4 text-secondary" />
           <input
-            className="outline-none text-13"
+            className="text-13 outline-none"
             placeholder="Search for a cycle..."
             onChange={(e) => setQuery(e.target.value)}
             value={query}
@@ -120,7 +120,7 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
                     <div className="flex w-full justify-between truncate">
                       <span className="truncate">{cycleDetails?.name}</span>
                       {cycleDetails.status && (
-                        <span className="flex-shrink-0 flex items-center rounded-full bg-layer-1  px-2 capitalize">
+                        <span className="flex flex-shrink-0 items-center rounded-full bg-layer-1 px-2 capitalize">
                           {cycleDetails.status.toLocaleLowerCase()}
                         </span>
                       )}
diff --git a/apps/web/core/components/dropdowns/buttons.tsx b/apps/web/core/components/dropdowns/buttons.tsx
index 421d0126795..dbee6ab0b47 100644
--- a/apps/web/core/components/dropdowns/buttons.tsx
+++ b/apps/web/core/components/dropdowns/buttons.tsx
@@ -82,7 +82,7 @@ function BorderButton(props: ButtonProps) {
         variant="ghost"
         size="sm"
         className={cn(
-          "h-full w-full flex items-center justify-start gap-1.5 border-[0.5px] border-strong",
+          "flex h-full w-full items-center justify-start gap-1.5 border-[0.5px] border-strong",
           {
             "bg-layer-transparent-active": isActive,
           },
@@ -110,7 +110,7 @@ function BackgroundButton(props: ButtonProps) {
         variant="ghost"
         size="sm"
         className={cn(
-          "h-full w-full flex items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
+          "flex h-full w-full items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
           className
         )}
       >
@@ -135,7 +135,7 @@ function TransparentButton(props: ButtonProps) {
         variant="ghost"
         size="sm"
         className={cn(
-          "h-full w-full flex items-center justify-between gap-1.5",
+          "flex h-full w-full items-center justify-between gap-1.5",
           {
             "bg-layer-transparent-active": isActive,
           },
diff --git a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
index 4e08a270197..7d12cbc0b26 100644
--- a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
+++ b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
@@ -152,7 +152,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
                   key={option.value}
                   value={option.value}
                   className={({ active, selected }) =>
-                    `flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 ${
+                    `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
                       active ? "bg-layer-transparent-hover" : ""
                     } ${selected ? "text-primary" : "text-secondary"}`
                   }
@@ -166,10 +166,10 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
                 </Combobox.Option>
               ))
             ) : (
-              <p className="px-1.5 py-1 italic text-placeholder">{t("common.search.no_matches_found")}</p>
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matches_found")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-placeholder">{t("common.loading")}</p>
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/dropdowns/date-range.tsx b/apps/web/core/components/dropdowns/date-range.tsx
index 1ee1e0ad8b5..c9de567e376 100644
--- a/apps/web/core/components/dropdowns/date-range.tsx
+++ b/apps/web/core/components/dropdowns/date-range.tsx
@@ -192,7 +192,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
       >
         {mergeDates ? (
           // Merged date display
-          <div className="flex items-center gap-1.5 w-full">
+          <div className="flex w-full items-center gap-1.5">
             {!hideIcon.from && <CalendarDays className="h-3 w-3 flex-shrink-0" />}
             {dateRange.from || dateRange.to ? (
               <MergedDateDisplay
@@ -227,7 +227,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
           <>
             <span
               className={cn(
-                "h-full flex items-center justify-center gap-1 rounded-xs flex-grow",
+                "flex h-full flex-grow items-center justify-center gap-1 rounded-xs",
                 buttonFromDateClassName
               )}
             >
@@ -237,7 +237,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
             <ArrowRight className="h-3 w-3 flex-shrink-0" />
             <span
               className={cn(
-                "h-full flex items-center justify-center gap-1 rounded-xs flex-grow",
+                "flex h-full flex-grow items-center justify-center gap-1 rounded-xs",
                 buttonToDateClassName
               )}
             >
@@ -246,7 +246,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
             </span>
             {isClearable && !disabled && hasDisplayedDates && (
               <CloseIcon
-                className={cn("h-2.5 w-2.5 flex-shrink-0 cursor-pointer ml-1", clearIconClassName)}
+                className={cn("ml-1 h-2.5 w-2.5 flex-shrink-0 cursor-pointer", clearIconClassName)}
                 onClick={(e) => {
                   e.stopPropagation();
                   e.preventDefault();
@@ -263,7 +263,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
   const comboOptions = (
     <Combobox.Options data-prevent-outside-click static>
       <div
-        className="my-1 bg-surface-1 border-[0.5px] border-subtle-1 rounded-md overflow-hidden z-30"
+        className="z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1"
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
diff --git a/apps/web/core/components/dropdowns/date.tsx b/apps/web/core/components/dropdowns/date.tsx
index 2181edab48a..59f1ec973e0 100644
--- a/apps/web/core/components/dropdowns/date.tsx
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -184,7 +184,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "my-1 bg-surface-1 shadow-raised-200 border-[0.5px] border-strong rounded-md overflow-hidden z-30",
+                "z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200",
                 optionsClassName
               )}
               ref={setPopperElement}
diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx
index 98a7ef35968..c46c6c14ef5 100644
--- a/apps/web/core/components/dropdowns/estimate.tsx
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -255,10 +255,10 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
             <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
               {currentActiveEstimateId === undefined ? (
                 <div
-                  className={`flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary`}
+                  className={`flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`}
                 >
                   {/* NOTE: This condition renders when estimates are not enabled for the project */}
-                  <div className="flex-grow flex items-center gap-2">
+                  <div className="flex flex-grow items-center gap-2">
                     <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
                     <span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
                   </div>
@@ -272,7 +272,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
                           {({ active, selected }) => (
                             <div
                               className={cn(
-                                "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
+                                "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                                 {
                                   "bg-layer-transparent-hover": active,
                                   "text-primary": selected,
@@ -287,10 +287,10 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
                         </Combobox.Option>
                       ))
                     ) : (
-                      <p className="px-1.5 py-1 italic text-placeholder">{t("common.search.no_matching_results")}</p>
+                      <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
                     )
                   ) : (
-                    <p className="px-1.5 py-1 italic text-placeholder">{t("common.loading")}</p>
+                    <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
                   )}
                 </>
               )}
diff --git a/apps/web/core/components/dropdowns/intake-state/base.tsx b/apps/web/core/components/dropdowns/intake-state/base.tsx
index f08ebff978c..1dbf7bc2fbe 100644
--- a/apps/web/core/components/dropdowns/intake-state/base.tsx
+++ b/apps/web/core/components/dropdowns/intake-state/base.tsx
@@ -243,14 +243,14 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
                       key={option.value}
                       option={option}
                       selectedValue={value}
-                      className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5"
+                      className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none"
                     />
                   ))
                 ) : (
-                  <p className="px-1.5 py-1 italic text-placeholder">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="px-1.5 py-1 italic text-placeholder">{t("loading")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/dropdowns/layout.tsx b/apps/web/core/components/dropdowns/layout.tsx
index 5b6ef2186c9..23ecf0a4e2e 100644
--- a/apps/web/core/components/dropdowns/layout.tsx
+++ b/apps/web/core/components/dropdowns/layout.tsx
@@ -45,9 +45,9 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
   const buttonContent = useCallback((isOpen: boolean, buttonValue: string | string[] | undefined) => {
     const dropdownValue = ISSUE_LAYOUT_MAP[buttonValue as EIssueLayoutTypes];
     return (
-      <div className="flex gap-2 items-center text-secondary">
+      <div className="flex items-center gap-2 text-secondary">
         <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-secondary`} />
-        <span className="font-medium text-11">{t(dropdownValue.i18n_label)}</span>
+        <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
       </div>
     );
   }, []);
@@ -56,10 +56,10 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
     const dropdownValue = ISSUE_LAYOUT_MAP[props.value as EIssueLayoutTypes];
 
     return (
-      <div className={cn("flex gap-2 items-center text-secondary w-full justify-between")}>
-        <div className="flex gap-2 items-center">
+      <div className={cn("flex w-full items-center justify-between gap-2 text-secondary")}>
+        <div className="flex items-center gap-2">
           <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
-          <span className="font-medium text-11">{t(dropdownValue.i18n_label)}</span>
+          <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
         </div>
         {props.selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
       </div>
diff --git a/apps/web/core/components/dropdowns/member/avatar.tsx b/apps/web/core/components/dropdowns/member/avatar.tsx
index 13f4078bf5f..82bc2e0c5e3 100644
--- a/apps/web/core/components/dropdowns/member/avatar.tsx
+++ b/apps/web/core/components/dropdowns/member/avatar.tsx
@@ -56,6 +56,6 @@ export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps)
   return Icon ? (
     <Icon className="h-3 w-3 flex-shrink-0" />
   ) : (
-    <MembersPropertyIcon className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />
+    <MembersPropertyIcon className={cn("mx-[4px] h-3 w-3 flex-shrink-0")} />
   );
 });
diff --git a/apps/web/core/components/dropdowns/member/base.tsx b/apps/web/core/components/dropdowns/member/base.tsx
index 32c035d95bd..577e60a7813 100644
--- a/apps/web/core/components/dropdowns/member/base.tsx
+++ b/apps/web/core/components/dropdowns/member/base.tsx
@@ -150,7 +150,7 @@ export const MemberDropdownBase = observer(function MemberDropdownBase(props: TM
           >
             {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-              <span className="flex-grow truncate leading-5 text-left text-body-xs-medium">
+              <span className="flex-grow truncate text-left text-body-xs-medium leading-5">
                 {getDisplayName(value, showUserDetails, placeholder)}
               </span>
             )}
diff --git a/apps/web/core/components/dropdowns/member/member-options.tsx b/apps/web/core/components/dropdowns/member/member-options.tsx
index c3fd99405f0..6fb5b03e732 100644
--- a/apps/web/core/components/dropdowns/member/member-options.tsx
+++ b/apps/web/core/components/dropdowns/member/member-options.tsx
@@ -129,7 +129,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
     <Combobox.Options data-prevent-outside-click static>
       <div
         className={cn(
-          "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none z-30",
+          "z-30 my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none",
           optionsClassName
         )}
         ref={setPopperElement}
@@ -162,7 +162,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
                       value={option.value}
                       className={({ active, selected }) =>
                         cn(
-                          "flex w-full select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
+                          "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                           active && "bg-layer-transparent-hover",
                           selected ? "text-primary" : "text-secondary",
                           isUserSuspended(option.value, workspaceSlug?.toString())
@@ -187,10 +187,10 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
                   )
               )
             ) : (
-              <p className="px-1.5 py-1 italic text-placeholder">{t("no_matching_results")}</p>
+              <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-placeholder">{t("loading")}</p>
+            <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/dropdowns/module/button-content.tsx b/apps/web/core/components/dropdowns/module/button-content.tsx
index 5b69f7aa0fb..dcf27dcad08 100644
--- a/apps/web/core/components/dropdowns/module/button-content.tsx
+++ b/apps/web/core/components/dropdowns/module/button-content.tsx
@@ -48,7 +48,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
     return (
       <>
         {showCount ? (
-          <div className="relative flex items-center max-w-full gap-1">
+          <div className="relative flex max-w-full items-center gap-1">
             {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
             {(value.length > 0 || !!placeholder) && (
               <div className="max-w-40 truncate">
@@ -61,7 +61,7 @@ export function ModuleButtonContent(props: ModuleButtonContentProps) {
             )}
           </div>
         ) : value.length > 0 ? (
-          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5 ">
+          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5">
             {value.map((moduleId) => {
               const moduleDetails = getModuleById(moduleId);
               return (
diff --git a/apps/web/core/components/dropdowns/module/module-options.tsx b/apps/web/core/components/dropdowns/module/module-options.tsx
index 263906f0450..8c4098f9f98 100644
--- a/apps/web/core/components/dropdowns/module/module-options.tsx
+++ b/apps/web/core/components/dropdowns/module/module-options.tsx
@@ -142,7 +142,7 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
                   value={option.value}
                   className={({ active, selected }) =>
                     cn(
-                      "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
+                      "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                       {
                         "bg-layer-transparent-hover": active,
                         "text-primary": selected,
@@ -160,10 +160,10 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
                 </Combobox.Option>
               ))
             ) : (
-              <p className="px-1.5 py-1 italic text-placeholder">{t("common.search.no_matching_results")}</p>
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-placeholder">{t("common.loading")}</p>
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
index a7ccae829ae..4cb9a018617 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -89,7 +89,7 @@ function BorderButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] rounded-sm px-2 py-0.5",
+          "flex h-full items-center gap-1.5 rounded-sm border-[0.5px] px-2 py-0.5",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
@@ -105,7 +105,7 @@ function BorderButton(props: ButtonProps) {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "p-0.5 rounded-sm border border-priority-urgent": priority === "urgent" && !hideText && highlightUrgent,
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
               <PriorityIcon
@@ -180,7 +180,7 @@ function BackgroundButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 rounded-sm px-2 py-0.5",
+          "flex h-full items-center gap-1.5 rounded-sm px-2 py-0.5",
           priorityClasses[priority ?? "none"],
           {
             // compact the icons if text is hidden
@@ -196,7 +196,7 @@ function BackgroundButton(props: ButtonProps) {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "p-0.5 rounded-sm border border-priority-urgent": priority === "urgent" && !hideText && highlightUrgent,
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
               <PriorityIcon
@@ -264,7 +264,7 @@ function TransparentButton(props: ButtonProps) {
     >
       <div
         className={cn(
-          "h-full w-full flex items-center gap-1.5 rounded-sm hover:bg-layer-transparent-hover px-2",
+          "flex h-full w-full items-center gap-1.5 rounded-sm px-2 hover:bg-layer-transparent-hover",
           {
             // compact the icons if text is hidden
             "px-0.5": hideText,
@@ -280,7 +280,7 @@ function TransparentButton(props: ButtonProps) {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "p-0.5 rounded-sm border border-priority-urgent": priority === "urgent" && !hideText && highlightUrgent,
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
               <PriorityIcon
@@ -491,7 +491,7 @@ export function PriorityDropdown(props: Props) {
                     value={option.value}
                     className={({ active, selected }) =>
                       cn(
-                        `w-full truncate flex items-center justify-between gap-2 rounded-sm px-1 py-1.5 cursor-pointer select-none ${
+                        `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
                           active ? "bg-layer-transparent-hover" : ""
                         } ${selected ? "text-primary" : "text-secondary"}`
                       )
@@ -506,7 +506,7 @@ export function PriorityDropdown(props: Props) {
                   </Combobox.Option>
                 ))
               ) : (
-                <p className="text-placeholder italic py-1 px-1.5">{t("no_matching_results")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/dropdowns/project/base.tsx b/apps/web/core/components/dropdowns/project/base.tsx
index df6eabef04d..7c44c298219 100644
--- a/apps/web/core/components/dropdowns/project/base.tsx
+++ b/apps/web/core/components/dropdowns/project/base.tsx
@@ -106,7 +106,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
       content: (
         <div className="flex items-center gap-2">
           {projectDetails?.logo_props && (
-            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+            <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
               <Logo logo={projectDetails?.logo_props} size={12} />
             </span>
           )}
@@ -150,7 +150,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
 
   const getProjectIcon = (value: string | string[] | null) => {
     const renderIcon = (logoProps: TProject["logo_props"]) => (
-      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
         <Logo logo={logoProps} size={14} />
       </span>
     );
@@ -212,7 +212,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
           >
             {!hideIcon && getProjectIcon(value)}
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-              <span className="truncate max-w-40">{getDisplayName(value, placeholder)}</span>
+              <span className="max-w-40 truncate">{getDisplayName(value, placeholder)}</span>
             )}
             {dropdownArrow && (
               <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -268,7 +268,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
                         key={option.value}
                         value={option.value}
                         className={({ active, selected }) =>
-                          `w-full truncate flex items-center justify-between gap-2 rounded-sm px-1 py-1.5 cursor-pointer select-none ${
+                          `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
                             active ? "bg-layer-transparent-hover" : ""
                           } ${selected ? "text-primary" : "text-secondary"}`
                         }
@@ -283,10 +283,10 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
                     );
                   })
                 ) : (
-                  <p className="text-placeholder italic py-1 px-1.5">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="text-placeholder italic py-1 px-1.5">{t("loading")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/dropdowns/state/base.tsx b/apps/web/core/components/dropdowns/state/base.tsx
index 687e227b8cd..13238861136 100644
--- a/apps/web/core/components/dropdowns/state/base.tsx
+++ b/apps/web/core/components/dropdowns/state/base.tsx
@@ -245,14 +245,14 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
                       key={option.value}
                       option={option}
                       selectedValue={value}
-                      className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5"
+                      className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none"
                     />
                   ))
                 ) : (
-                  <p className="px-1.5 py-1 italic text-placeholder">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="px-1.5 py-1 italic text-placeholder">{t("loading")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/editor/document/editor.tsx b/apps/web/core/components/editor/document/editor.tsx
index 20f8c6e0952..dd653e45ef0 100644
--- a/apps/web/core/components/editor/document/editor.tsx
+++ b/apps/web/core/components/editor/document/editor.tsx
@@ -98,7 +98,7 @@ export const DocumentEditor = forwardRef(function DocumentEditor(
       }}
       extendedEditorProps={extendedEditorProps}
       {...rest}
-      containerClassName={cn("relative pl-3 pb-3", containerClassName)}
+      containerClassName={cn("relative pb-3 pl-3", containerClassName)}
     />
   );
 });
diff --git a/apps/web/core/components/editor/embeds/mentions/user.tsx b/apps/web/core/components/editor/embeds/mentions/user.tsx
index 4ffce3b2cd6..788f13ac1d6 100644
--- a/apps/web/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/web/core/components/editor/embeds/mentions/user.tsx
@@ -39,7 +39,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
 
   if (!userDetails) {
     return (
-      <div className="not-prose inline px-1 py-0.5 rounded-sm bg-layer-1 text-tertiary no-underline">
+      <div className="not-prose inline rounded-sm bg-layer-1 px-1 py-0.5 text-tertiary no-underline">
         @suspended user
       </div>
     );
@@ -48,7 +48,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
   return (
     <div
       className={cn(
-        "not-prose inline px-1 py-0.5 rounded-sm bg-accent-subtle-active text-accent-primary no-underline",
+        "not-prose inline rounded-sm bg-accent-subtle-active px-1 py-0.5 text-accent-primary no-underline",
         {
           "bg-label-yellow-bg text-label-yellow-text": id === currentUser?.id,
         }
@@ -59,9 +59,9 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
           <Link to={profileLink}>@{userDetails?.display_name}</Link>
         </Popover.Button>
         <Popover.Panel side="bottom" align="start">
-          <div className="w-60 bg-surface-1 shadow-raised-200 rounded-lg p-3 border-[0.5px] border-strong">
+          <div className="w-60 rounded-lg border-[0.5px] border-strong bg-surface-1 p-3 shadow-raised-200">
             <div className="flex items-center gap-3">
-              <div className="flex-shrink-0 size-10 grid place-items-center">
+              <div className="grid size-10 flex-shrink-0 place-items-center">
                 <Avatar
                   src={getFileURL(userDetails?.avatar_url ?? "")}
                   name={userDetails?.display_name}
@@ -71,10 +71,10 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
                 />
               </div>
               <div>
-                <Link to={profileLink} className="not-prose font-medium text-primary text-13 hover:underline">
+                <Link to={profileLink} className="not-prose text-13 font-medium text-primary hover:underline">
                   {userDetails?.first_name} {userDetails?.last_name}
                 </Link>
-                {roleDetails && <p className="text-secondary text-11">{ROLE[roleDetails]}</p>}
+                {roleDetails && <p className="text-11 text-secondary">{ROLE[roleDetails]}</p>}
               </div>
             </div>
           </div>
diff --git a/apps/web/core/components/editor/lite-text/editor.tsx b/apps/web/core/components/editor/lite-text/editor.tsx
index 5dd50e0c2e9..257f106f8c0 100644
--- a/apps/web/core/components/editor/lite-text/editor.tsx
+++ b/apps/web/core/components/editor/lite-text/editor.tsx
@@ -120,7 +120,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
   return (
     <div
       className={cn(
-        "relative border border-subtle rounded-sm",
+        "relative rounded-sm border border-subtle",
         {
           "p-3": editable && !isLiteVariant,
         },
@@ -132,7 +132,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
       {/* Wrapper for lite toolbar layout */}
       <div className={cn(isLiteVariant && editable ? "flex items-end gap-1" : "")}>
         {/* Main Editor - always rendered once */}
-        <div className={cn(isLiteVariant && editable ? "flex-1 min-w-0" : "")}>
+        <div className={cn(isLiteVariant && editable ? "min-w-0 flex-1" : "")}>
           <LiteTextEditorWithRef
             ref={ref}
             disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
@@ -195,8 +195,8 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
       {isFullVariant && editable && (
         <div
           className={cn(
-            "transition-all duration-300 ease-out origin-top overflow-hidden",
-            isFocused ? "max-h-[200px] opacity-100 scale-y-100 mt-3" : "max-h-0 opacity-0 scale-y-0 invisible"
+            "origin-top overflow-hidden transition-all duration-300 ease-out",
+            isFocused ? "mt-3 max-h-[200px] scale-y-100 opacity-100" : "invisible max-h-0 scale-y-0 opacity-0"
           )}
         >
           <IssueCommentToolbar
diff --git a/apps/web/core/components/editor/lite-text/lite-toolbar.tsx b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
index 71665755960..99efb2f2a5a 100644
--- a/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
@@ -23,7 +23,7 @@ export function LiteToolbar({ onSubmit, isSubmitting, isEmpty, executeCommand }:
       <button
         onClick={() => executeCommand(IMAGE_ITEM)}
         type="button"
-        className="p-1 text-tertiary hover:text-secondary transition-colors"
+        className="p-1 text-tertiary transition-colors hover:text-secondary"
       >
         <Paperclip className="size-3" />
       </button>
@@ -31,7 +31,7 @@ export function LiteToolbar({ onSubmit, isSubmitting, isEmpty, executeCommand }:
         type="button"
         onClick={(e) => onSubmit(e)}
         disabled={isEmpty || isSubmitting}
-        className="p-1 bg-accent-primary hover:bg-accent-primary/80 disabled:bg-layer-1 disabled:text-secondary text-primary rounded-sm transition-colors"
+        className="rounded-sm bg-accent-primary p-1 text-primary transition-colors hover:bg-accent-primary/80 disabled:bg-layer-1 disabled:text-secondary"
       >
         <ArrowUp className="size-3" />
       </button>
diff --git a/apps/web/core/components/editor/lite-text/toolbar.tsx b/apps/web/core/components/editor/lite-text/toolbar.tsx
index 9e8f01c83f3..d23100a8d74 100644
--- a/apps/web/core/components/editor/lite-text/toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/toolbar.tsx
@@ -103,7 +103,7 @@ export function IssueCommentToolbar(props: Props) {
   const isSubmitButtonDisabled = isCommentEmpty || !isEditorReadyToDiscard;
 
   return (
-    <div className="flex h-9 w-full items-stretch gap-1.5 bg-surface-2 overflow-x-scroll">
+    <div className="flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll bg-surface-2">
       {showAccessSpecifier && (
         <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
           {COMMENT_ACCESS_SPECIFIERS.map((access) => {
@@ -114,7 +114,7 @@ export function IssueCommentToolbar(props: Props) {
                 <button
                   type="button"
                   onClick={() => handleAccessChange?.(access.key)}
-                  className={cn("grid place-items-center aspect-square rounded-xs p-1 hover:bg-layer-1", {
+                  className={cn("grid aspect-square place-items-center rounded-xs p-1 hover:bg-layer-1", {
                     "bg-layer-1": isAccessActive,
                   })}
                 >
@@ -156,7 +156,7 @@ export function IssueCommentToolbar(props: Props) {
                       type="button"
                       onClick={() => executeCommand(item)}
                       className={cn(
-                        "grid place-items-center aspect-square rounded-xs p-0.5 text-placeholder hover:bg-layer-1",
+                        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder hover:bg-layer-1",
                         {
                           "bg-layer-1 text-primary": isItemActive,
                         }
diff --git a/apps/web/core/components/editor/rich-text/description-input/loader.tsx b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
index 06db68b0f78..8be09783740 100644
--- a/apps/web/core/components/editor/rich-text/description-input/loader.tsx
+++ b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
@@ -30,7 +30,7 @@ export function DescriptionInputLoader(props: Props) {
       <div className="flex items-center gap-2">
         <Loader.Item width="50%" height="26px" />
       </div>
-      <div className="border-0.5 absolute bottom-2 right-3.5 z-10 flex items-center gap-2">
+      <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
         <Loader.Item width="100px" height="26px" />
         <Loader.Item width="50px" height="26px" />
       </div>
diff --git a/apps/web/core/components/editor/rich-text/editor.tsx b/apps/web/core/components/editor/rich-text/editor.tsx
index 3e667ef6f47..5a429b039fe 100644
--- a/apps/web/core/components/editor/rich-text/editor.tsx
+++ b/apps/web/core/components/editor/rich-text/editor.tsx
@@ -98,7 +98,7 @@ export const RichTextEditor = forwardRef(function RichTextEditor(
       }}
       extendedEditorProps={{}}
       {...rest}
-      containerClassName={cn("relative pl-3 pb-3", containerClassName)}
+      containerClassName={cn("relative pb-3 pl-3", containerClassName)}
     />
   );
 });
diff --git a/apps/web/core/components/editor/sticky-editor/color-palette.tsx b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
index ea9f7615d9c..1bdbaa40e69 100644
--- a/apps/web/core/components/editor/sticky-editor/color-palette.tsx
+++ b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
@@ -60,8 +60,8 @@ type TProps = {
 export function ColorPalette(props: TProps) {
   const { handleUpdate } = props;
   return (
-    <div className="absolute z-10 bottom-5 left-0 w-56 shadow p-2 rounded-md bg-surface-1 mb-2">
-      <div className="text-13 font-semibold text-placeholder mb-2">Background colors</div>
+    <div className="shadow absolute bottom-5 left-0 z-10 mb-2 w-56 rounded-md bg-surface-1 p-2">
+      <div className="mb-2 text-13 font-semibold text-placeholder">Background colors</div>
       <div className="flex flex-wrap gap-2">
         {STICKY_COLORS_LIST.map((color) => (
           <button
@@ -72,7 +72,7 @@ export function ColorPalette(props: TProps) {
                 background_color: color.key,
               });
             }}
-            className="h-6 w-6 rounded-md hover:ring-2 hover:ring-accent-strong focus:outline-none focus:ring-2 focus:ring-accent-strong transition-all"
+            className="h-6 w-6 rounded-md transition-all hover:ring-2 hover:ring-accent-strong focus:ring-2 focus:ring-accent-strong focus:outline-none"
             style={{
               backgroundColor: color.backgroundColor,
             }}
diff --git a/apps/web/core/components/editor/sticky-editor/editor.tsx b/apps/web/core/components/editor/sticky-editor/editor.tsx
index 0a0347c780d..544ea3b35b5 100644
--- a/apps/web/core/components/editor/sticky-editor/editor.tsx
+++ b/apps/web/core/components/editor/sticky-editor/editor.tsx
@@ -82,7 +82,7 @@ export const StickyEditor = React.forwardRef(function StickyEditor(
 
   return (
     <div
-      className={cn("relative border border-subtle rounded-sm", parentClassName)}
+      className={cn("relative rounded-sm border border-subtle", parentClassName)}
       onFocus={() => !showToolbarInitially && setIsFocused(true)}
       onBlur={() => !showToolbarInitially && setIsFocused(false)}
     >
@@ -108,9 +108,9 @@ export const StickyEditor = React.forwardRef(function StickyEditor(
       />
       {showToolbar && (
         <div
-          className={cn("transition-all duration-300 ease-out origin-top px-4 h-[60px]", {
-            "max-h-[60px] opacity-100 scale-y-100": isFocused,
-            "max-h-0 opacity-0 scale-y-0 invisible": !isFocused,
+          className={cn("h-[60px] origin-top px-4 transition-all duration-300 ease-out", {
+            "max-h-[60px] scale-y-100 opacity-100": isFocused,
+            "invisible max-h-0 scale-y-0 opacity-0": !isFocused,
           })}
         >
           <StickyEditorToolbar
diff --git a/apps/web/core/components/editor/sticky-editor/toolbar.tsx b/apps/web/core/components/editor/sticky-editor/toolbar.tsx
index 35d12cc87ac..efd2fc1696c 100644
--- a/apps/web/core/components/editor/sticky-editor/toolbar.tsx
+++ b/apps/web/core/components/editor/sticky-editor/toolbar.tsx
@@ -64,8 +64,8 @@ export function StickyEditorToolbar(props: Props) {
   useOutsideClickDetector(colorPaletteRef, () => setShowColorPalette(false));
 
   return (
-    <div className="flex w-full justify-between h-full">
-      <div className="flex my-auto gap-4" ref={colorPaletteRef}>
+    <div className="flex h-full w-full justify-between">
+      <div className="my-auto flex gap-4" ref={colorPaletteRef}>
         {/* color palette */}
         {showColorPalette && <ColorPalette handleUpdate={handleColorChange} />}
         <Tooltip
@@ -76,12 +76,12 @@ export function StickyEditorToolbar(props: Props) {
           }
         >
           <button type="button" onClick={() => setShowColorPalette(!showColorPalette)} className="flex text-primary/50">
-            <Palette className="size-4 my-auto" />
+            <Palette className="my-auto size-4" />
           </button>
         </Tooltip>
 
-        <div className="flex w-fit items-stretch justify-between gap-4 rounded-sm p-1 my-auto">
-          <div className="flex items-stretch my-auto gap-4">
+        <div className="my-auto flex w-fit items-stretch justify-between gap-4 rounded-sm p-1">
+          <div className="my-auto flex items-stretch gap-4">
             {Object.keys(toolbarItems).map((key) => (
               <div key={key} className={cn("flex items-stretch gap-4", {})}>
                 {toolbarItems[key].map((item) => {
@@ -100,7 +100,7 @@ export function StickyEditorToolbar(props: Props) {
                       <button
                         type="button"
                         onClick={() => executeCommand(item)}
-                        className={cn("grid place-items-center aspect-square rounded-xs p-0.5 text-primary/50", {})}
+                        className={cn("grid aspect-square place-items-center rounded-xs p-0.5 text-primary/50", {})}
                       >
                         <item.icon
                           className={cn("h-3.5 w-3.5", {
diff --git a/apps/web/core/components/empty-state/comic-box-button.tsx b/apps/web/core/components/empty-state/comic-box-button.tsx
index 591b0cc73f0..222e0531f84 100644
--- a/apps/web/core/components/empty-state/comic-box-button.tsx
+++ b/apps/web/core/components/empty-state/comic-box-button.tsx
@@ -56,22 +56,22 @@ export function ComicBoxButton(props: Props) {
             <div
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
-              className={`absolute bg-blue-300 right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
+              className={`bg-blue-300 absolute right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
             />
-            <div className={`absolute bg-blue-400/40 right-0 h-1.5 w-1.5 mt-0.5 mr-0.5 rounded-full`} />
+            <div className={`bg-blue-400/40 absolute right-0 mt-0.5 mr-0.5 h-1.5 w-1.5 rounded-full`} />
           </span>
         </Button>
       </Popover.Button>
       {isHovered && (
         <Popover.Panel className="fixed z-10" static>
           <div
-            className="flex flex-col rounded-sm border border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-xl overflow-hidden p-5 relative w-52 lg:w-60 xl:w-80"
+            className="relative flex w-52 flex-col overflow-hidden rounded-sm rounded-xl border border-subtle bg-layer-1 p-5 hover:bg-layer-1-hover lg:w-60 xl:w-80"
             ref={setPopperElement as Ref<HTMLDivElement>}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="absolute w-2 h-2 bg-surface-1 border rounded-lb-sm  border-subtle border-r-0 border-t-0 transform rotate-45 bottom-2 -left-[5px]" />
-            <h3 className="text-16 font-semibold w-full">{title}</h3>
+            <div className="rounded-lb-sm absolute bottom-2 -left-[5px] h-2 w-2 rotate-45 transform border border-t-0 border-r-0 border-subtle bg-surface-1" />
+            <h3 className="w-full text-16 font-semibold">{title}</h3>
             <h4 className="mt-1 text-13">{description}</h4>
           </div>
         </Popover.Panel>
diff --git a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
index 9dfcdf39ecd..593e5adda74 100644
--- a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
@@ -80,20 +80,20 @@ export const DetailedEmptyState = observer(function DetailedEmptyState(props: Pr
   return (
     <div
       className={cn(
-        "flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5",
+        "flex min-h-full min-w-full items-center justify-center overflow-y-auto px-5 py-10 md:px-20",
         className
       )}
     >
       <div className={cn("flex flex-col gap-5", sizeClasses[size])}>
-        <div className="flex flex-col gap-1.5 shrink-0">
+        <div className="flex shrink-0 flex-col gap-1.5">
           <h3 className={cn("text-18 font-semibold", { "font-medium": !description })}>{title}</h3>
           {description && <p className="text-13">{description}</p>}
         </div>
 
-        {assetPath && <img src={assetPath} alt={title} className="w-full h-auto" loading="lazy" />}
+        {assetPath && <img src={assetPath} alt={title} className="h-auto w-full" loading="lazy" />}
 
         {hasButtons && (
-          <div className="relative flex items-center justify-center gap-2 flex-shrink-0 w-full">
+          <div className="relative flex w-full flex-shrink-0 items-center justify-center gap-2">
             {/* primary button */}
             {customPrimaryButton ??
               (primaryButton?.text && <CustomButton config={primaryButton} variant="primary" size={size} />)}
diff --git a/apps/web/core/components/empty-state/section-empty-state-root.tsx b/apps/web/core/components/empty-state/section-empty-state-root.tsx
index 37cd702123d..cc4acdffb48 100644
--- a/apps/web/core/components/empty-state/section-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/section-empty-state-root.tsx
@@ -20,12 +20,12 @@ export function SectionEmptyState(props: Props) {
   return (
     <div
       className={cn(
-        "flex flex-col gap-4 items-center justify-center rounded-md border border-subtle p-10",
+        "flex flex-col items-center justify-center gap-4 rounded-md border border-subtle p-10",
         customClassName
       )}
     >
       <div className="flex flex-col items-center gap-2">
-        <div className="flex items-center justify-center size-8 bg-layer-1 rounded-sm">{icon}</div>
+        <div className="flex size-8 items-center justify-center rounded-sm bg-layer-1">{icon}</div>
         <span className="text-13 font-medium">{title}</span>
         {description && <span className="text-11 text-tertiary">{description}</span>}
       </div>
diff --git a/apps/web/core/components/empty-state/simple-empty-state-root.tsx b/apps/web/core/components/empty-state/simple-empty-state-root.tsx
index 38c9c7ffbac..b9271225236 100644
--- a/apps/web/core/components/empty-state/simple-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/simple-empty-state-root.tsx
@@ -38,7 +38,7 @@ export const SimpleEmptyState = observer(function SimpleEmptyState(props: Props)
   const { title, description, size = "sm", assetPath } = props;
 
   return (
-    <div className="text-center flex flex-col gap-2.5 items-center">
+    <div className="flex flex-col items-center gap-2.5 text-center">
       {assetPath && (
         <div className={sizeConfig[size].container}>
           <img src={assetPath} alt={title} className="h-full w-full object-contain" />
@@ -47,7 +47,7 @@ export const SimpleEmptyState = observer(function SimpleEmptyState(props: Props)
 
       <h3 className={getTitleClassName(!!description)}>{title}</h3>
 
-      {description && <p className="text-14 font-medium text-placeholder whitespace-pre-line">{description}</p>}
+      {description && <p className="text-14 font-medium whitespace-pre-line text-placeholder">{description}</p>}
     </div>
   );
 });
diff --git a/apps/web/core/components/estimates/create/modal.tsx b/apps/web/core/components/estimates/create/modal.tsx
index 7894a0af2ab..02bbaced9a2 100644
--- a/apps/web/core/components/estimates/create/modal.tsx
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -146,7 +146,7 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
     <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       <div className="relative space-y-6 py-5">
         {/* heading */}
-        <div className="relative flex justify-between items-center gap-2 px-5">
+        <div className="relative flex items-center justify-between gap-2 px-5">
           <div className="relative flex items-center gap-1">
             {estimatePoints && (
               <div
@@ -154,14 +154,14 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
                   setEstimateSystem(EEstimateSystem.POINTS);
                   handleUpdatePoints(undefined);
                 }}
-                className="flex-shrink-0 cursor-pointer w-5 h-5 flex justify-center items-center"
+                className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center"
               >
-                <ChevronLeftIcon className="w-4 h-4" />
+                <ChevronLeftIcon className="h-4 w-4" />
               </div>
             )}
             <div className="text-18 font-medium text-primary">{t("project_settings.estimates.new")}</div>
           </div>
-          <div className="text-11 text-gray-400">
+          <div className="text-gray-400 text-11">
             {t("project_settings.estimates.create.step", {
               step: renderEstimateStepsCount,
               total: 2,
@@ -200,7 +200,7 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
           )} */}
         </div>
 
-        <div className="relative flex justify-end items-center gap-3 px-5 pt-5 border-t border-subtle">
+        <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
           <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
             {t("common.cancel")}
           </Button>
diff --git a/apps/web/core/components/estimates/create/stage-one.tsx b/apps/web/core/components/estimates/create/stage-one.tsx
index 92f4ef23a73..f6b4c999d3e 100644
--- a/apps/web/core/components/estimates/create/stage-one.tsx
+++ b/apps/web/core/components/estimates/create/stage-one.tsx
@@ -35,7 +35,7 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
   if (!currentEstimateSystem) return <></>;
   return (
     <div className="space-y-6">
-      <div className="sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
+      <div className="mb-2 gap-2 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
         <RadioInput
           options={Object.keys(ESTIMATE_SYSTEMS)
             .map((system) => {
@@ -44,14 +44,14 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
               if (!isEnabled) return null;
               return {
                 label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
-                  <div className="relative flex items-center gap-2 cursor-no-drop text-tertiary">
+                  <div className="relative flex cursor-no-drop items-center gap-2 text-tertiary">
                     {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
                     <Tooltip tooltipContent={t("common.coming_soon")}>
                       <Info size={12} />
                     </Tooltip>
                   </div>
                 ) : !isEnabled ? (
-                  <div className="relative flex items-center gap-2 cursor-no-drop text-tertiary">
+                  <div className="relative flex cursor-no-drop items-center gap-2 text-tertiary">
                     {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
                     <UpgradeBadge />
                   </div>
@@ -80,7 +80,7 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
               {t("project_settings.estimates.create.start_from_scratch")}
             </div>
             <button
-              className="border border-subtle rounded-md p-3 py-2.5 text-left space-y-1 w-full block hover:bg-layer-transparent-hover"
+              className="block w-full space-y-1 rounded-md border border-subtle p-3 py-2.5 text-left hover:bg-layer-transparent-hover"
               onClick={() => handleEstimatePoints("custom")}
             >
               <p className="text-14 font-medium">{t("project_settings.estimates.create.custom")}</p>
@@ -95,12 +95,12 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
             <div className="text-13 font-medium text-secondary">
               {t("project_settings.estimates.create.choose_template")}
             </div>
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
               {Object.keys(currentEstimateSystem.templates).map((name) =>
                 currentEstimateSystem.templates[name]?.hide ? null : (
                   <button
                     key={name}
-                    className="border border-subtle rounded-md p-3 py-2.5 text-left space-y-1 hover:bg-surface-2"
+                    className="space-y-1 rounded-md border border-subtle p-3 py-2.5 text-left hover:bg-surface-2"
                     onClick={() => handleEstimatePoints(name)}
                   >
                     <p className="text-14 font-medium">{currentEstimateSystem.templates[name]?.title}</p>
diff --git a/apps/web/core/components/estimates/delete/modal.tsx b/apps/web/core/components/estimates/delete/modal.tsx
index d47468489c5..8181fc88814 100644
--- a/apps/web/core/components/estimates/delete/modal.tsx
+++ b/apps/web/core/components/estimates/delete/modal.tsx
@@ -62,7 +62,7 @@ export const DeleteEstimateModal = observer(function DeleteEstimateModal(props:
     <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       <div className="relative space-y-6 py-5">
         {/* heading */}
-        <div className="relative flex justify-between items-center gap-2 px-5">
+        <div className="relative flex items-center justify-between gap-2 px-5">
           <div className="text-18 font-medium text-primary">Delete Estimate System</div>
         </div>
 
@@ -75,7 +75,7 @@ export const DeleteEstimateModal = observer(function DeleteEstimateModal(props:
           </div>
         </div>
 
-        <div className="relative flex justify-end items-center gap-3 px-5 pt-5 border-t border-subtle">
+        <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
           <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
             Cancel
           </Button>
diff --git a/apps/web/core/components/estimates/inputs/number-input.tsx b/apps/web/core/components/estimates/inputs/number-input.tsx
index 6f898dfa7d4..a93626df1cb 100644
--- a/apps/web/core/components/estimates/inputs/number-input.tsx
+++ b/apps/web/core/components/estimates/inputs/number-input.tsx
@@ -21,7 +21,7 @@ export function EstimateNumberInput(props: TEstimateNumberInputProps) {
     <input
       value={value}
       onChange={(e) => handleEstimateInputValue(e.target.value)}
-      className="border-none focus:ring-0 focus:border-0 focus:outline-none px-2 py-2 w-full bg-transparent text-13"
+      className="w-full border-none bg-transparent px-2 py-2 text-13 focus:border-0 focus:ring-0 focus:outline-none"
       placeholder={t("project_settings.estimates.create.enter_estimate_point")}
       autoFocus
       step="any"
diff --git a/apps/web/core/components/estimates/inputs/text-input.tsx b/apps/web/core/components/estimates/inputs/text-input.tsx
index 4dabb65da47..03dd0b50d4a 100644
--- a/apps/web/core/components/estimates/inputs/text-input.tsx
+++ b/apps/web/core/components/estimates/inputs/text-input.tsx
@@ -21,7 +21,7 @@ export function EstimateTextInput(props: TEstimateTextInputProps) {
     <input
       value={value}
       onChange={(e) => handleEstimateInputValue(e.target.value)}
-      className="border-none focus:ring-0 focus:border-0 focus:outline-none px-3 py-2 w-full bg-transparent text-13"
+      className="w-full border-none bg-transparent px-3 py-2 text-13 focus:border-0 focus:ring-0 focus:outline-none"
       placeholder={t("project_settings.estimates.create.enter_estimate_point")}
       autoFocus
       type="text"
diff --git a/apps/web/core/components/estimates/points/create.tsx b/apps/web/core/components/estimates/points/create.tsx
index f06a53f3246..a4fd55ad183 100644
--- a/apps/web/core/components/estimates/points/create.tsx
+++ b/apps/web/core/components/estimates/points/create.tsx
@@ -173,10 +173,10 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
   };
 
   return (
-    <form onSubmit={handleCreate} className="relative flex items-center gap-2 text-14 pr-2.5">
+    <form onSubmit={handleCreate} className="relative flex items-center gap-2 pr-2.5 text-14">
       <div
         className={cn(
-          "relative w-full border rounded-sm flex items-center my-1",
+          "relative my-1 flex w-full items-center rounded-sm border",
           estimatePointError?.message ? `border-danger-strong` : `border-subtle`
         )}
       >
@@ -187,7 +187,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
         />
         {estimatePointError?.message && (
           <Tooltip tooltipContent={estimatePointError?.message} position="bottom">
-            <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-danger-primary">
+            <div className="relative mr-3 flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center overflow-hidden text-danger-primary">
               <Info size={14} />
             </div>
           </Tooltip>
@@ -197,15 +197,15 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
       {estimateInputValue && estimateInputValue.length > 0 && (
         <button
           type="submit"
-          className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-success-primary"
+          className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs text-success-primary transition-colors hover:bg-layer-1"
           disabled={loader}
         >
-          {loader ? <Spinner className="w-4 h-4" /> : <CheckIcon width={14} height={14} />}
+          {loader ? <Spinner className="h-4 w-4" /> : <CheckIcon width={14} height={14} />}
         </button>
       )}
       <button
         type="button"
-        className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
         onClick={handleClose}
         disabled={loader}
       >
diff --git a/apps/web/core/components/estimates/points/preview.tsx b/apps/web/core/components/estimates/points/preview.tsx
index b34aa8d6156..1cbd924e974 100644
--- a/apps/web/core/components/estimates/points/preview.tsx
+++ b/apps/web/core/components/estimates/points/preview.tsx
@@ -63,11 +63,11 @@ export const EstimatePointItemPreview = observer(function EstimatePointItemPrevi
   return (
     <div>
       {!estimatePointEditToggle && !estimatePointDeleteToggle && (
-        <div className="border border-subtle rounded-sm relative flex items-center px-1 gap-2 text-14 my-1">
-          <div className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer">
+        <div className="relative my-1 flex items-center gap-2 rounded-sm border border-subtle px-1 text-14">
+          <div className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1">
             <GripVertical size={14} className="text-secondary" />
           </div>
-          <div ref={EstimatePointValueRef} className="py-2 w-full text-13">
+          <div ref={EstimatePointValueRef} className="w-full py-2 text-13">
             {estimatePoint?.value ? (
               `${estimateType === EEstimateSystem.TIME ? convertMinutesToHoursMinutesString(Number(estimatePoint?.value)) : estimatePoint?.value}`
             ) : (
@@ -75,14 +75,14 @@ export const EstimatePointItemPreview = observer(function EstimatePointItemPrevi
             )}
           </div>
           <div
-            className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
+            className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
             onClick={() => setEstimatePointEditToggle(true)}
           >
             <EditIcon width={14} height={14} className="text-secondary" />
           </div>
           {estimatePoints.length > estimateCount.min && (
             <div
-              className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
+              className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
               onClick={() =>
                 estimateId && estimatePointId
                   ? setEstimatePointDeleteToggle(true)
diff --git a/apps/web/core/components/estimates/points/update.tsx b/apps/web/core/components/estimates/points/update.tsx
index 5504f905ce3..e4fdc639cbc 100644
--- a/apps/web/core/components/estimates/points/update.tsx
+++ b/apps/web/core/components/estimates/points/update.tsx
@@ -172,10 +172,10 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
   };
 
   return (
-    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 text-14 pr-2.5">
+    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 pr-2.5 text-14">
       <div
         className={cn(
-          "relative w-full border rounded-sm flex items-center my-1",
+          "relative my-1 flex w-full items-center rounded-sm border",
           estimatePointError?.message ? `border-danger-strong` : `border-subtle`
         )}
       >
@@ -194,7 +194,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
               }
               position="bottom"
             >
-              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-danger-primary">
+              <div className="relative mr-3 flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center overflow-hidden text-danger-primary">
                 <Info size={14} />
               </div>
             </Tooltip>
@@ -205,15 +205,15 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
       {estimateInputValue && estimateInputValue.length > 0 && (
         <button
           type="submit"
-          className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-success-primary"
+          className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs text-success-primary transition-colors hover:bg-layer-1"
           disabled={loader}
         >
-          {loader ? <Spinner className="w-4 h-4" /> : <CheckIcon width={14} height={14} />}
+          {loader ? <Spinner className="h-4 w-4" /> : <CheckIcon width={14} height={14} />}
         </button>
       )}
       <button
         type="button"
-        className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
         onClick={handleClose}
         disabled={loader}
       >
diff --git a/apps/web/core/components/estimates/radio-select.tsx b/apps/web/core/components/estimates/radio-select.tsx
index f4954e8ef54..0d3bd338c18 100644
--- a/apps/web/core/components/estimates/radio-select.tsx
+++ b/apps/web/core/components/estimates/radio-select.tsx
@@ -60,7 +60,7 @@ export function RadioInput({
             onClick={() => !disabled && setSelected(value)}
             className={cn(
               "flex items-center gap-2 text-14",
-              disabled ? `bg-layer-1 border-subtle cursor-not-allowed` : ``,
+              disabled ? `cursor-not-allowed border-subtle bg-layer-1` : ``,
               inputFieldClassName
             )}
           >
@@ -68,9 +68,9 @@ export function RadioInput({
               id={`${name}_${index}`}
               name={name}
               className={cn(
-                `group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-strong-1 bg-layer-2 cursor-pointer`,
-                selected === value ? `bg-accent-primary/80 border-accent-strong ` : ``,
-                disabled ? `bg-layer-1 border-subtle cursor-not-allowed` : ``,
+                `group flex size-5 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border border-strong-1 bg-layer-2`,
+                selected === value ? `border-accent-strong bg-accent-primary/80` : ``,
+                disabled ? `cursor-not-allowed border-subtle bg-layer-1` : ``,
                 inputButtonClassName
               )}
               type="radio"
@@ -78,7 +78,7 @@ export function RadioInput({
               disabled={disabled}
               checked={selected === value}
             />
-            <label htmlFor={`${name}_${index}`} className="cursor-pointer w-full">
+            <label htmlFor={`${name}_${index}`} className="w-full cursor-pointer">
               {label}
             </label>
           </div>
diff --git a/apps/web/core/components/exporter/column.tsx b/apps/web/core/components/exporter/column.tsx
index 524beaec02d..5fe387ecd16 100644
--- a/apps/web/core/components/exporter/column.tsx
+++ b/apps/web/core/components/exporter/column.tsx
@@ -27,15 +27,15 @@ export const useExportColumns = () => {
           <div className="flex items-center gap-x-2">
             <div>
               {avatar_url && avatar_url.trim() !== "" ? (
-                <span className="relative flex h-4 w-4 items-center justify-center rounded-full capitalize text-on-color">
+                <span className="relative flex h-4 w-4 items-center justify-center rounded-full text-on-color capitalize">
                   <img
                     src={getFileURL(avatar_url)}
-                    className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                    className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                     alt={display_name || email}
                   />
                 </span>
               ) : (
-                <span className="relative flex h-4 w-4 items-center justify-center rounded-full bg-gray-700 capitalize text-on-color text-11">
+                <span className="bg-gray-700 relative flex h-4 w-4 items-center justify-center rounded-full text-11 text-on-color capitalize">
                   {(email ?? display_name ?? "?")[0]}
                 </span>
               )}
@@ -76,7 +76,7 @@ export const useExportColumns = () => {
       content: "Status",
       tdRender: (rowData: RowData) => (
         <span
-          className={`rounded-sm text-11 px-2 py-1 capitalize ${
+          className={`rounded-sm px-2 py-1 text-11 capitalize ${
             rowData.status === "completed"
               ? "bg-success-subtle text-success-primary"
               : rowData.status === "processing"
@@ -100,7 +100,7 @@ export const useExportColumns = () => {
           <>
             {rowData.status == "completed" ? (
               <a target="_blank" href={rowData?.url} rel="noopener noreferrer">
-                <button className="w-full flex items-center gap-1 text-accent-primary font-medium">
+                <button className="flex w-full items-center gap-1 font-medium text-accent-primary">
                   <Download className="h-4 w-4" />
                   <div>Download</div>
                 </button>
diff --git a/apps/web/core/components/exporter/export-form.tsx b/apps/web/core/components/exporter/export-form.tsx
index 3c2016d9ca1..0dd41d84094 100644
--- a/apps/web/core/components/exporter/export-form.tsx
+++ b/apps/web/core/components/exporter/export-form.tsx
@@ -89,7 +89,7 @@ export const ExportForm = observer(function ExportForm(props: Props) {
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
         <div className="flex items-center gap-2">
-          <span className="text-10 text-secondary flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="flex-shrink-0 text-10 text-secondary">{projectDetails?.identifier}</span>
           <span className="truncate">{projectDetails?.name}</span>
         </div>
       ),
diff --git a/apps/web/core/components/exporter/export-modal.tsx b/apps/web/core/components/exporter/export-modal.tsx
index 5b7fc39f695..bf840de6e57 100644
--- a/apps/web/core/components/exporter/export-modal.tsx
+++ b/apps/web/core/components/exporter/export-modal.tsx
@@ -57,7 +57,7 @@ export const Exporter = observer(function Exporter(props: Props) {
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
         <div className="flex items-center gap-2">
-          <span className="text-10 text-secondary flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="flex-shrink-0 text-10 text-secondary">{projectDetails?.identifier}</span>
           <span className="truncate">{projectDetails?.name}</span>
         </div>
       ),
@@ -147,7 +147,7 @@ export const Exporter = observer(function Exporter(props: Props) {
         </div>
         <div className="flex max-w-min cursor-pointer items-center gap-2">
           <Checkbox checked={multiple} onChange={() => setMultiple(!multiple)} />
-          <div className="whitespace-nowrap text-13">
+          <div className="text-13 whitespace-nowrap">
             {t("workspace_settings.settings.exports.export_separate_files")}
           </div>
         </div>
diff --git a/apps/web/core/components/exporter/guide.tsx b/apps/web/core/components/exporter/guide.tsx
index e8d20cad5ba..f6a212d9049 100644
--- a/apps/web/core/components/exporter/guide.tsx
+++ b/apps/web/core/components/exporter/guide.tsx
@@ -25,7 +25,7 @@ export const ExportGuide = observer(function ExportGuide() {
 
   return (
     <>
-      <div className="size-full flex flex-col gap-y-13">
+      <div className="flex size-full flex-col gap-y-13">
         <ExportForm
           workspaceSlug={workspaceSlug}
           provider={provider}
diff --git a/apps/web/core/components/gantt-chart/blocks/block-row.tsx b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
index b71aabdd62a..4d70c82b12f 100644
--- a/apps/web/core/components/gantt-chart/blocks/block-row.tsx
+++ b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
@@ -81,7 +81,7 @@ export const BlockRow = observer(function BlockRow(props: Props) {
 
   return (
     <div
-      className="relative min-w-full w-max"
+      className="relative w-max min-w-full"
       onMouseEnter={() => updateActiveBlockId(blockId)}
       onMouseLeave={() => updateActiveBlockId(null)}
       style={{
diff --git a/apps/web/core/components/gantt-chart/blocks/block.tsx b/apps/web/core/components/gantt-chart/blocks/block.tsx
index 75e770a6497..dcff677e396 100644
--- a/apps/web/core/components/gantt-chart/blocks/block.tsx
+++ b/apps/web/core/components/gantt-chart/blocks/block.tsx
@@ -83,7 +83,7 @@ export const GanttChartBlock = observer(function GanttChartBlock(props: Props) {
           horizontalOffset={100}
           verticalOffset={200}
           classNames="flex h-full w-full items-center"
-          placeholderChildren={<div className="h-8 w-full bg-layer-1 rounded-sm" />}
+          placeholderChildren={<div className="h-8 w-full rounded-sm bg-layer-1" />}
           shouldRecordHeights={false}
           forceRender={isCurrentDependencyDragging}
         >
diff --git a/apps/web/core/components/gantt-chart/chart/header.tsx b/apps/web/core/components/gantt-chart/chart/header.tsx
index 5c47b4ab5ad..faa2c266009 100644
--- a/apps/web/core/components/gantt-chart/chart/header.tsx
+++ b/apps/web/core/components/gantt-chart/chart/header.tsx
@@ -38,7 +38,7 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
 
   return (
     <Row
-      className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap py-2 bg-surface-1"
+      className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 bg-surface-1 py-2 whitespace-nowrap"
       style={{ height: `${GANTT_BREADCRUMBS_HEIGHT}px` }}
     >
       <div className="ml-auto">
@@ -52,7 +52,7 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
           <div
             key={chartView?.key}
             className={cn(
-              "cursor-pointer rounded-md p-1 px-2 text-11 bg-layer-transparent hover:bg-layer-transparent-hover",
+              "cursor-pointer rounded-md bg-layer-transparent p-1 px-2 text-11 hover:bg-layer-transparent-hover",
               {
                 "bg-layer-transparent-selected": currentView === chartView?.key,
               }
@@ -67,7 +67,7 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
       {showToday && (
         <button
           type="button"
-          className="rounded-md p-1 px-2 text-11 bg-layer-transparent hover:bg-layer-transparent-hover"
+          className="rounded-md bg-layer-transparent p-1 px-2 text-11 hover:bg-layer-transparent-hover"
           onClick={handleToday}
         >
           {t("common.today")}
@@ -76,7 +76,7 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props)
 
       <button
         type="button"
-        className="flex items-center justify-center rounded-md border border-subtle p-1 transition-all bg-layer-transparent hover:bg-layer-transparent-hover"
+        className="flex items-center justify-center rounded-md border border-subtle bg-layer-transparent p-1 transition-all hover:bg-layer-transparent-hover"
         onClick={toggleFullScreenMode}
       >
         {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
diff --git a/apps/web/core/components/gantt-chart/chart/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx
index f6e53bdf486..e7de61089d2 100644
--- a/apps/web/core/components/gantt-chart/chart/main-content.tsx
+++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx
@@ -177,7 +177,7 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro
               // DO NOT REMOVE THE ID
               id="gantt-container"
               className={cn(
-                "h-full w-full overflow-auto vertical-scrollbar horizontal-scrollbar scrollbar-lg flex border-t-[0.5px] border-subtle",
+                "vertical-scrollbar horizontal-scrollbar flex scrollbar-lg h-full w-full overflow-auto border-t-[0.5px] border-subtle",
                 {
                   "mb-8": bottomSpacing,
                 }
@@ -199,7 +199,7 @@ export const GanttChartMainContent = observer(function GanttChartMainContent(pro
                 showAllBlocks={showAllBlocks}
                 isEpic={isEpic}
               />
-              <div className="relative min-h-full h-max flex-shrink-0 flex-grow">
+              <div className="relative h-max min-h-full flex-shrink-0 flex-grow">
                 <ActiveChartView />
                 {currentViewData && (
                   <div
diff --git a/apps/web/core/components/gantt-chart/chart/root.tsx b/apps/web/core/components/gantt-chart/chart/root.tsx
index 22effbef89b..2b68641ff95 100644
--- a/apps/web/core/components/gantt-chart/chart/root.tsx
+++ b/apps/web/core/components/gantt-chart/chart/root.tsx
@@ -181,7 +181,7 @@ export const ChartViewRoot = observer(function ChartViewRoot(props: ChartViewRoo
 
   const content = (
     <div
-      className={cn("relative flex flex-col h-full select-none rounded-xs bg-surface-1 shadow", {
+      className={cn("shadow relative flex h-full flex-col rounded-xs bg-surface-1 select-none", {
         "inset-0 z-[25] bg-surface-1": fullScreenMode,
         "border-[0.5px] border-subtle": border,
       })}
diff --git a/apps/web/core/components/gantt-chart/chart/views/month.tsx b/apps/web/core/components/gantt-chart/chart/views/month.tsx
index 1e2ee55551f..3473f2b2aaf 100644
--- a/apps/web/core/components/gantt-chart/chart/views/month.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/month.tsx
@@ -30,12 +30,12 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
   const marginLeftDays = getNumberOfDaysBetweenTwoDates(monthsStartDate, weeksStartDate);
 
   return (
-    <div className="absolute top-0 left-0 min-h-full h-max w-max flex">
+    <div className="absolute top-0 left-0 flex h-max min-h-full w-max">
       {currentViewData && (
         <div className="relative flex flex-col outline-[0.25px] outline-subtle-1">
           {/** Header Div */}
           <div
-            className="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0"
+            className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1"
             style={{
               height: `${HEADER_HEIGHT}px`,
             }}
@@ -49,14 +49,14 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
                   style={{ width: `${monthBlock.days * currentViewData?.data.dayWidth}px` }}
                 >
                   <div
-                    className="sticky flex items-center font-regular z-[1] m-1 whitespace-nowrap px-3 py-1 text-14 capitalize bg-surface-1 text-secondary"
+                    className="sticky z-[1] m-1 flex items-center bg-surface-1 px-3 py-1 text-14 font-regular whitespace-nowrap text-secondary capitalize"
                     style={{
                       left: `${SIDEBAR_WIDTH}px`,
                     }}
                   >
                     {monthBlock?.title}
                     {monthBlock.today && (
-                      <span className={cn("rounded-sm ml-2 font-medium bg-accent-primary px-1 text-9 text-on-color")}>
+                      <span className={cn("ml-2 rounded-sm bg-accent-primary px-1 text-9 font-medium text-on-color")}>
                         Current
                       </span>
                     )}
@@ -65,12 +65,12 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
               ))}
             </div>
             {/** Weeks Sub title */}
-            <div className="h-5 w-full flex">
+            <div className="flex h-5 w-full">
               {weeks?.map((weekBlock) => (
                 <div
                   key={`sub-title-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
                   className={cn(
-                    "flex flex-shrink-0 py-1 px-2 text-center capitalize justify-between outline-[0.25px] outline-subtle-1",
+                    "flex flex-shrink-0 justify-between px-2 py-1 text-center capitalize outline-[0.25px] outline-subtle-1",
                     {
                       "bg-accent-primary/20": weekBlock.today,
                     }
@@ -92,7 +92,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
             </div>
           </div>
           {/** Week Columns */}
-          <div className="h-full w-full flex-grow flex">
+          <div className="flex h-full w-full flex-grow">
             {weeks?.map((weekBlock) => (
               <div
                 key={`column-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
diff --git a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
index 98e482a7a14..9b135677c23 100644
--- a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
@@ -21,7 +21,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
   const quarterBlocks: IQuarterMonthBlock[] = groupMonthsToQuarters(monthBlocks);
 
   return (
-    <div className={`absolute top-0 left-0 min-h-full h-max w-max flex`}>
+    <div className={`absolute top-0 left-0 flex h-max min-h-full w-max`}>
       {currentViewData &&
         quarterBlocks?.map((quarterBlock, rootIndex) => (
           <div
@@ -30,44 +30,44 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
           >
             {/** Header Div */}
             <div
-              className="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0 outline-[1px] outline-subtle-1"
+              className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1 outline-[1px] outline-subtle-1"
               style={{
                 height: `${HEADER_HEIGHT}px`,
               }}
             >
               {/** Main Quarter Title */}
-              <div className="w-full inline-flex h-7 justify-between">
+              <div className="inline-flex h-7 w-full justify-between">
                 <div
-                  className="sticky flex items-center font-regular z-[1] my-1 whitespace-nowrap px-3 py-1 text-14 capitalize bg-surface-1 text-secondary"
+                  className="sticky z-[1] my-1 flex items-center bg-surface-1 px-3 py-1 text-14 font-regular whitespace-nowrap text-secondary capitalize"
                   style={{
                     left: `${SIDEBAR_WIDTH}px`,
                   }}
                 >
                   {quarterBlock?.title}
                   {quarterBlock.today && (
-                    <span className={cn("rounded-sm ml-2 font-medium  bg-accent-primary px-1 text-9 text-on-color")}>
+                    <span className={cn("ml-2 rounded-sm bg-accent-primary px-1 text-9 font-medium text-on-color")}>
                       Current
                     </span>
                   )}
                 </div>
-                <div className="sticky whitespace-nowrap px-3 py-2 text-11 capitalize text-placeholder">
+                <div className="sticky px-3 py-2 text-11 whitespace-nowrap text-placeholder capitalize">
                   {quarterBlock.shortTitle}
                 </div>
               </div>
               {/** Months Sub title */}
-              <div className="h-5 w-full flex">
+              <div className="flex h-5 w-full">
                 {quarterBlock?.children?.map((monthBlock, index) => (
                   <div
                     key={`sub-title-${rootIndex}-${index}`}
                     className={cn(
-                      "flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline-subtle-1",
+                      "flex flex-shrink-0 justify-center text-center capitalize outline-[0.25px] outline-subtle-1",
                       {
                         "bg-accent-primary/20": monthBlock.today,
                       }
                     )}
                     style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
                   >
-                    <div className="space-x-1 flex items-center justify-center text-11 font-medium h-full">
+                    <div className="flex h-full items-center justify-center space-x-1 text-11 font-medium">
                       <span
                         className={cn({
                           "rounded-lg bg-accent-primary px-2 text-on-color": monthBlock.today,
@@ -81,7 +81,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
               </div>
             </div>
             {/** Month Columns */}
-            <div className="h-full w-full flex-grow flex">
+            <div className="flex h-full w-full flex-grow">
               {quarterBlock?.children?.map((monthBlock, index) => (
                 <div
                   key={`column-${rootIndex}-${index}`}
diff --git a/apps/web/core/components/gantt-chart/chart/views/week.tsx b/apps/web/core/components/gantt-chart/chart/views/week.tsx
index a1c9a2d900a..2f96eb1579e 100644
--- a/apps/web/core/components/gantt-chart/chart/views/week.tsx
+++ b/apps/web/core/components/gantt-chart/chart/views/week.tsx
@@ -18,7 +18,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
   const weekBlocks: IWeekBlock[] = renderView;
 
   return (
-    <div className={`absolute top-0 left-0 min-h-full h-max w-max flex`}>
+    <div className={`absolute top-0 left-0 flex h-max min-h-full w-max`}>
       {currentViewData &&
         weekBlocks?.map((block, rootIndex) => (
           <div
@@ -27,32 +27,32 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
           >
             {/** Header Div */}
             <div
-              className="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0 outline-[1px] outline-subtle-1"
+              className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1 outline-[1px] outline-subtle-1"
               style={{
                 height: `${HEADER_HEIGHT}px`,
               }}
             >
               {/** Main Months Title */}
-              <div className="w-full inline-flex h-7 justify-between">
+              <div className="inline-flex h-7 w-full justify-between">
                 <div
-                  className="sticky flex items-center font-regular z-[1] m-1 whitespace-nowrap px-3 py-1 text-13 capitalize bg-surface-1 text-secondary"
+                  className="sticky z-[1] m-1 flex items-center bg-surface-1 px-3 py-1 text-13 font-regular whitespace-nowrap text-secondary capitalize"
                   style={{
                     left: `${SIDEBAR_WIDTH}px`,
                   }}
                 >
                   {block?.title}
                 </div>
-                <div className="sticky whitespace-nowrap px-3 py-2 text-11 capitalize text-placeholder">
+                <div className="sticky px-3 py-2 text-11 whitespace-nowrap text-placeholder capitalize">
                   {block?.weekData?.title}
                 </div>
               </div>
               {/** Days Sub title */}
-              <div className="h-5 w-full flex">
+              <div className="flex h-5 w-full">
                 {block?.children?.map((weekDay, index) => (
                   <div
                     key={`sub-title-${rootIndex}-${index}`}
                     className={cn(
-                      "flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline-subtle-1",
+                      "flex flex-shrink-0 justify-between p-1 text-center capitalize outline-[0.25px] outline-subtle-1",
                       {
                         "bg-accent-primary/20": weekDay.today,
                       }
@@ -74,7 +74,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
               </div>
             </div>
             {/** Day Columns */}
-            <div className="h-full w-full flex-grow flex bg-surface-1">
+            <div className="flex h-full w-full flex-grow bg-surface-1">
               {block?.children?.map((weekDay, index) => (
                 <div
                   key={`column-${rootIndex}-${index}`}
diff --git a/apps/web/core/components/gantt-chart/helpers/add-block.tsx b/apps/web/core/components/gantt-chart/helpers/add-block.tsx
index cffab8ff267..b7b94fa9803 100644
--- a/apps/web/core/components/gantt-chart/helpers/add-block.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/add-block.tsx
@@ -91,7 +91,7 @@ export const ChartAddBlock = observer(function ChartAddBlock(props: Props) {
         <Tooltip tooltipContent={buttonStartDate && renderFormattedDate(buttonStartDate)} isMobile={isMobile}>
           <button
             type="button"
-            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-layer-1 p-1.5 rounded-sm border border-strong grid place-items-center text-secondary hover:text-primary"
+            className="absolute top-1/2 grid h-8 w-8 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-sm border border-strong bg-layer-1 p-1.5 text-secondary hover:text-primary"
             style={{
               marginLeft: `${buttonXPosition}px`,
             }}
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx b/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
index 3c91c30a41d..11ffb03bbd3 100644
--- a/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
@@ -38,8 +38,8 @@ export const LeftResizable = observer(function LeftResizable(props: LeftResizabl
   return (
     <>
       {(isHovering || isLeftResizing) && dateString && (
-        <div className="absolute flex text-11 font-regular text-tertiary h-full w-32 -left-36 justify-end items-center">
-          <div className="px-2 py-1 bg-accent-subtle rounded-sm">{dateString}</div>
+        <div className="absolute -left-36 flex h-full w-32 items-center justify-end text-11 font-regular text-tertiary">
+          <div className="rounded-sm bg-accent-subtle px-2 py-1">{dateString}</div>
         </div>
       )}
       <div
@@ -52,11 +52,11 @@ export const LeftResizable = observer(function LeftResizable(props: LeftResizabl
         onMouseOut={() => {
           setIsHovering(false);
         }}
-        className="absolute -left-1.5 top-1/2 -translate-y-1/2 z-[6] h-full w-3 cursor-col-resize rounded-md"
+        className="absolute top-1/2 -left-1.5 z-[6] h-full w-3 -translate-y-1/2 cursor-col-resize rounded-md"
       />
       <div
         className={cn(
-          "absolute left-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-xs bg-surface-1 transition-all duration-300 opacity-0 group-hover:opacity-100",
+          "absolute top-1/2 left-1 z-[5] h-7 w-1 -translate-y-1/2 rounded-xs bg-surface-1 opacity-0 transition-all duration-300 group-hover:opacity-100",
           {
             "-left-1.5 opacity-100": isLeftResizing,
           }
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx b/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
index 3cb02ff3c99..d8cd21787a5 100644
--- a/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
@@ -38,8 +38,8 @@ export const RightResizable = observer(function RightResizable(props: RightResiz
   return (
     <>
       {(isHovering || isRightResizing) && dateString && (
-        <div className="z-[10] absolute flex text-11 font-regular text-tertiary h-full w-32 -right-36 justify-start items-center">
-          <div className="px-2 py-1 bg-accent-subtle rounded-sm">{dateString}</div>
+        <div className="absolute -right-36 z-[10] flex h-full w-32 items-center justify-start text-11 font-regular text-tertiary">
+          <div className="rounded-sm bg-accent-subtle px-2 py-1">{dateString}</div>
         </div>
       )}
       <div
@@ -50,11 +50,11 @@ export const RightResizable = observer(function RightResizable(props: RightResiz
         onMouseOut={() => {
           setIsHovering(false);
         }}
-        className="absolute -right-1.5 top-1/2 -translate-y-1/2 z-[6] h-full w-3 cursor-col-resize rounded-md"
+        className="absolute top-1/2 -right-1.5 z-[6] h-full w-3 -translate-y-1/2 cursor-col-resize rounded-md"
       />
       <div
         className={cn(
-          "absolute right-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-xs bg-surface-1 transition-all duration-300 opacity-0 group-hover:opacity-100",
+          "absolute top-1/2 right-1 z-[5] h-7 w-1 -translate-y-1/2 rounded-xs bg-surface-1 opacity-0 transition-all duration-300 group-hover:opacity-100",
           {
             "-right-1.5 opacity-100": isRightResizing,
           }
diff --git a/apps/web/core/components/gantt-chart/helpers/draggable.tsx b/apps/web/core/components/gantt-chart/helpers/draggable.tsx
index a0065141a85..9552c9b6dc3 100644
--- a/apps/web/core/components/gantt-chart/helpers/draggable.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/draggable.tsx
@@ -43,7 +43,7 @@ export const ChartDraggable = observer(function ChartDraggable(props: Props) {
   } = props;
 
   return (
-    <div className="group w-full z-[5] relative inline-flex h-full cursor-pointer items-center font-medium transition-all">
+    <div className="group relative z-[5] inline-flex h-full w-full cursor-pointer items-center font-medium transition-all">
       {/* left resize drag handle */}
       {(typeof enableDependency === "function" ? enableDependency(block.id) : enableDependency) && (
         <LeftDependencyDraggable block={block} ganttContainerRef={ganttContainerRef} />
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
index f4a4594bab7..e7b4f279a37 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -54,7 +54,7 @@ export const IssuesSidebarBlock = observer(function IssuesSidebarBlock(props: Pr
     >
       <Row
         className={cn(
-          "group w-full flex items-center gap-2 pr-4 bg-layer-transparent hover:bg-layer-transparent-hover",
+          "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
           {
             "bg-layer-transparent-hover": isBlockHoveredOn,
             "bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
@@ -66,12 +66,12 @@ export const IssuesSidebarBlock = observer(function IssuesSidebarBlock(props: Pr
         }}
       >
         {enableSelection && selectionHelpers && (
-          <div className="flex items-center gap-2 absolute left-1">
+          <div className="absolute left-1 flex items-center gap-2">
             <MultipleSelectEntityAction
               className={cn(
-                "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
+                "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
                 {
-                  "opacity-100 pointer-events-auto": isIssueSelected,
+                  "pointer-events-auto opacity-100": isIssueSelected,
                 }
               )}
               groupId={GANTT_SELECT_GROUP}
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
index 48a90a96258..ac2af129716 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -117,7 +117,7 @@ export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Prop
           })}
           {canLoadMoreBlocks && (
             <div ref={setIntersectionElement} className="p-2">
-              <div className="flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm md:px-1 px-4 py-1.5 bg-layer-1 animate-pulse" />
+              <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
             </div>
           )}
         </>
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
index 479390afd71..78ec85453e8 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
@@ -42,7 +42,7 @@ export const ModulesSidebarBlock = observer(function ModulesSidebarBlock(props:
       <Row
         id={`sidebar-block-${block.id}`}
         className={cn(
-          "group w-full flex items-center gap-2 pr-4 bg-layer-transparent hover:bg-layer-transparent-hover",
+          "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
           {
             "bg-transparent-hover": isBlockActive(block.id),
           }
diff --git a/apps/web/core/components/gantt-chart/sidebar/root.tsx b/apps/web/core/components/gantt-chart/sidebar/root.tsx
index 21d38372346..e8680fdb231 100644
--- a/apps/web/core/components/gantt-chart/sidebar/root.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/root.tsx
@@ -56,26 +56,26 @@ export const GanttChartSidebar = observer(function GanttChartSidebar(props: Prop
     <Row
       // DO NOT REMOVE THE ID
       id="gantt-sidebar"
-      className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-subtle-1 bg-surface-1"
+      className="sticky left-0 z-10 h-max min-h-full flex-shrink-0 border-r-[0.5px] border-subtle-1 bg-surface-1"
       style={{
         width: `${SIDEBAR_WIDTH}px`,
       }}
       variant={ERowVariant.HUGGING}
     >
       <Row
-        className="group/list-header box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-subtle-1 pb-2 pr-4 text-13 font-medium text-tertiary sticky top-0 z-10 bg-surface-1"
+        className="group/list-header sticky top-0 z-10 box-border flex flex-shrink-0 items-end justify-between gap-2 border-b-[0.5px] border-subtle-1 bg-surface-1 pr-4 pb-2 text-13 font-medium text-tertiary"
         style={{
           height: `${HEADER_HEIGHT}px`,
         }}
       >
         <div className={cn("flex items-center gap-2")}>
           {enableSelection && (
-            <div className="flex-shrink-0 flex items-center w-3.5 absolute left-1">
+            <div className="absolute left-1 flex w-3.5 flex-shrink-0 items-center">
               <MultipleSelectGroupAction
                 className={cn(
-                  "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
+                  "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
                   {
-                    "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
+                    "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
                   }
                 )}
                 groupID={GANTT_SELECT_GROUP}
@@ -88,7 +88,7 @@ export const GanttChartSidebar = observer(function GanttChartSidebar(props: Prop
         <h6>{t("common.duration")}</h6>
       </Row>
 
-      <Row variant={ERowVariant.HUGGING} className="min-h-full h-max bg-surface-1">
+      <Row variant={ERowVariant.HUGGING} className="h-max min-h-full bg-surface-1">
         {sidebarToRender &&
           sidebarToRender({
             title,
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index daf9a20f4ff..4f18cc552fb 100644
--- a/apps/web/core/components/global/product-updates/footer.tsx
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -15,12 +15,12 @@ import { cn } from "@plane/utils";
 export function ProductUpdatesFooter() {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center justify-between flex-shrink-0 gap-4 m-6 mb-4">
+    <div className="m-6 mb-4 flex flex-shrink-0 items-center justify-between gap-4">
       <div className="flex items-center gap-2">
         <a
           href="https://go.plane.so/p-docs"
           target="_blank"
-          className="text-13 text-secondary hover:text-primary hover:underline underline-offset-1 outline-none"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
           rel="noreferrer"
         >
           {t("docs")}
@@ -32,7 +32,7 @@ export function ProductUpdatesFooter() {
           data-ph-element={USER_TRACKER_ELEMENTS.CHANGELOG_REDIRECTED}
           href="https://go.plane.so/p-changelog"
           target="_blank"
-          className="text-13 text-secondary hover:text-primary hover:underline underline-offset-1 outline-none"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
           rel="noreferrer"
         >
           {t("full_changelog")}
@@ -43,7 +43,7 @@ export function ProductUpdatesFooter() {
         <a
           href="mailto:support@plane.so"
           target="_blank"
-          className="text-13 text-secondary hover:text-primary hover:underline underline-offset-1 outline-none"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
           rel="noreferrer"
         >
           {t("support")}
@@ -54,7 +54,7 @@ export function ProductUpdatesFooter() {
         <a
           href="https://go.plane.so/p-discord"
           target="_blank"
-          className="text-13 text-secondary hover:text-primary hover:underline underline-offset-1 outline-none"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
           rel="noreferrer"
         >
           Discord
@@ -65,7 +65,7 @@ export function ProductUpdatesFooter() {
         target="_blank"
         className={cn(
           getButtonStyling("secondary", "base"),
-          "flex gap-1.5 items-center text-center font-medium hover:underline underline-offset-2 outline-none"
+          "flex items-center gap-1.5 text-center font-medium underline-offset-2 outline-none hover:underline"
         )}
         rel="noreferrer"
       >
diff --git a/apps/web/core/components/home/home-dashboard-widgets.tsx b/apps/web/core/components/home/home-dashboard-widgets.tsx
index 5cc635dfe41..067fa06c3a0 100644
--- a/apps/web/core/components/home/home-dashboard-widgets.tsx
+++ b/apps/web/core/components/home/home-dashboard-widgets.tsx
@@ -82,7 +82,7 @@ export const DashboardWidgets = observer(function DashboardWidgets() {
   if (loading || loader !== "loaded") return <HomeLoader />;
 
   return (
-    <div className="h-full w-full relative flex flex-col gap-7">
+    <div className="relative flex h-full w-full flex-col gap-7">
       <HomePageHeader />
       <ManageWidgetsModal
         workspaceSlug={workspaceSlug.toString()}
@@ -105,7 +105,7 @@ export const DashboardWidgets = observer(function DashboardWidgets() {
           })}
         </div>
       ) : (
-        <div className="h-full w-full grid place-items-center">
+        <div className="grid h-full w-full place-items-center">
           <SimpleEmptyState
             title={t("home.empty.widgets.title")}
             description={t("home.empty.widgets.description")}
diff --git a/apps/web/core/components/home/root.tsx b/apps/web/core/components/home/root.tsx
index 6473c35c1e6..908993a1eb3 100644
--- a/apps/web/core/components/home/root.tsx
+++ b/apps/web/core/components/home/root.tsx
@@ -48,14 +48,14 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
   return (
     <>
       {currentUserProfile && !currentUserProfile.is_tour_completed && (
-        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-backdrop transition-opacity overflow-y-auto">
+        <div className="fixed top-0 left-0 z-20 grid h-full w-full place-items-center overflow-y-auto bg-backdrop transition-opacity">
           <TourRoot onComplete={handleTourCompleted} />
         </div>
       )}
       <>
         <HomePeekOverviewsRoot />
-        <ContentWrapper className="gap-6 bg-surface-1 mx-auto scrollbar-hide px-page-x">
-          <div className="max-w-[800px] mx-auto w-full">
+        <ContentWrapper className="mx-auto scrollbar-hide gap-6 bg-surface-1 px-page-x">
+          <div className="mx-auto w-full max-w-[800px]">
             {currentUser && <UserGreetingsView user={currentUser} />}
             <DashboardWidgets />
           </div>
diff --git a/apps/web/core/components/home/user-greetings.tsx b/apps/web/core/components/home/user-greetings.tsx
index 170da6c1bbb..9fdb5598be5 100644
--- a/apps/web/core/components/home/user-greetings.tsx
+++ b/apps/web/core/components/home/user-greetings.tsx
@@ -47,8 +47,8 @@ export function UserGreetingsView(props: IUserGreetingsView) {
   const greeting = parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
 
   return (
-    <div className="flex flex-col items-center my-6">
-      <h2 className="text-20 font-semibold text-center">
+    <div className="my-6 flex flex-col items-center">
+      <h2 className="text-center text-20 font-semibold">
         {t("good")} {t(greeting)}, {user?.first_name} {user?.last_name}
       </h2>
       <h5 className="flex items-center gap-2 font-medium text-placeholder">
diff --git a/apps/web/core/components/home/widgets/empty-states/links.tsx b/apps/web/core/components/home/widgets/empty-states/links.tsx
index a881ad5c2fa..bd0350c6923 100644
--- a/apps/web/core/components/home/widgets/empty-states/links.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/links.tsx
@@ -10,7 +10,7 @@ import { EmptyStateCompact } from "@plane/propel/empty-state";
 export function LinksEmptyState() {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center justify-center py-10 bg-layer-1 w-full rounded-lg">
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
       <EmptyStateCompact
         assetKey="link"
         assetClassName="w-20 h-20"
diff --git a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
index 9b11d0a5382..753fd66c5fd 100644
--- a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -96,17 +96,17 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
       icon:
         currentUser?.avatar_url && currentUser?.avatar_url.trim() !== "" ? (
           <Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
-            <span className="relative flex size-4 items-center justify-center rounded-full p-4 capitalize text-on-color">
+            <span className="relative flex size-4 items-center justify-center rounded-full p-4 text-on-color capitalize">
               <img
                 src={getFileURL(currentUser?.avatar_url)}
-                className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                 alt={currentUser?.display_name || currentUser?.email}
               />
             </span>
           </Link>
         ) : (
           <Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
-            <span className="relative flex size-4 items-center justify-center rounded-full bg-[#028375] p-4 capitalize text-on-color text-13">
+            <span className="relative flex size-4 items-center justify-center rounded-full bg-[#028375] p-4 text-13 text-on-color capitalize">
               {(currentUser?.email ?? currentUser?.display_name ?? "?")[0]}
             </span>
           </Link>
@@ -136,10 +136,10 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-4">
+      <div className="mb-4 flex items-center justify-between">
         <div className="text-14 font-semibold text-tertiary">{t("home.empty.quickstart_guide")}</div>
         <button
-          className="text-tertiary font-medium text-13 flex items-center gap-1"
+          className="flex items-center gap-1 text-13 font-medium text-tertiary"
           onClick={() => {
             if (!storedValue) return;
             setValue({ ...storedValue, hide: true });
@@ -149,22 +149,22 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
           {t("home.empty.not_right_now")}
         </button>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         {EMPTY_STATE_DATA.map((item) => {
           const isStateComplete = isComplete(item.flag);
           return (
-            <div key={item.id} className="flex flex-col p-4 bg-layer-2 rounded-xl border border-subtle">
+            <div key={item.id} className="flex flex-col rounded-xl border border-subtle bg-layer-2 p-4">
               <div
-                className={cn("grid place-items-center bg-surface-2 rounded-full size-9 mb-3 text-placeholder", {
-                  "text-accent-primary bg-accent-primary/10": !isStateComplete,
+                className={cn("mb-3 grid size-9 place-items-center rounded-full bg-surface-2 text-placeholder", {
+                  "bg-accent-primary/10 text-accent-primary": !isStateComplete,
                 })}
               >
-                <span className="text-24 my-auto">{item.icon}</span>
+                <span className="my-auto text-24">{item.icon}</span>
               </div>
-              <h3 className="text-13 font-medium text-primary mb-2">{t(item.title)}</h3>
-              <p className="text-11 text-tertiary mb-2">{t(item.description)}</p>
+              <h3 className="mb-2 text-13 font-medium text-primary">{t(item.title)}</h3>
+              <p className="mb-2 text-11 text-tertiary">{t(item.description)}</p>
               {isStateComplete ? (
-                <div className="flex items-center gap-2 bg-[#17a34a] rounded-full p-1 w-fit">
+                <div className="flex w-fit items-center gap-2 rounded-full bg-[#17a34a] p-1">
                   <CheckIcon className="size-3 text-accent-primary text-on-color" />
                 </div>
               ) : (
@@ -183,14 +183,14 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
                         [item.flag]: true,
                       });
                     }}
-                    className={cn("text-accent-primary hover:text-accent-secondary text-13 font-medium", {})}
+                    className={cn("text-13 font-medium text-accent-primary hover:text-accent-secondary", {})}
                   >
                     {t(item.cta.text)}
                   </Link>
                 ) : (
                   <button
                     type="button"
-                    className="text-accent-primary hover:text-accent-secondary text-13 font-medium text-left"
+                    className="text-left text-13 font-medium text-accent-primary hover:text-accent-secondary"
                     onClick={item.cta.onClick}
                   >
                     {t(item.cta.text)}
diff --git a/apps/web/core/components/home/widgets/empty-states/recents.tsx b/apps/web/core/components/home/widgets/empty-states/recents.tsx
index eec43c25edc..0b219f60f86 100644
--- a/apps/web/core/components/home/widgets/empty-states/recents.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/recents.tsx
@@ -39,7 +39,7 @@ export function RecentsEmptyState({ type }: { type: string }) {
   const { assetKey, text } = getDisplayContent(type);
 
   return (
-    <div className="flex items-center justify-center py-10 bg-layer-1 w-full rounded-lg">
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
       <EmptyStateCompact assetKey={assetKey} assetClassName="size-20" title={t(text)} />
     </div>
   );
diff --git a/apps/web/core/components/home/widgets/empty-states/stickies.tsx b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
index 5ccf408274d..d8798dc4f52 100644
--- a/apps/web/core/components/home/widgets/empty-states/stickies.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
@@ -10,7 +10,7 @@ import { EmptyStateCompact } from "@plane/propel/empty-state";
 export function StickiesEmptyState() {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center justify-center py-10 bg-layer-1 w-full rounded-lg">
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
       <EmptyStateCompact assetKey="note" assetClassName="size-20" title={t("stickies.empty_state.simple")} />
     </div>
   );
diff --git a/apps/web/core/components/home/widgets/links/action.tsx b/apps/web/core/components/home/widgets/links/action.tsx
index 37a85db4b63..f827495485f 100644
--- a/apps/web/core/components/home/widgets/links/action.tsx
+++ b/apps/web/core/components/home/widgets/links/action.tsx
@@ -16,13 +16,13 @@ export function AddLink(props: TProps) {
 
   return (
     <button
-      className="btn btn-primary flex bg-surface-1 px-4 w-[230px] h-[56px] border-[0.5px] border-subtle rounded-md gap-4"
+      className="btn btn-primary flex h-[56px] w-[230px] gap-4 rounded-md border-[0.5px] border-subtle bg-surface-1 px-4"
       onClick={onClick}
     >
-      <div className="rounded-sm p-2 bg-layer-1/40 w-8 h-8 my-auto">
+      <div className="my-auto h-8 w-8 rounded-sm bg-layer-1/40 p-2">
         <PlusIcon className="h-4 w-4 stroke-2 text-tertiary" />
       </div>
-      <div className="text-13 font-medium my-auto">{t("home.quick_links.add")}</div>
+      <div className="my-auto text-13 font-medium">{t("home.quick_links.add")}</div>
     </button>
   );
 }
diff --git a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
index 04b351b1f9b..a832c1a0ddb 100644
--- a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
@@ -77,9 +77,9 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
           </h3>
           <div className="mt-2 space-y-3">
             <div>
-              <label htmlFor="url" className="mb-2 text-secondary text-14 font-medium">
+              <label htmlFor="url" className="mb-2 text-14 font-medium text-secondary">
                 {t("link.modal.url.text")}
-                <span className="text-10 block">{t("required")}</span>
+                <span className="block text-10">{t("required")}</span>
               </label>
               <Controller
                 control={control}
@@ -103,9 +103,9 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
               {errors.url && <span className="text-11 text-danger-primary">{t("link.modal.url.required")}</span>}
             </div>
             <div>
-              <label htmlFor="title" className="mb-2 text-secondary text-14 font-medium">
+              <label htmlFor="title" className="mb-2 text-14 font-medium text-secondary">
                 {t("link.modal.title.text")}
-                <span className="text-10 block">{t("optional")}</span>
+                <span className="block text-10">{t("optional")}</span>
               </label>
               <Controller
                 control={control}
@@ -126,7 +126,7 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
             </div>
           </div>
         </div>
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
           <Button variant="secondary" size="lg" onClick={onClose}>
             {t("Cancel")}
           </Button>
diff --git a/apps/web/core/components/home/widgets/links/links.tsx b/apps/web/core/components/home/widgets/links/links.tsx
index 874340160ab..595c783b35f 100644
--- a/apps/web/core/components/home/widgets/links/links.tsx
+++ b/apps/web/core/components/home/widgets/links/links.tsx
@@ -43,7 +43,7 @@ export const ProjectLinkList = observer(function ProjectLinkList(props: TProject
         fallback={<></>}
         buttonClassName="bg-surface-2/20"
       >
-        <div className="flex gap-2 mb-2 flex-wrap flex-1">
+        <div className="mb-2 flex flex-1 flex-wrap gap-2">
           {links.map((linkId) => (
             <ProjectLinkDetail key={linkId} linkId={linkId} linkOperations={linkOperations} />
           ))}
diff --git a/apps/web/core/components/home/widgets/links/root.tsx b/apps/web/core/components/home/widgets/links/root.tsx
index ac8fe40c2b5..3eb9b92941f 100644
--- a/apps/web/core/components/home/widgets/links/root.tsx
+++ b/apps/web/core/components/home/widgets/links/root.tsx
@@ -47,16 +47,16 @@ export const DashboardQuickLinks = observer(function DashboardQuickLinks(props:
         preloadedData={linkData}
       />
       <div className="mb-2">
-        <div className="flex items-center justify-between mb-4">
+        <div className="mb-4 flex items-center justify-between">
           <div className="text-14 font-semibold text-tertiary">{t("home.quick_links.title_plural")}</div>
           <button
             onClick={handleCreateLinkModal}
-            className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
           >
-            <PlusIcon className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>
+            <PlusIcon className="my-auto size-4" /> <span>{t("home.quick_links.add")}</span>
           </button>
         </div>
-        <div className="flex flex-wrap w-full">
+        <div className="flex w-full flex-wrap">
           {/* rendering links */}
           <ProjectLinkList workspaceSlug={workspaceSlug} linkOperations={linkOperations} />
         </div>
diff --git a/apps/web/core/components/home/widgets/loaders/home-loader.tsx b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
index 61a57356cf2..571ef807335 100644
--- a/apps/web/core/components/home/widgets/loaders/home-loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -14,10 +14,10 @@ export function HomeLoader() {
       {range(3).map((index) => (
         <div key={index}>
           <div className="mb-2">
-            <div className="text-14 font-semibold text-tertiary mb-4">
+            <div className="mb-4 text-14 font-semibold text-tertiary">
               <Loader.Item height="20px" width="100px" />
             </div>
-            <Loader className="h-[110px] w-full flex items-center justify-center gap-2 text-placeholder rounded-sm">
+            <Loader className="flex h-[110px] w-full items-center justify-center gap-2 rounded-sm text-placeholder">
               <Loader.Item height="100%" width="100%" />
             </Loader>
           </div>
diff --git a/apps/web/core/components/home/widgets/loaders/quick-links.tsx b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
index 3745a003ca2..4a12645af8b 100644
--- a/apps/web/core/components/home/widgets/loaders/quick-links.tsx
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -10,7 +10,7 @@ import { Loader } from "@plane/ui";
 
 export function QuickLinksWidgetLoader() {
   return (
-    <Loader className="bg-surface-1 rounded-xl gap-2 flex flex-wrap">
+    <Loader className="flex flex-wrap gap-2 rounded-xl bg-surface-1">
       {range(4).map((index) => (
         <Loader.Item key={index} height="56px" width="230px" />
       ))}
diff --git a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
index 337e34df979..0b513f117f3 100644
--- a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -10,13 +10,13 @@ import { Loader } from "@plane/ui";
 
 export function RecentActivityWidgetLoader() {
   return (
-    <Loader className="rounded-xl px-2 space-y-6">
+    <Loader className="space-y-6 rounded-xl px-2">
       {range(5).map((index) => (
         <div key={index} className="flex items-start gap-3.5">
           <div className="flex-shrink-0">
             <Loader.Item height="32px" width="32px" />
           </div>
-          <div className="space-y-3 flex-shrink-0 w-full my-auto">
+          <div className="my-auto w-full flex-shrink-0 space-y-3">
             <Loader.Item height="15px" width="70%" />
           </div>
         </div>
diff --git a/apps/web/core/components/home/widgets/manage/index.tsx b/apps/web/core/components/home/widgets/manage/index.tsx
index 912b3ed7c8c..673efc8298e 100644
--- a/apps/web/core/components/home/widgets/manage/index.tsx
+++ b/apps/web/core/components/home/widgets/manage/index.tsx
@@ -26,7 +26,7 @@ export const ManageWidgetsModal = observer(function ManageWidgetsModal(props: TP
   return (
     <ModalCore isOpen={isModalOpen} handleClose={handleOnClose} width={EModalWidth.MD}>
       <div className="p-4">
-        <div className="font-medium text-18"> {t("home.manage_widgets")}</div>
+        <div className="text-18 font-medium"> {t("home.manage_widgets")}</div>
         <WidgetList workspaceSlug={workspaceSlug} />
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx b/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
index 40bbf3723fd..6ff108183c1 100644
--- a/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
@@ -22,7 +22,7 @@ export const WidgetItemDragHandle = observer(function WidgetItemDragHandle(props
 
   return (
     <div
-      className={cn("flex items-center justify-center rounded-sm text-placeholder cursor-grab mr-2", {
+      className={cn("mr-2 flex cursor-grab items-center justify-center rounded-sm text-placeholder", {
         "cursor-grabbing": isDragging,
       })}
     >
diff --git a/apps/web/core/components/home/widgets/manage/widget-item.tsx b/apps/web/core/components/home/widgets/manage/widget-item.tsx
index 320cf29314f..97b5380fffc 100644
--- a/apps/web/core/components/home/widgets/manage/widget-item.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-item.tsx
@@ -77,7 +77,7 @@ export const WidgetItem = observer(function WidgetItem(props: Props) {
             getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
             render: ({ container }) => {
               const root = createRoot(container);
-              root.render(<div className="rounded-sm bg-surface-1 text-13 p-1 pr-2">{widget.key}</div>);
+              root.render(<div className="rounded-sm bg-surface-1 p-1 pr-2 text-13">{widget.key}</div>);
               return () => root.unmount();
             },
             nativeSetDragImage,
@@ -127,7 +127,7 @@ export const WidgetItem = observer(function WidgetItem(props: Props) {
       <div
         ref={elementRef}
         className={cn(
-          "px-2 relative flex items-center py-2 font-medium text-13 group/widget-item rounded-sm hover:bg-layer-1 justify-between",
+          "group/widget-item relative flex items-center justify-between rounded-sm px-2 py-2 text-13 font-medium hover:bg-layer-1",
           {
             "cursor-grabbing bg-layer-1": isDragging,
           }
diff --git a/apps/web/core/components/home/widgets/recents/filters.tsx b/apps/web/core/components/home/widgets/recents/filters.tsx
index d383ec94bc3..f8219992ebc 100644
--- a/apps/web/core/components/home/widgets/recents/filters.tsx
+++ b/apps/web/core/components/home/widgets/recents/filters.tsx
@@ -32,7 +32,7 @@ export const FiltersDropdown = observer(function FiltersDropdown(props: TFilters
           setActiveFilter(filter.name);
         }}
       >
-        <div className="truncate font-medium text-11 capitalize">{t(filter.i18n_key)}</div>
+        <div className="truncate text-11 font-medium capitalize">{t(filter.i18n_key)}</div>
       </CustomMenu.MenuItem>
     ));
   }
@@ -41,12 +41,12 @@ export const FiltersDropdown = observer(function FiltersDropdown(props: TFilters
   return (
     <CustomMenu
       maxHeight={"md"}
-      className={cn("flex justify-center text-11 text-secondary w-fit", className)}
+      className={cn("flex w-fit justify-center text-11 text-secondary", className)}
       placement="bottom-start"
       customButton={
-        <button className="flex hover:bg-layer-transparent-hover px-2 py-1 rounded-sm gap-1 capitalize border border-subtle">
-          <span className="font-medium text-13 my-auto">{t(title || "")}</span>
-          <ChevronDownIcon className={cn("size-3 my-auto text-tertiary hover:text-secondary duration-300")} />
+        <button className="flex gap-1 rounded-sm border border-subtle px-2 py-1 capitalize hover:bg-layer-transparent-hover">
+          <span className="my-auto text-13 font-medium">{t(title || "")}</span>
+          <ChevronDownIcon className={cn("my-auto size-3 text-tertiary duration-300 hover:text-secondary")} />
         </button>
       }
       customButtonClassName="flex justify-center"
diff --git a/apps/web/core/components/home/widgets/recents/index.tsx b/apps/web/core/components/home/widgets/recents/index.tsx
index 988f079a170..5c59c4189a2 100644
--- a/apps/web/core/components/home/widgets/recents/index.tsx
+++ b/apps/web/core/components/home/widgets/recents/index.tsx
@@ -27,7 +27,7 @@ const WIDGET_KEY = EWidgetKeys.RECENT_ACTIVITY;
 const workspaceService = new WorkspaceService();
 const filters: { name: TRecentActivityFilterKeys; icon?: React.ReactNode; i18n_key: string }[] = [
   { name: "all item", i18n_key: "home.recents.filters.all" },
-  { name: "issue", icon: <WorkItemsIcon className="w-4 h-4" />, i18n_key: "home.recents.filters.issues" },
+  { name: "issue", icon: <WorkItemsIcon className="h-4 w-4" />, i18n_key: "home.recents.filters.issues" },
   { name: "page", icon: <PageIcon height={16} width={16} />, i18n_key: "home.recents.filters.pages" },
   { name: "project", icon: <ProjectIcon height={16} width={16} />, i18n_key: "home.recents.filters.projects" },
 ];
@@ -78,7 +78,7 @@ export const RecentActivityWidget = observer(function RecentActivityWidget(props
   if (!isLoading && recents?.length === 0)
     return (
       <div ref={ref} className="max-h-[500px] overflow-y-scroll">
-        <div className="flex items-center justify-between mb-4">
+        <div className="mb-4 flex items-center justify-between">
           <div className="text-14 font-semibold text-tertiary">{t("home.recents.title")}</div>
           {showFilterSelect && <FiltersDropdown filters={filters} activeFilter={filter} setActiveFilter={setFilter} />}
         </div>
@@ -95,11 +95,11 @@ export const RecentActivityWidget = observer(function RecentActivityWidget(props
       fallback={<></>}
       buttonClassName="bg-surface-2/20"
     >
-      <div className="flex items-center justify-between mb-2">
+      <div className="mb-2 flex items-center justify-between">
         <div className="text-14 font-semibold text-tertiary">{t("home.recents.title")}</div>
         {showFilterSelect && <FiltersDropdown filters={filters} activeFilter={filter} setActiveFilter={setFilter} />}
       </div>
-      <div className="min-h-[250px] flex flex-col">
+      <div className="flex min-h-[250px] flex-col">
         {isLoading && <WidgetLoader widgetKey={WIDGET_KEY} />}
         {!isLoading &&
           recents
diff --git a/apps/web/core/components/home/widgets/recents/issue.tsx b/apps/web/core/components/home/widgets/recents/issue.tsx
index 13811be9a34..52d234a87d3 100644
--- a/apps/web/core/components/home/widgets/recents/issue.tsx
+++ b/apps/web/core/components/home/widgets/recents/issue.tsx
@@ -71,7 +71,7 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
       itemLink={workItemLink}
       title={issueDetails?.name}
       prependTitleElement={
-        <div className="flex-shrink-0 flex items-center gap-2">
+        <div className="flex flex-shrink-0 items-center gap-2">
           {issueDetails.type ? (
             <IssueIdentifier
               size="lg"
@@ -82,11 +82,11 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
               variant="tertiary"
             />
           ) : (
-            <div className="flex gap-2 items-center justify-center">
-              <div className="flex-shrink-0 grid place-items-center rounded-sm bg-layer-2 size-8">
+            <div className="flex items-center justify-center gap-2">
+              <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
                 <WorkItemsIcon className="size-4 text-tertiary" />
               </div>
-              <div className="font-medium text-placeholder text-13 whitespace-nowrap">
+              <div className="text-13 font-medium whitespace-nowrap text-placeholder">
                 {issueDetails?.project_identifier}-{issueDetails?.sequence_id}
               </div>
             </div>
@@ -94,7 +94,7 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-11 text-placeholder">
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -105,7 +105,7 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
               <StateGroupIcon
                 stateGroup={state?.group ?? "backlog"}
                 color={state?.color}
-                className="h-4 w-4 my-auto"
+                className="my-auto h-4 w-4"
                 percentage={state?.order}
               />
             </div>
@@ -136,7 +136,7 @@ export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
       }
       parentRef={ref}
       disableLink={false}
-      className="my-auto !px-2 border-none py-3"
+      className="my-auto border-none !px-2 py-3"
       itemClassName="my-auto"
       onItemClick={handlePeekOverview}
       preventDefaultProgress
diff --git a/apps/web/core/components/home/widgets/recents/page.tsx b/apps/web/core/components/home/widgets/recents/page.tsx
index 48a7516973e..ae14438e4f1 100644
--- a/apps/web/core/components/home/widgets/recents/page.tsx
+++ b/apps/web/core/components/home/widgets/recents/page.tsx
@@ -43,8 +43,8 @@ export function RecentPage(props: BlockProps) {
       itemLink={pageLink}
       title={getPageName(pageDetails?.name)}
       prependTitleElement={
-        <div className="flex-shrink-0 flex items-center gap-2">
-          <div className="flex-shrink-0 grid place-items-center rounded-sm bg-layer-2 size-8">
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
             {pageDetails?.logo_props?.in_use ? (
               <Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
             ) : (
@@ -52,14 +52,14 @@ export function RecentPage(props: BlockProps) {
             )}
           </div>
           {pageDetails?.project_identifier && (
-            <div className="font-medium text-placeholder text-13 whitespace-nowrap">
+            <div className="text-13 font-medium whitespace-nowrap text-placeholder">
               {pageDetails?.project_identifier}
             </div>
           )}
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-11 text-placeholder">
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -70,7 +70,7 @@ export function RecentPage(props: BlockProps) {
       }
       parentRef={ref}
       disableLink={false}
-      className="my-auto !px-2 border-none py-3"
+      className="my-auto border-none !px-2 py-3"
       itemClassName="my-auto bg-layer-transparent"
       onItemClick={(e) => {
         e.preventDefault();
diff --git a/apps/web/core/components/home/widgets/recents/project.tsx b/apps/web/core/components/home/widgets/recents/project.tsx
index af00d4c11af..58395013832 100644
--- a/apps/web/core/components/home/widgets/recents/project.tsx
+++ b/apps/web/core/components/home/widgets/recents/project.tsx
@@ -36,15 +36,15 @@ export function RecentProject(props: BlockProps) {
       itemLink={projectLink}
       title={projectDetails?.name}
       prependTitleElement={
-        <div className="flex-shrink-0 flex items-center gap-2">
-          <div className="flex-shrink-0 grid place-items-center rounded-sm bg-layer-2 size-8">
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
             <Logo logo={projectDetails?.logo_props} size={16} />
           </div>
-          <div className="font-medium text-placeholder text-13 whitespace-nowrap">{projectDetails?.identifier}</div>
+          <div className="text-13 font-medium whitespace-nowrap text-placeholder">{projectDetails?.identifier}</div>
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-11 text-placeholder">
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -73,7 +73,7 @@ export function RecentProject(props: BlockProps) {
       }
       parentRef={ref}
       disableLink={false}
-      className="my-auto !px-2 border-none py-3"
+      className="my-auto border-none !px-2 py-3"
       itemClassName="my-auto"
       onItemClick={(e) => {
         e.preventDefault();
diff --git a/apps/web/core/components/icons/locked-component.tsx b/apps/web/core/components/icons/locked-component.tsx
index d98984f19cc..5d2c4d04acc 100644
--- a/apps/web/core/components/icons/locked-component.tsx
+++ b/apps/web/core/components/icons/locked-component.tsx
@@ -10,7 +10,7 @@ import { Tooltip } from "@plane/propel/tooltip";
 export function LockedComponent(props: { toolTipContent?: string }) {
   const { toolTipContent } = props;
   const lockedComponent = (
-    <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
+    <div className="flex h-7 flex-shrink-0 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
       <LockIcon className="h-3 w-3" />
       <span>Locked</span>
     </div>
diff --git a/apps/web/core/components/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
index f89e4605084..739b201a083 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -276,7 +276,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
         />
       </>
 
-      <Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-surface-1 z-15 border-b border-subtle">
+      <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 border-b border-subtle bg-surface-1 lg:flex">
         <div className="flex items-center gap-4">
           {isNotificationEmbed && (
             <button onClick={embedRemoveCurrentNotification}>
@@ -284,12 +284,12 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
             </button>
           )}
           {issue?.project_id && issue.sequence_id && (
-            <h3 className="text-14 font-medium text-tertiary flex-shrink-0">
+            <h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
               {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
             </h3>
           )}
           <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
-          <div className="flex items-center justify-end w-full">
+          <div className="flex w-full items-center justify-end">
             <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
         </div>
@@ -319,8 +319,8 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
               <div className="shrink-0">
                 <Button
                   variant="secondary"
-                  prependIcon={<CircleCheck className="w-3 h-3" />}
-                  className="text-on-color border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary"
+                  prependIcon={<CircleCheck className="h-3 w-3" />}
+                  className="border border-success-strong bg-success-primary text-on-color hover:bg-success-primary focus:bg-success-primary focus:text-success-primary"
                   onClick={() =>
                     handleActionWithPermission(
                       isProjectAdmin,
@@ -338,8 +338,8 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
               <div className="shrink-0">
                 <Button
                   variant="secondary"
-                  prependIcon={<CircleX className="w-3 h-3" />}
-                  className="text-on-color border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover"
+                  prependIcon={<CircleX className="h-3 w-3" />}
+                  className="border border-danger-strong bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary focus:text-danger-primary"
                   onClick={() =>
                     handleActionWithPermission(
                       isProjectAdmin,
diff --git a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index 67f4f726594..0d9f98e9c9d 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -93,14 +93,14 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
     <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
       {isNotificationEmbed && (
         <button onClick={embedRemoveCurrentNotification}>
-          <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary mr-2" />
+          <MoveRight className="mr-2 h-4 w-4 text-tertiary hover:text-secondary" />
         </button>
       )}
       <PanelLeft
         onClick={() => setIsMobileSidebar(!isMobileSidebar)}
-        className={cn("w-4 h-4 flex-shrink-0 mr-2 my-auto", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
+        className={cn("my-auto mr-2 h-4 w-4 flex-shrink-0", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
       />
-      <div className="flex items-center gap-2 w-full bg-surface-1 z-[15]">
+      <div className="z-[15] flex w-full items-center gap-2 bg-surface-1">
         <div className="flex items-center gap-x-2">
           <button
             type="button"
@@ -119,7 +119,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
         </div>
         <div className="flex items-center gap-4">
           <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
-          <div className="flex items-center justify-end w-full">
+          <div className="flex w-full items-center justify-end">
             <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
         </div>
diff --git a/apps/web/core/components/inbox/content/issue-properties.tsx b/apps/web/core/components/inbox/content/issue-properties.tsx
index 91916518f00..f355e39e36c 100644
--- a/apps/web/core/components/inbox/content/issue-properties.tsx
+++ b/apps/web/core/components/inbox/content/issue-properties.tsx
@@ -63,7 +63,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
   return (
     <div className="flex w-full flex-col divide-y-2 divide-subtle-1">
       <div className="w-full overflow-y-auto">
-        <h5 className="text-body-sm-medium mb-2">Properties</h5>
+        <h5 className="mb-2 text-body-sm-medium">Properties</h5>
         <div className={`divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* Intake State */}
@@ -79,7 +79,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                   projectId={projectId?.toString() ?? ""}
                   disabled
                   buttonVariant="transparent-with-text"
-                  className="w-3/5 flex-grow group"
+                  className="group w-3/5 flex-grow"
                   buttonContainerClassName="w-full text-left"
                   buttonClassName="text-13"
                   dropdownArrow
@@ -105,7 +105,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                 buttonVariant={
                   (issue?.assignee_ids || [])?.length > 0 ? "transparent-without-text" : "transparent-with-text"
                 }
-                className="w-3/5 flex-grow group"
+                className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={`text-13 justify-between ${
                   (issue?.assignee_ids || [])?.length > 0 ? "" : "text-placeholder"
@@ -135,7 +135,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
             </div>
           </div>
         </div>
-        <div className={`divide-y-2 divide-subtle-1 mt-3 ${!isEditable ? "opacity-60" : ""}`}>
+        <div className={`mt-3 divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* Due Date */}
             <div className="flex h-8 items-center gap-2">
@@ -168,7 +168,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                 <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Labels</span>
               </div>
-              <div className="w-3/5 flex-grow min-h-8 h-full pt-1">
+              <div className="h-full min-h-8 w-3/5 flex-grow pt-1">
                 {issue?.id && (
                   <IssueLabel
                     workspaceSlug={workspaceSlug}
@@ -200,7 +200,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
                   target="_self"
                 >
                   <Tooltip tooltipContent={`${duplicateIssueDetails?.name}`}>
-                    <span className="flex items-center gap-1 cursor-pointer text-11 rounded-sm px-1.5 py-1 pb-0.5 bg-layer-1 text-secondary">
+                    <span className="flex cursor-pointer items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 pb-0.5 text-11 text-secondary">
                       {`${currentProjectDetails?.identifier}-${duplicateIssueDetails?.sequence_id}`}
                     </span>
                   </Tooltip>
diff --git a/apps/web/core/components/inbox/content/root.tsx b/apps/web/core/components/inbox/content/root.tsx
index 3de80d4c416..995d83b072d 100644
--- a/apps/web/core/components/inbox/content/root.tsx
+++ b/apps/web/core/components/inbox/content/root.tsx
@@ -86,8 +86,8 @@ export const InboxContentRoot = observer(function InboxContentRoot(props: TInbox
 
   return (
     <>
-      <div className="w-full h-full overflow-hidden relative flex flex-col">
-        <div className="flex-shrink-0 min-h-[52px] z-[11]">
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <div className="z-[11] min-h-[52px] flex-shrink-0">
           <InboxIssueActionsHeader
             setIsMobileSidebar={setIsMobileSidebar}
             isMobileSidebar={isMobileSidebar}
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
index d076829b168..5e13689475f 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
@@ -53,22 +53,22 @@ export const InboxIssueAppliedFiltersDate = observer(function InboxIssueAppliedF
         if (!optionDetail) return <></>;
         return (
           <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
-            <div className="text-11 truncate">{optionDetail?.name}</div>
+            <div className="truncate text-11">{optionDetail?.name}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(optionDetail?.value))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
index 8231a001143..32b6f0f20e0 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
@@ -38,25 +38,25 @@ export const InboxIssueAppliedFiltersLabel = observer(function InboxIssueApplied
         if (!optionDetail) return <></>;
         return (
           <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
               <LabelIcons color={optionDetail.color} />
             </div>
-            <div className="text-11 truncate">{optionDetail?.name}</div>
+            <div className="truncate text-11">{optionDetail?.name}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters("labels", handleFilterValue(value))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
index 335a69def50..724260b2426 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
@@ -48,7 +48,7 @@ export const InboxIssueAppliedFiltersMember = observer(function InboxIssueApplie
         if (!optionDetail) return <></>;
         return (
           <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
-            <div className="flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+            <div className="relative flex flex-shrink-0 items-center justify-center overflow-hidden">
               <Avatar
                 name={optionDetail.display_name}
                 src={getFileURL(optionDetail.avatar_url)}
@@ -56,22 +56,22 @@ export const InboxIssueAppliedFiltersMember = observer(function InboxIssueApplie
                 size="sm"
               />
             </div>
-            <div className="text-11 truncate">{optionDetail?.display_name}</div>
+            <div className="truncate text-11">{optionDetail?.display_name}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(value))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
index f910f08a95c..a588b37df6c 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
@@ -37,25 +37,25 @@ export const InboxIssueAppliedFiltersPriority = observer(function InboxIssueAppl
         if (!optionDetail) return <></>;
         return (
           <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
               <PriorityIcon priority={optionDetail.key} className="h-3 w-3" />
             </div>
-            <div className="text-11 truncate">{optionDetail?.title}</div>
+            <div className="truncate text-11">{optionDetail?.title}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters("priority", handleFilterValue(optionDetail?.key))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
index a7b8ae0b2ff..4de55f4ecff 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
@@ -35,25 +35,25 @@ export const InboxIssueAppliedFiltersState = observer(function InboxIssueApplied
         if (!optionDetail) return <></>;
         return (
           <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
               <StateGroupIcon color={optionDetail.color} stateGroup={optionDetail.group} size={EIconSize.SM} />
             </div>
-            <div className="text-11 truncate">{optionDetail?.name}</div>
+            <div className="truncate text-11">{optionDetail?.name}</div>
             <div
-              className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
               onClick={() => handleInboxIssueFilters("state", handleFilterValue(optionDetail?.id))}
             >
-              <CloseIcon className={`w-3 h-3`} />
+              <CloseIcon className={`h-3 w-3`} />
             </div>
           </div>
         );
       })}
 
       <div
-        className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
         onClick={clearFilter}
       >
-        <CloseIcon className={`w-3 h-3`} />
+        <CloseIcon className={`h-3 w-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
index 889b0b62b8a..01543e59ab3 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
@@ -36,16 +36,16 @@ export const InboxIssueAppliedFiltersStatus = observer(function InboxIssueApplie
         if (!optionDetail) return <></>;
         return (
           <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
               <InboxStatusIcon type={optionDetail?.status} />
             </div>
-            <div className="text-11 truncate">{t(optionDetail?.i18n_title)}</div>
+            <div className="truncate text-11">{t(optionDetail?.i18n_title)}</div>
             {handleFilterValue(optionDetail?.status).length >= 1 && (
               <div
-                className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
+                className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
                 onClick={() => handleInboxIssueFilters("status", handleFilterValue(optionDetail?.status))}
               >
-                <CloseIcon className={`w-3 h-3`} />
+                <CloseIcon className={`h-3 w-3`} />
               </div>
             )}
           </div>
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/date.tsx b/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
index e817c06ab42..84ae0ffdef0 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
@@ -94,7 +94,7 @@ export const FilterDate = observer(function FilterDate(props: Props) {
               />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx b/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
index eb1fe2a615b..2e4e57ff1a7 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
@@ -53,7 +53,7 @@ export const InboxIssueFilterSelection = observer(function InboxIssueFilterSelec
         </div>
       </div>
 
-      <div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         {/* status */}
         <div className="py-2">
           <FilterStatus searchQuery={filtersSearchQuery} />
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
index 5fb9fdf1d51..e45dae656b6 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -79,7 +79,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
index 505b220b362..c6ff9a57198 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -108,7 +108,7 @@ export const FilterMember = observer(function FilterMember(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
index 8036dddbc73..a88d10a3ca1 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
@@ -56,7 +56,7 @@ export const FilterPriority = observer(function FilterPriority(props: Props) {
               />
             ))
           ) : (
-            <p className="text-11 italic text-placeholder">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
index 936c25757db..08d125f645e 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -84,7 +84,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/status.tsx b/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
index e042fc9fe7e..3f1955f4abe 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
@@ -67,7 +67,7 @@ export const FilterStatus = observer(function FilterStatus(props: Props) {
               />
             ))
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/root.tsx b/apps/web/core/components/inbox/inbox-filter/root.tsx
index b9b18071784..848e2f4d290 100644
--- a/apps/web/core/components/inbox/inbox-filter/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/root.tsx
@@ -18,11 +18,11 @@ import useSize from "@/hooks/use-window-size";
 import { InboxIssueFilterSelection } from "./filters/filter-selection";
 import { InboxIssueOrderByDropdown } from "./sorting/order-by";
 
-const smallButton = <ListFilter className="size-3 " />;
+const smallButton = <ListFilter className="size-3" />;
 
 const largeButton = (
   <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
-    <ListFilter className="size-3 " />
+    <ListFilter className="size-3" />
     <span>Filters</span>
     <ChevronDownIcon className="size-3" strokeWidth={2} />
   </div>
diff --git a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
index 60e7c72f1bb..599a1ce9cc9 100644
--- a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -29,16 +29,16 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
     INBOX_ISSUE_ORDER_BY_OPTIONS.find((option) => inboxSorting?.order_by?.includes(option.key)) || undefined;
   const smallButton =
     inboxSorting?.sort_by === "asc" ? (
-      <ArrowUpWideNarrow className="size-3 " />
+      <ArrowUpWideNarrow className="size-3" />
     ) : (
-      <ArrowDownWideNarrow className="size-3 " />
+      <ArrowDownWideNarrow className="size-3" />
     );
   const largeButton = (
     <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
       {inboxSorting?.sort_by === "asc" ? (
-        <ArrowUpWideNarrow className="size-3 " />
+        <ArrowUpWideNarrow className="size-3" />
       ) : (
-        <ArrowDownWideNarrow className="size-3 " />
+        <ArrowDownWideNarrow className="size-3" />
       )}
       {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
       <ChevronDownIcon className="size-3" strokeWidth={2} />
diff --git a/apps/web/core/components/inbox/inbox-issue-status.tsx b/apps/web/core/components/inbox/inbox-issue-status.tsx
index 57b05b6adfd..972d83e1455 100644
--- a/apps/web/core/components/inbox/inbox-issue-status.tsx
+++ b/apps/web/core/components/inbox/inbox-issue-status.tsx
@@ -39,14 +39,14 @@ export const InboxIssueStatus = observer(function InboxIssueStatus(props: Props)
   return (
     <div
       className={cn(
-        `relative flex flex-col gap-1 p-1.5 py-0.5 rounded-sm ${statusIcon.textColor(
+        `relative flex flex-col gap-1 rounded-sm p-1.5 py-0.5 ${statusIcon.textColor(
           isSnoozedDatePassed
         )} ${statusIcon.bgColor(isSnoozedDatePassed)}`
       )}
     >
       <div className={`flex items-center gap-1`}>
         <InboxStatusIcon type={inboxIssue?.status} size={iconSize} className="flex-shrink-0" renderColor={false} />
-        <div className="font-medium text-11 whitespace-nowrap">
+        <div className="text-11 font-medium whitespace-nowrap">
           {inboxIssue?.status === 0 && inboxIssue?.snoozed_till ? description : t(inboxIssueStatusDetail.i18n_title)}
         </div>
       </div>
diff --git a/apps/web/core/components/inbox/inbox-status-icon.tsx b/apps/web/core/components/inbox/inbox-status-icon.tsx
index ed92f91dc63..86bcf791288 100644
--- a/apps/web/core/components/inbox/inbox-status-icon.tsx
+++ b/apps/web/core/components/inbox/inbox-status-icon.tsx
@@ -51,5 +51,5 @@ export function InboxStatusIcon({
   if (type === undefined) return null;
   const Icon = ICON_PROPERTIES[type];
   if (!Icon) return null;
-  return <Icon.icon size={size} className={cn(`w-3 h-3 ${renderColor && Icon?.textColor(false)}`, className)} />;
+  return <Icon.icon size={size} className={cn(`h-3 w-3 ${renderColor && Icon?.textColor(false)}`, className)} />;
 }
diff --git a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
index ad02e18cd0a..e31e8da1270 100644
--- a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
@@ -197,10 +197,10 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
 
   if (!workspaceSlug || !projectId || !workspaceId) return <></>;
   return (
-    <div className="flex gap-2 bg-transparent w-full">
-      <div className="rounded-lg w-full">
-        <form ref={formRef} onSubmit={handleFormSubmit} className="flex flex-col w-full">
-          <div className="space-y-5 p-5 rounded-t-lg bg-surface-1">
+    <div className="flex w-full gap-2 bg-transparent">
+      <div className="w-full rounded-lg">
+        <form ref={formRef} onSubmit={handleFormSubmit} className="flex w-full flex-col">
+          <div className="space-y-5 rounded-t-lg bg-surface-1 p-5">
             <div className="flex items-center justify-between gap-2">
               <h3 className="text-18 font-medium text-secondary">{t("inbox_issue.modal.title")}</h3>
               {duplicateIssues?.length > 0 && (
@@ -232,9 +232,9 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
               <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
             </div>
           </div>
-          <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-subtle rounded-b-lg bg-surface-1">
+          <div className="flex items-center justify-between gap-2 rounded-b-lg border-t-[0.5px] border-subtle bg-surface-1 px-5 py-4">
             <div
-              className="inline-flex items-center gap-1.5 cursor-pointer"
+              className="inline-flex cursor-pointer items-center gap-1.5"
               onClick={() => setCreateMore((prevData) => !prevData)}
               role="button"
               tabIndex={getIndex("create_more")}
@@ -280,7 +280,7 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
       {shouldRenderDuplicateModal && (
         <div
           ref={modalContainerRef}
-          className="relative flex flex-col gap-2.5 px-3 py-4 rounded-lg shadow-xl bg-pi-50"
+          className="shadow-xl bg-pi-50 relative flex flex-col gap-2.5 rounded-lg px-3 py-4"
           style={{ maxHeight: formRef?.current?.offsetHeight ? `${formRef.current.offsetHeight}px` : "436px" }}
         >
           <DuplicateModalRoot
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
index f0f1e7bb0fb..b64a64b0f16 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
@@ -55,7 +55,7 @@ export const InboxIssueProperties = observer(function InboxIssueProperties(props
   maxDate?.setDate(maxDate.getDate());
 
   return (
-    <div className="relative flex flex-wrap gap-2 items-center">
+    <div className="relative flex flex-wrap items-center gap-2">
       {/* intake state */}
       <div className="h-7">
         <IntakeStateDropdown
@@ -180,7 +180,7 @@ export const InboxIssueProperties = observer(function InboxIssueProperties(props
               customButton={
                 <button
                   type="button"
-                  className="flex cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
+                  className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
                 >
                   <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
                   <span className="whitespace-nowrap">
@@ -213,7 +213,7 @@ export const InboxIssueProperties = observer(function InboxIssueProperties(props
           ) : (
             <button
               type="button"
-              className="flex cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
+              className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
               onClick={() => setParentIssueModalOpen(true)}
             >
               <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
diff --git a/apps/web/core/components/inbox/modals/create-modal/modal.tsx b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
index 267424f5d8f..43f01251d86 100644
--- a/apps/web/core/components/inbox/modals/create-modal/modal.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
@@ -39,7 +39,7 @@ export function InboxIssueCreateModalRoot(props: TInboxIssueCreateModalRoot) {
       isOpen={modalState}
       position={EModalPosition.TOP}
       width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
-      className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"
+      className="rounded-lg !bg-transparent shadow-none transition-[width] ease-linear"
     >
       <InboxIssueCreateRoot
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/inbox/modals/decline-issue-modal.tsx b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
index 10c516c831f..7fe5a07affd 100644
--- a/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
@@ -51,7 +51,7 @@ export function DeclineIssueModal(props: Props) {
       content={
         <>
           Are you sure you want to decline work item{" "}
-          <span className="break-words font-medium text-primary">
+          <span className="font-medium break-words text-primary">
             {projectDetails?.identifier}-{data?.sequence_id}
           </span>
           {""}? This action cannot be undone.
diff --git a/apps/web/core/components/inbox/modals/delete-issue-modal.tsx b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
index 88089cecbdb..c31bf98003e 100644
--- a/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
@@ -78,7 +78,7 @@ export const DeleteInboxIssueModal = observer(function DeleteInboxIssueModal({
       content={
         <>
           Are you sure you want to delete work item{" "}
-          <span className="break-words font-medium text-primary">
+          <span className="font-medium break-words text-primary">
             {projectDetails?.identifier}-{data?.sequence_id}
           </span>
           {""}? The work item will only be deleted from the intake and this action cannot be undone.
diff --git a/apps/web/core/components/inbox/modals/select-duplicate.tsx b/apps/web/core/components/inbox/modals/select-duplicate.tsx
index 3d3b9a6e100..7b6911830f1 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -87,7 +87,7 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
   const issueList =
     filteredIssues.length > 0 ? (
       <li className="p-2">
-        {query === "" && <h2 className="mb-2 mt-4 px-3 text-11 font-semibold text-primary">Select work item</h2>}
+        {query === "" && <h2 className="mt-4 mb-2 px-3 text-11 font-semibold text-primary">Select work item</h2>}
         <ul className="text-13 text-primary">
           {filteredIssues.map((issue) => {
             const stateColor = issue.state__color || "";
@@ -98,7 +98,7 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
                 as="div"
                 value={issue.id}
                 className={({ active, selected }) =>
-                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-secondary ${
+                  `flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-secondary select-none ${
                     active || selected ? "bg-layer-1 text-primary" : ""
                   } `
                 }
@@ -135,12 +135,12 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
       <Combobox value={value} onChange={handleSubmit}>
         <div className="relative m-1">
           <SearchIcon
-            className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
             aria-hidden="true"
           />
           <input
             type="text"
-            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-primary outline-none focus:ring-0 sm:text-13"
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none focus:ring-0 sm:text-13"
             placeholder="Search..."
             onChange={(e) => setQuery(e.target.value)}
           />
diff --git a/apps/web/core/components/inbox/root.tsx b/apps/web/core/components/inbox/root.tsx
index 18b6c9a5a55..cf2d8780487 100644
--- a/apps/web/core/components/inbox/root.tsx
+++ b/apps/web/core/components/inbox/root.tsx
@@ -60,7 +60,7 @@ export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssu
   // loader
   if (loader === "init-loading")
     return (
-      <div className="relative flex w-full h-full flex-col">
+      <div className="relative flex h-full w-full flex-col">
         <InboxLayoutLoader />
       </div>
     );
@@ -68,7 +68,7 @@ export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssu
   // error
   if (error && error?.status === "init-error")
     return (
-      <div className="relative w-full h-full flex flex-col gap-3 justify-center items-center">
+      <div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
         <IntakeIcon className="size-[60px]" strokeWidth={1.5} />
         <div className="text-secondary">{error?.message}</div>
       </div>
@@ -77,17 +77,17 @@ export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssu
   return (
     <>
       {!inboxIssueId && (
-        <div className="flex lg:hidden items-center px-4 w-full h-12 border-b border-subtle">
+        <div className="flex h-12 w-full items-center border-b border-subtle px-4 lg:hidden">
           <PanelLeft
             onClick={() => setIsMobileSidebar(!isMobileSidebar)}
-            className={cn("w-4 h-4 ", isMobileSidebar ? "text-accent-primary" : " text-secondary")}
+            className={cn("h-4 w-4", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
           />
         </div>
       )}
-      <div className="w-full h-full flex overflow-hidden bg-surface-1">
+      <div className="flex h-full w-full overflow-hidden bg-surface-1">
         <div
           className={cn(
-            "absolute z-10 top-[50px] lg:!top-0 lg:!relative bg-surface-1 flex-shrink-0 w-full lg:w-2/6 bottom-0 transition-all",
+            "absolute top-[50px] bottom-0 z-10 w-full flex-shrink-0 bg-surface-1 transition-all lg:!relative lg:!top-0 lg:w-2/6",
             isMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0"
           )}
         >
diff --git a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
index 3f7016cd2d6..216f7936255 100644
--- a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
+++ b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
@@ -65,8 +65,8 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
       >
         <Row
           className={cn(
-            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-subtle-1 py-4 hover:bg-accent-primary/5 cursor-pointer transition-all`,
-            { "border-accent-strong border": selectedInboxIssueId === issue.id }
+            `relative flex cursor-pointer flex-col gap-2 border border-t-transparent border-r-transparent border-b-subtle-1 border-l-transparent py-4 transition-all hover:bg-accent-primary/5`,
+            { "border border-accent-strong": selectedInboxIssueId === issue.id }
           )}
         >
           <div className="space-y-1">
@@ -79,7 +79,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
                 {inboxIssue.status !== -2 && <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />}
               </div>
             </div>
-            <h3 className="truncate w-full text-13">{issue.name}</h3>
+            <h3 className="w-full truncate text-13">{issue.name}</h3>
           </div>
 
           <div className="flex items-center justify-between">
@@ -92,18 +92,18 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
                 <div className="text-11 text-secondary">{renderFormattedDate(issue.created_at ?? "")}</div>
               </Tooltip>
 
-              <div className="border-2 rounded-full border-strong-1" />
+              <div className="rounded-full border-2 border-strong-1" />
 
               {issue.priority && (
                 <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
-                  <PriorityIcon priority={issue.priority} withContainer className="w-3 h-3" />
+                  <PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
                 </Tooltip>
               )}
 
               {issue.label_ids && issue.label_ids.length > 3 ? (
-                <div className="relative !h-[17.5px] flex items-center gap-1 rounded-sm border border-strong px-1 text-11">
-                  <span className="h-2 w-2 rounded-full bg-orange-400" />
-                  <span className="normal-case max-w-28 truncate">{`${issue.label_ids.length} labels`}</span>
+                <div className="relative flex !h-[17.5px] items-center gap-1 rounded-sm border border-strong px-1 text-11">
+                  <span className="bg-orange-400 h-2 w-2 rounded-full" />
+                  <span className="max-w-28 truncate normal-case">{`${issue.label_ids.length} labels`}</span>
                 </div>
               ) : (
                 <>
@@ -113,7 +113,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
                     return (
                       <div
                         key={labelId}
-                        className="relative !h-[17.5px] flex items-center gap-1 rounded-sm border border-strong px-1 text-11"
+                        className="relative flex !h-[17.5px] items-center gap-1 rounded-sm border border-strong px-1 text-11"
                       >
                         <span
                           className="h-2 w-2 rounded-full"
@@ -121,7 +121,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
                             backgroundColor: labelDetails.color,
                           }}
                         />
-                        <span className="normal-case max-w-28 truncate">{labelDetails.name}</span>
+                        <span className="max-w-28 truncate normal-case">{labelDetails.name}</span>
                       </div>
                     );
                   })}
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
index 064604ffd41..e378c766d56 100644
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -83,14 +83,14 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
   }, [currentTab, filteredInboxIssueIds, inboxIssueId, projectId, router, workspaceSlug]);
 
   return (
-    <div className="bg-surface-1 flex-shrink-0 w-full h-full border-r border-strong ">
-      <div className="relative w-full h-full flex flex-col overflow-hidden">
+    <div className="h-full w-full flex-shrink-0 border-r border-strong bg-surface-1">
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
         <Header variant={EHeaderVariant.SECONDARY}>
           {tabNavigationOptions.map((option) => (
             <div
               key={option?.key}
               className={cn(
-                `text-13 relative flex items-center gap-1 h-full px-3 cursor-pointer transition-all font-medium`,
+                `relative flex h-full cursor-pointer items-center gap-1 px-3 text-13 font-medium transition-all`,
                 currentTab === option?.key ? `text-accent-primary` : `hover:text-secondary`
               )}
               onClick={() => {
@@ -102,13 +102,13 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
             >
               <div>{t(option?.i18n_label)}</div>
               {option?.key === "open" && currentTab === option?.key && (
-                <div className="rounded-full p-1.5 py-0.5 bg-accent-primary/20 text-accent-primary text-11 font-semibold">
+                <div className="rounded-full bg-accent-primary/20 p-1.5 py-0.5 text-11 font-semibold text-accent-primary">
                   {inboxIssuePaginationInfo?.total_results || 0}
                 </div>
               )}
               <div
                 className={cn(
-                  `border absolute bottom-0 right-0 left-0 rounded-t-md`,
+                  `absolute right-0 bottom-0 left-0 rounded-t-md border`,
                   currentTab === option?.key ? `border-accent-strong` : `border-transparent`
                 )}
               />
@@ -124,7 +124,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
           <InboxSidebarLoader />
         ) : (
           <div
-            className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md"
+            className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto"
             ref={containerRef}
           >
             {filteredInboxIssueIds.length > 0 ? (
@@ -136,7 +136,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
                 inboxIssueIds={filteredInboxIssueIds}
               />
             ) : (
-              <div className="flex items-center justify-center h-full w-full">
+              <div className="flex h-full w-full items-center justify-center">
                 {getAppliedFiltersCount > 0 ? (
                   <EmptyStateDetailed
                     assetKey="search"
@@ -174,7 +174,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
             )}
             <div ref={setElementRef}>
               {inboxIssuePaginationInfo?.next_page_results && (
-                <Loader className="mx-auto w-full space-y-4 py-4 px-2">
+                <Loader className="mx-auto w-full space-y-4 px-2 py-4">
                   <Loader.Item height="64px" width="w-100" />
                   <Loader.Item height="64px" width="w-100" />
                 </Loader>
diff --git a/apps/web/core/components/instance/maintenance-view.tsx b/apps/web/core/components/instance/maintenance-view.tsx
index 1e6ff3a5f2b..48ed52f3426 100644
--- a/apps/web/core/components/instance/maintenance-view.tsx
+++ b/apps/web/core/components/instance/maintenance-view.tsx
@@ -21,17 +21,17 @@ export function MaintenanceView() {
   const maintenanceModeImage = resolvedTheme === "dark" ? maintenanceModeDarkModeImage : maintenanceModeLightModeImage;
   return (
     <DefaultLayout>
-      <div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-surface-1 text-center">
+      <div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 text-center">
         <div className="relative w-full">
           <img
             src={maintenanceModeImage}
             height="176"
             width="288"
             alt="ProjectSettingImg"
-            className="w-full h-full object-fill object-center"
+            className="h-full w-full object-fill object-center"
           />
         </div>
-        <div className="w-full relative flex flex-col gap-4 mt-4">
+        <div className="relative mt-4 flex w-full flex-col gap-4">
           <MaintenanceMessage />
         </div>
       </div>
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
index 98bb8b8af59..5625a77e53f 100644
--- a/apps/web/core/components/instance/not-ready-view.tsx
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -21,8 +21,8 @@ export function InstanceNotReady() {
 
   return (
     <div className="relative">
-      <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
-        <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+      <div className="flex h-screen w-full flex-col overflow-hidden overflow-y-auto">
+        <div className="z-50 container mx-auto flex h-[110px] flex-shrink-0 items-center justify-between gap-5 px-5 lg:px-0">
           <div className="flex items-center gap-x-2 py-10">
             <Link href={`/`}>
               <PlaneLockup className="h-7 w-auto text-primary" />
@@ -31,16 +31,16 @@ export function InstanceNotReady() {
         </div>
 
         <div className="absolute inset-0 z-0">
-          <img src={patternBackground} className="w-full h-full object-cover" alt="Plane background pattern" />
+          <img src={patternBackground} className="h-full w-full object-cover" alt="Plane background pattern" />
         </div>
 
         <div className="relative z-10 mb-[110px] flex-grow">
-          <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-            <div className="w-auto max-w-2xl relative space-y-8 py-10">
-              <div className="relative flex flex-col justify-center items-center space-y-4">
-                <h1 className="text-24 font-bold pb-3">Welcome aboard Plane!</h1>
-                <img src={PlaneTakeOffImage} className="w-full h-full object-cover" alt="Plane Logo" />
-                <p className="font-medium text-14 text-placeholder">
+          <div className="relative container mx-auto flex h-full w-full items-center justify-center px-5">
+            <div className="relative w-auto max-w-2xl space-y-8 py-10">
+              <div className="relative flex flex-col items-center justify-center space-y-4">
+                <h1 className="pb-3 text-24 font-bold">Welcome aboard Plane!</h1>
+                <img src={PlaneTakeOffImage} className="h-full w-full object-cover" alt="Plane Logo" />
+                <p className="text-14 font-medium text-placeholder">
                   Get started by setting up your instance and workspace
                 </p>
               </div>
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index caeb31fe328..d4224eb2249 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -112,7 +112,7 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
         <div className="h-10 w-10 flex-shrink-0">
           <img
             src={integrationDetails[integration.provider].logo}
-            className="w-full h-full object-cover"
+            className="h-full w-full object-cover"
             alt={`${integration.title} Logo`}
           />
         </div>
diff --git a/apps/web/core/components/integration/slack/select-channel.tsx b/apps/web/core/components/integration/slack/select-channel.tsx
index 4ed32564f0d..af38111a36e 100644
--- a/apps/web/core/components/integration/slack/select-channel.tsx
+++ b/apps/web/core/components/integration/slack/select-channel.tsx
@@ -87,7 +87,7 @@ export const SelectChannel = observer(function SelectChannel({ integration }: Pr
       {projectIntegration ? (
         <button
           type="button"
-          className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-700 transition-colors duration-200 ease-in-out focus:outline-none`}
+          className={`bg-gray-700 relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none`}
           role="switch"
           aria-checked
           onClick={() => {
@@ -96,7 +96,7 @@ export const SelectChannel = observer(function SelectChannel({ integration }: Pr
         >
           <span
             aria-hidden="true"
-            className={`inline-block h-2 w-2 transform self-center rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+            className={`shadow inline-block h-2 w-2 transform self-center rounded-full bg-white ring-0 transition duration-200 ease-in-out ${
               slackChannelAvailabilityToggle ? "translate-x-3" : "translate-x-0"
             }`}
           />
diff --git a/apps/web/core/components/issues/attachment/attachment-item-list.tsx b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
index 04b0b0049cf..46f619be1c6 100644
--- a/apps/web/core/components/issues/attachment/attachment-item-list.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
@@ -133,9 +133,9 @@ export const IssueAttachmentItemList = observer(function IssueAttachmentItemList
           >
             <input {...getInputProps()} />
             {isDragActive && (
-              <div className="absolute flex items-center justify-center left-0 top-0 h-full w-full bg-surface-2/75 z-30 ">
-                <div className="flex items-center justify-center p-1 rounded-md bg-surface-1">
-                  <div className="flex flex-col justify-center items-center px-5 py-6 rounded-md border border-dashed border-strong">
+              <div className="absolute top-0 left-0 z-30 flex h-full w-full items-center justify-center bg-surface-2/75">
+                <div className="flex items-center justify-center rounded-md bg-surface-1 p-1">
+                  <div className="flex flex-col items-center justify-center rounded-md border border-dashed border-strong px-5 py-6">
                     <UploadCloud className="size-7" />
                     <span className="text-13 text-tertiary">{t("attachment.drag_and_drop")}</span>
                   </div>
diff --git a/apps/web/core/components/issues/attachment/attachment-list-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
index 3a6752fd163..55023fec4d2 100644
--- a/apps/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -61,13 +61,13 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
           window.open(fileURL, "_blank");
         }}
       >
-        <div className="group flex items-center justify-between gap-3 h-11 hover:bg-surface-2 pl-9 pr-2">
-          <div className="flex items-center gap-3 text-13 truncate">
+        <div className="group flex h-11 items-center justify-between gap-3 pr-2 pl-9 hover:bg-surface-2">
+          <div className="flex items-center gap-3 truncate text-13">
             <div className="flex items-center gap-3">{fileIcon}</div>
             <Tooltip tooltipContent={`${fileName}.${fileExtension}`} isMobile={isMobile}>
-              <p className="text-secondary font-medium truncate">{`${fileName}.${fileExtension}`}</p>
+              <p className="truncate font-medium text-secondary">{`${fileName}.${fileExtension}`}</p>
             </Tooltip>
-            <span className="flex size-1.5 bg-layer-1 rounded-full" />
+            <span className="flex size-1.5 rounded-full bg-layer-1" />
             <span className="flex-shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
           </div>
 
diff --git a/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx
index 5086b799dbe..4b16d8a790d 100644
--- a/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx
@@ -32,14 +32,14 @@ export const IssueAttachmentsUploadItem = observer(function IssueAttachmentsUplo
   const { isMobile } = usePlatformOS();
 
   return (
-    <div className="flex items-center justify-between gap-3 h-11 bg-surface-2 pl-9 pr-2 pointer-events-none">
-      <div className="flex items-center gap-3 text-13 truncate">
+    <div className="pointer-events-none flex h-11 items-center justify-between gap-3 bg-surface-2 pr-2 pl-9">
+      <div className="flex items-center gap-3 truncate text-13">
         <div className="flex-shrink-0">{fileIcon}</div>
         <Tooltip tooltipContent={fileName} isMobile={isMobile}>
-          <p className="text-secondary font-medium truncate">{fileName}</p>
+          <p className="truncate font-medium text-secondary">{fileName}</p>
         </Tooltip>
       </div>
-      <div className="flex-shrink-0 flex items-center gap-2">
+      <div className="flex flex-shrink-0 items-center gap-2">
         <span className="flex-shrink-0">
           <CircularProgressIndicator size={20} strokeWidth={3} percentage={uploadStatus.progress} />
         </span>
diff --git a/apps/web/core/components/issues/attachment/attachment-upload-details.tsx b/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
index d5ebd65deb0..d86bfe4ceaa 100644
--- a/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
@@ -32,8 +32,8 @@ export const IssueAttachmentsUploadDetails = observer(function IssueAttachmentsU
   const { isMobile } = usePlatformOS();
 
   return (
-    <div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-subtle bg-surface-2 px-4 py-2 text-13 pointer-events-none">
-      <div className="flex-shrink-0 flex items-center gap-3">
+    <div className="pointer-events-none flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-subtle bg-surface-2 px-4 py-2 text-13">
+      <div className="flex flex-shrink-0 items-center gap-3">
         <div className="h-7 w-7">{fileIcon}</div>
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-2">
@@ -47,7 +47,7 @@ export const IssueAttachmentsUploadDetails = observer(function IssueAttachmentsU
           </div>
         </div>
       </div>
-      <div className="flex-shrink-0 flex items-center gap-2">
+      <div className="flex flex-shrink-0 items-center gap-2">
         <span className="flex-shrink-0">
           <CircularProgressIndicator size={20} strokeWidth={3} percentage={uploadStatus.progress} />
         </span>
diff --git a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
index 6906b0eb94e..bfd33369020 100644
--- a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -16,9 +16,9 @@ export function BulkOperationsUpgradeBanner(props: Props) {
   const { className } = props;
 
   return (
-    <div className={cn("sticky bottom-0 left-0 h-20 z-[2] px-3.5 grid place-items-center", className)}>
-      <div className="h-14 w-full bg-accent-primary/10 border-[0.5px] border-accent-strong/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
-        <p className="text-accent-primary font-medium">
+    <div className={cn("sticky bottom-0 left-0 z-[2] grid h-20 place-items-center px-3.5", className)}>
+      <div className="flex h-14 w-full items-center justify-between gap-2 rounded-md border-[0.5px] border-accent-strong/50 bg-accent-primary/10 px-3.5 py-4">
+        <p className="font-medium text-accent-primary">
           Change state, priority, and more for several work items at once. Save three minutes on an average per
           operation.
         </p>
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
index 79bb0048270..9ba05b9afd8 100644
--- a/apps/web/core/components/issues/confirm-issue-discard.tsx
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -34,10 +34,10 @@ export function ConfirmIssueDiscard(props: Props) {
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
-      <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+      <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
         <div className="sm:flex sm:items-start">
           <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="text-16 font-medium leading-6 text-primary">Save this draft?</h3>
+            <h3 className="text-16 leading-6 font-medium text-primary">Save this draft?</h3>
             <div className="mt-2">
               <p className="text-13 text-secondary">
                 You can save this work item to Drafts so you can come back to it later.{" "}
diff --git a/apps/web/core/components/issues/create-issue-toast-action-items.tsx b/apps/web/core/components/issues/create-issue-toast-action-items.tsx
index 43647a9d948..1d894dbf8ed 100644
--- a/apps/web/core/components/issues/create-issue-toast-action-items.tsx
+++ b/apps/web/core/components/issues/create-issue-toast-action-items.tsx
@@ -61,12 +61,12 @@ export const CreateIssueToastActionItems = observer(function CreateIssueToastAct
   };
 
   return (
-    <div className="flex items-center gap-1 text-11 text-secondary -ml-2">
+    <div className="-ml-2 flex items-center gap-1 text-11 text-secondary">
       <a
         href={workItemLink}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-accent-primary px-2 py-1 hover:bg-surface-2 font-medium rounded-sm"
+        className="rounded-sm px-2 py-1 font-medium text-accent-primary hover:bg-surface-2"
       >
         {`View ${isEpic ? "epic" : "work item"}`}
       </a>
@@ -78,7 +78,7 @@ export const CreateIssueToastActionItems = observer(function CreateIssueToastAct
       ) : (
         <>
           <button
-            className="cursor-pointer hidden group-hover:flex px-2 py-1 text-tertiary hover:text-secondary hover:bg-surface-2 rounded-sm"
+            className="hidden cursor-pointer rounded-sm px-2 py-1 text-tertiary group-hover:flex hover:bg-surface-2 hover:text-secondary"
             onClick={copyToClipboard}
           >
             Copy link
diff --git a/apps/web/core/components/issues/delete-issue-modal.tsx b/apps/web/core/components/issues/delete-issue-modal.tsx
index a9d853cd56b..bf789d41a8b 100644
--- a/apps/web/core/components/issues/delete-issue-modal.tsx
+++ b/apps/web/core/components/issues/delete-issue-modal.tsx
@@ -121,7 +121,7 @@ export const DeleteIssueModal = observer(function DeleteIssueModal(props: Props)
         <>
           {/* TODO: Translate here */}
           {`Are you sure you want to delete ${isEpic ? "epic" : "work item"} `}
-          <span className="break-words font-medium text-primary">
+          <span className="font-medium break-words text-primary">
             {projectDetails?.identifier}-{issue?.sequence_id}
           </span>
           {` ? All of the data related to the ${isEpic ? "epic" : "work item"} will be permanently removed. This action cannot be undone.`}
diff --git a/apps/web/core/components/issues/filters.tsx b/apps/web/core/components/issues/filters.tsx
index 36c686ffe8b..0bedecfa759 100644
--- a/apps/web/core/components/issues/filters.tsx
+++ b/apps/web/core/components/issues/filters.tsx
@@ -126,7 +126,7 @@ export const HeaderFilters = observer(function HeaderFilters(props: Props) {
         />
       </FiltersDropdown>
       {canUserCreateIssue ? (
-        <Button className="hidden md:block px-2" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
+        <Button className="hidden px-2 md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
           <div className="hidden @4xl:flex">{t("common.analytics")}</div>
           <div className="flex @4xl:hidden">
             <ChartNoAxesColumn className="size-3.5" />
diff --git a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
index 5c0dda4019c..c82628e3a90 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
@@ -35,7 +35,7 @@ export function IssueDetailWidgetActionButtons(props: Props) {
   const { t } = useTranslation();
 
   return (
-    <div className="flex items-center flex-wrap gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       {!hideWidgets?.includes("sub-work-items") && (
         <SubIssuesActionButton
           issueId={issueId}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
index b94a9f4811f..74d69f3cfbe 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
@@ -40,8 +40,8 @@ export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmen
   // indicator element
   const indicatorElement = useMemo(
     () => (
-      <span className="flex items-center justify-center ">
-        <p className="text-14 text-tertiary !leading-3">{attachmentCount}</p>
+      <span className="flex items-center justify-center">
+        <p className="text-14 !leading-3 text-tertiary">{attachmentCount}</p>
       </span>
     ),
     [attachmentCount]
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
index 4a3ff4410e3..ceb855a1dab 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
@@ -40,8 +40,8 @@ export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibl
   // indicator element
   const indicatorElement = useMemo(
     () => (
-      <span className="flex items-center justify-center ">
-        <p className="text-14 text-tertiary !leading-3">{linksCount}</p>
+      <span className="flex items-center justify-center">
+        <p className="text-14 !leading-3 text-tertiary">{linksCount}</p>
       </span>
     ),
     [linksCount]
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
index 1a420334bc5..c7b6377ac74 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -136,15 +136,15 @@ export const RelationsCollapsibleContent = observer(function RelationsCollapsibl
 
   return (
     <>
-      <div className="flex flex-col gap-">
+      <div className="gap- flex flex-col">
         {filteredRelationsArray.map((relation) => (
           <div key={relation.relationKey}>
             <Collapsible
               buttonClassName="w-full"
               title={
-                <div className={`flex items-center gap-1 px-2.5 py-1 h-9  w-full ${relation.className}`}>
+                <div className={`flex h-9 w-full items-center gap-1 px-2.5 py-1 ${relation.className}`}>
                   <span>{relation.icon ? relation.icon(14) : null}</span>
-                  <span className="text-13 font-medium leading-5">{relation.label}</span>
+                  <span className="text-13 leading-5 font-medium">{relation.label}</span>
                 </div>
               }
               defaultOpen
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
index 5b9c29a5360..ce4bdab4aa1 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
@@ -40,8 +40,8 @@ export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleT
   // indicator element
   const indicatorElement = useMemo(
     () => (
-      <span className="flex items-center justify-center ">
-        <p className="text-14 text-tertiary !leading-3">{relationsCount}</p>
+      <span className="flex items-center justify-center">
+        <p className="text-14 !leading-3 text-tertiary">{relationsCount}</p>
       </span>
     ),
     [relationsCount]
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
index 8010fc88b9c..4d679d69379 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
@@ -52,16 +52,16 @@ export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(p
           menuButton={
             <div
               className={cn(
-                "p-1 rounded-sm  relative transition-all duration-200",
+                "relative rounded-sm p-1 transition-all duration-200",
                 isFilterApplied && "bg-accent-primary/20"
               )}
             >
-              {isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}
+              {isFilterApplied && <span className="absolute -top-1 -right-1 rounded-full bg-accent-primary p-1" />}
               <SlidersHorizontal className="h-3.5 w-3.5 text-primary" />
             </div>
           }
         >
-          <div className="vertical-scrollbar scrollbar-sm relative h-full w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5 max-h-[25rem] text-left">
+          <div className="vertical-scrollbar relative scrollbar-sm h-full max-h-[25rem] w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5 text-left">
             {/* display properties */}
             <div className="py-2">
               <FilterDisplayProperties
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
index 7e9eb339ed1..ea95af28dc1 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
@@ -50,11 +50,11 @@ export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssu
         menuButton={
           <div
             className={cn(
-              "p-1 rounded-sm  relative transition-all duration-200",
+              "relative rounded-sm p-1 transition-all duration-200",
               isFilterApplied && "bg-accent-primary/20"
             )}
           >
-            {isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}
+            {isFilterApplied && <span className="absolute -top-1 -right-1 rounded-full bg-accent-primary p-1" />}
             <ListFilter className="h-3.5 w-3.5 text-primary" />
           </div>
         }
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
index 37b633dec13..94fa95d4358 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
@@ -67,15 +67,15 @@ export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TS
           !isAllIssues && (
             <div className="flex items-center gap-2 p-3">
               <ChevronRightIcon
-                className={cn("size-3.5 transition-all text-placeholder", {
+                className={cn("size-3.5 text-placeholder transition-all", {
                   "rotate-90": isCollapsibleOpen,
                 })}
                 strokeWidth={2.5}
               />
-              <div className="flex-shrink-0 grid place-items-center overflow-hidden">
+              <div className="grid flex-shrink-0 place-items-center overflow-hidden">
                 {group.icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
               </div>
-              <span className="text-13 text-primary font-medium">{group.name}</span>
+              <span className="text-13 font-medium text-primary">{group.name}</span>
               <span className="text-13 text-placeholder">{workItemIds.length}</span>
             </div>
           )
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
index c17bd38796c..efe3c4b775d 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
@@ -113,10 +113,10 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
       >
         {issue && (
           <div
-            className="group relative flex min-h-11 h-full w-full items-center pr-2 py-1 transition-all hover:bg-surface-2"
+            className="group relative flex h-full min-h-11 w-full items-center py-1 pr-2 transition-all hover:bg-surface-2"
             style={{ paddingLeft: `${spacingLeft}px` }}
           >
-            <div className="flex size-5 items-center justify-center flex-shrink-0">
+            <div className="flex size-5 flex-shrink-0 items-center justify-center">
               {/* disable the chevron when current issue is also the root issue*/}
               {subIssueCount > 0 && !isCurrentIssueRoot && (
                 <>
@@ -150,7 +150,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
               )}
             </div>
 
-            <div className="flex w-full truncate cursor-pointer items-center gap-3">
+            <div className="flex w-full cursor-pointer items-center gap-3 truncate">
               <WithDisplayPropertiesHOC displayProperties={displayProperties || {}} displayPropertyKey="key">
                 <div className="flex-shrink-0">
                   {projectDetail && (
@@ -166,7 +166,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
                 </div>
               </WithDisplayPropertiesHOC>
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span className="flex-1 w-0 truncate text-13 text-primary">{issue.name}</span>
+                <span className="w-0 flex-1 truncate text-13 text-primary">{issue.name}</span>
               </Tooltip>
             </div>
 
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx
index 36d593c0521..997a1ae574d 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx
@@ -90,7 +90,7 @@ export const SubWorkItemTitleActions = observer(function SubWorkItemTitleActions
   return (
     // prevent click everywhere
     <div
-      className="flex gap-2 items-center"
+      className="flex items-center gap-2"
       onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
index 6ea45824fff..1298dbe156b 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
@@ -55,7 +55,7 @@ export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleT
       isOpen={isOpen}
       title={`${issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}`}
       indicatorElement={
-        <div className="flex items-center gap-1.5 text-tertiary text-13">
+        <div className="flex items-center gap-1.5 text-13 text-tertiary">
           <CircularProgressIndicator size={18} percentage={percentage} strokeWidth={3} />
           <span>
             {completedCount}/{totalCount} {t("common.done")}
diff --git a/apps/web/core/components/issues/issue-detail/identifier-text.tsx b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
index 466074905e8..a3a19fee3c3 100644
--- a/apps/web/core/components/issues/issue-detail/identifier-text.tsx
+++ b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
@@ -52,7 +52,7 @@ export function IdentifierText(props: TIdentifierTextProps) {
     <Tooltip tooltipContent="Click to copy" disabled={!enableClickToCopyIdentifier} position="top">
       <button
         type="button"
-        className={cn("font-medium whitespace-nowrap text-tertiary text-12", textSizeClassName, variantClassName, {
+        className={cn("text-12 font-medium whitespace-nowrap text-tertiary", textSizeClassName, variantClassName, {
           "cursor-pointer": enableClickToCopyIdentifier,
         })}
         onClick={handleCopyIssueIdentifier}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
index de8a6756889..60169008867 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
@@ -34,7 +34,7 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
         <>
           <IconButton variant="tertiary" icon={ListFilter} />
           {selectedFilters.length < filterOptions.length && (
-            <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
+            <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
           )}
         </>
       }
@@ -44,12 +44,12 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
       render={(item) => (
         <div
           key={item.key}
-          className="flex items-center gap-2 text-13 cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs"
+          className="flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 text-13 transition-all hover:bg-layer-1"
           onClick={item.onClick}
         >
           <div
             className={cn(
-              "flex-shrink-0 w-3 h-3 flex justify-center items-center rounded-xs transition-all bg-surface-2",
+              "flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-xs bg-surface-2 transition-all",
               {
                 "bg-accent-primary text-on-color": item.isSelected,
                 "bg-layer-1 text-placeholder": item.isSelected && selectedFilters.length === 1,
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
index 0ab22b2b0c9..35fff299a66 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
@@ -36,7 +36,7 @@ export const IssueAssigneeActivity = observer(function IssueAssigneeActivity(pro
           href={`/${activity.workspace_detail?.slug}/profile/${activity.new_identifier ?? activity.old_identifier}`}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center font-medium text-primary hover:underline capitalize"
+          className="inline-flex items-center font-medium text-primary capitalize hover:underline"
         >
           {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
         </a>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index bfe47cf7497..1906cd8d6ca 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -40,9 +40,9 @@ export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent)
         ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-px bg-layer-3" aria-hidden />
-      <div className="flex-shrink-0 w-7 h-7 rounded-lg overflow-hidden flex justify-center items-center z-[4] bg-layer-2 text-secondary border border-subtle shadow-raised-100">
-        {icon ? icon : <Network className="w-3.5 h-3.5" />}
+      <div className="absolute top-0 bottom-0 left-[13px] w-px bg-layer-3" aria-hidden />
+      <div className="z-[4] flex h-7 w-7 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg border border-subtle bg-layer-2 text-secondary shadow-raised-100">
+        {icon ? icon : <Network className="h-3.5 w-3.5" />}
       </div>
       <div className="w-full truncate text-secondary">
         {!activity?.field && activity?.verb === "created" ? (
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
index 7a510bf0217..1b6377886f5 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
@@ -27,11 +27,11 @@ export function IssueUser(props: TIssueUser) {
   return (
     <>
       {customUserName ? (
-        <span className="text-primary font-medium">{customUserName}</span>
+        <span className="font-medium text-primary">{customUserName}</span>
       ) : (
         <Link
           href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
-          className="hover:underline text-primary font-medium"
+          className="font-medium text-primary hover:underline"
         >
           {activity.actor_detail?.display_name}
         </Link>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
index 0ef269c6589..9976303e571 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
@@ -12,7 +12,7 @@ export function LabelActivityChip(props: TIssueLabelPill) {
   const { name, color } = props;
   return (
     <Tooltip tooltipContent={name}>
-      <span className="inline-flex w-min max-w-32 cursor-default flex-shrink-0 items-center gap-2 truncate whitespace-nowrap rounded-full border border-strong px-2 py-0.5 text-11">
+      <span className="inline-flex w-min max-w-32 flex-shrink-0 cursor-default items-center gap-2 truncate rounded-full border border-strong px-2 py-0.5 text-11 whitespace-nowrap">
         <span
           className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
           style={{
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
index 46562ac5659..0e5c3347d60 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
@@ -12,7 +12,7 @@ export function IssueActivityLoader() {
     <Loader className="space-y-8">
       <div className="flex items-start gap-3">
         <Loader.Item className="shrink-0" height="28px" width="28px" />
-        <div className="space-y-2 w-full">
+        <div className="w-full space-y-2">
           <Loader.Item height="8px" width="60%" />
           <Loader.Item height="8px" width="40%" />
           <Loader.Item height="10px" width="100%" />
@@ -20,7 +20,7 @@ export function IssueActivityLoader() {
       </div>
       <div className="flex items-start gap-3">
         <Loader.Item className="shrink-0" height="28px" width="28px" />
-        <div className="space-y-2 w-full">
+        <div className="w-full space-y-2">
           <Loader.Item height="8px" width="40%" />
           <Loader.Item height="8px" width="60%" />
           <Loader.Item height="10px" width="80%" />
@@ -28,7 +28,7 @@ export function IssueActivityLoader() {
       </div>
       <div className="flex items-start gap-3">
         <Loader.Item className="shrink-0" height="28px" width="28px" />
-        <div className="space-y-2 w-full">
+        <div className="w-full space-y-2">
           <Loader.Item height="8px" width="60%" />
           <Loader.Item height="8px" width="40%" />
           <Loader.Item height="10px" width="100%" />
diff --git a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
index cc00a6d170f..63f3307a81f 100644
--- a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
@@ -141,7 +141,7 @@ export const IssueDetailQuickActions = observer(function IssueDetailQuickActions
 
   return (
     <>
-      <div className="flex items-center justify-end flex-shrink-0">
+      <div className="flex flex-shrink-0 items-center justify-end">
         <div className="flex flex-wrap items-center gap-2">
           {currentUser && !issue?.archived_at && (
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
diff --git a/apps/web/core/components/issues/issue-detail/label/create-label.tsx b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
index d2fa6063ed3..6db63e9b06b 100644
--- a/apps/web/core/components/issues/issue-detail/label/create-label.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
@@ -114,7 +114,7 @@ export function LabelCreate(props: ILabelCreate) {
                     </Popover.Button>
                     <Popover.Panel className="fixed z-10">
                       <div
-                        className="p-2 max-w-xs sm:px-0"
+                        className="max-w-xs p-2 sm:px-0"
                         ref={setPopperElement}
                         style={styles.popper}
                         {...attributes.popper}
@@ -143,7 +143,7 @@ export function LabelCreate(props: ILabelCreate) {
                 ref={ref}
                 hasError={Boolean(errors.name)}
                 placeholder="Title"
-                className="w-full text-11 px-1.5 py-1"
+                className="w-full px-1.5 py-1 text-11"
                 disabled={isSubmitting}
               />
             )}
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index 3d677f8b770..ff2f84f7d41 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -40,7 +40,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
     <Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}>
       <LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
       <span className="text-body-xs-regular">{label.name}</span>
-      {!disabled && <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger-primary" />}
+      {!disabled && <CloseIcon className="h-2.5 w-2.5 transition-all group-hover:text-danger-primary" />}
     </Button>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail/label/root.tsx b/apps/web/core/components/issues/issue-detail/label/root.tsx
index 7e5faabd21e..bc9ecd34a25 100644
--- a/apps/web/core/components/issues/issue-detail/label/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/root.tsx
@@ -98,7 +98,7 @@ export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
   );
 
   return (
-    <div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full px-2">
+    <div className="relative flex min-h-7.5 w-full flex-wrap items-center gap-1 px-2">
       <LabelList
         workspaceSlug={workspaceSlug}
         projectId={projectId}
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
index 57234d73b4b..e44e27d38a4 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -141,7 +141,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
 
         <Combobox.Options className="fixed z-10">
           <div
-            className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
+            className={`z-10 my-1 w-48 rounded-sm border border-strong bg-surface-1 py-2.5 text-11 whitespace-nowrap shadow-raised-200 focus:outline-none`}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
@@ -160,7 +160,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                 />
               </div>
             </div>
-            <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
+            <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
               {isLoading ? (
                 <p className="text-center text-secondary">{t("common.loading")}</p>
               ) : filteredOptions.length > 0 ? (
@@ -169,7 +169,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                     key={option.value}
                     value={option.value}
                     className={({ selected }) =>
-                      `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
+                      `flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none hover:bg-layer-1 ${
                         selected ? "text-primary" : "text-secondary"
                       }`
                     }
@@ -187,7 +187,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                   </Combobox.Option>
                 ))
               ) : submitting ? (
-                <Loader className="spin  h-3.5 w-3.5" />
+                <Loader className="spin h-3.5 w-3.5" />
               ) : canCreateLabel ? (
                 <Combobox.Option
                   value={query}
@@ -209,7 +209,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                   )}
                 </Combobox.Option>
               ) : (
-                <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
+                <p className="text-left text-secondary">{t("common.search.no_matching_results")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
index d35cf3eeaaa..4f37b31a80f 100644
--- a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -113,7 +113,7 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
             <div>
               <label htmlFor="title" className="mb-2 text-secondary">
                 {t("common.display_title")}
-                <span className="text-caption-xs-regular block">{t("common.optional")}</span>
+                <span className="block text-caption-xs-regular">{t("common.optional")}</span>
               </label>
               <Controller
                 control={control}
@@ -134,7 +134,7 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
             </div>
           </div>
         </div>
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
           <Button variant="secondary" size="lg" onClick={onClose}>
             {t("common.cancel")}
           </Button>
diff --git a/apps/web/core/components/issues/issue-detail/links/link-detail.tsx b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
index 26ecd02d842..92a2fdd3ccf 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
@@ -60,7 +60,7 @@ export function IssueLinkDetail(props: TIssueLinkDetail) {
         >
           <div className="flex items-start gap-2 truncate">
             <span className="py-1">
-              <Icon className="size-3 stroke-2 text-tertiary group-hover:text-primary flex-shrink-0" />
+              <Icon className="size-3 flex-shrink-0 stroke-2 text-tertiary group-hover:text-primary" />
             </span>
             <Tooltip
               tooltipContent={linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
diff --git a/apps/web/core/components/issues/issue-detail/links/link-item.tsx b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
index 3910f63b365..765c3496632 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -54,32 +54,32 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
     <>
       <div
         key={linkId}
-        className="group col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-10 flex-shrink-0 px-3 bg-surface-2 hover:bg-layer-1 border-[0.5px] border-subtle rounded-sm"
+        className="group 3xl:col-span-2 col-span-12 flex h-10 flex-shrink-0 items-center justify-between gap-3 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-3 hover:bg-layer-1 lg:col-span-6 xl:col-span-4 2xl:col-span-3"
       >
-        <div className="flex items-center gap-2.5 min-w-0 flex-1">
+        <div className="flex min-w-0 flex-1 items-center gap-2.5">
           {faviconUrl ? (
             <img src={faviconUrl} alt="favicon" className="size-4 flex-shrink-0" />
           ) : (
-            <LinkIcon className="size-4 text-tertiary group-hover:text-primary flex-shrink-0" />
+            <LinkIcon className="size-4 flex-shrink-0 text-tertiary group-hover:text-primary" />
           )}
           <Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
             <a
               href={linkDetail.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="flex-1 w-0 text-body-xs-regular cursor-pointer flex items-center"
+              className="flex w-0 flex-1 cursor-pointer items-center text-body-xs-regular"
             >
-              <span className="truncate flex-1 w-0">
+              <span className="w-0 flex-1 truncate">
                 {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
                 {linkTitle && linkTitle !== "" && (
-                  <span className="text-placeholder text-caption-sm-regular"> {linkTitle}</span>
+                  <span className="text-caption-sm-regular text-placeholder"> {linkTitle}</span>
                 )}
               </span>
             </a>
           </Tooltip>
         </div>
-        <div className="flex items-center gap-1 flex-shrink-0">
-          <p className="p-1 text-caption-sm-regular align-bottom leading-5 text-placeholder group-hover-text-secondary">
+        <div className="flex flex-shrink-0 items-center gap-1">
+          <p className="group-hover-text-secondary p-1 align-bottom text-caption-sm-regular leading-5 text-placeholder">
             {calculateTimeAgo(linkDetail.created_at)}
           </p>
           <span
@@ -91,7 +91,7 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
                 message: t("common.link_copied_to_clipboard"),
               });
             }}
-            className="relative grid place-items-center rounded-sm p-1 text-placeholder outline-none group-hover:text-secondary cursor-pointer hover:bg-layer-1"
+            className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-placeholder outline-none group-hover:text-secondary hover:bg-layer-1"
           >
             <CopyIcon className="h-3.5 w-3.5 stroke-[1.5]" />
           </span>
diff --git a/apps/web/core/components/issues/issue-detail/links/root.tsx b/apps/web/core/components/issues/issue-detail/links/root.tsx
index 5ba3340062d..de2153ab7dc 100644
--- a/apps/web/core/components/issues/issue-detail/links/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/root.tsx
@@ -126,7 +126,7 @@ export function IssueLinkRoot(props: TIssueLinkRoot) {
           {!disabled && (
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded-sm p-1 outline-none duration-300 hover:bg-surface-2 ${
+              className={`grid h-7 w-7 place-items-center rounded-sm p-1 duration-300 outline-none hover:bg-surface-2 ${
                 disabled ? "cursor-not-allowed" : "cursor-pointer"
               }`}
               onClick={() => toggleIssueLinkModal(true)}
diff --git a/apps/web/core/components/issues/issue-detail/main-content.tsx b/apps/web/core/components/issues/issue-detail/main-content.tsx
index a42b821ba79..6abad86335e 100644
--- a/apps/web/core/components/issues/issue-detail/main-content.tsx
+++ b/apps/web/core/components/issues/issue-detail/main-content.tsx
@@ -92,7 +92,7 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
 
   return (
     <>
-      <div className="rounded-lg space-y-4">
+      <div className="space-y-4 rounded-lg">
         {issue.parent_id && (
           <IssueParentDetail
             workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail/parent-select.tsx b/apps/web/core/components/issues/issue-detail/parent-select.tsx
index 71542928bb0..192f7b1334e 100644
--- a/apps/web/core/components/issues/issue-detail/parent-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -78,7 +78,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
       <button
         type="button"
         className={cn(
-          "group flex items-center justify-between gap-2 px-2 py-0.5 rounded-sm outline-none",
+          "group flex items-center justify-between gap-2 rounded-sm px-2 py-0.5 outline-none",
           {
             "cursor-not-allowed": disabled,
             "hover:bg-layer-transparent-hover": !disabled,
@@ -125,7 +125,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
         )}
         {!disabled && (
           <span
-            className={cn("p-1 flex-shrink-0 opacity-0 group-hover:opacity-100", {
+            className={cn("flex-shrink-0 p-1 opacity-0 group-hover:opacity-100", {
               "text-placeholder": !issue.parent_id && !parentIssue,
             })}
           >
diff --git a/apps/web/core/components/issues/issue-detail/parent/root.tsx b/apps/web/core/components/issues/issue-detail/parent/root.tsx
index 15972f08a99..6aa9149b746 100644
--- a/apps/web/core/components/issues/issue-detail/parent/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/root.tsx
@@ -74,7 +74,7 @@ export const IssueParentDetail = observer(function IssueParentDetail(props: TIss
 
   return (
     <>
-      <div className="mb-5 flex w-min items-center gap-3 whitespace-nowrap rounded-md border border-strong bg-layer-1 px-2.5 py-1 text-11">
+      <div className="mb-5 flex w-min items-center gap-3 rounded-md border border-strong bg-layer-1 px-2.5 py-1 text-11 whitespace-nowrap">
         <ControlLink href={workItemLink} onClick={handleParentIssueClick}>
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-2.5">
diff --git a/apps/web/core/components/issues/issue-detail/parent/siblings.tsx b/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
index b00a17ff665..7254feb8d5a 100644
--- a/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
@@ -41,7 +41,7 @@ export const IssueParentSiblings = observer(function IssueParentSiblings(props:
   return (
     <div className="my-1">
       {isLoading ? (
-        <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-11 text-secondary">
+        <div className="flex items-center gap-2 px-1 py-1 text-left text-11 whitespace-nowrap text-secondary">
           Loading
         </div>
       ) : subIssueIds && subIssueIds.length > 0 ? (
@@ -52,7 +52,7 @@ export const IssueParentSiblings = observer(function IssueParentSiblings(props:
             )
         )
       ) : (
-        <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-11 text-secondary">
+        <div className="flex items-center gap-2 px-1 py-1 text-left text-11 whitespace-nowrap text-secondary">
           No sibling work items
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-detail/relation-select.tsx b/apps/web/core/components/issues/issue-detail/relation-select.tsx
index 8559c6c423f..8c68993ca12 100644
--- a/apps/web/core/components/issues/issue-detail/relation-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -117,7 +117,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
                 return (
                   <div
                     key={relationIssueId}
-                    className={`group flex items-center gap-1 rounded-sm px-1.5 pb-1 pt-1 leading-3 hover:bg-surface-2 ${currRelationOption?.className}`}
+                    className={`group flex items-center gap-1 rounded-sm px-1.5 pt-1 pb-1 leading-3 hover:bg-surface-2 ${currRelationOption?.className}`}
                   >
                     <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name} isMobile={isMobile}>
                       <Link
diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
index b51c55b5e4e..1cd233574f6 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -84,10 +84,10 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
   return (
     <>
-      <div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
+      <div className="flex h-full w-full flex-col items-center divide-y-2 divide-subtle-1 overflow-hidden">
         <div className="h-full w-full overflow-y-auto px-6">
           <h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
-          <div className={`mb-2 mt-4 space-y-2.5 truncate ${!isEditable ? "opacity-60" : ""}`}>
+          <div className={`mt-4 mb-2 space-y-2.5 truncate ${!isEditable ? "opacity-60" : ""}`}>
             <SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
               <StateDropdown
                 value={issue?.state_id}
@@ -127,7 +127,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
                 disabled={!isEditable}
                 buttonVariant="transparent-with-text"
-                className="w-full h-7.5 grow rounded-sm"
+                className="h-7.5 w-full grow rounded-sm"
                 buttonContainerClassName="size-full text-left"
                 buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
               />
@@ -135,7 +135,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
             {createdByDetails && (
               <SidebarPropertyListItem icon={UserCirclePropertyIcon} label={t("common.created_by")}>
-                <div className="px-2 flex gap-2">
+                <div className="flex gap-2 px-2">
                   <ButtonAvatars showTooltip userIds={createdByDetails.id} />
                   <span className="grow truncate text-body-xs-regular leading-5">{createdByDetails?.display_name}</span>
                 </div>
@@ -163,7 +163,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
             </SidebarPropertyListItem>
 
             <SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("common.order_by.due_date")}>
-              <div className="flex items-center gap-2 w-full">
+              <div className="flex w-full items-center gap-2">
                 <DateDropdown
                   placeholder={t("issue.add.due_date")}
                   value={issue.target_date}
@@ -229,7 +229,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 appendElement={<TransferHopInfo workItem={issue} />}
               >
                 <IssueCycleSelect
-                  className="w-full grow h-7.5"
+                  className="h-7.5 w-full grow"
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
                   issueId={issueId}
@@ -241,7 +241,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
             <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
               <IssueParentSelectRoot
-                className="w-full h-7.5 grow"
+                className="h-7.5 w-full grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
index b088c48067b..d028c4f5adf 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
@@ -145,7 +145,7 @@ export const CalendarChart = observer(function CalendarChart(props: Props) {
 
         <IssueLayoutHOC layout={EIssueLayoutTypes.CALENDAR}>
           <div
-            className={cn("flex md:h-full w-full flex-col overflow-y-auto", {
+            className={cn("flex w-full flex-col overflow-y-auto md:h-full", {
               "vertical-scrollbar scrollbar-lg": windowWidth > 768,
             })}
             ref={scrollableContainerRef}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
index 97c94aa37bb..ebf54597305 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -168,7 +168,7 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
         </div>
 
         {/* content */}
-        <div className="h-full w-full hidden md:block">
+        <div className="hidden h-full w-full md:block">
           <div
             className={cn(
               `h-full w-full select-none ${isDraggingOver ? `${draggingOverBackground} opacity-70` : normalBackground}`,
@@ -200,16 +200,16 @@ export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
         <div
           onClick={() => setSelectedDate(date.date)}
           className={cn(
-            "text-13 py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer opacity-80",
+            "mx-auto flex h-full w-full cursor-pointer flex-col items-center justify-start py-2.5 text-13 font-medium opacity-80 md:hidden",
             {
               "bg-layer-2": !isWeekend,
             }
           )}
         >
           <div
-            className={cn("size-6 flex items-center justify-center rounded-full", {
+            className={cn("flex size-6 items-center justify-center rounded-full", {
               "bg-accent-primary text-on-color": isSelectedDate,
-              "bg-accent-primary/10 text-accent-primary ": isToday && !isSelectedDate,
+              "bg-accent-primary/10 text-accent-primary": isToday && !isSelectedDate,
             })}
           >
             {date.date.getDate()}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index 2a8736516d8..b0503c26d51 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -105,7 +105,7 @@ export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown
           <Popover.Button as={React.Fragment}>
             <button type="button" ref={setReferenceElement}>
               <div
-                className={`hidden md:flex items-center gap-1.5 rounded-sm bg-layer-1 px-2.5 py-1 text-11 outline-none hover:bg-layer-1 ${
+                className={`hidden items-center gap-1.5 rounded-sm bg-layer-1 px-2.5 py-1 text-11 outline-none hover:bg-layer-1 md:flex ${
                   open ? "text-primary" : "text-secondary"
                 }`}
               >
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
index 8d1f1e5eb16..ebb5b64f37b 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -115,7 +115,7 @@ export const CalendarHeader = observer(function CalendarHeader(props: ICalendarH
       <div className="flex items-center gap-1.5">
         <button
           type="button"
-          className="rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover px-2.5 py-1 text-11 font-medium text-secondary  hover:text-primary"
+          className="rounded-sm bg-layer-transparent px-2.5 py-1 text-11 font-medium text-secondary hover:bg-layer-transparent-hover hover:text-primary"
           onClick={handleToday}
         >
           {t("common.today")}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
index fcd2bb811dd..5902c4ca6e3 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -98,21 +98,21 @@ export const CalendarIssueBlock = observer(
               id={`issue-${issue.id}`}
               href={workItemLink}
               onClick={() => handleIssuePeekOverview(issue)}
-              className="block w-full text-13 text-primary rounded-sm border-b md:border-[1px] border-subtle hover:border-subtle-1"
+              className="block w-full rounded-sm border-b border-subtle text-13 text-primary hover:border-subtle-1 md:border-[1px]"
               disabled={!!issue?.tempId || isMobile}
               ref={ref}
             >
               <>
                 {issue?.tempId !== undefined && (
-                  <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
+                  <div className="absolute top-0 left-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
                 )}
 
                 <div
                   ref={blockRef}
                   className={cn(
-                    "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm  md:px-1 px-4 py-1.5 ",
+                    "group/calendar-block flex h-10 w-full items-center justify-between gap-1.5 rounded-sm px-4 py-1.5 md:h-8 md:px-1",
                     {
-                      "bg-surface-2 shadow-raised-200 border-accent-strong": isDragging,
+                      "border-accent-strong bg-surface-2 shadow-raised-200": isDragging,
                       "bg-surface-1 hover:bg-surface-2": !isDragging,
                       "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
                     }
@@ -134,10 +134,10 @@ export const CalendarIssueBlock = observer(
                         displayProperties={issuesFilter?.issueFilters?.displayProperties}
                       />
                     )}
-                    <div className="truncate text-13 font-medium md:font-regular md:text-11">{issue.name}</div>
+                    <div className="truncate text-13 font-medium md:text-11 md:font-regular">{issue.name}</div>
                   </div>
                   <div
-                    className={cn("flex-shrink-0 size-5", {
+                    className={cn("size-5 flex-shrink-0", {
                       "hidden group-hover/calendar-block:block": !isMobile,
                       block: isMenuActive,
                     })}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
index cddb9d8d3cc..0ded0ad75f5 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -84,7 +84,7 @@ export const CalendarIssueBlocks = observer(function CalendarIssueBlocks(props:
 
       {isPaginating && (
         <div className="p-1 px-2">
-          <div className="flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm md:px-1 px-4 py-1.5 bg-layer-1 animate-pulse" />
+          <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
         </div>
       )}
 
@@ -105,7 +105,7 @@ export const CalendarIssueBlocks = observer(function CalendarIssueBlocks(props:
         <div className="flex items-center px-2.5 py-1">
           <button
             type="button"
-            className="w-min whitespace-nowrap rounded-sm text-11 px-1.5 py-1 font-medium  hover:bg-layer-1 text-accent-primary hover:text-accent-secondary"
+            className="w-min rounded-sm px-1.5 py-1 text-11 font-medium whitespace-nowrap text-accent-primary hover:bg-layer-1 hover:text-accent-secondary"
             onClick={() => loadMoreIssues(formattedDatePayload)}
           >
             {t("common.load_more")}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx b/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
index 99f2e7fe87f..a5b3a4c8a6f 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
@@ -111,7 +111,7 @@ export const CalendarQuickAddIssueActions = observer(function CalendarQuickAddIs
         customQuickAddButton={
           <div
             className={cn(
-              "md:opacity-0 rounded-sm  bg-layer-transparent hover:bg-layer-transparent-hover md:group-hover:opacity-100 overflow-hidden",
+              "overflow-hidden rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover md:opacity-0 md:group-hover:opacity-100",
               {
                 block: isMenuOpen,
               }
@@ -125,8 +125,8 @@ export const CalendarQuickAddIssueActions = observer(function CalendarQuickAddIs
               customButtonClassName="w-full"
               customButton={
                 <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-tertiary hover:text-tertiary">
-                  <PlusIcon className="h-3.5 w-3.5 stroke-2 flex-shrink-0" />
-                  <span className="text-13 font-medium flex-shrink-0">
+                  <PlusIcon className="h-3.5 w-3.5 flex-shrink-0 stroke-2" />
+                  <span className="flex-shrink-0 text-13 font-medium">
                     {isEpic ? t("epic.add.label") : t("issue.add.label")}
                   </span>
                 </div>
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
index 16dfd94d599..bc5a3a0e6b4 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
@@ -28,7 +28,7 @@ export const CalendarWeekHeader = observer(function CalendarWeekHeader(props: Pr
 
   return (
     <div
-      className={`relative sticky top-0 z-[1] grid md:divide-x-[0.5px] divide-subtle-1 text-13 font-medium ${
+      className={`relative sticky top-0 z-[1] grid divide-subtle-1 text-13 font-medium md:divide-x-[0.5px] ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >
@@ -40,7 +40,7 @@ export const CalendarWeekHeader = observer(function CalendarWeekHeader(props: Pr
           return null;
 
         return (
-          <div key={day.shortTitle} className="flex h-11 items-center justify-center md:justify-end bg-layer-1 px-4">
+          <div key={day.shortTitle} className="flex h-11 items-center justify-center bg-layer-1 px-4 md:justify-end">
             {day.shortTitle}
           </div>
         );
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
index a3b2c7525b5..37b467aa446 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -33,9 +33,9 @@ export const AppliedCycleFilters = observer(function AppliedCycleFilters(props:
         const cycleStatus = (cycleDetails?.status ? cycleDetails?.status.toLocaleLowerCase() : "draft") as TCycleGroups;
 
         return (
-          <div key={cycleId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11 truncate">
+          <div key={cycleId} className="flex items-center gap-1 truncate rounded-sm bg-layer-1 p-1 text-11">
             <CycleGroupIcon cycleGroup={cycleStatus} className="h-3 w-3 flex-shrink-0" />
-            <span className="normal-case truncate">{cycleDetails.name}</span>
+            <span className="truncate normal-case">{cycleDetails.name}</span>
             {editable && (
               <button
                 type="button"
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
index 8c57a5ff338..2264ee6fdbb 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -29,9 +29,9 @@ export const AppliedModuleFilters = observer(function AppliedModuleFilters(props
         if (!moduleDetails) return null;
 
         return (
-          <div key={moduleId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11 truncate">
+          <div key={moduleId} className="flex items-center gap-1 truncate rounded-sm bg-layer-1 p-1 text-11">
             <ModuleIcon className="h-3 w-3 flex-shrink-0" />
-            <span className="normal-case truncate">{moduleDetails.name}</span>
+            <span className="truncate normal-case">{moduleDetails.name}</span>
             {editable && (
               <button
                 type="button"
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
index 9375bebd972..7e71273869a 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -30,7 +30,7 @@ export const AppliedProjectFilters = observer(function AppliedProjectFilters(pro
 
         return (
           <div key={projectId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
-            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+            <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
               <Logo logo={projectDetails.logo_props} size={12} />
             </span>
             <span className="normal-case">{projectDetails.name}</span>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
index b761c5b8d9d..40ad2d18295 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -59,7 +59,7 @@ export const DisplayFiltersSelection = observer(function DisplayFiltersSelection
   }
 
   return (
-    <div className="vertical-scrollbar scrollbar-sm relative h-full w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5">
+    <div className="vertical-scrollbar relative scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5">
       {/* display properties */}
       {layoutDisplayFiltersOptions?.display_properties && layoutDisplayFiltersOptions.display_properties.length > 0 && (
         <div className="py-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 31dfb062760..e75eb406b53 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -99,7 +99,7 @@ export const FilterAssignees = observer(function FilterAssignees(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index 9b395955f25..e78662422ed 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -92,7 +92,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
index 4778ae5bc5f..1368fee3f1d 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -95,7 +95,7 @@ export const FilterCycle = observer(function FilterCycle(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx
index ec8b2881a63..1079c559f1f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx
@@ -72,7 +72,7 @@ export const FilterDueDate = observer(function FilterDueDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
index 259664cabef..f68b7755c6a 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -85,7 +85,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index 71a187fe766..6aa1d881efb 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -99,7 +99,7 @@ export const FilterMentions = observer(function FilterMentions(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
index 71ef7ed8d9c..695dab108c9 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -85,7 +85,7 @@ export const FilterModule = observer(function FilterModule(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
index 5bdf6a40b97..e3325d580d8 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -49,7 +49,7 @@ export const FilterPriority = observer(function FilterPriority(props: Props) {
               />
             ))
           ) : (
-            <p className="text-11 italic text-placeholder">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
index 89559be0dce..843ac016e86 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -68,7 +68,7 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
                     isChecked={appliedFilters?.includes(project.id) ? true : false}
                     onClick={() => handleUpdate(project.id)}
                     icon={
-                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
                         <Logo logo={project.logo_props} size={12} />
                       </span>
                     }
@@ -86,7 +86,7 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
index 97c9d6a7804..4adbe7fec97 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -71,7 +71,7 @@ export const FilterStartDate = observer(function FilterStartDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index 05397dd3974..99e8c1dafcd 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -66,7 +66,7 @@ export const FilterStateGroup = observer(function FilterStateGroup(props: Props)
               )}
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
index 37b9d3982db..825a15a1819 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -84,7 +84,7 @@ export const FilterState = observer(function FilterState(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index f904fb931de..4067fa38f41 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -70,7 +70,7 @@ export function FiltersDropdown(props: Props) {
                         <span>{title}</span>
                       </div>
                       {isFiltersApplied && (
-                        <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
+                        <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
                       )}
                     </>
                   </Button>
@@ -101,12 +101,12 @@ export function FiltersDropdown(props: Props) {
             {/** translate-y-0 is a hack to create new stacking context. Required for safari  */}
             <Popover.Panel className="fixed z-10 translate-y-0">
               <div
-                className="overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-100 my-1"
+                className="my-1 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-100"
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}
               >
-                <div className="flex max-h-[30rem] lg:max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">
+                <div className="flex max-h-[30rem] w-[18.75rem] flex-col overflow-hidden lg:max-h-[37.5rem]">
                   {children}
                 </div>
               </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
index d0cf3c259b2..af27943edfd 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -36,7 +36,7 @@ export function FilterOption(props: Props) {
         <div className="flex-grow truncate text-caption-sm-regular text-secondary">{title}</div>
       </div>
       {activePulse && (
-        <div className="flex-shrink-0 text-caption-sm-regular w-2 h-2 rounded-full bg-accent-primary animate-pulse ml-auto" />
+        <div className="ml-auto h-2 w-2 flex-shrink-0 animate-pulse rounded-full bg-accent-primary text-caption-sm-regular" />
       )}
     </button>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
index 2ca1b4616e4..14f74909465 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
@@ -33,7 +33,7 @@ export function MobileLayoutSelection({
           {activeLayout && (
             <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className={`h-3.5 w-3.5`} />
           )}
-          <ChevronDownIcon className="size-3 text-secondary my-auto" strokeWidth={2} />
+          <ChevronDownIcon className="my-auto size-3 text-secondary" strokeWidth={2} />
         </Button>
       }
       customButtonClassName="flex flex-grow justify-center text-secondary text-13"
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
index 3a8141e0b56..a9927f9dc9d 100644
--- a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
@@ -66,13 +66,13 @@ export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) {
         render={
           <div
             id={`issue-${issueId}`}
-            className="relative flex h-full w-full cursor-pointer items-center rounded-sm space-between"
+            className="space-between relative flex h-full w-full cursor-pointer items-center rounded-sm"
             style={blockStyle}
             onClick={handleIssuePeekOverview}
           >
-            <div className="absolute left-0 top-0 h-full w-full bg-surface-1/50 " />
+            <div className="absolute top-0 left-0 h-full w-full bg-surface-1/50" />
             <div
-              className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-13 text-primary flex-1"
+              className="sticky w-auto flex-1 truncate overflow-hidden px-2.5 py-1 text-13 text-primary"
               style={{ left: `${SIDEBAR_WIDTH}px` }}
             >
               {issueDetails?.name}
@@ -80,7 +80,7 @@ export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) {
             {isEpic && (
               <IssueStats
                 issueId={issueId}
-                className="sticky mx-2 font-medium text-primary overflow-hidden truncate w-auto justify-end flex-shrink-0"
+                className="sticky mx-2 w-auto flex-shrink-0 justify-end truncate overflow-hidden font-medium text-primary"
                 showProgressText={duration >= 2}
               />
             )}
diff --git a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
index a3fe1c79182..ccdb346f96d 100644
--- a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
+++ b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
@@ -51,9 +51,9 @@ export function GroupDragOverlay(props: Props) {
     <div
       ref={messageContainerRef}
       className={cn(
-        `absolute top-0 left-0 h-full w-full items-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`,
+        `absolute top-0 left-0 h-full w-full items-center rounded-sm bg-layer-1/85 text-13 font-medium text-tertiary ${dragColumnOrientation}`,
         {
-          "flex flex-col border-[1px] border-strong z-2": shouldOverlayBeVisible,
+          "z-2 flex flex-col border-[1px] border-strong": shouldOverlayBeVisible,
           "bg-danger-subtle": workflowDisabledSource && isDropDisabled,
         },
         { hidden: !shouldOverlayBeVisible }
@@ -67,7 +67,7 @@ export function GroupDragOverlay(props: Props) {
         />
       ) : (
         <div
-          className={cn("p-3 my-8 flex flex-col rounded-sm items-center", {
+          className={cn("my-8 flex flex-col items-center rounded-sm p-3", {
             "text-secondary": shouldOverlayBeVisible,
             "text-danger-secondary": isDropDisabled,
           })}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 231c6a8e438..89715732c1f 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -252,7 +252,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
         <div
           className={`${
             isDragging ? `opacity-100` : `opacity-0`
-          } flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-danger-primary ${
+          } flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium text-danger-primary italic ${
             isDragOverDelete ? "bg-danger-primary blur-2xl" : ""
           } transition duration-300`}
         >
@@ -261,7 +261,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
       </div>
       <IssueLayoutHOC layout={EIssueLayoutTypes.KANBAN}>
         <div
-          className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-surface-2 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
+          className={`horizontal-scrollbar relative flex scrollbar-lg h-full w-full bg-surface-2 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
           ref={scrollableContainerRef}
         >
           <div className="relative h-full w-max min-w-full bg-surface-2">
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
index b1cbca9ffb8..c9531328ff1 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -78,7 +78,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
   const customActionButton = (
     <div
       ref={menuActionRef}
-      className={`flex items-center h-full w-full cursor-pointer rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+      className={`flex h-full w-full cursor-pointer items-center rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
         isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
@@ -125,13 +125,13 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
       </div>
 
       <Tooltip tooltipContent={issue.name} isMobile={isMobile} renderByDefault={false}>
-        <div className="w-full line-clamp-1 text-body-sm-medium text-primary">
+        <div className="line-clamp-1 w-full text-body-sm-medium text-primary">
           <span>{issue.name}</span>
         </div>
       </Tooltip>
 
       <IssueProperties
-        className="flex flex-wrap items-center gap-2 whitespace-nowrap text-tertiary pt-1.5"
+        className="flex flex-wrap items-center gap-2 pt-1.5 whitespace-nowrap text-tertiary"
         issue={issue}
         displayProperties={displayProperties}
         activeLayout="Kanban"
@@ -275,10 +275,10 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
           href={workItemLink}
           ref={cardRef}
           className={cn(
-            "block rounded-lg border outline-[0.5px] outline-transparent shadow-raised-100 w-full border-subtle bg-layer-2 text-13 transition-all p-3 hover:shadow-raised-200 hover:border-strong",
+            "block w-full rounded-lg border border-subtle bg-layer-2 p-3 text-13 shadow-raised-100 outline-[0.5px] outline-transparent transition-all hover:border-strong hover:shadow-raised-200",
             { "hover:cursor-pointer": isDragAllowed },
             { "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id) },
-            { "bg-layer-1 z-[100]": isCurrentBlockDragging }
+            { "z-[100] bg-layer-1": isCurrentBlockDragging }
           )}
           onClick={() => handleIssuePeekOverview(issue)}
           disabled={!!issue?.tempId}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/default.tsx b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
index d015bd84026..d52e256a218 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
@@ -147,7 +147,7 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
   const isSubGroup = !!sub_group_id && sub_group_id !== "null";
 
   return (
-    <ContentWrapper className={`flex-row relative gap-4 !pt-2 !pb-0`}>
+    <ContentWrapper className={`relative flex-row gap-4 !pt-2 !pb-0`}>
       {list &&
         list.length > 0 &&
         list.map((subList: IGroupByColumn, groupIndex) => {
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index c6e35aa20e8..3a89e49970e 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -126,8 +126,8 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
           }`}
         >
           <div
-            className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-primary ${
-              verticalAlignPosition ? `vertical-lr max-h-[400px]` : ``
+            className={`line-clamp-1 inline-block truncate overflow-hidden font-medium text-primary ${
+              verticalAlignPosition ? `max-h-[400px] vertical-lr` : ``
             }`}
           >
             {title}
@@ -143,7 +143,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
 
         {sub_group_by === null && (
           <button
-            className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover bg-layer-transparent"
+            className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover"
             onClick={() => handleCollapsedGroups("group_by", column_id)}
           >
             {verticalAlignPosition ? (
@@ -158,7 +158,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
           (renderExistingIssueModal ? (
             <CustomMenu
               customButton={
-                <span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden transition-all hover:bg-layer-transparent-hover bg-layer-transparent rounded-sm">
+                <span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover">
                   <PlusIcon height={14} width={14} strokeWidth={2} />
                 </span>
               }
@@ -181,7 +181,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
             </CustomMenu>
           ) : (
             <button
-              className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer  overflow-hidden transition-all hover:bg-layer-transparent-hover bg-layer-transparent rounded-sm items-center justify-center"
+              className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover"
               onClick={() => {
                 setIsOpen(true);
               }}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index b052766e841..1a3827672f1 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -29,7 +29,7 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
   const { icon, title, count, column_id, collapsedGroups, sub_group_by, handleCollapsedGroups } = props;
   return (
     <div
-      className={`relative flex w-full flex-shrink-0 flex-row items-center gap-1 rounded-xs py-1.5 cursor-pointer`}
+      className={`relative flex w-full flex-shrink-0 cursor-pointer flex-row items-center gap-1 rounded-xs py-1.5`}
       onClick={() => handleCollapsedGroups("sub_group_by", column_id)}
     >
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index b05869d3d66..1358110eea3 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -261,7 +261,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <KanbanIssueBlockLoader />
   ) : (
     <div
-      className="w-full sticky bottom-0 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
+      className="sticky bottom-0 w-full cursor-pointer p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       onClick={loadMoreIssuesInThisGroup}
     >
       {t("common.load_more")} &darr;
@@ -280,8 +280,8 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <div
       id={`${groupId}__${sub_group_id}`}
       className={cn(
-        "relative h-full transition-all min-h-[120px]",
-        { "bg-layer-1 rounded-sm": isDraggingOverColumn },
+        "relative h-full min-h-[120px] transition-all",
+        { "rounded-sm bg-layer-1": isDraggingOverColumn },
         { "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlayBeVisible }
       )}
       ref={columnRef}
@@ -326,7 +326,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
       {enableQuickIssueCreate &&
         !disableIssueCreation &&
         !getIsWorkflowWorkItemCreationDisabled(groupId, sub_group_id) && (
-          <div className="w-full bg-surface-2 py-0.5 sticky bottom-0">
+          <div className="sticky bottom-0 w-full bg-surface-2 py-0.5">
             <QuickAddIssueRoot
               layout={EIssueLayoutTypes.KANBAN}
               QuickAddButton={KanbanQuickAddIssueButton}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
index 1fe40fb2192..84998f3fa54 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -183,7 +183,7 @@ const SubGroupSwimlane = observer(function SubGroupSwimlane(props: ISubGroupSwim
           if (subGroupByVisibilityToggle.showGroup === false) return <></>;
           return (
             <div key={_list.id} className="flex flex-shrink-0 flex-col">
-              <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-layer-1 border-y-[0.5px] border-subtle">
+              <div className="sticky top-[50px] z-[3] flex w-full items-center border-y-[0.5px] border-subtle bg-layer-1 py-1">
                 <Row className="sticky left-0 flex-shrink-0">
                   <HeaderSubGroupByCard
                     column_id={_list.id}
diff --git a/apps/web/core/components/issues/issue-layouts/list/block.tsx b/apps/web/core/components/issues/issue-layouts/list/block.tsx
index 1d93d53b10e..2c536b2aa95 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -184,7 +184,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
       <Row
         ref={issueRef}
         className={cn(
-          "group/list-block min-h-11 relative flex flex-col gap-3 bg-layer-transparent hover:bg-layer-transparent-hover py-3 text-13 transition-colors",
+          "group/list-block relative flex min-h-11 flex-col gap-3 bg-layer-transparent py-3 text-13 transition-colors hover:bg-layer-transparent-hover",
           {
             "border-accent-strong": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
             "border-strong-1": isIssueActive,
@@ -207,7 +207,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
           }
         }}
       >
-        <div className="flex gap-2 w-full truncate">
+        <div className="flex w-full gap-2 truncate">
           <div className="flex flex-grow items-center gap-0.5 truncate">
             <div className="flex items-center gap-1" style={isSubIssue ? { marginLeft } : {}}>
               {/* select checkbox */}
@@ -222,12 +222,12 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
                   }
                   disabled={issue.project_id === projectId}
                 >
-                  <div className="flex-shrink-0 grid place-items-center w-3.5 absolute left-1">
+                  <div className="absolute left-1 grid w-3.5 flex-shrink-0 place-items-center">
                     <MultipleSelectEntityAction
                       className={cn(
-                        "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
+                        "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
                         {
-                          "opacity-100 pointer-events-auto": isIssueSelected,
+                          "pointer-events-auto opacity-100": isIssueSelected,
                         }
                       )}
                       groupId={groupId}
@@ -253,11 +253,11 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
               )}
 
               {/* sub-issues chevron */}
-              <div className="size-4 grid place-items-center flex-shrink-0">
+              <div className="grid size-4 flex-shrink-0 place-items-center">
                 {subIssuesCount > 0 && !isEpic && (
                   <button
                     type="button"
-                    className="size-4 grid place-items-center rounded-xs text-placeholder hover:text-tertiary"
+                    className="grid size-4 place-items-center rounded-xs text-placeholder hover:text-tertiary"
                     onClick={handleToggleExpand}
                   >
                     <ChevronRightIcon
@@ -271,7 +271,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
               </div>
 
               {issue?.tempId !== undefined && (
-                <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
+                <div className="absolute top-0 left-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
               )}
             </div>
 
@@ -282,7 +282,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
               disabled={isCurrentBlockDragging}
               renderByDefault={false}
             >
-              <p className="truncate cursor-pointer text-body-xs-medium text-primary">{issue.name}</p>
+              <p className="cursor-pointer truncate text-body-xs-medium text-primary">{issue.name}</p>
             </Tooltip>
             {isEpic && displayProperties && (
               <WithDisplayPropertiesHOC
@@ -296,7 +296,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
           </div>
           {!issue?.tempId && (
             <div
-              className={cn("block border border-strong rounded-sm", {
+              className={cn("block rounded-sm border border-strong", {
                 "md:hidden": isSidebarCollapsed,
                 "lg:hidden": !isSidebarCollapsed,
               })}
@@ -312,7 +312,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
           {!issue?.tempId ? (
             <>
               <IssueProperties
-                className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-grow md:flex-shrink-0" : "lg:flex-grow lg:flex-shrink-0"} items-center gap-2 whitespace-nowrap`}
+                className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-shrink-0 md:flex-grow" : "lg:flex-shrink-0 lg:flex-grow"} items-center gap-2 whitespace-nowrap`}
                 issue={issue}
                 isReadOnly={!canEditIssueProperties}
                 updateIssue={updateIssue}
diff --git a/apps/web/core/components/issues/issue-layouts/list/default.tsx b/apps/web/core/components/issues/issue-layouts/list/default.tsx
index 0ee2a9d2a12..28db68addc9 100644
--- a/apps/web/core/components/issues/issue-layouts/list/default.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/default.tsx
@@ -129,7 +129,7 @@ export const List = observer(function List(props: IList) {
     entities = orderedGroups;
   }
   return (
-    <div className="relative size-full flex flex-col">
+    <div className="relative flex size-full flex-col">
       {groups && (
         <MultipleSelectGroup
           containerRef={containerRef}
@@ -140,7 +140,7 @@ export const List = observer(function List(props: IList) {
             <>
               <div
                 ref={containerRef}
-                className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto bg-surface-1"
+                className="vertical-scrollbar relative scrollbar-lg size-full overflow-auto bg-surface-1"
               >
                 {groups.map((group: IGroupByColumn) => (
                   <ListGroup
diff --git a/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
index bdb137b34c3..ad861ad2cfa 100644
--- a/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -94,14 +94,14 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
 
   return (
     <>
-      <div className="group/list-header w-full flex-shrink-0 flex items-center gap-2 py-1.5">
+      <div className="group/list-header flex w-full flex-shrink-0 items-center gap-2 py-1.5">
         {canSelectIssues && (
-          <div className="flex-shrink-0 flex items-center w-3.5 absolute left-1">
+          <div className="absolute left-1 flex w-3.5 flex-shrink-0 items-center">
             <MultipleSelectGroupAction
               className={cn(
-                "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none ",
+                "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
                 {
-                  "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
+                  "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
                 }
               )}
               groupID={groupID}
@@ -110,15 +110,15 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
             />
           </div>
         )}
-        <div className="flex-shrink-0 grid place-items-center overflow-hidden">
+        <div className="grid flex-shrink-0 place-items-center overflow-hidden">
           {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
         </div>
 
         <div
-          className="relative flex w-full flex-row items-center gap-1 overflow-hidden cursor-pointer"
+          className="relative flex w-full cursor-pointer flex-row items-center gap-1 overflow-hidden"
           onClick={() => handleCollapsedGroups(groupID)}
         >
-          <div className="inline-block line-clamp-1 truncate font-medium text-primary">{title}</div>
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
           <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
           <div className="px-2.5">
             <WorkFlowGroupTree groupBy={groupBy} groupId={groupID} />
diff --git a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
index 747ddf2da3e..5c8f56fb949 100644
--- a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -134,7 +134,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   ) : (
     <div
       className={
-        "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-8 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
+        "relative flex h-11 cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-8 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
       }
       onClick={() => loadMoreIssues(group.id)}
     >
@@ -262,7 +262,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
       })}
     >
       <Row
-        className={cn("w-full flex-shrink-0 border-b border-subtle bg-layer-1 hover:bg-layer-1-hover pr-3 py-1", {
+        className={cn("w-full flex-shrink-0 border-b border-subtle bg-layer-1 py-1 pr-3 hover:bg-layer-1-hover", {
           "sticky top-0 z-[2]": isExpanded && groupIssueCount > 0,
         })}
       >
diff --git a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index f8975acac7b..942017ca384 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -414,7 +414,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
               className={cn(
                 "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1",
                 {
-                  "hover:bg-layer-1 cursor-pointer": subIssueCount,
+                  "cursor-pointer hover:bg-layer-1": subIssueCount,
                 }
               )}
             >
diff --git a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
index d1f166d9693..a259a3281ff 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
@@ -205,13 +205,13 @@ export function LabelDropdown(props: ILabelDropdownProps) {
       <button
         ref={setReferenceElement}
         type="button"
-        className={`clickable flex w-full h-full items-center justify-center gap-1 text-caption-sm-regular ${fullWidth && "hover:bg-layer-1"} ${
+        className={`clickable flex h-full w-full items-center justify-center gap-1 text-caption-sm-regular ${fullWidth && "hover:bg-layer-1"} ${
           disabled
             ? "cursor-not-allowed text-secondary"
             : value.length <= maxRender
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-layer-1"
-        }  ${buttonClassName}`}
+        } ${buttonClassName}`}
         onClick={handleOnClick}
         disabled={disabled}
       >
@@ -242,7 +242,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
       <ComboDropDown
         as="div"
         ref={dropdownRef}
-        className={`w-auto max-w-full h-full flex-shrink-0 text-left ${className}`}
+        className={`h-full w-auto max-w-full flex-shrink-0 text-left ${className}`}
         value={value}
         onChange={onChange}
         disabled={disabled}
@@ -254,7 +254,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
         {isOpen && (
           <Combobox.Options className="fixed z-10" static>
             <div
-              className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded-sm border border-strong bg-surface-1 px-2 py-2.5 text-caption-sm-regular shadow-raised-200 focus:outline-none ${optionsClassName}`}
+              className={`z-10 my-1 h-auto w-48 rounded-sm border border-strong bg-surface-1 px-2 py-2.5 text-caption-sm-regular whitespace-nowrap shadow-raised-200 focus:outline-none ${optionsClassName}`}
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
@@ -286,7 +286,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
                         }
                       }}
                       className={({ active, selected }) =>
-                        `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
+                        `flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none hover:bg-layer-1 ${
                           active ? "bg-layer-1" : ""
                         } ${selected ? "text-primary" : "text-secondary"}`
                       }
@@ -304,7 +304,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
                     </Combobox.Option>
                   ))
                 ) : submitting ? (
-                  <Loader className="animate-spin h-3.5 w-3.5" />
+                  <Loader className="h-3.5 w-3.5 animate-spin" />
                 ) : canCreateLabel ? (
                   <p
                     onClick={() => {
@@ -323,7 +323,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
                     )}
                   </p>
                 ) : (
-                  <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
+                  <p className="text-left text-secondary">{t("common.search.no_matching_results")}</p>
                 )}
               </div>
             </div>
diff --git a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
index 496ecbeb636..816e4283736 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
@@ -142,7 +142,7 @@ const LabelItem = observer(function LabelItem({
     >
       <div
         className={cn(
-          "flex overflow-hidden justify-center hover:bg-layer-1 max-w-full h-full flex-shrink-0 items-center rounded-sm px-2.5 text-caption-sm-regular",
+          "flex h-full max-w-full flex-shrink-0 items-center justify-center overflow-hidden rounded-sm px-2.5 text-caption-sm-regular hover:bg-layer-1",
           !disabled && "cursor-pointer",
           fullWidth && "w-full",
           noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong"
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index 8ae79765e9e..91fc2e26422 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -160,7 +160,7 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-tertiary whitespace-pre-line", {
+                        className={cn("whitespace-pre-line text-tertiary", {
                           "text-placeholder": item.disabled,
                         })}
                       >
@@ -198,7 +198,7 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-tertiary whitespace-pre-line", {
+                          className={cn("whitespace-pre-line text-tertiary", {
                             "text-placeholder": nestedItem.disabled,
                           })}
                         >
@@ -233,7 +233,7 @@ export const AllIssueQuickActions = observer(function AllIssueQuickActions(props
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index 0149f038af2..beb885bddd7 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -117,7 +117,7 @@ export const ArchivedIssueQuickActions = observer(function ArchivedIssueQuickAct
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 319a8873290..bcd9ed8f8ab 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -173,7 +173,7 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-tertiary whitespace-pre-line", {
+                        className={cn("whitespace-pre-line text-tertiary", {
                           "text-placeholder": item.disabled,
                         })}
                       >
@@ -211,7 +211,7 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-tertiary whitespace-pre-line", {
+                          className={cn("whitespace-pre-line text-tertiary", {
                             "text-placeholder": nestedItem.disabled,
                           })}
                         >
@@ -246,7 +246,7 @@ export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(p
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
index 489e47f03d5..82e65dd0278 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
@@ -262,7 +262,7 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-tertiary whitespace-pre-line", {
+                        className={cn("whitespace-pre-line text-tertiary", {
                           "text-placeholder": item.disabled,
                         })}
                       >
@@ -300,7 +300,7 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-tertiary whitespace-pre-line", {
+                          className={cn("whitespace-pre-line text-tertiary", {
                             "text-placeholder": nestedItem.disabled,
                           })}
                         >
@@ -335,7 +335,7 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 30ce5cd3348..3760b7278d7 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -172,7 +172,7 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-tertiary whitespace-pre-line", {
+                        className={cn("whitespace-pre-line text-tertiary", {
                           "text-placeholder": item.disabled,
                         })}
                       >
@@ -210,7 +210,7 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-tertiary whitespace-pre-line", {
+                          className={cn("whitespace-pre-line text-tertiary", {
                             "text-placeholder": nestedItem.disabled,
                           })}
                         >
@@ -245,7 +245,7 @@ export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index d9070a6e370..4ac03dc6a08 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -173,7 +173,7 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-tertiary whitespace-pre-line", {
+                        className={cn("whitespace-pre-line text-tertiary", {
                           "text-placeholder": item.disabled,
                         })}
                       >
@@ -211,7 +211,7 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-tertiary whitespace-pre-line", {
+                          className={cn("whitespace-pre-line text-tertiary", {
                             "text-placeholder": nestedItem.disabled,
                           })}
                         >
@@ -246,7 +246,7 @@ export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActio
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
index d6f2f0c8b1c..2700c788867 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
@@ -21,8 +21,8 @@ export const GanttQuickAddIssueButton = observer(function GanttQuickAddIssueButt
       className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center border-t-[1px] border-subtle bg-layer-transparent hover:bg-layer-transparent-hover"
       onClick={onClick}
     >
-      <Row className="flex py-2 gap-2">
-        <PlusIcon className="h-3.5 w-3.5 stroke-2 my-auto" />
+      <Row className="flex gap-2 py-2">
+        <PlusIcon className="my-auto h-3.5 w-3.5 stroke-2" />
         <span className="text-13 font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
       </Row>
     </button>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
index 399b454a590..5a02c87768a 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
@@ -16,7 +16,7 @@ export const KanbanQuickAddIssueButton = observer(function KanbanQuickAddIssueBu
   const { t } = useTranslation();
   return (
     <div
-      className="flex w-full cursor-pointer items-center gap-2 py-1.5 hover:bg-layer-transparent-hover bg-layer-transparent rounded-lg  px-2  py-1"
+      className="flex w-full cursor-pointer items-center gap-2 rounded-lg bg-layer-transparent px-2 py-1 py-1.5 hover:bg-layer-transparent-hover"
       onClick={onClick}
     >
       <PlusIcon className="h-3.5 w-3.5 stroke-2" />
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
index ae21a2eb1cc..dce450308ff 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
@@ -17,7 +17,7 @@ export const ListQuickAddIssueButton = observer(function ListQuickAddIssueButton
   const { t } = useTranslation();
   return (
     <Row
-      className="flex w-full cursor-pointer items-center gap-2 py-3 bg-layer-transparent hover:bg-layer-transparent-hover"
+      className="flex w-full cursor-pointer items-center gap-2 bg-layer-transparent py-3 hover:bg-layer-transparent-hover"
       onClick={onClick}
     >
       <PlusIcon className="h-3.5 w-3.5 stroke-2" />
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
index 62b89a2fcca..f3f742ff92b 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
@@ -18,7 +18,7 @@ export const SpreadsheetAddIssueButton = observer(function SpreadsheetAddIssueBu
     <div className="flex items-center">
       <button
         type="button"
-        className="flex items-center gap-x-[6px] w-full px-2 py-2 bg-layer-transparent hover:bg-layer-transparent-hover transition-colors"
+        className="flex w-full items-center gap-x-[6px] bg-layer-transparent px-2 py-2 transition-colors hover:bg-layer-transparent-hover"
         onClick={onClick}
       >
         <PlusIcon className="h-3.5 w-3.5 stroke-2" />
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
index d43a9e1e1e9..1079a45fbf6 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
@@ -20,9 +20,9 @@ export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssue
       <form
         ref={ref}
         onSubmit={onSubmit}
-        className="z-50 flex w-full items-center gap-x-2 rounded-sm md:border-[0.5px] border-subtle bg-surface-1 px-2 md:shadow-raised-100 transition-opacity"
+        className="z-50 flex w-full items-center gap-x-2 rounded-sm border-subtle bg-surface-1 px-2 transition-opacity md:border-[0.5px] md:shadow-raised-100"
       >
-        <h4 className="text-13 md:text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
+        <h4 className="text-13 leading-5 text-placeholder md:text-11">{projectDetail?.identifier ?? "..."}</h4>
         <input
           type="text"
           autoComplete="off"
@@ -30,7 +30,7 @@ export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssue
           {...register("name", {
             required: `${isEpic ? "Epic" : "Work item"} title is required.`,
           })}
-          className="w-full rounded-md bg-transparent py-1.5 pr-2 text-13 md:text-11 font-medium leading-5 text-secondary outline-none"
+          className="w-full rounded-md bg-transparent py-1.5 pr-2 text-13 leading-5 font-medium text-secondary outline-none md:text-11"
         />
       </form>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
index 05e384705e7..01c61213fdf 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
@@ -29,11 +29,11 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
             {...register("name", {
               required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
-            className="w-full rounded-md bg-transparent px-2 py-3 text-13 font-medium leading-5 text-secondary outline-none"
+            className="w-full rounded-md bg-transparent px-2 py-3 text-13 leading-5 font-medium text-secondary outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-11 bg-surface-1 italic text-secondary">
+      <div className="bg-surface-1 px-3 py-2 text-11 text-secondary italic">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </div>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
index 80110dfbe59..0338a4f58c3 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
@@ -13,21 +13,21 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
   const { ref, projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className="m-1 overflow-hidden rounded-sm shadow-raised-200 bg-layer-2">
+    <div className="m-1 overflow-hidden rounded-sm bg-layer-2 shadow-raised-200">
       <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 p-3">
         <div className="w-full">
-          <h4 className="text-11 font-medium leading-5 text-tertiary">{projectDetail?.identifier ?? "..."}</h4>
+          <h4 className="text-11 leading-5 font-medium text-tertiary">{projectDetail?.identifier ?? "..."}</h4>
           <input
             autoComplete="off"
             placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
             {...register("name", {
               required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
-            className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-13 font-medium leading-5 text-secondary outline-none"
+            className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-13 leading-5 font-medium text-secondary outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-11 italic text-tertiary bg-layer-3">
+      <div className="bg-layer-3 px-3 py-2 text-11 text-tertiary italic">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </div>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
index b08135fac2c..7aba3fc4413 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
@@ -28,11 +28,11 @@ export const ListQuickAddIssueForm = observer(function ListQuickAddIssueForm(pro
             {...register("name", {
               required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
-            className="w-full rounded-md bg-transparent px-2 py-3 text-13 font-medium leading-5 text-secondary outline-none"
+            className="w-full rounded-md bg-transparent px-2 py-3 text-13 leading-5 font-medium text-secondary outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-11 italic text-secondary">
+      <div className="px-3 py-2 text-11 text-secondary italic">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </div>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
index f2e3bda3b47..10a1acc16bb 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
@@ -30,7 +30,7 @@ export const SpreadsheetQuickAddIssueForm = observer(function SpreadsheetQuickAd
           className="w-full rounded-md bg-transparent py-3 text-13 leading-5 text-secondary outline-none"
         />
       </form>
-      <p className="ml-3 mt-3 text-11 italic text-secondary">
+      <p className="mt-3 ml-3 text-11 text-secondary italic">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </p>
     </div>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
index 89038fba3c0..4d0f784159d 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -162,7 +162,7 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
           {customQuickAddButton && <>{customQuickAddButton}</>}
           {!QuickAddButton && !customQuickAddButton && (
             <button
-              className="flex w-full cursor-pointer items-center gap-2 px-2 py-3 bg-layer-transparent hover:bg-layer-transparent-hover"
+              className="flex w-full cursor-pointer items-center gap-2 bg-layer-transparent px-2 py-3 hover:bg-layer-transparent-hover"
               onClick={() => handleIsOpen(true)}
             >
               <PlusIcon className="h-3.5 w-3.5 stroke-2" />
diff --git a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
index e6ab9a1c921..79696b807e0 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -89,8 +89,8 @@ export const ProjectLayoutRoot = observer(function ProjectLayoutRoot() {
             <div className="relative h-full w-full overflow-auto bg-surface-1">
               {/* mutation loader */}
               {issues?.getIssueLoader() === "mutation" && (
-                <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-layer-1 shadow-sm rounded-sm">
-                  <Spinner className="w-4 h-4" />
+                <div className="shadow-sm fixed top-[70px] right-[20px] z-50 flex h-[40px] w-[40px] items-center justify-center rounded-sm bg-layer-1">
+                  <Spinner className="h-4 w-4" />
                 </div>
               )}
               <ProjectIssueLayout activeLayout={activeLayout} />
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index c248ee80815..2ec3a94b38d 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -18,7 +18,7 @@ export const SpreadsheetAttachmentColumn = observer(function SpreadsheetAttachme
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {issue?.attachment_count ?? 0} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index 8798d31b3f6..824132072f5 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -20,7 +20,7 @@ export const SpreadsheetCreatedOnColumn = observer(function SpreadsheetCreatedOn
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {renderFormattedDate(issue.created_at)}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index d60a1c8d0a8..580198afa03 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -52,7 +52,7 @@ export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColu
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full"
         buttonClassName={cn(
-          "rounded-none text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x",
+          "rounded-none px-page-x text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10",
           {
             "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 4aee8beaa40..02ae8b669fc 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -28,13 +28,13 @@ export const SpreadsheetLabelColumn = observer(function SpreadsheetLabelColumn(p
   const defaultLabelOptions = issue?.label_ids?.map((id) => labelMap[id]) || [];
 
   return (
-    <div className="h-11 border-b-[0.5px] border-subtle w-full">
+    <div className="h-11 w-full border-b-[0.5px] border-subtle">
       <IssuePropertyLabels
         projectId={issue.project_id ?? null}
         value={issue.label_ids || []}
         defaultOptions={defaultLabelOptions}
         onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
-        className="h-full w-full "
+        className="h-full w-full"
         buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 rounded-none"
         hideDropdownArrow
         maxRender={1}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index 0ceb32c9861..305a2624c12 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -18,7 +18,7 @@ export const SpreadsheetLinkColumn = observer(function SpreadsheetLinkColumn(pro
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle px-2.5 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle px-2.5 px-page-x py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {issue?.link_count ?? 0} {issue?.link_count === 1 ? "link" : "links"}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index d23887fdfb6..dcdcc4b425f 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -42,7 +42,7 @@ export const SpreadsheetSubIssueColumn = observer(function SpreadsheetSubIssueCo
     <Row
       onClick={subIssueCount ? redirectToIssueDetail : () => {}}
       className={cn(
-        "flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 hover:bg-surface-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary",
+        "flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-surface-2 group-[.selected-issue-row]:hover:bg-accent-primary",
         {
           "cursor-pointer": subIssueCount,
         }
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index dfb398d5d35..f099eddcb63 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -20,7 +20,7 @@ export const SpreadsheetUpdatedOnColumn = observer(function SpreadsheetUpdatedOn
   const { issue } = props;
 
   return (
-    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
       {renderFormattedDate(issue.updated_at)}
     </Row>
   );
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
index ad0adf91be9..e492c100b4d 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@@ -45,7 +45,7 @@ export const IssueColumn = observer(function IssueColumn(props: Props) {
     >
       <td
         tabIndex={0}
-        className="h-11 min-w-36 text-13 after:absolute after:w-full after:bottom-[-1px] after:border after:border-subtle border-r-[1px] border-subtle"
+        className="h-11 min-w-36 border-r-[1px] border-subtle text-13 after:absolute after:bottom-[-1px] after:w-full after:border after:border-subtle"
         ref={tableCellRef}
       >
         <Column
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index b2e08aae935..c511fd31815 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -214,7 +214,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
   const customActionButton = (
     <div
       ref={menuActionRef}
-      className={`flex items-center h-full w-full cursor-pointer rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+      className={`flex h-full w-full cursor-pointer items-center rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
         isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
@@ -261,7 +261,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
         id={`issue-${issueId}`}
         ref={cellRef}
         tabIndex={0}
-        className="relative md:sticky left-0 z-10 group/list-block bg-surface-1 max-w-lg"
+        className="group/list-block relative left-0 z-10 max-w-lg bg-surface-1 md:sticky"
       >
         <ControlLink
           href={workItemLink}
@@ -271,7 +271,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
         >
           <Row
             className={cn(
-              "group clickable cursor-pointer h-11 w-full flex items-center text-13 after:absolute border-r-[0.5px] z-10 border-subtle-1 bg-transparent group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10",
+              "group clickable z-10 flex h-11 w-full cursor-pointer items-center border-r-[0.5px] border-subtle-1 bg-transparent text-13 group-[.selected-issue-row]:bg-accent-primary/5 after:absolute group-[.selected-issue-row]:hover:bg-accent-primary/10",
               {
                 "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
                 "border border-accent-strong hover:border-accent-strong":
@@ -282,7 +282,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
           >
             {/* Identifier section - conditionally rendered */}
             {displayProperties?.key && (
-              <div className="flex-shrink-0 flex items-center h-full min-w-24">
+              <div className="flex h-full min-w-24 flex-shrink-0 items-center">
                 <div className="relative flex cursor-pointer items-center text-11 hover:text-primary">
                   {issueDetail.project_id && (
                     <IssueIdentifier
@@ -299,7 +299,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
 
             {/* Workitem section */}
             <div
-              className={cn("flex items-center gap-0.5 py-2 flex-grow", {
+              className={cn("flex flex-grow items-center gap-0.5 py-2", {
                 "min-w-[360px]": !displayProperties?.key,
                 "min-w-60": displayProperties?.key,
               })}
@@ -316,12 +316,12 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
                   }
                   disabled={issueDetail.project_id === projectId}
                 >
-                  <div className="flex-shrink-0 grid place-items-center w-3.5 mr-1 absolute left-1">
+                  <div className="absolute left-1 mr-1 grid w-3.5 flex-shrink-0 place-items-center">
                     <MultipleSelectEntityAction
                       className={cn(
-                        "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
+                        "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
                         {
-                          "opacity-100 pointer-events-auto": isIssueSelected,
+                          "pointer-events-auto opacity-100": isIssueSelected,
                         }
                       )}
                       groupId={SPREADSHEET_SELECT_GROUP}
@@ -337,11 +337,11 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
               {nestingLevel !== 0 && <div style={{ width: subIssueIndentation }} />}
 
               {/* sub-issues chevron */}
-              <div className="grid place-items-center size-4">
+              <div className="grid size-4 place-items-center">
                 {subIssuesCount > 0 && !isEpic && (
                   <button
                     type="button"
-                    className="grid place-items-center size-4 rounded-xs text-placeholder hover:text-tertiary"
+                    className="grid size-4 place-items-center rounded-xs text-placeholder hover:text-tertiary"
                     onClick={handleToggleExpand}
                   >
                     <ChevronRightIcon
@@ -354,8 +354,8 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
                 )}
               </div>
 
-              <div className="flex items-center gap-2 justify-between h-full w-full truncate my-auto">
-                <div className="w-full line-clamp-1 text-14 text-primary">
+              <div className="my-auto flex h-full w-full items-center justify-between gap-2 truncate">
+                <div className="line-clamp-1 w-full text-14 text-primary">
                   <div className="w-full overflow-hidden">
                     <Tooltip tooltipContent={issueDetail.name} isMobile={isMobile}>
                       <div
@@ -368,7 +368,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails
                   </div>
                 </div>
                 <div
-                  className={`opacity-0 group-hover:opacity-100 transition-opacity ${isMenuActive ? "!opacity-100" : ""}`}
+                  className={`opacity-0 transition-opacity group-hover:opacity-100 ${isMenuActive ? "!opacity-100" : ""}`}
                   onClick={(e) => e.stopPropagation()}
                 >
                   {quickActions({
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
index 5d174a61d17..99576d60b66 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
@@ -36,7 +36,7 @@ export const SpreadsheetHeaderColumn = observer(function SpreadsheetHeaderColumn
       shouldRenderProperty={() => shouldRenderProperty}
     >
       <th
-        className="h-11 min-w-36 items-center bg-layer-1 text-13 font-medium py-1 border border-b-0 border-t-0 border-subtle"
+        className="h-11 min-w-36 items-center border border-t-0 border-b-0 border-subtle bg-layer-1 py-1 text-13 font-medium"
         ref={tableHeaderCellRef}
         tabIndex={0}
       >
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index 9cfe55ebef2..c9e2bee5431 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -51,19 +51,19 @@ export const SpreadsheetHeader = observer(function SpreadsheetHeader(props: Prop
       <tr>
         {/* Single header column containing both identifier and workitem */}
         <th
-          className="group/list-header md:sticky min-w-60 left-0 z-[15] h-11 bg-layer-1 text-13 font-medium border-r-[0.5px] border-subtle"
+          className="group/list-header left-0 z-[15] h-11 min-w-60 border-r-[0.5px] border-subtle bg-layer-1 text-13 font-medium md:sticky"
           tabIndex={-1}
         >
-          <div className="flex items-center gap-2 h-full w-full px-page-x">
+          <div className="flex h-full w-full items-center gap-2 px-page-x">
             {/* Workitem header section */}
-            <div className="flex items-center gap-1 flex-grow h-full py-2.5 min-w-80">
+            <div className="flex h-full min-w-80 flex-grow items-center gap-1 py-2.5">
               {canSelectIssues && (
-                <div className="flex-shrink-0 flex items-center w-3.5 mr-1">
+                <div className="mr-1 flex w-3.5 flex-shrink-0 items-center">
                   <MultipleSelectGroupAction
                     className={cn(
-                      "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
+                      "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
                       {
-                        "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
+                        "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
                       }
                     )}
                     groupID={SPREADSHEET_SELECT_GROUP}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index c85e918a178..799eb9b71ed 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -111,7 +111,7 @@ export const SpreadsheetTable = observer(function SpreadsheetTable(props: Props)
   const displayPropertiesCount = getDisplayPropertiesCount(displayProperties, ignoreFieldsForCounting);
 
   return (
-    <table className="overflow-y-auto bg-surface-1 w-full" onKeyDown={handleKeyBoardNavigation}>
+    <table className="w-full overflow-y-auto bg-surface-1" onKeyDown={handleKeyBoardNavigation}>
       <SpreadsheetHeader
         displayProperties={displayProperties}
         displayFilters={displayFilters}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 0f8efa2ac1e..f3f143db4ef 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -79,7 +79,7 @@ export const SpreadsheetView = observer(function SpreadsheetView(props: Props) {
 
   if (!issueIds || issueIds.length === 0) return <></>;
   return (
-    <div className="relative flex h-full w-full flex-col overflow-x-hidden whitespace-nowrap bg-layer-1 text-secondary">
+    <div className="relative flex h-full w-full flex-col overflow-x-hidden bg-layer-1 whitespace-nowrap text-secondary">
       <div ref={portalRef} className="spreadsheet-menu-portal" />
       <MultipleSelectGroup
         containerRef={containerRef}
@@ -110,7 +110,7 @@ export const SpreadsheetView = observer(function SpreadsheetView(props: Props) {
               />
             </div>
             <div className="border-t border-subtle">
-              <div className="z-5 sticky bottom-0 left-0">
+              <div className="sticky bottom-0 left-0 z-5">
                 {enableQuickCreateIssue && !disableIssueCreation && (
                   <QuickAddIssueRoot
                     layout={EIssueLayoutTypes.SPREADSHEET}
diff --git a/apps/web/core/components/issues/issue-layouts/utils.tsx b/apps/web/core/components/issues/issue-layouts/utils.tsx
index f7add993278..c1a1a89f358 100644
--- a/apps/web/core/components/issues/issue-layouts/utils.tsx
+++ b/apps/web/core/components/issues/issue-layouts/utils.tsx
@@ -141,7 +141,7 @@ const getProjectColumns = (): IGroupByColumn[] | undefined => {
         id: project.id,
         name: project.name,
         icon: (
-          <div className="w-6 h-6 grid place-items-center flex-shrink-0">
+          <div className="grid h-6 w-6 flex-shrink-0 place-items-center">
             <Logo logo={project.logo_props} />
           </div>
         ),
diff --git a/apps/web/core/components/issues/issue-modal/base.tsx b/apps/web/core/components/issues/issue-modal/base.tsx
index d30ac73bb73..c9131dcc92a 100644
--- a/apps/web/core/components/issues/issue-modal/base.tsx
+++ b/apps/web/core/components/issues/issue-modal/base.tsx
@@ -387,7 +387,7 @@ export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueMod
       isOpen={isOpen}
       position={EModalPosition.TOP}
       width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
-      className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"
+      className="rounded-lg !bg-transparent shadow-none transition-[width] ease-linear"
     >
       {withDraftIssueWrapper ? (
         <DraftIssueLayout {...commonIssueModalProps} changesMade={changesMade} onChange={handleFormChange} />
diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index 249f9dd6c01..dee03b21dde 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -271,7 +271,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
             customButton={
               <button
                 type="button"
-                className="flex cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
+                className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
               >
                 {selectedParentIssue?.project_id && (
                   <IssueIdentifier
@@ -313,7 +313,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
         ) : (
           <button
             type="button"
-            className="flex cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
+            className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
             onClick={() => setParentIssueListModalOpen(true)}
           >
             <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
diff --git a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
index 5a20b6c1c51..54225c6b71a 100644
--- a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
@@ -154,9 +154,9 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
   };
 
   return (
-    <div className="border-[0.5px] border-subtle-1 bg-layer-2 rounded-lg relative">
+    <div className="relative rounded-lg border-[0.5px] border-subtle-1 bg-layer-2">
       {descriptionHtmlData === undefined || !projectId ? (
-        <Loader className="min-h-[120px] max-h-64 space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
+        <Loader className="max-h-64 min-h-[120px] space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
           <Loader.Item width="100%" height="26px" />
           <div className="flex items-center gap-2">
             <Loader.Item width="26px" height="26px" />
@@ -170,7 +170,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
           <div className="flex items-center gap-2">
             <Loader.Item width="50%" height="26px" />
           </div>
-          <div className="border-0.5 absolute bottom-2 right-3.5 z-10 flex items-center gap-2">
+          <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
             <Loader.Item width="100px" height="26px" />
             <Loader.Item width="50px" height="26px" />
           </div>
@@ -247,7 +247,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
             {issueName && issueName.trim() !== "" && config?.has_llm_configured && (
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded-sm bg-surface-2 hover:bg-layer-1 px-1.5 py-1 text-caption-sm-regular ${
+                className={`flex items-center gap-1 rounded-sm bg-surface-2 px-1.5 py-1 text-caption-sm-regular hover:bg-layer-1 ${
                   iAmFeelingLucky ? "cursor-wait" : ""
                 }`}
                 onClick={handleAutoGenerateDescription}
@@ -278,7 +278,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
                 button={
                   <button
                     type="button"
-                    className="flex items-center gap-1 rounded-sm px-1.5 py-1 text-caption-sm-regular bg-surface-2 hover:bg-layer-1"
+                    className="flex items-center gap-1 rounded-sm bg-surface-2 px-1.5 py-1 text-caption-sm-regular hover:bg-layer-1"
                     onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     tabIndex={-1}
                   >
diff --git a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
index 0912e8cb564..67748b18a0a 100644
--- a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
@@ -39,7 +39,7 @@ export const IssueParentTag = observer(function IssueParentTag(props: TIssuePare
       control={control}
       name="parent_id"
       render={({ field: { onChange } }) => (
-        <div className="flex w-min items-center gap-2 whitespace-nowrap rounded-sm bg-surface-2 p-2 text-caption-sm-regular">
+        <div className="flex w-min items-center gap-2 rounded-sm bg-surface-2 p-2 text-caption-sm-regular whitespace-nowrap">
           <div className="flex items-center gap-2">
             <span
               className="block h-1.5 w-1.5 rounded-full"
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index be024feb9ad..01812b1bca9 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -379,14 +379,14 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
   return (
     <FormProvider {...methods}>
       <div className="flex gap-2 bg-transparent">
-        <div className="rounded-lg w-full">
+        <div className="w-full rounded-lg">
           <form
             ref={formRef}
             onSubmit={handleSubmit((data) => handleFormSubmit(data))}
-            className="flex flex-col w-full"
+            className="flex w-full flex-col"
           >
-            <div className="p-5 rounded-t-lg bg-surface-1">
-              <h3 className="text-h4-medium text-secondary pb-2">{modalTitle}</h3>
+            <div className="rounded-t-lg bg-surface-1 p-5">
+              <h3 className="pb-2 text-h4-medium text-secondary">{modalTitle}</h3>
               <div className="flex items-center justify-between pt-2 pb-4">
                 <div className="flex items-center gap-x-1">
                   <IssueProjectSelect
@@ -454,9 +454,9 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
             </div>
             <div
               className={cn(
-                "pb-4 space-y-3 bg-surface-1",
+                "space-y-3 bg-surface-1 pb-4",
                 activeAdditionalPropertiesLength > 4 &&
-                  "max-h-[45vh] overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-sm"
+                  "vertical-scrollbar scrollbar-sm max-h-[45vh] overflow-hidden overflow-y-auto"
               )}
             >
               <div className="px-5">
@@ -490,7 +490,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
             </div>
             <div
               className={cn(
-                "px-4 py-3 border-t-[0.5px] border-subtle rounded-b-lg bg-surface-1",
+                "rounded-b-lg border-t-[0.5px] border-subtle bg-surface-1 px-4 py-3",
                 activeAdditionalPropertiesLength > 0 && "shadow-raised-100"
               )}
             >
@@ -511,12 +511,12 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
               </div>
               {showActionButtons && (
                 <div
-                  className="flex items-center justify-end gap-4 pb-3 pt-6 border-t-[0.5px] border-subtle"
+                  className="flex items-center justify-end gap-4 border-t-[0.5px] border-subtle pt-6 pb-3"
                   tabIndex={getIndex("create_more")}
                 >
                   {!data?.id && (
                     <div
-                      className="inline-flex items-center gap-1.5 cursor-pointer"
+                      className="inline-flex cursor-pointer items-center gap-1.5"
                       onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
                       onKeyDown={(e) => {
                         if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
@@ -581,7 +581,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
         {shouldRenderDuplicateModal && (
           <div
             ref={modalContainerRef}
-            className="relative flex flex-col gap-2.5 px-3 py-4 rounded-lg shadow-xl bg-pi-50"
+            className="shadow-xl bg-pi-50 relative flex flex-col gap-2.5 rounded-lg px-3 py-4"
             style={{ maxHeight: formRef?.current?.offsetHeight ? `${formRef.current.offsetHeight}px` : "436px" }}
           >
             <DuplicateModalRoot
diff --git a/apps/web/core/components/issues/issue-update-status.tsx b/apps/web/core/components/issues/issue-update-status.tsx
index 0b2e3588b03..2fab140e9f3 100644
--- a/apps/web/core/components/issues/issue-update-status.tsx
+++ b/apps/web/core/components/issues/issue-update-status.tsx
@@ -25,7 +25,7 @@ export const NameDescriptionUpdateStatus = observer(function NameDescriptionUpda
         }`}
       >
         {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
-          <RefreshCw className="animate-spin size-3.5 stroke-tertiary" />
+          <RefreshCw className="size-3.5 animate-spin stroke-tertiary" />
         )}
         <span className="text-13 text-tertiary">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
       </div>
diff --git a/apps/web/core/components/issues/label.tsx b/apps/web/core/components/issues/label.tsx
index 2b9fa832f83..bc9d040f861 100644
--- a/apps/web/core/components/issues/label.tsx
+++ b/apps/web/core/components/issues/label.tsx
@@ -23,7 +23,7 @@ export function ViewIssueLabel({ labelDetails, maxRender = 1 }: Props) {
             {labelDetails.map((label) => (
               <div
                 key={label.id}
-                className="flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11 shadow-sm"
+                className="shadow-sm flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11"
               >
                 <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name} isMobile={isMobile}>
                   <div className="flex items-center gap-1.5 text-secondary">
@@ -40,7 +40,7 @@ export function ViewIssueLabel({ labelDetails, maxRender = 1 }: Props) {
             ))}
           </>
         ) : (
-          <div className="flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11 shadow-sm">
+          <div className="shadow-sm flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11">
             <Tooltip
               position="top"
               tooltipHeading="Labels"
diff --git a/apps/web/core/components/issues/layout-quick-actions.tsx b/apps/web/core/components/issues/layout-quick-actions.tsx
index 0c7b983d6a6..39f5061bea3 100644
--- a/apps/web/core/components/issues/layout-quick-actions.tsx
+++ b/apps/web/core/components/issues/layout-quick-actions.tsx
@@ -54,7 +54,7 @@ export const LayoutQuickActions = observer(function LayoutQuickActions(props: Pr
         placement="bottom-end"
         closeOnSelect
         maxHeight="lg"
-        className="flex-shrink-0 flex items-center justify-center size-[26px] rounded"
+        className="flex size-[26px] flex-shrink-0 items-center justify-center rounded"
         customButton={<IconButton size="lg" variant="tertiary" icon={Ellipsis} />}
       >
         {MENU_ITEMS.map((item) => {
diff --git a/apps/web/core/components/issues/parent-issues-list-modal.tsx b/apps/web/core/components/issues/parent-issues-list-modal.tsx
index 98b266e1c62..f1999265784 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -102,11 +102,11 @@ export function ParentIssuesListModal({
       >
         <div className="relative m-1">
           <SearchIcon
-            className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
             aria-hidden="true"
           />
           <Combobox.Input
-            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-primary outline-none placeholder:text-placeholder focus:ring-0 sm:text-13"
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none placeholder:text-placeholder focus:ring-0 sm:text-13"
             placeholder={t("common.search.placeholder")}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
@@ -114,7 +114,7 @@ export function ParentIssuesListModal({
             tabIndex={baseTabIndex}
           />
         </div>
-        <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto vertical-scrollbar scrollbar-md">
+        <Combobox.Options static className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto">
           {searchTerm !== "" && (
             <h5 className="mx-2 text-13 text-secondary">
               Search results for{" "}
@@ -150,7 +150,7 @@ export function ParentIssuesListModal({
                       key={issue.id}
                       value={issue}
                       className={({ active, selected }) =>
-                        `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-secondary ${
+                        `group my-0.5 flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-3 py-2 text-secondary select-none ${
                           active ? "bg-layer-1 text-primary" : ""
                         } ${selected ? "text-primary" : ""}`
                       }
@@ -183,7 +183,7 @@ export function ParentIssuesListModal({
                           sequenceId: issue?.sequence_id,
                         })}
                         target="_blank"
-                        className="z-1 relative hidden flex-shrink-0 text-secondary hover:text-primary group-hover:block"
+                        className="relative z-1 hidden flex-shrink-0 text-secondary group-hover:block hover:text-primary"
                         rel="noopener noreferrer"
                         onClick={(e) => e.stopPropagation()}
                       >
diff --git a/apps/web/core/components/issues/peek-overview/error.tsx b/apps/web/core/components/issues/peek-overview/error.tsx
index b2e46cbc16d..c616c3592cd 100644
--- a/apps/web/core/components/issues/peek-overview/error.tsx
+++ b/apps/web/core/components/issues/peek-overview/error.tsx
@@ -24,16 +24,16 @@ export function IssuePeekOverviewError(props: TIssuePeekOverviewError) {
   const { isMobile } = usePlatformOS();
 
   return (
-    <div className="w-full h-full overflow-hidden relative flex flex-col">
-      <div className="flex-shrink-0 flex justify-start">
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
+      <div className="flex flex-shrink-0 justify-start">
         <Tooltip tooltipContent="Close the peek view" isMobile={isMobile}>
-          <button onClick={removeRoutePeekId} className="w-5 h-5 m-5">
+          <button onClick={removeRoutePeekId} className="m-5 h-5 w-5">
             <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
           </button>
         </Tooltip>
       </div>
 
-      <div className="w-full h-full">
+      <div className="h-full w-full">
         <EmptyState
           image={emptyIssue ?? undefined}
           title="Work item does not exist"
diff --git a/apps/web/core/components/issues/peek-overview/loader.tsx b/apps/web/core/components/issues/peek-overview/loader.tsx
index ac99523e917..0be333fe517 100644
--- a/apps/web/core/components/issues/peek-overview/loader.tsx
+++ b/apps/web/core/components/issues/peek-overview/loader.tsx
@@ -21,8 +21,8 @@ export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
   const { isMobile } = usePlatformOS();
 
   return (
-    <Loader className="w-full h-screen overflow-hidden p-5 space-y-6">
-      <div className="flex justify-between items-center gap-2">
+    <Loader className="h-screen w-full space-y-6 overflow-hidden p-5">
+      <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <Tooltip tooltipContent="Close the peek view" isMobile={isMobile}>
             <button onClick={removeRoutePeekId}>
@@ -62,7 +62,7 @@ export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
       </div>
 
       {/* sub issues */}
-      <div className="flex justify-between items-center gap-2">
+      <div className="flex items-center justify-between gap-2">
         <Loader.Item width="80px" height="20px" />
         <Loader.Item width="100px" height="20px" />
       </div>
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index c2cbcdf767c..666f00e918b 100644
--- a/apps/web/core/components/issues/peek-overview/properties.tsx
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -81,7 +81,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
   return (
     <div>
       <h6 className="text-body-xs-medium">{t("common.properties")}</h6>
-      <div className={`w-full space-y-3 mt-3 ${disabled ? "opacity-60" : ""}`}>
+      <div className={`mt-3 w-full space-y-3 ${disabled ? "opacity-60" : ""}`}>
         <SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
           <StateDropdown
             value={issue?.state_id}
@@ -89,7 +89,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             projectId={projectId}
             disabled={disabled}
             buttonVariant="transparent-with-text"
-            className="w-full grow group"
+            className="group w-full grow"
             buttonContainerClassName="w-full text-left h-7.5"
             buttonClassName={`text-body-xs-medium ${issue?.state_id ? "" : "text-placeholder"}`}
             dropdownArrow
@@ -106,7 +106,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             placeholder={t("issue.add.assignee")}
             multiple
             buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
-            className="w-full grow group"
+            className="group w-full grow"
             buttonContainerClassName="w-full text-left h-7.5"
             buttonClassName={`text-body-xs-medium justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
             hideIcon={issue.assignee_ids?.length === 0}
@@ -121,7 +121,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
             disabled={disabled}
             buttonVariant="transparent-with-text"
-            className="w-full h-7.5 grow rounded-sm"
+            className="h-7.5 w-full grow rounded-sm"
             buttonContainerClassName="w-full text-left h-7.5"
             buttonClassName={`text-body-xs-medium whitespace-nowrap [&_svg]:size-3.5 ${!issue?.priority || issue?.priority === "none" ? "text-placeholder" : ""}`}
           />
@@ -137,7 +137,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               showTooltip
               userIds={createdByDetails?.display_name.includes("-intake") ? null : createdByDetails?.id}
             />
-            <span className="grow truncate text-body-xs-medium text-secondary leading-5">
+            <span className="grow truncate text-body-xs-medium leading-5 text-secondary">
               {createdByDetails?.display_name.includes("-intake") ? "Plane" : createdByDetails?.display_name}
             </span>
           </SidebarPropertyListItem>
@@ -155,7 +155,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             buttonVariant="transparent-with-text"
             maxDate={maxDate ?? undefined}
             disabled={disabled}
-            className="w-full grow group"
+            className="group w-full grow"
             buttonContainerClassName="w-full text-left h-7.5"
             buttonClassName={`text-body-xs-medium ${issue?.start_date ? "" : "text-placeholder"}`}
             hideIcon
@@ -164,7 +164,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
         </SidebarPropertyListItem>
 
         <SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("common.order_by.due_date")}>
-          <div className="flex items-center gap-2 w-full">
+          <div className="flex w-full items-center gap-2">
             <DateDropdown
               value={issue.target_date}
               onChange={(val) =>
@@ -176,7 +176,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               buttonVariant="transparent-with-text"
               minDate={minDate ?? undefined}
               disabled={disabled}
-              className="w-full grow group"
+              className="group w-full grow"
               buttonContainerClassName="w-full text-left h-7.5"
               buttonClassName={cn("text-body-xs-medium", {
                 "text-placeholder": !issue.target_date,
@@ -197,7 +197,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               projectId={projectId}
               disabled={disabled}
               buttonVariant="transparent-with-text"
-              className="w-full grow group"
+              className="group w-full grow"
               buttonContainerClassName="w-full text-left h-7.5"
               buttonClassName={`text-body-xs-medium ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
               placeholder="None"
@@ -228,7 +228,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             appendElement={<TransferHopInfo workItem={issue} />}
           >
             <IssueCycleSelect
-              className="w-full grow h-7.5"
+              className="h-7.5 w-full grow"
               workspaceSlug={workspaceSlug}
               projectId={projectId}
               issueId={issueId}
@@ -240,7 +240,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
           <IssueParentSelectRoot
-            className="w-full h-7.5 grow"
+            className="h-7.5 w-full grow"
             disabled={disabled}
             issueId={issueId}
             issueOperations={issueOperations}
diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
index a55a260e596..8776b6d60a7 100644
--- a/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -122,11 +122,11 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
   const peekOverviewIssueClassName = cn(
     !embedIssue
       ? "absolute z-[25] flex flex-col overflow-hidden rounded-sm border border-subtle bg-surface-1 transition-all duration-300"
-      : `w-full h-full`,
+      : `h-full w-full`,
     !embedIssue && {
-      "top-0 bottom-0 right-0 w-full md:w-[50%] border-0 border-l": peekMode === "side-peek",
-      "size-5/6 top-[8.33%] left-[8.33%]": peekMode === "modal",
-      "inset-0 m-4 absolute": peekMode === "full-screen",
+      "top-0 right-0 bottom-0 w-full border-0 border-l md:w-[50%]": peekMode === "side-peek",
+      "top-[8.33%] left-[8.33%] size-5/6": peekMode === "modal",
+      "absolute inset-0 m-4": peekMode === "full-screen",
     }
   );
 
@@ -173,9 +173,9 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
                 embedIssue={embedIssue}
               />
               {/* content */}
-              <div className="vertical-scrollbar scrollbar-md relative h-full w-full overflow-hidden overflow-y-auto">
+              <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
                 {["side-peek", "modal"].includes(peekMode) ? (
-                  <div className="relative flex flex-col gap-3 px-8 py-5 space-y-3">
+                  <div className="relative flex flex-col gap-3 space-y-3 px-8 py-5">
                     <PeekOverviewIssueDetails
                       editorRef={editorRef}
                       workspaceSlug={workspaceSlug}
@@ -248,7 +248,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
                       </div>
                     </div>
                     <div
-                      className={`h-full !w-[400px] flex-shrink-0 border-l border-subtle p-4 py-5 overflow-hidden vertical-scrollbar scrollbar-sm ${
+                      className={`vertical-scrollbar scrollbar-sm h-full !w-[400px] flex-shrink-0 overflow-hidden border-l border-subtle p-4 py-5 ${
                         is_archived ? "pointer-events-none" : ""
                       }`}
                     >
diff --git a/apps/web/core/components/issues/preview-card/date.tsx b/apps/web/core/components/issues/preview-card/date.tsx
index d0ba4f61e83..9f95f330270 100644
--- a/apps/web/core/components/issues/preview-card/date.tsx
+++ b/apps/web/core/components/issues/preview-card/date.tsx
@@ -25,30 +25,30 @@ export function WorkItemPreviewCardDate(props: Props) {
   if (!startDate && !targetDate) return null;
 
   return (
-    <div className="text-11 h-full rounded-sm px-1 text-secondary">
+    <div className="h-full rounded-sm px-1 text-11 text-secondary">
       {isDateRangeEnabled ? (
         <div
-          className={cn("h-full flex items-center gap-1", {
+          className={cn("flex h-full items-center gap-1", {
             "text-danger-primary": shouldHighlightDate,
           })}
         >
-          <CalendarDays className="shrink-0 size-3" />
+          <CalendarDays className="size-3 shrink-0" />
           <span>
             {renderFormattedDate(startDate)} - {renderFormattedDate(targetDate)}
           </span>
         </div>
       ) : startDate ? (
-        <div className="h-full flex items-center gap-1">
-          <StartDatePropertyIcon className="shrink-0 size-3" />
+        <div className="flex h-full items-center gap-1">
+          <StartDatePropertyIcon className="size-3 shrink-0" />
           <span>{renderFormattedDate(startDate)}</span>
         </div>
       ) : (
         <div
-          className={cn("h-full flex items-center gap-1", {
+          className={cn("flex h-full items-center gap-1", {
             "text-danger-primary": shouldHighlightDate,
           })}
         >
-          <DueDatePropertyIcon className="shrink-0 size-3" />
+          <DueDatePropertyIcon className="size-3 shrink-0" />
           <span>{renderFormattedDate(targetDate)}</span>
         </div>
       )}
diff --git a/apps/web/core/components/issues/preview-card/root.tsx b/apps/web/core/components/issues/preview-card/root.tsx
index 22f5254ec89..1edbd1c8ac8 100644
--- a/apps/web/core/components/issues/preview-card/root.tsx
+++ b/apps/web/core/components/issues/preview-card/root.tsx
@@ -38,7 +38,7 @@ export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props:
   const stateName = stateDetails?.name ?? fallbackStateDetails?.name;
 
   return (
-    <div className="p-3 space-y-2 w-72 rounded-lg shadow-raised-200 bg-surface-1 border-[0.5px] border-strong">
+    <div className="w-72 space-y-2 rounded-lg border-[0.5px] border-strong bg-surface-1 p-3 shadow-raised-200">
       <div className="flex items-center justify-between gap-3 text-secondary">
         <IssueIdentifier
           size="xs"
@@ -48,15 +48,15 @@ export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props:
           issueSequenceId={workItem.sequence_id}
           issueTypeId={workItem.type_id}
         />
-        <div className="shrink-0 flex items-center gap-1">
-          <StateGroupIcon stateGroup={stateGroup} className="shrink-0 size-3" />
+        <div className="flex shrink-0 items-center gap-1">
+          <StateGroupIcon stateGroup={stateGroup} className="size-3 shrink-0" />
           <p className="text-11 font-medium">{stateName}</p>
         </div>
       </div>
       <div>
         <h6 className="text-13">{workItem.name}</h6>
       </div>
-      <div className="flex items-center gap-1 h-5">
+      <div className="flex h-5 items-center gap-1">
         <PriorityIcon priority={workItem.priority} withContainer />
         <WorkItemPreviewCardDate
           startDate={workItem.start_date}
diff --git a/apps/web/core/components/issues/relations/issue-list-item.tsx b/apps/web/core/components/issues/relations/issue-list-item.tsx
index 1a12e35d9e6..e5f3f450782 100644
--- a/apps/web/core/components/issues/relations/issue-list-item.tsx
+++ b/apps/web/core/components/issues/relations/issue-list-item.tsx
@@ -129,9 +129,9 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
         className="w-full cursor-pointer"
       >
         {issue && (
-          <div className="group relative flex min-h-11 h-full w-full items-center px-1.5 py-1 transition-all hover:bg-surface-2">
+          <div className="group relative flex h-full min-h-11 w-full items-center px-1.5 py-1 transition-all hover:bg-surface-2">
             <span className="size-5 flex-shrink-0" />
-            <div className="flex flex-1 min-w-0 cursor-pointer items-center gap-3">
+            <div className="flex min-w-0 flex-1 cursor-pointer items-center gap-3">
               <div className="flex-shrink-0">
                 {projectDetail && (
                   <IssueIdentifier
@@ -146,7 +146,7 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
               </div>
 
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span className="flex-1 w-0 truncate text-13 text-primary">{issue.name}</span>
+                <span className="w-0 flex-1 truncate text-13 text-primary">{issue.name}</span>
               </Tooltip>
             </div>
             <div
@@ -164,7 +164,7 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
                 issueServiceType={issueServiceType}
               />
             </div>
-            <div className="pl-2 flex-shrink-0 text-13">
+            <div className="flex-shrink-0 pl-2 text-13">
               <CustomMenu placement="bottom-end" ellipsis>
                 {!disabled && (
                   <CustomMenu.MenuItem onClick={handleEditIssue}>
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
index e4e44443a49..6503d92a849 100644
--- a/apps/web/core/components/issues/select/base.tsx
+++ b/apps/web/core/components/issues/select/base.tsx
@@ -157,7 +157,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       tabIndex={tabIndex}
       value={value}
       onChange={dropdownOnChange}
-      className="relative flex-shrink-0 h-full"
+      className="relative h-full flex-shrink-0"
       multiple
       disabled={disabled}
       onKeyDown={handleKeyDown}
@@ -165,13 +165,13 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       <button
         type="button"
         ref={setReferenceElement}
-        className={cn("h-full flex cursor-pointer items-center gap-2 text-11", buttonContainerClassName)}
+        className={cn("flex h-full cursor-pointer items-center gap-2 text-11", buttonContainerClassName)}
         onClick={handleOnClick}
       >
         {label ? (
           label
         ) : value && value.length > 0 ? (
-          <span className={cn("flex items-center justify-center gap-2 text-11 h-full", buttonClassName)}>
+          <span className={cn("flex h-full items-center justify-center gap-2 text-11", buttonClassName)}>
             <IssueLabelsList
               labels={value.map((v) => labelsList?.find((l) => l.id === v)) ?? []}
               length={3}
@@ -181,7 +181,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
         ) : (
           <div
             className={cn(
-              "h-full flex items-center justify-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 hover:bg-layer-1",
+              "flex h-full items-center justify-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 hover:bg-layer-1",
               buttonClassName
             )}
           >
@@ -225,7 +225,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                             className={({ active }) =>
                               `${
                                 active ? "bg-layer-1" : ""
-                              } group flex w-full cursor-pointer select-none items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary`
+                              } group flex w-full cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
                             }
                             value={label.id}
                           >
@@ -250,7 +250,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                     } else
                       return (
                         <div key={label.id} className="border-y border-subtle">
-                          <div className="flex select-none items-center gap-2 truncate p-2 text-primary">
+                          <div className="flex items-center gap-2 truncate p-2 text-primary select-none">
                             <Component className="h-3 w-3" /> {label.name}
                           </div>
                           <div>
@@ -260,7 +260,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                                 className={({ active }) =>
                                   `${
                                     active ? "bg-layer-1" : ""
-                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary`
+                                  } group flex min-w-[14rem] cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
                                 }
                                 value={child.id}
                               >
@@ -287,7 +287,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                       );
                   })
                 ) : submitting ? (
-                  <Loader className="animate-spin h-3.5 w-3.5" />
+                  <Loader className="h-3.5 w-3.5 animate-spin" />
                 ) : createLabelEnabled ? (
                   <p
                     onClick={() => {
@@ -306,10 +306,10 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                     )}
                   </p>
                 ) : (
-                  <p className="text-placeholder italic py-1 px-1.5">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="text-placeholder italic py-1 px-1.5">{t("loading")}</p>
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index 8befc5ac12a..921a8676a2d 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -151,9 +151,9 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
         <TextArea
           id="title-input"
           className={cn(
-            "block w-full resize-none overflow-hidden rounded-sm border-none bg-transparent px-3 py-0 text-20 font-medium outline-none ring-0",
+            "block w-full resize-none overflow-hidden rounded-sm border-none bg-transparent px-3 py-0 text-20 font-medium ring-0 outline-none",
             {
-              "ring-1 ring-danger-strong mx-2.5": title?.length === 0,
+              "mx-2.5 ring-1 ring-danger-strong": title?.length === 0,
             },
             className
           )}
@@ -167,7 +167,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
         />
         <div
           className={cn(
-            "pointer-events-none absolute bottom-1 right-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
+            "pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
             {
               "opacity-100": isLengthVisible,
             }
diff --git a/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx b/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
index 294cd0d1e4e..b411ece6698 100644
--- a/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
+++ b/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
@@ -127,7 +127,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
       />
       <div
         id={`issue-${issue.id}`}
-        className=" relative border-b border-b-subtle-1 w-full cursor-pointer"
+        className="relative w-full cursor-pointer border-b border-b-subtle-1"
         onDoubleClick={() => {
           setIssueToEdit(issue);
           setCreateUpdateIssueModal(true);
@@ -136,7 +136,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
         <Row
           ref={issueRef}
           className={cn(
-            "group/list-block min-h-11 relative flex flex-col gap-3 bg-layer-transparent hover:bg-layer-transparent-hover py-3 text-13 transition-colors",
+            "group/list-block relative flex min-h-11 flex-col gap-3 bg-layer-transparent py-3 text-13 transition-colors hover:bg-layer-transparent-hover",
             {
               "md:flex-row md:items-center": isSidebarCollapsed,
               "lg:flex-row lg:items-center": !isSidebarCollapsed,
@@ -161,17 +161,17 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
                 </div>
 
                 {/* sub-issues chevron */}
-                <div className="size-4 grid place-items-center flex-shrink-0" />
+                <div className="grid size-4 flex-shrink-0 place-items-center" />
               </div>
 
               <Tooltip tooltipContent={issue.name} position="top-start" renderByDefault={false}>
-                <p className="w-full truncate cursor-pointer text-13 text-primary">{issue.name}</p>
+                <p className="w-full cursor-pointer truncate text-13 text-primary">{issue.name}</p>
               </Tooltip>
             </div>
 
             {/* quick actions */}
             <div
-              className={cn("block border border-strong rounded-sm", {
+              className={cn("block rounded-sm border border-strong", {
                 "md:hidden": isSidebarCollapsed,
                 "lg:hidden": !isSidebarCollapsed,
               })}
@@ -182,7 +182,7 @@ export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
 
           <div className="flex flex-shrink-0 items-center gap-2">
             <DraftIssueProperties
-              className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-grow md:flex-shrink-0" : "lg:flex-grow lg:flex-shrink-0"} items-center gap-2 whitespace-nowrap`}
+              className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-shrink-0 md:flex-grow" : "lg:flex-shrink-0 lg:flex-grow"} items-center gap-2 whitespace-nowrap`}
               issue={issue}
               updateIssue={async (projectId, issueId, data) => {
                 await updateIssue(workspaceSlug, issueId, data);
diff --git a/apps/web/core/components/issues/workspace-draft/quick-action.tsx b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
index 45ba5c37bef..b6fc7f64441 100644
--- a/apps/web/core/components/issues/workspace-draft/quick-action.tsx
+++ b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
@@ -53,7 +53,7 @@ export const WorkspaceDraftIssueQuickActions = observer(function WorkspaceDraftI
               <h5>{t(item.title || "")}</h5>
               {item.description && (
                 <p
-                  className={cn("text-tertiary whitespace-pre-line", {
+                  className={cn("whitespace-pre-line text-tertiary", {
                     "text-placeholder": item.disabled,
                   })}
                 >
diff --git a/apps/web/core/components/issues/workspace-draft/root.tsx b/apps/web/core/components/issues/workspace-draft/root.tsx
index f9dab2a5151..b620a95af3f 100644
--- a/apps/web/core/components/issues/workspace-draft/root.tsx
+++ b/apps/web/core/components/issues/workspace-draft/root.tsx
@@ -100,8 +100,8 @@ export const WorkspaceDraftIssuesRoot = observer(function WorkspaceDraftIssuesRo
             <WorkspaceDraftIssuesLoader items={1} />
           ) : (
             <div
-              className={cn("h-11 pl-6 p-3 text-13 font-medium bg-surface-1 border-b border-subtle transition-all", {
-                "text-accent-primary hover:text-accent-secondary cursor-pointer underline-offset-2 hover:underline":
+              className={cn("h-11 border-b border-subtle bg-surface-1 p-3 pl-6 text-13 font-medium transition-all", {
+                "cursor-pointer text-accent-primary underline-offset-2 hover:text-accent-secondary hover:underline":
                   paginationInfo?.next_page_results,
               })}
               onClick={handleNextIssues}
diff --git a/apps/web/core/components/labels/create-update-label-inline.tsx b/apps/web/core/components/labels/create-update-label-inline.tsx
index e7215522625..04660487197 100644
--- a/apps/web/core/components/labels/create-update-label-inline.tsx
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -189,7 +189,7 @@ export const CreateUpdateLabelInline = observer(
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                    <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
                       <Controller
                         name="color"
                         control={control}
diff --git a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
index 0c7cd60f2aa..483e2cfebc0 100644
--- a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
+++ b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
@@ -33,7 +33,7 @@ export function LabelDragPreview(props: LabelDragPreviewProps) {
   const { label, isGroup } = props;
 
   return (
-    <div className="py-3 pl-2 pr-4 border-[1px] border-subtle bg-surface-1">
+    <div className="border-[1px] border-subtle bg-surface-1 py-3 pr-4 pl-2">
       <LabelName name={label.name} color={label.color} isGroup={isGroup} />
     </div>
   );
diff --git a/apps/web/core/components/labels/project-setting-label-group.tsx b/apps/web/core/components/labels/project-setting-label-group.tsx
index d204c6d73f9..ed3e7e9d946 100644
--- a/apps/web/core/components/labels/project-setting-label-group.tsx
+++ b/apps/web/core/components/labels/project-setting-label-group.tsx
@@ -82,14 +82,14 @@ export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGro
         >
           <Disclosure
             as="div"
-            className={`rounded-sm  text-primary ${
+            className={`rounded-sm text-primary ${
               !isDroppingInLabel ? "border-[0.5px] border-subtle" : ""
             } ${isDragging ? "bg-layer-1" : "bg-surface-1"}`}
             defaultOpen
           >
             {({ open }) => (
               <>
-                <div className={`py-3 pl-1 pr-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
+                <div className={`py-3 pr-3 pl-1 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
                   <>
                     <div className="relative flex cursor-pointer items-center justify-between gap-2">
                       {isEditLabelForm ? (
diff --git a/apps/web/core/components/labels/project-setting-label-item.tsx b/apps/web/core/components/labels/project-setting-label-item.tsx
index 0d2eb00283d..8955617ef55 100644
--- a/apps/web/core/components/labels/project-setting-label-item.tsx
+++ b/apps/web/core/components/labels/project-setting-label-item.tsx
@@ -90,7 +90,7 @@ export function ProjectSettingLabelItem(props: Props) {
           className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-accent-strong" : "border-[1.5px] border-transparent"}`}
         >
           <div
-            className={`py-3 px-1 group relative flex items-center justify-between gap-2 space-y-3 rounded-sm  ${
+            className={`group relative flex items-center justify-between gap-2 space-y-3 rounded-sm px-1 py-3 ${
               isDroppingInLabel ? "" : "border-[0.5px] border-subtle"
             } ${isDragging || isParentDragging ? "bg-layer-1" : "bg-surface-1"}`}
           >
diff --git a/apps/web/core/components/labels/project-setting-label-list.tsx b/apps/web/core/components/labels/project-setting-label-list.tsx
index c8be577e788..6bb506970ae 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -91,7 +91,7 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
           )
         }
       />
-      <div className="w-full mt-6">
+      <div className="mt-6 w-full">
         {showLabelForm && (
           <div className="my-2 w-full rounded-sm border border-subtle px-3.5 py-2">
             <CreateUpdateLabelInline
diff --git a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
index 296f4b2314a..986a5542b57 100644
--- a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
+++ b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
@@ -41,10 +41,10 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
   const planeName = getSubscriptionName(planVariant);
 
   return (
-    <div className="flex flex-col py-6 px-3 bg-layer-2 rounded-xl border border-subtle">
+    <div className="flex flex-col rounded-xl border border-subtle bg-layer-2 px-3 py-6">
       <Tab.Group selectedIndex={selectedPlan === "month" ? 0 : 1}>
-        <div className="flex w-full justify-center h-9">
-          <Tab.List className="flex space-x-1 rounded-md p-0.5 w-60 bg-layer-3">
+        <div className="flex h-9 w-full justify-center">
+          <Tab.List className="flex w-60 space-x-1 rounded-md bg-layer-3 p-0.5">
             {prices.map((price: TSubscriptionPrice) => (
               <Tab
                 key={price.key}
@@ -52,7 +52,7 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
                   cn(
                     "w-full rounded-sm py-1 text-caption-md-medium leading-5",
                     selected
-                      ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+                      ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
                       : "text-tertiary hover:text-secondary"
                   )
                 }
@@ -76,13 +76,13 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
                   {features.map((feature) => (
                     <li
                       key={feature}
-                      className={cn("col-span-12 relative rounded-md p-2 flex", {
+                      className={cn("relative col-span-12 flex rounded-md p-2", {
                         "sm:col-span-6": !verticalFeatureList,
                       })}
                     >
-                      <p className="w-full text-caption-md-medium leading-5 flex items-center line-clamp-1">
-                        <CheckCircle className="size-4 mr-2 text-tertiary flex-shrink-0" />
-                        <span className="text-secondary truncate">{feature}</span>
+                      <p className="line-clamp-1 flex w-full items-center text-caption-md-medium leading-5">
+                        <CheckCircle className="mr-2 size-4 flex-shrink-0 text-tertiary" />
+                        <span className="truncate text-secondary">{feature}</span>
                       </p>
                     </li>
                   ))}
diff --git a/apps/web/core/components/license/modal/card/checkout-button.tsx b/apps/web/core/components/license/modal/card/checkout-button.tsx
index 85a03080db6..01de02caf85 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -50,7 +50,7 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
   return (
     <>
       <div className="pb-4 text-center">
-        <div className="text-20 font-semibold h-9">
+        <div className="h-9 text-20 font-semibold">
           {isLoading ? (
             <Loader className="flex flex-col items-center justify-center">
               <Loader.Item height="36px" width="4rem" />
@@ -72,7 +72,7 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
           <Loader.Item height="38px" width="14rem" />
         </Loader>
       ) : (
-        <div className="flex flex-col items-center justify-center w-full space-y-4">
+        <div className="flex w-full flex-col items-center justify-center space-y-4">
           <Button
             variant="primary"
             size="lg"
diff --git a/apps/web/core/components/license/modal/card/discount-info.tsx b/apps/web/core/components/license/modal/card/discount-info.tsx
index b1a596a53e5..7f25a2a0e3b 100644
--- a/apps/web/core/components/license/modal/card/discount-info.tsx
+++ b/apps/web/core/components/license/modal/card/discount-info.tsx
@@ -53,7 +53,7 @@ export function DiscountInfo({ className, currency, frequency, price, subscripti
           <img
             src={resolvedTheme === "dark" ? ScribbleWhite : ScribbleBlack}
             alt="scribble"
-            className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-full scale-x-125"
+            className="absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2 scale-x-125"
           />
           {currency}
           {actualPrice}
diff --git a/apps/web/core/components/license/modal/card/free-plan.tsx b/apps/web/core/components/license/modal/card/free-plan.tsx
index 6cb8d0e0afb..f07ff519ee9 100644
--- a/apps/web/core/components/license/modal/card/free-plan.tsx
+++ b/apps/web/core/components/license/modal/card/free-plan.tsx
@@ -18,10 +18,10 @@ type FreePlanCardProps = {
 export const FreePlanCard = observer(function FreePlanCard(props: FreePlanCardProps) {
   const { isOnFreePlan } = props;
   return (
-    <div className="py-4 px-2 rounded-xl bg-layer-1">
+    <div className="rounded-xl bg-layer-1 px-2 py-4">
       {isOnFreePlan && (
-        <div className="py-2 px-3">
-          <span className="px-2 py-1 bg-layer-2 text-caption-md-medium text-tertiary rounded-sm border border-subtle-1">
+        <div className="px-3 py-2">
+          <span className="rounded-sm border border-subtle-1 bg-layer-2 px-2 py-1 text-caption-md-medium text-tertiary">
             Your plan
           </span>
         </div>
@@ -31,12 +31,12 @@ export const FreePlanCard = observer(function FreePlanCard(props: FreePlanCardPr
         <div className="text-caption-md text-tertiary">$0 per user per month</div>
       </div>
       <div className="px-2 pt-2 pb-3">
-        <ul className="w-full grid grid-cols-12 gap-x-4">
+        <ul className="grid w-full grid-cols-12 gap-x-4">
           {FREE_PLAN_UPGRADE_FEATURES.map((feature) => (
-            <li key={feature} className={cn("col-span-12 relative rounded-md p-2 flex")}>
-              <p className="w-full text-caption-md-medium leading-5 flex items-center">
-                <CircleX className="size-4 mr-2 text-danger-secondary flex-shrink-0" />
-                <span className="text-secondary truncate">{feature}</span>
+            <li key={feature} className={cn("relative col-span-12 flex rounded-md p-2")}>
+              <p className="flex w-full items-center text-caption-md-medium leading-5">
+                <CircleX className="mr-2 size-4 flex-shrink-0 text-danger-secondary" />
+                <span className="truncate text-secondary">{feature}</span>
               </p>
             </li>
           ))}
diff --git a/apps/web/core/components/license/modal/card/plan-upgrade.tsx b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
index a3338eb13d2..e501b3b7f18 100644
--- a/apps/web/core/components/license/modal/card/plan-upgrade.tsx
+++ b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
@@ -77,7 +77,7 @@ export const PlanUpgradeCard = observer(function PlanUpgradeCard(props: PlanUpgr
         <>
           Yearly
           {yearlyDiscount > 0 && (
-            <span className="bg-accent-primary text-on-color rounded-full px-1.5 py-0.5 ml-1 text-caption-sm">
+            <span className="text-caption-sm ml-1 rounded-full bg-accent-primary px-1.5 py-0.5 text-on-color">
               -{yearlyDiscount}%
             </span>
           )}
diff --git a/apps/web/core/components/license/modal/card/talk-to-sales.tsx b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
index 4973a475d31..c12ee704229 100644
--- a/apps/web/core/components/license/modal/card/talk-to-sales.tsx
+++ b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
@@ -55,7 +55,7 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
   const renderActionButton = (price: TSubscriptionPrice) => (
     <>
       <div className="pb-4 text-center">
-        <div className="text-20 font-semibold h-9 flex justify-center items-center">
+        <div className="flex h-9 items-center justify-center text-20 font-semibold">
           {isLoading ? (
             <Loader className="flex flex-col items-center justify-center">
               <Loader.Item height="36px" width="4rem" />
@@ -71,7 +71,7 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
           <Loader.Item height="38px" width="14rem" />
         </Loader>
       ) : (
-        <div className="flex flex-col items-center justify-center w-full">
+        <div className="flex w-full flex-col items-center justify-center">
           <a href={href} target="_blank" className={cn(getButtonStyling("primary", "lg"), "w-56")} rel="noreferrer">
             Talk to Sales
           </a>
diff --git a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
index 400ffab6075..3feecffeba6 100644
--- a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -120,17 +120,17 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
 
   if (!moduleDetails) return <></>;
   return (
-    <div className="border-t border-subtle space-y-4 py-4 px-3">
+    <div className="space-y-4 border-t border-subtle px-3 py-4">
       <Disclosure defaultOpen={isModuleDateValid ? true : false}>
         {({ open }) => (
           <div className="space-y-6">
             {/* progress bar header */}
             {isModuleDateValid ? (
-              <div className="relative w-full flex justify-between items-center gap-2">
-                <Disclosure.Button className="relative flex items-center gap-2 w-full">
-                  <div className="font-medium text-secondary text-13">{t("progress")}</div>
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <Disclosure.Button className="relative flex w-full items-center gap-2">
+                  <div className="text-13 font-medium text-secondary">{t("progress")}</div>
                   {progressHeaderPercentage > 0 && (
-                    <div className="flex h-5 w-9 items-center justify-center rounded-sm bg-amber-500/20 text-11 font-medium text-amber-500">{`${progressHeaderPercentage}%`}</div>
+                    <div className="bg-amber-500/20 text-amber-500 flex h-5 w-9 items-center justify-center rounded-sm text-11 font-medium">{`${progressHeaderPercentage}%`}</div>
                   )}
                 </Disclosure.Button>
                 {isCurrentEstimateTypeIsPoints && (
@@ -165,11 +165,11 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
                 </Disclosure.Button>
               </div>
             ) : (
-              <div className="relative w-full flex justify-between items-center gap-2">
-                <div className="font-medium text-secondary text-13">Progress</div>
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <div className="text-13 font-medium text-secondary">Progress</div>
                 <div className="flex items-center gap-1">
                   <AlertCircle height={14} width={14} className="text-secondary" />
-                  <span className="text-11 italic text-secondary">
+                  <span className="text-11 text-secondary italic">
                     {moduleDetails?.start_date && moduleDetails?.target_date
                       ? t("project_module.empty_state.sidebar.in_active")
                       : t("project_module.empty_state.sidebar.invalid_date")}
diff --git a/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
index 2abb3871c03..f0230892624 100644
--- a/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
@@ -132,7 +132,7 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
           {PROGRESS_STATS.map((stat) => (
             <Tab
               className={cn(
-                `p-1 w-full text-primary outline-none focus:outline-none cursor-pointer transition-all`,
+                `w-full cursor-pointer p-1 text-primary transition-all outline-none focus:outline-none`,
                 roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
                 stat.key === currentTab
                   ? "bg-layer-transparent-active text-secondary"
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 53813426005..d5844e6a0eb 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -183,7 +183,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
         updateLink={handleUpdateLink}
       />
       <>
-        <div className={`sticky z-10 top-0 flex items-center justify-between bg-surface-1 pb-5 pt-5`}>
+        <div className={`sticky top-0 z-10 flex items-center justify-between bg-surface-1 pt-5 pb-5`}>
           <div>
             <button
               className="flex h-5 w-5 items-center justify-center rounded-full bg-layer-3"
@@ -232,18 +232,18 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
               )}
             />
           </div>
-          <h4 className="w-full break-words text-18 font-semibold text-primary">{moduleDetails.name}</h4>
+          <h4 className="w-full text-18 font-semibold break-words text-primary">{moduleDetails.name}</h4>
         </div>
 
         {moduleDetails.description && (
           <TextArea
-            className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-13 leading-5 text-secondary"
+            className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
             value={moduleDetails.description}
             disabled
           />
         )}
 
-        <div className="flex flex-col gap-5 pb-6 pt-2.5">
+        <div className="flex flex-col gap-5 pt-2.5 pb-6">
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
               <StartDatePropertyIcon className="h-4 w-4" />
@@ -376,7 +376,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
             {/* Accessing link outside the disclosure as mobx is not  considering the children inside Disclosure as part of the component hence not observing their state change*/}
             <Disclosure defaultOpen={!!moduleDetails?.link_module?.length}>
               {({ open }) => (
-                <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                <div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
                   <Disclosure.Button className="flex w-full items-center justify-between gap-2 p-1.5">
                     <div className="flex items-center justify-start gap-2 text-13">
                       <span className="font-medium text-secondary">{t("common.links")}</span>
diff --git a/apps/web/core/components/modules/applied-filters/root.tsx b/apps/web/core/components/modules/applied-filters/root.tsx
index a4eedbb8c2b..510e5afe6ae 100644
--- a/apps/web/core/components/modules/applied-filters/root.tsx
+++ b/apps/web/core/components/modules/applied-filters/root.tsx
@@ -46,7 +46,7 @@ export function ModuleAppliedFiltersList(props: Props) {
 
   return (
     <Header variant={EHeaderVariant.TERNARY}>
-      <div className="flex gap-2 flex-wrap">
+      <div className="flex flex-wrap gap-2">
         {Object.entries(appliedFilters).map(([key, value]) => {
           const filterKey = key as keyof TModuleFilters;
 
@@ -98,7 +98,7 @@ export function ModuleAppliedFiltersList(props: Props) {
           >
             <div className="flex flex-wrap items-center gap-1.5">
               <span className="text-11 text-tertiary">Modules</span>
-              <div className="flex items-center gap-1 rounded-sm p-1 text-11 bg-layer-1">
+              <div className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
                 Favorite
                 {isEditingAllowed && (
                   <button
diff --git a/apps/web/core/components/modules/archived-modules/header.tsx b/apps/web/core/components/modules/archived-modules/header.tsx
index b00be1e4499..4b58e4bb920 100644
--- a/apps/web/core/components/modules/archived-modules/header.tsx
+++ b/apps/web/core/components/modules/archived-modules/header.tsx
@@ -83,15 +83,15 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
 
   return (
     <div className="group relative flex border-b border-subtle">
-      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+      <div className="horizontal-scrollbar flex scrollbar-sm w-full items-center gap-2 overflow-x-auto px-4">
         <ArchiveTabsList />
       </div>
       {/* filter options */}
-      <div className="h-full flex items-center gap-3 self-end px-8">
+      <div className="flex h-full items-center gap-3 self-end px-8">
         {!isSearchOpen && (
           <button
             type="button"
-            className="-mr-5 p-2 hover:bg-layer-1 rounded-sm text-placeholder grid place-items-center"
+            className="-mr-5 grid place-items-center rounded-sm p-2 text-placeholder hover:bg-layer-1"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
@@ -102,9 +102,9 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
diff --git a/apps/web/core/components/modules/archived-modules/view.tsx b/apps/web/core/components/modules/archived-modules/view.tsx
index cd09d423b68..bea8c597fd7 100644
--- a/apps/web/core/components/modules/archived-modules/view.tsx
+++ b/apps/web/core/components/modules/archived-modules/view.tsx
@@ -34,15 +34,15 @@ export const ArchivedModulesView = observer(function ArchivedModulesView(props:
 
   if (filteredArchivedModuleIds.length === 0)
     return (
-      <div className="h-full w-full grid place-items-center">
+      <div className="grid h-full w-full place-items-center">
         <div className="text-center">
           <img
             src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
-            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
             alt="No matching modules"
           />
-          <h5 className="text-18 font-medium mt-7 mb-1">No matching modules</h5>
-          <p className="text-placeholder text-14">
+          <h5 className="mt-7 mb-1 text-18 font-medium">No matching modules</h5>
+          <p className="text-14 text-placeholder">
             {archivedModulesSearchQuery.trim() === ""
               ? "Remove the filters to see all modules"
               : "Remove the search criteria to see all modules"}
@@ -54,7 +54,7 @@ export const ArchivedModulesView = observer(function ArchivedModulesView(props:
   return (
     <div className="h-full overflow-y-auto">
       <div className="flex h-full w-full justify-between">
-        <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+        <div className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col overflow-y-auto">
           {filteredArchivedModuleIds.map((moduleId) => (
             <ModuleListItem key={moduleId} moduleId={moduleId} />
           ))}
diff --git a/apps/web/core/components/modules/delete-module-modal.tsx b/apps/web/core/components/modules/delete-module-modal.tsx
index 5c75065b4f4..f3bfe380cbc 100644
--- a/apps/web/core/components/modules/delete-module-modal.tsx
+++ b/apps/web/core/components/modules/delete-module-modal.tsx
@@ -80,7 +80,7 @@ export const DeleteModuleModal = observer(function DeleteModuleModal(props: Prop
       content={
         <>
           Are you sure you want to delete module-{" "}
-          <span className="break-all font-medium text-primary">{data?.name}</span>? All of the data related to the
+          <span className="font-medium break-all text-primary">{data?.name}</span>? All of the data related to the
           module will be permanently removed. This action cannot be undone.
         </>
       }
diff --git a/apps/web/core/components/modules/dropdowns/filters/lead.tsx b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
index fa4ee6124f6..286759dd22a 100644
--- a/apps/web/core/components/modules/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -99,7 +99,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/modules/dropdowns/filters/members.tsx b/apps/web/core/components/modules/dropdowns/filters/members.tsx
index 1af34e16ce8..1e94ac62cdc 100644
--- a/apps/web/core/components/modules/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/members.tsx
@@ -99,7 +99,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/modules/dropdowns/filters/root.tsx b/apps/web/core/components/modules/dropdowns/filters/root.tsx
index 264494593e6..d2169b7fa73 100644
--- a/apps/web/core/components/modules/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/root.tsx
@@ -59,7 +59,7 @@ export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(p
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         {!isArchived && (
           <div className="py-2">
             <FilterOption
diff --git a/apps/web/core/components/modules/dropdowns/filters/start-date.tsx b/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
index 57458cc7401..2c055b7ad9c 100644
--- a/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
@@ -75,7 +75,7 @@ export const FilterStartDate = observer(function FilterStartDate(props: Props) {
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/dropdowns/filters/status.tsx b/apps/web/core/components/modules/dropdowns/filters/status.tsx
index 5957924e60a..c6759089fd9 100644
--- a/apps/web/core/components/modules/dropdowns/filters/status.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/status.tsx
@@ -48,7 +48,7 @@ export const FilterStatus = observer(function FilterStatus(props: Props) {
               />
             ))
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/dropdowns/filters/target-date.tsx b/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
index 39338d91297..20654bef8b3 100644
--- a/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
@@ -74,7 +74,7 @@ export const FilterTargetDate = observer(function FilterTargetDate(props: Props)
               <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index 3cc901289e1..a958bc486cd 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -151,7 +151,7 @@ export function ModuleForm(props: Props) {
                   value={value}
                   onChange={onChange}
                   placeholder={t("description")}
-                  className="w-full text-14 resize-none min-h-24"
+                  className="min-h-24 w-full resize-none text-14"
                   hasError={Boolean(errors?.description)}
                   tabIndex={getIndex("description")}
                 />
@@ -232,7 +232,7 @@ export function ModuleForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
           {t("cancel")}
         </Button>
diff --git a/apps/web/core/components/modules/gantt-chart/blocks.tsx b/apps/web/core/components/modules/gantt-chart/blocks.tsx
index d40d1bb6197..f3fdd5f580a 100644
--- a/apps/web/core/components/modules/gantt-chart/blocks.tsx
+++ b/apps/web/core/components/modules/gantt-chart/blocks.tsx
@@ -61,9 +61,9 @@ export const ModuleGanttBlock = observer(function ModuleGanttBlock(props: Props)
           )
         }
       >
-        <div className="absolute left-0 top-0 h-full w-full bg-surface-1/50" />
+        <div className="absolute top-0 left-0 h-full w-full bg-surface-1/50" />
         <div
-          className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-13 text-primary"
+          className="sticky w-auto truncate overflow-hidden px-2.5 py-1 text-13 text-primary"
           style={{ left: `${SIDEBAR_WIDTH}px` }}
         >
           {moduleDetails?.name}
diff --git a/apps/web/core/components/modules/links/create-update-modal.tsx b/apps/web/core/components/modules/links/create-update-modal.tsx
index 48085d36509..9caa018023a 100644
--- a/apps/web/core/components/modules/links/create-update-modal.tsx
+++ b/apps/web/core/components/modules/links/create-update-modal.tsx
@@ -116,7 +116,7 @@ export function CreateUpdateModuleLinkModal(props: Props) {
             <div>
               <label htmlFor="title" className="mb-2 text-secondary">
                 Display title
-                <span className="text-10 block">Optional</span>
+                <span className="block text-10">Optional</span>
               </label>
               <Controller
                 control={control}
@@ -137,7 +137,7 @@ export function CreateUpdateModuleLinkModal(props: Props) {
             </div>
           </div>
         </div>
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
           <Button variant="secondary" size="lg" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/core/components/modules/links/list-item.tsx b/apps/web/core/components/modules/links/list-item.tsx
index 79298e0acad..549ca3ea4fe 100644
--- a/apps/web/core/components/modules/links/list-item.tsx
+++ b/apps/web/core/components/modules/links/list-item.tsx
@@ -53,7 +53,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
       <div className="flex w-full items-start justify-between gap-2">
         <div className="flex items-start gap-2 truncate">
           <span className="py-1">
-            <Icon className="size-3 stroke-2 text-tertiary group-hover:text-primary shrink-0" />
+            <Icon className="size-3 shrink-0 stroke-2 text-tertiary group-hover:text-primary" />
           </span>
           <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
             <a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-11">
@@ -66,7 +66,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
           {isEditingAllowed && (
             <button
               type="button"
-              className="grid place-items-center p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
+              className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
               data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
               onClick={(e) => {
                 e.preventDefault();
@@ -80,14 +80,14 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
           <button
             type="button"
             onClick={() => copyToClipboard(link.url)}
-            className="grid place-items-center p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
+            className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
           >
             <CopyIcon className="size-3 stroke-[1.5]" />
           </button>
           {isEditingAllowed && (
             <button
               type="button"
-              className="grid place-items-center p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
+              className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
               data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
               onClick={(e) => {
                 e.preventDefault();
@@ -101,7 +101,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
         </div>
       </div>
       <div className="px-5">
-        <p className="flex items-center gap-1.5 mt-0.5 stroke-[1.5] text-11 text-tertiary">
+        <p className="mt-0.5 flex items-center gap-1.5 stroke-[1.5] text-11 text-tertiary">
           Added {calculateTimeAgo(link.created_at)}{" "}
           {createdByDetails && (
             <>by {createdByDetails?.is_bot ? createdByDetails?.first_name + " Bot" : createdByDetails?.display_name}</>
diff --git a/apps/web/core/components/modules/module-card-item.tsx b/apps/web/core/components/modules/module-card-item.tsx
index 26f426883c9..177bbcf585e 100644
--- a/apps/web/core/components/modules/module-card-item.tsx
+++ b/apps/web/core/components/modules/module-card-item.tsx
@@ -218,7 +218,7 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
                 </span>
               ) : (
                 <Tooltip tooltipContent="No lead">
-                  <SquareUser className="h-4 w-4 mx-1 text-tertiary " />
+                  <SquareUser className="mx-1 h-4 w-4 text-tertiary" />
                 </Tooltip>
               )}
             </div>
diff --git a/apps/web/core/components/modules/module-layout-icon.tsx b/apps/web/core/components/modules/module-layout-icon.tsx
index cab7e1d1ad7..d7cbfef7614 100644
--- a/apps/web/core/components/modules/module-layout-icon.tsx
+++ b/apps/web/core/components/modules/module-layout-icon.tsx
@@ -34,7 +34,7 @@ export function ModuleLayoutIcon(props: ILayoutIcon) {
     <>
       {withContainer ? (
         <div
-          className={cn("flex items-center justify-center border rounded-sm p-0.5 flex-shrink-0", containerClassName)}
+          className={cn("flex flex-shrink-0 items-center justify-center rounded-sm border p-0.5", containerClassName)}
         >
           <Icon width={size} height={size} className={cn(className)} />
         </div>
diff --git a/apps/web/core/components/modules/module-peek-overview.tsx b/apps/web/core/components/modules/module-peek-overview.tsx
index 612c0b2afe0..24a11fe65f5 100644
--- a/apps/web/core/components/modules/module-peek-overview.tsx
+++ b/apps/web/core/components/modules/module-peek-overview.tsx
@@ -51,7 +51,7 @@ export const ModulePeekOverview = observer(function ModulePeekOverview({
       {peekModule && (
         <div
           ref={ref}
-          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 absolute md:relative right-0 z-[9]"
+          className="absolute right-0 z-[9] flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 md:relative"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/apps/web/core/components/modules/module-view-header.tsx b/apps/web/core/components/modules/module-view-header.tsx
index c55779a563a..baf978a0132 100644
--- a/apps/web/core/components/modules/module-view-header.tsx
+++ b/apps/web/core/components/modules/module-view-header.tsx
@@ -100,13 +100,13 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
   const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0 || displayFilters?.favorites;
 
   return (
-    <div className="hidden h-full sm:flex items-center gap-2 self-end">
+    <div className="hidden h-full items-center gap-2 self-end sm:flex">
       <div className="flex items-center">
         {!isSearchOpen && (
           <IconButton
             variant="ghost"
             size="lg"
-            className="-mr-1 p-"
+            className="p- -mr-1"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
@@ -116,9 +116,9 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
@@ -171,7 +171,7 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
           memberIds={workspaceMemberIds ?? undefined}
         />
       </FiltersDropdown>
-      <div className="hidden md:flex items-center gap-1 rounded-sm bg-layer-3 p-1">
+      <div className="hidden items-center gap-1 rounded-sm bg-layer-3 p-1 md:flex">
         {MODULE_VIEW_LAYOUTS.map((layout) => (
           <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
             <button
diff --git a/apps/web/core/components/modules/modules-list-view.tsx b/apps/web/core/components/modules/modules-list-view.tsx
index 7495f17f694..da07843de02 100644
--- a/apps/web/core/components/modules/modules-list-view.tsx
+++ b/apps/web/core/components/modules/modules-list-view.tsx
@@ -82,7 +82,7 @@ export const ModulesListView = observer(function ModulesListView() {
 
   return (
     <ContentWrapper variant={ERowVariant.HUGGING}>
-      <div className="size-full flex justify-between">
+      <div className="flex size-full justify-between">
         {displayFilters?.layout === "list" && (
           <ListLayout>
             {filteredModuleIds.map((moduleId) => (
@@ -92,11 +92,11 @@ export const ModulesListView = observer(function ModulesListView() {
         )}
         {displayFilters?.layout === "board" && (
           <Row
-            className={`size-full py-page-y grid grid-cols-1 gap-6 overflow-y-auto ${
+            className={`grid size-full grid-cols-1 gap-6 overflow-y-auto py-page-y ${
               peekModule
-                ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
-                : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
-            } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
+                ? "3xl:grid-cols-3 lg:grid-cols-1 xl:grid-cols-2"
+                : "3xl:grid-cols-4 lg:grid-cols-2 xl:grid-cols-3"
+            } vertical-scrollbar scrollbar-lg auto-rows-max transition-all`}
           >
             {filteredModuleIds.map((moduleId) => (
               <ModuleCardItem key={moduleId} moduleId={moduleId} />
diff --git a/apps/web/core/components/modules/quick-actions.tsx b/apps/web/core/components/modules/quick-actions.tsx
index 0612b4a2cc7..771635e00e1 100644
--- a/apps/web/core/components/modules/quick-actions.tsx
+++ b/apps/web/core/components/modules/quick-actions.tsx
@@ -164,7 +164,7 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/modules/select/status.tsx b/apps/web/core/components/modules/select/status.tsx
index 3b48570c3ca..e62b59a73f7 100644
--- a/apps/web/core/components/modules/select/status.tsx
+++ b/apps/web/core/components/modules/select/status.tsx
@@ -38,7 +38,7 @@ export function ModuleStatusSelect({ control, error, tabIndex }: Props) {
             value={value}
             label={
               <div
-                className={`flex items-center justify-center gap-2 text-11 py-0.5 ${error ? "text-danger-primary" : ""}`}
+                className={`flex items-center justify-center gap-2 py-0.5 text-11 ${error ? "text-danger-primary" : ""}`}
               >
                 {value ? (
                   <ModuleStatusIcon status={value} />
diff --git a/apps/web/core/components/navigation/app-rail-root.tsx b/apps/web/core/components/navigation/app-rail-root.tsx
index 0a79d113725..009e45e031b 100644
--- a/apps/web/core/components/navigation/app-rail-root.tsx
+++ b/apps/web/core/components/navigation/app-rail-root.tsx
@@ -35,7 +35,7 @@ export const AppRailRoot = observer(() => {
 
   return (
     <div
-      className="h-full flex-shrink-0 bg-canvas transition-all ease-in-out duration-300 z-[26]"
+      className="z-[26] h-full flex-shrink-0 bg-canvas transition-all duration-300 ease-in-out"
       style={{
         width: railWidth,
         display: "block",
@@ -43,7 +43,7 @@ export const AppRailRoot = observer(() => {
     >
       <ContextMenu>
         <ContextMenu.Trigger className="h-full">
-          <div className="flex flex-col justify-between gap-4 px-2 py-3 h-full">
+          <div className="flex h-full flex-col justify-between gap-4 px-2 py-3">
             <div
               className={cn("flex flex-col", {
                 "gap-4": showLabel,
@@ -52,7 +52,7 @@ export const AppRailRoot = observer(() => {
             >
               <DesktopSidebarWorkspaceMenu />
               <AppSidebarItemsRoot showLabel={showLabel} />
-              <div className="border-t border-strong mx-2" />
+              <div className="mx-2 border-t border-strong" />
               <AppSidebarItem
                 item={{
                   label: "Settings",
@@ -68,13 +68,13 @@ export const AppRailRoot = observer(() => {
         <ContextMenu.Portal>
           <ContextMenu.Content positionerClassName="z-30" className="outline-none">
             <ContextMenu.Item onClick={() => updateDisplayMode("icon_only")}>
-              <div className="flex items-center justify-between w-full gap-2">
+              <div className="flex w-full items-center justify-between gap-2">
                 <span className="text-11">Icon only</span>
                 {preferences.displayMode === "icon_only" && <CheckIcon className="size-3.5" />}
               </div>
             </ContextMenu.Item>
             <ContextMenu.Item onClick={() => updateDisplayMode("icon_with_label")}>
-              <div className="flex items-center justify-between w-full gap-2">
+              <div className="flex w-full items-center justify-between gap-2">
                 <span className="text-11">Icon with name</span>
                 {preferences.displayMode === "icon_with_label" && <CheckIcon className="size-3.5" />}
               </div>
diff --git a/apps/web/core/components/navigation/customize-navigation-dialog.tsx b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
index d38a8a6a787..4d7c824951b 100644
--- a/apps/web/core/components/navigation/customize-navigation-dialog.tsx
+++ b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
@@ -180,7 +180,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
 
   return (
     <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
-      <div className="flex flex-col max-h-[90vh] bg-surface-1 rounded-lg">
+      <div className="flex max-h-[90vh] flex-col rounded-lg bg-surface-1">
         {/* Header */}
         <div className="flex justify-between px-6 pt-4">
           <div>
@@ -192,7 +192,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
           </div>
           <button
             onClick={onClose}
-            className="flex-shrink-0 size-5 flex items-center justify-center rounded-sm hover:bg-layer-1 text-placeholder"
+            className="flex size-5 flex-shrink-0 items-center justify-center rounded-sm text-placeholder hover:bg-layer-1"
             aria-label={t("close")}
           >
             <X className="size-4" />
@@ -200,26 +200,26 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+        <div className="flex-1 space-y-4 overflow-y-auto px-6 py-4">
           {/* Personal Section */}
           <div className="flex flex-col gap-2">
             <h3 className="text-13 font-semibold text-placeholder">{t("personal")}</h3>
-            <div className="border border-subtle rounded-md py-2 bg-surface-2">
+            <div className="rounded-md border border-subtle bg-surface-2 py-2">
               <Sortable
                 data={personalItems}
                 onChange={handlePersonalReorder}
                 keyExtractor={(item) => item.key}
                 id="personal-enabled-items"
                 render={(item) => (
-                  <div className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-surface-2 transition-all duration-200">
-                    <GripVertical className="size-4 text-placeholder cursor-grab active:cursor-grabbing transition-colors" />
+                  <div className="flex items-center gap-2 rounded-md px-2 py-1.5 transition-all duration-200 hover:bg-surface-2">
+                    <GripVertical className="size-4 cursor-grab text-placeholder transition-colors active:cursor-grabbing" />
                     <Checkbox
                       checked={!!personalPreferences.items[item.key]?.enabled}
                       onChange={(e) => togglePersonalItem(item.key, e.target.checked)}
                     />
-                    <div className="flex items-center gap-2 flex-1">
+                    <div className="flex flex-1 items-center gap-2">
                       {getSidebarNavigationItemIcon(item.key)}
-                      <label className="text-13 text-primary flex-1 cursor-pointer">
+                      <label className="flex-1 cursor-pointer text-13 text-primary">
                         {t(item.labelTranslationKey)}
                       </label>
                     </div>
@@ -232,7 +232,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
           {/* Workspace Section */}
           <div className="flex flex-col gap-2">
             <h3 className="text-13 font-semibold text-placeholder">{t("workspace")}</h3>
-            <div className="border border-subtle rounded-md py-2 bg-surface-2">
+            <div className="rounded-md border border-subtle bg-surface-2 py-2">
               {/* Pinned Items - Draggable */}
               <Sortable
                 data={workspaceItems}
@@ -242,13 +242,13 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                 render={(item) => {
                   const icon = getSidebarNavigationItemIcon(item.key);
                   return (
-                    <div className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-surface-2 group transition-all duration-200">
-                      <GripVertical className="size-4 text-placeholder cursor-grab active:cursor-grabbing transition-colors" />
+                    <div className="group flex items-center gap-2 rounded-md px-2 py-1.5 transition-all duration-200 hover:bg-surface-2">
+                      <GripVertical className="size-4 cursor-grab text-placeholder transition-colors active:cursor-grabbing" />
                       <Checkbox
                         checked={!!workspacePreferences.items[item.key]?.is_pinned}
                         onChange={(e) => handleWorkspaceItemToggle(item.key, e.target.checked)}
                       />
-                      <div className="flex items-center gap-2 flex-1">
+                      <div className="flex flex-1 items-center gap-2">
                         {icon}
                         <span className="text-13 text-primary">{t(item.labelTranslationKey)}</span>
                       </div>
@@ -263,18 +263,18 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
           <div className="flex flex-col gap-2">
             <h3 className="text-13 font-semibold text-placeholder">{t("projects")}</h3>
 
-            <div className="border border-subtle rounded-md px-2 py-2 bg-surface-2">
+            <div className="rounded-md border border-subtle bg-surface-2 px-2 py-2">
               <div className="space-y-3">
                 {/* Navigation Mode Radio Buttons */}
                 <div className="space-y-2">
-                  <label className="flex gap-2 px-2 py-1.5 rounded-md hover:bg-surface-2 cursor-pointer">
+                  <label className="flex cursor-pointer gap-2 rounded-md px-2 py-1.5 hover:bg-surface-2">
                     <input
                       type="radio"
                       name="navigation-mode"
                       value="ACCORDION"
                       checked={projectPreferences.navigationMode === "ACCORDION"}
                       onChange={() => updateNavigationMode("ACCORDION")}
-                      className="size-4 text-accent-primary focus:ring-accent-strong mt-1"
+                      className="mt-1 size-4 text-accent-primary focus:ring-accent-strong"
                     />
                     <div className="flex-1">
                       <div className="text-13 text-primary">{t("accordion_navigation_control")}</div>
@@ -284,14 +284,14 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                     </div>
                   </label>
 
-                  <label className="flex gap-2 px-2 py-1.5 rounded-md hover:bg-surface-2 cursor-pointer">
+                  <label className="flex cursor-pointer gap-2 rounded-md px-2 py-1.5 hover:bg-surface-2">
                     <input
                       type="radio"
                       name="navigation-mode"
                       value="TABBED"
                       checked={projectPreferences.navigationMode === "TABBED"}
                       onChange={() => updateNavigationMode("TABBED")}
-                      className="size-4 text-accent-primary focus:ring-accent-strong mt-1"
+                      className="mt-1 size-4 text-accent-primary focus:ring-accent-strong"
                     />
                     <div className="flex-1">
                       <div className="text-13 text-primary">{t("horizontal_navigation_bar")}</div>
@@ -304,7 +304,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
 
                 {/* Limited Projects Checkbox */}
                 <div className="space-y-1">
-                  <label className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-surface-2 cursor-pointer">
+                  <label className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-surface-2">
                     <Checkbox
                       checked={projectPreferences.showLimitedProjects}
                       onChange={(e) => updateShowLimitedProjects(e.target.checked)}
@@ -314,9 +314,9 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
 
                   {projectPreferences.showLimitedProjects && (
                     <div className="pl-8">
-                      <div className="flex flex-col gap-1 w-full">
-                        <div className="flex flex-col gap-2 w-full pb-1.5">
-                          <label className="text-11 text-secondary w-full">{t("enter_number_of_projects")}</label>
+                      <div className="flex w-full flex-col gap-1">
+                        <div className="flex w-full flex-col gap-2 pb-1.5">
+                          <label className="w-full text-11 text-secondary">{t("enter_number_of_projects")}</label>
                           <input
                             type="number"
                             min="1"
@@ -325,8 +325,8 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                             onKeyDown={handleKeyDown}
                             onChange={(e) => handleProjectCountChange(e.target.value)}
                             className={cn(
-                              "w-full px-2 py-1 text-13 rounded-md",
-                              "bg-surface-2 border",
+                              "w-full rounded-md px-2 py-1 text-13",
+                              "border bg-surface-2",
                               "text-secondary",
                               parseInt(projectCountInput) >= 1
                                 ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong"
@@ -335,7 +335,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
                           />
                         </div>
                         {parseInt(projectCountInput) < 1 && projectCountInput !== "" && (
-                          <span className="text-11 text-danger-primary pl-0.5">Minimum value is 1</span>
+                          <span className="pl-0.5 text-11 text-danger-primary">Minimum value is 1</span>
                         )}
                       </div>
                     </div>
diff --git a/apps/web/core/components/navigation/project-actions-menu.tsx b/apps/web/core/components/navigation/project-actions-menu.tsx
index f5fdc6f92cb..b097dc5bcff 100644
--- a/apps/web/core/components/navigation/project-actions-menu.tsx
+++ b/apps/web/core/components/navigation/project-actions-menu.tsx
@@ -48,7 +48,7 @@ export function ProjectActionsMenu({
       customButton={
         <span
           ref={actionSectionRef}
-          className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm"
+          className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
           onClick={() => setIsMenuActive(!isMenuActive)}
         >
           <MoreHorizontal className="size-4" />
@@ -85,7 +85,7 @@ export function ProjectActionsMenu({
             navigate(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
           }}
         >
-          <div className="flex items-center justify-start gap-2 cursor-pointer">
+          <div className="flex cursor-pointer items-center justify-start gap-2">
             <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
             <span>{t("archives")}</span>
           </div>
@@ -96,7 +96,7 @@ export function ProjectActionsMenu({
           navigate(`/${workspaceSlug}/settings/projects/${project?.id}`);
         }}
       >
-        <div className="flex items-center justify-start gap-2 cursor-pointer">
+        <div className="flex cursor-pointer items-center justify-start gap-2">
           <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
           <span>{t("settings")}</span>
         </div>
diff --git a/apps/web/core/components/navigation/project-header-button.tsx b/apps/web/core/components/navigation/project-header-button.tsx
index 87b742fa1d3..dfea9918c87 100644
--- a/apps/web/core/components/navigation/project-header-button.tsx
+++ b/apps/web/core/components/navigation/project-header-button.tsx
@@ -17,15 +17,15 @@ type TProjectHeaderButtonProps = {
 export function ProjectHeaderButton({ project }: TProjectHeaderButtonProps) {
   return (
     <Tooltip tooltipContent={project.name} position="bottom">
-      <div className="relative flex items-center text-left select-none w-full max-w-48 pr-1">
-        <div className="size-7 rounded-md bg-layer-1 flex items-center justify-center flex-shrink-0">
+      <div className="relative flex w-full max-w-48 items-center pr-1 text-left select-none">
+        <div className="flex size-7 flex-shrink-0 items-center justify-center rounded-md bg-layer-1">
           <Logo logo={project.logo_props} size={16} />
         </div>
-        <div className="relative flex-1 min-w-0 hover:rounded">
-          <p className="truncate text-14 font-medium text-secondary px-2">{project.name}</p>
-          <div className="absolute right-0 top-0 bottom-0 flex items-center justify-end pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-            <div className="relative h-full w-8 flex items-center justify-end">
-              <div className="absolute inset-0 bg-gradient-to-r from-transparent to-surface-2 rounded-r" />
+        <div className="relative min-w-0 flex-1 hover:rounded">
+          <p className="truncate px-2 text-14 font-medium text-secondary">{project.name}</p>
+          <div className="pointer-events-none absolute top-0 right-0 bottom-0 flex items-center justify-end opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+            <div className="relative flex h-full w-8 items-center justify-end">
+              <div className="absolute inset-0 rounded-r bg-gradient-to-r from-transparent to-surface-2" />
               <ChevronDownIcon className="relative z-10 size-4 text-tertiary" />
             </div>
           </div>
diff --git a/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
index 4f3d13cb86d..dfbf31c8ce3 100644
--- a/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
@@ -39,7 +39,7 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
       buttonClassName="!p-1.5"
       optionsClassName="min-w-[200px] space-y-1"
       customButton={
-        <div className="flex items-center justify-center rounded-md p-1 hover:bg-layer-1 transition-colors">
+        <div className="flex items-center justify-center rounded-md p-1 transition-colors hover:bg-layer-1">
           <MoreHorizontal className="h-4 w-4 text-secondary" />
         </div>
       }
@@ -51,9 +51,9 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
         const isDefault = item.key === tabPreferences.defaultTab;
 
         return (
-          <Menu.MenuItem key={`${item.key}-overflow-${itemIsActive ? "active" : "inactive"}`} className="p-0 w-full">
-            <div className="flex items-center justify-between w-full group/menu-item">
-              <Link to={item.href} className="flex-1 min-w-0 w-full p-1">
+          <Menu.MenuItem key={`${item.key}-overflow-${itemIsActive ? "active" : "inactive"}`} className="w-full p-0">
+            <div className="group/menu-item flex w-full items-center justify-between">
+              <Link to={item.href} className="w-full min-w-0 flex-1 p-1">
                 <span className="text-11">{t(item.i18n_key)}</span>
               </Link>
               <div className="flex items-center">
@@ -66,7 +66,7 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
                       e.preventDefault();
                       onShow(item.key);
                     }}
-                    className="invisible group-hover/menu-item:visible p-1 rounded-sm text-tertiary hover:text-primary transition-colors"
+                    className="invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary"
                     title="Show"
                   >
                     <Pin className="size-3" />
@@ -80,7 +80,7 @@ export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferen
                       onToggleDefault(item.key);
                     }}
                     className={cn(
-                      "invisible group-hover/menu-item:visible p-1 rounded-sm text-tertiary hover:text-primary transition-colors",
+                      "invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary",
                       {
                         visible: isDefault,
                       }
diff --git a/apps/web/core/components/navigation/tab-navigation-root.tsx b/apps/web/core/components/navigation/tab-navigation-root.tsx
index d4d974ee66c..c53fc45053f 100644
--- a/apps/web/core/components/navigation/tab-navigation-root.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-root.tsx
@@ -171,8 +171,8 @@ export const TabNavigationRoot = observer(function TabNavigationRoot(props: TTab
       />
 
       {/* container for the tab navigation */}
-      <div className="flex items-center gap-3 overflow-hidden size-full">
-        <div className="flex items-center gap-2 shrink-0">
+      <div className="flex size-full items-center gap-3 overflow-hidden">
+        <div className="flex shrink-0 items-center gap-2">
           <ProjectHeader workspaceSlug={workspaceSlug} projectId={projectId} />
           <div className="shrink-0">
             <ProjectActionsMenu
@@ -187,9 +187,9 @@ export const TabNavigationRoot = observer(function TabNavigationRoot(props: TTab
           </div>
         </div>
 
-        <div className="shrink-0 h-5 w-1 border-l border-subtle" />
+        <div className="h-5 w-1 shrink-0 border-l border-subtle" />
 
-        <div ref={containerRef} className="flex items-center h-full flex-1 min-w-0 overflow-hidden">
+        <div ref={containerRef} className="flex h-full min-w-0 flex-1 items-center overflow-hidden">
           <TabNavigationList className="h-full">
             {/* Render visible tab items */}
             {visibleItems.map((item) => {
@@ -224,7 +224,7 @@ export const TabNavigationRoot = observer(function TabNavigationRoot(props: TTab
           </TabNavigationList>
 
           {hasOverflow && (
-            <div className="absolute opacity-0 pointer-events-none -z-10">
+            <div className="pointer-events-none absolute -z-10 opacity-0">
               {visibleNavigationItems.map((item) => {
                 const itemIsActive = isActive(item);
                 const originalIndex = allNavigationItems.indexOf(item);
diff --git a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
index 8210663c3a2..dc53b846cdc 100644
--- a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
+++ b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
@@ -40,9 +40,9 @@ export function TabNavigationVisibleItem({
   const isDefault = item.key === tabPreferences.defaultTab;
 
   return (
-    <div className="relative h-full flex items-center transition-all duration-300">
+    <div className="relative flex h-full items-center transition-all duration-300">
       {isActive && (
-        <span className="absolute bottom-0 w-[80%] left-1/2 -translate-x-1/2 h-0.5 bg-(--text-color-icon-primary) rounded-t-md transition-all duration-300" />
+        <span className="absolute bottom-0 left-1/2 h-0.5 w-[80%] -translate-x-1/2 rounded-t-md bg-(--text-color-icon-primary) transition-all duration-300" />
       )}
       <div key={`${item.key}-measure`} ref={itemRef}>
         <ContextMenu>
@@ -60,9 +60,9 @@ export function TabNavigationVisibleItem({
                   e.stopPropagation();
                   onToggleDefault(item.key);
                 }}
-                className="flex items-center gap-2 text-secondary transition-colors cursor-pointer"
+                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
               >
-                <SetAsDefaultIcon className="shrink-0 size-3" />
+                <SetAsDefaultIcon className="size-3 shrink-0" />
                 <span className="text-11">{isDefault ? "Clear default" : "Set as default"}</span>
               </ContextMenu.Item>
               <ContextMenu.Item
@@ -70,9 +70,9 @@ export function TabNavigationVisibleItem({
                   e.stopPropagation();
                   onHide(item.key);
                 }}
-                className="flex items-center gap-2 text-secondary transition-colors cursor-pointer"
+                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
               >
-                <PinOff className="shrink-0 size-3" />
+                <PinOff className="size-3 shrink-0" />
                 <span className="text-11">Hide in more menu</span>
               </ContextMenu.Item>
             </ContextMenu.Content>
diff --git a/apps/web/core/components/navigation/top-nav-power-k.tsx b/apps/web/core/components/navigation/top-nav-power-k.tsx
index 7d454515fe8..22825d4b7e3 100644
--- a/apps/web/core/components/navigation/top-nav-power-k.tsx
+++ b/apps/web/core/components/navigation/top-nav-power-k.tsx
@@ -209,13 +209,13 @@ export const TopNavPowerK = observer(() => {
   return (
     <div ref={containerRef} className="relative">
       <div
-        className={cn("relative w-[364px] flex items-center transition-all duration-300 ease-in-out z-30", {
+        className={cn("relative z-30 flex w-[364px] items-center transition-all duration-300 ease-in-out", {
           "w-[554px]": isOpen,
         })}
       >
         <div
           className={cn(
-            "flex items-center w-full h-7 p-2 rounded-lg bg-layer-2 border border-subtle-1 transition-colors duration-200",
+            "flex h-7 w-full items-center rounded-lg border border-subtle-1 bg-layer-2 p-2 transition-colors duration-200",
             {
               "bg-layer-1": isOpen,
             }
@@ -223,7 +223,7 @@ export const TopNavPowerK = observer(() => {
           onClick={() => inputRef.current?.focus()}
           role="button"
         >
-          <SearchIcon className="shrink-0 size-3.5 text-placeholder mr-2" />
+          <SearchIcon className="mr-2 size-3.5 shrink-0 text-placeholder" />
           <input
             ref={inputRef}
             type="text"
@@ -236,10 +236,10 @@ export const TopNavPowerK = observer(() => {
             onFocus={handleFocus}
             onKeyDown={handleKeyDown}
             placeholder="Search commands..."
-            className="flex-1 bg-transparent text-13 text-primary placeholder-text-placeholder outline-none min-w-0"
+            className="placeholder-text-placeholder min-w-0 flex-1 bg-transparent text-13 text-primary outline-none"
           />
           {searchTerm && (
-            <button type="button" onClick={handleClear} className="shrink-0 ml-2">
+            <button type="button" onClick={handleClear} className="ml-2 shrink-0">
               <CloseIcon className="size-3.5 text-placeholder hover:text-primary" />
             </button>
           )}
@@ -247,10 +247,10 @@ export const TopNavPowerK = observer(() => {
       </div>
       <div
         className={cn(
-          "absolute -top-[6px] left-1/2 -translate-x-1/2  bg-surface-1 border border-subtle rounded-md shadow-lg overflow-hidden z-20  transition-all duration-300 ease-in-out flex flex-col px-0 pt-10",
+          "shadow-lg absolute -top-[6px] left-1/2 z-20 flex -translate-x-1/2 flex-col overflow-hidden rounded-md border border-subtle bg-surface-1 px-0 pt-10 transition-all duration-300 ease-in-out",
           {
-            "opacity-100 w-[574px] max-h-[80vh]": isOpen,
-            "opacity-0 w-0 h-0": !isOpen,
+            "max-h-[80vh] w-[574px] opacity-100": isOpen,
+            "h-0 w-0 opacity-0": !isOpen,
           }
         )}
       >
@@ -262,14 +262,14 @@ export const TopNavPowerK = observer(() => {
               return 0;
             }}
             shouldFilter={searchTerm.length > 0}
-            className="w-full flex flex-col h-full"
+            className="flex h-full w-full flex-col"
           >
             <Command.Input value={searchTerm} hidden />
             {/* We can skip the header input since we have the main input above,
                      but we might need the context indicator if we want that feature.
                      For now, let's just render the list. */}
 
-            <Command.List className="vertical-scrollbar scrollbar-sm max-h-[60vh] overflow-y-auto outline-none px-2 pb-4">
+            <Command.List className="vertical-scrollbar scrollbar-sm max-h-[60vh] overflow-y-auto px-2 pb-4 outline-none">
               <ProjectsAppPowerKCommandsList
                 activePage={activePage}
                 context={context}
diff --git a/apps/web/core/components/onboarding/create-or-join-workspaces.tsx b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
index 7a5728a3c56..3fad9e8db65 100644
--- a/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
+++ b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
@@ -57,8 +57,8 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
 
   return (
     <div className="flex h-full w-full">
-      <div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
-        <div className="flex flex-col w-full items-center justify-center p-8 mt-6">
+      <div className="h-full w-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
+        <div className="mt-6 flex w-full flex-col items-center justify-center p-8">
           {currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
             <Invitations
               invitations={invitations}
@@ -75,8 +75,8 @@ export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(p
               />
             ) : (
               <div className="flex h-96 w-full items-center justify-center">
-                <div className="flex gap-2.5 w-full items-start justify-center text-13 leading-5 mt-4 px-6 py-4 rounded-sm border border-accent-strong/20 bg-accent-primary/10 text-accent-secondary">
-                  <OctagonAlert className="flex-shrink-0 size-5 mt-1" />
+                <div className="mt-4 flex w-full items-start justify-center gap-2.5 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-6 py-4 text-13 leading-5 text-accent-secondary">
+                  <OctagonAlert className="mt-1 size-5 flex-shrink-0" />
                   <span>
                     You don&apos;t seem to have any invites to a workspace and your instance admin has restricted
                     creation of new workspaces. Please ask a workspace owner or admin to invite you to a workspace first
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index 85a45d2e394..34f7a937ced 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -107,11 +107,11 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
           <Button
             variant="ghost"
             size="xl"
-            className="w-full flex items-center gap-2 text-14 bg-surface-2"
+            className="flex w-full items-center gap-2 bg-surface-2 text-14"
             onClick={handleCurrentViewChange}
           >
             I want to join invited workspaces{" "}
-            <span className="bg-accent-primary/80 h-4 w-4 flex items-center justify-center rounded-xs text-11 font-medium text-on-color">
+            <span className="flex h-4 w-4 items-center justify-center rounded-xs bg-accent-primary/80 text-11 font-medium text-on-color">
               {invitedWorkspaces}
             </span>
           </Button>
@@ -122,14 +122,14 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
           </div>
         </>
       )}
-      <div className="text-center space-y-1 py-4 mx-auto">
+      <div className="mx-auto space-y-1 py-4 text-center">
         <h3 className="text-24 font-bold text-primary">{t("workspace_creation.heading")}</h3>
         <p className="font-medium text-placeholder">{t("workspace_creation.subheading")}</p>
       </div>
-      <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
+      <form className="mx-auto mt-2 w-full space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
         <div className="space-y-1">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="name"
           >
             {t("workspace_creation.form.name.label")}
@@ -172,7 +172,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
         </div>
         <div className="space-y-1">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="slug"
           >
             {t("workspace_creation.form.url.label")}
@@ -193,7 +193,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
                   invalidSlug ? "border-danger-strong" : "border-strong"
                 }`}
               >
-                <span className="whitespace-nowrap text-13">{window && window.location.host}/</span>
+                <span className="text-13 whitespace-nowrap">{window && window.location.host}/</span>
                 <Input
                   id="slug"
                   name="slug"
@@ -227,7 +227,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
         <hr className="w-full border-strong" />
         <div className="space-y-1">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="organization_size"
           >
             {t("workspace_creation.form.organization_size.label")}
diff --git a/apps/web/core/components/onboarding/header.tsx b/apps/web/core/components/onboarding/header.tsx
index 0320f00b28a..7efe5aafffb 100644
--- a/apps/web/core/components/onboarding/header.tsx
+++ b/apps/web/core/components/onboarding/header.tsx
@@ -69,8 +69,8 @@ export const OnboardingHeader = observer(function OnboardingHeader(props: Onboar
       : user?.email;
 
   return (
-    <div className="flex flex-col gap-4 sticky top-0 z-10">
-      <div className="h-1.5 rounded-t-lg w-full bg-surface-1 overflow-hidden cursor-pointer">
+    <div className="sticky top-0 z-10 flex flex-col gap-4">
+      <div className="h-1.5 w-full cursor-pointer overflow-hidden rounded-t-lg bg-surface-1">
         <Tooltip tooltipContent={`${currentStepNumber}/${totalSteps}`} position="bottom-end">
           <div
             className="h-full bg-accent-primary transition-all duration-700 ease-out"
@@ -78,7 +78,7 @@ export const OnboardingHeader = observer(function OnboardingHeader(props: Onboar
           />
         </Tooltip>
       </div>
-      <div className={cn("flex items-center justify-between gap-6 w-full px-6", canGoBack && "pl-4 pr-6")}>
+      <div className={cn("flex w-full items-center justify-between gap-6 px-6", canGoBack && "pr-6 pl-4")}>
         <div className="flex items-center gap-2.5">
           {canGoBack && (
             <button onClick={handleStepBack} className="cursor-pointer" type="button" disabled={!canGoBack}>
diff --git a/apps/web/core/components/onboarding/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
index e293b8851b7..f8537b96245 100644
--- a/apps/web/core/components/onboarding/invitations.tsx
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -63,7 +63,7 @@ export function Invitations(props: Props) {
 
   return invitations && invitations.length > 0 ? (
     <div className="space-y-4">
-      <div className="text-center space-y-1 py-4 mx-auto">
+      <div className="mx-auto space-y-1 py-4 text-center">
         <h3 className="text-24 font-bold text-primary">You are invited!</h3>
         <p className="font-medium text-placeholder">Accept the invites to collaborate with your team.</p>
       </div>
@@ -76,7 +76,7 @@ export function Invitations(props: Props) {
             return (
               <div
                 key={invitation.id}
-                className={`flex cursor-pointer items-center gap-2 rounded-sm border p-3.5 border-subtle hover:bg-surface-2`}
+                className={`flex cursor-pointer items-center gap-2 rounded-sm border border-subtle p-3.5 hover:bg-surface-2`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
                 <div className="flex-shrink-0">
@@ -114,7 +114,7 @@ export function Invitations(props: Props) {
       <Button
         variant="ghost"
         size="xl"
-        className="w-full text-14 bg-surface-2"
+        className="w-full bg-surface-2 text-14"
         onClick={handleCurrentViewChange}
         disabled={isJoiningWorkspaces}
       >
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index bf13c67e91b..acac3446eec 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -189,7 +189,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                 <Listbox.Button
                   type="button"
                   ref={setReferenceElement}
-                  className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-13 border-[0.5px] border-strong"
+                  className="flex w-full items-center justify-between gap-1 rounded-md border-[0.5px] border-strong px-2.5 py-2 text-13"
                 >
                   <span
                     className={`text-13 ${
@@ -208,7 +208,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
 
                 <Listbox.Options as="div">
                   <div
-                    className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-strong bg-surface-1 shadow-sm focus:outline-none"
+                    className="shadow-sm absolute z-10 mt-1 h-fit w-48 space-y-1 rounded-md border border-strong bg-surface-1 p-2 focus:outline-none sm:w-60"
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
@@ -219,13 +219,13 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                         key={key}
                         value={parseInt(key)}
                         className={({ active, selected }) =>
-                          `cursor-pointer select-none truncate rounded-sm px-1 py-1.5 ${
+                          `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
                             active || selected ? "bg-onboarding-background-400/40" : ""
                           } ${selected ? "text-primary" : "text-secondary"}`
                         }
                       >
                         {({ selected }) => (
-                          <div className="flex items-center text-wrap gap-2 p-1">
+                          <div className="flex items-center gap-2 p-1 text-wrap">
                             <div className="flex flex-col">
                               <div className="text-13 font-medium">{t(value.i18n_title)}</div>
                               <div className="flex text-11 text-tertiary">{t(value.i18n_description)}</div>
@@ -334,26 +334,26 @@ export function InviteMembers(props: Props) {
   }, [fields, append]);
 
   return (
-    <div className="flex w-full h-full">
-      <div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
-        <div className="flex flex-col w-full items-center justify-center p-8 mt-6 md:w-4/5 mx-auto">
-          <div className="text-center space-y-1 py-4 mx-auto w-4/5">
+    <div className="flex h-full w-full">
+      <div className="h-full w-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
+        <div className="mx-auto mt-6 flex w-full flex-col items-center justify-center p-8 md:w-4/5">
+          <div className="mx-auto w-4/5 space-y-1 py-4 text-center">
             <h3 className="text-24 font-bold text-primary">Invite your teammates</h3>
             <p className="font-medium text-placeholder">
               Work in plane happens best with your team. Invite them now to use Plane to its potential.
             </p>
           </div>
           <form
-            className="w-full mx-auto mt-2 space-y-4"
+            className="mx-auto mt-2 w-full space-y-4"
             onSubmit={handleSubmit(onSubmit)}
             onKeyDown={(e) => {
               if (e.code === "Enter") e.preventDefault();
             }}
           >
-            <div className="w-full text-13 py-4">
-              <div className="group relative grid grid-cols-10 gap-4 mx-8 py-2">
-                <div className="col-span-6 px-1 text-13 text-secondary font-medium">Email</div>
-                <div className="col-span-4 px-1 text-13 text-secondary font-medium">Role</div>
+            <div className="w-full py-4 text-13">
+              <div className="group relative mx-8 grid grid-cols-10 gap-4 py-2">
+                <div className="col-span-6 px-1 text-13 font-medium text-secondary">Email</div>
+                <div className="col-span-4 px-1 text-13 font-medium text-secondary">Role</div>
               </div>
               <div className="mb-3 space-y-3 sm:space-y-4">
                 {fields.map((field, index) => (
@@ -375,14 +375,14 @@ export function InviteMembers(props: Props) {
               </div>
               <button
                 type="button"
-                className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
+                className="mx-8 flex items-center gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
                 onClick={appendField}
               >
                 <PlusIcon className="h-4 w-4" strokeWidth={2} />
                 Add another
               </button>
             </div>
-            <div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-full max-w-96">
+            <div className="mx-auto flex w-full max-w-96 flex-col items-center justify-center gap-4 px-8 sm:px-2">
               <Button
                 variant="primary"
                 type="submit"
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index 8fdb9973f3b..1880323e8f9 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -245,8 +245,8 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
 
   return (
     <div className="flex h-full w-full">
-      <div className="flex flex-col w-full items-center justify-center p-8 mt-6">
-        <form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
+      <div className="mt-6 flex w-full flex-col items-center justify-center p-8">
+        <form onSubmit={handleSubmit(onSubmit)} className="mx-auto mt-2 w-full space-y-4 sm:w-96">
           {profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
             <>
               <Controller
@@ -265,12 +265,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                   />
                 )}
               />
-              <div className="space-y-1 flex items-center justify-center">
+              <div className="flex items-center justify-center space-y-1">
                 <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                   {!userAvatar || userAvatar === "" ? (
                     <div className="flex flex-col items-center justify-between">
                       <div className="relative h-14 w-14 overflow-hidden">
-                        <div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-on-color text-24 font-medium bg-accent-primary uppercase">
+                        <div className="absolute top-0 left-0 flex h-full w-full items-center justify-center rounded-full bg-accent-primary text-24 font-medium text-on-color uppercase">
                           {watch("first_name")[0] ?? "R"}
                         </div>
                       </div>
@@ -282,7 +282,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     <div className="relative mr-3 h-16 w-16 overflow-hidden">
                       <img
                         src={getFileURL(userAvatar ?? "")}
-                        className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                        className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                         onClick={() => setIsImageUploadModalOpen(true)}
                         alt={user?.display_name}
                       />
@@ -290,10 +290,10 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                   )}
                 </button>
               </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <div className="space-y-1">
                   <label
-                    className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+                    className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
                     htmlFor="first_name"
                   >
                     First name
@@ -331,7 +331,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                 </div>
                 <div className="space-y-1">
                   <label
-                    className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+                    className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
                     htmlFor="last_name"
                   >
                     Last name
@@ -370,7 +370,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
               {!isPasswordAlreadySetup && (
                 <>
                   <div className="space-y-1">
-                    <label className="text-13 text-tertiary font-medium" htmlFor="password">
+                    <label className="text-13 font-medium text-tertiary" htmlFor="password">
                       Set a password ({t("common.optional")})
                     </label>
                     <Controller
@@ -411,7 +411,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     <PasswordStrengthIndicator password={watch("password") ?? ""} isFocused={isPasswordInputFocused} />
                   </div>
                   <div className="space-y-1">
-                    <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
+                    <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
                       {t("auth.common.password.confirm_password.label")} ({t("common.optional")})
                     </label>
                     <Controller
@@ -463,7 +463,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
             <>
               <div className="space-y-1">
                 <label
-                  className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+                  className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
                   htmlFor="role"
                 >
                   What role are you working on? Choose one.
@@ -475,12 +475,12 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     required: "This field is required",
                   }}
                   render={({ field: { value, onChange } }) => (
-                    <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
+                    <div className="flex flex-wrap gap-2 overflow-auto py-2 break-all">
                       {USER_ROLE.map((userRole) => (
                         <div
                           key={userRole}
                           className={cn(
-                            "shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-surface-2 rounded px-3 py-1.5 text-13 font-medium",
+                            "shrink-0 rounded border-[0.5px] px-3 py-1.5 text-13 font-medium hover:cursor-pointer hover:bg-surface-2",
                             {
                               "border-accent-strong": value === userRole,
                               "border-strong": value !== userRole,
@@ -498,7 +498,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
               </div>
               <div className="space-y-1">
                 <label
-                  className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+                  className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
                   htmlFor="use_case"
                 >
                   What is your domain expertise? Choose one or more.
@@ -511,7 +511,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
                     validate: (value) => (value && value.length > 0) || "Please select at least one option",
                   }}
                   render={({ field: { value, onChange } }) => (
-                    <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
+                    <div className="flex flex-wrap gap-2 overflow-auto py-2 break-all">
                       {USER_DOMAIN.map((userDomain) => {
                         const isSelected = value?.includes(userDomain) || false;
                         return (
diff --git a/apps/web/core/components/onboarding/root.tsx b/apps/web/core/components/onboarding/root.tsx
index 17347545fb5..cc8e7cfe41f 100644
--- a/apps/web/core/components/onboarding/root.tsx
+++ b/apps/web/core/components/onboarding/root.tsx
@@ -119,7 +119,7 @@ export const OnboardingRoot = observer(function OnboardingRoot({ invitations = [
   }, []);
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       {/* Header with progress */}
       <OnboardingHeader
         currentStep={currentStep}
diff --git a/apps/web/core/components/onboarding/step-indicator.tsx b/apps/web/core/components/onboarding/step-indicator.tsx
index 651dfa13a0c..8aa8dcae390 100644
--- a/apps/web/core/components/onboarding/step-indicator.tsx
+++ b/apps/web/core/components/onboarding/step-indicator.tsx
@@ -26,7 +26,7 @@ export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingS
       indicators.push(
         <div
           key={`line-${i}`}
-          className={cn("h-1.5 -ml-0.5 w-full", {
+          className={cn("-ml-0.5 h-1.5 w-full", {
             "bg-success-primary": isCompleted,
             "bg-surface-1": !isCompleted,
             "rounded-l-full": isFirstStep,
@@ -42,10 +42,10 @@ export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingS
 
   return (
     <div className="flex flex-col justify-center">
-      <div className="text-13 text-tertiary font-medium">
+      <div className="text-13 font-medium text-tertiary">
         {currentStep} of {totalSteps} steps
       </div>
-      <div className="flex items-center justify-center my-0.5 mx-1 w-40 lg:w-52">{renderIndicators()}</div>
+      <div className="mx-1 my-0.5 flex w-40 items-center justify-center lg:w-52">{renderIndicators()}</div>
     </div>
   );
 }
diff --git a/apps/web/core/components/onboarding/steps/common/header.tsx b/apps/web/core/components/onboarding/steps/common/header.tsx
index 9905f0e4a84..f6891126a51 100644
--- a/apps/web/core/components/onboarding/steps/common/header.tsx
+++ b/apps/web/core/components/onboarding/steps/common/header.tsx
@@ -13,7 +13,7 @@ type Props = {
 
 export function CommonOnboardingHeader({ title, description }: Props) {
   return (
-    <div className="text-left space-y-2">
+    <div className="space-y-2 text-left">
       <h1 className="text-h4-semibold text-primary">{title}</h1>
       <p className="text-body-md-regular text-tertiary">{description}</p>
     </div>
diff --git a/apps/web/core/components/onboarding/steps/profile/consent.tsx b/apps/web/core/components/onboarding/steps/profile/consent.tsx
index ea8a2dc5edb..62927e43731 100644
--- a/apps/web/core/components/onboarding/steps/profile/consent.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/consent.tsx
@@ -19,11 +19,11 @@ export function MarketingConsent({ isChecked, handleChange }: Props) {
       <button
         type="button"
         onClick={() => handleChange(!isChecked)}
-        className={`size-4 rounded-sm border-2 flex items-center justify-center ${
-          isChecked ? "bg-accent-primary border-accent-strong" : "border-strong"
+        className={`flex size-4 items-center justify-center rounded-sm border-2 ${
+          isChecked ? "border-accent-strong bg-accent-primary" : "border-strong"
         }`}
       >
-        {isChecked && <CheckIcon className="w-3 h-3 text-on-color" />}
+        {isChecked && <CheckIcon className="h-3 w-3 text-on-color" />}
       </button>
       <span className="text-13 text-tertiary">I agree to Plane marketing communications</span>
     </div>
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index ca8a648b92b..5e71c802f3b 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -168,7 +168,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
       />
       <div className="flex items-center gap-4">
         <button
-          className="size-12 rounded-full bg-accent-primary flex items-center justify-center text-on-color font-semibold text-18"
+          className="flex size-12 items-center justify-center rounded-full bg-accent-primary text-18 font-semibold text-on-color"
           type="button"
           onClick={() => setIsImageUploadModalOpen(true)}
         >
@@ -177,7 +177,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
               src={getFileURL(userAvatar ?? "")}
               onClick={() => setIsImageUploadModalOpen(true)}
               alt={user?.display_name}
-              className="w-full h-full rounded-full object-cover"
+              className="h-full w-full rounded-full object-cover"
             />
           ) : (
             <>{watch("first_name")[0] ?? "R"}</>
@@ -185,7 +185,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
         </button>
         <input type="file" className="hidden" id="profile-image-input" />
         <button
-          className="flex items-center gap-1.5 text-tertiary hover:text-secondary text-13 px-2 py-1"
+          className="flex items-center gap-1.5 px-2 py-1 text-13 text-tertiary hover:text-secondary"
           type="button"
           onClick={() => setIsImageUploadModalOpen(true)}
         >
@@ -194,11 +194,11 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
         </button>
       </div>
 
-      <div className="flex flex-col gap-6 w-full">
+      <div className="flex w-full flex-col gap-6">
         {/* Name Input */}
         <div className="flex flex-col gap-2">
           <label
-            className="block text-13 font-medium text-tertiary after:content-['*'] after:ml-0.5 after:text-danger-primary"
+            className="block text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="first_name"
           >
             Name
@@ -224,7 +224,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
                 onChange={(e) => onChange(e.target.value)}
                 autoFocus
                 className={cn(
-                  "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
+                  "w-full rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
                   {
                     "border-strong": !errors.first_name,
                     "border-danger-strong": errors.first_name,
diff --git a/apps/web/core/components/onboarding/steps/profile/set-password.tsx b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
index 8736fd9814e..95421e2b391 100644
--- a/apps/web/core/components/onboarding/steps/profile/set-password.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
@@ -76,10 +76,10 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
   );
 
   return (
-    <div className={`flex flex-col rounded-lg overflow-hidden transition-all duration-300 ease-in-out bg-surface-2`}>
+    <div className={`flex flex-col overflow-hidden rounded-lg bg-surface-2 transition-all duration-300 ease-in-out`}>
       <div
         className={cn(
-          "flex items-center justify-between transition-colors duration-200 px-3 py-2 text-13",
+          "flex items-center justify-between px-3 py-2 text-13 transition-colors duration-200",
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           isExpanded && "pb-1"
         )}
@@ -97,7 +97,7 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
 
       <div className={expandedContentClasses}>
         {/* Password input */}
-        <div className="flex flex-col gap-2 transform transition-all duration-300 ease-in-out pt-1">
+        <div className="flex transform flex-col gap-2 pt-1 transition-all duration-300 ease-in-out">
           <PasswordInput
             id="password"
             value={passwordState.password}
@@ -110,12 +110,12 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
 
         <div className="flex flex-col gap-2 pb-2">
           {/* Confirm password label */}
-          <div className="text-tertiary font-medium transform transition-all duration-300 ease-in-out delay-75 text-13">
+          <div className="transform text-13 font-medium text-tertiary transition-all delay-75 duration-300 ease-in-out">
             Confirm password
           </div>
 
           {/* Confirm password input */}
-          <div className="transform transition-all duration-300 ease-in-out delay-100">
+          <div className="transform transition-all delay-100 duration-300 ease-in-out">
             <PasswordInput
               id="confirm-password"
               value={passwordState.confirmPassword}
@@ -123,8 +123,8 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
               placeholder="Confirm password"
               className="transition-all duration-200"
             />
-            {hasPasswordMismatch && <p className="text-11 text-danger-primary mt-1">Passwords do not match</p>}
-            {isPasswordValid && <p className="text-11 text-success-primary mt-1">✓ Passwords match</p>}
+            {hasPasswordMismatch && <p className="mt-1 text-11 text-danger-primary">Passwords do not match</p>}
+            {isPasswordValid && <p className="mt-1 text-11 text-success-primary">✓ Passwords match</p>}
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 8aa07ed7abd..43029d1cfdb 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -116,10 +116,10 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
                       e.preventDefault();
                       onChange(role.id);
                     }}
-                    className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center justify-between ${
+                    className={`flex w-full items-center justify-between rounded-lg border px-3 py-2 transition-all duration-200 ${
                       isSelected
                         ? "border-accent-strong bg-accent-subtle text-accent-primary"
-                        : "border-subtle hover:border-strong text-tertiary"
+                        : "border-subtle text-tertiary hover:border-strong"
                     }`}
                   >
                     <div className="flex items-center space-x-3">
@@ -129,9 +129,9 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
                     {isSelected && (
                       <>
                         <button
-                          className={`size-4 rounded-sm border-2 flex items-center justify-center bg-accent-primary border-blue-500`}
+                          className={`border-blue-500 flex size-4 items-center justify-center rounded-sm border-2 bg-accent-primary`}
                         >
-                          <CheckIcon className="w-3 h-3 text-on-color" />
+                          <CheckIcon className="h-3 w-3 text-on-color" />
                         </button>
                       </>
                     )}
@@ -148,7 +148,7 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
         <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
           Continue
         </Button>
-        <Button variant="ghost" onClick={handleSkip} className="text-tertiary w-full" size="xl">
+        <Button variant="ghost" onClick={handleSkip} className="w-full text-tertiary" size="xl">
           Skip
         </Button>
       </div>
diff --git a/apps/web/core/components/onboarding/steps/root.tsx b/apps/web/core/components/onboarding/steps/root.tsx
index 0ef9440118f..70297c1e7b2 100644
--- a/apps/web/core/components/onboarding/steps/root.tsx
+++ b/apps/web/core/components/onboarding/steps/root.tsx
@@ -55,7 +55,7 @@ export function OnboardingStepRoot(props: Props) {
 
   return (
     <div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
-      <div className="flex items-center justify-center min-h-full p-8">
+      <div className="flex min-h-full items-center justify-center p-8">
         <div className="w-full max-w-[24rem]">
           <OnboardingStepContent {...props} />
         </div>
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index 8ba63eb28aa..536110fd03b 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -185,7 +185,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                 <Listbox.Button
                   type="button"
                   ref={setReferenceElement}
-                  className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-13 border-[0.5px] border-strong"
+                  className="flex w-full items-center justify-between gap-1 rounded-md border-[0.5px] border-strong px-2.5 py-2 text-13"
                 >
                   <span
                     className={`text-13 ${
@@ -204,7 +204,7 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
 
                 <Listbox.Options as="div">
                   <div
-                    className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-strong bg-surface-1 shadow-sm focus:outline-none"
+                    className="shadow-sm absolute z-10 mt-1 h-fit w-48 space-y-1 rounded-md border border-strong bg-surface-1 p-2 focus:outline-none sm:w-60"
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
@@ -215,13 +215,13 @@ const InviteMemberInput = observer(function InviteMemberInput(props: InviteMembe
                         key={key}
                         value={parseInt(key)}
                         className={({ active, selected }) =>
-                          `cursor-pointer select-none truncate rounded-sm px-1 py-1.5 ${
+                          `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
                             active || selected ? "bg-onboarding-background-400/40" : ""
                           } ${selected ? "text-primary" : "text-secondary"}`
                         }
                       >
                         {({ selected }) => (
-                          <div className="flex items-center text-wrap gap-2 p-1">
+                          <div className="flex items-center gap-2 p-1 text-wrap">
                             <div className="flex flex-col">
                               <div className="text-13 font-medium">{t(value.i18n_title)}</div>
                               <div className="flex text-11 text-tertiary">{t(value.i18n_description)}</div>
@@ -345,10 +345,10 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         title="Invite your teammates"
         description="Work in plane happens best with your team. Invite them now to use Plane to its potential."
       />
-      <div className="w-full text-13 py-4">
-        <div className="group relative grid grid-cols-10 gap-4 mx-8 py-2">
-          <div className="col-span-6 px-1 text-13 text-secondary font-medium">Email</div>
-          <div className="col-span-4 px-1 text-13 text-secondary font-medium">Role</div>
+      <div className="w-full py-4 text-13">
+        <div className="group relative mx-8 grid grid-cols-10 gap-4 py-2">
+          <div className="col-span-6 px-1 text-13 font-medium text-secondary">Email</div>
+          <div className="col-span-4 px-1 text-13 font-medium text-secondary">Role</div>
         </div>
         <div className="mb-3 space-y-3 sm:space-y-4">
           {fields.map((field, index) => (
@@ -370,14 +370,14 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         </div>
         <button
           type="button"
-          className="flex items-center mx-8 gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
+          className="mx-8 flex items-center gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
           onClick={appendField}
         >
           <PlusIcon className="h-4 w-4" strokeWidth={2} />
           Add another
         </button>
       </div>
-      <div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-full">
+      <div className="mx-auto flex w-full flex-col items-center justify-center gap-4 px-8 sm:px-2">
         <Button
           variant="primary"
           type="submit"
diff --git a/apps/web/core/components/onboarding/steps/usecase/root.tsx b/apps/web/core/components/onboarding/steps/usecase/root.tsx
index 2fb39544878..8908adaf3b4 100644
--- a/apps/web/core/components/onboarding/steps/usecase/root.tsx
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -118,20 +118,20 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
                         onChange([...currentValue, useCase]);
                       }
                     }}
-                    className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center gap-2 ${
+                    className={`flex w-full items-center gap-2 rounded-lg border px-3 py-2 transition-all duration-200 ${
                       isSelected
                         ? "border-accent-strong bg-accent-subtle text-accent-primary"
-                        : "border-subtle hover:border-strong text-tertiary"
+                        : "border-subtle text-tertiary hover:border-strong"
                     }`}
                   >
                     <span
-                      className={cn(`size-4 rounded-sm border-2 flex items-center justify-center`, {
-                        "bg-accent-primary border-accent-strong": isSelected,
+                      className={cn(`flex size-4 items-center justify-center rounded-sm border-2`, {
+                        "border-accent-strong bg-accent-primary": isSelected,
                         "border-strong": !isSelected,
                       })}
                     >
                       <CheckIcon
-                        className={cn("w-3 h-3 text-on-color", {
+                        className={cn("h-3 w-3 text-on-color", {
                           "opacity-100": isSelected,
                           "opacity-0": !isSelected,
                         })}
diff --git a/apps/web/core/components/onboarding/steps/workspace/create.tsx b/apps/web/core/components/onboarding/steps/workspace/create.tsx
index 371c4532ab0..f9c32a91f26 100644
--- a/apps/web/core/components/onboarding/steps/workspace/create.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -136,7 +136,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
       <div className="flex flex-col gap-8">
         <div className="flex flex-col gap-2">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="name"
           >
             {t("workspace_creation.form.name.label")}
@@ -169,7 +169,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                   placeholder="Enter workspace name"
                   ref={ref}
                   className={cn(
-                    "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
+                    "w-full rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
                     {
                       "border-strong": !errors.name,
                       "border-danger-strong": errors.name,
@@ -185,7 +185,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
         </div>
         <div className="flex flex-col gap-2">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="slug"
           >
             {t("workspace_creation.form.url.label")}
@@ -203,14 +203,14 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
             render={({ field: { value, ref, onChange } }) => (
               <div
                 className={cn(
-                  "flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong focus:border-transparent transition-all duration-200",
+                  "flex w-full items-center rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
                   {
                     "border-strong": !errors.name,
                     "border-danger-strong": errors.name,
                   }
                 )}
               >
-                <span className={cn("pr-0 text-secondary rounded-md whitespace-nowrap")}>
+                <span className={cn("rounded-md pr-0 whitespace-nowrap text-secondary")}>
                   {window && window.location.host}/
                 </span>
                 <input
@@ -227,7 +227,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                   ref={ref}
                   placeholder={t("workspace_creation.form.url.placeholder")}
                   className={cn(
-                    "w-full px-3 py-0 pl-0 text-secondary border-none ring-none outline-none rounded-md bg-surface-1 placeholder:text-placeholder"
+                    "ring-none w-full rounded-md border-none bg-surface-1 px-3 py-0 pl-0 text-secondary outline-none placeholder:text-placeholder"
                   )}
                 />
               </div>
@@ -246,7 +246,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
         </div>
         <div className="flex flex-col gap-2">
           <label
-            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-danger-primary"
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
             htmlFor="organization_size"
           >
             {t("workspace_creation.form.organization_size.label")}
@@ -268,10 +268,10 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
                           e.stopPropagation();
                           onChange(size);
                         }}
-                        className={`text-13 px-3 py-2 rounded-lg border transition-all duration-200 flex gap-1 items-center justify-between ${
+                        className={`flex items-center justify-between gap-1 rounded-lg border px-3 py-2 text-13 transition-all duration-200 ${
                           isSelected
                             ? "border-subtle bg-layer-1 text-secondary"
-                            : "border-subtle hover:border-strong text-tertiary"
+                            : "border-subtle text-tertiary hover:border-strong"
                         }`}
                       >
                         <CircleCheck className={cn("size-4 text-placeholder", isSelected && "text-secondary")} />
diff --git a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
index ec50bb97cae..c49c0d2aca2 100644
--- a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
@@ -77,7 +77,7 @@ export function WorkspaceJoinInvitesStep(props: Props) {
             return (
               <div
                 key={invitation.id}
-                className={`flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 border-subtle hover:bg-surface-2`}
+                className={`flex cursor-pointer items-center gap-2 rounded-lg border border-subtle px-3 py-2 hover:bg-surface-2`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
                 <div className="flex-shrink-0">
diff --git a/apps/web/core/components/onboarding/switch-account-dropdown.tsx b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
index f66219976f6..aae4375249d 100644
--- a/apps/web/core/components/onboarding/switch-account-dropdown.tsx
+++ b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
@@ -39,13 +39,13 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
     <>
       <SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
       <Menu as="div" className="relative">
-        <Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-layer-1 z-10">
-          <div className="size-6 rounded-full bg-success-primary flex items-center justify-center text-on-color font-semibold text-13 capitalize">
+        <Menu.Button className="z-10 flex items-center gap-x-2.5 rounded-lg bg-layer-1 px-2 py-1.5">
+          <div className="flex size-6 items-center justify-center rounded-full bg-success-primary text-13 font-semibold text-on-color capitalize">
             {user?.avatar_url ? (
               <img
                 src={getFileURL(user?.avatar_url)}
                 alt={user?.display_name}
-                className="w-full h-full rounded-full object-cover"
+                className="h-full w-full rounded-full object-cover"
               />
             ) : (
               <>{fullName?.[0] ?? "R"}</>
@@ -61,12 +61,12 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
           leaveFrom="transform scale-100 opacity-100"
           leaveTo="transform scale-95 opacity-0"
         >
-          <Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-strong mt-2 bg-surface-1 px-2 py-2.5 text-13 min-w-[12rem] shadow-raised-200">
+          <Menu.Items className="absolute right-0 z-10 mt-2 min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-13 shadow-raised-200">
             <Menu.Item
               as="button"
               type="button"
               className={({ active }) =>
-                cn("text-danger-primary px-1 py-1.5 whitespace-nowrap text-left rounded-sm w-full", {
+                cn("w-full rounded-sm px-1 py-1.5 text-left whitespace-nowrap text-danger-primary", {
                   "bg-layer-1": active,
                 })
               }
diff --git a/apps/web/core/components/onboarding/switch-account-modal.tsx b/apps/web/core/components/onboarding/switch-account-modal.tsx
index c41ec0a9018..aa80f8e330a 100644
--- a/apps/web/core/components/onboarding/switch-account-modal.tsx
+++ b/apps/web/core/components/onboarding/switch-account-modal.tsx
@@ -90,8 +90,8 @@ export function SwitchAccountModal(props: Props) {
                         <ArrowRightLeft className="h-5 w-5 text-accent-primary" aria-hidden="true" />
                       </div>
                     </div>
-                    <div className="flex flex-col py-3 gap-y-6">
-                      <Dialog.Title as="h3" className="text-20 font-medium leading-6 text-primary">
+                    <div className="flex flex-col gap-y-6 py-3">
+                      <Dialog.Title as="h3" className="text-20 leading-6 font-medium text-primary">
                         Switch account
                       </Dialog.Title>
                       {userData?.email && (
diff --git a/apps/web/core/components/pages/editor/content-limit-banner.tsx b/apps/web/core/components/pages/editor/content-limit-banner.tsx
index 0a6e487fd6f..52fba7e4e60 100644
--- a/apps/web/core/components/pages/editor/content-limit-banner.tsx
+++ b/apps/web/core/components/pages/editor/content-limit-banner.tsx
@@ -14,8 +14,8 @@ type Props = {
 
 export function ContentLimitBanner({ className, onDismiss }: Props) {
   return (
-    <div className={cn("flex items-center gap-2 bg-layer-2 border-b border-subtle-1 px-4 py-2.5 text-sm", className)}>
-      <div className="flex items-center gap-2 text-secondary mx-auto">
+    <div className={cn("text-sm flex items-center gap-2 border-b border-subtle-1 bg-layer-2 px-4 py-2.5", className)}>
+      <div className="mx-auto flex items-center gap-2 text-secondary">
         <span className="text-amber-500">
           <TriangleAlert />
         </span>
diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx
index 2175a5c755c..907c6d9e405 100644
--- a/apps/web/core/components/pages/editor/editor-body.tsx
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@@ -224,7 +224,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
   );
 
   const blockWidthClassName = cn(
-    "block bg-transparent w-full max-w-[720px] mx-auto transition-all duration-200 ease-in-out",
+    "mx-auto block w-full max-w-[720px] bg-transparent transition-all duration-200 ease-in-out",
     {
       "max-w-[1152px]": isFullWidth,
     }
@@ -236,24 +236,24 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
 
   return (
     <Row
-      className="relative size-full flex flex-col overflow-y-auto overflow-x-hidden vertical-scrollbar scrollbar-md duration-200"
+      className="vertical-scrollbar relative flex scrollbar-md size-full flex-col overflow-x-hidden overflow-y-auto duration-200"
       variant={ERowVariant.HUGGING}
     >
       <div id="page-content-container" className="relative w-full flex-shrink-0">
         {/* table of content */}
         {!isNavigationPaneOpen && (
-          <div className="page-summary-container absolute h-full right-0 top-[64px] z-[5]">
+          <div className="page-summary-container absolute top-[64px] right-0 z-[5] h-full">
             <div className="sticky top-[72px]">
               <div className="group/page-toc relative px-page-x">
                 <div
-                  className="!cursor-pointer max-h-[50vh] overflow-hidden"
+                  className="max-h-[50vh] !cursor-pointer overflow-hidden"
                   role="button"
                   aria-label={t("page_navigation_pane.outline_floating_button")}
                   onClick={handleOpenNavigationPane}
                 >
                   <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} showOutline />
                 </div>
-                <div className="absolute top-0 right-0 opacity-0 translate-x-1/2 pointer-events-none group-hover/page-toc:opacity-100 group-hover/page-toc:-translate-x-1/4 group-hover/page-toc:pointer-events-auto transition-all duration-300 w-52 max-h-[70vh] overflow-y-scroll vertical-scrollbar scrollbar-sm whitespace-nowrap bg-surface-2 p-4 rounded-sm">
+                <div className="vertical-scrollbar pointer-events-none absolute top-0 right-0 scrollbar-sm max-h-[70vh] w-52 translate-x-1/2 overflow-y-scroll rounded-sm bg-surface-2 p-4 whitespace-nowrap opacity-0 transition-all duration-300 group-hover/page-toc:pointer-events-auto group-hover/page-toc:-translate-x-1/4 group-hover/page-toc:opacity-100">
                   <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} />
                 </div>
               </div>
diff --git a/apps/web/core/components/pages/editor/header/logo-picker.tsx b/apps/web/core/components/pages/editor/header/logo-picker.tsx
index 9102be8a82c..1f037fd6ddc 100644
--- a/apps/web/core/components/pages/editor/header/logo-picker.tsx
+++ b/apps/web/core/components/pages/editor/header/logo-picker.tsx
@@ -27,8 +27,8 @@ export const PageEditorHeaderLogoPicker = observer(function PageEditorHeaderLogo
 
   return (
     <div
-      className={cn(className, "max-h-0 pointer-events-none transition-all ease-linear duration-300", {
-        "max-h-[56px] pointer-events-auto": isLogoSelected,
+      className={cn(className, "pointer-events-none max-h-0 transition-all duration-300 ease-linear", {
+        "pointer-events-auto max-h-[56px]": isLogoSelected,
       })}
     >
       <EmojiPicker
@@ -38,7 +38,7 @@ export const PageEditorHeaderLogoPicker = observer(function PageEditorHeaderLogo
         buttonClassName="flex items-center justify-center"
         label={
           <div
-            className={cn("-ml-[8px] size-[56px] grid place-items-center rounded-sm transition-colors", {
+            className={cn("-ml-[8px] grid size-[56px] place-items-center rounded-sm transition-colors", {
               "hover:bg-layer-1": isContentEditable,
             })}
           >
diff --git a/apps/web/core/components/pages/editor/header/root.tsx b/apps/web/core/components/pages/editor/header/root.tsx
index 3b754fb13a1..f70e7b32cac 100644
--- a/apps/web/core/components/pages/editor/header/root.tsx
+++ b/apps/web/core/components/pages/editor/header/root.tsx
@@ -31,10 +31,10 @@ export const PageEditorHeaderRoot = observer(function PageEditorHeaderRoot(props
 
   return (
     <>
-      <div className="h-[48px] flex items-end text-left">
+      <div className="flex h-[48px] items-end text-left">
         {!isLogoSelected && (
           <div
-            className={cn("opacity-0 group-hover/page-header:opacity-100 transition-all duration-200", {
+            className={cn("opacity-0 transition-all duration-200 group-hover/page-header:opacity-100", {
               "opacity-100": isTitleEmpty,
             })}
           >
@@ -47,13 +47,13 @@ export const PageEditorHeaderRoot = observer(function PageEditorHeaderRoot(props
                 <button
                   type="button"
                   className={cn(
-                    "flex items-center gap-1 p-1 rounded-sm font-medium text-13 hover:bg-layer-1 text-tertiary outline-none transition-colors",
+                    "flex items-center gap-1 rounded-sm p-1 text-13 font-medium text-tertiary transition-colors outline-none hover:bg-layer-1",
                     {
                       "bg-layer-1": isLogoPickerOpen,
                     }
                   )}
                 >
-                  <SmilePlus className="flex-shrink-0 size-4" />
+                  <SmilePlus className="size-4 flex-shrink-0" />
                   Icon
                 </button>
               }
@@ -71,7 +71,7 @@ export const PageEditorHeaderRoot = observer(function PageEditorHeaderRoot(props
           </div>
         )}
       </div>
-      <PageEditorHeaderLogoPicker className="flex-shrink-0 w-full mt-2 flex" page={page} />
+      <PageEditorHeaderLogoPicker className="mt-2 flex w-full flex-shrink-0" page={page} />
     </>
   );
 });
diff --git a/apps/web/core/components/pages/editor/page-root.tsx b/apps/web/core/components/pages/editor/page-root.tsx
index eec8e3c264f..728b47fe9af 100644
--- a/apps/web/core/components/pages/editor/page-root.tsx
+++ b/apps/web/core/components/pages/editor/page-root.tsx
@@ -154,8 +154,8 @@ export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
   );
 
   return (
-    <div className="relative size-full overflow-hidden flex transition-all duration-300 ease-in-out">
-      <div className="size-full flex flex-col overflow-hidden">
+    <div className="relative flex size-full overflow-hidden transition-all duration-300 ease-in-out">
+      <div className="flex size-full flex-col overflow-hidden">
         <PageVersionsOverlay
           editorComponent={PagesVersionEditor}
           fetchVersionDetails={handlers.fetchVersionDetails}
diff --git a/apps/web/core/components/pages/editor/summary/content-browser.tsx b/apps/web/core/components/pages/editor/summary/content-browser.tsx
index 1d301940ad8..b739660f623 100644
--- a/apps/web/core/components/pages/editor/summary/content-browser.tsx
+++ b/apps/web/core/components/pages/editor/summary/content-browser.tsx
@@ -55,7 +55,7 @@ export function PageContentBrowser(props: Props) {
   return (
     <div
       className={cn(
-        "h-full flex flex-col items-start gap-y-1 mt-2",
+        "mt-2 flex h-full flex-col items-start gap-y-1",
         {
           "gap-y-2": showOutline,
         },
@@ -69,7 +69,7 @@ export function PageContentBrowser(props: Props) {
           return (
             <div
               key={`${marking.level}-${marking.sequence}`}
-              className="flex-shrink-0 h-0.5 bg-layer-3 self-end rounded-xs"
+              className="h-0.5 flex-shrink-0 self-end rounded-xs bg-layer-3"
               style={{
                 width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
               }}
diff --git a/apps/web/core/components/pages/editor/summary/heading-components.tsx b/apps/web/core/components/pages/editor/summary/heading-components.tsx
index 8f1e82e87c8..2ebca766d50 100644
--- a/apps/web/core/components/pages/editor/summary/heading-components.tsx
+++ b/apps/web/core/components/pages/editor/summary/heading-components.tsx
@@ -18,7 +18,7 @@ const COMMON_CLASSNAME =
 
 export function OutlineHeading1({ marking, onClick }: THeadingComponentProps) {
   return (
-    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-13 pl-1")}>
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-1 text-13")}>
       {marking.text}
     </button>
   );
@@ -26,7 +26,7 @@ export function OutlineHeading1({ marking, onClick }: THeadingComponentProps) {
 
 export function OutlineHeading2({ marking, onClick }: THeadingComponentProps) {
   return (
-    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-11 pl-2")}>
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-2 text-11")}>
       {marking.text}
     </button>
   );
@@ -34,7 +34,7 @@ export function OutlineHeading2({ marking, onClick }: THeadingComponentProps) {
 
 export function OutlineHeading3({ marking, onClick }: THeadingComponentProps) {
   return (
-    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-11 pl-4")}>
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-4 text-11")}>
       {marking.text}
     </button>
   );
diff --git a/apps/web/core/components/pages/editor/title.tsx b/apps/web/core/components/pages/editor/title.tsx
index 5272afbb2ad..ed0b853fafa 100644
--- a/apps/web/core/components/pages/editor/title.tsx
+++ b/apps/web/core/components/pages/editor/title.tsx
@@ -29,7 +29,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
   // page filters
   const { fontSize } = usePageFilters();
   // ui
-  const titleFontClassName = cn("tracking-[-2%] font-bold", {
+  const titleFontClassName = cn("font-bold tracking-[-2%]", {
     "text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
     "text-[2rem] leading-[2.375rem]": fontSize === "large-font",
   });
@@ -51,7 +51,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
       ) : (
         <div className="relative">
           <TextArea
-            className={cn(titleFontClassName, "block w-full border-none outline-none p-0 resize-none rounded-none")}
+            className={cn(titleFontClassName, "block w-full resize-none rounded-none border-none p-0 outline-none")}
             placeholder="Untitled"
             onKeyDown={(e) => {
               if (e.key === "Enter") {
@@ -68,7 +68,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
           />
           <div
             className={cn(
-              "pointer-events-none absolute bottom-1 right-1 z-[2] font-regular rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
+              "pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 font-regular text-secondary opacity-0 transition-opacity",
               {
                 "opacity-100": isLengthVisible,
               }
diff --git a/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
index 116dc8135c7..817c7995081 100644
--- a/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
@@ -37,16 +37,16 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
           <Popover.Button
             type="button"
             className={cn(
-              "h-7 px-2 text-13 flex items-center gap-1.5 rounded-sm outline-none",
+              "flex h-7 items-center gap-1.5 rounded-sm px-2 text-13 outline-none",
               "text-tertiary hover:bg-layer-1",
               {
-                "text-primary bg-layer-1": open,
+                "bg-layer-1 text-primary": open,
               }
             )}
           >
             Color
             <span
-              className={cn("shrink-0 size-6 grid place-items-center rounded-sm border-[0.5px] border-strong", {
+              className={cn("grid size-6 shrink-0 place-items-center rounded-sm border-[0.5px] border-strong", {
                 "bg-surface-1": !activeBackgroundColor,
               })}
               style={{
@@ -65,16 +65,16 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
           </Popover.Button>
           <Popover.Panel
             as="div"
-            className="fixed z-20 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 p-2 space-y-2"
+            className="fixed z-20 mt-1 space-y-2 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200"
           >
             <div className="space-y-1.5">
-              <p className="text-11 text-tertiary font-semibold">Text colors</p>
+              <p className="text-11 font-semibold text-tertiary">Text colors</p>
               <div className="flex items-center gap-2">
                 {COLORS_LIST.map((color) => (
                   <button
                     key={color.key}
                     type="button"
-                    className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
+                    className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                     style={{
                       backgroundColor: color.textColor,
                     }}
@@ -83,7 +83,7 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
                 ))}
                 <button
                   type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
                   onClick={() => handleColorSelect("text-color", undefined)}
                 >
                   <Ban className="size-4" />
@@ -91,13 +91,13 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
               </div>
             </div>
             <div className="space-y-1.5">
-              <p className="text-11 text-tertiary font-semibold">Background colors</p>
+              <p className="text-11 font-semibold text-tertiary">Background colors</p>
               <div className="flex items-center gap-2">
                 {COLORS_LIST.map((color) => (
                   <button
                     key={color.key}
                     type="button"
-                    className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
+                    className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                     style={{
                       backgroundColor: color.backgroundColor,
                     }}
@@ -106,7 +106,7 @@ export const ColorDropdown = memo(function ColorDropdown(props: Props) {
                 ))}
                 <button
                   type="button"
-                  className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
                   onClick={() => handleColorSelect("background-color", undefined)}
                 >
                   <Ban className="size-4" />
diff --git a/apps/web/core/components/pages/editor/toolbar/root.tsx b/apps/web/core/components/pages/editor/toolbar/root.tsx
index 862831d2aa5..db080be8edf 100644
--- a/apps/web/core/components/pages/editor/toolbar/root.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/root.tsx
@@ -43,26 +43,26 @@ export const PageEditorToolbarRoot = observer(function PageEditorToolbarRoot(pro
     <>
       <div
         id="page-toolbar-container"
-        className={cn("max-h-[52px] transition-all ease-linear duration-300 overflow-auto", {
+        className={cn("max-h-[52px] overflow-auto transition-all duration-300 ease-linear", {
           "max-h-0 overflow-hidden": shouldHideToolbar,
         })}
       >
         <div
           className={cn(
-            "hidden md:flex items-center relative min-h-[52px] page-toolbar-content px-page-x transition-all duration-200 ease-in-out",
+            "page-toolbar-content relative hidden min-h-[52px] items-center px-page-x transition-all duration-200 ease-in-out md:flex",
             {
               "wide-layout": isFullWidth,
             }
           )}
         >
-          <div className="max-w-full w-full flex items-center justify-between">
+          <div className="flex w-full max-w-full items-center justify-between">
             <div className="flex-1">{editorRef && <PageToolbar editorRef={editorRef} />}</div>
             <div className="flex items-center gap-2">
               <PageCollaboratorsList page={page} />
               {!isNavigationPaneOpen && (
                 <button
                   type="button"
-                  className="shrink-0 size-6 grid place-items-center rounded-sm text-secondary hover:text-primary hover:bg-layer-transparent-hover transition-colors"
+                  className="grid size-6 shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-transparent-hover hover:text-primary"
                   onClick={handleOpenNavigationPane}
                 >
                   <PanelRight className="size-3.5" />
@@ -73,12 +73,12 @@ export const PageEditorToolbarRoot = observer(function PageEditorToolbarRoot(pro
         </div>
       </div>
       {shouldHideToolbar && (
-        <div className="absolute z-10 top-0 right-0 h-[52px] px-page-x flex items-center">
+        <div className="absolute top-0 right-0 z-10 flex h-[52px] items-center px-page-x">
           {!isNavigationPaneOpen && (
             <Tooltip tooltipContent={t("page_navigation_pane.open_button")}>
               <button
                 type="button"
-                className="shrink-0 size-6 grid place-items-center rounded-sm text-secondary hover:text-primary hover:bg-layer-transparent-hover transition-colors"
+                className="grid size-6 shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-transparent-hover hover:text-primary"
                 onClick={handleOpenNavigationPane}
                 aria-label={t("page_navigation_pane.open_button")}
               >
diff --git a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
index 3f71ba5fc73..d1c4109e133 100644
--- a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
@@ -49,8 +49,8 @@ const ToolbarButton = React.memo(function ToolbarButton(props: ToolbarButtonProp
             ...item.extraProps,
           })
         }
-        className={cn("shrink-0 grid size-7 place-items-center rounded-sm text-tertiary", {
-          "bg-layer-transparent-selected hover:bg-layer-transparent-selected text-primary": isActive,
+        className={cn("grid size-7 shrink-0 place-items-center rounded-sm text-tertiary", {
+          "bg-layer-transparent-selected text-primary hover:bg-layer-transparent-selected": isActive,
           "hover:bg-layer-transparent-hover": !isActive,
         })}
       >
@@ -116,12 +116,12 @@ export function PageToolbar(props: Props) {
   );
 
   return (
-    <div className="flex items-center divide-x divide-subtle-1 overflow-x-scroll animate-in fade-in duration-200">
+    <div className="animate-in fade-in flex items-center divide-x divide-subtle-1 overflow-x-scroll duration-200">
       <CustomMenu
         customButton={
           <span
             className={cn(
-              "text-13 border-[0.5px] border-strong h-7 w-24 rounded-sm px-2 flex items-center justify-between gap-2 whitespace-nowrap text-left",
+              "flex h-7 w-24 items-center justify-between gap-2 rounded-sm border-[0.5px] border-strong px-2 text-left text-13 whitespace-nowrap",
               {
                 "bg-layer-1-selected text-primary": isTypographyMenuOpen,
                 "text-tertiary hover:bg-layer-1-hover": !isTypographyMenuOpen,
@@ -129,7 +129,7 @@ export function PageToolbar(props: Props) {
             )}
           >
             {activeTypography?.name || "Text"}
-            <ChevronDownIcon className="shrink-0 size-3" />
+            <ChevronDownIcon className="size-3 shrink-0" />
           </span>
         }
         className="pr-2"
@@ -159,7 +159,7 @@ export function PageToolbar(props: Props) {
               <item.icon className="size-3" />
               {item.name}
             </span>
-            {activeTypography?.itemKey === item.itemKey && <CheckIcon className="size-3 text-tertiary shrink-0" />}
+            {activeTypography?.itemKey === item.itemKey && <CheckIcon className="size-3 shrink-0 text-tertiary" />}
           </CustomMenu.MenuItem>
         ))}
       </CustomMenu>
diff --git a/apps/web/core/components/pages/header/archived-badge.tsx b/apps/web/core/components/pages/header/archived-badge.tsx
index c7bb607e66e..4e6d014aebc 100644
--- a/apps/web/core/components/pages/header/archived-badge.tsx
+++ b/apps/web/core/components/pages/header/archived-badge.tsx
@@ -19,8 +19,8 @@ export const PageArchivedBadge = observer(function PageArchivedBadge({ page }: P
   if (!page.archived_at) return null;
 
   return (
-    <div className="flex-shrink-0 h-6 flex items-center gap-1 px-2 rounded-sm text-accent-primary bg-accent-primary/20">
-      <ArchiveIcon className="flex-shrink-0 size-3.5" />
+    <div className="flex h-6 flex-shrink-0 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary">
+      <ArchiveIcon className="size-3.5 flex-shrink-0" />
       <span className="text-11 font-medium">Archived at {renderFormattedDate(page.archived_at)}</span>
     </div>
   );
diff --git a/apps/web/core/components/pages/header/offline-badge.tsx b/apps/web/core/components/pages/header/offline-badge.tsx
index 460d071d739..0657251baa1 100644
--- a/apps/web/core/components/pages/header/offline-badge.tsx
+++ b/apps/web/core/components/pages/header/offline-badge.tsx
@@ -27,8 +27,8 @@ export const PageOfflineBadge = observer(function PageOfflineBadge({ page }: Pro
       tooltipHeading="You are offline."
       tooltipContent="You can continue making changes. They will be synced when you are back online."
     >
-      <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
-        <span className="flex-shrink-0 size-1.5 rounded-full bg-layer-1" />
+      <div className="flex h-7 flex-shrink-0 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
+        <span className="size-1.5 flex-shrink-0 rounded-full bg-layer-1" />
         <span>Offline</span>
       </div>
     </Tooltip>
diff --git a/apps/web/core/components/pages/list/block-item-action.tsx b/apps/web/core/components/pages/list/block-item-action.tsx
index 3e7629597de..b62b97ee9f8 100644
--- a/apps/web/core/components/pages/list/block-item-action.tsx
+++ b/apps/web/core/components/pages/list/block-item-action.tsx
@@ -53,11 +53,11 @@ export const BlockItemAction = observer(function BlockItemAction(props: Props) {
         </Tooltip>
       </div>
       {/* vertical divider */}
-      <Minus className="h-5 w-5 text-placeholder rotate-90 -mx-3" strokeWidth={1} />
+      <Minus className="-mx-3 h-5 w-5 rotate-90 text-placeholder" strokeWidth={1} />
 
       {/* page info */}
       <Tooltip tooltipContent={`Created on ${renderFormattedDate(created_at)}`}>
-        <span className="h-4 w-4 grid place-items-center cursor-default">
+        <span className="grid h-4 w-4 cursor-default place-items-center">
           <Info className="h-4 w-4 text-tertiary" />
         </span>
       </Tooltip>
diff --git a/apps/web/core/components/pages/list/filters/root.tsx b/apps/web/core/components/pages/list/filters/root.tsx
index e60462cfbab..7c009046816 100644
--- a/apps/web/core/components/pages/list/filters/root.tsx
+++ b/apps/web/core/components/pages/list/filters/root.tsx
@@ -76,7 +76,7 @@ export const PageFiltersSelection = observer(function PageFiltersSelection(props
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         <div className="py-2">
           <FilterOption
             isChecked={!!filters.filters?.favorites}
diff --git a/apps/web/core/components/pages/list/order-by.tsx b/apps/web/core/components/pages/list/order-by.tsx
index 8bdf960fa19..60030c2e8fb 100644
--- a/apps/web/core/components/pages/list/order-by.tsx
+++ b/apps/web/core/components/pages/list/order-by.tsx
@@ -37,7 +37,7 @@ export function PageOrderByDropdown(props: Props) {
     <CustomMenu
       customButton={
         <div className={getButtonStyling("secondary", "lg")}>
-          {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
+          {!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}
           {orderByDetails?.label}
         </div>
       }
diff --git a/apps/web/core/components/pages/list/search-input.tsx b/apps/web/core/components/pages/list/search-input.tsx
index 200957b44ad..36ab492ca5e 100644
--- a/apps/web/core/components/pages/list/search-input.tsx
+++ b/apps/web/core/components/pages/list/search-input.tsx
@@ -44,7 +44,7 @@ export function PageSearchInput(props: Props) {
         <IconButton
           variant="ghost"
           size="lg"
-          className="shrink-0 my-auto -mr-1"
+          className="my-auto -mr-1 shrink-0"
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
@@ -54,16 +54,16 @@ export function PageSearchInput(props: Props) {
       )}
       <div
         className={cn(
-          "flex items-center justify-start rounded-md border border-transparent text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "flex w-0 items-center justify-start overflow-hidden rounded-md border border-transparent text-placeholder opacity-0 transition-[width] ease-linear",
           {
-            "w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+            "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
           }
         )}
       >
         <SearchIcon className="h-3.5 w-3.5" />
         <input
           ref={inputRef}
-          className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none ml-2"
+          className="ml-2 w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
           placeholder="Search pages"
           value={searchQuery}
           onChange={(e) => updateSearchQuery(e.target.value)}
diff --git a/apps/web/core/components/pages/list/tab-navigation.tsx b/apps/web/core/components/pages/list/tab-navigation.tsx
index 3fe4bc56474..384fee2f3b0 100644
--- a/apps/web/core/components/pages/list/tab-navigation.tsx
+++ b/apps/web/core/components/pages/list/tab-navigation.tsx
@@ -40,23 +40,23 @@ export function PageTabNavigation(props: TPageTabNavigation) {
   };
 
   return (
-    <div className="relative flex items-center h-full">
+    <div className="relative flex h-full items-center">
       {pageTabs.map((tab) => (
         <Link
           key={tab.key}
           href={`/${workspaceSlug}/projects/${projectId}/pages?type=${tab.key}`}
           onClick={(e) => handleTabClick(e, tab.key)}
-          className="flex flex-col h-full"
+          className="flex h-full flex-col"
         >
           <div
-            className={cn(`flex flex-1 text-13 px-4 font-medium transition-all justify-center items-center`, {
+            className={cn(`flex flex-1 items-center justify-center px-4 text-13 font-medium transition-all`, {
               "text-accent-primary": tab.key === pageType,
             })}
           >
             {tab.label}
           </div>
           <div
-            className={cn(`rounded-t border-t-2 transition-all border-transparent w-full`, {
+            className={cn(`w-full rounded-t border-t-2 border-transparent transition-all`, {
               "border-accent-strong": tab.key === pageType,
             })}
           />
diff --git a/apps/web/core/components/pages/loaders/page-content-loader.tsx b/apps/web/core/components/pages/loaders/page-content-loader.tsx
index 3bc57163ec6..e7f8cc2682e 100644
--- a/apps/web/core/components/pages/loaders/page-content-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-content-loader.tsx
@@ -16,9 +16,9 @@ export function PageContentLoader(props: Props) {
   const { className } = props;
 
   return (
-    <div className={cn("relative size-full flex flex-col", className)}>
+    <div className={cn("relative flex size-full flex-col", className)}>
       {/* header */}
-      <div className="flex-shrink-0 w-full h-12 border-b border-subtle relative flex items-center divide-x divide-subtle">
+      <div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
         <Loader className="relative flex items-center gap-1 pr-2">
           <Loader.Item width="26px" height="26px" />
           <Loader.Item width="26px" height="26px" />
@@ -43,7 +43,7 @@ export function PageContentLoader(props: Props) {
       </div>
 
       {/* content */}
-      <div className="size-full pt-[64px] overflow-hidden relative flex">
+      <div className="relative flex size-full overflow-hidden pt-[64px]">
         {/* editor loader */}
         <div className="size-full py-5">
           <Loader className="relative space-y-4">
diff --git a/apps/web/core/components/pages/loaders/page-loader.tsx b/apps/web/core/components/pages/loaders/page-loader.tsx
index a217229ad17..8e7b9025b99 100644
--- a/apps/web/core/components/pages/loaders/page-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -9,11 +9,11 @@ import { Loader } from "@plane/ui";
 
 export function PageLoader() {
   return (
-    <div className="relative w-full h-full flex flex-col">
-      <div className="px-3 border-b border-subtle py-3">
+    <div className="relative flex h-full w-full flex-col">
+      <div className="border-b border-subtle px-3 py-3">
         <Loader className="relative flex items-center gap-2">
           <Loader.Item width="200px" height="30px" />
-          <div className="relative flex items-center gap-2 ml-auto">
+          <div className="relative ml-auto flex items-center gap-2">
             <Loader.Item width="100px" height="30px" />
             <Loader.Item width="100px" height="30px" />
           </div>
@@ -21,9 +21,9 @@ export function PageLoader() {
       </div>
       <div>
         {range(10).map((i) => (
-          <Loader key={i} className="relative flex items-center gap-2 p-3 py-4 border-b border-subtle">
+          <Loader key={i} className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
             <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
-            <div className="ml-auto relative flex items-center gap-2">
+            <div className="relative ml-auto flex items-center gap-2">
               <Loader.Item width="60px" height="22px" />
               <Loader.Item width="22px" height="22px" />
               <Loader.Item width="22px" height="22px" />
diff --git a/apps/web/core/components/pages/modals/delete-page-modal.tsx b/apps/web/core/components/pages/modals/delete-page-modal.tsx
index 8a99b98b9d4..937409be65d 100644
--- a/apps/web/core/components/pages/modals/delete-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/delete-page-modal.tsx
@@ -83,7 +83,7 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
       content={
         <>
           Are you sure you want to delete page-{" "}
-          <span className="break-words font-medium text-primary break-all">{getPageName(name)}</span> ? The Page will be
+          <span className="font-medium break-words break-all text-primary">{getPageName(name)}</span> ? The Page will be
           deleted permanently. This action cannot be undone.
         </>
       }
diff --git a/apps/web/core/components/pages/modals/export-page-modal.tsx b/apps/web/core/components/pages/modals/export-page-modal.tsx
index 531fecc26b0..cd21b2b5fa7 100644
--- a/apps/web/core/components/pages/modals/export-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/export-page-modal.tsx
@@ -205,7 +205,7 @@ export function ExportPageModal(props: Props) {
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.SM}>
       <div>
-        <div className="p-5 space-y-5">
+        <div className="space-y-5 p-5">
           <h3 className="text-18 font-medium text-secondary">Export page</h3>
           <div className="space-y-3">
             <div className="flex items-center justify-between gap-2">
@@ -281,7 +281,7 @@ export function ExportPageModal(props: Props) {
             )}
           </div>
         </div>
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
           <Button variant="secondary" size="lg" onClick={handleClose}>
             Cancel
           </Button>
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
index 9aad37280f3..810e838c15e 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -69,11 +69,11 @@ export function PageForm(props: Props) {
     <form onSubmit={handlePageFormSubmit}>
       <div className="space-y-5 p-5">
         <h3 className="text-18 font-medium text-secondary">Create page</h3>
-        <div className="flex items-start gap-2 h-9 w-full">
+        <div className="flex h-9 w-full items-start gap-2">
           <EmojiPicker
             isOpen={isOpen}
             handleToggle={(val: boolean) => setIsOpen(val)}
-            className="flex items-center justify-center flex-shrink0"
+            className="flex-shrink0 flex items-center justify-center"
             buttonClassName="flex items-center justify-center bg-layer-2 hover:bg-layer-2-hover rounded-md"
             label={
               <span className="grid h-9 w-9 place-items-center rounded-md">
@@ -113,7 +113,7 @@ export function PageForm(props: Props) {
                 : EmojiIconPickerTypes.ICON
             }
           />
-          <div className="space-y-1 flew-grow w-full">
+          <div className="flew-grow w-full space-y-1">
             <Input
               id="name"
               type="text"
@@ -133,7 +133,7 @@ export function PageForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-subtle">
+      <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <div className="flex items-center gap-2">
           <AccessField
             onChange={(access) => handleFormData("access", access)}
diff --git a/apps/web/core/components/pages/navigation-pane/root.tsx b/apps/web/core/components/pages/navigation-pane/root.tsx
index a4091300fd8..0c3370d4781 100644
--- a/apps/web/core/components/pages/navigation-pane/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/root.tsx
@@ -89,7 +89,7 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
 
   return (
     <aside
-      className="shrink-0 h-full flex flex-col bg-surface-1 pt-3.5 border-l border-subtle transition-all duration-300 ease-out"
+      className="flex h-full shrink-0 flex-col border-l border-subtle bg-surface-1 pt-3.5 transition-all duration-300 ease-out"
       style={{
         width: `${paneWidth}px`,
         marginRight: isNavigationPaneOpen ? "0px" : `-${paneWidth}px`,
@@ -99,7 +99,7 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
         <Tooltip tooltipContent={t("page_navigation_pane.close_button")}>
           <button
             type="button"
-            className="size-3.5 grid place-items-center text-secondary hover:text-primary transition-colors"
+            className="grid size-3.5 place-items-center text-secondary transition-colors hover:text-primary"
             onClick={handleClose}
             aria-label={t("page_navigation_pane.close_button")}
           >
@@ -108,7 +108,7 @@ export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(p
         </Tooltip>
       </div>
 
-      <div className="flex-1 flex flex-col overflow-hidden animate-slide-in-right">
+      <div className="animate-slide-in-right flex flex-1 flex-col overflow-hidden">
         {ActiveExtension ? (
           <ActiveExtension.component page={page} extensionData={ActiveExtension.data} storeType={storeType} />
         ) : showNavigationTabs ? (
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
index 74a2296899c..cfb4e8986b9 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
@@ -71,25 +71,25 @@ const AssetItem = observer(function AssetItem(props: AssetItemProps) {
     return (
       <a
         href={asset.href}
-        className="relative group/asset-item h-12 flex items-center gap-2 pr-2 rounded-sm border border-subtle hover:bg-layer-1 transition-colors"
+        className="group/asset-item relative flex h-12 items-center gap-2 rounded-sm border border-subtle pr-2 transition-colors hover:bg-layer-1"
       >
         <div
-          className="flex-shrink-0 w-11 h-12 rounded-l-sm bg-cover bg-no-repeat bg-center"
+          className="h-12 w-11 flex-shrink-0 rounded-l-sm bg-cover bg-center bg-no-repeat"
           style={{
             backgroundImage: `url('${assetSrc}')`,
           }}
         />
         <div className="flex-1 space-y-0.5 truncate">
-          <p className="text-13 font-medium truncate">{asset.name}</p>
+          <p className="truncate text-13 font-medium">{asset.name}</p>
           <div className="flex items-end justify-between gap-2">
             <p className="shrink-0 text-11 text-secondary" />
             <a
               href={assetDownloadSrc}
               target="_blank"
               rel="noreferrer noopener"
-              className="shrink-0 py-0.5 px-1 flex items-center gap-1 rounded-sm text-secondary hover:text-primary opacity-0 pointer-events-none group-hover/asset-item:opacity-100 group-hover/asset-item:pointer-events-auto transition-opacity"
+              className="pointer-events-none flex shrink-0 items-center gap-1 rounded-sm px-1 py-0.5 text-secondary opacity-0 transition-opacity group-hover/asset-item:pointer-events-auto group-hover/asset-item:opacity-100 hover:text-primary"
             >
-              <Download className="shrink-0 size-3" />
+              <Download className="size-3 shrink-0" />
               <span className="text-11 font-medium">{t("page_navigation_pane.tabs.assets.download_button")}</span>
             </a>
           </div>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
index 8757dec73c0..f12067938cd 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
@@ -34,7 +34,7 @@ export const PageNavigationPaneInfoTabActorsInfo = observer(function PageNavigat
   const { t } = useTranslation();
 
   return (
-    <div className="space-y-3 mt-4">
+    <div className="mt-4 space-y-3">
       <div>
         <p className="text-11 font-medium text-tertiary">{t("page_navigation_pane.tabs.info.actors_info.edited_by")}</p>
         <div className="mt-2 flex items-center justify-between gap-2 text-13 font-medium">
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx
index 479f77fee80..f7b15f9e7c2 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx
@@ -80,9 +80,9 @@ export const PageNavigationPaneInfoTabDocumentInfo = observer(function PageNavig
   return (
     <div className="grid grid-cols-2 gap-2">
       {documentInfoCards.map((card) => (
-        <div key={card.key} className="p-2 bg-layer-2 rounded-sm">
+        <div key={card.key} className="rounded-sm bg-layer-2 p-2">
           <h6 className="text-14 font-semibold">{card.info}</h6>
-          <p className="mt-1.5 text-13 text-tertiary font-medium">{card.title}</p>
+          <p className="mt-1.5 text-13 font-medium text-tertiary">{card.title}</p>
         </div>
       ))}
     </div>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
index 7399fe0cb7c..a2ae5ba906f 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
@@ -22,11 +22,11 @@ type Props = {
 export const PageNavigationPaneInfoTabPanel = observer(function PageNavigationPaneInfoTabPanel(props: Props) {
   const { page, versionHistory } = props;
   return (
-    <div className="flex flex-col h-full px-4">
-      <div className="flex-1 overflow-y-auto mt-5">
+    <div className="flex h-full flex-col px-4">
+      <div className="mt-5 flex-1 overflow-y-auto">
         <PageNavigationPaneInfoTabDocumentInfo page={page} />
         <PageNavigationPaneInfoTabActorsInfo page={page} />
-        <div className="flex-shrink-0 h-px bg-layer-1 my-3" />
+        <div className="my-3 h-px flex-shrink-0 bg-layer-1" />
         <PageNavigationPaneInfoTabVersionHistory page={page} versionHistory={versionHistory} />
       </div>
     </div>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
index 2f3f76d0aec..ac75db06245 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
@@ -47,14 +47,14 @@ const VersionHistoryItem = observer(function VersionHistoryItem(props: VersionHi
   return (
     <li className="relative flex items-center gap-x-4 text-11 font-medium">
       {/* timeline icon */}
-      <div className="relative size-6 flex-none grid place-items-center">
+      <div className="relative grid size-6 flex-none place-items-center">
         <div className="size-2 rounded-full bg-layer-3" />
       </div>
       {/* end timeline icon */}
       <Link
         href={getVersionLink(version.id)}
-        className={cn("block flex-1 hover:bg-layer-transparent-hover rounded-md py-2 px-1", {
-          " bg-layer-transparent-selected hover:bg-layer-transparent-selected": isVersionActive,
+        className={cn("block flex-1 rounded-md px-1 py-2 hover:bg-layer-transparent-hover", {
+          "bg-layer-transparent-selected hover:bg-layer-transparent-selected": isVersionActive,
         })}
       >
         <p className="text-tertiary">
@@ -114,19 +114,19 @@ export const PageNavigationPaneInfoTabVersionHistory = observer(function PageNav
       <div className="mt-3">
         <ul className="relative">
           {/* timeline line */}
-          <div className={cn("absolute left-0 top-0 h-full flex w-6 justify-center")}>
+          <div className={cn("absolute top-0 left-0 flex h-full w-6 justify-center")}>
             <div className="w-px bg-layer-3" />
           </div>
           {/* end timeline line */}
           <li className="relative flex items-center gap-x-4 text-11 font-medium">
             {/* timeline icon */}
-            <div className="relative size-6 flex-none rounded-full grid place-items-center bg-accent-primary/20">
+            <div className="relative grid size-6 flex-none place-items-center rounded-full bg-accent-primary/20">
               <div className="size-2.5 rounded-full bg-accent-primary/40" />
             </div>
             {/* end timeline icon */}
             <Link
               href={getVersionLink()}
-              className={cn("flex-1 bg-layer-transparent hover:bg-layer-transparent-hover rounded-md py-2 px-1", {
+              className={cn("flex-1 rounded-md bg-layer-transparent px-1 py-2 hover:bg-layer-transparent-hover", {
                 "bg-layer-transparent-selected hover:bg-layer-transparent-selected": !activeVersion,
               })}
             >
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
index 66dc2f653db..43a530f8dd6 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
@@ -29,7 +29,7 @@ export function PageNavigationPaneOutlineTabPanel(props: Props) {
       orientation="vertical"
       size="sm"
       scrollType="hover"
-      className="size-full overflow-y-auto hide-scrollbar"
+      className="hide-scrollbar size-full overflow-y-auto"
       viewportClassName="px-4"
     >
       <PageContentBrowser
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
index 6e93fddeb64..3da17ef6fdb 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
@@ -28,7 +28,7 @@ export function PageNavigationPaneTabPanelsRoot(props: Props) {
   return (
     <>
       {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
-        <Tabs.Content key={tab.key} value={tab.key} className="py-2 flex-1 overflow-hidden">
+        <Tabs.Content key={tab.key} value={tab.key} className="flex-1 overflow-hidden py-2">
           {tab.key === "outline" && <PageNavigationPaneOutlineTabPanel page={page} />}
           {tab.key === "info" && <PageNavigationPaneInfoTabPanel page={page} versionHistory={versionHistory} />}
           {tab.key === "assets" && <PageNavigationPaneAssetsTabPanel page={page} />}
diff --git a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
index 9661bbf88a5..76469a7c971 100644
--- a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
@@ -15,7 +15,7 @@ export function PageNavigationPaneTabsList() {
   const { t } = useTranslation();
 
   return (
-    <Tab.List className="relative flex items-center p-0.5 rounded-md bg-layer-3 mx-3.5">
+    <Tab.List className="relative mx-3.5 flex items-center rounded-md bg-layer-3 p-0.5">
       {({ selectedIndex }) => (
         <>
           {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
@@ -29,7 +29,7 @@ export function PageNavigationPaneTabsList() {
           ))}
           {/* active tab indicator */}
           <div
-            className="absolute top-1/2 -translate-y-1/2 bg-layer-3-selected rounded-sm transition-all duration-500 ease-in-out pointer-events-none"
+            className="pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-sm bg-layer-3-selected transition-all duration-500 ease-in-out"
             style={{
               left: `calc(${(selectedIndex / ORDERED_PAGE_NAVIGATION_TABS_LIST.length) * 100}% + 2px)`,
               height: "calc(100% - 4px)",
diff --git a/apps/web/core/components/pages/pages-list-view.tsx b/apps/web/core/components/pages/pages-list-view.tsx
index 5cd4c794f6f..1468430a534 100644
--- a/apps/web/core/components/pages/pages-list-view.tsx
+++ b/apps/web/core/components/pages/pages-list-view.tsx
@@ -34,7 +34,7 @@ export const PagesListView = observer(function PagesListView(props: TPageView) {
 
   // pages loader
   return (
-    <div className="relative w-full h-full overflow-hidden flex flex-col">
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
       {/* tab header */}
       {isAnyPageAvailable && (
         <PagesListHeaderRoot
diff --git a/apps/web/core/components/pages/version/main-content.tsx b/apps/web/core/components/pages/version/main-content.tsx
index 907519be7e1..9c3a502a1b7 100644
--- a/apps/web/core/components/pages/version/main-content.tsx
+++ b/apps/web/core/components/pages/version/main-content.tsx
@@ -82,11 +82,11 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
   const VersionEditor = editorComponent;
 
   return (
-    <div className="flex-grow flex flex-col overflow-hidden">
+    <div className="flex flex-grow flex-col overflow-hidden">
       {versionDetailsError ? (
-        <div className="flex-grow grid place-items-center">
+        <div className="grid flex-grow place-items-center">
           <div className="flex flex-col items-center gap-4 text-center">
-            <span className="flex-shrink-0 grid place-items-center size-11 text-tertiary">
+            <span className="grid size-11 flex-shrink-0 place-items-center text-tertiary">
               <TriangleAlert className="size-10" />
             </span>
             <div>
@@ -100,15 +100,15 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
         </div>
       ) : (
         <>
-          <div className="min-h-14 py-3 px-5 border-b border-subtle flex items-center justify-between gap-2">
+          <div className="flex min-h-14 items-center justify-between gap-2 border-b border-subtle px-5 py-3">
             <div className="flex items-center gap-4">
               <h6 className="text-14 font-medium">
                 {versionDetails
                   ? `${renderFormattedDate(versionDetails.last_saved_at)} ${renderFormattedTime(versionDetails.last_saved_at)}`
                   : "Loading version details"}
               </h6>
-              <span className="flex-shrink-0 flex items-center gap-1 text-11 font-medium text-accent-primary bg-accent-primary/20 py-1 px-1.5 rounded-sm">
-                <EyeIcon className="flex-shrink-0 size-3" />
+              <span className="flex flex-shrink-0 items-center gap-1 rounded-sm bg-accent-primary/20 px-1.5 py-1 text-11 font-medium text-accent-primary">
+                <EyeIcon className="size-3 flex-shrink-0" />
                 View only
               </span>
             </div>
@@ -118,7 +118,7 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
               </Button>
             )}
           </div>
-          <div className="pt-8 h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
+          <div className="vertical-scrollbar scrollbar-sm h-full overflow-y-scroll pt-8">
             <VersionEditor activeVersion={activeVersion} storeType={storeType} versionDetails={versionDetails} />
           </div>
         </>
diff --git a/apps/web/core/components/pages/version/root.tsx b/apps/web/core/components/pages/version/root.tsx
index 1e75c76f5e5..81e1b61c660 100644
--- a/apps/web/core/components/pages/version/root.tsx
+++ b/apps/web/core/components/pages/version/root.tsx
@@ -49,9 +49,9 @@ export const PageVersionsOverlay = observer(function PageVersionsOverlay(props:
   return (
     <div
       className={cn(
-        "absolute inset-0 z-[16] h-full bg-surface-1 flex overflow-hidden opacity-0 pointer-events-none transition-opacity",
+        "pointer-events-none absolute inset-0 z-[16] flex h-full overflow-hidden bg-surface-1 opacity-0 transition-opacity",
         {
-          "opacity-100 pointer-events-auto": isOpen,
+          "pointer-events-auto opacity-100": isOpen,
         }
       )}
       style={{
diff --git a/apps/web/core/components/power-k/menus/labels.tsx b/apps/web/core/components/power-k/menus/labels.tsx
index 1fc6dc6da6d..21878fcd16d 100644
--- a/apps/web/core/components/power-k/menus/labels.tsx
+++ b/apps/web/core/components/power-k/menus/labels.tsx
@@ -22,7 +22,7 @@ export const PowerKLabelsMenu = observer(function PowerKLabelsMenu({ labels, onS
     <PowerKMenuBuilder
       items={labels}
       getIconNode={(label) => (
-        <span className="shrink-0 size-3.5 grid place-items-center">
+        <span className="grid size-3.5 shrink-0 place-items-center">
           <span className="size-2.5 rounded-full" style={{ backgroundColor: label.color }} />
         </span>
       )}
diff --git a/apps/web/core/components/power-k/menus/modules.tsx b/apps/web/core/components/power-k/menus/modules.tsx
index dd8c4e0206b..8c17a5fcda1 100644
--- a/apps/web/core/components/power-k/menus/modules.tsx
+++ b/apps/web/core/components/power-k/menus/modules.tsx
@@ -23,7 +23,7 @@ export const PowerKModulesMenu = observer(function PowerKModulesMenu({ modules,
     <PowerKMenuBuilder
       items={modules}
       getKey={(module) => module.id}
-      getIconNode={(module) => <ModuleStatusIcon status={module.status ?? "backlog"} className="shrink-0 size-3.5" />}
+      getIconNode={(module) => <ModuleStatusIcon status={module.status ?? "backlog"} className="size-3.5 shrink-0" />}
       getValue={(module) => module.name}
       getLabel={(module) => module.name}
       isSelected={(module) => !!value?.includes(module.id)}
diff --git a/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx b/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
index 32d700aa183..57ad412ff5a 100644
--- a/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
+++ b/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
@@ -73,7 +73,7 @@ export function ShortcutBadge({ shortcut }: { shortcut: string | undefined }) {
   const formatted = formatShortcutForDisplay(shortcut);
 
   return (
-    <div className="shrink-0 pointer-events-none inline-flex items-center gap-1 select-none font-medium">
+    <div className="pointer-events-none inline-flex shrink-0 items-center gap-1 font-medium select-none">
       {formatted?.split("").map((char, index) => (
         <React.Fragment key={index}>
           <kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-code text-10 font-medium text-tertiary">
@@ -101,7 +101,7 @@ export function KeySequenceBadge({ sequence }: { sequence: string | undefined })
   const chars = sequence.split("");
 
   return (
-    <div className="shrink-0 pointer-events-none inline-flex items-center gap-1 select-none font-medium">
+    <div className="pointer-events-none inline-flex shrink-0 items-center gap-1 font-medium select-none">
       {chars.map((char, index) => (
         <React.Fragment key={index}>
           <kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-code text-10 font-medium text-tertiary">
diff --git a/apps/web/core/components/power-k/ui/modal/command-item.tsx b/apps/web/core/components/power-k/ui/modal/command-item.tsx
index 60be8f5e1fc..18fdbd5bc4a 100644
--- a/apps/web/core/components/power-k/ui/modal/command-item.tsx
+++ b/apps/web/core/components/power-k/ui/modal/command-item.tsx
@@ -35,12 +35,12 @@ export function PowerKModalCommandItem(props: Props) {
           "opacity-70": isDisabled,
         })}
       >
-        {Icon && <Icon className="shrink-0 size-3.5" />}
+        {Icon && <Icon className="size-3.5 shrink-0" />}
         {iconNode}
         {label}
       </div>
-      <div className="shrink-0 flex items-center gap-2">
-        {isSelected && <CheckIcon className="shrink-0 size-3 text-secondary" />}
+      <div className="flex shrink-0 items-center gap-2">
+        {isSelected && <CheckIcon className="size-3 shrink-0 text-secondary" />}
         {keySequence && <KeySequenceBadge sequence={keySequence} />}
         {shortcut && <ShortcutBadge shortcut={shortcut} />}
       </div>
diff --git a/apps/web/core/components/power-k/ui/modal/context-indicator.tsx b/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
index cd21bdd9c84..3c0f1ac7543 100644
--- a/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
+++ b/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
@@ -30,16 +30,16 @@ export function PowerKModalContextIndicator(props: Props) {
 
   return (
     <div className="w-full px-4 pt-3 pb-2">
-      <div className="max-w-full bg-layer-1 pl-2 pr-1 py-0.5 rounded-sm inline-flex items-center gap-1 truncate">
-        <div className="flex items-center gap-1.5 text-11 font-medium truncate">
+      <div className="inline-flex max-w-full items-center gap-1 truncate rounded-sm bg-layer-1 py-0.5 pr-1 pl-2">
+        <div className="flex items-center gap-1.5 truncate text-11 font-medium">
           <span className="shrink-0 text-secondary">{t(contextEntity.i18n_indicator)}</span>
-          <span className="shrink-0 bg-layer-1 size-1 rounded-full" />
+          <span className="size-1 shrink-0 rounded-full bg-layer-1" />
           <p className="truncate">{contextIndicator}</p>
         </div>
         <button
           type="button"
           onClick={handleClearContext}
-          className="shrink-0 grid place-items-center p-1 text-secondary hover:text-primary transition-colors"
+          className="grid shrink-0 place-items-center p-1 text-secondary transition-colors hover:text-primary"
           title="Clear context (Backspace)"
           aria-label="Clear context (Backspace)"
           tabIndex={-1}
diff --git a/apps/web/core/components/power-k/ui/modal/footer.tsx b/apps/web/core/components/power-k/ui/modal/footer.tsx
index 1ed7051ece2..cf22070a051 100644
--- a/apps/web/core/components/power-k/ui/modal/footer.tsx
+++ b/apps/web/core/components/power-k/ui/modal/footer.tsx
@@ -22,7 +22,7 @@ export const PowerKModalFooter = observer(function PowerKModalFooter(props: Prop
   const { t } = useTranslation();
 
   return (
-    <div className="w-full flex items-center justify-between px-4 py-2 border-t border-subtle bg-surface-2/80 rounded-b-lg">
+    <div className="flex w-full items-center justify-between rounded-b-lg border-t border-subtle bg-surface-2/80 px-4 py-2">
       <div />
       <div className="flex items-center gap-2">
         <span className="text-11 text-tertiary">{t("power_k.footer.workspace_level")}</span>
diff --git a/apps/web/core/components/power-k/ui/modal/header.tsx b/apps/web/core/components/power-k/ui/modal/header.tsx
index adcf80b5fc3..4b567b733e9 100644
--- a/apps/web/core/components/power-k/ui/modal/header.tsx
+++ b/apps/web/core/components/power-k/ui/modal/header.tsx
@@ -43,7 +43,7 @@ export function PowerKModalHeader(props: Props) {
 
       {/* Search Input */}
       <div className="flex items-center gap-2 px-4 py-3">
-        <SearchIcon className="shrink-0 size-4 text-placeholder" />
+        <SearchIcon className="size-4 shrink-0 text-placeholder" />
         <Command.Input
           value={searchTerm}
           onValueChange={onSearchChange}
diff --git a/apps/web/core/components/power-k/ui/modal/search-menu.tsx b/apps/web/core/components/power-k/ui/modal/search-menu.tsx
index b24f29b85fd..ddd723f9d05 100644
--- a/apps/web/core/components/power-k/ui/modal/search-menu.tsx
+++ b/apps/web/core/components/power-k/ui/modal/search-menu.tsx
@@ -83,7 +83,7 @@ export function PowerKModalSearchMenu(props: Props) {
   return (
     <>
       {searchTerm.trim() !== "" && (
-        <div className="flex items-center justify-between gap-2 mt-4 px-4">
+        <div className="mt-4 flex items-center justify-between gap-2 px-4">
           <h5
             className={cn("text-11 text-primary", {
               "animate-pulse": isSearching,
diff --git a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
index cd0cbd3f5db..50b0e305098 100644
--- a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
+++ b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
@@ -61,7 +61,7 @@ export function ShortcutsModal(props: Props) {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative flex h-full items-center justify-center">
-                <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-surface-1 p-5 shadow-raised-200 transition-all sm:w-[28rem]">
+                <div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-surface-1 p-5 shadow-raised-200 transition-all sm:w-[28rem]">
                   <Dialog.Title as="h3" className="flex justify-between">
                     <span className="text-16 font-medium">Keyboard shortcuts</span>
                     <button type="button" onClick={handleClose}>
diff --git a/apps/web/core/components/power-k/ui/modal/wrapper.tsx b/apps/web/core/components/power-k/ui/modal/wrapper.tsx
index 310d56b9824..0c2a0c9b15c 100644
--- a/apps/web/core/components/power-k/ui/modal/wrapper.tsx
+++ b/apps/web/core/components/power-k/ui/modal/wrapper.tsx
@@ -143,7 +143,7 @@ export const ProjectsAppPowerKModalWrapper = observer(function ProjectsAppPowerK
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-raised-200 transition-all">
+              <Dialog.Panel className="divide-opacity-10 relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 rounded-lg bg-surface-1 shadow-raised-200 transition-all">
                 <Command
                   filter={(i18nValue: string, search: string) => {
                     if (i18nValue === "no-results") return 1;
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
index d624f6f5864..891197be827 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
@@ -120,7 +120,7 @@ export const usePowerKModuleContextBasedActions = (): TPowerKCommandConfig[] =>
     {
       id: "change_module_status",
       i18n_title: "power_k.contextual_actions.module.change_status",
-      iconNode: <ModuleStatusIcon status="backlog" className="shrink-0 size-3.5" />,
+      iconNode: <ModuleStatusIcon status="backlog" className="size-3.5 shrink-0" />,
       group: "contextual",
       contextType: "module",
       type: "change-page",
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
index 30a85ebfe4d..38291cb6f85 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
@@ -29,7 +29,7 @@ export const PowerKModuleStatusMenu = observer(function PowerKModuleStatusMenu(p
       {MODULE_STATUS.map((status) => (
         <PowerKModalCommandItem
           key={status.value}
-          iconNode={<ModuleStatusIcon status={status.value} className="shrink-0 size-3.5" />}
+          iconNode={<ModuleStatusIcon status={status.value} className="size-3.5 shrink-0" />}
           label={t(status.i18n_label)}
           isSelected={status.value === value}
           onSelect={() => handleSelect(status.value)}
diff --git a/apps/web/core/components/power-k/ui/renderer/shortcut.tsx b/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
index 3cd9b0cd497..c2a9f04cf6d 100644
--- a/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
+++ b/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
@@ -82,12 +82,12 @@ export function ShortcutRenderer(props: Props) {
       {!isShortcutsEmpty ? (
         groupedCommands.map((group) => (
           <div key={group.key}>
-            <h5 className="text-left text-13 font-medium pt-1 pb-2">{group.title}</h5>
+            <h5 className="pt-1 pb-2 text-left text-13 font-medium">{group.title}</h5>
             <div className="space-y-3 px-1">
               {group.commands.map((command) => (
                 <div key={command.id} className="mt-1">
                   <div className="flex items-center justify-between">
-                    <h4 className="text-11 text-secondary text-left">{t(command.i18n_title)}</h4>
+                    <h4 className="text-left text-11 text-secondary">{t(command.i18n_title)}</h4>
                     <div className="flex items-center gap-x-1.5">
                       {command.keySequence && <KeySequenceBadge sequence={command.keySequence} />}
                       {(command.shortcut || command.modifierShortcut) && (
diff --git a/apps/web/core/components/profile/activity/activity-list.tsx b/apps/web/core/components/profile/activity/activity-list.tsx
index 54941086e2e..064270bcc6b 100644
--- a/apps/web/core/components/profile/activity/activity-list.tsx
+++ b/apps/web/core/components/profile/activity/activity-list.tsx
@@ -52,15 +52,15 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                           alt={activityItem.actor_detail.display_name}
                           height={30}
                           width={30}
-                          className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-on-color"
+                          className="bg-gray-500 grid h-7 w-7 place-items-center rounded-full border-2 border-white text-on-color"
                         />
                       ) : (
-                        <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 capitalize text-on-color">
+                        <div className="bg-gray-500 grid h-7 w-7 place-items-center rounded-full border-2 border-white text-on-color capitalize">
                           {activityItem.actor_detail.display_name?.[0]}
                         </div>
                       )}
 
-                      <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-layer-1 text-secondary ring-white">
+                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-layer-1 text-secondary ring-6 ring-white">
                         <MessageSquare className="h-6 w-6 !text-20 text-secondary" aria-hidden="true" />
                       </span>
                     </div>
@@ -115,7 +115,7 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                     <div className="relative flex items-start space-x-2">
                       <>
                         <div>
-                          <div className="relative px-1.5 mt-4">
+                          <div className="relative mt-4 px-1.5">
                             <div className="mt-1.5">
                               <div className="flex h-6 w-6 items-center justify-center">
                                 {activityItem.field ? (
@@ -134,7 +134,7 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                                     className="h-full w-full rounded-full object-cover"
                                   />
                                 ) : (
-                                  <div className="grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-11 capitalize text-on-color">
+                                  <div className="bg-gray-700 grid h-6 w-6 place-items-center rounded-full border-2 border-white text-11 text-on-color capitalize">
                                     {activityItem.actor_detail.display_name?.[0]}
                                   </div>
                                 )}
@@ -143,7 +143,7 @@ export const ActivityList = observer(function ActivityList(props: Props) {
                           </div>
                         </div>
                         <div className="min-w-0 flex-1 border-b border-subtle py-4">
-                          <div className="break-words text-13 text-secondary">
+                          <div className="text-13 break-words text-secondary">
                             {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                               <span className="text-gray font-medium">Plane</span>
                             ) : activityItem.actor_detail.is_bot ? (
diff --git a/apps/web/core/components/profile/activity/profile-activity-list.tsx b/apps/web/core/components/profile/activity/profile-activity-list.tsx
index 3702796b9d5..8684f54827e 100644
--- a/apps/web/core/components/profile/activity/profile-activity-list.tsx
+++ b/apps/web/core/components/profile/activity/profile-activity-list.tsx
@@ -84,7 +84,7 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                         </div>
                       )}
 
-                      <span className="flex h-6 w-6 p-2 items-center justify-center rounded-full bg-layer-3 text-secondary">
+                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-layer-3 p-2 text-secondary">
                         <MessageSquare className="!text-20 text-secondary" aria-hidden="true" />
                       </span>
                     </div>
@@ -126,9 +126,9 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                     <div className="relative flex items-start space-x-2">
                       <>
                         <div>
-                          <div className="relative px-1.5 mt-4">
+                          <div className="relative mt-4 px-1.5">
                             <div className="mt-1.5">
-                              <div className="flex h-6 w-6 items-center justify-center border border-subtle rounded-lg shadow-raised-100">
+                              <div className="flex h-6 w-6 items-center justify-center rounded-lg border border-subtle shadow-raised-100">
                                 {activityItem.field ? (
                                   activityItem.new_value === "restore" ? (
                                     <History className="h-5 w-5 text-secondary" />
@@ -154,7 +154,7 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                           </div>
                         </div>
                         <div className="min-w-0 flex-1 border-b border-subtle py-4">
-                          <div className="break-words text-caption-md-regular text-secondary">
+                          <div className="text-caption-md-regular break-words text-secondary">
                             {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                               <span className="text-gray font-medium">Plane</span>
                             ) : activityItem.actor_detail.is_bot ? (
diff --git a/apps/web/core/components/profile/overview/activity.tsx b/apps/web/core/components/profile/overview/activity.tsx
index d1a0627983a..cda3b8fb842 100644
--- a/apps/web/core/components/profile/overview/activity.tsx
+++ b/apps/web/core/components/profile/overview/activity.tsx
@@ -49,7 +49,7 @@ export const ProfileActivity = observer(function ProfileActivity() {
             <div className="space-y-5">
               {userProfileActivity.results.map((activity) => (
                 <div key={activity.id} className="flex gap-3">
-                  <div className="flex-shrink-0 grid place-items-center overflow-hidden rounded-sm h-6 w-6">
+                  <div className="grid h-6 w-6 flex-shrink-0 place-items-center overflow-hidden rounded-sm">
                     {activity.actor_detail?.avatar_url && activity.actor_detail?.avatar_url !== "" ? (
                       <img
                         src={getFileURL(activity.actor_detail?.avatar_url)}
@@ -77,7 +77,7 @@ export const ProfileActivity = observer(function ProfileActivity() {
                         </span>
                       )}
                     </p>
-                    <p className="text-11 text-secondary whitespace-nowrap ">{calculateTimeAgo(activity.created_at)}</p>
+                    <p className="text-11 whitespace-nowrap text-secondary">{calculateTimeAgo(activity.created_at)}</p>
                   </div>
                 </div>
               ))}
diff --git a/apps/web/core/components/profile/overview/priority-distribution.tsx b/apps/web/core/components/profile/overview/priority-distribution.tsx
index 5de6d3e8723..2660f1a565a 100644
--- a/apps/web/core/components/profile/overview/priority-distribution.tsx
+++ b/apps/web/core/components/profile/overview/priority-distribution.tsx
@@ -33,7 +33,7 @@ export function ProfilePriorityDistribution({ userProfile }: Props) {
         <Card>
           {userProfile.priority_distribution.length > 0 ? (
             <BarChart
-              className="w-full h-[300px]"
+              className="h-[300px] w-full"
               margin={{ top: 20, right: 30, bottom: 5, left: 0 }}
               data={userProfile.priority_distribution.map((priority) => ({
                 key: priority.priority ?? "None",
diff --git a/apps/web/core/components/profile/overview/state-distribution.tsx b/apps/web/core/components/profile/overview/state-distribution.tsx
index b1de4995a3a..457e55808b8 100644
--- a/apps/web/core/components/profile/overview/state-distribution.tsx
+++ b/apps/web/core/components/profile/overview/state-distribution.tsx
@@ -27,7 +27,7 @@ export function ProfileStateDistribution({ stateDistribution, userProfile }: Pro
       <h3 className="text-16 font-medium">{t("profile.stats.state_distribution.title")}</h3>
       <Card className="h-full">
         {userProfile.state_distribution.length > 0 ? (
-          <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2 w-full  h-[300px]">
+          <div className="grid h-[300px] w-full grid-cols-1 gap-x-6 md:grid-cols-2">
             <PieChart
               className="size-full"
               dataKey="value"
diff --git a/apps/web/core/components/profile/overview/workload.tsx b/apps/web/core/components/profile/overview/workload.tsx
index 0cadee4c0f3..89112cc8460 100644
--- a/apps/web/core/components/profile/overview/workload.tsx
+++ b/apps/web/core/components/profile/overview/workload.tsx
@@ -28,12 +28,12 @@ export function ProfileWorkload({ stateDistribution }: Props) {
             <a>
               <Card direction={ECardDirection.ROW} spacing={ECardSpacing.SM}>
                 <div
-                  className="h-3 w-3 rounded-xs my-2"
+                  className="my-2 h-3 w-3 rounded-xs"
                   style={{
                     backgroundColor: STATE_GROUPS[group.state_group].color,
                   }}
                 />
-                <div className="space-y-1 flex-col">
+                <div className="flex-col space-y-1">
                   <span className="text-13 text-placeholder">
                     {group.state_group === "unstarted"
                       ? "Not started"
diff --git a/apps/web/core/components/profile/profile-issues.tsx b/apps/web/core/components/profile/profile-issues.tsx
index d4cefe90075..4822a6e8d5c 100644
--- a/apps/web/core/components/profile/profile-issues.tsx
+++ b/apps/web/core/components/profile/profile-issues.tsx
@@ -62,7 +62,7 @@ export const ProfileIssuesPage = observer(function ProfileIssuesPage(props: Prop
       >
         {({ filter: profileWorkItemsFilter }) => (
           <>
-            <div className="flex flex-col h-full w-full">
+            <div className="flex h-full w-full flex-col">
               {profileWorkItemsFilter && <WorkItemFiltersRow filter={profileWorkItemsFilter} />}
               <div className="relative h-full w-full overflow-auto">
                 {activeLayout === "list" ? (
diff --git a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
index b2d743396ee..ae6b52d83a3 100644
--- a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
+++ b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
@@ -22,7 +22,7 @@ export function ProfileSettingContentWrapper(props: Props) {
 
       <div
         className={cn(
-          "vertical-scrollbar scrollbar-md mx-auto h-full w-full flex flex-col px-8 md:px-20 lg:px-36 xl:px-56 py-10 md:py-16",
+          "vertical-scrollbar mx-auto flex scrollbar-md h-full w-full flex-col px-8 py-10 md:px-20 md:py-16 lg:px-36 xl:px-56",
           className
         )}
       >
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 4b37234b584..42ec13d1f07 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -87,7 +87,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
   return (
     <div
       className={cn(
-        `vertical-scrollbar scrollbar-md fixed z-5 h-full w-full shrink-0 overflow-hidden overflow-y-auto border-l border-subtle bg-surface-1 transition-all md:relative md:w-[300px] shadow-raised-200`,
+        `vertical-scrollbar fixed z-5 scrollbar-md h-full w-full shrink-0 overflow-hidden overflow-y-auto border-l border-subtle bg-surface-1 shadow-raised-200 transition-all md:relative md:w-[300px]`,
         className
       )}
       style={profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
@@ -96,7 +96,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
         <>
           <div className="relative h-[110px]">
             {currentUser?.id === userId && (
-              <div className="absolute right-3.5 top-3.5">
+              <div className="absolute top-3.5 right-3.5">
                 <IconButton
                   variant="secondary"
                   icon={EditIcon}
@@ -123,7 +123,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                   className="h-full w-full rounded-sm object-cover"
                 />
               ) : (
-                <div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-accent-primary capitalize text-on-color">
+                <div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-accent-primary text-on-color capitalize">
                   {userData?.first_name?.[0]}
                 </div>
               )}
@@ -140,7 +140,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
               {userDetails.map((detail) => (
                 <div key={detail.i18n_label} className="flex items-center gap-4 text-13">
                   <div className="w-2/5 flex-shrink-0 text-secondary">{t(detail.i18n_label)}</div>
-                  <div className="w-3/5 break-words font-medium">{detail.value}</div>
+                  <div className="w-3/5 font-medium break-words">{detail.value}</div>
                 </div>
               ))}
             </div>
@@ -167,7 +167,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                             <span className="grid h-7 w-7 flex-shrink-0 place-items-center">
                               <Logo logo={projectDetails.logo_props} />
                             </span>
-                            <div className="truncate break-words text-13 font-medium">{projectDetails.name}</div>
+                            <div className="truncate text-13 font-medium break-words">{projectDetails.name}</div>
                           </div>
                           <div className="flex flex-shrink-0 items-center gap-2">
                             {project.assigned_issues > 0 && (
diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
index cd41e28dda6..f3fdec84d64 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -21,7 +21,7 @@ type TStateForm = {
 function PopoverButton({ color }: { color?: string }) {
   return (
     <div
-      className="group inline-flex items-center text-14 font-medium focus:outline-none h-5 w-5 rounded-sm transition-all"
+      className="group inline-flex h-5 w-5 items-center rounded-sm text-14 font-medium transition-all focus:outline-none"
       style={{
         backgroundColor: color ?? "black",
       }}
@@ -63,9 +63,9 @@ export function StateForm(props: TStateForm) {
   };
 
   return (
-    <div className="relative flex space-x-2 bg-surface-1 p-3 rounded-sm">
+    <div className="relative flex space-x-2 rounded-sm bg-surface-1 p-3">
       {/* color */}
-      <div className="flex-shrink-0 h-full mt-2">
+      <div className="mt-2 h-full flex-shrink-0">
         <Popover button={<PopoverButton color={formData?.color} />} panelClassName="mt-4 -ml-3">
           <TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
         </Popover>
@@ -94,10 +94,10 @@ export function StateForm(props: TStateForm) {
           value={formData?.description}
           onChange={(e) => handleFormData("description", e.target.value)}
           hasError={(errors && Boolean(errors.description)) || false}
-          className="w-full text-13 min-h-14 resize-none"
+          className="min-h-14 w-full resize-none text-13"
         />
 
-        <div className="flex space-x-2 items-center">
+        <div className="flex items-center space-x-2">
           <Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>
             {buttonTitle}
           </Button>
diff --git a/apps/web/core/components/project-states/group-item.tsx b/apps/web/core/components/project-states/group-item.tsx
index 92ec33d6532..f5c438ac122 100644
--- a/apps/web/core/components/project-states/group-item.tsx
+++ b/apps/web/core/components/project-states/group-item.tsx
@@ -56,35 +56,35 @@ export const GroupItem = observer(function GroupItem(props: TGroupItem) {
 
   return (
     <div
-      className={cn("space-y-1 border border-subtle rounded-sm bg-surface-2 transition-all p-2", groupItemClassName)}
+      className={cn("space-y-1 rounded-sm border border-subtle bg-surface-2 p-2 transition-all", groupItemClassName)}
       ref={dropElementRef}
     >
-      <div className="flex justify-between items-center gap-2">
+      <div className="flex items-center justify-between gap-2">
         <div
-          className="w-full flex items-center cursor-pointer py-1"
+          className="flex w-full cursor-pointer items-center py-1"
           onClick={() => (!currentStateExpanded ? handleExpand(groupKey) : handleGroupCollapse(groupKey))}
         >
           <div
             className={cn(
-              "flex-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center overflow-hidden transition-all",
+              "flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all",
               {
                 "rotate-0": currentStateExpanded,
                 "-rotate-90": !currentStateExpanded,
               }
             )}
           >
-            <ChevronDownIcon className="w-4 h-4" />
+            <ChevronDownIcon className="h-4 w-4" />
           </div>
-          <div className="flex-shrink-0 w-6 h-6 rounded-sm flex justify-center items-center overflow-hidden">
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
             <StateGroupIcon stateGroup={groupKey} size={EIconSize.XL} />
           </div>
-          <div className="text-14 font-medium text-secondary capitalize px-1">{groupKey}</div>
+          <div className="px-1 text-14 font-medium text-secondary capitalize">{groupKey}</div>
         </div>
         <button
           type="button"
           data-ph-element={STATE_TRACKER_ELEMENTS.STATE_GROUP_ADD_BUTTON}
           className={cn(
-            "flex-shrink-0 w-6 h-6 rounded-sm flex justify-center items-center overflow-hidden transition-colors hover:bg-layer-1 cursor-pointer text-accent-primary/80 hover:text-accent-primary",
+            "flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm text-accent-primary/80 transition-colors hover:bg-layer-1 hover:text-accent-primary",
             (!isEditable || createState) && "cursor-not-allowed text-placeholder hover:text-placeholder"
           )}
           onClick={() => {
@@ -95,12 +95,12 @@ export const GroupItem = observer(function GroupItem(props: TGroupItem) {
           }}
           disabled={!isEditable || createState}
         >
-          <PlusIcon className="w-4 h-4" />
+          <PlusIcon className="h-4 w-4" />
         </button>
       </div>
 
       {shouldShowEmptyState && (
-        <div className="flex flex-col justify-center items-center h-full py-4 text-13 text-tertiary">
+        <div className="flex h-full flex-col items-center justify-center py-4 text-13 text-tertiary">
           <div>{t("project_settings.states.empty_state.title", { groupKey })}</div>
           {isEditable && <div>{t("project_settings.states.empty_state.description")}</div>}
         </div>
diff --git a/apps/web/core/components/project-states/options/delete.tsx b/apps/web/core/components/project-states/options/delete.tsx
index 235b4433d5f..65f4b4125c8 100644
--- a/apps/web/core/components/project-states/options/delete.tsx
+++ b/apps/web/core/components/project-states/options/delete.tsx
@@ -81,7 +81,7 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
       <button
         type="button"
         className={cn(
-          "flex-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center overflow-hidden transition-colors cursor-pointer focus:outline-none",
+          "flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors focus:outline-none",
           isDeleteDisabled ? "bg-surface-2 text-secondary" : "text-danger-primary hover:bg-layer-1"
         )}
         disabled={isDeleteDisabled}
@@ -95,7 +95,7 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
           disabled={!isDeleteDisabled}
           className="focus:outline-none"
         >
-          {isDelete ? <Loader className="w-3.5 h-3.5 text-secondary" /> : <CloseIcon className="w-3.5 h-3.5" />}
+          {isDelete ? <Loader className="h-3.5 w-3.5 text-secondary" /> : <CloseIcon className="h-3.5 w-3.5" />}
         </Tooltip>
       </button>
     </>
diff --git a/apps/web/core/components/project-states/state-item-title.tsx b/apps/web/core/components/project-states/state-item-title.tsx
index 920efa83415..b3fce44d710 100644
--- a/apps/web/core/components/project-states/state-item-title.tsx
+++ b/apps/web/core/components/project-states/state-item-title.tsx
@@ -43,12 +43,12 @@ export const StateItemTitle = observer(function StateItemTitle(props: TStateItem
   const percentage = statePercentage ? statePercentage / 100 : undefined;
 
   return (
-    <div className="flex items-center gap-2 w-full justify-between">
+    <div className="flex w-full items-center justify-between gap-2">
       <div className="flex items-center gap-1 px-1">
         {/* draggable indicator */}
         {!disabled && stateCount != 1 && (
-          <div className="flex-shrink-0 w-3 h-3 rounded-xs absolute -left-1.5 hidden group-hover:flex justify-center items-center transition-colors bg-surface-2 cursor-pointer text-secondary hover:text-primary">
-            <GripVertical className="w-3 h-3" />
+          <div className="absolute -left-1.5 hidden h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs bg-surface-2 text-secondary transition-colors group-hover:flex hover:text-primary">
+            <GripVertical className="h-3 w-3" />
           </div>
         )}
         {/* state icon */}
@@ -56,13 +56,13 @@ export const StateItemTitle = observer(function StateItemTitle(props: TStateItem
           <StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.XL} percentage={percentage} />
         </div>
         {/* state title and description */}
-        <div className="text-13 px-2 min-h-5">
+        <div className="min-h-5 px-2 text-13">
           <h6 className="text-13 font-medium">{state.name}</h6>
           {shouldShowDescription && <p className="text-11 text-secondary">{state.description}</p>}
         </div>
       </div>
       {!disabled && (
-        <div className="hidden group-hover:flex items-center gap-2">
+        <div className="hidden items-center gap-2 group-hover:flex">
           {/* state mark as default option */}
           <div className="flex-shrink-0 text-11 transition-all">
             <StateMarksAsDefault
@@ -74,11 +74,11 @@ export const StateItemTitle = observer(function StateItemTitle(props: TStateItem
           {/* state edit options */}
           <div className="flex items-center gap-1 transition-all">
             <button
-              className="flex-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center overflow-hidden transition-colors hover:bg-layer-1 cursor-pointer text-secondary hover:text-primary"
+              className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
               onClick={() => setUpdateStateModal(true)}
               data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_EDIT_BUTTON}
             >
-              <EditIcon className="w-3 h-3" />
+              <EditIcon className="h-3 w-3" />
             </button>
             <StateDelete
               totalStates={stateCount}
diff --git a/apps/web/core/components/project-states/state-item.tsx b/apps/web/core/components/project-states/state-item.tsx
index 49c87524549..9caeef1f862 100644
--- a/apps/web/core/components/project-states/state-item.tsx
+++ b/apps/web/core/components/project-states/state-item.tsx
@@ -135,7 +135,7 @@ export const StateItem = observer(function StateItem(props: TStateItem) {
       <div
         ref={draggableElementRef}
         className={cn(
-          "relative border border-subtle bg-surface-1 py-3 px-3.5 rounded-sm group",
+          "group relative rounded-sm border border-subtle bg-surface-1 px-3.5 py-3",
           isDragging ? `opacity-50` : `opacity-100`,
           totalStates === 1 ? `cursor-auto` : `cursor-grab`,
           stateItemClassName
diff --git a/apps/web/core/components/project/applied-filters/access.tsx b/apps/web/core/components/project/applied-filters/access.tsx
index 4919d5a46b7..15f5b59ccf5 100644
--- a/apps/web/core/components/project/applied-filters/access.tsx
+++ b/apps/web/core/components/project/applied-filters/access.tsx
@@ -25,7 +25,7 @@ export const AppliedAccessFilters = observer(function AppliedAccessFilters(props
       {values.map((status) => {
         const accessDetails = NETWORK_CHOICES.find((s) => `${s.key}` === status);
         return (
-          <div key={status} className="flex items-center gap-1 rounded-sm px-1.5 py-1 text-11 bg-layer-1">
+          <div key={status} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             {accessDetails && t(accessDetails?.i18n_label)}
             {editable && (
               <button
diff --git a/apps/web/core/components/project/applied-filters/project-display-filters.tsx b/apps/web/core/components/project/applied-filters/project-display-filters.tsx
index 177830cdece..2ca36c807f3 100644
--- a/apps/web/core/components/project/applied-filters/project-display-filters.tsx
+++ b/apps/web/core/components/project/applied-filters/project-display-filters.tsx
@@ -28,7 +28,7 @@ export const AppliedProjectDisplayFilters = observer(function AppliedProjectDisp
       {values.map((key) => {
         const filterLabel = PROJECT_DISPLAY_FILTER_OPTIONS.find((s) => s.key === key)?.i18n_label;
         return (
-          <div key={key} className="flex items-center gap-1 rounded-sm px-1.5 py-1 text-11 bg-layer-1">
+          <div key={key} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             {filterLabel && t(filterLabel)}
             {editable && (
               <button
diff --git a/apps/web/core/components/project/applied-filters/root.tsx b/apps/web/core/components/project/applied-filters/root.tsx
index 979a524da28..0926b1aba4d 100644
--- a/apps/web/core/components/project/applied-filters/root.tsx
+++ b/apps/web/core/components/project/applied-filters/root.tsx
@@ -124,7 +124,7 @@ export function ProjectAppliedFiltersList(props: Props) {
             </p>
           }
         >
-          <span className="bg-layer-1 rounded-full text-13 font-medium py-1 px-2.5">
+          <span className="rounded-full bg-layer-1 px-2.5 py-1 text-13 font-medium">
             {filteredProjects}/{totalProjects}
           </span>
         </Tooltip>
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index cf155624206..c9286d15faf 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -206,22 +206,22 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
         }}
         data-prevent-progress={!isMemberOfProject || isArchived}
         className={cn(
-          "flex flex-col justify-between group/project-card border border-subtle bg-layer-2 hover:shadow-raised-200 hover:border-strong w-full rounded-lg overflow-hidden duration-300 transition-all"
+          "group/project-card flex w-full flex-col justify-between overflow-hidden rounded-lg border border-subtle bg-layer-2 transition-all duration-300 hover:border-strong hover:shadow-raised-200"
         )}
       >
         <ContextMenu parentRef={projectCardRef} items={MENU_ITEMS} />
-        <div className="relative h-[118px] w-full rounded-t ">
+        <div className="relative h-[118px] w-full rounded-t">
           <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/60 to-transparent" />
 
           <CoverImage
             src={project.cover_image_url}
             alt={project.name}
-            className="absolute left-0 top-0 h-full w-full rounded-t"
+            className="absolute top-0 left-0 h-full w-full rounded-t"
           />
 
           <div className="absolute bottom-4 z-[1] flex h-10 w-full items-center justify-between gap-3 px-4">
             <div className="flex flex-grow items-center gap-2.5 truncate">
-              <div className="h-9 w-9 flex-shrink-0 grid place-items-center rounded-sm bg-white/10">
+              <div className="grid h-9 w-9 flex-shrink-0 place-items-center rounded-sm bg-white/10">
                 <Logo logo={project.logo_props} size={18} />
               </div>
 
@@ -229,7 +229,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                 <h3 className="truncate font-semibold text-on-color">{project.name}</h3>
                 <span className="flex items-center gap-1.5">
                   <p className="text-11 font-medium text-on-color">{project.identifier} </p>
-                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-on-color " />}
+                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-on-color" />}
                 </span>
               </div>
             </div>
@@ -271,7 +271,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
             "opacity-90": isArchived,
           })}
         >
-          <p className="line-clamp-2 break-words text-13 text-tertiary">
+          <p className="line-clamp-2 text-13 break-words text-tertiary">
             {project.description && project.description.trim() !== ""
               ? project.description
               : `Created on ${renderFormattedDate(project.created_at)}`}
@@ -299,16 +299,16 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                     </AvatarGroup>
                   </div>
                 ) : (
-                  <span className="text-13 italic text-placeholder">No Member Yet</span>
+                  <span className="text-13 text-placeholder italic">No Member Yet</span>
                 )}
               </Tooltip>
-              {isArchived && <div className="text-11 text-placeholder font-medium">Archived</div>}
+              {isArchived && <div className="text-11 font-medium text-placeholder">Archived</div>}
             </div>
             {isArchived ? (
               hasAdminRole && (
                 <div className="flex items-center justify-center gap-2">
                   <div
-                    className="flex items-center justify-center text-11 text-placeholder font-medium hover:text-secondary"
+                    className="flex items-center justify-center text-11 font-medium text-placeholder hover:text-secondary"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -321,7 +321,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                     </div>
                   </div>
                   <div
-                    className="flex items-center justify-center text-11 text-placeholder font-medium hover:text-secondary"
+                    className="flex items-center justify-center text-11 font-medium text-placeholder hover:text-secondary"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -346,7 +346,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                       <Settings className="h-3.5 w-3.5" />
                     </Link>
                   ) : (
-                    <span className="flex items-center gap-1 text-placeholder text-13">
+                    <span className="flex items-center gap-1 text-13 text-placeholder">
                       <CheckIcon className="h-3.5 w-3.5" />
                       Joined
                     </span>
diff --git a/apps/web/core/components/project/confirm-project-member-remove.tsx b/apps/web/core/components/project/confirm-project-member-remove.tsx
index 6f606e52bdf..52a7c30600e 100644
--- a/apps/web/core/components/project/confirm-project-member-remove.tsx
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -54,13 +54,13 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
-      <div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+      <div className="bg-surface-1 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
         <div className="sm:flex sm:items-start">
           <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
             <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </div>
-          <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-            <h3 className="text-16 font-medium leading-6 text-primary">
+          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <h3 className="text-16 leading-6 font-medium text-primary">
               {isCurrentUser ? "Leave project?" : `Remove ${data?.display_name}?`}
             </h3>
             <div className="mt-2">
diff --git a/apps/web/core/components/project/create/common-attributes.tsx b/apps/web/core/components/project/create/common-attributes.tsx
index 56907c3c2c8..2772a8d31ce 100644
--- a/apps/web/core/components/project/create/common-attributes.tsx
+++ b/apps/web/core/components/project/create/common-attributes.tsx
@@ -79,7 +79,7 @@ function ProjectCommonAttributes(props: Props) {
               onChange={handleNameChange(onChange)}
               hasError={Boolean(errors.name)}
               placeholder={t("project_name")}
-              className="w-full focus:border-blue-400"
+              className="focus:border-blue-400 w-full"
               tabIndex={getIndex("name")}
             />
           )}
@@ -113,7 +113,7 @@ function ProjectCommonAttributes(props: Props) {
               onChange={handleIdentifierChange(onChange)}
               hasError={Boolean(errors.identifier)}
               placeholder={t("project_id")}
-              className={cn("w-full text-11 focus:border-blue-400 pr-7", {
+              className={cn("focus:border-blue-400 w-full pr-7 text-11", {
                 uppercase: value,
               })}
               tabIndex={getIndex("identifier")}
@@ -126,7 +126,7 @@ function ProjectCommonAttributes(props: Props) {
           className="text-13"
           position="right-start"
         >
-          <InfoIcon className="absolute right-2 top-2.5 h-3 w-3 text-placeholder" />
+          <InfoIcon className="absolute top-2.5 right-2 h-3 w-3 text-placeholder" />
         </Tooltip>
         <span className="text-11 text-danger-primary">{errors?.identifier?.message}</span>
       </div>
@@ -144,7 +144,7 @@ function ProjectCommonAttributes(props: Props) {
                 onChange(e);
                 handleFormOnChange?.();
               }}
-              className="!h-24 text-13 focus:border-blue-400"
+              className="focus:border-blue-400 !h-24 text-13"
               hasError={Boolean(errors?.description)}
               tabIndex={getIndex("description")}
             />
diff --git a/apps/web/core/components/project/create/header.tsx b/apps/web/core/components/project/create/header.tsx
index 149bc675f1d..98ab84dd54a 100644
--- a/apps/web/core/components/project/create/header.tsx
+++ b/apps/web/core/components/project/create/header.tsx
@@ -52,21 +52,21 @@ function ProjectCreateHeader(props: Props) {
       <CoverImage
         src={coverImage}
         alt={t("project_cover_image_alt")}
-        className="absolute left-0 top-0 h-full w-full rounded-lg"
+        className="absolute top-0 left-0 h-full w-full rounded-lg"
       />
       {showActionButtons && (
-        <div className="absolute left-2.5 top-2.5">
+        <div className="absolute top-2.5 left-2.5">
           <ProjectTemplateSelect onClick={handleTemplateSelect} />
         </div>
       )}
       {isClosable && (
-        <div className="absolute right-2 top-2 p-2">
+        <div className="absolute top-2 right-2 p-2">
           <button type="button" onClick={handleClose} tabIndex={getIndex("close")}>
             <CloseIcon className="h-5 w-5 text-on-color" />
           </button>
         </div>
       )}
-      <div className="absolute bottom-2 right-2">
+      <div className="absolute right-2 bottom-2">
         <Controller
           name="cover_image_url"
           control={control}
@@ -96,7 +96,7 @@ function ProjectCreateHeader(props: Props) {
               className="flex items-center justify-center"
               buttonClassName="flex items-center justify-center"
               label={
-                <span className="grid h-11 w-11 place-items-center bg-layer-2 rounded-md border border-subtle">
+                <span className="grid h-11 w-11 place-items-center rounded-md border border-subtle bg-layer-2">
                   <Logo logo={value} size={20} />
                 </span>
               }
diff --git a/apps/web/core/components/project/create/project-create-buttons.tsx b/apps/web/core/components/project/create/project-create-buttons.tsx
index f268c6734f4..ae66ca71919 100644
--- a/apps/web/core/components/project/create/project-create-buttons.tsx
+++ b/apps/web/core/components/project/create/project-create-buttons.tsx
@@ -29,7 +29,7 @@ function ProjectCreateButtons(props: Props) {
   const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
 
   return (
-    <div className="flex justify-end gap-2 py-4 border-t border-subtle">
+    <div className="flex justify-end gap-2 border-t border-subtle py-4">
       <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
         {t("common.cancel")}
       </Button>
diff --git a/apps/web/core/components/project/delete-project-modal.tsx b/apps/web/core/components/project/delete-project-modal.tsx
index dd9ac01a909..3155e9f72cc 100644
--- a/apps/web/core/components/project/delete-project-modal.tsx
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -88,12 +88,12 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
         </div>
         <span>
           <p className="text-13 leading-7 text-secondary">
-            Are you sure you want to delete project <span className="break-words font-semibold">{project?.name}</span>?
+            Are you sure you want to delete project <span className="font-semibold break-words">{project?.name}</span>?
             All of the data related to the project will be permanently removed. This action cannot be undone
           </p>
         </span>
         <div className="text-secondary">
-          <p className="break-words text-13 ">
+          <p className="text-13 break-words">
             Enter the project name <span className="font-medium text-primary">{project?.name}</span> to continue:
           </p>
           <Controller
diff --git a/apps/web/core/components/project/dropdowns/filters/access.tsx b/apps/web/core/components/project/dropdowns/filters/access.tsx
index 5b850f29c03..32a5648a3e9 100644
--- a/apps/web/core/components/project/dropdowns/filters/access.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/access.tsx
@@ -49,7 +49,7 @@ export const FilterAccess = observer(function FilterAccess(props: Props) {
               />
             ))
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/dropdowns/filters/created-at.tsx b/apps/web/core/components/project/dropdowns/filters/created-at.tsx
index ac0a6f2adc5..4ce2bf045fc 100644
--- a/apps/web/core/components/project/dropdowns/filters/created-at.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/created-at.tsx
@@ -79,7 +79,7 @@ export const FilterCreatedDate = observer(function FilterCreatedDate(props: Prop
               />
             </>
           ) : (
-            <p className="text-11 italic text-placeholder">No matches found</p>
+            <p className="text-11 text-placeholder italic">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
index fa4ee6124f6..286759dd22a 100644
--- a/apps/web/core/components/project/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/lead.tsx
@@ -99,7 +99,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/project/dropdowns/filters/members.tsx b/apps/web/core/components/project/dropdowns/filters/members.tsx
index 1af34e16ce8..1e94ac62cdc 100644
--- a/apps/web/core/components/project/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/members.tsx
@@ -99,7 +99,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
                 )}
               </>
             ) : (
-              <p className="text-11 italic text-placeholder">No matches found</p>
+              <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/web/core/components/project/dropdowns/filters/root.tsx b/apps/web/core/components/project/dropdowns/filters/root.tsx
index e24bf45615a..10071cfc85f 100644
--- a/apps/web/core/components/project/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/root.tsx
@@ -54,7 +54,7 @@ export const ProjectFiltersSelection = observer(function ProjectFiltersSelection
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         <div className="py-2">
           <FilterOption
             isChecked={!!displayFilters.my_projects}
diff --git a/apps/web/core/components/project/dropdowns/order-by.tsx b/apps/web/core/components/project/dropdowns/order-by.tsx
index 02d9c2c90c7..ad00e3b2e00 100644
--- a/apps/web/core/components/project/dropdowns/order-by.tsx
+++ b/apps/web/core/components/project/dropdowns/order-by.tsx
@@ -37,12 +37,12 @@ export function ProjectOrderByDropdown(props: Props) {
         <>
           {isMobile ? (
             <div className={getButtonStyling("secondary", "lg")}>
-              <ArrowDownWideNarrow className="shrink-0 size-3.5" strokeWidth={2} />
+              <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
               {orderByDetails && t(orderByDetails?.i18n_label)}
             </div>
           ) : (
             <div className={getButtonStyling("secondary", "lg")}>
-              <ArrowDownWideNarrow className="shrink-0 size-3.5" strokeWidth={2} />
+              <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
               {orderByDetails && t(orderByDetails?.i18n_label)}
             </div>
           )}
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
index 2e70a30e149..4e4bce83880 100644
--- a/apps/web/core/components/project/empty-state.tsx
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -25,7 +25,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
   return (
     <div className="flex h-full w-full items-center justify-center px-5 md:px-10 lg:p-20">
       <div className="relative h-full w-full max-w-6xl">
-        <img src={image} className="w-52 sm:w-60 object-cover" alt={primaryButton?.text ?? ""} />
+        <img src={image} className="w-52 object-cover sm:w-60" alt={primaryButton?.text ?? ""} />
       </div>
       <div className="absolute flex w-full flex-col items-center pt-[30vh] text-center md:pt-[35vh] lg:pt-[45vh]">
         <h6 className="mt-6 text-18 font-semibold">{title}</h6>
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index 60d917cadf1..b14b63cd61f 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -195,7 +195,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
       <div className="relative h-44 w-full">
         <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
         <CoverImage src={coverImage} alt="Project cover image" className="h-44 w-full rounded-md" />
-        <div className="z-5 absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
+        <div className="absolute bottom-4 z-5 flex w-full items-end justify-between gap-3 px-4">
           <div className="flex flex-grow gap-3 truncate">
             <Controller
               control={control}
@@ -238,7 +238,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
               <span className="flex items-center gap-2 text-13">
                 <span>{watch("identifier")} .</span>
                 <span className="flex items-center gap-1.5">
-                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-on-color " />}
+                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-on-color" />}
                   {currentNetwork && t(currentNetwork?.i18n_label)}
                 </span>
               </span>
@@ -313,7 +313,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
             )}
           />
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           <div className="flex flex-col gap-1">
             <h4 className="text-13">Project ID</h4>
             <div className="relative">
@@ -353,7 +353,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                 className="text-13"
                 position="right-start"
               >
-                <Info className="absolute right-2 top-2.5 h-4 w-4 text-placeholder" />
+                <Info className="absolute top-2.5 right-2 h-4 w-4 text-placeholder" />
               </Tooltip>
             </div>
             <span className="text-11 text-danger-primary">
@@ -404,7 +404,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
               }}
             />
           </div>
-          <div className="flex flex-col gap-1 col-span-1 sm:col-span-2 xl:col-span-1">
+          <div className="col-span-1 flex flex-col gap-1 sm:col-span-2 xl:col-span-1">
             <h4 className="text-13">{t("common.project_timezone")}</h4>
             <Controller
               name="timezone"
@@ -432,7 +432,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
             <Button variant="primary" size="lg" type="submit" loading={isLoading} disabled={!isAdmin}>
               {isLoading ? t("updating") : t("common.update_project")}
             </Button>
-            <span className="text-13 italic text-placeholder">
+            <span className="text-13 text-placeholder italic">
               {t("common.created_on")} {renderFormattedDate(project?.created_at)}
             </span>
           </>
diff --git a/apps/web/core/components/project/integration-card.tsx b/apps/web/core/components/project/integration-card.tsx
index 43781619479..79322e3faeb 100644
--- a/apps/web/core/components/project/integration-card.tsx
+++ b/apps/web/core/components/project/integration-card.tsx
@@ -90,7 +90,7 @@ export function IntegrationCard({ integration }: Props) {
             <div className="h-10 w-10 flex-shrink-0">
               <img
                 src={integrationDetails[integration.integration_detail.provider].logo}
-                className="w-full h-full object-cover"
+                className="h-full w-full object-cover"
                 alt={`${integration.integration_detail.title} Logo`}
               />
             </div>
diff --git a/apps/web/core/components/project/join-project-modal.tsx b/apps/web/core/components/project/join-project-modal.tsx
index 86b811acf77..8d1088440b2 100644
--- a/apps/web/core/components/project/join-project-modal.tsx
+++ b/apps/web/core/components/project/join-project-modal.tsx
@@ -51,9 +51,9 @@ export function JoinProjectModal(props: TJoinProjectModalProps) {
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
       <div className="space-y-5 px-5 py-8 sm:p-6">
-        <h3 className="text-16 font-medium leading-6 text-primary">Join Project?</h3>
+        <h3 className="text-16 leading-6 font-medium text-primary">Join Project?</h3>
         <p>
-          Are you sure you want to join the project <span className="break-words font-semibold">{project?.name}</span>?
+          Are you sure you want to join the project <span className="font-semibold break-words">{project?.name}</span>?
           Please click the &apos;Join Project&apos; button below to continue.
         </p>
         <div className="space-y-3" />
diff --git a/apps/web/core/components/project/leave-project-modal.tsx b/apps/web/core/components/project/leave-project-modal.tsx
index 5aeda69709b..0f4b32ae02d 100644
--- a/apps/web/core/components/project/leave-project-modal.tsx
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -115,7 +115,7 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
         </span>
 
         <div className="text-secondary">
-          <p className="break-words text-13 ">
+          <p className="text-13 break-words">
             Enter the project name <span className="font-medium text-primary">{project?.name}</span> to continue:
           </p>
           <Controller
diff --git a/apps/web/core/components/project/member-list.tsx b/apps/web/core/components/project/member-list.tsx
index f8e4691484f..3c72ef57f7e 100644
--- a/apps/web/core/components/project/member-list.tsx
+++ b/apps/web/core/components/project/member-list.tsx
@@ -81,13 +81,13 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
         projectId={projectId}
         workspaceSlug={workspaceSlug}
       />
-      <div className="flex items-center justify-between gap-4 py-2 overflow-x-hidden border-b border-subtle">
+      <div className="flex items-center justify-between gap-4 overflow-x-hidden border-b border-subtle py-2">
         <div className="text-14 font-semibold">{t("common.members")}</div>
         <div className="flex items-center gap-2">
           <div className="flex items-center justify-start gap-1.5 rounded-md border border-subtle bg-surface-1 px-2 py-1">
             <SearchIcon className="h-3.5 w-3.5" />
             <input
-              className="w-full max-w-[234px] border-none bg-transparent text-13 focus:outline-none placeholder:text-placeholder"
+              className="w-full max-w-[234px] border-none bg-transparent text-13 placeholder:text-placeholder focus:outline-none"
               placeholder="Search"
               value={searchQuery}
               autoFocus
@@ -124,7 +124,7 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
             />
           )}
           {searchedProjectMembers.length === 0 && (
-            <h4 className="text-13 mt-16 text-center text-placeholder">{t("no_matching_members")}</h4>
+            <h4 className="mt-16 text-center text-13 text-placeholder">{t("no_matching_members")}</h4>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/member-select.tsx b/apps/web/core/components/project/member-select.tsx
index 4453c90a99a..b55609c3daa 100644
--- a/apps/web/core/components/project/member-select.tsx
+++ b/apps/web/core/components/project/member-select.tsx
@@ -63,7 +63,7 @@ export const MemberSelect = observer(function MemberSelect(props: Props) {
     <CustomSearchSelect
       value={value}
       label={
-        <div className="flex items-center gap-2 h-3.5">
+        <div className="flex h-3.5 items-center gap-2">
           {selectedOption && (
             <Avatar name={selectedOption.member?.display_name} src={getFileURL(selectedOption.member?.avatar_url)} />
           )}
diff --git a/apps/web/core/components/project/multi-select-modal.tsx b/apps/web/core/components/project/multi-select-modal.tsx
index fb40f63fb0e..0db2cb63d84 100644
--- a/apps/web/core/components/project/multi-select-modal.tsx
+++ b/apps/web/core/components/project/multi-select-modal.tsx
@@ -89,8 +89,8 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
   return (
     <ModalCore isOpen={isOpen} width={EModalWidth.LG} position={EModalPosition.TOP} handleClose={handleClose}>
       <Combobox as="div" multiple value={selectedProjectIds} onChange={handleSelectedProjectChange}>
-        <div className="flex items-center gap-2 px-4 border-b border-subtle">
-          <SearchIcon className="flex-shrink-0 size-4 text-placeholder" aria-hidden="true" />
+        <div className="flex items-center gap-2 border-b border-subtle px-4">
+          <SearchIcon className="size-4 flex-shrink-0 text-placeholder" aria-hidden="true" />
           <Combobox.Input
             className="h-12 w-full border-0 bg-transparent text-13 text-primary outline-none placeholder:text-placeholder focus:ring-0"
             placeholder="Search for projects"
@@ -100,23 +100,23 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
           />
         </div>
         {selectedProjectIds.length > 0 && (
-          <div className="flex flex-wrap gap-2 pt-2 px-4">
+          <div className="flex flex-wrap gap-2 px-4 pt-2">
             {selectedProjectIds.map((projectId) => {
               const projectDetails = projectDetailsMap.get(projectId);
               if (!projectDetails) return null;
               return (
                 <div
                   key={projectDetails.id}
-                  className="group flex items-center gap-1.5 bg-surface-2 px-2 py-1 rounded-sm cursor-pointer"
+                  className="group flex cursor-pointer items-center gap-1.5 rounded-sm bg-surface-2 px-2 py-1"
                   onClick={() => {
                     handleSelectedProjectChange(selectedProjectIds.filter((id) => id !== projectDetails.id));
                   }}
                 >
                   <Logo logo={projectDetails.logo_props} size={14} />
-                  <p className="text-11 truncate text-tertiary group-hover:text-secondary transition-colors">
+                  <p className="truncate text-11 text-tertiary transition-colors group-hover:text-secondary">
                     {projectDetails.identifier}
                   </p>
-                  <CloseIcon className="size-3 flex-shrink-0 text-placeholder group-hover:text-secondary transition-colors" />
+                  <CloseIcon className="size-3 flex-shrink-0 text-placeholder transition-colors group-hover:text-secondary" />
                 </div>
               );
             })}
@@ -124,7 +124,7 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
         )}
         <Combobox.Options
           static
-          className="py-2 vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto transition-[height] duration-200 ease-in-out"
+          className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto py-2 transition-[height] duration-200 ease-in-out"
         >
           {filteredProjectIds.length === 0 ? (
             <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
@@ -150,7 +150,7 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
                     value={projectDetails.id}
                     className={({ active }) =>
                       cn(
-                        "flex items-center justify-between gap-2 truncate w-full cursor-pointer select-none rounded-md p-2 text-secondary transition-colors",
+                        "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-md p-2 text-secondary transition-colors select-none",
                         {
                           "bg-layer-1": active,
                           "text-primary": isProjectSelected,
@@ -159,12 +159,12 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
                     }
                   >
                     <div className="flex items-center gap-2 truncate">
-                      <span className="flex-shrink-0 flex items-center gap-2.5">
+                      <span className="flex flex-shrink-0 items-center gap-2.5">
                         <Checkbox checked={isProjectSelected} />
                         <Logo logo={projectDetails.logo_props} size={16} />
                       </span>
                       <span className="flex-shrink-0 text-10">{projectDetails.identifier}</span>
-                      <p className="text-13 truncate">{projectDetails.name}</p>
+                      <p className="truncate text-13">{projectDetails.name}</p>
                     </div>
                   </Combobox.Option>
                 );
@@ -173,7 +173,7 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
           )}
         </Combobox.Options>
       </Combobox>
-      <div className="flex items-center justify-end gap-2 p-3 border-t border-subtle">
+      <div className="flex items-center justify-end gap-2 border-t border-subtle p-3">
         <Button variant="secondary" size="lg" onClick={handleClose}>
           {t("cancel")}
         </Button>
diff --git a/apps/web/core/components/project/project-feature-update.tsx b/apps/web/core/components/project/project-feature-update.tsx
index 761492b9ad3..b2eac27f0d3 100644
--- a/apps/web/core/components/project/project-feature-update.tsx
+++ b/apps/web/core/components/project/project-feature-update.tsx
@@ -38,8 +38,8 @@ export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(props
       <Row className="py-6">
         <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
       </Row>
-      <div className="flex items-center justify-between gap-2 mt-4 px-6 py-4 border-t border-subtle">
-        <div className="flex gap-1 text-13 text-tertiary font-medium">
+      <div className="mt-4 flex items-center justify-between gap-2 border-t border-subtle px-6 py-4">
+        <div className="flex gap-1 text-13 font-medium text-tertiary">
           {t("congrats")}
           <Logo logo={currentProjectDetails.logo_props} /> <p className="break-all">{currentProjectDetails.name}</p>{" "}
           {t("created").toLowerCase()}.
diff --git a/apps/web/core/components/project/project-settings-member-defaults.tsx b/apps/web/core/components/project/project-settings-member-defaults.tsx
index a0a741ea434..e505b7beb0a 100644
--- a/apps/web/core/components/project/project-settings-member-defaults.tsx
+++ b/apps/web/core/components/project/project-settings-member-defaults.tsx
@@ -138,7 +138,7 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe
   };
 
   return (
-    <div className="flex flex-col gap-y-6 my-6">
+    <div className="my-6 flex flex-col gap-y-6">
       <DefaultSettingItem title="Project Lead" description="Select the project lead for the project.">
         {currentProjectDetails ? (
           <Controller
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index 50733e0649b..2ab3e2c0460 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -202,22 +202,22 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
             <Loader.Item height="30px" />
           </Loader>
         ) : (
-          <div className="px-5 space-y-4">
+          <div className="space-y-4 px-5">
             {isProjectPublished && projectPublishSettings && (
               <>
-                <div className="border border-strong rounded-md py-1.5 pl-4 pr-1 flex items-center justify-between gap-2">
+                <div className="flex items-center justify-between gap-2 rounded-md border border-strong py-1.5 pr-1 pl-4">
                   <a
                     href={publishLink}
-                    className="text-13 text-secondary truncate"
+                    className="truncate text-13 text-secondary"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     {publishLink}
                   </a>
-                  <div className="flex-shrink-0 flex items-center gap-1">
+                  <div className="flex flex-shrink-0 items-center gap-1">
                     <a
                       href={publishLink}
-                      className="size-8 grid place-items-center bg-layer-3 hover:bg-layer-3-hover rounded-sm"
+                      className="grid size-8 place-items-center rounded-sm bg-layer-3 hover:bg-layer-3-hover"
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -225,17 +225,17 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
                     </a>
                     <button
                       type="button"
-                      className="h-8 bg-layer-3 hover:bg-layer-3-hover rounded-sm text-11 font-medium py-2 px-3"
+                      className="h-8 rounded-sm bg-layer-3 px-3 py-2 text-11 font-medium hover:bg-layer-3-hover"
                       onClick={handleCopyLink}
                     >
                       Copy link
                     </button>
                   </div>
                 </div>
-                <p className="text-13 font-medium text-accent-primary flex items-center gap-1 mt-3">
-                  <span className="relative grid place-items-center size-2.5">
-                    <span className="animate-ping absolute inline-flex size-full rounded-full bg-accent-primary opacity-75" />
-                    <span className="relative inline-flex rounded-full size-1.5 bg-accent-primary" />
+                <p className="mt-3 flex items-center gap-1 text-13 font-medium text-accent-primary">
+                  <span className="relative grid size-2.5 place-items-center">
+                    <span className="absolute inline-flex size-full animate-ping rounded-full bg-accent-primary opacity-75" />
+                    <span className="relative inline-flex size-1.5 rounded-full bg-accent-primary" />
                   </span>
                   This project is now live on web
                 </p>
@@ -312,7 +312,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
         )}
 
         {/* modal handlers */}
-        <div className="relative flex items-center justify-between border-t border-subtle px-5 py-4 mt-4">
+        <div className="relative mt-4 flex items-center justify-between border-t border-subtle px-5 py-4">
           <div className="flex items-center gap-1 text-13 text-placeholder">
             <GlobeIcon className="size-3.5" />
             <div className="text-13">Anyone with the link can access</div>
diff --git a/apps/web/core/components/project/search-projects.tsx b/apps/web/core/components/project/search-projects.tsx
index cf4277afe35..96b08c32a3f 100644
--- a/apps/web/core/components/project/search-projects.tsx
+++ b/apps/web/core/components/project/search-projects.tsx
@@ -54,9 +54,9 @@ export const ProjectSearch = observer(function ProjectSearch() {
       )}
       <div
         className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
           {
-            "w-30 md:w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+            "w-30 border-subtle px-2.5 py-1.5 opacity-100 md:w-64": isSearchOpen,
           }
         )}
       >
diff --git a/apps/web/core/components/project/send-project-invitation-modal.tsx b/apps/web/core/components/project/send-project-invitation-modal.tsx
index 947dff0d386..f57369ac14e 100644
--- a/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -175,7 +175,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <form onSubmit={handleSubmit(onSubmit)} className="p-5">
         <div className="space-y-5">
-          <h3 className="text-16 font-medium leading-6 text-primary">
+          <h3 className="text-16 leading-6 font-medium text-primary">
             {t("project_settings.members.invite_members.title")}
           </h3>
           <div className="mt-2">
@@ -184,8 +184,8 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
 
           <div className="mb-3 space-y-4">
             {fields.map((field, index) => (
-              <div key={field.id} className="group mb-1 flex items-start justify-between gap-x-4 text-13 w-full">
-                <div className="flex flex-col gap-1 grow w-full">
+              <div key={field.id} className="group mb-1 flex w-full items-start justify-between gap-x-4 text-13">
+                <div className="flex w-full grow flex-col gap-1">
                   <Controller
                     control={control}
                     name={`members.${index}.member_id`}
@@ -196,7 +196,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                         <CustomSearchSelect
                           value={value}
                           customButton={
-                            <button className="flex w-full items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2 text-left text-13 text-secondary shadow-sm duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
+                            <button className="shadow-sm flex w-full items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
                               {value && value !== "" ? (
                                 <div className="flex items-center gap-2">
                                   <Avatar
@@ -235,7 +235,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                   )}
                 </div>
 
-                <div className="flex items-center justify-between gap-2 shrink-0">
+                <div className="flex shrink-0 items-center justify-between gap-2">
                   <div className="flex flex-col gap-1">
                     <Controller
                       name={`members.${index}.role`}
@@ -245,7 +245,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                         <CustomSelect
                           {...field}
                           customButton={
-                            <div className="flex w-24 items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2.5 text-left text-13 text-secondary shadow-sm duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
+                            <div className="shadow-sm flex w-24 items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2.5 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
                               <span className="capitalize">{field.value ? ROLE[field.value] : "Select role"}</span>
                               <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                             </div>
diff --git a/apps/web/core/components/project/settings/helper.tsx b/apps/web/core/components/project/settings/helper.tsx
index 8911cc8c1a5..959411d29a3 100644
--- a/apps/web/core/components/project/settings/helper.tsx
+++ b/apps/web/core/components/project/settings/helper.tsx
@@ -28,7 +28,7 @@ export function ProjectFeatureToggle(props: Props) {
         <Pill
           variant={value ? EPillVariant.PRIMARY : EPillVariant.DEFAULT}
           size={EPillSize.SM}
-          className="border-none rounded-lg"
+          className="rounded-lg border-none"
         >
           {value ? "Enabled" : "Disabled"}
         </Pill>
diff --git a/apps/web/core/components/project/settings/member-columns.tsx b/apps/web/core/components/project/settings/member-columns.tsx
index b3554efc0b0..7806e64b890 100644
--- a/apps/web/core/components/project/settings/member-columns.tsx
+++ b/apps/web/core/components/project/settings/member-columns.tsx
@@ -46,22 +46,22 @@ export function NameColumn(props: NameProps) {
   return (
     <Disclosure>
       {({}) => (
-        <div className="relative group">
-          <div className="flex items-center gap-2 w-72">
-            <div className="flex items-center gap-x-2 gap-y-2 flex-1">
+        <div className="group relative">
+          <div className="flex w-72 items-center gap-2">
+            <div className="flex flex-1 items-center gap-x-2 gap-y-2">
               {avatar_url && avatar_url.trim() !== "" ? (
                 <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex size-6 items-center justify-center rounded-full capitalize text-on-color">
+                  <span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
                     <img
                       src={getFileURL(avatar_url)}
-                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                       alt={display_name || email}
                     />
                   </span>
                 </Link>
               ) : (
                 <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 capitalize text-on-color text-11">
+                  <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-on-color capitalize">
                     {(email ?? display_name ?? "?")[0]}
                   </span>
                 </Link>
@@ -77,11 +77,11 @@ export function NameColumn(props: NameProps) {
               >
                 <CustomMenu.MenuItem>
                   <div
-                    className="flex items-center gap-x-1 cursor-pointer text-danger-primary font-medium"
+                    className="flex cursor-pointer items-center gap-x-1 font-medium text-danger-primary"
                     data-ph-element={MEMBER_TRACKER_ELEMENTS.PROJECT_MEMBER_TABLE_CONTEXT_MENU}
                     onClick={() => setRemoveMemberModal(rowData)}
                   >
-                    <CircleMinus className="flex-shrink-0 size-3.5" />
+                    <CircleMinus className="size-3.5 flex-shrink-0" />
                     {rowData.member?.id === currentUser?.id ? "Leave " : "Remove "}
                   </div>
                 </CustomMenu.MenuItem>
@@ -169,12 +169,12 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
                 );
               }}
               label={
-                <div className="flex ">
+                <div className="flex">
                   <span>{roleLabel}</span>
                 </div>
               }
               buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
-              className="rounded-md p-0 w-32"
+              className="w-32 rounded-md p-0"
               input
             >
               {Object.entries(checkCurrentOptionWorkspaceRole(rowData.member.id)).map(([key, label]) => (
@@ -186,7 +186,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
           )}
         />
       ) : (
-        <div className="w-32 flex ">
+        <div className="flex w-32">
           <span>{roleLabel}</span>
         </div>
       )}
diff --git a/apps/web/core/components/readonly/labels.tsx b/apps/web/core/components/readonly/labels.tsx
index 420bb87d08b..93edc1d45ec 100644
--- a/apps/web/core/components/readonly/labels.tsx
+++ b/apps/web/core/components/readonly/labels.tsx
@@ -48,7 +48,7 @@ export const ReadonlyLabels = observer(function ReadonlyLabels(props: TReadonlyL
             isMobile={isMobile}
             disabled={labels.length === 0}
           >
-            <div className="h-full flex items-center gap-1 rounded-sm py-1 text-body-xs-bold">
+            <div className="flex h-full items-center gap-1 rounded-sm py-1 text-body-xs-bold">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
               <span>{value.length}</span>
               <span>Labels</span>
diff --git a/apps/web/core/components/readonly/member.tsx b/apps/web/core/components/readonly/member.tsx
index 14fae53be34..b2518b7e693 100644
--- a/apps/web/core/components/readonly/member.tsx
+++ b/apps/web/core/components/readonly/member.tsx
@@ -56,7 +56,7 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM
     <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
       {!hideIcon && Icon && <Icon className="size-4 flex-shrink-0" />}
       <div className="flex items-center gap-2">
-        <div className="size-4 rounded-full bg-layer-1 flex items-center justify-center">
+        <div className="flex size-4 items-center justify-center rounded-full bg-layer-1">
           <span className="text-13 font-medium">
             {member?.display_name?.charAt(0) ?? member?.email?.charAt(0) ?? "?"}
           </span>
diff --git a/apps/web/core/components/rich-filters/filter-item/close-button.tsx b/apps/web/core/components/rich-filters/filter-item/close-button.tsx
index 82d83cf7713..753fec47677 100644
--- a/apps/web/core/components/rich-filters/filter-item/close-button.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/close-button.tsx
@@ -29,7 +29,7 @@ export const FilterItemCloseButton = observer(function FilterItemCloseButton<
   return (
     <button
       onClick={handleRemoveFilter}
-      className="px-1.5 text-placeholder hover:text-tertiary focus:outline-none bg-layer-transparent hover:bg-layer-transparent-hover"
+      className="bg-layer-transparent px-1.5 text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary focus:outline-none"
       type="button"
       aria-label="Remove filter"
     >
diff --git a/apps/web/core/components/rich-filters/filter-item/container.tsx b/apps/web/core/components/rich-filters/filter-item/container.tsx
index d711b5a681d..256d98b2fea 100644
--- a/apps/web/core/components/rich-filters/filter-item/container.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/container.tsx
@@ -58,7 +58,7 @@ export function FilterItemContainer(props: FilterItemContainerProps) {
     <Tooltip tooltipContent={tooltipContent} position="bottom" disabled={!tooltipContent}>
       <div
         ref={itemRef}
-        className={cn("flex h-7 items-stretch rounded-sm overflow-hidden border transition-all duration-200", {
+        className={cn("flex h-7 items-stretch overflow-hidden rounded-sm border transition-all duration-200", {
           "border-subtle bg-surface-1": variant === "default",
           "border-danger-strong bg-surface-2": variant === "error",
         })}
diff --git a/apps/web/core/components/rich-filters/filter-item/property.tsx b/apps/web/core/components/rich-filters/filter-item/property.tsx
index 46c9d9f7efb..4cb38cb2950 100644
--- a/apps/web/core/components/rich-filters/filter-item/property.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/property.tsx
@@ -57,13 +57,13 @@ function PropertyButton<P extends TFilterProperty, E extends TExternalFilter>(pr
     <Tooltip tooltipContent={tooltipContent} position="bottom-start" disabled={!tooltipContent}>
       <div
         className={cn(
-          "flex items-center gap-1 px-2 py-[5px] text-11 text-tertiary min-w-0 h-full",
+          "flex h-full min-w-0 items-center gap-1 px-2 py-[5px] text-11 text-tertiary",
           COMMON_FILTER_ITEM_BORDER_CLASSNAME,
           className
         )}
       >
         {Icon && (
-          <div className="transition-transform duration-200 ease-in-out flex-shrink-0">
+          <div className="flex-shrink-0 transition-transform duration-200 ease-in-out">
             <Icon className="size-3.5" />
           </div>
         )}
diff --git a/apps/web/core/components/rich-filters/filter-item/root.tsx b/apps/web/core/components/rich-filters/filter-item/root.tsx
index 1440f46546d..afdeac0619f 100644
--- a/apps/web/core/components/rich-filters/filter-item/root.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/root.tsx
@@ -109,7 +109,7 @@ export const FilterItem = observer(function FilterItem<P extends TFilterProperty
         maxHeight="2xl"
         disabled={isOperatorSelectionDisabled}
         customButton={
-          <div className="flex items-center h-full" aria-disabled={isOperatorSelectionDisabled}>
+          <div className="flex h-full items-center" aria-disabled={isOperatorSelectionDisabled}>
             {filterConfig.getLabelForOperator(selectedOperatorOption)}
           </div>
         }
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx
index 54d9fcee4ff..61520a6f872 100644
--- a/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx
@@ -39,14 +39,14 @@ export function SelectedOptionsDisplay<V extends TFilterValue>(props: TSelectedO
   }
 
   return (
-    <div className="flex items-center h-full overflow-hidden">
+    <div className="flex h-full items-center overflow-hidden">
       {selectedOptions.slice(0, displayCount).map((option, index) => (
         <React.Fragment key={index}>
           <div className="flex items-center whitespace-nowrap">
             {option?.icon && <span className={cn("mr-1", option.iconClassName)}>{option.icon}</span>}
-            <span className="truncate max-w-24">{option?.label}</span>
+            <span className="max-w-24 truncate">{option?.label}</span>
           </div>
-          {index < Math.min(displayCount, selectedOptions.length) - 1 && <span className="text-tertiary mx-1">,</span>}
+          {index < Math.min(displayCount, selectedOptions.length) - 1 && <span className="mx-1 text-tertiary">,</span>}
         </React.Fragment>
       ))}
       {remainingCount > 0 && (
@@ -56,7 +56,7 @@ export function SelectedOptionsDisplay<V extends TFilterValue>(props: TSelectedO
           enter="transition-opacity duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
-          className="text-tertiary whitespace-nowrap ml-1"
+          className="ml-1 whitespace-nowrap text-tertiary"
         >
           +{remainingCount} more
         </Transition>
diff --git a/apps/web/core/components/rich-filters/filters-row.tsx b/apps/web/core/components/rich-filters/filters-row.tsx
index 423cb33620d..6a63603a41b 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -125,8 +125,8 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   );
 
   const mainContent = (
-    <div className="w-full flex items-start gap-2 bg-layer-1 px-4 py-2 rounded-lg">
-      <div className="w-full flex flex-wrap items-center gap-2">{leftContent}</div>
+    <div className="flex w-full items-start gap-2 rounded-lg bg-layer-1 px-4 py-2">
+      <div className="flex w-full flex-wrap items-center gap-2">{leftContent}</div>
       <div
         className={cn("flex items-center gap-2 border-l border-subtle pl-4", {
           "border-l-transparent pl-0": !hasAvailableOperations,
@@ -138,11 +138,11 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   );
 
   const ModalVariant = (
-    <div className="w-full flex flex-wrap items-center gap-2 min-h-11 bg-layer-1 rounded-lg p-2">{mainContent}</div>
+    <div className="flex min-h-11 w-full flex-wrap items-center gap-2 rounded-lg bg-layer-1 p-2">{mainContent}</div>
   );
 
   const HeaderVariant = (
-    <Header variant={EHeaderVariant.TERNARY} className="!px-3 min-h-11 bg-surface-1">
+    <Header variant={EHeaderVariant.TERNARY} className="min-h-11 bg-surface-1 !px-3">
       {mainContent}
     </Header>
   );
diff --git a/apps/web/core/components/settings/boxed-control-item.tsx b/apps/web/core/components/settings/boxed-control-item.tsx
index 3126dfac9a7..2428d586c6e 100644
--- a/apps/web/core/components/settings/boxed-control-item.tsx
+++ b/apps/web/core/components/settings/boxed-control-item.tsx
@@ -20,7 +20,7 @@ export function SettingsBoxedControlItem(props: Props) {
   return (
     <div
       className={cn(
-        "w-full bg-layer-2 rounded-lg border border-subtle px-4 py-3 flex flex-col md:flex-row items-start md:items-center md:justify-between gap-4 md:gap-8",
+        "flex w-full flex-col items-start gap-4 rounded-lg border border-subtle bg-layer-2 px-4 py-3 md:flex-row md:items-center md:justify-between md:gap-8",
         className
       )}
     >
diff --git a/apps/web/core/components/settings/content-wrapper.tsx b/apps/web/core/components/settings/content-wrapper.tsx
index d51f0fa9fad..3c982922a6b 100644
--- a/apps/web/core/components/settings/content-wrapper.tsx
+++ b/apps/web/core/components/settings/content-wrapper.tsx
@@ -20,17 +20,17 @@ export function SettingsContentWrapper(props: Props) {
   const { children, header, hugging = false } = props;
 
   return (
-    <div className="@container grow size-full flex flex-col overflow-hidden">
+    <div className="@container flex size-full grow flex-col overflow-hidden">
       {header && (
-        <div className="shrink-0 w-full">
+        <div className="w-full shrink-0">
           <AppHeader header={header} />
         </div>
       )}
-      <ScrollArea scrollType="hover" orientation="vertical" size="sm" className="grow size-full overflow-y-scroll">
+      <ScrollArea scrollType="hover" orientation="vertical" size="sm" className="size-full grow overflow-y-scroll">
         <div
           className={cn("py-9", {
-            "px-page-x lg:px-12 w-full": hugging,
-            "w-full max-w-225 mx-auto px-page-x @min-[58.95rem]:px-0": !hugging, // 58.95rem = max-width(56.25rem) + padding-x(1.35rem * 2)
+            "w-full px-page-x lg:px-12": hugging,
+            "mx-auto w-full max-w-225 px-page-x @min-[58.95rem]:px-0": !hugging, // 58.95rem = max-width(56.25rem) + padding-x(1.35rem * 2)
           })}
         >
           {children}
diff --git a/apps/web/core/components/settings/control-item.tsx b/apps/web/core/components/settings/control-item.tsx
index 966f4313b19..1b11dc6507a 100644
--- a/apps/web/core/components/settings/control-item.tsx
+++ b/apps/web/core/components/settings/control-item.tsx
@@ -14,7 +14,7 @@ export function SettingsControlItem(props: Props) {
   const { control, description, title } = props;
 
   return (
-    <div className="w-full py-3 flex flex-col md:flex-row items-start md:items-center md:justify-between gap-4 md:gap-8">
+    <div className="flex w-full flex-col items-start gap-4 py-3 md:flex-row md:items-center md:justify-between md:gap-8">
       <div className="flex flex-col gap-1">
         <h4 className="text-body-sm-medium text-primary">{title}</h4>
         <p className="text-caption-md-regular text-secondary">{description}</p>
diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
index 213e71bdcf4..32656f2882d 100644
--- a/apps/web/core/components/settings/heading.tsx
+++ b/apps/web/core/components/settings/heading.tsx
@@ -17,7 +17,7 @@ type Props = {
 
 export function SettingsHeading({ className, control, description, title, variant = "h3" }: Props) {
   return (
-    <div className={cn("flex flex-col md:flex-row gap-4 items-start md:items-center justify-between", className)}>
+    <div className={cn("flex flex-col items-start justify-between gap-4 md:flex-row md:items-center", className)}>
       <div className="flex flex-col items-start gap-1">
         {title && (
           <h3
diff --git a/apps/web/core/components/settings/layout.tsx b/apps/web/core/components/settings/layout.tsx
index 4b04e2a680a..0c950a99f9a 100644
--- a/apps/web/core/components/settings/layout.tsx
+++ b/apps/web/core/components/settings/layout.tsx
@@ -16,7 +16,7 @@ export const SettingsContentLayout = observer(function SettingsContentLayout({
   const ref = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="w-full h-full min-h-full overflow-y-scroll " ref={ref}>
+    <div className="h-full min-h-full w-full overflow-y-scroll" ref={ref}>
       {children}
     </div>
   );
diff --git a/apps/web/core/components/settings/mobile/nav.tsx b/apps/web/core/components/settings/mobile/nav.tsx
index 2f70c555380..0d1a763c625 100644
--- a/apps/web/core/components/settings/mobile/nav.tsx
+++ b/apps/web/core/components/settings/mobile/nav.tsx
@@ -31,14 +31,14 @@ export const SettingsMobileNav = observer(function SettingsMobileNav(props: Prop
   });
 
   return (
-    <div className="md:hidden border-b border-subtle py-3 flex items-center gap-4 px-page-x">
-      <div ref={sidebarRef} className="relative w-fit z-50">
+    <div className="flex items-center gap-4 border-b border-subtle px-page-x py-3 md:hidden">
+      <div ref={sidebarRef} className="relative z-50 w-fit">
         {!sidebarCollapsed && (
-          <div className="absolute left-0 top-10.5 z-50">
-            <HamburgerContent className="max-h-100 pb-3 border border-subtle rounded-lg" />
+          <div className="absolute top-10.5 left-0 z-50">
+            <HamburgerContent className="max-h-100 rounded-lg border border-subtle pb-3" />
           </div>
         )}
-        <IconButton variant="secondary" className="z-50 group shrink-0" icon={Menu} onClick={() => toggleSidebar()} />
+        <IconButton variant="secondary" className="group z-50 shrink-0" icon={Menu} onClick={() => toggleSidebar()} />
       </div>
       {/* path */}
       <div className="flex items-center gap-2">
diff --git a/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx b/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx
index a5c01086ae2..9c6db81304b 100644
--- a/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/activity/activity-list.tsx
@@ -84,7 +84,7 @@ export const ActivityProfileSettingsList = observer(function ProfileActivityList
                         </div>
                       )}
 
-                      <span className="flex h-6 w-6 p-2 items-center justify-center rounded-full bg-layer-3 text-secondary">
+                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-layer-3 p-2 text-secondary">
                         <MessageSquare className="!text-20 text-secondary" aria-hidden="true" />
                       </span>
                     </div>
@@ -126,9 +126,9 @@ export const ActivityProfileSettingsList = observer(function ProfileActivityList
                     <div className="relative flex items-start space-x-2">
                       <>
                         <div>
-                          <div className="relative px-1.5 mt-4">
+                          <div className="relative mt-4 px-1.5">
                             <div className="mt-1.5">
-                              <div className="flex h-6 w-6 items-center justify-center border border-subtle rounded-lg shadow-raised-100">
+                              <div className="flex h-6 w-6 items-center justify-center rounded-lg border border-subtle shadow-raised-100">
                                 {activityItem.field ? (
                                   activityItem.new_value === "restore" ? (
                                     <History className="h-5 w-5 text-secondary" />
@@ -154,7 +154,7 @@ export const ActivityProfileSettingsList = observer(function ProfileActivityList
                           </div>
                         </div>
                         <div className="min-w-0 flex-1 border-b border-subtle py-4">
-                          <div className="break-words text-caption-md-regular text-secondary">
+                          <div className="text-caption-md-regular break-words text-secondary">
                             {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                               <span className="text-gray font-medium">Plane</span>
                             ) : activityItem.actor_detail.is_bot ? (
diff --git a/apps/web/core/components/settings/profile/content/pages/activity/root.tsx b/apps/web/core/components/settings/profile/content/pages/activity/root.tsx
index b09cf5d429b..466c523cd2e 100644
--- a/apps/web/core/components/settings/profile/content/pages/activity/root.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/activity/root.tsx
@@ -60,7 +60,7 @@ export const ActivityProfileSettings = observer(function ActivityProfileSettings
 
   if (isEmpty) {
     return (
-      <div className="size-full flex flex-col gap-y-7">
+      <div className="flex size-full flex-col gap-y-7">
         <ProfileSettingsHeading
           title={t("account_settings.activity.heading")}
           description={t("account_settings.activity.description")}
@@ -69,7 +69,7 @@ export const ActivityProfileSettings = observer(function ActivityProfileSettings
           title={""}
           description={""}
           assetPath={resolvedPath}
-          className="w-full p-0! justify-center mx-auto min-h-fit"
+          className="mx-auto min-h-fit w-full justify-center p-0!"
           size="base"
         />
       </div>
@@ -84,7 +84,7 @@ export const ActivityProfileSettings = observer(function ActivityProfileSettings
       />
       <div className="mt-7 w-full">{activityPages}</div>
       {isLoadMoreVisible && (
-        <div className="flex w-full items-center justify-center mt-4">
+        <div className="mt-4 flex w-full items-center justify-center">
           <Button variant="ghost" onClick={handleLoadMore} appendIcon={<ChevronDown />}>
             {t("load_more")}
           </Button>
diff --git a/apps/web/core/components/settings/profile/content/pages/general/form.tsx b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
index f4f67e5b3ad..778e2024de8 100644
--- a/apps/web/core/components/settings/profile/content/pages/general/form.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
@@ -215,7 +215,7 @@ export const GeneralProfileSettingsForm = observer(function GeneralProfileSettin
                       <div className="relative h-16 w-16 overflow-hidden">
                         <img
                           src={getFileURL(userAvatar)}
-                          className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+                          className="absolute top-0 left-0 h-full w-full rounded-lg object-cover"
                           onClick={() => setIsImageUploadModalOpen(true)}
                           alt={currentUser?.display_name}
                           role="button"
@@ -226,7 +226,7 @@ export const GeneralProfileSettingsForm = observer(function GeneralProfileSettin
                 </div>
               </div>
             </div>
-            <div className="absolute bottom-3 right-3 flex">
+            <div className="absolute right-3 bottom-3 flex">
               <Controller
                 control={control}
                 name="cover_image_url"
@@ -247,11 +247,11 @@ export const GeneralProfileSettingsForm = observer(function GeneralProfileSettin
               <div className="item-center flex text-16 font-medium text-secondary">
                 <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
               </div>
-              <span className="text-13 text-tertiary tracking-tight">{watch("email")}</span>
+              <span className="text-13 tracking-tight text-tertiary">{watch("email")}</span>
             </div>
           </div>
           <div className="flex flex-col gap-2">
-            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
+            <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 xl:grid-cols-3">
               <div className="flex flex-col gap-1">
                 <h4 className="text-13 font-medium text-secondary">
                   {t("first_name")}&nbsp;
@@ -370,7 +370,7 @@ export const GeneralProfileSettingsForm = observer(function GeneralProfileSettin
                 {isSMTPConfigured && (
                   <button
                     type="button"
-                    className="text-11 underline btn w-fit text-secondary"
+                    className="btn w-fit text-11 text-secondary underline"
                     onClick={() => setIsChangeEmailModalOpen(true)}
                   >
                     {t("account_settings.profile.change_email_modal.title")}
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx
index cabf93680c0..70110914853 100644
--- a/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx
@@ -28,7 +28,7 @@ export const PreferencesProfileSettings = observer(function PreferencesProfileSe
         title={t("account_settings.preferences.heading")}
         description={t("account_settings.preferences.description")}
       />
-      <div className="mt-7 flex flex-col gap-6 w-full">
+      <div className="mt-7 flex w-full flex-col gap-6">
         <section>
           <ProfileSettingsDefaultPreferencesList />
         </section>
diff --git a/apps/web/core/components/settings/profile/content/pages/security.tsx b/apps/web/core/components/settings/profile/content/pages/security.tsx
index 4c16637bfc8..5a9cc017f28 100644
--- a/apps/web/core/components/settings/profile/content/pages/security.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/security.tsx
@@ -173,7 +173,7 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
               )}
             </div>
           )}
-          <div className="grid sm:grid-cols-2 gap-y-7 gap-x-4">
+          <div className="grid gap-x-4 gap-y-7 sm:grid-cols-2">
             <div className="flex flex-col gap-y-2">
               <h4 className="text-13">{t("auth.common.password.new_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
diff --git a/apps/web/core/components/settings/profile/content/root.tsx b/apps/web/core/components/settings/profile/content/root.tsx
index 24db7015c02..c407d2b1daa 100644
--- a/apps/web/core/components/settings/profile/content/root.tsx
+++ b/apps/web/core/components/settings/profile/content/root.tsx
@@ -24,7 +24,7 @@ export const ProfileSettingsContent = observer(function ProfileSettingsContent(p
 
   return (
     <ScrollArea
-      className={cn("shrink-0 bg-surface-1 overflow-y-scroll", className)}
+      className={cn("shrink-0 overflow-y-scroll bg-surface-1", className)}
       viewportClassName="px-8 py-9"
       scrollType="hover"
       orientation="vertical"
diff --git a/apps/web/core/components/settings/profile/heading.tsx b/apps/web/core/components/settings/profile/heading.tsx
index 9107fc09adb..017b2c10edd 100644
--- a/apps/web/core/components/settings/profile/heading.tsx
+++ b/apps/web/core/components/settings/profile/heading.tsx
@@ -16,7 +16,7 @@ type Props = {
 
 export function ProfileSettingsHeading({ className, control, description, title }: Props) {
   return (
-    <div className={cn("flex flex-col md:flex-row gap-4 items-start md:items-center justify-between", className)}>
+    <div className={cn("flex flex-col items-start justify-between gap-4 md:flex-row md:items-center", className)}>
       <div className="flex flex-col items-start gap-1">
         {title && <h6 className="text-h6-medium text-primary">{title}</h6>}
         {description && <p className="text-body-xs-regular text-tertiary">{description}</p>}
diff --git a/apps/web/core/components/settings/profile/sidebar/header.tsx b/apps/web/core/components/settings/profile/sidebar/header.tsx
index bdc0f189da7..52f20f0a50b 100644
--- a/apps/web/core/components/settings/profile/sidebar/header.tsx
+++ b/apps/web/core/components/settings/profile/sidebar/header.tsx
@@ -16,7 +16,7 @@ export const ProfileSettingsSidebarHeader = observer(function ProfileSettingsSid
   const { data: currentUser } = useUser();
 
   return (
-    <div className="shrink-0 flex items-center gap-2">
+    <div className="flex shrink-0 items-center gap-2">
       <div className="shrink-0">
         <Avatar
           src={getFileURL(currentUser?.avatar_url ?? "")}
@@ -27,10 +27,10 @@ export const ProfileSettingsSidebarHeader = observer(function ProfileSettingsSid
         />
       </div>
       <div className="truncate">
-        <p className="text-body-sm-medium truncate">
+        <p className="truncate text-body-sm-medium">
           {currentUser?.first_name} {currentUser?.last_name}
         </p>
-        <p className="text-caption-md-regular truncate">{currentUser?.email}</p>
+        <p className="truncate text-caption-md-regular">{currentUser?.email}</p>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/settings/profile/sidebar/root.tsx b/apps/web/core/components/settings/profile/sidebar/root.tsx
index 36a097f44ab..bef2b9928ee 100644
--- a/apps/web/core/components/settings/profile/sidebar/root.tsx
+++ b/apps/web/core/components/settings/profile/sidebar/root.tsx
@@ -26,7 +26,7 @@ export function ProfileSettingsSidebarRoot(props: Props) {
       scrollType="hover"
       orientation="vertical"
       size="sm"
-      rootClassName={cn("shrink-0 py-4 px-3 bg-surface-2 border-r border-r-subtle overflow-y-scroll", className)}
+      rootClassName={cn("shrink-0 overflow-y-scroll border-r border-r-subtle bg-surface-2 px-3 py-4", className)}
     >
       <ProfileSettingsSidebarHeader />
       <ProfileSettingsSidebarItemCategories activeTab={activeTab} updateActiveTab={updateActiveTab} />
diff --git a/apps/web/core/components/settings/project/sidebar/header.tsx b/apps/web/core/components/settings/project/sidebar/header.tsx
index 541b5ec8e0c..a5986d30146 100644
--- a/apps/web/core/components/settings/project/sidebar/header.tsx
+++ b/apps/web/core/components/settings/project/sidebar/header.tsx
@@ -41,7 +41,7 @@ export const ProjectSettingsSidebarHeader = observer(function ProjectSettingsSid
 
   return (
     <div className="shrink-0">
-      <div className="py-3 pl-4 pr-5 flex items-center gap-1 text-body-md-medium">
+      <div className="flex items-center gap-1 py-3 pr-5 pl-4 text-body-md-medium">
         <IconButton
           variant="ghost"
           size="base"
@@ -50,13 +50,13 @@ export const ProjectSettingsSidebarHeader = observer(function ProjectSettingsSid
         />
         <p>Project settings</p>
       </div>
-      <div className="mt-1.5 flex items-center gap-2 py-0.5 px-5 truncate">
-        <div className="shrink-0 size-8 grid place-items-center bg-layer-2 rounded">
+      <div className="mt-1.5 flex items-center gap-2 truncate px-5 py-0.5">
+        <div className="grid size-8 shrink-0 place-items-center rounded bg-layer-2">
           <Logo logo={projectDetails?.logo_props} size={20} />
         </div>
         <div className="truncate">
-          <p className="text-body-sm-medium truncate">{projectDetails?.name}</p>
-          <p className="text-caption-md-regular truncate">{t(ROLE_DETAILS[currentProjectRole].i18n_title)}</p>
+          <p className="truncate text-body-sm-medium">{projectDetails?.name}</p>
+          <p className="truncate text-caption-md-regular">{t(ROLE_DETAILS[currentProjectRole].i18n_title)}</p>
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/settings/sidebar/item.tsx b/apps/web/core/components/settings/sidebar/item.tsx
index 9adb1455d10..47937c37847 100644
--- a/apps/web/core/components/settings/sidebar/item.tsx
+++ b/apps/web/core/components/settings/sidebar/item.tsx
@@ -26,7 +26,7 @@ export function SettingsSidebarItem(props: Props) {
   const { as, isActive, label } = props;
   // common class
   const className = cn(
-    "flex items-center gap-2 py-1.5 px-2 rounded-lg text-body-sm-medium text-secondary text-left transition-colors",
+    "flex items-center gap-2 rounded-lg px-2 py-1.5 text-left text-body-sm-medium text-secondary transition-colors",
     {
       "bg-layer-transparent-selected text-primary": isActive,
       "hover:bg-layer-transparent-hover": !isActive,
@@ -36,7 +36,7 @@ export function SettingsSidebarItem(props: Props) {
   const content = (
     <>
       {"icon" in props ? (
-        <span className="shrink-0 size-4 grid place-items-center">{<props.icon className="size-3.5" />}</span>
+        <span className="grid size-4 shrink-0 place-items-center">{<props.icon className="size-3.5" />}</span>
       ) : (
         props.iconNode
       )}
diff --git a/apps/web/core/components/settings/workspace/sidebar/header.tsx b/apps/web/core/components/settings/workspace/sidebar/header.tsx
index 40a8d2017b2..48b13a1ff2c 100644
--- a/apps/web/core/components/settings/workspace/sidebar/header.tsx
+++ b/apps/web/core/components/settings/workspace/sidebar/header.tsx
@@ -36,7 +36,7 @@ export const WorkspaceSettingsSidebarHeader = observer(function WorkspaceSetting
 
   return (
     <div className="shrink-0">
-      <div className="py-3 pl-4 pr-5 flex items-center gap-1 text-body-md-medium">
+      <div className="flex items-center gap-1 py-3 pr-5 pl-4 text-body-md-medium">
         <IconButton
           variant="ghost"
           size="base"
@@ -45,7 +45,7 @@ export const WorkspaceSettingsSidebarHeader = observer(function WorkspaceSetting
         />
         <p>Workspace settings</p>
       </div>
-      <div className="mt-1.5 flex items-center justify-between gap-2 py-0.5 px-5">
+      <div className="mt-1.5 flex items-center justify-between gap-2 px-5 py-0.5">
         <div className="flex items-center gap-2 truncate">
           <WorkspaceLogo
             logo={currentWorkspace?.logo_url}
@@ -53,8 +53,8 @@ export const WorkspaceSettingsSidebarHeader = observer(function WorkspaceSetting
             classNames="shrink-0 size-8 border border-subtle"
           />
           <div className="truncate">
-            <p className="text-body-sm-medium truncate">{currentWorkspace?.name}</p>
-            <p className="text-caption-md-regular truncate">{t(ROLE_DETAILS[currentWorkspaceRole].i18n_title)}</p>
+            <p className="truncate text-body-sm-medium">{currentWorkspace?.name}</p>
+            <p className="truncate text-caption-md-regular">{t(ROLE_DETAILS[currentWorkspaceRole].i18n_title)}</p>
           </div>
         </div>
         <div className="shrink-0">
diff --git a/apps/web/core/components/settings/workspace/sidebar/root.tsx b/apps/web/core/components/settings/workspace/sidebar/root.tsx
index 0d6390ad797..e6d8b637cfa 100644
--- a/apps/web/core/components/settings/workspace/sidebar/root.tsx
+++ b/apps/web/core/components/settings/workspace/sidebar/root.tsx
@@ -24,7 +24,7 @@ export function WorkspaceSettingsSidebarRoot(props: Props) {
       orientation="vertical"
       size="sm"
       rootClassName={cn(
-        "shrink-0 animate-fade-in h-full w-[250px] bg-surface-1 border-r border-r-subtle overflow-y-scroll",
+        "h-full w-[250px] shrink-0 animate-fade-in overflow-y-scroll border-r border-r-subtle bg-surface-1",
         className
       )}
     >
diff --git a/apps/web/core/components/sidebar/resizable-sidebar.tsx b/apps/web/core/components/sidebar/resizable-sidebar.tsx
index ba2f123bd83..5db352d7235 100644
--- a/apps/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/apps/web/core/components/sidebar/resizable-sidebar.tsx
@@ -180,9 +180,9 @@ export function ResizableSidebar({
       <div
         id="main-sidebar"
         className={cn(
-          "h-full z-20 bg-surface-1 border-r border-subtle",
+          "z-20 h-full border-r border-subtle bg-surface-1",
           !isResizing && "transition-all duration-300 ease-in-out",
-          isCollapsed ? "translate-x-[-100%] opacity-0 w-0" : "translate-x-0 opacity-100",
+          isCollapsed ? "w-0 translate-x-[-100%] opacity-0" : "translate-x-0 opacity-100",
           isMobile && "absolute",
           className
         )}
@@ -197,7 +197,7 @@ export function ResizableSidebar({
       >
         <aside
           className={cn(
-            "group/sidebar h-full w-full bg-surface-1 overflow-hidden relative flex flex-col pt-3",
+            "group/sidebar relative flex h-full w-full flex-col overflow-hidden bg-surface-1 pt-3",
             isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
@@ -206,7 +206,7 @@ export function ResizableSidebar({
           {/* Resize Handle */}
           <div
             className={cn(
-              "transition-all duration-200 cursor-ew-resize absolute h-full w-1 z-[20]",
+              "absolute z-[20] h-full w-1 cursor-ew-resize transition-all duration-200",
               !isResizing && "hover:bg-surface-2",
               isResizing && "w-1.5 bg-layer-1",
               "top-0 right-0"
@@ -222,7 +222,7 @@ export function ResizableSidebar({
       {/* Peek View */}
       <div
         className={cn(
-          "absolute left-0 z-20 bg-surface-1 shadow-sm h-full",
+          "shadow-sm absolute left-0 z-20 h-full bg-surface-1",
           !isResizing && "transition-all duration-300 ease-in-out",
           isCollapsed && showPeek ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0",
           "pointer-events-none",
@@ -239,8 +239,8 @@ export function ResizableSidebar({
       >
         <aside
           className={cn(
-            "group/sidebar h-full w-full bg-surface-1 overflow-hidden relative flex flex-col z-20 pt-4",
-            "self-center border-r border-subtle rounded-md rounded-tl-none rounded-bl-none",
+            "group/sidebar relative z-20 flex h-full w-full flex-col overflow-hidden bg-surface-1 pt-4",
+            "self-center rounded-md rounded-tl-none rounded-bl-none border-r border-subtle",
             isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
@@ -248,7 +248,7 @@ export function ResizableSidebar({
           {/* Resize Handle */}
           <div
             className={cn(
-              "transition-all duration-200 cursor-ew-resize absolute h-full w-1 z-[20]",
+              "absolute z-[20] h-full w-1 cursor-ew-resize transition-all duration-200",
               !isResizing && "hover:bg-surface-2",
               isResizing && "bg-layer-1",
               "top-0 right-0"
diff --git a/apps/web/core/components/sidebar/search-button.tsx b/apps/web/core/components/sidebar/search-button.tsx
index 48da94e9db6..397507a2b80 100644
--- a/apps/web/core/components/sidebar/search-button.tsx
+++ b/apps/web/core/components/sidebar/search-button.tsx
@@ -16,9 +16,9 @@ export function SidebarSearchButton(props: Props) {
   return (
     <div
       className={cn(
-        "flex-shrink-0 size-8 aspect-square grid place-items-center rounded-md shadow-sm hover:bg-surface-2 outline-none border-[0.5px] border-strong",
+        "shadow-sm grid aspect-square size-8 flex-shrink-0 place-items-center rounded-md border-[0.5px] border-strong outline-none hover:bg-surface-2",
         {
-          "bg-accent-primary/10 hover:bg-accent-primary/10 border-accent-strong-200": isActive,
+          "border-accent-strong-200 bg-accent-primary/10 hover:bg-accent-primary/10": isActive,
         }
       )}
     >
diff --git a/apps/web/core/components/sidebar/sidebar-navigation.tsx b/apps/web/core/components/sidebar/sidebar-navigation.tsx
index 4e312f2dcc2..48815163683 100644
--- a/apps/web/core/components/sidebar/sidebar-navigation.tsx
+++ b/apps/web/core/components/sidebar/sidebar-navigation.tsx
@@ -17,9 +17,9 @@ export function SidebarNavItem(props: TSidebarNavItem) {
   return (
     <div
       className={cn(
-        "cursor-pointer relative group w-full flex items-center justify-between gap-1.5 rounded-md px-2 py-1 outline-none",
+        "group relative flex w-full cursor-pointer items-center justify-between gap-1.5 rounded-md px-2 py-1 outline-none",
         {
-          "text-primary !bg-layer-transparent-active": isActive,
+          "!bg-layer-transparent-active text-primary": isActive,
           "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
         },
         className
diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
index a5a32392d9e..1087d64597e 100644
--- a/apps/web/core/components/sidebar/sidebar-wrapper.tsx
+++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
@@ -50,12 +50,12 @@ export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWr
   return (
     <>
       <CustomizeNavigationDialog isOpen={isCustomizeNavDialogOpen} onClose={() => setIsCustomizeNavDialogOpen(false)} />
-      <div ref={ref} className="animate-fade-in flex flex-col h-full w-full">
+      <div ref={ref} className="flex h-full w-full animate-fade-in flex-col">
         <div className="flex flex-col gap-3 px-3">
           {/* Workspace switcher and settings */}
 
           <div className="flex items-center justify-between gap-2 px-2">
-            <span className="text-16 text-primary font-medium pt-1">{title}</span>
+            <span className="pt-1 text-16 font-medium text-primary">{title}</span>
             <div className="flex items-center gap-2">
               {title === "Projects" && (
                 <IconButton
@@ -82,7 +82,7 @@ export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWr
           {children}
         </ScrollArea>
         {/* Help Section */}
-        <div className="flex items-center justify-between p-3 border-t border-subtle bg-surface-1 h-12">
+        <div className="flex h-12 items-center justify-between border-t border-subtle bg-surface-1 p-3">
           <WorkspaceEditionBadge />
           {/* TODO: To be checked if we need this */}
           {/* <div className="flex items-center gap-2">
diff --git a/apps/web/core/components/stickies/action-bar.tsx b/apps/web/core/components/stickies/action-bar.tsx
index d9f65d699fb..105922c2054 100644
--- a/apps/web/core/components/stickies/action-bar.tsx
+++ b/apps/web/core/components/stickies/action-bar.tsx
@@ -56,14 +56,14 @@ export const StickyActionBar = observer(function StickyActionBar() {
   return (
     <div
       ref={ref}
-      className="sticky-action-bar__item flex flex-col bg-surface-2 rounded-full p-[2px] border-2 border-accent-strong/10 overflow-hidden"
+      className="sticky-action-bar__item flex flex-col overflow-hidden rounded-full border-2 border-accent-strong/10 bg-surface-2 p-[2px]"
     >
       <div
-        className={`flex flex-col gap-2 transition-all duration-300 ease-in-out origin-bottom ${isExpanded ? "scale-y-100 opacity-100 mb-2 " : "scale-y-0 opacity-0 h-0"}`}
+        className={`flex origin-bottom flex-col gap-2 transition-all duration-300 ease-in-out ${isExpanded ? "mb-2 scale-y-100 opacity-100 " : "h-0 scale-y-0 opacity-0"}`}
       >
         <Tooltip tooltipContent="All stickies" isMobile={false} position="left">
           <button
-            className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-surface-1"
+            className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
             onClick={() => toggleAllStickiesModal(true)}
           >
             <RecentStickyIcon className="size-5 rotate-90 text-tertiary" />
@@ -71,7 +71,7 @@ export const StickyActionBar = observer(function StickyActionBar() {
         </Tooltip>
         {recentStickyId && (
           <Tooltip
-            className="scale-75 -mr-30 translate-x-10"
+            className="-mr-30 translate-x-10 scale-75"
             tooltipContent={
               <div className="-m-2 max-h-[150px]">
                 <StickyNote
@@ -92,7 +92,7 @@ export const StickyActionBar = observer(function StickyActionBar() {
             disabled={showRecentSticky}
           >
             <button
-              className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-surface-1"
+              className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
               onClick={() => setShowRecentSticky(true)}
               style={{ color: recentStickyBackgroundColor }}
             >
@@ -102,7 +102,7 @@ export const StickyActionBar = observer(function StickyActionBar() {
         )}
         <Tooltip tooltipContent="Add sticky" isMobile={false} position="left">
           <button
-            className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-surface-1"
+            className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
             onClick={() => {
               updateActiveStickyId("");
               toggleShowNewSticky(true);
@@ -115,7 +115,7 @@ export const StickyActionBar = observer(function StickyActionBar() {
       </div>
 
       <button
-        className={`btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-surface-1 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
+        className={`btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
         onClick={() => setIsExpanded(!isExpanded)}
       >
         {isExpanded ? (
@@ -127,9 +127,9 @@ export const StickyActionBar = observer(function StickyActionBar() {
 
       <div
         className={cn(
-          "absolute bottom-16 right-0 z-[20]",
+          "absolute right-0 bottom-16 z-[20]",
           "transform transition-all duration-300 ease-in-out",
-          newSticky || showRecentSticky ? "translate-y-[0%] min-h-[300px]" : "translate-y-[100%] h-0"
+          newSticky || showRecentSticky ? "min-h-[300px] translate-y-[0%]" : "h-0 translate-y-[100%]"
         )}
       >
         {(newSticky || (showRecentSticky && recentStickyId)) && (
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
index 93849f00640..ea7029af056 100644
--- a/apps/web/core/components/stickies/layout/stickies-infinite.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -50,12 +50,12 @@ export const StickiesInfinite = observer(function StickiesInfinite() {
           hasNextPage &&
           workspaceStickies?.length >= STICKIES_PER_PAGE && (
             <div
-              className={cn("flex min-h-[300px] box-border p-2 w-full")}
+              className={cn("box-border flex min-h-[300px] w-full p-2")}
               ref={setElementRef}
               id="intersection-element"
             >
-              <div className="flex w-full rounded-sm min-h-[300px]">
-                <Loader className="w-full h-full">
+              <div className="flex min-h-[300px] w-full rounded-sm">
+                <Loader className="h-full w-full">
                   <Loader.Item height="100%" width="100%" />
                 </Loader>
               </div>
diff --git a/apps/web/core/components/stickies/layout/stickies-list.tsx b/apps/web/core/components/stickies/layout/stickies-list.tsx
index 4580867d011..6a9e78ea2d1 100644
--- a/apps/web/core/components/stickies/layout/stickies-list.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-list.tsx
@@ -114,7 +114,7 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
 
   if (loader === "loaded" && workspaceStickyIds.length === 0) {
     return (
-      <div className="size-full grid place-items-center">
+      <div className="grid size-full place-items-center">
         {isStickiesPage ? (
           <>
             {searchQuery ? (
diff --git a/apps/web/core/components/stickies/layout/stickies-loader.tsx b/apps/web/core/components/stickies/layout/stickies-loader.tsx
index b2ad667849e..f1666fc37c5 100644
--- a/apps/web/core/components/stickies/layout/stickies-loader.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-loader.tsx
@@ -9,9 +9,9 @@ import { Loader } from "@plane/ui";
 
 export function StickiesLoader() {
   return (
-    <div className="overflow-scroll pb-2 grid grid-cols-4 gap-4">
+    <div className="grid grid-cols-4 gap-4 overflow-scroll pb-2">
       {Array.from({ length: 4 }).map((_, index) => (
-        <Loader key={index} className="space-y-5 border border-subtle p-3 rounded-sm">
+        <Loader key={index} className="space-y-5 rounded-sm border border-subtle p-3">
           <div className="space-y-2">
             <Loader.Item height="20px" />
             <Loader.Item height="15px" width="75%" />
diff --git a/apps/web/core/components/stickies/layout/stickies-truncated.tsx b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
index 10ac90d5eb3..770709f8e6f 100644
--- a/apps/web/core/components/stickies/layout/stickies-truncated.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
@@ -44,7 +44,7 @@ export const StickiesTruncated = observer(function StickiesTruncated(props: Stic
         <Link
           href={`/${workspaceSlug}/stickies`}
           className={cn(
-            "gap-1 w-full text-accent-primary text-13 font-medium transition-opacity duration-300 bg-surface-2/20"
+            "w-full gap-1 bg-surface-2/20 text-13 font-medium text-accent-primary transition-opacity duration-300"
           )}
           onClick={handleClose}
         >
diff --git a/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx b/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
index 7372716c1d7..82e20140138 100644
--- a/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
+++ b/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
@@ -122,7 +122,7 @@ export const StickyDNDWrapper = observer(function StickyDNDWrapper(props: Props)
 
   return (
     <div
-      className="flex flex-col box-border p-[8px]"
+      className="box-border flex flex-col p-[8px]"
       style={{
         width: itemWidth,
       }}
diff --git a/apps/web/core/components/stickies/modal/search.tsx b/apps/web/core/components/stickies/modal/search.tsx
index 3cb24569582..1964a7c3b9b 100644
--- a/apps/web/core/components/stickies/modal/search.tsx
+++ b/apps/web/core/components/stickies/modal/search.tsx
@@ -53,7 +53,7 @@ export const StickySearch = observer(function StickySearch() {
   );
 
   return (
-    <div className="flex items-center mr-2 my-auto">
+    <div className="my-auto mr-2 flex items-center">
       {!isSearchOpen && (
         <IconButton
           variant="ghost"
@@ -68,13 +68,13 @@ export const StickySearch = observer(function StickySearch() {
       )}
       <div
         className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent text-placeholder opacity-0 transition-[width] ease-linear",
           {
-            "w-30 md:w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+            "w-30 border-subtle px-2.5 py-1.5 opacity-100 md:w-64": isSearchOpen,
           }
         )}
       >
-        <SearchIcon className="shrink-0 size-3.5" />
+        <SearchIcon className="size-3.5 shrink-0" />
         <input
           ref={inputRef}
           className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
diff --git a/apps/web/core/components/stickies/modal/stickies.tsx b/apps/web/core/components/stickies/modal/stickies.tsx
index deb903364ab..95746422ebc 100644
--- a/apps/web/core/components/stickies/modal/stickies.tsx
+++ b/apps/web/core/components/stickies/modal/stickies.tsx
@@ -30,12 +30,12 @@ export const Stickies = observer(function Stickies(props: TProps) {
   const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
 
   return (
-    <div className="p-6 pb-0 min-h-[620px]">
+    <div className="min-h-[620px] p-6 pb-0">
       {/* header */}
-      <div className="flex items-center justify-between mb-6">
+      <div className="mb-6 flex items-center justify-between">
         {/* Title */}
-        <div className="text-secondary flex items-center gap-2">
-          <RecentStickyIcon className="size-5 rotate-90 flex-shrink-0" />
+        <div className="flex items-center gap-2 text-secondary">
+          <RecentStickyIcon className="size-5 flex-shrink-0 rotate-90" />
           <p className="text-18 font-medium">Your stickies</p>
         </div>
         {/* actions */}
@@ -46,14 +46,14 @@ export const Stickies = observer(function Stickies(props: TProps) {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
-            className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
             disabled={creatingSticky}
           >
-            <PlusIcon className="size-4 my-auto" /> <span>Add sticky</span>
+            <PlusIcon className="my-auto size-4" /> <span>Add sticky</span>
             {creatingSticky && (
-              <div className="flex items-center justify-center ml-2">
+              <div className="ml-2 flex items-center justify-center">
                 <div
-                  className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-accent-strong`}
+                  className={`h-4 w-4 animate-spin rounded-full border-2 border-accent-strong border-t-transparent`}
                   role="status"
                   aria-label="loading"
                 />
@@ -64,9 +64,9 @@ export const Stickies = observer(function Stickies(props: TProps) {
             <button
               type="button"
               onClick={handleClose}
-              className="flex-shrink-0 grid place-items-center text-tertiary hover:text-primary hover:bg-layer-1 rounded-sm p-1 transition-colors my-auto"
+              className="my-auto grid flex-shrink-0 place-items-center rounded-sm p-1 text-tertiary transition-colors hover:bg-layer-1 hover:text-primary"
             >
-              <CloseIcon className="text-placeholder size-4" />
+              <CloseIcon className="size-4 text-placeholder" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/stickies/sticky/inputs.tsx b/apps/web/core/components/stickies/sticky/inputs.tsx
index f67382646ed..374f9ca722c 100644
--- a/apps/web/core/components/stickies/sticky/inputs.tsx
+++ b/apps/web/core/components/stickies/sticky/inputs.tsx
@@ -86,7 +86,7 @@ export function StickyInput(props: TProps) {
               return "Click to type here";
             }}
             containerClassName={cn(
-              "w-full min-h-[256px] max-h-[540px] overflow-y-scroll vertical-scrollbar scrollbar-sm p-4 text-14",
+              "vertical-scrollbar scrollbar-sm max-h-[540px] min-h-[256px] w-full overflow-y-scroll p-4 text-14",
               {
                 "max-h-[588px]": isStickiesPage,
               }
diff --git a/apps/web/core/components/stickies/sticky/root.tsx b/apps/web/core/components/stickies/sticky/root.tsx
index 3c86662da95..b2afc84c3a6 100644
--- a/apps/web/core/components/stickies/sticky/root.tsx
+++ b/apps/web/core/components/stickies/sticky/root.tsx
@@ -80,14 +80,14 @@ export const StickyNote = observer(function StickyNote(props: TProps) {
         handleClose={() => setIsDeleteModalOpen(false)}
       />
       <div
-        className={cn("w-full h-fit flex flex-col rounded-sm group/sticky overflow-y-scroll", className)}
+        className={cn("group/sticky flex h-fit w-full flex-col overflow-y-scroll rounded-sm", className)}
         style={{
           backgroundColor,
         }}
       >
         {/* {isStickiesPage && <StickyItemDragHandle isDragging={false} />}{" "} */}
         {onClose && (
-          <button type="button" className="flex-shrink-0 flex justify-end p-2.5" onClick={onClose}>
+          <button type="button" className="flex flex-shrink-0 justify-end p-2.5" onClick={onClose}>
             <Minimize2 className="size-4" />
           </button>
         )}
diff --git a/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx b/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
index 6e2a3a012a0..289bb1f4c37 100644
--- a/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
+++ b/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
@@ -20,7 +20,7 @@ export const StickyItemDragHandle = observer(function StickyItemDragHandle(props
   return (
     <div
       className={cn(
-        "hidden group-hover/sticky:flex absolute top-3 left-1/2 -translate-x-1/2 items-center justify-center rounded-sm text-placeholder cursor-grab mr-2 rotate-90",
+        "absolute top-3 left-1/2 mr-2 hidden -translate-x-1/2 rotate-90 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/sticky:flex",
         {
           "cursor-grabbing": isDragging,
         }
diff --git a/apps/web/core/components/stickies/widget.tsx b/apps/web/core/components/stickies/widget.tsx
index ac5c16927e9..929c6b69e77 100644
--- a/apps/web/core/components/stickies/widget.tsx
+++ b/apps/web/core/components/stickies/widget.tsx
@@ -30,7 +30,7 @@ export const StickiesWidget = observer(function StickiesWidget() {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-4">
+      <div className="mb-4 flex items-center justify-between">
         <div className="text-14 font-semibold text-tertiary">{t("stickies.title")}</div>
         {/* actions */}
         <div className="flex gap-2">
@@ -40,14 +40,14 @@ export const StickiesWidget = observer(function StickiesWidget() {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
-            className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
             disabled={creatingSticky}
           >
-            <PlusIcon className="size-4 my-auto" />
+            <PlusIcon className="my-auto size-4" />
             <span>{t("stickies.add")}</span>
             {creatingSticky && (
               <div
-                className="size-4 border-2 border-t-transparent border-accent-strong rounded-full animate-spin"
+                className="size-4 animate-spin rounded-full border-2 border-accent-strong border-t-transparent"
                 role="status"
                 aria-label="loading"
               />
diff --git a/apps/web/core/components/ui/empty-space.tsx b/apps/web/core/components/ui/empty-space.tsx
index a058d194ed3..dabb72c7c8c 100644
--- a/apps/web/core/components/ui/empty-space.tsx
+++ b/apps/web/core/components/ui/empty-space.tsx
@@ -29,7 +29,7 @@ function EmptySpace({ title, description, children, Icon, link }: EmptySpaceProp
 
         <h2 className="text-16 font-medium text-primary">{title}</h2>
         <div className="mt-1 text-13 text-secondary">{description}</div>
-        <ul role="list" className="mt-6 divide-y divide-subtle-1 border-b border-t border-subtle">
+        <ul role="list" className="mt-6 divide-y divide-subtle-1 border-t border-b border-subtle">
           {children}
         </ul>
         {link ? (
diff --git a/apps/web/core/components/ui/labels-list.tsx b/apps/web/core/components/ui/labels-list.tsx
index 1d63d36f8cf..c3261b24666 100644
--- a/apps/web/core/components/ui/labels-list.tsx
+++ b/apps/web/core/components/ui/labels-list.tsx
@@ -30,7 +30,7 @@ export function IssueLabelsList(props: IssueLabelsListProps) {
             tooltipContent={labels.map((l) => l?.name).join(", ")}
             isMobile={isMobile}
           >
-            <div className="h-full flex items-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 text-secondary">
+            <div className="flex h-full items-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 text-secondary">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
               <span>{labels.length}</span>
               <span> Labels</span>
diff --git a/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx b/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
index ac327050310..808811b7df3 100644
--- a/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
+++ b/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
@@ -10,35 +10,35 @@ export function CycleModuleBoardLayoutLoader() {
   return (
     <div className="h-full w-full animate-pulse">
       <div className="flex h-full w-full justify-between">
-        <div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
+        <div className="3xl:grid-cols-4 grid h-full w-full auto-rows-max grid-cols-1 gap-6 overflow-y-auto p-8 transition-all lg:grid-cols-2 xl:grid-cols-3">
           {range(5).map((i) => (
             <div
               key={i}
-              className="flex h-44 w-full flex-col justify-between rounded-sm  border border-subtle bg-surface-1 p-4 text-13"
+              className="flex h-44 w-full flex-col justify-between rounded-sm border border-subtle bg-surface-1 p-4 text-13"
             >
               <div className="flex items-center justify-between">
-                <span className="h-6 w-24 bg-layer-1 rounded-sm" />
+                <span className="h-6 w-24 rounded-sm bg-layer-1" />
                 <div className="flex items-center gap-2">
-                  <span className="h-6 w-20 bg-layer-1 rounded-sm" />
-                  <span className="h-6 w-6 bg-layer-1 rounded-sm" />
+                  <span className="h-6 w-20 rounded-sm bg-layer-1" />
+                  <span className="h-6 w-6 rounded-sm bg-layer-1" />
                 </div>
               </div>
               <div className="flex flex-col gap-3">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="h-5 w-5 bg-layer-1 rounded-sm" />
-                    <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+                    <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                    <span className="h-5 w-20 rounded-sm bg-layer-1" />
                   </div>
-                  <span className="h-5 w-5 bg-layer-1 rounded-full" />
+                  <span className="h-5 w-5 rounded-full bg-layer-1" />
                 </div>
-                <span className="h-1.5 bg-layer-1 rounded-sm" />
+                <span className="h-1.5 rounded-sm bg-layer-1" />
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
-                    <span className="h-4 w-16 bg-layer-1 rounded-sm" />
+                    <span className="h-4 w-16 rounded-sm bg-layer-1" />
                   </div>
                   <div className="flex items-center gap-2">
-                    <span className="h-4 w-4 bg-layer-1 rounded-sm" />
-                    <span className="h-4 w-4 bg-layer-1 rounded-sm" />
+                    <span className="h-4 w-4 rounded-sm bg-layer-1" />
+                    <span className="h-4 w-4 rounded-sm bg-layer-1" />
                   </div>
                 </div>
               </div>
diff --git a/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx b/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
index 50a849d9e25..e923520c70a 100644
--- a/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
+++ b/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
@@ -8,28 +8,28 @@ import { range } from "lodash-es";
 
 export function CycleModuleListLayoutLoader() {
   return (
-    <div className="h-full overflow-y-auto animate-pulse">
+    <div className="h-full animate-pulse overflow-y-auto">
       <div className="flex h-full w-full justify-between">
         <div className="flex h-full w-full flex-col overflow-y-auto">
           {range(5).map((i) => (
             <div
               key={i}
-              className="flex w-full items-center justify-between gap-5 border-b border-subtle flex-col sm:flex-row px-5 py-6"
+              className="flex w-full flex-col items-center justify-between gap-5 border-b border-subtle px-5 py-6 sm:flex-row"
             >
-              <div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
-                <div className="relative w-full flex items-center gap-3 overflow-hidden">
+              <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+                <div className="relative flex w-full items-center gap-3 overflow-hidden">
                   <div className="flex items-center gap-4 truncate">
-                    <span className="h-10 w-10 bg-layer-1 rounded-full" />
-                    <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+                    <span className="h-10 w-10 rounded-full bg-layer-1" />
+                    <span className="h-5 w-20 rounded-sm bg-layer-1" />
                   </div>
                 </div>
-                <span className="h-6 w-20 bg-layer-1 rounded-sm" />
+                <span className="h-6 w-20 rounded-sm bg-layer-1" />
               </div>
-              <div className="flex w-full sm:w-auto relative overflow-hidden items-center gap-2.5 justify-between sm:justify-end sm:flex-shrink-0 ">
-                <div className="flex-shrink-0 relative flex items-center gap-3">
-                  <span className="h-5 w-5 bg-layer-1 rounded-sm" />
-                  <span className="h-5 w-5 bg-layer-1 rounded-sm" />
-                  <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              <div className="relative flex w-full items-center justify-between gap-2.5 overflow-hidden sm:w-auto sm:flex-shrink-0 sm:justify-end">
+                <div className="relative flex flex-shrink-0 items-center gap-3">
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
                 </div>
               </div>
             </div>
diff --git a/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
index 4e809927892..e7f0f126585 100644
--- a/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
@@ -10,13 +10,13 @@ import { getRandomInt } from "../utils";
 function CalendarDay() {
   const dataCount = getRandomInt(0, 1);
   const dataBlocks = range(dataCount).map((index) => (
-    <span key={index} className="h-8 w-full bg-layer-1 rounded-sm mb-2" />
+    <span key={index} className="mb-2 h-8 w-full rounded-sm bg-layer-1" />
   ));
 
   return (
-    <div className="flex w-full flex-col min-h-[9rem]">
-      <div className="flex items-center justify-end p-2 w-full">
-        <span className="h-6 w-6 bg-layer-1 rounded-sm" />
+    <div className="flex min-h-[9rem] w-full flex-col">
+      <div className="flex w-full items-center justify-end p-2">
+        <span className="h-6 w-6 rounded-sm bg-layer-1" />
       </div>
       <div className="flex flex-col gap-2.5 p-2">{dataBlocks}</div>
     </div>
@@ -25,8 +25,8 @@ function CalendarDay() {
 
 export function CalendarLayoutLoader() {
   return (
-    <div className="h-full w-full overflow-y-auto bg-surface-1 animate-pulse">
-      <span className="relative grid divide-x-[0.5px] divide-subtle-1 text-13 font-medium grid-cols-5">
+    <div className="h-full w-full animate-pulse overflow-y-auto bg-surface-1">
+      <span className="relative grid grid-cols-5 divide-x-[0.5px] divide-subtle-1 text-13 font-medium">
         {range(5).map((index) => (
           <span key={index} className="h-11 w-full bg-layer-1" />
         ))}
@@ -34,7 +34,7 @@ export function CalendarLayoutLoader() {
       <div className="h-full w-full overflow-y-auto">
         <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-subtle-1 overflow-y-auto">
           {range(6).map((index) => (
-            <div key={index} className="grid divide-x-[0.5px] divide-subtle-1 grid-cols-5">
+            <div key={index} className="grid grid-cols-5 divide-x-[0.5px] divide-subtle-1">
               {range(5).map((index) => (
                 <CalendarDay key={index} />
               ))}
diff --git a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
index f20d42ee17b..f188ffd30c8 100644
--- a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -11,55 +11,55 @@ import { getRandomLength } from "../utils";
 
 export function GanttLayoutListItemLoader() {
   return (
-    <div className="flex w-full items-center gap-4 px-6 " style={{ height: `${BLOCK_HEIGHT}px` }}>
-      <div className="px-3 h-6 w-8 bg-layer-1 rounded-sm" />
-      <div className={`px-3 h-6 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`} />
+    <div className="flex w-full items-center gap-4 px-6" style={{ height: `${BLOCK_HEIGHT}px` }}>
+      <div className="h-6 w-8 rounded-sm bg-layer-1 px-3" />
+      <div className={`h-6 px-3 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
     </div>
   );
 }
 
 export function GanttLayoutLoader() {
   return (
-    <div className="flex flex-col h-full overflow-x-auto animate-pulse">
-      <div className="min-h-10 w-full border-b border-subtle ">
-        <span className="h-6 w-12 bg-layer-1 rounded-sm" />
+    <div className="flex h-full animate-pulse flex-col overflow-x-auto">
+      <div className="min-h-10 w-full border-b border-subtle">
+        <span className="h-6 w-12 rounded-sm bg-layer-1" />
       </div>
       <div className="flex h-full">
         <div className="h-full w-[25.5rem] border-r border-subtle">
-          <Row className="flex items-end h-header py-2 border-b border-subtle">
-            <div className="flex items-center justify-between w-full">
-              <span className="h-5 w-14 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+          <Row className="flex h-header items-end border-b border-subtle py-2">
+            <div className="flex w-full items-center justify-between">
+              <span className="h-5 w-14 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
             </div>
           </Row>
-          <Row className="flex flex-col gap-3 h-11 py-4 w-full">
+          <Row className="flex h-11 w-full flex-col gap-3 py-4">
             {range(6).map((index) => (
-              <div key={index} className="flex items-center gap-3  h-11 w-full">
-                <span className="h-6 w-6 bg-layer-1 rounded-sm" />
-                <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`} />
+              <div key={index} className="flex h-11 w-full items-center gap-3">
+                <span className="h-6 w-6 rounded-sm bg-layer-1" />
+                <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
               </div>
             ))}
           </Row>
         </div>
         <div className="h-full w-full border-r border-subtle">
-          <div className="flex flex-col justify-between gap-2 h-header py-1.5 px-4 border-b border-subtle">
+          <div className="flex h-header flex-col justify-between gap-2 border-b border-subtle px-4 py-1.5">
             <div className="flex items-center justify-start">
-              <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
             </div>
-            <div className="flex items-center gap-3 justify-between w-full">
+            <div className="flex w-full items-center justify-between gap-3">
               {range(15).map((index) => (
-                <span key={index} className="h-5 w-10 bg-layer-1 rounded-sm" />
+                <span key={index} className="h-5 w-10 rounded-sm bg-layer-1" />
               ))}
             </div>
           </div>
-          <div className="flex flex-col gap-3 h-11 p-4 w-full">
+          <div className="flex h-11 w-full flex-col gap-3 p-4">
             {range(6).map((index) => (
               <div
                 key={index}
-                className={`flex items-center gap-3 h-11 w-full`}
+                className={`flex h-11 w-full items-center gap-3`}
                 style={{ paddingLeft: getRandomLength(["115px", "208px", "260px"]) }}
               >
-                <span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`} />
+                <span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
               </div>
             ))}
           </div>
diff --git a/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index 0769cfbd581..e20c01c5e3c 100644
--- a/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -18,7 +18,7 @@ export const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader
   return (
     <span
       ref={ref}
-      className={cn(`block bg-[var(--illustration-fill-secondary)] rounded-sm`, { " animate-pulse": shouldAnimate })}
+      className={cn(`block rounded-sm bg-[var(--illustration-fill-secondary)]`, { "animate-pulse": shouldAnimate })}
       style={{ height: `${cardHeight}px` }}
     />
   );
@@ -38,10 +38,10 @@ export function KanbanColumnLoader({
   return (
     <div className="flex flex-col gap-3">
       {!ignoreHeader && (
-        <div className="flex items-center justify-between h-9 w-80">
-          <div className="flex item-center gap-3">
-            <span className={cn("h-6 w-6 bg-layer-1 rounded-sm", { " animate-pulse": shouldAnimate })} />
-            <span className={cn("h-6 w-24 bg-layer-1 rounded-sm", { " animate-pulse": shouldAnimate })} />
+        <div className="flex h-9 w-80 items-center justify-between">
+          <div className="item-center flex gap-3">
+            <span className={cn("h-6 w-6 rounded-sm bg-layer-1", { "animate-pulse": shouldAnimate })} />
+            <span className={cn("h-6 w-24 rounded-sm bg-layer-1", { "animate-pulse": shouldAnimate })} />
           </div>
         </div>
       )}
@@ -56,7 +56,7 @@ KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
 export function KanbanLayoutLoader({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) {
   return (
-    <ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
+    <ContentWrapper className="flex-row gap-5 overflow-x-auto py-1.5">
       {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
         <KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
       ))}
diff --git a/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
index addfd582fe3..a6828910788 100644
--- a/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -23,21 +23,21 @@ export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
   return (
     <Row
       ref={ref}
-      className={cn("flex items-center justify-between h-11 py-3", {
+      className={cn("flex h-11 items-center justify-between py-3", {
         "bg-surface-1": renderForPlaceHolder,
         "border-t border-subtle": !renderForPlaceHolder,
       })}
     >
       <div className="flex items-center gap-3">
         <span
-          className={cn("h-5 w-10 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
+          className={cn("h-5 w-10 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
             "animate-pulse": shouldAnimate,
             "bg-surface-2": renderForPlaceHolder,
           })}
         />
         <span
           className={cn(
-            `h-5 w-${getRandomLength(["32", "52", "72"])} bg-[var(--illustration-fill-tertiary)] rounded-sm`,
+            `h-5 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-[var(--illustration-fill-tertiary)]`,
             {
               "animate-pulse": shouldAnimate,
               "bg-surface-2": renderForPlaceHolder,
@@ -51,14 +51,14 @@ export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
             {getRandomInt(1, 2) % 2 === 0 ? (
               <span
                 key={index}
-                className={cn("h-5 w-5 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
+                className={cn("h-5 w-5 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
                   "animate-pulse": shouldAnimate,
                   "bg-surface-2": renderForPlaceHolder,
                 })}
               />
             ) : (
               <span
-                className={cn("h-5 w-16 bg-[var(--illustration-fill-tertiary)] rounded-sm", {
+                className={cn("h-5 w-16 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
                   "animate-pulse": shouldAnimate,
                   "bg-surface-2": renderForPlaceHolder,
                 })}
@@ -77,9 +77,9 @@ function ListSection({ itemCount }: { itemCount: number }) {
   return (
     <div className="flex flex-shrink-0 flex-col">
       <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle bg-surface-2 py-1">
-        <div className="flex items-center gap-2 py-1.5 w-full">
-          <span className="h-6 w-6 bg-layer-1 rounded-sm animate-pulse" />
-          <span className="h-6 w-24 bg-layer-1 rounded-sm animate-pulse" />
+        <div className="flex w-full items-center gap-2 py-1.5">
+          <span className="h-6 w-6 animate-pulse rounded-sm bg-layer-1" />
+          <span className="h-6 w-24 animate-pulse rounded-sm bg-layer-1" />
         </div>
       </Row>
       <div className="relative h-full w-full">
diff --git a/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
index 8d1a864ba9a..34b4e6dbad5 100644
--- a/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
@@ -7,14 +7,14 @@
 import { range } from "lodash-es";
 export function MembersLayoutLoader() {
   return (
-    <div className="flex gap-5 py-1.5 overflow-x-auto">
+    <div className="flex gap-5 overflow-x-auto py-1.5">
       {range(5).map((columnIndex) => (
         <div key={columnIndex} className="flex flex-col gap-3">
-          <div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
-            <span className="h-6 w-24 bg-layer-1 rounded-sm animate-pulse" />
+          <div className={`flex h-9 items-center justify-between ${columnIndex === 0 ? "w-80" : "w-36"}`}>
+            <span className="h-6 w-24 animate-pulse rounded-sm bg-layer-1" />
           </div>
           {range(2).map((cardIndex) => (
-            <span className="h-8 w-full bg-layer-1 rounded-sm animate-pulse" key={cardIndex} />
+            <span className="h-8 w-full animate-pulse rounded-sm bg-layer-1" key={cardIndex} />
           ))}
         </div>
       ))}
diff --git a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
index 5d4ec7ed78c..41b09d13de2 100644
--- a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
@@ -11,12 +11,12 @@ import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export function InboxLayoutLoader() {
   return (
-    <div className="relative w-full h-full flex overflow-hidden">
-      <div className="flex-shrink-0 w-2/6 h-full border-r border-strong">
+    <div className="relative flex h-full w-full overflow-hidden">
+      <div className="h-full w-2/6 flex-shrink-0 border-r border-strong">
         <InboxSidebarLoader />
       </div>
       <div className="w-4/6">
-        <Loader className="flex flex-col h-full gap-5 p-5">
+        <Loader className="flex h-full flex-col gap-5 p-5">
           <div className="space-y-2">
             <Loader.Item height="30px" width="40%" />
             <Loader.Item height="15px" width="60%" />
diff --git a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
index 8734094c4e6..a4759af8386 100644
--- a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
@@ -11,16 +11,16 @@ export function InboxSidebarLoader() {
   return (
     <div className="flex flex-col">
       {range(6).map((index) => (
-        <div key={index} className="flex flex-col gap-2.5 h-[105px] space-y-3 border-b border-subtle p-4">
+        <div key={index} className="flex h-[105px] flex-col gap-2.5 space-y-3 border-b border-subtle p-4">
           <div className="flex flex-col gap-2">
-            <span className="h-5 w-16 bg-layer-1 rounded-sm" />
-            <span className="h-5 w-36 bg-layer-1 rounded-sm" />
+            <span className="h-5 w-16 rounded-sm bg-layer-1" />
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
           </div>
           <div className="flex items-center gap-2">
-            <span className="h-4 w-20 bg-layer-1 rounded-sm" />
-            <span className="h-2 w-2 bg-layer-1 rounded-full" />
-            <span className="h-4 w-16 bg-layer-1 rounded-sm" />
-            <span className="h-4 w-16 bg-layer-1 rounded-sm" />
+            <span className="h-4 w-20 rounded-sm bg-layer-1" />
+            <span className="h-2 w-2 rounded-full bg-layer-1" />
+            <span className="h-4 w-16 rounded-sm bg-layer-1" />
+            <span className="h-4 w-16 rounded-sm bg-layer-1" />
           </div>
         </div>
       ))}
diff --git a/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
index 7ba2721c899..e4a4d6839b1 100644
--- a/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -11,16 +11,16 @@ import { getRandomLength } from "../utils";
 export function SpreadsheetIssueRowLoader(props: { columnCount: number }) {
   return (
     <tr className="border-b border-subtle bg-surface-1">
-      <td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex items-center border-r-[0.5px] border-subtle bg-surface-1">
+      <td className="sticky left-0 z-[10] flex h-11 min-w-[28rem] items-center border-r-[0.5px] border-subtle bg-surface-1">
         <Row className="flex items-center gap-3">
-          <span className="h-5 w-10 bg-layer-1 rounded-sm animate-pulse" />
-          <span className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm animate-pulse`} />
+          <span className="h-5 w-10 animate-pulse rounded-sm bg-layer-1" />
+          <span className={`h-5 w-${getRandomLength(["32", "52", "72"])} animate-pulse rounded-sm bg-layer-1`} />
         </Row>
       </td>
       {range(props.columnCount).map((colIndex) => (
-        <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-subtle ">
+        <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-subtle">
           <div className="flex items-center justify-center gap-3 px-3">
-            <span className="h-5 w-20 bg-layer-1 rounded-sm animate-pulse" />
+            <span className="h-5 w-20 animate-pulse rounded-sm bg-layer-1" />
           </div>
         </td>
       ))}
@@ -30,13 +30,13 @@ export function SpreadsheetIssueRowLoader(props: { columnCount: number }) {
 
 export function SpreadsheetLayoutLoader() {
   return (
-    <div className="horizontal-scroll-enable h-full w-full overflow-y-auto ">
+    <div className="horizontal-scroll-enable h-full w-full overflow-y-auto">
       <table>
         <thead>
           <tr>
-            <th className="h-11 min-w-[28rem] bg-surface-2 border-r border-subtle animate-pulse" />
+            <th className="h-11 min-w-[28rem] animate-pulse border-r border-subtle bg-surface-2" />
             {range(10).map((index) => (
-              <th key={index} className="h-11 w-full min-w-[8rem] bg-surface-2 border-r border-subtle animate-pulse" />
+              <th key={index} className="h-11 w-full min-w-[8rem] animate-pulse border-r border-subtle bg-surface-2" />
             ))}
           </tr>
         </thead>
diff --git a/apps/web/core/components/ui/loader/notification-loader.tsx b/apps/web/core/components/ui/loader/notification-loader.tsx
index e33e944fae4..9ebcaf73088 100644
--- a/apps/web/core/components/ui/loader/notification-loader.tsx
+++ b/apps/web/core/components/ui/loader/notification-loader.tsx
@@ -8,15 +8,15 @@ import { range } from "lodash-es";
 
 export function NotificationsLoader() {
   return (
-    <div className="divide-y divide-subtle animate-pulse overflow-hidden">
+    <div className="animate-pulse divide-y divide-subtle overflow-hidden">
       {range(3).map((i) => (
         <div key={i} className="flex w-full items-center gap-4 p-3">
-          <span className="min-h-12 min-w-12 bg-layer-1 rounded-full" />
-          <div className="flex flex-col gap-2.5 w-full">
-            <span className="h-5 w-36 bg-layer-1 rounded-sm" />
-            <div className="flex items-center justify-between gap-2 w-full">
-              <span className="h-5 w-28 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+          <span className="min-h-12 min-w-12 rounded-full bg-layer-1" />
+          <div className="flex w-full flex-col gap-2.5">
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="h-5 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/ui/loader/pages-loader.tsx b/apps/web/core/components/ui/loader/pages-loader.tsx
index fc9f52089ba..8cfbf68a5fd 100644
--- a/apps/web/core/components/ui/loader/pages-loader.tsx
+++ b/apps/web/core/components/ui/loader/pages-loader.tsx
@@ -14,21 +14,21 @@ export function PagesLoader() {
       </div>
       <div className="flex items-center gap-3">
         {range(5).map((i) => (
-          <span key={i} className="h-8 w-20 bg-layer-1 rounded-full" />
+          <span key={i} className="h-8 w-20 rounded-full bg-layer-1" />
         ))}
       </div>
       <div className="divide-y divide-subtle-1">
         {range(5).map((i) => (
-          <div key={i} className="h-12 w-full flex items-center justify-between px-3">
+          <div key={i} className="flex h-12 w-full items-center justify-between px-3">
             <div className="flex items-center gap-1.5">
-              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
             </div>
             <div className="flex items-center gap-1.5">
-              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
             </div>
           </div>
         ))}
diff --git a/apps/web/core/components/ui/loader/projects-loader.tsx b/apps/web/core/components/ui/loader/projects-loader.tsx
index 838ab2cab19..4f6b266bf1b 100644
--- a/apps/web/core/components/ui/loader/projects-loader.tsx
+++ b/apps/web/core/components/ui/loader/projects-loader.tsx
@@ -8,32 +8,32 @@ import { range } from "lodash-es";
 
 export function ProjectsLoader() {
   return (
-    <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
+    <div className="h-full w-full animate-pulse overflow-y-auto p-8">
       <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
         {range(3).map((i) => (
           <div key={i} className="flex cursor-pointer flex-col rounded-sm border border-subtle bg-surface-1">
-            <div className="relative min-h-[118px] w-full rounded-t border-b border-subtle ">
+            <div className="relative min-h-[118px] w-full rounded-t border-b border-subtle">
               <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/20 to-transparent">
                 <div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
                   <div className="flex flex-grow items-center gap-2.5 truncate">
-                    <span className="min-h-9 min-w-9 bg-layer-1 rounded-sm" />
+                    <span className="min-h-9 min-w-9 rounded-sm bg-layer-1" />
                     <div className="flex w-full flex-col justify-between gap-0.5 truncate">
-                      <span className="h-4 w-28 bg-layer-1 rounded-sm" />
-                      <span className="h-4 w-16 bg-layer-1 rounded-sm" />
+                      <span className="h-4 w-28 rounded-sm bg-layer-1" />
+                      <span className="h-4 w-16 rounded-sm bg-layer-1" />
                     </div>
                   </div>
                   <div className="flex h-full flex-shrink-0 items-center gap-2">
-                    <span className="h-6 w-6 bg-layer-1 rounded-sm" />
-                    <span className="h-6 w-6 bg-layer-1 rounded-sm" />
+                    <span className="h-6 w-6 rounded-sm bg-layer-1" />
+                    <span className="h-6 w-6 rounded-sm bg-layer-1" />
                   </div>
                 </div>
               </div>
             </div>
             <div className="flex h-[104px] w-full flex-col justify-between rounded-b-sm p-4">
-              <span className="h-4 w-36 bg-layer-1 rounded-sm" />
+              <span className="h-4 w-36 rounded-sm bg-layer-1" />
               <div className="item-center flex justify-between">
-                <span className="h-5 w-20 bg-layer-1 rounded-sm" />
-                <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+                <span className="h-5 w-20 rounded-sm bg-layer-1" />
+                <span className="h-5 w-5 rounded-sm bg-layer-1" />
               </div>
             </div>
           </div>
diff --git a/apps/web/core/components/ui/loader/settings/activity.tsx b/apps/web/core/components/ui/loader/settings/activity.tsx
index 5a3ebb7bc62..1cf5b5bc798 100644
--- a/apps/web/core/components/ui/loader/settings/activity.tsx
+++ b/apps/web/core/components/ui/loader/settings/activity.tsx
@@ -9,11 +9,11 @@ import { getRandomLength } from "../utils";
 
 export function ActivitySettingsLoader() {
   return (
-    <div className="flex flex-col gap-3 animate-pulse">
+    <div className="flex animate-pulse flex-col gap-3">
       {range(10).map((i) => (
-        <div key={i} className="relative flex items-center gap-2 h-12 border-b border-subtle">
-          <span className="h-6 w-6 bg-layer-1 rounded-sm" />
-          <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-layer-1 rounded-sm`} />
+        <div key={i} className="relative flex h-12 items-center gap-2 border-b border-subtle">
+          <span className="h-6 w-6 rounded-sm bg-layer-1" />
+          <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} rounded-sm bg-layer-1`} />
         </div>
       ))}
     </div>
diff --git a/apps/web/core/components/ui/loader/settings/api-token.tsx b/apps/web/core/components/ui/loader/settings/api-token.tsx
index d4295055598..f799ae9ead4 100644
--- a/apps/web/core/components/ui/loader/settings/api-token.tsx
+++ b/apps/web/core/components/ui/loader/settings/api-token.tsx
@@ -12,16 +12,16 @@ export function APITokenSettingsLoader() {
     <section className="w-full overflow-y-auto">
       <div className="mb-2 flex items-center justify-between border-b border-subtle pb-3.5">
         <h3 className="text-18 font-medium">{t("workspace_settings.settings.api_tokens.title")}</h3>
-        <span className="h-8 w-28 bg-layer-1 rounded-sm" />
+        <span className="h-8 w-28 rounded-sm bg-layer-1" />
       </div>
       <div className="divide-y-[0.5px] divide-subtle-1">
         {range(2).map((i) => (
           <div key={i} className="flex flex-col gap-2 py-3">
             <div className="flex items-center gap-2">
-              <span className="h-5 w-28 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
             </div>
-            <span className="h-5 w-36 bg-layer-1 rounded-sm" />
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
           </div>
         ))}
       </div>
diff --git a/apps/web/core/components/ui/loader/settings/email.tsx b/apps/web/core/components/ui/loader/settings/email.tsx
index 4197eb29b5f..bbf5cdec8ed 100644
--- a/apps/web/core/components/ui/loader/settings/email.tsx
+++ b/apps/web/core/components/ui/loader/settings/email.tsx
@@ -8,28 +8,28 @@ import { range } from "lodash-es";
 
 export function EmailSettingsLoader() {
   return (
-    <div className="mx-auto mt-8 h-full w-full overflow-y-auto px-6 lg:px-20 pb- animate-pulse">
-      <div className="flex flex-col gap-2 pt-6 mb-2 pb-6 border-b border-subtle">
-        <span className="h-7 w-40 bg-layer-1 rounded-sm" />
-        <span className="h-5 w-96 bg-layer-1 rounded-sm" />
+    <div className="pb- mx-auto mt-8 h-full w-full animate-pulse overflow-y-auto px-6 lg:px-20">
+      <div className="mb-2 flex flex-col gap-2 border-b border-subtle pt-6 pb-6">
+        <span className="h-7 w-40 rounded-sm bg-layer-1" />
+        <span className="h-5 w-96 rounded-sm bg-layer-1" />
       </div>
       <div className="flex flex-col gap-2">
         <div className="flex items-center py-3">
-          <span className="h-7 w-32 bg-layer-1 rounded-sm" />
+          <span className="h-7 w-32 rounded-sm bg-layer-1" />
         </div>
         {range(4).map((i) => (
           <div key={i} className="flex items-center justify-between">
             <div className="flex flex-col gap-2 py-3">
-              <span className="h-6 w-28 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-96 bg-layer-1 rounded-sm" />
+              <span className="h-6 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-96 rounded-sm bg-layer-1" />
             </div>
             <div className="flex items-center">
-              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
             </div>
           </div>
         ))}
         <div className="flex items-center py-12">
-          <span className="h-8 w-32 bg-layer-1 rounded-sm" />
+          <span className="h-8 w-32 rounded-sm bg-layer-1" />
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/ui/loader/settings/import-and-export.tsx b/apps/web/core/components/ui/loader/settings/import-and-export.tsx
index 1d948002850..286b2f45fbb 100644
--- a/apps/web/core/components/ui/loader/settings/import-and-export.tsx
+++ b/apps/web/core/components/ui/loader/settings/import-and-export.tsx
@@ -8,17 +8,17 @@ import { range } from "lodash-es";
 
 export function ImportExportSettingsLoader() {
   return (
-    <div className="divide-y-[0.5px] divide-subtle-1 animate-pulse">
+    <div className="animate-pulse divide-y-[0.5px] divide-subtle-1">
       {range(2).map((i) => (
         <div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
           <div className="flex flex-col gap-1.5">
             <div className="flex items-center gap-2">
-              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
             </div>
             <div className="flex items-center gap-2">
-              <span className="h-4 w-28 bg-layer-1 rounded-sm" />
-              <span className="h-4 w-28 bg-layer-1 rounded-sm" />
+              <span className="h-4 w-28 rounded-sm bg-layer-1" />
+              <span className="h-4 w-28 rounded-sm bg-layer-1" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/ui/loader/settings/integration.tsx b/apps/web/core/components/ui/loader/settings/integration.tsx
index e8a79c6acae..8afe873fddd 100644
--- a/apps/web/core/components/ui/loader/settings/integration.tsx
+++ b/apps/web/core/components/ui/loader/settings/integration.tsx
@@ -8,17 +8,17 @@ import { range } from "lodash-es";
 
 export function IntegrationsSettingsLoader() {
   return (
-    <div className="divide-y-[0.5px] divide-subtle animate-pulse">
+    <div className="animate-pulse divide-y-[0.5px] divide-subtle">
       {range(2).map((i) => (
         <div key={i} className="flex items-center justify-between gap-2 border-b border-subtle bg-surface-1 px-4 py-6">
           <div className="flex items-start gap-4">
-            <span className="h-10 w-10 bg-layer-1 rounded-full" />
+            <span className="h-10 w-10 rounded-full bg-layer-1" />
             <div className="flex flex-col gap-1">
-              <span className="h-5 w-20 bg-layer-1 rounded-sm" />
-              <span className="h-4 w-60 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
+              <span className="h-4 w-60 rounded-sm bg-layer-1" />
             </div>
           </div>
-          <span className="h-8 w-16 bg-layer-1 rounded-sm" />
+          <span className="h-8 w-16 rounded-sm bg-layer-1" />
         </div>
       ))}
     </div>
diff --git a/apps/web/core/components/ui/loader/settings/members.tsx b/apps/web/core/components/ui/loader/settings/members.tsx
index 8ec47b2b7d4..d84831fae54 100644
--- a/apps/web/core/components/ui/loader/settings/members.tsx
+++ b/apps/web/core/components/ui/loader/settings/members.tsx
@@ -11,13 +11,13 @@ export function MembersSettingsLoader() {
     <div className="divide-y-[0.5px] divide-subtle">
       {range(3).map((i) => (
         <div key={i} className="group grid grid-cols-5 items-center justify-evenly px-3 py-4">
-          <div className="flex col-span-2 items-center gap-x-2.5">
-            <span className="size-6 bg-layer-1 rounded-full" />
-            <span className="h-5 w-24 bg-layer-1 rounded-sm" />
+          <div className="col-span-2 flex items-center gap-x-2.5">
+            <span className="size-6 rounded-full bg-layer-1" />
+            <span className="h-5 w-24 rounded-sm bg-layer-1" />
           </div>
-          <span className="h-5 w-24 bg-layer-1 rounded-sm" />
-          <span className="h-5 w-20 bg-layer-1 rounded-sm" />
-          <span className="h-5 w-28 bg-layer-1 rounded-sm" />
+          <span className="h-5 w-24 rounded-sm bg-layer-1" />
+          <span className="h-5 w-20 rounded-sm bg-layer-1" />
+          <span className="h-5 w-28 rounded-sm bg-layer-1" />
         </div>
       ))}
     </div>
diff --git a/apps/web/core/components/ui/loader/settings/web-hook.tsx b/apps/web/core/components/ui/loader/settings/web-hook.tsx
index b12e6d74522..3acb52b2495 100644
--- a/apps/web/core/components/ui/loader/settings/web-hook.tsx
+++ b/apps/web/core/components/ui/loader/settings/web-hook.tsx
@@ -10,14 +10,14 @@ export function WebhookSettingsLoader() {
       <div className="flex h-full w-full flex-col">
         <div className="flex items-center justify-between gap-4 border-b border-subtle pb-3.5">
           <div className="text-18 font-medium">Webhooks</div>
-          <span className="h-8 w-28 bg-layer-1 rounded-sm" />
+          <span className="h-8 w-28 rounded-sm bg-layer-1" />
         </div>
         <div className="h-full w-full overflow-y-auto">
           <div className="border-b border-subtle">
             <div>
               <span className="flex items-center justify-between gap-4 px-3.5 py-[18px]">
-                <span className="h-5 w-36 bg-layer-1 rounded-sm" />
-                <span className="h-6 w-12 bg-layer-1 rounded-sm" />
+                <span className="h-5 w-36 rounded-sm bg-layer-1" />
+                <span className="h-6 w-12 rounded-sm bg-layer-1" />
               </span>
             </div>
           </div>
diff --git a/apps/web/core/components/ui/loader/view-list-loader.tsx b/apps/web/core/components/ui/loader/view-list-loader.tsx
index 2589871f250..073789d4e37 100644
--- a/apps/web/core/components/ui/loader/view-list-loader.tsx
+++ b/apps/web/core/components/ui/loader/view-list-loader.tsx
@@ -8,17 +8,17 @@ import { range } from "lodash-es";
 
 export function ViewListLoader() {
   return (
-    <div className="flex h-full w-full flex-col animate-pulse">
+    <div className="flex h-full w-full animate-pulse flex-col">
       {range(8).map((i) => (
         <div key={i} className="group border-b border-subtle">
           <div className="relative flex w-full items-center justify-between rounded-sm p-4">
             <div className="flex items-center gap-4">
-              <span className="min-h-10 min-w-10 bg-layer-1 rounded-sm" />
-              <span className="h-6 w-28 bg-layer-1 rounded-sm" />
+              <span className="min-h-10 min-w-10 rounded-sm bg-layer-1" />
+              <span className="h-6 w-28 rounded-sm bg-layer-1" />
             </div>
             <div className="flex items-center gap-2">
-              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
-              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/ui/profile-empty-state.tsx b/apps/web/core/components/ui/profile-empty-state.tsx
index 29d5fcf23e3..09f2547e1b6 100644
--- a/apps/web/core/components/ui/profile-empty-state.tsx
+++ b/apps/web/core/components/ui/profile-empty-state.tsx
@@ -14,12 +14,12 @@ type Props = {
 
 export function ProfileEmptyState({ title, description, image }: Props) {
   return (
-    <div className={`mx-auto grid h-full w-full place-items-center p-8 `}>
+    <div className={`mx-auto grid h-full w-full place-items-center p-8`}>
       <div className="flex w-full flex-col items-center text-center">
         <div className="flex h-14 w-14 items-center justify-center rounded-full bg-surface-2">
-          <img src={image} width="32" height="32" className="w-full h-full object-cover" alt={title} />
+          <img src={image} width="32" height="32" className="h-full w-full object-cover" alt={title} />
         </div>
-        <h6 className="mb-3 mt-3.5 text-14 font-semibold">{title}</h6>
+        <h6 className="mt-3.5 mb-3 text-14 font-semibold">{title}</h6>
         {description && <p className="text-13 text-tertiary">{description}</p>}
       </div>
     </div>
diff --git a/apps/web/core/components/user/user-greetings.tsx b/apps/web/core/components/user/user-greetings.tsx
index 200f3b6604f..ff00a23ca93 100644
--- a/apps/web/core/components/user/user-greetings.tsx
+++ b/apps/web/core/components/user/user-greetings.tsx
@@ -46,8 +46,8 @@ export function UserGreetingsView(props: IUserGreetingsView) {
   const greeting = parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
 
   return (
-    <div className="flex flex-col items-center my-6">
-      <h2 className="text-20 font-semibold text-center">
+    <div className="my-6 flex flex-col items-center">
+      <h2 className="text-center text-20 font-semibold">
         {t("good")} {t(greeting)}, {user?.first_name} {user?.last_name}
       </h2>
       <h5 className="flex items-center gap-2 font-medium text-placeholder">
diff --git a/apps/web/core/components/views/applied-filters/access.tsx b/apps/web/core/components/views/applied-filters/access.tsx
index 7d71252395d..36f68435f96 100644
--- a/apps/web/core/components/views/applied-filters/access.tsx
+++ b/apps/web/core/components/views/applied-filters/access.tsx
@@ -36,7 +36,7 @@ export const AppliedAccessFilters = observer(function AppliedAccessFilters(props
         if (!label) return null;
 
         return (
-          <div key={access} className="flex items-center gap-1 rounded-sm bg-layer-1 py-1 px-1.5 text-11">
+          <div key={access} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
             <span className="normal-case">{t(label)}</span>
             {editable && (
               <button
diff --git a/apps/web/core/components/views/filters/filter-selection.tsx b/apps/web/core/components/views/filters/filter-selection.tsx
index 67392ae4e75..94c6ed3a664 100644
--- a/apps/web/core/components/views/filters/filter-selection.tsx
+++ b/apps/web/core/components/views/filters/filter-selection.tsx
@@ -77,7 +77,7 @@ export const ViewFiltersSelection = observer(function ViewFiltersSelection(props
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         <div className="py-2">
           <FilterOption
             isChecked={!!filters.filters?.favorites}
diff --git a/apps/web/core/components/views/filters/order-by.tsx b/apps/web/core/components/views/filters/order-by.tsx
index d06689479a3..bb27650f69f 100644
--- a/apps/web/core/components/views/filters/order-by.tsx
+++ b/apps/web/core/components/views/filters/order-by.tsx
@@ -32,7 +32,7 @@ export function ViewOrderByDropdown(props: Props) {
     : getButtonStyling("secondary", "lg");
 
   const icon = (
-    <>{!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}</>
+    <>{!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}</>
   );
   return (
     <CustomMenu
@@ -43,7 +43,7 @@ export function ViewOrderByDropdown(props: Props) {
         </span>
       }
       placement="bottom-end"
-      className="w-full flex justify-center"
+      className="flex w-full justify-center"
       maxHeight="lg"
       closeOnSelect
     >
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index 048d274e851..c24731790f8 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -110,12 +110,12 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
       <div className="space-y-5 p-5">
         <h3 className="text-18 font-medium text-secondary">{data ? t("view.update.label") : t("view.create.label")}</h3>
         <div className="space-y-3">
-          <div className="flex items-start gap-2 w-full">
+          <div className="flex w-full items-start gap-2">
             <EmojiPicker
               iconType="lucide"
               isOpen={isOpen}
               handleToggle={(val: boolean) => setIsOpen(val)}
-              className="flex items-center justify-center flex-shrink0"
+              className="flex-shrink0 flex items-center justify-center"
               buttonClassName="flex items-center justify-center"
               label={
                 <span className="grid h-9 w-9 place-items-center rounded-md bg-surface-2">
@@ -151,7 +151,7 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
                   : EmojiIconPickerTypes.ICON
               }
             />
-            <div className="space-y-1 flew-grow w-full">
+            <div className="flew-grow w-full space-y-1">
               <Controller
                 control={control}
                 name="name"
@@ -189,7 +189,7 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
                   id="description"
                   name="description"
                   placeholder={t("common.description")}
-                  className="w-full text-14 resize-none min-h-24"
+                  className="min-h-24 w-full resize-none text-14"
                   hasError={Boolean(errors?.description)}
                   value={value}
                   onChange={onChange}
@@ -279,7 +279,7 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
           {t("common.cancel")}
         </Button>
diff --git a/apps/web/core/components/views/quick-actions.tsx b/apps/web/core/components/views/quick-actions.tsx
index 07b5c59f930..ea85af92fd2 100644
--- a/apps/web/core/components/views/quick-actions.tsx
+++ b/apps/web/core/components/views/quick-actions.tsx
@@ -129,7 +129,7 @@ export const ViewQuickActions = observer(function ViewQuickActions(props: Props)
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/views/view-list-header.tsx b/apps/web/core/components/views/view-list-header.tsx
index 723558e9a3f..2c25850f0ba 100644
--- a/apps/web/core/components/views/view-list-header.tsx
+++ b/apps/web/core/components/views/view-list-header.tsx
@@ -54,7 +54,7 @@ export const ViewListHeader = observer(function ViewListHeader() {
   }, [filters?.searchQuery]);
 
   return (
-    <div className="h-full flex items-center gap-2">
+    <div className="flex h-full items-center gap-2">
       <div className="flex items-center">
         {!isSearchOpen && (
           <IconButton
@@ -70,9 +70,9 @@ export const ViewListHeader = observer(function ViewListHeader() {
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
             {
-              "w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
             }
           )}
         >
@@ -99,7 +99,7 @@ export const ViewListHeader = observer(function ViewListHeader() {
           )}
         </div>
       </div>
-      <div className="hidden md:flex items-center gap-2">
+      <div className="hidden items-center gap-2 md:flex">
         <ViewOrderByDropdown
           sortBy={filters.sortBy}
           sortKey={filters.sortKey}
diff --git a/apps/web/core/components/views/view-list-item-action.tsx b/apps/web/core/components/views/view-list-item-action.tsx
index 5c99869f849..3e917a01544 100644
--- a/apps/web/core/components/views/view-list-item-action.tsx
+++ b/apps/web/core/components/views/view-list-item-action.tsx
@@ -102,10 +102,10 @@ export const ViewListItemAction = observer(function ViewListItemAction(props: Pr
 
       {view?.anchor && publishLink ? (
         <div
-          className="px-3 py-1.5 bg-success-subtle text-success-primary rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
+          className="flex cursor-pointer items-center gap-1.5 rounded-sm bg-success-subtle px-3 py-1.5 text-11 font-medium text-success-primary"
           onClick={() => setPublishModalOpen(true)}
         >
-          <span className="flex-shrink-0 rounded-full size-1.5 bg-success-primary" />
+          <span className="size-1.5 flex-shrink-0 rounded-full bg-success-primary" />
           Live
         </div>
       ) : (
diff --git a/apps/web/core/components/web-hooks/empty-state.tsx b/apps/web/core/components/web-hooks/empty-state.tsx
index fed779771d8..e79debd0690 100644
--- a/apps/web/core/components/web-hooks/empty-state.tsx
+++ b/apps/web/core/components/web-hooks/empty-state.tsx
@@ -21,8 +21,8 @@ export function WebhooksEmptyState(props: Props) {
       className={`mx-auto flex w-full items-center justify-center rounded-xs border border-subtle bg-surface-2 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
-        <img src={EmptyWebhook} className="w-52 sm:w-60 object-cover" alt="empty" />
-        <h6 className="mb-3 mt-6 text-18 font-semibold sm:mt-8">No webhooks</h6>
+        <img src={EmptyWebhook} className="w-52 object-cover sm:w-60" alt="empty" />
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">No webhooks</h6>
         <p className="mb-7 text-tertiary sm:mb-8">Create webhooks to receive real-time updates and automate actions</p>
         <Button className="flex items-center gap-1.5" onClick={onClick}>
           Add webhook
diff --git a/apps/web/core/components/web-hooks/form/form.tsx b/apps/web/core/components/web-hooks/form/form.tsx
index 009c42b3c82..61946a3e917 100644
--- a/apps/web/core/components/web-hooks/form/form.tsx
+++ b/apps/web/core/components/web-hooks/form/form.tsx
@@ -68,7 +68,7 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
 
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
-      <div className="space-y-5 ">
+      <div className="space-y-5">
         <div className="text-18 font-medium text-secondary">
           {data
             ? t("workspace_settings.settings.webhooks.modal.details")
@@ -96,7 +96,7 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
         </div>
       </div>
       {data ? (
-        <div className="pt-0 space-y-5">
+        <div className="space-y-5 pt-0">
           <WebhookSecretKey data={data} />
           <Button
             size="lg"
@@ -108,7 +108,7 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
           </Button>
         </div>
       ) : (
-        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
           <Button variant="secondary" size="lg" onClick={handleClose}>
             {t("cancel")}
           </Button>
diff --git a/apps/web/core/components/web-hooks/form/individual-event-options.tsx b/apps/web/core/components/web-hooks/form/individual-event-options.tsx
index 3df6a5bc31b..d4c36706165 100644
--- a/apps/web/core/components/web-hooks/form/individual-event-options.tsx
+++ b/apps/web/core/components/web-hooks/form/individual-event-options.tsx
@@ -61,7 +61,7 @@ export function WebhookIndividualEventOptions({ control }: Props) {
                   {option.label}
                 </label>
               </div>
-              <p className="ml-6 mt-0.5 text-11 text-tertiary">{option.description}</p>
+              <p className="mt-0.5 ml-6 text-11 text-tertiary">{option.description}</p>
             </div>
           )}
         />
diff --git a/apps/web/core/components/web-hooks/form/secret-key.tsx b/apps/web/core/components/web-hooks/form/secret-key.tsx
index 32437bb6f67..50ec98ea479 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -107,15 +107,15 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
             <div className="text-13 font-medium">{t("workspace_settings.settings.webhooks.secret_key.title")}</div>
           )}
           <div className="text-11 text-placeholder">{t("workspace_settings.settings.webhooks.secret_key.message")}</div>
-          <div className="flex flex-col md:flex-row md:items-center gap-4">
-            <div className="flex flex-grow max-w-lg items-center justify-between self-stretch rounded-sm border border-subtle px-2 h-8">
-              <div className="select-none overflow-hidden font-medium">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center">
+            <div className="flex h-8 max-w-lg flex-grow items-center justify-between self-stretch rounded-sm border border-subtle px-2">
+              <div className="overflow-hidden font-medium select-none">
                 {shouldShowKey ? (
                   <p className="text-11">{webhookSecretKey}</p>
                 ) : (
-                  <div className="flex items-center gap-1.5 overflow-hidden mr-2">
+                  <div className="mr-2 flex items-center gap-1.5 overflow-hidden">
                     {range(30).map((index) => (
-                      <div key={index} className="h-1 w-1 rounded-full bg-(--text-color-disabled) flex-shrink-0" />
+                      <div key={index} className="h-1 w-1 flex-shrink-0 rounded-full bg-(--text-color-disabled)" />
                     ))}
                   </div>
                 )}
diff --git a/apps/web/core/components/web-hooks/generated-hook-details.tsx b/apps/web/core/components/web-hooks/generated-hook-details.tsx
index 74ea4016600..03755264a46 100644
--- a/apps/web/core/components/web-hooks/generated-hook-details.tsx
+++ b/apps/web/core/components/web-hooks/generated-hook-details.tsx
@@ -30,7 +30,7 @@ export function GeneratedHookDetails(props: Props) {
         </div>
         <WebhookSecretKey data={webhookDetails} />
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <Button variant="secondary" size="lg" onClick={handleClose}>
           Close
         </Button>
diff --git a/apps/web/core/components/web-hooks/webhooks-list-item.tsx b/apps/web/core/components/web-hooks/webhooks-list-item.tsx
index 84e00a946e1..444da3c1935 100644
--- a/apps/web/core/components/web-hooks/webhooks-list-item.tsx
+++ b/apps/web/core/components/web-hooks/webhooks-list-item.tsx
@@ -29,12 +29,12 @@ export function WebhooksListItem(props: IWebhookListItem) {
   };
 
   return (
-    <div className="bg-layer-2 border border-subtle px-4 py-3 rounded-lg">
+    <div className="rounded-lg border border-subtle bg-layer-2 px-4 py-3">
       <Link
         href={`/${workspaceSlug}/settings/webhooks/${webhook?.id}`}
         className="flex items-center justify-between gap-4"
       >
-        <h5 className="text-body-sm-medium truncate">{webhook.url}</h5>
+        <h5 className="truncate text-body-sm-medium">{webhook.url}</h5>
         <div className="shrink-0">
           <ToggleSwitch value={webhook.is_active} onChange={handleToggle} />
         </div>
diff --git a/apps/web/core/components/web-hooks/webhooks-list.tsx b/apps/web/core/components/web-hooks/webhooks-list.tsx
index 5e61027340e..f262ef8b2b8 100644
--- a/apps/web/core/components/web-hooks/webhooks-list.tsx
+++ b/apps/web/core/components/web-hooks/webhooks-list.tsx
@@ -15,7 +15,7 @@ export const WebhooksList = observer(function WebhooksList() {
   const { webhooks } = useWebhook();
 
   return (
-    <div className="size-full bg-layer-1 p-3 rounded-lg border border-subtle flex flex-col gap-y-2 overflow-y-auto">
+    <div className="flex size-full flex-col gap-y-2 overflow-y-auto rounded-lg border border-subtle bg-layer-1 p-3">
       {Object.values(webhooks ?? {}).map((webhook) => (
         <WebhooksListItem key={webhook.id} webhook={webhook} />
       ))}
diff --git a/apps/web/core/components/workspace-notifications/root.tsx b/apps/web/core/components/workspace-notifications/root.tsx
index d6878f8e935..8dd077c4dc8 100644
--- a/apps/web/core/components/workspace-notifications/root.tsx
+++ b/apps/web/core/components/workspace-notifications/root.tsx
@@ -84,9 +84,9 @@ export const NotificationsRoot = observer(function NotificationsRoot({ workspace
   );
 
   return (
-    <div className={cn("w-full h-full overflow-hidden ", isWorkItem && "overflow-y-auto")}>
+    <div className={cn("h-full w-full overflow-hidden", isWorkItem && "overflow-y-auto")}>
       {!currentSelectedNotificationId ? (
-        <div className="flex justify-center items-center size-full">
+        <div className="flex size-full items-center justify-center">
           <EmptyStateCompact assetKey="unknown" assetClassName="size-20" />
         </div>
       ) : (
@@ -94,7 +94,7 @@ export const NotificationsRoot = observer(function NotificationsRoot({ workspace
           {is_inbox_issue === true && workspace_slug && project_id && issue_id ? (
             <>
               {projectMemberInfoLoader ? (
-                <div className="w-full h-full flex justify-center items-center">
+                <div className="flex h-full w-full items-center justify-center">
                   <LogoSpinner />
                 </div>
               ) : (
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
index dc84970cd4a..c78bae48ee4 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
@@ -49,11 +49,11 @@ export const AppliedFilters = observer(function AppliedFilters(props: TAppliedFi
           return (
             <Tag
               key={filter.value}
-              className="flex flex-wrap flex-start"
+              className="flex-start flex flex-wrap"
               onClick={() => handleFilterTypeChange(filter?.value, !isSelected)}
             >
               <div className="whitespace-nowrap text-secondary">{t(filter.i18n_label)}</div>
-              <div className="w-4 h-4 flex justify-center items-center transition-all rounded-xs text-secondary hover:text-primary">
+              <div className="flex h-4 w-4 items-center justify-center rounded-xs text-secondary transition-all hover:text-primary">
                 <CloseIcon className="h-3 w-3" />
               </div>
             </Tag>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
index 7c81ac4b602..1f6a87f08e4 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
@@ -34,11 +34,11 @@ export const NotificationFilterOptionItem = observer(function NotificationFilter
   return (
     <div
       key={value}
-      className="flex items-center gap-2 cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs"
+      className="flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 transition-all hover:bg-layer-1"
       onClick={() => handleFilterTypeChange(value, !isSelected)}
     >
       <div
-        className={cn("flex-shrink-0 w-3 h-3 flex justify-center items-center rounded-xs transition-all", {
+        className={cn("flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-xs transition-all", {
           "bg-accent-primary text-on-color": isSelected,
           "bg-surface-2": !isSelected,
         })}
@@ -46,7 +46,7 @@ export const NotificationFilterOptionItem = observer(function NotificationFilter
         {isSelected && <CheckIcon className="h-2.5 w-2.5" />}
       </div>
       <div
-        className={cn("whitespace-nowrap text-body-xs-medium", {
+        className={cn("text-body-xs-medium whitespace-nowrap", {
           "text-primary": isSelected,
           "text-secondary": !isSelected,
         })}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
index 6ea43dcbfba..cf382536d7c 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
@@ -16,12 +16,12 @@ export const NotificationMenuOptionItem = observer(function NotificationMenuOpti
   if (type === "menu-item")
     return (
       <div
-        className="flex items-center gap-2 cursor-pointer mx-2 px-2 p-1 transition-all hover:bg-layer-1 rounded-xs"
+        className="mx-2 flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 transition-all hover:bg-layer-1"
         onClick={() => onClick && onClick()}
       >
         {prependIcon && prependIcon}
         <div
-          className={cn("whitespace-nowrap text-body-xs-medium", {
+          className={cn("text-body-xs-medium whitespace-nowrap", {
             "text-primary": isActive,
             "text-secondary": !isActive,
           })}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
index 02c59aed98c..596e5bde0f9 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
@@ -44,8 +44,8 @@ export const NotificationHeaderMenuOption = observer(function NotificationHeader
       type: "menu-item",
       label: t("notification.options.show_unread"),
       isActive: filters?.read,
-      prependIcon: <CheckCircle className="flex-shrink-0 h-3 w-3" />,
-      appendIcon: filters?.read ? <CheckIcon className="w-3 h-3" /> : undefined,
+      prependIcon: <CheckCircle className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.read ? <CheckIcon className="h-3 w-3" /> : undefined,
       onClick: () => handleFilterChange("read", !filters?.read),
     },
     {
@@ -53,8 +53,8 @@ export const NotificationHeaderMenuOption = observer(function NotificationHeader
       type: "menu-item",
       label: t("notification.options.show_archived"),
       isActive: filters?.archived,
-      prependIcon: <ArchiveIcon className="flex-shrink-0 h-3 w-3" />,
-      appendIcon: filters?.archived ? <CheckIcon className="w-3 h-3" /> : undefined,
+      prependIcon: <ArchiveIcon className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.archived ? <CheckIcon className="h-3 w-3" /> : undefined,
       onClick: () =>
         handleBulkFilterChange({
           archived: !filters?.archived,
@@ -66,8 +66,8 @@ export const NotificationHeaderMenuOption = observer(function NotificationHeader
       type: "menu-item",
       label: t("notification.options.show_snoozed"),
       isActive: filters?.snoozed,
-      prependIcon: <Clock className="flex-shrink-0 h-3 w-3" />,
-      appendIcon: filters?.snoozed ? <CheckIcon className="w-3 h-3" /> : undefined,
+      prependIcon: <Clock className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.snoozed ? <CheckIcon className="h-3 w-3" /> : undefined,
       onClick: () =>
         handleBulkFilterChange({
           snoozed: !filters?.snoozed,
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
index 9a4722a4740..83446a20c57 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
@@ -52,7 +52,7 @@ export const NotificationSidebarHeaderOptions = observer(function NotificationSi
   };
 
   return (
-    <div className="relative flex justify-center items-center gap-2 text-body-xs-medium">
+    <div className="relative flex items-center justify-center gap-2 text-body-xs-medium">
       {/* mark all notifications as read*/}
       <Tooltip tooltipContent={t("notification.options.mark_all_as_read")} isMobile={isMobile} position="bottom">
         <IconButton
diff --git a/apps/web/core/components/workspace-notifications/sidebar/loader.tsx b/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
index a4c39ccac2e..eaf3bf577cf 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
@@ -8,15 +8,15 @@ import { range } from "lodash-es";
 
 export function NotificationsLoader() {
   return (
-    <div className="divide-y divide-subtle animate-pulse overflow-hidden">
+    <div className="animate-pulse divide-y divide-subtle overflow-hidden">
       {range(8).map((i) => (
         <div key={i} className="flex w-full items-center gap-4 p-3">
-          <span className="min-h-12 min-w-12 bg-layer-1 rounded-full" />
-          <div className="flex flex-col gap-2.5 w-full">
-            <span className="h-5 w-36 bg-layer-1 rounded-xs" />
-            <div className="flex items-center justify-between gap-2 w-full">
-              <span className="h-5 w-28 bg-layer-1 rounded-xs" />
-              <span className="h-5 w-16 bg-layer-1 rounded-xs" />
+          <span className="min-h-12 min-w-12 rounded-full bg-layer-1" />
+          <div className="flex w-full flex-col gap-2.5">
+            <span className="h-5 w-36 rounded-xs bg-layer-1" />
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="h-5 w-28 rounded-xs bg-layer-1" />
+              <span className="h-5 w-16 rounded-xs bg-layer-1" />
             </div>
           </div>
         </div>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx
index ae5c7054d2f..0ed63b75dce 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx
@@ -173,7 +173,7 @@ export function NotificationContent({
   };
 
   const renderTriggerName = () => (
-    <span className="text-primary font-medium">
+    <span className="font-medium text-primary">
       {triggeredBy?.is_bot ? triggeredBy.first_name : triggeredBy?.display_name}{" "}
     </span>
   );
@@ -210,9 +210,9 @@ export function NotificationContent({
       {verb !== "deleted" && (
         <>
           {showConnector && <span className="text-tertiary">to </span>}
-          <span className="text-primary font-medium">{renderValue()}</span>
+          <span className="font-medium text-primary">{renderValue()}</span>
           {notificationField === "comment" && renderCommentBox && (
-            <div className="scale-75 origin-left">
+            <div className="origin-left scale-75">
               <LiteTextEditor
                 editable={false}
                 id=""
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
index 08bf6abed1e..859070c3e0c 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
@@ -71,7 +71,7 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
   return (
     <Row
       className={cn(
-        "relative py-4 flex items-center gap-2 border-b border-subtle cursor-pointer transition-all group",
+        "group relative flex cursor-pointer items-center gap-2 border-b border-subtle py-4 transition-all",
         {
           "bg-layer-1/30": currentSelectedNotificationId === notification?.id,
           "bg-accent-primary/5": notification.read_at === null,
@@ -80,25 +80,25 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
       onClick={handleNotificationIssuePeekOverview}
     >
       {notification.read_at === null && (
-        <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-accent-primary absolute top-[50%] left-2" />
+        <div className="absolute top-[50%] left-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-accent-primary" />
       )}
 
-      <div className="relative w-full flex gap-2">
-        <div className="flex-shrink-0 relative flex justify-center items-center w-12 h-12 bg-layer-1 rounded-full">
+      <div className="relative flex w-full gap-2">
+        <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-layer-1">
           {notificationTriggeredBy && (
             <Avatar
               name={notificationTriggeredBy.display_name || notificationTriggeredBy?.first_name}
               src={getFileURL(notificationTriggeredBy.avatar_url)}
               size={42}
               shape="circle"
-              className="text-body-sm-medium bg-layer-1"
+              className="bg-layer-1 text-body-sm-medium"
             />
           )}
         </div>
 
-        <div className="w-full space-y-1 -mt-2">
-          <div className="relative flex items-center gap-3 h-8">
-            <div className="w-full overflow-hidden whitespace-normal break-all truncate line-clamp-1 text-body-xs-medium text-primary">
+        <div className="-mt-2 w-full space-y-1">
+          <div className="relative flex h-8 items-center gap-3">
+            <div className="line-clamp-1 w-full truncate overflow-hidden text-body-xs-medium break-all whitespace-normal text-primary">
               <NotificationContent
                 notification={notification}
                 workspaceId={workspace.id}
@@ -117,7 +117,7 @@ export const NotificationItem = observer(function NotificationItem(props: TNotif
           </div>
 
           <div className="relative flex items-center gap-3 text-caption-sm-regular text-secondary">
-            <div className="w-full overflow-hidden whitespace-normal break-words truncate line-clamp-1">
+            <div className="line-clamp-1 w-full truncate overflow-hidden break-words whitespace-normal">
               {notification?.data?.issue?.identifier}-{notification?.data?.issue?.sequence_id}&nbsp;
               {notification?.data?.issue?.name}
             </div>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx
index 0c8ea521585..394466bb9cd 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx
@@ -28,7 +28,7 @@ export function NotificationItemOptionButton(props: TNotificationItemOptionButto
       <button
         type="button"
         className={cn(
-          "relative flex-shrink-0 w-5 h-5 rounded-xs flex justify-center items-center outline-none bg-layer-1 hover:bg-surface-2",
+          "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs bg-layer-1 outline-none hover:bg-surface-2",
           buttonClassName
         )}
         onClick={(e) => {
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx
index dfca9dd6505..1b665665516 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx
@@ -38,11 +38,11 @@ export const NotificationOption = observer(function NotificationOption(props: TN
 
   return (
     <div
-      className={cn("flex-shrink-0 hidden group-hover:block text-body-xs-medium", {
+      className={cn("hidden flex-shrink-0 text-body-xs-medium group-hover:block", {
         block: isSnoozeStateModalOpen,
       })}
     >
-      <div className="relative flex justify-center items-center gap-2">
+      <div className="relative flex items-center justify-center gap-2">
         {/* read */}
         <NotificationItemReadOption workspaceSlug={workspaceSlug} notification={notification} />
 
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
index de71972be47..6e4a7171cb0 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
@@ -104,7 +104,7 @@ export const NotificationItemSnoozeOption = observer(function NotificationItemSn
               >
                 <Popover.Button
                   className={cn(
-                    "relative flex-shrink-0 w-5 h-5 rounded-xs flex justify-center items-center outline-none bg-layer-1 hover:bg-surface-2",
+                    "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs bg-layer-1 outline-none hover:bg-surface-2",
                     open ? "bg-layer-1" : ""
                   )}
                 >
@@ -121,11 +121,11 @@ export const NotificationItemSnoozeOption = observer(function NotificationItemSn
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                <Popover.Panel className="absolute mt-2 right-0 z-10 min-w-44 select-none">
-                  <div className="p-2 rounded-md border border-subtle bg-surface-1 space-y-1">
+                <Popover.Panel className="absolute right-0 z-10 mt-2 min-w-44 select-none">
+                  <div className="space-y-1 rounded-md border border-subtle bg-surface-1 p-2">
                     {data.snoozed_till && (
                       <button
-                        className="w-full text-left cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs text-secondary text-body-xs-medium"
+                        className="w-full cursor-pointer rounded-xs p-1 px-2 text-left text-body-xs-medium text-secondary transition-all hover:bg-layer-1"
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -139,7 +139,7 @@ export const NotificationItemSnoozeOption = observer(function NotificationItemSn
                     {NOTIFICATION_SNOOZE_OPTIONS.map((option) => (
                       <button
                         key={option.key}
-                        className="w-full text-left cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs text-secondary text-body-xs-medium"
+                        className="w-full cursor-pointer rounded-xs p-1 px-2 text-left text-body-xs-medium text-secondary transition-all hover:bg-layer-1"
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
diff --git a/apps/web/core/components/workspace-notifications/sidebar/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
index 5174ee6d9ea..e7e0ff4aca2 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -58,12 +58,12 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
   return (
     <div
       className={cn(
-        "relative border-0 md:border-r border-subtle z-[10] flex-shrink-0 bg-surface-1 h-full transition-all max-md:overflow-hidden",
+        "relative z-[10] h-full flex-shrink-0 border-0 border-subtle bg-surface-1 transition-all max-md:overflow-hidden md:border-r",
         currentSelectedNotificationId ? "w-0 md:w-3/12" : "w-full md:w-3/12"
       )}
     >
-      <div className="relative w-full h-full flex flex-col">
-        <Row className="h-header border-b border-subtle flex flex-shrink-0">
+      <div className="relative flex h-full w-full flex-col">
+        <Row className="flex h-header flex-shrink-0 border-b border-subtle">
           <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
         </Row>
 
@@ -71,12 +71,12 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
           {NOTIFICATION_TABS.map((tab) => (
             <div
               key={tab.value}
-              className="h-full px-3 relative cursor-pointer"
+              className="relative h-full cursor-pointer px-3"
               onClick={() => handleTabClick(tab.value)}
             >
               <div
                 className={cn(
-                  "relative h-full flex justify-center items-center gap-1 text-body-xs-medium transition-all",
+                  "relative flex h-full items-center justify-center gap-1 text-body-xs-medium transition-all",
                   {
                     "text-accent-primary": currentNotificationTab === tab.value,
                     "text-primary hover:text-secondary": currentNotificationTab !== tab.value,
@@ -89,7 +89,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
                 )}
               </div>
               {currentNotificationTab === tab.value && (
-                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-accent-strong" />
+                <div className="absolute right-0 bottom-0 left-0 rounded-t-md border border-accent-strong" />
               )}
             </div>
           ))}
@@ -100,7 +100,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
 
         {/* rendering notifications */}
         {loader === "init-loader" ? (
-          <div className="relative w-full h-full overflow-hidden">
+          <div className="relative h-full w-full overflow-hidden">
             <NotificationsLoader />
           </div>
         ) : (
@@ -110,7 +110,7 @@ export const NotificationsSidebarRoot = observer(function NotificationsSidebarRo
                 <NotificationListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
               </ContentWrapper>
             ) : (
-              <div className="relative w-full h-full flex justify-center items-center">
+              <div className="relative flex h-full w-full items-center justify-center">
                 <NotificationEmptyState currentNotificationTab={currentNotificationTab} />
               </div>
             )}
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index 04edd6bc34e..e8f1d632887 100644
--- a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
+++ b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -59,13 +59,13 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
                       <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
                     </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-16 leading-6 font-medium text-primary">
                         {currentUser?.id === userDetails.id
                           ? "Leave workspace?"
                           : `Remove ${userDetails?.display_name}?`}
diff --git a/apps/web/core/components/workspace/billing/comparison/base.tsx b/apps/web/core/components/workspace/billing/comparison/base.tsx
index e36a2b6fe7a..9d830d9a73f 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -41,23 +41,23 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
   const getSubscriptionType = (planKey: TPlanePlans) => planDetails[planKey].id;
 
   return (
-    <div className="size-full overflow-x-auto horizontal-scrollbar scrollbar-sm">
+    <div className="horizontal-scrollbar scrollbar-sm size-full overflow-x-auto">
       <div className="max-w-full" style={{ minWidth: `${numberOfPlansToRender * 280}px` }}>
-        <div className="h-full flex flex-col gap-y-10">
+        <div className="flex h-full flex-col gap-y-10">
           <div
-            className={cn("flex-shrink-0 sticky top-2 z-10 bg-layer-1 grid gap-3 text-caption-md-medium")}
+            className={cn("sticky top-2 z-10 grid flex-shrink-0 gap-3 bg-layer-1 text-caption-md-medium")}
             style={{
               gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))`,
             }}
           >
-            <div className="col-span-1 p-3 space-y-0.5 text-body-sm-medium" />
+            <div className="col-span-1 space-y-0.5 p-3 text-body-sm-medium" />
             {planeDetails}
           </div>
           {/* Plan Headers */}
           <section className="flex-shrink-0">
             {/* Plan Highlights */}
             <div
-              className="grid gap-3 py-1 text-caption-md text-secondary even:bg-surface-2 rounded-xs"
+              className="text-caption-md grid gap-3 rounded-xs py-1 text-secondary even:bg-surface-2"
               style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
             >
               <div className="col-span-1 p-3 text-body-sm-medium">Highlights</div>
@@ -81,18 +81,18 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
             <>
               {planComparison.map((section, sectionIdx) => (
                 <section key={sectionIdx} className="flex-shrink-0">
-                  <h2 className="flex gap-2 items-start text-h5-semibold text-secondary mb-2 pl-2">
+                  <h2 className="mb-2 flex items-start gap-2 pl-2 text-h5-semibold text-secondary">
                     {section.title} {section.comingSoon && <ComingSoonBadge />}
                   </h2>
                   <div className="border-t border-subtle">
                     {section.features.map((feature, featureIdx) => (
                       <div
                         key={featureIdx}
-                        className="grid gap-3 text-caption-md text-secondary bg-layer-transparent even:bg-layer-1 rounded-xs"
+                        className="text-caption-md grid gap-3 rounded-xs bg-layer-transparent text-secondary even:bg-layer-1"
                         style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
                       >
-                        <div className="col-span-1 p-3 flex items-center text-body-sm-medium">
-                          <div className="w-full flex gap-2 items-start justify-between">
+                        <div className="col-span-1 flex items-center p-3 text-body-sm-medium">
+                          <div className="flex w-full items-start justify-between gap-2">
                             {feature.title} {feature.comingSoon && <ComingSoonBadge />}
                           </div>
                         </div>
@@ -101,7 +101,7 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
                             shouldRenderPlanDetail(planKey) && (
                               <div
                                 key={planKey}
-                                className="col-span-1 p-3 flex items-center justify-center text-center text-body-xs-regular"
+                                className="col-span-1 flex items-center justify-center p-3 text-center text-body-xs-regular"
                               >
                                 <PlanFeatureDetail
                                   subscriptionType={getSubscriptionType(planKey)}
@@ -124,7 +124,7 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
         </div>
 
         {/* Toggle Button */}
-        <div className="flex items-center justify-center gap-1 my-4 pb-2">
+        <div className="my-4 flex items-center justify-center gap-1 pb-2">
           <Button
             variant="ghost"
             onClick={() => {
diff --git a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
index 6d9be3c6846..9ec6dc42806 100644
--- a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -47,12 +47,12 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
-      <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+      <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
         <div className="sm:flex sm:items-start">
           <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
             <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </div>
-          <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
             <h3 className="text-h5-medium leading-6 text-primary">
               {currentUser?.id === userDetails.id ? "Leave workspace?" : `Remove ${userDetails?.display_name}?`}
             </h3>
diff --git a/apps/web/core/components/workspace/create-workspace-form.tsx b/apps/web/core/components/workspace/create-workspace-form.tsx
index c8ea50dbdbd..2274f1832bb 100644
--- a/apps/web/core/components/workspace/create-workspace-form.tsx
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -160,8 +160,8 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
             {t("workspace_creation.form.url.label")}
             <span className="ml-0.5 text-danger-primary">*</span>
           </label>
-          <div className="flex w-full items-center rounded-md border border-subtle px-3 bg-layer-2">
-            <span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
+          <div className="flex w-full items-center rounded-md border border-subtle bg-layer-2 px-3">
+            <span className="text-12 whitespace-nowrap text-secondary">{window && window.location.host}/</span>
             <Controller
               control={control}
               name="slug"
diff --git a/apps/web/core/components/workspace/delete-workspace-form.tsx b/apps/web/core/components/workspace/delete-workspace-form.tsx
index a272cd94cbd..4d9196b16fc 100644
--- a/apps/web/core/components/workspace/delete-workspace-form.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-form.tsx
@@ -82,10 +82,10 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
-      <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
         <span
           className={cn(
-            "shrink-0 grid place-items-center rounded-full size-12 sm:size-10 bg-danger-subtle text-danger-primary"
+            "grid size-12 shrink-0 place-items-center rounded-full bg-danger-subtle text-danger-primary sm:size-10"
           )}
         >
           <AlertTriangle className="size-5 text-danger-primary" aria-hidden="true" />
@@ -95,13 +95,13 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
             <h3 className="text-h5-medium">{t("workspace_settings.settings.general.delete_modal.title")}</h3>
             <p className="mt-1 text-body-xs-regular text-secondary">
               You are about to delete the workspace{" "}
-              <span className="break-words text-body-xs-semibold">{data?.name}</span>. If you confirm, you will lose
+              <span className="text-body-xs-semibold break-words">{data?.name}</span>. If you confirm, you will lose
               access to all your work data in this workspace without any way to restore it. Tread very carefully.
             </p>
           </div>
 
-          <div className="text-secondary mt-4">
-            <p className="break-words text-body-xs-regular ">Type in this workspace&apos;s name to continue.</p>
+          <div className="mt-4 text-secondary">
+            <p className="text-body-xs-regular break-words">Type in this workspace&apos;s name to continue.</p>
             <Controller
               control={control}
               name="workspaceName"
@@ -122,7 +122,7 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
             />
           </div>
 
-          <div className="text-secondary mt-4">
+          <div className="mt-4 text-secondary">
             <p className="text-body-xs-regular">
               For final confirmation, type{" "}
               <span className="text-body-xs-medium text-primary">delete my workspace </span>
diff --git a/apps/web/core/components/workspace/invite-modal/fields.tsx b/apps/web/core/components/workspace/invite-modal/fields.tsx
index 927b0cafa87..76813909acf 100644
--- a/apps/web/core/components/workspace/invite-modal/fields.tsx
+++ b/apps/web/core/components/workspace/invite-modal/fields.tsx
@@ -47,7 +47,7 @@ export const InvitationFields = observer(function InvitationFields(props: TInvit
       {fields.map((field, index) => (
         <div
           key={field.id}
-          className="relative group mb-1 flex items-start justify-between gap-x-4 text-body-xs-regular w-full"
+          className="group relative mb-1 flex w-full items-start justify-between gap-x-4 text-body-xs-regular"
         >
           <div className="w-full">
             <Controller
@@ -82,7 +82,7 @@ export const InvitationFields = observer(function InvitationFields(props: TInvit
               )}
             />
           </div>
-          <div className="flex items-center justify-between gap-2 shrink-0">
+          <div className="flex shrink-0 items-center justify-between gap-2">
             <div className="flex flex-col gap-1">
               <Controller
                 control={control}
@@ -93,7 +93,7 @@ export const InvitationFields = observer(function InvitationFields(props: TInvit
                     value={value}
                     label={<span className="text-caption-sm-regular sm:text-body-xs-regular">{ROLE[value]}</span>}
                     onChange={onChange}
-                    className="flex-grow w-24"
+                    className="w-24 flex-grow"
                     input
                   >
                     {Object.entries(ROLE).map(([key, value]) => {
diff --git a/apps/web/core/components/workspace/logo.tsx b/apps/web/core/components/workspace/logo.tsx
index c5a280f1792..7255c3f9752 100644
--- a/apps/web/core/components/workspace/logo.tsx
+++ b/apps/web/core/components/workspace/logo.tsx
@@ -30,7 +30,7 @@ export const WorkspaceLogo = observer(function WorkspaceLogo(props: Props) {
       {props.logo && props.logo !== "" ? (
         <img
           src={getFileURL(props.logo)}
-          className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
+          className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
           alt={t("aria_labels.projects_sidebar.workspace_logo")}
         />
       ) : (
diff --git a/apps/web/core/components/workspace/settings/invitations-list-item.tsx b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
index 61a14dd6428..cf0db45a26a 100644
--- a/apps/web/core/components/workspace/settings/invitations-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -121,9 +121,9 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
         }}
         onSubmit={handleRemoveInvitation}
       />
-      <div className="group flex items-center justify-between px-3 py-4 hover:bg-layer-transparent-hover w-full h-full">
+      <div className="group flex h-full w-full items-center justify-between px-3 py-4 hover:bg-layer-transparent-hover">
         <div className="flex items-center gap-x-4 gap-y-2">
-          <span className="relative flex h-10 w-10 items-center justify-center rounded-sm bg-layer-3 p-4 capitalize text-tertiary">
+          <span className="relative flex h-10 w-10 items-center justify-center rounded-sm bg-layer-3 p-4 text-tertiary capitalize">
             {(invitationDetails.email ?? "?")[0]}
           </span>
           <div>
@@ -208,7 +208,7 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
                       <h5>{item.title}</h5>
                       {item.description && (
                         <p
-                          className={cn("text-tertiary whitespace-pre-line", {
+                          className={cn("whitespace-pre-line text-tertiary", {
                             "text-placeholder": item.disabled,
                           })}
                         >
diff --git a/apps/web/core/components/workspace/settings/member-columns.tsx b/apps/web/core/components/workspace/settings/member-columns.tsx
index 5af508b9ef3..b6cc9c0c986 100644
--- a/apps/web/core/components/workspace/settings/member-columns.tsx
+++ b/apps/web/core/components/workspace/settings/member-columns.tsx
@@ -51,26 +51,26 @@ export function NameColumn(props: NameProps) {
   return (
     <Disclosure>
       {() => (
-        <div className="relative group">
-          <div className="flex items-center gap-x-4 gap-y-2 w-72 justify-between">
-            <div className="flex items-center gap-x-2 gap-y-2 flex-1">
+        <div className="group relative">
+          <div className="flex w-72 items-center justify-between gap-x-4 gap-y-2">
+            <div className="flex flex-1 items-center gap-x-2 gap-y-2">
               {isSuspended ? (
-                <div className="bg-layer-1 rounded-full">
+                <div className="rounded-full bg-layer-1">
                   <SuspendedUserIcon className="size-6 text-placeholder" />
                 </div>
               ) : avatar_url && avatar_url.trim() !== "" ? (
                 <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex size-6 items-center justify-center rounded-full capitalize text-on-color">
+                  <span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
                     <img
                       src={getFileURL(avatar_url)}
-                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
                       alt={display_name || email}
                     />
                   </span>
                 </Link>
               ) : (
                 <Link href={`/${workspaceSlug}/profile/${id}`}>
-                  <span className="relative flex size-6 text-11 items-center justify-center rounded-full  capitalize text-tertiary bg-layer-3">
+                  <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-tertiary capitalize">
                     {(email ?? display_name ?? "?")[0]}
                   </span>
                 </Link>
@@ -90,7 +90,7 @@ export function NameColumn(props: NameProps) {
                   <div
                     role="button"
                     tabIndex={0}
-                    className="flex items-center gap-x-3 cursor-pointer"
+                    className="flex cursor-pointer items-center gap-x-3"
                     onClick={() => setRemoveMemberModal(rowData)}
                     onKeyDown={(e) => {
                       if (e.key === "Enter" || e.key === " ") {
@@ -136,13 +136,13 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
   return (
     <>
       {isSuspended ? (
-        <div className="w-32 flex ">
+        <div className="flex w-32">
           <Pill variant={EPillVariant.DEFAULT} size={EPillSize.SM} className="border-none">
             Suspended
           </Pill>
         </div>
       ) : isRoleNonEditable ? (
-        <div className="w-32 flex ">
+        <div className="flex w-32">
           <span>{ROLE[rowData.role]}</span>
         </div>
       ) : (
@@ -171,12 +171,12 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
                 }
               }}
               label={
-                <div className="flex ">
+                <div className="flex">
                   <span>{ROLE[rowData.role]}</span>
                 </div>
               }
               buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
-              className="rounded-md p-0 w-32"
+              className="w-32 rounded-md p-0"
               input
             >
               {Object.keys(ROLE).map((item) => (
diff --git a/apps/web/core/components/workspace/settings/members-list-item.tsx b/apps/web/core/components/workspace/settings/members-list-item.tsx
index bdaba38f455..b3b565b4eca 100644
--- a/apps/web/core/components/workspace/settings/members-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/members-list-item.tsx
@@ -91,7 +91,7 @@ export const WorkspaceMembersListItem = observer(function WorkspaceMembersListIt
   if (isEmpty(columns)) return <MembersLayoutLoader />;
 
   return (
-    <div className="border-t border-subtle grid">
+    <div className="grid border-t border-subtle">
       {removeMemberModal && (
         <ConfirmWorkspaceMemberRemove
           isOpen={removeMemberModal.member.id.length > 0}
diff --git a/apps/web/core/components/workspace/settings/members-list.tsx b/apps/web/core/components/workspace/settings/members-list.tsx
index 2b7b29c1107..41b4bed3fb7 100644
--- a/apps/web/core/components/workspace/settings/members-list.tsx
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -87,9 +87,9 @@ export const WorkspaceMembersList = observer(function WorkspaceMembersList(props
           title={
             <div className="flex w-full items-center justify-between pt-4">
               <div className="flex">
-                <h4 className="text-h5-medium pt-2 pb-2">{t("workspace_settings.settings.members.pending_invites")}</h4>
+                <h4 className="pt-2 pb-2 text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</h4>
                 {searchedInvitationsIds && (
-                  <CountChip count={searchedInvitationsIds.length} className="h-5  m-auto ml-2" />
+                  <CountChip count={searchedInvitationsIds.length} className="m-auto ml-2 h-5" />
                 )}
               </div>{" "}
               <ChevronDownIcon className={`h-5 w-5 transition-all ${showPendingInvites ? "rotate-180" : ""}`} />
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
index 42522cd19e8..c09db3d96a1 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -145,28 +145,28 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
           />
         )}
       />
-      <div className={cn("w-full flex flex-col gap-y-7", { "opacity-60": !isAdmin })}>
+      <div className={cn("flex w-full flex-col gap-y-7", { "opacity-60": !isAdmin })}>
         <div className="flex items-center gap-5">
-          <div className="shrink-0 flex flex-col gap-1">
+          <div className="flex shrink-0 flex-col gap-1">
             <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
               {workspaceLogo && workspaceLogo !== "" ? (
                 <div className="relative flex size-14">
                   <img
                     src={getFileURL(workspaceLogo)}
-                    className="absolute left-0 top-0 size-full rounded-md object-cover"
+                    className="absolute top-0 left-0 size-full rounded-md object-cover"
                     alt="Workspace Logo"
                   />
                 </div>
               ) : (
-                <div className="relative size-14 text-24 grid place-items-center rounded-md bg-accent-primary uppercase text-on-color">
+                <div className="relative grid size-14 place-items-center rounded-md bg-accent-primary text-24 text-on-color uppercase">
                   {currentWorkspace?.name?.charAt(0) ?? "N"}
                 </div>
               )}
             </button>
           </div>
           <div className="flex flex-col gap-1">
-            <div className="text-h5-semibold leading-6 mb:-my-5">{watch("name")}</div>
-            <button type="button" onClick={handleCopyUrl} className="text-body-xs-regular tracking-tight text-left">{`${
+            <div className="mb:-my-5 text-h5-semibold leading-6">{watch("name")}</div>
+            <button type="button" onClick={handleCopyUrl} className="text-left text-body-xs-regular tracking-tight">{`${
               typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
             }/${currentWorkspace.slug}`}</button>
             {isAdmin && (
diff --git a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
index 3b47d7418cb..3a280bd6add 100644
--- a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -50,17 +50,17 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
           "hover:bg-layer-transparent-hover": workspace.id !== activeWorkspace?.id,
         })}
       >
-        <div className="flex items-center justify-between gap-1 rounded-sm p-1 text-13 text-primary ">
-          <div className="flex items-center justify-start gap-2.5 w-[80%] relative">
+        <div className="flex items-center justify-between gap-1 rounded-sm p-1 text-13 text-primary">
+          <div className="relative flex w-[80%] items-center justify-start gap-2.5">
             <span
-              className={`relative flex h-8 w-8 flex-shrink-0 items-center  justify-center p-2 text-14 uppercase font-medium border-subtle ${
+              className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center border-subtle p-2 text-14 font-medium uppercase ${
                 !workspace?.logo_url && "rounded-md bg-[#026292] text-on-color"
               }`}
             >
               {workspace?.logo_url && workspace.logo_url !== "" ? (
                 <img
                   src={getFileURL(workspace.logo_url)}
-                  className="absolute left-0 top-0 h-full w-full rounded-sm object-cover"
+                  className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
                   alt={t("workspace_logo")}
                 />
               ) : (
@@ -69,13 +69,13 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
             </span>
             <div className="w-[inherit]">
               <div
-                className={`truncate text-left text-ellipsis text-13 font-medium ${workspaceSlug === workspace.slug ? "" : "text-secondary"}`}
+                className={`truncate text-left text-13 font-medium text-ellipsis ${workspaceSlug === workspace.slug ? "" : "text-secondary"}`}
               >
                 {workspace.name}
               </div>
-              <div className="text-13 text-tertiary flex gap-2 capitalize w-fit">
+              <div className="flex w-fit gap-2 text-13 text-tertiary capitalize">
                 <span>{getUserRole(workspace.role)?.toLowerCase() || "guest"}</span>
-                <div className="w-1 h-1 bg-layer-1/50 rounded-full m-auto" />
+                <div className="m-auto h-1 w-1 rounded-full bg-layer-1/50" />
                 <span className="capitalize">{t("member", { count: workspace.total_members || 0 })}</span>
               </div>
             </div>
@@ -98,10 +98,10 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
                     e.stopPropagation();
                     handleClose();
                   }}
-                  className="flex border border-strong rounded-md py-1.5 px-2.5 gap-1.5 hover:text-secondary text-secondary hover:border-strong bg-layer-2 hover:shadow-raised-100 transition-colors"
+                  className="flex gap-1.5 rounded-md border border-strong bg-layer-2 px-2.5 py-1.5 text-secondary transition-colors hover:border-strong hover:text-secondary hover:shadow-raised-100"
                 >
-                  <Settings className="h-4 w-4 my-auto flex-shrink-0" />
-                  <span className="text-13 font-medium my-auto whitespace-nowrap">{t("settings")}</span>
+                  <Settings className="my-auto h-4 w-4 flex-shrink-0" />
+                  <span className="my-auto text-13 font-medium whitespace-nowrap">{t("settings")}</span>
                 </Link>
               )}
               {[EUserPermissions.ADMIN].includes(workspace?.role) && (
@@ -111,10 +111,10 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
                     e.stopPropagation();
                     handleClose();
                   }}
-                  className="flex border border-strong rounded-md py-1.5 px-2.5 gap-1.5 hover:text-secondary text-secondary hover:border-strong bg-layer-2 hover:shadow-raised-100 transition-colors"
+                  className="flex gap-1.5 rounded-md border border-strong bg-layer-2 px-2.5 py-1.5 text-secondary transition-colors hover:border-strong hover:text-secondary hover:shadow-raised-100"
                 >
-                  <UserPlus className="h-4 w-4 my-auto flex-shrink-0" />
-                  <span className="text-13 font-medium my-auto whitespace-nowrap">
+                  <UserPlus className="my-auto h-4 w-4 flex-shrink-0" />
+                  <span className="my-auto text-13 font-medium whitespace-nowrap">
                     {t("project_settings.members.invite_members.title")}
                   </span>
                 </Link>
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 64be328ef8b..015f6cb1718 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -86,8 +86,8 @@ export function FavoriteFolder(props: Props) {
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded-sm flex gap-1 bg-surface-1 text-13 p-1 pr-2">
-                  <div className="size-5 grid place-items-center flex-shrink-0">
+                <div className="flex gap-1 rounded-sm bg-surface-1 p-1 pr-2 text-13">
+                  <div className="grid size-5 flex-shrink-0 place-items-center">
                     <FavoriteFolderIcon />
                   </div>
                   <p className="truncate text-13 font-medium text-secondary">{favorite.name}</p>
@@ -160,7 +160,7 @@ export function FavoriteFolder(props: Props) {
             <DropIndicator isVisible={instruction === "reorder-above"} />
             <div
               className={cn(
-                "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-primary hover:bg-layer-1-hover",
+                "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-1-hover",
                 {
                   "bg-surface-2": isMenuActive,
                 }
@@ -168,17 +168,17 @@ export function FavoriteFolder(props: Props) {
             >
               {/* draggable indicator */}
 
-              <div className="flex-shrink-0 w-3 h-3 rounded-xs absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-surface-2 cursor-pointer text-secondary hover:text-primary">
-                <GripVertical className="w-3 h-3" />
+              <div className="absolute left-0 hidden h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs bg-surface-2 text-secondary transition-colors group-hover:flex hover:text-primary">
+                <GripVertical className="h-3 w-3" />
               </div>
 
               <>
                 <Tooltip tooltipContent={`${favorite.name}`} position="right" className="ml-8" isMobile={isMobile}>
-                  <div className="flex-grow flex truncate">
+                  <div className="flex flex-grow truncate">
                     <Disclosure.Button
                       as="button"
                       type="button"
-                      className="flex-grow flex items-center gap-1.5 text-left select-none w-full"
+                      className="flex w-full flex-grow items-center gap-1.5 text-left select-none"
                     >
                       <Tooltip
                         isMobile={isMobile}
@@ -191,7 +191,7 @@ export function FavoriteFolder(props: Props) {
                         <button
                           type="button"
                           className={cn(
-                            "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded-sm text-placeholder cursor-grab",
+                            "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
                             {
                               "cursor-not-allowed opacity-60": favorite.sort_order === null,
                               "cursor-grabbing": isDragging,
@@ -201,7 +201,7 @@ export function FavoriteFolder(props: Props) {
                           <DragHandle className="bg-transparent" />
                         </button>
                       </Tooltip>
-                      <div className="size-5 grid place-items-center flex-shrink-0">
+                      <div className="grid size-5 flex-shrink-0 place-items-center">
                         <FavoriteFolderIcon />
                       </div>
                       <p className="truncate text-13 font-medium text-secondary">{favorite.name}</p>
@@ -212,16 +212,16 @@ export function FavoriteFolder(props: Props) {
                   customButton={
                     <span
                       ref={actionSectionRef}
-                      className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm"
+                      className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
                     >
                       <MoreHorizontal className="size-3" />
                     </span>
                   }
                   menuButtonOnClick={() => setIsMenuActive(!isMenuActive)}
                   className={cn(
-                    "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+                    "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
                     {
-                      "opacity-100 pointer-events-auto": isMenuActive,
+                      "pointer-events-auto opacity-100": isMenuActive,
                     }
                   )}
                   customButtonClassName="grid place-items-center"
@@ -230,7 +230,7 @@ export function FavoriteFolder(props: Props) {
                 >
                   <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
                     <span className="flex items-center justify-start gap-2">
-                      <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500" />
+                      <Star className="fill-yellow-500 stroke-yellow-500 h-3.5 w-3.5" />
                       <span>Remove from favorites</span>
                     </span>
                   </CustomMenu.MenuItem>
@@ -244,7 +244,7 @@ export function FavoriteFolder(props: Props) {
                 <Disclosure.Button
                   as="button"
                   type="button"
-                  className={cn("hidden group-hover/project-item:inline-block p-0.5 rounded-sm hover:bg-layer-1", {
+                  className={cn("hidden rounded-sm p-0.5 group-hover/project-item:inline-block hover:bg-layer-1", {
                     "inline-block": isMenuActive,
                   })}
                   aria-label={t(
@@ -268,7 +268,7 @@ export function FavoriteFolder(props: Props) {
                 leaveFrom="transform scale-100 opacity-100"
                 leaveTo="transform scale-95 opacity-0"
               >
-                <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1 px-2">
+                <Disclosure.Panel as="div" className="mt-1 flex flex-col gap-0.5 px-2">
                   {orderBy(favorite.children, "sequence", "desc").map((child, index) => (
                     <FavoriteRoot
                       key={child.id}
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
index 60e64b6856d..fea36908f96 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
@@ -33,7 +33,7 @@ export const FavoriteItemDragHandle = observer(function FavoriteItemDragHandle(p
     >
       <div
         className={cn(
-          "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded-sm text-placeholder cursor-grab",
+          "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
           {
             "cursor-not-allowed opacity-60": sort_order === null,
             "cursor-grabbing": isDragging,
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
index adde5fac0a9..521554861ab 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
@@ -30,15 +30,15 @@ export const FavoriteItemQuickAction = observer(function FavoriteItemQuickAction
   return (
     <CustomMenu
       customButton={
-        <span ref={ref} className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm">
+        <span ref={ref} className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1">
           <MoreHorizontal className="size-4" />
         </span>
       }
       menuButtonOnClick={() => onChange(!isMenuActive)}
       className={cn(
-        "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+        "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
         {
-          "opacity-100 pointer-events-auto": isMenuActive,
+          "pointer-events-auto opacity-100": isMenuActive,
         }
       )}
       customButtonClassName="grid place-items-center"
@@ -47,7 +47,7 @@ export const FavoriteItemQuickAction = observer(function FavoriteItemQuickAction
     >
       <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
         <span className="flex items-center justify-start gap-2">
-          <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500 flex-shrink-0" />
+          <Star className="fill-yellow-500 stroke-yellow-500 h-3.5 w-3.5 flex-shrink-0" />
           <span>Remove from favorites</span>
         </span>
       </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
index 481132c9e14..23b85f81630 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -29,9 +29,9 @@ export const FavoriteItemTitle = observer(function FavoriteItemTitle(props: Prop
 
   return (
     <Tooltip tooltipContent={title} isMobile={isMobile} position="right" className="ml-8">
-      <Link href={href} className="flex items-center gap-1.5 truncate w-full" draggable onClick={handleOnClick}>
-        <span className="flex items-center justify-center size-5">{icon}</span>
-        <span className="text-13 leading-5 font-medium flex-1 truncate">{title}</span>
+      <Link href={href} className="flex w-full items-center gap-1.5 truncate" draggable onClick={handleOnClick}>
+        <span className="flex size-5 items-center justify-center">{icon}</span>
+        <span className="flex-1 truncate text-13 leading-5 font-medium">{title}</span>
       </Link>
     </Tooltip>
   );
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
index 355beb3fc35..cc57b163a04 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
@@ -21,7 +21,7 @@ export function FavoriteItemWrapper(props: Props) {
       <div
         ref={elementRef}
         className={cn(
-          "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-primary hover:bg-layer-transparent-hover",
+          "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-transparent-hover",
           {
             "bg-surface-2": isMenuActive,
           }
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
index 10fda7ca15b..f7de5b92143 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
@@ -17,14 +17,14 @@ export const getFavoriteItemIcon = (type: string, logo?: TLogoProps) => {
 
   return (
     <>
-      <div className="hidden group-hover:flex items-center justify-center size-5">
-        <Icon className="flex-shrink-0 size-4 stroke-[1.5] m-auto" />
+      <div className="hidden size-5 items-center justify-center group-hover:flex">
+        <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
       </div>
-      <div className="flex items-center justify-center size-5 group-hover:hidden">
+      <div className="flex size-5 items-center justify-center group-hover:hidden">
         {logo?.in_use ? (
           <Logo logo={logo} size={16} type={type === "project" ? "material" : "lucide"} />
         ) : (
-          <Icon className="flex-shrink-0 size-4 stroke-[1.5] m-auto" />
+          <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
         )}
       </div>
     </>
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
index 5ad0b8b628b..1992cd0136d 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -75,7 +75,7 @@ export const FavoriteRoot = observer(function FavoriteRoot(props: Props) {
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded-sm bg-surface-1 text-13 p-1 pr-2">
+                <div className="rounded-sm bg-surface-1 p-1 pr-2 text-13">
                   <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} />
                 </div>
               );
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index 9b588b03b7c..624a07f637e 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -184,14 +184,14 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
         <div
           ref={elementRef}
           className={cn(
-            "group/favorites-button w-full flex items-center justify-between px-2 py-1.5 rounded-sm text-placeholder hover:bg-layer-transparent-hover"
+            "group/favorites-button flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover"
           )}
         >
           <Disclosure.Button
             as="button"
             type="button"
             className={cn(
-              "w-full flex items-center gap-1 whitespace-nowrap text-left text-13 font-semibold text-placeholder",
+              "flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder",
               {
                 "bg-layer-1 opacity-60": isDragging,
               }
@@ -205,7 +205,7 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
           >
             <span className="text-13 font-semibold">{t("favorites")}</span>
           </Disclosure.Button>
-          <div className="flex items-center opacity-0 pointer-events-none group-hover/favorites-button:opacity-100 group-hover/favorites-button:pointer-events-auto">
+          <div className="pointer-events-none flex items-center opacity-0 group-hover/favorites-button:pointer-events-auto group-hover/favorites-button:opacity-100">
             <Tooltip tooltipHeading={t("create_folder")} tooltipContent="">
               <IconButton
                 variant="ghost"
@@ -221,7 +221,7 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
             <Disclosure.Button
               as="button"
               type="button"
-              className="p-0.5 rounded-sm hover:bg-layer-transparent-hover flex-shrink-0 grid place-items-center"
+              className="grid flex-shrink-0 place-items-center rounded-sm p-0.5 hover:bg-layer-transparent-hover"
               onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
               aria-label={t(
                 isFavoriteMenuOpen
@@ -230,7 +230,7 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
               )}
             >
               <ChevronRightIcon
-                className={cn("flex-shrink-0 size-3 transition-all", {
+                className={cn("size-3 flex-shrink-0 transition-all", {
                   "rotate-90": isFavoriteMenuOpen,
                 })}
               />
@@ -247,11 +247,11 @@ export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
           leaveTo="transform scale-95 opacity-0"
         >
           {isFavoriteMenuOpen && (
-            <Disclosure.Panel as="div" className="flex flex-col mt-0.5 gap-0.5" static>
+            <Disclosure.Panel as="div" className="mt-0.5 flex flex-col gap-0.5" static>
               {createNewFolder && <NewFavoriteFolder setCreateNewFolder={setCreateNewFolder} actionType="create" />}
               {Object.keys(groupedFavorites).length === 0 ? (
                 <>
-                  <span className="text-placeholder text-11 font-medium px-8 py-1.5">{t("no_favorites_yet")}</span>
+                  <span className="px-8 py-1.5 text-11 font-medium text-placeholder">{t("no_favorites_yet")}</span>
                 </>
               ) : (
                 orderBy(Object.values(groupedFavorites), "sequence", "desc")
diff --git a/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
index c7893408911..3e3927eee57 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
@@ -138,7 +138,7 @@ export const NewFavoriteFolder = observer(function NewFavoriteFolder(props: TPro
     setCreateNewFolder(false);
   });
   return (
-    <div className="flex items-center gap-1.5 py-[1px] px-2" ref={ref}>
+    <div className="flex items-center gap-1.5 px-2 py-[1px]" ref={ref}>
       <FavoriteFolderIcon className="size-4" />
       <form onSubmit={handleSubmit(actionType === "create" ? handleAddNewFolder : handleRenameFolder)}>
         <Controller
diff --git a/apps/web/core/components/workspace/sidebar/help-section/root.tsx b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
index adaccb5795e..f72ac1f45fe 100644
--- a/apps/web/core/components/workspace/sidebar/help-section/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
@@ -79,7 +79,7 @@ export const HelpMenuRoot = observer(function HelpMenuRoot() {
           <button
             type="button"
             onClick={() => toggleShortcutsListModal(true)}
-            className="flex w-full items-center justify-sbg-layer-211 hover:bg-layer-1"
+            className="justify-sbg-layer-211 flex w-full items-center hover:bg-layer-1"
           >
             <span className="text-11">{t("keyboard_shortcuts")}</span>
           </button>
@@ -88,7 +88,7 @@ export const HelpMenuRoot = observer(function HelpMenuRoot() {
           <button
             type="button"
             onClick={() => setProductUpdatesModalOpen(true)}
-            className="flex w-full items-center justify-sbg-layer-211 hover:bg-layer-1"
+            className="justify-sbg-layer-211 flex w-full items-center hover:bg-layer-1"
           >
             <span className="text-11">{t("whats_new")}</span>
           </button>
@@ -100,7 +100,7 @@ export const HelpMenuRoot = observer(function HelpMenuRoot() {
             <span className="text-11">Discord</span>
           </div>
         </CustomMenu.MenuItem>
-        <div className="px-1 pt-2 mt-1 text-11 text-secondary border-t border-subtle">
+        <div className="mt-1 border-t border-subtle px-1 pt-2 text-11 text-secondary">
           <PlaneVersionNumber />
         </div>
       </CustomMenu>
diff --git a/apps/web/core/components/workspace/sidebar/project-navigation.tsx b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
index e63e768e4b9..3582215f3bd 100644
--- a/apps/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -186,10 +186,10 @@ export const ProjectNavigation = observer(function ProjectNavigation(props: TPro
         return (
           <Link key={item.key} href={item.href} onClick={handleProjectClick}>
             <SidebarNavItem isActive={!!isActive(item)}>
-              <div className="flex items-center justify-between gap-1.5 py-[1px] w-full">
+              <div className="flex w-full items-center justify-between gap-1.5 py-[1px]">
                 <div className="flex items-center gap-1.5">
                   <item.icon
-                    className={`flex-shrink-0 size-4 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
+                    className={`size-4 flex-shrink-0 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
                   />
                   <span className="text-11 font-medium">{t(item.i18n_key)}</span>
                 </div>
diff --git a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
index 9f95ccb9081..f1256a4e44c 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -160,8 +160,8 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded-sm flex items-center bg-surface-1 text-13 p-1 pr-2">
-                  <div className="size-4 grid place-items-center flex-shrink-0">
+                <div className="flex items-center rounded-sm bg-surface-1 p-1 pr-2 text-13">
+                  <div className="grid size-4 flex-shrink-0 place-items-center">
                     {project && <Logo logo={project?.logo_props} />}
                   </div>
                   <p className="truncate text-secondary">{project?.name}</p>
@@ -291,7 +291,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
           <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
           <div
             className={cn(
-              "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-primary hover:bg-layer-transparent-hover",
+              "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-transparent-hover",
               {
                 "bg-surface-2": isMenuActive,
                 "bg-layer-transparent-active": shouldHighlightProject,
@@ -311,7 +311,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                 <button
                   type="button"
                   className={cn(
-                    "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded-sm text-placeholder cursor-grab",
+                    "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
                     {
                       "cursor-not-allowed opacity-60": project.sort_order === null,
                       "cursor-grabbing": isDragging,
@@ -325,26 +325,26 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
               </Tooltip>
             )}
             <>
-              <ControlLink href={defaultTabUrl} className="flex-grow flex truncate" onClick={handleItemClick}>
+              <ControlLink href={defaultTabUrl} className="flex flex-grow truncate" onClick={handleItemClick}>
                 {isAccordionMode ? (
                   <Disclosure.Button
                     as="button"
                     type="button"
-                    className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {})}
+                    className={cn("flex w-full flex-grow items-center gap-1.5 text-left select-none", {})}
                     aria-label={
                       isProjectListOpen
                         ? t("aria_labels.projects_sidebar.close_project_menu")
                         : t("aria_labels.projects_sidebar.open_project_menu")
                     }
                   >
-                    <div className="size-4 grid place-items-center flex-shrink-0">
+                    <div className="grid size-4 flex-shrink-0 place-items-center">
                       <Logo logo={project.logo_props} size={16} />
                     </div>
                     <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
                   </Disclosure.Button>
                 ) : (
-                  <div className="flex-grow flex items-center gap-1.5 text-left select-none w-full">
-                    <div className="size-4 grid place-items-center flex-shrink-0">
+                  <div className="flex w-full flex-grow items-center gap-1.5 text-left select-none">
+                    <div className="grid size-4 flex-shrink-0 place-items-center">
                       <Logo logo={project.logo_props} size={16} />
                     </div>
                     <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
@@ -364,9 +364,9 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                     />
                   }
                   className={cn(
-                    "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+                    "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
                     {
-                      "opacity-100 pointer-events-auto": isMenuActive,
+                      "pointer-events-auto opacity-100": isMenuActive,
                     }
                   )}
                   customButtonClassName="grid place-items-center"
@@ -415,7 +415,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                         router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
                       }}
                     >
-                      <div className="flex items-center justify-start gap-2 cursor-pointer">
+                      <div className="flex cursor-pointer items-center justify-start gap-2">
                         <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
                         <span>{t("archives")}</span>
                       </div>
@@ -426,7 +426,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                       router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
                     }}
                   >
-                    <div className="flex items-center justify-start gap-2 cursor-pointer">
+                    <div className="flex cursor-pointer items-center justify-start gap-2">
                       <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
                       <span>{t("settings")}</span>
                     </div>
@@ -450,7 +450,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                     size="sm"
                     icon={ChevronRightIcon}
                     onClick={() => setIsProjectListOpen(!isProjectListOpen)}
-                    className={cn("hidden group-hover/project-item:inline-flex text-placeholder", {
+                    className={cn("hidden text-placeholder group-hover/project-item:inline-flex", {
                       "inline-flex": isMenuActive,
                     })}
                     iconClassName={cn("transition-transform", {
@@ -477,8 +477,8 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
               leaveTo="transform scale-95 opacity-0"
             >
               {isProjectListOpen && (
-                <Disclosure.Panel as="div" className="relative flex flex-col gap-0.5 mt-1 pl-6 mb-1.5">
-                  <div className="absolute left-[15px] top-0 bottom-1 w-[1px] bg-layer-3" />
+                <Disclosure.Panel as="div" className="relative mt-1 mb-1.5 flex flex-col gap-0.5 pl-6">
+                  <div className="absolute top-0 bottom-1 left-[15px] w-[1px] bg-layer-3" />
                   <ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
                 </Disclosure.Panel>
               )}
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index f581b408ed3..631c52ddfb5 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -171,11 +171,11 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
       >
         <>
           <Disclosure as="div" className="flex flex-col" defaultOpen={isAllProjectsListOpen}>
-            <div className="group w-full flex items-center justify-between px-2 py-1.5 rounded-sm text-placeholder hover:bg-layer-transparent-hover">
+            <div className="group flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover">
               <Disclosure.Button
                 as="button"
                 type="button"
-                className="w-full flex items-center gap-1 whitespace-nowrap text-left text-13 font-semibold text-placeholder"
+                className="flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder"
                 onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
                 aria-label={t(
                   isAllProjectsListOpen
@@ -196,7 +196,7 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
                         setIsProjectModalOpen(true);
                       }}
                       data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
-                      className="hidden group-hover:inline-flex text-placeholder"
+                      className="hidden text-placeholder group-hover:inline-flex"
                       aria-label={t("aria_labels.projects_sidebar.create_new_project")}
                     />
                   </Tooltip>
@@ -254,7 +254,7 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
                         <button
                           type="button"
                           onClick={() => toggleExtendedProjectSidebar()}
-                          className="flex items-center gap-1.5 text-13 font-medium flex-grow text-tertiary"
+                          className="flex flex-grow items-center gap-1.5 text-13 font-medium text-tertiary"
                           id="extended-project-sidebar-toggle"
                           aria-label={t(
                             isExtendedProjectSidebarOpened
@@ -262,7 +262,7 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
                               : "aria_labels.app_sidebar.open_extended_sidebar"
                           )}
                         >
-                          <Ellipsis className="flex-shrink-0 size-4" />
+                          <Ellipsis className="size-4 flex-shrink-0" />
                           <span>{isExtendedProjectSidebarOpened ? "Hide" : "More"}</span>
                         </button>
                       </SidebarNavItem>
@@ -278,7 +278,7 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
           <button
             type="button"
             data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_BUTTON}
-            className="w-full flex items-center gap-1.5 px-2 py-1.5 text-13 leading-5 font-medium text-secondary hover:bg-surface-2 rounded-md"
+            className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-13 leading-5 font-medium text-secondary hover:bg-surface-2"
             onClick={() => {
               toggleCreateProjectModal(true);
             }}
diff --git a/apps/web/core/components/workspace/sidebar/quick-actions.tsx b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
index a54d2b30b35..9f5c6546bc8 100644
--- a/apps/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -77,12 +77,12 @@ export const SidebarQuickActions = observer(function SidebarQuickActions() {
         fetchIssueDetails={false}
         isDraft
       />
-      <div className="flex items-center justify-between gap-2 cursor-pointer">
+      <div className="flex cursor-pointer items-center justify-between gap-2">
         <SidebarAddButton
           label={
             <>
               <AddWorkItemIcon className="size-4" />
-              <span className="text-13 font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
+              <span className="max-w-[145px] truncate text-13 font-medium">{t("sidebar.new_work_item")}</span>
             </>
           }
           onClick={() => toggleCreateIssueModal(true)}
diff --git a/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
index 791cfce6458..6f1de763439 100644
--- a/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -102,11 +102,11 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
         ))}
       </div>
       <Disclosure as="div" className="flex flex-col" defaultOpen={!!isWorkspaceMenuOpen}>
-        <div className="group w-full flex items-center justify-between px-2 py-1.5 rounded-sm text-placeholder hover:bg-layer-transparent-hover">
+        <div className="group flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover">
           <Disclosure.Button
             as="button"
             type="button"
-            className="w-full flex items-center gap-1 whitespace-nowrap text-left text-13 font-semibold text-placeholder"
+            className="flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder"
             onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
             aria-label={t(
               isWorkspaceMenuOpen
@@ -116,11 +116,11 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
           >
             <span className="text-13 font-semibold">{t("workspace")}</span>
           </Disclosure.Button>
-          <div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
+          <div className="pointer-events-none flex items-center opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
             <Disclosure.Button
               as="button"
               type="button"
-              className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0"
+              className="flex-shrink-0 rounded-sm p-0.5 hover:bg-layer-1"
               onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
               aria-label={t(
                 isWorkspaceMenuOpen
@@ -129,7 +129,7 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
               )}
             >
               <ChevronRightIcon
-                className={cn("flex-shrink-0 size-3 transition-all", {
+                className={cn("size-3 flex-shrink-0 transition-all", {
                   "rotate-90": isWorkspaceMenuOpen,
                 })}
               />
@@ -158,7 +158,7 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
                   <button
                     type="button"
                     onClick={() => toggleExtendedSidebar()}
-                    className="flex items-center gap-1.5 text-13 font-medium flex-grow text-tertiary"
+                    className="flex flex-grow items-center gap-1.5 text-13 font-medium text-tertiary"
                     id="extended-sidebar-toggle"
                     aria-label={t(
                       isExtendedSidebarOpened
@@ -166,7 +166,7 @@ export const SidebarMenuItems = observer(function SidebarMenuItems() {
                         : "aria_labels.app_sidebar.open_extended_sidebar"
                     )}
                   >
-                    <Ellipsis className="flex-shrink-0 size-4" />
+                    <Ellipsis className="size-4 flex-shrink-0" />
                     <span>{isExtendedSidebarOpened ? "Hide" : "More"}</span>
                   </button>
                 </SidebarNavItem>
diff --git a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
index 6cd08da79bf..e5ba37a96fc 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
@@ -117,7 +117,7 @@ export const UserMenuRoot = observer(function UserMenuRoot() {
           }
           className="flex items-center gap-2"
         >
-          <Settings className="shrink-0 size-3.5" />
+          <Settings className="size-3.5 shrink-0" />
           {t("settings")}
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem
@@ -129,12 +129,12 @@ export const UserMenuRoot = observer(function UserMenuRoot() {
           }
           className="flex items-center gap-2"
         >
-          <Settings2 className="shrink-0 size-3.5" />
+          <Settings2 className="size-3.5 shrink-0" />
           {t("preferences")}
         </CustomMenu.MenuItem>
       </div>
       <CustomMenu.MenuItem onClick={handleSignOut} className="flex items-center gap-2">
-        <LogOut className="shrink-0 size-3.5" />
+        <LogOut className="size-3.5 shrink-0" />
         {t("sign_out")}
       </CustomMenu.MenuItem>
       {isUserInstanceAdmin && (
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
index d0e1bdc9cf7..a84d752deae 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -46,10 +46,10 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu
   const isAdmin = allowPermissions([EUserWorkspaceRoles.ADMIN] as any, EUserPermissionsLevel.WORKSPACE);
 
   return (
-    <div className="flex px-2 bg-surface-1 group/workspace-button hover:bg-surface-2 rounded-sm mt-2.5">
+    <div className="group/workspace-button mt-2.5 flex rounded-sm bg-surface-1 px-2 hover:bg-surface-2">
       <Disclosure.Button
         as="button"
-        className="flex-1 sticky top-0  z-10  w-full  py-1.5 flex items-center justify-between gap-1 text-placeholder  text-13 font-semibold"
+        className="sticky top-0 z-10 flex w-full flex-1 items-center justify-between gap-1 py-1.5 text-13 font-semibold text-placeholder"
         onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
       >
         <span>{t("workspace")}</span>
@@ -58,7 +58,7 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu
         customButton={
           <span
             ref={actionSectionRef}
-            className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm my-auto"
+            className="my-auto grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
             onClick={() => {
               setIsMenuActive(!isMenuActive);
             }}
@@ -67,9 +67,9 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu
           </span>
         }
         className={cn(
-          "h-full flex items-center opacity-0 z-20 pointer-events-none flex-shrink-0 group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto my-auto",
+          "pointer-events-none z-20 my-auto flex h-full flex-shrink-0 items-center opacity-0 group-hover/workspace-button:pointer-events-auto group-hover/workspace-button:opacity-100",
           {
-            "opacity-100 pointer-events-auto": isMenuActive,
+            "pointer-events-auto opacity-100": isMenuActive,
           }
         )}
         customButtonClassName="grid place-items-center"
@@ -93,11 +93,11 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu
       </CustomMenu>
       <Disclosure.Button
         as="button"
-        className="sticky top-0 z-10 group/workspace-button px-0.5 py-1.5 flex items-center justify-between gap-1 text-placeholder hover:bg-surface-2 rounded-sm text-11 font-semibold"
+        className="group/workspace-button sticky top-0 z-10 flex items-center justify-between gap-1 rounded-sm px-0.5 py-1.5 text-11 font-semibold text-placeholder hover:bg-surface-2"
         onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
       >
         {" "}
-        <span className="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded-sm hover:bg-layer-1">
+        <span className="pointer-events-none flex-shrink-0 rounded-sm opacity-0 group-hover/workspace-button:pointer-events-auto group-hover/workspace-button:opacity-100 hover:bg-layer-1">
           <ChevronRightIcon
             className={cn("size-4 flex-shrink-0 text-placeholder transition-transform", {
               "rotate-90": isWorkspaceMenuOpen,
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index 63792023474..9948e3772df 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -77,9 +77,9 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
   return (
     <Menu
       as="div"
-      className={cn("relative h-full flex max-w-48 w-fit whitespace-nowrap truncate", {
+      className={cn("relative flex h-full w-fit max-w-48 truncate whitespace-nowrap", {
         "w-full justify-center text-center": variant === "sidebar",
-        "flex-grow justify-stretch text-left truncate": variant === "top-navigation",
+        "flex-grow justify-stretch truncate text-left": variant === "top-navigation",
       })}
     >
       {({ open, close }: { open: boolean; close: () => void }) => {
@@ -92,7 +92,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
           <>
             {variant === "sidebar" && (
               <Menu.Button
-                className={cn("flex w-full items-center justify-center size-8 rounded-md", {
+                className={cn("flex size-8 w-full items-center justify-center rounded-md", {
                   "bg-layer-1": open,
                 })}
               >
@@ -113,14 +113,14 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
             {variant === "top-navigation" && (
               <Menu.Button
                 className={cn(
-                  "group/menu-button flex items-center gap-1 p-1 truncate rounded-sm text-13 font-medium text-secondary hover:bg-layer-1 focus:outline-none justify-between flex-grow",
+                  "group/menu-button flex flex-grow items-center justify-between gap-1 truncate rounded-sm p-1 text-13 font-medium text-secondary hover:bg-layer-1 focus:outline-none",
                   {
                     "bg-layer-1": open,
                   }
                 )}
                 aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
               >
-                <div className="flex-grow flex items-center gap-2 truncate">
+                <div className="flex flex-grow items-center gap-2 truncate">
                   <WorkspaceLogo
                     logo={activeWorkspace?.logo_url}
                     name={activeWorkspace?.name}
@@ -129,7 +129,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                   <h4 className="truncate text-14 font-medium text-primary">{activeWorkspace?.name ?? t("loading")}</h4>
                 </div>
                 <ChevronDownIcon
-                  className={cn("flex-shrink-0 size-4 text-placeholder duration-300", {
+                  className={cn("size-4 flex-shrink-0 text-placeholder duration-300", {
                     "rotate-180": open,
                   })}
                 />
@@ -154,12 +154,12 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                     }
                   )}
                 >
-                  <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
-                    <span className="rounded-md text-left px-4 sticky top-0 z-21 h-full w-full bg-surface-1 pb-1 pt-3 text-13 font-medium text-placeholder truncate flex-shrink-0">
+                  <div className="vertical-scrollbar flex scrollbar-sm max-h-96 flex-col items-start justify-start overflow-x-hidden overflow-y-scroll">
+                    <span className="sticky top-0 z-21 h-full w-full flex-shrink-0 truncate rounded-md bg-surface-1 px-4 pt-3 pb-1 text-left text-13 font-medium text-placeholder">
                       {currentUser?.email}
                     </span>
                     {workspacesList ? (
-                      <div className="size-full flex flex-col items-start justify-start">
+                      <div className="flex size-full flex-col items-start justify-start">
                         {(activeWorkspace
                           ? [
                               activeWorkspace,
@@ -186,7 +186,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                       </div>
                     )}
                   </div>
-                  <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-13">
+                  <div className="flex w-full flex-col items-start justify-start gap-2 px-4 py-2 text-13">
                     {!isWorkspaceCreationDisabled && (
                       <Link href="/create-workspace" className="w-full">
                         <Menu.Item
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
index 8923f56f100..d25c5909253 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
@@ -69,7 +69,7 @@ export const SidebarWorkspaceMenu = observer(function SidebarWorkspaceMenu() {
         leaveTo="transform scale-95 opacity-0"
       >
         {isWorkspaceMenuOpen && (
-          <Disclosure.Panel as="div" className="flex flex-col mt-0.5 gap-0.5" static>
+          <Disclosure.Panel as="div" className="mt-0.5 flex flex-col gap-0.5" static>
             {SIDEBAR_WORKSPACE_MENU_ITEMS.map((item) => (
               <SidebarWorkspaceMenuItem key={item.key} item={item} />
             ))}
diff --git a/apps/web/core/components/workspace/views/default-view-list-item.tsx b/apps/web/core/components/workspace/views/default-view-list-item.tsx
index 3aace5d4b39..cb58342157a 100644
--- a/apps/web/core/components/workspace/views/default-view-list-item.tsx
+++ b/apps/web/core/components/workspace/views/default-view-list-item.tsx
@@ -22,11 +22,11 @@ export const GlobalDefaultViewListItem = observer(function GlobalDefaultViewList
   return (
     <div className="group border-b border-subtle hover:bg-surface-2">
       <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
-        <div className="relative flex w-full h-[52px] items-center justify-between rounded-sm px-5 py-4">
+        <div className="relative flex h-[52px] w-full items-center justify-between rounded-sm px-5 py-4">
           <div className="flex w-full items-center justify-between">
             <div className="flex items-center gap-4">
               <div className="flex flex-col">
-                <p className="truncate text-13 font-medium leading-4">{truncateText(t(view.i18n_label), 75)}</p>
+                <p className="truncate text-13 leading-4 font-medium">{truncateText(t(view.i18n_label), 75)}</p>
               </div>
             </div>
           </div>
diff --git a/apps/web/core/components/workspace/views/default-view-quick-action.tsx b/apps/web/core/components/workspace/views/default-view-quick-action.tsx
index fd400b328f7..a37744dbfed 100644
--- a/apps/web/core/components/workspace/views/default-view-quick-action.tsx
+++ b/apps/web/core/components/workspace/views/default-view-quick-action.tsx
@@ -85,7 +85,7 @@ export const DefaultWorkspaceViewQuickActions = observer(function DefaultWorkspa
                 <h5>{t(item.title || "")}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index efe4566e5f1..2bbd88672ca 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -117,7 +117,7 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
                   value={value}
                   placeholder={t("common.description")}
                   onChange={onChange}
-                  className="w-full text-14 resize-none min-h-24"
+                  className="min-h-24 w-full resize-none text-14"
                   hasError={Boolean(errors?.description)}
                 />
               )}
@@ -185,7 +185,7 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
           </div>
         </div>
       </div>
-      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
         <Button variant="secondary" onClick={handleClose}>
           {t("common.cancel")}
         </Button>
diff --git a/apps/web/core/components/workspace/views/header.tsx b/apps/web/core/components/workspace/views/header.tsx
index 92102b3e206..f1a92a94f6e 100644
--- a/apps/web/core/components/workspace/views/header.tsx
+++ b/apps/web/core/components/workspace/views/header.tsx
@@ -90,11 +90,11 @@ export const GlobalViewsHeader = observer(function GlobalViewsHeader() {
   );
 
   return (
-    <Header variant={EHeaderVariant.SECONDARY} className="min-h-[44px] z-[12] bg-surface-1">
+    <Header variant={EHeaderVariant.SECONDARY} className="z-[12] min-h-[44px] bg-surface-1">
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div
         ref={containerRef}
-        className="flex h-full w-full items-center overflow-y-hidden overflow-x-auto horizontal-scrollbar scrollbar-sm"
+        className="horizontal-scrollbar flex scrollbar-sm h-full w-full items-center overflow-x-auto overflow-y-hidden"
       >
         {DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
           <DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
diff --git a/apps/web/core/components/workspace/views/quick-action.tsx b/apps/web/core/components/workspace/views/quick-action.tsx
index 3248b2061a1..6e24f79cfab 100644
--- a/apps/web/core/components/workspace/views/quick-action.tsx
+++ b/apps/web/core/components/workspace/views/quick-action.tsx
@@ -92,7 +92,7 @@ export const WorkspaceViewQuickActions = observer(function WorkspaceViewQuickAct
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-tertiary whitespace-pre-line", {
+                    className={cn("whitespace-pre-line text-tertiary", {
                       "text-placeholder": item.disabled,
                     })}
                   >
diff --git a/apps/web/core/components/workspace/views/view-list-item.tsx b/apps/web/core/components/workspace/views/view-list-item.tsx
index 93acab3ad6a..8c71a05bf30 100644
--- a/apps/web/core/components/workspace/views/view-list-item.tsx
+++ b/apps/web/core/components/workspace/views/view-list-item.tsx
@@ -44,7 +44,7 @@ export const GlobalViewListItem = observer(function GlobalViewListItem(props: Pr
             <div className="flex w-full items-center justify-between">
               <div className="flex items-center gap-4">
                 <div className="flex flex-col">
-                  <p className="truncate text-13 font-medium leading-4">{truncateText(view.name, 75)}</p>
+                  <p className="truncate text-13 leading-4 font-medium">{truncateText(view.name, 75)}</p>
                   {view?.description && <p className="text-11 text-secondary">{view.description}</p>}
                 </div>
               </div>
diff --git a/apps/web/core/constants/plans.tsx b/apps/web/core/constants/plans.tsx
index 60f64f5e500..13e89904713 100644
--- a/apps/web/core/constants/plans.tsx
+++ b/apps/web/core/constants/plans.tsx
@@ -59,7 +59,7 @@ export function ComingSoonBadge({ className }: { className?: string }) {
   return (
     <span
       className={cn(
-        "bg-accent-primary text-on-color font-semibold text-9 py-0.5 px-1.5 w-fit whitespace-nowrap rounded-sm",
+        "w-fit rounded-sm bg-accent-primary px-1.5 py-0.5 text-9 font-semibold whitespace-nowrap text-on-color",
         className
       )}
     >
@@ -167,13 +167,13 @@ export const PLANS_COMPARISON_LIST: TPlansComparisonDetails[] = [
           one: "Limited props",
           pro: "All props",
           business: (
-            <span className="flex flex-col items-end lg:items-center gap-1">
+            <span className="flex flex-col items-end gap-1 lg:items-center">
               <ComingSoonBadge />
               Work item transfers and conversions
             </span>
           ),
           enterprise: (
-            <span className="flex flex-col items-end lg:items-center gap-1">
+            <span className="flex flex-col items-end gap-1 lg:items-center">
               <ComingSoonBadge />
               Work item transfers and conversions
             </span>
@@ -1217,15 +1217,15 @@ export const PLANS_COMPARISON_LIST: TPlansComparisonDetails[] = [
           ),
           one: (
             <div className="flex items-center gap-1">
-              <Mail className="flex-shrink-0 size-4" />
-              <RiDiscordFill className="flex-shrink-0 size-4" />
+              <Mail className="size-4 flex-shrink-0" />
+              <RiDiscordFill className="size-4 flex-shrink-0" />
             </div>
           ),
           pro: (
             <div className="flex items-center gap-1">
-              <Mail className="flex-shrink-0 size-4" />
-              <RiDiscordFill className="flex-shrink-0 size-4" />
-              <MessageCircle className="flex-shrink-0 size-4" />
+              <Mail className="size-4 flex-shrink-0" />
+              <RiDiscordFill className="size-4 flex-shrink-0" />
+              <MessageCircle className="size-4 flex-shrink-0" />
             </div>
           ),
           business: "Full-suite\nprofessional services",
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index 7cba3ee3682..ac8c34fb36b 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -140,7 +140,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
   // if list of workspaces are not there then we have to render the spinner
   if (isParentLoading || allWorkspaces === undefined || loader) {
     return (
-      <div className="grid h-full place-items-center p-4 rounded-lg border border-subtle">
+      <div className="grid h-full place-items-center rounded-lg border border-subtle p-4">
         <div className="flex flex-col items-center gap-3 text-center">
           <LogoSpinner />
         </div>
@@ -151,8 +151,8 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
   // if workspaces are there and we are trying to access the workspace that we are not part of then show the existing workspaces
   if (currentWorkspace === undefined && !currentWorkspaceInfo) {
     return (
-      <div className="relative flex h-full w-full flex-col items-center justify-center bg-surface-2 ">
-        <div className="container relative mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
+      <div className="relative flex h-full w-full flex-col items-center justify-center bg-surface-2">
+        <div className="relative container mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
           <div className="relative flex flex-shrink-0 items-center justify-between gap-4">
             <div className="z-10 flex-shrink-0 bg-surface-2 py-4">
               <PlaneLogo className="h-9 w-auto text-primary" />
@@ -196,7 +196,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
             </div>
           </div>
 
-          <div className="absolute bottom-0 left-4 top-0 w-0 bg-layer-1 md:w-0.5" />
+          <div className="absolute top-0 bottom-0 left-4 w-0 bg-layer-1 md:w-0.5" />
         </div>
       </div>
     );
diff --git a/apps/web/helpers/authentication.helper.tsx b/apps/web/helpers/authentication.helper.tsx
index 2df42773899..5db2e1aa9b3 100644
--- a/apps/web/helpers/authentication.helper.tsx
+++ b/apps/web/helpers/authentication.helper.tsx
@@ -161,7 +161,7 @@ const errorCodeMessages: {
       <div>
         Your account is already registered.&nbsp;
         <Link
-          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
           href={`/sign-in${email ? `?email=${encodeURIComponent(email)}` : ``}`}
         >
           Sign In
@@ -197,7 +197,7 @@ const errorCodeMessages: {
       <div>
         No account found.&nbsp;
         <Link
-          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
           href={`/${email ? `?email=${encodeURIComponent(email)}` : ``}`}
         >
           Create one
@@ -343,7 +343,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -355,7 +355,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
diff --git a/apps/web/package.json b/apps/web/package.json
index 1f27048ac4d..6313c2208c9 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,9 +12,9 @@
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf .react-router && rm -rf node_modules && rm -rf dist && rm -rf build",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=14367",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=14367",
-    "fix:format": "prettier . --cache --write"
+    "fix:format": "oxfmt ."
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "catalog:",
diff --git a/package.json b/package.json
index 608da162f36..1a577558a89 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@eslint/js": "9.39.1",
-    "@prettier/plugin-oxc": "0.1.3",
+    "oxfmt": "0.35.0",
     "@vitest/eslint-plugin": "1.5.1",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
@@ -39,13 +39,12 @@
     "globals": "16.5.0",
     "husky": "9.1.7",
     "lint-staged": "16.2.7",
-    "prettier": "3.7.4",
     "turbo": "2.6.3",
     "typescript-eslint": "8.48.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts,json,css,md}": [
-      "pnpm exec prettier --write --ignore-unknown"
+      "pnpm exec oxfmt --no-error-on-unmatched-pattern"
     ],
     "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts}": [
       "pnpm exec eslint --fix --max-warnings=0 --no-warn-ignored"
diff --git a/packages/constants/package.json b/packages/constants/package.json
index abce9b95772..a72efb30917 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -4,14 +4,21 @@
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "dev": "tsdown --watch",
     "build": "tsdown",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=30",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=30",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -23,12 +30,5 @@
     "@types/react": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
-  "exports": {
-    ".": "./dist/index.mjs",
-    "./package.json": "./package.json"
   }
 }
diff --git a/packages/decorators/package.json b/packages/decorators/package.json
index a64ae40cae7..533d76c5f47 100644
--- a/packages/decorators/package.json
+++ b/packages/decorators/package.json
@@ -1,10 +1,13 @@
 {
   "name": "@plane/decorators",
   "version": "0.1.0",
+  "private": true,
   "description": "Controller and route decorators for Express.js applications",
   "license": "AGPL-3.0",
-  "private": true,
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
     "./package.json": "./package.json"
@@ -14,9 +17,9 @@
     "dev": "tsdown --watch",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=29",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=29",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
@@ -27,8 +30,5 @@
     "reflect-metadata": "^0.2.2",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts"
+  }
 }
diff --git a/packages/editor/package.json b/packages/editor/package.json
index e981bfa3f62..fe0563415e6 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,9 +1,16 @@
 {
   "name": "@plane/editor",
   "version": "1.2.0",
+  "private": true,
   "description": "Core Editor that powers Plane",
+  "keywords": [
+    "editor",
+    "markdown",
+    "nextjs",
+    "react",
+    "rich-text"
+  ],
   "license": "AGPL-3.0",
-  "private": true,
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -20,15 +27,11 @@
     "dev": "tsdown --watch",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1435",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1435",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
-  "peerDependencies": {
-    "react": "catalog:",
-    "react-dom": "catalog:"
-  },
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@floating-ui/react": "^0.26.4",
@@ -62,13 +65,13 @@
     "@tiptap/react": "^2.22.3",
     "@tiptap/starter-kit": "^2.22.3",
     "@tiptap/suggestion": "^2.22.3",
-    "lodash-es": "catalog:",
     "buffer": "^6.0.3",
     "emoji-regex": "^10.3.0",
     "highlight.js": "^11.8.0",
     "is-emoji-supported": "^0.0.5",
     "jsx-dom-cjs": "^8.0.3",
     "linkifyjs": "^4.3.2",
+    "lodash-es": "catalog:",
     "lowlight": "^3.0.0",
     "lucide-react": "catalog:",
     "prosemirror-codemark": "^0.4.2",
@@ -83,19 +86,16 @@
   "devDependencies": {
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
+    "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "@types/lodash-es": "catalog:",
     "postcss": "^8.4.38",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "keywords": [
-    "editor",
-    "rich-text",
-    "markdown",
-    "nextjs",
-    "react"
-  ]
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  }
 }
diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
index 9278e54bdf2..ba132d53aa1 100644
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@@ -110,7 +110,7 @@ function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorPro
       <div
         className={cn(
           "transition-opacity duration-200",
-          showContentSkeleton && !isLoading && "opacity-0 pointer-events-none"
+          showContentSkeleton && !isLoading && "pointer-events-none opacity-0"
         )}
       >
         <PageRenderer
diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx
index dae19748429..9171f58e89d 100644
--- a/packages/editor/src/core/components/editors/document/page-renderer.tsx
+++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@@ -61,7 +61,7 @@ export function PageRenderer(props: Props) {
   } = props;
   return (
     <div
-      className={cn("frame-renderer flex-grow w-full", {
+      className={cn("frame-renderer w-full flex-grow", {
         "wide-layout": displayConfig.wideLayout,
       })}
     >
@@ -82,7 +82,7 @@ export function PageRenderer(props: Props) {
                   editor={titleEditor}
                   id={id + "-title"}
                   tabIndex={tabIndex}
-                  className="no-scrollbar placeholder-placeholder bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
+                  className="no-scrollbar placeholder-placeholder w-full resize-none rounded-none border-none bg-transparent p-0 text-[2rem] leading-[2.375rem] font-bold tracking-[-2%] outline-none"
                 />
               </EditorContainer>
             </div>
diff --git a/packages/editor/src/core/components/editors/editor-container.tsx b/packages/editor/src/core/components/editors/editor-container.tsx
index 38600446e2e..1ab8de8d09b 100644
--- a/packages/editor/src/core/components/editors/editor-container.tsx
+++ b/packages/editor/src/core/components/editors/editor-container.tsx
@@ -168,7 +168,7 @@ export function EditorContainer(props: Props) {
         onClick={handleContainerClick}
         onMouseLeave={handleContainerMouseLeave}
         className={cn(
-          `editor-container cursor-text relative line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
+          `editor-container relative cursor-text line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
           {
             "active-editor": editor?.isFocused && editor?.isEditable,
           },
diff --git a/packages/editor/src/core/components/links/link-edit-view.tsx b/packages/editor/src/core/components/links/link-edit-view.tsx
index 3ec192f273f..3adbefa27cd 100644
--- a/packages/editor/src/core/components/links/link-edit-view.tsx
+++ b/packages/editor/src/core/components/links/link-edit-view.tsx
@@ -23,11 +23,11 @@ type InputViewProps = {
 function InputView({ label, value, placeholder, onChange, autoFocus }: InputViewProps) {
   return (
     <div className="flex flex-col gap-1">
-      <label className="inline-block font-semibold text-11 text-placeholder">{label}</label>
+      <label className="inline-block text-11 font-semibold text-placeholder">{label}</label>
       <input
         placeholder={placeholder}
         onClick={(e) => e.stopPropagation()}
-        className="w-[280px] outline-none bg-layer-1 text-primary text-13 border border-strong rounded-md p-2"
+        className="w-[280px] rounded-md border border-strong bg-layer-1 p-2 text-13 text-primary outline-none"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         autoFocus={autoFocus}
@@ -138,7 +138,7 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
   return (
     <div
       onKeyDown={handleKeyDown}
-      className="shadow-md rounded-sm p-2 flex flex-col gap-3 bg-layer-1 border-subtle border-2 animate-in fade-in translate-y-1"
+      className="shadow-md animate-in fade-in flex translate-y-1 flex-col gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2"
       style={{
         transition: "all 0.1s cubic-bezier(.55, .085, .68, .53)",
       }}
@@ -146,10 +146,10 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
     >
       <InputView label="URL" placeholder="Enter or paste URL" value={localUrl} onChange={setLocalUrl} autoFocus />
       <InputView label="Text" placeholder="Enter Text to display" value={localText} onChange={handleTextChange} />
-      <div className="mb-1 bg-strong h-[1px] w-full gap-2" />
-      <div className="flex text-13 text-secondary gap-2 items-center">
+      <div className="bg-strong mb-1 h-[1px] w-full gap-2" />
+      <div className="flex items-center gap-2 text-13 text-secondary">
         <Link2Off size={14} className="inline-block" />
-        <button onClick={removeLink} className="cursor-pointer hover:text-placeholder transition-colors">
+        <button onClick={removeLink} className="cursor-pointer transition-colors hover:text-placeholder">
           Remove Link
         </button>
       </div>
diff --git a/packages/editor/src/core/components/links/link-preview.tsx b/packages/editor/src/core/components/links/link-preview.tsx
index 50a5310d792..f47c97bd434 100644
--- a/packages/editor/src/core/components/links/link-preview.tsx
+++ b/packages/editor/src/core/components/links/link-preview.tsx
@@ -30,27 +30,27 @@ export function LinkPreview({
 
   return (
     <div
-      className="absolute left-0 top-0 max-w-max animate-in fade-in translate-y-1"
+      className="animate-in fade-in absolute top-0 left-0 max-w-max translate-y-1"
       style={{
         transition: "all 0.2s cubic-bezier(.55, .085, .68, .53)",
       }}
     >
-      <div className="shadow-md items-center rounded-sm p-2 flex gap-3 bg-layer-1 border-subtle border-2 text-tertiary text-11">
+      <div className="shadow-md flex items-center gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2 text-11 text-tertiary">
         <GlobeIcon width={14} height={14} className="inline-block" />
         <p>{url?.length > 40 ? url.slice(0, 40) + "..." : url}</p>
         <div className="flex gap-2">
-          <button onClick={copyLinkToClipboard} className="cursor-pointer hover:text-primary transition-colors">
+          <button onClick={copyLinkToClipboard} className="cursor-pointer transition-colors hover:text-primary">
             <CopyIcon width={14} height={14} className="inline-block" />
           </button>
           {editor.isEditable && (
             <>
               <button
                 onClick={() => switchView("LinkEditView")}
-                className="cursor-pointer hover:text-primary transition-colors"
+                className="cursor-pointer transition-colors hover:text-primary"
               >
                 <EditIcon width={14} height={14} className="inline-block" />
               </button>
-              <button onClick={removeLink} className="cursor-pointer hover:text-primary transition-colors">
+              <button onClick={removeLink} className="cursor-pointer transition-colors hover:text-primary">
                 <Link2Off size={14} className="inline-block" />
               </button>
             </>
diff --git a/packages/editor/src/core/components/menus/ai-menu.tsx b/packages/editor/src/core/components/menus/ai-menu.tsx
index d27125b9906..5a046d8168c 100644
--- a/packages/editor/src/core/components/menus/ai-menu.tsx
+++ b/packages/editor/src/core/components/menus/ai-menu.tsx
@@ -88,8 +88,8 @@ export function AIFeaturesMenu(props: Props) {
 
   return (
     <div
-      className={cn("opacity-0 pointer-events-none fixed inset-0 size-full z-10 transition-opacity", {
-        "opacity-100 pointer-events-auto": isPopupVisible,
+      className={cn("pointer-events-none fixed inset-0 z-10 size-full opacity-0 transition-opacity", {
+        "pointer-events-auto opacity-100": isPopupVisible,
       })}
     >
       <div ref={menuRef} className="z-10">
diff --git a/packages/editor/src/core/components/menus/block-menu.tsx b/packages/editor/src/core/components/menus/block-menu.tsx
index c104eeac150..367f741b56d 100644
--- a/packages/editor/src/core/components/menus/block-menu.tsx
+++ b/packages/editor/src/core/components/menus/block-menu.tsx
@@ -223,8 +223,8 @@ export function BlockMenu(props: Props) {
         }}
         className={cn(
           "max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-raised-200",
-          "transition-all duration-300 transform origin-top-right",
-          isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
+          "origin-top-right transform transition-all duration-300",
+          isAnimatedIn ? "scale-100 opacity-100" : "scale-75 opacity-0"
         )}
         {...getFloatingProps()}
       >
diff --git a/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
index cc1aaffcaff..0bfad5a6717 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
@@ -75,7 +75,7 @@ export function TextAlignmentSelector(props: Props) {
             item.command();
           }}
           className={cn(
-            "size-7 grid place-items-center rounded-sm text-tertiary hover:bg-layer-1 active:bg-layer-1 transition-colors",
+            "grid size-7 place-items-center rounded-sm text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
             {
               "bg-layer-1 text-primary": item.isActive(),
             }
diff --git a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
index 16bb7a47f64..cc1c2a8bb36 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
@@ -42,7 +42,7 @@ export function BubbleMenuColorSelector(props: Props) {
         <>
           <span>Color</span>
           <span
-            className={cn("flex-shrink-0 size-6 grid place-items-center rounded-sm border-[0.5px] border-strong", {
+            className={cn("grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong", {
               "bg-surface-1": !activeBackgroundColor,
             })}
             style={{
@@ -64,15 +64,15 @@ export function BubbleMenuColorSelector(props: Props) {
       getFloatingProps={getFloatingProps}
       getReferenceProps={getReferenceProps}
     >
-      <section className="mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 space-y-2 shadow-raised-200">
+      <section className="mt-1 space-y-2 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
         <div className="space-y-1.5">
-          <p className="text-11 text-tertiary font-semibold">Text colors</p>
+          <p className="text-11 font-semibold text-tertiary">Text colors</p>
           <div className="flex items-center gap-2">
             {COLORS_LIST.map((color) => (
               <button
                 key={color.key}
                 type="button"
-                className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                 style={{
                   backgroundColor: color.textColor,
                 }}
@@ -81,7 +81,7 @@ export function BubbleMenuColorSelector(props: Props) {
             ))}
             <button
               type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
               onClick={() => TextColorItem(editor).command({ color: undefined })}
             >
               <Ban className="size-4" />
@@ -89,13 +89,13 @@ export function BubbleMenuColorSelector(props: Props) {
           </div>
         </div>
         <div className="space-y-1.5">
-          <p className="text-11 text-tertiary font-semibold">Background colors</p>
+          <p className="text-11 font-semibold text-tertiary">Background colors</p>
           <div className="flex items-center gap-2">
             {COLORS_LIST.map((color) => (
               <button
                 key={color.key}
                 type="button"
-                className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                 style={{
                   backgroundColor: color.backgroundColor,
                 }}
@@ -104,7 +104,7 @@ export function BubbleMenuColorSelector(props: Props) {
             ))}
             <button
               type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
               onClick={() => BackgroundColorItem(editor).command({ color: undefined })}
             >
               <Ban className="size-4" />
diff --git a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
index 78233c25a80..46491412433 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
@@ -53,7 +53,7 @@ export function BubbleMenuLinkSelector(props: Props) {
       classNames={{
         buttonContainer: "h-full",
         button: cn(
-          "h-full flex items-center gap-1 px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm whitespace-nowrap transition-colors",
+          "flex h-full items-center gap-1 rounded-sm px-3 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
           {
             "bg-layer-1": context.open,
             "text-primary": editor.isActive(CORE_EXTENSIONS.CUSTOM_LINK),
@@ -65,14 +65,14 @@ export function BubbleMenuLinkSelector(props: Props) {
       menuButton={
         <>
           Link
-          <LinkIcon className="shrink-0 size-3" />
+          <LinkIcon className="size-3 shrink-0" />
         </>
       }
       options={options}
     >
-      <div className="w-60 mt-1 rounded-md bg-surface-1 shadow-raised-200">
+      <div className="mt-1 w-60 rounded-md bg-surface-1 shadow-raised-200">
         <div
-          className={cn("flex rounded-sm  border-[0.5px] border-strong transition-colors", {
+          className={cn("flex rounded-sm border-[0.5px] border-strong transition-colors", {
             "border-danger-strong": error,
           })}
         >
@@ -81,7 +81,7 @@ export function BubbleMenuLinkSelector(props: Props) {
             type="url"
             placeholder="Enter or paste a link"
             onClick={(e) => e.stopPropagation()}
-            className="flex-1 border-r-[0.5px] border-strong bg-surface-1 py-2 px-1.5 text-11 outline-none placeholder:text-placeholder rounded-sm"
+            className="flex-1 rounded-sm border-r-[0.5px] border-strong bg-surface-1 px-1.5 py-2 text-11 outline-none placeholder:text-placeholder"
             defaultValue={editor.getAttributes("link").href || ""}
             onKeyDown={(e) => {
               setError(false);
@@ -96,7 +96,7 @@ export function BubbleMenuLinkSelector(props: Props) {
           {editor.getAttributes("link").href ? (
             <button
               type="button"
-              className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-subtle-hover transition-all"
+              className="grid place-items-center rounded-xs p-1 text-danger-primary transition-all hover:bg-danger-subtle-hover"
               onClick={(e) => {
                 unsetLinkEditor(editor);
                 e.stopPropagation();
@@ -108,7 +108,7 @@ export function BubbleMenuLinkSelector(props: Props) {
           ) : (
             <button
               type="button"
-              className="h-full aspect-square grid place-items-center p-1 rounded-xs text-tertiary hover:bg-layer-1 transition-all"
+              className="grid aspect-square h-full place-items-center rounded-xs p-1 text-tertiary transition-all hover:bg-layer-1"
               onClick={(e) => {
                 e.stopPropagation();
                 handleLinkSubmit();
@@ -119,7 +119,7 @@ export function BubbleMenuLinkSelector(props: Props) {
           )}
         </div>
         {error && (
-          <p className="text-11 text-danger-primary my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
+          <p className="animate-in fade-in slide-in-from-top-0 pointer-events-none my-1 px-2 text-11 text-danger-primary">
             Please enter a valid URL
           </p>
         )}
diff --git a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
index 8693680a640..20229ace53a 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
@@ -65,7 +65,7 @@ export function BubbleMenuNodeSelector(props: Props) {
       classNames={{
         buttonContainer: "h-full",
         button: cn(
-          "h-full flex items-center gap-1 px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm whitespace-nowrap transition-colors",
+          "flex h-full items-center gap-1 rounded-sm px-3 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
           {
             "bg-layer-1": context.open,
           }
@@ -74,14 +74,14 @@ export function BubbleMenuNodeSelector(props: Props) {
       menuButton={
         <>
           <span>{activeItem?.name}</span>
-          <ChevronDownIcon className="shrink-0 size-3" />
+          <ChevronDownIcon className="size-3 shrink-0" />
         </>
       }
       options={options}
       getFloatingProps={getFloatingProps}
       getReferenceProps={getReferenceProps}
     >
-      <section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200">
+      <section className="mt-1 flex max-h-[90vh] w-48 flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200">
         {items.map((item) => (
           <button
             key={item.name}
@@ -102,7 +102,7 @@ export function BubbleMenuNodeSelector(props: Props) {
               <item.icon className="size-3 flex-shrink-0" />
               <span>{item.name}</span>
             </div>
-            {activeItem.name === item.name && <CheckIcon className="size-3 text-tertiary flex-shrink-0" />}
+            {activeItem.name === item.name && <CheckIcon className="size-3 flex-shrink-0 text-tertiary" />}
           </button>
         ))}
       </section>
diff --git a/packages/editor/src/core/components/menus/bubble-menu/root.tsx b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
index 0c4efd36075..8aa1d90a664 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/root.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
@@ -192,7 +192,7 @@ export function EditorBubbleMenu(props: Props) {
       {!isSelecting && (
         <div
           ref={menuRef}
-          className="flex py-2 divide-x divide-subtle-1 rounded-lg border border-subtle bg-surface-1 shadow-raised-200 overflow-x-scroll horizontal-scrollbar scrollbar-xs"
+          className="horizontal-scrollbar flex scrollbar-xs divide-x divide-subtle-1 overflow-x-scroll rounded-lg border border-subtle bg-surface-1 py-2 shadow-raised-200"
         >
           <div className="px-2">
             <BubbleMenuNodeSelector editor={editor} />
@@ -217,7 +217,7 @@ export function EditorBubbleMenu(props: Props) {
                   e.stopPropagation();
                 }}
                 className={cn(
-                  "size-7 grid place-items-center rounded-sm text-tertiary hover:bg-layer-1 active:bg-layer-1 transition-colors",
+                  "grid size-7 place-items-center rounded-sm text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
                   {
                     "bg-layer-1 text-primary": editorState[item.key],
                   }
diff --git a/packages/editor/src/core/extensions/callout/block.tsx b/packages/editor/src/core/extensions/callout/block.tsx
index 7e626de043a..4d1fb211f8f 100644
--- a/packages/editor/src/core/extensions/callout/block.tsx
+++ b/packages/editor/src/core/extensions/callout/block.tsx
@@ -36,7 +36,7 @@ export function CustomCalloutBlock(props: CustomCalloutNodeViewProps) {
   return (
     <NodeViewWrapper
       key={node.attrs[ECalloutAttributeNames.ID]}
-      className="editor-callout-component group/callout-node relative bg-layer-3 rounded-lg text-primary p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
+      className="editor-callout-component group/callout-node relative my-2 flex items-start gap-4 rounded-lg bg-layer-3 p-4 break-words text-primary transition-colors duration-500"
       style={{
         backgroundColor: activeBackgroundColor,
       }}
diff --git a/packages/editor/src/core/extensions/callout/color-selector.tsx b/packages/editor/src/core/extensions/callout/color-selector.tsx
index 24e805cebaf..a51e2f4eab9 100644
--- a/packages/editor/src/core/extensions/callout/color-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/color-selector.tsx
@@ -28,9 +28,9 @@ export function CalloutBlockColorSelector(props: Props) {
 
   return (
     <div
-      className={cn("opacity-0 pointer-events-none absolute top-2 right-2 z-10 transition-opacity", {
-        "group-hover/callout-node:opacity-100 group-hover/callout-node:pointer-events-auto": !disabled,
-        "opacity-100 pointer-events-auto": isOpen,
+      className={cn("pointer-events-none absolute top-2 right-2 z-10 opacity-0 transition-opacity", {
+        "group-hover/callout-node:pointer-events-auto group-hover/callout-node:opacity-100": !disabled,
+        "pointer-events-auto opacity-100": isOpen,
       })}
       contentEditable={false}
     >
@@ -42,7 +42,7 @@ export function CalloutBlockColorSelector(props: Props) {
             e.stopPropagation();
           }}
           className={cn(
-            "flex items-center gap-1 h-full whitespace-nowrap py-1 px-2.5 text-13 font-medium text-tertiary hover:bg-layer-1-hover active:bg-layer-1-active rounded-sm transition-colors",
+            "flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1-hover active:bg-layer-1-active",
             {
               "bg-layer-1": isOpen,
             }
@@ -50,16 +50,16 @@ export function CalloutBlockColorSelector(props: Props) {
           disabled={disabled}
         >
           <span className="text-12">Color</span>
-          <ChevronDownIcon className="flex-shrink-0 size-3" />
+          <ChevronDownIcon className="size-3 flex-shrink-0" />
         </button>
         {isOpen && (
-          <section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200 animate-in fade-in slide-in-from-top-1">
+          <section className="animate-in fade-in slide-in-from-top-1 absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
             <div className="flex items-center gap-2">
               {COLORS_LIST.map((color) => (
                 <button
                   key={color.key}
                   type="button"
-                  className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
+                  className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                   style={{
                     backgroundColor: color.backgroundColor,
                   }}
@@ -68,7 +68,7 @@ export function CalloutBlockColorSelector(props: Props) {
               ))}
               <button
                 type="button"
-                className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1-hover transition-colors"
+                className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1-hover"
                 onClick={() => handleColorSelect(null)}
               >
                 <Ban className="size-4" />
diff --git a/packages/editor/src/core/extensions/callout/logo-selector.tsx b/packages/editor/src/core/extensions/callout/logo-selector.tsx
index 365f0d5775f..a12c1373f98 100644
--- a/packages/editor/src/core/extensions/callout/logo-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/logo-selector.tsx
@@ -42,8 +42,8 @@ export function CalloutBlockLogoSelector(props: Props) {
         closeOnSelect={true}
         isOpen={isOpen}
         handleToggle={handleOpen}
-        className="flex-shrink-0 grid place-items-center"
-        buttonClassName={cn("flex-shrink-0 size-8 grid place-items-center rounded-lg text-primary", {
+        className="grid flex-shrink-0 place-items-center"
+        buttonClassName={cn("grid size-8 flex-shrink-0 place-items-center rounded-lg text-primary", {
           "hover:bg-layer-1-hover": !disabled,
         })}
         label={<Logo logo={logoValue} size={18} type="lucide" />}
diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index d35bdfacc0b..6df877d44b6 100644
--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@@ -45,12 +45,12 @@ export function CodeBlockComponent({ node }: Props) {
   };
 
   return (
-    <NodeViewWrapper key={attrs[ECodeBlockAttributeNames.ID]} className="code-block relative group/code">
+    <NodeViewWrapper key={attrs[ECodeBlockAttributeNames.ID]} className="code-block group/code relative">
       <Tooltip tooltipContent="Copy code">
         <button
           type="button"
           className={cn(
-            "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
+            "group/button absolute top-2 right-2 z-10 hidden size-8 items-center justify-center rounded-md border border-subtle bg-layer-1 backdrop-blur-sm transition duration-150 ease-in-out group-hover/code:flex",
             {
               "bg-success-subtle hover:bg-success-subtle-1 active:bg-success-subtle-1": copied,
             }
@@ -65,7 +65,7 @@ export function CodeBlockComponent({ node }: Props) {
         </button>
       </Tooltip>
 
-      <pre className="bg-layer-3 text-primary rounded-lg p-4 my-2">
+      <pre className="my-2 rounded-lg bg-layer-3 p-4 text-primary">
         <NodeViewContent as="code" className="whitespace-pre-wrap" />
       </pre>
     </NodeViewWrapper>
diff --git a/packages/editor/src/core/extensions/custom-image/components/block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
index be1b07e86ce..4d6793a0793 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -245,7 +245,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
         }}
       >
         {showImageLoader && (
-          <div className="animate-pulse bg-layer-1 rounded-md" style={{ width: size.width, height: size.height }} />
+          <div className="animate-pulse rounded-md bg-layer-1" style={{ width: size.width, height: size.height }} />
         )}
         <img
           ref={imageRef}
@@ -294,7 +294,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
             // hide the image while the background calculations of the image loader are in progress (to avoid flickering) and show the loader until then
             hidden: showImageLoader,
             "read-only-image": !editor.isEditable,
-            "blur-sm opacity-80 loading-image": !resolvedImageSrc,
+            "loading-image opacity-80 blur-sm": !resolvedImageSrc,
           })}
           style={{
             width: size.width,
@@ -320,13 +320,13 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
           />
         )}
         {selected && displayedImageSrc === resolvedImageSrc && (
-          <div className="absolute inset-0 size-full bg-accent-primary/30 pointer-events-none" />
+          <div className="pointer-events-none absolute inset-0 size-full bg-accent-primary/30" />
         )}
         {showImageResizer && (
           <>
             <div
               className={cn(
-                "absolute inset-0 border-2 border-accent-strong pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
+                "pointer-events-none absolute inset-0 rounded-md border-2 border-accent-strong transition-opacity duration-100 ease-in-out",
                 {
                   "opacity-100": isResizing,
                   "opacity-0 group-hover/image-component:opacity-100": !isResizing,
@@ -335,10 +335,10 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
             />
             <div
               className={cn(
-                "absolute bottom-0 translate-y-1/2 size-4 rounded-full bg-accent-primary border-2 border-white transition-opacity duration-100 ease-in-out",
+                "absolute bottom-0 size-4 translate-y-1/2 rounded-full border-2 border-white bg-accent-primary transition-opacity duration-100 ease-in-out",
                 {
-                  "opacity-100 pointer-events-auto": isResizing,
-                  "opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto":
+                  "pointer-events-auto opacity-100": isResizing,
+                  "pointer-events-none opacity-0 group-hover/image-component:pointer-events-auto group-hover/image-component:opacity-100":
                     !isResizing,
                   "left-0 -translate-x-1/2 cursor-nesw-resize": nodeAlignment === "right",
                   "right-0 translate-x-1/2 cursor-nwse-resize": nodeAlignment !== "right",
diff --git a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
index 210570ca74d..6e4104f0616 100644
--- a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
@@ -138,7 +138,7 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
 
   return (
     <NodeViewWrapper key={node.attrs[ECustomImageAttributeNames.ID]}>
-      <div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
+      <div className="mx-0 my-2 p-0" data-drag-handle ref={imageComponentRef}>
         {shouldShowBlock && !hasDuplicationFailed ? (
           <CustomImageBlock
             editorContainer={editorContainer}
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
index fbbf914d87d..ecdcf0c6ea9 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@@ -36,24 +36,24 @@ export function ImageAlignmentAction(props: Props) {
   }, [isDropdownOpen, toggleToolbarViewStatus]);
 
   return (
-    <div ref={dropdownRef} className="h-full relative">
+    <div ref={dropdownRef} className="relative h-full">
       <Tooltip disabled={isTouchDevice} tooltipContent="Align">
         <button
           type="button"
-          className="h-full flex items-center gap-1 text-white/60 hover:text-white transition-colors"
+          className="flex h-full items-center gap-1 text-white/60 transition-colors hover:text-white"
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
-          {activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
-          <ChevronDownIcon className="flex-shrink-0 size-2" />
+          {activeAlignmentDetails && <activeAlignmentDetails.icon className="size-3 flex-shrink-0" />}
+          <ChevronDownIcon className="size-2 flex-shrink-0" />
         </button>
       </Tooltip>
       {isDropdownOpen && (
-        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded-sm">
+        <div className="absolute top-full left-1/2 mt-0.5 flex h-7 -translate-x-1/2 items-center gap-2 rounded-sm bg-black/80 px-2">
           {IMAGE_ALIGNMENT_OPTIONS.map((option) => (
             <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
               <button
                 type="button"
-                className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+                className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
                 onClick={() => {
                   handleChange(option.value);
                   setIsDropdownOpen(false);
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
index 10b9f371a5b..772ddd0fb99 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
@@ -20,7 +20,7 @@ export function ImageDownloadAction(props: Props) {
       <button
         type="button"
         onClick={() => window.open(src, "_blank")}
-        className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+        className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
         aria-label="Download image"
       >
         <Download className="size-3" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index 1d6d063c36f..044607e9ecd 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -199,8 +199,8 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
 
   return (
     <div
-      className={cn("fixed inset-0 size-full z-50 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
-        "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
+      className={cn("pointer-events-none fixed inset-0 z-50 size-full bg-black/90 opacity-0 transition-opacity", {
+        "editor-image-full-screen-modal pointer-events-auto opacity-100": isFullScreenEnabled,
         "cursor-default": !isDragging,
         "cursor-grabbing": isDragging,
       })}
@@ -211,15 +211,15 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
       <div
         ref={modalRef}
         onMouseDown={(e) => e.target === modalRef.current && handleClose()}
-        className="relative size-full grid place-items-center overflow-hidden"
+        className="relative grid size-full place-items-center overflow-hidden"
       >
         <button
           type="button"
           onClick={handleClose}
-          className="absolute top-10 right-10 size-8 grid place-items-center"
+          className="absolute top-10 right-10 grid size-8 place-items-center"
           aria-label="Close image viewer"
         >
-          <CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
+          <CloseIcon className="size-8 text-white/60 transition-colors hover:text-white" />
         </button>
         <img
           ref={setImageRef}
@@ -237,7 +237,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
           }}
           onMouseDown={handleMouseDown}
         />
-        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-black">
+        <div className="fixed bottom-10 left-1/2 flex -translate-x-1/2 items-center justify-center gap-1 divide-x divide-subtle-1 rounded-md border border-subtle-1 bg-black py-2">
           <div className="flex items-center">
             <button
               type="button"
@@ -248,13 +248,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
                 }
                 handleMagnification("decrease");
               }}
-              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+              className="grid size-6 place-items-center text-white/60 transition-colors duration-200 hover:text-white disabled:text-white/30"
               disabled={magnification <= MIN_ZOOM}
               aria-label="Zoom out"
             >
               <Minus className="size-4" />
             </button>
-            <span className="text-13 w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
+            <span className="w-12 text-center text-13 text-white">{Math.round(100 * magnification)}%</span>
             <button
               type="button"
               onClick={(e) => {
@@ -264,7 +264,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
                 }
                 handleMagnification("increase");
               }}
-              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+              className="grid size-6 place-items-center text-white/60 transition-colors duration-200 hover:text-white disabled:text-white/30"
               disabled={magnification >= MAX_ZOOM}
               aria-label="Zoom in"
             >
@@ -275,7 +275,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
             <button
               type="button"
               onClick={() => window.open(downloadSrc, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+              className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
               aria-label="Download image"
             >
               <Download className="size-4" />
@@ -285,7 +285,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
             <button
               type="button"
               onClick={() => window.open(src, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+              className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
               aria-label="Open image in new tab"
             >
               <NewTabIcon className="size-4" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
index 6ed360a535c..79e116a3b8f 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -53,7 +53,7 @@ export function ImageFullScreenActionRoot(props: Props) {
             e.stopPropagation();
             setIsFullScreenEnabled(true);
           }}
-          className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
+          className="grid h-full flex-shrink-0 place-items-center text-on-color/60 transition-colors hover:text-on-color"
           aria-label="View image in full screen"
         >
           <Maximize className="size-3" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index cb5e07b12ce..51c7f841012 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -37,9 +37,9 @@ export function ImageToolbarRoot(props: Props) {
     <>
       <div
         className={cn(
-          "absolute top-1 right-1 h-7 z-20 bg-black/80 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
+          "pointer-events-none absolute top-1 right-1 z-20 flex h-7 items-center gap-2 rounded-sm bg-black/80 px-2 opacity-0 transition-opacity group-hover/image-component:pointer-events-auto group-hover/image-component:opacity-100",
           {
-            "opacity-100 pointer-events-auto": shouldShowToolbar,
+            "pointer-events-auto opacity-100": shouldShowToolbar,
           }
         )}
       >
diff --git a/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx b/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
index 3684c40d2b0..53191180b6d 100644
--- a/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
@@ -59,7 +59,7 @@ export function ImageUploadStatus(props: Props) {
   if (uploadStatus === undefined) return null;
 
   return (
-    <div className="absolute top-1 right-1 z-20 bg-black/60 rounded-sm text-11 font-medium w-10 text-center">
+    <div className="absolute top-1 right-1 z-20 w-10 rounded-sm bg-black/60 text-center text-11 font-medium">
       {displayStatus}%
     </div>
   );
diff --git a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
index b7f6bbc6f04..13dd5a4ba5b 100644
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -211,15 +211,15 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
   return (
     <div
       className={cn(
-        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-tertiary bg-layer-3 border border-dashed transition-all duration-200 ease-in-out cursor-default",
+        "image-upload-component flex cursor-default items-center justify-start gap-2 rounded-lg border border-dashed bg-layer-3 px-2 py-3 text-tertiary transition-all duration-200 ease-in-out",
         {
           "border-subtle": !(selected && editor.isEditable && !isErrorState),
-          "hover:text-secondary hover:bg-layer-3-hover cursor-pointer": editor.isEditable && !isErrorState,
+          "cursor-pointer hover:bg-layer-3-hover hover:text-secondary": editor.isEditable && !isErrorState,
           "bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
-          "text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
+          "bg-accent-primary/10 text-accent-secondary hover:bg-accent-primary/10 hover:text-accent-secondary":
             selected && editor.isEditable && !isErrorState,
-          "text-danger-primary bg-danger-subtle cursor-default": isErrorState,
-          "hover:text-danger-primary hover:bg-danger-subtle-hover": isErrorState && editor.isEditable,
+          "cursor-default bg-danger-subtle text-danger-primary": isErrorState,
+          "hover:bg-danger-subtle-hover hover:text-danger-primary": isErrorState && editor.isEditable,
           "bg-danger-subtle-selected": isErrorState && selected,
           "hover:bg-danger-subtle-active": isErrorState && selected && editor.isEditable,
         }
@@ -236,13 +236,13 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
       }}
     >
       <ImageIcon className="size-4" />
-      <div className="text-14 font-medium flex-1">{getDisplayMessage()}</div>
+      <div className="flex-1 text-14 font-medium">{getDisplayMessage()}</div>
       {hasDuplicationFailed && editor.isEditable && (
         <button
           type="button"
           onClick={handleRetryClick}
           className={cn(
-            "flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
+            "flex items-center gap-1 rounded-md px-2 py-1 font-medium text-danger-primary transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
             {
               "hover:bg-danger-subtle-hover": selected,
             }
diff --git a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
index 8436422646a..318979b4b1f 100644
--- a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
+++ b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
@@ -130,9 +130,9 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
       <div
         ref={dropdownContainerRef}
         className={cn(
-          "relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2 opacity-0 invisible transition-opacity",
+          "invisible relative max-h-80 w-[14rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 opacity-0 shadow-raised-200 transition-opacity",
           {
-            "opacity-100 visible": isVisible,
+            "visible opacity-100": isVisible,
           }
         )}
         style={{
@@ -156,7 +156,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
                 id={`emoji-item-${index}`}
                 type="button"
                 className={cn(
-                  "flex items-center gap-2 w-full rounded-sm px-2 py-1.5 text-13 text-left truncate text-secondary hover:bg-layer-1-hover transition-colors duration-150",
+                  "flex w-full items-center gap-2 truncate rounded-sm px-2 py-1.5 text-left text-13 text-secondary transition-colors duration-150 hover:bg-layer-1-hover",
                   {
                     "bg-layer-1-hover": isSelected,
                   }
@@ -164,7 +164,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
                 onClick={() => selectItem(index)}
                 onMouseEnter={() => setSelectedIndex(index)}
               >
-                <span className="size-5 grid place-items-center flex-shrink-0 text-14">{item.emoji}</span>
+                <span className="grid size-5 flex-shrink-0 place-items-center text-14">{item.emoji}</span>
                 <span className="flex-grow truncate">
                   <span className="font-medium">:{item.name}:</span>
                 </span>
@@ -172,7 +172,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
             );
           })
         ) : (
-          <div className="text-center text-13 text-placeholder py-2">No emojis found</div>
+          <div className="py-2 text-center text-13 text-placeholder">No emojis found</div>
         )}
       </div>
     </>
diff --git a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
index 79450ae8db6..37f7864842e 100644
--- a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
+++ b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
@@ -146,7 +146,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
       />
       <div
         ref={dropdownContainer}
-        className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
+        className="relative max-h-80 w-[14rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
         style={{
           zIndex: 100,
         }}
@@ -172,7 +172,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
                     id={`mention-item-${sectionIndex}-${itemIndex}`}
                     type="button"
                     className={cn(
-                      "flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1-hover",
+                      "flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1-hover",
                       {
                         "bg-layer-1-hover": isSelected,
                       }
@@ -189,9 +189,9 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
                       })
                     }
                   >
-                    <span className="size-5 grid place-items-center flex-shrink-0">{item.icon}</span>
+                    <span className="grid size-5 flex-shrink-0 place-items-center">{item.icon}</span>
                     {item.subTitle && (
-                      <h5 className="whitespace-nowrap text-11 text-tertiary flex-shrink-0">{item.subTitle}</h5>
+                      <h5 className="flex-shrink-0 text-11 whitespace-nowrap text-tertiary">{item.subTitle}</h5>
                     )}
                     <p className="flex-grow truncate">{item.title}</p>
                   </button>
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
index 08a09f6b93e..88a39990a5a 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
@@ -54,7 +54,7 @@ export function CommandMenuItem(props: Props) {
       type="button"
       id={`item-${sectionIndex}-${itemIndex}`}
       className={cn(
-        "flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-13 text-left truncate text-secondary hover:bg-layer-1-hover",
+        "flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-13 text-secondary hover:bg-layer-1-hover",
         {
           "bg-layer-1-hover": isSelected,
         }
@@ -62,7 +62,7 @@ export function CommandMenuItem(props: Props) {
       onClick={onClick}
       onMouseEnter={onMouseEnter}
     >
-      <span className="size-5 grid place-items-center flex-shrink-0" style={item.iconContainerStyle}>
+      <span className="grid size-5 flex-shrink-0 place-items-center" style={item.iconContainerStyle}>
         {item.icon}
       </span>
       <p className="flex-grow truncate text-12">{query ? highlightMatch(item.title, query) : item.title}</p>
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
index aa70805578d..2655c327823 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
@@ -137,7 +137,7 @@ export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: Sl
       <div
         id="slash-command"
         ref={commandListContainer}
-        className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
+        className="relative max-h-80 min-w-[12rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
         style={{
           zIndex: 100,
         }}
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
index eacd7e13ae0..ae555bba82d 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
@@ -49,23 +49,23 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
       <Disclosure.Button
         as="button"
         type="button"
-        className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
       >
         {({ open }) => (
           <>
             <span className="flex items-center gap-2">
-              <Palette className="shrink-0 size-3" />
+              <Palette className="size-3 shrink-0" />
               Color
             </span>
             <ChevronRightIcon
-              className={cn("shrink-0 size-3 transition-transform duration-200", {
+              className={cn("size-3 shrink-0 transition-transform duration-200", {
                 "rotate-90": open,
               })}
             />
           </>
         )}
       </Disclosure.Button>
-      <Disclosure.Panel className="p-1 space-y-2 mb-1.5">
+      <Disclosure.Panel className="mb-1.5 space-y-2 p-1">
         {/* <div className="space-y-1.5">
           <p className="text-11 text-tertiary font-semibold">Text colors</p>
           <div className="flex items-center flex-wrap gap-2">
@@ -90,13 +90,13 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
           </div>
         </div> */}
         <div className="space-y-1">
-          <p className="text-11 text-tertiary font-semibold">Background colors</p>
-          <div className="flex items-center flex-wrap gap-2">
+          <p className="text-11 font-semibold text-tertiary">Background colors</p>
+          <div className="flex flex-wrap items-center gap-2">
             {COLORS_LIST.map((color) => (
               <button
                 key={color.key}
                 type="button"
-                className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
                 style={{
                   backgroundColor: color.backgroundColor,
                 }}
@@ -108,7 +108,7 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
             ))}
             <button
               type="button"
-              className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1-hover transition-colors"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1-hover"
               onClick={() => {
                 handleBackgroundColorChange(editor, null);
                 onSelect(null);
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index a3d31b8dd23..676d3719211 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -224,14 +224,14 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
 
   return (
     <>
-      <div className="table-col-handle-container absolute z-20 top-0 left-0 flex justify-center items-center w-full -translate-y-1/2">
+      <div className="table-col-handle-container absolute top-0 left-0 z-20 flex w-full -translate-y-1/2 items-center justify-center">
         <button
           ref={refs.setReference}
           {...getReferenceProps()}
           type="button"
           onMouseDown={handleMouseDown}
-          className={cn("px-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
-            "!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
+          className={cn("rounded-sm border border-strong-1 bg-layer-1 px-1 transition-all duration-200 outline-none", {
+            "border-accent-strong bg-accent-primary !opacity-100": isDropdownOpen,
             "hover:bg-layer-1-hover": !isDropdownOpen,
           })}
         >
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
index 7e3ca9b5426..f1c0ee3e7f8 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
@@ -75,7 +75,7 @@ export function ColumnOptionsDropdown(props: Props) {
     <>
       <button
         type="button"
-        className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -84,7 +84,7 @@ export function ColumnOptionsDropdown(props: Props) {
         }}
       >
         <div className="flex-grow truncate">Header column</div>
-        <ToggleRight className="shrink-0 size-3" />
+        <ToggleRight className="size-3 shrink-0" />
       </button>
       <hr className="my-2 border-subtle" />
       <TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
@@ -92,7 +92,7 @@ export function ColumnOptionsDropdown(props: Props) {
         <button
           key={item.key}
           type="button"
-          className="flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
+          className="flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -100,7 +100,7 @@ export function ColumnOptionsDropdown(props: Props) {
             onClose();
           }}
         >
-          <item.icon className="shrink-0 size-3" />
+          <item.icon className="size-3 shrink-0" />
           <div className="flex-grow truncate">{item.label}</div>
         </button>
       ))}
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index 0c069c81f8e..ef038f99518 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -223,18 +223,18 @@ export function RowDragHandle(props: RowDragHandleProps) {
 
   return (
     <>
-      <div className="table-row-handle-container absolute z-20 top-0 left-0 flex justify-center items-center h-full -translate-x-1/2">
+      <div className="table-row-handle-container absolute top-0 left-0 z-20 flex h-full -translate-x-1/2 items-center justify-center">
         <button
           ref={refs.setReference}
           {...getReferenceProps()}
           type="button"
           onMouseDown={handleMouseDown}
-          className={cn("py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
-            "!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
+          className={cn("rounded-sm border border-strong-1 bg-layer-1 py-1 transition-all duration-200 outline-none", {
+            "border-accent-strong bg-accent-primary !opacity-100": isDropdownOpen,
             "hover:bg-layer-1-hover": !isDropdownOpen,
           })}
         >
-          <Ellipsis className="size-4 text-primary rotate-90" />
+          <Ellipsis className="size-4 rotate-90 text-primary" />
         </button>
       </div>
       {isDropdownOpen && (
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
index 0e0bd1774d5..6359adffac4 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
@@ -75,7 +75,7 @@ export function RowOptionsDropdown(props: Props) {
     <>
       <button
         type="button"
-        className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -84,7 +84,7 @@ export function RowOptionsDropdown(props: Props) {
         }}
       >
         <div className="flex-grow truncate">Header row</div>
-        <ToggleRight className="shrink-0 size-3" />
+        <ToggleRight className="size-3 shrink-0" />
       </button>
       <hr className="my-2 border-subtle" />
       <TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
@@ -92,7 +92,7 @@ export function RowOptionsDropdown(props: Props) {
         <button
           key={item.key}
           type="button"
-          className="flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
+          className="flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -100,7 +100,7 @@ export function RowOptionsDropdown(props: Props) {
             onClose();
           }}
         >
-          <item.icon className="shrink-0 size-3" />
+          <item.icon className="size-3 shrink-0" />
           <div className="flex-grow truncate">{item.label}</div>
         </button>
       ))}
diff --git a/packages/editor/src/core/helpers/common.ts b/packages/editor/src/core/helpers/common.ts
index 614578cbdf7..1139bb72f5f 100644
--- a/packages/editor/src/core/helpers/common.ts
+++ b/packages/editor/src/core/helpers/common.ts
@@ -19,10 +19,10 @@ type EditorClassNameArgs = {
 
 export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassName }: EditorClassNameArgs) =>
   cn(
-    "w-full max-w-full sm:rounded-lg focus:outline-none focus:border-0",
+    "w-full max-w-full focus:border-0 focus:outline-none sm:rounded-lg",
     {
       "border border-subtle-1": !noBorder,
-      "focus:border border-strong": borderOnFocus,
+      "border-strong focus:border": borderOnFocus,
     },
     containerClassName
   );
diff --git a/packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts b/packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts
index b62f2172b9d..c81588df49a 100644
--- a/packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts
+++ b/packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts
@@ -11,10 +11,7 @@ import { CORE_EXTENSIONS } from "@/constants/extension";
 
 type Direction = "up" | "down";
 
-export const insertEmptyParagraphAtNodeBoundaries: (
-  direction: Direction,
-  nodeType: string
-) => KeyboardShortcutCommand =
+export const insertEmptyParagraphAtNodeBoundaries: (direction: Direction, nodeType: string) => KeyboardShortcutCommand =
   (direction, nodeType) =>
   ({ editor }) => {
     try {
diff --git a/packages/editor/src/core/props.ts b/packages/editor/src/core/props.ts
index 91338683f6e..4eb4dad50ab 100644
--- a/packages/editor/src/core/props.ts
+++ b/packages/editor/src/core/props.ts
@@ -21,7 +21,7 @@ export const CoreEditorProps = (props: TArgs): EditorProps => {
   return {
     attributes: {
       class: cn(
-        "prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none",
+        "prose-brand prose-headings:font-display font-default max-w-full prose focus:outline-none",
         editorClassName
       ),
     },
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 70426b8a75f..472c4c9fc10 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,10 +1,13 @@
 {
   "name": "@plane/hooks",
   "version": "1.2.0",
-  "license": "AGPL-3.0",
-  "description": "React hooks that are shared across multiple apps internally",
   "private": true,
+  "description": "React hooks that are shared across multiple apps internally",
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,9 +20,9 @@
     "dev": "tsdown --watch",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=60",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=60",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -31,8 +34,5 @@
     "@types/react": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  }
 }
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 79838073f87..2d6dfbcbd78 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,10 +1,13 @@
 {
   "name": "@plane/i18n",
   "version": "1.2.0",
-  "license": "AGPL-3.0",
-  "description": "I18n shared across multiple apps internally",
   "private": true,
+  "description": "I18n shared across multiple apps internally",
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,9 +20,9 @@
     "build": "tsdown",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=51",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=51",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -37,8 +40,5 @@
     "@types/react": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  }
 }
diff --git a/packages/logger/package.json b/packages/logger/package.json
index 8511deba6bb..f78d7458932 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -1,10 +1,13 @@
 {
   "name": "@plane/logger",
   "version": "1.2.0",
-  "license": "AGPL-3.0",
-  "description": "Logger shared across multiple apps internally",
   "private": true,
+  "description": "Logger shared across multiple apps internally",
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
     "./package.json": "./package.json"
@@ -14,9 +17,9 @@
     "dev": "tsdown --watch",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=0",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=0",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -29,8 +32,5 @@
     "@types/node": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts"
+  }
 }
diff --git a/packages/propel/package.json b/packages/propel/package.json
index 37a26874ad4..a555a637c0a 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -4,18 +4,6 @@
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
-  "scripts": {
-    "dev": "tsdown --watch",
-    "build": "tsdown",
-    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1306",
-    "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
-    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1306",
-    "fix:format": "prettier . --cache --write",
-    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "exports": {
     "./accordion": "./dist/accordion/index.js",
     "./animated-counter": "./dist/animated-counter/index.js",
@@ -61,6 +49,18 @@
     "./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
     "./styles/react-day-picker": "./dist/styles/react-day-picker.css"
   },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1306",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1306",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
   "dependencies": {
     "@base-ui-components/react": "1.0.0-beta.3",
     "@plane/constants": "workspace:*",
diff --git a/packages/propel/src/accordion/accordion.stories.tsx b/packages/propel/src/accordion/accordion.stories.tsx
index a2c7d05ade1..4f1dbd1d263 100644
--- a/packages/propel/src/accordion/accordion.stories.tsx
+++ b/packages/propel/src/accordion/accordion.stories.tsx
@@ -182,7 +182,7 @@ export const AsChildTrigger: Story = {
       <Accordion.Root className="w-96">
         <Accordion.Item value="item-1">
           <Accordion.Trigger asChild>
-            <button className="w-full rounded-md bg-blue-500 px-4 py-2 text-left text-on-color hover:bg-blue-600">
+            <button className="bg-blue-500 hover:bg-blue-600 w-full rounded-md px-4 py-2 text-left text-on-color">
               Custom Button Trigger
             </button>
           </Accordion.Trigger>
@@ -192,7 +192,7 @@ export const AsChildTrigger: Story = {
         </Accordion.Item>
         <Accordion.Item value="item-2">
           <Accordion.Trigger asChild>
-            <button className="w-full rounded-md bg-green-500 px-4 py-2 text-left text-on-color hover:bg-green-600">
+            <button className="bg-green-500 hover:bg-green-600 w-full rounded-md px-4 py-2 text-left text-on-color">
               Another Custom Trigger
             </button>
           </Accordion.Trigger>
diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index 353e587acca..1eebc748d54 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -55,7 +55,7 @@ function AccordionItem({ value, disabled, className = "", children }: AccordionI
 
 function AccordionTrigger({
   className = "",
-  icon = <PlusIcon aria-hidden="true" className="transition-all ease-out  group-data-[panel-open]:rotate-45" />,
+  icon = <PlusIcon aria-hidden="true" className="transition-all ease-out group-data-[panel-open]:rotate-45" />,
   iconClassName = "",
   children,
   asChild = false,
diff --git a/packages/propel/src/animated-counter/animated-counter.stories.tsx b/packages/propel/src/animated-counter/animated-counter.stories.tsx
index df069d22def..5a1a64fa68d 100644
--- a/packages/propel/src/animated-counter/animated-counter.stories.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.stories.tsx
@@ -32,16 +32,16 @@ export const Default: Story = {
       <div className="space-y-6 p-4">
         <div className="flex items-center justify-center gap-6">
           <button
-            className="px-4 py-2 bg-red-500 text-on-color font-medium rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-danger-strong focus:ring-offset-2 transition-colors shadow-md"
+            className="bg-red-500 hover:bg-red-600 shadow-md rounded-lg px-4 py-2 font-medium text-on-color transition-colors focus:ring-2 focus:ring-danger-strong focus:ring-offset-2 focus:outline-none"
             onClick={() => setCount((prev) => Math.max(0, prev - 1))}
           >
             -1
           </button>
-          <div className="flex items-center justify-center min-w-[60px] h-12 bg-gray-50 border border-gray-200 rounded-lg">
+          <div className="bg-gray-50 border-gray-200 flex h-12 min-w-[60px] items-center justify-center rounded-lg border">
             <AnimatedCounter {...args} count={count} />
           </div>
           <button
-            className="px-4 py-2 bg-green-500 text-on-color font-medium rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-success-strong focus:ring-offset-2 transition-colors shadow-md"
+            className="bg-green-500 hover:bg-green-600 shadow-md rounded-lg px-4 py-2 font-medium text-on-color transition-colors focus:ring-2 focus:ring-success-strong focus:ring-offset-2 focus:outline-none"
             onClick={() => setCount((prev) => prev + 1)}
           >
             +1
@@ -60,13 +60,13 @@ export const Sizes: Story = {
       <div className="space-y-6 p-4">
         <div className="flex items-center gap-4">
           <button
-            className="px-3 py-1 bg-layer-1 text-13 rounded-sm hover:bg-surface-2"
+            className="rounded-sm bg-layer-1 px-3 py-1 text-13 hover:bg-surface-2"
             onClick={() => setCount((prev) => Math.max(0, prev - 1))}
           >
             -1
           </button>
           <button
-            className="px-3 py-1 bg-layer-1 text-13 rounded-sm hover:bg-surface-2"
+            className="rounded-sm bg-layer-1 px-3 py-1 text-13 hover:bg-surface-2"
             onClick={() => setCount((prev) => prev + 1)}
           >
             +1
@@ -74,20 +74,20 @@ export const Sizes: Story = {
         </div>
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-4">
-            <span className="text-13 text-placeholder w-20">Small:</span>
-            <div className="flex items-center justify-center min-w-[40px] h-8 bg-layer-1 border border-subtle rounded-sm">
+            <span className="w-20 text-13 text-placeholder">Small:</span>
+            <div className="flex h-8 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
               <AnimatedCounter count={count} size="sm" />
             </div>
           </div>
           <div className="flex items-center gap-4">
-            <span className="text-13 text-placeholder w-20">Medium:</span>
-            <div className="flex items-center justify-center min-w-[50px] h-10 bg-layer-1 border border-subtle rounded-sm">
+            <span className="w-20 text-13 text-placeholder">Medium:</span>
+            <div className="flex h-10 min-w-[50px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
               <AnimatedCounter count={count} size="md" />
             </div>
           </div>
           <div className="flex items-center gap-4">
-            <span className="text-13 text-placeholder w-20">Large:</span>
-            <div className="flex items-center justify-center min-w-[60px] h-12 bg-layer-1 border border-subtle rounded-sm">
+            <span className="w-20 text-13 text-placeholder">Large:</span>
+            <div className="flex h-12 min-w-[60px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
               <AnimatedCounter count={count} size="lg" />
             </div>
           </div>
@@ -105,19 +105,19 @@ export const LargeNumbers: Story = {
       <div className="space-y-6 p-4">
         <div className="flex items-center gap-4">
           <button
-            className="px-3 py-1 bg-red-500 text-on-color text-13 rounded-sm hover:bg-red-600"
+            className="bg-red-500 hover:bg-red-600 rounded-sm px-3 py-1 text-13 text-on-color"
             onClick={() => setCount((prev) => Math.max(0, prev - 1000))}
           >
             -1000
           </button>
           <button
-            className="px-3 py-1 bg-green-500 text-on-color text-13 rounded-sm hover:bg-green-600"
+            className="bg-green-500 hover:bg-green-600 rounded-sm px-3 py-1 text-13 text-on-color"
             onClick={() => setCount((prev) => prev + 1000)}
           >
             +1000
           </button>
         </div>
-        <div className="flex items-center justify-center min-w-[100px] h-12 bg-layer-1 border border-subtle rounded-lg">
+        <div className="flex h-12 min-w-[100px] items-center justify-center rounded-lg border border-subtle bg-layer-1">
           <AnimatedCounter count={count} size="lg" />
         </div>
       </div>
@@ -148,11 +148,11 @@ export const Countdown: Story = {
     return (
       <div className="space-y-6 p-4">
         <div className="flex flex-col items-center gap-4">
-          <div className="flex items-center justify-center min-w-[60px] h-16 bg-layer-1 border-2 border-subtle rounded-lg">
+          <div className="flex h-16 min-w-[60px] items-center justify-center rounded-lg border-2 border-subtle bg-layer-1">
             <AnimatedCounter count={count} size="lg" className="text-20" />
           </div>
           <button
-            className="px-6 py-2 bg-accent-primary text-on-color font-medium rounded-lg hover:bg-accent-primary/80"
+            className="rounded-lg bg-accent-primary px-6 py-2 font-medium text-on-color hover:bg-accent-primary/80"
             onClick={handleStart}
             disabled={isRunning}
           >
@@ -179,26 +179,26 @@ export const LiveCounter: Story = {
     return (
       <div className="space-y-6 p-4">
         <div className="flex flex-col items-center gap-4">
-          <div className="flex items-center justify-center min-w-[80px] h-16 bg-layer-1 border-2 border-subtle rounded-lg">
+          <div className="flex h-16 min-w-[80px] items-center justify-center rounded-lg border-2 border-subtle bg-layer-1">
             <AnimatedCounter count={count} size="lg" className="text-20" />
           </div>
           <div className="flex gap-2">
             <button
-              className="px-4 py-2 bg-green-500 text-on-color font-medium rounded-sm hover:bg-green-600"
+              className="bg-green-500 hover:bg-green-600 rounded-sm px-4 py-2 font-medium text-on-color"
               onClick={() => setIsRunning(true)}
               disabled={isRunning}
             >
               Start
             </button>
             <button
-              className="px-4 py-2 bg-red-500 text-on-color font-medium rounded-sm hover:bg-red-600"
+              className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 font-medium text-on-color"
               onClick={() => setIsRunning(false)}
               disabled={!isRunning}
             >
               Stop
             </button>
             <button
-              className="px-4 py-2 bg-gray-500 text-on-color font-medium rounded-sm hover:bg-gray-600"
+              className="bg-gray-500 hover:bg-gray-600 rounded-sm px-4 py-2 font-medium text-on-color"
               onClick={() => {
                 setIsRunning(false);
                 setCount(0);
@@ -221,49 +221,49 @@ export const MultipleCounters: Story = {
 
     return (
       <div className="space-y-6 p-4">
-        <div className="max-w-md border border-subtle rounded-lg p-4">
-          <div className="flex items-center justify-between mb-4">
+        <div className="max-w-md rounded-lg border border-subtle p-4">
+          <div className="mb-4 flex items-center justify-between">
             <h3 className="font-medium">Engagement Stats</h3>
           </div>
           <div className="flex gap-4">
-            <div className="flex-1 flex flex-col items-center gap-2">
-              <div className="text-placeholder text-13">Likes</div>
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Likes</div>
               <div className="flex items-center gap-2">
                 <button
-                  className="w-8 h-8 flex items-center justify-center bg-layer-1 rounded-sm hover:bg-surface-2"
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
                   onClick={() => setLikes((prev) => prev + 1)}
                 >
                   +
                 </button>
-                <div className="flex items-center justify-center min-w-[40px] h-10 bg-layer-1 border border-subtle rounded-sm">
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
                   <AnimatedCounter count={likes} size="md" />
                 </div>
               </div>
             </div>
-            <div className="flex-1 flex flex-col items-center gap-2">
-              <div className="text-placeholder text-13">Comments</div>
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Comments</div>
               <div className="flex items-center gap-2">
                 <button
-                  className="w-8 h-8 flex items-center justify-center bg-layer-1 rounded-sm hover:bg-surface-2"
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
                   onClick={() => setComments((prev) => prev + 1)}
                 >
                   +
                 </button>
-                <div className="flex items-center justify-center min-w-[40px] h-10 bg-layer-1 border border-subtle rounded-sm">
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
                   <AnimatedCounter count={comments} size="md" />
                 </div>
               </div>
             </div>
-            <div className="flex-1 flex flex-col items-center gap-2">
-              <div className="text-placeholder text-13">Shares</div>
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Shares</div>
               <div className="flex items-center gap-2">
                 <button
-                  className="w-8 h-8 flex items-center justify-center bg-layer-1 rounded-sm hover:bg-surface-2"
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
                   onClick={() => setShares((prev) => prev + 1)}
                 >
                   +
                 </button>
-                <div className="flex items-center justify-center min-w-[40px] h-10 bg-layer-1 border border-subtle rounded-sm">
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
                   <AnimatedCounter count={shares} size="md" />
                 </div>
               </div>
@@ -283,13 +283,13 @@ export const InBadge: Story = {
       <div className="space-y-6 p-4">
         <div className="flex flex-col items-center gap-4">
           <div className="relative">
-            <button className="px-4 py-2 bg-layer-1 border border-subtle rounded-lg">Notifications</button>
-            <div className="absolute -top-2 -right-2 min-w-[24px] h-6 flex items-center justify-center bg-red-500 text-on-color rounded-full px-1.5">
+            <button className="rounded-lg border border-subtle bg-layer-1 px-4 py-2">Notifications</button>
+            <div className="bg-red-500 absolute -top-2 -right-2 flex h-6 min-w-[24px] items-center justify-center rounded-full px-1.5 text-on-color">
               <AnimatedCounter count={notifications} size="sm" className="text-11 font-medium" />
             </div>
           </div>
           <button
-            className="px-4 py-2 bg-accent-primary text-on-color rounded-sm hover:bg-accent-primary/80"
+            className="rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
             onClick={() => setNotifications((prev) => prev + 1)}
           >
             Add Notification
@@ -313,17 +313,17 @@ export const FastAnimation: Story = {
     return (
       <div className="space-y-6 p-4">
         <div className="flex flex-col items-center gap-4">
-          <div className="flex items-center justify-center min-w-[60px] h-12 bg-layer-1 border border-subtle rounded-lg">
+          <div className="flex h-12 min-w-[60px] items-center justify-center rounded-lg border border-subtle bg-layer-1">
             <AnimatedCounter count={count} size="lg" />
           </div>
           <div className="flex gap-2">
             <button
-              className="px-4 py-2 bg-accent-primary text-on-color rounded-sm hover:bg-accent-primary/80"
+              className="rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
               onClick={incrementFast}
             >
               +10 Fast
             </button>
-            <button className="px-4 py-2 bg-layer-1 rounded-sm hover:bg-surface-2" onClick={() => setCount(0)}>
+            <button className="rounded-sm bg-layer-1 px-4 py-2 hover:bg-surface-2" onClick={() => setCount(0)}>
               Reset
             </button>
           </div>
diff --git a/packages/propel/src/animated-counter/animated-counter.tsx b/packages/propel/src/animated-counter/animated-counter.tsx
index 6d4bacb9ba8..dd01fadd800 100644
--- a/packages/propel/src/animated-counter/animated-counter.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.tsx
@@ -50,7 +50,7 @@ export function AnimatedCounter({ count, className, size = "md" }: AnimatedCount
   const sizeClass = sizeClasses[size];
 
   return (
-    <div className={cn("relative inline-flex items-center justify-center overflow-hidden min-w-2", sizeClass)}>
+    <div className={cn("relative inline-flex min-w-2 items-center justify-center overflow-hidden", sizeClass)}>
       {/* Previous number sliding out */}
       {isAnimating && (
         <span
@@ -62,8 +62,8 @@ export function AnimatedCounter({ count, className, size = "md" }: AnimatedCount
             direction === "down" && "[--slide-out-dir:100%]",
             sizeClass,
             {
-              "animate-slide-out animate-fade-out": isAnimating && direction === "up",
-              "animate-slide-out-down animate-fade-out": isAnimating && direction === "down",
+              "animate-fade-out animate-slide-out": isAnimating && direction === "up",
+              "animate-fade-out animate-slide-out-down": isAnimating && direction === "down",
             }
           )}
         >
diff --git a/packages/propel/src/badge/helper.tsx b/packages/propel/src/badge/helper.tsx
index 458a293de04..5f2691bb4e5 100644
--- a/packages/propel/src/badge/helper.tsx
+++ b/packages/propel/src/badge/helper.tsx
@@ -17,9 +17,9 @@ export const badgeVariants = cva("inline-flex items-center justify-center gap-1
       danger: "bg-danger-subtle text-danger-primary",
     },
     size: {
-      sm: "h-4 px-1 text-caption-sm-medium rounded-sm",
-      base: "h-5 px-1.5 text-caption-sm-medium rounded-md",
-      lg: "h-6 px-2 text-caption-md-medium rounded-md",
+      sm: "h-4 rounded-sm px-1 text-caption-sm-medium",
+      base: "h-5 rounded-md px-1.5 text-caption-sm-medium",
+      lg: "h-6 rounded-md px-2 text-caption-md-medium",
     },
   },
   defaultVariants: {
diff --git a/packages/propel/src/banner/banner.stories.tsx b/packages/propel/src/banner/banner.stories.tsx
index 325b67520b5..abf347360aa 100644
--- a/packages/propel/src/banner/banner.stories.tsx
+++ b/packages/propel/src/banner/banner.stories.tsx
@@ -122,7 +122,7 @@ function CloseButton({ onClick }: { onClick?: () => void }) {
   return (
     <button
       onClick={onClick}
-      className="rounded-sm p-1 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+      className="rounded-sm p-1 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
       aria-label="Dismiss"
     >
       <svg
diff --git a/packages/propel/src/banner/banner.tsx b/packages/propel/src/banner/banner.tsx
index 077e69928e2..6afab1248f3 100644
--- a/packages/propel/src/banner/banner.tsx
+++ b/packages/propel/src/banner/banner.tsx
@@ -112,7 +112,7 @@ export const Banner = React.forwardRef(function Banner(
       {...props}
     >
       {/* Left side: Icon and Title */}
-      <div className="flex items-center gap-3 flex-1 min-w-0">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
         {renderIcon()}
         {title && <div className={cn(titleStyling)}>{title}</div>}
         {children}
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
index 42dc4cd90ce..16c6e7431bc 100644
--- a/packages/propel/src/button/helper.tsx
+++ b/packages/propel/src/button/helper.tsx
@@ -13,24 +13,24 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-on-color-disabled",
+          "bg-accent-primary text-on-color hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-on-color-disabled",
         "error-fill":
-          "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
+          "bg-danger-primary text-on-color hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
         "error-outline":
-          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-primary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+          "border border-danger-strong bg-layer-2 text-danger-primary hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
         secondary:
-          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active  disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
+          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
         tertiary:
-          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+          "bg-layer-3 text-secondary hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
         ghost:
-          "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
-        link: "px-0 underline text-link-primary hover:text-link-primary-hover active:text-link-primary-hover focus:text-link-primary-hover disabled:text-disabled",
+          "bg-layer-transparent text-secondary hover:bg-layer-transparent-hover focus:bg-layer-transparent-active active:bg-layer-transparent-active disabled:bg-layer-transparent disabled:text-disabled",
+        link: "px-0 text-link-primary underline hover:text-link-primary-hover focus:text-link-primary-hover active:text-link-primary-hover disabled:text-disabled",
       },
       size: {
-        sm: "h-5 px-1.5 text-caption-md-medium rounded-sm",
-        base: "h-6 px-2 text-body-xs-medium rounded-md",
-        lg: "h-7 px-2 text-body-xs-medium rounded-md",
-        xl: "h-8 px-2 text-body-sm-medium rounded-md",
+        sm: "h-5 rounded-sm px-1.5 text-caption-md-medium",
+        base: "h-6 rounded-md px-2 text-body-xs-medium",
+        lg: "h-7 rounded-md px-2 text-body-xs-medium",
+        xl: "h-8 rounded-md px-2 text-body-sm-medium",
       },
     },
     defaultVariants: {
diff --git a/packages/propel/src/card/card.stories.tsx b/packages/propel/src/card/card.stories.tsx
index 02eafd6b19f..03927c21aea 100644
--- a/packages/propel/src/card/card.stories.tsx
+++ b/packages/propel/src/card/card.stories.tsx
@@ -18,7 +18,7 @@ const meta = {
     children: (
       <>
         <h3 className="text-16 font-semibold">Card Title</h3>
-        <p className="text-13 text-gray-600">This is a default card with shadow and large spacing.</p>
+        <p className="text-gray-600 text-13">This is a default card with shadow and large spacing.</p>
       </>
     ),
   },
@@ -35,7 +35,7 @@ export const WithShadow: Story = {
     children: (
       <>
         <h3 className="text-16 font-semibold">Card with Shadow</h3>
-        <p className="text-13 text-gray-600">Hover over this card to see the shadow effect.</p>
+        <p className="text-gray-600 text-13">Hover over this card to see the shadow effect.</p>
       </>
     ),
   },
@@ -47,7 +47,7 @@ export const WithoutShadow: Story = {
     children: (
       <>
         <h3 className="text-16 font-semibold">Card without Shadow</h3>
-        <p className="text-13 text-gray-600">This card has no shadow effect on hover.</p>
+        <p className="text-gray-600 text-13">This card has no shadow effect on hover.</p>
       </>
     ),
   },
@@ -59,7 +59,7 @@ export const SmallSpacing: Story = {
     children: (
       <>
         <h3 className="text-16 font-semibold">Small Spacing</h3>
-        <p className="text-13 text-gray-600">This card uses small spacing (p-4).</p>
+        <p className="text-gray-600 text-13">This card uses small spacing (p-4).</p>
       </>
     ),
   },
@@ -71,7 +71,7 @@ export const LargeSpacing: Story = {
     children: (
       <>
         <h3 className="text-16 font-semibold">Large Spacing</h3>
-        <p className="text-13 text-gray-600">This card uses large spacing (p-6).</p>
+        <p className="text-gray-600 text-13">This card uses large spacing (p-6).</p>
       </>
     ),
   },
@@ -83,8 +83,8 @@ export const ColumnDirection: Story = {
     children: (
       <>
         <h3 className="text-16 font-semibold">Column Direction</h3>
-        <p className="text-13 text-gray-600">Content is arranged vertically.</p>
-        <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Action</button>
+        <p className="text-gray-600 text-13">Content is arranged vertically.</p>
+        <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Action</button>
       </>
     ),
   },
@@ -96,11 +96,11 @@ export const RowDirection: Story = {
     children: (
       <>
         <div className="flex-shrink-0">
-          <div className="h-12 w-12 rounded-sm bg-blue-500" />
+          <div className="bg-blue-500 h-12 w-12 rounded-sm" />
         </div>
         <div className="flex-1">
           <h3 className="text-16 font-semibold">Row Direction</h3>
-          <p className="text-13 text-gray-600">Content is arranged horizontally.</p>
+          <p className="text-gray-600 text-13">Content is arranged horizontally.</p>
         </div>
       </>
     ),
@@ -114,12 +114,12 @@ export const ProductCard: Story = {
     direction: ECardDirection.COLUMN,
     children: (
       <>
-        <div className="h-48 w-full rounded-sm bg-gray-200" />
+        <div className="bg-gray-200 h-48 w-full rounded-sm" />
         <h3 className="text-18 font-bold">Product Name</h3>
-        <p className="text-13 text-gray-600">A brief description of the product goes here.</p>
+        <p className="text-gray-600 text-13">A brief description of the product goes here.</p>
         <div className="flex items-center justify-between">
           <span className="text-16 font-semibold">$99.99</span>
-          <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">Add to Cart</button>
+          <button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">Add to Cart</button>
         </div>
       </>
     ),
@@ -133,11 +133,11 @@ export const UserCard: Story = {
     direction: ECardDirection.ROW,
     children: (
       <>
-        <div className="h-16 w-16 flex-shrink-0 rounded-full bg-blue-500" />
+        <div className="bg-blue-500 h-16 w-16 flex-shrink-0 rounded-full" />
         <div className="flex-1">
           <h3 className="text-16 font-semibold">John Doe</h3>
-          <p className="text-13 text-gray-600">Software Engineer</p>
-          <p className="text-11 text-gray-500">john.doe@example.com</p>
+          <p className="text-gray-600 text-13">Software Engineer</p>
+          <p className="text-gray-500 text-11">john.doe@example.com</p>
         </div>
       </>
     ),
@@ -153,9 +153,9 @@ export const NotificationCard: Story = {
       <>
         <div className="flex items-start justify-between">
           <h4 className="font-semibold">New Message</h4>
-          <span className="text-11 text-gray-500">2m ago</span>
+          <span className="text-gray-500 text-11">2m ago</span>
         </div>
-        <p className="text-13 text-gray-600">You have received a new message from Alice.</p>
+        <p className="text-gray-600 text-13">You have received a new message from Alice.</p>
       </>
     ),
   },
@@ -167,11 +167,11 @@ export const AllVariants: Story = {
       <div className="space-y-4">
         <Card variant={ECardVariant.WITH_SHADOW}>
           <h3 className="font-semibold">With Shadow</h3>
-          <p className="text-13 text-gray-600">Hover to see the shadow effect</p>
+          <p className="text-gray-600 text-13">Hover to see the shadow effect</p>
         </Card>
         <Card variant={ECardVariant.WITHOUT_SHADOW}>
           <h3 className="font-semibold">Without Shadow</h3>
-          <p className="text-13 text-gray-600">No shadow on hover</p>
+          <p className="text-gray-600 text-13">No shadow on hover</p>
         </Card>
       </div>
     );
@@ -184,11 +184,11 @@ export const AllSpacings: Story = {
       <div className="space-y-4">
         <Card spacing={ECardSpacing.SM}>
           <h3 className="font-semibold">Small Spacing (p-4)</h3>
-          <p className="text-13 text-gray-600">Compact padding</p>
+          <p className="text-gray-600 text-13">Compact padding</p>
         </Card>
         <Card spacing={ECardSpacing.LG}>
           <h3 className="font-semibold">Large Spacing (p-6)</h3>
-          <p className="text-13 text-gray-600">More generous padding</p>
+          <p className="text-gray-600 text-13">More generous padding</p>
         </Card>
       </div>
     );
@@ -201,14 +201,14 @@ export const AllDirections: Story = {
       <div className="space-y-4">
         <Card direction={ECardDirection.COLUMN}>
           <h3 className="font-semibold">Column Direction</h3>
-          <p className="text-13 text-gray-600">Vertical layout</p>
-          <button className="w-fit rounded-sm bg-blue-500 px-4 py-2 text-on-color">Button</button>
+          <p className="text-gray-600 text-13">Vertical layout</p>
+          <button className="bg-blue-500 w-fit rounded-sm px-4 py-2 text-on-color">Button</button>
         </Card>
         <Card direction={ECardDirection.ROW}>
-          <div className="h-12 w-12 flex-shrink-0 rounded-sm bg-blue-500" />
+          <div className="bg-blue-500 h-12 w-12 flex-shrink-0 rounded-sm" />
           <div>
             <h3 className="font-semibold">Row Direction</h3>
-            <p className="text-13 text-gray-600">Horizontal layout</p>
+            <p className="text-gray-600 text-13">Horizontal layout</p>
           </div>
         </Card>
       </div>
diff --git a/packages/propel/src/charts/components/legend.tsx b/packages/propel/src/charts/components/legend.tsx
index 52968afc2c8..89da225af70 100644
--- a/packages/propel/src/charts/components/legend.tsx
+++ b/packages/propel/src/charts/components/legend.tsx
@@ -50,17 +50,17 @@ const CustomLegend = React.forwardRef(function CustomLegend(
   return (
     <div
       ref={ref}
-      className={cn("flex items-center px-4 overflow-scroll vertical-scrollbar scrollbar-sm", {
+      className={cn("vertical-scrollbar flex scrollbar-sm items-center overflow-scroll px-4", {
         "max-h-full flex-col items-start py-4": layout === "vertical",
       })}
     >
       {payload.map((item, index) => (
         <div
           key={item.value}
-          className={cn("flex items-center gap-1.5 text-tertiary text-13 font-medium whitespace-nowrap", {
+          className={cn("flex items-center gap-1.5 text-13 font-medium whitespace-nowrap text-tertiary", {
             "px-2": layout === "horizontal",
             "py-2": layout === "vertical",
-            "pl-0 pt-0": index === 0,
+            "pt-0 pl-0": index === 0,
             "pr-0 pb-0": index === payload.length - 1,
             "cursor-pointer": !!props.onClick,
           })}
@@ -69,7 +69,7 @@ const CustomLegend = React.forwardRef(function CustomLegend(
           onMouseLeave={(e) => onMouseLeave?.(item, index, e)}
         >
           <div
-            className="flex-shrink-0 size-2 rounded-xs"
+            className="size-2 flex-shrink-0 rounded-xs"
             style={{
               backgroundColor: item.color,
             }}
diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx
index 544b3643769..cd4b2b0bb0f 100644
--- a/packages/propel/src/charts/components/tooltip.tsx
+++ b/packages/propel/src/charts/components/tooltip.tsx
@@ -28,10 +28,10 @@ export const CustomTooltip = React.memo(function CustomTooltip(props: Props) {
 
   return (
     <Card
-      className="flex flex-col max-h-[40vh] w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
+      className="vertical-scrollbar flex scrollbar-sm max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
       spacing={ECardSpacing.SM}
     >
-      <p className="flex-shrink-0 text-11 text-primary font-medium border-b border-subtle pb-2 truncate">{label}</p>
+      <p className="flex-shrink-0 truncate border-b border-subtle pb-2 text-11 font-medium text-primary">{label}</p>
       {filteredPayload.map((item) => {
         if (!item.dataKey) return null;
 
@@ -45,13 +45,13 @@ export const CustomTooltip = React.memo(function CustomTooltip(props: Props) {
             <div className="flex items-center gap-2 truncate">
               {itemDotColors[item?.dataKey] && (
                 <div
-                  className="flex-shrink-0 size-2 rounded-xs"
+                  className="size-2 flex-shrink-0 rounded-xs"
                   style={{
                     backgroundColor: itemDotColors[item?.dataKey],
                   }}
                 />
               )}
-              <span className="text-tertiary truncate">{itemLabels[item?.dataKey]}:</span>
+              <span className="truncate text-tertiary">{itemLabels[item?.dataKey]}:</span>
             </div>
             <span className="flex-shrink-0 font-medium text-secondary">{item?.value}</span>
           </div>
diff --git a/packages/propel/src/charts/pie-chart/tooltip.tsx b/packages/propel/src/charts/pie-chart/tooltip.tsx
index e10aa939a48..10dd2a9402c 100644
--- a/packages/propel/src/charts/pie-chart/tooltip.tsx
+++ b/packages/propel/src/charts/pie-chart/tooltip.tsx
@@ -20,20 +20,20 @@ export const CustomPieChartTooltip = React.memo(function CustomPieChartTooltip(p
 
   return (
     <Card
-      className="flex flex-col max-h-[40vh] w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
+      className="vertical-scrollbar flex scrollbar-sm max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
       spacing={ECardSpacing.SM}
     >
-      <p className="flex-shrink-0 text-11 text-primary font-medium border-b border-subtle pb-2 truncate">{label}</p>
+      <p className="flex-shrink-0 truncate border-b border-subtle pb-2 text-11 font-medium text-primary">{label}</p>
       {payload?.map((item) => (
         <div key={item?.dataKey} className="flex items-center gap-2 text-11 capitalize">
           <div className="flex items-center gap-2 truncate">
             <div
-              className="flex-shrink-0 size-2 rounded-xs"
+              className="size-2 flex-shrink-0 rounded-xs"
               style={{
                 backgroundColor: dotColor,
               }}
             />
-            <span className="text-tertiary truncate">{item?.name}:</span>
+            <span className="truncate text-tertiary">{item?.name}:</span>
           </div>
           <span className="flex-shrink-0 font-medium text-secondary">{item?.value}</span>
         </div>
diff --git a/packages/propel/src/charts/tree-map/map-content.tsx b/packages/propel/src/charts/tree-map/map-content.tsx
index b664b8ae81b..c6cf9e74888 100644
--- a/packages/propel/src/charts/tree-map/map-content.tsx
+++ b/packages/propel/src/charts/tree-map/map-content.tsx
@@ -227,7 +227,7 @@ export function CustomTreeMapContent({
               x={pX + LAYOUT.TEXT.PADDING_LEFT + iconSpace}
               y={pY + LAYOUT.TEXT.VERTICAL_OFFSET}
               textAnchor="start"
-              className={cn("text-13 font-light tracking-wider select-none", textClassName || "text-tertiary")}
+              className={cn("tracking-wider text-13 font-light select-none", textClassName || "text-tertiary")}
               fill="currentColor"
             >
               {top.nameTruncated ? truncateText(name, availableTextWidth, LAYOUT.TEXT.FONT_SIZES.SM, iconSpace) : name}
@@ -243,7 +243,7 @@ export function CustomTreeMapContent({
                 x={pX + LAYOUT.TEXT.PADDING_LEFT}
                 y={pY + pHeight - LAYOUT.TEXT.PADDING_LEFT}
                 textAnchor="start"
-                className={cn("text-13 font-light tracking-wider select-none", textClassName || "text-tertiary")}
+                className={cn("tracking-wider text-13 font-light select-none", textClassName || "text-tertiary")}
                 fill="currentColor"
               >
                 {value.toLocaleString()}
diff --git a/packages/propel/src/charts/tree-map/root.tsx b/packages/propel/src/charts/tree-map/root.tsx
index 738db1463cf..e529df42c58 100644
--- a/packages/propel/src/charts/tree-map/root.tsx
+++ b/packages/propel/src/charts/tree-map/root.tsx
@@ -23,7 +23,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
           nameKey="name"
           dataKey="value"
           stroke="transparent"
-          className="bg-layer-1 cursor-pointer"
+          className="cursor-pointer bg-layer-1"
           content={<CustomTreeMapContent />}
           animationEasing="ease-out"
           isUpdateAnimationActive={isAnimationActive}
diff --git a/packages/propel/src/charts/tree-map/tooltip.tsx b/packages/propel/src/charts/tree-map/tooltip.tsx
index 5888feccc26..8fb731cfafa 100644
--- a/packages/propel/src/charts/tree-map/tooltip.tsx
+++ b/packages/propel/src/charts/tree-map/tooltip.tsx
@@ -22,7 +22,7 @@ export const TreeMapTooltip = React.memo(function TreeMapTooltip({ active, paylo
     <Card className="flex flex-col space-y-1.5" spacing={ECardSpacing.SM}>
       <div className="flex items-center gap-2 border-b border-subtle pb-2.5">
         {data?.icon}
-        <p className="text-11 text-primary font-medium capitalize">{data?.name}</p>
+        <p className="text-11 font-medium text-primary capitalize">{data?.name}</p>
       </div>
       <span className="text-11 font-medium text-secondary">
         {data?.value.toLocaleString()}
diff --git a/packages/propel/src/collapsible/collapsible.stories.tsx b/packages/propel/src/collapsible/collapsible.stories.tsx
index 1210da6d8a9..5669ffac505 100644
--- a/packages/propel/src/collapsible/collapsible.stories.tsx
+++ b/packages/propel/src/collapsible/collapsible.stories.tsx
@@ -32,12 +32,12 @@ const meta = {
 
     return (
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={toggleOpen} className="w-96">
-        <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+        <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
           <span className="font-semibold">Click to toggle</span>
           <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-2">
-          <div className="rounded-md border border-gray-200 p-4">
+          <div className="border-gray-200 rounded-md border p-4">
             <p className="text-13">This is the collapsible content that can be shown or hidden.</p>
           </div>
         </Collapsible.CollapsibleContent>
@@ -62,26 +62,26 @@ export const Controlled: Story = {
     return (
       <div className="space-y-4">
         <div className="flex gap-2">
-          <button onClick={() => setIsOpen(true)} className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color">
+          <button onClick={() => setIsOpen(true)} className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">
             Open
           </button>
-          <button onClick={() => setIsOpen(false)} className="rounded-sm bg-gray-500 px-4 py-2 text-13 text-on-color">
+          <button onClick={() => setIsOpen(false)} className="bg-gray-500 rounded-sm px-4 py-2 text-13 text-on-color">
             Close
           </button>
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="rounded-sm bg-green-500 px-4 py-2 text-13 text-on-color"
+            className="bg-green-500 rounded-sm px-4 py-2 text-13 text-on-color"
           >
             Toggle
           </button>
         </div>
         <Collapsible.CollapsibleRoot isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-          <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Controlled Collapsible</span>
             <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
-            <div className="rounded-md border border-gray-200 p-4">
+            <div className="border-gray-200 rounded-md border p-4">
               <p className="text-13">This collapsible is controlled by external state.</p>
               <p className="mt-2 text-13">Current state: {isOpen ? "Open" : "Closed"}</p>
             </div>
@@ -97,12 +97,12 @@ export const NestedContent: Story = {
     const [isOpen, setIsOpen] = useState(args.isOpen);
     return (
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-        <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+        <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
           <span className="font-semibold">Collapsible with Nested Content</span>
           <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-2">
-          <div className="space-y-2 rounded-md border border-gray-200 p-4">
+          <div className="border-gray-200 space-y-2 rounded-md border p-4">
             <h4 className="font-semibold">Section 1</h4>
             <p className="text-13">This is some content in the first section.</p>
             <h4 className="font-semibold">Section 2</h4>
@@ -124,12 +124,12 @@ export const CustomStyling: Story = {
     const [isOpen, setIsOpen] = useState(args.isOpen);
     return (
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
-        <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 text-on-color shadow-lg transition-all hover:shadow-xl">
+        <Collapsible.CollapsibleTrigger className="from-purple-500 to-pink-500 shadow-lg hover:shadow-xl flex w-full items-center justify-between rounded-lg bg-gradient-to-r px-6 py-3 text-on-color transition-all">
           <span className="text-16 font-bold">Custom Styled Trigger</span>
           <ChevronDownIcon className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-4">
-          <div className="rounded-lg bg-gradient-to-br from-purple-100 to-pink-100 p-6 shadow-md">
+          <div className="from-purple-100 to-pink-100 shadow-md rounded-lg bg-gradient-to-br p-6">
             <p className="text-purple-900">This collapsible has custom styling with gradients, shadows, and colors.</p>
           </div>
         </Collapsible.CollapsibleContent>
@@ -143,36 +143,36 @@ export const MultipleCollapsibles: Story = {
     return (
       <div className="w-96 space-y-2">
         <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">First Item</span>
             <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
-            <div className="rounded-md border border-gray-200 p-4">
+            <div className="border-gray-200 rounded-md border p-4">
               <p className="text-13">Content for the first item.</p>
             </div>
           </Collapsible.CollapsibleContent>
         </Collapsible.CollapsibleRoot>
 
         <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Second Item</span>
             <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
-            <div className="rounded-md border border-gray-200 p-4">
+            <div className="border-gray-200 rounded-md border p-4">
               <p className="text-13">Content for the second item.</p>
             </div>
           </Collapsible.CollapsibleContent>
         </Collapsible.CollapsibleRoot>
 
         <Collapsible.CollapsibleRoot>
-          <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Third Item</span>
             <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
-            <div className="rounded-md border border-gray-200 p-4">
+            <div className="border-gray-200 rounded-md border p-4">
               <p className="text-13">Content for the third item.</p>
             </div>
           </Collapsible.CollapsibleContent>
diff --git a/packages/propel/src/combobox/combobox.stories.tsx b/packages/propel/src/combobox/combobox.stories.tsx
index 5ebf84f6489..86d898154ab 100644
--- a/packages/propel/src/combobox/combobox.stories.tsx
+++ b/packages/propel/src/combobox/combobox.stories.tsx
@@ -44,7 +44,7 @@ const meta = {
     const setValue = (newValue: string | string[]) => updateArgs({ value: newValue });
     return (
       <Combobox {...args} value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -75,7 +75,7 @@ export const WithoutSearch: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -102,7 +102,7 @@ export const MultiSelect: Story = {
 
     return (
       <Combobox multiSelect value={value} onValueChange={(v) => setValue(v as string[])}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span className="truncate">{value.length > 0 ? `${value.length} selected` : "Select frameworks..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -130,7 +130,7 @@ export const MultiSelectWithLimit: Story = {
     return (
       <div className="space-y-2">
         <Combobox multiSelect maxSelections={3} value={value} onValueChange={(v) => setValue(v as string[])}>
-          <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+          <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
             <span className="truncate">
               {value.length > 0 ? `${value.length}/3 selected` : "Select up to 3 frameworks..."}
             </span>
@@ -149,7 +149,7 @@ export const MultiSelectWithLimit: Story = {
             ))}
           </Combobox.Options>
         </Combobox>
-        <p className="text-11 text-gray-500">Maximum 3 selections allowed</p>
+        <p className="text-gray-500 text-11">Maximum 3 selections allowed</p>
       </div>
     );
   },
@@ -161,7 +161,7 @@ export const Disabled: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox disabled value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-gray-100 px-4 py-2 opacity-50">
+        <Combobox.Button className="border-gray-300 bg-gray-100 flex w-72 items-center justify-between rounded-md border px-4 py-2 opacity-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -187,7 +187,7 @@ export const DisabledOptions: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -214,7 +214,7 @@ export const CustomMaxHeight: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
@@ -240,7 +240,7 @@ export const CustomEmptyMessage: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx
index 94cc8ebe9e1..7967af12605 100644
--- a/packages/propel/src/combobox/combobox.tsx
+++ b/packages/propel/src/combobox/combobox.tsx
@@ -174,13 +174,13 @@ function ComboboxOptions({
     <BaseCombobox.Portal>
       <BaseCombobox.Positioner sideOffset={8} className={positionerClassName}>
         <BaseCombobox.Popup
-          className={cn("rounded-md border border-subtle bg-surface-1 p-1 shadow-lg", className)}
+          className={cn("shadow-lg rounded-md border border-subtle bg-surface-1 p-1", className)}
           data-prevent-outside-click={dataPreventOutsideClick}
         >
           <div className="flex flex-col gap-1">
             {showSearch && (
               <div className="relative">
-                <SearchIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-placeholder" />
+                <SearchIcon className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-placeholder" />
                 <input
                   type="text"
                   placeholder={searchPlaceholder}
@@ -188,7 +188,7 @@ function ComboboxOptions({
                   onChange={(e) => setSearchQuery(e.target.value)}
                   onKeyDown={onSearchQueryKeyDown}
                   className={cn(
-                    "w-full rounded-sm border border-subtle bg-surface-2 py-1.5 pl-8 pr-2 text-13 outline-none placeholder:text-placeholder",
+                    "w-full rounded-sm border border-subtle bg-surface-2 py-1.5 pr-2 pl-8 text-13 outline-none placeholder:text-placeholder",
                     inputClassName
                   )}
                 />
@@ -219,7 +219,7 @@ function ComboboxOption({ value, children, disabled, className }: ComboboxOption
     <BaseCombobox.Item
       value={value}
       disabled={disabled}
-      className={cn("cursor-pointer rounded-sm px-2 py-1.5 text-13 outline-none transition-colors", className)}
+      className={cn("cursor-pointer rounded-sm px-2 py-1.5 text-13 transition-colors outline-none", className)}
     >
       {children}
     </BaseCombobox.Item>
diff --git a/packages/propel/src/command/command.stories.tsx b/packages/propel/src/command/command.stories.tsx
index 2abeb09c580..dbdaf2e308e 100644
--- a/packages/propel/src/command/command.stories.tsx
+++ b/packages/propel/src/command/command.stories.tsx
@@ -29,14 +29,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">Item 1</Command.Item>
-          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">Item 2</Command.Item>
-          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">Item 3</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 1</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 2</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 3</Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-13 text-gray-500">No results found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
       </Command>
     );
   },
@@ -45,30 +45,30 @@ export const Default: Story = {
 export const WithIcons: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.Input
           placeholder="Search files and folders..."
           className="h-9 w-full bg-transparent py-3 text-13 outline-none"
         />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Folder className="h-4 w-4" />
             <span>Documents</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Folder className="h-4 w-4" />
             <span>Downloads</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <File className="h-4 w-4" />
             <span>README.md</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <File className="h-4 w-4" />
             <span>package.json</span>
           </Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-13 text-gray-500">No files or folders found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No files or folders found.</Command.Empty>
       </Command>
     );
   },
@@ -77,33 +77,33 @@ export const WithIcons: Story = {
 export const WithCategories: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.Input
           placeholder="Search commands..."
           className="h-9 w-full bg-transparent py-3 text-13 outline-none"
         />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <div className="px-2 py-1.5 text-11 font-semibold text-gray-500">User</div>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <div className="text-gray-500 px-2 py-1.5 text-11 font-semibold">User</div>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <User className="h-4 w-4" />
             <span>Profile</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Settings className="h-4 w-4" />
             <span>Settings</span>
           </Command.Item>
 
-          <div className="mt-2 px-2 py-1.5 text-11 font-semibold text-gray-500">Files</div>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <div className="text-gray-500 mt-2 px-2 py-1.5 text-11 font-semibold">Files</div>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Folder className="h-4 w-4" />
             <span>Open Folder</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <File className="h-4 w-4" />
             <span>New File</span>
           </Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-13 text-gray-500">No commands found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No commands found.</Command.Empty>
       </Command>
     );
   },
@@ -112,10 +112,10 @@ export const WithCategories: Story = {
 export const EmptyState: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
         <Command.List className="max-h-80 overflow-auto py-2">{/* No items - will show empty state */}</Command.List>
-        <Command.Empty className="py-6 text-center text-13 text-gray-500">
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">
           <p className="font-semibold">No results found</p>
           <p className="mt-1 text-11">Try searching for something else</p>
         </Command.Empty>
@@ -127,16 +127,16 @@ export const EmptyState: Story = {
 export const LongList: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.Input placeholder="Search items..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
         <Command.List className="max-h-60 overflow-auto py-2">
           {Array.from({ length: 20 }, (_, i) => (
-            <Command.Item key={i} className="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">
+            <Command.Item key={i} className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">
               Item {i + 1}
             </Command.Item>
           ))}
         </Command.List>
-        <Command.Empty className="py-6 text-center text-13 text-gray-500">No results found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
       </Command>
     );
   },
@@ -145,17 +145,17 @@ export const LongList: Story = {
 export const WithoutSearch: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <User className="h-4 w-4" />
             <span>Profile</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Settings className="h-4 w-4" />
             <span>Settings</span>
           </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
             <Folder className="h-4 w-4" />
             <span>Files</span>
           </Command.Item>
@@ -168,23 +168,23 @@ export const WithoutSearch: Story = {
 export const CustomStyling: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border-2 border-blue-300 bg-blue-50 p-2 shadow-lg">
+      <Command className="border-blue-300 bg-blue-50 shadow-lg w-96 rounded-lg border-2 p-2">
         <Command.Input
           placeholder="Search with custom styling..."
-          className="h-9 w-full bg-transparent py-3 text-13 text-blue-900 outline-none placeholder:text-blue-400"
+          className="text-blue-900 placeholder:text-blue-400 h-9 w-full bg-transparent py-3 text-13 outline-none"
         />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 text-blue-900 hover:bg-blue-200">
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
             Custom Item 1
           </Command.Item>
-          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 text-blue-900 hover:bg-blue-200">
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
             Custom Item 2
           </Command.Item>
-          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 text-blue-900 hover:bg-blue-200">
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
             Custom Item 3
           </Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-13 text-blue-500">No matching items found.</Command.Empty>
+        <Command.Empty className="text-blue-500 py-6 text-center text-13">No matching items found.</Command.Empty>
       </Command>
     );
   },
@@ -193,16 +193,16 @@ export const CustomStyling: Story = {
 export const DisabledItems: Story = {
   render() {
     return (
-      <Command className="w-96 rounded-lg border border-gray-200 p-2">
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
         <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">Active Item 1</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Active Item 1</Command.Item>
           <Command.Item disabled className="cursor-not-allowed rounded-sm px-3 py-2 opacity-50">
             Disabled Item
           </Command.Item>
-          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">Active Item 2</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Active Item 2</Command.Item>
         </Command.List>
-        <Command.Empty className="py-6 text-center text-13 text-gray-500">No results found.</Command.Empty>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
       </Command>
     );
   },
diff --git a/packages/propel/src/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
index ff4bd42d050..7ce5f3ece61 100644
--- a/packages/propel/src/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/context-menu/context-menu.stories.tsx
@@ -187,9 +187,9 @@ export const OnFileCard: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="w-64 p-4 border border-subtle rounded-lg hover:bg-layer-1 cursor-pointer">
+          <div className="w-64 cursor-pointer rounded-lg border border-subtle p-4 hover:bg-layer-1">
             <div className="flex items-center gap-3">
-              <div className="w-12 h-12 bg-accent-primary rounded-sm flex items-center justify-center text-on-color text-16">
+              <div className="flex h-12 w-12 items-center justify-center rounded-sm bg-accent-primary text-16 text-on-color">
                 📄
               </div>
               <div className="flex-1">
@@ -234,7 +234,7 @@ export const OnImage: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="relative w-80 h-56 bg-layer-1 rounded-lg overflow-hidden cursor-pointer">
+          <div className="relative h-56 w-80 cursor-pointer overflow-hidden rounded-lg bg-layer-1">
             <div className="absolute inset-0 flex items-center justify-center text-placeholder">Image Placeholder</div>
           </div>
         </ContextMenu.Trigger>
@@ -266,8 +266,8 @@ export const OnText: Story = {
     return (
       <ContextMenu>
         <ContextMenu.Trigger>
-          <div className="w-96 p-6 border border-subtle rounded-lg">
-            <h3 className="text-16 font-semibold mb-2">Context Menu on Text</h3>
+          <div className="w-96 rounded-lg border border-subtle p-6">
+            <h3 className="mb-2 text-16 font-semibold">Context Menu on Text</h3>
             <p className="text-tertiary">
               Right click anywhere on this text area to see the context menu. This demonstrates how context menus can be
               applied to text content areas.
diff --git a/packages/propel/src/context-menu/context-menu.tsx b/packages/propel/src/context-menu/context-menu.tsx
index 84dd285b343..e5d0211a8cb 100644
--- a/packages/propel/src/context-menu/context-menu.tsx
+++ b/packages/propel/src/context-menu/context-menu.tsx
@@ -65,7 +65,7 @@ const ContextMenuContent = React.forwardRef(function ContextMenuContent(
     >
       <ContextMenuPrimitive.Popup
         className={cn(
-          "z-50 min-w-32 overflow-hidden rounded-md border border-subtle bg-surface-1 p-1 shadow-md",
+          "shadow-md z-50 min-w-32 overflow-hidden rounded-md border border-subtle bg-surface-1 p-1",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
@@ -87,7 +87,7 @@ const ContextMenuItem = React.forwardRef(function ContextMenuItem(
     <ContextMenuPrimitive.Item
       ref={ref}
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-13 outline-none",
+        "relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-13 outline-none select-none",
         "focus:bg-surface-2 focus:text-primary",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
@@ -105,7 +105,7 @@ const ContextMenuSeparator = React.forwardRef(function ContextMenuSeparator(
   ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Separator>>
 ) {
   return (
-    <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-subtle-1", className)} {...props} />
+    <ContextMenuPrimitive.Separator ref={ref} className={cn("bg-subtle-1 -mx-1 my-1 h-px", className)} {...props} />
   );
 });
 
@@ -119,7 +119,7 @@ const ContextMenuSubmenuTrigger = React.forwardRef(function ContextMenuSubmenuTr
     <ContextMenuPrimitive.SubmenuTrigger
       ref={ref}
       className={cn(
-        "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-13 outline-none focus:outline-none",
+        "flex cursor-default items-center rounded-xs px-2 py-1.5 text-13 outline-none select-none focus:outline-none",
         "focus:bg-surface-2 data-[state=open]:bg-surface-2",
         className
       )}
diff --git a/packages/propel/src/design-system/design-system-philosophy.stories.tsx b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
index 6e931155610..e6a2167cd69 100644
--- a/packages/propel/src/design-system/design-system-philosophy.stories.tsx
+++ b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
@@ -48,10 +48,10 @@ const Info: React.FC<{ title: string; children?: React.ReactNode; tone?: "info"
   tone = "info",
 }) => (
   <div
-    className={`mb-4 rounded-md border ${tone === "warn" ? "border-danger-strong bg-red-50 p-4" : "border-subtle bg-layer-1 p-4"}`}
+    className={`mb-4 rounded-md border ${tone === "warn" ? "bg-red-50 border-danger-strong p-4" : "border-subtle bg-layer-1 p-4"}`}
   >
-    <h3 className={`text-primary mb-2 text-16 font-semibold`}>{title}</h3>
-    <div className="text-secondary text-13">{children}</div>
+    <h3 className={`mb-2 text-16 font-semibold text-primary`}>{title}</h3>
+    <div className="text-13 text-secondary">{children}</div>
   </div>
 );
 
@@ -82,8 +82,8 @@ export const ApplicationRoot: Story = {
       </Info>
 
       <Surface>
-        <h4 className="text-primary mb-2 font-semibold">Page Content (bg-surface-1)</h4>
-        <p className="text-secondary text-13">Pages use surfaces, not canvas. This is a typical page layout.</p>
+        <h4 className="mb-2 font-semibold text-primary">Page Content (bg-surface-1)</h4>
+        <p className="text-13 text-secondary">Pages use surfaces, not canvas. This is a typical page layout.</p>
       </Surface>
     </DemoRoot>
   ),
@@ -98,13 +98,13 @@ export const SurfaceSiblings: Story = {
 
       <TwoColGrid>
         <Surface>
-          <h4 className="text-primary mb-2 font-semibold">Surface 1</h4>
-          <p className="text-secondary text-13">This is bg-surface-1 - a primary surface</p>
+          <h4 className="mb-2 font-semibold text-primary">Surface 1</h4>
+          <p className="text-13 text-secondary">This is bg-surface-1 - a primary surface</p>
         </Surface>
 
-        <Surface className="bg-surface-2 rounded-md p-6">
-          <h4 className="text-primary mb-2 font-semibold">Surface 2</h4>
-          <p className="text-secondary text-13">This is bg-surface-2 - a secondary surface (sibling to surface-1)</p>
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h4 className="mb-2 font-semibold text-primary">Surface 2</h4>
+          <p className="text-13 text-secondary">This is bg-surface-2 - a secondary surface (sibling to surface-1)</p>
         </Surface>
       </TwoColGrid>
     </DemoRoot>
@@ -117,19 +117,19 @@ export const LayerStacking: Story = {
       <Info title="✅ Layer Stacking Pattern">Layers stack to create depth: Surface → Layer 1 → Layer 2 → Layer 3</Info>
 
       <Surface>
-        <h4 className="text-primary mb-3 font-semibold">Surface 1</h4>
+        <h4 className="mb-3 font-semibold text-primary">Surface 1</h4>
 
-        <Layer className="bg-layer-1 hover:bg-layer-1-hover mb-4 rounded-md p-4">
-          <h5 className="text-primary mb-2 font-medium">Layer 1 (First level of depth)</h5>
-          <p className="text-secondary mb-3 text-13">Hover over me to see the hover state</p>
+        <Layer className="mb-4 rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+          <h5 className="mb-2 font-medium text-primary">Layer 1 (First level of depth)</h5>
+          <p className="mb-3 text-13 text-secondary">Hover over me to see the hover state</p>
 
-          <Layer className="bg-layer-2 hover:bg-layer-2-hover rounded-md p-3">
-            <h6 className="text-primary mb-2 text-13 font-medium">Layer 2 (Second level)</h6>
-            <p className="text-secondary mb-2 text-13">Nested within Layer 1</p>
+          <Layer className="rounded-md bg-layer-2 p-3 hover:bg-layer-2-hover">
+            <h6 className="mb-2 text-13 font-medium text-primary">Layer 2 (Second level)</h6>
+            <p className="mb-2 text-13 text-secondary">Nested within Layer 1</p>
 
-            <Layer className="bg-layer-3 hover:bg-layer-3-hover rounded-md p-2" hover>
-              <p className="text-primary text-11 font-medium">Layer 3 (Third level)</p>
-              <p className="text-secondary text-11">Deepest nesting level</p>
+            <Layer className="rounded-md bg-layer-3 p-2 hover:bg-layer-3-hover" hover>
+              <p className="text-11 font-medium text-primary">Layer 3 (Third level)</p>
+              <p className="text-11 text-secondary">Deepest nesting level</p>
             </Layer>
           </Layer>
         </Layer>
@@ -148,18 +148,18 @@ export const SurfaceLayerAssociation: Story = {
 
       <TwoColGrid>
         <Surface>
-          <h4 className="text-primary mb-3 font-semibold">Surface 1</h4>
-          <Layer className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
-            <h5 className="text-primary mb-1 font-medium">Layer 1</h5>
-            <p className="text-secondary text-13">Correctly using layer-1 with surface-1</p>
+          <h4 className="mb-3 font-semibold text-primary">Surface 1</h4>
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+            <h5 className="mb-1 font-medium text-primary">Layer 1</h5>
+            <p className="text-13 text-secondary">Correctly using layer-1 with surface-1</p>
           </Layer>
         </Surface>
 
-        <Surface className="bg-surface-2 rounded-md p-6">
-          <h4 className="text-primary mb-3 font-semibold">Surface 2</h4>
-          <Layer className="bg-layer-2 hover:bg-layer-2-hover rounded-md p-4">
-            <h5 className="text-primary mb-1 font-medium">Layer 2</h5>
-            <p className="text-secondary text-13">Correctly using layer-2 with surface-2</p>
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h4 className="mb-3 font-semibold text-primary">Surface 2</h4>
+          <Layer className="rounded-md bg-layer-2 p-4 hover:bg-layer-2-hover">
+            <h5 className="mb-1 font-medium text-primary">Layer 2</h5>
+            <p className="text-13 text-secondary">Correctly using layer-2 with surface-2</p>
           </Layer>
         </Surface>
       </TwoColGrid>
@@ -169,18 +169,18 @@ export const SurfaceLayerAssociation: Story = {
           In very rare cases, form elements (inputs, buttons, switches) can use one level above for visual separation.
         </Info>
         <Surface>
-          <h4 className="text-primary mb-3 font-semibold">Modal with Input (Rare Exception)</h4>
+          <h4 className="mb-3 font-semibold text-primary">Modal with Input (Rare Exception)</h4>
           <div className="space-y-3">
             <div>
-              <label htmlFor="example-input" className="text-secondary text-13">
+              <label htmlFor="example-input" className="text-13 text-secondary">
                 Name
               </label>
               <input
                 id="example-input"
-                className="w-full bg-layer-2 border border-subtle rounded-md px-3 py-2 text-primary mt-1"
+                className="mt-1 w-full rounded-md border border-subtle bg-layer-2 px-3 py-2 text-primary"
                 placeholder="Input uses layer-2 for visual separation"
               />
-              <p className="text-tertiary text-11 mt-1">
+              <p className="mt-1 text-11 text-tertiary">
                 Input uses bg-layer-2 (one level above) for visual separation from modal surface
               </p>
             </div>
@@ -200,21 +200,21 @@ export const ModalException: Story = {
       </Info>
 
       <Surface>
-        <h4 className="text-primary mb-2 font-semibold">Main Page Content</h4>
-        <p className="text-secondary text-13">This is the main page using bg-surface-1</p>
+        <h4 className="mb-2 font-semibold text-primary">Main Page Content</h4>
+        <p className="text-13 text-secondary">This is the main page using bg-surface-1</p>
       </Surface>
 
       <div className="fixed inset-0 z-50 flex items-center justify-center">
-        <div className="bg-backdrop absolute inset-0" />
-        <div className="bg-surface-1 relative z-10 max-w-md rounded-lg p-6 shadow-lg">
-          <h4 className="text-primary mb-3 font-semibold">Modal Dialog</h4>
-          <p className="text-secondary mb-4 text-13">
+        <div className="absolute inset-0 bg-backdrop" />
+        <div className="shadow-lg relative z-10 max-w-md rounded-lg bg-surface-1 p-6">
+          <h4 className="mb-3 font-semibold text-primary">Modal Dialog</h4>
+          <p className="mb-4 text-13 text-secondary">
             This modal uses bg-surface-1 even though the page below also uses bg-surface-1. This is allowed because
             they&apos;re on different planes.
           </p>
 
-          <Layer className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-3">
-            <p className="text-primary text-13">Modal content can use layers as normal</p>
+          <Layer className="rounded-md bg-layer-1 p-3 hover:bg-layer-1-hover">
+            <p className="text-13 text-primary">Modal content can use layers as normal</p>
           </Layer>
         </div>
       </div>
@@ -228,12 +228,12 @@ export const CardListPattern: Story = {
       <Info title="✅ Card List Pattern">Common pattern: Surface containing multiple layer-1 cards</Info>
 
       <Surface>
-        <h4 className="text-primary mb-4 font-semibold">Task List</h4>
+        <h4 className="mb-4 font-semibold text-primary">Task List</h4>
         <div className="space-y-3">
           {[1, 2, 3].map((item) => (
-            <Layer key={item} className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
-              <h5 className="text-primary mb-1 font-medium">Task {item}</h5>
-              <p className="text-secondary text-13">This is a task card using bg-layer-1 with hover state</p>
+            <Layer key={item} className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+              <h5 className="mb-1 font-medium text-primary">Task {item}</h5>
+              <p className="text-13 text-secondary">This is a task card using bg-layer-1 with hover state</p>
             </Layer>
           ))}
         </div>
@@ -250,21 +250,21 @@ export const SidebarLayoutPattern: Story = {
         hover states.
       </Info>
 
-      <Surface className="bg-surface-1 flex rounded-md">
-        <aside className="border-subtle w-64 border-r p-4">
-          <h4 className="text-primary mb-3 font-semibold">Sidebar</h4>
+      <Surface className="flex rounded-md bg-surface-1">
+        <aside className="w-64 border-r border-subtle p-4">
+          <h4 className="mb-3 font-semibold text-primary">Sidebar</h4>
           <div className="space-y-2">
             {["Home", "Projects", "Settings"].map((item) => (
-              <div key={item} className="hover:bg-layer-1-hover rounded-md p-2 transition-colors">
-                <p className="text-primary text-13">{item}</p>
+              <div key={item} className="rounded-md p-2 transition-colors hover:bg-layer-1-hover">
+                <p className="text-13 text-primary">{item}</p>
               </div>
             ))}
           </div>
         </aside>
 
         <main className="flex-1 p-6">
-          <h4 className="text-primary mb-3 font-semibold">Main Content</h4>
-          <Layer className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+          <h4 className="mb-3 font-semibold text-primary">Main Content</h4>
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
             <p className="text-primary">Content card using layer-1</p>
           </Layer>
         </main>
@@ -280,19 +280,19 @@ export const StateVariants: Story = {
 
       <Surface>
         <div className="space-y-4">
-          <Layer className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
-            <h5 className="text-primary mb-1 font-medium">Hover State</h5>
-            <p className="text-secondary text-13">Hover over me to see bg-layer-1-hover</p>
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+            <h5 className="mb-1 font-medium text-primary">Hover State</h5>
+            <p className="text-13 text-secondary">Hover over me to see bg-layer-1-hover</p>
           </Layer>
 
-          <div className="bg-layer-1-active rounded-md p-4">
-            <h5 className="text-primary mb-1 font-medium">Active State</h5>
-            <p className="text-secondary text-13">Using bg-layer-1-active (pressed/active)</p>
+          <div className="rounded-md bg-layer-1-active p-4">
+            <h5 className="mb-1 font-medium text-primary">Active State</h5>
+            <p className="text-13 text-secondary">Using bg-layer-1-active (pressed/active)</p>
           </div>
 
-          <div className="bg-layer-1-selected rounded-md p-4">
-            <h5 className="text-primary mb-1 font-medium">Selected State</h5>
-            <p className="text-secondary text-13">Using bg-layer-1-selected (when selected)</p>
+          <div className="rounded-md bg-layer-1-selected p-4">
+            <h5 className="mb-1 font-medium text-primary">Selected State</h5>
+            <p className="text-13 text-secondary">Using bg-layer-1-selected (when selected)</p>
           </div>
         </div>
       </Surface>
@@ -306,12 +306,12 @@ export const TextColorHierarchy: Story = {
       <Info title="✅ Text Color Hierarchy">Semantic text colors for different importance levels</Info>
 
       <Surface>
-        <div className="bg-layer-1 rounded-md p-4">
-          <h4 className="text-primary mb-3 text-16 font-semibold">Primary Text</h4>
-          <p className="text-secondary mb-3">Secondary text for descriptions and supporting content</p>
-          <p className="text-tertiary mb-3 text-13">Tertiary text for labels and metadata</p>
+        <div className="rounded-md bg-layer-1 p-4">
+          <h4 className="mb-3 text-16 font-semibold text-primary">Primary Text</h4>
+          <p className="mb-3 text-secondary">Secondary text for descriptions and supporting content</p>
+          <p className="mb-3 text-13 text-tertiary">Tertiary text for labels and metadata</p>
           <input
-            className="placeholder-(--text-color-placeholder) border-subtle rounded border px-3 py-2"
+            className="rounded border border-subtle px-3 py-2 placeholder-(--text-color-placeholder)"
             placeholder="Placeholder text for inputs"
           />
         </div>
@@ -325,9 +325,9 @@ export const CompleteExample: Story = {
     <DemoRoot>
       <Info title="✅ Complete Example">A realistic dashboard layout using all design system concepts</Info>
 
-      <div className="bg-surface-1 mb-6 rounded-md">
-        <div className="border-subtle border-b p-4">
-          <h1 className="text-primary text-18 font-bold">Dashboard</h1>
+      <div className="mb-6 rounded-md bg-surface-1">
+        <div className="border-b border-subtle p-4">
+          <h1 className="text-18 font-bold text-primary">Dashboard</h1>
         </div>
       </div>
 
@@ -338,9 +338,9 @@ export const CompleteExample: Story = {
           { label: "Completed Tasks", value: "856" },
         ].map((stat, idx) => (
           <Surface key={idx}>
-            <Layer className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
-              <p className="text-tertiary mb-1 text-13">{stat.label}</p>
-              <p className="text-primary text-20 font-bold">{stat.value}</p>
+            <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+              <p className="mb-1 text-13 text-tertiary">{stat.label}</p>
+              <p className="text-20 font-bold text-primary">{stat.value}</p>
             </Layer>
           </Surface>
         ))}
@@ -348,23 +348,23 @@ export const CompleteExample: Story = {
 
       <div className="mt-6 grid grid-cols-2 gap-6">
         <Surface>
-          <h3 className="text-primary mb-4 font-semibold">Recent Activity</h3>
+          <h3 className="mb-4 font-semibold text-primary">Recent Activity</h3>
           <div className="space-y-2">
             {[1, 2, 3].map((item) => (
-              <Layer key={item} className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-3">
-                <p className="text-primary mb-1 text-13 font-medium">Activity {item}</p>
-                <p className="text-secondary text-11">Description of the activity</p>
+              <Layer key={item} className="rounded-md bg-layer-1 p-3 hover:bg-layer-1-hover">
+                <p className="mb-1 text-13 font-medium text-primary">Activity {item}</p>
+                <p className="text-11 text-secondary">Description of the activity</p>
               </Layer>
             ))}
           </div>
         </Surface>
 
-        <Surface className="bg-surface-2 rounded-md p-6">
-          <h3 className="text-primary mb-4 font-semibold">Quick Actions</h3>
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h3 className="mb-4 font-semibold text-primary">Quick Actions</h3>
           <div className="space-y-2">
             {["Create Project", "Invite Team", "View Reports"].map((action) => (
-              <Layer key={action} className="bg-layer-2 hover:bg-layer-2-hover rounded-md p-3">
-                <p className="text-primary text-13">{action}</p>
+              <Layer key={action} className="rounded-md bg-layer-2 p-3 hover:bg-layer-2-hover">
+                <p className="text-13 text-primary">{action}</p>
               </Layer>
             ))}
           </div>
@@ -382,49 +382,49 @@ export const CommonMistakes: Story = {
       </Info>
 
       <div className="space-y-6">
-        <div className="border-2 border-danger-strong rounded-md p-4">
-          <h4 className="text-primary mb-2 font-semibold">❌ Mistake 1: Nested Surfaces (Same Plane)</h4>
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 1: Nested Surfaces (Same Plane)</h4>
           <Surface>
-            <p className="text-secondary mb-2 text-13">Surface 1</p>
-            <div className="bg-surface-2 rounded-md p-4">
-              <p className="text-secondary text-13">Surface 2 nested inside Surface 1 - WRONG!</p>
+            <p className="mb-2 text-13 text-secondary">Surface 1</p>
+            <div className="rounded-md bg-surface-2 p-4">
+              <p className="text-13 text-secondary">Surface 2 nested inside Surface 1 - WRONG!</p>
             </div>
           </Surface>
-          <p className="text-tertiary mt-2 text-11">
+          <p className="mt-2 text-11 text-tertiary">
             ✅ Fix: Use bg-layer-1 for nested elements, or make them sibling surfaces
           </p>
         </div>
 
-        <div className="border-2 border-danger-strong rounded-md p-4">
-          <h4 className="text-primary mb-2 font-semibold">❌ Mistake 2: Wrong Layer-Surface Association</h4>
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 2: Wrong Layer-Surface Association</h4>
           <Surface>
-            <p className="text-secondary mb-2 text-13">Surface 1</p>
-            <div className="bg-layer-2 rounded-md p-4">
-              <p className="text-secondary text-13">Using layer-2 with surface-1 for content box - WRONG!</p>
+            <p className="mb-2 text-13 text-secondary">Surface 1</p>
+            <div className="rounded-md bg-layer-2 p-4">
+              <p className="text-13 text-secondary">Using layer-2 with surface-1 for content box - WRONG!</p>
             </div>
           </Surface>
-          <p className="text-tertiary mt-2 text-11">
+          <p className="mt-2 text-11 text-tertiary">
             ✅ Fix: Use bg-layer-1 with bg-surface-1 for content boxes. Exception: Very rare cases for inputs/buttons
             that need visual separation (e.g., input in modal can use bg-layer-2 for separation).
           </p>
         </div>
 
-        <div className="border-2 border-danger-strong rounded-md p-4">
-          <h4 className="text-primary mb-2 font-semibold">❌ Mistake 3: Mismatched Hover State</h4>
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 3: Mismatched Hover State</h4>
           <Surface>
-            <div className="bg-layer-1 hover:bg-layer-2-hover rounded-md p-4 transition-colors">
-              <p className="text-secondary text-13">bg-layer-1 with hover:bg-layer-2-hover - WRONG!</p>
+            <div className="rounded-md bg-layer-1 p-4 transition-colors hover:bg-layer-2-hover">
+              <p className="text-13 text-secondary">bg-layer-1 with hover:bg-layer-2-hover - WRONG!</p>
             </div>
           </Surface>
-          <p className="text-tertiary mt-2 text-11">✅ Fix: Use bg-layer-1 hover:bg-layer-1-hover</p>
+          <p className="mt-2 text-11 text-tertiary">✅ Fix: Use bg-layer-1 hover:bg-layer-1-hover</p>
         </div>
 
-        <div className="border-2 border-danger-strong rounded-md p-4">
-          <h4 className="text-primary mb-2 font-semibold">❌ Mistake 4: Canvas for Pages</h4>
-          <div className="bg-canvas rounded-md p-4">
-            <p className="text-secondary text-13">Using bg-canvas for a page or component - WRONG!</p>
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 4: Canvas for Pages</h4>
+          <div className="rounded-md bg-canvas p-4">
+            <p className="text-13 text-secondary">Using bg-canvas for a page or component - WRONG!</p>
           </div>
-          <p className="text-tertiary mt-2 text-11">
+          <p className="mt-2 text-11 text-tertiary">
             ✅ Fix: Canvas should only be at application root. Use bg-surface-1 for pages
           </p>
         </div>
diff --git a/packages/propel/src/dialog/dialog.stories.tsx b/packages/propel/src/dialog/dialog.stories.tsx
index 94d53a6ff68..fb9b17bcab5 100644
--- a/packages/propel/src/dialog/dialog.stories.tsx
+++ b/packages/propel/src/dialog/dialog.stories.tsx
@@ -34,7 +34,7 @@ const meta = {
       <>
         <button
           onClick={() => setOpen(true)}
-          className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
         >
           Open Dialog
         </button>
@@ -44,18 +44,18 @@ const meta = {
               <div className="p-6">
                 <Dialog.Title>Dialog Title</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-13 text-gray-600">This is the dialog content. You can put any content here.</p>
+                  <p className="text-gray-600 text-13">This is the dialog content. You can put any content here.</p>
                 </div>
                 <div className="mt-6 flex justify-end gap-2">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded-sm bg-gray-200 px-4 py-2 text-13 hover:bg-gray-300"
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
                   >
                     Cancel
                   </button>
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Confirm
                   </button>
@@ -85,7 +85,7 @@ export const TopPosition: Story = {
       <>
         <button
           onClick={() => setOpen(true)}
-          className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
         >
           Open Dialog (Top)
         </button>
@@ -95,14 +95,14 @@ export const TopPosition: Story = {
               <div className="p-6">
                 <Dialog.Title>Top Positioned Dialog</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-13 text-gray-600">
+                  <p className="text-gray-600 text-13">
                     This dialog appears at the top of the screen instead of centered.
                   </p>
                 </div>
                 <div className="mt-6 flex justify-end gap-2">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded-sm bg-gray-200 px-4 py-2 text-13 hover:bg-gray-300"
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
                   >
                     Close
                   </button>
@@ -123,7 +123,7 @@ export const SmallWidth: Story = {
       <>
         <button
           onClick={() => setOpen(true)}
-          className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
         >
           Open Small Dialog
         </button>
@@ -133,12 +133,12 @@ export const SmallWidth: Story = {
               <div className="p-6">
                 <Dialog.Title>Small Dialog</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-13 text-gray-600">This is a small dialog.</p>
+                  <p className="text-gray-600 text-13">This is a small dialog.</p>
                 </div>
                 <div className="mt-6 flex justify-end">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Close
                   </button>
@@ -159,7 +159,7 @@ export const LargeWidth: Story = {
       <>
         <button
           onClick={() => setOpen(true)}
-          className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
         >
           Open Large Dialog
         </button>
@@ -169,14 +169,14 @@ export const LargeWidth: Story = {
               <div className="p-6">
                 <Dialog.Title>Large Dialog</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-13 text-gray-600">
+                  <p className="text-gray-600 text-13">
                     This is a large dialog with more horizontal space for content.
                   </p>
                 </div>
                 <div className="mt-6 flex justify-end">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Close
                   </button>
@@ -197,7 +197,7 @@ export const WithCloseButton: Story = {
       <>
         <button
           onClick={() => setOpen(true)}
-          className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
         >
           Open Dialog with Close Button
         </button>
@@ -207,12 +207,12 @@ export const WithCloseButton: Story = {
               <div className="p-6">
                 <div className="flex items-start justify-between">
                   <Dialog.Title>Dialog with Close Button</Dialog.Title>
-                  <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
+                  <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
                     <CloseIcon className="h-4 w-4" />
                   </button>
                 </div>
                 <div className="mt-4">
-                  <p className="text-13 text-gray-600">This dialog has a close button in the header.</p>
+                  <p className="text-gray-600 text-13">This dialog has a close button in the header.</p>
                 </div>
               </div>
             </Dialog.Panel>
@@ -234,7 +234,7 @@ export const ConfirmationDialog: Story = {
       <>
         <button
           onClick={() => setOpen(true)}
-          className="rounded-sm bg-red-500 px-4 py-2 text-on-color hover:bg-red-600"
+          className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 text-on-color"
         >
           Delete Item
         </button>
@@ -244,20 +244,20 @@ export const ConfirmationDialog: Story = {
               <div className="p-6">
                 <Dialog.Title>Confirm Deletion</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-13 text-gray-600">
+                  <p className="text-gray-600 text-13">
                     Are you sure you want to delete this item? This action cannot be undone.
                   </p>
                 </div>
                 <div className="mt-6 flex justify-end gap-2">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded-sm bg-gray-200 px-4 py-2 text-13 hover:bg-gray-300"
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
                   >
                     Cancel
                   </button>
                   <button
                     onClick={handleConfirm}
-                    className="rounded-sm bg-red-500 px-4 py-2 text-13 text-on-color hover:bg-red-600"
+                    className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Delete
                   </button>
@@ -283,7 +283,7 @@ export const FormDialog: Story = {
       <>
         <button
           onClick={() => setOpen(true)}
-          className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
         >
           Open Form
         </button>
@@ -294,24 +294,24 @@ export const FormDialog: Story = {
                 <Dialog.Title>Create New Item</Dialog.Title>
                 <div className="mt-4 space-y-4">
                   <div>
-                    <label htmlFor="name" className="block text-13 font-medium text-gray-700">
+                    <label htmlFor="name" className="text-gray-700 block text-13 font-medium">
                       Name
                     </label>
                     <input
                       type="text"
                       id="name"
-                      className="mt-1 w-full rounded-sm border border-gray-300 px-3 py-2 text-13"
+                      className="border-gray-300 mt-1 w-full rounded-sm border px-3 py-2 text-13"
                       placeholder="Enter name"
                     />
                   </div>
                   <div>
-                    <label htmlFor="description" className="block text-13 font-medium text-gray-700">
+                    <label htmlFor="description" className="text-gray-700 block text-13 font-medium">
                       Description
                     </label>
                     <textarea
                       id="description"
                       rows={3}
-                      className="mt-1 w-full rounded-sm border border-gray-300 px-3 py-2 text-13"
+                      className="border-gray-300 mt-1 w-full rounded-sm border px-3 py-2 text-13"
                       placeholder="Enter description"
                     />
                   </div>
@@ -320,13 +320,13 @@ export const FormDialog: Story = {
                   <button
                     type="button"
                     onClick={() => setOpen(false)}
-                    className="rounded-sm bg-gray-200 px-4 py-2 text-13 hover:bg-gray-300"
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
                   >
                     Cancel
                   </button>
                   <button
                     type="submit"
-                    className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Create
                   </button>
@@ -347,7 +347,7 @@ export const ScrollableContent: Story = {
       <>
         <button
           onClick={() => setOpen(true)}
-          className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
         >
           Open Scrollable Dialog
         </button>
@@ -358,7 +358,7 @@ export const ScrollableContent: Story = {
                 <Dialog.Title>Scrollable Content</Dialog.Title>
                 <div className="mt-4 max-h-96 overflow-y-auto">
                   {Array.from({ length: 20 }, (_, i) => (
-                    <p key={i} className="mb-2 text-13 text-gray-600">
+                    <p key={i} className="text-gray-600 mb-2 text-13">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
                       labore et dolore magna aliqua.
                     </p>
@@ -367,7 +367,7 @@ export const ScrollableContent: Story = {
                 <div className="mt-6 flex justify-end">
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Close
                   </button>
@@ -401,7 +401,7 @@ export const AllWidths: Story = {
           <button
             key={width}
             onClick={() => setOpenWidth(width)}
-            className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
+            className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
           >
             {label}
           </button>
@@ -412,12 +412,12 @@ export const AllWidths: Story = {
               <div className="p-6">
                 <Dialog.Title>{label} Dialog</Dialog.Title>
                 <div className="mt-4">
-                  <p className="text-13 text-gray-600">This dialog uses the {label} width variant.</p>
+                  <p className="text-gray-600 text-13">This dialog uses the {label} width variant.</p>
                 </div>
                 <div className="mt-6 flex justify-end">
                   <button
                     onClick={() => setOpenWidth(null)}
-                    className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
                   >
                     Close
                   </button>
diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx
index d08ce10d26d..3a917b2c0e6 100644
--- a/packages/propel/src/dialog/root.tsx
+++ b/packages/propel/src/dialog/root.tsx
@@ -46,7 +46,7 @@ const BASE_CLASSNAME = "relative text-left bg-surface-1 rounded-lg shadow-md w-f
 
 // Utility functions
 const getPositionClassNames = (position: DialogPosition) =>
-  cn("isolate fixed z-100", {
+  cn("fixed isolate z-100", {
     "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center",
     "top-8 left-1/2 -translate-x-1/2": position === "top",
   });
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
index 1b57227b7bc..da03ba4a4cf 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
@@ -44,8 +44,8 @@ export const Default: Story = {
           closeOnSelect
         />
         {selectedValue && (
-          <div className="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
-            <div className="font-medium mb-2">Selected:</div>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected:</div>
             <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
@@ -140,8 +140,8 @@ export const LucideIcons: Story = {
           iconType="lucide"
         />
         {selectedValue && (
-          <div className="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
-            <div className="font-medium mb-2">Selected Icon:</div>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected Icon:</div>
             <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
@@ -173,8 +173,8 @@ export const MaterialIcons: Story = {
           iconType="material"
         />
         {selectedValue && (
-          <div className="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
-            <div className="font-medium mb-2">Selected Icon:</div>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected Icon:</div>
             <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
@@ -200,7 +200,7 @@ export const CloseOnSelectDisabled: Story = {
 
     return (
       <div className="space-y-4 p-4">
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           <EmojiPicker
             isOpen={isOpen}
             handleToggle={setIsOpen}
@@ -210,16 +210,16 @@ export const CloseOnSelectDisabled: Story = {
             closeOnSelect={false}
           />
           <button
-            className="px-3 py-1.5 text-13 bg-layer-1 rounded-sm hover:bg-surface-2"
+            className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2"
             onClick={() => setSelectedValues([])}
           >
             Clear
           </button>
         </div>
         {selectedValues.length > 0 && (
-          <div className="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
-            <div className="font-medium mb-2">Selected ({selectedValues.length}):</div>
-            <div className="flex gap-2 flex-wrap">
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected ({selectedValues.length}):</div>
+            <div className="flex flex-wrap gap-2">
               {selectedValues.map((val, idx) => (
                 <span key={idx} className="text-16">
                   {val.type === "emoji" ? val.value : "🎨"}
@@ -312,7 +312,7 @@ export const CustomIconColor: Story = {
           defaultIconColor="#FF5733"
         />
         {selectedValue && (
-          <div className="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
             <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
@@ -335,9 +335,9 @@ export const DifferentPlacements: Story = {
     const [isOpen4, setIsOpen4] = useState(false);
 
     return (
-      <div className="p-8 space-y-8">
-        <div className="flex gap-4 items-center">
-          <span className="text-13 w-32">Bottom Start:</span>
+      <div className="space-y-8 p-8">
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom Start:</span>
           <EmojiPicker
             isOpen={isOpen1}
             handleToggle={setIsOpen1}
@@ -346,8 +346,8 @@ export const DifferentPlacements: Story = {
             placement="bottom-start"
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-13 w-32">Bottom End:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom End:</span>
           <EmojiPicker
             isOpen={isOpen2}
             handleToggle={setIsOpen2}
@@ -356,8 +356,8 @@ export const DifferentPlacements: Story = {
             placement="bottom-end"
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-13 w-32">Top Start:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top Start:</span>
           <EmojiPicker
             isOpen={isOpen3}
             handleToggle={setIsOpen3}
@@ -366,8 +366,8 @@ export const DifferentPlacements: Story = {
             placement="top-start"
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-13 w-32">Top End:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top End:</span>
           <EmojiPicker
             isOpen={isOpen4}
             handleToggle={setIsOpen4}
@@ -406,19 +406,19 @@ export const InFormContext: Story = {
 
     return (
       <div className="max-w-md p-4">
-        <form onSubmit={handleSubmit} className="space-y-4 p-6 border border-subtle rounded-lg">
+        <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-subtle p-6">
           <div>
-            <label className="block text-13 font-medium mb-2">Project Title</label>
+            <label className="mb-2 block text-13 font-medium">Project Title</label>
             <input
               type="text"
               value={formData.title}
               onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
-              className="w-full px-3 py-2 bg-layer-1 border border-subtle rounded-sm"
+              className="w-full rounded-sm border border-subtle bg-layer-1 px-3 py-2"
               placeholder="Enter project title"
             />
           </div>
           <div>
-            <label className="block text-13 font-medium mb-2">Project Icon</label>
+            <label className="mb-2 block text-13 font-medium">Project Icon</label>
             <EmojiPicker
               isOpen={isOpen}
               handleToggle={setIsOpen}
@@ -431,7 +431,7 @@ export const InFormContext: Story = {
           </div>
           <button
             type="submit"
-            className="w-full px-4 py-2 bg-accent-primary text-on-color rounded-sm hover:bg-accent-primary/80"
+            className="w-full rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
           >
             Create Project
           </button>
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
index 296f8801041..9fc781276d1 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
@@ -106,7 +106,7 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
       </Popover.Button>
       <Popover.Panel
         positionerClassName="z-50"
-        className={cn("w-80 bg-surface-1 rounded-md border-[0.5px] border-strong overflow-hidden", dropdownClassName)}
+        className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
         side={finalSide}
         align={finalAlign}
         sideOffset={8}
@@ -132,9 +132,9 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
                 key={tab.key}
                 value={tab.key}
                 className={({ selected }) =>
-                  cn("py-1 text-13 rounded-sm border border-subtle bg-layer-1", {
+                  cn("rounded-sm border border-subtle bg-layer-1 py-1 text-13", {
                     "bg-surface-1 text-primary": selected,
-                    "text-placeholder hover:text-tertiary hover:bg-layer-1/60": !selected,
+                    "text-placeholder hover:bg-layer-1/60 hover:text-tertiary": !selected,
                   })
                 }
               >
diff --git a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
index 2500645adfc..13fc675f7f0 100644
--- a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
@@ -34,20 +34,20 @@ export function EmojiRoot(props: EmojiRootProps) {
   return (
     <EmojiPicker.Root
       data-slot="emoji-picker"
-      className="isolate flex flex-col rounded-md h-full w-full border-none p-2"
+      className="isolate flex h-full w-full flex-col rounded-md border-none p-2"
       onEmojiSelect={(val) => onChange(val.emoji)}
     >
-      <div className="flex items-center gap-2 justify-between [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0 px-1.5 py-2 sticky top-0 z-10 bg-surface-1">
+      <div className="sticky top-0 z-10 flex items-center justify-between gap-2 bg-surface-1 px-1.5 py-2 [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0">
         <div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
           <EmojiPicker.Search
             placeholder={searchPlaceholder}
             disabled={searchDisabled}
-            className="block rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 p-0 h-full w-full flex-grow-0 focus:border-accent-strong"
+            className="block h-full w-full flex-grow-0 rounded-md border-[0.5px] border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:border-accent-strong focus:outline-none"
           />
         </div>
         <EmojiPicker.SkinToneSelector
           data-slot="emoji-picker-skin-tone-selector"
-          className="bg-surface-1 hover:bg-accent mx-2 mb-1.5 size-8 rounded-md text-16 flex-shrink-0"
+          className="hover:bg-accent mx-2 mb-1.5 size-8 flex-shrink-0 rounded-md bg-surface-1 text-16"
         />
       </div>
       <EmojiPicker.Viewport data-slot="emoji-picker-content" className={cn("relative flex-1 outline-none")}>
@@ -58,7 +58,7 @@ export function EmojiRoot(props: EmojiRootProps) {
             CategoryHeader: ({ category, ...props }) => (
               <div
                 data-slot="emoji-picker-list-category-header"
-                className="bg-surface-1 text-tertiary px-3 pb-1.5 text-11 font-medium"
+                className="bg-surface-1 px-3 pb-1.5 text-11 font-medium text-tertiary"
                 {...props}
               >
                 {category.label}
diff --git a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
index d121f445f2d..9e61a8d4e07 100644
--- a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
@@ -38,39 +38,39 @@ export function IconRoot(props: IconRootProps) {
 
   return (
     <>
-      <div className="flex flex-col sticky top-0 bg-surface-1">
+      <div className="sticky top-0 flex flex-col bg-surface-1">
         {!searchDisabled && (
-          <div className="flex items-center px-2 py-[15px] w-full ">
+          <div className="flex w-full items-center px-2 py-[15px]">
             <div
-              className={cn("relative flex items-center gap-2 bg-surface-2 h-10 rounded-lg w-full px-[30px] border", {
+              className={cn("relative flex h-10 w-full items-center gap-2 rounded-lg border bg-surface-2 px-[30px]", {
                 "border-accent-strong": isInputFocused,
                 "border-transparent": !isInputFocused,
               })}
               onFocus={() => setIsInputFocused(true)}
               onBlur={() => setIsInputFocused(false)}
             >
-              <SearchIcon className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-placeholder" />
+              <SearchIcon className="absolute bottom-3 left-2.5 h-3.5 w-3.5 text-placeholder" />
 
               <input
                 placeholder="Search"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
-                className="block rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 border-none p-0 h-full w-full"
+                className="block h-full w-full rounded-md border-[0.5px] border-none border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:outline-none"
               />
             </div>
           </div>
         )}
-        <div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
+        <div className="grid h-9 grid-cols-9 items-center justify-items-center gap-2 px-2.5 py-1">
           {showHexInput ? (
-            <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">
+            <div className="col-span-8 ml-2 flex items-center gap-1 justify-self-stretch">
               <span
-                className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
+                className="mr-1 h-4 w-4 flex-shrink-0 rounded-full"
                 style={{
                   backgroundColor: `#${hexValue}`,
                 }}
               />
-              <span className="text-11 text-tertiary flex-shrink-0">HEX</span>
-              <span className="text-11 text-secondary flex-shrink-0 -mr-1">#</span>
+              <span className="flex-shrink-0 text-11 text-tertiary">HEX</span>
+              <span className="-mr-1 flex-shrink-0 text-11 text-secondary">#</span>
               <input
                 type="text"
                 value={hexValue}
@@ -79,7 +79,7 @@ export function IconRoot(props: IconRootProps) {
                   setHexValue(value);
                   if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
                 }}
-                className="block placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle flex-grow pl-0 text-11 text-secondary rounded-sm border-none bg-transparent ring-0"
+                className="block flex-grow rounded-sm border-[0.5px] border-none border-subtle bg-transparent px-3 py-2 pl-0 text-11 text-secondary placeholder-(--text-color-placeholder) ring-0 focus:outline-none"
                 autoFocus
               />
             </div>
@@ -88,7 +88,7 @@ export function IconRoot(props: IconRootProps) {
               <button
                 key={curCol}
                 type="button"
-                className="grid place-items-center size-5"
+                className="grid size-5 place-items-center"
                 onClick={() => {
                   setActiveColor(curCol);
                   setHexValue(curCol.slice(1, 7));
@@ -100,7 +100,7 @@ export function IconRoot(props: IconRootProps) {
           )}
           <button
             type="button"
-            className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
+            className={cn("grid h-4 w-4 place-items-center rounded-full border border-transparent", {
               "border-strong-1": !showHexInput,
             })}
             onClick={() => {
@@ -109,18 +109,18 @@ export function IconRoot(props: IconRootProps) {
             }}
           >
             {showHexInput ? (
-              <span className="conical-gradient h-4 w-4 rounded-full" />
+              <span className="h-4 w-4 rounded-full conical-gradient" />
             ) : (
-              <span className="text-tertiary text-10 grid place-items-center">#</span>
+              <span className="grid place-items-center text-10 text-tertiary">#</span>
             )}
           </button>
         </div>
-        <div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
+        <div className="flex h-6 w-full items-center gap-2 py-1 pr-3 pl-4">
           <InfoIcon className="h-3 w-3" />
           <p className="text-11"> Colors will be adjusted to ensure sufficient contrast.</p>
         </div>
       </div>
-      <div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2">
+      <div className="mt-2 grid grid-cols-8 justify-items-center gap-1 px-2.5">
         {iconType === "material" ? (
           <MaterialIconList query={query} onChange={onChange} activeColor={activeColor} />
         ) : (
diff --git a/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx b/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
index f49f631340d..5b24eaa7e62 100644
--- a/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
@@ -24,7 +24,7 @@ export function LucideIconsList(props: LucideIconsListProps) {
         <button
           key={icon.name}
           type="button"
-          className="h-9 w-9 select-none text-16 grid place-items-center rounded-sm hover:bg-layer-1"
+          className="grid h-9 w-9 place-items-center rounded-sm text-16 select-none hover:bg-layer-1"
           onClick={() => {
             onChange({
               name: icon.name,
diff --git a/packages/propel/src/emoji-icon-picker/icon/material-root.tsx b/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
index 83063d17205..1f2c4348fc8 100644
--- a/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
@@ -33,7 +33,7 @@ export function MaterialIconList(props: MaterialIconListProps) {
         <button
           key={icon.name}
           type="button"
-          className="h-9 w-9 select-none text-16 grid place-items-center rounded-sm hover:bg-layer-1"
+          className="grid h-9 w-9 place-items-center rounded-sm text-16 select-none hover:bg-layer-1"
           onClick={() => {
             onChange({
               name: icon.name,
@@ -46,7 +46,7 @@ export function MaterialIconList(props: MaterialIconListProps) {
               {icon.name}
             </span>
           ) : (
-            <span className="size-5 rounded-sm animate-pulse bg-layer-1" />
+            <span className="size-5 animate-pulse rounded-sm bg-layer-1" />
           )}
         </button>
       ))}
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
index c3516fbd710..9da60797550 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
@@ -43,13 +43,13 @@ export const Default: Story = {
           onChange={setSelectedEmoji}
           closeOnSelect
           label={
-            <span className="flex items-center justify-center rounded-md px-2 size-8 text-18">
+            <span className="flex size-8 items-center justify-center rounded-md px-2 text-18">
               {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-6 text-primary" />}
             </span>
           }
         />
         {selectedEmoji && (
-          <div className="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">Selected: {selectedEmoji}</div>
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">Selected: {selectedEmoji}</div>
         )}
       </div>
     );
@@ -75,7 +75,7 @@ export const WithCustomLabel: Story = {
           onChange={setSelectedEmoji}
           closeOnSelect
           label={
-            <button className="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2 flex items-center gap-2">
+            <button className="flex items-center gap-2 rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
               {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-4 w-4" />}
               <span className="text-13">Add Reaction</span>
             </button>
@@ -140,7 +140,7 @@ export const InlineReactions: Story = {
           onChange={handleReactionAdd}
           closeOnSelect
           label={
-            <button className="inline-flex items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5 h-7 w-7">
+            <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
               <SmilePlus className="h-3.5 w-3.5" />
             </button>
           }
@@ -164,9 +164,9 @@ export const DifferentPlacements: Story = {
     const [isOpen4, setIsOpen4] = useState(false);
 
     return (
-      <div className="p-8 space-y-8">
-        <div className="flex gap-4 items-center">
-          <span className="text-13 w-32">Bottom Start:</span>
+      <div className="space-y-8 p-8">
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom Start:</span>
           <EmojiReactionPicker
             isOpen={isOpen1}
             handleToggle={setIsOpen1}
@@ -175,8 +175,8 @@ export const DifferentPlacements: Story = {
             label={<SmilePlus className="h-6 w-6" />}
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-13 w-32">Bottom End:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom End:</span>
           <EmojiReactionPicker
             isOpen={isOpen2}
             handleToggle={setIsOpen2}
@@ -185,8 +185,8 @@ export const DifferentPlacements: Story = {
             label={<SmilePlus className="h-6 w-6" />}
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-13 w-32">Top Start:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top Start:</span>
           <EmojiReactionPicker
             isOpen={isOpen3}
             handleToggle={setIsOpen3}
@@ -195,8 +195,8 @@ export const DifferentPlacements: Story = {
             label={<SmilePlus className="h-6 w-6" />}
           />
         </div>
-        <div className="flex gap-4 items-center">
-          <span className="text-13 w-32">Top End:</span>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top End:</span>
           <EmojiReactionPicker
             isOpen={isOpen4}
             handleToggle={setIsOpen4}
@@ -230,7 +230,7 @@ export const SearchDisabled: Story = {
           closeOnSelect
           searchDisabled
           label={
-            <button className="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2">
+            <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
               No Search
             </button>
           }
@@ -261,7 +261,7 @@ export const CustomSearchPlaceholder: Story = {
           closeOnSelect
           searchPlaceholder="Find your emoji..."
           label={
-            <button className="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2">
+            <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
               Custom Search
             </button>
           }
@@ -289,29 +289,29 @@ export const CloseOnSelectDisabled: Story = {
 
     return (
       <div className="space-y-4 p-4">
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           <EmojiReactionPicker
             isOpen={isOpen}
             handleToggle={setIsOpen}
             onChange={handleChange}
             closeOnSelect={false}
             label={
-              <button className="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2">
+              <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
                 Select Multiple (Stays Open)
               </button>
             }
           />
           <button
-            className="px-3 py-1.5 text-13 bg-layer-1 rounded-sm hover:bg-surface-2"
+            className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2"
             onClick={() => setSelectedEmojis([])}
           >
             Clear
           </button>
         </div>
         {selectedEmojis.length > 0 && (
-          <div className="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
-            <div className="font-medium mb-2">Selected ({selectedEmojis.length}):</div>
-            <div className="flex gap-2 flex-wrap">
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected ({selectedEmojis.length}):</div>
+            <div className="flex flex-wrap gap-2">
               {selectedEmojis.map((emoji, idx) => (
                 <span key={idx} className="text-18">
                   {emoji}
@@ -364,14 +364,14 @@ export const InMessageContext: Story = {
     };
 
     return (
-      <div className="max-w-md border border-subtle rounded-lg p-4 space-y-3">
+      <div className="max-w-md space-y-3 rounded-lg border border-subtle p-4">
         <div className="flex items-start gap-3">
-          <div className="w-8 h-8 rounded-full bg-accent-primary flex items-center justify-center text-on-color text-13">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-primary text-13 text-on-color">
             AB
           </div>
           <div className="flex-1">
-            <div className="font-medium text-13">Alice Brown</div>
-            <div className="text-13 text-tertiary mt-1">
+            <div className="text-13 font-medium">Alice Brown</div>
+            <div className="mt-1 text-13 text-tertiary">
               Just finished the design for the new dashboard! Would love to hear your thoughts.
             </div>
           </div>
@@ -384,7 +384,7 @@ export const InMessageContext: Story = {
             onChange={handleReactionAdd}
             closeOnSelect
             label={
-              <button className="inline-flex items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5 h-7 w-7">
+              <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
                 <SmilePlus className="h-3.5 w-3.5" />
               </button>
             }
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
index 47894ff3ac0..4e3b326e6cf 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
@@ -70,7 +70,7 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
       </Popover.Button>
       <Popover.Panel
         positionerClassName="z-50"
-        className={cn("w-80 bg-surface-1 rounded-md border-[0.5px] border-strong overflow-hidden", dropdownClassName)}
+        className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
         side={finalSide}
         align={finalAlign}
         sideOffset={8}
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
index 6261d347760..ebfb2a67c3c 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
@@ -54,7 +54,7 @@ export const Interactive: Story = {
     };
 
     return (
-      <div className="flex flex-col gap-4 items-center">
+      <div className="flex flex-col items-center gap-4">
         <EmojiReaction
           emoji="👍"
           count={count}
@@ -213,14 +213,14 @@ export const InMessageContext: Story = {
     };
 
     return (
-      <div className="max-w-md border border-subtle rounded-lg p-4 space-y-3">
+      <div className="max-w-md space-y-3 rounded-lg border border-subtle p-4">
         <div className="flex items-start gap-3">
-          <div className="w-8 h-8 rounded-full bg-accent-primary flex items-center justify-center text-on-color text-13">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-primary text-13 text-on-color">
             AB
           </div>
           <div className="flex-1">
-            <div className="font-medium text-13">Alice Brown</div>
-            <div className="text-13 text-tertiary mt-1">
+            <div className="text-13 font-medium">Alice Brown</div>
+            <div className="mt-1 text-13 text-tertiary">
               Hey everyone! Just wanted to share some exciting news about our project launch next week!
             </div>
           </div>
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
index cae077eba83..b71b6230404 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
@@ -68,7 +68,7 @@ const EmojiReaction = React.forwardRef(function EmojiReaction(
 
     return (
       <div className="text-11">
-        <div className="font-medium mb-1">{stringToEmoji(emoji)}</div>
+        <div className="mb-1 font-medium">{stringToEmoji(emoji)}</div>
         <div>
           {displayUsers.join(", ")}
           {remainingCount > 0 && ` and ${remainingCount} more`}
@@ -82,15 +82,15 @@ const EmojiReaction = React.forwardRef(function EmojiReaction(
       ref={ref}
       onClick={handleClick}
       className={cn(
-        "inline-flex items-center rounded-full border px-1.5 text-11 gap-0.5 transition-all duration-200",
+        "inline-flex items-center gap-0.5 rounded-full border px-1.5 text-11 transition-all duration-200",
         reacted
-          ? "bg-accent-primary/10 border-accent-strong text-accent-primary"
-          : "bg-surface-1 border-subtle text-tertiary hover:border-strong hover:bg-surface-2",
+          ? "border-accent-strong bg-accent-primary/10 text-accent-primary"
+          : "border-subtle bg-surface-1 text-tertiary hover:border-strong hover:bg-surface-2",
         className
       )}
       {...props}
     >
-      <span className="text-14 leading-unset">{emoji}</span>
+      <span className="leading-unset text-14">{emoji}</span>
       {showCount && count > 0 && <AnimatedCounter count={count} size="sm" className="text-11 leading-normal" />}
     </button>
   );
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
index 31fc0702117..fa16d771ad5 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
@@ -29,83 +29,83 @@ import {
 
 export const HorizontalStackAssetsMap = [
   {
-    asset: <CustomerHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <CustomerHorizontalStackIllustration className="h-20 w-20" />,
     title: "Customer",
   },
   {
-    asset: <EpicHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <EpicHorizontalStackIllustration className="h-20 w-20" />,
     title: "Epic",
   },
   {
-    asset: <EstimateHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <EstimateHorizontalStackIllustration className="h-20 w-20" />,
     title: "Estimate",
   },
   {
-    asset: <ExportHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <ExportHorizontalStackIllustration className="h-20 w-20" />,
     title: "Export",
   },
   {
-    asset: <IntakeHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <IntakeHorizontalStackIllustration className="h-20 w-20" />,
     title: "Intake",
   },
   {
-    asset: <LabelHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <LabelHorizontalStackIllustration className="h-20 w-20" />,
     title: "Label",
   },
   {
-    asset: <LinkHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <LinkHorizontalStackIllustration className="h-20 w-20" />,
     title: "Link",
   },
   {
-    asset: <MembersHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <MembersHorizontalStackIllustration className="h-20 w-20" />,
     title: "Members",
   },
   {
-    asset: <NoteHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <NoteHorizontalStackIllustration className="h-20 w-20" />,
     title: "Note",
   },
   {
-    asset: <PriorityHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <PriorityHorizontalStackIllustration className="h-20 w-20" />,
     title: "Priority",
   },
   {
-    asset: <ProjectHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <ProjectHorizontalStackIllustration className="h-20 w-20" />,
     title: "Project",
   },
   {
-    asset: <SettingsHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <SettingsHorizontalStackIllustration className="h-20 w-20" />,
     title: "Settings",
   },
   {
-    asset: <StateHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <StateHorizontalStackIllustration className="h-20 w-20" />,
     title: "State",
   },
   {
-    asset: <TemplateHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <TemplateHorizontalStackIllustration className="h-20 w-20" />,
     title: "Template",
   },
   {
-    asset: <TokenHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <TokenHorizontalStackIllustration className="h-20 w-20" />,
     title: "Token",
   },
   {
-    asset: <UnknownHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <UnknownHorizontalStackIllustration className="h-20 w-20" />,
     title: "Unknown",
   },
   {
-    asset: <UpdateHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <UpdateHorizontalStackIllustration className="h-20 w-20" />,
     title: "Update",
   },
   {
-    asset: <WebhookHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <WebhookHorizontalStackIllustration className="h-20 w-20" />,
     title: "Webhook",
   },
   {
-    asset: <WorkItemHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <WorkItemHorizontalStackIllustration className="h-20 w-20" />,
     title: "WorkItem",
   },
   {
-    asset: <WorklogHorizontalStackIllustration className="w-20 h-20" />,
+    asset: <WorklogHorizontalStackIllustration className="h-20 w-20" />,
     title: "Worklog",
   },
 ];
diff --git a/packages/propel/src/empty-state/assets/illustration/constant.tsx b/packages/propel/src/empty-state/assets/illustration/constant.tsx
index 903a281f271..45faced13ad 100644
--- a/packages/propel/src/empty-state/assets/illustration/constant.tsx
+++ b/packages/propel/src/empty-state/assets/illustration/constant.tsx
@@ -8,11 +8,11 @@ import { InboxIllustration, SearchIllustration } from "./";
 
 export const IllustrationMap = [
   {
-    asset: <InboxIllustration className="w-20 h-20" />,
+    asset: <InboxIllustration className="h-20 w-20" />,
     title: "Inbox",
   },
   {
-    asset: <SearchIllustration className="w-20 h-20" />,
+    asset: <SearchIllustration className="h-20 w-20" />,
     title: "Search",
   },
 ];
diff --git a/packages/propel/src/empty-state/compact-empty-state.tsx b/packages/propel/src/empty-state/compact-empty-state.tsx
index beefa006a8f..7f13486e23c 100644
--- a/packages/propel/src/empty-state/compact-empty-state.tsx
+++ b/packages/propel/src/empty-state/compact-empty-state.tsx
@@ -32,14 +32,14 @@ export function EmptyStateCompact({
   return (
     <div className={cn("flex size-full items-center justify-center", rootAlignClasses, rootClassName)}>
       <div
-        className={cn("flex max-w-[25rem] size-full flex-col justify-center gap-3", containerAlignClasses, className)}
+        className={cn("flex size-full max-w-[25rem] flex-col justify-center gap-3", containerAlignClasses, className)}
       >
         {resolvedAsset && <div className="flex max-w-40 items-center">{resolvedAsset}</div>}
 
         <div className="flex flex-col gap-4">
           {title && description ? (
             <div className="flex flex-col gap-2">
-              {title && <h3 className="text-16 font-semibold leading-7 text-primary">{title}</h3>}
+              {title && <h3 className="text-16 leading-7 font-semibold text-primary">{title}</h3>}
               {description && <p className="text-13 leading-5 text-tertiary">{description}</p>}
             </div>
           ) : (
diff --git a/packages/propel/src/empty-state/detailed-empty-state.tsx b/packages/propel/src/empty-state/detailed-empty-state.tsx
index 0a11ddde3e1..be6d2255fc5 100644
--- a/packages/propel/src/empty-state/detailed-empty-state.tsx
+++ b/packages/propel/src/empty-state/detailed-empty-state.tsx
@@ -30,7 +30,7 @@ export function EmptyStateDetailed({
     <div className={cn("flex size-full items-center justify-center", rootClassName)}>
       <div
         className={cn(
-          "flex max-w-[25rem] size-full flex-col justify-center gap-6 text-left",
+          "flex size-full max-w-[25rem] flex-col justify-center gap-6 text-left",
           {
             "items-center text-center": align === "center",
           },
@@ -46,7 +46,7 @@ export function EmptyStateDetailed({
         >
           {(title || description) && (
             <div className="flex flex-col gap-2">
-              {title && <h3 className="text-16 font-semibold leading-7 text-primary">{title}</h3>}
+              {title && <h3 className="text-16 leading-7 font-semibold text-primary">{title}</h3>}
               {description && <p className="text-13 leading-5 text-tertiary">{description}</p>}
             </div>
           )}
diff --git a/packages/propel/src/icon-button/helper.tsx b/packages/propel/src/icon-button/helper.tsx
index 4e78bc9c446..a4e421cb9bb 100644
--- a/packages/propel/src/icon-button/helper.tsx
+++ b/packages/propel/src/icon-button/helper.tsx
@@ -9,22 +9,22 @@ import { cva } from "class-variance-authority";
 import type React from "react";
 
 export const iconButtonVariants = cva(
-  "inline-flex items-center justify-center gap-1 aspect-square whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
+  "inline-flex aspect-square items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
   {
     variants: {
       variant: {
         primary:
-          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active focus:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-on-color-disabled",
+          "bg-accent-primary text-on-color hover:bg-accent-primary-hover focus:bg-accent-primary-active active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-on-color-disabled",
         "error-fill":
-          "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active focus:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
+          "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-active active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
         "error-outline":
-          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-primary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+          "border border-danger-strong bg-layer-2 text-danger-primary hover:bg-danger-subtle focus:bg-danger-subtle-hover active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
         secondary:
-          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
+          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover focus:bg-layer-2-active active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
         tertiary:
-          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+          "bg-layer-3 text-secondary hover:bg-layer-3-hover focus:bg-layer-3-active active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
         ghost:
-          "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+          "bg-layer-transparent text-secondary hover:bg-layer-transparent-hover focus:bg-layer-transparent-active active:bg-layer-transparent-active disabled:bg-layer-transparent disabled:text-disabled",
       },
       size: {
         sm: "size-5 rounded-sm",
diff --git a/packages/propel/src/icons/icons.stories.tsx b/packages/propel/src/icons/icons.stories.tsx
index 32e81567855..27c3c46c92c 100644
--- a/packages/propel/src/icons/icons.stories.tsx
+++ b/packages/propel/src/icons/icons.stories.tsx
@@ -41,11 +41,11 @@ export const AllIcons: Story = {
     <div className="space-y-12">
       <div className="space-y-4">
         <h3 className="text-16 font-semibold text-primary">Sub-Brand Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <div className="grid w-full grid-cols-12 gap-6">
           {SubBrandIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-secondary">{item.icon}</div>
-              <p className="text-11 text-tertiary text-center">{item.title}</p>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
@@ -53,11 +53,11 @@ export const AllIcons: Story = {
 
       <div className="space-y-4">
         <h3 className="text-16 font-semibold text-primary">Workspace Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <div className="grid w-full grid-cols-12 gap-6">
           {WorkspaceIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-secondary">{item.icon}</div>
-              <p className="text-11 text-tertiary text-center">{item.title}</p>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
@@ -65,11 +65,11 @@ export const AllIcons: Story = {
 
       <div className="space-y-4">
         <h3 className="text-16 font-semibold text-primary">Project Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <div className="grid w-full grid-cols-12 gap-6">
           {ProjectIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-secondary">{item.icon}</div>
-              <p className="text-11 text-tertiary text-center">{item.title}</p>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
@@ -77,11 +77,11 @@ export const AllIcons: Story = {
 
       <div className="space-y-4">
         <h3 className="text-16 font-semibold text-primary">Layout Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <div className="grid w-full grid-cols-12 gap-6">
           {LayoutIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-secondary">{item.icon}</div>
-              <p className="text-11 text-tertiary text-center">{item.title}</p>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
@@ -89,11 +89,11 @@ export const AllIcons: Story = {
 
       <div className="space-y-4">
         <h3 className="text-16 font-semibold text-primary">Property Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <div className="grid w-full grid-cols-12 gap-6">
           {PropertyIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-secondary">{item.icon}</div>
-              <p className="text-11 text-tertiary text-center">{item.title}</p>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
@@ -101,11 +101,11 @@ export const AllIcons: Story = {
 
       <div className="space-y-4">
         <h3 className="text-16 font-semibold text-primary">Actions Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <div className="grid w-full grid-cols-12 gap-6">
           {ActionsIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-secondary">{item.icon}</div>
-              <p className="text-11 text-tertiary text-center">{item.title}</p>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
@@ -113,21 +113,21 @@ export const AllIcons: Story = {
 
       <div className="space-y-4">
         <h3 className="text-16 font-semibold text-primary">Arrows Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <div className="grid w-full grid-cols-12 gap-6">
           {ArrowsIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-secondary">{item.icon}</div>
-              <p className="text-11 text-tertiary text-center">{item.title}</p>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Misc Icons</h3>
-        <div className="grid grid-cols-12 gap-6 w-full">
+        <h3 className="text-lg text-custom-text-100 font-semibold">Misc Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
           {MiscIconsMap.map((item) => (
-            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
               <div className="text-custom-text-200">{item.icon}</div>
               <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
             </div>
@@ -144,25 +144,25 @@ export const RegistryUsage: Story = {
       <div className="space-y-4">
         <h3 className="text-16 font-semibold text-primary">Registry-Based Usage</h3>
         <p className="text-13 text-tertiary">
-          Use the <code className="px-1 py-0.5 bg-layer-1 rounded-sm">Icon</code> component with{" "}
-          <code className="px-1 py-0.5 bg-layer-1 rounded-sm">name</code> prop for dynamic icon selection.
+          Use the <code className="rounded-sm bg-layer-1 px-1 py-0.5">Icon</code> component with{" "}
+          <code className="rounded-sm bg-layer-1 px-1 py-0.5">name</code> prop for dynamic icon selection.
         </p>
-        <div className="grid grid-cols-12 gap-6 w-full">
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+        <div className="grid w-full grid-cols-12 gap-6">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
             <Icon name="workspace.home" className="text-secondary" />
-            <p className="text-11 text-tertiary text-center">workspace.home</p>
+            <p className="text-center text-11 text-tertiary">workspace.home</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
             <Icon name="project.cycle" className="text-secondary" />
-            <p className="text-11 text-tertiary text-center">project.cycle</p>
+            <p className="text-center text-11 text-tertiary">project.cycle</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
             <Icon name="layout.board" className="text-secondary" />
-            <p className="text-11 text-tertiary text-center">layout.board</p>
+            <p className="text-center text-11 text-tertiary">layout.board</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
             <Icon name="property.priority" className="text-secondary" />
-            <p className="text-11 text-tertiary text-center">property.priority</p>
+            <p className="text-center text-11 text-tertiary">property.priority</p>
           </div>
         </div>
       </div>
@@ -172,18 +172,18 @@ export const RegistryUsage: Story = {
         <p className="text-13 text-tertiary">
           Import icon components directly for better tree-shaking and type safety.
         </p>
-        <div className="grid grid-cols-12 gap-6 w-full">
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+        <div className="grid w-full grid-cols-12 gap-6">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
             <HomeIcon className="text-secondary" />
-            <p className="text-11 text-tertiary text-center">HomeIcon</p>
+            <p className="text-center text-11 text-tertiary">HomeIcon</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
             <CycleIcon className="text-secondary" />
-            <p className="text-11 text-tertiary text-center">CycleIcon</p>
+            <p className="text-center text-11 text-tertiary">CycleIcon</p>
           </div>
-          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
             <ProjectIcon className="text-secondary" />
-            <p className="text-11 text-tertiary text-center">ProjectIcon</p>
+            <p className="text-center text-11 text-tertiary">ProjectIcon</p>
           </div>
         </div>
       </div>
diff --git a/packages/propel/src/icons/priority-icon.tsx b/packages/propel/src/icons/priority-icon.tsx
index de977d59749..050b32cd7f7 100644
--- a/packages/propel/src/icons/priority-icon.tsx
+++ b/packages/propel/src/icons/priority-icon.tsx
@@ -46,7 +46,7 @@ export function PriorityIcon(props: IPriorityIcon) {
       {withContainer ? (
         <div
           className={cn(
-            "flex items-center justify-center border rounded-sm p-0.5 flex-shrink-0",
+            "flex flex-shrink-0 items-center justify-center rounded-sm border p-0.5",
             priorityClasses[priority ?? "none"],
             containerClassName
           )}
diff --git a/packages/propel/src/input/input.stories.tsx b/packages/propel/src/input/input.stories.tsx
index 17d12e66bb8..343f0033ea3 100644
--- a/packages/propel/src/input/input.stories.tsx
+++ b/packages/propel/src/input/input.stories.tsx
@@ -52,13 +52,13 @@ const createShowcaseStory = (
   sections: Array<{ label: string; props: Partial<React.ComponentProps<typeof Input>> }>
 ): Story => ({
   render: () => (
-    <div className="space-y-4 w-[400px]">
+    <div className="w-[400px] space-y-4">
       <div className="space-y-2">
         <h3 className="text-13 font-medium">{title}</h3>
         <div className="space-y-2">
           {sections.map(({ label, props }, index) => (
             <div key={index} className="w-full">
-              <label className="text-11 text-gray-500">{label}</label>
+              <label className="text-gray-500 text-11">{label}</label>
               <Input className="w-full" {...props} />
             </div>
           ))}
diff --git a/packages/propel/src/input/input.tsx b/packages/propel/src/input/input.tsx
index 03fa39d3dc2..e6b8c094d13 100644
--- a/packages/propel/src/input/input.tsx
+++ b/packages/propel/src/input/input.tsx
@@ -35,7 +35,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
       type={type}
       name={name}
       className={cn(
-        "block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
+        "placeholder-tertiary block rounded-md border-subtle-1 bg-layer-2 text-13 focus:outline-none",
         {
           "rounded-md border-[0.5px]": mode === "primary",
           "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
diff --git a/packages/propel/src/menu/menu.stories.tsx b/packages/propel/src/menu/menu.stories.tsx
index ccef83dfded..1bd39d03b86 100644
--- a/packages/propel/src/menu/menu.stories.tsx
+++ b/packages/propel/src/menu/menu.stories.tsx
@@ -148,7 +148,7 @@ export const CustomButton: Story = {
     return (
       <Menu
         customButton={
-          <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">Custom Button</button>
+          <button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">Custom Button</button>
         }
       >
         <Menu.MenuItem onClick={() => alert("Option 1")}>Option 1</Menu.MenuItem>
@@ -215,7 +215,7 @@ export const ComplexMenu: Story = {
           <div className="flex items-center gap-2">
             <Bell className="h-4 w-4" />
             <span>Notifications</span>
-            <span className="ml-auto rounded-sm bg-red-500 px-2 py-0.5 text-11 text-on-color">3</span>
+            <span className="bg-red-500 ml-auto rounded-sm px-2 py-0.5 text-11 text-on-color">3</span>
           </div>
         </Menu.MenuItem>
         <Menu.MenuItem onClick={() => alert("Help")}>
@@ -232,7 +232,7 @@ export const ComplexMenu: Story = {
           <Menu.MenuItem onClick={() => alert("Privacy Settings")}>Privacy</Menu.MenuItem>
           <Menu.MenuItem onClick={() => alert("Security Settings")}>Security</Menu.MenuItem>
         </Menu.SubMenu>
-        <div className="my-1 border-t border-gray-200" />
+        <div className="border-gray-200 my-1 border-t" />
         <Menu.MenuItem onClick={() => alert("Logout")}>
           <div className="flex items-center gap-2 text-danger-primary">
             <LogOut className="h-4 w-4" />
diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx
index 0daf04d2fd6..edf43acf680 100644
--- a/packages/propel/src/menu/menu.tsx
+++ b/packages/propel/src/menu/menu.tsx
@@ -50,7 +50,7 @@ function MenuItem(props: TMenuItemProps) {
     <BaseMenu.Item
       disabled={disabled}
       className={cn(
-        "w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-1 cursor-pointer outline-none",
+        "w-full cursor-pointer truncate rounded-sm px-1 py-1.5 text-left text-secondary outline-none select-none hover:bg-layer-1",
         {
           "text-placeholder": disabled,
         },
@@ -159,9 +159,9 @@ function Menu(props: TMenuProps) {
           ) : (
             <BaseMenu.Trigger
               type="button"
-              className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-11 duration-300 outline-none ${
+              className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 outline-none ${
                 isOpen ? "bg-surface-2 text-primary" : "text-secondary"
-              } ${noBorder ? "" : "border border-strong shadow-sm focus:outline-none"} ${
+              } ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
                 disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-1"
               } ${buttonClassName}`}
               onClick={handleMenuButtonClick}
@@ -186,7 +186,7 @@ function Menu(props: TMenuProps) {
           <BaseMenu.Popup
             tabIndex={tabIndex}
             className={cn(
-              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none min-w-[12rem] whitespace-nowrap",
+              "my-1 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap shadow-raised-200 focus:outline-none",
               {
                 "max-h-60": maxHeight === "lg",
                 "max-h-48": maxHeight === "md",
diff --git a/packages/propel/src/popover/popover.stories.tsx b/packages/propel/src/popover/popover.stories.tsx
index f3d0fe64c8d..c5f37f794f5 100644
--- a/packages/propel/src/popover/popover.stories.tsx
+++ b/packages/propel/src/popover/popover.stories.tsx
@@ -33,12 +33,12 @@ const meta: Meta<typeof Popover> = {
 
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Popover
         </Popover.Button>
-        <Popover.Panel className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">Popover Title</h3>
-          <p className="mt-2 text-13 text-gray-600">This is the popover content. You can put any content here.</p>
+          <p className="text-gray-600 mt-2 text-13">This is the popover content. You can put any content here.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -61,25 +61,25 @@ export const Controlled: Story = {
     return (
       <div className="space-y-4">
         <div className="flex gap-2">
-          <button onClick={() => setOpen(true)} className="rounded-sm bg-blue-500 px-3 py-1.5 text-13 text-on-color">
+          <button onClick={() => setOpen(true)} className="bg-blue-500 rounded-sm px-3 py-1.5 text-13 text-on-color">
             Open
           </button>
-          <button onClick={() => setOpen(false)} className="rounded-sm bg-gray-500 px-3 py-1.5 text-13 text-on-color">
+          <button onClick={() => setOpen(false)} className="bg-gray-500 rounded-sm px-3 py-1.5 text-13 text-on-color">
             Close
           </button>
         </div>
         <Popover open={open} onOpenChange={setOpen}>
-          <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+          <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
             Controlled Popover
           </Popover.Button>
-          <Popover.Panel className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+          <Popover.Panel className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
             <div className="flex items-start justify-between">
               <h3 className="text-13 font-semibold">Controlled State</h3>
-              <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
+              <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
                 <CloseIcon className="h-4 w-4" />
               </button>
             </div>
-            <p className="mt-2 text-13 text-gray-600">Current state: {open ? "Open" : "Closed"}</p>
+            <p className="text-gray-600 mt-2 text-13">Current state: {open ? "Open" : "Closed"}</p>
           </Popover.Panel>
         </Popover>
       </div>
@@ -92,12 +92,12 @@ export const SideTop: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Above
         </Popover.Button>
-        <Popover.Panel side="top" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel side="top" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">Top Positioned</h3>
-          <p className="mt-2 text-13 text-gray-600">This popover appears above the button.</p>
+          <p className="text-gray-600 mt-2 text-13">This popover appears above the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -109,12 +109,12 @@ export const SideBottom: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Below
         </Popover.Button>
-        <Popover.Panel side="bottom" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel side="bottom" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">Bottom Positioned</h3>
-          <p className="mt-2 text-13 text-gray-600">This popover appears below the button.</p>
+          <p className="text-gray-600 mt-2 text-13">This popover appears below the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -126,12 +126,12 @@ export const SideLeft: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Left
         </Popover.Button>
-        <Popover.Panel side="left" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel side="left" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">Left Positioned</h3>
-          <p className="mt-2 text-13 text-gray-600">This popover appears to the left of the button.</p>
+          <p className="text-gray-600 mt-2 text-13">This popover appears to the left of the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -143,12 +143,12 @@ export const SideRight: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Right
         </Popover.Button>
-        <Popover.Panel side="right" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel side="right" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">Right Positioned</h3>
-          <p className="mt-2 text-13 text-gray-600">This popover appears to the right of the button.</p>
+          <p className="text-gray-600 mt-2 text-13">This popover appears to the right of the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -160,12 +160,12 @@ export const AlignStart: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Align Start
         </Popover.Button>
-        <Popover.Panel align="start" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel align="start" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">Start Aligned</h3>
-          <p className="mt-2 text-13 text-gray-600">This popover is aligned to the start.</p>
+          <p className="text-gray-600 mt-2 text-13">This popover is aligned to the start.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -177,12 +177,12 @@ export const AlignEnd: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Align End
         </Popover.Button>
-        <Popover.Panel align="end" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel align="end" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">End Aligned</h3>
-          <p className="mt-2 text-13 text-gray-600">This popover is aligned to the end.</p>
+          <p className="text-gray-600 mt-2 text-13">This popover is aligned to the end.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -194,12 +194,12 @@ export const CustomOffset: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Custom Offset
         </Popover.Button>
-        <Popover.Panel sideOffset={20} className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel sideOffset={20} className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">Custom Side Offset</h3>
-          <p className="mt-2 text-13 text-gray-600">This popover has a custom side offset of 20px.</p>
+          <p className="text-gray-600 mt-2 text-13">This popover has a custom side offset of 20px.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -216,31 +216,31 @@ export const WithForm: Story = {
     };
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Open Form
         </Popover.Button>
-        <Popover.Panel className="w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        <Popover.Panel className="border-gray-200 shadow-lg w-72 rounded-lg border bg-white p-4">
           <h3 className="text-13 font-semibold">Quick Form</h3>
           <form onSubmit={handleSubmit} className="mt-3 space-y-3">
             <div>
-              <label htmlFor="name" className="block text-11 font-medium text-gray-700">
+              <label htmlFor="name" className="text-gray-700 block text-11 font-medium">
                 Name
               </label>
               <input
                 type="text"
                 id="name"
-                className="mt-1 w-full rounded-sm border border-gray-300 px-2 py-1.5 text-13"
+                className="border-gray-300 mt-1 w-full rounded-sm border px-2 py-1.5 text-13"
                 placeholder="Enter name"
               />
             </div>
             <div>
-              <label htmlFor="email" className="block text-11 font-medium text-gray-700">
+              <label htmlFor="email" className="text-gray-700 block text-11 font-medium">
                 Email
               </label>
               <input
                 type="email"
                 id="email"
-                className="mt-1 w-full rounded-sm border border-gray-300 px-2 py-1.5 text-13"
+                className="border-gray-300 mt-1 w-full rounded-sm border px-2 py-1.5 text-13"
                 placeholder="Enter email"
               />
             </div>
@@ -248,13 +248,13 @@ export const WithForm: Story = {
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="rounded-sm bg-gray-200 px-3 py-1.5 text-11 hover:bg-gray-300"
+                className="bg-gray-200 hover:bg-gray-300 rounded-sm px-3 py-1.5 text-11"
               >
                 Cancel
               </button>
               <button
                 type="submit"
-                className="rounded-sm bg-blue-500 px-3 py-1.5 text-11 text-on-color hover:bg-blue-600"
+                className="bg-blue-500 hover:bg-blue-600 rounded-sm px-3 py-1.5 text-11 text-on-color"
               >
                 Submit
               </button>
@@ -271,15 +271,15 @@ export const WithList: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
           Show Options
         </Popover.Button>
-        <Popover.Panel className="w-56 rounded-lg border border-gray-200 bg-white shadow-lg">
+        <Popover.Panel className="border-gray-200 shadow-lg w-56 rounded-lg border bg-white">
           <div className="p-2">
-            <h3 className="px-2 py-1.5 text-11 font-semibold text-gray-500">Options</h3>
-            <button className="w-full rounded-sm px-2 py-1.5 text-left text-13 hover:bg-gray-100">Option 1</button>
-            <button className="w-full rounded-sm px-2 py-1.5 text-left text-13 hover:bg-gray-100">Option 2</button>
-            <button className="w-full rounded-sm px-2 py-1.5 text-left text-13 hover:bg-gray-100">Option 3</button>
+            <h3 className="text-gray-500 px-2 py-1.5 text-11 font-semibold">Options</h3>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 1</button>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 2</button>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 3</button>
           </div>
         </Popover.Panel>
       </Popover>
@@ -294,11 +294,11 @@ export const ColorPicker: Story = {
 
     return (
       <Popover>
-        <Popover.Button className="flex items-center gap-2 rounded-sm border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <Popover.Button className="border-gray-300 hover:bg-gray-50 flex items-center gap-2 rounded-sm border bg-white px-4 py-2">
           <div className="h-4 w-4 rounded-sm" style={{ backgroundColor: selectedColor }} />
           <span className="text-13">Pick Color</span>
         </Popover.Button>
-        <Popover.Panel className="w-48 rounded-lg border border-gray-200 bg-white p-3 shadow-lg">
+        <Popover.Panel className="border-gray-200 shadow-lg w-48 rounded-lg border bg-white p-3">
           <h3 className="mb-2 text-11 font-semibold">Select Color</h3>
           <div className="grid grid-cols-5 gap-2">
             {colors.map((color) => (
diff --git a/packages/propel/src/portal/modal-portal.tsx b/packages/propel/src/portal/modal-portal.tsx
index fa00eb12706..655d6871904 100644
--- a/packages/propel/src/portal/modal-portal.tsx
+++ b/packages/propel/src/portal/modal-portal.tsx
@@ -84,7 +84,7 @@ export function ModalPortal({
     const positionClass = fullScreen ? "" : PORTAL_POSITION_CLASSES[position];
 
     return cn(
-      "top-0 h-full bg-white shadow-lg absolute transition-transform duration-300 ease-out",
+      "shadow-lg absolute top-0 h-full bg-white transition-transform duration-300 ease-out",
       widthClass,
       positionClass,
       contentClassName
diff --git a/packages/propel/src/portal/portal.stories.tsx b/packages/propel/src/portal/portal.stories.tsx
index 3d532d359a9..0c47b575445 100644
--- a/packages/propel/src/portal/portal.stories.tsx
+++ b/packages/propel/src/portal/portal.stories.tsx
@@ -81,11 +81,11 @@ function ModalContent({
   onClose?: () => void;
 }) {
   return (
-    <div className="flex flex-col h-full bg-white">
-      <div className="flex items-center justify-between p-6 border-b border-gray-200">
+    <div className="flex h-full flex-col bg-white">
+      <div className="border-gray-200 flex items-center justify-between border-b p-6">
         <div>
-          <h2 className="text-18 font-semibold text-gray-900">{title}</h2>
-          <p className="text-13 text-gray-500 mt-1">Modal demonstration</p>
+          <h2 className="text-gray-900 text-18 font-semibold">{title}</h2>
+          <p className="text-gray-500 mt-1 text-13">Modal demonstration</p>
         </div>
         {showCloseButton && onClose && (
           <Button variant="ghost" onClick={onClose} aria-label="Close modal">
@@ -93,13 +93,13 @@ function ModalContent({
           </Button>
         )}
       </div>
-      <div className="flex-1 p-6 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto p-6">
         <p className="text-gray-600 mb-6">{description}</p>
 
         <div className="space-y-4">
-          <div className="bg-gray-50 p-4 rounded-lg">
-            <h3 className="font-medium text-gray-900 mb-2">Feature Highlights</h3>
-            <ul className="text-13 text-gray-600 space-y-1">
+          <div className="bg-gray-50 rounded-lg p-4">
+            <h3 className="text-gray-900 mb-2 font-medium">Feature Highlights</h3>
+            <ul className="text-gray-600 space-y-1 text-13">
               <li>• ESC key closes the modal</li>
               <li>• Click outside overlay to close</li>
             </ul>
@@ -180,7 +180,7 @@ export const BasicPortal: Story = {
       <div className="relative">
         <p>This content renders in the normal document flow.</p>
         <PortalWrapper portalId="storybook-portal">
-          <div className="fixed top-4 right-4 p-4 bg-blue-500 text-on-color rounded-sm shadow-lg z-50">
+          <div className="bg-blue-500 shadow-lg fixed top-4 right-4 z-50 rounded-sm p-4 text-on-color">
             This content is rendered in a portal!
           </div>
         </PortalWrapper>
diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
index 88d316657e1..0acab666145 100644
--- a/packages/propel/src/scrollarea/scrollarea.stories.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -32,8 +32,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render(args) {
     return (
-      <ScrollArea {...args} className="h-64 w-80 border rounded-lg">
-        <div className="p-4 space-y-4">
+      <ScrollArea {...args} className="h-64 w-80 rounded-lg border">
+        <div className="space-y-4 p-4">
           <h3 className="text-16 font-semibold">Long Text Content</h3>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
@@ -62,7 +62,7 @@ export const Default: Story = {
 export const Sizes: Story = {
   render() {
     const content = (
-      <div className="p-4 space-y-2">
+      <div className="space-y-2 p-4">
         {[...Array(10)].map((_, i) => (
           <p key={i}>Line {i + 1}: This is some scrollable content to demonstrate different sizes.</p>
         ))}
@@ -73,19 +73,19 @@ export const Sizes: Story = {
       <div className="flex flex-col gap-6">
         <div className="space-y-2">
           <div className="text-13 font-medium">Small</div>
-          <ScrollArea className="h-48 w-80 border rounded-lg" size="sm">
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="sm">
             {content}
           </ScrollArea>
         </div>
         <div className="space-y-2">
           <div className="text-13 font-medium">Medium</div>
-          <ScrollArea className="h-48 w-80 border rounded-lg" size="md">
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="md">
             {content}
           </ScrollArea>
         </div>
         <div className="space-y-2">
           <div className="text-13 font-medium">Large</div>
-          <ScrollArea className="h-48 w-80 border rounded-lg" size="lg">
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="lg">
             {content}
           </ScrollArea>
         </div>
@@ -97,8 +97,8 @@ export const Sizes: Story = {
 export const ScrollTypeAlways: Story = {
   render() {
     return (
-      <ScrollArea className="h-64 w-80 border rounded-lg" scrollType="always">
-        <div className="p-4 space-y-2">
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="always">
+        <div className="space-y-2 p-4">
           <h3 className="text-16 font-semibold">Always Visible Scrollbar</h3>
           {[...Array(15)].map((_, i) => (
             <p key={i}>Line {i + 1}: The scrollbar is always visible.</p>
@@ -112,8 +112,8 @@ export const ScrollTypeAlways: Story = {
 export const ScrollTypeScroll: Story = {
   render() {
     return (
-      <ScrollArea className="h-64 w-80 border rounded-lg" scrollType="scroll">
-        <div className="p-4 space-y-2">
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="scroll">
+        <div className="space-y-2 p-4">
           <h3 className="text-16 font-semibold">Scroll to Show</h3>
           <p className="text-13 text-placeholder">Scrollbar appears when scrolling</p>
           {[...Array(15)].map((_, i) => (
@@ -128,8 +128,8 @@ export const ScrollTypeScroll: Story = {
 export const ScrollTypeHover: Story = {
   render() {
     return (
-      <ScrollArea className="h-64 w-80 border rounded-lg" scrollType="hover">
-        <div className="p-4 space-y-2">
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="hover">
+        <div className="space-y-2 p-4">
           <h3 className="text-16 font-semibold">Hover to Show</h3>
           <p className="text-13 text-placeholder">Scrollbar appears on hover</p>
           {[...Array(15)].map((_, i) => (
@@ -144,10 +144,10 @@ export const ScrollTypeHover: Story = {
 export const HorizontalScroll: Story = {
   render() {
     return (
-      <ScrollArea className="h-32 w-96 border rounded-lg" orientation="horizontal">
-        <div className="flex gap-4 p-4 w-[1200px]">
+      <ScrollArea className="h-32 w-96 rounded-lg border" orientation="horizontal">
+        <div className="flex w-[1200px] gap-4 p-4">
           {[...Array(12)].map((_, i) => (
-            <div key={i} className="flex-shrink-0 w-32 h-20 bg-layer-1 rounded-sm flex items-center justify-center">
+            <div key={i} className="flex h-20 w-32 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
               Item {i + 1}
             </div>
           ))}
@@ -160,8 +160,8 @@ export const HorizontalScroll: Story = {
 export const BothDirections: Story = {
   render() {
     return (
-      <ScrollArea className="h-64 w-96 border rounded-lg">
-        <div className="w-[800px] p-4 space-y-2">
+      <ScrollArea className="h-64 w-96 rounded-lg border">
+        <div className="w-[800px] space-y-2 p-4">
           <h3 className="text-16 font-semibold">Both Directions</h3>
           <p className="text-13 text-placeholder">Content scrolls both vertically and horizontally</p>
           {[...Array(20)].map((_, i) => (
@@ -179,16 +179,16 @@ export const BothDirections: Story = {
 export const ListExample: Story = {
   render() {
     return (
-      <ScrollArea className="h-80 w-96 border rounded-lg">
+      <ScrollArea className="h-80 w-96 rounded-lg border">
         <div className="p-4">
-          <h3 className="text-16 font-semibold mb-4">User List</h3>
+          <h3 className="mb-4 text-16 font-semibold">User List</h3>
           <div className="space-y-2">
             {[...Array(25)].map((_, i) => (
               <div
                 key={i}
-                className="flex items-center gap-3 p-3 bg-layer-1 rounded-sm hover:bg-surface-2 cursor-pointer"
+                className="flex cursor-pointer items-center gap-3 rounded-sm bg-layer-1 p-3 hover:bg-surface-2"
               >
-                <div className="w-10 h-10 rounded-full bg-accent-primary flex items-center justify-center text-on-color font-medium">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent-primary font-medium text-on-color">
                   {String.fromCharCode(65 + (i % 26))}
                 </div>
                 <div>
@@ -238,7 +238,7 @@ async function fetchData() {
 }`;
 
     return (
-      <ScrollArea className="h-96 w-full max-w-2xl border rounded-lg bg-surface-1">
+      <ScrollArea className="h-96 w-full max-w-2xl rounded-lg border bg-surface-1">
         <pre className="p-4 text-13">
           <code>{code}</code>
         </pre>
@@ -250,12 +250,12 @@ async function fetchData() {
 export const ChatMessages: Story = {
   render() {
     return (
-      <ScrollArea className="h-96 w-full max-w-md border rounded-lg">
-        <div className="p-4 space-y-4">
+      <ScrollArea className="h-96 w-full max-w-md rounded-lg border">
+        <div className="space-y-4 p-4">
           {[...Array(20)].map((_, i) => (
             <div key={i} className={`flex ${i % 3 === 0 ? "justify-end" : "justify-start"}`}>
               <div
-                className={`max-w-[70%] p-3 rounded-lg ${i % 3 === 0 ? "bg-accent-primary text-on-color" : "bg-layer-1"}`}
+                className={`max-w-[70%] rounded-lg p-3 ${i % 3 === 0 ? "bg-accent-primary text-on-color" : "bg-layer-1"}`}
               >
                 <div className="text-13">{i % 3 === 0 ? "You" : `User ${i + 1}`}</div>
                 <div className="mt-1">Message content for message number {i + 1}</div>
@@ -271,9 +271,9 @@ export const ChatMessages: Story = {
 export const DataTable: Story = {
   render() {
     return (
-      <ScrollArea className="h-96 w-full max-w-3xl border rounded-lg">
+      <ScrollArea className="h-96 w-full max-w-3xl rounded-lg border">
         <table className="w-full">
-          <thead className="bg-layer-1 sticky top-0">
+          <thead className="sticky top-0 bg-layer-1">
             <tr>
               <th className="px-4 py-2 text-left">ID</th>
               <th className="px-4 py-2 text-left">Name</th>
@@ -289,7 +289,7 @@ export const DataTable: Story = {
                 <td className="px-4 py-2">user{i + 1}@example.com</td>
                 <td className="px-4 py-2">
                   <span
-                    className={`px-2 py-1 rounded-sm text-11 ${i % 3 === 0 ? "bg-success-primary text-success-primary" : "bg-gray-500/20 text-gray-500"}`}
+                    className={`rounded-sm px-2 py-1 text-11 ${i % 3 === 0 ? "bg-success-primary text-success-primary" : "bg-gray-500/20 text-gray-500"}`}
                   >
                     {i % 3 === 0 ? "Active" : "Inactive"}
                   </span>
diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
index 3db3155be33..4c52e98dc3b 100644
--- a/packages/propel/src/scrollarea/scrollarea.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -82,7 +82,7 @@ const ScrollBar = React.memo(function ScrollBar({
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       className={cn(
-        "group/track mr-1 flex justify-center rounded-sm bg-transparent opacity-0 transition-opacity delay-300 ",
+        "group/track mr-1 flex justify-center rounded-sm bg-transparent opacity-0 transition-opacity delay-300",
         orientation === "vertical" && verticalSizeStyles[size],
         orientation === "horizontal" && horizontalSizeStyles[size],
         scrollType === "always" && "opacity-100",
diff --git a/packages/propel/src/separator/separator.stories.tsx b/packages/propel/src/separator/separator.stories.tsx
index 8fb19c71039..3b7b8d7ff39 100644
--- a/packages/propel/src/separator/separator.stories.tsx
+++ b/packages/propel/src/separator/separator.stories.tsx
@@ -46,15 +46,15 @@ export const Vertical: Story = {
 export const WithinContainer: Story = {
   render() {
     return (
-      <div className="w-[300px] rounded-lg border p-6 space-y-4">
+      <div className="w-[300px] space-y-4 rounded-lg border p-6">
         <div className="space-y-2">
-          <h4 className="font-medium leading-none">Section 1</h4>
-          <p className="text-13 text-muted-foreground">Description for section 1</p>
+          <h4 className="leading-none font-medium">Section 1</h4>
+          <p className="text-muted-foreground text-13">Description for section 1</p>
         </div>
         <Separator />
         <div className="space-y-2">
-          <h4 className="font-medium leading-none">Section 2</h4>
-          <p className="text-13 text-muted-foreground">Description for section 2</p>
+          <h4 className="leading-none font-medium">Section 2</h4>
+          <p className="text-muted-foreground text-13">Description for section 2</p>
         </div>
       </div>
     );
diff --git a/packages/propel/src/skeleton/skeleton.stories.tsx b/packages/propel/src/skeleton/skeleton.stories.tsx
index 8a53f5c56bd..7a5be98632c 100644
--- a/packages/propel/src/skeleton/skeleton.stories.tsx
+++ b/packages/propel/src/skeleton/skeleton.stories.tsx
@@ -24,7 +24,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render() {
     return (
-      <Skeleton className="w-80 flex flex-col gap-2">
+      <Skeleton className="flex w-80 flex-col gap-2">
         <Skeleton.Item height="40px" width="100%" />
       </Skeleton>
     );
@@ -34,7 +34,7 @@ export const Default: Story = {
 export const Card: Story = {
   render() {
     return (
-      <Skeleton className="w-80 flex flex-col gap-4">
+      <Skeleton className="flex w-80 flex-col gap-4">
         <Skeleton.Item height="200px" width="100%" />
         <div className="flex flex-col gap-2">
           <Skeleton.Item height="20px" width="60%" />
@@ -48,11 +48,11 @@ export const Card: Story = {
 export const List: Story = {
   render() {
     return (
-      <Skeleton className="w-96 flex flex-col gap-3">
+      <Skeleton className="flex w-96 flex-col gap-3">
         {[...Array(5)].map((_, i) => (
           <div key={i} className="flex gap-3">
             <Skeleton.Item height="40px" width="40px" className="rounded-full" />
-            <div className="flex-1 flex flex-col gap-2">
+            <div className="flex flex-1 flex-col gap-2">
               <Skeleton.Item height="16px" width="70%" />
               <Skeleton.Item height="12px" width="50%" />
             </div>
@@ -66,7 +66,7 @@ export const List: Story = {
 export const Table: Story = {
   render() {
     return (
-      <Skeleton className="w-full flex flex-col gap-3">
+      <Skeleton className="flex w-full flex-col gap-3">
         <div className="flex gap-4">
           <Skeleton.Item height="20px" width="150px" />
           <Skeleton.Item height="20px" width="200px" />
@@ -87,10 +87,10 @@ export const Table: Story = {
 export const Profile: Story = {
   render() {
     return (
-      <Skeleton className="w-80 flex flex-col gap-4">
+      <Skeleton className="flex w-80 flex-col gap-4">
         <div className="flex items-center gap-4">
           <Skeleton.Item height="80px" width="80px" className="rounded-full" />
-          <div className="flex-1 flex flex-col gap-2">
+          <div className="flex flex-1 flex-col gap-2">
             <Skeleton.Item height="20px" width="60%" />
             <Skeleton.Item height="16px" width="40%" />
           </div>
@@ -130,7 +130,7 @@ export const AvatarGroup: Story = {
 export const Text: Story = {
   render() {
     return (
-      <Skeleton className="w-96 flex flex-col gap-2">
+      <Skeleton className="flex w-96 flex-col gap-2">
         <Skeleton.Item height="16px" width="100%" />
         <Skeleton.Item height="16px" width="95%" />
         <Skeleton.Item height="16px" width="90%" />
@@ -153,7 +153,7 @@ export const Button: Story = {
 export const Input: Story = {
   render() {
     return (
-      <Skeleton className="w-80 flex flex-col gap-2">
+      <Skeleton className="flex w-80 flex-col gap-2">
         <Skeleton.Item height="14px" width="80px" />
         <Skeleton.Item height="40px" width="100%" className="rounded-md" />
       </Skeleton>
@@ -164,7 +164,7 @@ export const Input: Story = {
 export const Form: Story = {
   render() {
     return (
-      <Skeleton className="w-96 flex flex-col gap-4">
+      <Skeleton className="flex w-96 flex-col gap-4">
         <div className="flex flex-col gap-2">
           <Skeleton.Item height="14px" width="80px" />
           <Skeleton.Item height="40px" width="100%" className="rounded-md" />
@@ -186,7 +186,7 @@ export const Form: Story = {
 export const ProductCard: Story = {
   render() {
     return (
-      <Skeleton className="w-72 flex flex-col gap-3 p-4 border rounded-lg">
+      <Skeleton className="flex w-72 flex-col gap-3 rounded-lg border p-4">
         <Skeleton.Item height="200px" width="100%" className="rounded-md" />
         <div className="flex flex-col gap-2">
           <Skeleton.Item height="20px" width="80%" />
diff --git a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
index a691566655a..2ca8b3ac697 100644
--- a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
@@ -65,23 +65,23 @@ export const AllSizes: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <CircularBarSpinner height="12px" width="12px" />
-          <p className="mt-2 text-11 text-gray-600">Small</p>
+          <p className="text-gray-600 mt-2 text-11">Small</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner height="16px" width="16px" />
-          <p className="mt-2 text-11 text-gray-600">Default</p>
+          <p className="text-gray-600 mt-2 text-11">Default</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner height="24px" width="24px" />
-          <p className="mt-2 text-11 text-gray-600">Medium</p>
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner height="32px" width="32px" />
-          <p className="mt-2 text-11 text-gray-600">Large</p>
+          <p className="text-gray-600 mt-2 text-11">Large</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner height="48px" width="48px" />
-          <p className="mt-2 text-11 text-gray-600">XL</p>
+          <p className="text-gray-600 mt-2 text-11">XL</p>
         </div>
       </div>
     );
@@ -94,23 +94,23 @@ export const ColorVariations: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <CircularBarSpinner className="text-blue-500" height="24px" width="24px" />
-          <p className="mt-2 text-11 text-gray-600">Blue</p>
+          <p className="text-gray-600 mt-2 text-11">Blue</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner className="text-success-primary" height="24px" width="24px" />
-          <p className="mt-2 text-11 text-gray-600">Green</p>
+          <p className="text-gray-600 mt-2 text-11">Green</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner className="text-danger-primary" height="24px" width="24px" />
-          <p className="mt-2 text-11 text-gray-600">Red</p>
+          <p className="text-gray-600 mt-2 text-11">Red</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner className="text-purple-500" height="24px" width="24px" />
-          <p className="mt-2 text-11 text-gray-600">Purple</p>
+          <p className="text-gray-600 mt-2 text-11">Purple</p>
         </div>
         <div className="text-center">
           <CircularBarSpinner className="text-orange-500" height="24px" width="24px" />
-          <p className="mt-2 text-11 text-gray-600">Orange</p>
+          <p className="text-gray-600 mt-2 text-11">Orange</p>
         </div>
       </div>
     );
@@ -120,7 +120,7 @@ export const ColorVariations: Story = {
 export const InButton: Story = {
   render() {
     return (
-      <button className="flex items-center gap-2 rounded-sm bg-green-500 px-4 py-2 text-on-color">
+      <button className="bg-green-500 flex items-center gap-2 rounded-sm px-4 py-2 text-on-color">
         <CircularBarSpinner height="16px" width="16px" />
         <span>Processing...</span>
       </button>
@@ -131,10 +131,10 @@ export const InButton: Story = {
 export const CenteredInCard: Story = {
   render() {
     return (
-      <div className="w-96 rounded-lg border border-gray-200 bg-white p-8 shadow-md">
+      <div className="border-gray-200 shadow-md w-96 rounded-lg border bg-white p-8">
         <div className="flex flex-col items-center justify-center space-y-4">
           <CircularBarSpinner height="48px" width="48px" />
-          <p className="text-13 text-gray-600">Processing data...</p>
+          <p className="text-gray-600 text-13">Processing data...</p>
         </div>
       </div>
     );
diff --git a/packages/propel/src/spinners/circular-spinner.stories.tsx b/packages/propel/src/spinners/circular-spinner.stories.tsx
index 4f553c36bed..c9bcfb2f749 100644
--- a/packages/propel/src/spinners/circular-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-spinner.stories.tsx
@@ -65,23 +65,23 @@ export const AllSizes: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <Spinner height="16px" width="16px" />
-          <p className="mt-2 text-11 text-gray-600">Small</p>
+          <p className="text-gray-600 mt-2 text-11">Small</p>
         </div>
         <div className="text-center">
           <Spinner height="24px" width="24px" />
-          <p className="mt-2 text-11 text-gray-600">Medium</p>
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
         </div>
         <div className="text-center">
           <Spinner height="32px" width="32px" />
-          <p className="mt-2 text-11 text-gray-600">Default</p>
+          <p className="text-gray-600 mt-2 text-11">Default</p>
         </div>
         <div className="text-center">
           <Spinner height="48px" width="48px" />
-          <p className="mt-2 text-11 text-gray-600">Large</p>
+          <p className="text-gray-600 mt-2 text-11">Large</p>
         </div>
         <div className="text-center">
           <Spinner height="64px" width="64px" />
-          <p className="mt-2 text-11 text-gray-600">XL</p>
+          <p className="text-gray-600 mt-2 text-11">XL</p>
         </div>
       </div>
     );
@@ -94,23 +94,23 @@ export const ColorVariations: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <Spinner className="text-blue-500" />
-          <p className="mt-2 text-11 text-gray-600">Blue</p>
+          <p className="text-gray-600 mt-2 text-11">Blue</p>
         </div>
         <div className="text-center">
           <Spinner className="text-success-primary" />
-          <p className="mt-2 text-11 text-gray-600">Green</p>
+          <p className="text-gray-600 mt-2 text-11">Green</p>
         </div>
         <div className="text-center">
           <Spinner className="text-danger-primary" />
-          <p className="mt-2 text-11 text-gray-600">Red</p>
+          <p className="text-gray-600 mt-2 text-11">Red</p>
         </div>
         <div className="text-center">
           <Spinner className="text-purple-500" />
-          <p className="mt-2 text-11 text-gray-600">Purple</p>
+          <p className="text-gray-600 mt-2 text-11">Purple</p>
         </div>
         <div className="text-center">
           <Spinner className="text-orange-500" />
-          <p className="mt-2 text-11 text-gray-600">Orange</p>
+          <p className="text-gray-600 mt-2 text-11">Orange</p>
         </div>
       </div>
     );
@@ -120,7 +120,7 @@ export const ColorVariations: Story = {
 export const InButton: Story = {
   render() {
     return (
-      <button className="flex items-center gap-2 rounded-sm bg-blue-500 px-4 py-2 text-on-color">
+      <button className="bg-blue-500 flex items-center gap-2 rounded-sm px-4 py-2 text-on-color">
         <Spinner height="16px" width="16px" />
         <span>Loading...</span>
       </button>
@@ -131,10 +131,10 @@ export const InButton: Story = {
 export const CenteredInCard: Story = {
   render() {
     return (
-      <div className="w-96 rounded-lg border border-gray-200 bg-white p-8 shadow-md">
+      <div className="border-gray-200 shadow-md w-96 rounded-lg border bg-white p-8">
         <div className="flex flex-col items-center justify-center space-y-4">
           <Spinner height="48px" width="48px" />
-          <p className="text-13 text-gray-600">Loading content...</p>
+          <p className="text-gray-600 text-13">Loading content...</p>
         </div>
       </div>
     );
diff --git a/packages/propel/src/switch/root.tsx b/packages/propel/src/switch/root.tsx
index 1285c965a88..0c3e87c2796 100644
--- a/packages/propel/src/switch/root.tsx
+++ b/packages/propel/src/switch/root.tsx
@@ -41,7 +41,7 @@ function Switch({ value, onChange, label, size = "sm", disabled, className }: IT
       <BaseSwitch.Thumb
         aria-hidden="true"
         className={cn(
-          "inline-block self-center rounded-full shadow ring-0 transition-transform duration-200 ease-in-out",
+          "shadow inline-block self-center rounded-full ring-0 transition-transform duration-200 ease-in-out",
           // size
           size === "sm" ? "h-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5",
           // position + color by state
diff --git a/packages/propel/src/switch/switch.stories.tsx b/packages/propel/src/switch/switch.stories.tsx
index d4a304d1686..3e41d6e7d2e 100644
--- a/packages/propel/src/switch/switch.stories.tsx
+++ b/packages/propel/src/switch/switch.stories.tsx
@@ -75,15 +75,15 @@ export const AllSizes: Story = {
       <div className="flex items-center gap-6">
         <div className="text-center">
           <Switch value={small} onChange={setSmall} size="sm" />
-          <p className="mt-2 text-11 text-gray-600">Small</p>
+          <p className="text-gray-600 mt-2 text-11">Small</p>
         </div>
         <div className="text-center">
           <Switch value={medium} onChange={setMedium} size="md" />
-          <p className="mt-2 text-11 text-gray-600">Medium</p>
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
         </div>
         <div className="text-center">
           <Switch value={large} onChange={setLarge} size="lg" />
-          <p className="mt-2 text-11 text-gray-600">Large</p>
+          <p className="text-gray-600 mt-2 text-11">Large</p>
         </div>
       </div>
     );
@@ -101,19 +101,19 @@ export const AllStates: Story = {
       <div className="space-y-4">
         <div className="flex items-center gap-4">
           <Switch value={unchecked} onChange={setUnchecked} />
-          <span className="text-13 text-gray-600">Unchecked</span>
+          <span className="text-gray-600 text-13">Unchecked</span>
         </div>
         <div className="flex items-center gap-4">
           <Switch value={checked} onChange={setChecked} />
-          <span className="text-13 text-gray-600">Checked</span>
+          <span className="text-gray-600 text-13">Checked</span>
         </div>
         <div className="flex items-center gap-4">
           <Switch value={disabledUnchecked} onChange={() => {}} disabled />
-          <span className="text-13 text-gray-600">Disabled Unchecked</span>
+          <span className="text-gray-600 text-13">Disabled Unchecked</span>
         </div>
         <div className="flex items-center gap-4">
           <Switch value={disabledChecked} onChange={() => {}} disabled />
-          <span className="text-13 text-gray-600">Disabled Checked</span>
+          <span className="text-gray-600 text-13">Disabled Checked</span>
         </div>
       </div>
     );
@@ -127,27 +127,27 @@ export const InForm: Story = {
     const [updates, setUpdates] = useState(true);
 
     return (
-      <div className="w-80 rounded-lg border border-gray-200 bg-white p-6 shadow-md">
+      <div className="border-gray-200 shadow-md w-80 rounded-lg border bg-white p-6">
         <h3 className="text-16 font-semibold">Notification Settings</h3>
         <div className="mt-4 space-y-4">
           <div className="flex items-center justify-between">
             <div>
               <p className="text-13 font-medium">Push Notifications</p>
-              <p className="text-11 text-gray-500">Receive push notifications on your device</p>
+              <p className="text-gray-500 text-11">Receive push notifications on your device</p>
             </div>
             <Switch value={notifications} onChange={setNotifications} size="md" />
           </div>
           <div className="flex items-center justify-between">
             <div>
               <p className="text-13 font-medium">Marketing Emails</p>
-              <p className="text-11 text-gray-500">Receive emails about new features</p>
+              <p className="text-gray-500 text-11">Receive emails about new features</p>
             </div>
             <Switch value={marketing} onChange={setMarketing} size="md" />
           </div>
           <div className="flex items-center justify-between">
             <div>
               <p className="text-13 font-medium">Product Updates</p>
-              <p className="text-11 text-gray-500">Get notified about product updates</p>
+              <p className="text-gray-500 text-11">Get notified about product updates</p>
             </div>
             <Switch value={updates} onChange={setUpdates} size="md" />
           </div>
@@ -162,11 +162,11 @@ export const WithDescription: Story = {
     const [enabled, setEnabled] = useState(false);
 
     return (
-      <div className="w-96 rounded-lg border border-gray-200 bg-white p-6">
+      <div className="border-gray-200 w-96 rounded-lg border bg-white p-6">
         <div className="flex items-start justify-between">
           <div className="flex-1">
             <h4 className="text-13 font-semibold">Enable Two-Factor Authentication</h4>
-            <p className="mt-1 text-11 text-gray-500">
+            <p className="text-gray-500 mt-1 text-11">
               Add an extra layer of security to your account by enabling two-factor authentication.
             </p>
           </div>
@@ -182,13 +182,13 @@ export const Interactive: Story = {
     const [enabled, setEnabled] = useState(false);
 
     return (
-      <div className="w-80 space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+      <div className="border-gray-200 w-80 space-y-4 rounded-lg border bg-white p-6">
         <div className="flex items-center justify-between">
           <span className="text-13 font-medium">Feature Toggle</span>
           <Switch value={enabled} onChange={setEnabled} size="md" />
         </div>
-        <div className="rounded-sm bg-gray-50 p-4">
-          <p className="text-13 text-gray-700">
+        <div className="bg-gray-50 rounded-sm p-4">
+          <p className="text-gray-700 text-13">
             Status: <span className="font-semibold">{enabled ? "Enabled" : "Disabled"}</span>
           </p>
           {enabled && <p className="mt-2 text-11 text-success-primary">Feature is now active and ready to use!</p>}
@@ -208,7 +208,7 @@ export const CustomStyles: Story = {
           value={value}
           onChange={setValue}
           size="lg"
-          className="border-2 border-purple-300 data-[state=checked]:bg-purple-500"
+          className="border-purple-300 data-[state=checked]:bg-purple-500 border-2"
         />
         <span className="text-13">Custom styled switch</span>
       </div>
@@ -231,7 +231,7 @@ export const MultipleControls: Story = {
     };
 
     return (
-      <div className="w-96 rounded-lg border border-gray-200 bg-white p-6">
+      <div className="border-gray-200 w-96 rounded-lg border bg-white p-6">
         <h3 className="mb-4 text-16 font-semibold">Feature Flags</h3>
         <div className="space-y-3">
           {Object.entries(settings).map(([key, value]) => (
diff --git a/packages/propel/src/tab-navigation/tab-navigation-item.tsx b/packages/propel/src/tab-navigation/tab-navigation-item.tsx
index 9f34c9e6bfc..0980be8a91d 100644
--- a/packages/propel/src/tab-navigation/tab-navigation-item.tsx
+++ b/packages/propel/src/tab-navigation/tab-navigation-item.tsx
@@ -12,15 +12,15 @@ export function TabNavigationItem({ children, isActive, className }: TTabNavigat
   return (
     <div
       className={cn(
-        "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-13 font-medium transition-colors z-10",
-        isActive ? "text-primary" : "text-secondary hover:text-primary hover:bg-layer-transparent-hover",
+        "relative z-10 flex items-center gap-2 rounded-md px-2 py-1.5 text-13 font-medium transition-colors",
+        isActive ? "text-primary" : "text-secondary hover:bg-layer-transparent-hover hover:text-primary",
         className
       )}
     >
       <AnimatePresence>
         {isActive && (
           <motion.div
-            className="absolute inset-0 bg-layer-transparent-active rounded-md -z-10"
+            className="absolute inset-0 -z-10 rounded-md bg-layer-transparent-active"
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 0.9 }}
diff --git a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
index bef6c7da8f0..076e341dfea 100644
--- a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
+++ b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
@@ -26,7 +26,7 @@ const meta: Meta<typeof TabNavigationList> = {
   },
   decorators: [
     (Story) => (
-      <div className="w-[900px] p-8 bg-surface-1">
+      <div className="w-[900px] bg-surface-1 p-8">
         <Story />
       </div>
     ),
@@ -55,7 +55,7 @@ export const Default: Story = {
       <div className="space-y-8">
         {/* Example 1: Navigation with anchor tags (simulating React Router Link) */}
         <div className="space-y-3">
-          <div className="text-11 font-medium text-tertiary uppercase tracking-wide">
+          <div className="text-11 font-medium tracking-wide text-tertiary uppercase">
             With Navigation Links (e.g., React Router)
           </div>
           <TabNavigationList>
@@ -69,7 +69,7 @@ export const Default: Story = {
                 }}
               >
                 <TabNavigationItem isActive={activeNavTab === item.key}>
-                  <div className="flex items-center gap-2 z-10">
+                  <div className="z-10 flex items-center gap-2">
                     <item.icon className="h-4 w-4" />
                     <span>{item.name}</span>
                   </div>
@@ -83,9 +83,9 @@ export const Default: Story = {
         </div>
 
         {/* Code example */}
-        <div className="mt-6 p-4 bg-layer-1 rounded-md">
-          <div className="text-11 font-medium text-secondary mb-2">Example Code:</div>
-          <pre className="text-11 text-tertiary overflow-x-auto">
+        <div className="mt-6 rounded-md bg-layer-1 p-4">
+          <div className="mb-2 text-11 font-medium text-secondary">Example Code:</div>
+          <pre className="overflow-x-auto text-11 text-tertiary">
             {`// With React Router Link
 <TabNavigationList>
   {items.map(item => (
diff --git a/packages/propel/src/table/core.tsx b/packages/propel/src/table/core.tsx
index 5364800b468..e13dfb14f43 100644
--- a/packages/propel/src/table/core.tsx
+++ b/packages/propel/src/table/core.tsx
@@ -24,7 +24,7 @@ const TableHeader = React.forwardRef(function TableHeader(
   { className, ...props }: React.ComponentPropsWithoutRef<"thead">,
   ref: React.ForwardedRef<React.ComponentRef<"thead">>
 ) {
-  return <thead ref={ref} className={cn("bg-layer-1 py-4 border-y border-subtle", className)} {...props} />;
+  return <thead ref={ref} className={cn("border-y border-subtle bg-layer-1 py-4", className)} {...props} />;
 });
 TableHeader.displayName = "TableHeader";
 
diff --git a/packages/propel/src/table/table.stories.tsx b/packages/propel/src/table/table.stories.tsx
index 51be6524e23..5aa46c50eb7 100644
--- a/packages/propel/src/table/table.stories.tsx
+++ b/packages/propel/src/table/table.stories.tsx
@@ -144,7 +144,7 @@ export const WithActions: Story = {
             <TableCell>john@example.com</TableCell>
             <TableCell>Admin</TableCell>
             <TableCell className="text-right">
-              <button className="mr-2 text-blue-500 hover:underline">Edit</button>
+              <button className="text-blue-500 mr-2 hover:underline">Edit</button>
               <button className="text-danger-primary hover:underline">Delete</button>
             </TableCell>
           </TableRow>
@@ -153,7 +153,7 @@ export const WithActions: Story = {
             <TableCell>jane@example.com</TableCell>
             <TableCell>User</TableCell>
             <TableCell className="text-right">
-              <button className="mr-2 text-blue-500 hover:underline">Edit</button>
+              <button className="text-blue-500 mr-2 hover:underline">Edit</button>
               <button className="text-danger-primary hover:underline">Delete</button>
             </TableCell>
           </TableRow>
@@ -179,30 +179,30 @@ export const WithBadges: Story = {
           <TableRow>
             <TableCell>Website Redesign</TableCell>
             <TableCell>
-              <span className="rounded-full bg-green-100 px-2 py-1 text-11 text-success-primary">In Progress</span>
+              <span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">In Progress</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-red-100 px-2 py-1 text-11 text-danger-primary">High</span>
+              <span className="bg-red-100 rounded-full px-2 py-1 text-11 text-danger-primary">High</span>
             </TableCell>
             <TableCell>John Doe</TableCell>
           </TableRow>
           <TableRow>
             <TableCell>Mobile App</TableCell>
             <TableCell>
-              <span className="rounded-full bg-blue-100 px-2 py-1 text-11 text-blue-800">Planned</span>
+              <span className="bg-blue-100 text-blue-800 rounded-full px-2 py-1 text-11">Planned</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-yellow-100 px-2 py-1 text-11 text-yellow-800">Medium</span>
+              <span className="bg-yellow-100 text-yellow-800 rounded-full px-2 py-1 text-11">Medium</span>
             </TableCell>
             <TableCell>Jane Smith</TableCell>
           </TableRow>
           <TableRow>
             <TableCell>API Integration</TableCell>
             <TableCell>
-              <span className="rounded-full bg-gray-100 px-2 py-1 text-11 text-gray-800">Completed</span>
+              <span className="bg-gray-100 text-gray-800 rounded-full px-2 py-1 text-11">Completed</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-green-100 px-2 py-1 text-11 text-success-primary">Low</span>
+              <span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">Low</span>
             </TableCell>
             <TableCell>Bob Wilson</TableCell>
           </TableRow>
@@ -320,7 +320,7 @@ export const LargeDataset: Story = {
 export const CustomStyling: Story = {
   render() {
     return (
-      <Table className="border-2 border-blue-200">
+      <Table className="border-blue-200 border-2">
         <TableHeader>
           <TableRow className="bg-blue-100">
             <TableHead className="text-blue-900">Name</TableHead>
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
index 6022765aa60..434221b9e8e 100644
--- a/packages/propel/src/tabs/tabs.stories.tsx
+++ b/packages/propel/src/tabs/tabs.stories.tsx
@@ -58,7 +58,7 @@ export const Basic: Story = {
           {tabOptions.map((option) => (
             <Tabs.Content key={option.value} value={option.value} className="p-4">
               <div className="text-13">
-                <h3 className="font-medium mb-2">{option.label}</h3>
+                <h3 className="mb-2 font-medium">{option.label}</h3>
                 <p className="text-tertiary">Content for the {option.label.toLowerCase()} tab.</p>
               </div>
             </Tabs.Content>
@@ -78,7 +78,7 @@ export const Sizes: Story = {
       lg: "Large",
     };
     return (
-      <div className="w-[400px] grid gap-4">
+      <div className="grid w-[400px] gap-4">
         {sizes.map((size) => (
           <div key={size} className="flex flex-col gap-2">
             <div className="text-13 font-medium">{sizeLabels[size]}</div>
@@ -171,7 +171,7 @@ export const WithIcons: Story = {
           <Tabs.List>
             {tabsWithIcons.map((tab) => (
               <Tabs.Trigger key={tab.value} value={tab.value}>
-                <tab.icon className="w-4 h-4 mr-2" />
+                <tab.icon className="mr-2 h-4 w-4" />
                 {tab.label}
               </Tabs.Trigger>
             ))}
@@ -203,7 +203,7 @@ export const IconsOnly: Story = {
           <Tabs.List>
             {iconTabs.map((tab) => (
               <Tabs.Trigger key={tab.value} value={tab.value}>
-                <tab.icon className="w-4 h-4" />
+                <tab.icon className="h-4 w-4" />
               </Tabs.Trigger>
             ))}
             <Tabs.Indicator />
@@ -243,7 +243,7 @@ export const DynamicTabs: Story = {
     return (
       <div className="w-[500px]">
         <div className="mb-4">
-          <button onClick={addTab} className="px-3 py-1.5 text-13 bg-layer-1 rounded-sm hover:bg-surface-2">
+          <button onClick={addTab} className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2">
             Add Tab
           </button>
         </div>
@@ -323,11 +323,11 @@ export const WithComplexContent: Story = {
             <div className="space-y-4">
               <div>
                 <label className="text-13 font-medium">Username</label>
-                <input type="text" className="mt-1 w-full px-3 py-2 bg-layer-1 rounded-sm" />
+                <input type="text" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
               </div>
               <div>
                 <label className="text-13 font-medium">Email</label>
-                <input type="email" className="mt-1 w-full px-3 py-2 bg-layer-1 rounded-sm" />
+                <input type="email" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
               </div>
             </div>
           </Tabs.Content>
@@ -335,11 +335,11 @@ export const WithComplexContent: Story = {
             <div className="space-y-4">
               <div>
                 <label className="text-13 font-medium">Current Password</label>
-                <input type="password" className="mt-1 w-full px-3 py-2 bg-layer-1 rounded-sm" />
+                <input type="password" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
               </div>
               <div>
                 <label className="text-13 font-medium">New Password</label>
-                <input type="password" className="mt-1 w-full px-3 py-2 bg-layer-1 rounded-sm" />
+                <input type="password" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
               </div>
             </div>
           </Tabs.Content>
diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx
index 1fc775e76ee..56c55a987eb 100644
--- a/packages/propel/src/tabs/tabs.tsx
+++ b/packages/propel/src/tabs/tabs.tsx
@@ -46,7 +46,7 @@ const TabsRoot = React.forwardRef(function TabsRoot(
     <TabsContext.Provider value={{ variant }}>
       <TabsPrimitive.Root
         data-slot="tabs"
-        className={cn("flex flex-col w-full h-full", className)}
+        className={cn("flex h-full w-full flex-col", className)}
         {...props}
         ref={ref}
       />
@@ -68,7 +68,7 @@ const TabsList = React.forwardRef(function TabsList(
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "flex w-full items-center justify-between gap-1.5 rounded-lg text-13 p-0.5 relative overflow-auto",
+        "relative flex w-full items-center justify-between gap-1.5 overflow-auto rounded-lg p-0.5 text-13",
         {
           "bg-layer-3": background === "contained",
         },
@@ -92,10 +92,10 @@ const TabsTrigger = React.forwardRef(function TabsTrigger(
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "flex items-center justify-center p-1 min-w-fit w-full font-medium text-primary outline-none focus:outline-none cursor-pointer transition-all duration-200 ease-in-out rounded-md border border-transparent",
-        " data-[selected]:text-primary data-[selected]:shadow-sm data-[selected]:bg-layer-2 data-[selected]:border data-[selected]:border-subtle-1 data-[selected]:raised-200",
-        "text-placeholder  hover:text-tertiary hover:bg-layer-transparent-hover",
-        "disabled:text-placeholder disabled:cursor-not-allowed",
+        "flex w-full min-w-fit cursor-pointer items-center justify-center rounded-md border border-transparent p-1 font-medium text-primary transition-all duration-200 ease-in-out outline-none focus:outline-none",
+        "data-[selected]:shadow-sm data-[selected]:raised-200 data-[selected]:border data-[selected]:border-subtle-1 data-[selected]:bg-layer-2 data-[selected]:text-primary",
+        "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
+        "disabled:cursor-not-allowed disabled:text-placeholder",
         {
           "text-11": size === "sm",
           "text-13": size === "md",
@@ -129,7 +129,7 @@ const TabsIndicator = React.forwardRef(function TabsIndicator(
   return (
     <div
       className={cn(
-        "absolute left-0 top-[50%] z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-xs bg-surface-1 shadow-sm transition-[width,transform] duration-200 ease-in-out",
+        "shadow-sm absolute top-[50%] left-0 z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-xs bg-surface-1 transition-[width,transform] duration-200 ease-in-out",
         className
       )}
       {...props}
diff --git a/packages/propel/src/toast/toast.stories.tsx b/packages/propel/src/toast/toast.stories.tsx
index 5a828cf2d05..1c1a961a128 100644
--- a/packages/propel/src/toast/toast.stories.tsx
+++ b/packages/propel/src/toast/toast.stories.tsx
@@ -28,10 +28,10 @@ export const Provider: Story = {
       <div>
         <Toast theme="light" />
         <div className="space-y-2">
-          <p className="text-13 text-gray-600">
+          <p className="text-gray-600 text-13">
             Toast provider is required to display toasts. It should be added to your app root.
           </p>
-          <code className="block rounded-sm bg-gray-100 p-2 text-11">{`<Toast theme="light" />`}</code>
+          <code className="bg-gray-100 block rounded-sm p-2 text-11">{`<Toast theme="light" />`}</code>
         </div>
       </div>
     );
@@ -138,7 +138,7 @@ export const Loading: Story = {
               title: "Loading...",
             })
           }
-          className="rounded-sm bg-layer-2 border border-subtle px-4 py-2 text-13 text-primary hover:bg-layer-1"
+          className="rounded-sm border border-subtle bg-layer-2 px-4 py-2 text-13 text-primary hover:bg-layer-1"
         >
           Show Loading Toast
         </button>
@@ -303,7 +303,7 @@ export const AllTypes: Story = {
                 title: "Loading",
               })
             }
-            className="rounded-sm bg-layer-2 border border-subtle px-3 py-2 text-13 text-primary hover:bg-layer-1"
+            className="rounded-sm border border-subtle bg-layer-2 px-3 py-2 text-13 text-primary hover:bg-layer-1"
           >
             Loading
           </button>
@@ -400,7 +400,7 @@ export const StaticVariants: Story = {
     return (
       <div className="grid grid-cols-1 gap-4">
         <div>
-          <p className="text-13 text-secondary mb-2 font-medium">All toast variants (static):</p>
+          <p className="mb-2 text-13 font-medium text-secondary">All toast variants (static):</p>
         </div>
         <div className="flex flex-col gap-3">
           <ToastStatic type={TOAST_TYPE.SUCCESS} title="Success" message="Your changes have been saved successfully." />
@@ -483,8 +483,8 @@ export const StaticWithActions: Story = {
 export const StaticDarkMode: Story = {
   render() {
     return (
-      <div className="flex flex-col gap-3 p-6 bg-canvas rounded-lg" data-theme="dark">
-        <p className="text-13 text-secondary mb-2 font-medium">Toast variants in dark mode:</p>
+      <div className="flex flex-col gap-3 rounded-lg bg-canvas p-6" data-theme="dark">
+        <p className="mb-2 text-13 font-medium text-secondary">Toast variants in dark mode:</p>
         <ToastStatic
           type={TOAST_TYPE.SUCCESS}
           title="Success"
@@ -507,99 +507,99 @@ export const DesignTokens: Story = {
     return (
       <div className="space-y-6">
         <div>
-          <h2 className="text-16 font-semibold text-primary mb-2">Toast Design Tokens</h2>
+          <h2 className="mb-2 text-16 font-semibold text-primary">Toast Design Tokens</h2>
           <p className="text-13 text-secondary">
             The toast component uses semantic design tokens from the Plane design system.
           </p>
         </div>
 
         <div>
-          <h3 className="text-14 font-semibold text-primary mb-3">Token Mapping by Variant</h3>
+          <h3 className="mb-3 text-14 font-semibold text-primary">Token Mapping by Variant</h3>
           <div className="overflow-x-auto">
-            <table className="w-full text-11 border border-subtle rounded-lg">
+            <table className="w-full rounded-lg border border-subtle text-11">
               <thead>
                 <tr className="bg-layer-1">
-                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Variant</th>
-                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Title Text</th>
-                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Icon BG</th>
-                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Toast BG</th>
-                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Border</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Variant</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Title Text</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Icon BG</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Toast BG</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Border</th>
                 </tr>
               </thead>
               <tbody>
                 <tr className="border-b border-subtle">
                   <td className="px-3 py-2 font-medium text-primary">Success</td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-success-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-success-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">border-subtle</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
                   </td>
                 </tr>
                 <tr className="border-b border-subtle">
                   <td className="px-3 py-2 font-medium text-primary">Error</td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-danger-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-danger-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">border-subtle</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
                   </td>
                 </tr>
                 <tr className="border-b border-subtle">
                   <td className="px-3 py-2 font-medium text-primary">Warning</td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-warning-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-warning-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">border-subtle</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
                   </td>
                 </tr>
                 <tr className="border-b border-subtle">
                   <td className="px-3 py-2 font-medium text-primary">Info</td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-accent-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-accent-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">border-subtle</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
                   </td>
                 </tr>
                 <tr>
                   <td className="px-3 py-2 font-medium text-primary">Loading</td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-layer-2</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-layer-2</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
                   </td>
                   <td className="px-3 py-2">
-                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">border-subtle</code>
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
                   </td>
                 </tr>
               </tbody>
@@ -609,29 +609,29 @@ export const DesignTokens: Story = {
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <h3 className="text-14 font-semibold text-primary mb-3">Typography</h3>
+            <h3 className="mb-3 text-14 font-semibold text-primary">Typography</h3>
             <ul className="space-y-2 text-12 text-secondary">
               <li>
                 <span className="font-medium text-primary">Title:</span>{" "}
-                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-14 font-semibold</code>
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-14 font-semibold</code>
               </li>
               <li>
                 <span className="font-medium text-primary">Message:</span>{" "}
-                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-13</code>
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-13</code>
               </li>
               <li>
                 <span className="font-medium text-primary">Message Color:</span>{" "}
-                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-secondary</code>
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-secondary</code>
               </li>
               <li>
                 <span className="font-medium text-primary">Action Button:</span>{" "}
-                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-13 font-medium</code>
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-13 font-medium</code>
               </li>
             </ul>
           </div>
 
           <div>
-            <h3 className="text-14 font-semibold text-primary mb-3">Dimensions & Styling</h3>
+            <h3 className="mb-3 text-14 font-semibold text-primary">Dimensions & Styling</h3>
             <ul className="space-y-2 text-12 text-secondary">
               <li>
                 <span className="font-medium text-primary">Width:</span> 350px
@@ -644,7 +644,7 @@ export const DesignTokens: Story = {
               </li>
               <li>
                 <span className="font-medium text-primary">Shadow:</span>{" "}
-                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">shadow-raised-200</code>
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">shadow-raised-200</code>
               </li>
               <li>
                 <span className="font-medium text-primary">Border Width:</span> 1px
@@ -654,7 +654,7 @@ export const DesignTokens: Story = {
         </div>
 
         <div>
-          <h3 className="text-14 font-semibold text-primary mb-3">Icon Specifications</h3>
+          <h3 className="mb-3 text-14 font-semibold text-primary">Icon Specifications</h3>
           <ul className="space-y-2 text-12 text-secondary">
             <li>
               <span className="font-medium text-primary">Icon Size:</span> 20x20px
@@ -668,11 +668,11 @@ export const DesignTokens: Story = {
             </li>
             <li>
               <span className="font-medium text-primary">Icon Color:</span>{" "}
-              <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-on-color</code>
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-on-color</code>
             </li>
             <li>
               <span className="font-medium text-primary">Icon Background:</span>{" "}
-              <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">
                 bg-{"{"}variant{"}"}-primary
               </code>
             </li>
@@ -681,16 +681,16 @@ export const DesignTokens: Story = {
             </li>
             <li>
               <span className="font-medium text-primary">Close Icon Color:</span>{" "}
-              <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">
                 text-icon-secondary hover:text-icon-tertiary
               </code>
             </li>
           </ul>
         </div>
 
-        <div className="bg-layer-1 p-4 rounded-lg">
-          <h3 className="text-14 font-semibold text-primary mb-2">Visual Examples</h3>
-          <p className="text-12 text-secondary mb-4">See how the tokens are applied across all toast variants:</p>
+        <div className="rounded-lg bg-layer-1 p-4">
+          <h3 className="mb-2 text-14 font-semibold text-primary">Visual Examples</h3>
+          <p className="mb-4 text-12 text-secondary">See how the tokens are applied across all toast variants:</p>
           <div className="flex flex-col gap-3">
             <ToastStatic
               type={TOAST_TYPE.SUCCESS}
diff --git a/packages/propel/src/toast/toast.tsx b/packages/propel/src/toast/toast.tsx
index fe6081f791a..c4c8fad447a 100644
--- a/packages/propel/src/toast/toast.tsx
+++ b/packages/propel/src/toast/toast.tsx
@@ -122,9 +122,9 @@ function ToastRender({ id, toast }: { id: React.Key; toast: BaseToast.Root.Toast
       key={id}
       className={cn(
         // Base layout and positioning
-        "flex group items-center rounded-lg border shadow-raised-200 w-[350px]",
+        "group flex w-[350px] items-center rounded-lg border shadow-raised-200",
         "absolute right-3 bottom-3 z-[calc(1000-var(--toast-index))]",
-        "select-none transition-[opacity,transform] duration-500 ease-&lsqb;cubic-bezier(0.22,1,0.36,1)&rsqb;",
+        "ease-&lsqb;cubic-bezier(0.22,1,0.36,1)&rsqb; transition-[opacity,transform] duration-500 select-none",
 
         // Default transform with stacking and scaling
         "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-10px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]",
@@ -163,20 +163,20 @@ function ToastRender({ id, toast }: { id: React.Key; toast: BaseToast.Root.Toast
         e.preventDefault();
       }}
     >
-      <BaseToast.Close className="absolute top-3 right-3 text-icon-secondary hover:text-icon-tertiary cursor-pointer">
+      <BaseToast.Close className="absolute top-3 right-3 cursor-pointer text-icon-secondary hover:text-icon-tertiary">
         <CloseIcon strokeWidth={1.5} width={16} height={16} />
       </BaseToast.Close>
-      <div className="flex items-start gap-2 w-full p-4">
+      <div className="flex w-full items-start gap-2 p-4">
         <div className="py-1">
           {data.icon && (
             <div
-              className={cn("flex items-center justify-center rounded-full size-4 flex-shrink-0", data.iconBgClassName)}
+              className={cn("flex size-4 flex-shrink-0 items-center justify-center rounded-full", data.iconBgClassName)}
             >
               {data.icon}
             </div>
           )}
         </div>
-        <div className="flex flex-col gap-1 flex-1 min-w-0">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
           <BaseToast.Title className="text-h6-medium text-primary">
             {toastData.type === TOAST_TYPE.LOADING ? (toastData.title ?? "Loading...") : toastData.title}
           </BaseToast.Title>
@@ -211,21 +211,21 @@ export function ToastStatic({ type, title, message, actionItems, theme = "light"
       <div
         className={cn(
           // Base layout and positioning
-          "flex group items-start rounded-lg border border-subtle-1 rounded-lg shadow-overlay-100 w-[350px]",
+          "group flex w-[350px] items-start rounded-lg border border-subtle-1 shadow-overlay-100",
           "relative",
           data.backgroundColorClassName,
           data.borderColorClassName
         )}
       >
-        <div className="absolute top-1 right-1 text-icon-tertiary cursor-default">
+        <div className="absolute top-1 right-1 cursor-default text-icon-tertiary">
           <CloseIcon strokeWidth={1.5} width={14} height={14} />
         </div>
-        <div className="flex items-start gap-3 w-full p-4">
+        <div className="flex w-full items-start gap-3 p-4">
           <div className="py-1">
             {data.icon && (
               <div
                 className={cn(
-                  "flex items-center justify-center rounded-full size-4 flex-shrink-0",
+                  "flex size-4 flex-shrink-0 items-center justify-center rounded-full",
                   data.iconBgClassName
                 )}
               >
@@ -233,7 +233,7 @@ export function ToastStatic({ type, title, message, actionItems, theme = "light"
               </div>
             )}
           </div>
-          <div className="flex flex-col gap-1 flex-1 min-w-0">
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
             <div className="text-h6-medium text-primary">
               {type === TOAST_TYPE.LOADING ? (title ?? "Loading...") : title}
             </div>
diff --git a/packages/propel/src/toolbar/toolbar.stories.tsx b/packages/propel/src/toolbar/toolbar.stories.tsx
index 996e9feb6be..42ed52185a9 100644
--- a/packages/propel/src/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/toolbar/toolbar.stories.tsx
@@ -41,8 +41,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render() {
     return (
-      <div className="p-4 space-y-4">
-        <div className="w-96 border rounded-sm">
+      <div className="space-y-4 p-4">
+        <div className="w-96 rounded-sm border">
           <Toolbar>
             <Toolbar.Group isFirst>
               <Toolbar.Item icon={Undo} tooltip="Undo" />
@@ -104,7 +104,7 @@ export const WithActiveStates: Story = {
 export const CommentToolbar: Story = {
   render() {
     return (
-      <div className="p-4 space-y-4">
+      <div className="space-y-4 p-4">
         <h3 className="text-13 font-medium">Comment Toolbar with Access Control</h3>
         <div className="rounded-sm border-[0.5px] border-subtle p-1">
           <Toolbar>
diff --git a/packages/propel/src/toolbar/toolbar.tsx b/packages/propel/src/toolbar/toolbar.tsx
index 9a74e7454ca..ca7565c79eb 100644
--- a/packages/propel/src/toolbar/toolbar.tsx
+++ b/packages/propel/src/toolbar/toolbar.tsx
@@ -48,7 +48,7 @@ const ToolbarRoot = React.forwardRef(function ToolbarRoot(
   return (
     <div
       ref={ref}
-      className={cn("flex h-9 w-full items-stretch gap-1.5 bg-surface-2 overflow-x-scroll", className)}
+      className={cn("flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll bg-surface-2", className)}
       {...props}
     >
       {children}
@@ -86,7 +86,7 @@ const ToolbarItem = React.forwardRef(function ToolbarItem(
       ref={ref}
       type="button"
       className={cn(
-        "grid place-items-center aspect-square rounded-xs p-0.5 text-placeholder hover:bg-layer-1 transition-colors",
+        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder transition-colors hover:bg-layer-1",
         {
           "bg-layer-1 text-primary": isActive,
         },
@@ -126,7 +126,7 @@ const ToolbarSeparator = React.forwardRef(function ToolbarSeparator(
   { className, ...props }: ToolbarSeparatorProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  return <div ref={ref} className={cn("h-full w-px bg-subtle-1 mx-1", className)} {...props} />;
+  return <div ref={ref} className={cn("bg-subtle-1 mx-1 h-full w-px", className)} {...props} />;
 });
 
 const buttonVariants = {
@@ -148,8 +148,8 @@ const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
         ref={ref}
         className={cn(
           "inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-11 font-medium transition-colors duration-200",
-          "focus:outline-none focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-2",
-          "disabled:opacity-50 disabled:pointer-events-none",
+          "focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-2 focus:outline-none",
+          "disabled:pointer-events-none disabled:opacity-50",
           buttonVariants[variant],
           className
         )}
diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx
index e8c415c29ad..1c83e2e1b3e 100644
--- a/packages/propel/src/tooltip/root.tsx
+++ b/packages/propel/src/tooltip/root.tsx
@@ -56,7 +56,7 @@ export function Tooltip(props: ITooltipProps) {
         <BaseTooltip.Portal>
           <BaseTooltip.Positioner
             className={cn(
-              "z-50 max-w-xs gap-1 overflow-hidden break-words rounded-lg border border-subtle-1 bg-layer-2 px-2 py-1.5 shadow-overlay-200",
+              "z-50 max-w-xs gap-1 overflow-hidden rounded-lg border border-subtle-1 bg-layer-2 px-2 py-1.5 break-words shadow-overlay-200",
               {
                 hidden: isMobile,
               },
diff --git a/packages/propel/src/tooltip/tooltip.stories.tsx b/packages/propel/src/tooltip/tooltip.stories.tsx
index fa3f8e967ed..8560481c337 100644
--- a/packages/propel/src/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/tooltip/tooltip.stories.tsx
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     tooltipContent: "This is a tooltip",
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Hover me</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Hover me</button>,
   },
 };
 
@@ -31,7 +31,7 @@ export const WithHeading: Story = {
   args: {
     tooltipHeading: "Tooltip Title",
     tooltipContent: "This is the tooltip content with a heading.",
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Hover me</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Hover me</button>,
   },
 };
 
@@ -39,7 +39,7 @@ export const PositionTop: Story = {
   args: {
     tooltipContent: "Tooltip on top",
     position: "top",
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Top</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Top</button>,
   },
 };
 
@@ -47,7 +47,7 @@ export const PositionBottom: Story = {
   args: {
     tooltipContent: "Tooltip on bottom",
     position: "bottom",
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Bottom</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Bottom</button>,
   },
 };
 
@@ -55,7 +55,7 @@ export const PositionLeft: Story = {
   args: {
     tooltipContent: "Tooltip on left",
     position: "left",
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Left</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Left</button>,
   },
 };
 
@@ -63,7 +63,7 @@ export const PositionRight: Story = {
   args: {
     tooltipContent: "Tooltip on right",
     position: "right",
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Right</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Right</button>,
   },
 };
 
@@ -71,8 +71,8 @@ export const WithIcon: Story = {
   args: {
     tooltipContent: "Click here for help",
     children: (
-      <button className="rounded-full p-2 hover:bg-gray-100">
-        <HelpCircle className="h-5 w-5 text-gray-600" />
+      <button className="hover:bg-gray-100 rounded-full p-2">
+        <HelpCircle className="text-gray-600 h-5 w-5" />
       </button>
     ),
   },
@@ -82,7 +82,7 @@ export const Disabled: Story = {
   args: {
     tooltipContent: "This tooltip is disabled",
     disabled: true,
-    children: <button className="rounded-sm bg-gray-400 px-4 py-2 text-on-color">Hover me (disabled)</button>,
+    children: <button className="bg-gray-400 rounded-sm px-4 py-2 text-on-color">Hover me (disabled)</button>,
   },
 };
 
@@ -91,7 +91,7 @@ export const LongContent: Story = {
     tooltipHeading: "Important Information",
     tooltipContent:
       "This is a longer tooltip with more detailed information that wraps to multiple lines. It provides comprehensive details about the element.",
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Long content</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Long content</button>,
   },
 };
 
@@ -99,7 +99,7 @@ export const CustomDelay: Story = {
   args: {
     tooltipContent: "This tooltip has a custom delay",
     openDelay: 1000,
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Custom delay (1s)</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Custom delay (1s)</button>,
   },
 };
 
@@ -107,7 +107,7 @@ export const CustomOffset: Story = {
   args: {
     tooltipContent: "Custom offset tooltip",
     sideOffset: 20,
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Custom offset</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Custom offset</button>,
   },
 };
 
@@ -119,18 +119,18 @@ export const AllPositions: Story = {
     return (
       <div className="flex flex-col items-center gap-4">
         <Tooltip tooltipContent="Top position" position="top">
-          <button className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color">Top</button>
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Top</button>
         </Tooltip>
         <div className="flex gap-4">
           <Tooltip tooltipContent="Left position" position="left">
-            <button className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color">Left</button>
+            <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Left</button>
           </Tooltip>
           <Tooltip tooltipContent="Right position" position="right">
-            <button className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color">Right</button>
+            <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Right</button>
           </Tooltip>
         </div>
         <Tooltip tooltipContent="Bottom position" position="bottom">
-          <button className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color">Bottom</button>
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Bottom</button>
         </Tooltip>
       </div>
     );
@@ -143,10 +143,10 @@ export const OnText: Story = {
   },
   render() {
     return (
-      <p className="text-13 text-gray-700">
+      <p className="text-gray-700 text-13">
         This is some text with a{" "}
         <Tooltip tooltipContent="Additional information about this word" position="top">
-          <span className="cursor-help border-b border-dashed border-blue-500 text-blue-500">tooltip</span>
+          <span className="border-blue-500 text-blue-500 cursor-help border-b border-dashed">tooltip</span>
         </Tooltip>{" "}
         in it.
       </p>
@@ -161,7 +161,7 @@ export const OnDisabledButton: Story = {
   render() {
     return (
       <Tooltip tooltipContent="This feature is currently unavailable" position="top">
-        <button className="cursor-not-allowed rounded-sm bg-gray-300 px-4 py-2 text-gray-500" disabled>
+        <button className="bg-gray-300 text-gray-500 cursor-not-allowed rounded-sm px-4 py-2" disabled>
           Disabled Button
         </button>
       </Tooltip>
@@ -176,10 +176,10 @@ export const ComplexContent: Story = {
       <div className="space-y-1">
         <p className="font-semibold">John Doe</p>
         <p className="text-11">john@example.com</p>
-        <p className="text-11 text-gray-400">Last seen: 2 hours ago</p>
+        <p className="text-gray-400 text-11">Last seen: 2 hours ago</p>
       </div>
     ),
-    children: <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">View User</button>,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">View User</button>,
   },
 };
 
@@ -187,7 +187,7 @@ export const WithCustomStyling: Story = {
   args: {
     tooltipContent: "Custom styled tooltip",
     className: "bg-purple-500 text-on-color",
-    children: <button className="rounded-sm bg-purple-500 px-4 py-2 text-on-color">Custom style</button>,
+    children: <button className="bg-purple-500 rounded-sm px-4 py-2 text-on-color">Custom style</button>,
   },
 };
 
@@ -199,16 +199,16 @@ export const MultipleTooltips: Story = {
     return (
       <div className="flex gap-4">
         <Tooltip tooltipContent="Save your work" position="top">
-          <button className="rounded-sm bg-green-500 px-4 py-2 text-13 text-on-color">Save</button>
+          <button className="bg-green-500 rounded-sm px-4 py-2 text-13 text-on-color">Save</button>
         </Tooltip>
         <Tooltip tooltipContent="Discard changes" position="top">
-          <button className="rounded-sm bg-red-500 px-4 py-2 text-13 text-on-color">Cancel</button>
+          <button className="bg-red-500 rounded-sm px-4 py-2 text-13 text-on-color">Cancel</button>
         </Tooltip>
         <Tooltip tooltipContent="Export to PDF" position="top">
-          <button className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color">Export</button>
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Export</button>
         </Tooltip>
         <Tooltip tooltipContent="Share with team" position="top">
-          <button className="rounded-sm bg-purple-500 px-4 py-2 text-13 text-on-color">Share</button>
+          <button className="bg-purple-500 rounded-sm px-4 py-2 text-13 text-on-color">Share</button>
         </Tooltip>
       </div>
     );
@@ -223,9 +223,9 @@ export const IconButtons: Story = {
     return (
       <div className="flex gap-2">
         <Tooltip tooltipContent="Edit" position="top">
-          <button className="rounded-sm p-2 hover:bg-gray-100">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
             <svg
-              className="h-5 w-5 text-gray-600"
+              className="text-gray-600 h-5 w-5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -241,7 +241,7 @@ export const IconButtons: Story = {
           </button>
         </Tooltip>
         <Tooltip tooltipContent="Delete" position="top">
-          <button className="rounded-sm p-2 hover:bg-gray-100">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
             <svg
               className="h-5 w-5 text-danger-primary"
               fill="none"
@@ -259,9 +259,9 @@ export const IconButtons: Story = {
           </button>
         </Tooltip>
         <Tooltip tooltipContent="Share" position="top">
-          <button className="rounded-sm p-2 hover:bg-gray-100">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
             <svg
-              className="h-5 w-5 text-blue-600"
+              className="text-blue-600 h-5 w-5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -288,19 +288,19 @@ export const InFormField: Story = {
   render() {
     return (
       <div className="w-80">
-        <label className="mb-1 flex items-center gap-2 text-13 font-medium text-gray-700">
+        <label className="text-gray-700 mb-1 flex items-center gap-2 text-13 font-medium">
           Email Address
           <Tooltip
             tooltipHeading="Email Requirements"
             tooltipContent="Enter a valid email address that you have access to. We'll send a verification link."
             position="right"
           >
-            <HelpCircle className="h-4 w-4 cursor-help text-gray-400" />
+            <HelpCircle className="text-gray-400 h-4 w-4 cursor-help" />
           </Tooltip>
         </label>
         <input
           type="email"
-          className="w-full rounded-sm border border-gray-300 px-3 py-2 text-13"
+          className="border-gray-300 w-full rounded-sm border px-3 py-2 text-13"
           placeholder="you@example.com"
         />
       </div>
diff --git a/packages/services/package.json b/packages/services/package.json
index e2fed6d8789..e480ae15122 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,9 +1,12 @@
 {
   "name": "@plane/services",
   "version": "1.2.0",
-  "license": "AGPL-3.0",
   "private": true,
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index-BliaS-AT.d.ts",
@@ -16,9 +19,9 @@
     "dev": "tsdown --watch",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1131",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1131",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -31,8 +34,5 @@
     "@plane/typescript-config": "workspace:*",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  }
 }
diff --git a/packages/shared-state/package.json b/packages/shared-state/package.json
index c3eac209951..db0ad72cdb8 100644
--- a/packages/shared-state/package.json
+++ b/packages/shared-state/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@plane/shared-state",
   "version": "1.2.0",
-  "license": "AGPL-3.0",
-  "description": "Shared state shared across multiple apps internally",
   "private": true,
+  "description": "Shared state shared across multiple apps internally",
+  "license": "AGPL-3.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -20,9 +20,9 @@
     "dev": "tsdown --watch",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=191",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=191",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
diff --git a/packages/types/package.json b/packages/types/package.json
index 56840345fd6..81d8cc69208 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,9 +1,12 @@
 {
   "name": "@plane/types",
   "version": "1.2.0",
-  "license": "AGPL-3.0",
   "private": true,
+  "license": "AGPL-3.0",
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
     "./package.json": "./package.json"
@@ -13,15 +16,11 @@
     "build": "tsdown",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=151",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=151",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
-  "peerDependencies": {
-    "react": "catalog:",
-    "react-dom": "catalog:"
-  },
   "devDependencies": {
     "@plane/typescript-config": "workspace:*",
     "@types/node": "catalog:",
@@ -30,7 +29,8 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts"
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  }
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 78bd7560dbc..c67dbc7b6c4 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@plane/ui",
-  "description": "UI components shared across multiple apps internally",
-  "private": true,
   "version": "1.2.0",
-  "sideEffects": false,
+  "private": true,
+  "description": "UI components shared across multiple apps internally",
   "license": "AGPL-3.0",
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,15 +24,11 @@
     "postcss": "postcss styles/globals.css -o styles/output.css --watch",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=643",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=643",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
-  "peerDependencies": {
-    "react": "catalog:",
-    "react-dom": "catalog:"
-  },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
@@ -80,5 +76,9 @@
     "storybook": "9.1.17",
     "tsdown": "catalog:",
     "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
   }
 }
diff --git a/packages/ui/src/auth-form/auth-forgot-password.tsx b/packages/ui/src/auth-form/auth-forgot-password.tsx
index 3415af6ce33..c0b99c44854 100644
--- a/packages/ui/src/auth-form/auth-forgot-password.tsx
+++ b/packages/ui/src/auth-form/auth-forgot-password.tsx
@@ -33,9 +33,9 @@ export function AuthForgotPassword({
       onClick={handleClick}
       disabled={disabled}
       className={cn(
-        "text-13 text-accent-primary hover:text-accent-secondary transition-colors duration-200",
+        "text-13 text-accent-primary transition-colors duration-200 hover:text-accent-secondary",
         {
-          "opacity-50 cursor-not-allowed": disabled,
+          "cursor-not-allowed opacity-50": disabled,
           "cursor-pointer": !disabled,
         },
         className
diff --git a/packages/ui/src/auth-form/auth-form.tsx b/packages/ui/src/auth-form/auth-form.tsx
index 6ebaf822b40..a5348974371 100644
--- a/packages/ui/src/auth-form/auth-form.tsx
+++ b/packages/ui/src/auth-form/auth-form.tsx
@@ -200,7 +200,7 @@ export function AuthForm({
             <button
               type="button"
               onClick={handleModeChange}
-              className="ml-1 text-13 text-accent-primary hover:text-accent-secondary transition-colors duration-200"
+              className="ml-1 text-13 text-accent-primary transition-colors duration-200 hover:text-accent-secondary"
               disabled={disabled}
             >
               {getAlternateModeButtonText()}
diff --git a/packages/ui/src/auth-form/auth-input.tsx b/packages/ui/src/auth-form/auth-input.tsx
index 06968d6f5dc..5ae0b2ad158 100644
--- a/packages/ui/src/auth-form/auth-input.tsx
+++ b/packages/ui/src/auth-form/auth-input.tsx
@@ -41,13 +41,13 @@ export function AuthInput({
           {label}
         </label>
       )}
-      <div className={cn("relative flex items-center rounded-md border border-strong py-2 px-3 transition-all")}>
+      <div className={cn("relative flex items-center rounded-md border border-strong px-3 py-2 transition-all")}>
         <Input
           {...props}
           type={inputType}
           autoComplete={autoComplete}
           className={cn(
-            "rounded-md disable-autofill-style h-6 w-full placeholder:text-14 placeholder:text-placeholder p-0 border-none",
+            "h-6 w-full rounded-md border-none p-0 disable-autofill-style placeholder:text-14 placeholder:text-placeholder",
             {
               "border-danger-strong": error,
             },
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
index 5e19167ddee..963d4400d72 100644
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -74,7 +74,7 @@ export function AvatarGroup(props: Props) {
         <Tooltip tooltipContent={`${totalAvatars} total`} disabled={!showTooltip}>
           <div
             className={cn(
-              "grid place-items-center rounded-full bg-accent-subtle text-9 text-accent-primary border border-subtle-1",
+              "grid place-items-center rounded-full border border-subtle-1 bg-accent-subtle text-9 text-accent-primary",
               {
                 [sizeInfo.avatarSize]: !isAValidNumber(size),
               }
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
index f2f07b8858a..59a58b1fff6 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -32,7 +32,7 @@ function BreadcrumbBlock(props: TBreadcrumbBlockProps) {
     <>
       <Breadcrumbs.ItemWrapper label={label} disableTooltip={disableTooltip}>
         {icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>}
-        {label && <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>}
+        {label && <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>}
       </Breadcrumbs.ItemWrapper>
     </>
   );
@@ -72,7 +72,7 @@ export const WithCustomComponent: Story = {
         key="custom"
         component={
           <div className="flex items-center gap-2">
-            <span className="size-4 rounded-full bg-blue-500" />
+            <span className="bg-blue-500 size-4 rounded-full" />
             <span>Custom Component</span>
           </div>
         }
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index e9b5e2bb93c..0e9a555e50a 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -18,10 +18,10 @@ type BreadcrumbsProps = {
 
 export function BreadcrumbItemLoader() {
   return (
-    <div className="flex items-center gap-2 h-7 animate-pulse">
-      <div className="group h-full flex items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium">
-        <span className="h-full w-5 bg-layer-1 rounded-sm" />
-        <span className="h-full w-16 bg-layer-1 rounded-sm" />
+    <div className="flex h-7 animate-pulse items-center gap-2">
+      <div className="group flex h-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium">
+        <span className="h-full w-5 rounded-sm bg-layer-1" />
+        <span className="h-full w-16 rounded-sm bg-layer-1" />
       </div>
     </div>
   );
@@ -43,7 +43,7 @@ function Breadcrumbs({ className, children, onBack, isLoading = false }: Breadcr
   const childrenArray = React.Children.toArray(children);
 
   return (
-    <div className={cn("flex items-center overflow-hidden gap-0.5 flex-grow", className)}>
+    <div className={cn("flex flex-grow items-center gap-0.5 overflow-hidden", className)}>
       {!isSmallScreen && (
         <>
           {childrenArray.map((child, index) => {
@@ -102,7 +102,7 @@ type BreadcrumbItemProps = {
 function BreadcrumbItem(props: BreadcrumbItemProps) {
   const { component, showSeparator = true, isLast = false } = props;
   return (
-    <div className="flex items-center gap-0.5 h-6">
+    <div className="flex h-6 items-center gap-0.5">
       {component}
       {showSeparator && !isLast && <BreadcrumbSeparator />}
     </div>
@@ -129,7 +129,7 @@ type BreadcrumbLabelProps = {
 function BreadcrumbLabel(props: BreadcrumbLabelProps) {
   const { children, className } = props;
   return (
-    <div className={cn("relative line-clamp-1 block max-w-[150px] overflow-hidden truncate", className)}>
+    <div className={cn("relative line-clamp-1 block max-w-[150px] truncate overflow-hidden", className)}>
       {children}
     </div>
   );
@@ -146,11 +146,11 @@ type BreadcrumbSeparatorProps = {
 function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
   const { className, containerClassName, iconClassName, showDivider = false } = props;
   return (
-    <div className={cn("relative flex items-center justify-center h-full px-1.5 py-1", className)}>
-      {showDivider && <span className="absolute -left-0.5 top-0 h-full w-[1.8px] bg-surface-1" />}
+    <div className={cn("relative flex h-full items-center justify-center px-1.5 py-1", className)}>
+      {showDivider && <span className="absolute top-0 -left-0.5 h-full w-[1.8px] bg-surface-1" />}
       <div
         className={cn(
-          "flex items-center justify-center flex-shrink-0 rounded-sm text-placeholder transition-all",
+          "flex flex-shrink-0 items-center justify-center rounded-sm text-placeholder transition-all",
           containerClassName
         )}
       >
@@ -176,11 +176,11 @@ function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
     <Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
       <div
         className={cn(
-          "group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium cursor-default",
+          "group flex h-full cursor-default items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium",
           {
             "text-primary": isLast,
             "text-tertiary": !isLast,
-            "hover:text-primary hover:bg-layer-transparent-hover cursor-pointer": type === "link" && !isLast,
+            "cursor-pointer hover:bg-layer-transparent-hover hover:text-primary": type === "link" && !isLast,
           },
           className
         )}
diff --git a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
index 73dffbfee24..7b4b9b8edfa 100644
--- a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
+++ b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
@@ -45,14 +45,14 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
             }
           }}
           className={cn(
-            "group h-full flex items-center gap-2 px-1.5 py-1 text-13 font-medium text-tertiary cursor-pointer rounded-sm rounded-r-none",
+            "group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
             {
               "hover:bg-layer-1 hover:text-primary": !isLast,
             }
           )}
         >
-          <div className="flex @4xl:hidden text-tertiary">...</div>
-          <div className="hidden @4xl:flex gap-2 items-center">
+          <div className="flex text-tertiary @4xl:hidden">...</div>
+          <div className="hidden items-center gap-2 @4xl:flex">
             {selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
             <Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
           </div>
@@ -87,7 +87,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
       placement="bottom-start"
       className="h-full rounded-sm"
       customButtonClassName={cn(
-        "group flex items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full rounded-sm",
+        "group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
         {
           "bg-surface-2": isOpen,
         }
@@ -125,7 +125,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
               <h5>{item.title}</h5>
               {item.description && (
                 <p
-                  className={cn("text-tertiary whitespace-pre-line", {
+                  className={cn("whitespace-pre-line text-tertiary", {
                     "text-placeholder": item.disabled,
                   })}
                 >
@@ -133,7 +133,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
                 </p>
               )}
             </div>
-            {item.key === selectedItemKey && <CheckIcon className="flex-shrink-0 size-3.5" />}
+            {item.key === selectedItemKey && <CheckIcon className="size-3.5 flex-shrink-0" />}
           </CustomMenu.MenuItem>
         );
       })}
diff --git a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
index ab3f9bbacef..8f270e9fd13 100644
--- a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
+++ b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
@@ -67,16 +67,16 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
                 }
               }}
               className={cn(
-                "group h-full flex items-center gap-2 px-1.5 py-1 text-13 font-medium text-tertiary cursor-pointer rounded-sm rounded-r-none",
+                "group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
                 {
                   "hover:bg-layer-1 hover:text-primary": !isLast,
                 }
               )}
             >
-              {shouldTruncate && <div className="flex @4xl:hidden text-tertiary">...</div>}
+              {shouldTruncate && <div className="flex text-tertiary @4xl:hidden">...</div>}
               <div
                 className={cn("flex gap-2", {
-                  "hidden @4xl:flex gap-2 items-center": shouldTruncate,
+                  "hidden items-center gap-2 @4xl:flex": shouldTruncate,
                 })}
               >
                 {icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
@@ -101,7 +101,7 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
       disabled={navigationDisabled}
       className="h-full rounded-sm"
       customButtonClassName={cn(
-        "group flex items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full rounded-sm",
+        "group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
         {
           "bg-surface-2": isDropdownOpen,
         }
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
index b0734b822d5..1252b632328 100644
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -26,14 +26,14 @@ function ToggleSwitch(props: IToggleSwitchProps) {
       disabled={disabled}
       onChange={onChange}
       className={cn(
-        "relative inline-flex flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border border-subtle transition-colors duration-200 ease-in-out focus:outline-none bg-layer-1",
+        "relative inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full border border-subtle bg-layer-1 transition-colors duration-200 ease-in-out focus:outline-none",
         {
           "h-4 w-7": size === "sm",
           "h-5 w-9": size === "md",
           "bg-accent-primary": value && !disabled,
           "bg-(--text-color-icon-placeholder)": !value && !disabled,
-          "cursor-not-allowed opacity-50 bg-accent-primary": value && disabled,
-          "cursor-not-allowed opacity-50 bg-(--text-color-icon-placeholder)": !value && disabled,
+          "cursor-not-allowed bg-accent-primary opacity-50": value && disabled,
+          "cursor-not-allowed bg-(--text-color-icon-placeholder) opacity-50": !value && disabled,
         },
         className
       )}
@@ -42,7 +42,7 @@ function ToggleSwitch(props: IToggleSwitchProps) {
       <span
         aria-hidden="true"
         className={cn(
-          "inline-block self-center h-5 w-5 transform rounded-full bg-(--text-color-icon-on-color) ring-0 transition duration-200 ease-in-out",
+          "inline-block h-5 w-5 transform self-center rounded-full bg-(--text-color-icon-on-color) ring-0 transition duration-200 ease-in-out",
           {
             "h-3 w-3 translate-x-3.5": size === "sm" && value,
             "h-3 w-3 translate-x-0.5": size === "sm" && !value,
diff --git a/packages/ui/src/collapsible/collapsible-button.tsx b/packages/ui/src/collapsible/collapsible-button.tsx
index def03749260..780087cbe6c 100644
--- a/packages/ui/src/collapsible/collapsible-button.tsx
+++ b/packages/ui/src/collapsible/collapsible-button.tsx
@@ -33,17 +33,17 @@ export function CollapsibleButton(props: Props) {
     ChevronIcon = DropdownIcon,
   } = props;
   return (
-    <div className={cn("flex items-center justify-between gap-3 h-12 px-2.5 py-3 border-b border-subtle", className)}>
+    <div className={cn("flex h-12 items-center justify-between gap-3 border-b border-subtle px-2.5 py-3", className)}>
       <div className="flex items-center gap-3.5">
         <div className="flex items-center gap-3">
           {!hideChevron && (
             <ChevronIcon
-              className={cn("size-2 text-tertiary hover:text-secondary duration-300", {
+              className={cn("size-2 text-tertiary duration-300 hover:text-secondary", {
                 "-rotate-90": !isOpen,
               })}
             />
           )}
-          <span className={cn("text-14 text-primary font-medium", titleClassName)}>{title}</span>
+          <span className={cn("text-14 font-medium text-primary", titleClassName)}>{title}</span>
         </div>
         {indicatorElement && indicatorElement}
       </div>
diff --git a/packages/ui/src/color-picker/color-picker.tsx b/packages/ui/src/color-picker/color-picker.tsx
index dae4cb173a6..d3d0c8e247d 100644
--- a/packages/ui/src/color-picker/color-picker.tsx
+++ b/packages/ui/src/color-picker/color-picker.tsx
@@ -25,9 +25,9 @@ export function ColorPicker(props: ColorPickerProps) {
   };
 
   return (
-    <div className="flex items-center justify-center relative">
+    <div className="relative flex items-center justify-center">
       <button
-        className={`size-4 rounded-full cursor-pointer conical-gradient ${className}`}
+        className={`size-4 cursor-pointer rounded-full conical-gradient ${className}`}
         onClick={handleOnClick}
         aria-label="Open color picker"
       />
@@ -36,7 +36,7 @@ export function ColorPicker(props: ColorPickerProps) {
         type="color"
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="absolute inset-0 size-4 invisible"
+        className="invisible absolute inset-0 size-4"
         aria-hidden="true"
       />
     </div>
diff --git a/packages/ui/src/drag-handle.tsx b/packages/ui/src/drag-handle.tsx
index 9392c3392e3..58e1e43d487 100644
--- a/packages/ui/src/drag-handle.tsx
+++ b/packages/ui/src/drag-handle.tsx
@@ -21,13 +21,13 @@ export const DragHandle = forwardRef(function DragHandle(
   const { className, disabled = false } = props;
 
   if (disabled) {
-    return <div className="w-[14px] h-[18px]" />;
+    return <div className="h-[18px] w-[14px]" />;
   }
 
   return (
     <button
       type="button"
-      className={cn("p-0.5 flex flex-shrink-0 rounded-sm bg-surface-2 text-secondary cursor-grab", className)}
+      className={cn("flex flex-shrink-0 cursor-grab rounded-sm bg-surface-2 p-0.5 text-secondary", className)}
       onContextMenu={(e) => {
         e.preventDefault();
         e.stopPropagation();
diff --git a/packages/ui/src/drop-indicator.tsx b/packages/ui/src/drop-indicator.tsx
index 5179cdaa7e1..007b3245f93 100644
--- a/packages/ui/src/drop-indicator.tsx
+++ b/packages/ui/src/drop-indicator.tsx
@@ -18,9 +18,7 @@ export function DropIndicator(props: Props) {
   return (
     <div
       className={cn(
-        `block relative h-[2px] w-full
-    before:left-0 before:relative before:block before:top-[-2px] before:h-[6px] before:w-[6px] before:rounded-sm
-    after:left-[calc(100%-6px)] after:relative after:block after:top-[-8px] after:h-[6px] after:w-[6px] after:rounded-sm`,
+        `relative block h-[2px] w-full before:relative before:top-[-2px] before:left-0 before:block before:h-[6px] before:w-[6px] before:rounded-sm after:relative after:top-[-8px] after:left-[calc(100%-6px)] after:block after:h-[6px] after:w-[6px] after:rounded-sm`,
         {
           "bg-accent-primary before:bg-accent-primary after:bg-accent-primary": isVisible,
         },
diff --git a/packages/ui/src/dropdown/common/loader.tsx b/packages/ui/src/dropdown/common/loader.tsx
index 268681ba45c..67e8dc295c4 100644
--- a/packages/ui/src/dropdown/common/loader.tsx
+++ b/packages/ui/src/dropdown/common/loader.tsx
@@ -9,9 +9,9 @@ import React from "react";
 
 export function DropdownOptionsLoader() {
   return (
-    <div className="flex flex-col gap-1 animate-pulse">
+    <div className="flex animate-pulse flex-col gap-1">
       {range(6).map((index) => (
-        <div key={index} className="flex h-[1.925rem] w-full rounded-sm px-1 py-1.5 bg-surface-2" />
+        <div key={index} className="flex h-[1.925rem] w-full rounded-sm bg-surface-2 px-1 py-1.5" />
       ))}
     </div>
   );
diff --git a/packages/ui/src/dropdown/common/options.tsx b/packages/ui/src/dropdown/common/options.tsx
index 40a30ef57b7..d37a2ea1ebd 100644
--- a/packages/ui/src/dropdown/common/options.tsx
+++ b/packages/ui/src/dropdown/common/options.tsx
@@ -58,7 +58,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
                   disabled={option.disabled}
                   className={({ active, selected }) =>
                     cn(
-                      "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
+                      "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                       {
                         "bg-layer-1": active,
                         "text-primary": selected,
@@ -84,7 +84,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
                 </Combobox.Option>
               ))
             ) : (
-              <p className="px-1.5 py-1 italic text-placeholder">No matching results</p>
+              <p className="px-1.5 py-1 text-placeholder italic">No matching results</p>
             )
           ) : loader ? (
             <> {loader} </>
diff --git a/packages/ui/src/dropdowns/combo-box.tsx b/packages/ui/src/dropdowns/combo-box.tsx
index e7c63d5fe86..72de104f373 100644
--- a/packages/ui/src/dropdowns/combo-box.tsx
+++ b/packages/ui/src/dropdowns/combo-box.tsx
@@ -48,7 +48,7 @@ const ComboDropDown = forwardRef(function ComboDropDown(props: Props, ref) {
 
   if (!shouldRender) {
     return (
-      <div ref={dropDownButtonRef} className="h-full flex items-center">
+      <div ref={dropDownButtonRef} className="flex h-full items-center">
         {button}
       </div>
     );
diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx
index 9cbb0fe5653..27031f9f785 100644
--- a/packages/ui/src/dropdowns/context-menu/item.tsx
+++ b/packages/ui/src/dropdowns/context-menu/item.tsx
@@ -158,7 +158,7 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
         ref={setReferenceElement}
         type="button"
         className={cn(
-          "w-full flex items-center gap-2 px-1 py-1.5 text-left text-secondary rounded-sm text-11 select-none",
+          "flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-11 text-secondary select-none",
           {
             "bg-layer-transparent-hover": isActive,
             "text-placeholder": item.disabled,
@@ -176,7 +176,7 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
               <h5>{item.title}</h5>
               {item.description && (
                 <p
-                  className={cn("text-tertiary whitespace-pre-line", {
+                  className={cn("whitespace-pre-line text-tertiary", {
                     "text-placeholder": item.disabled,
                   })}
                 >
@@ -199,13 +199,13 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
             className="fixed z-[35] min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11"
             data-context-submenu="true"
           >
-            <div ref={nestedMenuRef} className="max-h-72 overflow-y-scroll vertical-scrollbar scrollbar-sm">
+            <div ref={nestedMenuRef} className="vertical-scrollbar scrollbar-sm max-h-72 overflow-y-scroll">
               {renderedNestedItems.map((nestedItem, index) => (
                 <button
                   key={nestedItem.key}
                   type="button"
                   className={cn(
-                    "w-full flex items-center gap-2 px-1 py-1.5 text-left text-secondary rounded-sm text-11 select-none",
+                    "flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-11 text-secondary select-none",
                     {
                       "bg-layer-transparent-hover": index === activeNestedIndex,
                       "text-placeholder": nestedItem.disabled,
@@ -228,7 +228,7 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
                         <h5>{nestedItem.title}</h5>
                         {nestedItem.description && (
                           <p
-                            className={cn("text-tertiary whitespace-pre-line", {
+                            className={cn("whitespace-pre-line text-tertiary", {
                               "text-placeholder": nestedItem.disabled,
                             })}
                           >
diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/ui/src/dropdowns/context-menu/root.tsx
index 2f903fa21dd..b966b4f1e31 100644
--- a/packages/ui/src/dropdowns/context-menu/root.tsx
+++ b/packages/ui/src/dropdowns/context-menu/root.tsx
@@ -204,15 +204,15 @@ function ContextMenuWithoutPortal(props: ContextMenuProps) {
   return (
     <div
       className={cn(
-        "fixed h-screen w-screen top-0 left-0 cursor-default z-30 opacity-0 pointer-events-none transition-opacity",
+        "pointer-events-none fixed top-0 left-0 z-30 h-screen w-screen cursor-default opacity-0 transition-opacity",
         {
-          "opacity-100 pointer-events-auto": isOpen,
+          "pointer-events-auto opacity-100": isOpen,
         }
       )}
     >
       <div
         ref={contextMenuRef}
-        className="fixed border-[0.5px] border-subtle-1 bg-surface-1 rounded-md px-2 py-2.5 max-h-72 min-w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
+        className="vertical-scrollbar fixed scrollbar-sm max-h-72 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5"
         style={{
           top: position.y,
           left: position.x,
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 6b6f5fed3ab..7066c17709a 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -200,7 +200,7 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
     >
       <div
         className={cn(
-          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 focus:outline-none min-w-[12rem] whitespace-nowrap",
+          "my-1 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap focus:outline-none",
           {
             "max-h-60": maxHeight === "lg",
             "max-h-48": maxHeight === "md",
@@ -277,9 +277,9 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
                   <button
                     ref={setReferenceElement}
                     type="button"
-                    className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-11 duration-300 ${
+                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 ${
                       open ? "text-primary" : "text-secondary"
-                    } ${noBorder ? "" : "border border-strong shadow-sm focus:outline-none"} ${
+                    } ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
                       disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
                     } ${buttonClassName}`}
                     onClick={handleMenuButtonClick}
@@ -400,7 +400,7 @@ function SubMenu(props: ICustomSubMenuProps) {
           {({ active }) => (
             <div
               className={cn(
-                "w-full select-none rounded-sm px-1 py-1.5 text-left text-secondary flex items-center justify-between cursor-pointer",
+                "flex w-full cursor-pointer items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
                 {
                   "bg-layer-transparent-hover": active && !disabled,
                   "text-placeholder": disabled,
@@ -462,7 +462,7 @@ function MenuItem(props: ICustomMenuItemProps) {
         <button
           type="button"
           className={cn(
-            "w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary",
+            "w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none",
             {
               "bg-layer-transparent-hover": active && !disabled,
               "text-placeholder": disabled,
@@ -492,7 +492,7 @@ function SubMenuTrigger(props: ICustomSubMenuTriggerProps) {
       {({ active }) => (
         <div
           className={cn(
-            "w-full select-none rounded-sm px-1 py-1.5 text-left text-secondary flex items-center justify-between",
+            "flex w-full items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
             {
               "bg-layer-transparent-hover": active && !disabled,
               "text-placeholder": disabled,
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index 99694860cdc..b988a06182d 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -146,14 +146,14 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                 <Combobox.Options data-prevent-outside-click static>
                   <div
                     className={cn(
-                      "my-1 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 py-2.5 text-11 focus:outline-none min-w-48 whitespace-nowrap z-30",
+                      "z-30 my-1 min-w-48 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 py-2.5 text-11 whitespace-nowrap focus:outline-none",
                       optionsClassName
                     )}
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
                   >
-                    <div className="flex items-center gap-1.5 rounded-sm border border-subtle px-2 mx-2">
+                    <div className="mx-2 flex items-center gap-1.5 rounded-sm border border-subtle px-2">
                       <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
                       <Combobox.Input
                         className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
@@ -164,7 +164,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                       />
                     </div>
                     <div
-                      className={cn("mt-2 px-2 space-y-1 overflow-y-scroll vertical-scrollbar scrollbar-xs", {
+                      className={cn("vertical-scrollbar mt-2 scrollbar-xs space-y-1 overflow-y-scroll px-2", {
                         "max-h-96": maxHeight === "2xl",
                         "max-h-80": maxHeight === "xl",
                         "max-h-60": maxHeight === "lg",
@@ -181,10 +181,10 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                               value={option.value}
                               className={({ active }) =>
                                 cn(
-                                  "w-full truncate flex items-center justify-between gap-2 rounded-sm px-1 py-1.5 cursor-pointer select-none",
+                                  "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
                                   {
                                     "bg-layer-transparent-hover": active,
-                                    "text-placeholder opacity-60 cursor-not-allowed": option.disabled,
+                                    "cursor-not-allowed text-placeholder opacity-60": option.disabled,
                                   }
                                 )
                               }
@@ -213,10 +213,10 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                             </Combobox.Option>
                           ))
                         ) : (
-                          <p className="text-placeholder italic py-1 px-1.5">{noResultsMessage}</p>
+                          <p className="px-1.5 py-1 text-placeholder italic">{noResultsMessage}</p>
                         )
                       ) : (
-                        <p className="text-placeholder italic py-1 px-1.5">Loading...</p>
+                        <p className="px-1.5 py-1 text-placeholder italic">Loading...</p>
                       )}
                     </div>
                     {footerOption}
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 59c726e0717..cfdb986caa6 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -86,7 +86,7 @@ function CustomSelect(props: ICustomSelectProps) {
               <button
                 ref={setReferenceElement}
                 type="button"
-                className={`flex items-center justify-between gap-1 text-11 rounded ${
+                className={`flex items-center justify-between gap-1 rounded text-11 ${
                   disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
                 } ${customButtonClassName}`}
                 onClick={toggleDropdown}
@@ -122,7 +122,7 @@ function CustomSelect(props: ICustomSelectProps) {
             <Combobox.Options data-prevent-outside-click>
               <div
                 className={cn(
-                  "my-1 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 focus:outline-none min-w-48 whitespace-nowrap z-30",
+                  "z-30 my-1 min-w-48 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap focus:outline-none",
                   optionsClassName
                 )}
                 ref={setPopperElement}
@@ -166,7 +166,7 @@ function Option(props: ICustomSelectItemProps) {
       value={value}
       className={({ active }) =>
         cn(
-          "cursor-pointer select-none truncate rounded-sm px-1 py-1.5 text-secondary flex items-center justify-between gap-2",
+          "flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none",
           {
             "bg-layer-transparent-hover": active,
           },
@@ -176,7 +176,7 @@ function Option(props: ICustomSelectItemProps) {
       onClick={handleClick}
     >
       {({ selected }) => (
-        <div className="flex items-center justify-between gap-2 w-full">
+        <div className="flex w-full items-center justify-between gap-2">
           {children}
           {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
         </div>
diff --git a/packages/ui/src/favorite-star.tsx b/packages/ui/src/favorite-star.tsx
index f87e1d674c8..f79e1dec0fa 100644
--- a/packages/ui/src/favorite-star.tsx
+++ b/packages/ui/src/favorite-star.tsx
@@ -20,7 +20,7 @@ export function FavoriteStar(props: Props) {
   const { buttonClassName, iconClassName, onClick, selected } = props;
 
   return (
-    <button type="button" className={cn("h-4 w-4 grid place-items-center", buttonClassName)} onClick={onClick}>
+    <button type="button" className={cn("grid h-4 w-4 place-items-center", buttonClassName)} onClick={onClick}>
       <Star
         className={cn(
           "h-4 w-4 text-tertiary transition-all",
diff --git a/packages/ui/src/form-fields/checkbox.tsx b/packages/ui/src/form-fields/checkbox.tsx
index 650732a4428..0b44f2ea46d 100644
--- a/packages/ui/src/form-fields/checkbox.tsx
+++ b/packages/ui/src/form-fields/checkbox.tsx
@@ -28,7 +28,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
   } = props;
 
   return (
-    <div className={cn("relative flex-shrink-0 flex gap-2", containerClassName)}>
+    <div className={cn("relative flex flex-shrink-0 gap-2", containerClassName)}>
       <input
         id={id}
         ref={ref}
@@ -36,10 +36,10 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
         name={name}
         checked={checked}
         className={cn(
-          "appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong cursor-pointer",
+          "size-4 shrink-0 cursor-pointer appearance-none rounded-[3px] border focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong",
           {
-            "border-subtle bg-layer-1 cursor-not-allowed": disabled,
-            "border-strong hover:border-strong-1 bg-transparent": !disabled,
+            "cursor-not-allowed border-subtle bg-layer-1": disabled,
+            "border-strong bg-transparent hover:border-strong-1": !disabled,
             "border-accent-strong-40 hover:border-accent-strong-40 bg-accent-primary hover:bg-accent-primary/80":
               !disabled && (checked || indeterminate),
 
@@ -52,7 +52,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
       />
       <svg
         className={cn(
-          "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none hidden text-on-color",
+          "pointer-events-none absolute top-1/2 left-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 p-0.5 text-on-color outline-none",
           {
             block: checked,
             "text-placeholder opacity-40": disabled,
@@ -71,7 +71,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
       </svg>
       <svg
         className={cn(
-          "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none stroke-white hidden",
+          "pointer-events-none absolute top-1/2 left-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 stroke-white p-0.5 outline-none",
           {
             "stroke-placeholder opacity-40": disabled,
             block: indeterminate && !checked,
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
index f09214d69ef..1af0df22b4b 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -58,7 +58,7 @@ export function InputColorPicker(props: InputColorPickerProps) {
         style={style}
       />
 
-      <Popover as="div" className="absolute right-1 top-1/2 z-10 -translate-y-1/2">
+      <Popover as="div" className="absolute top-1/2 right-1 z-10 -translate-y-1/2">
         {() => (
           <>
             <Popover.Button as={React.Fragment}>
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index b9529f4e768..02938383589 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -35,7 +35,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
       type={type}
       name={name}
       className={cn(
-        "block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
+        "placeholder-tertiary block rounded-md border-subtle-1 bg-layer-2 text-13 focus:outline-none",
         {
           "rounded-md border-[0.5px]": mode === "primary",
           "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
diff --git a/packages/ui/src/form-fields/password/indicator.tsx b/packages/ui/src/form-fields/password/indicator.tsx
index 7821a50d7d8..21e2dc80d11 100644
--- a/packages/ui/src/form-fields/password/indicator.tsx
+++ b/packages/ui/src/form-fields/password/indicator.tsx
@@ -35,7 +35,7 @@ export function PasswordStrengthIndicator({
     <div className={cn("space-y-3")}>
       {/* Strength Indicator */}
       <div className="space-y-2">
-        <div className="flex gap-1 w-full transition-all duration-300 ease-linear">
+        <div className="flex w-full gap-1 transition-all duration-300 ease-linear">
           {[0, 1, 2].map((fragmentIndex) => (
             <div
               key={fragmentIndex}
diff --git a/packages/ui/src/form-fields/password/password-input.tsx b/packages/ui/src/form-fields/password/password-input.tsx
index efd382c40c4..3127122fa2b 100644
--- a/packages/ui/src/form-fields/password/password-input.tsx
+++ b/packages/ui/src/form-fields/password/password-input.tsx
@@ -39,7 +39,7 @@ export function PasswordInput({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         className={cn(
-          "w-full px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
+          "w-full rounded-md border bg-surface-1 px-3 py-2 pr-10 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
           {
             "border-strong": !error,
             "border-danger-strong": error,
@@ -54,19 +54,19 @@ export function PasswordInput({
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="absolute inset-y-0 right-0 pr-3 flex items-center text-secondary hover:text-primary transition-colors duration-200"
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary transition-colors duration-200 hover:text-primary"
           >
-            <div className="relative w-4 h-4">
+            <div className="relative h-4 w-4">
               <Eye
                 className={cn(
                   "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
-                  showPassword ? "opacity-0 scale-75 rotate-12" : "opacity-100 scale-100 rotate-0"
+                  showPassword ? "scale-75 rotate-12 opacity-0" : "scale-100 rotate-0 opacity-100"
                 )}
               />
               <EyeClosed
                 className={cn(
                   "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
-                  showPassword ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-75 -rotate-12"
+                  showPassword ? "scale-100 rotate-0 opacity-100" : "scale-75 -rotate-12 opacity-0"
                 )}
               />
             </div>
diff --git a/packages/ui/src/form-fields/root.tsx b/packages/ui/src/form-fields/root.tsx
index 84b3ee918c2..602e266d902 100644
--- a/packages/ui/src/form-fields/root.tsx
+++ b/packages/ui/src/form-fields/root.tsx
@@ -36,7 +36,7 @@ export function FormField({ label, htmlFor, children, className, optional = fals
     <div className={cn("flex flex-col gap-1.5", className)}>
       <Label htmlFor={htmlFor}>
         {label}
-        {optional && <span className="text-placeholder text-13"> (optional)</span>}
+        {optional && <span className="text-13 text-placeholder"> (optional)</span>}
       </Label>
       {children}
     </div>
diff --git a/packages/ui/src/header/header.tsx b/packages/ui/src/header/header.tsx
index 654907123b2..81ed15dcea9 100644
--- a/packages/ui/src/header/header.tsx
+++ b/packages/ui/src/header/header.tsx
@@ -48,7 +48,7 @@ function LeftItem(props: HeaderProps) {
   return (
     <div
       className={cn(
-        "flex flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap max-w-[80%] flex-grow",
+        "flex max-w-[80%] flex-grow flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap",
         props.className
       )}
     >
@@ -63,7 +63,7 @@ function RightItem(props: HeaderProps) {
   return (
     <div
       className={cn(
-        "flex justify-end gap-2 w-auto items-center",
+        "flex w-auto items-center justify-end gap-2",
         {
           "items-baseline": variant === EHeaderVariant.TERNARY,
         },
diff --git a/packages/ui/src/link/block.tsx b/packages/ui/src/link/block.tsx
index 9676428fe11..1398b4adc73 100644
--- a/packages/ui/src/link/block.tsx
+++ b/packages/ui/src/link/block.tsx
@@ -28,13 +28,13 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
   return (
     <div
       onClick={onClick}
-      className="cursor-pointer group flex items-center bg-surface-1 px-4 w-[230px] h-[56px] border-[0.5px] border-subtle rounded-md gap-4"
+      className="group flex h-[56px] w-[230px] cursor-pointer items-center gap-4 rounded-md border-[0.5px] border-subtle bg-surface-1 px-4"
     >
-      <div className="flex-shrink-0 size-8 rounded-sm p-2 bg-surface-2 grid place-items-center">
+      <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-surface-2 p-2">
         <Icon className="size-4 stroke-2 text-tertiary group-hover:text-primary" />
       </div>
       <div className="flex-1 truncate">
-        <div className="text-13 font-medium truncate">{title}</div>
+        <div className="truncate text-13 font-medium">{title}</div>
         {createdAt && <div className="text-11 font-medium text-placeholder">{calculateTimeAgo(createdAt)}</div>}
       </div>
       {menuItems && (
@@ -48,7 +48,7 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
                   e.stopPropagation();
                   item.action();
                 }}
-                className={cn("flex items-center gap-2 w-full ", {
+                className={cn("flex w-full items-center gap-2", {
                   "text-placeholder": item.disabled,
                 })}
                 disabled={item.disabled}
@@ -58,7 +58,7 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
                   <h5>{item.title}</h5>
                   {item.description && (
                     <p
-                      className={cn("text-tertiary whitespace-pre-line", {
+                      className={cn("whitespace-pre-line text-tertiary", {
                         "text-placeholder": item.disabled,
                       })}
                     >
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx
index adf4edd905b..5565ab02c1f 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -76,11 +76,11 @@ export function AlertModalCore(props: Props) {
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={position} width={width}>
-      <div className="p-5 flex flex-col sm:flex-row items-center sm:items-start gap-4">
+      <div className="flex flex-col items-center gap-4 p-5 sm:flex-row sm:items-start">
         {!hideIcon && (
           <span
             className={cn(
-              "flex-shrink-0 grid place-items-center rounded-full size-12 sm:size-10",
+              "grid size-12 flex-shrink-0 place-items-center rounded-full sm:size-10",
               VARIANT_CLASSES[variant]
             )}
           >
@@ -92,7 +92,7 @@ export function AlertModalCore(props: Props) {
           <p className="mt-1 text-13 text-secondary">{content}</p>
         </div>
       </div>
-      <div className="px-5 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 border-t-[0.5px] border-subtle">
+      <div className="flex flex-col-reverse gap-2 border-t-[0.5px] border-subtle px-5 py-4 sm:flex-row sm:justify-end">
         <Button variant="secondary" onClick={handleClose}>
           {secondaryButtonText}
         </Button>
diff --git a/packages/ui/src/modals/modal-core.tsx b/packages/ui/src/modals/modal-core.tsx
index 1d7177d7c08..ede3e34b8f2 100644
--- a/packages/ui/src/modals/modal-core.tsx
+++ b/packages/ui/src/modals/modal-core.tsx
@@ -57,7 +57,7 @@ export function ModalCore(props: Props) {
             >
               <Dialog.Panel
                 className={cn(
-                  "relative transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all w-full",
+                  "relative w-full transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all",
                   width,
                   className
                 )}
diff --git a/packages/ui/src/oauth/oauth-button.tsx b/packages/ui/src/oauth/oauth-button.tsx
index 0782ff428a1..002b0c5dc04 100644
--- a/packages/ui/src/oauth/oauth-button.tsx
+++ b/packages/ui/src/oauth/oauth-button.tsx
@@ -23,14 +23,14 @@ const OAuthButton = React.forwardRef(function OAuthButton(
     <button
       ref={ref}
       className={cn(
-        "flex h-9 w-full items-center justify-center gap-2 rounded-md border border-strong px-4 py-2.5 text-13 font-medium text-primary duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300",
+        "bg-onboarding-background-200 hover:bg-onboarding-background-300 flex h-9 w-full items-center justify-center gap-2 rounded-md border border-strong px-4 py-2.5 text-13 font-medium text-primary duration-300",
         className
       )}
       {...rest}
     >
       <div className="flex flex-shrink-0 items-center justify-center">{icon}</div>
       {!compact && (
-        <span className="flex flex-grow items-center justify-center transition-opacity duration-300 text-body-sm-regular">
+        <span className="flex flex-grow items-center justify-center text-body-sm-regular transition-opacity duration-300">
           {text}
         </span>
       )}
diff --git a/packages/ui/src/popovers/popover-menu.stories.tsx b/packages/ui/src/popovers/popover-menu.stories.tsx
index e9faca71b62..292cc1b55a4 100644
--- a/packages/ui/src/popovers/popover-menu.stories.tsx
+++ b/packages/ui/src/popovers/popover-menu.stories.tsx
@@ -31,7 +31,7 @@ const meta: Meta<typeof PopoverMenu<TPopoverMenu>> = {
     ],
     keyExtractor: (item, index: number) => `${item.id}-${index}`,
     render: (item: TPopoverMenu) => (
-      <div className="text-13 text-gray-600 hover:text-gray-700 rounded-xs cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
+      <div className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all">
         {item.name}
       </div>
     ),
diff --git a/packages/ui/src/popovers/popover.stories.tsx b/packages/ui/src/popovers/popover.stories.tsx
index 042b64aa4ec..030367b70c4 100644
--- a/packages/ui/src/popovers/popover.stories.tsx
+++ b/packages/ui/src/popovers/popover.stories.tsx
@@ -23,12 +23,12 @@ type Story = StoryObj<typeof Popover>;
 // components
 const RenderCustomPopoverComponent = (
   <div className="space-y-2">
-    <div className="text-13 font-medium text-gray-500">Your custom component</div>
+    <div className="text-gray-500 text-13 font-medium">Your custom component</div>
     <div>
       {["option1", "option2", "option3"].map((option) => (
         <div
           key={option}
-          className="text-13 text-gray-600 hover:text-gray-700 rounded-xs cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize"
+          className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all"
         >
           {option}
         </div>
@@ -50,7 +50,7 @@ export const CustomMenuButton: Story = {
   args: {
     popperPosition: "bottom-start",
     button: (
-      <div className="p-2 text-13 font-medium rounded-sm bg-gray-100 hover:bg-gray-200 transition-all">
+      <div className="bg-gray-100 hover:bg-gray-200 rounded-sm p-2 text-13 font-medium transition-all">
         Custom Menu Button
       </div>
     ),
diff --git a/packages/ui/src/popovers/popover.tsx b/packages/ui/src/popovers/popover.tsx
index 2a0fddf6c70..c27315909bb 100644
--- a/packages/ui/src/popovers/popover.tsx
+++ b/packages/ui/src/popovers/popover.tsx
@@ -51,7 +51,7 @@ export function Popover(props: TPopover) {
           ref={popoverButtonRef as Ref<HTMLButtonElement>}
           className={cn(
             {
-              "flex justify-center items-center text-14 h-6 w-6 rounded-sm transition-all bg-surface-2 hover:bg-layer-1":
+              "flex h-6 w-6 items-center justify-center rounded-sm bg-surface-2 text-14 transition-all hover:bg-layer-1":
                 !button,
             },
             buttonClassName
@@ -75,7 +75,7 @@ export function Popover(props: TPopover) {
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
-          className={cn("absolute left-0 top-full z-20 w-screen max-w-xs mt-2", panelClassName)}
+          className={cn("absolute top-full left-0 z-20 mt-2 w-screen max-w-xs", panelClassName)}
         >
           {children}
         </HeadlessReactPopover.Panel>
diff --git a/packages/ui/src/progress/linear-progress-indicator.tsx b/packages/ui/src/progress/linear-progress-indicator.tsx
index d85e34f5057..ac98b6e8f5a 100644
--- a/packages/ui/src/progress/linear-progress-indicator.tsx
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@@ -55,7 +55,7 @@ export function LinearProgressIndicator({
         "h-[14px]": size === "xl",
       })}
     >
-      <div className={cn("flex h-full w-full gap-[1.5px] p-[2px] bg-surface-2 rounded-xs", className)}>{bars}</div>
+      <div className={cn("flex h-full w-full gap-[1.5px] rounded-xs bg-surface-2 p-[2px]", className)}>{bars}</div>
     </div>
   );
 }
diff --git a/packages/ui/src/progress/radial-progress.tsx b/packages/ui/src/progress/radial-progress.tsx
index 346148fd74f..2addbe11160 100644
--- a/packages/ui/src/progress/radial-progress.tsx
+++ b/packages/ui/src/progress/radial-progress.tsx
@@ -25,7 +25,7 @@ export function RadialProgressBar(props: IRadialProgressBar) {
 
   return (
     <div className="relative h-4 w-4">
-      <svg className="absolute left-0 top-0" viewBox="0 0 100 100">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
         <circle
           className={"stroke-current opacity-10"}
           cx="50"
diff --git a/packages/ui/src/scroll-area.tsx b/packages/ui/src/scroll-area.tsx
index a9ceca6940a..76791d9fba3 100644
--- a/packages/ui/src/scroll-area.tsx
+++ b/packages/ui/src/scroll-area.tsx
@@ -41,7 +41,7 @@ export function ScrollArea(props: TScrollAreaProps) {
       <RadixScrollArea.Viewport className="size-full">{children}</RadixScrollArea.Viewport>
       <RadixScrollArea.Scrollbar
         className={cn(
-          "group/track flex touch-none select-none bg-transparent transition-colors duration-150 ease-out",
+          "group/track flex touch-none bg-transparent transition-colors duration-150 ease-out select-none",
           sizeStyles[size]
         )}
         orientation="vertical"
@@ -55,7 +55,7 @@ export function ScrollArea(props: TScrollAreaProps) {
       </RadixScrollArea.Scrollbar>
       <RadixScrollArea.Scrollbar
         className={cn(
-          "group/track flex touch-none select-none bg-transparent transition-colors duration-150 ease-out",
+          "group/track flex touch-none bg-transparent transition-colors duration-150 ease-out select-none",
           sizeStyles[size]
         )}
         orientation="horizontal"
diff --git a/packages/ui/src/sortable/sortable.stories.tsx b/packages/ui/src/sortable/sortable.stories.tsx
index 5ae0824bfca..474a764aaaa 100644
--- a/packages/ui/src/sortable/sortable.stories.tsx
+++ b/packages/ui/src/sortable/sortable.stories.tsx
@@ -23,7 +23,7 @@ const meta: Meta<typeof Sortable<StoryItem>> = {
     ],
     render: (item: StoryItem) => (
       // <Draggable data={item} className="rounded-lg">
-      <div className="border ">{item.name}</div>
+      <div className="border">{item.name}</div>
       // </Draggable>
     ),
     onChange: (data) => console.log(data.map(({ id }) => id)),
diff --git a/packages/ui/src/tables/table.tsx b/packages/ui/src/tables/table.tsx
index 54a27d3e39a..04ebaab4bbe 100644
--- a/packages/ui/src/tables/table.tsx
+++ b/packages/ui/src/tables/table.tsx
@@ -25,7 +25,7 @@ export function Table<T>(props: TTableData<T>) {
   } = props;
 
   return (
-    <table className={cn("table-auto w-full overflow-hidden whitespace-nowrap", tableClassName)}>
+    <table className={cn("w-full table-auto overflow-hidden whitespace-nowrap", tableClassName)}>
       <thead className={cn("divide-y divide-subtle", tHeadClassName)}>
         <tr className={cn("divide-x divide-subtle text-13 text-primary", tHeadTrClassName)}>
           {columns.map((column) => (
diff --git a/packages/ui/src/tabs/tab-list.tsx b/packages/ui/src/tabs/tab-list.tsx
index 71e5d02ee5c..c9e02000d38 100644
--- a/packages/ui/src/tabs/tab-list.tsx
+++ b/packages/ui/src/tabs/tab-list.tsx
@@ -44,7 +44,7 @@ function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selec
     <Tab.List
       as="div"
       className={cn(
-        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1",
+        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md bg-layer-1 p-0.5 text-13",
         tabListClassName
       )}
     >
@@ -52,12 +52,12 @@ function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selec
         <Tab
           className={({ selected }) =>
             cn(
-              "flex items-center justify-center p-1 min-w-fit w-full font-medium text-primary outline-none focus:outline-none cursor-pointer transition-all rounded-sm",
+              "flex w-full min-w-fit cursor-pointer items-center justify-center rounded-sm p-1 font-medium text-primary transition-all outline-none focus:outline-none",
               (selectedTab ? selectedTab === tab.key : selected)
-                ? "bg-layer-transparent-active text-primary shadow-sm"
+                ? "shadow-sm bg-layer-transparent-active text-primary"
                 : tab.disabled
-                  ? "text-placeholder cursor-not-allowed"
-                  : "text-placeholder hover:text-tertiary hover:bg-layer-transparent-hover",
+                  ? "cursor-not-allowed text-placeholder"
+                  : "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
               {
                 "text-11": size === "sm",
                 "text-13": size === "md",
diff --git a/packages/ui/src/tabs/tabs.tsx b/packages/ui/src/tabs/tabs.tsx
index 56eccaa07f1..009f022830e 100644
--- a/packages/ui/src/tabs/tabs.tsx
+++ b/packages/ui/src/tabs/tabs.tsx
@@ -69,9 +69,9 @@ export function Tabs(props: TTabsProps) {
   };
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex h-full w-full flex-col">
       <Tab.Group defaultIndex={currentTabIndex(selectedTab)}>
-        <div className={cn("flex flex-col w-full h-full gap-2", containerClassName)}>
+        <div className={cn("flex h-full w-full flex-col gap-2", containerClassName)}>
           <div className={cn("flex w-full items-center gap-4", tabListContainerClassName)}>
             <TabList
               tabs={tabs}
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
index a758d5e43ff..19a74e7bf29 100644
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -75,7 +75,7 @@ export function Tooltip({
 
   if (!shouldRender) {
     return (
-      <div ref={toolTipRef} className="h-full flex items-center">
+      <div ref={toolTipRef} className="flex h-full items-center">
         {children}
       </div>
     );
@@ -89,7 +89,7 @@ export function Tooltip({
       content={
         <div
           className={cn(
-            "relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-surface-1 p-2 text-11 text-secondary shadow-md",
+            "shadow-md relative z-50 block max-w-xs gap-1 overflow-hidden rounded-md bg-surface-1 p-2 text-11 break-words text-secondary",
             {
               hidden: isMobile,
             },
diff --git a/packages/ui/src/typography/sub-heading.tsx b/packages/ui/src/typography/sub-heading.tsx
index 478319ed202..2f41b3d7760 100644
--- a/packages/ui/src/typography/sub-heading.tsx
+++ b/packages/ui/src/typography/sub-heading.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 function SubHeading({ children, className, noMargin }: Props) {
   return (
-    <h3 className={cn("text-18 font-medium text-secondary block leading-7", !noMargin && "mb-2", className)}>
+    <h3 className={cn("block text-18 leading-7 font-medium text-secondary", !noMargin && "mb-2", className)}>
       {children}
     </h3>
   );
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 7b1c656e97d..1b232c21f59 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,10 +1,13 @@
 {
   "name": "@plane/utils",
   "version": "1.2.0",
+  "private": true,
   "description": "Helper functions shared across multiple apps internally",
   "license": "AGPL-3.0",
-  "private": true,
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,9 +20,9 @@
     "dev": "tsdown --watch",
     "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1062",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier . --cache --check",
+    "check:format": "oxfmt --check .",
     "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1062",
-    "fix:format": "prettier . --cache --write",
+    "fix:format": "oxfmt .",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -54,8 +57,5 @@
     "@types/sanitize-html": "2.16.0",
     "tsdown": "catalog:",
     "typescript": "catalog:"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c67cf3e380f..db725cd218a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,9 +123,6 @@ importers:
       '@eslint/js':
         specifier: 9.39.1
         version: 9.39.1
-      '@prettier/plugin-oxc':
-        specifier: 0.1.3
-        version: 0.1.3
       '@vitest/eslint-plugin':
         specifier: 1.5.1
         version: 1.5.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)(vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.12.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
@@ -177,9 +174,9 @@ importers:
       lint-staged:
         specifier: 16.2.7
         version: 16.2.7
-      prettier:
-        specifier: 3.7.4
-        version: 3.7.4
+      oxfmt:
+        specifier: 0.35.0
+        version: 0.35.0
       turbo:
         specifier: 2.6.3
         version: 2.6.3
@@ -2823,100 +2820,122 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
 
-  '@oxc-parser/binding-android-arm64@0.99.0':
-    resolution: {integrity: sha512-V4jhmKXgQQdRnm73F+r3ZY4pUEsijQeSraFeaCGng7abSNJGs76X6l82wHnmjLGFAeY00LWtjcELs7ZmbJ9+lA==}
+  '@oxc-project/types@0.96.0':
+    resolution: {integrity: sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==}
+
+  '@oxfmt/binding-android-arm-eabi@0.35.0':
+    resolution: {integrity: sha512-BaRKlM3DyG81y/xWTsE6gZiv89F/3pHe2BqX2H4JbiB8HNVlWWtplzgATAE5IDSdwChdeuWLDTQzJ92Lglw3ZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxfmt/binding-android-arm64@0.35.0':
+    resolution: {integrity: sha512-/O+EbuAJYs6nde/anv+aID6uHsGQApyE9JtYBo/79KyU8e6RBN3DMbT0ix97y1SOnCglurmL2iZ+hlohjP2PnQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-parser/binding-darwin-arm64@0.99.0':
-    resolution: {integrity: sha512-Rp41nf9zD5FyLZciS9l1GfK8PhYqrD5kEGxyTOA2esTLeAy37rZxetG2E3xteEolAkeb2WDkVrlxPtibeAncMg==}
+  '@oxfmt/binding-darwin-arm64@0.35.0':
+    resolution: {integrity: sha512-pGqRtqlNdn9d4VrmGUWVyQjkw79ryhI6je9y2jfqNUIZCfqceob+R97YYAoG7C5TFyt8ILdLVoN+L2vw/hSFyA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-parser/binding-darwin-x64@0.99.0':
-    resolution: {integrity: sha512-WVonp40fPPxo5Gs0POTI57iEFv485TvNKOHMwZRhigwZRhZY2accEAkYIhei9eswF4HN5B44Wybkz7Gd1Qr/5Q==}
+  '@oxfmt/binding-darwin-x64@0.35.0':
+    resolution: {integrity: sha512-8GmsDcSozTPjrCJeGpp+sCmS9+9V5yRrdEZ1p/sTWxPG5nYeAfSLuS0nuEYjXSO+CtdSbStIW6dxa+4NM58yRw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-parser/binding-freebsd-x64@0.99.0':
-    resolution: {integrity: sha512-H30bjOOttPmG54gAqu6+HzbLEzuNOYO2jZYrIq4At+NtLJwvNhXz28Hf5iEAFZIH/4hMpLkM4VN7uc+5UlNW3Q==}
+  '@oxfmt/binding-freebsd-x64@0.35.0':
+    resolution: {integrity: sha512-QyfKfTe0ytHpFKHAcHCGQEzN45QSqq1AHJOYYxQMgLM3KY4xu8OsXHpCnINjDsV4XGnQzczJDU9e04Zmd8XqIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.99.0':
-    resolution: {integrity: sha512-0Z/Th0SYqzSRDPs6tk5lQdW0i73UCupnim3dgq2oW0//UdLonV/5wIZCArfKGC7w9y4h8TxgXpgtIyD1kKzzlQ==}
+  '@oxfmt/binding-linux-arm-gnueabihf@0.35.0':
+    resolution: {integrity: sha512-u+kv3JD6P3J38oOyUaiCqgY5TNESzBRZJ5lyZQ6c2czUW2v5SIN9E/KWWa9vxoc+P8AFXQFUVrdzGy1tK+nbPQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.99.0':
-    resolution: {integrity: sha512-xo0wqNd5bpbzQVNpAIFbHk1xa+SaS/FGBABCd942SRTnrpxl6GeDj/s1BFaGcTl8MlwlKVMwOcyKrw/2Kdfquw==}
+  '@oxfmt/binding-linux-arm-musleabihf@0.35.0':
+    resolution: {integrity: sha512-1NiZroCiV57I7Pf8kOH4XGR366kW5zir3VfSMBU2D0V14GpYjiYmPYFAoJboZvp8ACnZKUReWyMkNKSa5ad58A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.99.0':
-    resolution: {integrity: sha512-u26I6LKoLTPTd4Fcpr0aoAtjnGf5/ulMllo+QUiBhupgbVCAlaj4RyXH/mvcjcsl2bVBv9E/gYJZz2JjxQWXBA==}
+  '@oxfmt/binding-linux-arm64-gnu@0.35.0':
+    resolution: {integrity: sha512-7Q0Xeg7ZnW2nxnZ4R7aF6DEbCFls4skgHZg+I63XitpNvJCbVIU8MFOTZlvZGRsY9+rPgWPQGeUpLHlyx0wvMA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-musl@0.99.0':
-    resolution: {integrity: sha512-qhftDo2D37SqCEl3ZTa367NqWSZNb1Ddp34CTmShLKFrnKdNiUn55RdokLnHtf1AL5ssaQlYDwBECX7XiBWOhw==}
+  '@oxfmt/binding-linux-arm64-musl@0.35.0':
+    resolution: {integrity: sha512-5Okqi+uhYFxwKz8hcnUftNNwdm8BCkf6GSCbcz9xJxYMm87k1E4p7PEmAAbhLTk7cjSdDre6TDL0pDzNX+Y22Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.99.0':
-    resolution: {integrity: sha512-zxn/xkf519f12FKkpL5XwJipsylfSSnm36h6c1zBDTz4fbIDMGyIhHfWfwM7uUmHo9Aqw1pLxFpY39Etv398+Q==}
+  '@oxfmt/binding-linux-ppc64-gnu@0.35.0':
+    resolution: {integrity: sha512-9k66pbZQXM/lBJWys3Xbc5yhl4JexyfqkEf/tvtq8976VIJnLAAL3M127xHA3ifYSqxdVHfVGTg84eiBHCGcNw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.35.0':
+    resolution: {integrity: sha512-aUcY9ofKPtjO52idT6t0SAQvEF6ctjzUQa1lLp7GDsRpSBvuTrBQGeq0rYKz3gN8dMIQ7mtMdGD9tT4LhR8jAQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.99.0':
-    resolution: {integrity: sha512-Y1eSDKDS5E4IVC7Oxw+NbYAKRmJPMJTIjW+9xOWwteDHkFqpocKe0USxog+Q1uhzalD9M0p9eXWEWdGQCMDBMQ==}
+  '@oxfmt/binding-linux-riscv64-musl@0.35.0':
+    resolution: {integrity: sha512-C6yhY5Hvc2sGM+mCPek9ZLe5xRUOC/BvhAt2qIWFAeXMn4il04EYIjl3DsWiJr0xDMTJhvMOmD55xTRPlNp39w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxfmt/binding-linux-s390x-gnu@0.35.0':
+    resolution: {integrity: sha512-RG2hlvOMK4OMZpO3mt8MpxLQ0AAezlFqhn5mI/g5YrVbPFyoCv9a34AAvbSJS501ocOxlFIRcKEuw5hFvddf9g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
 
-  '@oxc-parser/binding-linux-x64-gnu@0.99.0':
-    resolution: {integrity: sha512-YVJMfk5cFWB8i2/nIrbk6n15bFkMHqWnMIWkVx7r2KwpTxHyFMfu2IpeVKo1ITDSmt5nBrGdLHD36QRlu2nDLg==}
+  '@oxfmt/binding-linux-x64-gnu@0.35.0':
+    resolution: {integrity: sha512-wzmh90Pwvqj9xOKHJjkQYBpydRkaXG77ZvDz+iFDRRQpnqIEqGm5gmim2s6vnZIkDGsvKCuTdtxm0GFmBjM1+w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@oxc-parser/binding-linux-x64-musl@0.99.0':
-    resolution: {integrity: sha512-2+SDPrie5f90A1b9EirtVggOgsqtsYU5raZwkDYKyS1uvJzjqHCDhG/f4TwQxHmIc5YkczdQfwvN91lwmjsKYQ==}
+  '@oxfmt/binding-linux-x64-musl@0.35.0':
+    resolution: {integrity: sha512-+HCqYCJPCUy5I+b2cf+gUVaApfgtoQT3HdnSg/l7NIcLHOhKstlYaGyrFZLmUpQt4WkFbpGKZZayG6zjRU0KFA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@oxc-parser/binding-wasm32-wasi@0.99.0':
-    resolution: {integrity: sha512-DKA4j0QerUWSMADziLM5sAyM7V53Fj95CV9SjP77bPfEfT7MnvFKnneaRMqPK1cpzjAGiQF52OBUIKyk0dwOQA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
+  '@oxfmt/binding-openharmony-arm64@0.35.0':
+    resolution: {integrity: sha512-kFYmWfR9YL78XyO5ws+1dsxNvZoD973qfVMNFOS4e9bcHXGF7DvGC2tY5UDFwyMCeB33t3sDIuGONKggnVNSJA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.99.0':
-    resolution: {integrity: sha512-EaB3AvsxqdNUhh9FOoAxRZ2L4PCRwDlDb//QXItwyOJrX7XS+uGK9B1KEUV4FZ/7rDhHsWieLt5e07wl2Ti5AQ==}
+  '@oxfmt/binding-win32-arm64-msvc@0.35.0':
+    resolution: {integrity: sha512-uD/NGdM65eKNCDGyTGdO8e9n3IHX+wwuorBvEYrPJXhDXL9qz6gzddmXH8EN04ejUXUujlq4FsoSeCfbg0Y+Jg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-parser/binding-win32-x64-msvc@0.99.0':
-    resolution: {integrity: sha512-sJN1Q8h7ggFOyDn0zsHaXbP/MklAVUvhrbq0LA46Qum686P3SZQHjbATqJn9yaVEvaSKXCshgl0vQ1gWkGgpcQ==}
+  '@oxfmt/binding-win32-ia32-msvc@0.35.0':
+    resolution: {integrity: sha512-oSRD2k8J2uxYDEKR2nAE/YTY9PobOEnhZgCmspHu0+yBQ665yH8lFErQVSTE7fcGJmJp/cC6322/gc8VFuQf7g==}
     engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
+    cpu: [ia32]
     os: [win32]
 
-  '@oxc-project/types@0.96.0':
-    resolution: {integrity: sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==}
-
-  '@oxc-project/types@0.99.0':
-    resolution: {integrity: sha512-LLDEhXB7g1m5J+woRSgfKsFPS3LhR9xRhTeIoEBm5WrkwMxn6eZ0Ld0c0K5eHB57ChZX6I3uSmmLjZ8pcjlRcw==}
+  '@oxfmt/binding-win32-x64-msvc@0.35.0':
+    resolution: {integrity: sha512-WCDJjlS95NboR0ugI2BEwzt1tYvRDorDRM9Lvctls1SLyKYuNRCyrPwp1urUPFBnwgBNn9p2/gnmo7gFMySRoQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
 
   '@parcel/watcher-android-arm64@2.5.4':
     resolution: {integrity: sha512-hoh0vx4v+b3BNI7Cjoy2/B0ARqcwVNrzN/n7DLq9ZB4I3lrsvhrkCViJyfTj/Qi5xM9YFiH4AmHGK6pgH1ss7g==}
@@ -3003,10 +3022,6 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
-  '@prettier/plugin-oxc@0.1.3':
-    resolution: {integrity: sha512-aABz3zIRilpWMekbt1FL1JVBQrQLR8L4Td2SRctECrWSsXGTNn/G1BqNSKCdbvQS1LWstAXfqcXzDki7GAAJyg==}
-    engines: {node: '>=14'}
-
   '@prisma/instrumentation@6.19.0':
     resolution: {integrity: sha512-QcuYy25pkXM8BJ37wVFBO7Zh34nyRV1GOb2n3lPkkbRYfl4hWl3PTcImP41P0KrzVXfa/45p6eVCos27x3exIg==}
     peerDependencies:
@@ -7986,9 +8001,10 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  oxc-parser@0.99.0:
-    resolution: {integrity: sha512-MpS1lbd2vR0NZn1v0drpgu7RUFu3x9Rd0kxExObZc2+F+DIrV0BOMval/RO3BYGwssIOerII6iS8EbbpCCZQpQ==}
+  oxfmt@0.35.0:
+    resolution: {integrity: sha512-QYeXWkP+aLt7utt5SLivNIk09glWx9QE235ODjgcEZ3sd1VMaUBSpLymh6ZRCA76gD2rMP4bXanUz/fx+nLM9Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
 
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
@@ -9226,6 +9242,10 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinypool@2.1.0:
+    resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
   tinyrainbow@1.2.0:
     resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
     engines: {node: '>=14.0.0'}
@@ -11430,56 +11450,64 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
 
-  '@oxc-parser/binding-android-arm64@0.99.0':
+  '@oxc-project/types@0.96.0': {}
+
+  '@oxfmt/binding-android-arm-eabi@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-arm64@0.99.0':
+  '@oxfmt/binding-android-arm64@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-x64@0.99.0':
+  '@oxfmt/binding-darwin-arm64@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-freebsd-x64@0.99.0':
+  '@oxfmt/binding-darwin-x64@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.99.0':
+  '@oxfmt/binding-freebsd-x64@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.99.0':
+  '@oxfmt/binding-linux-arm-gnueabihf@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.99.0':
+  '@oxfmt/binding-linux-arm-musleabihf@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-musl@0.99.0':
+  '@oxfmt/binding-linux-arm64-gnu@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.99.0':
+  '@oxfmt/binding-linux-arm64-musl@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.99.0':
+  '@oxfmt/binding-linux-ppc64-gnu@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-gnu@0.99.0':
+  '@oxfmt/binding-linux-riscv64-gnu@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-musl@0.99.0':
+  '@oxfmt/binding-linux-riscv64-musl@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.99.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.1.0
+  '@oxfmt/binding-linux-s390x-gnu@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.99.0':
+  '@oxfmt/binding-linux-x64-gnu@0.35.0':
     optional: true
 
-  '@oxc-parser/binding-win32-x64-msvc@0.99.0':
+  '@oxfmt/binding-linux-x64-musl@0.35.0':
     optional: true
 
-  '@oxc-project/types@0.96.0': {}
+  '@oxfmt/binding-openharmony-arm64@0.35.0':
+    optional: true
 
-  '@oxc-project/types@0.99.0': {}
+  '@oxfmt/binding-win32-arm64-msvc@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-win32-ia32-msvc@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-win32-x64-msvc@0.35.0':
+    optional: true
 
   '@parcel/watcher-android-arm64@2.5.4':
     optional: true
@@ -11543,10 +11571,6 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
-  '@prettier/plugin-oxc@0.1.3':
-    dependencies:
-      oxc-parser: 0.99.0
-
   '@prisma/instrumentation@6.19.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
@@ -17396,25 +17420,29 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  oxc-parser@0.99.0:
+  oxfmt@0.35.0:
     dependencies:
-      '@oxc-project/types': 0.99.0
+      tinypool: 2.1.0
     optionalDependencies:
-      '@oxc-parser/binding-android-arm64': 0.99.0
-      '@oxc-parser/binding-darwin-arm64': 0.99.0
-      '@oxc-parser/binding-darwin-x64': 0.99.0
-      '@oxc-parser/binding-freebsd-x64': 0.99.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.99.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.99.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.99.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.99.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-x64-musl': 0.99.0
-      '@oxc-parser/binding-wasm32-wasi': 0.99.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.99.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.99.0
+      '@oxfmt/binding-android-arm-eabi': 0.35.0
+      '@oxfmt/binding-android-arm64': 0.35.0
+      '@oxfmt/binding-darwin-arm64': 0.35.0
+      '@oxfmt/binding-darwin-x64': 0.35.0
+      '@oxfmt/binding-freebsd-x64': 0.35.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.35.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.35.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.35.0
+      '@oxfmt/binding-linux-arm64-musl': 0.35.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.35.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.35.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.35.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.35.0
+      '@oxfmt/binding-linux-x64-gnu': 0.35.0
+      '@oxfmt/binding-linux-x64-musl': 0.35.0
+      '@oxfmt/binding-openharmony-arm64': 0.35.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.35.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.35.0
+      '@oxfmt/binding-win32-x64-msvc': 0.35.0
 
   p-limit@2.3.0:
     dependencies:
@@ -18883,6 +18911,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinypool@2.1.0: {}
+
   tinyrainbow@1.2.0: {}
 
   tinyrainbow@2.0.0: {}
diff --git a/turbo.json b/turbo.json
index 5d1c227553b..fc9f3f64024 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://turborepo.com/schema.json",
-  "globalDependencies": [".npmrc", ".prettierrc", "eslint.config.mjs"],
+  "globalDependencies": [".npmrc", ".oxfmtrc.json", "eslint.config.mjs"],
   "globalEnv": [
     "APP_VERSION",
     "DEV",
@@ -50,7 +50,7 @@
     },
     "check:format": {
       "inputs": ["$TURBO_DEFAULT$"],
-      "outputs": ["node_modules/.cache/prettier/**"]
+      "outputs": []
     },
     "check:lint": {
       "dependsOn": ["^build"],
@@ -76,7 +76,7 @@
     },
     "fix:format": {
       "inputs": ["$TURBO_DEFAULT$"],
-      "outputs": ["node_modules/.cache/prettier/**"]
+      "outputs": []
     },
     "fix:lint": {
       "dependsOn": ["^build"],