diff --git a/src/common/ui/components/atoms/avatar.tsx b/src/common/ui/components/atoms/avatar.tsx
index 0ae6c674..b8ba3ba6 100644
--- a/src/common/ui/components/atoms/avatar.tsx
+++ b/src/common/ui/components/atoms/avatar.tsx
@@ -35,7 +35,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
       className,
     )}
     {...props}
diff --git a/src/common/ui/components/atoms/card.tsx b/src/common/ui/components/atoms/card.tsx
index 9fd54a51..f25b505b 100644
--- a/src/common/ui/components/atoms/card.tsx
+++ b/src/common/ui/components/atoms/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+      className={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
       {...props}
     />
   ),
@@ -35,7 +35,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
 ));
 CardDescription.displayName = "CardDescription";
 
diff --git a/src/common/ui/components/atoms/checkbox.tsx b/src/common/ui/components/atoms/checkbox.tsx
index 9601f733..aedc626d 100644
--- a/src/common/ui/components/atoms/checkbox.tsx
+++ b/src/common/ui/components/atoms/checkbox.tsx
@@ -13,10 +13,10 @@ export const Checkbox = forwardRef<
     ref={ref}
     className={cn(
       "peer",
-      "h-4.5 w-4.5 shrink-0 rounded-sm border border-[var(--primary-600)] ring-offset-background",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "h-4.5 w-4.5 ring-offset-background shrink-0 rounded-sm border border-[var(--primary-600)]",
+      "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2",
       "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-[var(--primary-600)] data-[state=checked]:text-primary-foreground",
+      "data-[state=checked]:text-primary-foreground data-[state=checked]:bg-[var(--primary-600)]",
       className,
     )}
     {...props}
diff --git a/src/common/ui/components/atoms/input.tsx b/src/common/ui/components/atoms/input.tsx
index 6421a115..0184c103 100644
--- a/src/common/ui/components/atoms/input.tsx
+++ b/src/common/ui/components/atoms/input.tsx
@@ -18,7 +18,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <input
           type={type}
           className={cn(
-            "flex h-10 w-full rounded-lg border border-neutral-300 bg-background px-3 py-2 text-sm shadow-[0px_0px_0px_1px_#00000038_inset,0px_-1px_1px_0px_#00000038_inset] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm shadow-[0px_0px_0px_1px_#00000038_inset,0px_-1px_1px_0px_#00000038_inset] file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             error && errorClasses,
             className,
           )}
diff --git a/src/common/ui/components/atoms/select.tsx b/src/common/ui/components/atoms/select.tsx
index ad9478e4..ea9b24c9 100644
--- a/src/common/ui/components/atoms/select.tsx
+++ b/src/common/ui/components/atoms/select.tsx
@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between gap-2 rounded-md bg-background py-2 pl-3 pr-2 text-sm shadow-[0px_0px_0px_1px_#00000038_inset,0px_-1px_1px_0px_#00000038_inset] ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between gap-2 rounded-md py-2 pl-3 pr-2 text-sm shadow-[0px_0px_0px_1px_#00000038_inset,0px_-1px_1px_0px_#00000038_inset] focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
@@ -141,7 +141,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));
diff --git a/src/common/ui/components/atoms/separator.tsx b/src/common/ui/components/atoms/separator.tsx
index b2777274..afb435c6 100644
--- a/src/common/ui/components/atoms/separator.tsx
+++ b/src/common/ui/components/atoms/separator.tsx
@@ -13,7 +13,7 @@ export const Separator = forwardRef<
     decorative={decorative}
     orientation={orientation}
     className={cn(
-      "shrink-0 bg-border",
+      "bg-border shrink-0",
       orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className,
     )}
diff --git a/src/common/ui/components/atoms/skeleton.tsx b/src/common/ui/components/atoms/skeleton.tsx
index 2a21e5d4..b1d74244 100644
--- a/src/common/ui/components/atoms/skeleton.tsx
+++ b/src/common/ui/components/atoms/skeleton.tsx
@@ -1,7 +1,7 @@
 import { cn } from "../../utils";
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+  return <div className={cn("bg-muted animate-pulse rounded-md", className)} {...props} />;
 }
 
 export { Skeleton };
diff --git a/src/common/ui/components/atoms/switch.tsx b/src/common/ui/components/atoms/switch.tsx
index 9bc3b7e0..41a5ebdb 100644
--- a/src/common/ui/components/atoms/switch.tsx
+++ b/src/common/ui/components/atoms/switch.tsx
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
@@ -18,7 +18,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+        "bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/common/ui/components/atoms/textarea.tsx b/src/common/ui/components/atoms/textarea.tsx
index a19a3fae..cab23ee9 100644
--- a/src/common/ui/components/atoms/textarea.tsx
+++ b/src/common/ui/components/atoms/textarea.tsx
@@ -20,9 +20,9 @@ export const Textarea = forwardRef<
       <textarea
         className={cn(
           "flex min-h-[80px] w-full px-3 py-2.5",
-          "rounded-md border border-neutral-300 bg-background ring-offset-background",
-          "text-sm placeholder:text-muted-foreground",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "bg-background ring-offset-background rounded-md border border-neutral-300",
+          "placeholder:text-muted-foreground text-sm",
+          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2",
           "focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
diff --git a/src/common/ui/components/atoms/toast.tsx b/src/common/ui/components/atoms/toast.tsx
index 4031b8f5..a1c68f36 100644
--- a/src/common/ui/components/atoms/toast.tsx
+++ b/src/common/ui/components/atoms/toast.tsx
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium 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]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "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",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-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]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "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",
       className,
     )}
     toast-close=""
diff --git a/src/common/ui/components/dropdown-menu.tsx b/src/common/ui/components/dropdown-menu.tsx
index 243859d1..523e3d10 100644
--- a/src/common/ui/components/dropdown-menu.tsx
+++ b/src/common/ui/components/dropdown-menu.tsx
@@ -26,7 +26,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       inset && "pl-8",
       className,
     )}
@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
@@ -62,7 +62,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
@@ -119,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -154,7 +154,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));
diff --git a/src/common/ui/components/molecules/command.tsx b/src/common/ui/components/molecules/command.tsx
index 48d132a5..71ba39bb 100644
--- a/src/common/ui/components/molecules/command.tsx
+++ b/src/common/ui/components/molecules/command.tsx
@@ -14,7 +14,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
       className,
     )}
     {...props}
@@ -28,7 +28,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <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]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <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]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -45,7 +45,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -84,7 +84,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
       className,
     )}
     {...props}
@@ -99,7 +99,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn("bg-border -mx-1 h-px", className)}
     {...props}
   />
 ));
@@ -112,7 +112,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -124,7 +124,7 @@ CommandItem.displayName = CommandPrimitive.Item.displayName;
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   );
diff --git a/src/common/ui/components/molecules/dialog.tsx b/src/common/ui/components/molecules/dialog.tsx
index f780434a..7e461e22 100644
--- a/src/common/ui/components/molecules/dialog.tsx
+++ b/src/common/ui/components/molecules/dialog.tsx
@@ -59,7 +59,7 @@ const DialogContent = forwardRef<
           className={cn(
             "sm:min-w-auto fixed left-[50%] top-[50%] z-50 flex h-full w-full min-w-full flex-col",
             "sm:h-auto sm:max-w-xl sm:rounded-lg items-stretch",
-            "translate-x-[-50%] translate-y-[-50%] bg-background shadow-lg",
+            "bg-background translate-x-[-50%] translate-y-[-50%] shadow-lg",
             "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",
@@ -78,9 +78,9 @@ const DialogContent = forwardRef<
                 size="icon"
                 onClick={onBackClick}
                 className={cn(
-                  "mr-auto h-auto w-auto 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-accent",
+                  "ring-offset-background mr-auto h-auto w-auto rounded-sm opacity-70 transition-opacity",
+                  "focus:ring-ring hover:opacity-100 focus:outline-none focus:ring-2",
+                  "data-[state=open]:bg-accent focus:ring-offset-2 disabled:pointer-events-none",
                   "data-[state=open]:text-muted-foreground",
                 )}
               >
@@ -92,9 +92,9 @@ const DialogContent = forwardRef<
             <DialogPrimitive.Close
               onClick={onCloseClick}
               className={cn(
-                "z-100 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-accent",
+                "z-100 ring-offset-background rounded-sm opacity-70 transition-opacity",
+                "focus:ring-ring hover:opacity-100 focus:outline-none focus:ring-2",
+                "data-[state=open]:bg-accent focus:ring-offset-2 disabled:pointer-events-none",
                 "data-[state=open]:text-muted-foreground",
               )}
             >
diff --git a/src/common/ui/components/molecules/form.tsx b/src/common/ui/components/molecules/form.tsx
index d32f84e9..657f44d9 100644
--- a/src/common/ui/components/molecules/form.tsx
+++ b/src/common/ui/components/molecules/form.tsx
@@ -125,7 +125,7 @@ const FormDescription = forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("flex justify-between text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground flex justify-between text-sm", className)}
       {...props}
     />
   );
@@ -145,7 +145,7 @@ const FormMessage = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLPa
       <p
         ref={ref}
         id={formMessageId}
-        className={cn("text-sm font-medium text-destructive", className)}
+        className={cn("text-destructive text-sm font-medium", className)}
         {...props}
       >
         {body}
diff --git a/src/common/ui/components/molecules/radio-group.tsx b/src/common/ui/components/molecules/radio-group.tsx
index 2ce5ce17..7b3fba9d 100644
--- a/src/common/ui/components/molecules/radio-group.tsx
+++ b/src/common/ui/components/molecules/radio-group.tsx
@@ -39,8 +39,8 @@ export const RadioGroupItem = forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "border-1 rounded-md text-current ring-offset-background",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "border-1 ring-offset-background rounded-md text-current",
+        "focus-visible:ring-ring focus:outline-none focus-visible:ring-2",
         "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 
         {
diff --git a/src/common/ui/components/popover.tsx b/src/common/ui/components/popover.tsx
index 268c7292..7d7ebf72 100644
--- a/src/common/ui/components/popover.tsx
+++ b/src/common/ui/components/popover.tsx
@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
diff --git a/src/common/ui/components/progress.tsx b/src/common/ui/components/progress.tsx
index 4b8b63c7..b290ee57 100644
--- a/src/common/ui/components/progress.tsx
+++ b/src/common/ui/components/progress.tsx
@@ -14,7 +14,7 @@ const Progress = React.forwardRef<
 >(({ className, value, bgColor = "#ECC113", ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+    className={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
     {...props}
   >
     <ProgressPrimitive.Indicator
diff --git a/src/common/ui/components/scroll-area.tsx b/src/common/ui/components/scroll-area.tsx
index a31c8994..d885da50 100644
--- a/src/common/ui/components/scroll-area.tsx
+++ b/src/common/ui/components/scroll-area.tsx
@@ -40,7 +40,7 @@ const ScrollBar = forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 
diff --git a/src/common/ui/components/table.tsx b/src/common/ui/components/table.tsx
index 95a281dd..46507c50 100644
--- a/src/common/ui/components/table.tsx
+++ b/src/common/ui/components/table.tsx
@@ -33,7 +33,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
 ));
@@ -44,7 +44,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
     <tr
       ref={ref}
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
         className,
       )}
       {...props}
@@ -60,7 +60,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -84,7 +84,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  <caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
 ));
 TableCaption.displayName = "TableCaption";
 
diff --git a/src/common/ui/components/tooltip.tsx b/src/common/ui/components/tooltip.tsx
index 74deeed5..442e81fd 100644
--- a/src/common/ui/components/tooltip.tsx
+++ b/src/common/ui/components/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
diff --git a/src/common/ui/form-fields/nearinput.tsx b/src/common/ui/form-fields/nearinput.tsx
index 4e083e14..da9296f5 100644
--- a/src/common/ui/form-fields/nearinput.tsx
+++ b/src/common/ui/form-fields/nearinput.tsx
@@ -28,7 +28,7 @@ export const NearInputField = forwardRef<HTMLInputElement, NearInputFieldProps>(
           <div un-flex="~" un-items="center" un-gap="1">
             {label && <FormLabel className="font-500 text-sm">{label}</FormLabel>}
 
-            {props.required && <span className="line-height-none text-xl text-destructive">*</span>}
+            {props.required && <span className="line-height-none text-destructive text-xl">*</span>}
           </div>
 
           {labelExtension ??
diff --git a/src/common/ui/form-fields/text.tsx b/src/common/ui/form-fields/text.tsx
index b39f99b0..1d407e99 100644
--- a/src/common/ui/form-fields/text.tsx
+++ b/src/common/ui/form-fields/text.tsx
@@ -45,7 +45,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             <div un-flex="~" un-items="center" un-gap="1">
               {label && <FormLabel className="text-sm">{label}</FormLabel>}
 
-              {required && <span className="line-height-none text-xl text-destructive">*</span>}
+              {required && <span className="line-height-none text-destructive text-xl">*</span>}
             </div>
 
             {labelExtension ? (
diff --git a/src/common/ui/form-fields/textarea.tsx b/src/common/ui/form-fields/textarea.tsx
index 9a0dfb9c..6074751e 100644
--- a/src/common/ui/form-fields/textarea.tsx
+++ b/src/common/ui/form-fields/textarea.tsx
@@ -30,7 +30,7 @@ export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>
           <div un-flex="~" un-items="center" un-gap="1">
             {label && <FormLabel className="font-500 text-sm">{label}</FormLabel>}
 
-            {props.required && <span className="line-height-none text-xl text-destructive">*</span>}
+            {props.required && <span className="line-height-none text-destructive text-xl">*</span>}
           </div>
 
           {labelExtension ??
diff --git a/src/modules/cart/components/CartWidget.tsx b/src/modules/cart/components/CartWidget.tsx
index d5cb53d1..75862a21 100644
--- a/src/modules/cart/components/CartWidget.tsx
+++ b/src/modules/cart/components/CartWidget.tsx
@@ -37,7 +37,7 @@ export const CartWidget: React.FC<CartWidgetProps> = () => {
           </CardHeader>
 
           <CardContent className="flex flex-col gap-4">
-            <p className="text-sm text-muted-foreground">Matching Round 2: NDC Grassroots</p>
+            <p className="text-muted-foreground text-sm">Matching Round 2: NDC Grassroots</p>
 
             <div className="flex items-center justify-between">
               <span>NEAR</span>
@@ -67,7 +67,7 @@ export const CartWidget: React.FC<CartWidgetProps> = () => {
           </CardHeader>
 
           <CardContent className="flex flex-col gap-4">
-            <p className="text-sm text-muted-foreground">Direct Donation</p>
+            <p className="text-muted-foreground text-sm">Direct Donation</p>
 
             <div className="flex items-center justify-between">
               <span>NEAR</span>
diff --git a/src/modules/project/components/ProjectCard.tsx b/src/modules/project/components/ProjectCard.tsx
index 9be0c13e..4b8a17e6 100644
--- a/src/modules/project/components/ProjectCard.tsx
+++ b/src/modules/project/components/ProjectCard.tsx
@@ -51,7 +51,7 @@ export const ProjectCard = ({ projectId, allowDonate = true, payoutDetails }: Pr
         <div
           className={cn(
             "transition-duration-300 max-w-105 mx-auto flex h-full w-full flex-col",
-            "overflow-hidden rounded-md bg-card transition-all",
+            "bg-card overflow-hidden rounded-md transition-all",
           )}
           style={{ boxShadow: rootBoxShadow }}
           data-testid="project-card"
diff --git a/src/modules/token/components/TokenBalance.tsx b/src/modules/token/components/TokenBalance.tsx
index 48787af9..4dcb3650 100644
--- a/src/modules/token/components/TokenBalance.tsx
+++ b/src/modules/token/components/TokenBalance.tsx
@@ -15,7 +15,7 @@ export const TokenBalance: React.FC<TokenBalanceProps> = ({ tokenId, classNames
   return !token ? (
     <>
       {tokenError ? (
-        <span className={cn("prose text-sm text-destructive", classNames?.amount)}>
+        <span className={cn("prose text-destructive text-sm", classNames?.amount)}>
           {tokenError.message}
         </span>
       ) : (