diff --git a/.prettierignore b/.prettierignore
index b43d9013d..d39eaad34 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,7 +7,6 @@ __generated__/
 /.husky/_/
 /.turbo/
 /integration-tests/testkit/gql/
-/packages/services/storage/src/db/types.ts
 /packages/libraries/cli/src/sdk.ts
 /packages/libraries/cli/src/gql/
 /packages/web/app/src/gql/**
diff --git a/deployment/utils/observability.ts b/deployment/utils/observability.ts
index 294c459fc..5ef5f7379 100644
--- a/deployment/utils/observability.ts
+++ b/deployment/utils/observability.ts
@@ -15,7 +15,10 @@ export type ObservabilityConfig = {
   };
 };
 export class Observability {
-  constructor(private envName: string, private config: ObservabilityConfig) {}
+  constructor(
+    private envName: string,
+    private config: ObservabilityConfig,
+  ) {}
 
   deploy() {
     const ns = new k8s.core.v1.Namespace('observability', {
diff --git a/integration-tests/tests/api/schema/check.spec.ts b/integration-tests/tests/api/schema/check.spec.ts
index 4e317db07..91f7c0c86 100644
--- a/integration-tests/tests/api/schema/check.spec.ts
+++ b/integration-tests/tests/api/schema/check.spec.ts
@@ -43,28 +43,24 @@ test.concurrent('can check a schema with target:registry:read access', async ()
 
   // Check schema with no read and write rights
   const checkResultErrors = await noAccessToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: String
-          foo: String
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: String
+        foo: String
+      }
+    `)
     .then(r => r.expectGraphQLErrors());
   expect(checkResultErrors).toHaveLength(1);
   expect(checkResultErrors[0].message).toMatch('target:registry:read');
 
   // Check schema with read rights
   const checkResultValid = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: String
-          foo: String
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: String
+        foo: String
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   expect(checkResultValid.schemaCheck.__typename).toBe('SchemaCheckSuccess');
 });
@@ -107,18 +103,16 @@ test.concurrent('should match indentation of previous description', async () =>
 
   // Check schema with read rights
   const checkResult = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          """
-          ping-ping
-          """
-          ping: String
-          " pong-pong "
-          pong: String
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        """
+        ping-ping
+        """
+        ping: String
+        " pong-pong "
+        pong: String
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   const check = checkResult.schemaCheck;
 
@@ -272,14 +266,12 @@ test.concurrent('successful check without previously published schema is persist
 
   // Check schema with read rights
   const checkResult = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: String
-          pong: String
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: String
+        pong: String
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   const check = checkResult.schemaCheck;
 
@@ -358,14 +350,12 @@ test.concurrent('successful check with previously published schema is persisted'
 
   // Check schema with read rights
   const checkResult = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: String
-          pong: String
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: String
+        pong: String
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   const check = checkResult.schemaCheck;
 
@@ -421,13 +411,11 @@ test.concurrent('failed check due to graphql validation is persisted', async ()
 
   // Check schema with read rights
   const checkResult = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: Str
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: Str
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   const check = checkResult.schemaCheck;
 
@@ -512,13 +500,11 @@ test.concurrent('failed check due to breaking change is persisted', async () =>
 
   // Check schema with read rights
   const checkResult = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: Float
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: Float
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   const check = checkResult.schemaCheck;
 
@@ -610,14 +596,12 @@ test.concurrent('failed check due to policy error is persisted', async () => {
 
   // Check schema with read rights
   const checkResult = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: String
-          foo: String
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: String
+        foo: String
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   const check = checkResult.schemaCheck;
 
@@ -661,13 +645,13 @@ test.concurrent('failed check due to policy error is persisted', async () => {
             {
               node: {
                 end: {
-                  column: 19,
+                  column: 17,
                   line: 2,
                 },
                 message: 'Description is required for type "Query"',
                 ruleId: 'require-description',
                 start: {
-                  column: 14,
+                  column: 12,
                   line: 2,
                 },
               },
@@ -721,14 +705,12 @@ test.concurrent('successful check with warnings and safe changes is persisted',
 
   // Check schema with read rights
   const checkResult = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: String
-          foo: String
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: String
+        foo: String
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   const check = checkResult.schemaCheck;
 
@@ -770,13 +752,13 @@ test.concurrent('successful check with warnings and safe changes is persisted',
             {
               node: {
                 end: {
-                  column: 19,
+                  column: 17,
                   line: 2,
                 },
                 message: 'Description is required for type "Query"',
                 ruleId: 'require-description',
                 start: {
-                  column: 14,
+                  column: 12,
                   line: 2,
                 },
               },
@@ -810,14 +792,12 @@ test.concurrent(
 
     // Check schema with read rights
     const checkResult = await readToken
-      .checkSchema(
-        /* GraphQL */ `
-          type Query {
-            ping: String
-            foo: String
-          }
-        `,
-      )
+      .checkSchema(/* GraphQL */ `
+        type Query {
+          ping: String
+          foo: String
+        }
+      `)
       .then(r => r.expectNoGraphQLErrors());
     const check = checkResult.schemaCheck;
 
@@ -937,13 +917,11 @@ test('approve failed schema check that has breaking changes succeeds', async ()
 
   // Check schema with read rights
   const checkResult = await readToken
-    .checkSchema(
-      /* GraphQL */ `
-        type Query {
-          ping: Float
-        }
-      `,
-    )
+    .checkSchema(/* GraphQL */ `
+      type Query {
+        ping: Float
+      }
+    `)
     .then(r => r.expectNoGraphQLErrors());
   const check = checkResult.schemaCheck;
 
diff --git a/package.json b/package.json
index 04a8ce3ab..401bc23c0 100644
--- a/package.json
+++ b/package.json
@@ -68,8 +68,8 @@
     "@next/eslint-plugin-next": "13.5.6",
     "@sentry/cli": "2.21.2",
     "@swc/core": "1.3.96",
-    "@theguild/eslint-config": "0.11.0",
-    "@theguild/prettier-config": "1.2.0",
+    "@theguild/eslint-config": "0.11.1",
+    "@theguild/prettier-config": "2.0.2",
     "@types/node": "18.18.8",
     "bob-the-bundler": "7.0.1",
     "cypress": "13.4.0",
@@ -84,9 +84,9 @@
     "jest-snapshot-serializer-raw": "2.0.0",
     "lint-staged": "15.0.2",
     "pg": "8.11.3",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "prettier-plugin-sql": "0.15.1",
-    "prettier-plugin-tailwindcss": "0.4.1",
+    "prettier-plugin-tailwindcss": "0.5.6",
     "pretty-quick": "3.1.3",
     "rimraf": "4.4.1",
     "ts-node": "10.9.1",
diff --git a/packages/libraries/cli/src/commands/introspect.ts b/packages/libraries/cli/src/commands/introspect.ts
index 6f7c7f7e6..0aa4a30f5 100644
--- a/packages/libraries/cli/src/commands/introspect.ts
+++ b/packages/libraries/cli/src/commands/introspect.ts
@@ -30,14 +30,17 @@ export default class Introspect extends Command {
 
   async run() {
     const { flags, args } = await this.parse(Introspect);
-    const headers = flags.header?.reduce((acc, header) => {
-      const [key, ...values] = header.split(':');
+    const headers = flags.header?.reduce(
+      (acc, header) => {
+        const [key, ...values] = header.split(':');
 
-      return {
-        ...acc,
-        [key]: values.join(':'),
-      };
-    }, {} as Record<string, string>);
+        return {
+          ...acc,
+          [key]: values.join(':'),
+        };
+      },
+      {} as Record<string, string>,
+    );
 
     const schema = await loadSchema(args.location, {
       headers,
diff --git a/packages/libraries/cli/src/helpers/operations.ts b/packages/libraries/cli/src/helpers/operations.ts
index b050b375b..cd221dd74 100644
--- a/packages/libraries/cli/src/helpers/operations.ts
+++ b/packages/libraries/cli/src/helpers/operations.ts
@@ -10,11 +10,10 @@ export async function loadOperations(
   file: string,
   options?: {
     normalize?: boolean;
-    pluckModules?:
-      | {
-          name: string;
-          identifier?: string;
-        }[];
+    pluckModules?: {
+      name: string;
+      identifier?: string;
+    }[];
     pluckGlobalGqlIdentifierName?: string[];
   },
 ): Promise<
diff --git a/packages/services/api/src/context.ts b/packages/services/api/src/context.ts
index 31daefc67..8334fe72b 100644
--- a/packages/services/api/src/context.ts
+++ b/packages/services/api/src/context.ts
@@ -8,7 +8,6 @@ export interface RegistryContext {
 
 declare global {
   namespace GraphQLModules {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
     interface GlobalContext extends RegistryContext {}
   }
 }
diff --git a/packages/services/api/src/modules/activity/providers/activity-manager.ts b/packages/services/api/src/modules/activity/providers/activity-manager.ts
index d1bd017e3..e9b043a79 100644
--- a/packages/services/api/src/modules/activity/providers/activity-manager.ts
+++ b/packages/services/api/src/modules/activity/providers/activity-manager.ts
@@ -23,7 +23,11 @@ interface PaginationSelector {
 export class ActivityManager {
   private logger: Logger;
 
-  constructor(logger: Logger, private authManager: AuthManager, private storage: Storage) {
+  constructor(
+    logger: Logger,
+    private authManager: AuthManager,
+    private storage: Storage,
+  ) {
     this.logger = logger.child({
       source: 'ActivityManager',
     });
diff --git a/packages/services/api/src/modules/alerts/providers/adapters/slack.ts b/packages/services/api/src/modules/alerts/providers/adapters/slack.ts
index 0ab0d68c0..5d7c902b5 100644
--- a/packages/services/api/src/modules/alerts/providers/adapters/slack.ts
+++ b/packages/services/api/src/modules/alerts/providers/adapters/slack.ts
@@ -15,7 +15,10 @@ import {
 export class SlackCommunicationAdapter implements CommunicationAdapter {
   private logger: Logger;
 
-  constructor(logger: Logger, @Inject(WEB_APP_URL) private appBaseUrl: string) {
+  constructor(
+    logger: Logger,
+    @Inject(WEB_APP_URL) private appBaseUrl: string,
+  ) {
     this.logger = logger.child({ service: 'SlackCommunicationAdapter' });
   }
 
diff --git a/packages/services/api/src/modules/auth/providers/project-access.ts b/packages/services/api/src/modules/auth/providers/project-access.ts
index 1b4d6189f..29be851e4 100644
--- a/packages/services/api/src/modules/auth/providers/project-access.ts
+++ b/packages/services/api/src/modules/auth/providers/project-access.ts
@@ -41,7 +41,10 @@ export class ProjectAccess {
   private tokenAccess: Dataloader<ProjectTokenAccessSelector, boolean, string>;
   private scopes: Dataloader<ProjectUserScopesSelector, readonly ProjectAccessScope[], string>;
 
-  constructor(logger: Logger, private organizationAccess: OrganizationAccess) {
+  constructor(
+    logger: Logger,
+    private organizationAccess: OrganizationAccess,
+  ) {
     this.logger = logger.child({
       source: 'ProjectAccess',
     });
diff --git a/packages/services/api/src/modules/auth/providers/target-access.ts b/packages/services/api/src/modules/auth/providers/target-access.ts
index d13c9c188..e2d9e0dbf 100644
--- a/packages/services/api/src/modules/auth/providers/target-access.ts
+++ b/packages/services/api/src/modules/auth/providers/target-access.ts
@@ -43,7 +43,10 @@ export class TargetAccess {
   private tokenAccess: Dataloader<TargetTokenAccessSelector, boolean, string>;
   private scopes: Dataloader<TargetUserScopesSelector, readonly TargetAccessScope[], string>;
 
-  constructor(logger: Logger, private organizationAccess: OrganizationAccess) {
+  constructor(
+    logger: Logger,
+    private organizationAccess: OrganizationAccess,
+  ) {
     this.logger = logger.child({
       source: 'TargetAccess',
     });
diff --git a/packages/services/api/src/modules/auth/providers/user-manager.ts b/packages/services/api/src/modules/auth/providers/user-manager.ts
index bd53e1f46..00f61d2ea 100644
--- a/packages/services/api/src/modules/auth/providers/user-manager.ts
+++ b/packages/services/api/src/modules/auth/providers/user-manager.ts
@@ -22,7 +22,10 @@ export const fullNameLengthBoundaries = {
 export class UserManager {
   private logger: Logger;
 
-  constructor(logger: Logger, private storage: Storage) {
+  constructor(
+    logger: Logger,
+    private storage: Storage,
+  ) {
     this.logger = logger.child({
       source: 'UserManager',
     });
diff --git a/packages/services/api/src/modules/collection/providers/collection.provider.ts b/packages/services/api/src/modules/collection/providers/collection.provider.ts
index e6fbc1570..43942c205 100644
--- a/packages/services/api/src/modules/collection/providers/collection.provider.ts
+++ b/packages/services/api/src/modules/collection/providers/collection.provider.ts
@@ -11,7 +11,11 @@ import type { CollectionModule } from './../__generated__/types';
 export class CollectionProvider {
   private logger: Logger;
 
-  constructor(logger: Logger, private storage: Storage, private authManager: AuthManager) {
+  constructor(
+    logger: Logger,
+    private storage: Storage,
+    private authManager: AuthManager,
+  ) {
     this.logger = logger.child({ source: 'CollectionProvider' });
   }
 
diff --git a/packages/services/api/src/modules/operations/providers/operations-reader.ts b/packages/services/api/src/modules/operations/providers/operations-reader.ts
index 27b602ad1..076011d45 100644
--- a/packages/services/api/src/modules/operations/providers/operations-reader.ts
+++ b/packages/services/api/src/modules/operations/providers/operations-reader.ts
@@ -65,7 +65,10 @@ function ensureNumber(value: number | string): number {
   global: true,
 })
 export class OperationsReader {
-  constructor(private clickHouse: ClickHouse, private logger: Logger) {}
+  constructor(
+    private clickHouse: ClickHouse,
+    private logger: Logger,
+  ) {}
 
   private pickQueryByPeriod(
     queryMap: {
diff --git a/packages/services/api/src/modules/schema/resolvers.ts b/packages/services/api/src/modules/schema/resolvers.ts
index 81fb449bb..5c530724b 100644
--- a/packages/services/api/src/modules/schema/resolvers.ts
+++ b/packages/services/api/src/modules/schema/resolvers.ts
@@ -1735,7 +1735,7 @@ export const resolvers: SchemaModule.Resolvers = {
           organization: usage.organization,
           project: usage.project,
           target: usage.target,
-        } as const);
+        }) as const;
 
       for (const typeDefinition of sdl.definitions) {
         if (typeDefinition.kind === Kind.OBJECT_TYPE_DEFINITION) {
diff --git a/packages/services/api/src/modules/shared/lib/task-runner.ts b/packages/services/api/src/modules/shared/lib/task-runner.ts
index b2e189189..996a6be5a 100644
--- a/packages/services/api/src/modules/shared/lib/task-runner.ts
+++ b/packages/services/api/src/modules/shared/lib/task-runner.ts
@@ -19,7 +19,7 @@ export const createTaskRunner = (args: {
       logger: args.logger,
       name: 'schema-purge',
     });
-    task.done.finally(() => {
+    void task.done.finally(() => {
       if (!isStopped) {
         loop();
       }
diff --git a/packages/services/api/src/modules/shared/providers/distributed-cache.ts b/packages/services/api/src/modules/shared/providers/distributed-cache.ts
index d429abac9..c90193894 100644
--- a/packages/services/api/src/modules/shared/providers/distributed-cache.ts
+++ b/packages/services/api/src/modules/shared/providers/distributed-cache.ts
@@ -9,7 +9,10 @@ import { REDIS_INSTANCE } from '../../shared/providers/redis';
 })
 export class DistributedCache {
   private logger: Logger;
-  constructor(logger: Logger, @Inject(REDIS_INSTANCE) private redis: Redis) {
+  constructor(
+    logger: Logger,
+    @Inject(REDIS_INSTANCE) private redis: Redis,
+  ) {
     this.logger = logger.child({ service: 'DistributedCache' });
   }
 
diff --git a/packages/services/api/src/modules/shared/providers/id-translator.ts b/packages/services/api/src/modules/shared/providers/id-translator.ts
index d5d94aa48..85ce156a2 100644
--- a/packages/services/api/src/modules/shared/providers/id-translator.ts
+++ b/packages/services/api/src/modules/shared/providers/id-translator.ts
@@ -9,7 +9,10 @@ import { Storage } from './storage';
 })
 export class IdTranslator {
   private logger: Logger;
-  constructor(private storage: Storage, logger: Logger) {
+  constructor(
+    private storage: Storage,
+    logger: Logger,
+  ) {
     this.logger = logger.child({ service: 'IdTranslator' });
   }
 
diff --git a/packages/services/api/src/modules/shared/providers/storage.ts b/packages/services/api/src/modules/shared/providers/storage.ts
index 83e9dd557..7698b4d47 100644
--- a/packages/services/api/src/modules/shared/providers/storage.ts
+++ b/packages/services/api/src/modules/shared/providers/storage.ts
@@ -59,6 +59,7 @@ export interface TargetSelector extends ProjectSelector {
   target: string;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export interface Storage {
   destroy(): Promise<void>;
   isReady(): Promise<boolean>;
@@ -744,4 +745,5 @@ export interface Storage {
 }
 
 @Injectable()
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export class Storage implements Storage {}
diff --git a/packages/services/rate-limit/src/emails.ts b/packages/services/rate-limit/src/emails.ts
index 48bc2761c..545989b58 100644
--- a/packages/services/rate-limit/src/emails.ts
+++ b/packages/services/rate-limit/src/emails.ts
@@ -68,15 +68,15 @@ export function createEmailScheduler(config?: { endpoint: string }) {
                       input.organization.name
                     }</strong> has reached over 100% of the operations limit quota.
                     Used ${numberFormatter.format(input.usage.current)} of ${numberFormatter.format(
-            input.usage.quota,
-          )}.
+                      input.usage.quota,
+                    )}.
                   </mj-text>.
                   <mj-text>
                     We recommend to increase the limit.
                   </mj-text>
                   <mj-button href="${env.hiveServices.webAppUrl}/${
-            input.organization.cleanId
-          }/view/subscription">
+                    input.organization.cleanId
+                  }/view/subscription">
                     Manage your subscription
                   </mj-button>
                 </mj-column>
@@ -132,15 +132,15 @@ export function createEmailScheduler(config?: { endpoint: string }) {
                       input.organization.name
                     }</strong> is approaching its operations limit quota.
                     Used ${numberFormatter.format(input.usage.current)} of ${numberFormatter.format(
-            input.usage.quota,
-          )}.
+                      input.usage.quota,
+                    )}.
                   </mj-text>.
                   <mj-text>
                     We recommend to increase the limit.
                   </mj-text>
                   <mj-button href="${env.hiveServices.webAppUrl}/${
-            input.organization.cleanId
-          }/view/subscription">
+                    input.organization.cleanId
+                  }/view/subscription">
                     Manage your subscription
                   </mj-button>
                 </mj-column>
diff --git a/packages/services/storage/package.json b/packages/services/storage/package.json
index 6f7ea26b4..714eab1f0 100644
--- a/packages/services/storage/package.json
+++ b/packages/services/storage/package.json
@@ -13,7 +13,7 @@
   },
   "scripts": {
     "build": "tsx ../../../scripts/runify.ts",
-    "db:generate": "schemats generate --config schemats.cjs -o src/db/types.ts"
+    "db:generate": "schemats generate --config schemats.cjs -o src/db/types.ts && prettier --write src/db/types.ts"
   },
   "devDependencies": {
     "@sentry/node": "7.77.0",
diff --git a/packages/services/storage/schemats.cjs b/packages/services/storage/schemats.cjs
index 368fb5fb9..51891dded 100644
--- a/packages/services/storage/schemats.cjs
+++ b/packages/services/storage/schemats.cjs
@@ -3,6 +3,7 @@ const cn = require('../../migrations/tools/db-connection-string.cjs');
 
 module.exports = {
   conn: cn('registry'),
-  prettier: true,
+  // Prettier v3 is not supported here yet, but we don't really need it.
+  prettier: false,
   skipPrefix: ['supertokens_'],
 };
diff --git a/packages/services/storage/src/db/types.ts b/packages/services/storage/src/db/types.ts
index 1da2cf674..855974d4e 100644
--- a/packages/services/storage/src/db/types.ts
+++ b/packages/services/storage/src/db/types.ts
@@ -7,10 +7,10 @@
  *
  */
 
-export type alert_channel_type = "SLACK" | "WEBHOOK";
-export type alert_type = "SCHEMA_CHANGE_NOTIFICATIONS";
-export type schema_policy_resource = "ORGANIZATION" | "PROJECT";
-export type user_role = "ADMIN" | "MEMBER";
+export type alert_channel_type = 'SLACK' | 'WEBHOOK';
+export type alert_type = 'SCHEMA_CHANGE_NOTIFICATIONS';
+export type schema_policy_resource = 'ORGANIZATION' | 'PROJECT';
+export type user_role = 'ADMIN' | 'MEMBER';
 
 export interface activities {
   activity_metadata: any;
diff --git a/packages/services/storage/src/index.ts b/packages/services/storage/src/index.ts
index d871e9cbe..9519b388c 100644
--- a/packages/services/storage/src/index.ts
+++ b/packages/services/storage/src/index.ts
@@ -1604,9 +1604,9 @@ export async function createStorage(connection: string, maximumPoolSize: number)
           return trx.one(sql`
             UPDATE public.targets as t
             SET validation_percentage = ${percentage}, validation_period = ${period}, validation_excluded_clients = ${sql.array(
-            excludedClients,
-            'text',
-          )}
+              excludedClients,
+              'text',
+            )}
             FROM (
               SELECT
                 it.id,
@@ -1745,8 +1745,8 @@ export async function createStorage(connection: string, maximumPoolSize: number)
         LEFT JOIN public.targets as t ON (t.id = sv.target_id)
         LEFT JOIN public.schema_log as sl ON (sl.id = sv.action_id)
         WHERE t.id = ${target} AND t.project_id = ${project} AND ${
-        onlyComposable ? sql`sv.is_composable IS TRUE` : true
-      }
+          onlyComposable ? sql`sv.is_composable IS TRUE` : true
+        }
         ORDER BY sv.created_at DESC
         LIMIT 1
       `);
@@ -1829,8 +1829,8 @@ export async function createStorage(connection: string, maximumPoolSize: number)
             SELECT sv.id FROM public.schema_versions as sv WHERE sv.created_at < (
               SELECT svi.created_at FROM public.schema_versions as svi WHERE svi.id = ${version}
             ) AND sv.target_id = ${target} AND ${
-          onlyComposable ? sql`sv.is_composable IS TRUE` : true
-        } ORDER BY sv.created_at DESC LIMIT 1
+              onlyComposable ? sql`sv.is_composable IS TRUE` : true
+            } ORDER BY sv.created_at DESC LIMIT 1
           ) AND sl.action = 'PUSH'
           ORDER BY sl.created_at DESC
         `,
@@ -2333,8 +2333,8 @@ export async function createStorage(connection: string, maximumPoolSize: number)
               ("name", "type", "project_id", "slack_channel", "webhook_endpoint")
             VALUES
               (${name}, ${type}, ${project}, ${slack?.channel ?? null}, ${
-            webhook?.endpoint ?? null
-          })
+                webhook?.endpoint ?? null
+              })
             RETURNING *
           `,
         ),
@@ -2930,8 +2930,8 @@ export async function createStorage(connection: string, maximumPoolSize: number)
         INSERT INTO "public"."schema_policy_config"
         ("resource_type", "resource_id", "config", "allow_overriding")
           VALUES ('ORGANIZATION', ${input.organizationId}, ${sql.jsonb(input.policy)}, ${
-        input.allowOverrides
-      })
+            input.allowOverrides
+          })
         ON CONFLICT
           (resource_type, resource_id)
         DO UPDATE
diff --git a/packages/services/storage/src/tokens.ts b/packages/services/storage/src/tokens.ts
index be5656a84..cf576bf9f 100644
--- a/packages/services/storage/src/tokens.ts
+++ b/packages/services/storage/src/tokens.ts
@@ -64,9 +64,9 @@ export async function createTokenStorage(connection: string, maximumPoolSize: nu
             (name, token, token_alias, target_id, project_id, organization_id, scopes)
           VALUES
             (${name}, ${token}, ${tokenAlias}, ${target}, ${project}, ${organization}, ${sql.array(
-          scopes,
-          'text',
-        )})
+              scopes,
+              'text',
+            )})
           RETURNING *
         `,
       );
diff --git a/packages/web/app/pages/404.tsx b/packages/web/app/pages/404.tsx
index 690a07bae..d7eb5f68a 100644
--- a/packages/web/app/pages/404.tsx
+++ b/packages/web/app/pages/404.tsx
@@ -22,8 +22,10 @@ const NotFoundPage = () => {
 
         <style jsx global>{`
           html {
-            background: url(/images/bg-top-shine.svg) no-repeat left top,
-              url(/images/bg-bottom-shine.svg) no-repeat right bottom, #0b0d11;
+            background:
+              url(/images/bg-top-shine.svg) no-repeat left top,
+              url(/images/bg-bottom-shine.svg) no-repeat right bottom,
+              #0b0d11;
           }
 
           body {
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/checks.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/checks.tsx
index 31216eacd..979adf126 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/checks.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/checks.tsx
@@ -121,7 +121,7 @@ const Navigation = (props: {
                 }}
                 scroll={false} // disable the scroll to top on page
               >
-                <h3 className="truncate font-semibold text-sm">
+                <h3 className="truncate text-sm font-semibold">
                   {edge.node.meta?.commit ?? edge.node.id}
                 </h3>
                 {edge.node.meta?.author ? (
@@ -129,7 +129,7 @@ const Navigation = (props: {
                     <span className="overflow-hidden truncate">{edge.node.meta.author}</span>
                   </div>
                 ) : null}
-                <div className="mt-2.5 mb-1.5 flex align-middle text-xs font-medium text-[#c4c4c4]">
+                <div className="mb-1.5 mt-2.5 flex align-middle text-xs font-medium text-[#c4c4c4]">
                   <div
                     className={cn(
                       edge.node.__typename === 'FailedSchemaCheck' ? 'text-red-500' : null,
@@ -148,7 +148,7 @@ const Navigation = (props: {
               </NextLink>
               {edge.node.githubRepository && edge.node.meta ? (
                 <a
-                  className="text-xs font-medium text-gray-500 hover:text-gray-400 ml-[-1px]"
+                  className="ml-[-1px] text-xs font-medium text-gray-500 hover:text-gray-400"
                   target="_blank"
                   rel="noreferrer"
                   href={`https://github.com/${edge.node.githubRepository}/commit/${edge.node.meta.commit}`}
@@ -476,16 +476,16 @@ const ActiveSchemaCheck = ({
   }
 
   return (
-    <div className="flex grow flex-col h-full">
+    <div className="flex h-full grow flex-col">
       <div className="py-6">
         <Title>Check {schemaCheck.id}</Title>
         <Subtitle>Detailed view of the schema check</Subtitle>
       </div>
       <div>
-        <div className="flex flex-row justify-between items-center font-medium gap-x-4 p-4 text-gray-400 rounded-md border-gray-800 border">
+        <div className="flex flex-row items-center justify-between gap-x-4 rounded-md border border-gray-800 p-4 font-medium text-gray-400">
           <div>
             <div className="text-xs">Status</div>
-            <div className="text-white text-sm font-semibold">
+            <div className="text-sm font-semibold text-white">
               {schemaCheck.__typename === 'FailedSchemaCheck' ? <>Failed</> : <>Success</>}
             </div>
           </div>
@@ -493,7 +493,7 @@ const ActiveSchemaCheck = ({
             <div className="ml-4">
               <div className="text-xs">Service</div>
               <div>
-                <div className="text-white text-sm font-semibold">{schemaCheck.serviceName}</div>
+                <div className="text-sm font-semibold text-white">{schemaCheck.serviceName}</div>
               </div>
             </div>
           ) : null}
@@ -501,20 +501,20 @@ const ActiveSchemaCheck = ({
             <div className="text-xs">
               Triggered <TimeAgo date={schemaCheck.createdAt} />
             </div>
-            <div className="text-white text-sm truncate">
+            <div className="truncate text-sm text-white">
               by {schemaCheck.meta ? <>{schemaCheck.meta.author}</> : 'unknown'}
             </div>
           </div>
           <div>
             <div className="text-xs">Commit</div>
             <div>
-              <div className="text-white text-sm font-semibold truncate">
+              <div className="truncate text-sm font-semibold text-white">
                 {schemaCheck.meta?.commit ?? 'unknown'}
               </div>
             </div>
           </div>
           {schemaCheck.__typename === 'FailedSchemaCheck' && schemaCheck.canBeApproved ? (
-            <div className="mr-0 ml-auto pl-4">
+            <div className="ml-auto mr-0 pl-4">
               {schemaCheck.canBeApprovedByViewer ? (
                 <Button danger onClick={() => setIsApproveFailedSchemaCheckModalOpen(true)}>
                   Approve
@@ -530,7 +530,7 @@ const ActiveSchemaCheck = ({
             <div className="ml-4">
               <div className="text-xs">Approved by</div>
               <div>
-                <div className="text-white text-sm font-bold">
+                <div className="text-sm font-bold text-white">
                   {schemaCheck.approvedBy?.displayName ?? 'unknown'}
                 </div>
               </div>
@@ -539,7 +539,7 @@ const ActiveSchemaCheck = ({
         </div>
       </div>
 
-      <div className="pt-6 pb-1">
+      <div className="pb-1 pt-6">
         <ToggleGroup.Root
           className="flex space-x-1 rounded-md bg-gray-900/50 text-gray-500"
           type="single"
@@ -552,7 +552,7 @@ const ActiveSchemaCheck = ({
               key={item.value}
               value={item.value}
               className={cn(
-                'flex items-center rounded-md py-[0.4375rem] px-2 text-xs font-semibold hover:text-white',
+                'flex items-center rounded-md px-2 py-[0.4375rem] text-xs font-semibold hover:text-white',
                 view === item.value && 'bg-gray-800 text-white',
               )}
               title={item.tooltip}
@@ -824,7 +824,7 @@ function ChecksPageContent() {
       >
         <div
           className={cn(
-            'flex w-full h-full',
+            'flex h-full w-full',
             hasSchemaChecks || hasActiveSchemaCheck ? 'flex-row gap-x-6' : '',
           )}
         >
@@ -836,10 +836,10 @@ function ChecksPageContent() {
             {query.fetching || query.stale ? null : hasSchemaChecks ? (
               <div className="flex flex-col gap-5">
                 <div>
-                  <div className="flex flex-row items-center justify-between h-9">
+                  <div className="flex h-9 flex-row items-center justify-between">
                     <Label
                       htmlFor="filter-toggle-has-changes"
-                      className="text-sm text-gray-100 font-normal"
+                      className="text-sm font-normal text-gray-100"
                     >
                       Show only changed schemas
                     </Label>
@@ -854,10 +854,10 @@ function ChecksPageContent() {
                       id="filter-toggle-has-changes"
                     />
                   </div>
-                  <div className="flex flex-row items-center justify-between h-9">
+                  <div className="flex h-9 flex-row items-center justify-between">
                     <Label
                       htmlFor="filter-toggle-status-failed"
-                      className="text-sm text-gray-100 font-normal"
+                      className="text-sm font-normal text-gray-100"
                     >
                       Show only failed checks
                     </Label>
@@ -888,14 +888,14 @@ function ChecksPageContent() {
                     ))}
                   </div>
                 ) : (
-                  <div className="text-sm cursor-default">
+                  <div className="cursor-default text-sm">
                     No schema checks found with the current filters
                   </div>
                 )}
               </div>
             ) : (
               <div>
-                <div className="text-sm cursor-default">
+                <div className="cursor-default text-sm">
                   {hasActiveSchemaCheck ? 'List is empty' : 'Your schema check list is empty'}
                 </div>
                 <DocsLink href="/features/schema-registry#check-a-schema">
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer.tsx
index f80cb9a2d..5ae68ab58 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer.tsx
@@ -176,7 +176,7 @@ function ExplorerPageContent() {
       organizations={organizationConnection ?? null}
       isCDNEnabled={isCDNEnabled ?? null}
     >
-      <div className="py-6 flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between py-6">
         <div>
           <Title>Explore</Title>
           <Subtitle>Insights from the latest version.</Subtitle>
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/[typename].tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/[typename].tsx
index 87aa3fe0e..a67f2be1b 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/[typename].tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/[typename].tsx
@@ -206,7 +206,7 @@ function TypeExplorerPageContent({ typename }: { typename: string }) {
       organizations={organizationConnection ?? null}
       isCDNEnabled={isCDNEnabled ?? null}
     >
-      <div className="py-6 flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between py-6">
         <div>
           <Title>Explore</Title>
           <Subtitle>Insights from the latest version.</Subtitle>
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/unused.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/unused.tsx
index 4a3f1505e..6a36b1900 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/unused.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/explorer/unused.tsx
@@ -111,7 +111,7 @@ const UnusedSchemaView = memo(function _UnusedSchemaView(props: {
                     'rounded-none px-2 py-1',
                     letter === selectedLetter
                       ? 'text-orange-500'
-                      : 'hover:text-orange-500 text-gray-500',
+                      : 'text-gray-500 hover:text-orange-500',
                   )}
                   key={letter}
                 >
@@ -210,7 +210,7 @@ function UnusedSchemaExplorer(props: {
 
   return (
     <>
-      <div className="py-6 flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between py-6">
         <div>
           <Title>Unused Schema</Title>
           <Subtitle>
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/history.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/history.tsx
index 72b60ec22..1f2b0f9cb 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/history.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/history.tsx
@@ -108,7 +108,7 @@ function ListPage({
             }}
             scroll={false} // disable the scroll to top on page
           >
-            <h3 className="truncate font-semibold text-sm">
+            <h3 className="truncate text-sm font-semibold">
               {'commit' in version.log
                 ? version.log.commit
                 : `Deleted ${version.log.deletedService}`}
@@ -118,7 +118,7 @@ function ListPage({
                 <span className="overflow-hidden truncate">{version.log.author}</span>
               </div>
             ) : null}
-            <div className="mt-2.5 mb-1.5 flex align-middle text-xs font-medium text-[#c4c4c4]">
+            <div className="mb-1.5 mt-2.5 flex align-middle text-xs font-medium text-[#c4c4c4]">
               <div className={cn(!version.valid && 'text-red-500')}>
                 <Badge color={version.valid ? 'green' : 'red'} /> Published{' '}
                 <TimeAgo date={version.date} />
@@ -133,7 +133,7 @@ function ListPage({
           </NextLink>
           {version.githubMetadata ? (
             <a
-              className="text-xs font-medium text-gray-500 hover:text-gray-400 ml-[-1px]"
+              className="ml-[-1px] text-xs font-medium text-gray-500 hover:text-gray-400"
               target="_blank"
               rel="noreferrer"
               href={`https://github.com/${version.githubMetadata.repository}/commit/${version.githubMetadata.commit}`}
@@ -233,7 +233,7 @@ function ComparisonView({ versionId }: { versionId: string }) {
 
   return (
     <>
-      <div className="flex flex-row justify-between items-center">
+      <div className="flex flex-row items-center justify-between">
         <div className="py-6">
           <Title>Details</Title>
           <Subtitle>Explore details of the selected version</Subtitle>
@@ -241,7 +241,7 @@ function ComparisonView({ versionId }: { versionId: string }) {
         {availableViews.length ? (
           <div className="flex items-center justify-between">
             <ToggleGroup.Root
-              className="flex space-x-1 rounded-md bg-gray-900/50 text-gray-500 p-0.5"
+              className="flex space-x-1 rounded-md bg-gray-900/50 p-0.5 text-gray-500"
               type="single"
               defaultValue={availableViews[0]?.value}
               onValueChange={onViewChange}
@@ -252,7 +252,7 @@ function ComparisonView({ versionId }: { versionId: string }) {
                   key={value}
                   value={value}
                   className={cn(
-                    'flex items-center rounded-md py-[0.4375rem] px-2 text-xs font-semibold hover:text-white',
+                    'flex items-center rounded-md px-2 py-[0.4375rem] text-xs font-semibold hover:text-white',
                     view === value && 'bg-gray-800 text-white',
                   )}
                   title={tooltip}
@@ -266,9 +266,9 @@ function ComparisonView({ versionId }: { versionId: string }) {
         ) : null}
       </div>
       <div className="flex h-full">
-        <div className="grow rounded-md overflow-y-auto">
+        <div className="grow overflow-y-auto rounded-md">
           {isLoading ? (
-            <div className="flex w-full h-full justify-center items-center">
+            <div className="flex h-full w-full items-center justify-center">
               <Spinner />
             </div>
           ) : error ? (
@@ -328,7 +328,7 @@ function ComparisonView({ versionId }: { versionId: string }) {
                   <CheckCircledIcon className="h-4 w-auto text-emerald-500" />
                   <h2 className="text-base font-medium text-white">First composable version</h2>
                 </div>
-                <p className="text-xs text-muted-foreground">
+                <p className="text-muted-foreground text-xs">
                   Congratulations! This is the first version of the schema that is composable.
                 </p>
               </div>
@@ -403,7 +403,7 @@ function HistoryPageContent() {
       isCDNEnabled={isCDNEnabled ?? null}
     >
       {versionId ? (
-        <div className="flex w-full h-full flex-row gap-x-6">
+        <div className="flex h-full w-full flex-row gap-x-6">
           <div>
             <div className="py-6">
               <Title>Versions</Title>
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/index.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/index.tsx
index 723d151a0..7619f7c54 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/index.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/index.tsx
@@ -316,7 +316,7 @@ function TargetSchemaPage() {
       organizations={organizationConnection ?? null}
       isCDNEnabled={isCDNEnabled ?? null}
     >
-      <div className="py-6 flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between py-6">
         <div>
           <Title>Schema</Title>
           <Subtitle>The latest published schema.</Subtitle>
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights.tsx
index ed155d86e..9d2c45cc5 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights.tsx
@@ -49,7 +49,7 @@ function OperationsView({
 
   return (
     <>
-      <div className="py-6 flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between py-6">
         <div>
           <Title>Insights</Title>
           <Subtitle>Observe GraphQL requests and see how the API is consumed.</Subtitle>
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash].tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash].tsx
index 04fc09e76..54655dcf4 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash].tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash].tsx
@@ -91,7 +91,7 @@ function OperationView({
 
   return (
     <>
-      <div className="py-6 flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between py-6">
         <div>
           <Title>{operationName}</Title>
           <Subtitle>Insights of individual GraphQL operation</Subtitle>
@@ -127,7 +127,7 @@ function OperationView({
         resolution={resolution}
         mode="operation-page"
       />
-      <div className="w-full rounded-md bg-gray-900/50 p-5 border border-gray-800 mt-12">
+      <div className="mt-12 w-full rounded-md border border-gray-800 bg-gray-900/50 p-5">
         <Section.Title>Operation body</Section.Title>
         <GraphQLOperationBody
           organization={organizationCleanId}
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/client/[name].tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/client/[name].tsx
index 49f2ebb0d..fef20cb8f 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/client/[name].tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/client/[name].tsx
@@ -104,7 +104,7 @@ function ClientView(props: {
 
   return (
     <>
-      <div className="py-6 flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between py-6">
         <div>
           <Title>{props.clientName}</Title>
           <Subtitle>GraphQL API consumer insights</Subtitle>
@@ -135,13 +135,13 @@ function ClientView(props: {
               <Card className="bg-gray-900/50">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Total calls</CardTitle>
-                  <GlobeIcon className="h-4 w-4 text-muted-foreground" />
+                  <GlobeIcon className="text-muted-foreground h-4 w-4" />
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">
                     {isLoading ? '-' : formatNumber(totalRequests)}
                   </div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     Requests in {displayDateRangeLabel(dateRangeKey).toLowerCase()}
                   </p>
                 </CardContent>
@@ -149,7 +149,7 @@ function ClientView(props: {
               <Card className="bg-gray-900/50">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Requests per minute</CardTitle>
-                  <ActivityIcon className="h-4 w-4 text-muted-foreground" />
+                  <ActivityIcon className="text-muted-foreground h-4 w-4" />
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">
@@ -163,7 +163,7 @@ function ClientView(props: {
                           ),
                         )}
                   </div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     RPM in {displayDateRangeLabel(dateRangeKey).toLowerCase()}
                   </p>
                 </CardContent>
@@ -171,11 +171,11 @@ function ClientView(props: {
               <Card className="bg-gray-900/50">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Operations</CardTitle>
-                  <BookIcon className="h-4 w-4 text-muted-foreground" />
+                  <BookIcon className="text-muted-foreground h-4 w-4" />
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">{isLoading ? '-' : totalOperations}</div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     Documents requested by selected client
                   </p>
                 </CardContent>
@@ -183,11 +183,11 @@ function ClientView(props: {
               <Card className="bg-gray-900/50">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Versions</CardTitle>
-                  <HistoryIcon className="h-4 w-4 text-muted-foreground" />
+                  <HistoryIcon className="text-muted-foreground h-4 w-4" />
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">{isLoading ? '-' : totalVersions}</div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     Versions in {displayDateRangeLabel(dateRangeKey).toLowerCase()}
                   </p>
                 </CardContent>
@@ -195,14 +195,14 @@ function ClientView(props: {
             </div>
           </div>
           <div className="col-span-4">
-            <Card className="bg-gray-900/50 flex flex-col h-full">
+            <Card className="flex h-full flex-col bg-gray-900/50">
               <CardHeader>
                 <CardTitle>Activity</CardTitle>
                 <CardDescription>
                   GraphQL requests from {props.clientName} over time
                 </CardDescription>
               </CardHeader>
-              <CardContent className="basis-0 grow min-h-[150px]">
+              <CardContent className="min-h-[150px] grow basis-0">
                 <AutoSizer>
                   {size => (
                     <ReactECharts
@@ -269,7 +269,7 @@ function ClientView(props: {
           </div>
         </div>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-          <Card className="col-span-4 bg-gray-900/50 flex flex-col h-full">
+          <Card className="col-span-4 flex h-full flex-col bg-gray-900/50">
             <CardHeader>
               <CardTitle>Operations</CardTitle>
               <CardDescription>
@@ -278,15 +278,15 @@ function ClientView(props: {
                 {displayDateRangeLabel(dateRangeKey).toLowerCase()}
               </CardDescription>
             </CardHeader>
-            <CardContent className="basis-0 grow overflow-y-auto min-h-[120px]">
+            <CardContent className="min-h-[120px] grow basis-0 overflow-y-auto">
               <div className="space-y-2">
                 {isLoading
                   ? null
                   : query.data?.clientStats.operations.nodes.map(operation => (
                       <div key={operation.id} className="flex items-center">
-                        <p className="text-sm font-medium truncate">
+                        <p className="truncate text-sm font-medium">
                           <Link
-                            className="text-orange-500 hover:underline hover:underline-offset-2 hover:text-orange-500"
+                            className="text-orange-500 hover:text-orange-500 hover:underline hover:underline-offset-2"
                             href={{
                               pathname:
                                 '/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash]',
@@ -302,7 +302,7 @@ function ClientView(props: {
                             {operation.name}
                           </Link>
                         </p>
-                        <div className="ml-auto font-light flex flex-row justify-end items-center text-sm min-w-[150px]">
+                        <div className="ml-auto flex min-w-[150px] flex-row items-center justify-end text-sm font-light">
                           <div>{formatNumber(operation.count)}</div>{' '}
                           <div className="min-w-[70px] text-right">
                             {toDecimal((operation.count * 100) / totalRequests)}%
@@ -314,7 +314,7 @@ function ClientView(props: {
             </CardContent>
           </Card>
 
-          <Card className="col-span-3 bg-gray-900/50 flex flex-col h-full">
+          <Card className="col-span-3 flex h-full flex-col bg-gray-900/50">
             <CardHeader>
               <CardTitle>Versions</CardTitle>
               <CardDescription>
@@ -326,14 +326,14 @@ function ClientView(props: {
                   : null}
               </CardDescription>
             </CardHeader>
-            <CardContent className="basis-0 grow overflow-y-auto min-h-[170px]">
+            <CardContent className="min-h-[170px] grow basis-0 overflow-y-auto">
               <div className="space-y-2">
                 {isLoading
                   ? null
                   : query.data?.clientStats.versions.map(version => (
                       <div key={version.version} className="flex items-center">
-                        <p className="text-sm font-medium truncate">{version.version}</p>
-                        <div className="ml-auto font-light flex flex-row justify-end items-center text-sm min-w-[150px]">
+                        <p className="truncate text-sm font-medium">{version.version}</p>
+                        <div className="ml-auto flex min-w-[150px] flex-row items-center justify-end text-sm font-light">
                           <div>{formatNumber(version.count)}</div>
                           <div className="min-w-[70px] text-right">
                             {toDecimal((version.count * 100) / totalRequests)}%
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/schema-coordinate/[coordinate].tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/schema-coordinate/[coordinate].tsx
index 73d3d60f3..6d95d6d07 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/schema-coordinate/[coordinate].tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/schema-coordinate/[coordinate].tsx
@@ -108,7 +108,7 @@ function SchemaCoordinateView(props: {
 
   return (
     <>
-      <div className="py-6 flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-between py-6">
         <div>
           <Title>{props.coordinate}</Title>
           <Subtitle>Schema coordinate insights</Subtitle>
@@ -139,13 +139,13 @@ function SchemaCoordinateView(props: {
               <Card className="bg-gray-900/50">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Total calls</CardTitle>
-                  <GlobeIcon className="h-4 w-4 text-muted-foreground" />
+                  <GlobeIcon className="text-muted-foreground h-4 w-4" />
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">
                     {isLoading ? '-' : formatNumber(totalRequests)}
                   </div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     Requests in {displayDateRangeLabel(dateRangeKey).toLowerCase()}
                   </p>
                 </CardContent>
@@ -153,7 +153,7 @@ function SchemaCoordinateView(props: {
               <Card className="bg-gray-900/50">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Requests per minute</CardTitle>
-                  <ActivityIcon className="h-4 w-4 text-muted-foreground" />
+                  <ActivityIcon className="text-muted-foreground h-4 w-4" />
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">
@@ -167,7 +167,7 @@ function SchemaCoordinateView(props: {
                           ),
                         )}
                   </div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     RPM in {displayDateRangeLabel(dateRangeKey).toLowerCase()}
                   </p>
                 </CardContent>
@@ -175,11 +175,11 @@ function SchemaCoordinateView(props: {
               <Card className="bg-gray-900/50">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Operations</CardTitle>
-                  <BookIcon className="h-4 w-4 text-muted-foreground" />
+                  <BookIcon className="text-muted-foreground h-4 w-4" />
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">{isLoading ? '-' : totalOperations}</div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     GraphQL documents with selected coordinate
                   </p>
                 </CardContent>
@@ -187,11 +187,11 @@ function SchemaCoordinateView(props: {
               <Card className="bg-gray-900/50">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Consumers</CardTitle>
-                  <TabletSmartphoneIcon className="h-4 w-4 text-muted-foreground" />
+                  <TabletSmartphoneIcon className="text-muted-foreground h-4 w-4" />
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">{isLoading ? '-' : totalClients}</div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     GraphQL clients in {displayDateRangeLabel(dateRangeKey).toLowerCase()}
                   </p>
                 </CardContent>
@@ -199,14 +199,14 @@ function SchemaCoordinateView(props: {
             </div>
           </div>
           <div className="col-span-4">
-            <Card className="bg-gray-900/50 flex flex-col h-full">
+            <Card className="flex h-full flex-col bg-gray-900/50">
               <CardHeader>
                 <CardTitle>Activity</CardTitle>
                 <CardDescription>
                   GraphQL requests with {props.coordinate} over time
                 </CardDescription>
               </CardHeader>
-              <CardContent className="basis-0 grow min-h-[150px]">
+              <CardContent className="min-h-[150px] grow basis-0">
                 <AutoSizer>
                   {size => (
                     <ReactECharts
@@ -273,7 +273,7 @@ function SchemaCoordinateView(props: {
           </div>
         </div>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-          <Card className="col-span-4 bg-gray-900/50 flex flex-col h-full">
+          <Card className="col-span-4 flex h-full flex-col bg-gray-900/50">
             <CardHeader>
               <CardTitle>Operations</CardTitle>
               <CardDescription>
@@ -282,15 +282,15 @@ function SchemaCoordinateView(props: {
                 {displayDateRangeLabel(dateRangeKey).toLowerCase()}
               </CardDescription>
             </CardHeader>
-            <CardContent className="basis-0 grow overflow-y-auto min-h-[120px]">
+            <CardContent className="min-h-[120px] grow basis-0 overflow-y-auto">
               <div className="space-y-2">
                 {isLoading
                   ? null
                   : query.data?.schemaCoordinateStats.operations.nodes.map(operation => (
                       <div key={operation.id} className="flex items-center">
-                        <p className="text-sm font-medium truncate">
+                        <p className="truncate text-sm font-medium">
                           <Link
-                            className="text-orange-500 hover:underline hover:underline-offset-2 hover:text-orange-500"
+                            className="text-orange-500 hover:text-orange-500 hover:underline hover:underline-offset-2"
                             href={{
                               pathname:
                                 '/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash]',
@@ -306,7 +306,7 @@ function SchemaCoordinateView(props: {
                             {operation.name}
                           </Link>
                         </p>
-                        <div className="ml-auto font-light flex flex-row justify-end items-center text-sm min-w-[150px]">
+                        <div className="ml-auto flex min-w-[150px] flex-row items-center justify-end text-sm font-light">
                           <div>{formatNumber(operation.count)}</div>{' '}
                           <div className="min-w-[70px] text-right">
                             {toDecimal((operation.count * 100) / totalRequests)}%
@@ -318,7 +318,7 @@ function SchemaCoordinateView(props: {
             </CardContent>
           </Card>
 
-          <Card className="col-span-3 bg-gray-900/50 flex flex-col h-full">
+          <Card className="col-span-3 flex h-full flex-col bg-gray-900/50">
             <CardHeader>
               <CardTitle>Clients</CardTitle>
               <CardDescription>
@@ -327,15 +327,15 @@ function SchemaCoordinateView(props: {
                 {displayDateRangeLabel(dateRangeKey).toLowerCase()}.
               </CardDescription>
             </CardHeader>
-            <CardContent className="basis-0 grow overflow-y-auto min-h-[170px]">
+            <CardContent className="min-h-[170px] grow basis-0 overflow-y-auto">
               <div className="space-y-2">
                 {isLoading
                   ? null
                   : query.data?.schemaCoordinateStats.clients.nodes.map(client => (
                       <div key={client.name} className="flex items-center">
-                        <p className="text-sm font-medium truncate">
+                        <p className="truncate text-sm font-medium">
                           <Link
-                            className="text-orange-500 hover:underline hover:underline-offset-2 hover:text-orange-500"
+                            className="text-orange-500 hover:text-orange-500 hover:underline hover:underline-offset-2"
                             href={{
                               pathname:
                                 '/[organizationId]/[projectId]/[targetId]/insights/client/[name]',
@@ -350,7 +350,7 @@ function SchemaCoordinateView(props: {
                             {client.name}
                           </Link>
                         </p>
-                        <div className="ml-auto font-light flex flex-row justify-end items-center text-sm min-w-[150px]">
+                        <div className="ml-auto flex min-w-[150px] flex-row items-center justify-end text-sm font-light">
                           <div>{formatNumber(client.count)}</div>
                           <div className="min-w-[70px] text-right">
                             {toDecimal((client.count * 100) / totalRequests)}%
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/laboratory.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/laboratory.tsx
index e720d60ba..9a1eb203d 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/laboratory.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/laboratory.tsx
@@ -154,7 +154,7 @@ const CollectionItem = (props: {
   const copyToClipboard = useClipboard();
 
   return (
-    <div key={props.node.id} className="flex justify-between items-center">
+    <div key={props.node.id} className="flex items-center justify-between">
       <Link
         href={{
           pathname: '/[organizationId]/[projectId]/[targetId]/laboratory/[operationId]',
@@ -166,7 +166,7 @@ const CollectionItem = (props: {
           },
         }}
         className={cn(
-          'hover:bg-gray-100/10 w-full rounded p-2 !text-gray-300',
+          'w-full rounded p-2 !text-gray-300 hover:bg-gray-100/10',
           router.query.operation === props.node.id && 'bg-gray-100/10 text-white',
         )}
         onClick={ev => {
@@ -195,7 +195,7 @@ const CollectionItem = (props: {
         modal={false}
       >
         <GraphiQLDropdownMenu.Button
-          className="graphiql-toolbar-button opacity-0 [div:hover>&]:opacity-100 transition [div:hover>&]:bg-transparent"
+          className="graphiql-toolbar-button opacity-0 transition [div:hover>&]:bg-transparent [div:hover>&]:opacity-100"
           aria-label="More"
           data-cy="operation-3-dots"
         >
@@ -245,7 +245,7 @@ const AddCollectionItemButton = (props: { collectionId: string }): ReactElement
   return (
     <Button
       variant="link"
-      className="py-0 px-2 text-gray-500 hover:text-white hover:no-underline"
+      className="px-2 py-0 text-gray-500 hover:text-white hover:no-underline"
       onClick={async () => {
         const result = await createOperation({
           input: {
@@ -403,15 +403,15 @@ function useOperationCollectionsPlugin({
           )?.id;
 
         return (
-          <div className="h-full flex flex-col">
+          <div className="flex h-full flex-col">
             <div className="flex justify-between">
               <Title>Collections</Title>
             </div>
             {loading ? (
-              <div className="flex justify-center h-fit flex-1 items-center">
-                <div className="flex items-center flex-col">
+              <div className="flex h-fit flex-1 items-center justify-center">
+                <div className="flex flex-col items-center">
                   <Spinner />
-                  <div className="text-xs mt-2">Loading collections</div>
+                  <div className="mt-2 text-xs">Loading collections</div>
                 </div>
               </div>
             ) : collections?.length ? (
@@ -480,10 +480,10 @@ function useOperationCollectionsPlugin({
                 ))}
               </Accordion>
             ) : (
-              <div className="flex justify-center h-fit flex-1 items-center">
-                <div className="flex items-center flex-col">
+              <div className="flex h-fit flex-1 items-center justify-center">
+                <div className="flex flex-col items-center">
                   <BookmarkIcon width={30} height={30} />
-                  <div className="text-xs mt-2">There are no collections available.</div>
+                  <div className="mt-2 text-xs">There are no collections available.</div>
                   {canEdit ? (
                     <Button
                       onClick={() => {
@@ -584,7 +584,7 @@ function Save(): ReactElement {
         <GraphiQLDropdownMenu.Content>
           <GraphiQLDropdownMenu.Item
             disabled={isSame}
-            className={cx(isSame && 'cursor-default hover:bg-transparent text-gray-400')}
+            className={cx(isSame && 'cursor-default text-gray-400 hover:bg-transparent')}
             onClick={async () => {
               if (!currentOperation || isSame) {
                 return;
@@ -760,7 +760,7 @@ function LaboratoryPageContent() {
       organizations={organizationConnection ?? null}
       isCDNEnabled={isCDNEnabled ?? null}
     >
-      <div className="py-6 flex">
+      <div className="flex py-6">
         <div className="flex-1">
           <Title>Laboratory</Title>
           <Subtitle>Explore your GraphQL schema and run queries against your GraphQL API.</Subtitle>
@@ -793,7 +793,7 @@ function LaboratoryPageContent() {
             </Button>
           </div>
           <div className="self-end pt-2">
-            <span className="text-xs font-bold mr-2">Query</span>
+            <span className="mr-2 text-xs font-bold">Query</span>
             <ToggleGroup
               defaultValue="list"
               onValueChange={newValue => {
@@ -808,7 +808,7 @@ function LaboratoryPageContent() {
                 value="mockApi"
                 title="Use Mock Schema"
                 className={clsx(
-                  'hover:text-white text-xs',
+                  'text-xs hover:text-white',
                   !query.fetching &&
                     actualSelectedApiEndpoint === 'mockApi' &&
                     'bg-gray-800 text-white',
@@ -822,7 +822,7 @@ function LaboratoryPageContent() {
                 value="linkedApi"
                 title="Use API endpoint"
                 className={clsx(
-                  'hover:text-white text-xs',
+                  'text-xs hover:text-white',
                   !query.fetching &&
                     actualSelectedApiEndpoint === 'linkedApi' &&
                     'bg-gray-800 text-white',
@@ -888,7 +888,7 @@ function LaboratoryPageContent() {
                 )
               }
             >
-              <span className="text-xs font-normal pr-2 cursor-help">
+              <span className="cursor-help pr-2 text-xs font-normal">
                 {actualSelectedApiEndpoint === 'linkedApi'
                   ? 'Querying GraphQL API'
                   : 'Querying Mock API'}
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/settings.tsx b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/settings.tsx
index 26f7ff68c..0dc128230 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/settings.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/[targetId]/settings.tsx
@@ -272,7 +272,7 @@ const ExtendBaseSchema = (props: { baseSchema: string }): ReactElement => {
         >
           Reset
         </Button>
-        {isUnsaved && <span className="text-green-500 text-sm">Unsaved changes!</span>}
+        {isUnsaved && <span className="text-sm text-green-500">Unsaved changes!</span>}
       </CardFooter>
     </Card>
   );
@@ -627,7 +627,7 @@ const ConditionalBreakingChanges = (): ReactElement => {
           {touched.targets && errors.targets && (
             <div className="text-red-500">{errors.targets}</div>
           )}
-          <div className="mt-5 pl-5 py-2 space-y-2 border-l-2 border-l-gray-800 bg-gray-600/10 rounded text-gray-400">
+          <div className="mt-5 space-y-2 rounded border-l-2 border-l-gray-800 bg-gray-600/10 py-2 pl-5 text-gray-400">
             <div>
               <div className="font-semibold">Example settings</div>
               <div className="text-sm">Removal of a field is considered breaking if</div>
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/index.tsx b/packages/web/app/pages/[organizationId]/[projectId]/index.tsx
index 16426b186..2c2e22ea3 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/index.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/index.tsx
@@ -76,7 +76,7 @@ const TargetCard = (props: {
     <Card
       as={NextLink}
       href={href}
-      className="h-full pt-4 px-0 self-start hover:bg-gray-800/40 hover:shadow-md hover:shadow-gray-800/50 bg-gray-900/50"
+      className="h-full self-start bg-gray-900/50 px-0 pt-4 hover:bg-gray-800/40 hover:shadow-md hover:shadow-gray-800/50"
     >
       <TooltipProvider>
         <div className="flex items-start gap-x-2">
@@ -153,12 +153,12 @@ const TargetCard = (props: {
                 )}
               </AutoSizer>
             </div>
-            <div className="flex flex-row gap-y-3 px-4 pt-4 justify-between items-center">
+            <div className="flex flex-row items-center justify-between gap-y-3 px-4 pt-4">
               <div>
                 {target ? (
                   <h4 className="line-clamp-2 text-lg font-bold">{target.name}</h4>
                 ) : (
-                  <div className="w-48 h-4 py-2 bg-gray-800 rounded-full animate-pulse" />
+                  <div className="h-4 w-48 animate-pulse rounded-full bg-gray-800 py-2" />
                 )}
               </div>
               <div className="flex flex-col gap-y-2 py-1">
@@ -166,8 +166,8 @@ const TargetCard = (props: {
                   <>
                     <Tooltip>
                       <TooltipTrigger>
-                        <div className="flex flex-row gap-x-2 items-center">
-                          <Globe className="w-4 h-4 text-gray-500" />
+                        <div className="flex flex-row items-center gap-x-2">
+                          <Globe className="h-4 w-4 text-gray-500" />
                           <div className="text-xs">
                             {requestsInDateRange}{' '}
                             {pluralize(totalNumberOfRequests, 'request', 'requests')}
@@ -180,8 +180,8 @@ const TargetCard = (props: {
                     </Tooltip>
                     <Tooltip>
                       <TooltipTrigger>
-                        <div className="flex flex-row gap-x-2 items-center">
-                          <History className="w-4 h-4 text-gray-500" />
+                        <div className="flex flex-row items-center gap-x-2">
+                          <History className="h-4 w-4 text-gray-500" />
                           <div className="text-xs">
                             {schemaVersionsInDateRange}{' '}
                             {pluralize(totalNumberOfVersions, 'commit', 'commits')}
@@ -195,8 +195,8 @@ const TargetCard = (props: {
                   </>
                 ) : (
                   <>
-                    <div className="w-16 h-2 my-1 bg-gray-800 rounded-full animate-pulse" />
-                    <div className="w-16 h-2 my-1 bg-gray-800 rounded-full animate-pulse" />
+                    <div className="my-1 h-2 w-16 animate-pulse rounded-full bg-gray-800" />
+                    <div className="my-1 h-2 w-16 animate-pulse rounded-full bg-gray-800" />
                   </>
                 )}
               </div>
@@ -275,7 +275,7 @@ const ProjectsPageContent = () => {
         <div
           className={cn(
             'grow',
-            targets?.length === 0 ? '' : 'grid grid-cols-2 gap-5 items-stretch',
+            targets?.length === 0 ? '' : 'grid grid-cols-2 items-stretch gap-5',
           )}
         >
           {targets ? (
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/view/policy.tsx b/packages/web/app/pages/[organizationId]/[projectId]/view/policy.tsx
index ddff9ac49..962a6647e 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/view/policy.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/view/policy.tsx
@@ -183,8 +183,8 @@ function ProjectPolicyContent() {
                   currentState={currentProject.schemaPolicy}
                 />
               ) : (
-                <div className="text-gray-400 pl-1 text-sm font-bold">
-                  <p className="text-orange-500 inline-block mr-4">!</p>
+                <div className="pl-1 text-sm font-bold text-gray-400">
+                  <p className="mr-4 inline-block text-orange-500">!</p>
                   Organization settings does not allow projects to override policy. Please consult
                   your organization administrator.
                 </div>
diff --git a/packages/web/app/pages/[organizationId]/[projectId]/view/settings.tsx b/packages/web/app/pages/[organizationId]/[projectId]/view/settings.tsx
index 08887597b..9c701c3a2 100644
--- a/packages/web/app/pages/[organizationId]/[projectId]/view/settings.tsx
+++ b/packages/web/app/pages/[organizationId]/[projectId]/view/settings.tsx
@@ -99,14 +99,14 @@ function GitHubIntegration(props: {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="flex flex-row justify-between items-center rounded-sm mb-4 gap-x-4 text-sm text-muted-foreground">
+        <div className="text-muted-foreground mb-4 flex flex-row items-center justify-between gap-x-4 rounded-sm text-sm">
           <div className="space-y-2">
             <div>
               <div className="mb-4">Here's how it will look like in your CI pipeline.</div>
               <div className="flex items-center gap-x-2 pl-1">
-                <CheckIcon className="w-4 h-4 text-emerald-500" />
-                <div className="bg-white w-6 h-6 flex items-center justify-center rounded-sm">
-                  <HiveLogo className="w-[80%] h-[80%]" />
+                <CheckIcon className="h-4 w-4 text-emerald-500" />
+                <div className="flex h-6 w-6 items-center justify-center rounded-sm bg-white">
+                  <HiveLogo className="h-[80%] w-[80%]" />
                 </div>
 
                 <div className="font-semibold text-[#adbac7]">
@@ -116,13 +116,13 @@ function GitHubIntegration(props: {
               </div>
             </div>
             <div>
-              <ArrowBigDownDashIcon className="w-6 h-6" />
+              <ArrowBigDownDashIcon className="h-6 w-6" />
             </div>
             <div>
               <div className="flex items-center gap-x-2 pl-1">
-                <CheckIcon className="w-4 h-4 text-emerald-500" />
-                <div className="bg-white w-6 h-6 flex items-center justify-center rounded-sm">
-                  <HiveLogo className="w-[80%] h-[80%]" />
+                <CheckIcon className="h-4 w-4 text-emerald-500" />
+                <div className="flex h-6 w-6 items-center justify-center rounded-sm bg-white">
+                  <HiveLogo className="h-[80%] w-[80%]" />
                 </div>
 
                 <div className="font-semibold text-[#adbac7]">
diff --git a/packages/web/app/pages/[organizationId]/index.tsx b/packages/web/app/pages/[organizationId]/index.tsx
index 4986399e6..0545d6e8b 100644
--- a/packages/web/app/pages/[organizationId]/index.tsx
+++ b/packages/web/app/pages/[organizationId]/index.tsx
@@ -97,7 +97,7 @@ const ProjectCard = (props: {
             }
           : '#'
       }
-      className="h-full pt-4 px-0 self-start hover:bg-gray-800/40 hover:shadow-md hover:shadow-gray-800/50 bg-gray-900/50"
+      className="h-full self-start bg-gray-900/50 px-0 pt-4 hover:bg-gray-800/40 hover:shadow-md hover:shadow-gray-800/50"
     >
       <TooltipProvider>
         <div className="flex items-start gap-x-2">
@@ -174,16 +174,16 @@ const ProjectCard = (props: {
                 )}
               </AutoSizer>
             </div>
-            <div className="flex flex-row gap-y-3 px-4 pt-4 justify-between items-center">
+            <div className="flex flex-row items-center justify-between gap-y-3 px-4 pt-4">
               {project ? (
                 <div>
                   <h4 className="line-clamp-2 text-lg font-bold">{project.name}</h4>
-                  <p className="text-gray-300 text-xs">{projectTypeFullNames[project.type]}</p>
+                  <p className="text-xs text-gray-300">{projectTypeFullNames[project.type]}</p>
                 </div>
               ) : (
                 <div>
-                  <div className="w-48 h-4 mb-4 py-2 bg-gray-800 rounded-full animate-pulse" />
-                  <div className="w-24 h-2 bg-gray-800 rounded-full animate-pulse" />
+                  <div className="mb-4 h-4 w-48 animate-pulse rounded-full bg-gray-800 py-2" />
+                  <div className="h-2 w-24 animate-pulse rounded-full bg-gray-800" />
                 </div>
               )}
               <div className="flex flex-col gap-y-2 py-1">
@@ -191,8 +191,8 @@ const ProjectCard = (props: {
                   <>
                     <Tooltip>
                       <TooltipTrigger>
-                        <div className="flex flex-row gap-x-2 items-center">
-                          <Globe className="w-4 h-4 text-gray-500" />
+                        <div className="flex flex-row items-center gap-x-2">
+                          <Globe className="h-4 w-4 text-gray-500" />
                           <div className="text-xs">
                             {requestsInDateRange}{' '}
                             {pluralize(totalNumberOfRequests, 'request', 'requests')}
@@ -205,8 +205,8 @@ const ProjectCard = (props: {
                     </Tooltip>
                     <Tooltip>
                       <TooltipTrigger>
-                        <div className="flex flex-row gap-x-2 items-center">
-                          <History className="w-4 h-4 text-gray-500" />
+                        <div className="flex flex-row items-center gap-x-2">
+                          <History className="h-4 w-4 text-gray-500" />
                           <div className="text-xs">
                             {schemaVersionsInDateRange}{' '}
                             {pluralize(totalNumberOfVersions, 'commit', 'commits')}
@@ -220,8 +220,8 @@ const ProjectCard = (props: {
                   </>
                 ) : (
                   <>
-                    <div className="w-16 h-2 my-1 bg-gray-800 rounded-full animate-pulse" />
-                    <div className="w-16 h-2 my-1 bg-gray-800 rounded-full animate-pulse" />
+                    <div className="my-1 h-2 w-16 animate-pulse rounded-full bg-gray-800" />
+                    <div className="my-1 h-2 w-16 animate-pulse rounded-full bg-gray-800" />
                   </>
                 )}
               </div>
@@ -341,7 +341,7 @@ function OrganizationPageContent() {
                 docsUrl="/management/projects#create-a-new-project"
               />
             ) : (
-              <div className="grid grid-cols-2 gap-5 items-stretch">
+              <div className="grid grid-cols-2 items-stretch gap-5">
                 {projects.nodes
                   .sort((a, b) => {
                     const diffOperations = b.totalRequests - a.totalRequests;
@@ -371,7 +371,7 @@ function OrganizationPageContent() {
               </div>
             )
           ) : (
-            <div className="grid grid-cols-2 gap-5 items-stretch">
+            <div className="grid grid-cols-2 items-stretch gap-5">
               {Array.from({ length: 4 }).map((_, index) => (
                 <ProjectCard
                   key={index}
diff --git a/packages/web/app/pages/[organizationId]/view/manage-subscription.tsx b/packages/web/app/pages/[organizationId]/view/manage-subscription.tsx
index 6fbbe5cbf..a4273a838 100644
--- a/packages/web/app/pages/[organizationId]/view/manage-subscription.tsx
+++ b/packages/web/app/pages/[organizationId]/view/manage-subscription.tsx
@@ -478,7 +478,7 @@ function ManageSubscriptionPageContent() {
       me={me}
     >
       <div className="grow">
-        <div className="py-6 flex flex-row justify-between items-center">
+        <div className="flex flex-row items-center justify-between py-6">
           <div>
             <Title>Manage subscription</Title>
             <Subtitle>Manage your current plan and invoices.</Subtitle>
diff --git a/packages/web/app/pages/[organizationId]/view/members.tsx b/packages/web/app/pages/[organizationId]/view/members.tsx
index c10986692..51df7b1b8 100644
--- a/packages/web/app/pages/[organizationId]/view/members.tsx
+++ b/packages/web/app/pages/[organizationId]/view/members.tsx
@@ -118,7 +118,7 @@ const MemberInvitationForm = ({
 
   return (
     <div>
-      <form onSubmit={handleSubmit} className="flex flex-row gap-2 items-center">
+      <form onSubmit={handleSubmit} className="flex flex-row items-center gap-2">
         <Input
           style={{
             minWidth: '200px',
@@ -344,7 +344,7 @@ function PageContent(props: {
           disabled={checked.length === 0}
         >
           Delete {checked.length || ''}
-          <TrashIcon className="ml-2 w-4 h-4" />
+          <TrashIcon className="ml-2 h-4 w-4" />
         </Button>
       </div>
       {members?.map(node => {
diff --git a/packages/web/app/pages/[organizationId]/view/policy.tsx b/packages/web/app/pages/[organizationId]/view/policy.tsx
index 3afddd73a..a204b443f 100644
--- a/packages/web/app/pages/[organizationId]/view/policy.tsx
+++ b/packages/web/app/pages/[organizationId]/view/policy.tsx
@@ -141,7 +141,7 @@ function PolicyPageContent() {
                       </>
                     ))}
                   </p>
-                  <p className="py-2 text-muted-foreground font-semibold underline">
+                  <p className="text-muted-foreground py-2 font-semibold underline">
                     Policy feature is only available for projects that are using the new registry
                     model.
                   </p>
@@ -184,7 +184,7 @@ function PolicyPageContent() {
                     />
                     <label
                       htmlFor="allowOverrides"
-                      className="inline-block ml-2 text-sm text-gray-300"
+                      className="ml-2 inline-block text-sm text-gray-300"
                     >
                       Allow projects to override or disable rules
                     </label>
diff --git a/packages/web/app/pages/[organizationId]/view/subscription.tsx b/packages/web/app/pages/[organizationId]/view/subscription.tsx
index 4478336e7..90134ab6a 100644
--- a/packages/web/app/pages/[organizationId]/view/subscription.tsx
+++ b/packages/web/app/pages/[organizationId]/view/subscription.tsx
@@ -124,7 +124,7 @@ function SubscriptionPageContent() {
       me={me}
     >
       <div className="grow">
-        <div className="py-6 flex flex-row justify-between items-center">
+        <div className="flex flex-row items-center justify-between py-6">
           <div>
             <Title>Your subscription</Title>
             <Subtitle>Explore your current plan and usage.</Subtitle>
diff --git a/packages/web/app/pages/[organizationId]/view/support.tsx b/packages/web/app/pages/[organizationId]/view/support.tsx
index 364c3c779..5b166939b 100644
--- a/packages/web/app/pages/[organizationId]/view/support.tsx
+++ b/packages/web/app/pages/[organizationId]/view/support.tsx
@@ -142,10 +142,10 @@ function NewTicketForm(props: {
         }
       }}
     >
-      <SheetContent className="h-full flex grow flex-col w-1/3 sm:w-1/2 md:w-1/3 max-w-none sm:max-w-none md:max-w-[500px]">
+      <SheetContent className="flex h-full w-1/3 max-w-none grow flex-col sm:w-1/2 sm:max-w-none md:w-1/3 md:max-w-[500px]">
         <Form {...form}>
           <form
-            className="h-full flex justify-between grow flex-col gap-y-4"
+            className="flex h-full grow flex-col justify-between gap-y-4"
             onSubmit={form.handleSubmit(onSubmit)}
           >
             <SheetHeader>
@@ -156,7 +156,7 @@ function NewTicketForm(props: {
             </SheetHeader>
 
             <div className="flex flex-1">
-              <div className="overflow-y-auto text-sm text-ellipsis w-full px-2 space-y-6">
+              <div className="w-full space-y-6 overflow-y-auto text-ellipsis px-2 text-sm">
                 <FormField
                   control={form.control}
                   name="priority"
@@ -235,7 +235,7 @@ function NewTicketForm(props: {
               </div>
             </div>
 
-            <SheetFooter className="flex flex-col sm:flex-col gap-y-2">
+            <SheetFooter className="flex flex-col gap-y-2 sm:flex-col">
               <Button type="submit">Submit</Button>
             </SheetFooter>
           </form>
@@ -268,7 +268,7 @@ function SupportTicketRow(props: {
       <TableCell>
         <Button
           variant="link"
-          className={cn(isSolved ? 'text-gray-500' : '', 'p-0 h-auto text-left')}
+          className={cn(isSolved ? 'text-gray-500' : '', 'h-auto p-0 text-left')}
           asChild
         >
           <NextLink
@@ -290,7 +290,7 @@ function SupportTicketRow(props: {
       <TableCell className="w-[150px] text-center">
         <Priority level={ticket.priority} />
       </TableCell>
-      <TableCell className="text-right w-[200px] text-xs">
+      <TableCell className="w-[200px] text-right text-xs">
         <TimeAgo date={ticket.updatedAt} className="text-gray-500" />
       </TableCell>
     </TableRow>
@@ -347,14 +347,14 @@ function Support(props: {
   return (
     <TooltipProvider>
       <div>
-        <div className="py-6 flex flex-row justify-between items-center">
+        <div className="flex flex-row items-center justify-between py-6">
           <div>
             <Title>Support</Title>
             <Subtitle>A list of support requests</Subtitle>
           </div>
           <div>
             <Button variant="outline" onClick={toggle}>
-              <PencilIcon className="w-4 h-4 mr-2" />
+              <PencilIcon className="mr-2 h-4 w-4" />
               New ticket
             </Button>
             <NewTicketForm
diff --git a/packages/web/app/pages/[organizationId]/view/support/[ticketId].tsx b/packages/web/app/pages/[organizationId]/view/support/[ticketId].tsx
index 78b15f68a..42d6d24dd 100644
--- a/packages/web/app/pages/[organizationId]/view/support/[ticketId].tsx
+++ b/packages/web/app/pages/[organizationId]/view/support/[ticketId].tsx
@@ -128,16 +128,16 @@ function Comment({ node }: { node: FragmentType<typeof Comment_SupportTicketComm
   return (
     <div
       className={cn(
-        'flex flex-row items-end space-x-2 w-full',
+        'flex w-full flex-row items-end space-x-2',
         isSupport ? 'justify-end' : 'justify-start',
       )}
     >
-      {isSupport ? null : <UserIcon className="w-6 h-6 text-orange-500" />}
+      {isSupport ? null : <UserIcon className="h-6 w-6 text-orange-500" />}
       <Tooltip>
         <TooltipTrigger asChild>
           <div
             className={cn(
-              'p-2 rounded-lg inline-block bg-gray-800 text-foreground text-left max-w-[70%]',
+              'text-foreground inline-block max-w-[70%] rounded-lg bg-gray-800 p-2 text-left',
               isSupport ? 'rounded-br-none' : 'rounded-bl-none',
             )}
           >
@@ -149,7 +149,7 @@ function Comment({ node }: { node: FragmentType<typeof Comment_SupportTicketComm
         </TooltipContent>
       </Tooltip>
       {isSupport ? (
-        <img className="block w-6 h-6" src="/just-logo.svg" alt="GraphQL Hive logo" />
+        <img className="block h-6 w-6" src="/just-logo.svg" alt="GraphQL Hive logo" />
       ) : null}
     </div>
   );
@@ -199,12 +199,12 @@ function SupportTicket(props: {
   return (
     <TooltipProvider>
       <div className="py-6">
-        <div className="flex flex-row justify-between items-start gap-x-6">
+        <div className="flex flex-row items-start justify-between gap-x-6">
           <div className="flex-1 border-r border-gray-800 pr-6">
-            <Title className="flex flex-row gap-x-2 items-center">
+            <Title className="flex flex-row items-center gap-x-2">
               <Button
                 variant="link"
-                className="p-0 h-auto text-lg font-semibold tracking-tight"
+                className="h-auto p-0 text-lg font-semibold tracking-tight"
                 asChild
               >
                 <NextLink
@@ -219,12 +219,12 @@ function SupportTicket(props: {
                 </NextLink>
               </Button>
               <span className="text-lg font-semibold tracking-tight text-gray-500">
-                <ChevronRightIcon className="w-4 h-4" />
+                <ChevronRightIcon className="h-4 w-4" />
               </span>
               <span>{ticket.subject}</span>
             </Title>
             <Subtitle>Support ticket detailed view</Subtitle>
-            <div className="py-12 space-y-6">
+            <div className="space-y-6 py-12">
               {comments.map(comment => (
                 <Comment key={comment.node.id} node={comment.node} />
               ))}
@@ -238,28 +238,28 @@ function SupportTicket(props: {
               </div>
             </div>
           </div>
-          <div className="text-sm shrink-0 w-1/3">
+          <div className="w-1/3 shrink-0 text-sm">
             <div className="flex flex-col gap-y-6 text-left">
               <div className="space-y-0">
-                <div className="text-white font-semibold">Support Ticket ID</div>
+                <div className="font-semibold text-white">Support Ticket ID</div>
                 <div className="text-muted-foreground">{ticket.id}</div>
               </div>
               <div className="space-y-0">
-                <div className="text-white font-semibold">Status</div>
+                <div className="font-semibold text-white">Status</div>
                 <div className="text-muted-foreground">
                   {ticket.status}
                   <div className="text-xs">{statusDescription[ticket.status]}</div>
                 </div>
               </div>
               <div className="space-y-0">
-                <div className="text-white font-semibold">Priority</div>
+                <div className="font-semibold text-white">Priority</div>
                 <div className="text-muted-foreground">
                   {ticket.priority}
                   <div className="text-xs">{priorityDescription[ticket.priority]}</div>
                 </div>
               </div>
               <div className="space-y-0">
-                <div className="text-white font-semibold">Last updated</div>
+                <div className="font-semibold text-white">Last updated</div>
                 <div>
                   <TimeAgo date={ticket.updatedAt} className="text-xs text-gray-500" />
                 </div>
diff --git a/packages/web/app/pages/_document.tsx b/packages/web/app/pages/_document.tsx
index eb1cdac68..d60209806 100644
--- a/packages/web/app/pages/_document.tsx
+++ b/packages/web/app/pages/_document.tsx
@@ -6,7 +6,7 @@ import '@/config/frontend-env';
 export default class MyDocument extends Document<{
   ids: Array<string>;
   css: string;
-  frontendEnv: typeof import('@/config/frontend-env')['env'];
+  frontendEnv: (typeof import('@/config/frontend-env'))['env'];
 }> {
   static async getInitialProps(ctx: DocumentContext) {
     if (globalThis.process.env.BUILD !== '1') {
diff --git a/packages/web/app/pages/_index.tsx b/packages/web/app/pages/_index.tsx
index b1861ad42..76d018d5e 100644
--- a/packages/web/app/pages/_index.tsx
+++ b/packages/web/app/pages/_index.tsx
@@ -15,21 +15,21 @@ const IndexPage = (): ReactElement => {
           flex h-screen
           w-1/3
           flex-col
-          bg-gray-800/10 pt-[30px] pl-[30px] pb-[50px] pr-[50px]
+          bg-gray-800/10 pb-[50px] pl-[30px] pr-[50px] pt-[30px]
         "
       >
         <GuildLink textClassName="flex-col" />
         <div className="mt-[50px] grow rounded-[30px] bg-gray-800/30" />
-        <Heading size="2xl" className="mt-[22px] mb-[5px]">
+        <Heading size="2xl" className="mb-[5px] mt-[22px]">
           Hive
         </Heading>
         <p className="font-light text-gray-500">Open GraphQL Platform</p>
       </div>
 
-      <div className="grow px-9 pt-11 pb-9">
+      <div className="grow px-9 pb-9 pt-11">
         <div className="mx-auto flex w-[500px] flex-col">
           <HiveLink />
-          <h2 className="mt-20 mb-1 text-2xl font-light text-white">
+          <h2 className="mb-1 mt-20 text-2xl font-light text-white">
             {isLoginPage ? 'Log In' : 'Create an account'}
           </h2>
           <p className="font-light text-[#9b9b9b]">
@@ -60,18 +60,18 @@ const IndexPage = (): ReactElement => {
             <hr className="grow border-gray-800" />
           </div>
           <Input placeholder="Email" />
-          <Input placeholder="Password" type="password" className="mt-7 mb-1" />
+          <Input placeholder="Password" type="password" className="mb-1 mt-7" />
           <Link
             variant="primary"
             href="#"
-            className={clsx('ml-auto mb-11', !isLoginPage && 'invisible')}
+            className={clsx('mb-11 ml-auto', !isLoginPage && 'invisible')}
           >
             Forgot password?
           </Link>
           <Button size="large" variant="primary" block>
             {isLoginPage ? 'Log In' : 'Create Account'}
           </Button>
-          <GuildLink className="mx-auto mt-20 mb-6 opacity-10 transition hover:opacity-100" />
+          <GuildLink className="mx-auto mb-6 mt-20 opacity-10 transition hover:opacity-100" />
           <p className={clsx('mb-4 text-xs text-[#9b9b9b]', isLoginPage && 'invisible')}>
             Creating an account means you're okay with our{' '}
             <Link variant="primary" href="#">
diff --git a/packages/web/app/pages/action/transfer/[organizationId]/[code].tsx b/packages/web/app/pages/action/transfer/[organizationId]/[code].tsx
index f191eb62d..192d31e80 100644
--- a/packages/web/app/pages/action/transfer/[organizationId]/[code].tsx
+++ b/packages/web/app/pages/action/transfer/[organizationId]/[code].tsx
@@ -103,8 +103,8 @@ function OrganizationTransferPage() {
       <Title title="Organization Transfer" />
       <DataWrapper query={query}>
         {({ data }) => (
-          <div className="w-full h-full flex flex-row items-center justify-center">
-            <div className="flex flex-col text-center md:w-2/3 w-full">
+          <div className="flex h-full w-full flex-row items-center justify-center">
+            <div className="flex w-full flex-col text-center md:w-2/3">
               {data.organizationTransferRequest == null ? (
                 <>
                   <h1 className={classes.title}>Organization Transfer Error</h1>
diff --git a/packages/web/app/pages/auth/[[...path]].tsx b/packages/web/app/pages/auth/[[...path]].tsx
index d45b7f93a..65aa7c01d 100644
--- a/packages/web/app/pages/auth/[[...path]].tsx
+++ b/packages/web/app/pages/auth/[[...path]].tsx
@@ -111,7 +111,7 @@ export default function Auth(props: { oidcProviderId: string | null }): ReactEle
         color={{ main: '#fff', sub: '#fff' }}
       />
       {props.oidcProviderId ? (
-        <div className=" p-5 bg-white rounded-md max-w-md mx-auto text-center">
+        <div className=" mx-auto max-w-md rounded-md bg-white p-5 text-center">
           {error ? (
             <>
               <div className="text-red-500">{error}</div>
@@ -124,7 +124,7 @@ export default function Auth(props: { oidcProviderId: string | null }): ReactEle
             </>
           ) : (
             <>
-              <Spinner className="w-20 h-20 mx-auto" />
+              <Spinner className="mx-auto h-20 w-20" />
               <div className="mt-3">Starting OIDC Login Flow.</div>
             </>
           )}
diff --git a/packages/web/app/pages/join/[inviteCode].tsx b/packages/web/app/pages/join/[inviteCode].tsx
index d30585530..9fe8ae498 100644
--- a/packages/web/app/pages/join/[inviteCode].tsx
+++ b/packages/web/app/pages/join/[inviteCode].tsx
@@ -87,8 +87,8 @@ function JoinOrganizationPage() {
           const invitation = data.organizationByInviteCode;
 
           return (
-            <div className="w-full h-full flex flex-row items-center justify-center">
-              <div className="flex flex-col text-center md:w-2/3 w-full">
+            <div className="flex h-full w-full flex-row items-center justify-center">
+              <div className="flex w-full flex-col text-center md:w-2/3">
                 {invitation.__typename === 'OrganizationInvitationError' ? (
                   <>
                     <h1 className={classes.title}>Invitation Error</h1>
diff --git a/packages/web/app/pages/org/new.tsx b/packages/web/app/pages/org/new.tsx
index 377591cba..02455ee28 100644
--- a/packages/web/app/pages/org/new.tsx
+++ b/packages/web/app/pages/org/new.tsx
@@ -12,11 +12,11 @@ function CreateOrgPage(): ReactElement {
   return (
     <>
       <MetaTitle title="Create Organization" />
-      <div className="h-full grow flex items-center">
+      <div className="flex h-full grow items-center">
         <Button
           variant="outline"
           onClick={() => router.push('/logout')}
-          className="absolute top-6 right-6"
+          className="absolute right-6 top-6"
         >
           <LogOutIcon className="mr-2 h-4 w-4" /> Sign out
         </Button>
diff --git a/packages/web/app/public/styles.css b/packages/web/app/public/styles.css
index bdd7a88e7..8f0636bf4 100644
--- a/packages/web/app/public/styles.css
+++ b/packages/web/app/public/styles.css
@@ -81,7 +81,9 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: 'rlig' 1, 'calt' 1;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
   }
 }
 
@@ -114,7 +116,9 @@
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
-    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
+    -webkit-transition:
+      color 9999s ease-out,
+      background-color 9999s ease-out;
     -webkit-transition-delay: 9999s;
   }
 
@@ -153,7 +157,9 @@
 
   .hive-modal {
     transform: translate(-50%, -50%);
-    box-shadow: hsl(206 22% 7% / 35%) 0 10px 38px -10px, hsl(206 22% 7% / 20%) 0 10px 20px -15px;
+    box-shadow:
+      hsl(206 22% 7% / 35%) 0 10px 38px -10px,
+      hsl(206 22% 7% / 20%) 0 10px 20px -15px;
   }
 
   @media (prefers-reduced-motion: no-preference) {
diff --git a/packages/web/app/src/components/admin/AdminStats.tsx b/packages/web/app/src/components/admin/AdminStats.tsx
index 1ad2388c9..d21085200 100644
--- a/packages/web/app/src/components/admin/AdminStats.tsx
+++ b/packages/web/app/src/components/admin/AdminStats.tsx
@@ -348,7 +348,7 @@ function OrganizationTable({ data }: { data: Organization[] }) {
         </TBody>
       </Table>
 
-      <div className="py-3 flex flex-row items-center justify-center gap-4">
+      <div className="flex flex-row items-center justify-center gap-4 py-3">
         <Button
           variant="secondary"
           onClick={firstPage}
@@ -362,9 +362,9 @@ function OrganizationTable({ data }: { data: Organization[] }) {
           onClick={tableInstance.previousPage}
           disabled={!tableInstance.getCanPreviousPage()}
         >
-          <ChevronUpIcon className="-rotate-90 h-5 w-auto" />
+          <ChevronUpIcon className="h-5 w-auto -rotate-90" />
         </Button>
-        <span className="font-bold whitespace-nowrap text-sm">
+        <span className="whitespace-nowrap text-sm font-bold">
           {tableInstance.getState().pagination.pageIndex + 1} / {tableInstance.getPageCount()}
         </span>
         <Button
@@ -373,7 +373,7 @@ function OrganizationTable({ data }: { data: Organization[] }) {
           onClick={tableInstance.nextPage}
           disabled={!tableInstance.getCanNextPage()}
         >
-          <ChevronUpIcon className="rotate-90 h-5 w-auto" />
+          <ChevronUpIcon className="h-5 w-auto rotate-90" />
         </Button>
         <Button variant="secondary" onClick={lastPage} disabled={!tableInstance.getCanNextPage()}>
           Last
@@ -444,7 +444,7 @@ export function AdminStats({
     <DataWrapper query={query}>
       {({ data }) => (
         <div className="flex flex-col gap-6">
-          <div className="flex rounded-md p-5 border border-gray-800 bg-gray-900/50 justify-between">
+          <div className="flex justify-between rounded-md border border-gray-800 bg-gray-900/50 p-5">
             <OverallStat label="Users" value={overall.users} />
             <OverallStat label="Organizations" value={overall.organizations} />
             <OverallStat label="Projects" value={overall.projects} />
diff --git a/packages/web/app/src/components/common/LoadingAPI.tsx b/packages/web/app/src/components/common/LoadingAPI.tsx
index 2b2339c66..67f12c107 100644
--- a/packages/web/app/src/components/common/LoadingAPI.tsx
+++ b/packages/web/app/src/components/common/LoadingAPI.tsx
@@ -7,5 +7,5 @@ export const LoadingAPIIndicator = memo(() => {
 
   if (!isFetching) return null;
 
-  return <div className="hive-loading-indicator w-1/2 fixed h-1.5 will-change-transform" />;
+  return <div className="hive-loading-indicator fixed h-1.5 w-1/2 will-change-transform" />;
 });
diff --git a/packages/web/app/src/components/common/index.tsx b/packages/web/app/src/components/common/index.tsx
index 011ff5b8c..a6357c080 100644
--- a/packages/web/app/src/components/common/index.tsx
+++ b/packages/web/app/src/components/common/index.tsx
@@ -15,11 +15,11 @@ export function Label({ className, children, ...props }: ComponentProps<'span'>)
       className={clsx(
         `
   inline-block
-  py-1 px-2
-  rounded
-  bg-yellow-50 dark:bg-white/10
-  text-yellow-600 dark:text-yellow-300
-  text-xs font-medium tracking-widest`,
+  rounded bg-yellow-50
+  px-2
+  py-1 text-xs
+  font-medium tracking-widest
+  text-yellow-600 dark:bg-white/10 dark:text-yellow-300`,
         className,
       )}
       {...props}
@@ -47,11 +47,11 @@ export const Page = ({
   className?: string;
 }): ReactElement => {
   return (
-    <div className={clsx('flex flex-col relative h-full', className)}>
-      <div className="p-4 shrink-0 flex flex-row justify-between items-center">
+    <div className={clsx('relative flex h-full flex-col', className)}>
+      <div className="flex shrink-0 flex-row items-center justify-between p-4">
         <div>
-          <h2 className="text-xl text-black dark:text-white font-bold">{title}</h2>
-          <span className="text-sm text-gray-600 dark:text-gray-300 mt-2">{subtitle}</span>
+          <h2 className="text-xl font-bold text-black dark:text-white">{title}</h2>
+          <span className="mt-2 text-sm text-gray-600 dark:text-gray-300">{subtitle}</span>
         </div>
         <div className="flex flex-row items-center space-x-2">{actions}</div>
       </div>
@@ -73,12 +73,12 @@ export const Page = ({
 
 export const Section = {
   Title: ({ className, children, ...props }: ComponentProps<'h3'>): ReactElement => (
-    <h3 className={clsx('text-base text-black dark:text-white font-bold', className)} {...props}>
+    <h3 className={clsx('text-base font-bold text-black dark:text-white', className)} {...props}>
       {children}
     </h3>
   ),
   BigTitle: ({ className, children, ...props }: ComponentProps<'h2'>): ReactElement => (
-    <h2 className={clsx('text-base text-black dark:text-white font-bold', className)} {...props}>
+    <h2 className={clsx('text-base font-bold text-black dark:text-white', className)} {...props}>
       {children}
     </h2>
   ),
@@ -101,11 +101,11 @@ export function Scale({
   className?: string;
 }): ReactElement {
   return (
-    <div className={clsx('flex flex-row space-x-1 grow-0', className)}>
+    <div className={clsx('flex grow-0 flex-row space-x-1', className)}>
       {new Array(size).fill(null).map((_, i) => (
         <div
           key={i}
-          className={clsx('w-1 h-4', value >= i * (max / size) ? 'bg-emerald-400' : 'bg-gray-200')}
+          className={clsx('h-4 w-1', value >= i * (max / size) ? 'bg-emerald-400' : 'bg-gray-200')}
         />
       ))}
     </div>
diff --git a/packages/web/app/src/components/get-started/wizard.tsx b/packages/web/app/src/components/get-started/wizard.tsx
index 12e3f7326..dbfd21cf5 100644
--- a/packages/web/app/src/components/get-started/wizard.tsx
+++ b/packages/web/app/src/components/get-started/wizard.tsx
@@ -47,7 +47,7 @@ export function GetStartedProgress(props: {
           {remaining} remaining task{remaining > 1 ? 's' : ''}
         </div>
         <div>
-          <div className="relative mt-1 w-full overflow-hidden rounded bg-gray-800 h-[5px]">
+          <div className="relative mt-1 h-[5px] w-full overflow-hidden rounded bg-gray-800">
             <div
               className="h-full bg-orange-500"
               style={{ width: `${(completed / total) * 100}%` }}
@@ -136,7 +136,7 @@ function Task({
         className={clsx('h-5 w-auto', completed ? 'text-green-500' : 'text-gray-500')}
       />
 
-      <span className={completed ? 'opacity-50 line-through' : 'hover:opacity-80'}>{children}</span>
+      <span className={completed ? 'line-through opacity-50' : 'hover:opacity-80'}>{children}</span>
     </a>
   );
 }
diff --git a/packages/web/app/src/components/layouts/organization.tsx b/packages/web/app/src/components/layouts/organization.tsx
index a737a244a..9f59bff99 100644
--- a/packages/web/app/src/components/layouts/organization.tsx
+++ b/packages/web/app/src/components/layouts/organization.tsx
@@ -99,7 +99,7 @@ export function OrganizationLayout({
       <header>
         <div className="container flex h-[84px] items-center justify-between">
           <div className="flex flex-row items-center gap-4">
-            <HiveLink className="w-8 h-8" />
+            <HiveLink className="h-8 w-8" />
             {currentOrganization && organizations ? (
               <Select
                 defaultValue={currentOrganization.cleanId}
@@ -123,7 +123,7 @@ export function OrganizationLayout({
                 </SelectContent>
               </Select>
             ) : (
-              <div className="w-48 h-5 bg-gray-800 rounded-full animate-pulse" />
+              <div className="h-5 w-48 animate-pulse rounded-full bg-gray-800" />
             )}
           </div>
           <div>
@@ -136,7 +136,7 @@ export function OrganizationLayout({
         </div>
       </header>
       <div className="relative border-b border-gray-800">
-        <div className="container flex justify-between items-center">
+        <div className="container flex items-center justify-between">
           {currentOrganization && meInCurrentOrg ? (
             <Tabs value={page}>
               <Tabs.List>
@@ -230,10 +230,10 @@ export function OrganizationLayout({
               </Tabs.List>
             </Tabs>
           ) : (
-            <div className="flex flex-row gap-x-8 px-4 py-3 border-b-[2px] border-b-transparent">
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
+            <div className="flex flex-row gap-x-8 border-b-[2px] border-b-transparent px-4 py-3">
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
             </div>
           )}
           {currentOrganization ? (
diff --git a/packages/web/app/src/components/layouts/project.tsx b/packages/web/app/src/components/layouts/project.tsx
index 52d1aa856..edf3898dc 100644
--- a/packages/web/app/src/components/layouts/project.tsx
+++ b/packages/web/app/src/components/layouts/project.tsx
@@ -117,23 +117,23 @@ export function ProjectLayout({
       <header>
         <div className="container flex h-[84px] items-center justify-between">
           <div className="flex flex-row items-center gap-4">
-            <HiveLink className="w-8 h-8" />
+            <HiveLink className="h-8 w-8" />
             {currentOrganization ? (
               <NextLink
                 href={{
                   pathname: '/[organizationId]',
                   query: { organizationId: currentOrganization.cleanId },
                 }}
-                className="shrink-0 font-medium truncate max-w-[200px]"
+                className="max-w-[200px] shrink-0 truncate font-medium"
               >
                 {currentOrganization.name}
               </NextLink>
             ) : (
-              <div className="w-48 max-w-[200px] h-5 bg-gray-800 rounded-full animate-pulse" />
+              <div className="h-5 w-48 max-w-[200px] animate-pulse rounded-full bg-gray-800" />
             )}
             {projects?.length && currentProject ? (
               <>
-                <div className="text-gray-500 italic">/</div>
+                <div className="italic text-gray-500">/</div>
                 <Select
                   defaultValue={currentProject.cleanId}
                   onValueChange={id => {
@@ -156,7 +156,7 @@ export function ProjectLayout({
                 </Select>
               </>
             ) : (
-              <div className="w-48 h-5 bg-gray-800 rounded-full animate-pulse" />
+              <div className="h-5 w-48 animate-pulse rounded-full bg-gray-800" />
             )}
           </div>
           <div>
@@ -174,7 +174,7 @@ export function ProjectLayout({
       )}
 
       <div className="relative border-b border-gray-800">
-        <div className="container flex justify-between items-center">
+        <div className="container flex items-center justify-between">
           {currentOrganization && currentProject ? (
             <Tabs value={page}>
               <Tabs.List>
@@ -242,10 +242,10 @@ export function ProjectLayout({
               </Tabs.List>
             </Tabs>
           ) : (
-            <div className="flex flex-row gap-x-8 px-4 py-3 border-b-[2px] border-b-transparent">
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
+            <div className="flex flex-row gap-x-8 border-b-[2px] border-b-transparent px-4 py-3">
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
             </div>
           )}
           {currentProject ? (
@@ -257,7 +257,7 @@ export function ProjectLayout({
           <CreateTargetModal isOpen={isModalOpen} toggleModalOpen={toggleModalOpen} />
         </div>
       </div>
-      <div className="container pb-7 h-full">
+      <div className="container h-full pb-7">
         <div className={className}>{children}</div>
       </div>
     </>
diff --git a/packages/web/app/src/components/layouts/target.tsx b/packages/web/app/src/components/layouts/target.tsx
index 350cdf709..30b8950ed 100644
--- a/packages/web/app/src/components/layouts/target.tsx
+++ b/packages/web/app/src/components/layouts/target.tsx
@@ -145,7 +145,7 @@ export const TargetLayout = ({
       <header>
         <div className="container flex h-[84px] items-center justify-between">
           <div className="flex flex-row items-center gap-4">
-            <HiveLink className="w-8 h-8" />
+            <HiveLink className="h-8 w-8" />
             {currentOrganization ? (
               <NextLink
                 href={{
@@ -154,14 +154,14 @@ export const TargetLayout = ({
                     organizationId: currentOrganization.cleanId,
                   },
                 }}
-                className="shrink-0 font-medium truncate max-w-[200px]"
+                className="max-w-[200px] shrink-0 truncate font-medium"
               >
                 {currentOrganization.name}
               </NextLink>
             ) : (
-              <div className="w-48 max-w-[200px] h-5 bg-gray-800 rounded-full animate-pulse" />
+              <div className="h-5 w-48 max-w-[200px] animate-pulse rounded-full bg-gray-800" />
             )}
-            <div className="text-gray-500 italic">/</div>
+            <div className="italic text-gray-500">/</div>
             {currentOrganization && currentProject ? (
               <NextLink
                 href={{
@@ -171,14 +171,14 @@ export const TargetLayout = ({
                     projectId: currentProject.cleanId,
                   },
                 }}
-                className="shrink-0 font-medium truncate max-w-[200px]"
+                className="max-w-[200px] shrink-0 truncate font-medium"
               >
                 {currentProject.name}
               </NextLink>
             ) : (
-              <div className="w-48 max-w-[200px] h-5 bg-gray-800 rounded-full animate-pulse" />
+              <div className="h-5 w-48 max-w-[200px] animate-pulse rounded-full bg-gray-800" />
             )}
-            <div className="text-gray-500 italic">/</div>
+            <div className="italic text-gray-500">/</div>
             {targets?.length && currentOrganization && currentProject && currentTarget ? (
               <>
                 <Select
@@ -204,7 +204,7 @@ export const TargetLayout = ({
                 </Select>
               </>
             ) : (
-              <div className="w-48 max-w-[200px] h-5 bg-gray-800 rounded-full animate-pulse" />
+              <div className="h-5 w-48 max-w-[200px] animate-pulse rounded-full bg-gray-800" />
             )}
           </div>
           <div>
@@ -222,7 +222,7 @@ export const TargetLayout = ({
       ) : null}
 
       <div className="relative border-b border-gray-800">
-        <div className="container flex justify-between items-center">
+        <div className="container flex items-center justify-between">
           {currentOrganization && currentProject && currentTarget ? (
             <Tabs className="flex h-full grow flex-col" value={page}>
               <Tabs.List>
@@ -333,10 +333,10 @@ export const TargetLayout = ({
               </Tabs.List>
             </Tabs>
           ) : (
-            <div className="flex flex-row gap-x-8 px-4 py-3 border-b-[2px] border-b-transparent">
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
-              <div className="w-12 h-5 bg-gray-800 rounded-full animate-pulse" />
+            <div className="flex flex-row gap-x-8 border-b-[2px] border-b-transparent px-4 py-3">
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
+              <div className="h-5 w-12 animate-pulse rounded-full bg-gray-800" />
             </div>
           )}
           {currentTarget ? (
@@ -355,9 +355,9 @@ export const TargetLayout = ({
           ) : null}
         </div>
       </div>
-      <div className="container pb-7 h-full">
-        <div className={cn('flex justify-between gap-12 h-full', className)}>
-          <div className="grow flex flex-col">{children}</div>
+      <div className="container h-full pb-7">
+        <div className={cn('flex h-full justify-between gap-12', className)}>
+          <div className="flex grow flex-col">{children}</div>
         </div>
       </div>
     </>
diff --git a/packages/web/app/src/components/organization/Permissions.tsx b/packages/web/app/src/components/organization/Permissions.tsx
index 1ccad38c5..8515127a0 100644
--- a/packages/web/app/src/components/organization/Permissions.tsx
+++ b/packages/web/app/src/components/organization/Permissions.tsx
@@ -84,7 +84,7 @@ export const PermissionScopeItem = <
     <div
       key={props.scope.name}
       className={clsx(
-        'py-2 flex flex-row justify-between items-center',
+        'flex flex-row items-center justify-between py-2',
         props.canManageScope === false ? 'opacity-50' : null,
       )}
     >
diff --git a/packages/web/app/src/components/organization/Usage.tsx b/packages/web/app/src/components/organization/Usage.tsx
index da41a7908..77b928729 100644
--- a/packages/web/app/src/components/organization/Usage.tsx
+++ b/packages/web/app/src/components/organization/Usage.tsx
@@ -44,7 +44,7 @@ export function OrganizationUsageEstimationView(props: {
   });
 
   return (
-    <div className="top-7 right-4">
+    <div className="right-4 top-7">
       <DataWrapper query={query}>
         {result => (
           <Table>
diff --git a/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx b/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
index b08a652ca..e96b9ca8f 100644
--- a/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
+++ b/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
@@ -93,7 +93,7 @@ function Plan(plan: {
           {plan.features.map((feature, i) => (
             <div key={i}>
               <Section.Subtitle className="flex items-center gap-1">
-                <CheckIcon className="text-gray-500 h-5 w-auto" />
+                <CheckIcon className="h-5 w-auto text-gray-500" />
                 {feature}
               </Section.Subtitle>
             </div>
diff --git a/packages/web/app/src/components/organization/billing/ProPlanBillingWarm.tsx b/packages/web/app/src/components/organization/billing/ProPlanBillingWarm.tsx
index 55a6112cb..e5931f30d 100644
--- a/packages/web/app/src/components/organization/billing/ProPlanBillingWarm.tsx
+++ b/packages/web/app/src/components/organization/billing/ProPlanBillingWarm.tsx
@@ -16,7 +16,7 @@ export function ProPlanBilling(props: {
   const organization = useFragment(ProPlanBilling_OrganizationFragment, props.organization);
   if (organization?.billingConfiguration?.hasPaymentIssues) {
     return (
-      <Callout type="warning" className="w-full mb-2">
+      <Callout type="warning" className="mb-2 w-full">
         <b>Your organization has a rejected payment!</b>
         <br />
         Please review your recent invoices and update your payment method.
diff --git a/packages/web/app/src/components/organization/billing/RateLimitWarn.tsx b/packages/web/app/src/components/organization/billing/RateLimitWarn.tsx
index 87c39cdff..4c5344eee 100644
--- a/packages/web/app/src/components/organization/billing/RateLimitWarn.tsx
+++ b/packages/web/app/src/components/organization/billing/RateLimitWarn.tsx
@@ -23,7 +23,7 @@ export function RateLimitWarn(props: {
 
   if (organization.plan === BillingPlanType.Enterprise) {
     return (
-      <Callout type="warning" className="w-full mb-2">
+      <Callout type="warning" className="mb-2 w-full">
         <b>Your organization has reached it's contract limit.</b>
         <br />
         The data under your organization is still being processed and no data will be lost.
@@ -34,7 +34,7 @@ export function RateLimitWarn(props: {
   }
 
   return (
-    <Callout type="warning" className="w-full mb-2">
+    <Callout type="warning" className="mb-2 w-full">
       <b>Your organization is being rate-limited for operations.</b>
       <br />
       Since you have reached your organization rate-limit and data ingestion limitation, your
diff --git a/packages/web/app/src/components/organization/settings/oidc-integration-section.tsx b/packages/web/app/src/components/organization/settings/oidc-integration-section.tsx
index f0c5e2df4..ff863c181 100644
--- a/packages/web/app/src/components/organization/settings/oidc-integration-section.tsx
+++ b/packages/web/app/src/components/organization/settings/oidc-integration-section.tsx
@@ -606,7 +606,7 @@ function RemoveOIDCIntegrationModal(props: {
           </>
         ) : (
           <>
-            <Tag color="yellow" className="py-2.5 px-4">
+            <Tag color="yellow" className="px-4 py-2.5">
               <AlertTriangleIcon className="h-5 w-5" />
               <p className="ml-3">
                 This action is not reversible and <b>deletes all users</b> that have signed in with
diff --git a/packages/web/app/src/components/policy/policy-config-box.tsx b/packages/web/app/src/components/policy/policy-config-box.tsx
index a39b508fa..ef87fb8ab 100644
--- a/packages/web/app/src/components/policy/policy-config-box.tsx
+++ b/packages/web/app/src/components/policy/policy-config-box.tsx
@@ -9,14 +9,14 @@ export function PolicyConfigBox(props: Props) {
   return (
     <div
       className={clsx(
-        'px-4 items-center font-mono pb-2',
+        'items-center px-4 pb-2 font-mono',
         'title' in props ? undefined : 'flex',
         props.className,
       )}
     >
       {'title' in props ? (
         <>
-          <div className="text-xs pb-1 text-gray-600">{props.title}</div>
+          <div className="pb-1 text-xs text-gray-600">{props.title}</div>
           <div>{props.children}</div>
         </>
       ) : (
diff --git a/packages/web/app/src/components/policy/policy-list-item.tsx b/packages/web/app/src/components/policy/policy-list-item.tsx
index 6afc9710e..757743122 100644
--- a/packages/web/app/src/components/policy/policy-list-item.tsx
+++ b/packages/web/app/src/components/policy/policy-list-item.tsx
@@ -46,7 +46,7 @@ export function PolicyListItem(props: {
 
   return (
     <Tooltip.Provider delayDuration={100}>
-      <div className="py-4 px-1">
+      <div className="px-1 py-4">
         <div className="flex gap-4">
           <div>
             <Checkbox
@@ -84,7 +84,7 @@ export function PolicyListItem(props: {
                 <div>
                   <SeverityLevelToggle canTurnOff={props.overridingParentRule} rule={ruleInfo.id} />
                 </div>
-                <div className="grow grid grid-cols-4 [&>*]:border-l-gray-800 [&>*]:border-l-[1px] align-middle [&>*]:min-h-[40px]">
+                <div className="grid grow grid-cols-4 align-middle [&>*]:min-h-[40px] [&>*]:border-l-[1px] [&>*]:border-l-gray-800">
                   {shouldShowRuleConfig && (
                     <PolicyRuleConfig
                       rule={ruleInfo.id}
@@ -96,8 +96,8 @@ export function PolicyListItem(props: {
               </div>
             ) : null}
             {props.overridingParentRule && enabled ? (
-              <div className="text-xs font-medium mt-4 text-gray-400">
-                <p className="text-orange-500 text-sm font-medium inline-block mr-2">!</p>
+              <div className="mt-4 text-xs font-medium text-gray-400">
+                <p className="mr-2 inline-block text-sm font-medium text-orange-500">!</p>
                 You are {severity === RuleInstanceSeverityLevel.Off ? 'disabling' : 'overriding'} a
                 rule configured at the organization level
               </div>
diff --git a/packages/web/app/src/components/policy/policy-settings.tsx b/packages/web/app/src/components/policy/policy-settings.tsx
index b152b1d4e..e50e06c0d 100644
--- a/packages/web/app/src/components/policy/policy-settings.tsx
+++ b/packages/web/app/src/components/policy/policy-settings.tsx
@@ -81,16 +81,19 @@ function PolicySettingsListForm({
     return {
       allowOverrides: currentState?.allowOverrides ?? true,
       rules:
-        currentState?.rules.reduce((acc, ruleInstance) => {
-          return {
-            ...acc,
-            [ruleInstance.rule.id]: {
-              enabled: true,
-              severity: ruleInstance.severity,
-              config: ruleInstance.configuration,
-            },
-          };
-        }, {} as PolicyFormValues['rules']) ?? {},
+        currentState?.rules.reduce(
+          (acc, ruleInstance) => {
+            return {
+              ...acc,
+              [ruleInstance.rule.id]: {
+                enabled: true,
+                severity: ruleInstance.severity,
+                config: ruleInstance.configuration,
+              },
+            };
+          },
+          {} as PolicyFormValues['rules'],
+        ) ?? {},
     };
   }, [currentState]);
 
@@ -104,7 +107,7 @@ function PolicySettingsListForm({
       {props => (
         <>
           {children ? children(props) : null}
-          <div className="justify-end flex items-center">
+          <div className="flex items-center justify-end">
             {props.dirty ? <p className="pr-2 text-sm text-gray-500">Unsaved changes</p> : null}
             <Button
               disabled={!props.dirty || saving}
@@ -116,7 +119,7 @@ function PolicySettingsListForm({
             </Button>
           </div>
           {error ? (
-            <Callout type="error" className="w-2/3 mx-auto">
+            <Callout type="error" className="mx-auto w-2/3">
               <b>Oops, something went wrong.</b>
               <br />
               {error}
diff --git a/packages/web/app/src/components/policy/rules-configuration/boolean-config.tsx b/packages/web/app/src/components/policy/rules-configuration/boolean-config.tsx
index 4a4cc0ddd..5c32351e6 100644
--- a/packages/web/app/src/components/policy/rules-configuration/boolean-config.tsx
+++ b/packages/web/app/src/components/policy/rules-configuration/boolean-config.tsx
@@ -21,7 +21,7 @@ export const PolicyBooleanToggle = (props: {
 
   const label = (
     <label
-      className="text-xs pb-1 text-gray-500 pl-2 font-mono"
+      className="pb-1 pl-2 font-mono text-xs text-gray-500"
       htmlFor={`${props.rule}_${props.propertyName}`}
     >
       {props.title}
diff --git a/packages/web/app/src/components/policy/rules-configuration/enum-config.tsx b/packages/web/app/src/components/policy/rules-configuration/enum-config.tsx
index 29c48d5b5..e9043606b 100644
--- a/packages/web/app/src/components/policy/rules-configuration/enum-config.tsx
+++ b/packages/web/app/src/components/policy/rules-configuration/enum-config.tsx
@@ -28,7 +28,7 @@ export const PolicyEnumSelect = (props: {
   return (
     <PolicyConfigBox
       title={
-        <div className="items-center flex">
+        <div className="flex items-center">
           <div>{props.title}</div>
           {props.tooltip ? (
             <Tooltip content={props.tooltip}>
@@ -55,7 +55,7 @@ export const PolicyEnumSelect = (props: {
             value={option.value}
             title={option.label}
             className={clsx(
-              'hover:text-white text-xs',
+              'text-xs hover:text-white',
               currentValue === option.value && 'bg-gray-800 text-white',
             )}
           >
diff --git a/packages/web/app/src/components/policy/rules-configuration/multiselect-config.tsx b/packages/web/app/src/components/policy/rules-configuration/multiselect-config.tsx
index 86944056e..abebebf7d 100644
--- a/packages/web/app/src/components/policy/rules-configuration/multiselect-config.tsx
+++ b/packages/web/app/src/components/policy/rules-configuration/multiselect-config.tsx
@@ -21,7 +21,7 @@ export const PolicyMultiSelect = (props: {
   const currentValues = getConfigValue<string[]>(props.propertyName);
 
   useEffect(() => {
-    if (!config && typeof props.defaultValues !== undefined) {
+    if (!config && typeof props.defaultValues !== 'undefined') {
       setConfig(props.propertyName, props.defaultValues);
     }
   }, []);
@@ -29,7 +29,7 @@ export const PolicyMultiSelect = (props: {
   return (
     <PolicyConfigBox
       title={
-        <div className="items-center flex">
+        <div className="flex items-center">
           <div>{props.title}</div>
           {props.tooltip ? (
             <Tooltip content={props.tooltip}>
diff --git a/packages/web/app/src/components/policy/rules-configuration/severity-toggle.tsx b/packages/web/app/src/components/policy/rules-configuration/severity-toggle.tsx
index 184f58a1a..0d192ee9e 100644
--- a/packages/web/app/src/components/policy/rules-configuration/severity-toggle.tsx
+++ b/packages/web/app/src/components/policy/rules-configuration/severity-toggle.tsx
@@ -42,7 +42,7 @@ export const SeverityLevelToggle = (props: { rule: string; canTurnOff: boolean }
   }
 
   return (
-    <PolicyConfigBox title="severity" className="first:pl-0 row-start-1 row-end-6">
+    <PolicyConfigBox title="severity" className="row-start-1 row-end-6 first:pl-0">
       <ToggleGroup
         defaultValue="list"
         onValueChange={newValue => {
diff --git a/packages/web/app/src/components/policy/rules-configuration/string-config.tsx b/packages/web/app/src/components/policy/rules-configuration/string-config.tsx
index 7cea9c5ba..5a7c60f0b 100644
--- a/packages/web/app/src/components/policy/rules-configuration/string-config.tsx
+++ b/packages/web/app/src/components/policy/rules-configuration/string-config.tsx
@@ -23,7 +23,7 @@ export const PolicyStringInputConfig = (props: {
   return (
     <PolicyConfigBox
       title={
-        <div className="items-center flex">
+        <div className="flex items-center">
           <div>{props.title}</div>
           {props.tooltip ? (
             <Tooltip content={props.tooltip}>
diff --git a/packages/web/app/src/components/project/alerts/channels-table.tsx b/packages/web/app/src/components/project/alerts/channels-table.tsx
index 838566194..2a15521c0 100644
--- a/packages/web/app/src/components/project/alerts/channels-table.tsx
+++ b/packages/web/app/src/components/project/alerts/channels-table.tsx
@@ -37,7 +37,7 @@ export function ChannelsTable(props: {
               />
             </Td>
             <Td>{channel.name}</Td>
-            <Td className="text-xs truncate text-gray-400">
+            <Td className="truncate text-xs text-gray-400">
               {channel.__typename === 'AlertSlackChannel'
                 ? channel.channel
                 : channel.__typename === 'AlertWebhookChannel'
diff --git a/packages/web/app/src/components/project/migration-toast.tsx b/packages/web/app/src/components/project/migration-toast.tsx
index d54cbb2f0..01261d328 100644
--- a/packages/web/app/src/components/project/migration-toast.tsx
+++ b/packages/web/app/src/components/project/migration-toast.tsx
@@ -2,15 +2,15 @@ import { Button } from '@/components/v2';
 
 export function ProjectMigrationToast({ projectId, orgId }: { projectId: string; orgId: string }) {
   return (
-    <div className="fixed right-24 bottom-6 p-4 rounded-md bg-gray-900 flex flex-row justify-center gap-6 z-10">
+    <div className="fixed bottom-6 right-24 z-10 flex flex-row justify-center gap-6 rounded-md bg-gray-900 p-4">
       <div>
-        <div className="font-medium text-sm text-white mb-2">
+        <div className="mb-2 text-sm font-medium text-white">
           This project utilizes the outdated model of the registry
         </div>
-        <p className="text-gray-400 text-xs">
+        <p className="text-xs text-gray-400">
           For an optimized workflow, kindly switch to the modern model.
         </p>
-        <p className="text-gray-400 text-xs">
+        <p className="text-xs text-gray-400">
           The legacy model will cease to be accessible in a few months' time.
         </p>
       </div>
diff --git a/packages/web/app/src/components/project/settings/external-composition.tsx b/packages/web/app/src/components/project/settings/external-composition.tsx
index 44868359f..015cdef3f 100644
--- a/packages/web/app/src/components/project/settings/external-composition.tsx
+++ b/packages/web/app/src/components/project/settings/external-composition.tsx
@@ -82,7 +82,7 @@ const ExternalCompositionStatus = ({
     <Tooltip.Provider delayDuration={100}>
       {query.fetching ? (
         <Tooltip content="Connecting..." contentProps={{ side: 'right' }}>
-          <UpdateIcon className="animate-spin h-5 w-5 text-gray-500" />
+          <UpdateIcon className="h-5 w-5 animate-spin text-gray-500" />
         </Tooltip>
       ) : null}
       {error ? (
@@ -158,7 +158,7 @@ const ExternalCompositionForm = ({
         <div>
           <span>HTTP endpoint</span>
           <p className="pb-2 text-xs text-gray-300">A POST request will be sent to that endpoint</p>
-          <div className="flex gap-2 items-center">
+          <div className="flex items-center gap-2">
             <Input
               placeholder="Endpoint"
               name="endpoint"
diff --git a/packages/web/app/src/components/project/settings/model-migration.tsx b/packages/web/app/src/components/project/settings/model-migration.tsx
index 2b7df90cd..f724f3a6b 100644
--- a/packages/web/app/src/components/project/settings/model-migration.tsx
+++ b/packages/web/app/src/components/project/settings/model-migration.tsx
@@ -6,10 +6,10 @@ import { RegistryModel } from '@/graphql';
 import { useNotifications, useRouteSelector } from '@/lib/hooks';
 import { CheckIcon, Cross2Icon, QuestionMarkCircledIcon } from '@radix-ui/react-icons';
 
-const divider = <div className="border-b border-gray-900 mt-4" />;
+const divider = <div className="mt-4 border-b border-gray-900" />;
 
 function Flag(props: { children: ReactNode }): ReactElement {
-  return <span className="rounded px-1 py-0.5 bg-gray-900/50 text-gray-300">{props.children}</span>;
+  return <span className="rounded bg-gray-900/50 px-1 py-0.5 text-gray-300">{props.children}</span>;
 }
 
 const noFlag = <span className="text-gray-300">(defaults)</span>;
@@ -23,12 +23,12 @@ function Row(props: {
 }) {
   return (
     <div className="flex">
-      <div className="p-2 grow shrink basis-0">{props.action ?? null}</div>
-      <div className="p-2 grow shrink basis-0 flex items-center text-xs">{props.flag ?? null}</div>
-      <div className="p-2 grow-0 shrink-0 w-40 flex items-center gap-2 justify-center">
+      <div className="shrink grow basis-0 p-2">{props.action ?? null}</div>
+      <div className="flex shrink grow basis-0 items-center p-2 text-xs">{props.flag ?? null}</div>
+      <div className="flex w-40 shrink-0 grow-0 items-center justify-center gap-2 p-2">
         {props.legacy ?? null}
       </div>
-      <div className="p-2 grow-0 shrink-0 w-40 flex items-center gap-2 justify-center">
+      <div className="flex w-40 shrink-0 grow-0 items-center justify-center gap-2 p-2">
         {props.modern ?? null}
       </div>
     </div>
@@ -167,7 +167,7 @@ export function ModelMigrationSettings(props: {
 
   return (
     <Card>
-      <div className="flex gap-12 items-center">
+      <div className="flex items-center gap-12">
         <div>
           <Heading className="mb-2 flex items-center justify-between gap-5">
             <span className="shrink-0">Upgrade Project</span>
@@ -201,12 +201,12 @@ export function ModelMigrationSettings(props: {
         </div>
       </div>
       <Tooltip.Provider delayDuration={200}>
-        <div className="text-sm pt-4">
+        <div className="pt-4 text-sm">
           <div className="flex border-b-2 border-gray-900 text-gray-500">
-            <div className="p-2 grow shrink basis-0">Action</div>
-            <div className="p-2 grow shrink basis-0">CLI Flag</div>
-            <div className="p-2 grow-0 shrink-0 w-40 text-center">Legacy</div>
-            <div className="p-2 grow-0 shrink-0 w-40 text-center">New</div>
+            <div className="shrink grow basis-0 p-2">Action</div>
+            <div className="shrink grow basis-0 p-2">CLI Flag</div>
+            <div className="w-40 shrink-0 grow-0 p-2 text-center">Legacy</div>
+            <div className="w-40 shrink-0 grow-0 p-2 text-center">New</div>
           </div>
           {isComposite ? (
             <>
@@ -321,9 +321,9 @@ export function ModelMigrationSettings(props: {
           </div>
         </div>
         <div className="mt-6">
-          <div className="flex items-center gap-4 bg-gray-900/50 p-4 rounded border-2 border-gray-900">
+          <div className="flex items-center gap-4 rounded border-2 border-gray-900 bg-gray-900/50 p-4">
             <QuestionMarkCircledIcon className="h-5 w-auto" />
-            <div className="font-light text-gray-300 text-sm">
+            <div className="text-sm font-light text-gray-300">
               If you're having difficulty comprehending the changes,{' '}
               <Button
                 variant="link"
diff --git a/packages/web/app/src/components/target/explorer/common.tsx b/packages/web/app/src/components/target/explorer/common.tsx
index 26036728e..8d32b8aa5 100644
--- a/packages/web/app/src/components/target/explorer/common.tsx
+++ b/packages/web/app/src/components/target/explorer/common.tsx
@@ -72,23 +72,23 @@ export function SchemaExplorerUsageStats(props: {
 
   return (
     <TooltipProvider delayDuration={0}>
-      <div className="flex flex-row items-center gap-2 text-xs ml-3">
+      <div className="ml-3 flex flex-row items-center gap-2 text-xs">
         <div className="grow">
           <div className="text-center" title={`${usage.total} requests`}>
             {formatNumber(usage.total)}
           </div>
           <div
             title={`${toDecimal(percentage)}% of all requests`}
-            className="relative mt-1 w-full overflow-hidden rounded z-0 bg-orange-500/20 min-w-[25px]"
+            className="relative z-0 mt-1 w-full min-w-[25px] overflow-hidden rounded bg-orange-500/20"
             style={{ width: 50, height: 5 }}
           >
-            <div className="h-full bg-orange-500 z-0" style={{ width: `${percentage}%` }} />
+            <div className="z-0 h-full bg-orange-500" style={{ width: `${percentage}%` }} />
           </div>
         </div>
         <Tooltip>
           <TooltipContent>
             <div className="z-10">
-              <div className="font-bold mb-1 text-lg">Field Usage</div>
+              <div className="mb-1 text-lg font-bold">Field Usage</div>
               {usage.isUsed === false ? (
                 <div>This field is currently not in use.</div>
               ) : (
@@ -108,17 +108,17 @@ export function SchemaExplorerUsageStats(props: {
                       <table className="mt-4 table-auto">
                         <thead>
                           <tr>
-                            <th className="text-left p-2 pl-0">Top 5 Operations</th>
-                            <th className="text-center p-2">Reqs</th>
-                            <th className="text-center p-2">Of total</th>
+                            <th className="p-2 pl-0 text-left">Top 5 Operations</th>
+                            <th className="p-2 text-center">Reqs</th>
+                            <th className="p-2 text-center">Of total</th>
                           </tr>
                         </thead>
                         <tbody>
                           {usage.topOperations.map(op => (
                             <tr key={op.hash}>
-                              <td className="text-left px-2 pl-0">
+                              <td className="px-2 pl-0 text-left">
                                 <NextLink
-                                  className="text-orange-500 hover:underline hover:underline-offset-2 hover:text-orange-500"
+                                  className="text-orange-500 hover:text-orange-500 hover:underline hover:underline-offset-2"
                                   href={{
                                     pathname:
                                       '/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash]',
@@ -134,10 +134,10 @@ export function SchemaExplorerUsageStats(props: {
                                   {op.hash.substring(0, 4)}_{op.name}
                                 </NextLink>
                               </td>
-                              <td className="font-bold text-center px-2">
+                              <td className="px-2 text-center font-bold">
                                 {formatNumber(op.count)}
                               </td>
-                              <td className="font-bold text-center px-2">
+                              <td className="px-2 text-center font-bold">
                                 {toDecimal((op.count / props.totalRequests) * 100)}%
                               </td>
                             </tr>
@@ -151,7 +151,7 @@ export function SchemaExplorerUsageStats(props: {
             </div>
           </TooltipContent>
           <TooltipTrigger>
-            <div className="text-xl cursor-help">
+            <div className="cursor-help text-xl">
               <PulseIcon className="h-6 w-auto" />
             </div>
           </TooltipTrigger>
@@ -160,7 +160,7 @@ export function SchemaExplorerUsageStats(props: {
         <Tooltip>
           <TooltipContent>
             <>
-              <div className="font-bold mb-1 text-lg">Client Usage</div>
+              <div className="mb-1 text-lg font-bold">Client Usage</div>
 
               {Array.isArray(usage.usedByClients) ? (
                 <>
@@ -169,7 +169,7 @@ export function SchemaExplorerUsageStats(props: {
                     {usage.usedByClients.map(clientName => (
                       <li key={clientName} className="font-bold">
                         <NextLink
-                          className="text-orange-500 hover:underline hover:underline-offset-2 hover:text-orange-500"
+                          className="text-orange-500 hover:text-orange-500 hover:underline hover:underline-offset-2"
                           href={{
                             pathname:
                               '/[organizationId]/[projectId]/[targetId]/insights/client/[name]',
@@ -193,7 +193,7 @@ export function SchemaExplorerUsageStats(props: {
             </>
           </TooltipContent>
           <TooltipTrigger>
-            <div className="text-xl p-1 cursor-help">
+            <div className="cursor-help p-1 text-xl">
               <UsersIcon size={16} className="h-6 w-auto" />
             </div>
           </TooltipTrigger>
@@ -438,7 +438,7 @@ export function GraphQLFields(props: {
                   <GraphQLArguments parentCoordinate={coordinate} args={field.args} />
                 ) : null}
                 <span className="mr-1">:</span>
-                <GraphQLTypeAsLink className="text-gray-400 font-semibold" type={field.type} />
+                <GraphQLTypeAsLink className="font-semibold text-gray-400" type={field.type} />
               </div>
               <div className="flex flex-row items-center">
                 {field.supergraphMetadata ? (
@@ -490,7 +490,7 @@ export function GraphQLInputFields(props: {
         return (
           <GraphQLTypeCardListItem key={field.name} index={i}>
             <div className="text-gray-400">
-              <LinkToCoordinatePage coordinate={coordinate} className="text-white font-semibold">
+              <LinkToCoordinatePage coordinate={coordinate} className="font-semibold text-white">
                 {field.name}
               </LinkToCoordinatePage>
               <span className="mr-1">:</span>
@@ -518,14 +518,14 @@ function GraphQLTypeAsLink(props: { type: string; className?: string }): ReactEl
 
   return (
     <Popover>
-      <PopoverTrigger className={cn('hover:underline-offset-4 hover:underline', props.className)}>
+      <PopoverTrigger className={cn('hover:underline hover:underline-offset-4', props.className)}>
         {props.type}
       </PopoverTrigger>
       <PopoverContent side="right">
         <div className="flex flex-col gap-y-2">
           <p>
             <NextLink
-              className="hover:underline hover:underline-offset-2 font-normal text-sm"
+              className="text-sm font-normal hover:underline hover:underline-offset-2"
               href={{
                 pathname: '/[organizationId]/[projectId]/[targetId]/explorer/[typename]',
                 query: {
@@ -539,11 +539,11 @@ function GraphQLTypeAsLink(props: { type: string; className?: string }): ReactEl
             >
               Visit in <span className="font-bold">Explorer</span>
             </NextLink>
-            <span className="text-gray-500 text-xs"> - displays a full type</span>
+            <span className="text-xs text-gray-500"> - displays a full type</span>
           </p>
           <p>
             <NextLink
-              className="hover:underline hover:underline-offset-2 font-normal text-sm"
+              className="text-sm font-normal hover:underline hover:underline-offset-2"
               href={{
                 pathname:
                   '/[organizationId]/[projectId]/[targetId]/insights/schema-coordinate/[typename]',
@@ -558,7 +558,7 @@ function GraphQLTypeAsLink(props: { type: string; className?: string }): ReactEl
             >
               Visit in <span className="font-bold">Insights</span>
             </NextLink>
-            <span className="text-gray-500 text-xs"> - usage insights</span>
+            <span className="text-xs text-gray-500"> - usage insights</span>
           </p>
         </div>
         <PopoverArrow />
diff --git a/packages/web/app/src/components/target/explorer/filter.tsx b/packages/web/app/src/components/target/explorer/filter.tsx
index 36be02f1b..2673a2f00 100644
--- a/packages/web/app/src/components/target/explorer/filter.tsx
+++ b/packages/web/app/src/components/target/explorer/filter.tsx
@@ -102,7 +102,7 @@ export function SchemaExplorerFilter({
   return (
     <div className="flex flex-row items-center gap-x-4">
       <Autocomplete
-        className="grow min-w-[250px] cursor-text"
+        className="min-w-[250px] grow cursor-text"
         placeholder="Search for a type"
         defaultValue={typename ? { value: typename, label: typename } : null}
         options={types}
@@ -134,7 +134,7 @@ export function SchemaExplorerFilter({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger>
-            <div className="flex flex-row items-center gap-x-4 rounded-md border px-3 h-[40px] bg-secondary">
+            <div className="bg-secondary flex h-[40px] flex-row items-center gap-x-4 rounded-md border px-3">
               <div>
                 <Label htmlFor="filter-toggle-arguments" className="text-sm font-normal">
                   Display all arguments
diff --git a/packages/web/app/src/components/target/explorer/super-graph-metadata.tsx b/packages/web/app/src/components/target/explorer/super-graph-metadata.tsx
index e31c12281..e1b6463cb 100644
--- a/packages/web/app/src/components/target/explorer/super-graph-metadata.tsx
+++ b/packages/web/app/src/components/target/explorer/super-graph-metadata.tsx
@@ -31,10 +31,10 @@ function SubgraphChip(props: { text: string; tooltip: boolean }): React.ReactEle
         hash: `service-${props.text}`,
       }}
       style={{ backgroundColor: stringToHslColor(props.text) }}
-      className="drop-shadow-md my-[2px] ml-[6px] h-[22px] cursor-pointer items-center justify-between rounded-[16px] pr-[6px] pl-[8px] py-0 text-[10px] font-normal normal-case leading-loose text-[#4f4f4f] inline-block max-w-[100px] truncate"
+      className="my-[2px] ml-[6px] inline-block h-[22px] max-w-[100px] cursor-pointer items-center justify-between truncate rounded-[16px] py-0 pl-[8px] pr-[6px] text-[10px] font-normal normal-case leading-loose text-[#4f4f4f] drop-shadow-md"
     >
       {props.text}
-      <PackageIcon size={10} className="inline-block ml-1" />
+      <PackageIcon size={10} className="ml-1 inline-block" />
     </Link>
   );
 
@@ -106,19 +106,19 @@ export function SupergraphMetadataList(props: {
 
   return (
     <TooltipProvider>
-      <div className="w-full flex justify-end">
+      <div className="flex w-full justify-end">
         {previewItems}{' '}
         {allItems ? (
           <Tooltip
             content={
               <>
-                <div className="font-bold mb-2">All Subgraphs</div>
-                <div className="relative w-[250px] h-[250px]">
-                  <div className="inset-0 absolute w-[250px] h-[250px] overflow-y-scroll py-2">
+                <div className="mb-2 font-bold">All Subgraphs</div>
+                <div className="relative h-[250px] w-[250px]">
+                  <div className="absolute inset-0 h-[250px] w-[250px] overflow-y-scroll py-2">
                     {allItems}
                   </div>
                   <div
-                    className="inset-0 absolute pointer-events-none"
+                    className="pointer-events-none absolute inset-0"
                     style={{
                       boxShadow: `inset 0px 11px 8px -10px ${tooltipColor}, inset 0px -11px 8px -10px ${tooltipColor}`,
                     }}
@@ -128,7 +128,7 @@ export function SupergraphMetadataList(props: {
             }
             contentProps={{ className: 'z-10' }}
           >
-            <span className="pl-1 font-bold text-xs flex items-center cursor-pointer text-white ">
+            <span className="flex cursor-pointer items-center pl-1 text-xs font-bold text-white ">
               + {allItems.length - previewItems.length} more
             </span>
           </Tooltip>
diff --git a/packages/web/app/src/components/target/history/errors-and-changes.tsx b/packages/web/app/src/components/target/history/errors-and-changes.tsx
index 4d98019ab..69c748564 100644
--- a/packages/web/app/src/components/target/history/errors-and-changes.tsx
+++ b/packages/web/app/src/components/target/history/errors-and-changes.tsx
@@ -69,7 +69,7 @@ function ErrorsBlock({ title, errors }: { errors: string[]; title: React.ReactNo
       <h2 className="mb-2 text-sm font-medium text-gray-900 dark:text-white">{title}</h2>
       <ul className="list-inside list-disc pl-3 text-sm leading-relaxed">
         {errors.map((error, key) => (
-          <li key={key} className="text-red-400 my-1">
+          <li key={key} className="my-1 text-red-400">
             <span className="text-gray-600 dark:text-white">{labelize(error)}</span>
           </li>
         ))}
diff --git a/packages/web/app/src/components/target/insights/Filters.tsx b/packages/web/app/src/components/target/insights/Filters.tsx
index ee4d8ade2..a2a80a887 100644
--- a/packages/web/app/src/components/target/insights/Filters.tsx
+++ b/packages/web/app/src/components/target/insights/Filters.tsx
@@ -117,7 +117,7 @@ function OperationsFilter({
     <Drawer open={isOpen} onOpenChange={onClose} width={500}>
       <Drawer.Title>Filter by operation</Drawer.Title>
 
-      <div className="flex flex-col h-full space-y-3">
+      <div className="flex h-full flex-col space-y-3">
         <Input
           size="medium"
           placeholder="Search for operation..."
@@ -128,7 +128,7 @@ function OperationsFilter({
             setVisibleOperations(operations.nodes);
           }}
         />
-        <div className="flex gap-2 items-center w-full">
+        <div className="flex w-full items-center gap-2">
           <LegacyButton variant="link" onClick={selectAll}>
             All
           </LegacyButton>
@@ -149,7 +149,7 @@ function OperationsFilter({
             Save
           </LegacyButton>
         </div>
-        <div className="pl-1 grow">
+        <div className="grow pl-1">
           <AutoSizer>
             {({ height, width }) =>
               !height || !width ? (
@@ -266,9 +266,9 @@ function OperationRow({
       <Checkbox checked={selected} onCheckedChange={change} id={hash} />
       <label
         htmlFor={hash}
-        className="flex items-center justify-between overflow-hidden gap-4 w-full cursor-pointer"
+        className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden"
       >
-        <span className="grow text-ellipsis overflow-hidden">{operation.name}</span>
+        <span className="grow overflow-hidden text-ellipsis">{operation.name}</span>
         <div className="shrink-0 text-right text-gray-500">{requests}</div>
       </label>
     </div>
@@ -290,7 +290,7 @@ export function OperationsFilterTrigger({
     <>
       <Button variant="outline" className="bg-accent" onClick={toggle}>
         <span>Operations ({selected?.length || 'all'})</span>
-        <FilterIcon className="ml-2 w-4 h-4" />
+        <FilterIcon className="ml-2 h-4 w-4" />
       </Button>
       <OperationsFilterContainer
         isOpen={isOpen}
@@ -335,9 +335,9 @@ function ClientRow({
       <Checkbox checked={selected} onCheckedChange={change} id={hash} />
       <label
         htmlFor={hash}
-        className="flex items-center justify-between overflow-hidden gap-4 w-full cursor-pointer"
+        className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden"
       >
-        <span className="grow text-ellipsis overflow-hidden">{client.name}</span>
+        <span className="grow overflow-hidden text-ellipsis">{client.name}</span>
         <div className="shrink-0 text-right text-gray-500">{requests}</div>
       </label>
     </div>
@@ -440,7 +440,7 @@ function ClientsFilter({
     <Drawer open={isOpen} onOpenChange={onClose} width={500}>
       <Drawer.Title>Filter by client</Drawer.Title>
 
-      <div className="flex flex-col h-full space-y-3">
+      <div className="flex h-full flex-col space-y-3">
         <Input
           size="medium"
           placeholder="Search for operation..."
@@ -451,7 +451,7 @@ function ClientsFilter({
             setVisibleOperations(clientConnection.nodes);
           }}
         />
-        <div className="flex gap-2 items-center w-full">
+        <div className="flex w-full items-center gap-2">
           <LegacyButton variant="link" onClick={selectAll}>
             All
           </LegacyButton>
@@ -472,7 +472,7 @@ function ClientsFilter({
             Save
           </LegacyButton>
         </div>
-        <div className="pl-1 grow">
+        <div className="grow pl-1">
           <AutoSizer>
             {({ height, width }) =>
               !height || !width ? (
@@ -574,7 +574,7 @@ export function ClientsFilterTrigger({
     <>
       <Button variant="outline" className="bg-accent" onClick={toggle}>
         <span>Clients ({selected?.length || 'all'})</span>
-        <FilterIcon className="ml-2 w-4 h-4" />
+        <FilterIcon className="ml-2 h-4 w-4" />
       </Button>
       <ClientsFilterContainer
         isOpen={isOpen}
diff --git a/packages/web/app/src/components/target/insights/List.tsx b/packages/web/app/src/components/target/insights/List.tsx
index fee846a1c..b0de4fd1d 100644
--- a/packages/web/app/src/components/target/insights/List.tsx
+++ b/packages/web/app/src/components/target/insights/List.tsx
@@ -71,7 +71,7 @@ function OperationRow({
     <>
       <Tr>
         <Td className="font-medium">
-          <div className="flex gap-2 items-center">
+          <div className="flex items-center gap-2">
             <Link
               href={{
                 pathname:
@@ -87,7 +87,7 @@ function OperationRow({
               }}
               passHref
             >
-              <OldButton variant="link" as="a" className="block truncate max-w-[300px]">
+              <OldButton variant="link" as="a" className="block max-w-[300px] truncate">
                 {operation.name}
               </OldButton>
             </Link>
@@ -233,7 +233,7 @@ function OperationsTable({
   const { headers } = tableInstance.getHeaderGroups()[0];
 
   return (
-    <div className={clsx('rounded-md p-5 border border-gray-800 bg-gray-900/50', className)}>
+    <div className={clsx('rounded-md border border-gray-800 bg-gray-900/50 p-5', className)}>
       <Section.Title>Operations</Section.Title>
       <Section.Subtitle>List of all operations with their statistics</Section.Subtitle>
 
@@ -280,7 +280,7 @@ function OperationsTable({
             )}
         </TBody>
       </Table>
-      <div className="flex items-center gap-2 mt-6">
+      <div className="mt-6 flex items-center gap-2">
         <Button
           onClick={firstPage}
           variant="outline"
@@ -294,9 +294,9 @@ function OperationsTable({
           onClick={tableInstance.previousPage}
           disabled={!tableInstance.getCanPreviousPage()}
         >
-          <ChevronUpIcon className="-rotate-90 h-5 w-auto" />
+          <ChevronUpIcon className="h-5 w-auto -rotate-90" />
         </Button>
-        <span className="font-bold whitespace-nowrap text-sm">
+        <span className="whitespace-nowrap text-sm font-bold">
           {tableInstance.getState().pagination.pageIndex + 1} / {tableInstance.getPageCount()}
         </span>
         <Button
@@ -305,7 +305,7 @@ function OperationsTable({
           onClick={tableInstance.nextPage}
           disabled={!tableInstance.getCanNextPage()}
         >
-          <ChevronUpIcon className="rotate-90 h-5 w-auto" />
+          <ChevronUpIcon className="h-5 w-auto rotate-90" />
         </Button>
         <Button variant="outline" onClick={lastPage} disabled={!tableInstance.getCanNextPage()}>
           Last
diff --git a/packages/web/app/src/components/target/insights/Stats.tsx b/packages/web/app/src/components/target/insights/Stats.tsx
index 0d9ad8386..c906f36bf 100644
--- a/packages/web/app/src/components/target/insights/Stats.tsx
+++ b/packages/web/app/src/components/target/insights/Stats.tsx
@@ -74,11 +74,11 @@ function RequestsStats({
     <Card className="bg-gray-900/50">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">Requests</CardTitle>
-        <GlobeIcon className="h-4 w-4 text-muted-foreground" />
+        <GlobeIcon className="text-muted-foreground h-4 w-4" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{value}</div>
-        <p className="text-xs text-muted-foreground">Total requests served</p>
+        <p className="text-muted-foreground text-xs">Total requests served</p>
       </CardContent>
     </Card>
   );
@@ -97,11 +97,11 @@ function UniqueOperationsStats({
     <Card className="bg-gray-900/50">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">Operations</CardTitle>
-        <BookIcon className="h-4 w-4 text-muted-foreground" />
+        <BookIcon className="text-muted-foreground h-4 w-4" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{value}</div>
-        <p className="text-xs text-muted-foreground">
+        <p className="text-muted-foreground text-xs">
           Distinct GraphQL operations in {dateRangeText}
         </p>
       </CardContent>
@@ -125,11 +125,11 @@ function OperationRelativeFrequency({
     <Card className="bg-gray-900/50">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">Relative Request Frequency</CardTitle>
-        <PercentIcon className="h-4 w-4 text-muted-foreground" />
+        <PercentIcon className="text-muted-foreground h-4 w-4" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{rate}</div>
-        <p className="text-xs text-muted-foreground">The impact on the overall API traffic</p>
+        <p className="text-muted-foreground text-xs">The impact on the overall API traffic</p>
       </CardContent>
     </Card>
   );
@@ -150,11 +150,11 @@ function PercentileStats({
     <Card className="bg-gray-900/50">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">p{percentile}</CardTitle>
-        <GaugeIcon className="h-4 w-4 text-muted-foreground" />
+        <GaugeIcon className="text-muted-foreground h-4 w-4" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{formatted}</div>
-        <p className="text-xs text-muted-foreground">
+        <p className="text-muted-foreground text-xs">
           Latency p{percentile} in {dateRangeText}
         </p>
       </CardContent>
@@ -183,11 +183,11 @@ function RPM({
     <Card className="bg-gray-900/50">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">Requests per minute</CardTitle>
-        <ActivityIcon className="h-4 w-4 text-muted-foreground" />
+        <ActivityIcon className="text-muted-foreground h-4 w-4" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{throughput}</div>
-        <p className="text-xs text-muted-foreground">Throughput in {dateRangeText}</p>
+        <p className="text-muted-foreground text-xs">Throughput in {dateRangeText}</p>
       </CardContent>
     </Card>
   );
@@ -213,11 +213,11 @@ function SuccessRateStats({
         <CardTitle className="text-sm font-medium text-emerald-500 dark:text-emerald-500">
           Success rate
         </CardTitle>
-        <SmileIcon className="h-4 w-4 text-muted-foreground" />
+        <SmileIcon className="text-muted-foreground h-4 w-4" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{rate}</div>
-        <p className="text-xs text-muted-foreground">Successful requests in {dateRangeText}</p>
+        <p className="text-muted-foreground text-xs">Successful requests in {dateRangeText}</p>
       </CardContent>
     </Card>
   );
@@ -240,11 +240,11 @@ function FailureRateStats({
         <CardTitle className="text-sm font-medium text-red-500 dark:text-red-500">
           Failure rate
         </CardTitle>
-        <FrownIcon className="h-4 w-4 text-muted-foreground" />
+        <FrownIcon className="text-muted-foreground h-4 w-4" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{rate}</div>
-        <p className="text-xs text-muted-foreground">Failed requests in {dateRangeText}</p>
+        <p className="text-muted-foreground text-xs">Failed requests in {dateRangeText}</p>
       </CardContent>
     </Card>
   );
@@ -294,7 +294,7 @@ function OverTimeStats({
   }, [failuresOverTime, interval, period]);
 
   return (
-    <div className="rounded-md bg-gray-900/50 p-5 border border-gray-800">
+    <div className="rounded-md border border-gray-800 bg-gray-900/50 p-5">
       <Section.Title>Operations over time</Section.Title>
       <Section.Subtitle>Timeline of GraphQL requests and failures</Section.Subtitle>
       <AutoSizer disableHeight>
@@ -577,10 +577,10 @@ function ClientsStats(props: {
   );
 
   return (
-    <div className="w-full rounded-md bg-gray-900/50 p-5 border border-gray-800">
+    <div className="w-full rounded-md border border-gray-800 bg-gray-900/50 p-5">
       <Section.Title>Clients</Section.Title>
       <Section.Subtitle>Top 5 - GraphQL API consumers</Section.Subtitle>
-      <AutoSizer disableHeight className="mt-5 w-full flex flex-row gap-x-4">
+      <AutoSizer disableHeight className="mt-5 flex w-full flex-row gap-x-4">
         {size => {
           if (!size.width) {
             return <></>;
@@ -748,7 +748,7 @@ function ClientsStats(props: {
           }}
         </AutoSizer>
       ) : null}
-      <div className="w-full mt-5 text-center">
+      <div className="mt-5 w-full text-center">
         <Button variant="outline" onClick={() => setIsOpen(value => !value)}>
           {isOpen ? (
             <>
@@ -843,7 +843,7 @@ function LatencyOverTimeStats({
   ];
 
   return (
-    <div className="rounded-md bg-gray-900/50 p-5 border border-gray-800">
+    <div className="rounded-md border border-gray-800 bg-gray-900/50 p-5">
       <Section.Title>Latency over time</Section.Title>
       <Section.Subtitle>Timeline of latency of GraphQL requests</Section.Subtitle>
       <AutoSizer disableHeight>
@@ -940,7 +940,7 @@ function RpmOverTimeStats({
   }, [requests, interval, period, windowInM]);
 
   return (
-    <div className="rounded-md bg-gray-900/50 p-5 border border-gray-800">
+    <div className="rounded-md border border-gray-800 bg-gray-900/50 p-5">
       <Section.Title>RPM over time</Section.Title>
       <Section.Subtitle>Requests per minute</Section.Subtitle>
       <AutoSizer disableHeight>
@@ -1073,7 +1073,7 @@ export function OperationsStats({
   dateRangeText = dateRangeText.toLowerCase();
 
   return (
-    <section className="text-gray-600 dark:text-gray-400 space-y-12 transition-opacity ease-in-out duration-700">
+    <section className="space-y-12 text-gray-600 transition-opacity duration-700 ease-in-out dark:text-gray-400">
       <OperationsFallback isError={isError} refetch={refetch} isFetching={isFetching}>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
           <RequestsStats requests={operationsStats?.totalRequests} dateRangeText={dateRangeText} />
diff --git a/packages/web/app/src/components/target/laboratory/edit-operation-modal.tsx b/packages/web/app/src/components/target/laboratory/edit-operation-modal.tsx
index 957a9249b..76d26bdb7 100644
--- a/packages/web/app/src/components/target/laboratory/edit-operation-modal.tsx
+++ b/packages/web/app/src/components/target/laboratory/edit-operation-modal.tsx
@@ -82,7 +82,7 @@ export const EditOperationModal = (props: {
   return (
     <Modal open onOpenChange={props.close} className="flex flex-col items-center gap-5">
       {!updateOperationNameState.fetching && (
-        <form className="flex flex-col gap-8 w-full" onSubmit={handleSubmit}>
+        <form className="flex w-full flex-col gap-8" onSubmit={handleSubmit}>
           <Heading className="text-center">Edit Operation</Heading>
 
           <div className="flex flex-col gap-4">
diff --git a/packages/web/app/src/components/target/settings/cdn-access-tokens.tsx b/packages/web/app/src/components/target/settings/cdn-access-tokens.tsx
index 12888b95f..5c3184085 100644
--- a/packages/web/app/src/components/target/settings/cdn-access-tokens.tsx
+++ b/packages/web/app/src/components/target/settings/cdn-access-tokens.tsx
@@ -132,7 +132,7 @@ function CreateCDNAccessTokenModal(props: {
 
         <p>The CDN Access Token was successfully created.</p>
 
-        <div className="flex items-center gap-2 rounded-sm p-4 bg-yellow-500/10 text-yellow-500">
+        <div className="flex items-center gap-2 rounded-sm bg-yellow-500/10 p-4 text-yellow-500">
           <AlertTriangleIcon className="h-5 w-5" />
           <span>
             Please store this access token securely. You will not be able to see it again.
@@ -157,7 +157,7 @@ function CreateCDNAccessTokenModal(props: {
 
         <p>Something went wrong.</p>
 
-        <Tag color="yellow" className="py-2.5 px-4">
+        <Tag color="yellow" className="px-4 py-2.5">
           <AlertTriangleIcon className="h-5 w-5" />
           {createCdnAccessToken.data?.createCdnAccessToken.error.message}
         </Tag>
@@ -212,7 +212,7 @@ function DeleteCDNAccessTokenModal(props: {
       <div className="flex flex-col gap-5">
         <Heading className="text-center">Delete CDN Access Tokens</Heading>
       </div>
-      <Tag color="yellow" className="py-2.5 px-4">
+      <Tag color="yellow" className="px-4 py-2.5">
         <AlertTriangleIcon className="h-5 w-5" />
         Deleting an CDN access token can not be undone. After deleting the access token it might
         take up to 5 minutes before the changes are propagated across the CDN.
@@ -254,7 +254,7 @@ function DeleteCDNAccessTokenModal(props: {
 
         <p>The CDN Access Token was successfully deleted.</p>
 
-        <Tag color="yellow" className="py-2.5 px-4">
+        <Tag color="yellow" className="px-4 py-2.5">
           <AlertTriangleIcon className="h-5 w-5" />
           It can take up to 5 minutes before the changes are propagated across the CDN.
         </Tag>
@@ -274,7 +274,7 @@ function DeleteCDNAccessTokenModal(props: {
 
         <p>Something went wrong.</p>
 
-        <Tag color="yellow" className="py-2.5 px-4">
+        <Tag color="yellow" className="px-4 py-2.5">
           <AlertTriangleIcon className="h-5 w-5" />
           {deleteCdnAccessToken.data?.deleteCdnAccessToken.error.message}
         </Tag>
diff --git a/packages/web/app/src/components/ui/card.tsx b/packages/web/app/src/components/ui/card.tsx
index b8b139da1..e37dc2a98 100644
--- a/packages/web/app/src/components/ui/card.tsx
+++ b/packages/web/app/src/components/ui/card.tsx
@@ -5,7 +5,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('rounded-lg border text-card-foreground shadow-sm bg-gray-900/50', className)}
+      className={cn('text-card-foreground rounded-lg border bg-gray-900/50 shadow-sm', className)}
       {...props}
     />
   ),
@@ -16,7 +16,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex flex-col space-y-1.5 p-6 cursor-default', className)}
+      className={cn('flex cursor-default flex-col space-y-1.5 p-6', className)}
       {...props}
     />
   ),
@@ -28,7 +28,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
     // eslint-disable-next-line jsx-a11y/heading-has-content
     <h3
       ref={ref}
-      className={cn('text-lg font-semibold leading-none tracking-tight cursor-default', className)}
+      className={cn('cursor-default text-lg font-semibold leading-none tracking-tight', className)}
       {...props}
     />
   ),
@@ -41,7 +41,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-sm text-muted-foreground cursor-default', className)}
+    className={cn('text-muted-foreground cursor-default text-sm', className)}
     {...props}
   />
 ));
diff --git a/packages/web/app/src/components/ui/checkbox.tsx b/packages/web/app/src/components/ui/checkbox.tsx
index d899ef6b7..3daeffb1c 100644
--- a/packages/web/app/src/components/ui/checkbox.tsx
+++ b/packages/web/app/src/components/ui/checkbox.tsx
@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}
diff --git a/packages/web/app/src/components/ui/dropdown-menu.tsx b/packages/web/app/src/components/ui/dropdown-menu.tsx
index 1abc13b8e..44829ec24 100644
--- a/packages/web/app/src/components/ui/dropdown-menu.tsx
+++ b/packages/web/app/src/components/ui/dropdown-menu.tsx
@@ -20,7 +20,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
       inset && 'pl-8',
       className,
     )}
@@ -39,7 +39,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+      'bg-popover text-popover-foreground animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
       className,
     )}
     {...props}
@@ -56,7 +56,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-2 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-popover text-popover-foreground animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-2 shadow-md',
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       active && 'bg-accent text-orange-500',
       className,
@@ -92,7 +92,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     checked={checked}
@@ -115,7 +115,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}
@@ -150,7 +150,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
     {...props}
   />
 ));
diff --git a/packages/web/app/src/components/ui/form.tsx b/packages/web/app/src/components/ui/form.tsx
index 986a70d8c..60f0788ba 100644
--- a/packages/web/app/src/components/ui/form.tsx
+++ b/packages/web/app/src/components/ui/form.tsx
@@ -123,7 +123,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );
@@ -145,7 +145,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn('text-sm font-medium text-destructive', className)}
+      className={cn('text-destructive text-sm font-medium', className)}
       {...props}
     >
       {body}
diff --git a/packages/web/app/src/components/ui/input.tsx b/packages/web/app/src/components/ui/input.tsx
index de4b7f77e..592dcb3d1 100644
--- a/packages/web/app/src/components/ui/input.tsx
+++ b/packages/web/app/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}
diff --git a/packages/web/app/src/components/ui/not-found.tsx b/packages/web/app/src/components/ui/not-found.tsx
index e5f490491..a7311839e 100644
--- a/packages/web/app/src/components/ui/not-found.tsx
+++ b/packages/web/app/src/components/ui/not-found.tsx
@@ -14,7 +14,7 @@ export const NotFound = ({
 }) => {
   return (
     <Card
-      className={cn('flex grow flex-col items-center gap-y-2 cursor-default', className)}
+      className={cn('flex grow cursor-default flex-col items-center gap-y-2', className)}
       data-cy="empty-list"
     >
       <Image src={ghost} alt="Ghost illustration" width="200" height="200" className="drag-none" />
diff --git a/packages/web/app/src/components/ui/page.tsx b/packages/web/app/src/components/ui/page.tsx
index 2a0ba86ba..69e7ceae6 100644
--- a/packages/web/app/src/components/ui/page.tsx
+++ b/packages/web/app/src/components/ui/page.tsx
@@ -3,12 +3,12 @@ import { cn } from '@/lib/utils';
 
 export function Title({ children, className }: { children: ReactNode; className?: string }) {
   return (
-    <h3 className={cn('text-lg font-semibold tracking-tight cursor-default', className)}>
+    <h3 className={cn('cursor-default text-lg font-semibold tracking-tight', className)}>
       {children}
     </h3>
   );
 }
 
 export function Subtitle({ children, className }: { children: ReactNode; className?: string }) {
-  return <p className={cn('text-sm text-gray-400 cursor-default', className)}>{children}</p>;
+  return <p className={cn('cursor-default text-sm text-gray-400', className)}>{children}</p>;
 }
diff --git a/packages/web/app/src/components/ui/popover.tsx b/packages/web/app/src/components/ui/popover.tsx
index cf960be71..3c211d767 100644
--- a/packages/web/app/src/components/ui/popover.tsx
+++ b/packages/web/app/src/components/ui/popover.tsx
@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
         className,
       )}
       {...props}
diff --git a/packages/web/app/src/components/ui/query-error.tsx b/packages/web/app/src/components/ui/query-error.tsx
index f9a71b6af..9a3c9eb3e 100644
--- a/packages/web/app/src/components/ui/query-error.tsx
+++ b/packages/web/app/src/components/ui/query-error.tsx
@@ -18,8 +18,7 @@ export function QueryError({
   const requestId =
     error &&
     'response' in error &&
-    error?.response?.headers &&
-    error.response.headers.get('x-request-id')?.split(',')[0].trim();
+    error?.response?.headers?.get('x-request-id')?.split(',')[0].trim();
 
   cookies.remove(LAST_VISITED_ORG_KEY);
 
@@ -31,19 +30,19 @@ export function QueryError({
     typeof router.query.organizationId === 'string' ? router.query.organizationId : null;
 
   return (
-    <div className="h-full w-full flex items-center justify-center">
+    <div className="flex h-full w-full items-center justify-center">
       <Button
         variant="outline"
         onClick={() => router.push('/logout')}
-        className="absolute top-6 right-6"
+        className="absolute right-6 top-6"
       >
         <LogOutIcon className="mr-2 h-4 w-4" /> Sign out
       </Button>
-      <div className="flex sm:flex-row flex-col items-center gap-x-6 max-w-[960px]">
+      <div className="flex max-w-[960px] flex-col items-center gap-x-6 sm:flex-row">
         <img
           src="/images/figures/connection.svg"
           alt="Ghost"
-          className="block w-[200px] h-[200px]"
+          className="block h-[200px] w-[200px]"
         />
         <div className="grow text-center sm:text-left">
           <h1 className="text-xl font-semibold">Oops, something went wrong.</h1>
@@ -79,8 +78,8 @@ export function QueryError({
             {requestId ? (
               <div className="mt-6 text-xs">
                 <div className="inline-flex items-center text-gray-300">
-                  <div className="p-2 bg-yellow-500/10 rounded-l-sm">Error ID</div>
-                  <div className="p-2 bg-yellow-500/5 rounded-r-sm">{requestId}</div>
+                  <div className="rounded-l-sm bg-yellow-500/10 p-2">Error ID</div>
+                  <div className="rounded-r-sm bg-yellow-500/5 p-2">{requestId}</div>
                 </div>
               </div>
             ) : null}
diff --git a/packages/web/app/src/components/ui/radio-group.tsx b/packages/web/app/src/components/ui/radio-group.tsx
index 31264efbf..e41c0cc83 100644
--- a/packages/web/app/src/components/ui/radio-group.tsx
+++ b/packages/web/app/src/components/ui/radio-group.tsx
@@ -21,7 +21,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
diff --git a/packages/web/app/src/components/ui/select.tsx b/packages/web/app/src/components/ui/select.tsx
index b25905fdb..edf02c3a7 100644
--- a/packages/web/app/src/components/ui/select.tsx
+++ b/packages/web/app/src/components/ui/select.tsx
@@ -56,7 +56,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80 cursor-pointer',
+        'bg-popover text-popover-foreground animate-in fade-in-80 relative z-50 min-w-[8rem] cursor-pointer overflow-hidden rounded-md border shadow-md',
         position === 'popper' && 'translate-y-1',
         className,
       )}
@@ -96,7 +96,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer',
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}
@@ -118,7 +118,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
     {...props}
   />
 ));
diff --git a/packages/web/app/src/components/ui/sheet.tsx b/packages/web/app/src/components/ui/sheet.tsx
index 479b7d0cf..fabcb2f41 100644
--- a/packages/web/app/src/components/ui/sheet.tsx
+++ b/packages/web/app/src/components/ui/sheet.tsx
@@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm',
       className,
     )}
     {...props}
@@ -59,7 +59,7 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -87,7 +87,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
+    className={cn('text-foreground text-lg font-semibold', className)}
     {...props}
   />
 ));
@@ -99,7 +99,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-muted-foreground text-sm', className)}
     {...props}
   />
 ));
diff --git a/packages/web/app/src/components/ui/switch.tsx b/packages/web/app/src/components/ui/switch.tsx
index c01298ba2..f73ba6fa7 100644
--- a/packages/web/app/src/components/ui/switch.tsx
+++ b/packages/web/app/src/components/ui/switch.tsx
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}
@@ -18,7 +18,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/packages/web/app/src/components/ui/table.tsx b/packages/web/app/src/components/ui/table.tsx
index 6eb4b6ce4..ef86a6af7 100644
--- a/packages/web/app/src/components/ui/table.tsx
+++ b/packages/web/app/src/components/ui/table.tsx
@@ -32,7 +32,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn('bg-primary font-medium text-primary-foreground', className)}
+    className={cn('bg-primary text-primary-foreground font-medium', className)}
     {...props}
   />
 ));
@@ -43,7 +43,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
     <tr
       ref={ref}
       className={cn(
-        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
         className,
       )}
       {...props}
@@ -59,7 +59,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
       className,
     )}
     {...props}
@@ -83,7 +83,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+  <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
 ));
 TableCaption.displayName = 'TableCaption';
 
diff --git a/packages/web/app/src/components/ui/textarea.tsx b/packages/web/app/src/components/ui/textarea.tsx
index 05b1ae2ff..eca11b28f 100644
--- a/packages/web/app/src/components/ui/textarea.tsx
+++ b/packages/web/app/src/components/ui/textarea.tsx
@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}
diff --git a/packages/web/app/src/components/ui/tooltip.tsx b/packages/web/app/src/components/ui/tooltip.tsx
index 1b56163e0..7f5f8e87d 100644
--- a/packages/web/app/src/components/ui/tooltip.tsx
+++ b/packages/web/app/src/components/ui/tooltip.tsx
@@ -16,7 +16,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+      'bg-popover text-popover-foreground animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
       className,
     )}
     {...props}
diff --git a/packages/web/app/src/components/ui/user-menu.tsx b/packages/web/app/src/components/ui/user-menu.tsx
index 85d73d00c..800ffb11c 100644
--- a/packages/web/app/src/components/ui/user-menu.tsx
+++ b/packages/web/app/src/components/ui/user-menu.tsx
@@ -108,7 +108,7 @@ export function UserMenu(props: {
           organizationName={currentOrganization.name}
         />
       ) : null}
-      <div className="flex flex-row gap-8 items-center">
+      <div className="flex flex-row items-center gap-8">
         {currentOrganization ? <GetStartedProgress tasks={currentOrganization.getStarted} /> : null}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -125,10 +125,10 @@ export function UserMenu(props: {
               <DropdownMenuLabel>
                 <div className="flex items-center justify-between">
                   <div className="flex flex-col space-y-1">
-                    <div className="text-sm font-medium leading-none truncate">
+                    <div className="truncate text-sm font-medium leading-none">
                       {me?.displayName}
                     </div>
-                    <div className="text-xs font-normal leading-none text-muted-foreground truncate">
+                    <div className="text-muted-foreground truncate text-xs font-normal leading-none">
                       {me?.email}
                     </div>
                   </div>
diff --git a/packages/web/app/src/components/v2/accordion.tsx b/packages/web/app/src/components/v2/accordion.tsx
index 56eeb7064..38c3cfecf 100644
--- a/packages/web/app/src/components/v2/accordion.tsx
+++ b/packages/web/app/src/components/v2/accordion.tsx
@@ -48,7 +48,7 @@ function Item({
   className?: string;
 }): ReactElement {
   return (
-    <A.Item {...props} value={value} className={clsx('rounded-md w-full', className)}>
+    <A.Item {...props} value={value} className={clsx('w-full rounded-md', className)}>
       {children}
     </A.Item>
   );
@@ -94,7 +94,7 @@ function Content({
   className?: string;
 }): ReactElement {
   return (
-    <A.Content className={clsx('pt-1 w-full rounded-b-lg px-4 pb-3', className)}>
+    <A.Content className={clsx('w-full rounded-b-lg px-4 pb-3 pt-1', className)}>
       <div className="text-sm text-gray-700 dark:text-gray-400">{children}</div>
     </A.Content>
   );
diff --git a/packages/web/app/src/components/v2/activities.tsx b/packages/web/app/src/components/v2/activities.tsx
index e7a17a778..7be4d943c 100644
--- a/packages/web/app/src/components/v2/activities.tsx
+++ b/packages/web/app/src/components/v2/activities.tsx
@@ -238,12 +238,12 @@ export const Activities = (): ReactElement => {
           ? new Array(3).fill(null).map((_, index) => (
               <ActivityContainer key={index}>
                 <div className="grow">
-                  <div className="flex justify-between items-center">
-                    <div className="w-24 h-2 bg-gray-800 rounded-full animate-pulse" />
-                    <div className="w-8 h-2 bg-gray-800 rounded-full animate-pulse" />
+                  <div className="flex items-center justify-between">
+                    <div className="h-2 w-24 animate-pulse rounded-full bg-gray-800" />
+                    <div className="h-2 w-8 animate-pulse rounded-full bg-gray-800" />
                   </div>
                   <div>
-                    <div className="w-32 h-3 mt-4 bg-gray-800 rounded-full animate-pulse" />
+                    <div className="mt-4 h-3 w-32 animate-pulse rounded-full bg-gray-800" />
                   </div>
                 </div>
               </ActivityContainer>
@@ -256,12 +256,12 @@ export const Activities = (): ReactElement => {
                   <>
                     <div className="grow">
                       {'project' in activity && !!activity.project && (
-                        <div className="flex justify-between items-center">
+                        <div className="flex items-center justify-between">
                           <h3 className="mb-1 flex items-center font-medium">
                             <span className="line-clamp-1">{activity.project.name}</span>
                             {'target' in activity && !!activity.target && (
                               <>
-                                <span className="italic mx-2">/</span>
+                                <span className="mx-2 italic">/</span>
                                 <span className="line-clamp-1">{activity.target.name}</span>
                               </>
                             )}
@@ -286,6 +286,7 @@ const ActivityContainer = (props: { children: ReactNode }) => (
   <li
     className="
     flex
+    cursor-default
     items-center
     gap-2.5
     border-b
@@ -297,7 +298,6 @@ const ActivityContainer = (props: { children: ReactNode }) => (
     last:border-b-0
     last:pb-0
     first-of-type:mt-0
-    cursor-default
   "
   >
     {props.children}
diff --git a/packages/web/app/src/components/v2/callout.tsx b/packages/web/app/src/components/v2/callout.tsx
index 9a0abe333..9daebb928 100644
--- a/packages/web/app/src/components/v2/callout.tsx
+++ b/packages/web/app/src/components/v2/callout.tsx
@@ -42,7 +42,7 @@ export function Callout({
   return (
     <div
       className={clsx(
-        'mt-6 flex items-center rounded-lg border py-2 px-4 gap-4',
+        'mt-6 flex items-center gap-4 rounded-lg border px-4 py-2',
         classes[type],
         className,
       )}
diff --git a/packages/web/app/src/components/v2/card.tsx b/packages/web/app/src/components/v2/card.tsx
index c3d2c3d8e..df3dee3f5 100644
--- a/packages/web/app/src/components/v2/card.tsx
+++ b/packages/web/app/src/components/v2/card.tsx
@@ -23,7 +23,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       <TagToUse
         // @ts-expect-error TODO: figure out what's wrong with ref here
         ref={forwardedRef}
-        className={cn('rounded-md p-5 border border-gray-800', className)}
+        className={cn('rounded-md border border-gray-800 p-5', className)}
         {...props}
       >
         {children}
diff --git a/packages/web/app/src/components/v2/checkbox.tsx b/packages/web/app/src/components/v2/checkbox.tsx
index 012d2929e..4fbd2f2cf 100644
--- a/packages/web/app/src/components/v2/checkbox.tsx
+++ b/packages/web/app/src/components/v2/checkbox.tsx
@@ -17,13 +17,13 @@ export const Checkbox = (props: CheckboxProps): ReactElement => {
       border-orange-500
       bg-gray-800
       text-orange-500
+      hover:border-orange-700
       disabled:cursor-not-allowed
       disabled:border-gray-900
-      hover:border-orange-700
     "
       {...props}
     >
-      <Indicator className="h-full w-full bg-current items-center flex justify-center">
+      <Indicator className="flex h-full w-full items-center justify-center bg-current">
         <CheckIcon className="text-black" />
       </Indicator>
     </Root>
diff --git a/packages/web/app/src/components/v2/combobox.tsx b/packages/web/app/src/components/v2/combobox.tsx
index 05e56d1fa..52389966e 100644
--- a/packages/web/app/src/components/v2/combobox.tsx
+++ b/packages/web/app/src/components/v2/combobox.tsx
@@ -42,7 +42,7 @@ export function Combobox(
         ),
         NoOptionsMessage: compProps => (
           <components.NoOptionsMessage {...compProps}>
-            <div className="text-gray-500 text-xs">
+            <div className="text-xs text-gray-500">
               {props.creatable ? 'Start typing to add values' : 'No options'}
             </div>
           </components.NoOptionsMessage>
diff --git a/packages/web/app/src/components/v2/diff-editor.tsx b/packages/web/app/src/components/v2/diff-editor.tsx
index d49bc7ab2..1f2bdb082 100644
--- a/packages/web/app/src/components/v2/diff-editor.tsx
+++ b/packages/web/app/src/components/v2/diff-editor.tsx
@@ -49,8 +49,8 @@ export const DiffEditor = ({
   }
 
   return (
-    <div className="w-full h-full">
-      <div className="p-5 flex items-center justify-between">
+    <div className="h-full w-full">
+      <div className="flex items-center justify-between p-5">
         <div className="font-semibold">{title}</div>
         <div className="flex items-center">
           <div className="mr-2 text-xs font-normal">Navigate changes</div>
diff --git a/packages/web/app/src/components/v2/docs-note.tsx b/packages/web/app/src/components/v2/docs-note.tsx
index 3b501948b..09dc6a626 100644
--- a/packages/web/app/src/components/v2/docs-note.tsx
+++ b/packages/web/app/src/components/v2/docs-note.tsx
@@ -10,7 +10,7 @@ import { Link } from './link';
 export const DocsNote = ({ children, warn }: { warn?: boolean; children: React.ReactNode }) => {
   return (
     <div
-      className={cn('flex my-2 border-l-2 px-4 py-2', warn ? 'border-orange-500' : 'border-white')}
+      className={cn('my-2 flex border-l-2 px-4 py-2', warn ? 'border-orange-500' : 'border-white')}
     >
       {/* <div className="items-center align-middle pr-2 flex flex-row">
         {warn ? (
@@ -19,7 +19,7 @@ export const DocsNote = ({ children, warn }: { warn?: boolean; children: React.R
           <InfoCircledIcon className="text-current" />
         )}
       </div> */}
-      <div className="grow text-white text-sm align-middle">{children}</div>
+      <div className="grow align-middle text-sm text-white">{children}</div>
     </div>
   );
 };
@@ -40,7 +40,7 @@ export const DocsLink = ({
   return (
     <Button variant="link" className={cn('p-0 text-orange-500', className)} asChild>
       <Link href={fullUrl} target="_blank" rel="noreferrer">
-        {icon ?? <Book className="mr-2 w-4 h-4" />}
+        {icon ?? <Book className="mr-2 h-4 w-4" />}
         {children}
         <ExternalLinkIcon className="inline pl-1" />
       </Link>
@@ -69,7 +69,7 @@ export const ProductUpdatesLink = ({
         rel="noreferrer"
         className="font-medium transition-colors hover:underline"
       >
-        {icon ?? <Megaphone className="mr-2 w-4 h-4" />}
+        {icon ?? <Megaphone className="mr-2 h-4 w-4" />}
         {children}
         <ExternalLinkIcon className="inline pl-1" />
       </NextLink>
diff --git a/packages/web/app/src/components/v2/drawer.tsx b/packages/web/app/src/components/v2/drawer.tsx
index dff137e10..0aadba079 100644
--- a/packages/web/app/src/components/v2/drawer.tsx
+++ b/packages/web/app/src/components/v2/drawer.tsx
@@ -17,12 +17,12 @@ const Wrapper = forwardRef<ElementRef<typeof D.Content>, SheetContentProps>(
     return (
       <D.Root open={open} onOpenChange={onOpenChange}>
         <D.Portal>
-          <D.Overlay className="z-50 fixed inset-0 bg-gray-800/80 radix-state-open:animate-fade-in radix-state-closed:animate-fade-out" />
+          <D.Overlay className="radix-state-open:animate-fade-in radix-state-closed:animate-fade-out fixed inset-0 z-50 bg-gray-800/80" />
           <D.Content
             {...props}
             ref={forwardedRef}
             className={clsx(
-              'fixed inset-y-0 bg-black z-50 px-4',
+              'fixed inset-y-0 z-50 bg-black px-4',
               {
                 left: 'transform-[translate3d(-100%,0,0)] left-0',
                 right: 'transform-[translate3d(100%,0,0)] right-0',
@@ -46,7 +46,7 @@ const Wrapper = forwardRef<ElementRef<typeof D.Content>, SheetContentProps>(
 export const Drawer = Object.assign(Wrapper, {
   Title({ children, className, ...props }: ComponentProps<typeof D.Title>) {
     return (
-      <D.Title className={clsx('py-4 px-2 text-2xl font-semibold', className)} {...props}>
+      <D.Title className={clsx('px-2 py-4 text-2xl font-semibold', className)} {...props}>
         {children}
       </D.Title>
     );
diff --git a/packages/web/app/src/components/v2/dropdown.tsx b/packages/web/app/src/components/v2/dropdown.tsx
index e2d2865b8..67abd4bca 100644
--- a/packages/web/app/src/components/v2/dropdown.tsx
+++ b/packages/web/app/src/components/v2/dropdown.tsx
@@ -17,8 +17,8 @@ export const DropdownMenuTrigger = React.forwardRef<
         items-center
         gap-4
         rounded-md
-        py-2.5
         px-2
+        py-2.5
         transition
       `,
         className,
@@ -45,10 +45,10 @@ export const DropdownMenuContent = React.forwardRef<
           flex-col
           gap-1
           rounded-md
+          bg-[#0b0d11]
           p-[13px]
           text-sm
           font-normal
-          bg-[#0b0d11]
           text-gray-300
           shadow-lg
           shadow-black
@@ -79,8 +79,8 @@ export const DropdownMenuSubTrigger = React.forwardRef<
         items-center
         gap-4
         rounded-md
-        py-2.5
         px-2
+        py-2.5
         transition
         hover:bg-gray-800/50
         hover:text-white
@@ -110,10 +110,10 @@ export const DropdownMenuSubContent = React.forwardRef<
           flex-col
           gap-1
           rounded-md
+          bg-[#0b0d11]
           p-[13px]
           text-sm
           font-normal
-          bg-[#0b0d11]
           text-gray-300
           shadow-lg
           shadow-black
@@ -146,8 +146,8 @@ export const DropdownMenuItem = React.forwardRef<
         items-center
         gap-4
         rounded-md
-        py-2.5
         px-2
+        py-2.5
         transition
         hover:bg-gray-800/50
         hover:text-white
diff --git a/packages/web/app/src/components/v2/empty-list.tsx b/packages/web/app/src/components/v2/empty-list.tsx
index 028cbcfe6..ed8cad8d9 100644
--- a/packages/web/app/src/components/v2/empty-list.tsx
+++ b/packages/web/app/src/components/v2/empty-list.tsx
@@ -17,7 +17,7 @@ export const EmptyList = ({
 }): ReactElement => {
   return (
     <Card
-      className={cn('flex grow flex-col items-center gap-y-2 cursor-default', className)}
+      className={cn('flex grow cursor-default flex-col items-center gap-y-2', className)}
       data-cy="empty-list"
     >
       <Image
diff --git a/packages/web/app/src/components/v2/graphql-block.tsx b/packages/web/app/src/components/v2/graphql-block.tsx
index efbe4c234..5f5646e0c 100644
--- a/packages/web/app/src/components/v2/graphql-block.tsx
+++ b/packages/web/app/src/components/v2/graphql-block.tsx
@@ -50,7 +50,7 @@ export function GraphQLBlock({
     <Card className={clsx(className)}>
       <Heading className="mb-4">
         {title ?? 'SDL'}
-        {url && <span className="text-sm italic ml-3">{url}</span>}
+        {url && <span className="ml-3 text-sm italic">{url}</span>}
       </Heading>
       <div className="pb-2">
         <GraphQLHighlight {...editorProps} code={sdl} />
diff --git a/packages/web/app/src/components/v2/heading.tsx b/packages/web/app/src/components/v2/heading.tsx
index 164dc199e..295e17d4b 100644
--- a/packages/web/app/src/components/v2/heading.tsx
+++ b/packages/web/app/src/components/v2/heading.tsx
@@ -17,7 +17,7 @@ export const Heading = ({
   return (
     <HeadingLevel
       className={clsx(
-        'text-white cursor-default',
+        'cursor-default text-white',
         {
           lg: 'text-lg font-bold',
           xl: 'text-xl font-bold',
diff --git a/packages/web/app/src/components/v2/icon.tsx b/packages/web/app/src/components/v2/icon.tsx
index 0b2d879e4..258059a9e 100644
--- a/packages/web/app/src/components/v2/icon.tsx
+++ b/packages/web/app/src/components/v2/icon.tsx
@@ -139,7 +139,7 @@ export const MoreIcon = ({ className, ...props }: IconProps): ReactElement => (
   <svg
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    className={clsx('w-6 h-6 stroke-current', className)}
+    className={clsx('h-6 w-6 stroke-current', className)}
     {...props}
   >
     <path
@@ -372,7 +372,7 @@ export const LinkIcon = ({ className, ...props }: IconProps): ReactElement => (
   <svg
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    className={clsx('w-6 h-6 stroke-current fill-none', className)}
+    className={clsx('h-6 w-6 fill-none stroke-current', className)}
     {...props}
   >
     <path
@@ -417,7 +417,7 @@ export const LinkedInIcon = ({ className, ...props }: IconProps): ReactElement =
   <svg
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    className={clsx('w-6 h-6 fill-current', className)}
+    className={clsx('h-6 w-6 fill-current', className)}
     {...props}
   >
     <path d="M16 8C19.3137 8 22 10.6863 22 14V21H18V14C18 12.8954 17.1046 12 16 12C14.8954 12 14 12.8954 14 14V21H10V14C10 10.6863 12.6863 8 16 8Z" />
diff --git a/packages/web/app/src/components/v2/inline-code.tsx b/packages/web/app/src/components/v2/inline-code.tsx
index d461c8bb4..2bb7edd0d 100644
--- a/packages/web/app/src/components/v2/inline-code.tsx
+++ b/packages/web/app/src/components/v2/inline-code.tsx
@@ -4,7 +4,7 @@ import { CopyIcon } from './icon';
 export const InlineCode = (props: { content: string }) => {
   const post = useNotifications();
   return (
-    <span className="rounded-md bg-gray-800 p-4 font-mono flex items-center break-all gap-2">
+    <span className="flex items-center gap-2 break-all rounded-md bg-gray-800 p-4 font-mono">
       <code>{props.content}</code>
       <button
         className="cursor-pointer p-2 hover:text-orange-600"
diff --git a/packages/web/app/src/components/v2/input.tsx b/packages/web/app/src/components/v2/input.tsx
index 89089164e..e0dc68552 100644
--- a/packages/web/app/src/components/v2/input.tsx
+++ b/packages/web/app/src/components/v2/input.tsx
@@ -37,17 +37,17 @@ export const Input = forwardRef<
         items-center
         gap-4
         rounded-sm
+        border
+        border-gray-700
         bg-gray-800
         text-sm
         font-medium
-        border
-        border-gray-700
         focus-within:ring`,
           isInvalid ? 'text-red-500 caret-white ring-red-500' : 'text-white',
           {
-            large: 'h-[50px] py-[18px] px-4',
-            medium: 'py-2.5 px-4',
-            small: 'py-[5px] px-3',
+            large: 'h-[50px] px-4 py-[18px]',
+            medium: 'px-4 py-2.5',
+            small: 'px-3 py-[5px]',
           }[size],
           onClear && 'pr-1',
           className,
@@ -69,7 +69,7 @@ export const Input = forwardRef<
           <button
             aria-label="Reset"
             onClick={onClear}
-            className="hover:bg-gray-700/50 p-0.5 rounded transition-colors"
+            className="rounded p-0.5 transition-colors hover:bg-gray-700/50"
           >
             <svg
               stroke="currentColor"
diff --git a/packages/web/app/src/components/v2/modal.tsx b/packages/web/app/src/components/v2/modal.tsx
index 8a2ae04a4..6f9127c76 100644
--- a/packages/web/app/src/components/v2/modal.tsx
+++ b/packages/web/app/src/components/v2/modal.tsx
@@ -53,8 +53,8 @@ const Modal = ({
                   `
             hive-modal
             relative
-            top-1/2
             left-1/2
+            top-1/2
             max-h-[95%]
             max-w-[95%]
             overflow-auto
@@ -68,7 +68,7 @@ const Modal = ({
                 {children}
 
                 <Close asChild>
-                  <Button className="absolute top-5 right-5 text-gray-500 hover:border-gray-500 hover:text-orange-500">
+                  <Button className="absolute right-5 top-5 text-gray-500 hover:border-gray-500 hover:text-orange-500">
                     <XIcon />
                   </Button>
                 </Close>
diff --git a/packages/web/app/src/components/v2/modals/create-access-token.tsx b/packages/web/app/src/components/v2/modals/create-access-token.tsx
index 9e45acc77..e489abd88 100644
--- a/packages/web/app/src/components/v2/modals/create-access-token.tsx
+++ b/packages/web/app/src/components/v2/modals/create-access-token.tsx
@@ -61,7 +61,7 @@ export function CreateAccessTokenModal({
     <Modal
       open={isOpen}
       onOpenChange={toggleModalOpen}
-      className="w-[650px] h-5/6 flex overflow-hidden"
+      className="flex h-5/6 w-[650px] overflow-hidden"
     >
       {organization ? (
         <ModalContent
@@ -148,7 +148,7 @@ function ModalContent(props: {
   return (
     <>
       {mutation.data?.createToken.ok ? (
-        <div className="flex flex-col gap-5 grow">
+        <div className="flex grow flex-col gap-5">
           <Heading className="text-center">Token successfully created!</Heading>
           <CopyValue value={mutation.data.createToken.ok.secret} />
           <Tag color="green">
@@ -166,11 +166,11 @@ function ModalContent(props: {
           </Button>
         </div>
       ) : (
-        <form className="flex flex-col gap-5 grow" onSubmit={handleSubmit}>
+        <form className="flex grow flex-col gap-5" onSubmit={handleSubmit}>
           <div className="shrink-0">
             <div className="flex-none">
-              <Heading className="text-center mb-2">Create an access token</Heading>
-              <p className="text-sm text-gray-500 mb-2">
+              <Heading className="mb-2 text-center">Create an access token</Heading>
+              <p className="mb-2 text-sm text-gray-500">
                 To access GraphQL Hive, your application or tool needs an active API key.
               </p>
 
@@ -186,15 +186,15 @@ function ModalContent(props: {
               />
             </div>
             {touched.name && errors.name && (
-              <div className="text-sm text-red-500 mt-2">{errors.name}</div>
+              <div className="mt-2 text-sm text-red-500">{errors.name}</div>
             )}
             {mutation.data?.createToken.error && (
-              <div className="text-sm text-red-500 mt-2">
+              <div className="mt-2 text-sm text-red-500">
                 {mutation.data?.createToken.error.message}
               </div>
             )}
           </div>
-          <div className="flex flex-col flex-1 overflow-hidden">
+          <div className="flex flex-1 flex-col overflow-hidden">
             <Accordion defaultValue="Permissions">
               <Accordion.Item value="Permissions">
                 <Accordion.Header>Registry & Usage</Accordion.Header>
diff --git a/packages/web/app/src/components/v2/modals/create-organization.tsx b/packages/web/app/src/components/v2/modals/create-organization.tsx
index d2fda89a1..a44781dc0 100644
--- a/packages/web/app/src/components/v2/modals/create-organization.tsx
+++ b/packages/web/app/src/components/v2/modals/create-organization.tsx
@@ -81,7 +81,7 @@ export const CreateOrganizationForm = () => {
         <Button type="submit" size="large" block variant="primary" disabled={isSubmitting}>
           {isSubmitting ? (
             <>
-              <Spinner className="w-6 h-6 text-white" />
+              <Spinner className="h-6 w-6 text-white" />
               <span className="ml-4">Creating...</span>
             </>
           ) : (
diff --git a/packages/web/app/src/components/v2/modals/leave-organization.tsx b/packages/web/app/src/components/v2/modals/leave-organization.tsx
index 1774d3cc0..d03cc31db 100644
--- a/packages/web/app/src/components/v2/modals/leave-organization.tsx
+++ b/packages/web/app/src/components/v2/modals/leave-organization.tsx
@@ -47,7 +47,7 @@ export function LeaveOrganizationModal({
         Are you sure you want to leave this organization? You will lose access to{' '}
         <span className="font-semibold">{organizationName}</span>. This action is irreversible!
       </p>
-      <div className="flex w-full gap-x-2 items-center justify-end">
+      <div className="flex w-full items-center justify-end gap-x-2">
         <Button type="button" variant="ghost" onClick={toggleModalOpen}>
           Cancel
         </Button>
diff --git a/packages/web/app/src/components/v2/modals/transfer-organization-ownership.tsx b/packages/web/app/src/components/v2/modals/transfer-organization-ownership.tsx
index 462563ec2..364125a6c 100644
--- a/packages/web/app/src/components/v2/modals/transfer-organization-ownership.tsx
+++ b/packages/web/app/src/components/v2/modals/transfer-organization-ownership.tsx
@@ -205,7 +205,7 @@ export const TransferOrganizationOwnershipModal = ({
             >
               <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-gray-800 text-base shadow-lg ring-1 ring-black/5 focus:outline-none">
                 {filteredMembers.length === 0 && searchPhrase !== '' ? (
-                  <div className="relative cursor-default select-none py-2 px-4 text-base text-gray-700">
+                  <div className="relative cursor-default select-none px-4 py-2 text-base text-gray-700">
                     Nothing found.
                   </div>
                 ) : (
diff --git a/packages/web/app/src/components/v2/radix-select.tsx b/packages/web/app/src/components/v2/radix-select.tsx
index 310ff4855..782d10707 100644
--- a/packages/web/app/src/components/v2/radix-select.tsx
+++ b/packages/web/app/src/components/v2/radix-select.tsx
@@ -52,7 +52,7 @@ export function RadixSelect<T extends string>({
         </RadixButton>
       </S.Trigger>
       <S.Content
-        className="bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg z-50"
+        className="z-50 rounded-lg bg-white p-2 shadow-lg dark:bg-gray-800"
         position={position}
       >
         <S.ScrollUpButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
@@ -66,9 +66,9 @@ export function RadixSelect<T extends string>({
                 key={value}
                 value={value}
                 className={clsx(
-                  'relative flex items-center px-8 py-2 rounded-md text-sm text-gray-700 dark:text-gray-300 font-medium focus:bg-gray-100 dark:focus:bg-gray-900',
+                  'relative flex items-center rounded-md px-8 py-2 text-sm font-medium text-gray-700 focus:bg-gray-100 dark:text-gray-300 dark:focus:bg-gray-900',
                   'radix-disabled:opacity-50',
-                  'focus:outline-none select-none cursor-pointer',
+                  'cursor-pointer select-none focus:outline-none',
                 )}
               >
                 <S.ItemText>{label}</S.ItemText>
diff --git a/packages/web/app/src/components/v2/select.tsx b/packages/web/app/src/components/v2/select.tsx
index 719df59d8..648a2dc4a 100644
--- a/packages/web/app/src/components/v2/select.tsx
+++ b/packages/web/app/src/components/v2/select.tsx
@@ -34,7 +34,7 @@ export function Select({
           active:bg-gray-900
         `,
           isInvalid
-            ? 'text-red-500 border-red-500'
+            ? 'border-red-500 text-red-500'
             : ['border-transparent', value ? 'text-white' : 'text-gray-500'],
         )}
         {...props}
diff --git a/packages/web/app/src/components/v2/shine-background.tsx b/packages/web/app/src/components/v2/shine-background.tsx
index f341f0b83..6cbe589f0 100644
--- a/packages/web/app/src/components/v2/shine-background.tsx
+++ b/packages/web/app/src/components/v2/shine-background.tsx
@@ -3,7 +3,7 @@ import { ReactElement } from 'react';
 export const ShineBackground = (): ReactElement => {
   return (
     <div
-      className="z-[-1] absolute inset-0"
+      className="absolute inset-0 z-[-1]"
       style={{
         background: `url(/images/bg-top-shine.png) no-repeat left top/468px 278px,
                      url(/images/bg-bottom-shine.png) no-repeat right bottom/330px 399px`,
diff --git a/packages/web/app/src/components/v2/sortable.tsx b/packages/web/app/src/components/v2/sortable.tsx
index 657d82721..dbab6e58b 100644
--- a/packages/web/app/src/components/v2/sortable.tsx
+++ b/packages/web/app/src/components/v2/sortable.tsx
@@ -25,9 +25,9 @@ export function Sortable({
       <button className="flex items-center justify-center" onClick={onClick}>
         <div>{children}</div>
 
-        {sortOrder === 'asc' ? <TriangleUpIcon className="text-orange-500 ml-2" /> : null}
+        {sortOrder === 'asc' ? <TriangleUpIcon className="ml-2 text-orange-500" /> : null}
         {sortOrder === 'desc' ? (
-          <TriangleUpIcon className="rotate-180 text-orange-500 ml-2" />
+          <TriangleUpIcon className="ml-2 rotate-180 text-orange-500" />
         ) : null}
       </button>
     </Tooltip>
diff --git a/packages/web/app/src/components/v2/spinner.tsx b/packages/web/app/src/components/v2/spinner.tsx
index 73a394efc..092b84e32 100644
--- a/packages/web/app/src/components/v2/spinner.tsx
+++ b/packages/web/app/src/components/v2/spinner.tsx
@@ -6,8 +6,8 @@ export function Spinner({ className }: { className?: string }): ReactElement {
     // Copied from https://chakra-ui.com/docs/components/spinner#usage
     <div
       className={cn(
-        'text-orange-500 animate-spin w-6 h-6 rounded-full',
-        'border-t-current border-r-current border-2 border-l-transparent border-b-transparent',
+        'h-6 w-6 animate-spin rounded-full text-orange-500',
+        'border-2 border-b-transparent border-l-transparent border-r-current border-t-current',
         '[animation-duration:0.45s]',
         className,
       )}
diff --git a/packages/web/app/src/components/v2/tabs.tsx b/packages/web/app/src/components/v2/tabs.tsx
index b42e9bd53..67f477bca 100644
--- a/packages/web/app/src/components/v2/tabs.tsx
+++ b/packages/web/app/src/components/v2/tabs.tsx
@@ -33,16 +33,16 @@ const Trigger = forwardRef<any, Omit<TabsTriggerProps, 'className'> & { hasBorde
       ref={forwardedRef}
       className={clsx(
         '!appearance-none', // unset button styles in Safari
-        'font-medium text-sm transition text-white',
+        'text-sm font-medium text-white transition',
         hasBorder
           ? `
             radix-state-active:border-b-orange-500
-            hover:border-b-orange-900
+            cursor-pointer
             border-b-[2px]
             border-b-transparent
             px-4
             py-3
-            cursor-pointer
+            hover:border-b-orange-900
           `
           : null,
       )}
diff --git a/packages/web/app/src/components/v2/time-ago.tsx b/packages/web/app/src/components/v2/time-ago.tsx
index 62415a886..d85e024a6 100644
--- a/packages/web/app/src/components/v2/time-ago.tsx
+++ b/packages/web/app/src/components/v2/time-ago.tsx
@@ -29,7 +29,7 @@ export const TimeAgo = ({
         <time
           dateTime={formattedDate}
           title={formattedDate}
-          className={clsx('whitespace-nowrap cursor-default', className)}
+          className={clsx('cursor-default whitespace-nowrap', className)}
         >
           {value}
         </time>
diff --git a/packages/web/docs/src/components/hero.tsx b/packages/web/docs/src/components/hero.tsx
index 590c0c1d9..f6324e9eb 100644
--- a/packages/web/docs/src/components/hero.tsx
+++ b/packages/web/docs/src/components/hero.tsx
@@ -10,7 +10,7 @@ export function HeroTitle(props: { children: ReactNode }) {
 
 export function HeroSubtitle(props: { children: ReactNode }) {
   return (
-    <p className="mx-auto mt-6 max-w-screen-sm text-center text-lg text-gray-700 font-light">
+    <p className="mx-auto mt-6 max-w-screen-sm text-center text-lg font-light text-gray-700">
       {props.children}
     </p>
   );
@@ -27,8 +27,8 @@ export function HeroLinks(props: { children: ReactNode }) {
 export function HereTrustedBy(props: { children: ReactNode }) {
   return (
     <div className="mt-24 lg:mt-36">
-      <div className="mx-auto lg:max-w-screen-lg max-w-[80%] text-center">
-        <p className="text-gray-700 text-sm">
+      <div className="mx-auto max-w-[80%] text-center lg:max-w-screen-lg">
+        <p className="text-sm text-gray-700">
           Trusted by global enterprises and fast-moving startups.
         </p>
         <div className="mt-10 flex flex-row flex-wrap items-center justify-center gap-x-12 gap-y-6 text-gray-700">
@@ -41,9 +41,9 @@ export function HereTrustedBy(props: { children: ReactNode }) {
 
 export function Hero(props: { children: ReactNode }) {
   return (
-    <div className="w-full relative overflow-hidden bg-white">
-      <div className="my-6 py-20 px-2 sm:py-24 lg:py-32">
-        <div className="z-10 relative">{props.children}</div>
+    <div className="relative w-full overflow-hidden bg-white">
+      <div className="my-6 px-2 py-20 sm:py-24 lg:py-32">
+        <div className="relative z-10">{props.children}</div>
       </div>
     </div>
   );
diff --git a/packages/web/docs/src/components/highlights.tsx b/packages/web/docs/src/components/highlights.tsx
index 321d7b533..39d1935f0 100644
--- a/packages/web/docs/src/components/highlights.tsx
+++ b/packages/web/docs/src/components/highlights.tsx
@@ -6,7 +6,7 @@ export function HighlightTextLink(props: { href: string; children: ReactNode })
   return (
     <Link
       href={props.href}
-      className="underline underline-offset-2 transition text-yellow-500 hover:text-yellow-500/75 "
+      className="text-yellow-500 underline underline-offset-2 transition hover:text-yellow-500/75 "
     >
       {props.children}
     </Link>
@@ -22,16 +22,16 @@ export function Highlights(props: {
   }>;
 }) {
   return (
-    <div className="container mx-auto box-border flex flex-col justify-between gap-12 md:flex-row px-6 py-12">
+    <div className="container mx-auto box-border flex flex-col justify-between gap-12 px-6 py-12 md:flex-row">
       {props.items.map(({ title, description, icon, documentationLink }, i) => (
         <div className="flex flex-1 flex-row gap-6 md:flex-col lg:flex-row" key={i}>
-          <div className="lg:h-16 lg:w-16 w-12 h-12 shrink-0 text-yellow-500">{icon}</div>
-          <div className="flex flex-col text-black gap-y-2">
-            <h3 className="lg:text-xl text-lg font-semibold">{title}</h3>
+          <div className="h-12 w-12 shrink-0 text-yellow-500 lg:h-16 lg:w-16">{icon}</div>
+          <div className="flex flex-col gap-y-2 text-black">
+            <h3 className="text-lg font-semibold lg:text-xl">{title}</h3>
             <p className="text-gray-600">{description}</p>
             <Link
               href={documentationLink}
-              className="mt-4 group inline-flex font-semibold items-center transition hover:underline underline-offset-8 gap-x-2 text-yellow-500"
+              className="group mt-4 inline-flex items-center gap-x-2 font-semibold text-yellow-500 underline-offset-8 transition hover:underline"
             >
               <div>
                 <BookIcon size={16} />
diff --git a/packages/web/docs/src/components/landing-page.tsx b/packages/web/docs/src/components/landing-page.tsx
index f7570a242..59546b4b2 100644
--- a/packages/web/docs/src/components/landing-page.tsx
+++ b/packages/web/docs/src/components/landing-page.tsx
@@ -64,7 +64,7 @@ const renderFeatures = ({
       {documentationLink ? (
         <Link
           href={documentationLink}
-          className="group inline-flex text-sm items-center transition hover:underline underline-offset-8 gap-x-2 mt-2"
+          className="group mt-2 inline-flex items-center gap-x-2 text-sm underline-offset-8 transition hover:underline"
         >
           <div>
             <BookIcon size={16} />
@@ -96,7 +96,7 @@ function Highlight(
     <div
       className={cn(
         classes.root,
-        'lg:p-8 p-2 relative transition',
+        'relative p-2 transition lg:p-8',
         'onClick' in props ? 'cursor-pointer' : '',
       )}
       onClick={'onClick' in props ? () => props.onClick(props.index) : () => {}}
@@ -104,7 +104,7 @@ function Highlight(
       {props.documentationLink ? null : (
         <div
           className={cn(
-            'absolute inset-0 lg:border-l-4 lg:border-b-0 border-b-2',
+            'absolute inset-0 border-b-2 lg:border-b-0 lg:border-l-4',
             'active' in props && props.active ? 'opacity-100' : 'opacity-0 hover:opacity-50',
           )}
           style={{
@@ -115,14 +115,14 @@ function Highlight(
       <div
         className={cn(
           classes.content,
-          'lg:w-auto w-full',
+          'w-full lg:w-auto',
           'onClick' in props ? 'gap-y-2' : 'gap-y-4',
         )}
       >
         <h3
           className={cn(
             classes.title,
-            'lg:text-lg text-base',
+            'text-base lg:text-lg',
             'onClick' in props ? 'text-center lg:text-left' : '',
           )}
         >
@@ -132,7 +132,7 @@ function Highlight(
           className={cn(
             classes.description,
             'text-sm',
-            'onClick' in props ? 'lg:block hidden' : '',
+            'onClick' in props ? 'hidden lg:block' : '',
           )}
         >
           {props.description}
@@ -140,7 +140,7 @@ function Highlight(
         {props.documentationLink ? (
           <Link
             href={props.documentationLink}
-            className="group inline-flex text-sm items-center transition hover:underline underline-offset-8 gap-x-2 mt-2"
+            className="group mt-2 inline-flex items-center gap-x-2 text-sm underline-offset-8 transition hover:underline"
           >
             <div>
               <BookIcon size={16} />
@@ -186,29 +186,29 @@ function Feature(props: {
       <div className={cn(classes.feature, 'relative overflow-hidden')}>
         <div>
           <div
-            className="w-full absolute h-[1px] top-0 opacity-25"
+            className="absolute top-0 h-[1px] w-full opacity-25"
             style={{
               backgroundImage: `linear-gradient(90deg, ${end}, ${start})`,
             }}
           />
           <div
-            className="absolute opacity-[0.15] w-[60vw] h-[255px] left-[-200px] top-[-200px] blur-3xl"
+            className="absolute left-[-200px] top-[-200px] h-[255px] w-[60vw] opacity-[0.15] blur-3xl"
             style={{
               backgroundImage: `linear-gradient(180deg, ${end}, ${start})`,
             }}
           />
           <div
-            className="absolute opacity-[0.15] w-[60vw] h-[255px] right-[-200px] top-[-200px] blur-3xl"
+            className="absolute right-[-200px] top-[-200px] h-[255px] w-[60vw] opacity-[0.15] blur-3xl"
             style={{
               backgroundImage: `linear-gradient(180deg, ${start}, ${end})`,
             }}
           />
         </div>
         <div className="pb-28 pt-20 sm:py-32">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
+          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
               <h2
-                className="text-4xl font-semibold leading-normal tracking-tight bg-clip-text text-transparent"
+                className="bg-clip-text text-4xl font-semibold leading-normal tracking-tight text-transparent"
                 style={{ backgroundImage: `linear-gradient(-70deg, ${end}, ${start})` }}
               >
                 {title}
@@ -218,7 +218,7 @@ function Feature(props: {
                 <div className="pt-12">
                   <Link
                     href={documentationLink}
-                    className="group inline-flex font-semibold items-center transition hover:underline underline-offset-8 gap-x-2"
+                    className="group inline-flex items-center gap-x-2 font-semibold underline-offset-8 transition hover:underline"
                     style={{
                       color: start,
                     }}
@@ -232,7 +232,7 @@ function Feature(props: {
               ) : null}
             </div>
             {imagelessHighlights ? (
-              <div className="flex flex-col lg:flex-row justify-center mt-16 pt-10 sm:gap-y-6 md:mt-20 lg:pt-0">
+              <div className="mt-16 flex flex-col justify-center pt-10 sm:gap-y-6 md:mt-20 lg:flex-row lg:pt-0">
                 {imagelessHighlights.map(highlight => (
                   <Highlight
                     {...highlight}
@@ -244,10 +244,10 @@ function Feature(props: {
               </div>
             ) : null}
             {highlights ? (
-              <div className="mt-0 lg:mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0">
-                <div className="w-full lg:w-auto flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
+              <div className="mt-0 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:mt-16 lg:grid-cols-12 lg:pt-0">
+                <div className="flex w-full overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5 lg:w-auto">
                   <div className="w-full">
-                    <div className="flex lg:flex-col lg:gap-y-12 gap-x-0 flex-row justify-evenly">
+                    <div className="flex flex-row justify-evenly gap-x-0 lg:flex-col lg:gap-y-12">
                       {highlights.map((highlight, i) => (
                         <Highlight
                           {...highlight}
@@ -267,16 +267,16 @@ function Feature(props: {
                   {highlights.map((highlight, i) => (
                     <div key={i} className={cn(activeHighlight === i ? 'block' : 'hidden')}>
                       <div className="relative sm:px-6 lg:hidden">
-                        <p className="relative mx-auto max-w-2xl text-black text-base sm:text-center">
+                        <p className="relative mx-auto max-w-2xl text-base text-black sm:text-center">
                           {highlight.description}
                         </p>
                       </div>
                       <div
-                        className="mt-10 w-[45rem] sm:w-auto lg:mt-0 lg:w-[67.8125rem] rounded-lg"
+                        className="mt-10 w-[45rem] rounded-lg sm:w-auto lg:mt-0 lg:w-[67.8125rem]"
                         style={{ backgroundImage: `linear-gradient(-70deg, ${end}, ${start})` }}
                       >
-                        <div className="lg:p-12 p-4">
-                          <div className="rounded-xl overflow-hidden">
+                        <div className="p-4 lg:p-12">
+                          <div className="overflow-hidden rounded-xl">
                             <Image
                               {...highlight.image}
                               className="w-full"
@@ -332,30 +332,30 @@ export function IndexPage(): ReactElement {
           </HeroLinks>
           <HereTrustedBy>
             <MeetupLogo
-              className="opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out"
+              className="opacity-50 transition-opacity duration-300 ease-in-out hover:opacity-100"
               height={32}
             />
             <LinktreeLogo
-              className="opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out"
+              className="opacity-50 transition-opacity duration-300 ease-in-out hover:opacity-100"
               height={22}
             />
             <KarrotLogo
               height={28}
-              className="opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out"
+              className="opacity-50 transition-opacity duration-300 ease-in-out hover:opacity-100"
             />
             <AligentLogo
-              className="opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out"
+              className="opacity-50 transition-opacity duration-300 ease-in-out hover:opacity-100"
               height={32}
             />
             <SoundYXZLogo
-              className="opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out"
+              className="opacity-50 transition-opacity duration-300 ease-in-out hover:opacity-100"
               height={32}
             />
           </HereTrustedBy>
         </Hero>
-        <div className="even:bg-gray-50 relative">
+        <div className="relative even:bg-gray-50">
           <div>
-            <div className="w-full absolute h-[1px] top-0 opacity-25 bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300" />
+            <div className="absolute top-0 h-[1px] w-full bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300 opacity-25" />
           </div>
           <StatsList>
             <StatsItem label="Happy users" value={3.0} suffix="K" decimal />
@@ -398,12 +398,12 @@ export function IndexPage(): ReactElement {
           />
           <div className={cn(classes.feature, 'relative overflow-hidden')}>
             <div>
-              <div className="w-full absolute h-[1px] top-0 opacity-25 bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300" />
-              <div className="absolute opacity-[0.15] w-[60vw] h-[255px] left-[-200px] top-[-200px] blur-3xl bg-gradient-to-b from-gray-50 to-gray-300" />
-              <div className="absolute opacity-[0.15] w-[60vw] h-[255px] right-[-200px] top-[-200px] blur-3xl bg-gradient-to-b from-gray-300 to-gray-50" />
+              <div className="absolute top-0 h-[1px] w-full bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300 opacity-25" />
+              <div className="absolute left-[-200px] top-[-200px] h-[255px] w-[60vw] bg-gradient-to-b from-gray-50 to-gray-300 opacity-[0.15] blur-3xl" />
+              <div className="absolute right-[-200px] top-[-200px] h-[255px] w-[60vw] bg-gradient-to-b from-gray-300 to-gray-50 opacity-[0.15] blur-3xl" />
             </div>
             <div className="py-24">
-              <h2 className="base:mr-1 ml-1 text-3xl font-semibold leading-normal tracking-tight text-center mb-12 text-black">
+              <h2 className="base:mr-1 mb-12 ml-1 text-center text-3xl font-semibold leading-normal tracking-tight text-black">
                 Perfect fit for your GraphQL Gateway
               </h2>
               <Highlights
@@ -508,7 +508,7 @@ export function IndexPage(): ReactElement {
             }}
           >
             <div>
-              <div className="w-full absolute h-[1px] top-0 opacity-25 bg-blue-900" />
+              <div className="absolute top-0 h-[1px] w-full bg-blue-900 opacity-25" />
             </div>
             <div className="py-24">
               <div className="mx-auto max-w-lg text-center text-white">
@@ -522,7 +522,7 @@ export function IndexPage(): ReactElement {
                 <a
                   href="https://app.graphql-hive.com"
                   className={cn(
-                    'text-sm rounded-md px-6 py-3 mt-12 font-medium text-black shadow-sm',
+                    'mt-12 rounded-md px-6 py-3 text-sm font-medium text-black shadow-sm',
                     'bg-white hover:bg-blue-50',
                     'inline-flex flex-row items-center gap-2',
                   )}
@@ -534,12 +534,12 @@ export function IndexPage(): ReactElement {
           </div>
           <div className={cn(classes.feature, 'relative overflow-hidden')}>
             <div>
-              <div className="w-full absolute h-[1px] top-0 opacity-25 bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300" />
-              <div className="absolute opacity-[0.15] w-[60vw] h-[255px] left-[-200px] top-[-200px] blur-3xl bg-gradient-to-b from-gray-600 to-gray-900" />
-              <div className="absolute opacity-[0.15] w-[60vw] h-[255px] right-[-200px] top-[-200px] blur-3xl bg-gradient-to-b from-gray-900 to-gray-600" />
+              <div className="absolute top-0 h-[1px] w-full bg-gradient-to-r from-gray-300 via-gray-500 to-gray-300 opacity-25" />
+              <div className="absolute left-[-200px] top-[-200px] h-[255px] w-[60vw] bg-gradient-to-b from-gray-600 to-gray-900 opacity-[0.15] blur-3xl" />
+              <div className="absolute right-[-200px] top-[-200px] h-[255px] w-[60vw] bg-gradient-to-b from-gray-900 to-gray-600 opacity-[0.15] blur-3xl" />
             </div>
             <div className="py-24">
-              <h2 className="text-3xl font-semibold leading-normal tracking-tight text-center mb-12 text-black">
+              <h2 className="mb-12 text-center text-3xl font-semibold leading-normal tracking-tight text-black">
                 Fits your infrastructure
               </h2>
               <Highlights
@@ -570,19 +570,19 @@ export function IndexPage(): ReactElement {
           <div className={cn(classes.feature, 'relative overflow-hidden')}>
             <div>
               <div
-                className="w-full absolute h-[1px] top-0 opacity-25"
+                className="absolute top-0 h-[1px] w-full opacity-25"
                 style={{
                   backgroundImage: `linear-gradient(90deg, ${gradients[3][1]}, ${gradients[3][0]})`,
                 }}
               />
               <div
-                className="absolute opacity-[0.15] w-[60vw] h-[255px] left-[-200px] top-[-200px] blur-3xl"
+                className="absolute left-[-200px] top-[-200px] h-[255px] w-[60vw] opacity-[0.15] blur-3xl"
                 style={{
                   backgroundImage: `linear-gradient(180deg, ${gradients[3][0]}, ${gradients[3][1]})`,
                 }}
               />
               <div
-                className="absolute opacity-[0.15] w-[60vw] h-[255px] right-[-200px] top-[-200px] blur-3xl"
+                className="absolute right-[-200px] top-[-200px] h-[255px] w-[60vw] opacity-[0.15] blur-3xl"
                 style={{
                   backgroundImage: `linear-gradient(180deg, ${gradients[3][1]}, ${gradients[3][0]})`,
                 }}
diff --git a/packages/web/docs/src/components/page.tsx b/packages/web/docs/src/components/page.tsx
index 6e4894dde..285762bf8 100644
--- a/packages/web/docs/src/components/page.tsx
+++ b/packages/web/docs/src/components/page.tsx
@@ -15,7 +15,7 @@ const CookiesConsent = (): ReactElement => {
   }
 
   return (
-    <div className="fixed bottom-0 flex w-full flex-wrap items-center justify-center gap-4 text-black bg-gray-100 px-5 py-7 text-center lg:flex-nowrap lg:justify-between lg:text-left z-50">
+    <div className="fixed bottom-0 z-50 flex w-full flex-wrap items-center justify-center gap-4 bg-gray-100 px-5 py-7 text-center text-black lg:flex-nowrap lg:justify-between lg:text-left">
       <div className="w-full text-sm">
         <p>This website uses cookies to analyze site usage and improve your experience.</p>
         <p>If you continue to use our services, you are agreeing to the use of such cookies.</p>
@@ -47,7 +47,7 @@ export function Page(props: { children: ReactNode }) {
         <link rel="preconnect" href="https://rsms.me/" />
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
       </Head>
-      <div className="flex h-full flex-col font-display">{props.children}</div>
+      <div className="font-display flex h-full flex-col">{props.children}</div>
       {mounted && <CookiesConsent />}
     </>
   );
diff --git a/packages/web/docs/src/components/product-update-blog-post-header.tsx b/packages/web/docs/src/components/product-update-blog-post-header.tsx
index debfe5b9f..45ef76f9b 100644
--- a/packages/web/docs/src/components/product-update-blog-post-header.tsx
+++ b/packages/web/docs/src/components/product-update-blog-post-header.tsx
@@ -23,7 +23,7 @@ const Authors = ({ meta }: { meta: Meta }): ReactElement => {
           <SocialAvatar author={author} />
         </Anchor>
         <div className="ml-2.5 flex flex-col">
-          <Anchor href={author.link} title={author.name} className="text-[#777] font-semibold">
+          <Anchor href={author.link} title={author.name} className="font-semibold text-[#777]">
             {author.name}
           </Anchor>
           <time
@@ -51,7 +51,7 @@ const Authors = ({ meta }: { meta: Meta }): ReactElement => {
           const author = authors[authorId];
           return (
             <div key={authorId}>
-              <Anchor href={author.link} title={author.name} className="text-[#777] font-semibold">
+              <Anchor href={author.link} title={author.name} className="font-semibold text-[#777]">
                 <SocialAvatar author={author} />
                 <span className="ml-2.5 text-sm">{author.name}</span>
               </Anchor>
diff --git a/packages/web/docs/src/components/product-updates.tsx b/packages/web/docs/src/components/product-updates.tsx
index e9aa157fe..33eeb1d1a 100644
--- a/packages/web/docs/src/components/product-updates.tsx
+++ b/packages/web/docs/src/components/product-updates.tsx
@@ -16,7 +16,7 @@ type Changelog = {
 function ProductUpdateTeaser(props: Changelog) {
   return (
     <li className="mb-10 ml-4">
-      <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700" />
+      <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700" />
       <time
         className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
         dateTime={props.date}
@@ -39,7 +39,7 @@ export const ProductUpdates = ({
   return (
     <>
       <div className="pb-12">
-        <h1 className="!text-left !m-0">Product Updates</h1>
+        <h1 className="!m-0 !text-left">Product Updates</h1>
         <p>The most recent developments from GraphQL Hive.</p>
       </div>
       <ol className="relative border-l border-gray-200 dark:border-gray-700">
diff --git a/packages/web/docs/src/components/stats.tsx b/packages/web/docs/src/components/stats.tsx
index 78066b437..90c96b086 100644
--- a/packages/web/docs/src/components/stats.tsx
+++ b/packages/web/docs/src/components/stats.tsx
@@ -9,7 +9,7 @@ export function StatsItem(props: {
 }) {
   return (
     <div>
-      <div className="font-bold text-5xl text-center text-black">
+      <div className="text-center text-5xl font-bold text-black">
         <CountUp
           start={0}
           end={props.value}
@@ -22,14 +22,14 @@ export function StatsItem(props: {
         />
         {props.suffix}+
       </div>
-      <div className="text-gray-600 uppercase font-semibold text-center">{props.label}</div>
+      <div className="text-center font-semibold uppercase text-gray-600">{props.label}</div>
     </div>
   );
 }
 
 export function StatsList(props: { children: ReactNode }) {
   return (
-    <div className="container mx-auto box-border grid grid-cols-2 lg:grid-cols-4 gap-8 px-6 py-12">
+    <div className="container mx-auto box-border grid grid-cols-2 gap-8 px-6 py-12 lg:grid-cols-4">
       {props.children}
     </div>
   );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a99ff331..b87ff7be9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,11 +110,11 @@ importers:
         specifier: 1.3.96
         version: 1.3.96
       '@theguild/eslint-config':
-        specifier: 0.11.0
-        version: 0.11.0(eslint@8.53.0)(typescript@5.2.2)
+        specifier: 0.11.1
+        version: 0.11.1(eslint@8.53.0)(typescript@5.2.2)
       '@theguild/prettier-config':
-        specifier: 1.2.0
-        version: 1.2.0(prettier@2.8.8)
+        specifier: 2.0.2
+        version: 2.0.2(prettier@3.0.3)
       '@types/node':
         specifier: 18.18.8
         version: 18.18.8
@@ -158,17 +158,17 @@ importers:
         specifier: 8.11.3
         version: 8.11.3
       prettier:
-        specifier: 2.8.8
-        version: 2.8.8
+        specifier: 3.0.3
+        version: 3.0.3
       prettier-plugin-sql:
         specifier: 0.15.1
-        version: 0.15.1(prettier@2.8.8)
+        version: 0.15.1(prettier@3.0.3)
       prettier-plugin-tailwindcss:
-        specifier: 0.4.1
-        version: 0.4.1(prettier@2.8.8)
+        specifier: 0.5.6
+        version: 0.5.6(prettier@3.0.3)
       pretty-quick:
         specifier: 3.1.3
-        version: 3.1.3(prettier@2.8.8)
+        version: 3.1.3(prettier@3.0.3)
       rimraf:
         specifier: 4.4.1
         version: 4.4.1
@@ -3096,29 +3096,6 @@ packages:
     resolution: {integrity: sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/core@7.21.5:
-    resolution: {integrity: sha512-9M398B/QH5DlfCOTKDZT1ozXr0x8uBEeFd+dJraGUZGiaNpGCDVGCc14hZexsMblw3XxltJ+6kSvogp9J+5a9g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.0
-      '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-module-transforms': 7.23.0(@babel/core@7.21.5)
-      '@babel/helpers': 7.23.1
-      '@babel/parser': 7.23.0
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.0
-      '@babel/types': 7.23.0
-      convert-source-map: 1.9.0
-      debug: 4.3.4(supports-color@8.1.1)
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/core@7.22.8:
     resolution: {integrity: sha512-75+KxFB4CZqYRXjx4NlR4J7yGvKumBuZTmV4NV6v09dVXXkuYVYLT68N6HCzLvfJ+fWCxQsntNzKwwIXL4bHnw==}
     engines: {node: '>=6.9.0'}
@@ -3282,20 +3259,6 @@ packages:
     dependencies:
       '@babel/types': 7.23.0
 
-  /@babel/helper-module-transforms@7.23.0(@babel/core@7.21.5):
-    resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.21.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
-    dev: true
-
   /@babel/helper-module-transforms@7.23.0(@babel/core@7.22.8):
     resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==}
     engines: {node: '>=6.9.0'}
@@ -5953,16 +5916,6 @@ packages:
     dev: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.3.0(eslint@8.53.0):
-    resolution: {integrity: sha512-v3oplH6FYCULtFuCeqyuTd9D2WKO937Dxdq+GmHOLL72TTRriLxz2VLlNfkZRsvj6PKnOPAtuT6dwrs/pA5DvA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
-      eslint-visitor-keys: 3.4.3
-    dev: true
-
   /@eslint-community/eslint-utils@4.4.0(eslint@8.53.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5973,11 +5926,6 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@eslint-community/regexpp@4.4.1:
-    resolution: {integrity: sha512-BISJ6ZE4xQsuL/FmsyRaiffpq977bMlsKfGHTQrOGFErfByxIe6iZTxPf/00Zon9b9a7iUykfQwejN3s2ZW/Bw==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: true
-
   /@eslint-community/regexpp@4.9.0:
     resolution: {integrity: sha512-zJmuCWj2VLBt4c25CfBIbMZLGLyhkvs7LznyVX5HfpzeocThgIj5XQK4L+g3U36mMcx8bPMhGyPpwCATamC4jQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -7754,23 +7702,21 @@ packages:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
-  /@ianvs/prettier-plugin-sort-imports@4.0.0-alpha.3(prettier@2.8.8):
-    resolution: {integrity: sha512-3zUL/BQoNVoe1OHV7GQ5d4j51/QNvo4tvYNm0j87ZWzsj90jSPHIiI4KtQGM7ZCbmK+TXQBwJWSKVxkHl+iUPg==}
+  /@ianvs/prettier-plugin-sort-imports@4.1.1(prettier@3.0.3):
+    resolution: {integrity: sha512-kJhXq63ngpTQ2dxgf5GasbPJWsJA3LgoOdd7WGhpUSzLgLgI4IsIzYkbJf9kmpOHe7Vdm/o3PcRA3jmizXUuAQ==}
     peerDependencies:
       '@vue/compiler-sfc': '>=3.0.0'
-      prettier: 2.x
+      prettier: 2 || 3
     peerDependenciesMeta:
       '@vue/compiler-sfc':
         optional: true
     dependencies:
-      '@babel/core': 7.21.5
+      '@babel/core': 7.23.0
       '@babel/generator': 7.23.0
       '@babel/parser': 7.23.0
       '@babel/traverse': 7.23.0
       '@babel/types': 7.23.0
-      lodash.clone: 4.5.0
-      lodash.isequal: 4.5.0
-      prettier: 2.8.8
+      prettier: 3.0.3
       semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
@@ -12868,18 +12814,18 @@ packages:
     dev: false
     patched: true
 
-  /@theguild/eslint-config@0.11.0(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-dxKcEb0uKZvkKBp9KwcKe/npuHZw789vrQPUJGJksz9ghjvAQOc9Kx4PMJTTrVWOzg/1lzFB9s070V9yviYkHg==}
+  /@theguild/eslint-config@0.11.1(eslint@8.53.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-NcuGWeAEhXQDqH8A0EWtodqHubLo5QVCMDO82eajkWR2r5WLkAXGeLo5Mk7BCTpncoBG2x406/IVZLTE54e3lA==}
     peerDependencies:
       eslint: ^8.24.0
     dependencies:
       '@rushstack/eslint-patch': 1.3.2
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/parser': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/eslint-plugin': 6.10.0(@typescript-eslint/parser@6.10.0)(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 6.10.0(eslint@8.53.0)(typescript@5.2.2)
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
-      eslint-config-prettier: 8.8.0(eslint@8.53.0)
-      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.62.0)(eslint-plugin-import@2.27.5)(eslint@8.53.0)
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0)
+      eslint-config-prettier: 9.0.0(eslint@8.53.0)
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@6.10.0)(eslint-plugin-import@2.27.5)(eslint@8.53.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@6.10.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0)
       eslint-plugin-jsonc: 2.9.0(eslint@8.53.0)
       eslint-plugin-jsx-a11y: 6.7.1(eslint@8.53.0)
       eslint-plugin-mdx: 2.1.0(eslint@8.53.0)
@@ -12887,8 +12833,8 @@ packages:
       eslint-plugin-promise: 6.1.1(eslint@8.53.0)
       eslint-plugin-react: 7.32.2(eslint@8.53.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.53.0)
-      eslint-plugin-sonarjs: 0.19.0(eslint@8.53.0)
-      eslint-plugin-unicorn: 47.0.0(eslint@8.53.0)
+      eslint-plugin-sonarjs: 0.23.0(eslint@8.53.0)
+      eslint-plugin-unicorn: 49.0.0(eslint@8.53.0)
       eslint-plugin-yml: 1.8.0(eslint@8.53.0)
     transitivePeerDependencies:
       - eslint-import-resolver-node
@@ -12908,15 +12854,15 @@ packages:
       json5: 2.2.3
     dev: true
 
-  /@theguild/prettier-config@1.2.0(prettier@2.8.8):
-    resolution: {integrity: sha512-7zws6rvfO63xPEExM8A8/hFmFnleS/oHEov+iNbWe4QddO5e/zGmm69LuoptsrB9GAPsaxxOAUf8tn23V/1ljA==}
+  /@theguild/prettier-config@2.0.2(prettier@3.0.3):
+    resolution: {integrity: sha512-XByOO9Oash2mEXM2j9KcV/UUzkjzUrStyMNDkLBjHwLV9ir6auhFgo0UJZoYJildsMwO1FR8XpluocLPmNyI9w==}
     peerDependencies:
-      prettier: ^2
+      prettier: ^3
     dependencies:
-      '@ianvs/prettier-plugin-sort-imports': 4.0.0-alpha.3(prettier@2.8.8)
-      prettier: 2.8.8
-      prettier-plugin-pkg: 0.17.1(prettier@2.8.8)
-      prettier-plugin-sh: 0.12.8(prettier@2.8.8)
+      '@ianvs/prettier-plugin-sort-imports': 4.1.1(prettier@3.0.3)
+      prettier: 3.0.3
+      prettier-plugin-pkg: 0.18.0(prettier@3.0.3)
+      prettier-plugin-sh: 0.13.1(prettier@3.0.3)
     transitivePeerDependencies:
       - '@vue/compiler-sfc'
       - supports-color
@@ -13621,47 +13567,49 @@ packages:
     dev: true
     optional: true
 
-  /@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/eslint-plugin@6.10.0(@typescript-eslint/parser@6.10.0)(eslint@8.53.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-uoLj4g2OTL8rfUQVx2AFO1hp/zja1wABJq77P6IclQs6I/m9GLrm7jCdgzZkvWdDCQf1uEvoa8s8CupsgWQgVg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^5.0.0
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@eslint-community/regexpp': 4.4.1
-      '@typescript-eslint/parser': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/scope-manager': 5.62.0
-      '@typescript-eslint/type-utils': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
+      '@eslint-community/regexpp': 4.9.0
+      '@typescript-eslint/parser': 6.10.0(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.10.0
+      '@typescript-eslint/type-utils': 6.10.0(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.10.0(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.10.0
       debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
       graphemer: 1.4.0
       ignore: 5.2.4
-      natural-compare-lite: 1.4.0
+      natural-compare: 1.4.0
       semver: 7.5.4
-      tsutils: 3.21.0(typescript@5.2.2)
+      ts-api-utils: 1.0.3(typescript@5.2.2)
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@5.62.0(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/parser@6.10.0(eslint@8.53.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      eslint: ^7.0.0 || ^8.0.0
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.62.0
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.10.0
+      '@typescript-eslint/types': 6.10.0
+      '@typescript-eslint/typescript-estree': 6.10.0(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.10.0
       debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
       typescript: 5.2.2
@@ -13669,85 +13617,84 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager@5.62.0:
-    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/scope-manager@6.10.0:
+    resolution: {integrity: sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/visitor-keys': 5.62.0
+      '@typescript-eslint/types': 6.10.0
+      '@typescript-eslint/visitor-keys': 6.10.0
     dev: true
 
-  /@typescript-eslint/type-utils@5.62.0(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/type-utils@6.10.0(eslint@8.53.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-wYpPs3hgTFblMYwbYWPT3eZtaDOjbLyIYuqpwuLBBqhLiuvJ+9sEp2gNRJEtR5N/c9G1uTtQQL5AhV0fEPJYcg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      eslint: '*'
+      eslint: ^7.0.0 || ^8.0.0
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
-      '@typescript-eslint/utils': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/typescript-estree': 6.10.0(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.10.0(eslint@8.53.0)(typescript@5.2.2)
       debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
-      tsutils: 3.21.0(typescript@5.2.2)
+      ts-api-utils: 1.0.3(typescript@5.2.2)
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types@5.62.0:
-    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/types@6.10.0:
+    resolution: {integrity: sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.2.2):
-    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/typescript-estree@6.10.0(typescript@5.2.2):
+    resolution: {integrity: sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/visitor-keys': 5.62.0
+      '@typescript-eslint/types': 6.10.0
+      '@typescript-eslint/visitor-keys': 6.10.0
       debug: 4.3.4(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
-      tsutils: 3.21.0(typescript@5.2.2)
+      ts-api-utils: 1.0.3(typescript@5.2.2)
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.62.0(eslint@8.53.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/utils@6.10.0(eslint@8.53.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-v+pJ1/RcVyRc0o4wAGux9x42RHmAjIGzPRo538Z8M1tVx6HOnoQBCX/NoadHQlZeC+QO2yr4nNSFWOoraZCAyg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      eslint: ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
       '@types/json-schema': 7.0.13
       '@types/semver': 7.5.0
-      '@typescript-eslint/scope-manager': 5.62.0
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.10.0
+      '@typescript-eslint/types': 6.10.0
+      '@typescript-eslint/typescript-estree': 6.10.0(typescript@5.2.2)
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
-      eslint-scope: 5.1.1
       semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys@5.62.0:
-    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/visitor-keys@6.10.0:
+    resolution: {integrity: sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/types': 6.10.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -18074,8 +18021,8 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-config-prettier@8.8.0(eslint@8.53.0):
-    resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==}
+  /eslint-config-prettier@9.0.0(eslint@8.53.0):
+    resolution: {integrity: sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
@@ -18093,7 +18040,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-import-resolver-typescript@3.5.5(@typescript-eslint/parser@5.62.0)(eslint-plugin-import@2.27.5)(eslint@8.53.0):
+  /eslint-import-resolver-typescript@3.5.5(@typescript-eslint/parser@6.10.0)(eslint-plugin-import@2.27.5)(eslint@8.53.0):
     resolution: {integrity: sha512-TdJqPHs2lW5J9Zpe17DZNQuDnox4xo2o+0tE7Pggain9Rbc19ik8kFtXdxZ250FVx2kF4vlt2RSf4qlUpG7bhw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -18103,8 +18050,8 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       enhanced-resolve: 5.15.0
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
-      eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0)
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0)
+      eslint-module-utils: 2.7.4(@typescript-eslint/parser@6.10.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@6.10.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0)
       get-tsconfig: 4.7.2
       globby: 13.1.3
       is-core-module: 2.13.1
@@ -18142,7 +18089,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0):
+  /eslint-module-utils@2.7.4(@typescript-eslint/parser@6.10.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0):
     resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -18163,11 +18110,11 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 6.10.0(eslint@8.53.0)(typescript@5.2.2)
       debug: 3.2.7(supports-color@8.1.1)
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
       eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.62.0)(eslint-plugin-import@2.27.5)(eslint@8.53.0)
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@6.10.0)(eslint-plugin-import@2.27.5)(eslint@8.53.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -18192,7 +18139,7 @@ packages:
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
     dev: true
 
-  /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0):
+  /eslint-plugin-import@2.27.5(@typescript-eslint/parser@6.10.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0):
     resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -18202,7 +18149,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@8.53.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 6.10.0(eslint@8.53.0)(typescript@5.2.2)
       array-includes: 3.1.6
       array.prototype.flat: 1.3.1
       array.prototype.flatmap: 1.3.1
@@ -18210,7 +18157,7 @@ packages:
       doctrine: 2.1.0
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
       eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0)
+      eslint-module-utils: 2.7.4(@typescript-eslint/parser@6.10.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.53.0)
       has: 1.0.3
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -18231,7 +18178,7 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      '@eslint-community/eslint-utils': 4.3.0(eslint@8.53.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
       eslint: 8.53.0(patch_hash=fjbpfrtrjd6idngyeqxnwopfva)
       jsonc-eslint-parser: 2.1.0
       natural-compare: 1.4.0
@@ -18352,8 +18299,8 @@ packages:
       string.prototype.matchall: 4.0.8
     dev: true
 
-  /eslint-plugin-sonarjs@0.19.0(eslint@8.53.0):
-    resolution: {integrity: sha512-6+s5oNk5TFtVlbRxqZN7FIGmjdPCYQKaTzFPmqieCmsU1kBYDzndTeQav0xtQNwZJWu5awWfTGe8Srq9xFOGnw==}
+  /eslint-plugin-sonarjs@0.23.0(eslint@8.53.0):
+    resolution: {integrity: sha512-z44T3PBf9W7qQ/aR+NmofOTyg6HLhSEZOPD4zhStqBpLoMp8GYhFksuUBnCxbnf1nfISpKBVkQhiBLFI/F4Wlg==}
     engines: {node: '>=14'}
     peerDependencies:
       eslint: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -18372,11 +18319,11 @@ packages:
       tailwindcss: 3.3.5(ts-node@10.9.1)
     dev: true
 
-  /eslint-plugin-unicorn@47.0.0(eslint@8.53.0):
-    resolution: {integrity: sha512-ivB3bKk7fDIeWOUmmMm9o3Ax9zbMz1Bsza/R2qm46ufw4T6VBFBaJIR1uN3pCKSmSXm8/9Nri8V+iUut1NhQGA==}
+  /eslint-plugin-unicorn@49.0.0(eslint@8.53.0):
+    resolution: {integrity: sha512-0fHEa/8Pih5cmzFW5L7xMEfUTvI9WKeQtjmKpTUmY+BiFCDxkxrTdnURJOHKykhtwIeyYsxnecbGvDCml++z4Q==}
     engines: {node: '>=16'}
     peerDependencies:
-      eslint: '>=8.38.0'
+      eslint: '>=8.52.0'
     dependencies:
       '@babel/helper-validator-identifier': 7.22.20
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
@@ -18387,12 +18334,10 @@ packages:
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
       jsesc: 3.0.2
-      lodash: 4.17.21
       pluralize: 8.0.0
       read-pkg-up: 7.0.1
-      regexp-tree: 0.1.24
+      regexp-tree: 0.1.27
       regjsparser: 0.10.0
-      safe-regex: 2.1.1
       semver: 7.5.4
       strip-indent: 3.0.0
     dev: true
@@ -22622,10 +22567,6 @@ packages:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: false
 
-  /lodash.clone@4.5.0:
-    resolution: {integrity: sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg==}
-    dev: true
-
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: true
@@ -22641,10 +22582,6 @@ packages:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
     dev: true
 
-  /lodash.isequal@4.5.0:
-    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
-    dev: true
-
   /lodash.lowercase@4.3.0:
     resolution: {integrity: sha512-UcvP1IZYyDKyEL64mmrwoA1AbFu5ahojhTtkOUr1K9dbuxzS9ev8i4TxMMGCqRC9TE8uDaSoufNAXxRPNTseVA==}
     dev: true
@@ -24548,10 +24485,6 @@ packages:
       - supports-color
     dev: false
 
-  /natural-compare-lite@1.4.0:
-    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
-    dev: true
-
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -26768,49 +26701,48 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-pkg@0.17.1(prettier@2.8.8):
-    resolution: {integrity: sha512-XPRRMQR5oseJXdfK8kQDj2LCV1UjmTuDlPbbJ8C2WLaATNhdvZLhQO0+NtWnRrQTP+erLR5cVxfcwyqF+3R8SA==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+  /prettier-plugin-pkg@0.18.0(prettier@3.0.3):
+    resolution: {integrity: sha512-cme+OUHj25cVj3HwGK6ek/GkCHhlhM1u/IYspOHYsFImaXMJCmjs8xeCcvLreD0HMX5QxObot+3TtQR3Bd2wHw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      prettier: ^2.0.0
+      prettier: ^3.0.0
     dependencies:
-      prettier: 2.8.8
+      prettier: 3.0.3
     dev: true
 
-  /prettier-plugin-sh@0.12.8(prettier@2.8.8):
-    resolution: {integrity: sha512-VOq8h2Gn5UzrCIKm4p/nAScXJbN09HdyFDknAcxt6Qu/tv/juu9bahxSrcnM9XWYA+Spz1F1ANJ4LhfwB7+Q1Q==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+  /prettier-plugin-sh@0.13.1(prettier@3.0.3):
+    resolution: {integrity: sha512-ytMcl1qK4s4BOFGvsc9b0+k9dYECal7U29bL/ke08FEUsF/JLN0j6Peo0wUkFDG4y2UHLMhvpyd6Sd3zDXe/eg==}
+    engines: {node: '>=16.0.0'}
     peerDependencies:
-      prettier: ^2.0.0
+      prettier: ^3.0.0
     dependencies:
       mvdan-sh: 0.10.1
-      prettier: 2.8.8
-      sh-syntax: 0.3.7
-      synckit: 0.8.4
+      prettier: 3.0.3
+      sh-syntax: 0.4.1
     dev: true
 
-  /prettier-plugin-sql@0.15.1(prettier@2.8.8):
+  /prettier-plugin-sql@0.15.1(prettier@3.0.3):
     resolution: {integrity: sha512-CWYgo4dXDhjA6ofvC6yUjsEOSzb5qdLmaloK8V+mPiSjkvMbatWsSTKjkV2g4k17shtqYmnU+WWOaYpFNbNL1A==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       prettier: ^3.0.0
     dependencies:
       node-sql-parser: 4.8.0
-      prettier: 2.8.8
+      prettier: 3.0.3
       sql-formatter: 12.2.3
       tslib: 2.6.2
     dev: true
 
-  /prettier-plugin-tailwindcss@0.4.1(prettier@2.8.8):
-    resolution: {integrity: sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==}
-    engines: {node: '>=12.17.0'}
+  /prettier-plugin-tailwindcss@0.5.6(prettier@3.0.3):
+    resolution: {integrity: sha512-2Xgb+GQlkPAUCFi3sV+NOYcSI5XgduvDBL2Zt/hwJudeKXkyvRS65c38SB0yb9UB40+1rL83I6m0RtlOQ8eHdg==}
+    engines: {node: '>=14.21.3'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
       '@prettier/plugin-pug': '*'
       '@shopify/prettier-plugin-liquid': '*'
       '@shufo/prettier-plugin-blade': '*'
       '@trivago/prettier-plugin-sort-imports': '*'
-      prettier: ^2.2 || ^3.0
+      prettier: ^3.0
       prettier-plugin-astro: '*'
       prettier-plugin-css-order: '*'
       prettier-plugin-import-sort: '*'
@@ -26853,7 +26785,7 @@ packages:
       prettier-plugin-twig-melody:
         optional: true
     dependencies:
-      prettier: 2.8.8
+      prettier: 3.0.3
     dev: true
 
   /prettier@2.8.8:
@@ -26862,6 +26794,12 @@ packages:
     hasBin: true
     dev: true
 
+  /prettier@3.0.3:
+    resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
@@ -26895,7 +26833,7 @@ packages:
       parse-ms: 2.1.0
     dev: true
 
-  /pretty-quick@3.1.3(prettier@2.8.8):
+  /pretty-quick@3.1.3(prettier@3.0.3):
     resolution: {integrity: sha512-kOCi2FJabvuh1as9enxYmrnBC6tVMoVOenMaBqRfsvBHB0cbpYHjdQEpSglpASDFEXVwplpcGR4CLEaisYAFcA==}
     engines: {node: '>=10.13'}
     hasBin: true
@@ -26908,7 +26846,7 @@ packages:
       ignore: 5.2.0
       mri: 1.2.0
       multimatch: 4.0.0
-      prettier: 2.8.8
+      prettier: 3.0.3
     dev: true
 
   /proc-log@1.0.0:
@@ -27822,8 +27760,8 @@ packages:
     resolution: {integrity: sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==}
     dev: true
 
-  /regexp-tree@0.1.24:
-    resolution: {integrity: sha512-s2aEVuLhvnVJW6s/iPgEGK6R+/xngd2jNQ+xy4bXNDKxZKJH6jpPHY6kVeVv1IeLCHgswRj+Kl3ELaDjG6V1iw==}
+  /regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
     hasBin: true
     dev: true
 
@@ -28297,12 +28235,6 @@ packages:
       ret: 0.1.15
     dev: false
 
-  /safe-regex@2.1.1:
-    resolution: {integrity: sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A==}
-    dependencies:
-      regexp-tree: 0.1.24
-    dev: true
-
   /safe-stable-stringify@2.4.2:
     resolution: {integrity: sha512-gMxvPJYhP0O9n2pvcfYfIuYgbledAOJFcqRThtPRmjscaipiwcwPPKLytpVzMkG2HAN87Qmo2d4PtGiri1dSLA==}
     engines: {node: '>=10'}
@@ -28591,9 +28523,9 @@ packages:
   /setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
-  /sh-syntax@0.3.7:
-    resolution: {integrity: sha512-xIB/uRniZ9urxAuXp1Ouh/BKSI1VK8RSqfwGj7cV57HvGrFo3vHdJfv8Tdp/cVcxJgXQTkmHr5mG5rqJW8r4wQ==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+  /sh-syntax@0.4.1:
+    resolution: {integrity: sha512-MW/ZsCYTu11EIYYTSZcfAgMFszAodCmQVB27XssHoIN6L4EG0KSA3h32x8whaSOKuYBX5wz9EybfnPBUFQMCKA==}
+    engines: {node: '>=16.0.0'}
     dependencies:
       tslib: 2.6.2
     dev: true
@@ -29620,14 +29552,6 @@ packages:
   /synchronous-promise@2.0.17:
     resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
 
-  /synckit@0.8.4:
-    resolution: {integrity: sha512-Dn2ZkzMdSX827QbowGbU/4yjWuvNaCoScLLoMo/yKbu+P4GBR6cRGKZH27k6a9bRzdqcyd1DE96pQtQ6uNkmyw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    dependencies:
-      '@pkgr/utils': 2.3.1
-      tslib: 2.6.2
-    dev: true
-
   /synckit@0.8.5:
     resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -30100,6 +30024,15 @@ packages:
   /trough@2.1.0:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
 
+  /ts-api-utils@1.0.3(typescript@5.2.2):
+    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
+    engines: {node: '>=16.13.0'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.2.2
+    dev: true
+
   /ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
@@ -30266,16 +30199,6 @@ packages:
       - ts-node
     dev: true
 
-  /tsutils@3.21.0(typescript@5.2.2):
-    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
-    engines: {node: '>= 6'}
-    peerDependencies:
-      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
-    dependencies:
-      tslib: 1.14.1
-      typescript: 5.2.2
-    dev: true
-
   /tsx@3.14.0:
     resolution: {integrity: sha512-xHtFaKtHxM9LOklMmJdI3BEnQq/D5F73Of2E1GDrITi9sgoVkvIsrQUTY1G8FlmGtA+awCI4EBlTRRYxkL2sRg==}
     hasBin: true
diff --git a/prettier.config.cjs b/prettier.config.cjs
index 7d2f916c3..2299ef203 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -2,14 +2,16 @@ const { plugins, ...prettierConfig } = require('@theguild/prettier-config');
 /**
  * @type {import('prettier').Config}
  */
+
 module.exports = {
   ...prettierConfig,
   importOrderParserPlugins: ['importAssertions', ...prettierConfig.importOrderParserPlugins],
   plugins: [
-    require('prettier-plugin-sql'),
-    // For sort CSS classes
-    require('prettier-plugin-tailwindcss'),
+    'prettier-plugin-sql',
     ...plugins,
+    // For sort CSS classes.
+    // Make sure to keep this one last, see: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins
+    'prettier-plugin-tailwindcss',
   ],
   // prettier-plugin-sql options
   language: 'postgresql',