From dcc41eb0f1c08cd0cff285ff9e9dde43859673ea Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Tue, 3 Jun 2025 09:24:33 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Sort=20classes=20(#1750)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/[locale]/(main)/blog/[slug]/page.tsx  |  4 +-
 .../src/app/[locale]/(main)/blog/layout.tsx   |  2 +-
 .../src/app/[locale]/(main)/blog/page.tsx     |  2 +-
 .../app/[locale]/(main)/blog/post-preview.tsx |  6 +--
 .../src/app/[locale]/(main)/footer.tsx        | 16 +++----
 .../src/app/[locale]/(main)/layout.tsx        |  2 +-
 .../src/app/[locale]/(main)/nav-link.tsx      |  2 +-
 .../[locale]/(main)/open-source-banner.tsx    |  6 +--
 .../src/app/[locale]/(main)/pricing/page.tsx  | 28 ++++++------
 .../app/[locale]/(main)/terms-of-use/page.tsx |  2 +-
 .../app/[locale]/licensing/thank-you/page.tsx | 10 ++---
 .../src/components/blog/post-header.tsx       |  4 +-
 apps/landing/src/components/error-page.tsx    |  2 +-
 .../src/components/home/bonus-item.tsx        |  4 +-
 apps/landing/src/components/home/hero.tsx     | 20 ++++-----
 apps/landing/src/components/marketing.tsx     |  6 +--
 .../auth/login/components/login-page.tsx      |  4 +-
 .../[locale]/(auth)/components/auth-page.tsx  |  4 +-
 .../web/src/app/[locale]/(space)/app-card.tsx |  4 +-
 .../components/sidebar/app-sidebar.tsx        |  4 +-
 .../(space)/components/sidebar/nav-user.tsx   |  2 +-
 .../[locale]/(space)/components/top-bar.tsx   |  4 +-
 .../(space)/events/events-tabbed-view.tsx     |  2 +-
 .../app/[locale]/(space)/feedback-alert.tsx   |  6 +--
 .../[locale]/(space)/mobile-navigation.tsx    |  2 +-
 .../(space)/polls/polls-tabbed-view.tsx       |  2 +-
 .../(space)/settings/billing/page.tsx         |  4 +-
 .../settings/components/settings-layout.tsx   |  6 +--
 .../src/app/[locale]/control-panel/layout.tsx |  2 +-
 .../[locale]/control-panel/license/page.tsx   | 10 ++---
 .../src/app/[locale]/control-panel/page.tsx   |  4 +-
 .../settings/disable-user-registration.tsx    |  2 +-
 .../[locale]/control-panel/settings/page.tsx  |  4 +-
 .../[locale]/control-panel/users/user-row.tsx |  4 +-
 .../control-panel/users/users-tabbed-view.tsx |  2 +-
 .../[locale]/invite/[urlId]/invite-page.tsx   | 10 ++---
 .../src/app/[locale]/invite/[urlId]/nav.tsx   |  2 +-
 apps/web/src/app/[locale]/not-found.tsx       |  2 +-
 .../poll/[urlId]/guest-poll-alert.tsx         |  2 +-
 apps/web/src/app/[locale]/setup/page.tsx      |  6 +--
 .../app/[locale]/timezone-change-detector.tsx |  2 +-
 apps/web/src/app/components/page-icons.tsx    |  8 ++--
 apps/web/src/app/components/page-layout.tsx   |  6 +--
 apps/web/src/components/clock.tsx             |  2 +-
 apps/web/src/components/cookie-consent.tsx    |  8 ++--
 apps/web/src/components/date-card.tsx         |  4 +-
 apps/web/src/components/date-icon.tsx         |  4 +-
 apps/web/src/components/description-list.tsx  |  4 +-
 .../src/components/discussion/discussion.tsx  |  6 +--
 apps/web/src/components/empty-state.tsx       |  6 +--
 apps/web/src/components/error-page.tsx        |  2 +-
 apps/web/src/components/event-card.tsx        |  6 +--
 apps/web/src/components/feedback.tsx          |  2 +-
 .../components/forms/poll-details-form.tsx    |  4 +-
 .../date-navigation-toolbar.tsx               |  2 +-
 .../month-calendar/month-calendar.tsx         | 14 +++---
 .../month-calendar/time-picker.tsx            |  4 +-
 .../poll-options-form/poll-options-form.tsx   |  4 +-
 .../forms/poll-options-form/week-calendar.tsx |  6 +--
 .../src/components/forms/poll-settings.tsx    |  2 +-
 apps/web/src/components/full-width-layout.tsx |  4 +-
 apps/web/src/components/invite-dialog.tsx     |  2 +-
 .../src/components/new-participant-modal.tsx  |  4 +-
 apps/web/src/components/page-dialog.tsx       | 10 ++---
 apps/web/src/components/pagination.tsx        |  2 +-
 .../src/components/participant-avatar-bar.tsx |  4 +-
 .../src/components/participant-dropdown.tsx   |  2 +-
 apps/web/src/components/participant.tsx       |  2 +-
 apps/web/src/components/pay-wall-dialog.tsx   | 20 ++++-----
 apps/web/src/components/poll/desktop-poll.tsx |  8 ++--
 .../desktop-poll/participant-row-form.tsx     |  6 +--
 .../poll/desktop-poll/participant-row.tsx     |  4 +-
 .../poll/desktop-poll/poll-header.tsx         | 12 ++---
 .../poll/manage-poll/finalize-poll-dialog.tsx |  2 +-
 .../poll/mobile-poll/grouped-options.tsx      |  2 +-
 .../poll/mobile-poll/poll-option.tsx          |  8 ++--
 apps/web/src/components/poll/poll-footer.tsx  |  4 +-
 .../src/components/poll/scheduled-event.tsx   |  8 ++--
 apps/web/src/components/poll/you-avatar.tsx   |  2 +-
 .../components/router-loading-indicator.tsx   |  2 +-
 apps/web/src/components/spinner.tsx           |  2 +-
 apps/web/src/components/steps/steps.tsx       |  4 +-
 apps/web/src/components/user-dropdown.tsx     | 22 +++++-----
 .../components/license-limit-warning.tsx      |  2 +-
 .../features/poll/components/poll-list.tsx    |  4 +-
 .../quick-create/quick-create-widget.tsx      |  8 ++--
 .../components/scheduled-event-list.tsx       |  2 +-
 biome.json                                    |  9 ++++
 packages/ui/src/accordion.tsx                 |  4 +-
 packages/ui/src/action-bar.tsx                |  2 +-
 packages/ui/src/alert.tsx                     |  8 ++--
 packages/ui/src/badge.tsx                     | 10 ++---
 packages/ui/src/billing-plan.tsx              |  2 +-
 packages/ui/src/breadcrumb.tsx                |  6 +--
 packages/ui/src/button.tsx                    | 24 +++++-----
 packages/ui/src/card.tsx                      |  6 +--
 packages/ui/src/checkbox.tsx                  |  2 +-
 packages/ui/src/command.tsx                   | 14 +++---
 packages/ui/src/dialog.tsx                    | 16 +++----
 packages/ui/src/dropdown-menu.tsx             | 18 ++++----
 packages/ui/src/form.tsx                      |  2 +-
 packages/ui/src/icon.tsx                      | 10 ++---
 packages/ui/src/input.tsx                     | 10 ++---
 packages/ui/src/label.tsx                     |  2 +-
 packages/ui/src/page-tabs.tsx                 |  6 +--
 packages/ui/src/popover.tsx                   |  2 +-
 packages/ui/src/progress.tsx                  |  4 +-
 packages/ui/src/radio-group.tsx               |  2 +-
 packages/ui/src/radio-pills.tsx               |  2 +-
 packages/ui/src/select.tsx                    |  8 ++--
 packages/ui/src/separator.tsx                 |  2 +-
 packages/ui/src/sheet.tsx                     | 16 +++----
 packages/ui/src/sidebar.tsx                   | 44 +++++++++----------
 packages/ui/src/table.tsx                     |  8 ++--
 packages/ui/src/tabs.tsx                      |  6 +--
 packages/ui/src/text-field.tsx                | 14 +++---
 packages/ui/src/textarea.tsx                  |  4 +-
 packages/ui/src/tile.tsx                      |  4 +-
 packages/ui/src/toast.tsx                     | 12 ++---
 packages/ui/src/tooltip.tsx                   |  2 +-
 120 files changed, 374 insertions(+), 365 deletions(-)

diff --git a/apps/landing/src/app/[locale]/(main)/blog/[slug]/page.tsx b/apps/landing/src/app/[locale]/(main)/blog/[slug]/page.tsx
index ae311175b..3942fdc50 100644
--- a/apps/landing/src/app/[locale]/(main)/blog/[slug]/page.tsx
+++ b/apps/landing/src/app/[locale]/(main)/blog/[slug]/page.tsx
@@ -24,7 +24,7 @@ export default async function Page(props: {
     <div>
       <nav className="mb-2">
         <Link
-          className="text-muted-foreground hover:text-primary inline-flex items-center gap-x-2 text-sm font-medium"
+          className="inline-flex items-center gap-x-2 font-medium text-muted-foreground text-sm hover:text-primary"
           href="/blog"
         >
           <ArrowLeftIcon className="size-4" /> All Posts
@@ -47,7 +47,7 @@ export default async function Page(props: {
             <div className="font-medium leading-none">Luke Vella</div>
             <div>
               <Link
-                className="text-muted-foreground hover:text-primary text-sm"
+                className="text-muted-foreground text-sm hover:text-primary"
                 href="https://twitter.com/imlukevella"
               >
                 @imlukevella
diff --git a/apps/landing/src/app/[locale]/(main)/blog/layout.tsx b/apps/landing/src/app/[locale]/(main)/blog/layout.tsx
index 1c4cbacfa..67cca4c5b 100644
--- a/apps/landing/src/app/[locale]/(main)/blog/layout.tsx
+++ b/apps/landing/src/app/[locale]/(main)/blog/layout.tsx
@@ -18,7 +18,7 @@ export default function BlogLayout({
               </div>
               <div>
                 <div className="font-medium">Want to stay up to date?</div>
-                <div className="text-sm text-gray-500">
+                <div className="text-gray-500 text-sm">
                   Subscribe to our newsletter to get updates on new features and
                   releases.
                 </div>
diff --git a/apps/landing/src/app/[locale]/(main)/blog/page.tsx b/apps/landing/src/app/[locale]/(main)/blog/page.tsx
index 64da6e9cf..9d5706bb8 100644
--- a/apps/landing/src/app/[locale]/(main)/blog/page.tsx
+++ b/apps/landing/src/app/[locale]/(main)/blog/page.tsx
@@ -21,7 +21,7 @@ export default async function Page(props: {
   return (
     <section className="space-y-12">
       <header className="sm:p-6">
-        <h1 className="text-4xl font-bold tracking-tight">
+        <h1 className="font-bold text-4xl tracking-tight">
           <Trans
             t={t}
             ns="blog"
diff --git a/apps/landing/src/app/[locale]/(main)/blog/post-preview.tsx b/apps/landing/src/app/[locale]/(main)/blog/post-preview.tsx
index 797f8ce99..a7c92ca94 100644
--- a/apps/landing/src/app/[locale]/(main)/blog/post-preview.tsx
+++ b/apps/landing/src/app/[locale]/(main)/blog/post-preview.tsx
@@ -18,12 +18,12 @@ export const PostPreview = ({ title, date, excerpt, slug }: Props) => {
   return (
     <article className="flex flex-col gap-2 sm:flex-row sm:gap-8">
       <div>
-        <div className="text-muted-foreground w-48 pt-1 sm:text-right">
+        <div className="w-48 pt-1 text-muted-foreground sm:text-right">
           <time dateTime={date}>{dayjs(date).format("LL")}</time>
         </div>
       </div>
       <div className="grow">
-        <h3 className="mb-3 text-lg font-bold tracking-tight">
+        <h3 className="mb-3 font-bold text-lg tracking-tight">
           <Link
             locale="en"
             as={`/blog/${slug}`}
@@ -33,7 +33,7 @@ export const PostPreview = ({ title, date, excerpt, slug }: Props) => {
             {title}
           </Link>
         </h3>
-        <p className="mb-4 text-lg leading-relaxed text-gray-600">{excerpt}</p>
+        <p className="mb-4 text-gray-600 text-lg leading-relaxed">{excerpt}</p>
       </div>
     </article>
   );
diff --git a/apps/landing/src/app/[locale]/(main)/footer.tsx b/apps/landing/src/app/[locale]/(main)/footer.tsx
index c0f6af877..e63cc0919 100644
--- a/apps/landing/src/app/[locale]/(main)/footer.tsx
+++ b/apps/landing/src/app/[locale]/(main)/footer.tsx
@@ -68,7 +68,7 @@ export const Footer: React.FunctionComponent = () => {
             height={30}
             alt="Rallly"
           />
-          <div className="my-8 text-sm text-gray-500">
+          <div className="my-8 text-gray-500 text-sm">
             <p className="mb-4 leading-relaxed">
               <Trans
                 ns="common"
@@ -76,7 +76,7 @@ export const Footer: React.FunctionComponent = () => {
                 components={{
                   a: (
                     <Link
-                      className="font-normal leading-loose text-gray-500 underline hover:text-gray-800 hover:underline"
+                      className="font-normal text-gray-500 leading-loose underline hover:text-gray-800 hover:underline"
                       href="https://support.rallly.co/contribute/donations"
                     />
                   ),
@@ -90,7 +90,7 @@ export const Footer: React.FunctionComponent = () => {
                 components={{
                   a: (
                     <Link
-                      className="font-normal leading-loose text-gray-500 underline hover:text-gray-800 hover:underline"
+                      className="font-normal text-gray-500 leading-loose underline hover:text-gray-800 hover:underline"
                       href="https://twitter.com/imlukevella"
                     />
                   ),
@@ -102,7 +102,7 @@ export const Footer: React.FunctionComponent = () => {
             <a
               target="_blank"
               href="https://twitter.com/ralllyco"
-              className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
+              className="text-gray-500 text-sm hover:text-primary-600 hover:no-underline"
               rel="noreferrer noopener"
             >
               <TwitterIcon className="size-5" />
@@ -110,7 +110,7 @@ export const Footer: React.FunctionComponent = () => {
             <a
               target="_blank"
               href="https://discord.gg/uzg4ZcHbuM"
-              className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
+              className="text-gray-500 text-sm hover:text-primary-600 hover:no-underline"
               rel="noreferrer noopener"
             >
               <DiscordIcon className="size-5" />
@@ -118,7 +118,7 @@ export const Footer: React.FunctionComponent = () => {
             <a
               target="_blank"
               href="https://www.linkedin.com/company/rallly"
-              className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
+              className="text-gray-500 text-sm hover:text-primary-600 hover:no-underline"
               rel="noreferrer noopener"
             >
               <LinkedinIcon className="size-5" />
@@ -126,7 +126,7 @@ export const Footer: React.FunctionComponent = () => {
             <a
               target="_blank"
               href="https://github.com/lukevella/rallly"
-              className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
+              className="text-gray-500 text-sm hover:text-primary-600 hover:no-underline"
               rel="noreferrer noopener"
             >
               <GithubIcon className="size-5" />
@@ -261,7 +261,7 @@ export const Footer: React.FunctionComponent = () => {
           </div>
           <a
             href="https://support.rallly.co/contribute/translations"
-            className="hover:border-primary-600 hover:text-primary-600 inline-flex items-center rounded-md border px-3 py-2 text-xs text-gray-500"
+            className="inline-flex items-center rounded-md border px-3 py-2 text-gray-500 text-xs hover:border-primary-600 hover:text-primary-600"
           >
             <LanguagesIcon className="mr-2 size-5" />
             <Trans ns="common" i18nKey="volunteerTranslator" /> &rarr;
diff --git a/apps/landing/src/app/[locale]/(main)/layout.tsx b/apps/landing/src/app/[locale]/(main)/layout.tsx
index d70de5371..4c0781ad0 100644
--- a/apps/landing/src/app/[locale]/(main)/layout.tsx
+++ b/apps/landing/src/app/[locale]/(main)/layout.tsx
@@ -42,7 +42,7 @@ export default async function Root(props: {
 
   const { t } = await getTranslation(locale, "common");
   return (
-    <div className="mx-auto relative z-10 flex min-h-full w-full max-w-7xl flex-col space-y-8 p-4 sm:p-8">
+    <div className="relative z-10 mx-auto flex min-h-full w-full max-w-7xl flex-col space-y-8 p-4 sm:p-8">
       <header className="flex w-full items-center">
         <div className="flex grow items-center gap-x-12">
           <Link className="inline-block rounded" href="/">
diff --git a/apps/landing/src/app/[locale]/(main)/nav-link.tsx b/apps/landing/src/app/[locale]/(main)/nav-link.tsx
index 2af6ed722..82ec4cc70 100644
--- a/apps/landing/src/app/[locale]/(main)/nav-link.tsx
+++ b/apps/landing/src/app/[locale]/(main)/nav-link.tsx
@@ -13,7 +13,7 @@ export const NavLink = ({
   const isActive = pathname === props.href;
   return (
     <Button
-      className={cn(isActive ? "text-foreground bg-gray-200" : "", className)}
+      className={cn(isActive ? "bg-gray-200 text-foreground" : "", className)}
       asChild
       variant="ghost"
     >
diff --git a/apps/landing/src/app/[locale]/(main)/open-source-banner.tsx b/apps/landing/src/app/[locale]/(main)/open-source-banner.tsx
index 95ebb41b4..69c162d42 100644
--- a/apps/landing/src/app/[locale]/(main)/open-source-banner.tsx
+++ b/apps/landing/src/app/[locale]/(main)/open-source-banner.tsx
@@ -23,7 +23,7 @@ export function OpenSourceBanner() {
   return (
     <div
       className={cn(
-        "bg-gray-800 z-50 transition-transform h-11 overflow-hidden hover:underline fixed top-0 w-full flex items-center text-sm rounded-none text-gray-100 justify-center gap-4",
+        "fixed top-0 z-50 flex h-11 w-full items-center justify-center gap-4 overflow-hidden rounded-none bg-gray-800 text-gray-100 text-sm transition-transform hover:underline",
         {
           "translate-y-0": visible,
           "-translate-y-full": !visible,
@@ -34,13 +34,13 @@ export function OpenSourceBanner() {
         target="_blank"
         rel="noopener noreferrer"
         href="https://github.com/lukevella/rallly"
-        className="flex absolute inset-0 justify-center items-center gap-3 px-4"
+        className="absolute inset-0 flex items-center justify-center gap-3 px-4"
       >
         <GithubIcon className="size-4" />
         <span className="truncate">
           <Trans i18nKey="openSource" defaults="We're Open Source!" />
         </span>
-        <span className="w-px h-4 bg-gray-500" />
+        <span className="h-4 w-px bg-gray-500" />
         <span className="truncate">
           <Trans i18nKey="starOnGitHub" defaults="Star us on GitHub" />
         </span>
diff --git a/apps/landing/src/app/[locale]/(main)/pricing/page.tsx b/apps/landing/src/app/[locale]/(main)/pricing/page.tsx
index b9e8e8acf..ce05f5076 100644
--- a/apps/landing/src/app/[locale]/(main)/pricing/page.tsx
+++ b/apps/landing/src/app/[locale]/(main)/pricing/page.tsx
@@ -11,7 +11,7 @@ import { PriceTables } from "./pricing-table";
 const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
   return (
     <section>
-      <h2 className="text-2xl font-bold">
+      <h2 className="font-bold text-2xl">
         <Trans
           t={t}
           ns="pricing"
@@ -19,7 +19,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="Frequently Asked Questions"
         />
       </h2>
-      <h3 className="mb-2 mt-6 text-lg font-bold">
+      <h3 className="mt-6 mb-2 font-bold text-lg">
         <Trans
           t={t}
           ns="pricing"
@@ -27,7 +27,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="Can I use Rallly for free?"
         />
       </h3>
-      <p className="col-span-2 text-sm leading-relaxed text-slate-600">
+      <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
         <Trans
           t={t}
           ns="pricing"
@@ -35,7 +35,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="Yes, most of Rallly's features are free and many users will never need to pay for anything. However, there are some features that are only available to paying customers. These features are designed to help you get the most out of Rallly."
         />
       </p>
-      <h3 className="mb-2 mt-6 text-lg font-bold">
+      <h3 className="mt-6 mb-2 font-bold text-lg">
         <Trans
           t={t}
           ns="pricing"
@@ -43,7 +43,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="Why should I upgrade?"
         />
       </h3>
-      <p className="col-span-2 text-sm leading-relaxed text-slate-600">
+      <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
         <Trans
           t={t}
           ns="pricing"
@@ -51,7 +51,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="Upgrading to a paid plan makes sense if you use Rallly often or use it for work. The current subscription rate is a special early adopter rate and will increase in the future. By upgrading now, you will get early access to new, high-quality scheduling tools as they are released and lock in your subscription rate so you won't be affected by future price increases."
         />
       </p>
-      <h3 className="mb-2 mt-6 text-lg font-bold">
+      <h3 className="mt-6 mb-2 font-bold text-lg">
         <Trans
           t={t}
           ns="pricing"
@@ -59,7 +59,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="When does a poll become inactive?"
         />
       </h3>
-      <p className="col-span-2 text-sm leading-relaxed text-slate-600">
+      <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
         <Trans
           t={t}
           ns="pricing"
@@ -67,7 +67,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="Polls become inactive when all date options are in the past AND the poll has not been accessed for over 30 days. Inactive polls are automatically deleted if you do not have a paid subscription."
         />
       </p>
-      <h3 className="mb-2 mt-6 text-lg font-bold">
+      <h3 className="mt-6 mb-2 font-bold text-lg">
         <Trans
           t={t}
           ns="pricing"
@@ -75,7 +75,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="How do I upgrade to a paid plan?"
         />
       </h3>
-      <p className="col-span-2 text-sm leading-relaxed text-slate-600">
+      <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
         <Trans
           t={t}
           ns="pricing"
@@ -93,7 +93,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
         />
       </p>
 
-      <h3 className="mb-2 mt-6 text-lg font-bold">
+      <h3 className="mt-6 mb-2 font-bold text-lg">
         <Trans
           t={t}
           ns="pricing"
@@ -101,7 +101,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
           defaults="How do I cancel my subscription?"
         />
       </h3>
-      <p className="col-span-2 text-sm leading-relaxed text-slate-600">
+      <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
         <Trans
           t={t}
           ns="pricing"
@@ -130,7 +130,7 @@ export default async function Page(props: {
   return (
     <article className="mx-auto max-w-3xl space-y-6">
       <header className="space-y-2 sm:p-6 sm:text-center">
-        <h1 className="text-2xl font-bold tracking-tight sm:text-4xl">
+        <h1 className="font-bold text-2xl tracking-tight sm:text-4xl">
           <Trans
             t={t}
             ns="pricing"
@@ -138,7 +138,7 @@ export default async function Page(props: {
             defaults="Get started for free"
           />
         </h1>
-        <p className="text-muted-foreground text-lg">
+        <p className="text-lg text-muted-foreground">
           <Trans
             t={t}
             ns="pricing"
@@ -156,7 +156,7 @@ export default async function Page(props: {
             <TrendingUpIcon className="size-6" />
           </div>
           <div>
-            <h3 className="mb-2 text-sm font-bold">
+            <h3 className="mb-2 font-bold text-sm">
               <Trans
                 t={t}
                 ns="pricing"
diff --git a/apps/landing/src/app/[locale]/(main)/terms-of-use/page.tsx b/apps/landing/src/app/[locale]/(main)/terms-of-use/page.tsx
index 382a69ae3..1a7d48b70 100644
--- a/apps/landing/src/app/[locale]/(main)/terms-of-use/page.tsx
+++ b/apps/landing/src/app/[locale]/(main)/terms-of-use/page.tsx
@@ -58,7 +58,7 @@ export default function TermsOfUse() {
         <a href="mailto:support@rallly.co">support@rallly.co</a>.
       </p>
 
-      <p className="text-sm font-semibold">
+      <p className="font-semibold text-sm">
         Stack Snap Ltd.
         <br />
         The Gallery 14
diff --git a/apps/landing/src/app/[locale]/licensing/thank-you/page.tsx b/apps/landing/src/app/[locale]/licensing/thank-you/page.tsx
index d8618259e..3bcf8541d 100644
--- a/apps/landing/src/app/[locale]/licensing/thank-you/page.tsx
+++ b/apps/landing/src/app/[locale]/licensing/thank-you/page.tsx
@@ -4,15 +4,15 @@ import Link from "next/link";
 
 export default function LicensingThankYouPage() {
   return (
-    <main className="p-4 sm:p-16 h-dvh flex flex-col sm:justify-center relative">
-      <div className="w-full relative z-10 max-w-2xl mx-auto space-y-6">
+    <main className="relative flex h-dvh flex-col p-4 sm:justify-center sm:p-16">
+      <div className="relative z-10 mx-auto w-full max-w-2xl space-y-6">
         <div className="py-4">
           <Link className="inline-block rounded" href="/">
             <Image src="/logo.svg" width={150} height={30} alt="rallly.co" />
           </Link>
         </div>
         <div className="space-y-4">
-          <h1 className="text-2xl font-bold tracking-tight">
+          <h1 className="font-bold text-2xl tracking-tight">
             <Trans
               i18nKey="licensingThankYouTitle"
               defaults="Thank You for Your Purchase!"
@@ -27,7 +27,7 @@ export default function LicensingThankYouPage() {
         </div>
 
         <div className="space-y-4">
-          <h2 className="text-xl font-semibold">
+          <h2 className="font-semibold text-xl">
             <Trans i18nKey="licensingThankYouLicense" defaults="Next Steps" />
           </h2>
           <p className="text-gray-700 dark:text-gray-300">
@@ -37,7 +37,7 @@ export default function LicensingThankYouPage() {
             />
           </p>
 
-          <ul className="space-y-1 list-disc list-inside">
+          <ul className="list-inside list-disc space-y-1">
             <li>
               <Link
                 className="text-link"
diff --git a/apps/landing/src/components/blog/post-header.tsx b/apps/landing/src/components/blog/post-header.tsx
index 42678c1f6..fdbe7075e 100644
--- a/apps/landing/src/components/blog/post-header.tsx
+++ b/apps/landing/src/components/blog/post-header.tsx
@@ -8,10 +8,10 @@ type Props = {
 const PostHeader = ({ title, date }: Props) => {
   return (
     <header>
-      <h1 className="mb-2 text-center text-4xl font-bold tracking-tighter md:text-left md:leading-tight">
+      <h1 className="mb-2 text-center font-bold text-4xl tracking-tighter md:text-left md:leading-tight">
         {title}
       </h1>
-      <div className="mb-2 text-center text-lg text-gray-400 sm:text-left">
+      <div className="mb-2 text-center text-gray-400 text-lg sm:text-left">
         <DateFormatter dateString={date} />
       </div>
     </header>
diff --git a/apps/landing/src/components/error-page.tsx b/apps/landing/src/components/error-page.tsx
index f8ccb7559..4e7dda428 100644
--- a/apps/landing/src/components/error-page.tsx
+++ b/apps/landing/src/components/error-page.tsx
@@ -26,7 +26,7 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
           {icon || (
             <FileSearchIcon className="mb-4 inline-block size-24 text-gray-400" />
           )}
-          <div className="text-primary-600 mb-2 text-3xl font-bold">
+          <div className="mb-2 font-bold text-3xl text-primary-600">
             {title}
           </div>
           <p className="text-gray-600">{description}</p>
diff --git a/apps/landing/src/components/home/bonus-item.tsx b/apps/landing/src/components/home/bonus-item.tsx
index bb148c2ac..76bd83715 100644
--- a/apps/landing/src/components/home/bonus-item.tsx
+++ b/apps/landing/src/components/home/bonus-item.tsx
@@ -26,11 +26,11 @@ export const BonusItem = ({
     >
       <div className="flex items-center justify-center gap-x-2.5 rounded-full border bg-gray-50 p-1 pr-6 shadow-sm">
         <span
-          className={cn("bg-primary rounded-full p-2 text-gray-50", className)}
+          className={cn("rounded-full bg-primary p-2 text-gray-50", className)}
         >
           {icon}
         </span>
-        <div className="text-sm font-semibold">{children}</div>
+        <div className="font-semibold text-sm">{children}</div>
       </div>
     </m.div>
   );
diff --git a/apps/landing/src/components/home/hero.tsx b/apps/landing/src/components/home/hero.tsx
index bba693a03..65b18ac5f 100644
--- a/apps/landing/src/components/home/hero.tsx
+++ b/apps/landing/src/components/home/hero.tsx
@@ -33,15 +33,15 @@ const Screenshot = () => {
         style={{
           backfaceVisibility: "hidden",
         }}
-        className="shadow-huge relative z-20 mx-auto w-fit max-w-full rounded-full border bg-gray-800 px-3 py-2 text-sm text-gray-50 subpixel-antialiased"
+        className="relative z-20 mx-auto w-fit max-w-full rounded-full border bg-gray-800 px-3 py-2 text-gray-50 text-sm subpixel-antialiased shadow-huge"
       >
         <Trans
           i18nKey="home:createPageLikeThis"
           defaults="Create a page like this in seconds!"
         />
-        <span className="absolute left-1/2 top-full z-10 h-8 w-px -translate-x-1/2 bg-gray-800" />
-        <span className="absolute -bottom-12 left-1/2 z-10 inline-block size-3 origin-right -translate-x-1/2 rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
-        <span className="absolute -bottom-12 left-1/2 z-10 inline-block size-3 origin-right -translate-x-1/2 animate-ping rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
+        <span className="-translate-x-1/2 absolute top-full left-1/2 z-10 h-8 w-px bg-gray-800" />
+        <span className="-bottom-12 -translate-x-1/2 absolute left-1/2 z-10 inline-block size-3 origin-right rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
+        <span className="-bottom-12 -translate-x-1/2 absolute left-1/2 z-10 inline-block size-3 origin-right animate-ping rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
       </m.div>
       <m.div
         transition={{
@@ -55,7 +55,7 @@ const Screenshot = () => {
         }}
         initial="hidden"
         animate={isLoaded ? "visible" : "hidden"}
-        className="shadow-huge mx-auto w-fit overflow-hidden rounded-md border"
+        className="mx-auto w-fit overflow-hidden rounded-md border shadow-huge"
       >
         <Image
           src="/static/images/hero-shot.png"
@@ -88,7 +88,7 @@ export const MarketingHero = ({
           <Link
             locale="en"
             href="/blog/introducing-quick-create"
-            className="group relative inline-flex items-center gap-x-2 rounded-full border bg-gray-50 py-1 pl-1 pr-4 text-sm leading-6 text-gray-600 hover:bg-white"
+            className="group relative inline-flex items-center gap-x-2 rounded-full border bg-gray-50 py-1 pr-4 pl-1 text-gray-600 text-sm leading-6 hover:bg-white"
           >
             <Badge variant="secondary">
               <Trans ns="home" i18nKey="new" defaults="New" />
@@ -105,10 +105,10 @@ export const MarketingHero = ({
             </span>
           </Link>
         </div>
-        <h1 className="mb-2 mt-6 text-pretty text-2xl font-bold tracking-tight sm:mb-4 sm:text-5xl">
+        <h1 className="mt-6 mb-2 text-pretty font-bold text-2xl tracking-tight sm:mb-4 sm:text-5xl">
           {title}
         </h1>
-        <h2 className="mx-auto max-w-3xl text-pretty text-base text-gray-500 sm:text-xl font-normal sm:leading-relaxed">
+        <h2 className="mx-auto max-w-3xl text-pretty font-normal text-base text-gray-500 sm:text-xl sm:leading-relaxed">
           {description}
         </h2>
         <div className="mt-8 flex flex-col items-center justify-center gap-4">
@@ -122,9 +122,9 @@ export const MarketingHero = ({
           </Button>
           <p
             className={cn(
-              "whitespace-nowrap text-center text-xs text-gray-600",
+              "whitespace-nowrap text-center text-gray-600 text-xs",
               handwritten.className,
-              "decoration underline decoration-gray-300 decoration-2 underline-offset-8",
+              "decoration underline decoration-2 decoration-gray-300 underline-offset-8",
             )}
           >
             <Trans
diff --git a/apps/landing/src/components/marketing.tsx b/apps/landing/src/components/marketing.tsx
index 1f7ac8cac..ffa604c67 100644
--- a/apps/landing/src/components/marketing.tsx
+++ b/apps/landing/src/components/marketing.tsx
@@ -275,7 +275,7 @@ export const BigTestimonial = () => {
         alt="5 stars"
       />
       <div className="text-center">
-        <p className="max-w-xl text-center text-lg font-medium leading-normal">
+        <p className="max-w-xl text-center font-medium text-lg leading-normal">
           <Trans
             i18nKey="home:ericQuote"
             defaults="“If your scheduling workflow lives in emails, I strongly encourage you to try and let Rallly simplify your scheduling tasks for a more organized and less stressful workday.”"
@@ -284,7 +284,7 @@ export const BigTestimonial = () => {
         <p className="mt-1">
           <Link
             target="_blank"
-            className="text-sm text-gray-500 hover:underline"
+            className="text-gray-500 text-sm hover:underline"
             href="https://www.trustpilot.com/reviews/645e1d1976733924e89d8203"
           >
             <Trans i18nKey="home:viaTrustpilot" defaults="via Trustpilot" />
@@ -302,7 +302,7 @@ export const BigTestimonial = () => {
         />
         <div>
           <div className="font-semibold">Eric Fletcher</div>
-          <div className="text-sm text-gray-500">
+          <div className="text-gray-500 text-sm">
             <Trans
               i18nKey="home:ericJobTitle"
               defaults="Executive Assistant at MIT"
diff --git a/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx b/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
index b10157b0c..60d1cf360 100644
--- a/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
@@ -43,7 +43,7 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
         <Logo className="mx-auto" />
       </div>
       <div className="w-48 space-y-8 text-center">
-        <h1 className="text-xl font-bold">
+        <h1 className="font-bold text-xl">
           <Trans i18nKey="continueAs" defaults="Continue as" />
         </h1>
         <div className="flex flex-col items-center gap-4">
@@ -56,7 +56,7 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
             <div className="mb-1 h-6 font-medium">
               {data?.name ?? <Skeleton className="inline-block h-5 w-16" />}
             </div>
-            <div className="text-muted-foreground h-5 truncate text-sm">
+            <div className="h-5 truncate text-muted-foreground text-sm">
               {data?.email ?? <Skeleton className="inline-block h-full w-20" />}
             </div>
           </div>
diff --git a/apps/web/src/app/[locale]/(auth)/components/auth-page.tsx b/apps/web/src/app/[locale]/(auth)/components/auth-page.tsx
index 8f54f3294..a6e5cdde4 100644
--- a/apps/web/src/app/[locale]/(auth)/components/auth-page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/components/auth-page.tsx
@@ -16,7 +16,7 @@ export function AuthPageHeader({ children }: { children: React.ReactNode }) {
 }
 
 export function AuthPageTitle({ children }: { children: React.ReactNode }) {
-  return <h1 className="text-2xl font-bold">{children}</h1>;
+  return <h1 className="font-bold text-2xl">{children}</h1>;
 }
 
 export function AuthPageDescription({
@@ -33,6 +33,6 @@ export function AuthPageContent({ children }: { children: React.ReactNode }) {
 
 export function AuthPageExternal({ children }: { children: React.ReactNode }) {
   return (
-    <p className="text-muted-foreground px-4 py-3 text-center">{children}</p>
+    <p className="px-4 py-3 text-center text-muted-foreground">{children}</p>
   );
 }
diff --git a/apps/web/src/app/[locale]/(space)/app-card.tsx b/apps/web/src/app/[locale]/(space)/app-card.tsx
index 89c62cc7e..927188ff9 100644
--- a/apps/web/src/app/[locale]/(space)/app-card.tsx
+++ b/apps/web/src/app/[locale]/(space)/app-card.tsx
@@ -12,7 +12,7 @@ export function AppCard({
   return (
     <div
       className={cn(
-        "flex w-full flex-col justify-between rounded-lg border bg-white p-4 shadow-sm ring-1 ring-inset ring-white/50",
+        "flex w-full flex-col justify-between rounded-lg border bg-white p-4 shadow-sm ring-1 ring-white/50 ring-inset",
         className,
       )}
     >
@@ -94,7 +94,7 @@ export function AppCardDescription({
   return (
     <p
       className={cn(
-        "text-muted-foreground mt-1 text-sm leading-relaxed",
+        "mt-1 text-muted-foreground text-sm leading-relaxed",
         className,
       )}
     >
diff --git a/apps/web/src/app/[locale]/(space)/components/sidebar/app-sidebar.tsx b/apps/web/src/app/[locale]/(space)/components/sidebar/app-sidebar.tsx
index a93bf268f..909a49394 100644
--- a/apps/web/src/app/[locale]/(space)/components/sidebar/app-sidebar.tsx
+++ b/apps/web/src/app/[locale]/(space)/components/sidebar/app-sidebar.tsx
@@ -81,12 +81,12 @@ export async function AppSidebar({
         {!user.isPro ? (
           <>
             <div className="relative overflow-hidden rounded-xl border bg-gray-50 p-3 text-sm shadow-sm">
-              <SparklesIcon className="absolute -top-4 right-0 z-0 size-16 text-gray-200" />
+              <SparklesIcon className="-top-4 absolute right-0 z-0 size-16 text-gray-200" />
               <div className="relative z-10">
                 <h2 className="font-semibold">
                   <Trans i18nKey="upgrade" defaults="Upgrade" />
                 </h2>
-                <p className="text-muted-foreground mb-3 mt-1 text-sm">
+                <p className="mt-1 mb-3 text-muted-foreground text-sm">
                   <Trans
                     i18nKey="upgradeToProDesc"
                     defaults="Unlock all Pro features"
diff --git a/apps/web/src/app/[locale]/(space)/components/sidebar/nav-user.tsx b/apps/web/src/app/[locale]/(space)/components/sidebar/nav-user.tsx
index 522503c01..ed7234db1 100644
--- a/apps/web/src/app/[locale]/(space)/components/sidebar/nav-user.tsx
+++ b/apps/web/src/app/[locale]/(space)/components/sidebar/nav-user.tsx
@@ -24,7 +24,7 @@ export function NavUser({
       <OptimizedAvatarImage size="md" src={image} name={name} />
       <div className="flex-1 truncate text-left">
         <div className="font-medium">{name}</div>
-        <div className="text-muted-foreground mt-0.5 truncate font-normal">
+        <div className="mt-0.5 truncate font-normal text-muted-foreground">
           {plan}
         </div>
       </div>
diff --git a/apps/web/src/app/[locale]/(space)/components/top-bar.tsx b/apps/web/src/app/[locale]/(space)/components/top-bar.tsx
index d88c13dcf..637c4b9a4 100644
--- a/apps/web/src/app/[locale]/(space)/components/top-bar.tsx
+++ b/apps/web/src/app/[locale]/(space)/components/top-bar.tsx
@@ -10,7 +10,7 @@ export function TopBar({
   return (
     <div
       className={cn(
-        "bg-background/90 sticky top-0 z-10 flex items-center gap-4 rounded-t-lg border-b px-4 py-3 backdrop-blur-md",
+        "sticky top-0 z-10 flex items-center gap-4 rounded-t-lg border-b bg-background/90 px-4 py-3 backdrop-blur-md",
         className,
       )}
     >
@@ -44,5 +44,5 @@ export function TopBarGroup({
 }
 
 export function TopBarSeparator() {
-  return <div className="bg-border h-4 w-px" />;
+  return <div className="h-4 w-px bg-border" />;
 }
diff --git a/apps/web/src/app/[locale]/(space)/events/events-tabbed-view.tsx b/apps/web/src/app/[locale]/(space)/events/events-tabbed-view.tsx
index 76c2117dc..f1801aced 100644
--- a/apps/web/src/app/[locale]/(space)/events/events-tabbed-view.tsx
+++ b/apps/web/src/app/[locale]/(space)/events/events-tabbed-view.tsx
@@ -45,7 +45,7 @@ export function EventsTabbedView({ children }: { children: React.ReactNode }) {
         key={tab}
         className={cn(
           "transition-opacity",
-          isPending ? "opacity-50 delay-200 pointer-events-none" : "",
+          isPending ? "pointer-events-none opacity-50 delay-200" : "",
         )}
       >
         {children}
diff --git a/apps/web/src/app/[locale]/(space)/feedback-alert.tsx b/apps/web/src/app/[locale]/(space)/feedback-alert.tsx
index 56cb7a630..8e213568d 100644
--- a/apps/web/src/app/[locale]/(space)/feedback-alert.tsx
+++ b/apps/web/src/app/[locale]/(space)/feedback-alert.tsx
@@ -16,7 +16,7 @@ export function FeedbackAlert() {
   }
 
   return (
-    <div className="flex flex-col sm:flex-row items-start border text-sm bg-gray-50 border-gray-200 p-4 rounded-xl gap-4">
+    <div className="flex flex-col items-start gap-4 rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm sm:flex-row">
       <div className="hidden sm:block">
         <HeartIcon className="size-4 text-pink-600 opacity-75" />
       </div>
@@ -24,14 +24,14 @@ export function FeedbackAlert() {
         <h2 className="font-semibold leading-none">
           <Trans i18nKey="helpUsImprove" defaults="Help us improve" />
         </h2>
-        <p className="opacity-75 mt-1.5">
+        <p className="mt-1.5 opacity-75">
           <Trans
             i18nKey="helpUsImproveDesc"
             defaults="Take a few minutes to share your feedback and help us shape the future of Rallly."
           />
         </p>
       </div>
-      <div className="flex items-center flex-row-reverse sm:flex-row gap-2">
+      <div className="flex flex-row-reverse items-center gap-2 sm:flex-row">
         <Button
           variant="ghost"
           onClick={() => {
diff --git a/apps/web/src/app/[locale]/(space)/mobile-navigation.tsx b/apps/web/src/app/[locale]/(space)/mobile-navigation.tsx
index 14d98faad..ee2c3b909 100644
--- a/apps/web/src/app/[locale]/(space)/mobile-navigation.tsx
+++ b/apps/web/src/app/[locale]/(space)/mobile-navigation.tsx
@@ -15,7 +15,7 @@ import { usePathname } from "next/navigation";
 
 function MobileNavigationIcon({ children }: { children: React.ReactNode }) {
   return (
-    <Slot className="group-[.is-active]:text-primary group-focus:text-primary group-hover:text-foreground size-5 text-gray-500">
+    <Slot className="size-5 text-gray-500 group-hover:text-foreground group-focus:text-primary group-[.is-active]:text-primary">
       {children}
     </Slot>
   );
diff --git a/apps/web/src/app/[locale]/(space)/polls/polls-tabbed-view.tsx b/apps/web/src/app/[locale]/(space)/polls/polls-tabbed-view.tsx
index 90faefdfb..854b6de1d 100644
--- a/apps/web/src/app/[locale]/(space)/polls/polls-tabbed-view.tsx
+++ b/apps/web/src/app/[locale]/(space)/polls/polls-tabbed-view.tsx
@@ -49,7 +49,7 @@ export function PollsTabbedView({ children }: { children: React.ReactNode }) {
         key={tab}
         className={cn(
           "transition-opacity",
-          isPending ? "opacity-50 delay-200 pointer-events-none" : "",
+          isPending ? "pointer-events-none opacity-50 delay-200" : "",
         )}
       >
         {children}
diff --git a/apps/web/src/app/[locale]/(space)/settings/billing/page.tsx b/apps/web/src/app/[locale]/(space)/settings/billing/page.tsx
index a4941e133..40bb2d437 100644
--- a/apps/web/src/app/[locale]/(space)/settings/billing/page.tsx
+++ b/apps/web/src/app/[locale]/(space)/settings/billing/page.tsx
@@ -170,7 +170,7 @@ export default async function Page() {
                 {data.paymentMethods.length === 0 ? (
                   <div>
                     <div className="space-y-2">
-                      <div className="text-destructive flex items-center gap-x-2">
+                      <div className="flex items-center gap-x-2 text-destructive">
                         <CircleAlertIcon className="size-4" />
                         <span className="font-medium">
                           <Trans
@@ -217,7 +217,7 @@ export default async function Page() {
             {data.customerId ? (
               <div className="flex flex-col items-start justify-between gap-6 gap-x-4 rounded-lg border bg-gray-50 p-4 sm:flex-row">
                 <div className="space-y-1">
-                  <h3 className="text-sm font-medium">
+                  <h3 className="font-medium text-sm">
                     <Trans
                       i18nKey="needToMakeChanges"
                       defaults="Need to make changes?"
diff --git a/apps/web/src/app/[locale]/(space)/settings/components/settings-layout.tsx b/apps/web/src/app/[locale]/(space)/settings/components/settings-layout.tsx
index 07eb8db77..cd3f27615 100644
--- a/apps/web/src/app/[locale]/(space)/settings/components/settings-layout.tsx
+++ b/apps/web/src/app/[locale]/(space)/settings/components/settings-layout.tsx
@@ -14,7 +14,7 @@ export const SettingsSection = (props: {
   return (
     <section className="rounded-lg border p-4">
       <header className="mb-6">
-        <h2 className="mb-2 text-base font-semibold leading-none">
+        <h2 className="mb-2 font-semibold text-base leading-none">
           {props.title}
         </h2>
         <p className="text-muted-foreground text-sm">{props.description}</p>
@@ -37,7 +37,7 @@ export const SettingsItemTitle = ({
 }: React.PropsWithChildren<{ hint?: React.ReactNode }>) => {
   return (
     <div className="flex items-center gap-x-2">
-      <dt className="text-sm font-medium text-gray-500">{children}</dt>
+      <dt className="font-medium text-gray-500 text-sm">{children}</dt>
       {hint ? (
         <Tooltip>
           <TooltipTrigger asChild>
@@ -56,5 +56,5 @@ export const SettingsItemValue = ({
   children,
   className,
 }: React.PropsWithChildren<{ className?: string }>) => {
-  return <dd className={cn("text-sm text-gray-900", className)}>{children}</dd>;
+  return <dd className={cn("text-gray-900 text-sm", className)}>{children}</dd>;
 };
diff --git a/apps/web/src/app/[locale]/control-panel/layout.tsx b/apps/web/src/app/[locale]/control-panel/layout.tsx
index 1541f80fb..1d6510acb 100644
--- a/apps/web/src/app/[locale]/control-panel/layout.tsx
+++ b/apps/web/src/app/[locale]/control-panel/layout.tsx
@@ -17,7 +17,7 @@ export default async function AdminLayout({
       <ControlPanelSidebar />
       <SidebarInset>
         <LicenseLimitWarning />
-        <div className="min-w-0 flex-1 flex-col flex">{children}</div>
+        <div className="flex min-w-0 flex-1 flex-col">{children}</div>
       </SidebarInset>
     </ControlPanelSidebarProvider>
   );
diff --git a/apps/web/src/app/[locale]/control-panel/license/page.tsx b/apps/web/src/app/[locale]/control-panel/license/page.tsx
index 08f904495..3a018786f 100644
--- a/apps/web/src/app/[locale]/control-panel/license/page.tsx
+++ b/apps/web/src/app/[locale]/control-panel/license/page.tsx
@@ -45,7 +45,7 @@ function DescriptionListTitle({
 }: {
   children: React.ReactNode;
 }) {
-  return <dt className="text-xs mb-1 text-muted-foreground">{children}</dt>;
+  return <dt className="mb-1 text-muted-foreground text-xs">{children}</dt>;
 }
 
 function DescriptionListValue({
@@ -53,7 +53,7 @@ function DescriptionListValue({
 }: {
   children: React.ReactNode;
 }) {
-  return <dd className="text-sm mb-4 font-mono">{children}</dd>;
+  return <dd className="mb-4 font-mono text-sm">{children}</dd>;
 }
 
 export default async function LicensePage() {
@@ -76,8 +76,8 @@ export default async function LicensePage() {
                 <Trans i18nKey="licenseType" defaults="License Type" />
               </DescriptionListTitle>
               <DescriptionListValue>
-                <span className="capitalize text-primary">{license.type}</span>
-                <span className="text-muted-foreground ml-2">
+                <span className="text-primary capitalize">{license.type}</span>
+                <span className="ml-2 text-muted-foreground">
                   (
                   <Trans
                     i18nKey="seatCount"
@@ -91,7 +91,7 @@ export default async function LicensePage() {
                 <Trans i18nKey="licenseKey" defaults="License Key" />
               </DescriptionListTitle>
               <DescriptionListValue>
-                <span className="font-mono select-all text-sm">
+                <span className="select-all font-mono text-sm">
                   {license.licenseKey}
                 </span>
               </DescriptionListValue>
diff --git a/apps/web/src/app/[locale]/control-panel/page.tsx b/apps/web/src/app/[locale]/control-panel/page.tsx
index 15ae8af1d..e13bfc7f6 100644
--- a/apps/web/src/app/[locale]/control-panel/page.tsx
+++ b/apps/web/src/app/[locale]/control-panel/page.tsx
@@ -64,7 +64,7 @@ export default async function AdminPage() {
                       <Trans i18nKey="users" defaults="Users" />
                     </TileTitle>
                   </div>
-                  <div className="text-sm text-muted-foreground">
+                  <div className="text-muted-foreground text-sm">
                     <span
                       className={cn({
                         "text-destructive":
@@ -93,7 +93,7 @@ export default async function AdminPage() {
                     <KeySquareIcon />
                   </PageIcon>
                   {tier ? (
-                    <span className="text-sm text-primary capitalize">
+                    <span className="text-primary text-sm capitalize">
                       {tier}
                     </span>
                   ) : (
diff --git a/apps/web/src/app/[locale]/control-panel/settings/disable-user-registration.tsx b/apps/web/src/app/[locale]/control-panel/settings/disable-user-registration.tsx
index b23ec9805..f8bf68532 100644
--- a/apps/web/src/app/[locale]/control-panel/settings/disable-user-registration.tsx
+++ b/apps/web/src/app/[locale]/control-panel/settings/disable-user-registration.tsx
@@ -25,7 +25,7 @@ export function DisableUserRegistration({
           />
         </Label>
       </div>
-      <p className="text-sm mt-2 text-muted-foreground">
+      <p className="mt-2 text-muted-foreground text-sm">
         <Trans
           i18nKey="disableUserRegistrationDescription"
           defaults="Prevent new users from registering an account."
diff --git a/apps/web/src/app/[locale]/control-panel/settings/page.tsx b/apps/web/src/app/[locale]/control-panel/settings/page.tsx
index c6dc6cfa1..cd8a7ae2f 100644
--- a/apps/web/src/app/[locale]/control-panel/settings/page.tsx
+++ b/apps/web/src/app/[locale]/control-panel/settings/page.tsx
@@ -35,9 +35,9 @@ export default async function SettingsPage() {
         </FullWidthLayoutTitle>
       </FullWidthLayoutHeader>
       <FullWidthLayoutContent>
-        <div className="flex flex-col lg:flex-row p-6 gap-6 rounded-lg border">
+        <div className="flex flex-col gap-6 rounded-lg border p-6 lg:flex-row">
           <div className="lg:w-1/2">
-            <h2 className="text-base font-semibold">
+            <h2 className="font-semibold text-base">
               <Trans
                 i18nKey="authenticationAndSecurity"
                 defaults="Authentication & Security"
diff --git a/apps/web/src/app/[locale]/control-panel/users/user-row.tsx b/apps/web/src/app/[locale]/control-panel/users/user-row.tsx
index 6410a7204..45b2debb7 100644
--- a/apps/web/src/app/[locale]/control-panel/users/user-row.tsx
+++ b/apps/web/src/app/[locale]/control-panel/users/user-row.tsx
@@ -55,9 +55,9 @@ export function UserRow({
         <div>
           <OptimizedAvatarImage src={image} name={name} size="md" />
         </div>
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0 flex-1">
           <div className="font-semibold">{name}</div>
-          <div className="text-muted-foreground truncate">{email}</div>
+          <div className="truncate text-muted-foreground">{email}</div>
         </div>
         <div className="flex items-center gap-4">
           <span className="capitalize">{role}</span>
diff --git a/apps/web/src/app/[locale]/control-panel/users/users-tabbed-view.tsx b/apps/web/src/app/[locale]/control-panel/users/users-tabbed-view.tsx
index 26bbc4cd0..dae2bb613 100644
--- a/apps/web/src/app/[locale]/control-panel/users/users-tabbed-view.tsx
+++ b/apps/web/src/app/[locale]/control-panel/users/users-tabbed-view.tsx
@@ -49,7 +49,7 @@ export function UsersTabbedView({ children }: { children: React.ReactNode }) {
         key={tab}
         className={cn(
           "transition-opacity",
-          isPending ? "opacity-50 delay-200 pointer-events-none" : "",
+          isPending ? "pointer-events-none opacity-50 delay-200" : "",
         )}
       >
         {children}
diff --git a/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx b/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
index 47a74e530..af70a99fc 100644
--- a/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
@@ -21,12 +21,12 @@ const GoToApp = () => {
   }
 
   return (
-    <div className="border-primary-200 bg-primary-50/75 rounded-lg border p-2.5 text-sm sm:p-1.5">
+    <div className="rounded-lg border border-primary-200 bg-primary-50/75 p-2.5 text-sm sm:p-1.5">
       <div className="flex items-start justify-between sm:items-center">
         <div className="flex gap-2.5 sm:items-center lg:px-2.5">
-          <UserCircle2Icon className="text-primary-600 hidden size-4 sm:block" />
+          <UserCircle2Icon className="hidden size-4 text-primary-600 sm:block" />
           <div className="flex grow flex-col gap-x-2.5 sm:flex-row">
-            <h4 className="text-primary-600 font-medium">
+            <h4 className="font-medium text-primary-600">
               <Trans i18nKey="eventHostTitle" defaults="Manage Access" />
             </h4>
             <p className="text-primary-600/75">
@@ -38,7 +38,7 @@ const GoToApp = () => {
           </div>
         </div>
         <Link
-          className="text-primary-600 hover:bg-primary-200/50 active:bg-primary-200 inline-flex h-9 items-center gap-x-2.5 rounded-md px-3 font-medium"
+          className="inline-flex h-9 items-center gap-x-2.5 rounded-md px-3 font-medium text-primary-600 hover:bg-primary-200/50 active:bg-primary-200"
           href={`/poll/${poll.id}`}
         >
           <Trans i18nKey="manage" />
@@ -53,7 +53,7 @@ export function InvitePage() {
   const poll = usePoll();
 
   return (
-    <div className="sm:p-6 p-3">
+    <div className="p-3 sm:p-6">
       <PollViewTracker pollId={poll.id} />
       <div className="mx-auto w-full max-w-4xl space-y-4">
         <GoToApp />
diff --git a/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx b/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
index 77983daed..8af868c06 100644
--- a/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
@@ -23,7 +23,7 @@ export const Nav = () => {
             className={poll.userId !== user.id ? "hidden" : ""}
           >
             <Link href={`/poll/${poll.id}`}>
-              <ArrowUpLeftIcon className="text-muted-foreground size-4" />
+              <ArrowUpLeftIcon className="size-4 text-muted-foreground" />
               <Trans i18nKey="manage" />
             </Link>
           </Button>
diff --git a/apps/web/src/app/[locale]/not-found.tsx b/apps/web/src/app/[locale]/not-found.tsx
index f3d6864cb..bb22f8d65 100644
--- a/apps/web/src/app/[locale]/not-found.tsx
+++ b/apps/web/src/app/[locale]/not-found.tsx
@@ -14,7 +14,7 @@ export default async function Page() {
       <div className="space-y-8">
         <div className="space-y-4 text-center">
           <FileSearchIcon className="mb-4 inline-block size-24 text-gray-400" />
-          <div className="text-primary-600 mb-2 text-3xl font-bold">
+          <div className="mb-2 font-bold text-3xl text-primary-600">
             {t("errors_notFoundTitle")}
           </div>
           <p className="text-gray-600">{t("errors_notFoundDescription")}</p>
diff --git a/apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx b/apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx
index f3693fd27..6cbae6608 100644
--- a/apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx
@@ -21,7 +21,7 @@ export const GuestPollAlert = () => {
   }
   return (
     <Alert icon={InfoIcon}>
-      <AlertTitle className="mb-1 text-sm font-medium tracking-normal">
+      <AlertTitle className="mb-1 font-medium text-sm tracking-normal">
         <Trans
           i18nKey="guestPollAlertTitle"
           defaults="Your administrator rights can be lost if you clear your cookies"
diff --git a/apps/web/src/app/[locale]/setup/page.tsx b/apps/web/src/app/[locale]/setup/page.tsx
index 9f5687532..250cbb8a4 100644
--- a/apps/web/src/app/[locale]/setup/page.tsx
+++ b/apps/web/src/app/[locale]/setup/page.tsx
@@ -18,17 +18,17 @@ export default async function SetupPage() {
   }
 
   return (
-    <div className="bg-background flex min-h-dvh justify-center p-4 sm:items-center">
+    <div className="flex min-h-dvh justify-center bg-background p-4 sm:items-center">
       <div className="w-full max-w-sm">
         <article className="space-y-8 lg:space-y-10">
           <div className="py-8">
             <Logo className="mx-auto" />
           </div>
           <header className="text-center">
-            <h1 className="text-2xl font-bold">
+            <h1 className="font-bold text-2xl">
               <Trans i18nKey="setupFormTitle" defaults="Setup" />
             </h1>
-            <p className="text-muted-foreground mt-1">
+            <p className="mt-1 text-muted-foreground">
               <Trans
                 i18nKey="setupFormDescription"
                 defaults="Finish setting up your account."
diff --git a/apps/web/src/app/[locale]/timezone-change-detector.tsx b/apps/web/src/app/[locale]/timezone-change-detector.tsx
index bd345e073..c4a2d7ad4 100644
--- a/apps/web/src/app/[locale]/timezone-change-detector.tsx
+++ b/apps/web/src/app/[locale]/timezone-change-detector.tsx
@@ -62,7 +62,7 @@ export function TimeZoneChangeDetector() {
           <Trans
             i18nKey="timeZoneChangeDetectorMessage"
             defaults="Your timezone has changed to <b>{currentTimeZone}</b>. Do you want to update your preferences?"
-            components={{ b: <b className="text-foreground font-medium" /> }}
+            components={{ b: <b className="font-medium text-foreground" /> }}
             values={{ currentTimeZone }}
           />
         </p>
diff --git a/apps/web/src/app/components/page-icons.tsx b/apps/web/src/app/components/page-icons.tsx
index ed6b60942..9425f2e04 100644
--- a/apps/web/src/app/components/page-icons.tsx
+++ b/apps/web/src/app/components/page-icons.tsx
@@ -29,10 +29,10 @@ const pageIconVariants = cva("inline-flex items-center justify-center", {
       purple: "bg-purple-500 text-white",
     },
     size: {
-      sm: "size-7 [&_svg]:size-4 rounded-md",
-      md: "size-8 [&_svg]:size-5 rounded-lg",
-      lg: "size-9 [&_svg]:size-5 rounded-lg",
-      xl: "size-10 [&_svg]:size-5 rounded-lg",
+      sm: "size-7 rounded-md [&_svg]:size-4",
+      md: "size-8 rounded-lg [&_svg]:size-5",
+      lg: "size-9 rounded-lg [&_svg]:size-5",
+      xl: "size-10 rounded-lg [&_svg]:size-5",
     },
   },
   defaultVariants: {
diff --git a/apps/web/src/app/components/page-layout.tsx b/apps/web/src/app/components/page-layout.tsx
index 1c6a53a19..1a6582296 100644
--- a/apps/web/src/app/components/page-layout.tsx
+++ b/apps/web/src/app/components/page-layout.tsx
@@ -8,7 +8,7 @@ export function PageContainer({
   className,
 }: React.PropsWithChildren<{ className?: string }>) {
   return (
-    <div className={cn("mx-auto w-full p-4 md:p-8 max-w-7xl", className)}>
+    <div className={cn("mx-auto w-full max-w-7xl p-4 md:p-8", className)}>
       {children}
     </div>
   );
@@ -24,7 +24,7 @@ export function PageTitle({
   return (
     <h1
       className={cn(
-        "text-foreground flex items-center gap-3 truncate text-xl font-bold leading-none tracking-tight",
+        "flex items-center gap-3 truncate font-bold text-foreground text-xl leading-none tracking-tight",
         className,
       )}
     >
@@ -41,7 +41,7 @@ export function PageDescription({
   className?: string;
 }) {
   return (
-    <p className={cn("text-muted-foreground mt-4 text-sm", className)}>
+    <p className={cn("mt-4 text-muted-foreground text-sm", className)}>
       {children}
     </p>
   );
diff --git a/apps/web/src/components/clock.tsx b/apps/web/src/components/clock.tsx
index ef53f4bcb..670860750 100644
--- a/apps/web/src/components/clock.tsx
+++ b/apps/web/src/components/clock.tsx
@@ -110,7 +110,7 @@ export const ClockPreferences = ({ children }: React.PropsWithChildren) => {
             />
           </DialogDescription>
         </DialogHeader>
-        <div className="bg-muted grid h-24 items-center justify-center rounded-md text-2xl font-bold">
+        <div className="grid h-24 items-center justify-center rounded-md bg-muted font-bold text-2xl">
           <Clock />
         </div>
         <TimePreferences />
diff --git a/apps/web/src/components/cookie-consent.tsx b/apps/web/src/components/cookie-consent.tsx
index 3398ec88b..5f2d1006e 100644
--- a/apps/web/src/components/cookie-consent.tsx
+++ b/apps/web/src/components/cookie-consent.tsx
@@ -33,9 +33,9 @@ const CookieConsentPopover = () => {
               initial={{ opacity: 0, y: 100 }}
               animate="enter"
               exit="exit"
-              className="fixed bottom-8 right-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
+              className="fixed right-8 bottom-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
             >
-              <CookiesIllustration className="absolute -top-6" />
+              <CookiesIllustration className="-top-6 absolute" />
               <div className="mb-3">
                 Your privacy is important to us. We only use cookies to improve
                 the browsing experience on this website.
@@ -43,7 +43,7 @@ const CookieConsentPopover = () => {
               <div className="flex items-center space-x-6">
                 <Link
                   href="/privacy-policy"
-                  className="hover:text-primary-600 text-gray-500"
+                  className="text-gray-500 hover:text-primary-600"
                 >
                   Privacy Policy
                 </Link>
@@ -53,7 +53,7 @@ const CookieConsentPopover = () => {
                     Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
                     setVisible(false);
                   }}
-                  className="bg-primary-600 hover:bg-primary-600/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1 font-semibold text-white shadow-sm transition-all focus:ring-2"
+                  className="grow rounded-md bg-primary-600 px-5 py-1 font-semibold text-white shadow-sm transition-all hover:bg-primary-600/90 focus:ring-2 focus:ring-primary-200 active:bg-primary-600/90"
                 >
                   OK
                 </button>
diff --git a/apps/web/src/components/date-card.tsx b/apps/web/src/components/date-card.tsx
index b0166ddd5..46c170a72 100644
--- a/apps/web/src/components/date-card.tsx
+++ b/apps/web/src/components/date-card.tsx
@@ -20,10 +20,10 @@ const DateCard: React.FunctionComponent<DateCardProps> = ({
         className,
       )}
     >
-      <div className="text-muted-foreground border-b border-gray-200 text-xs font-normal leading-4">
+      <div className="border-gray-200 border-b font-normal text-muted-foreground text-xs leading-4">
         {month}
       </div>
-      <div className="flex grow items-center justify-center rounded-b-md bg-white text-lg font-semibold leading-none tracking-tight">
+      <div className="flex grow items-center justify-center rounded-b-md bg-white font-semibold text-lg leading-none tracking-tight">
         {day}
       </div>
     </div>
diff --git a/apps/web/src/components/date-icon.tsx b/apps/web/src/components/date-icon.tsx
index bfcfd894d..9b611b2a8 100644
--- a/apps/web/src/components/date-icon.tsx
+++ b/apps/web/src/components/date-icon.tsx
@@ -15,10 +15,10 @@ export const DateIconInner = (props: {
         props.className,
       )}
     >
-      <div className="text-muted-foreground border-b border-gray-200 text-xs font-normal leading-4">
+      <div className="border-gray-200 border-b font-normal text-muted-foreground text-xs leading-4">
         {props.dow}
       </div>
-      <div className="flex grow items-center justify-center bg-white text-sm font-medium leading-none tracking-tight">
+      <div className="flex grow items-center justify-center bg-white font-medium text-sm leading-none tracking-tight">
         {props.day}
       </div>
     </div>
diff --git a/apps/web/src/components/description-list.tsx b/apps/web/src/components/description-list.tsx
index 9afcb5429..61cf29528 100644
--- a/apps/web/src/components/description-list.tsx
+++ b/apps/web/src/components/description-list.tsx
@@ -24,7 +24,7 @@ export function DescriptionTerm({
       {...props}
       className={cn(
         className,
-        "col-start-1 border-t border-gray-800/5 pt-3 text-gray-500 first:border-none sm:border-t sm:border-gray-800/5 sm:py-3 dark:border-white/5 dark:text-gray-400 sm:dark:border-white/5",
+        "col-start-1 border-gray-800/5 border-t pt-3 text-gray-500 first:border-none sm:border-gray-800/5 sm:border-t sm:py-3 dark:border-white/5 dark:text-gray-400 sm:dark:border-white/5",
       )}
     />
   );
@@ -39,7 +39,7 @@ export function DescriptionDetails({
       {...props}
       className={cn(
         className,
-        "pb-3 pt-1 text-gray-800 sm:border-t sm:border-gray-800/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none",
+        "pt-1 pb-3 text-gray-800 sm:border-gray-800/5 sm:border-t sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none",
       )}
     />
   );
diff --git a/apps/web/src/components/discussion/discussion.tsx b/apps/web/src/components/discussion/discussion.tsx
index 6b32fba69..5415eb140 100644
--- a/apps/web/src/components/discussion/discussion.tsx
+++ b/apps/web/src/components/discussion/discussion.tsx
@@ -223,7 +223,7 @@ function DiscussionInner() {
                         </div>
                         {canDelete && (
                           <DropdownMenu>
-                            <DropdownMenuTrigger className="hover:text-foreground text-gray-500">
+                            <DropdownMenuTrigger className="text-gray-500 hover:text-foreground">
                               <MoreHorizontalIcon className="size-4" />
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="start">
@@ -267,7 +267,7 @@ function DiscussionInner() {
           ) : (
             <button
               type="button"
-              className="border-input text-muted-foreground flex w-full rounded border bg-transparent px-2 py-2 text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1"
+              className="flex w-full rounded border border-input bg-transparent px-2 py-2 text-left text-muted-foreground text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1"
               onClick={() => setIsWriting(true)}
             >
               <Trans
@@ -286,7 +286,7 @@ export default function Discussion() {
   const poll = usePoll();
   if (poll.disableComments) {
     return (
-      <p className="text-muted-foreground rounded-lg bg-gray-100 p-4 text-center text-sm">
+      <p className="rounded-lg bg-gray-100 p-4 text-center text-muted-foreground text-sm">
         <Icon>
           <MessageSquareOffIcon className="mr-2 inline-block" />
         </Icon>
diff --git a/apps/web/src/components/empty-state.tsx b/apps/web/src/components/empty-state.tsx
index c7d530b8d..694dc3915 100644
--- a/apps/web/src/components/empty-state.tsx
+++ b/apps/web/src/components/empty-state.tsx
@@ -11,7 +11,7 @@ export function EmptyState({
   return (
     <div
       className={cn(
-        "flex flex-col items-center pt-16 pb-32 justify-center text-center",
+        "flex flex-col items-center justify-center pt-16 pb-32 text-center",
         className,
       )}
     >
@@ -29,7 +29,7 @@ export function EmptyStateIcon({ children }: { children: React.ReactNode }) {
 }
 
 export function EmptyStateTitle({ children }: { children: React.ReactNode }) {
-  return <p className="text-base font-semibold">{children}</p>;
+  return <p className="font-semibold text-base">{children}</p>;
 }
 
 export function EmptyStateDescription({
@@ -38,7 +38,7 @@ export function EmptyStateDescription({
   children: React.ReactNode;
 }) {
   return (
-    <p className="text-muted-foreground mt-2 max-w-md text-pretty text-sm leading-relaxed">
+    <p className="mt-2 max-w-md text-pretty text-muted-foreground text-sm leading-relaxed">
       {children}
     </p>
   );
diff --git a/apps/web/src/components/error-page.tsx b/apps/web/src/components/error-page.tsx
index 450653815..e9a0e74f6 100644
--- a/apps/web/src/components/error-page.tsx
+++ b/apps/web/src/components/error-page.tsx
@@ -22,7 +22,7 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
       <div className="space-y-8">
         <div className="space-y-4 text-center">
           <Icon className="mb-4 inline-block size-24 text-gray-400" />
-          <div className="text-primary-600 mb-2 text-3xl font-bold">
+          <div className="mb-2 font-bold text-3xl text-primary-600">
             {title}
           </div>
           <p className="text-gray-600">{description}</p>
diff --git a/apps/web/src/components/event-card.tsx b/apps/web/src/components/event-card.tsx
index 7983aa974..b9995b6dd 100644
--- a/apps/web/src/components/event-card.tsx
+++ b/apps/web/src/components/event-card.tsx
@@ -42,11 +42,11 @@ export function EventCard() {
         <CardContent className="space-y-4 sm:space-y-6">
           <div className="flex flex-col items-start gap-4 lg:flex-row lg:justify-between">
             <div>
-              <h1 data-testid="poll-title" className="text-lg font-semibold">
+              <h1 data-testid="poll-title" className="font-semibold text-lg">
                 {poll.title}
               </h1>
               <CardDescription>
-                <span className="flex items-center gap-0.5 whitespace-nowrap text-sm text-gray-500">
+                <span className="flex items-center gap-0.5 whitespace-nowrap text-gray-500 text-sm">
                   <span>
                     <Trans
                       i18nKey="createdBy"
@@ -80,7 +80,7 @@ export function EventCard() {
           <div className="flex flex-col justify-between gap-4 sm:flex-row sm:flex-wrap sm:items-center">
             <IconGuide />
             {poll.location ? (
-              <p className="text-muted-foregroun truncate whitespace-nowrap text-sm">
+              <p className="truncate whitespace-nowrap text-muted-foregroun text-sm">
                 <Icon>
                   <MapPinIcon className="-mt-0.5 mr-1.5 inline-block" />
                 </Icon>
diff --git a/apps/web/src/components/feedback.tsx b/apps/web/src/components/feedback.tsx
index 5618ea241..ff184dbc6 100644
--- a/apps/web/src/components/feedback.tsx
+++ b/apps/web/src/components/feedback.tsx
@@ -20,7 +20,7 @@ import { Trans } from "@/components/trans";
 const FeedbackButton = () => {
   return (
     <DropdownMenu modal={false}>
-      <DropdownMenuTrigger className="shadow-huge fixed bottom-8 right-6 z-20 hidden size-12 items-center justify-center rounded-full bg-gray-800 hover:bg-gray-700 active:shadow-none sm:inline-flex">
+      <DropdownMenuTrigger className="fixed right-6 bottom-8 z-20 hidden size-12 items-center justify-center rounded-full bg-gray-800 shadow-huge hover:bg-gray-700 active:shadow-none sm:inline-flex">
         <MegaphoneIcon className="h-5 text-white" />
       </DropdownMenuTrigger>
       <DropdownMenuContent sideOffset={10} align="end">
diff --git a/apps/web/src/components/forms/poll-details-form.tsx b/apps/web/src/components/forms/poll-details-form.tsx
index 8301e3ba8..a851c2450 100644
--- a/apps/web/src/components/forms/poll-details-form.tsx
+++ b/apps/web/src/components/forms/poll-details-form.tsx
@@ -54,7 +54,7 @@ export const PollDetailsForm = () => {
           <FormLabel className="inline-block" htmlFor="location">
             {t("location")}
           </FormLabel>
-          <span className="text-muted-foreground ml-1 text-sm">
+          <span className="ml-1 text-muted-foreground text-sm">
             <Trans i18nKey="optionalLabel" defaults="(Optional)" />
           </span>
         </div>
@@ -71,7 +71,7 @@ export const PollDetailsForm = () => {
           <FormLabel className="inline-block" htmlFor="description">
             {t("description")}
           </FormLabel>
-          <span className="text-muted-foreground ml-1 text-sm">
+          <span className="ml-1 text-muted-foreground text-sm">
             <Trans i18nKey="optionalLabel" defaults="(Optional)" />
           </span>
         </div>
diff --git a/apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx b/apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx
index 6fe2d7b7c..ec46ec4c4 100644
--- a/apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx
@@ -19,7 +19,7 @@ const DateNavigationToolbar: React.FunctionComponent<
   return (
     <div className="flex h-14 w-full shrink-0 items-center px-4">
       <div className="grow font-semibold tracking-tight">
-        <span className="mr-2 text-sm font-normal text-gray-500">{year}</span>
+        <span className="mr-2 font-normal text-gray-500 text-sm">{year}</span>
         <span className="font-semibold">{label}</span>
       </div>
       <div className="flex items-center space-x-2">
diff --git a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
index 495015cd5..7d17c7756 100644
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
@@ -93,7 +93,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
 
   return (
     <div className="overflow-hidden md:flex">
-      <div className="shrink-0 border-b p-3 sm:p-4 md:w-[380px] md:border-b-0 md:border-r">
+      <div className="shrink-0 border-b p-3 sm:p-4 md:w-[380px] md:border-r md:border-b-0">
         <div>
           <div className="flex w-full flex-col">
             <div className="mb-3 flex items-center justify-center space-x-4">
@@ -116,7 +116,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                 return (
                   <div
                     key={dayOfWeek}
-                    className="flex items-center justify-center pb-2 text-sm font-medium text-gray-500"
+                    className="flex items-center justify-center pb-2 font-medium text-gray-500 text-sm"
                   >
                     {dayOfWeek.substring(0, 2)}
                   </div>
@@ -175,7 +175,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                         }
                       }}
                       className={cn(
-                        "group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 text-sm font-medium tracking-tight focus:z-10 focus:rounded",
+                        "group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 font-medium text-sm tracking-tight focus:z-10 focus:rounded",
                         {
                           "bg-gray-100 text-gray-400": day.isPast,
                           "text-rose-600": day.today && !day.selected,
@@ -188,10 +188,10 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                       <span
                         aria-hidden
                         className={cn(
-                          "absolute inset-1 -z-0 rounded-md border",
+                          "-z-0 absolute inset-1 rounded-md border",
                           day.selected
-                            ? "border-primary-300 group-hover:border-primary-400 border-dashed shadow-sm"
-                            : "border-dashed border-transparent group-hover:border-gray-400 group-active:bg-gray-200",
+                            ? "border-primary-300 border-dashed shadow-sm group-hover:border-primary-400"
+                            : "border-transparent border-dashed group-hover:border-gray-400 group-active:bg-gray-200",
                         )}
                       />
                       <span className="z-10">{day.day}</span>
@@ -215,7 +215,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
           <div className="flex items-center space-x-3 p-3 sm:p-4">
             <div className="grow">
               <div className="font-medium">{t("specifyTimes")}</div>
-              <div className="text-sm text-gray-500">
+              <div className="text-gray-500 text-sm">
                 {t("specifyTimesDescription")}
               </div>
             </div>
diff --git a/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx b/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
index 90aa89cd9..0c6aef305 100644
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
@@ -75,7 +75,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
                 <div className="flex items-center gap-2">
                   <span>{dayjs(option).format("LT")}</span>
                   {after ? (
-                    <span className="text-sm text-gray-500">
+                    <span className="text-gray-500 text-sm">
                       {getDuration(dayjs(after), dayjs(option))}
                     </span>
                   ) : null}
@@ -88,7 +88,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
             <div className="flex items-center gap-2">
               <span>{dayjs(value).format("LT")}</span>
               {after ? (
-                <span className="text-sm text-gray-500">
+                <span className="text-gray-500 text-sm">
                   {getDuration(dayjs(after), dayjs(value))}
                 </span>
               ) : null}
diff --git a/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx b/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
index 17aeb246c..6339fe655 100644
--- a/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
+++ b/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
@@ -243,7 +243,7 @@ const PollOptionsForm = ({
                   </Label>
                   <Tooltip>
                     <TooltipTrigger type="button">
-                      <InfoIcon className="text-muted-foreground size-4" />
+                      <InfoIcon className="size-4 text-muted-foreground" />
                     </TooltipTrigger>
                     <TooltipContent className="w-72">
                       <Trans
@@ -262,7 +262,7 @@ const PollOptionsForm = ({
                       }}
                       variant="ghost"
                     >
-                      <GlobeIcon className="text-muted-foreground size-4" />
+                      <GlobeIcon className="size-4 text-muted-foreground" />
                       {field.value}
                     </Button>
                     <CommandDialog
diff --git a/apps/web/src/components/forms/poll-options-form/week-calendar.tsx b/apps/web/src/components/forms/poll-options-form/week-calendar.tsx
index a5b2d7c83..31a472be0 100644
--- a/apps/web/src/components/forms/poll-options-form/week-calendar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/week-calendar.tsx
@@ -101,7 +101,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
               <div
                 // onClick prop doesn't work properly. Seems like some other element is cancelling the event before it reaches this element
                 onMouseUp={props.onClick}
-                className="text-primary-500 border-primary-300 hover:border-primary-400 hover:text-primary-600 group absolute ml-1 flex max-h-full flex-col justify-between overflow-hidden rounded-lg border border-dashed bg-white/50 p-1 text-xs shadow-sm hover:cursor-pointer"
+                className="group absolute ml-1 flex max-h-full flex-col justify-between overflow-hidden rounded-lg border border-primary-300 border-dashed bg-white/50 p-1 text-primary-500 text-xs shadow-sm hover:cursor-pointer hover:border-primary-400 hover:text-primary-600"
                 style={{
                   top: `calc(${props.style?.top}% + 4px)`,
                   height: `calc(${props.style?.height}% - 8px)`,
@@ -109,7 +109,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                   width: `calc(${props.style?.width}%)`,
                 }}
               >
-                <div className="absolute right-1.5 top-1.5 flex justify-end opacity-0 group-hover:opacity-100">
+                <div className="absolute top-1.5 right-1.5 flex justify-end opacity-0 group-hover:opacity-100">
                   <XIcon className="size-3" />
                 </div>
                 <div>
@@ -143,7 +143,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
             children?: React.ReactNode;
           }) {
             return (
-              <div className="h-6 text-xs leading-none text-gray-500">
+              <div className="h-6 text-gray-500 text-xs leading-none">
                 {children}
               </div>
             );
diff --git a/apps/web/src/components/forms/poll-settings.tsx b/apps/web/src/components/forms/poll-settings.tsx
index 7254c49db..0722312b0 100644
--- a/apps/web/src/components/forms/poll-settings.tsx
+++ b/apps/web/src/components/forms/poll-settings.tsx
@@ -40,7 +40,7 @@ const SettingTitle = ({
 }>) => {
   return (
     <div className="flex min-w-0 items-center gap-x-2.5">
-      <div className="text-sm font-medium">{children}</div>
+      <div className="font-medium text-sm">{children}</div>
       {pro ? (
         <div>
           <ProBadge />
diff --git a/apps/web/src/components/full-width-layout.tsx b/apps/web/src/components/full-width-layout.tsx
index acad9bfb0..e74ffcff1 100644
--- a/apps/web/src/components/full-width-layout.tsx
+++ b/apps/web/src/components/full-width-layout.tsx
@@ -6,7 +6,7 @@ export function FullWidthLayoutHeader({
   children,
 }: { children: React.ReactNode }) {
   return (
-    <header className="py-4 rounded-t-lg bg-background/90 backdrop-blur-sm sticky top-0 z-10 px-6 border-b">
+    <header className="sticky top-0 z-10 rounded-t-lg border-b bg-background/90 px-6 py-4 backdrop-blur-sm">
       {children}
     </header>
   );
@@ -25,7 +25,7 @@ export function FullWidthLayoutTitle({
   return (
     <div className="flex items-center gap-2">
       {icon}
-      <h1 className="text-xl font-semibold">{children}</h1>
+      <h1 className="font-semibold text-xl">{children}</h1>
     </div>
   );
 }
diff --git a/apps/web/src/components/invite-dialog.tsx b/apps/web/src/components/invite-dialog.tsx
index b442d9cda..d75ddbd02 100644
--- a/apps/web/src/components/invite-dialog.tsx
+++ b/apps/web/src/components/invite-dialog.tsx
@@ -66,7 +66,7 @@ export const InviteDialog = () => {
       </DialogTrigger>
       <DialogContent data-testid="invite-participant-dialog">
         <div className="flex">
-          <Share2Icon className="text-primary size-6" />
+          <Share2Icon className="size-6 text-primary" />
         </div>
         <DialogHeader className="">
           <DialogTitle>
diff --git a/apps/web/src/components/new-participant-modal.tsx b/apps/web/src/components/new-participant-modal.tsx
index a22c1e931..67869701c 100644
--- a/apps/web/src/components/new-participant-modal.tsx
+++ b/apps/web/src/components/new-participant-modal.tsx
@@ -144,7 +144,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
           {...register("name")}
         />
         {formState.errors.name?.message ? (
-          <div className="mt-2 text-sm text-rose-500">
+          <div className="mt-2 text-rose-500 text-sm">
             {formState.errors.name.message}
           </div>
         ) : null}
@@ -162,7 +162,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
           {...register("email")}
         />
         {formState.errors.email?.message ? (
-          <div className="mt-1 text-sm text-rose-500">
+          <div className="mt-1 text-rose-500 text-sm">
             {formState.errors.email.message}
           </div>
         ) : null}
diff --git a/apps/web/src/components/page-dialog.tsx b/apps/web/src/components/page-dialog.tsx
index 9870543e7..1b074c9c3 100644
--- a/apps/web/src/components/page-dialog.tsx
+++ b/apps/web/src/components/page-dialog.tsx
@@ -8,7 +8,7 @@ export const PageDialog = (
     <Container className="flex h-[calc(75vh)] items-center justify-center">
       <div className="text-center">
         {props.icon ? (
-          <props.icon className="text-primary inline-block size-14" />
+          <props.icon className="inline-block size-14 text-primary" />
         ) : null}
         {props.children}
       </div>
@@ -17,11 +17,11 @@ export const PageDialog = (
 };
 
 export const PageDialogContent = (props: React.PropsWithChildren) => {
-  return <div className="mb-6 mt-4">{props.children}</div>;
+  return <div className="mt-4 mb-6">{props.children}</div>;
 };
 
 export const PageDialogHeader = (props: React.PropsWithChildren) => {
-  return <div className="mb-6 mt-4 space-y-2">{props.children}</div>;
+  return <div className="mt-4 mb-6 space-y-2">{props.children}</div>;
 };
 
 export const PageDialogFooter = (props: React.PropsWithChildren) => {
@@ -32,12 +32,12 @@ export const PageDialogFooter = (props: React.PropsWithChildren) => {
   );
 };
 export const PageDialogTitle = (props: React.PropsWithChildren) => {
-  return <h1 className="text-2xl font-bold">{props.children}</h1>;
+  return <h1 className="font-bold text-2xl">{props.children}</h1>;
 };
 
 export const PageDialogDescription = (props: React.PropsWithChildren) => {
   return (
-    <p className="text-muted-foreground max-w-xl text-sm leading-relaxed">
+    <p className="max-w-xl text-muted-foreground text-sm leading-relaxed">
       {props.children}
     </p>
   );
diff --git a/apps/web/src/components/pagination.tsx b/apps/web/src/components/pagination.tsx
index f5d39b061..ecdd56ac9 100644
--- a/apps/web/src/components/pagination.tsx
+++ b/apps/web/src/components/pagination.tsx
@@ -50,7 +50,7 @@ export function Pagination({
 
   return (
     <div className={cn("flex items-center justify-between", className)}>
-      <div className="text-sm text-gray-500">
+      <div className="text-gray-500 text-sm">
         <Trans
           i18nKey="paginationItems"
           defaults="Showing {startItem}–{endItem} of {totalItems}"
diff --git a/apps/web/src/components/participant-avatar-bar.tsx b/apps/web/src/components/participant-avatar-bar.tsx
index 442f4d582..6ef784e21 100644
--- a/apps/web/src/components/participant-avatar-bar.tsx
+++ b/apps/web/src/components/participant-avatar-bar.tsx
@@ -35,7 +35,7 @@ export const ParticipantAvatarBar = ({
   const hiddenCount = totalParticipants - visibleCount;
 
   return (
-    <ul className="flex cursor-default items-center -space-x-1 rounded-full bg-white p-0.5">
+    <ul className="-space-x-1 flex cursor-default items-center rounded-full bg-white p-0.5">
       {visibleParticipants.map((participant, index) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
         <Tooltip delayDuration={100} key={index}>
@@ -60,7 +60,7 @@ export const ParticipantAvatarBar = ({
               <span
                 className={cn(
                   "select-none",
-                  "rounded-full bg-gray-100 px-1.5 text-xs font-semibold",
+                  "rounded-full bg-gray-100 px-1.5 font-semibold text-xs",
                   "inline-flex h-5 items-center justify-center",
                 )}
               >
diff --git a/apps/web/src/components/participant-dropdown.tsx b/apps/web/src/components/participant-dropdown.tsx
index 8c85625fe..6f36cb1b1 100644
--- a/apps/web/src/components/participant-dropdown.tsx
+++ b/apps/web/src/components/participant-dropdown.tsx
@@ -79,7 +79,7 @@ export const ParticipantDropdown = ({
             <div className="grid gap-0.5">
               <div>{participant.name}</div>
               {participant.email ? (
-                <div className="text-muted-foreground text-xs font-normal">
+                <div className="font-normal text-muted-foreground text-xs">
                   {participant.email}
                 </div>
               ) : null}
diff --git a/apps/web/src/components/participant.tsx b/apps/web/src/components/participant.tsx
index dac011f6c..905c2965d 100644
--- a/apps/web/src/components/participant.tsx
+++ b/apps/web/src/components/participant.tsx
@@ -57,7 +57,7 @@ export const ParticipantName = ({
           setIsTruncated(false);
         }
       }}
-      className={cn("truncate text-sm font-medium", {
+      className={cn("truncate font-medium text-sm", {
         "hover:-translate-x-2 hover:cursor-pointer hover:overflow-visible hover:whitespace-nowrap hover:rounded-md hover:bg-white hover:p-2":
           isTruncated,
       })}
diff --git a/apps/web/src/components/pay-wall-dialog.tsx b/apps/web/src/components/pay-wall-dialog.tsx
index 3dd7a2123..42fce74f0 100644
--- a/apps/web/src/components/pay-wall-dialog.tsx
+++ b/apps/web/src/components/pay-wall-dialog.tsx
@@ -39,7 +39,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
     <Dialog {...dialog.dialogProps} {...forwardedProps}>
       {children}
       <DialogContent className="w-full max-w-[600px] overflow-hidden bg-gray-50 p-4 sm:p-6">
-        <SparklesIcon className="absolute -top-4 left-4 size-32 text-gray-500/10" />
+        <SparklesIcon className="-top-4 absolute left-4 size-32 text-gray-500/10" />
         <div className="space-y-6">
           <header>
             <div className="flex justify-center">
@@ -62,10 +62,10 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
                 </m.div>
               </div>
             </div>
-            <DialogTitle className="mb-1 mt-2 text-center text-xl font-bold">
+            <DialogTitle className="mt-2 mb-1 text-center font-bold text-xl">
               <Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
             </DialogTitle>
-            <DialogDescription className="text-muted-foreground mb-4 text-center text-sm leading-relaxed">
+            <DialogDescription className="mb-4 text-center text-muted-foreground text-sm leading-relaxed">
               <Trans
                 i18nKey="upgradeOverlaySubtitle3"
                 defaults="Unlock these feature by upgrading to a Pro plan."
@@ -73,7 +73,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
             </DialogDescription>
           </header>
           <section>
-            <ul className="grid justify-center gap-2 text-center text-sm font-medium sm:grid-cols-2">
+            <ul className="grid justify-center gap-2 text-center font-medium text-sm sm:grid-cols-2">
               <li>
                 <CheckIcon className="mr-2 inline-block size-4 text-green-600" />
                 <Trans i18nKey="featureNameFinalize" defaults="Finalize Poll" />
@@ -106,13 +106,13 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
               <li className="relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:bg-gray-100 focus-within:ring-gray-300 hover:bg-gray-100">
                 <div className="flex items-center gap-4">
                   <RadioGroupItem id="monthly" value="monthly" />
-                  <label className="text-base font-semibold" htmlFor="monthly">
+                  <label className="font-semibold text-base" htmlFor="monthly">
                     <span role="presentation" className="absolute inset-0" />
                     <Trans defaults="1 month" i18nKey="1month" />
                   </label>
                 </div>
                 <p className="flex items-baseline gap-1">
-                  <span className="text-xl font-semibold">${monthlyPrice}</span>
+                  <span className="font-semibold text-xl">${monthlyPrice}</span>
                   <span className="text-muted-foreground text-sm">/ mo</span>
                 </p>
               </li>
@@ -122,7 +122,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
                     <RadioGroupItem id="yearly" value="yearly" />
                     <div className="flex items-center gap-2">
                       <label
-                        className="text-base font-semibold"
+                        className="font-semibold text-base"
                         htmlFor="yearly"
                       >
                         <span
@@ -140,7 +140,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
                       </Badge>
                     </div>
                   </div>
-                  <p className="text-muted-foreground pointer-events-none flex items-baseline gap-1.5 pl-8 text-sm">
+                  <p className="pointer-events-none flex items-baseline gap-1.5 pl-8 text-muted-foreground text-sm">
                     <span>${yearlyPrice}</span>
                     <span className="line-through opacity-50">
                       ${((pricingData.monthly.amount * 12) / 100).toFixed(2)}
@@ -148,7 +148,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
                   </p>
                 </div>
                 <p className="flex items-baseline gap-1">
-                  <span className="text-xl font-semibold">
+                  <span className="font-semibold text-xl">
                     ${monthlyPriceAnnualRate}
                   </span>
                   <span className="text-muted-foreground text-sm">/ mo</span>
@@ -166,7 +166,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
                 <Trans i18nKey="upgrade" defaults="Upgrade" />
               </UpgradeButton>
             </div>
-            <p className="text-muted-foreground text-center text-sm">
+            <p className="text-center text-muted-foreground text-sm">
               <Trans
                 i18nKey="cancelAnytime"
                 defaults="Cancel anytime from your <a>billing page</a>."
diff --git a/apps/web/src/components/poll/desktop-poll.tsx b/apps/web/src/components/poll/desktop-poll.tsx
index 7994f5e16..5a7d9e6f9 100644
--- a/apps/web/src/components/poll/desktop-poll.tsx
+++ b/apps/web/src/components/poll/desktop-poll.tsx
@@ -241,7 +241,7 @@ const DesktopPoll: React.FunctionComponent = () => {
         <div
           className={cn(
             expanded
-              ? "fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-900/25 p-8"
+              ? "fixed top-0 left-0 z-50 flex h-full w-full items-center justify-center bg-gray-900/25 p-8"
               : "",
           )}
         >
@@ -249,7 +249,7 @@ const DesktopPoll: React.FunctionComponent = () => {
             className={cn(
               "flex max-h-full flex-col overflow-hidden rounded-md bg-white",
               {
-                "shadow-huge w-full max-w-7xl": expanded,
+                "w-full max-w-7xl shadow-huge": expanded,
               },
             )}
             ref={containerRef}
@@ -287,7 +287,7 @@ const DesktopPoll: React.FunctionComponent = () => {
                 <div
                   aria-hidden="true"
                   className={cn(
-                    "pointer-events-none absolute bottom-0 left-[235px] top-0 z-30 w-4 border-l bg-gradient-to-r from-gray-800/5 via-transparent to-transparent transition-opacity",
+                    "pointer-events-none absolute top-0 bottom-0 left-[235px] z-30 w-4 border-l bg-gradient-to-r from-gray-800/5 via-transparent to-transparent transition-opacity",
                     x > 0 ? "opacity-100" : "opacity-0",
                   )}
                 />
@@ -345,7 +345,7 @@ const DesktopPoll: React.FunctionComponent = () => {
                     </tbody>
                   </table>
                   {mode === "new" ? (
-                    <div className="sticky border-l left-[235px] flex w-[calc(100%-235px)] items-center justify-between gap-4 border-t bg-gray-50 p-3">
+                    <div className="sticky left-[235px] flex w-[calc(100%-235px)] items-center justify-between gap-4 border-t border-l bg-gray-50 p-3">
                       <Button
                         onClick={() => {
                           votingForm.cancel();
diff --git a/apps/web/src/components/poll/desktop-poll/participant-row-form.tsx b/apps/web/src/components/poll/desktop-poll/participant-row-form.tsx
index cef9333e3..1fcb985d3 100644
--- a/apps/web/src/components/poll/desktop-poll/participant-row-form.tsx
+++ b/apps/web/src/components/poll/desktop-poll/participant-row-form.tsx
@@ -107,7 +107,7 @@ const ParticipantRowForm = ({
         return (
           <td
             key={optionId}
-            className="relative h-12 border-l border-t bg-gray-50"
+            className="relative h-12 border-t border-l bg-gray-50"
           >
             <Controller
               control={form.control}
@@ -121,7 +121,7 @@ const ParticipantRowForm = ({
                       type: toggleVote(field.value?.type),
                     });
                   }}
-                  className="absolute inset-0 flex cursor-pointer items-center justify-center hover:bg-gray-100 active:bg-gray-200/50 active:ring-1 active:ring-inset active:ring-gray-200"
+                  className="absolute inset-0 flex cursor-pointer items-center justify-center hover:bg-gray-100 active:bg-gray-200/50 active:ring-1 active:ring-gray-200 active:ring-inset"
                 >
                   <VoteSelector
                     value={field.value?.type}
@@ -135,7 +135,7 @@ const ParticipantRowForm = ({
           </td>
         );
       })}
-      <td className="bg-diagonal-lines border-l" />
+      <td className="border-l bg-diagonal-lines" />
     </tr>
   );
 };
diff --git a/apps/web/src/components/poll/desktop-poll/participant-row.tsx b/apps/web/src/components/poll/desktop-poll/participant-row.tsx
index ece210bd9..ce0688837 100644
--- a/apps/web/src/components/poll/desktop-poll/participant-row.tsx
+++ b/apps/web/src/components/poll/desktop-poll/participant-row.tsx
@@ -71,7 +71,7 @@ export const ParticipantRowView: React.FunctionComponent<{
             // biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
             key={i}
             className={cn(
-              "h-12 border-l border-t",
+              "h-12 border-t border-l",
               !vote || vote === "no" ? "bg-gray-100" : "bg-white",
               {
                 "bg-gray-100": vote === "no",
@@ -96,7 +96,7 @@ export const ParticipantRowView: React.FunctionComponent<{
           </td>
         );
       })}
-      <td className="bg-diagonal-lines border-l" />
+      <td className="border-l bg-diagonal-lines" />
     </tr>
   );
 };
diff --git a/apps/web/src/components/poll/desktop-poll/poll-header.tsx b/apps/web/src/components/poll/desktop-poll/poll-header.tsx
index ec99cf512..3ca69476a 100644
--- a/apps/web/src/components/poll/desktop-poll/poll-header.tsx
+++ b/apps/web/src/components/poll/desktop-poll/poll-header.tsx
@@ -21,7 +21,7 @@ const TimeRange: React.FunctionComponent<{
   return (
     <div
       className={cn(
-        "text-muted-foreground relative flex flex-col items-center gap-1.5 text-xs font-normal",
+        "relative flex flex-col items-center gap-1.5 font-normal text-muted-foreground text-xs",
         className,
       )}
     >
@@ -49,7 +49,7 @@ const TimelineRow = ({
     <tr>
       <th
         style={{ minWidth: 235, top }}
-        className="sticky left-0 z-30 bg-white pl-4 pr-4"
+        className="sticky left-0 z-30 bg-white pr-4 pl-4"
       />
       {children}
       <th className="w-full min-w-4 border-l" />
@@ -83,7 +83,7 @@ const PollHeader: React.FunctionComponent = () => {
               <div className="flex">
                 <div
                   className={cn(
-                    "inline-flex h-5 gap-1 px-2 py-0.5 text-xs font-medium uppercase",
+                    "inline-flex h-5 gap-1 px-2 py-0.5 font-medium text-xs uppercase",
                     firstOfMonth ? "opacity-100" : "opacity-0",
                   )}
                 >
@@ -124,10 +124,10 @@ const PollHeader: React.FunctionComponent = () => {
             >
               {firstOfDay ? (
                 <div className="mt-1 flex flex-col gap-1">
-                  <div className="text-muted-foreground text-xs font-normal">
+                  <div className="font-normal text-muted-foreground text-xs">
                     {option.dow}
                   </div>
-                  <div className="text-sm font-medium">{option.day}</div>
+                  <div className="font-medium text-sm">{option.day}</div>
                 </div>
               ) : null}
             </th>
@@ -150,7 +150,7 @@ const PollHeader: React.FunctionComponent = () => {
                     duration={option.duration}
                   />
                 ) : (
-                  <p className="text-muted-foreground text-xs font-normal opacity-50">
+                  <p className="font-normal text-muted-foreground text-xs opacity-50">
                     <Trans i18nKey="allDay" defaults="All-Day" />
                   </p>
                 )}
diff --git a/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx b/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
index c0f9bc1c5..6a33ff7fd 100644
--- a/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
+++ b/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
@@ -174,7 +174,7 @@ export const FinalizePollForm = ({
                             <div className="flex gap-x-4">
                               <DateIcon start={option.startTime} />
                               <div className="grow whitespace-nowrap">
-                                <div className="text-sm font-medium">
+                                <div className="font-medium text-sm">
                                   {start.format("LL")}
                                 </div>
                                 <div className="text-muted-foreground text-sm">
diff --git a/apps/web/src/components/poll/mobile-poll/grouped-options.tsx b/apps/web/src/components/poll/mobile-poll/grouped-options.tsx
index 185e34dde..3d0a2dc15 100644
--- a/apps/web/src/components/poll/mobile-poll/grouped-options.tsx
+++ b/apps/web/src/components/poll/mobile-poll/grouped-options.tsx
@@ -29,7 +29,7 @@ const GroupedOptions: React.FunctionComponent<GroupedOptionsProps> = ({
           <div key={day}>
             <div
               className={cn(
-                "flex border-b bg-gray-50 px-4 py-2 text-xs font-medium uppercase",
+                "flex border-b bg-gray-50 px-4 py-2 font-medium text-xs uppercase",
                 groupClassName,
               )}
             >
diff --git a/apps/web/src/components/poll/mobile-poll/poll-option.tsx b/apps/web/src/components/poll/mobile-poll/poll-option.tsx
index a6fef458c..f97bc0f01 100644
--- a/apps/web/src/components/poll/mobile-poll/poll-option.tsx
+++ b/apps/web/src/components/poll/mobile-poll/poll-option.tsx
@@ -42,7 +42,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
   return (
     <div>
       {noVotes ? (
-        <p className="rounded-lg bg-gray-50 p-2 text-center text-sm text-gray-500">
+        <p className="rounded-lg bg-gray-50 p-2 text-center text-gray-500 text-sm">
           {t("noVotes")}
         </p>
       ) : (
@@ -56,7 +56,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
                   <VoteIcon
                     type="yes"
                     size="sm"
-                    className="absolute bottom-full left-full -translate-x-1.5 translate-y-2.5 rounded-full bg-white"
+                    className="-translate-x-1.5 absolute bottom-full left-full translate-y-2.5 rounded-full bg-white"
                   />
                 </div>
                 <div className="truncate text-sm">{name}</div>
@@ -70,7 +70,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
                   <VoteIcon
                     type="ifNeedBe"
                     size="sm"
-                    className="absolute bottom-full left-full -translate-x-1.5 translate-y-2.5 rounded-full bg-white"
+                    className="-translate-x-1.5 absolute bottom-full left-full translate-y-2.5 rounded-full bg-white"
                   />
                 </div>
                 <div className="truncate text-sm"> {name}</div>
@@ -86,7 +86,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
                   <VoteIcon
                     type="no"
                     size="sm"
-                    className="absolute bottom-full left-full -translate-x-1.5 translate-y-2.5 rounded-full bg-white"
+                    className="-translate-x-1.5 absolute bottom-full left-full translate-y-2.5 rounded-full bg-white"
                   />
                 </div>
                 <div className="truncate text-sm">{name}</div>
diff --git a/apps/web/src/components/poll/poll-footer.tsx b/apps/web/src/components/poll/poll-footer.tsx
index f3cb7c76b..6bcfc976e 100644
--- a/apps/web/src/components/poll/poll-footer.tsx
+++ b/apps/web/src/components/poll/poll-footer.tsx
@@ -4,7 +4,7 @@ import { Trans } from "@/components/trans";
 
 export function PollFooter() {
   return (
-    <div className="pb-12 pt-4 text-center text-sm text-gray-500">
+    <div className="pt-4 pb-12 text-center text-gray-500 text-sm">
       <Trans
         defaults="Powered by <a>{name}</a>"
         i18nKey="poweredByRallly"
@@ -12,7 +12,7 @@ export function PollFooter() {
         components={{
           a: (
             <Link
-              className="hover:text-primary-600 rounded-none border-b border-b-gray-500 font-semibold"
+              className="rounded-none border-b border-b-gray-500 font-semibold hover:text-primary-600"
               href="https://rallly.co"
             />
           ),
diff --git a/apps/web/src/components/poll/scheduled-event.tsx b/apps/web/src/components/poll/scheduled-event.tsx
index 6cb046353..568c0e847 100644
--- a/apps/web/src/components/poll/scheduled-event.tsx
+++ b/apps/web/src/components/poll/scheduled-event.tsx
@@ -27,10 +27,10 @@ function DateIcon({ start }: { start: Date }) {
       className="inline-flex size-12 flex-col rounded-lg border text-center"
       dateTime={d.toISOString()}
     >
-      <div className="border-b border-green-600/10 p-px text-xs">
+      <div className="border-green-600/10 border-b p-px text-xs">
         {d.format("MMM")}
       </div>
-      <div className="inline-flex grow items-center justify-center text-sm font-bold">
+      <div className="inline-flex grow items-center justify-center font-bold text-sm">
         {d.format("D")}
       </div>
     </time>
@@ -81,7 +81,7 @@ export function ScheduledEvent() {
       <div className="rounded-lg border bg-white p-0.5 shadow-sm">
         <div className="flex h-9 items-center gap-x-2 rounded-md bg-gray-100 px-2">
           <CalendarIcon className="size-4" />
-          <h2 className="text-sm font-medium">
+          <h2 className="font-medium text-sm">
             <Trans i18nKey="schedulateDate" defaults="Scheduled Date" />
           </h2>
         </div>
@@ -92,7 +92,7 @@ export function ScheduledEvent() {
             </div>
             <div className="items-center gap-x-4">
               <div className="space-y-1">
-                <div className="text-sm font-medium">
+                <div className="font-medium text-sm">
                   <FinalDate start={event.start} />
                 </div>
                 <div className="text-sm opacity-75">
diff --git a/apps/web/src/components/poll/you-avatar.tsx b/apps/web/src/components/poll/you-avatar.tsx
index 4581571f9..399322db8 100644
--- a/apps/web/src/components/poll/you-avatar.tsx
+++ b/apps/web/src/components/poll/you-avatar.tsx
@@ -3,7 +3,7 @@ import { UserIcon } from "lucide-react";
 
 export function YouAvatar() {
   return (
-    <div className="inline-flex size-5 items-center justify-center rounded-full bg-gray-200 text-xs font-medium">
+    <div className="inline-flex size-5 items-center justify-center rounded-full bg-gray-200 font-medium text-xs">
       <Icon>
         <UserIcon />
       </Icon>
diff --git a/apps/web/src/components/router-loading-indicator.tsx b/apps/web/src/components/router-loading-indicator.tsx
index 2e25248e0..f8707cc87 100644
--- a/apps/web/src/components/router-loading-indicator.tsx
+++ b/apps/web/src/components/router-loading-indicator.tsx
@@ -62,7 +62,7 @@ export const RouterLoadingIndicator = () => {
   return (
     <div
       className={cn(
-        "fixed left-0 right-0 top-0 z-50 w-full",
+        "fixed top-0 right-0 left-0 z-50 w-full",
         isLoading ? "opacity-100" : "opacity-0",
       )}
     >
diff --git a/apps/web/src/components/spinner.tsx b/apps/web/src/components/spinner.tsx
index e29850455..649070bbc 100644
--- a/apps/web/src/components/spinner.tsx
+++ b/apps/web/src/components/spinner.tsx
@@ -5,7 +5,7 @@ export const Spinner = (props: { className?: string }) => {
   return (
     <Loader2Icon
       className={cn(
-        "text-muted-foreground inline-block h-5 animate-spin",
+        "inline-block h-5 animate-spin text-muted-foreground",
         props.className,
       )}
     />
diff --git a/apps/web/src/components/steps/steps.tsx b/apps/web/src/components/steps/steps.tsx
index 4b97d0d82..bf7609555 100644
--- a/apps/web/src/components/steps/steps.tsx
+++ b/apps/web/src/components/steps/steps.tsx
@@ -18,7 +18,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
 
   return (
     <div className={cn("inline-flex items-center gap-2.5", className)}>
-      <div className="text-sm font-medium tracking-tight">
+      <div className="font-medium text-sm tracking-tight">
         {t("stepSummary", {
           current: current + 1,
           total,
@@ -33,7 +33,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
               className={cn("h-2 w-2 rounded-full transition-all", {
                 "bg-primary-400": i <= current,
                 "bg-gray-300": i > current,
-                "ring-primary-200 animate-pulse ring-4": i === current,
+                "animate-pulse ring-4 ring-primary-200": i === current,
               })}
             />
           );
diff --git a/apps/web/src/components/user-dropdown.tsx b/apps/web/src/components/user-dropdown.tsx
index 180551b43..587445a63 100644
--- a/apps/web/src/components/user-dropdown.tsx
+++ b/apps/web/src/components/user-dropdown.tsx
@@ -61,7 +61,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
           <div className="grow">
             <div>{user.isGuest ? <Trans i18nKey="guest" /> : user.name}</div>
             {user.email ? (
-              <div className="text-muted-foreground text-xs font-normal">
+              <div className="font-normal text-muted-foreground text-xs">
                 {user.email}
               </div>
             ) : null}
@@ -70,7 +70,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild={true}>
           <Link href="/polls" className="flex items-center gap-x-2 sm:hidden">
-            <ListIcon className="text-muted-foreground size-4" />
+            <ListIcon className="size-4 text-muted-foreground" />
             <Trans i18nKey="polls" defaults="Polls" />
           </Link>
         </DropdownMenuItem>
@@ -80,7 +80,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
               href="/settings/profile"
               className="flex items-center gap-x-2"
             >
-              <UserIcon className="text-muted-foreground size-4" />
+              <UserIcon className="size-4 text-muted-foreground" />
               <Trans i18nKey="profile" defaults="Profile" />
             </Link>
           </DropdownMenuItem>
@@ -90,7 +90,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
             href="/settings/preferences"
             className="flex items-center gap-x-2"
           >
-            <Settings2Icon className="text-muted-foreground size-4" />
+            <Settings2Icon className="size-4 text-muted-foreground" />
             <Trans i18nKey="preferences" defaults="Preferences" />
           </Link>
         </DropdownMenuItem>
@@ -100,7 +100,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
               href="/settings/billing"
               className="flex items-center gap-x-2"
             >
-              <CreditCardIcon className="text-muted-foreground size-4" />
+              <CreditCardIcon className="size-4 text-muted-foreground" />
               <Trans i18nKey="Billing" defaults="Billing" />
             </Link>
           </DropdownMenuItem>
@@ -111,7 +111,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
             href="https://support.rallly.co"
             className="flex items-center gap-x-2"
           >
-            <LifeBuoyIcon className="text-muted-foreground size-4" />
+            <LifeBuoyIcon className="size-4 text-muted-foreground" />
             <Trans i18nKey="support" defaults="Support" />
             <Icon>
               <ArrowUpRight />
@@ -125,7 +125,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
               href="https://support.rallly.co/self-hosting/pricing"
               className="flex items-center gap-x-2"
             >
-              <GemIcon className="text-muted-foreground size-4" />
+              <GemIcon className="size-4 text-muted-foreground" />
               <Trans i18nKey="pricing" defaults="Pricing" />
             </Link>
           </DropdownMenuItem>
@@ -137,7 +137,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
               href="https://feedback.rallly.co"
               className="flex items-center gap-x-2"
             >
-              <MegaphoneIcon className="text-muted-foreground size-4" />
+              <MegaphoneIcon className="size-4 text-muted-foreground" />
               <Trans i18nKey="feedback" defaults="Feedback" />
             </Link>
           </DropdownMenuItem>
@@ -146,13 +146,13 @@ export const UserDropdown = ({ className }: { className?: string }) => {
         <IfGuest>
           <DropdownMenuItem asChild={true}>
             <LoginLink className="flex items-center gap-x-2">
-              <LogInIcon className="text-muted-foreground size-4" />
+              <LogInIcon className="size-4 text-muted-foreground" />
               <Trans i18nKey="login" defaults="login" />
             </LoginLink>
           </DropdownMenuItem>
           <DropdownMenuItem asChild={true}>
             <RegisterLink className="flex items-center gap-x-2">
-              <UserPlusIcon className="text-muted-foreground size-4" />
+              <UserPlusIcon className="size-4 text-muted-foreground" />
               <Trans i18nKey="createAnAccount" defaults="Register" />
             </RegisterLink>
           </DropdownMenuItem>
@@ -164,7 +164,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
             }}
             className="flex items-center gap-x-2"
           >
-            <LogOutIcon className="text-muted-foreground size-4" />
+            <LogOutIcon className="size-4 text-muted-foreground" />
             <Trans i18nKey="logout" />
           </DropdownMenuItem>
         </IfAuthenticated>
diff --git a/apps/web/src/features/licensing/components/license-limit-warning.tsx b/apps/web/src/features/licensing/components/license-limit-warning.tsx
index dd5104eb7..9898bd906 100644
--- a/apps/web/src/features/licensing/components/license-limit-warning.tsx
+++ b/apps/web/src/features/licensing/components/license-limit-warning.tsx
@@ -21,7 +21,7 @@ export async function LicenseLimitWarning() {
   }
 
   return (
-    <div className="bg-muted p-2 text-center text-sm rounded-md m-1 text-muted-foreground">
+    <div className="m-1 rounded-md bg-muted p-2 text-center text-muted-foreground text-sm">
       <Trans
         i18nKey="licenseLimitWarning"
         defaults="You have exceeded the limits of your license. Please <a>upgrade</a>."
diff --git a/apps/web/src/features/poll/components/poll-list.tsx b/apps/web/src/features/poll/components/poll-list.tsx
index 6a0b1d543..2a9852bce 100644
--- a/apps/web/src/features/poll/components/poll-list.tsx
+++ b/apps/web/src/features/poll/components/poll-list.tsx
@@ -24,10 +24,10 @@ export function PollListItem({
 }) {
   return (
     <StackedListItem>
-      <div className="relative -m-4 flex min-w-0 flex-1 items-center gap-2 p-4">
+      <div className="-m-4 relative flex min-w-0 flex-1 items-center gap-2 p-4">
         <PollStatusIcon status={status} showTooltip={false} />
         <Link
-          className="focus:ring-ring min-w-0 text-sm font-medium hover:underline focus-visible:ring-2"
+          className="min-w-0 font-medium text-sm hover:underline focus:ring-ring focus-visible:ring-2"
           href={pollLink}
         >
           <span className="absolute inset-0" />
diff --git a/apps/web/src/features/quick-create/quick-create-widget.tsx b/apps/web/src/features/quick-create/quick-create-widget.tsx
index bc311e9f8..4ae346673 100644
--- a/apps/web/src/features/quick-create/quick-create-widget.tsx
+++ b/apps/web/src/features/quick-create/quick-create-widget.tsx
@@ -16,7 +16,7 @@ export async function QuickCreateWidget() {
   return (
     <div className="space-y-8">
       <div className="space-y-6">
-        <div className="text-primary inline-flex items-center justify-center gap-2 rounded-md font-medium">
+        <div className="inline-flex items-center justify-center gap-2 rounded-md font-medium text-primary">
           <ZapIcon className="size-5" />
           <h2>
             <Trans
@@ -27,7 +27,7 @@ export async function QuickCreateWidget() {
             />
           </h2>
         </div>
-        <p className="text-muted-foreground text-pretty">
+        <p className="text-pretty text-muted-foreground">
           <Trans
             t={t}
             ns="app"
@@ -57,7 +57,7 @@ export async function QuickCreateWidget() {
                     </div>
                     <div className="min-w-0 flex-1">
                       <div className="truncate font-medium">{poll.title}</div>
-                      <div className="text-muted-foreground whitespace-nowrap text-sm">
+                      <div className="whitespace-nowrap text-muted-foreground text-sm">
                         <RelativeDate date={poll.createdAt} />
                       </div>
                     </div>
@@ -94,7 +94,7 @@ export async function QuickCreateWidget() {
             />
           </h3>
         </div>
-        <ul className="text-muted-foreground space-y-2">
+        <ul className="space-y-2 text-muted-foreground">
           <li className="flex items-center gap-2">
             <Icon variant="success" size="lg">
               <CheckIcon />
diff --git a/apps/web/src/features/scheduled-event/components/scheduled-event-list.tsx b/apps/web/src/features/scheduled-event/components/scheduled-event-list.tsx
index 6e13cc48e..5cac5efa3 100644
--- a/apps/web/src/features/scheduled-event/components/scheduled-event-list.tsx
+++ b/apps/web/src/features/scheduled-event/components/scheduled-event-list.tsx
@@ -43,7 +43,7 @@ export function ScheduledEventListItem({
                 format="LL"
               />
             </div>
-            <div className="text-muted-foreground mt-1">
+            <div className="mt-1 text-muted-foreground">
               {allDay ? (
                 <Trans i18nKey="allDay" defaults="All day" />
               ) : (
diff --git a/biome.json b/biome.json
index 680d29665..19fdd588d 100644
--- a/biome.json
+++ b/biome.json
@@ -15,6 +15,15 @@
           "level": "error",
           "fix": "unsafe"
         }
+      },
+      "nursery": {
+        "useSortedClasses": {
+          "options": {
+            "functions": ["cn", "clsx", "cva", "tw"]
+          },
+          "level": "error",
+          "fix": "safe"
+        }
       }
     }
   },
diff --git a/packages/ui/src/accordion.tsx b/packages/ui/src/accordion.tsx
index 24474ada4..3ffef13a8 100644
--- a/packages/ui/src/accordion.tsx
+++ b/packages/ui/src/accordion.tsx
@@ -47,12 +47,12 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       className,
     )}
     {...props}
   >
-    <div className="pb-4 pt-0">{children}</div>
+    <div className="pt-0 pb-4">{children}</div>
   </AccordionPrimitive.Content>
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
diff --git a/packages/ui/src/action-bar.tsx b/packages/ui/src/action-bar.tsx
index d701db8f0..ff588a7bf 100644
--- a/packages/ui/src/action-bar.tsx
+++ b/packages/ui/src/action-bar.tsx
@@ -42,7 +42,7 @@ const ActionBarContainer = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "bg-action-bar text-action-bar-foreground pointer-events-auto z-50 mx-auto inline-flex w-full max-w-2xl items-center gap-4 rounded-xl p-2 shadow-lg",
+        "pointer-events-auto z-50 mx-auto inline-flex w-full max-w-2xl items-center gap-4 rounded-xl bg-action-bar p-2 text-action-bar-foreground shadow-lg",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/alert.tsx b/packages/ui/src/alert.tsx
index e92b74afd..b04065733 100644
--- a/packages/ui/src/alert.tsx
+++ b/packages/ui/src/alert.tsx
@@ -4,13 +4,13 @@ import * as React from "react";
 import { cn } from "./lib/utils";
 
 const alertVariants = cva(
-  "flex sm:flex-row flex-col gap-x-3 gap-y-2 rounded-md border p-4",
+  "flex flex-col gap-x-3 gap-y-2 rounded-md border p-4 sm:flex-row",
   {
     variants: {
       variant: {
         default: "bg-gray-50 text-foreground",
         destructive:
-          "text-destructive bg-rose-50 border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
+          "border-destructive/50 bg-rose-50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
     },
     defaultVariants: {
@@ -33,7 +33,7 @@ const Alert = React.forwardRef<
     {...props}
   >
     {Icon ? (
-      <Icon className="text-muted-foreground -mt-0.5 mb-2 size-5" />
+      <Icon className="-mt-0.5 mb-2 size-5 text-muted-foreground" />
     ) : null}
     <div>{children}</div>
   </div>
@@ -48,7 +48,7 @@ const AlertTitle = React.forwardRef<
   <h5
     ref={ref}
     className={cn(
-      "mb-2 text-sm font-semibold leading-none tracking-tight",
+      "mb-2 font-semibold text-sm leading-none tracking-tight",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/badge.tsx b/packages/ui/src/badge.tsx
index 152b9d908..31a5ccabe 100644
--- a/packages/ui/src/badge.tsx
+++ b/packages/ui/src/badge.tsx
@@ -4,20 +4,20 @@ import type * as React from "react";
 import { cn } from "./lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex group whitespace-nowrap items-center rounded-full justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "group inline-flex items-center justify-center whitespace-nowrap rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         primary: "bg-primary text-primary-50",
-        default: "bg-gray-50 border",
+        default: "border bg-gray-50",
         destructive: "bg-destructive text-destructive-foreground",
         outline: "text-foreground",
         green: "bg-green-600 text-white",
-        secondary: "text-primary bg-primary-50",
+        secondary: "bg-primary-50 text-primary",
       },
       size: {
-        md: "h-6 min-w-5 text-xs px-2",
-        lg: "h-7 text-sm min-w-7 px-2.5",
+        md: "h-6 min-w-5 px-2 text-xs",
+        lg: "h-7 min-w-7 px-2.5 text-sm",
       },
     },
     defaultVariants: {
diff --git a/packages/ui/src/billing-plan.tsx b/packages/ui/src/billing-plan.tsx
index c13d4ff4a..2f0000b94 100644
--- a/packages/ui/src/billing-plan.tsx
+++ b/packages/ui/src/billing-plan.tsx
@@ -40,7 +40,7 @@ export const BillingPlanPrice = ({
 }: React.PropsWithChildren<{ discount?: React.ReactNode }>) => {
   return (
     <div className="flex items-center gap-4">
-      <span className="text-3xl font-bold">{children}</span>
+      <span className="font-bold text-3xl">{children}</span>
     </div>
   );
 };
diff --git a/packages/ui/src/breadcrumb.tsx b/packages/ui/src/breadcrumb.tsx
index d74ff66e8..7258e5e54 100644
--- a/packages/ui/src/breadcrumb.tsx
+++ b/packages/ui/src/breadcrumb.tsx
@@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={cn(
-      "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
       className,
     )}
     {...props}
@@ -50,7 +50,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   );
@@ -65,7 +65,7 @@ const BreadcrumbPage = React.forwardRef<
     ref={ref}
     aria-disabled="true"
     aria-current="page"
-    className={cn("text-foreground font-normal", className)}
+    className={cn("font-normal text-foreground", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 9a2f92db3..ad7bcd4f3 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -9,30 +9,30 @@ import { cn } from "./lib/utils";
 
 const buttonVariants = cva(
   cn(
-    "inline-flex border text-shadow font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border",
+    "inline-flex select-none items-center justify-center whitespace-nowrap border border font-medium text-shadow disabled:pointer-events-none disabled:opacity-50",
     "focus-visible:shadow-none",
   ),
   {
     variants: {
       variant: {
         primary:
-          "focus-visible:ring-offset-1 border-primary bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-white",
+          "border-primary bg-primary text-white hover:bg-primary-500 focus-visible:ring-offset-1 disabled:border-transparent disabled:bg-gray-400",
         destructive:
-          "focus-visible:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90",
-        default: "focus-visible:ring-offset-1 hover:bg-gray-50 bg-white",
+          "border-destructive bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-offset-1 active:bg-destructive",
+        default: "bg-white hover:bg-gray-50 focus-visible:ring-offset-1",
         secondary:
-          "focus-visible:ring-offset-1 border-secondary bg-secondary hover:bg-secondary/80 text-secondary-foreground",
+          "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:ring-offset-1",
         ghost:
-          "border-transparent bg-transparent data-[state=open]:bg-gray-500/20 text-gray-800 hover:bg-gray-500/10 active:bg-gray-500/20",
+          "border-transparent bg-transparent text-gray-800 hover:bg-gray-500/10 active:bg-gray-500/20 data-[state=open]:bg-gray-500/20",
         actionBar:
-          "border-transparent bg-transparent data-[state=open]:bg-gray-500/20 text-gray-800 hover:bg-gray-700 active:bg-gray-700/50",
-        link: "underline-offset-4 border-transparent hover:underline text-primary",
+          "border-transparent bg-transparent text-gray-800 hover:bg-gray-700 active:bg-gray-700/50 data-[state=open]:bg-gray-500/20",
+        link: "border-transparent text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-2.5 gap-x-2 text-sm rounded-md",
-        sm: "h-8 text-sm px-2 gap-x-1.5 rounded-md",
-        lg: "h-12 text-base gap-x-3 px-4 rounded-lg",
-        icon: "size-7 text-sm gap-x-1.5 rounded-md",
+        default: "h-9 gap-x-2 rounded-md px-2.5 text-sm",
+        sm: "h-8 gap-x-1.5 rounded-md px-2 text-sm",
+        lg: "h-12 gap-x-3 rounded-lg px-4 text-base",
+        icon: "size-7 gap-x-1.5 rounded-md text-sm",
         "icon-lg": "size-8 rounded-full",
       },
     },
diff --git a/packages/ui/src/card.tsx b/packages/ui/src/card.tsx
index efa834c59..c390041fb 100644
--- a/packages/ui/src/card.tsx
+++ b/packages/ui/src/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bg-card text-card-foreground overflow-hidden rounded-lg border-x border-y shadow-sm",
+      "overflow-hidden rounded-lg border-x border-y bg-card text-card-foreground shadow-sm",
       className,
     )}
     {...props}
@@ -39,7 +39,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "flex items-center gap-x-2.5 text-base font-semibold",
+      "flex items-center gap-x-2.5 font-semibold text-base",
       className,
     )}
     {...props}
@@ -53,7 +53,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-muted-foreground mt-0.5 text-sm", className)}
+    className={cn("mt-0.5 text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/checkbox.tsx b/packages/ui/src/checkbox.tsx
index e5855eaed..aa72a45f4 100644
--- a/packages/ui/src/checkbox.tsx
+++ b/packages/ui/src/checkbox.tsx
@@ -14,7 +14,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        "data-[state=checked]:bg-primary data-[state=checked]:border-primary-700 data-[state=checked]:active:bg-primary-700 data-[state=indeterminate]:active:bg-primary-700 data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground peer size-5 shrink-0 rounded-md border border-gray-300 focus-visible:outline-none focus-visible:ring-1 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:active:border-gray-300",
+        "peer size-5 shrink-0 rounded-md border border-gray-300 focus-visible:outline-none focus-visible:ring-1 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary-700 data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground data-[state=unchecked]:active:border-gray-300 data-[state=checked]:active:bg-primary-700 data-[state=indeterminate]:active:bg-primary-700",
         className,
       )}
       checked={checked}
diff --git a/packages/ui/src/command.tsx b/packages/ui/src/command.tsx
index 750cb3725..e1f7b4368 100644
--- a/packages/ui/src/command.tsx
+++ b/packages/ui/src/command.tsx
@@ -34,9 +34,9 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         hideCloseButton={true}
         size="xl"
         position="top"
-        className="shadow-huge p-0"
+        className="p-0 shadow-huge"
       >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:p-2 [&_[cmdk-item]_svg]:size-4">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:p-2 [&_[cmdk-item]_svg]:size-4">
           {children}
         </Command>
       </DialogContent>
@@ -58,7 +58,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "placeholder:text-foreground-muted flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-foreground-muted focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -87,7 +87,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="text-muted-foreground py-6 text-center text-sm"
+    className="py-6 text-center text-muted-foreground text-sm"
     {...props}
   />
 ));
@@ -101,7 +101,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-2 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:text-gray-500",
+      "overflow-hidden p-2 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:text-sm",
       className,
     )}
     {...props}
@@ -116,7 +116,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("bg-border -mx-1 h-px", className)}
+    className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
 ));
@@ -161,7 +161,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-muted-foreground text-xs tracking-widest",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/dialog.tsx b/packages/ui/src/dialog.tsx
index 11f876aca..c325df956 100644
--- a/packages/ui/src/dialog.tsx
+++ b/packages/ui/src/dialog.tsx
@@ -26,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "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 bg-gray-900/10",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-gray-900/10 data-[state=closed]:animate-out data-[state=open]:animate-in",
       className,
     )}
     {...props}
@@ -37,18 +37,18 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const dialogContentVariants = cva(
   cn(
     //style
-    "bg-background sm:rounded-lg sm:border shadow-lg p-4 gap-4",
+    "gap-4 bg-background p-4 shadow-lg sm:rounded-lg sm:border",
     // position
-    "fixed z-50 grid w-full top-0 left-1/2 -translate-x-1/2",
+    "-translate-x-1/2 fixed top-0 left-1/2 z-50 grid w-full",
     // animation
-    "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=closed]:slide-out-to-left-1/2",
+    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=closed]:slide-out-to-left-1/2 duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in",
   ),
   {
     variants: {
       position: {
-        top: "sm:top-48 data-[state=closed]:slide-out-to-top-[10%] data-[state=open]:slide-in-from-top-[10%]",
+        top: "data-[state=closed]:slide-out-to-top-[10%] data-[state=open]:slide-in-from-top-[10%] sm:top-48",
         center:
-          "sm:top-[50%] sm:translate-y-[-50%] data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",
+          "data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] sm:top-[50%] sm:translate-y-[-50%]",
       },
       size: {
         sm: "sm:max-w-sm",
@@ -87,7 +87,7 @@ const DialogContent = React.forwardRef<
       >
         {children}
         {!hideCloseButton ? (
-          <DialogClose asChild className="absolute right-4 top-4">
+          <DialogClose asChild className="absolute top-4 right-4">
             <Button size="icon" variant="ghost">
               <Icon>
                 <XIcon />
@@ -131,7 +131,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-base font-semibold leading-none tracking-tight",
+      "font-semibold text-base leading-none tracking-tight",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index e99ef3c16..141947c1c 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -39,7 +39,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "focus:bg-accent data-[state=open]:bg-accent data-[disabled]:opacity-50 text-sm gap-2 flex cursor-default select-none items-center rounded-sm px-2 py-1.5 outline-none",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -59,7 +59,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "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",
+      "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] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
       className,
     )}
     {...props}
@@ -77,7 +77,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "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-[140px] overflow-hidden rounded-md border p-1 shadow-md",
+        "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-[140px] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         className,
       )}
       {...props}
@@ -96,7 +96,7 @@ const DropdownMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "flex items-center gap-x-2.5",
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded px-2 py-1.5 font-medium text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -112,7 +112,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
@@ -138,7 +138,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 font-medium text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -164,7 +164,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
+      "px-2 py-1.5 font-semibold text-sm",
       inset && "pl-8",
       className,
     )}
@@ -179,7 +179,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
 ));
@@ -225,7 +225,7 @@ export const DropdownMenuItemIconLabel = ({
 }) => {
   return (
     <span className="flex items-center gap-2.5">
-      <Icon className="text-muted-foreground size-4" />
+      <Icon className="size-4 text-muted-foreground" />
       {children}
     </span>
   );
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index d7cea8bcd..24e73884e 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -87,7 +87,7 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn("text-sm font-medium", className)}
+      className={cn("font-medium text-sm", className)}
       htmlFor={formItemId}
       {...props}
     />
diff --git a/packages/ui/src/icon.tsx b/packages/ui/src/icon.tsx
index 33f15a066..900c0ae29 100644
--- a/packages/ui/src/icon.tsx
+++ b/packages/ui/src/icon.tsx
@@ -14,10 +14,10 @@ const iconVariants = cva("", {
       primary: "text-primary-600",
     },
     size: {
-      sm: "w-3 h-3",
-      md: "w-4 h-4",
-      lg: "w-5 h-5",
-      xl: "w-7 h-7",
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-5 w-5",
+      xl: "h-7 w-7",
     },
   },
   defaultVariants: {
@@ -40,7 +40,7 @@ export function Icon({
     <Slot
       className={cn(
         iconVariants({ size, variant }),
-        "group-[.bg-primary]:text-primary-50 group-[.bg-destructive]:text-destructive-foreground group shrink-0",
+        "group shrink-0 group-[.bg-destructive]:text-destructive-foreground group-[.bg-primary]:text-primary-50",
         className,
       )}
     >
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index ac7f9d75e..9d30a697c 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -13,15 +13,15 @@ export type InputProps = Omit<
 
 const inputVariants = cva(
   cn(
-    "w-full focus-visible:border-gray-300 focus:ring-ring focus:ring-2",
-    "border-input placeholder:text-muted-foreground h-9 rounded-md border bg-white file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
+    "w-full focus:ring-2 focus:ring-ring focus-visible:border-gray-300",
+    "h-9 rounded-md border border-input bg-white file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
   ),
   {
     variants: {
       size: {
-        sm: "h-7 text-xs px-1",
-        md: "h-9 text-sm px-2",
-        lg: "h-12 text-base px-3",
+        sm: "h-7 px-1 text-xs",
+        md: "h-9 px-2 text-sm",
+        lg: "h-12 px-3 text-base",
       },
       variant: {
         default: "border-primary-400 focus-visible:border-primary-400",
diff --git a/packages/ui/src/label.tsx b/packages/ui/src/label.tsx
index cfe26a411..a273fcba6 100644
--- a/packages/ui/src/label.tsx
+++ b/packages/ui/src/label.tsx
@@ -8,7 +8,7 @@ import * as React from "react";
 import { cn } from "./lib/utils";
 
 const labelVariants = cva(
-  "text-sm text-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "text-foreground text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
diff --git a/packages/ui/src/page-tabs.tsx b/packages/ui/src/page-tabs.tsx
index 370e66c1e..9efc9935c 100644
--- a/packages/ui/src/page-tabs.tsx
+++ b/packages/ui/src/page-tabs.tsx
@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn("-mb-px flex space-x-4 border-b border-gray-200", className)}
+    className={cn("-mb-px flex space-x-4 border-gray-200 border-b", className)}
     {...props}
   />
 ));
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring inline-flex h-9 items-center whitespace-nowrap rounded-none border-b-2 px-1 pb-1 pt-1 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex h-9 items-center whitespace-nowrap rounded-none border-b-2 px-1 pt-1 pb-1 font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       "data-[state=active]:border-indigo-500 data-[state=inactive]:border-transparent data-[state=active]:text-indigo-600 data-[state=inactive]:text-gray-500 data-[state=inactive]:hover:border-gray-300 data-[state=inactive]:hover:text-gray-700",
       className,
     )}
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/popover.tsx b/packages/ui/src/popover.tsx
index 0aabe3dcc..04bfcf552 100644
--- a/packages/ui/src/popover.tsx
+++ b/packages/ui/src/popover.tsx
@@ -20,7 +20,7 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       collisionPadding={12}
       className={cn(
-        "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 shadow-huge z-50 rounded-md border bg-white p-4 outline-none",
+        "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 animate-in rounded-md border bg-white p-4 shadow-huge outline-none",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/progress.tsx b/packages/ui/src/progress.tsx
index 996a4673c..16f305b08 100644
--- a/packages/ui/src/progress.tsx
+++ b/packages/ui/src/progress.tsx
@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      "bg-secondary relative h-1 w-full overflow-hidden rounded-full",
+      "relative h-1 w-full overflow-hidden rounded-full bg-secondary",
       className,
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="bg-gradient-to-r from-purple-500 to-indigo-500 h-full w-full flex-1 transition-all"
+      className="h-full w-full flex-1 bg-gradient-to-r from-purple-500 to-indigo-500 transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/packages/ui/src/radio-group.tsx b/packages/ui/src/radio-group.tsx
index 0ac7c36df..166b7e72f 100644
--- a/packages/ui/src/radio-group.tsx
+++ b/packages/ui/src/radio-group.tsx
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "border-border bg-background text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square size-4 rounded-full border border-border bg-background text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/radio-pills.tsx b/packages/ui/src/radio-pills.tsx
index 4e816d654..f14f31b15 100644
--- a/packages/ui/src/radio-pills.tsx
+++ b/packages/ui/src/radio-pills.tsx
@@ -24,7 +24,7 @@ const RadioPillsItem = React.forwardRef<
   <Primitive.Item
     ref={ref}
     className={cn(
-      "text-muted-foreground data-[state=checked]:text-primary data-[state=checked]:border-primary data-[state=unchecked]:hover:text-foreground h-8 rounded-full border px-3 text-sm font-medium",
+      "h-8 rounded-full border px-3 font-medium text-muted-foreground text-sm data-[state=checked]:border-primary data-[state=checked]:text-primary data-[state=unchecked]:hover:text-foreground",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/select.tsx b/packages/ui/src/select.tsx
index c6b8ff0a1..31ffd066b 100644
--- a/packages/ui/src/select.tsx
+++ b/packages/ui/src/select.tsx
@@ -44,7 +44,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "animate-in relative z-50 max-h-[300px] min-w-[8rem] overflow-hidden rounded-lg border bg-white shadow-md",
+        "relative z-50 max-h-[300px] min-w-[8rem] animate-in overflow-hidden rounded-lg border bg-white shadow-md",
         position === "popper" && "translate-y-1",
         className,
       )}
@@ -72,7 +72,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      "text-muted-foreground px-2 py-1.5 text-xs font-semibold",
+      "px-2 py-1.5 font-semibold text-muted-foreground text-xs",
       className,
     )}
     {...props}
@@ -87,7 +87,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-2 pr-2 pl-8 text-sm outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -110,7 +110,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/separator.tsx b/packages/ui/src/separator.tsx
index 00027f8ca..12d97b782 100644
--- a/packages/ui/src/separator.tsx
+++ b/packages/ui/src/separator.tsx
@@ -18,7 +18,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0",
+        "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className,
       )}
diff --git a/packages/ui/src/sheet.tsx b/packages/ui/src/sheet.tsx
index 76d9279f9..4e71de782 100644
--- a/packages/ui/src/sheet.tsx
+++ b/packages/ui/src/sheet.tsx
@@ -20,7 +20,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "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",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in",
       className,
     )}
     {...props}
@@ -30,16 +30,16 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-200",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-200 data-[state=open]:duration-200",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
         right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
       },
     },
     defaultVariants: {
@@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <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">
+      <SheetPrimitive.Close className="absolute top-4 right-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">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -107,7 +107,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-foreground text-lg font-semibold", className)}
+    className={cn("font-semibold text-foreground text-lg", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/sidebar.tsx b/packages/ui/src/sidebar.tsx
index 589e840b9..7c082d0d8 100644
--- a/packages/ui/src/sidebar.tsx
+++ b/packages/ui/src/sidebar.tsx
@@ -149,7 +149,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
               className,
             )}
             ref={ref}
@@ -189,7 +189,7 @@ const Sidebar = React.forwardRef<
       return (
         <div
           className={cn(
-            "bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
             className,
           )}
           ref={ref}
@@ -206,7 +206,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
             style={
               {
                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -227,7 +227,7 @@ const Sidebar = React.forwardRef<
     return (
       <div
         ref={ref}
-        className="text-sidebar-foreground group peer hidden md:block"
+        className="group peer hidden text-sidebar-foreground md:block"
         data-state={state}
         data-collapsible={state === "collapsed" ? collapsible : ""}
         data-variant={variant}
@@ -260,7 +260,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
           >
             {children}
           </div>
@@ -314,10 +314,10 @@ const SidebarRail = React.forwardRef<
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-2 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex",
         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className,
@@ -336,8 +336,8 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:shadow-sm",
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:shadow-sm",
         className,
       )}
       {...props}
@@ -355,7 +355,7 @@ const SidebarInput = React.forwardRef<
       ref={ref}
       data-sidebar="input"
       className={cn(
-        "bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
         className,
       )}
       {...props}
@@ -402,7 +402,7 @@ const SidebarSeparator = React.forwardRef<
     <Separator
       ref={ref}
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   );
@@ -453,7 +453,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className,
       )}
@@ -474,9 +474,9 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
+        "after:-inset-2 after:absolute after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
         className,
       )}
@@ -526,7 +526,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2.5 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 flex w-full items-center gap-2.5 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -537,7 +537,7 @@ const sidebarMenuButtonVariants = cva(
       size: {
         default: "h-9 text-sm",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+        lg: "group-data-[collapsible=icon]:!p-0 h-12 text-sm",
       },
     },
     defaultVariants: {
@@ -620,15 +620,15 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
+        "after:-inset-2 after:absolute after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=default]/menu-button:top-1.5",
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
         className,
       )}
       {...props}
@@ -645,7 +645,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
@@ -704,7 +704,7 @@ const SidebarMenuSub = React.forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       className,
     )}
@@ -736,7 +736,7 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
diff --git a/packages/ui/src/table.tsx b/packages/ui/src/table.tsx
index 319a518d4..458474a44 100644
--- a/packages/ui/src/table.tsx
+++ b/packages/ui/src/table.tsx
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
       className,
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "hover:bg-muted/50 data-[state=selected]:bg-muted group border-b",
+      "group border-b hover:bg-muted/50 data-[state=selected]:bg-muted",
       className,
     )}
     {...props}
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
       className,
     )}
     {...props}
@@ -102,7 +102,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("text-muted-foreground mt-4 text-sm", className)}
+    className={cn("mt-4 text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/tabs.tsx b/packages/ui/src/tabs.tsx
index 9d12fb387..9abf3a615 100644
--- a/packages/ui/src/tabs.tsx
+++ b/packages/ui/src/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-md border",
+      "inline-flex h-9 items-center justify-center rounded-md border bg-muted text-muted-foreground",
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex h-full items-center justify-center whitespace-nowrap rounded px-3 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 data-[state=active]:ring-gray-200",
+      "inline-flex h-full items-center justify-center whitespace-nowrap rounded px-3 font-medium text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-1 data-[state=active]:ring-gray-200",
       className,
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/text-field.tsx b/packages/ui/src/text-field.tsx
index 173e51006..07d3c3c91 100644
--- a/packages/ui/src/text-field.tsx
+++ b/packages/ui/src/text-field.tsx
@@ -10,15 +10,15 @@ import { cn } from "./lib/utils";
 
 const inputVariants = cva(
   cn(
-    "focus:border-primary-400 focus-visible:ring-primary-100 focus-visible:ring-2",
-    "border-input placeholder:text-muted-foreground h-9 rounded border bg-gray-50 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
+    "focus:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-100",
+    "h-9 rounded border border-input bg-gray-50 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
   ),
   {
     variants: {
       size: {
-        sm: "h-7 text-xs px-1",
-        md: "h-9 text-sm px-2",
-        lg: "h-12 text-lg px-3",
+        sm: "h-7 px-1 text-xs",
+        md: "h-9 px-2 text-sm",
+        lg: "h-12 px-3 text-lg",
       },
     },
     defaultVariants: {
@@ -67,8 +67,8 @@ const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
         }}
         className={cn(
           "flex items-center",
-          "text-field group",
-          "focus-within:border-primary-400 focus-within:ring-primary-100 focus-within:ring-2",
+          "group text-field",
+          "focus-within:border-primary-400 focus-within:ring-2 focus-within:ring-primary-100",
           inputVariants({ size }),
           "p-0",
           className,
diff --git a/packages/ui/src/textarea.tsx b/packages/ui/src/textarea.tsx
index b6d7cf0a1..299b3d98c 100644
--- a/packages/ui/src/textarea.tsx
+++ b/packages/ui/src/textarea.tsx
@@ -9,8 +9,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "border-input placeholder:text-muted-foreground flex min-h-[80px] rounded-md border bg-white px-2 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50",
-          "focus-visible:ring-offset-input-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
+          "flex min-h-[80px] rounded-md border border-input bg-white px-2 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-input-background",
           "focus-visible:border-primary-400 focus-visible:ring-primary-100",
           className,
         )}
diff --git a/packages/ui/src/tile.tsx b/packages/ui/src/tile.tsx
index f3d6add0e..6bcdf8a00 100644
--- a/packages/ui/src/tile.tsx
+++ b/packages/ui/src/tile.tsx
@@ -18,7 +18,7 @@ const Tile = React.forwardRef<
     <Comp
       ref={ref}
       className={cn(
-        "text-card-foreground relative bg-background flex flex-col justify-end rounded-xl border p-3 shadow-sm transition-shadow hover:bg-gray-50 active:shadow-none",
+        "relative flex flex-col justify-end rounded-xl border bg-background p-3 text-card-foreground shadow-sm transition-shadow hover:bg-gray-50 active:shadow-none",
         className,
       )}
       {...props}
@@ -56,7 +56,7 @@ const TileDescription = React.forwardRef<
   <p
     ref={ref}
     className={cn(
-      "text-muted-foreground pointer-events-none absolute right-3 top-3 text-sm",
+      "pointer-events-none absolute top-3 right-3 text-muted-foreground text-sm",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/toast.tsx b/packages/ui/src/toast.tsx
index 7203998d2..3e3e1a762 100644
--- a/packages/ui/src/toast.tsx
+++ b/packages/ui/src/toast.tsx
@@ -15,7 +15,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-4 sm:right-4 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-4 sm:bottom-4 sm:flex-col md:max-w-[420px]",
       className,
     )}
     {...props}
@@ -24,11 +24,11 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-lg p-5 shadow-huge transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-lg p-5 shadow-huge transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none",
   {
     variants: {
       variant: {
-        default: "bg-background/75 backdrop-blur-lg text-foreground",
+        default: "bg-background/75 text-foreground backdrop-blur-lg",
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
@@ -61,7 +61,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground",
       className,
     )}
     {...props}
@@ -76,7 +76,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50",
       className,
     )}
     toast-close=""
@@ -93,7 +93,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("text-sm font-semibold", className)}
+    className={cn("font-semibold text-sm", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/tooltip.tsx b/packages/ui/src/tooltip.tsx
index 7695cf50a..44b601cab 100644
--- a/packages/ui/src/tooltip.tsx
+++ b/packages/ui/src/tooltip.tsx
@@ -22,7 +22,7 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     side={side}
     className={cn(
-      "z-50 overflow-hidden rounded-md bg-gray-800 px-2 py-1.5 text-sm text-gray-50 shadow-sm",
+      "z-50 overflow-hidden rounded-md bg-gray-800 px-2 py-1.5 text-gray-50 text-sm shadow-sm",
       className,
     )}
     {...props}