diff --git a/.github/workflows/guardrails.yml b/.github/workflows/guardrails.yml
index e6b903d1a..5cf95179b 100644
--- a/.github/workflows/guardrails.yml
+++ b/.github/workflows/guardrails.yml
@@ -26,15 +26,13 @@ jobs:
         run: |
           # List of patterns to block
           BLOCKED_FILES=(
-            "AGENTS.md"
-            "CLAUDE.md"
             "SYSTEM_PROMPT.md"
             "agent-instructions.md"
             "prompt.md"
             ".ai-notes"
             ".agent"
           )
-          
+
           for pattern in "${BLOCKED_FILES[@]}"; do
             if find . -name "$pattern" -type f 2>/dev/null | grep -q .; then
               echo "❌ Found blocked file: $pattern"
@@ -55,7 +53,7 @@ jobs:
             "openhands"
             "opencode"
           )
-          
+
           for pattern in "${SENSITIVE_PATTERNS[@]}"; do
             if grep -r "$pattern" . --include="*.ts" --include="*.js" --include="*.py" --include="*.md" 2>/dev/null | grep -v "node_modules" | grep -v ".git" | grep -q .; then
               echo "⚠️ Found reference: $pattern"
diff --git a/.github/workflows/security-codeql.yml b/.github/workflows/security-codeql.yml
index 01232a69c..2d8db3f65 100644
--- a/.github/workflows/security-codeql.yml
+++ b/.github/workflows/security-codeql.yml
@@ -24,7 +24,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ["javascript", "python"]
+        language: ["javascript"]
     steps:
       - name: Checkout
         uses: actions/checkout@v6
diff --git a/ARCHITECTURAL_GUARDRAILS.md b/ARCHITECTURAL_GUARDRAILS.md
index 99311f02d..ac156479c 100644
--- a/ARCHITECTURAL_GUARDRAILS.md
+++ b/ARCHITECTURAL_GUARDRAILS.md
@@ -1,25 +1,25 @@
 # Architectural Guardrails — Folio
 
-> **Purpose**: Define non-negotiable architectural constraints for the Folio codebase.
-> These guardrails protect the system's integrity as it evolves.
+> **Purpose**: Define non-negotiable architectural constraints for the Folio
+> codebase. These guardrails protect the system's integrity as it evolves.
 
 ---
 
 ## Tech Stack
 
-| Layer | Technology | Version |
-|-------|-----------|---------|
-| **Desktop Shell** | Tauri 2.x | `@tauri-apps/cli ^2.10.0` |
-| **Backend (Rust)** | Rust 2021 Edition | Workspace: `apps/tauri`, `apps/server`, `crates/*` |
-| **Frontend** | React + TypeScript | `^5.9.3` |
-| **Build Tool** | Vite | — |
-| **Styling** | Tailwind CSS | — |
-| **State Management** | Zustand | — |
-| **Charts** | Recharts | — |
-| **Database** | SQLite (via Diesel 2.2) | Bundled |
-| **Package Manager** | pnpm (monorepo) | Workspaces |
-| **Testing** | Vitest + Playwright (E2E) | — |
-| **Linting** | ESLint 9 + Prettier | — |
+| Layer                | Technology                | Version                                            |
+| -------------------- | ------------------------- | -------------------------------------------------- |
+| **Desktop Shell**    | Tauri 2.x                 | `@tauri-apps/cli ^2.10.0`                          |
+| **Backend (Rust)**   | Rust 2021 Edition         | Workspace: `apps/tauri`, `apps/server`, `crates/*` |
+| **Frontend**         | React + TypeScript        | `^5.9.3`                                           |
+| **Build Tool**       | Vite                      | —                                                  |
+| **Styling**          | Tailwind CSS              | —                                                  |
+| **State Management** | Zustand                   | —                                                  |
+| **Charts**           | Recharts                  | —                                                  |
+| **Database**         | SQLite (via Diesel 2.2)   | Bundled                                            |
+| **Package Manager**  | pnpm (monorepo)           | Workspaces                                         |
+| **Testing**          | Vitest + Playwright (E2E) | —                                                  |
+| **Linting**          | ESLint 9 + Prettier       | —                                                  |
 
 ---
 
@@ -43,10 +43,13 @@ apps/
 
 1. **No `unsafe` code** — `unsafe_code = "forbid"` in workspace lints.
 2. **Clippy warnings are errors** — `all = "warn"` in workspace lints.
-3. **Diesel for ORM** — All database access goes through Diesel, never raw SQL except migrations.
+3. **Diesel for ORM** — All database access goes through Diesel, never raw SQL
+   except migrations.
 4. **SQLite only** — No external database dependencies. Data is local-first.
-5. **Error handling** — Use `thiserror` for library errors, `anyhow` for application errors.
-6. **Async runtime** — Tokio is the only async runtime. No mixing with other runtimes.
+5. **Error handling** — Use `thiserror` for library errors, `anyhow` for
+   application errors.
+6. **Async runtime** — Tokio is the only async runtime. No mixing with other
+   runtimes.
 7. **HTTP client** — `reqwest` with `rustls-tls` only. No native TLS.
 
 ---
@@ -54,37 +57,51 @@ apps/
 ## Frontend Guardrails
 
 1. **TypeScript strict mode** — No `any` types. Use proper type definitions.
-2. **Component architecture** — Feature-based organization under `apps/frontend/src/features/`.
-3. **State management** — Zustand for global state. No Redux, no Context for data state.
-4. **Data fetching** — TanStack Query (React Query) for server state. No manual fetch calls.
-5. **Styling** — Tailwind CSS utility classes only. No CSS modules, no styled-components.
+2. **Component architecture** — Feature-based organization under
+   `apps/frontend/src/features/`.
+3. **State management** — Zustand for global state. No Redux, no Context for
+   data state.
+4. **Data fetching** — TanStack Query (React Query) for server state. No manual
+   fetch calls.
+5. **Styling** — Tailwind CSS utility classes only. No CSS modules, no
+   styled-components.
 6. **No direct DOM manipulation** — Use React refs when absolutely necessary.
 
 ---
 
 ## Tauri-Specific Guardrails
 
-1. **IPC boundaries** — Frontend communicates with Rust only through Tauri commands (`#[tauri::command]`).
-2. **Capabilities model** — Use Tauri v2 capabilities for permission scoping. No blanket permissions.
-3. **No direct filesystem access from frontend** — All file I/O goes through Rust commands.
-4. **Secrets in Rust only** — API keys, encryption keys, and credentials never touch the frontend.
+1. **IPC boundaries** — Frontend communicates with Rust only through Tauri
+   commands (`#[tauri::command]`).
+2. **Capabilities model** — Use Tauri v2 capabilities for permission scoping. No
+   blanket permissions.
+3. **No direct filesystem access from frontend** — All file I/O goes through
+   Rust commands.
+4. **Secrets in Rust only** — API keys, encryption keys, and credentials never
+   touch the frontend.
 
 ---
 
 ## Data & Security Guardrails
 
-1. **Local-first architecture** — All user data stored locally in SQLite. No cloud storage of financial data.
-2. **Encryption at rest** — Sensitive data encrypted using `chacha20poly1305` + `x25519-dalek`.
-3. **No analytics or tracking** — No third-party analytics, crash reporting, or telemetry.
-4. **Secret scanning** — Pre-commit hooks scan for API keys, tokens, and credentials.
-5. **Environment variables** — All configuration via `.env` files. Never commit `.env`.
+1. **Local-first architecture** — All user data stored locally in SQLite. No
+   cloud storage of financial data.
+2. **Encryption at rest** — Sensitive data encrypted using `chacha20poly1305` +
+   `x25519-dalek`.
+3. **No analytics or tracking** — No third-party analytics, crash reporting, or
+   telemetry.
+4. **Secret scanning** — Pre-commit hooks scan for API keys, tokens, and
+   credentials.
+5. **Environment variables** — All configuration via `.env` files. Never commit
+   `.env`.
 
 ---
 
 ## Monorepo Guardrails
 
 1. **pnpm workspaces** — All packages managed through `pnpm-workspace.yaml`.
-2. **Internal crate paths** — Rust crates referenced via `path = "crates/*"` in `Cargo.toml`.
+2. **Internal crate paths** — Rust crates referenced via `path = "crates/*"` in
+   `Cargo.toml`.
 3. **Shared TypeScript config** — `tsconfig.base.json` extended by all packages.
 4. **Linting consistency** — ESLint config shared via `eslint.base.config.js`.
 
@@ -94,7 +111,8 @@ apps/
 
 1. **Unit tests** — Co-located with source files (`*.test.ts`, `*_test.rs`).
 2. **E2E tests** — Playwright for full application flows in `e2e/`.
-3. **No test-only dependencies in production** — Dev dependencies only in `devDependencies`.
+3. **No test-only dependencies in production** — Dev dependencies only in
+   `devDependencies`.
 4. **Coverage threshold** — Maintain minimum 80% coverage on critical paths.
 
 ---
@@ -103,8 +121,10 @@ apps/
 
 1. **Bundle size budget** — Frontend bundle must not exceed 500KB gzipped.
 2. **Database queries** — All queries must use indexes. No N+1 queries.
-3. **Market data caching** — Market data cached locally, never fetched synchronously on UI thread.
-4. **Lazy loading** — Features loaded on demand. No eager loading of non-critical modules.
+3. **Market data caching** — Market data cached locally, never fetched
+   synchronously on UI thread.
+4. **Lazy loading** — Features loaded on demand. No eager loading of
+   non-critical modules.
 
 ---
 
@@ -117,8 +137,10 @@ See [ADR Template](docs/adr/TEMPLATE.md) for format.
 
 ## Diagrams
 
-Architecture diagrams are maintained in `docs/architecture/diagrams/` using Mermaid syntax.
-See [System Context Diagram](docs/architecture/diagrams/system-context.mmd) for the C4 overview.
+Architecture diagrams are maintained in `docs/architecture/diagrams/` using
+Mermaid syntax. See
+[System Context Diagram](docs/architecture/diagrams/system-context.mmd) for the
+C4 overview.
 
 ---
 
@@ -133,4 +155,4 @@ These guardrails are enforced through:
 
 ---
 
-*Last updated: April 2026 | Version: 3.0.0*
+_Last updated: April 2026 | Version: 3.0.0_
diff --git a/addons/goal-progress-tracker/src/components/help-popover.tsx b/addons/goal-progress-tracker/src/components/help-popover.tsx
index 7c448d13d..9ee6ef3ed 100644
--- a/addons/goal-progress-tracker/src/components/help-popover.tsx
+++ b/addons/goal-progress-tracker/src/components/help-popover.tsx
@@ -13,7 +13,7 @@ function HelpPopover() {
       <PopoverContent className="w-96" align="start">
         <div className="space-y-4">
           <div className="space-y-2">
-            <h4 className="font-medium leading-none">How It Works</h4>
+            <h4 className="leading-none font-medium">How It Works</h4>
             <div className="text-muted-foreground space-y-2 text-sm">
               <p>• Select a goal from your saved goals or track a custom target</p>
               <p>• Each dot represents your chosen step amount towards your investment target</p>
diff --git a/addons/goal-progress-tracker/src/components/investment-calendar.tsx b/addons/goal-progress-tracker/src/components/investment-calendar.tsx
index c7351a399..858d798fa 100644
--- a/addons/goal-progress-tracker/src/components/investment-calendar.tsx
+++ b/addons/goal-progress-tracker/src/components/investment-calendar.tsx
@@ -116,7 +116,7 @@ function Tooltip({
       <div className="bg-popover border-border w-64 rounded-md border p-3 text-sm shadow-md">
         <div className="space-y-3">
           <div className="space-y-1">
-            <h4 className="font-medium leading-none">Step {data.stepIndex + 1}</h4>
+            <h4 className="leading-none font-medium">Step {data.stepIndex + 1}</h4>
             <p className="text-muted-foreground">
               Target: {formatCurrency(data.stepAmount, isBalanceHidden)}
             </p>
@@ -135,7 +135,7 @@ function Tooltip({
           </div>
         </div>
         {/* Tooltip arrow */}
-        <div className="border-t-border absolute left-1/2 top-full h-0 w-0 -translate-x-1/2 transform border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent"></div>
+        <div className="border-t-border absolute top-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-t-4 border-r-4 border-l-4 border-r-transparent border-l-transparent"></div>
       </div>
     </div>
   );
diff --git a/addons/investment-fees-tracker/src/components/account-breakdown.tsx b/addons/investment-fees-tracker/src/components/account-breakdown.tsx
index aab86ddb3..7240e9a28 100644
--- a/addons/investment-fees-tracker/src/components/account-breakdown.tsx
+++ b/addons/investment-fees-tracker/src/components/account-breakdown.tsx
@@ -23,7 +23,7 @@ function EmptyPlaceholder({
           {icon}
         </div>
         <h2 className="mt-2 text-xl font-semibold">{title}</h2>
-        <p className="text-muted-foreground mt-2 text-center text-sm font-normal leading-6">
+        <p className="text-muted-foreground mt-2 text-center text-sm leading-6 font-normal">
           {description}
         </p>
       </div>
@@ -138,7 +138,7 @@ export function AccountBreakdown({
                           {percentage.toFixed(1)}% of total fees
                         </div>
                         {/* Tooltip arrow */}
-                        <div className="border-t-border absolute left-1/2 top-full h-0 w-0 -translate-x-1/2 transform border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent"></div>
+                        <div className="border-t-border absolute top-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-t-4 border-r-4 border-l-4 border-r-transparent border-l-transparent"></div>
                       </div>
                     </div>
                   </div>
diff --git a/addons/investment-fees-tracker/src/components/fee-categories-chart.tsx b/addons/investment-fees-tracker/src/components/fee-categories-chart.tsx
index dbafa56b6..cc207fe50 100644
--- a/addons/investment-fees-tracker/src/components/fee-categories-chart.tsx
+++ b/addons/investment-fees-tracker/src/components/fee-categories-chart.tsx
@@ -73,7 +73,7 @@ export const FeeCategoriesChart = ({
     <Card className="overflow-hidden backdrop-blur-sm">
       <CardHeader>
         <div className="flex items-center justify-between">
-          <CardTitle className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+          <CardTitle className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
             Fee Categories
           </CardTitle>
         </div>
diff --git a/addons/investment-fees-tracker/src/components/fee-history-chart.tsx b/addons/investment-fees-tracker/src/components/fee-history-chart.tsx
index 72c30b18a..5a4f92b26 100644
--- a/addons/investment-fees-tracker/src/components/fee-history-chart.tsx
+++ b/addons/investment-fees-tracker/src/components/fee-history-chart.tsx
@@ -74,7 +74,7 @@ export function FeeHistoryChart({
         <CardTitle className="text-xl">Fee History</CardTitle>
         <CardDescription>{periodDescription}</CardDescription>
       </CardHeader>
-      <CardContent className="flex h-full flex-col px-4 pb-6 pt-0 sm:px-6">
+      <CardContent className="flex h-full flex-col px-4 pt-0 pb-6 sm:px-6">
         {chartData.length === 0 ? (
           <EmptyPlaceholder
             className="mx-auto flex h-[300px] max-w-[420px] items-center justify-center"
@@ -127,7 +127,7 @@ export function FeeHistoryChart({
                       return (
                         <>
                           <div
-                            className="border-border bg-(--color-bg) h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                            className="border-border h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)"
                             style={
                               {
                                 "--color-bg": entry.color,
diff --git a/addons/investment-fees-tracker/src/components/top-fee-sources.tsx b/addons/investment-fees-tracker/src/components/top-fee-sources.tsx
index 73be98f61..58ef016d8 100644
--- a/addons/investment-fees-tracker/src/components/top-fee-sources.tsx
+++ b/addons/investment-fees-tracker/src/components/top-fee-sources.tsx
@@ -24,7 +24,7 @@ function EmptyPlaceholder({
           {icon}
         </div>
         <h2 className="mt-2 text-xl font-semibold">{title}</h2>
-        <p className="text-muted-foreground mt-2 text-center text-sm font-normal leading-6">
+        <p className="text-muted-foreground mt-2 text-center text-sm leading-6 font-normal">
           {description}
         </p>
       </div>
@@ -138,7 +138,7 @@ export function TopFeeSources({ feeAnalytics, currency, isBalanceHidden }: TopFe
                           {percentage.toFixed(1)}% of total fees
                         </div>
                         {/* Tooltip arrow */}
-                        <div className="border-t-border absolute left-1/2 top-full h-0 w-0 -translate-x-1/2 transform border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent"></div>
+                        <div className="border-t-border absolute top-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-t-4 border-r-4 border-l-4 border-r-transparent border-l-transparent"></div>
                       </div>
                     </div>
                   </div>
diff --git a/addons/swingfolio-addon/src/components/distribution-charts.tsx b/addons/swingfolio-addon/src/components/distribution-charts.tsx
index 9b5f37415..955a18e0b 100644
--- a/addons/swingfolio-addon/src/components/distribution-charts.tsx
+++ b/addons/swingfolio-addon/src/components/distribution-charts.tsx
@@ -100,7 +100,7 @@ export function DistributionCharts({ distribution, currency }: DistributionChart
                         return (
                           <>
                             <div
-                              className="border-border bg-(--color-bg) h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                              className="border-border h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)"
                               style={
                                 {
                                   "--color-bg": entry.color,
@@ -181,7 +181,7 @@ export function DistributionCharts({ distribution, currency }: DistributionChart
                         return (
                           <>
                             <div
-                              className="border-border bg-(--color-bg) h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                              className="border-border h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)"
                               style={
                                 {
                                   "--color-bg": entry.color,
diff --git a/addons/swingfolio-addon/src/components/equity-curve-chart.tsx b/addons/swingfolio-addon/src/components/equity-curve-chart.tsx
index 0d07926f2..9f9a4e56e 100644
--- a/addons/swingfolio-addon/src/components/equity-curve-chart.tsx
+++ b/addons/swingfolio-addon/src/components/equity-curve-chart.tsx
@@ -99,7 +99,7 @@ export function EquityCurveChart({
                   return (
                     <>
                       <div
-                        className="border-border bg-(--color-bg) h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                        className="border-border h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)"
                         style={
                           {
                             "--color-bg": entry.color,
diff --git a/addons/swingfolio-addon/src/pages/dashboard-page.tsx b/addons/swingfolio-addon/src/pages/dashboard-page.tsx
index 8c8f20810..f5cc8e597 100644
--- a/addons/swingfolio-addon/src/pages/dashboard-page.tsx
+++ b/addons/swingfolio-addon/src/pages/dashboard-page.tsx
@@ -199,7 +199,7 @@ export default function DashboardPage({ ctx }: DashboardPageProps) {
             <Card
               className={`${metrics.totalPL >= 0 ? "border-success/10 bg-success/10" : "border-destructive/10 bg-destructive/10"}`}
             >
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3 pt-4">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pt-4 pb-3">
                 <CardTitle className="text-sm font-medium">P/L</CardTitle>
                 <GainAmount
                   className="text-xl font-bold sm:text-2xl"
@@ -332,7 +332,7 @@ export default function DashboardPage({ ctx }: DashboardPageProps) {
                       {getChartPeriodDisplay(selectedPeriod).description}
                     </p>
                   </div>
-                  <div className="bg-secondary text-muted-foreground self-start whitespace-nowrap rounded-full px-2 py-1 text-xs sm:self-auto">
+                  <div className="bg-secondary text-muted-foreground self-start rounded-full px-2 py-1 text-xs whitespace-nowrap sm:self-auto">
                     {selectedPeriod} → {getChartPeriodDisplay(selectedPeriod).type}
                   </div>
                 </div>
diff --git a/apps/frontend/src/components/account-selector-mobile.tsx b/apps/frontend/src/components/account-selector-mobile.tsx
index ed1345249..024942201 100644
--- a/apps/frontend/src/components/account-selector-mobile.tsx
+++ b/apps/frontend/src/components/account-selector-mobile.tsx
@@ -148,7 +148,7 @@ export const AccountSelectorMobile = forwardRef<HTMLButtonElement, AccountSelect
             {!iconOnly && "Add account"}
           </Button>
         </SheetTrigger>
-        <SheetContent side="bottom" className="rounded-t-4xl mx-1 h-[80vh] p-0">
+        <SheetContent side="bottom" className="mx-1 h-[80vh] rounded-t-4xl p-0">
           <SheetHeader className="border-border border-b px-6 py-4">
             <SheetTitle>Select Account</SheetTitle>
             <SheetDescription>Choose an account to add to the comparison</SheetDescription>
diff --git a/apps/frontend/src/components/account-selector.tsx b/apps/frontend/src/components/account-selector.tsx
index 02016aba3..fb58c78a0 100644
--- a/apps/frontend/src/components/account-selector.tsx
+++ b/apps/frontend/src/components/account-selector.tsx
@@ -351,7 +351,7 @@ export const AccountSelector = forwardRef<HTMLButtonElement, AccountSelectorProp
               role="combobox"
               aria-expanded={open}
               className={cn(
-                "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
                 className,
               )}
             >
diff --git a/apps/frontend/src/components/action-palette.tsx b/apps/frontend/src/components/action-palette.tsx
index e704326ce..b9c88bced 100644
--- a/apps/frontend/src/components/action-palette.tsx
+++ b/apps/frontend/src/components/action-palette.tsx
@@ -65,7 +65,7 @@ export function ActionPalette({
         side={side}
         sideOffset={8}
         className={cn(
-          "w-auto min-w-[260px] max-w-[320px] p-0",
+          "w-auto max-w-[320px] min-w-[260px] p-0",
           "rounded-2xl",
           "border-border/50 border dark:border-white/10",
           "bg-card backdrop-blur-xl",
@@ -74,7 +74,7 @@ export function ActionPalette({
       >
         {/* Header - only show if title provided */}
         {title && (
-          <div className="flex items-center justify-between px-5 pb-3 pt-5">
+          <div className="flex items-center justify-between px-5 pt-5 pb-3">
             <h3 className="text-foreground text-lg font-bold">{title}</h3>
             <button
               onClick={handleClose}
@@ -97,7 +97,7 @@ export function ActionPalette({
           {groups.map((group, groupIndex) => (
             <div key={groupIndex}>
               {group.title && (
-                <div className="text-muted-foreground px-2 py-1.5 text-xs font-medium uppercase tracking-wider">
+                <div className="text-muted-foreground px-2 py-1.5 text-xs font-medium tracking-wider uppercase">
                   {group.title}
                 </div>
               )}
diff --git a/apps/frontend/src/components/allocation-breadcrumb.tsx b/apps/frontend/src/components/allocation-breadcrumb.tsx
index a99721c38..11b3fc031 100644
--- a/apps/frontend/src/components/allocation-breadcrumb.tsx
+++ b/apps/frontend/src/components/allocation-breadcrumb.tsx
@@ -28,7 +28,7 @@ export const AllocationBreadcrumb: React.FC<AllocationBreadcrumbProps> = ({
     <nav className={cn("flex items-center gap-1 text-sm", className)}>
       <button
         onClick={() => onNavigate(0)}
-        className="text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors"
+        className="text-muted-foreground hover:text-foreground font-medium tracking-wider uppercase transition-colors"
       >
         {rootLabel}
       </button>
diff --git a/apps/frontend/src/components/app-launcher.tsx b/apps/frontend/src/components/app-launcher.tsx
index d245292c6..2be25af62 100644
--- a/apps/frontend/src/components/app-launcher.tsx
+++ b/apps/frontend/src/components/app-launcher.tsx
@@ -749,7 +749,7 @@ export function AppLauncher() {
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetContent
           side="bottom"
-          className="mx-auto flex h-[85vh] w-full max-w-screen-sm flex-col overflow-hidden rounded-t-3xl border-none px-0 pb-6 pt-4"
+          className="mx-auto flex h-[85vh] w-full max-w-screen-sm flex-col overflow-hidden rounded-t-3xl border-none px-0 pt-4 pb-6"
         >
           <SheetHeader className="px-6">
             <SheetTitle>Quick launch</SheetTitle>
@@ -758,7 +758,7 @@ export function AppLauncher() {
             className={cn(
               "flex flex-1 flex-col bg-transparent",
               "[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:font-medium",
-              "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2",
+              "[&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
               "[&_[cmdk-input-wrapper]]:px-5 [&_[cmdk-input]]:h-14 [&_[cmdk-input]]:text-base",
               "[&_[cmdk-item]]:px-4 [&_[cmdk-item]]:py-4 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
               "[&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5",
diff --git a/apps/frontend/src/components/benchmark-symbol-selector-mobile.tsx b/apps/frontend/src/components/benchmark-symbol-selector-mobile.tsx
index b2e7bf7d6..d3a25a47a 100644
--- a/apps/frontend/src/components/benchmark-symbol-selector-mobile.tsx
+++ b/apps/frontend/src/components/benchmark-symbol-selector-mobile.tsx
@@ -187,7 +187,7 @@ export function BenchmarkSymbolSelectorMobile({
           {!iconOnly && "Add Benchmark"}
         </Button>
       </SheetTrigger>
-      <SheetContent side="bottom" className="rounded-t-4xl mx-1 h-[85vh] p-0">
+      <SheetContent side="bottom" className="mx-1 h-[85vh] rounded-t-4xl p-0">
         <SheetHeader className="border-border border-b px-6 py-4">
           <SheetTitle>Select Benchmark</SheetTitle>
           <SheetDescription>Choose a benchmark or search for any symbol</SheetDescription>
@@ -197,13 +197,13 @@ export function BenchmarkSymbolSelectorMobile({
           {/* Search Input */}
           <div className="border-border border-b px-6 py-3">
             <div className="relative">
-              <Icons.Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+              <Icons.Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
               <input
                 type="text"
                 placeholder="Search benchmarks or any symbol..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="bg-background border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-10 w-full rounded-md border px-3 py-2 pl-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                className="bg-background border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-10 w-full rounded-md border px-3 py-2 pl-9 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
               />
             </div>
           </div>
diff --git a/apps/frontend/src/components/classification/classification-sheet.tsx b/apps/frontend/src/components/classification/classification-sheet.tsx
index 4b791f4cc..2e362a283 100644
--- a/apps/frontend/src/components/classification/classification-sheet.tsx
+++ b/apps/frontend/src/components/classification/classification-sheet.tsx
@@ -78,7 +78,7 @@ export function ClassificationSheet({
         </SheetHeader>
 
         <div className="min-h-0 flex-1 overflow-y-auto pr-1">
-          <div className="space-y-8 pb-8 pt-4">
+          <div className="space-y-8 pt-4 pb-8">
             {/* Loading State */}
             {isLoading && <ClassificationSkeleton />}
 
diff --git a/apps/frontend/src/components/classification/multi-select-taxonomy.tsx b/apps/frontend/src/components/classification/multi-select-taxonomy.tsx
index 69c620e79..22bf50dc9 100644
--- a/apps/frontend/src/components/classification/multi-select-taxonomy.tsx
+++ b/apps/frontend/src/components/classification/multi-select-taxonomy.tsx
@@ -284,7 +284,7 @@ export function MultiSelectTaxonomy({
                         className="h-8 pr-6 text-sm"
                         placeholder="100"
                       />
-                      <span className="text-muted-foreground pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-sm">
+                      <span className="text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm">
                         %
                       </span>
                     </div>
diff --git a/apps/frontend/src/components/font-selector.tsx b/apps/frontend/src/components/font-selector.tsx
index 8f83f9235..590b3576a 100644
--- a/apps/frontend/src/components/font-selector.tsx
+++ b/apps/frontend/src/components/font-selector.tsx
@@ -44,7 +44,7 @@ export function FontSelector({ value, onChange, className }: FontSelectorProps)
           </div>
           <div className="text-xs font-medium sm:text-sm">{font.label}</div>
           {value === font.value && (
-            <div className="bg-primary absolute right-2 top-2 h-1.5 w-1.5 rounded-full" />
+            <div className="bg-primary absolute top-2 right-2 h-1.5 w-1.5 rounded-full" />
           )}
         </button>
       ))}
diff --git a/apps/frontend/src/components/liquid-glass.tsx b/apps/frontend/src/components/liquid-glass.tsx
index 1a32be097..5fdbfcf53 100644
--- a/apps/frontend/src/components/liquid-glass.tsx
+++ b/apps/frontend/src/components/liquid-glass.tsx
@@ -53,7 +53,7 @@ export function LiquidGlass({
       style={{ ...style }}
     >
       <div className="relative z-10">{children}</div>
-      <div className="z-5 pointer-events-none absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent" />
+      <div className="pointer-events-none absolute inset-0 z-5 bg-gradient-to-br from-white/10 via-transparent to-transparent" />
     </div>
   );
 }
diff --git a/apps/frontend/src/components/mobile-actions-menu.tsx b/apps/frontend/src/components/mobile-actions-menu.tsx
index 92f59886d..e207a4470 100644
--- a/apps/frontend/src/components/mobile-actions-menu.tsx
+++ b/apps/frontend/src/components/mobile-actions-menu.tsx
@@ -38,7 +38,7 @@ export function MobileActionsMenu({
           <Icons.MoreVertical className="h-4 w-4" />
         </Button>
       </SheetTrigger>
-      <SheetContent side="bottom" className="rounded-t-4xl mx-1 p-0">
+      <SheetContent side="bottom" className="mx-1 rounded-t-4xl p-0">
         <SheetHeader className="border-border border-b px-6 py-4">
           <SheetTitle>{title}</SheetTitle>
           <SheetDescription>{description}</SheetDescription>
@@ -53,7 +53,7 @@ export function MobileActionsMenu({
                   action.onClick();
                   onOpenChange(false);
                 }}
-                className="hover:bg-accent active:bg-accent/80 focus:ring-primary flex items-center gap-4 rounded-lg border p-4 text-left transition-colors focus:outline-none focus:ring-2"
+                className="hover:bg-accent active:bg-accent/80 focus:ring-primary flex items-center gap-4 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
               >
                 <div className="bg-primary/10 flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full">
                   <IconComponent className="text-primary h-5 w-5" />
diff --git a/apps/frontend/src/components/mobile-loading-indicator.tsx b/apps/frontend/src/components/mobile-loading-indicator.tsx
index c367da5e0..8c1e79a7a 100644
--- a/apps/frontend/src/components/mobile-loading-indicator.tsx
+++ b/apps/frontend/src/components/mobile-loading-indicator.tsx
@@ -8,7 +8,7 @@ export function MobileLoadingIndicator() {
   }
 
   return (
-    <div className="bg-primary/10 z-100 fixed inset-x-0 top-0 h-[3px] overflow-hidden">
+    <div className="bg-primary/10 fixed inset-x-0 top-0 z-100 h-[3px] overflow-hidden">
       {/* Smooth indeterminate progress strip */}
       <div
         className="bg-primary h-full w-2/5 rounded-full"
diff --git a/apps/frontend/src/components/page/swipable-page.tsx b/apps/frontend/src/components/page/swipable-page.tsx
index 349ce9712..30445ef97 100644
--- a/apps/frontend/src/components/page/swipable-page.tsx
+++ b/apps/frontend/src/components/page/swipable-page.tsx
@@ -49,7 +49,7 @@ function NavigationPills({
             onClick={() => onViewChange(view.value)}
             className={cn(
               "relative flex cursor-pointer items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-colors duration-200",
-              "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
               isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground/80",
             )}
             aria-current={isActive ? "page" : undefined}
@@ -102,7 +102,7 @@ function MobileNavigation({
             onClick={() => onViewChange(item.value)}
             className={cn(
               "relative flex cursor-pointer items-center justify-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors duration-200",
-              "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
               isActive ? "text-foreground" : "text-muted-foreground",
             )}
             aria-label={item.label}
@@ -229,7 +229,7 @@ export function SwipablePage({
           /* Desktop: Navigation at top center + content below */
           <div className="hidden h-full flex-col md:flex">
             {/* Header with Navigation and Actions */}
-            <div className="flex shrink-0 items-center justify-between gap-4 px-2 pb-3 pt-4 lg:px-4">
+            <div className="flex shrink-0 items-center justify-between gap-4 px-2 pt-4 pb-3 lg:px-4">
               <div className="flex items-center gap-3">
                 {title && <h1 className="text-muted-foreground text-sm font-medium">{title}</h1>}
                 <NavigationPills
diff --git a/apps/frontend/src/components/page/swipable-routes-page.tsx b/apps/frontend/src/components/page/swipable-routes-page.tsx
index 956629c95..5e14ca443 100644
--- a/apps/frontend/src/components/page/swipable-routes-page.tsx
+++ b/apps/frontend/src/components/page/swipable-routes-page.tsx
@@ -189,7 +189,7 @@ export function SwipableRoutesPage({
                   {isActive ? (
                     /* Current View Label */
                     <div
-                      className="bg-muted/80 text-foreground whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium shadow-sm backdrop-blur-sm transition-all duration-300"
+                      className="bg-muted/80 text-foreground rounded-full px-4 py-1.5 text-sm font-medium whitespace-nowrap shadow-sm backdrop-blur-sm transition-all duration-300"
                       role="status"
                       aria-live="polite"
                     >
@@ -200,7 +200,7 @@ export function SwipableRoutesPage({
                     <button
                       type="button"
                       onClick={() => handleNavigate(route.path)}
-                      className="focus-visible:ring-ring bg-foreground/20 hover:bg-foreground/40 size-2 flex-shrink-0 rounded-full transition-all duration-300 hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                      className="focus-visible:ring-ring bg-foreground/20 hover:bg-foreground/40 size-2 flex-shrink-0 rounded-full transition-all duration-300 hover:scale-110 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                       aria-label={`Go to ${route.label}`}
                     />
                   )}
diff --git a/apps/frontend/src/components/symbol-selector-mobile.tsx b/apps/frontend/src/components/symbol-selector-mobile.tsx
index ad8dc1107..432f3c89b 100644
--- a/apps/frontend/src/components/symbol-selector-mobile.tsx
+++ b/apps/frontend/src/components/symbol-selector-mobile.tsx
@@ -175,7 +175,7 @@ export const SymbolSelectorMobile = forwardRef<HTMLButtonElement, SymbolSelector
               <Icons.Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
             </Button>
           </SheetTrigger>
-          <SheetContent side="bottom" className="rounded-t-4xl mx-1 h-[85vh] p-0">
+          <SheetContent side="bottom" className="mx-1 h-[85vh] rounded-t-4xl p-0">
             {showCustomAssetForm ? (
               <>
                 {/* Custom Asset Form Header */}
@@ -291,13 +291,13 @@ export const SymbolSelectorMobile = forwardRef<HTMLButtonElement, SymbolSelector
                   {/* Search Input */}
                   <div className="border-border border-b px-6 py-4">
                     <div className="relative">
-                      <Icons.Search className="text-muted-foreground absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2" />
+                      <Icons.Search className="text-muted-foreground absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2" />
                       <input
                         type="text"
                         placeholder="Search symbols..."
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
-                        className="bg-background border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-14 w-full rounded-md border px-4 py-3 pl-12 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                        className="bg-background border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-14 w-full rounded-md border px-4 py-3 pl-12 text-base focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                         autoFocus
                       />
                     </div>
diff --git a/apps/frontend/src/components/ticker-search.tsx b/apps/frontend/src/components/ticker-search.tsx
index 3cea90d9e..1ab6c1365 100644
--- a/apps/frontend/src/components/ticker-search.tsx
+++ b/apps/frontend/src/components/ticker-search.tsx
@@ -514,7 +514,7 @@ const TickerSearchInput = forwardRef<HTMLButtonElement, SearchProps>(
           <PopoverContent
             side="bottom"
             align="start"
-            className="w-(--radix-popover-trigger-width) h-auto min-w-[280px] p-0"
+            className="h-auto w-(--radix-popover-trigger-width) min-w-[280px] p-0"
             onOpenAutoFocus={handleOpenAutoFocus}
             onCloseAutoFocus={handleCloseAutoFocus}
           >
diff --git a/apps/frontend/src/components/update-dialog.tsx b/apps/frontend/src/components/update-dialog.tsx
index 723edd6e2..42cb63bdd 100644
--- a/apps/frontend/src/components/update-dialog.tsx
+++ b/apps/frontend/src/components/update-dialog.tsx
@@ -117,10 +117,10 @@ export function UpdateDialog() {
         {/* Scrollable content area */}
         <div className="flex-1 overflow-y-auto">
           {/* Header */}
-          <div className="relative px-6 pb-4 pt-6">
+          <div className="relative px-6 pt-6 pb-4">
             <button
               onClick={handleClose}
-              className="bg-secondary/50 text-muted-foreground hover:bg-secondary hover:text-foreground absolute right-4 top-4 rounded-full p-2 transition-all duration-200 hover:scale-105"
+              className="bg-secondary/50 text-muted-foreground hover:bg-secondary hover:text-foreground absolute top-4 right-4 rounded-full p-2 transition-all duration-200 hover:scale-105"
               aria-label="Close dialog"
             >
               <Icons.Close className="h-4 w-4" />
@@ -136,14 +136,14 @@ export function UpdateDialog() {
 
             {/* Title */}
             <div className="mb-3 space-y-3">
-              <h2 className="text-foreground text-balance text-2xl font-bold">
+              <h2 className="text-foreground text-2xl font-bold text-balance">
                 New Update Available
               </h2>
             </div>
 
             {/* Description */}
             {updateInfo.notes && (
-              <p className="text-muted-foreground text-pretty text-sm leading-relaxed">
+              <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
                 {updateInfo.notes}
               </p>
             )}
diff --git a/apps/frontend/src/features/ai-assistant/components/attachment.tsx b/apps/frontend/src/features/ai-assistant/components/attachment.tsx
index abcd0b5a1..67330d729 100644
--- a/apps/frontend/src/features/ai-assistant/components/attachment.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/attachment.tsx
@@ -87,7 +87,7 @@ const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
       >
         {children}
       </DialogTrigger>
-      <DialogContent className="aui-attachment-preview-dialog-content [&>button]:bg-foreground/60 [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive [&>button]:ring-0! p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100">
+      <DialogContent className="aui-attachment-preview-dialog-content [&>button]:bg-foreground/60 [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0!">
         <DialogTitle className="aui-sr-only sr-only">Image Attachment Preview</DialogTitle>
         <div className="aui-attachment-preview bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden">
           <AttachmentPreview src={src} />
@@ -171,7 +171,7 @@ const AttachmentRemove: FC = () => {
     <AttachmentPrimitive.Remove asChild>
       <TooltipIconButton
         tooltip="Remove file"
-        className="aui-attachment-tile-remove text-muted-foreground hover:[&_svg]:text-destructive hover:bg-white! absolute right-1.5 top-1.5 size-3.5 rounded-full bg-white opacity-100 shadow-sm [&_svg]:text-black"
+        className="aui-attachment-tile-remove text-muted-foreground hover:[&_svg]:text-destructive absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white opacity-100 shadow-sm hover:bg-white! [&_svg]:text-black"
         side="top"
       >
         <Icons.Close className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
@@ -190,7 +190,7 @@ export const UserMessageAttachments: FC = () => {
 
 export const ComposerAttachments: FC = () => {
   return (
-    <div className="aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pb-1 pt-0.5 empty:hidden">
+    <div className="aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1 empty:hidden">
       <ComposerPrimitive.Attachments components={{ Attachment: AttachmentUI }} />
     </div>
   );
diff --git a/apps/frontend/src/features/ai-assistant/components/chat-shell.tsx b/apps/frontend/src/features/ai-assistant/components/chat-shell.tsx
index 921227cbc..a4e8d1351 100644
--- a/apps/frontend/src/features/ai-assistant/components/chat-shell.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/chat-shell.tsx
@@ -94,7 +94,7 @@ function MobileSidebar() {
       </SheetTrigger>
       <SheetContent
         side="left"
-        className="flex w-[280px] flex-col gap-0 px-0 pb-[max(env(safe-area-inset-bottom),0.75rem)] pt-[max(env(safe-area-inset-top),0.75rem)]"
+        className="flex w-[280px] flex-col gap-0 px-0 pt-[max(env(safe-area-inset-top),0.75rem)] pb-[max(env(safe-area-inset-bottom),0.75rem)]"
       >
         <SheetHeader className="sr-only">
           <SheetTitle>Conversations</SheetTitle>
diff --git a/apps/frontend/src/features/ai-assistant/components/markdown-text.tsx b/apps/frontend/src/features/ai-assistant/components/markdown-text.tsx
index 2ba303112..4c272e925 100644
--- a/apps/frontend/src/features/ai-assistant/components/markdown-text.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/markdown-text.tsx
@@ -113,7 +113,7 @@ const customComponents = memoizeMarkdownComponents({
   pre: ({ className, ...props }) => (
     <pre
       className={cn(
-        "aui-md-pre not-prose overflow-x-auto rounded-b-lg rounded-t-none bg-black p-4 text-sm text-white",
+        "aui-md-pre not-prose overflow-x-auto rounded-t-none rounded-b-lg bg-black p-4 text-sm text-white",
         className,
       )}
       {...props}
@@ -150,7 +150,7 @@ const customComponents = memoizeMarkdownComponents({
   th: ({ className, ...props }) => (
     <th
       className={cn(
-        "aui-md-th bg-muted whitespace-nowrap px-3 py-2 text-left text-xs font-semibold first:rounded-tl-lg last:rounded-tr-lg",
+        "aui-md-th bg-muted px-3 py-2 text-left text-xs font-semibold whitespace-nowrap first:rounded-tl-lg last:rounded-tr-lg",
         className,
       )}
       {...props}
@@ -159,7 +159,7 @@ const customComponents = memoizeMarkdownComponents({
   td: ({ className, ...props }) => (
     <td
       className={cn(
-        "aui-md-td whitespace-nowrap border-b border-l px-3 py-2 text-left text-sm last:border-r",
+        "aui-md-td border-b border-l px-3 py-2 text-left text-sm whitespace-nowrap last:border-r",
         className,
       )}
       {...props}
diff --git a/apps/frontend/src/features/ai-assistant/components/provider-settings-card.tsx b/apps/frontend/src/features/ai-assistant/components/provider-settings-card.tsx
index 96173d55e..b1d2aed7d 100644
--- a/apps/frontend/src/features/ai-assistant/components/provider-settings-card.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/provider-settings-card.tsx
@@ -368,7 +368,7 @@ export function ProviderSettingsCard({
                           type="button"
                           variant="ghost"
                           size="icon"
-                          className="absolute right-0 top-0 h-full w-9 hover:bg-transparent"
+                          className="absolute top-0 right-0 h-full w-9 hover:bg-transparent"
                           onClick={handleRevealApiKey}
                           disabled={isLoadingKey}
                           aria-label={showApiKey ? "Hide API key" : "Show API key"}
diff --git a/apps/frontend/src/features/ai-assistant/components/reasoning.tsx b/apps/frontend/src/features/ai-assistant/components/reasoning.tsx
index 0cb9c8a16..be33bdeca 100644
--- a/apps/frontend/src/features/ai-assistant/components/reasoning.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/reasoning.tsx
@@ -32,7 +32,7 @@ const Shimmer = memo(({ children, duration = 2 }: { children: string; duration?:
       animate={{ backgroundPosition: "0% center" }}
       initial={{ backgroundPosition: "100% center" }}
       transition={{ duration, ease: "linear", repeat: Infinity }}
-      className="relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent [background-repeat:no-repeat,padding-box]"
+      className="relative inline-block bg-[length:250%_100%,auto] bg-clip-text [background-repeat:no-repeat,padding-box] text-transparent"
       style={
         {
           "--spread": `${spread}px`,
diff --git a/apps/frontend/src/features/ai-assistant/components/thinking-toggle.tsx b/apps/frontend/src/features/ai-assistant/components/thinking-toggle.tsx
index 22ba4fbbe..9f79fe5df 100644
--- a/apps/frontend/src/features/ai-assistant/components/thinking-toggle.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/thinking-toggle.tsx
@@ -22,7 +22,7 @@ export const ThinkingToggle: FC = () => {
         <Badge
           variant={thinkingEnabled ? "default" : "outline"}
           className={cn(
-            "h-5 cursor-pointer select-none gap-1 px-1.5 text-[10px] font-normal transition-colors",
+            "h-5 cursor-pointer gap-1 px-1.5 text-[10px] font-normal transition-colors select-none",
             thinkingEnabled
               ? "bg-primary/90 hover:bg-primary"
               : "text-muted-foreground hover:bg-muted hover:text-foreground",
diff --git a/apps/frontend/src/features/ai-assistant/components/thread-list.tsx b/apps/frontend/src/features/ai-assistant/components/thread-list.tsx
index 7f7d18869..5279cbefd 100644
--- a/apps/frontend/src/features/ai-assistant/components/thread-list.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/thread-list.tsx
@@ -125,19 +125,19 @@ interface ThreadSearchInputProps {
 const ThreadSearchInput: FC<ThreadSearchInputProps> = ({ value, onChange }) => {
   return (
     <div className="relative px-1">
-      <Icons.Search className="text-muted-foreground absolute left-3 top-1/2 size-4 -translate-y-1/2" />
+      <Icons.Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
       <Input
         type="text"
         placeholder="Search threads..."
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="h-8 pl-8 pr-8 text-sm"
+        className="h-8 pr-8 pl-8 text-sm"
       />
       {value && (
         <button
           type="button"
           onClick={() => onChange("")}
-          className="text-muted-foreground hover:text-foreground absolute right-3 top-1/2 -translate-y-1/2"
+          className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
           aria-label="Clear search"
         >
           <Icons.Close className="size-4" />
@@ -353,7 +353,7 @@ const ThreadListItemCustom: FC<ThreadListItemCustomProps> = ({
 }) => {
   return (
     <div
-      className={`aui-thread-list-item hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring group relative rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2 ${
+      className={`aui-thread-list-item hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring group relative rounded-lg transition-all focus-visible:ring-2 focus-visible:outline-none ${
         isActive ? "bg-muted" : ""
       }`}
       data-active={isActive || undefined}
diff --git a/apps/frontend/src/features/ai-assistant/components/thread-sidebar.tsx b/apps/frontend/src/features/ai-assistant/components/thread-sidebar.tsx
index 6f1c82996..1e2447a2d 100644
--- a/apps/frontend/src/features/ai-assistant/components/thread-sidebar.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/thread-sidebar.tsx
@@ -267,7 +267,7 @@ export function ThreadSidebar({
       {/* Search */}
       <div className="border-b p-2">
         <div className="relative">
-          <Icons.Search className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
+          <Icons.Search className="text-muted-foreground absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2" />
           <Input
             type="search"
             placeholder="Search conversations..."
diff --git a/apps/frontend/src/features/ai-assistant/components/thread.tsx b/apps/frontend/src/features/ai-assistant/components/thread.tsx
index a0e64df10..d5dc83768 100644
--- a/apps/frontend/src/features/ai-assistant/components/thread.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/thread.tsx
@@ -52,7 +52,7 @@ export const Thread: FC<ThreadProps> = ({ composerActions }) => {
               AssistantMessage,
             }}
           />
-          <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer bg-background max-w-(--thread-max-width) sticky bottom-[calc(var(--mobile-nav-ui-height)+max(var(--mobile-nav-gap),env(safe-area-inset-bottom)))] z-10 mx-auto mt-auto flex w-full flex-col gap-4 overflow-visible rounded-t-3xl pb-4 md:bottom-0 md:pb-6">
+          <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer bg-background sticky bottom-[calc(var(--mobile-nav-ui-height)+max(var(--mobile-nav-gap),env(safe-area-inset-bottom)))] z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl pb-4 md:bottom-0 md:pb-6">
             <ThreadScrollToBottom />
             <Composer composerActions={composerActions} />
             <p className="text-muted-foreground/70 text-center text-xs">
@@ -81,7 +81,7 @@ const ThreadScrollToBottom: FC = () => {
 
 const ThreadWelcome: FC = () => {
   return (
-    <div className="aui-thread-welcome-root max-w-(--thread-max-width) mx-auto my-auto flex w-full grow flex-col">
+    <div className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col">
       <div className="aui-thread-welcome-center flex w-full grow flex-col items-center justify-center">
         <div className="aui-thread-welcome-message flex size-full flex-col justify-center px-8">
           <div className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-2 animate-in text-2xl font-semibold duration-300 ease-out">
@@ -128,7 +128,7 @@ const ThreadSuggestions: FC = () => {
             <ThreadPrimitive.Suggestion prompt={suggestion.text} asChild>
               <Button
                 variant="ghost"
-                className="text-muted-foreground hover:text-foreground dark:hover:bg-accent/60 h-auto w-full max-w-full justify-start gap-2 whitespace-normal rounded-full border px-4 py-2.5 text-left text-sm font-normal sm:w-auto sm:justify-center sm:whitespace-nowrap sm:text-center"
+                className="text-muted-foreground hover:text-foreground dark:hover:bg-accent/60 h-auto w-full max-w-full justify-start gap-2 rounded-full border px-4 py-2.5 text-left text-sm font-normal whitespace-normal sm:w-auto sm:justify-center sm:text-center sm:whitespace-nowrap"
                 aria-label={suggestion.text}
               >
                 <Icon className="size-4 shrink-0 opacity-60" />
@@ -149,11 +149,11 @@ interface ComposerProps {
 const Composer: FC<ComposerProps> = ({ composerActions }) => {
   return (
     <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
-      <ComposerPrimitive.AttachmentDropzone className="aui-composer-attachment-dropzone border-input bg-background has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-ring/50 data-[dragging=true]:border-ring data-[dragging=true]:bg-accent/50 dark:bg-background shadow-xs flex w-full flex-col rounded-3xl border px-1 pt-2 outline-none transition-[color,box-shadow] has-[textarea:focus-visible]:ring-[3px] data-[dragging=true]:border-dashed">
+      <ComposerPrimitive.AttachmentDropzone className="aui-composer-attachment-dropzone border-input bg-background has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-ring/50 data-[dragging=true]:border-ring data-[dragging=true]:bg-accent/50 dark:bg-background flex w-full flex-col rounded-3xl border px-1 pt-2 shadow-xs transition-[color,box-shadow] outline-none has-[textarea:focus-visible]:ring-[3px] data-[dragging=true]:border-dashed">
         <ComposerAttachments />
         <ComposerPrimitive.Input
           placeholder="Send a message..."
-          className="aui-composer-input placeholder:text-muted-foreground mb-1 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pb-3 pt-1.5 text-base outline-none focus-visible:ring-0"
+          className="aui-composer-input placeholder:text-muted-foreground mb-1 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pt-1.5 pb-3 text-base outline-none focus-visible:ring-0"
           rows={1}
           autoFocus
           aria-label="Message input"
@@ -170,7 +170,7 @@ interface ComposerActionProps {
 
 const ComposerAction: FC<ComposerActionProps> = ({ composerActions }) => {
   return (
-    <div className="aui-composer-action-wrapper relative mx-1 mb-2 mt-2 flex items-center justify-between">
+    <div className="aui-composer-action-wrapper relative mx-1 mt-2 mb-2 flex items-center justify-between">
       <div className="flex items-center gap-1">
         <ComposerAddAttachment />
         {composerActions}
@@ -230,7 +230,7 @@ const TypingIndicator: FC = () => {
   if (!showIndicator) return null;
 
   return (
-    <div className="bg-muted mb-2 inline-flex items-end gap-1 rounded-2xl px-3.5 pb-2.5 pt-3">
+    <div className="bg-muted mb-2 inline-flex items-end gap-1 rounded-2xl px-3.5 pt-3 pb-2.5">
       <span className="bg-foreground/50 size-2 animate-bounce rounded-full [animation-delay:-0.3s]" />
       <span className="bg-foreground/50 size-2 animate-bounce rounded-full [animation-delay:-0.15s]" />
       <span className="bg-foreground/50 size-2 animate-bounce rounded-full" />
@@ -241,10 +241,10 @@ const TypingIndicator: FC = () => {
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root
-      className="aui-assistant-message-root fade-in slide-in-from-bottom-1 animate-in max-w-(--thread-max-width) relative mx-auto w-full py-4 duration-150 ease-out"
+      className="aui-assistant-message-root fade-in slide-in-from-bottom-1 animate-in relative mx-auto w-full max-w-(--thread-max-width) py-4 duration-150 ease-out"
       data-role="assistant"
     >
-      <div className="aui-assistant-message-content text-foreground wrap-break-word mx-2 text-sm leading-6">
+      <div className="aui-assistant-message-content text-foreground mx-2 text-sm leading-6 wrap-break-word">
         <TypingIndicator />
         <MessagePrimitive.Parts
           components={{
@@ -260,7 +260,7 @@ const AssistantMessage: FC = () => {
         <MessageError />
       </div>
 
-      <div className="aui-assistant-message-footer ml-2 mt-2 flex">
+      <div className="aui-assistant-message-footer mt-2 ml-2 flex">
         <BranchPicker />
         <AssistantActionBar />
       </div>
@@ -274,7 +274,7 @@ const AssistantActionBar: FC = () => {
       hideWhenRunning
       autohide="not-last"
       autohideFloat="single-branch"
-      className="aui-assistant-action-bar-root text-muted-foreground data-floating:bg-background data-floating:absolute data-floating:rounded-md data-floating:border data-floating:p-1 data-floating:shadow-sm col-start-3 row-start-2 -ml-1 flex gap-1"
+      className="aui-assistant-action-bar-root text-muted-foreground data-floating:bg-background col-start-3 row-start-2 -ml-1 flex gap-1 data-floating:absolute data-floating:rounded-md data-floating:border data-floating:p-1 data-floating:shadow-sm"
     >
       <ActionBarPrimitive.Copy asChild>
         <TooltipIconButton tooltip="Copy">
@@ -298,13 +298,13 @@ const AssistantActionBar: FC = () => {
 const UserMessage: FC = () => {
   return (
     <MessagePrimitive.Root
-      className="aui-user-message-root fade-in slide-in-from-bottom-1 animate-in max-w-(--thread-max-width) mx-auto grid w-full auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-4 duration-150 ease-out [&:where(>*)]:col-start-2"
+      className="aui-user-message-root fade-in slide-in-from-bottom-1 animate-in mx-auto grid w-full max-w-(--thread-max-width) auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-4 duration-150 ease-out [&:where(>*)]:col-start-2"
       data-role="user"
     >
       <UserMessageAttachments />
 
       <div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
-        <div className="aui-user-message-content bg-muted text-foreground wrap-break-word rounded-3xl px-5 py-2.5 text-sm">
+        <div className="aui-user-message-content bg-muted text-foreground rounded-3xl px-5 py-2.5 text-sm wrap-break-word">
           <MessagePrimitive.Parts
             components={{
               Reasoning: Reasoning,
@@ -312,7 +312,7 @@ const UserMessage: FC = () => {
             }}
           />
         </div>
-        <div className="aui-user-action-bar-wrapper absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 pr-2">
+        <div className="aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2">
           <UserActionBar />
         </div>
       </div>
@@ -340,8 +340,8 @@ const UserActionBar: FC = () => {
 
 const EditComposer: FC = () => {
   return (
-    <MessagePrimitive.Root className="aui-edit-composer-wrapper max-w-(--thread-max-width) mx-auto flex w-full flex-col gap-4 px-2">
-      <ComposerPrimitive.Root className="aui-edit-composer-root bg-muted max-w-7/8 ml-auto flex w-full flex-col rounded-xl">
+    <MessagePrimitive.Root className="aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 px-2">
+      <ComposerPrimitive.Root className="aui-edit-composer-root bg-muted ml-auto flex w-full max-w-7/8 flex-col rounded-xl">
         <ComposerPrimitive.Input
           className="aui-edit-composer-input text-foreground flex min-h-[60px] w-full resize-none bg-transparent p-4 outline-none"
           autoFocus
@@ -369,7 +369,7 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({ className, ...rest
     <BranchPickerPrimitive.Root
       hideWhenSingleBranch
       className={cn(
-        "aui-branch-picker-root text-muted-foreground -ml-2 mr-2 inline-flex items-center text-xs",
+        "aui-branch-picker-root text-muted-foreground mr-2 -ml-2 inline-flex items-center text-xs",
         className,
       )}
       {...rest}
diff --git a/apps/frontend/src/features/ai-assistant/components/tool-uis/accounts-tool-ui.tsx b/apps/frontend/src/features/ai-assistant/components/tool-uis/accounts-tool-ui.tsx
index aa89a9118..44541e823 100644
--- a/apps/frontend/src/features/ai-assistant/components/tool-uis/accounts-tool-ui.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/tool-uis/accounts-tool-ui.tsx
@@ -155,7 +155,7 @@ function AccountCard({ account }: { account: AccountDto }) {
   return (
     <div className="bg-background/60 hover:bg-background/80 flex items-center justify-between rounded-lg border p-3 transition-colors">
       <div className="flex flex-col gap-0.5">
-        <span className="text-sm font-medium leading-tight">{account.name}</span>
+        <span className="text-sm leading-tight font-medium">{account.name}</span>
         <span className="text-muted-foreground text-xs">
           {formatAccountType(account.accountType)}
         </span>
diff --git a/apps/frontend/src/features/ai-assistant/components/tool-uis/goals-tool-ui.tsx b/apps/frontend/src/features/ai-assistant/components/tool-uis/goals-tool-ui.tsx
index a2e98e99a..5d985a901 100644
--- a/apps/frontend/src/features/ai-assistant/components/tool-uis/goals-tool-ui.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/tool-uis/goals-tool-ui.tsx
@@ -261,7 +261,7 @@ function GoalCard({
           ) : (
             <Icons.Target className="text-muted-foreground h-4 w-4 flex-shrink-0" />
           )}
-          <span className="text-sm font-medium leading-tight">{goal.title}</span>
+          <span className="text-sm leading-tight font-medium">{goal.title}</span>
         </div>
         <Badge
           variant={goal.isAchieved ? "default" : "secondary"}
diff --git a/apps/frontend/src/features/ai-assistant/components/tool-uis/holdings-tool-ui.tsx b/apps/frontend/src/features/ai-assistant/components/tool-uis/holdings-tool-ui.tsx
index d1dd978f8..cb064969f 100644
--- a/apps/frontend/src/features/ai-assistant/components/tool-uis/holdings-tool-ui.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/tool-uis/holdings-tool-ui.tsx
@@ -488,7 +488,7 @@ function HoldingsContent({ args, result, status }: HoldingsContentProps) {
 
   // Treemap view component
   const TreemapView = () => (
-    <div className="pb-2 pt-4">
+    <div className="pt-4 pb-2">
       <div className="flex flex-wrap items-start justify-between gap-2 px-4 pb-2">
         <div>
           <p className="text-sm font-medium">Your Portfolio {returnLabel}</p>
@@ -683,7 +683,7 @@ function HoldingsContent({ args, result, status }: HoldingsContentProps) {
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-0">
         {ReturnTypeToggle}
       </CardHeader>
-      <CardContent className="px-0 pb-0 pt-4">
+      <CardContent className="px-0 pt-4 pb-0">
         <TableView />
       </CardContent>
     </Card>
diff --git a/apps/frontend/src/features/devices-sync/components/pairing-flow/enter-code.tsx b/apps/frontend/src/features/devices-sync/components/pairing-flow/enter-code.tsx
index dcb160ba6..133ff13eb 100644
--- a/apps/frontend/src/features/devices-sync/components/pairing-flow/enter-code.tsx
+++ b/apps/frontend/src/features/devices-sync/components/pairing-flow/enter-code.tsx
@@ -137,7 +137,7 @@ export function EnterCode({ onSubmit, onCancel, isLoading, error }: EnterCodePro
   const isDisabled = isLoading || isScanning;
 
   return (
-    <div className="flex flex-col gap-5 pb-2 pt-4">
+    <div className="flex flex-col gap-5 pt-4 pb-2">
       {/* Scan QR Card - mobile only */}
       {canScan && (
         <button
@@ -165,7 +165,7 @@ export function EnterCode({ onSubmit, onCancel, isLoading, error }: EnterCodePro
       {canScan && (
         <div className="flex items-center gap-4">
           <div className="bg-border h-px flex-1" />
-          <span className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+          <span className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
             Or
           </span>
           <div className="bg-border h-px flex-1" />
@@ -188,7 +188,7 @@ export function EnterCode({ onSubmit, onCancel, isLoading, error }: EnterCodePro
             type="button"
             onClick={handlePaste}
             disabled={isDisabled}
-            className="text-primary hover:text-primary/80 absolute right-3 top-1/2 -translate-y-1/2 px-2 py-1 text-sm font-medium transition-colors disabled:opacity-50"
+            className="text-primary hover:text-primary/80 absolute top-1/2 right-3 -translate-y-1/2 px-2 py-1 text-sm font-medium transition-colors disabled:opacity-50"
           >
             Paste
           </button>
diff --git a/apps/frontend/src/features/wealthfolio-connect/components/connect-empty-state.tsx b/apps/frontend/src/features/wealthfolio-connect/components/connect-empty-state.tsx
index 383eff4cd..81ee23046 100644
--- a/apps/frontend/src/features/wealthfolio-connect/components/connect-empty-state.tsx
+++ b/apps/frontend/src/features/wealthfolio-connect/components/connect-empty-state.tsx
@@ -83,7 +83,7 @@ export function ConnectEmptyState() {
         {/* CTA */}
         <footer className="flex flex-col items-center gap-4">
           <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center sm:justify-center">
-            <Button asChild className="from-primary to-primary/90 bg-linear-to-r w-full sm:w-auto">
+            <Button asChild className="from-primary to-primary/90 w-full bg-linear-to-r sm:w-auto">
               <a href={WEALTHFOLIO_CONNECT_PORTAL_URL} target="_blank" rel="noopener noreferrer">
                 Get Started with Connect
                 <Icons.ExternalLink className="ml-1.5 h-4 w-4" />
diff --git a/apps/frontend/src/features/wealthfolio-connect/components/new-accounts-found-modal.tsx b/apps/frontend/src/features/wealthfolio-connect/components/new-accounts-found-modal.tsx
index aa0f3be45..94a524c27 100644
--- a/apps/frontend/src/features/wealthfolio-connect/components/new-accounts-found-modal.tsx
+++ b/apps/frontend/src/features/wealthfolio-connect/components/new-accounts-found-modal.tsx
@@ -139,7 +139,7 @@ export function NewAccountsFoundModal({
             <div className="space-y-6 p-6">
               <Alert
                 variant="warning"
-                className="px-3 py-2.5 [&>svg]:left-3 [&>svg]:top-2.5 [&>svg~*]:pl-6"
+                className="px-3 py-2.5 [&>svg]:top-2.5 [&>svg]:left-3 [&>svg~*]:pl-6"
               >
                 <Icons.AlertTriangle className="h-4 w-4" />
                 <AlertDescription className="text-sm">
diff --git a/apps/frontend/src/features/wealthfolio-connect/components/sync-status-icon.tsx b/apps/frontend/src/features/wealthfolio-connect/components/sync-status-icon.tsx
index a70bd8da2..8798c4846 100644
--- a/apps/frontend/src/features/wealthfolio-connect/components/sync-status-icon.tsx
+++ b/apps/frontend/src/features/wealthfolio-connect/components/sync-status-icon.tsx
@@ -29,7 +29,7 @@ function StatusIndicator({ status }: { status: AggregatedSyncStatus }) {
   if (status === "needs_review") {
     // Yellow/warning dot
     return (
-      <span className="absolute -right-0.5 -top-0.5 flex h-1.5 w-1.5">
+      <span className="absolute -top-0.5 -right-0.5 flex h-1.5 w-1.5">
         <span className="absolute inline-flex h-full w-full rounded-full bg-yellow-500/80" />
       </span>
     );
@@ -38,7 +38,7 @@ function StatusIndicator({ status }: { status: AggregatedSyncStatus }) {
   if (status === "failed") {
     // Red/error dot
     return (
-      <span className="absolute -right-0.5 -top-0.5 flex h-1.5 w-1.5">
+      <span className="absolute -top-0.5 -right-0.5 flex h-1.5 w-1.5">
         <span className="absolute inline-flex h-full w-full rounded-full bg-red-500/80" />
       </span>
     );
diff --git a/apps/frontend/src/features/wealthfolio-connect/pages/connect-page.tsx b/apps/frontend/src/features/wealthfolio-connect/pages/connect-page.tsx
index 9a539baf0..9c733576a 100644
--- a/apps/frontend/src/features/wealthfolio-connect/pages/connect-page.tsx
+++ b/apps/frontend/src/features/wealthfolio-connect/pages/connect-page.tsx
@@ -656,7 +656,7 @@ function SyncHistoryItem({
           needsAttention || isFailed ? "bg-yellow-500" : "bg-green-500"
         }`}
       />
-      <span className="text-muted-foreground shrink-0 whitespace-nowrap text-xs sm:min-w-[80px] sm:text-sm">
+      <span className="text-muted-foreground shrink-0 text-xs whitespace-nowrap sm:min-w-[80px] sm:text-sm">
         {timeAgo} ago
       </span>
       {accountName && (
diff --git a/apps/frontend/src/pages/account/account-page.tsx b/apps/frontend/src/pages/account/account-page.tsx
index b42a1b41a..0de0921ec 100644
--- a/apps/frontend/src/pages/account/account-page.tsx
+++ b/apps/frontend/src/pages/account/account-page.tsx
@@ -381,7 +381,7 @@ const AccountPage = () => {
           )}
           <div className="flex min-w-0 flex-col justify-center">
             <div className="flex items-center gap-1">
-              <h1 className="truncate text-base font-semibold leading-tight md:text-lg">
+              <h1 className="truncate text-base leading-tight font-semibold md:text-lg">
                 {account?.name ?? "Account"}
               </h1>
               {/* Desktop account selector */}
@@ -448,7 +448,7 @@ const AccountPage = () => {
                       <Icons.ChevronDown className="text-muted-foreground h-5 w-5" />
                     </Button>
                   </SheetTrigger>
-                  <SheetContent side="bottom" className="rounded-t-4xl mx-1 h-[80vh] p-0">
+                  <SheetContent side="bottom" className="mx-1 h-[80vh] rounded-t-4xl p-0">
                     <SheetHeader className="border-border border-b px-6 py-4">
                       <SheetTitle>Switch Account</SheetTitle>
                       <SheetDescription>Choose an account to view</SheetDescription>
@@ -588,7 +588,7 @@ const AccountPage = () => {
                           }}
                         />
                         <IntervalSelector
-                          className="relative bottom-10 left-0 right-0 z-10"
+                          className="relative right-0 bottom-10 left-0 z-10"
                           onIntervalSelect={handleIntervalSelect}
                           isLoading={isValuationHistoryLoading}
                           defaultValue={INITIAL_INTERVAL_CODE}
diff --git a/apps/frontend/src/pages/account/performance-grid.tsx b/apps/frontend/src/pages/account/performance-grid.tsx
index ed6a566b4..7523d5108 100644
--- a/apps/frontend/src/pages/account/performance-grid.tsx
+++ b/apps/frontend/src/pages/account/performance-grid.tsx
@@ -36,7 +36,7 @@ export const PerformanceGrid: React.FC<PerformanceGridProps> = ({
       <div className={cn("w-full", className)}>
         <Alert
           variant="warning"
-          className="flex flex-col items-center gap-2 text-center [&>svg+div]:translate-y-0 [&>svg]:static [&>svg~*]:pl-0"
+          className="flex flex-col items-center gap-2 text-center [&>svg]:static [&>svg+div]:translate-y-0 [&>svg~*]:pl-0"
         >
           <Icons.AlertTriangle className="size-5" />
           <AlertDescription className="text-xs">{performanceError}</AlertDescription>
diff --git a/apps/frontend/src/pages/activity/components/activity-data-grid/activity-data-grid-pagination.tsx b/apps/frontend/src/pages/activity/components/activity-data-grid/activity-data-grid-pagination.tsx
index 0442ec626..ad2a2d7cd 100644
--- a/apps/frontend/src/pages/activity/components/activity-data-grid/activity-data-grid-pagination.tsx
+++ b/apps/frontend/src/pages/activity/components/activity-data-grid/activity-data-grid-pagination.tsx
@@ -133,7 +133,7 @@ export function ActivityDataGridPagination({
             className="h-7 w-[50px] text-center text-xs"
             title={`Enter a page number between 1 and ${pageCount}`}
           />
-          <span className="text-muted-foreground whitespace-nowrap text-xs">
+          <span className="text-muted-foreground text-xs whitespace-nowrap">
             <span className="hidden sm:inline">of</span>
             <span className="sm:hidden">/</span> {pageCount || 1}
           </span>
diff --git a/apps/frontend/src/pages/activity/components/activity-detail-sheet.tsx b/apps/frontend/src/pages/activity/components/activity-detail-sheet.tsx
index ac4c6119e..59aa73d6d 100644
--- a/apps/frontend/src/pages/activity/components/activity-detail-sheet.tsx
+++ b/apps/frontend/src/pages/activity/components/activity-detail-sheet.tsx
@@ -110,7 +110,7 @@ export function ActivityDetailSheet({ activity, open, onOpenChange }: ActivityDe
           <div className="from-primary/5 to-primary/10 rounded-xl border bg-gradient-to-br p-4">
             <div className="flex items-start justify-between">
               <div>
-                <div className="text-muted-foreground mb-1 text-xs uppercase tracking-wide">
+                <div className="text-muted-foreground mb-1 text-xs tracking-wide uppercase">
                   {ActivityTypeNames[activity.activityType] || activity.activityType}
                 </div>
                 {activity.assetSymbol && (
@@ -205,7 +205,7 @@ export function ActivityDetailSheet({ activity, open, onOpenChange }: ActivityDe
           {/* Comment */}
           {activity.comment && (
             <DetailSection title="Notes" icon={<Icons.FileText className="h-4 w-4" />}>
-              <p className="whitespace-pre-wrap text-sm">{activity.comment}</p>
+              <p className="text-sm whitespace-pre-wrap">{activity.comment}</p>
             </DetailSection>
           )}
 
diff --git a/apps/frontend/src/pages/activity/components/activity-mobile-controls.tsx b/apps/frontend/src/pages/activity/components/activity-mobile-controls.tsx
index 7344ad48c..3b6c25c63 100644
--- a/apps/frontend/src/pages/activity/components/activity-mobile-controls.tsx
+++ b/apps/frontend/src/pages/activity/components/activity-mobile-controls.tsx
@@ -62,7 +62,7 @@ export function ActivityMobileControls({
           <div className="relative">
             <Icons.ListFilter className="h-4 w-4" />
             {hasActiveFilters && (
-              <span className="bg-primary absolute -left-[1.5px] -top-1 h-2 w-2 rounded-full" />
+              <span className="bg-primary absolute -top-1 -left-[1.5px] h-2 w-2 rounded-full" />
             )}
           </div>
         </Button>
diff --git a/apps/frontend/src/pages/activity/components/activity-mobile-filter-sheet.tsx b/apps/frontend/src/pages/activity/components/activity-mobile-filter-sheet.tsx
index b75f3c3fc..c4fda78df 100644
--- a/apps/frontend/src/pages/activity/components/activity-mobile-filter-sheet.tsx
+++ b/apps/frontend/src/pages/activity/components/activity-mobile-filter-sheet.tsx
@@ -58,7 +58,7 @@ export const ActivityMobileFilterSheet = ({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="bottom" className="rounded-t-4xl mx-1 flex h-[80vh] flex-col">
+      <SheetContent side="bottom" className="mx-1 flex h-[80vh] flex-col rounded-t-4xl">
         <SheetHeader className="text-left">
           <SheetTitle>Filter Activities</SheetTitle>
         </SheetHeader>
diff --git a/apps/frontend/src/pages/activity/components/activity-table/activity-table.tsx b/apps/frontend/src/pages/activity/components/activity-table/activity-table.tsx
index 003b9533b..3f4a96ded 100644
--- a/apps/frontend/src/pages/activity/components/activity-table/activity-table.tsx
+++ b/apps/frontend/src/pages/activity/components/activity-table/activity-table.tsx
@@ -108,7 +108,7 @@ export const ActivityTable = ({
             <div className="flex items-center text-sm">
               <ActivityTypeBadge
                 type={activityType as ActivityType}
-                className="whitespace-nowrap text-xs font-normal"
+                className="text-xs font-normal whitespace-nowrap"
               />
             </div>
           );
diff --git a/apps/frontend/src/pages/activity/components/activity-type-picker.tsx b/apps/frontend/src/pages/activity/components/activity-type-picker.tsx
index b471fc221..e49264961 100644
--- a/apps/frontend/src/pages/activity/components/activity-type-picker.tsx
+++ b/apps/frontend/src/pages/activity/components/activity-type-picker.tsx
@@ -79,7 +79,7 @@ function ActivityTypeButton({
       aria-pressed={isSelected}
       className={cn(
         "flex flex-col items-center justify-center gap-1.5 rounded-lg border-2 transition-all",
-        "hover:bg-muted/50 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
+        "hover:bg-muted/50 focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none",
         "cursor-pointer",
         compact ? "min-h-[72px] min-w-[80px] p-3" : "min-h-[80px] p-4",
         isSelected && "border-foreground bg-primary/5",
@@ -94,7 +94,7 @@ function ActivityTypeButton({
       />
       <span
         className={cn(
-          "whitespace-nowrap text-sm font-medium transition-colors",
+          "text-sm font-medium whitespace-nowrap transition-colors",
           isSelected ? "text-primary" : "text-foreground",
         )}
       >
diff --git a/apps/frontend/src/pages/activity/components/forms/bulk-holdings-form.tsx b/apps/frontend/src/pages/activity/components/forms/bulk-holdings-form.tsx
index bc55a48af..9dbb94202 100644
--- a/apps/frontend/src/pages/activity/components/forms/bulk-holdings-form.tsx
+++ b/apps/frontend/src/pages/activity/components/forms/bulk-holdings-form.tsx
@@ -368,7 +368,7 @@ export const BulkHoldingsForm = ({ onAccountChange }: BulkHoldingsFormProps) =>
             <div className="col-span-6">Tickers</div>
             <div className="col-span-1 text-right">Shares</div>
             <div className="col-span-2 text-right">Average cost</div>
-            <div className="col-span-2 whitespace-nowrap text-right">Total value</div>
+            <div className="col-span-2 text-right whitespace-nowrap">Total value</div>
             <div className="col-span-1 text-right"></div>
           </div>
 
diff --git a/apps/frontend/src/pages/activity/components/forms/fields/amount-input.tsx b/apps/frontend/src/pages/activity/components/forms/fields/amount-input.tsx
index d71290e58..20c97d7fb 100644
--- a/apps/frontend/src/pages/activity/components/forms/fields/amount-input.tsx
+++ b/apps/frontend/src/pages/activity/components/forms/fields/amount-input.tsx
@@ -39,10 +39,10 @@ export function AmountInput<TFieldValues extends FieldValues = FieldValues>({
           <FormLabel>{label}</FormLabel>
           <FormControl>
             {currency ? (
-              <InputGroup className="bg-input-bg h-input-height shadow-xs rounded-md">
+              <InputGroup className="bg-input-bg h-input-height rounded-md shadow-xs">
                 <MoneyInput
                   data-slot="input-group-control"
-                  className="aria-invalid:ring-0 flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0"
+                  className="flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0"
                   ref={field.ref}
                   name={field.name}
                   value={field.value}
diff --git a/apps/frontend/src/pages/activity/components/mobile-forms/mobile-activity-form.tsx b/apps/frontend/src/pages/activity/components/mobile-forms/mobile-activity-form.tsx
index 9060b50f7..b049ecaa9 100644
--- a/apps/frontend/src/pages/activity/components/mobile-forms/mobile-activity-form.tsx
+++ b/apps/frontend/src/pages/activity/components/mobile-forms/mobile-activity-form.tsx
@@ -178,7 +178,7 @@ export function MobileActivityForm({ accounts, activity, open, onClose }: Mobile
 
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetContent side="bottom" className="rounded-t-4xl mx-1 flex h-[90vh] flex-col p-0">
+      <SheetContent side="bottom" className="mx-1 flex h-[90vh] flex-col rounded-t-4xl p-0">
         <SheetHeader className="border-b px-6 py-4">
           <div className="flex flex-col items-center space-y-2">
             <SheetTitle>{activity?.id ? "Update Activity" : "Add Activity"}</SheetTitle>
diff --git a/apps/frontend/src/pages/activity/components/mobile-forms/mobile-details-step.tsx b/apps/frontend/src/pages/activity/components/mobile-forms/mobile-details-step.tsx
index 5ffadbca1..fd33a91bf 100644
--- a/apps/frontend/src/pages/activity/components/mobile-forms/mobile-details-step.tsx
+++ b/apps/frontend/src/pages/activity/components/mobile-forms/mobile-details-step.tsx
@@ -346,7 +346,7 @@ function MobileAccountSheet({ accounts, open, onOpenChange, onSelect }: MobileAc
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="bottom" className="rounded-t-4xl mx-1 h-[70vh] p-0">
+      <SheetContent side="bottom" className="mx-1 h-[70vh] rounded-t-4xl p-0">
         <SheetHeader className="border-border border-b px-6 py-4">
           <SheetTitle>Select Account</SheetTitle>
           <SheetDescription>Choose the account for this transaction</SheetDescription>
diff --git a/apps/frontend/src/pages/activity/import/activity-import-page.tsx b/apps/frontend/src/pages/activity/import/activity-import-page.tsx
index 6fb645544..68b1f343e 100644
--- a/apps/frontend/src/pages/activity/import/activity-import-page.tsx
+++ b/apps/frontend/src/pages/activity/import/activity-import-page.tsx
@@ -346,7 +346,7 @@ function ImportWizardContent() {
 
       <PageContent withPadding={false}>
         <ErrorBoundary>
-          <div className="px-2 pb-6 pt-2 sm:px-4 sm:pt-4 md:px-6 md:pt-6">
+          <div className="px-2 pt-2 pb-6 sm:px-4 sm:pt-4 md:px-6 md:pt-6">
             <Card className="w-full">
               {/* Step indicator — hidden on result step */}
               {state.step !== "result" && (
diff --git a/apps/frontend/src/pages/activity/import/components/csv-file-viewer.tsx b/apps/frontend/src/pages/activity/import/components/csv-file-viewer.tsx
index ff14a55c3..5f8d31c35 100644
--- a/apps/frontend/src/pages/activity/import/components/csv-file-viewer.tsx
+++ b/apps/frontend/src/pages/activity/import/components/csv-file-viewer.tsx
@@ -137,7 +137,7 @@ export function CSVFileViewer({ data, className, maxHeight = "400px" }: CSVFileV
         const isHeader = row.original.id === 0;
 
         return (
-          <div className={cn("whitespace-nowrap font-mono text-xs", isHeader && "font-semibold")}>
+          <div className={cn("font-mono text-xs whitespace-nowrap", isHeader && "font-semibold")}>
             {(content as React.ReactNode) || (
               <span className="text-muted-foreground italic">empty line</span>
             )}
diff --git a/apps/frontend/src/pages/activity/import/components/import-alert.tsx b/apps/frontend/src/pages/activity/import/components/import-alert.tsx
index c9dc375ee..f753441c0 100644
--- a/apps/frontend/src/pages/activity/import/components/import-alert.tsx
+++ b/apps/frontend/src/pages/activity/import/components/import-alert.tsx
@@ -256,7 +256,7 @@ export function ImportAlert({
           <motion.div className="pointer-events-none absolute inset-0" variants={glowVariants}>
             <div
               className={cn(
-                "absolute -right-10 -top-10 h-32 w-32 rounded-full opacity-20 blur-2xl",
+                "absolute -top-10 -right-10 h-32 w-32 rounded-full opacity-20 blur-2xl",
                 styles.iconBg,
               )}
             />
diff --git a/apps/frontend/src/pages/activity/import/components/import-review-grid.tsx b/apps/frontend/src/pages/activity/import/components/import-review-grid.tsx
index df88f11e3..c3d3bf8b2 100644
--- a/apps/frontend/src/pages/activity/import/components/import-review-grid.tsx
+++ b/apps/frontend/src/pages/activity/import/components/import-review-grid.tsx
@@ -247,8 +247,8 @@ function useImportReviewColumns({
                       side="right"
                       className={
                         status === "error"
-                          ? "bg-destructive text-destructive-foreground border-destructive max-w-xs whitespace-pre-wrap text-xs"
-                          : "max-w-xs whitespace-pre-wrap text-xs"
+                          ? "bg-destructive text-destructive-foreground border-destructive max-w-xs text-xs whitespace-pre-wrap"
+                          : "max-w-xs text-xs whitespace-pre-wrap"
                       }
                     >
                       {title}
diff --git a/apps/frontend/src/pages/activity/import/components/mapping-table-cells.tsx b/apps/frontend/src/pages/activity/import/components/mapping-table-cells.tsx
index d05489f58..495e3f9fa 100644
--- a/apps/frontend/src/pages/activity/import/components/mapping-table-cells.tsx
+++ b/apps/frontend/src/pages/activity/import/components/mapping-table-cells.tsx
@@ -54,7 +54,7 @@ export function MappingHeaderCell({
 
   return (
     <div>
-      <div className="flex items-center gap-2 pb-0 pt-2">
+      <div className="flex items-center gap-2 pt-2 pb-0">
         <span className="font-bold">
           {field}
           {isRequired && !isMapped && (
diff --git a/apps/frontend/src/pages/activity/import/components/mapping-table.tsx b/apps/frontend/src/pages/activity/import/components/mapping-table.tsx
index bd93e626f..ae46e1ed3 100644
--- a/apps/frontend/src/pages/activity/import/components/mapping-table.tsx
+++ b/apps/frontend/src/pages/activity/import/components/mapping-table.tsx
@@ -83,7 +83,7 @@ export function MappingTable({
                   <TableHead
                     key={field}
                     className={cn(
-                      "border-border whitespace-nowrap border-r p-2 transition-colors last:border-r-0",
+                      "border-border border-r p-2 whitespace-nowrap transition-colors last:border-r-0",
                       IMPORT_REQUIRED_FIELDS.includes(field as ImportRequiredField)
                         ? !isFieldMapped(field)
                           ? "bg-amber-50 dark:bg-amber-950/20"
diff --git a/apps/frontend/src/pages/activity/import/import-help.tsx b/apps/frontend/src/pages/activity/import/import-help.tsx
index 0b623b0c0..52bcd7eb2 100644
--- a/apps/frontend/src/pages/activity/import/import-help.tsx
+++ b/apps/frontend/src/pages/activity/import/import-help.tsx
@@ -91,7 +91,7 @@ function ActivitiesHelpContent() {
       <div className="space-y-4">
         <div>
           <p className="font-semibold">Example CSV format:</p>
-          <pre className="bg-muted mt-2 select-all overflow-x-auto p-3 text-xs leading-relaxed">
+          <pre className="bg-muted mt-2 overflow-x-auto p-3 text-xs leading-relaxed select-all">
             <span className="text-muted-foreground"># Standard format:</span>
             <br />
             date,symbol,quantity,activityType,unitPrice,currency,fee,amount,fxRate,subtype
@@ -233,7 +233,7 @@ function HoldingsHelpContent() {
       <div className="space-y-4">
         <div>
           <p className="font-semibold">Example CSV format:</p>
-          <pre className="bg-muted mt-2 select-all overflow-x-auto p-3 text-xs leading-relaxed">
+          <pre className="bg-muted mt-2 overflow-x-auto p-3 text-xs leading-relaxed select-all">
             <span className="text-muted-foreground"># Holdings snapshot:</span>
             <br />
             date,symbol,quantity,avgCost,currency
@@ -320,7 +320,7 @@ export function ImportHelpPopover({ defaultTab = "activities" }: ImportHelpPopov
             <Icons.HelpCircle className="h-6 w-6" />
           </Button>
         </SheetTrigger>
-        <SheetContent side="bottom" className="rounded-t-4xl mx-1 h-[85vh]">
+        <SheetContent side="bottom" className="mx-1 h-[85vh] rounded-t-4xl">
           <SheetHeader>
             <SheetTitle>How to Import CSV</SheetTitle>
           </SheetHeader>
diff --git a/apps/frontend/src/pages/activity/import/steps/confirm-step.tsx b/apps/frontend/src/pages/activity/import/steps/confirm-step.tsx
index f34fac079..72abdd7d1 100644
--- a/apps/frontend/src/pages/activity/import/steps/confirm-step.tsx
+++ b/apps/frontend/src/pages/activity/import/steps/confirm-step.tsx
@@ -316,7 +316,7 @@ export function ConfirmStep() {
         {/* Activity type breakdown */}
         {Object.keys(summary.byType).length > 0 && (
           <div className="space-y-3">
-            <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+            <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
               By Activity Type
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -345,7 +345,7 @@ export function ConfirmStep() {
         {/* Skipped breakdown */}
         {Object.keys(summary.bySkipReason).length > 0 && (
           <div className="space-y-3">
-            <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+            <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
               Skipped Breakdown
             </h4>
             <div className="flex flex-wrap gap-2">
diff --git a/apps/frontend/src/pages/asset/alternative-assets/components/alternative-asset-quick-add-modal.tsx b/apps/frontend/src/pages/asset/alternative-assets/components/alternative-asset-quick-add-modal.tsx
index 5b94a220a..1d66dec63 100644
--- a/apps/frontend/src/pages/asset/alternative-assets/components/alternative-asset-quick-add-modal.tsx
+++ b/apps/frontend/src/pages/asset/alternative-assets/components/alternative-asset-quick-add-modal.tsx
@@ -387,7 +387,7 @@ export function AlternativeAssetQuickAddModal({
                           <motion.div
                             initial={{ scale: 0 }}
                             animate={{ scale: 1 }}
-                            className="absolute right-2 top-2"
+                            className="absolute top-2 right-2"
                           >
                             <div className="bg-primary flex h-5 w-5 items-center justify-center rounded-full">
                               <Icons.Check className="text-primary-foreground h-3 w-3" />
diff --git a/apps/frontend/src/pages/asset/asset-profile-page.tsx b/apps/frontend/src/pages/asset/asset-profile-page.tsx
index e926df85d..084933b00 100644
--- a/apps/frontend/src/pages/asset/asset-profile-page.tsx
+++ b/apps/frontend/src/pages/asset/asset-profile-page.tsx
@@ -843,7 +843,7 @@ export const AssetProfilePage = () => {
             )
           )}
           <div className="flex min-w-0 flex-col justify-center">
-            <h1 className="truncate text-base font-semibold leading-tight md:text-lg">
+            <h1 className="truncate text-base leading-tight font-semibold md:text-lg">
               {assetProfile?.name ?? holding?.instrument?.name ?? assetId ?? "-"}
             </h1>
             <p className="text-muted-foreground flex items-center gap-1.5 text-xs leading-tight md:text-sm">
diff --git a/apps/frontend/src/pages/asset/assets-table-mobile.tsx b/apps/frontend/src/pages/asset/assets-table-mobile.tsx
index f13e48da4..a28e733a3 100644
--- a/apps/frontend/src/pages/asset/assets-table-mobile.tsx
+++ b/apps/frontend/src/pages/asset/assets-table-mobile.tsx
@@ -177,7 +177,7 @@ export function AssetsTableMobile({
         >
           <Icons.ListFilter className="h-4 w-4" />
           {hasActiveFilters && (
-            <span className="bg-destructive absolute right-0 top-0.5 h-2 w-2 rounded-full" />
+            <span className="bg-destructive absolute top-0.5 right-0 h-2 w-2 rounded-full" />
           )}
         </Button>
       </div>
@@ -285,7 +285,7 @@ export function AssetsTableMobile({
 
       {/* Filter Sheet */}
       <Sheet open={isFilterSheetOpen} onOpenChange={setIsFilterSheetOpen}>
-        <SheetContent side="bottom" className="rounded-t-4xl mx-1 flex h-[70vh] flex-col">
+        <SheetContent side="bottom" className="mx-1 flex h-[70vh] flex-col rounded-t-4xl">
           <SheetHeader className="text-left">
             <SheetTitle>Filter Options</SheetTitle>
           </SheetHeader>
@@ -294,7 +294,7 @@ export function AssetsTableMobile({
               {/* Data Source Filter */}
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
-                  <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+                  <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                     Data Source
                   </h4>
                   {selectedDataSources.length > 0 && (
@@ -355,7 +355,7 @@ export function AssetsTableMobile({
               {/* Asset Kind Filter */}
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
-                  <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+                  <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                     Asset Kind
                   </h4>
                   {selectedAssetKinds.length > 0 && (
@@ -418,7 +418,7 @@ export function AssetsTableMobile({
               {/* Price Status Filter */}
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
-                  <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+                  <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                     Price Status
                   </h4>
                   {selectedPriceStatus.length > 0 && (
diff --git a/apps/frontend/src/pages/asset/assets-table.tsx b/apps/frontend/src/pages/asset/assets-table.tsx
index d716102e8..2b32baee3 100644
--- a/apps/frontend/src/pages/asset/assets-table.tsx
+++ b/apps/frontend/src/pages/asset/assets-table.tsx
@@ -82,7 +82,7 @@ export function AssetsTable({
             >
               <TickerAvatar symbol={asset.displayCode ?? ""} className="h-8 w-8 shrink-0" />
               <div className="min-w-0 flex-1">
-                <div className="group-hover:text-primary font-semibold leading-tight transition-colors">
+                <div className="group-hover:text-primary leading-tight font-semibold transition-colors">
                   {displaySymbol}
                 </div>
                 <div className="text-muted-foreground line-clamp-2 text-xs leading-tight">
diff --git a/apps/frontend/src/pages/bank-connect/bank-connect-page.tsx b/apps/frontend/src/pages/bank-connect/bank-connect-page.tsx
index 23ef051ef..331663ee2 100644
--- a/apps/frontend/src/pages/bank-connect/bank-connect-page.tsx
+++ b/apps/frontend/src/pages/bank-connect/bank-connect-page.tsx
@@ -407,7 +407,7 @@ export default function BankConnectPage() {
           <div className="flex flex-col gap-4 pr-2">
             {/* Banks */}
             <div>
-              <p className="text-muted-foreground mb-2 text-xs font-semibold uppercase tracking-wide">
+              <p className="text-muted-foreground mb-2 text-xs font-semibold tracking-wide uppercase">
                 Banks
               </p>
               <div className="flex flex-col gap-2">
@@ -425,7 +425,7 @@ export default function BankConnectPage() {
 
             {/* Brokers */}
             <div>
-              <p className="text-muted-foreground mb-2 text-xs font-semibold uppercase tracking-wide">
+              <p className="text-muted-foreground mb-2 text-xs font-semibold tracking-wide uppercase">
                 Brokers
               </p>
               <div className="flex flex-col gap-2">
diff --git a/apps/frontend/src/pages/dashboard/accounts-summary.tsx b/apps/frontend/src/pages/dashboard/accounts-summary.tsx
index 61dca0017..43326d887 100644
--- a/apps/frontend/src/pages/dashboard/accounts-summary.tsx
+++ b/apps/frontend/src/pages/dashboard/accounts-summary.tsx
@@ -79,7 +79,7 @@ const AccountSummaryComponent = React.memo(
       }
 
       return (
-        <div className="border-border bg-card shadow-xs flex w-full items-center justify-between gap-3 rounded-lg border px-4 py-3 md:px-5 md:py-4">
+        <div className="border-border bg-card flex w-full items-center justify-between gap-3 rounded-lg border px-4 py-3 shadow-xs md:px-5 md:py-4">
           {skeletonContent}
         </div>
       );
@@ -110,14 +110,14 @@ const AccountSummaryComponent = React.memo(
     const content = (
       <>
         <div className="flex min-w-0 flex-1 flex-col gap-1 md:gap-1.5">
-          <h3 className="truncate text-sm font-semibold leading-tight md:text-base md:font-semibold">
+          <h3 className="truncate text-sm leading-tight font-semibold md:text-base md:font-semibold">
             {name}
           </h3>
           <p className="text-muted-foreground truncate text-xs md:text-sm">{subText}</p>
         </div>
         <div className="flex shrink-0 items-center gap-2 md:gap-3">
           <div className="flex min-h-[3rem] flex-col items-end justify-center gap-1 md:gap-1.5">
-            <p className="text-sm font-semibold leading-tight md:text-base md:font-semibold">
+            <p className="text-sm leading-tight font-semibold md:text-base md:font-semibold">
               <PrivacyAmount value={totalValue} currency={currency} />
             </p>
             {(gainAmountToDisplay !== null || gainPercentToDisplay !== null) &&
@@ -189,7 +189,7 @@ const AccountSummaryComponent = React.memo(
       return (
         <Link
           to={`/accounts/${accountId}`}
-          className="border-border bg-card shadow-xs flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border px-4 py-3 transition-all duration-150 hover:shadow-md md:px-5 md:py-4"
+          className="border-border bg-card flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border px-4 py-3 shadow-xs transition-all duration-150 hover:shadow-md md:px-5 md:py-4"
         >
           {content}
         </Link>
@@ -197,7 +197,7 @@ const AccountSummaryComponent = React.memo(
     }
 
     return (
-      <div className="border-border bg-card shadow-xs flex w-full items-center justify-between gap-3 rounded-lg border px-4 py-3 md:px-5 md:py-4">
+      <div className="border-border bg-card flex w-full items-center justify-between gap-3 rounded-lg border px-4 py-3 shadow-xs md:px-5 md:py-4">
         {content}
       </div>
     );
@@ -284,7 +284,7 @@ export const AccountsSummary = React.memo(() => {
       return Array.from({ length: 4 }).map((_, index) => (
         <div
           key={`skeleton-${index}`}
-          className="border-border bg-card shadow-xs rounded-lg border px-4 py-3 md:px-5 md:py-4"
+          className="border-border bg-card rounded-lg border px-4 py-3 shadow-xs md:px-5 md:py-4"
         >
           <AccountSummarySkeleton />
         </div>
@@ -300,7 +300,7 @@ export const AccountsSummary = React.memo(() => {
             </div>
             <div className="min-w-0 flex-1">
               <p className="text-destructive text-sm font-medium">Failed to load accounts</p>
-              <p className="text-muted-foreground mt-1 break-words text-xs">
+              <p className="text-muted-foreground mt-1 text-xs break-words">
                 {errorAccounts?.message || "An unexpected error occurred"}
               </p>
               <p className="text-muted-foreground mt-2 text-xs">
@@ -450,7 +450,7 @@ export const AccountsSummary = React.memo(() => {
             return (
               <div
                 key={group.accountName}
-                className="border-border bg-card shadow-xs overflow-hidden rounded-lg border transition-shadow duration-150 hover:shadow-md"
+                className="border-border bg-card overflow-hidden rounded-lg border shadow-xs transition-shadow duration-150 hover:shadow-md"
               >
                 <div className="cursor-pointer">
                   <AccountSummaryComponent
diff --git a/apps/frontend/src/pages/dashboard/dashboard-content.tsx b/apps/frontend/src/pages/dashboard/dashboard-content.tsx
index 3e798f1b0..2a9d25dc7 100644
--- a/apps/frontend/src/pages/dashboard/dashboard-content.tsx
+++ b/apps/frontend/src/pages/dashboard/dashboard-content.tsx
@@ -108,7 +108,7 @@ export function DashboardContent() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <div className="px-4 pb-1 pt-2 md:px-6 md:pb-2 lg:px-8">
+      <div className="px-4 pt-2 pb-1 md:px-6 md:pb-2 lg:px-8">
         <PortfolioUpdateTrigger lastCalculatedAt={currentValuation?.calculatedAt}>
           <div className="flex items-start gap-2">
             <div>
@@ -168,7 +168,7 @@ export function DashboardContent() {
         )}
       </div>
 
-      <div className="from-success/30 via-success/15 to-success/10 bg-linear-to-t grow px-4 pb-[calc(var(--mobile-nav-ui-height)+max(var(--mobile-nav-gap),env(safe-area-inset-bottom)))] pt-12 md:px-6 md:pb-6 md:pt-6 lg:px-10 lg:pb-8 lg:pt-8">
+      <div className="from-success/30 via-success/15 to-success/10 grow bg-linear-to-t px-4 pt-12 pb-[calc(var(--mobile-nav-ui-height)+max(var(--mobile-nav-gap),env(safe-area-inset-bottom)))] md:px-6 md:pt-6 md:pb-6 lg:px-10 lg:pt-8 lg:pb-8">
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3 lg:gap-20">
           <div className="lg:col-span-2">
             <AccountsSummary />
diff --git a/apps/frontend/src/pages/dashboard/goals.tsx b/apps/frontend/src/pages/dashboard/goals.tsx
index 75f53b309..74df948d3 100644
--- a/apps/frontend/src/pages/dashboard/goals.tsx
+++ b/apps/frontend/src/pages/dashboard/goals.tsx
@@ -78,7 +78,7 @@ export function SavingGoals() {
     return (
       <div className="flex flex-wrap gap-4 pb-4">
         <h2 className="text-md font-semibold">Saving Goals</h2>
-        <Card className="border-border/50 bg-success/10 shadow-xs w-full">
+        <Card className="border-border/50 bg-success/10 w-full shadow-xs">
           <CardContent className="px-4 py-6">
             <div className="text-center">
               <p className="text-sm">No saving goals set.</p>
@@ -99,7 +99,7 @@ export function SavingGoals() {
   return (
     <div className="flex flex-wrap gap-4 pb-4">
       <h2 className="text-md font-semibold">Saving Goals</h2>
-      <Card className="shadow-xs w-full">
+      <Card className="w-full shadow-xs">
         <CardContent className="bg-transparent px-4 pt-6">
           {[...goals]
             .sort((a, b) => a.targetAmount - b.targetAmount)
diff --git a/apps/frontend/src/pages/dashboard/top-holdings.tsx b/apps/frontend/src/pages/dashboard/top-holdings.tsx
index ddb024e9f..79a30dcc4 100644
--- a/apps/frontend/src/pages/dashboard/top-holdings.tsx
+++ b/apps/frontend/src/pages/dashboard/top-holdings.tsx
@@ -122,8 +122,8 @@ function TopHoldingsSkeleton() {
         <CardTitle className="text-md">Top Holdings</CardTitle>
       </CardHeader>
       <CardContent>
-        <Card className="shadow-xs w-full">
-          <CardContent className="px-4 pb-2 pt-4">
+        <Card className="w-full shadow-xs">
+          <CardContent className="px-4 pt-4 pb-2">
             {Array.from({ length: 5 }).map((_, i) => (
               <div key={i} className="border-border border-b py-3 last:border-0">
                 <div className="flex items-center justify-between">
@@ -158,7 +158,7 @@ function TopHoldingsEmptyState() {
         <CardTitle className="text-md">Top Holdings</CardTitle>
       </CardHeader>
       <CardContent className="p-0">
-        <Card className="border-border/50 bg-success/10 shadow-xs w-full">
+        <Card className="border-border/50 bg-success/10 w-full shadow-xs">
           <CardContent className="px-4 py-6">
             <div className="text-center">
               <p className="text-sm">No holdings yet.</p>
@@ -227,8 +227,8 @@ export function TopHoldings({ holdings, isLoading, baseCurrency }: TopHoldingsPr
         </Button>
       </CardHeader>
       <CardContent className="p-0">
-        <Card className="shadow-xs w-full">
-          <CardContent className="px-4 pb-2 pt-4">
+        <Card className="w-full shadow-xs">
+          <CardContent className="px-4 pt-4 pb-2">
             {topHoldings.map((holding) => {
               const assetId = holding.instrument?.id ?? holding.id;
               return (
diff --git a/apps/frontend/src/pages/health/components/issue-detail-sheet.tsx b/apps/frontend/src/pages/health/components/issue-detail-sheet.tsx
index e5208c0f2..f1569e57c 100644
--- a/apps/frontend/src/pages/health/components/issue-detail-sheet.tsx
+++ b/apps/frontend/src/pages/health/components/issue-detail-sheet.tsx
@@ -90,7 +90,7 @@ export function IssueDetailSheet({
           {/* Affected Items List - grows to fill space */}
           {issue.affectedItems && issue.affectedItems.length > 0 && (
             <div className="flex min-h-0 flex-1 flex-col gap-3">
-              <h4 className="text-muted-foreground shrink-0 text-xs font-medium uppercase tracking-wide">
+              <h4 className="text-muted-foreground shrink-0 text-xs font-medium tracking-wide uppercase">
                 Affected Items ({issue.affectedItems.length})
               </h4>
               <ScrollArea className="min-h-0 flex-1 rounded-md border">
@@ -133,7 +133,7 @@ export function IssueDetailSheet({
           {(issue.affectedCount > 0 || (issue.affectedMvPct != null && issue.affectedMvPct > 0)) &&
             !issue.affectedItems && (
               <div className="space-y-3">
-                <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
+                <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                   Impact
                 </h4>
                 <div className="grid grid-cols-2 gap-4">
@@ -158,7 +158,7 @@ export function IssueDetailSheet({
           {/* Additional Details */}
           {issue.details && (
             <div className="space-y-2">
-              <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
+              <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                 Details
               </h4>
               <p className="text-muted-foreground text-sm">{issue.details}</p>
@@ -168,7 +168,7 @@ export function IssueDetailSheet({
 
         {/* About this issue - before actions */}
         <div className="shrink-0 space-y-2 border-t pt-6">
-          <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
+          <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             About this issue
           </h4>
           <p className="text-muted-foreground text-sm">{categoryConfig.description}</p>
diff --git a/apps/frontend/src/pages/holdings/components/allocation-detail-sheet.tsx b/apps/frontend/src/pages/holdings/components/allocation-detail-sheet.tsx
index b4a3786f8..5ca51bd31 100644
--- a/apps/frontend/src/pages/holdings/components/allocation-detail-sheet.tsx
+++ b/apps/frontend/src/pages/holdings/components/allocation-detail-sheet.tsx
@@ -258,7 +258,7 @@ export function AllocationDetailSheet({
                               return (
                                 <div
                                   key={child.categoryId}
-                                  className={`flex cursor-pointer items-center gap-3 py-2.5 pl-11 pr-4 transition-colors ${
+                                  className={`flex cursor-pointer items-center gap-3 py-2.5 pr-4 pl-11 transition-colors ${
                                     isChildSelected ? "bg-muted" : "hover:bg-muted/50"
                                   } ${childIdx > 0 ? "border-t border-dashed" : ""}`}
                                   onClick={(e) => {
diff --git a/apps/frontend/src/pages/holdings/components/cash-holdings-widget.tsx b/apps/frontend/src/pages/holdings/components/cash-holdings-widget.tsx
index 522ee197a..86cd14a73 100644
--- a/apps/frontend/src/pages/holdings/components/cash-holdings-widget.tsx
+++ b/apps/frontend/src/pages/holdings/components/cash-holdings-widget.tsx
@@ -33,7 +33,7 @@ export const CashHoldingsWidget = ({
         <div className="flex items-center justify-between gap-3">
           <div className="flex items-center gap-2.5">
             <div>
-              <p className="text-muted-foreground text-xs font-medium uppercase tracking-wider sm:text-xs">
+              <p className="text-muted-foreground text-xs font-medium tracking-wider uppercase sm:text-xs">
                 Cash Balance
               </p>
               <Skeleton className="mt-0.5 h-5 w-24 sm:h-5 sm:w-24" />
@@ -59,7 +59,7 @@ export const CashHoldingsWidget = ({
         {/* Left: Total */}
         <div className="flex items-center gap-2.5">
           <div className="min-w-0">
-            <p className="text-muted-foreground text-xs font-medium uppercase tracking-wider sm:text-xs">
+            <p className="text-muted-foreground text-xs font-medium tracking-wider uppercase sm:text-xs">
               Cash Balance
             </p>
             <p className="text-foreground mt-0.5 text-base font-semibold tracking-tight sm:text-base">
@@ -78,7 +78,7 @@ export const CashHoldingsWidget = ({
             {cashHoldings.map((holding, index) => (
               <div key={holding.id} className="flex items-center gap-2.5">
                 <div className="flex items-center gap-1.5">
-                  <span className="text-muted-foreground text-[10px] font-medium uppercase tracking-wider sm:text-[10px]">
+                  <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase sm:text-[10px]">
                     {holding.localCurrency}
                   </span>
                   <span className="text-foreground text-sm sm:text-sm">
diff --git a/apps/frontend/src/pages/holdings/components/compact-allocation-strip.tsx b/apps/frontend/src/pages/holdings/components/compact-allocation-strip.tsx
index 59d3f2c5c..7e5d13849 100644
--- a/apps/frontend/src/pages/holdings/components/compact-allocation-strip.tsx
+++ b/apps/frontend/src/pages/holdings/components/compact-allocation-strip.tsx
@@ -148,7 +148,7 @@ export function CompactAllocationStrip({
   if (processedCategories.length === 0) {
     return (
       <Card className="p-3">
-        <p className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+        <p className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
           {title}
         </p>
         <p className="text-muted-foreground mt-2 text-xs">No data</p>
@@ -160,7 +160,7 @@ export function CompactAllocationStrip({
     <Card className="p-3">
       <TooltipProvider>
         {/* Title */}
-        <p className="text-muted-foreground mb-2 text-sm font-medium uppercase tracking-wider">
+        <p className="text-muted-foreground mb-2 text-sm font-medium tracking-wider uppercase">
           {title}
         </p>
 
diff --git a/apps/frontend/src/pages/holdings/components/composition-chart.tsx b/apps/frontend/src/pages/holdings/components/composition-chart.tsx
index d3ee4b73f..dc49352e3 100644
--- a/apps/frontend/src/pages/holdings/components/composition-chart.tsx
+++ b/apps/frontend/src/pages/holdings/components/composition-chart.tsx
@@ -340,7 +340,7 @@ export function PortfolioComposition({ holdings, isLoading }: PortfolioCompositi
         <CardHeader className="flex flex-row items-center justify-between space-y-0">
           <div className="flex items-center space-x-2">
             <Icons.LayoutDashboard className="text-muted-foreground h-4 w-4" />
-            <CardTitle className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+            <CardTitle className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
               Composition
             </CardTitle>
           </div>
@@ -380,7 +380,7 @@ export function PortfolioComposition({ holdings, isLoading }: PortfolioCompositi
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0">
         <div className="flex items-center space-x-2">
-          <CardTitle className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+          <CardTitle className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
             Composition
           </CardTitle>
         </div>
diff --git a/apps/frontend/src/pages/holdings/components/currency-chart.tsx b/apps/frontend/src/pages/holdings/components/currency-chart.tsx
index ca9b9c0cd..9cca870d9 100644
--- a/apps/frontend/src/pages/holdings/components/currency-chart.tsx
+++ b/apps/frontend/src/pages/holdings/components/currency-chart.tsx
@@ -98,7 +98,7 @@ export function HoldingCurrencyChart({
         <div className="space-y-6">
           {/* Title */}
           <div className="flex items-center justify-between">
-            <h3 className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+            <h3 className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
               Currency
             </h3>
           </div>
diff --git a/apps/frontend/src/pages/holdings/components/drillable-account-chart.tsx b/apps/frontend/src/pages/holdings/components/drillable-account-chart.tsx
index 49015d1d1..b9f204a9e 100644
--- a/apps/frontend/src/pages/holdings/components/drillable-account-chart.tsx
+++ b/apps/frontend/src/pages/holdings/components/drillable-account-chart.tsx
@@ -171,7 +171,7 @@ export function DrillableAccountChart({
     <Card className="overflow-hidden backdrop-blur-sm">
       <CardHeader>
         {isAtRoot ? (
-          <CardTitle className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+          <CardTitle className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
             Accounts
           </CardTitle>
         ) : (
diff --git a/apps/frontend/src/pages/holdings/components/drillable-donut-chart.tsx b/apps/frontend/src/pages/holdings/components/drillable-donut-chart.tsx
index 706406344..4039728eb 100644
--- a/apps/frontend/src/pages/holdings/components/drillable-donut-chart.tsx
+++ b/apps/frontend/src/pages/holdings/components/drillable-donut-chart.tsx
@@ -131,7 +131,7 @@ export function DrillableDonutChart({
     >
       <CardHeader>
         {isAtRoot ? (
-          <CardTitle className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+          <CardTitle className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
             {title}
           </CardTitle>
         ) : (
diff --git a/apps/frontend/src/pages/holdings/components/holdings-mobile-filter-sheet.tsx b/apps/frontend/src/pages/holdings/components/holdings-mobile-filter-sheet.tsx
index 4041909f4..3cb3ed087 100644
--- a/apps/frontend/src/pages/holdings/components/holdings-mobile-filter-sheet.tsx
+++ b/apps/frontend/src/pages/holdings/components/holdings-mobile-filter-sheet.tsx
@@ -68,7 +68,7 @@ export const HoldingsMobileFilterSheet = ({
             {/* View Settings */}
             <div className="grid grid-cols-1 gap-6">
               <div className="space-y-3">
-                <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+                <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                   Sort By
                 </h4>
                 <AnimatedToggleGroup<"symbol" | "marketValue">
@@ -84,7 +84,7 @@ export const HoldingsMobileFilterSheet = ({
               </div>
 
               <div className="space-y-3">
-                <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+                <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                   Return View
                 </h4>
                 <AnimatedToggleGroup
@@ -105,7 +105,7 @@ export const HoldingsMobileFilterSheet = ({
             {/* Category Filter Section */}
             {setCategoryFilter && (
               <div className="space-y-3">
-                <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+                <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                   Category
                 </h4>
                 <div className="overflow-hidden rounded-lg border">
@@ -138,7 +138,7 @@ export const HoldingsMobileFilterSheet = ({
             {/* Account Filter Section */}
             {showAccountFilter && (
               <div className="space-y-3">
-                <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+                <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                   Account
                 </h4>
                 <div className="overflow-hidden rounded-lg border">
@@ -201,7 +201,7 @@ export const HoldingsMobileFilterSheet = ({
 
             {/* Asset Type Filter Section */}
             <div className="space-y-3">
-              <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+              <h4 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                 Asset Type
               </h4>
               <div className="overflow-hidden rounded-lg border">
diff --git a/apps/frontend/src/pages/holdings/components/holdings-summary-bar.tsx b/apps/frontend/src/pages/holdings/components/holdings-summary-bar.tsx
index eadbbc3f8..26c9c4385 100644
--- a/apps/frontend/src/pages/holdings/components/holdings-summary-bar.tsx
+++ b/apps/frontend/src/pages/holdings/components/holdings-summary-bar.tsx
@@ -79,7 +79,7 @@ function SummaryItem({
 }: SummaryItemProps) {
   return (
     <div className="flex flex-col items-center sm:items-start">
-      <span className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
+      <span className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
         {label}
       </span>
       <AmountDisplay
diff --git a/apps/frontend/src/pages/holdings/components/holdings-table-mobile.tsx b/apps/frontend/src/pages/holdings/components/holdings-table-mobile.tsx
index 030e261f2..bcea3987f 100644
--- a/apps/frontend/src/pages/holdings/components/holdings-table-mobile.tsx
+++ b/apps/frontend/src/pages/holdings/components/holdings-table-mobile.tsx
@@ -142,7 +142,7 @@ export const HoldingsTableMobile = ({
             >
               <Icons.ListFilter className="h-4 w-4" />
               {hasActiveFilters && (
-                <span className="bg-destructive absolute right-0 top-0.5 h-2 w-2 rounded-full" />
+                <span className="bg-destructive absolute top-0.5 right-0 h-2 w-2 rounded-full" />
               )}
             </Button>
           )}
diff --git a/apps/frontend/src/pages/holdings/components/net-worth-widget.tsx b/apps/frontend/src/pages/holdings/components/net-worth-widget.tsx
index 078265146..a2a5ab767 100644
--- a/apps/frontend/src/pages/holdings/components/net-worth-widget.tsx
+++ b/apps/frontend/src/pages/holdings/components/net-worth-widget.tsx
@@ -99,7 +99,7 @@ const NetWorthWidgetError = ({ error, compact = false }: { error: Error; compact
       </div>
       <div className="min-w-0 flex-1">
         <p className="text-destructive text-sm font-medium">Failed to load net worth</p>
-        <p className="text-muted-foreground mt-1 break-words text-xs">
+        <p className="text-muted-foreground mt-1 text-xs break-words">
           {error?.message || "An unexpected error occurred"}
         </p>
       </div>
@@ -221,7 +221,7 @@ export const NetWorthWidget = ({
         <div className="flex items-center justify-between">
           <span
             className={cn(
-              "text-muted-foreground font-medium uppercase tracking-wider",
+              "text-muted-foreground font-medium tracking-wider uppercase",
               compact ? "text-[10px]" : "text-xs",
             )}
           >
diff --git a/apps/frontend/src/pages/holdings/components/sectors-chart.tsx b/apps/frontend/src/pages/holdings/components/sectors-chart.tsx
index 16992164c..35da7be83 100644
--- a/apps/frontend/src/pages/holdings/components/sectors-chart.tsx
+++ b/apps/frontend/src/pages/holdings/components/sectors-chart.tsx
@@ -36,7 +36,7 @@ export function SectorsChart({
     <Card>
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
-          <CardTitle className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+          <CardTitle className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
             Sectors
           </CardTitle>
         </div>
@@ -84,7 +84,7 @@ export function SectorsChart({
                         <div className="bg-secondary relative h-5 flex-1 overflow-hidden rounded">
                           {/* Actual Progress Fill */}
                           <div
-                            className="absolute left-0 top-0 h-full rounded"
+                            className="absolute top-0 left-0 h-full rounded"
                             style={{
                               width: `${percent * 100}%`,
                               backgroundColor: `var(--chart-${(sectors.indexOf(sector) % 9) + 1})`,
@@ -95,14 +95,14 @@ export function SectorsChart({
                             <>
                               {/* Percentage INSIDE the fill, right-aligned, white text */}
                               <div
-                                className="text-background absolute left-0 top-0 flex h-full items-center justify-end pr-1 text-xs font-medium"
+                                className="text-background absolute top-0 left-0 flex h-full items-center justify-end pr-1 text-xs font-medium"
                                 style={{ width: `${percent * 100}%` }}
                               >
                                 <span className="whitespace-nowrap">{formatPercent(percent)}</span>
                               </div>
                               {/* Name OUTSIDE the fill, right-aligned, standard text color */}
                               <div
-                                className="text-foreground absolute top-0 flex h-full items-center justify-end pl-1 pr-1 text-xs font-medium"
+                                className="text-foreground absolute top-0 flex h-full items-center justify-end pr-1 pl-1 text-xs font-medium"
                                 style={{
                                   left: `${percent * 100}%`,
                                   right: "0",
@@ -122,10 +122,10 @@ export function SectorsChart({
                                 right: "0",
                               }}
                             >
-                              <span className="whitespace-nowrap pl-1">
+                              <span className="pl-1 whitespace-nowrap">
                                 {formatPercent(percent)}
                               </span>
-                              <span className="truncate pl-1 pr-1" title={sector.categoryName}>
+                              <span className="truncate pr-1 pl-1" title={sector.categoryName}>
                                 {sector.categoryName}
                               </span>
                             </div>
diff --git a/apps/frontend/src/pages/holdings/components/segmented-allocation-bar.tsx b/apps/frontend/src/pages/holdings/components/segmented-allocation-bar.tsx
index 0dddda30e..4e590ca2f 100644
--- a/apps/frontend/src/pages/holdings/components/segmented-allocation-bar.tsx
+++ b/apps/frontend/src/pages/holdings/components/segmented-allocation-bar.tsx
@@ -65,7 +65,7 @@ export function SegmentedAllocationBar({
       return (
         <Card className="p-3 sm:p-3.5">
           <div className="flex items-center justify-between gap-3">
-            <p className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+            <p className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
               {displayTitle}
             </p>
             <span className="text-muted-foreground text-xs">No data</span>
@@ -76,7 +76,7 @@ export function SegmentedAllocationBar({
     return (
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+          <CardTitle className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
             {displayTitle}
           </CardTitle>
         </CardHeader>
@@ -104,7 +104,7 @@ export function SegmentedAllocationBar({
         <TooltipProvider>
           <div className="space-y-2">
             {/* Title */}
-            <p className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+            <p className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
               {displayTitle}
             </p>
 
@@ -164,7 +164,7 @@ export function SegmentedAllocationBar({
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-muted-foreground text-sm font-medium uppercase tracking-wider">
+        <CardTitle className="text-muted-foreground text-sm font-medium tracking-wider uppercase">
           {displayTitle}
         </CardTitle>
       </CardHeader>
diff --git a/apps/frontend/src/pages/income/income-history-chart.tsx b/apps/frontend/src/pages/income/income-history-chart.tsx
index 534300587..b97cfea2c 100644
--- a/apps/frontend/src/pages/income/income-history-chart.tsx
+++ b/apps/frontend/src/pages/income/income-history-chart.tsx
@@ -149,7 +149,7 @@ export const IncomeHistoryChart: React.FC<IncomeHistoryChartProps> = ({
                       return (
                         <>
                           <div
-                            className="border-border bg-(--color-bg) h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                            className="border-border h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)"
                             style={
                               {
                                 "--color-bg": entry.color,
diff --git a/apps/frontend/src/pages/income/income-page.tsx b/apps/frontend/src/pages/income/income-page.tsx
index ab4eaf5c8..056c34241 100644
--- a/apps/frontend/src/pages/income/income-page.tsx
+++ b/apps/frontend/src/pages/income/income-page.tsx
@@ -84,7 +84,7 @@ export default function IncomePage() {
   if (!periodSummary || !totalSummary) {
     return (
       <>
-        <div className="pointer-events-auto fixed right-2 top-4 z-20 lg:right-4">
+        <div className="pointer-events-auto fixed top-4 right-2 z-20 lg:right-4">
           <IncomePeriodSelector
             selectedPeriod={selectedPeriod}
             onPeriodSelect={setSelectedPeriod}
@@ -164,7 +164,7 @@ export default function IncomePage() {
   return (
     <>
       {/* Period selector - fixed position in header area */}
-      <div className="pointer-events-auto fixed right-2 top-4 z-20 hidden md:block lg:right-4">
+      <div className="pointer-events-auto fixed top-4 right-2 z-20 hidden md:block lg:right-4">
         <IncomePeriodSelector selectedPeriod={selectedPeriod} onPeriodSelect={setSelectedPeriod} />
       </div>
 
@@ -409,7 +409,7 @@ export default function IncomePage() {
                                   {percentage.toFixed(1)}% of total
                                 </div>
                                 {/* Tooltip arrow */}
-                                <div className="border-t-border absolute left-1/2 top-full h-0 w-0 -translate-x-1/2 transform border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent"></div>
+                                <div className="border-t-border absolute top-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-t-4 border-r-4 border-l-4 border-r-transparent border-l-transparent"></div>
                               </div>
                             </div>
                           </div>
diff --git a/apps/frontend/src/pages/layouts/mobile-navigation-container.tsx b/apps/frontend/src/pages/layouts/mobile-navigation-container.tsx
index 71da99ed0..bb2883627 100644
--- a/apps/frontend/src/pages/layouts/mobile-navigation-container.tsx
+++ b/apps/frontend/src/pages/layouts/mobile-navigation-container.tsx
@@ -20,9 +20,9 @@ export function MobileNavigationContainer() {
 
       {/* Pull progress indicator: shows during pull before activation */}
       {!isRefreshing && ptr.isPulling && !ptr.isActivated && (
-        <div className="pointer-events-none absolute left-1/2 top-[calc(env(safe-area-inset-top,0px)+0.25rem)] z-50 -translate-x-1/2">
+        <div className="pointer-events-none absolute top-[calc(env(safe-area-inset-top,0px)+0.25rem)] left-1/2 z-50 -translate-x-1/2">
           <div
-            className="border-border/60 bg-background/70 text-muted-foreground backdrop-saturate-125 flex items-center justify-center rounded-full border px-2 py-2 shadow-sm backdrop-blur-sm transition-transform duration-75 ease-linear"
+            className="border-border/60 bg-background/70 text-muted-foreground flex items-center justify-center rounded-full border px-2 py-2 shadow-sm backdrop-blur-sm backdrop-saturate-125 transition-transform duration-75 ease-linear"
             style={{
               transform: `translateY(${Math.min(ptr.pullDistance * 0.5, 28)}px)`,
               opacity: 0.5 + Math.min(ptr.progress, 1) * 0.5,
@@ -34,7 +34,7 @@ export function MobileNavigationContainer() {
       )}
 
       {(isRefreshing || ptr.isActivated) && (
-        <div className="pointer-events-none absolute left-1/2 top-[calc(env(safe-area-inset-top,0px)+2rem)] z-50 -translate-x-1/2">
+        <div className="pointer-events-none absolute top-[calc(env(safe-area-inset-top,0px)+2rem)] left-1/2 z-50 -translate-x-1/2">
           <div className="bg-background/80 text-muted-foreground flex items-center gap-2 rounded-full px-3 py-1 text-xs backdrop-blur-sm">
             <Icons.Loader className="size-4 animate-spin" />
 
diff --git a/apps/frontend/src/pages/layouts/navigation/app-sidebar.tsx b/apps/frontend/src/pages/layouts/navigation/app-sidebar.tsx
index 375afc52f..0468a4c9a 100644
--- a/apps/frontend/src/pages/layouts/navigation/app-sidebar.tsx
+++ b/apps/frontend/src/pages/layouts/navigation/app-sidebar.tsx
@@ -86,7 +86,7 @@ export function AppSidebar({ navigation }: AppSidebarProps) {
                     document.dispatchEvent(event);
                   }}
                   className={cn(
-                    "text-foreground [&_svg]:size-5! mb-4 h-12 transition-all duration-300",
+                    "text-foreground mb-4 h-12 transition-all duration-300 [&_svg]:size-5!",
                     collapsed
                       ? "justify-center rounded-md"
                       : "bg-muted/50 hover:bg-muted/80 justify-start rounded-full px-4 shadow-none",
@@ -106,7 +106,7 @@ export function AppSidebar({ navigation }: AppSidebarProps) {
                     Search...
                   </span>
                   {!collapsed && (
-                    <kbd className="bg-background text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
+                    <kbd className="bg-background text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
                       <span className="text-xs">⌘</span>K
                     </kbd>
                   )}
@@ -133,7 +133,7 @@ export function AppSidebar({ navigation }: AppSidebarProps) {
                   variant="ghost"
                   onClick={logout}
                   className={cn(
-                    "text-foreground [&_svg]:size-5! mb-1 h-12 rounded-md transition-all duration-300",
+                    "text-foreground mb-1 h-12 rounded-md transition-all duration-300 [&_svg]:size-5!",
                     collapsed ? "justify-center" : "justify-start",
                   )}
                   title="Logout"
@@ -158,7 +158,7 @@ export function AppSidebar({ navigation }: AppSidebarProps) {
                   title="Toggle Sidebar"
                   variant="ghost"
                   onClick={() => setCollapsed(!collapsed)}
-                  className="text-muted-foreground [&_svg]:size-5! cursor-pointer rounded-md hover:bg-transparent"
+                  className="text-muted-foreground cursor-pointer rounded-md hover:bg-transparent [&_svg]:size-5!"
                   aria-label={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}
                 >
                   <Icons.PanelLeftOpen
@@ -193,7 +193,7 @@ function NavItem({ item, collapsed, className, ...props }: NavItemProps) {
       variant={isActive ? "secondary" : "ghost"}
       asChild
       className={cn(
-        "text-foreground [&_svg]:size-5! mb-1 h-12 rounded-md transition-all duration-300",
+        "text-foreground mb-1 h-12 rounded-md transition-all duration-300 [&_svg]:size-5!",
         collapsed ? "justify-center" : "justify-start",
         className,
       )}
@@ -236,7 +236,7 @@ function AddonsMenu({ addons, collapsed }: AddonsMenuProps) {
         <Button
           variant={hasActiveAddon ? "secondary" : "ghost"}
           className={cn(
-            "text-foreground [&_svg]:size-5! mb-1 h-12 rounded-md transition-all duration-300",
+            "text-foreground mb-1 h-12 rounded-md transition-all duration-300 [&_svg]:size-5!",
             collapsed ? "justify-center" : "justify-start",
           )}
         >
diff --git a/apps/frontend/src/pages/layouts/navigation/connect-nav-item.tsx b/apps/frontend/src/pages/layouts/navigation/connect-nav-item.tsx
index 0d9a5626a..d8db5d07f 100644
--- a/apps/frontend/src/pages/layouts/navigation/connect-nav-item.tsx
+++ b/apps/frontend/src/pages/layouts/navigation/connect-nav-item.tsx
@@ -29,7 +29,7 @@ export function ConnectNavItem({ collapsed }: ConnectNavItemProps) {
           variant={isActive ? "secondary" : "ghost"}
           asChild
           className={cn(
-            "text-foreground [&_svg]:size-5! mb-1 h-12 rounded-md transition-all duration-300",
+            "text-foreground mb-1 h-12 rounded-md transition-all duration-300 [&_svg]:size-5!",
             collapsed ? "justify-center" : "justify-start",
           )}
         >
diff --git a/apps/frontend/src/pages/layouts/navigation/floating-navigation-bar.tsx b/apps/frontend/src/pages/layouts/navigation/floating-navigation-bar.tsx
index 32f0ef70b..4a37ab27c 100644
--- a/apps/frontend/src/pages/layouts/navigation/floating-navigation-bar.tsx
+++ b/apps/frontend/src/pages/layouts/navigation/floating-navigation-bar.tsx
@@ -201,7 +201,7 @@ export function FloatingNavigationBar({ navigation }: FloatingNavigationBarProps
                   side="top"
                   align="end"
                   sideOffset={16}
-                  className="mb-0 mr-0 flex w-48 flex-col gap-1 border-0 bg-transparent p-0 shadow-none ring-0 ring-offset-0"
+                  className="mr-0 mb-0 flex w-48 flex-col gap-1 border-0 bg-transparent p-0 shadow-none ring-0 ring-offset-0"
                 >
                   {overflowItems.map((item) => {
                     const isActive = isPathActive(location.pathname, item.href);
@@ -256,7 +256,7 @@ export function FloatingNavigationBar({ navigation }: FloatingNavigationBarProps
                   side="top"
                   align="end"
                   sideOffset={16}
-                  className="mb-0 mr-0 flex w-48 flex-col gap-1 border-0 bg-transparent p-0 shadow-none ring-0 ring-offset-0"
+                  className="mr-0 mb-0 flex w-48 flex-col gap-1 border-0 bg-transparent p-0 shadow-none ring-0 ring-offset-0"
                 >
                   {addonItems.map((item) => {
                     const isActive = isPathActive(location.pathname, item.href);
diff --git a/apps/frontend/src/pages/layouts/navigation/mobile-navbar.tsx b/apps/frontend/src/pages/layouts/navigation/mobile-navbar.tsx
index d9d4ba1ed..2f9c69d52 100644
--- a/apps/frontend/src/pages/layouts/navigation/mobile-navbar.tsx
+++ b/apps/frontend/src/pages/layouts/navigation/mobile-navbar.tsx
@@ -178,7 +178,7 @@ export function MobileNavBar({ navigation }: MobileNavBarProps) {
                   side="top"
                   align="end"
                   sideOffset={16}
-                  className="w-42 mb-0 mr-0 flex flex-col gap-1 border-0 bg-transparent p-0 shadow-none ring-0 ring-offset-0"
+                  className="mr-0 mb-0 flex w-42 flex-col gap-1 border-0 bg-transparent p-0 shadow-none ring-0 ring-offset-0"
                 >
                   {menuItems.map((item) => {
                     const isActive = isPathActive(location.pathname, item.href);
diff --git a/apps/frontend/src/pages/net-worth/net-worth-content.tsx b/apps/frontend/src/pages/net-worth/net-worth-content.tsx
index 1f62ffc1f..11f542f67 100644
--- a/apps/frontend/src/pages/net-worth/net-worth-content.tsx
+++ b/apps/frontend/src/pages/net-worth/net-worth-content.tsx
@@ -96,7 +96,7 @@ function BalanceSheet({ data, currency }: BalanceSheetProps) {
   const hasLiabilities = data.liabilities.total > 0 || data.liabilities.breakdown.length > 0;
 
   return (
-    <div className="border-border bg-card shadow-xs rounded-lg border">
+    <div className="border-border bg-card rounded-lg border shadow-xs">
       {/* Assets Section */}
       <Collapsible open={assetsOpen} onOpenChange={setAssetsOpen}>
         <CollapsibleTrigger className="hover:bg-muted/50 flex w-full items-center justify-between px-4 py-3 transition-colors md:px-5">
@@ -218,7 +218,7 @@ function CompositionWidget({ data, isLoading }: CompositionWidgetProps) {
     return (
       <div className="w-full">
         <h2 className="text-md pb-2 font-semibold tracking-tight">Composition</h2>
-        <div className="border-border bg-card shadow-xs rounded-lg border p-4 md:p-5">
+        <div className="border-border bg-card rounded-lg border p-4 shadow-xs md:p-5">
           <Skeleton className="mb-4 h-2.5 w-full rounded-full" />
           <div className="grid grid-cols-2 gap-x-4 gap-y-2">
             {Array.from({ length: 4 }).map((_, i) => (
@@ -238,7 +238,7 @@ function CompositionWidget({ data, isLoading }: CompositionWidgetProps) {
   return (
     <div className="w-full">
       <h2 className="text-md pb-2 font-semibold tracking-tight">Composition</h2>
-      <div className="border-border bg-card shadow-xs rounded-lg border p-4 md:p-5">
+      <div className="border-border bg-card rounded-lg border p-4 shadow-xs md:p-5">
         {/* Stacked horizontal bar */}
         <div className="mb-4 flex h-2.5 w-full overflow-hidden rounded-full">
           {items.map((item, index) => (
@@ -407,7 +407,7 @@ export function NetWorthContent({ onAddAsset, onAddLiability }: NetWorthContentP
   return (
     <div className="flex min-h-screen flex-col">
       {/* Top section: Net Worth value */}
-      <div className="px-4 pb-1 pt-2 md:px-6 md:pb-2 lg:px-8">
+      <div className="px-4 pt-2 pb-1 md:px-6 md:pb-2 lg:px-8">
         <div className="flex items-start gap-2">
           <div>
             <div className="flex items-center gap-3">
@@ -507,7 +507,7 @@ export function NetWorthContent({ onAddAsset, onAddLiability }: NetWorthContentP
 
       {/* Content section with gradient background - starts at 0.15 to match chart bottom */}
       <div
-        className="grow px-4 pb-[calc(var(--mobile-nav-ui-height)+max(var(--mobile-nav-gap),env(safe-area-inset-bottom)))] pt-4 md:px-6 md:pb-6 md:pt-6 lg:px-10 lg:pb-8 lg:pt-8"
+        className="grow px-4 pt-4 pb-[calc(var(--mobile-nav-ui-height)+max(var(--mobile-nav-gap),env(safe-area-inset-bottom)))] md:px-6 md:pt-6 md:pb-6 lg:px-10 lg:pt-8 lg:pb-8"
         style={{
           backgroundImage: `linear-gradient(to bottom, ${THEME_COLOR.replace(")", " / 0.15)")}, ${THEME_COLOR.replace(")", " / 0.08)")} 50%, ${THEME_COLOR.replace(")", " / 0)")} 100%)`,
         }}
@@ -515,11 +515,11 @@ export function NetWorthContent({ onAddAsset, onAddLiability }: NetWorthContentP
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3 lg:gap-20">
           {/* Left column: Breakdown */}
           <div className="lg:col-span-2">
-            <div className="mb-4 mt-8 w-full lg:mt-0">
+            <div className="mt-8 mb-4 w-full lg:mt-0">
               <h2 className="text-md pb-2 font-semibold tracking-tight">Breakdown</h2>
 
               {isLoading ? (
-                <div className="border-border bg-card shadow-xs rounded-lg border p-4 md:p-5">
+                <div className="border-border bg-card rounded-lg border p-4 shadow-xs md:p-5">
                   <div className="space-y-4">
                     {Array.from({ length: 3 }).map((_, i) => (
                       <div key={i} className="flex items-center justify-between">
diff --git a/apps/frontend/src/pages/not-found.tsx b/apps/frontend/src/pages/not-found.tsx
index 687273d14..02678fbb6 100644
--- a/apps/frontend/src/pages/not-found.tsx
+++ b/apps/frontend/src/pages/not-found.tsx
@@ -7,7 +7,7 @@ export default function NotFoundPage() {
   return (
     <div className="animate-in fade-in zoom-in flex h-full w-full flex-col items-center justify-center gap-6 p-8 text-center duration-500">
       <div className="space-y-2">
-        <h1 className="text-muted-foreground/10 select-none text-9xl font-black tracking-tighter">
+        <h1 className="text-muted-foreground/10 text-9xl font-black tracking-tighter select-none">
           404
         </h1>
         <h2 className="text-3xl font-bold tracking-tight">Page not found</h2>
diff --git a/apps/frontend/src/pages/onboarding/onboarding-appearance.tsx b/apps/frontend/src/pages/onboarding/onboarding-appearance.tsx
index 868d1a880..9cf82797e 100644
--- a/apps/frontend/src/pages/onboarding/onboarding-appearance.tsx
+++ b/apps/frontend/src/pages/onboarding/onboarding-appearance.tsx
@@ -116,7 +116,7 @@ export const OnboardingAppearance = forwardRef<
                   <span className="text-sm font-medium">Light</span>
                 </div>
                 {theme === "light" && (
-                  <div className="bg-primary absolute right-2 top-2 rounded-full p-0.5">
+                  <div className="bg-primary absolute top-2 right-2 rounded-full p-0.5">
                     <Icons.Check className="h-3 w-3 text-white" />
                   </div>
                 )}
@@ -156,7 +156,7 @@ export const OnboardingAppearance = forwardRef<
                   <span className="text-sm font-medium">Dark</span>
                 </div>
                 {theme === "dark" && (
-                  <div className="bg-primary absolute right-2 top-2 rounded-full p-0.5">
+                  <div className="bg-primary absolute top-2 right-2 rounded-full p-0.5">
                     <Icons.Check className="h-3 w-3 text-white" />
                   </div>
                 )}
@@ -196,7 +196,7 @@ export const OnboardingAppearance = forwardRef<
                   <span className="text-sm font-medium">System</span>
                 </div>
                 {theme === "system" && (
-                  <div className="bg-primary absolute right-2 top-2 rounded-full p-0.5">
+                  <div className="bg-primary absolute top-2 right-2 rounded-full p-0.5">
                     <Icons.Check className="h-3 w-3 text-white" />
                   </div>
                 )}
@@ -239,7 +239,7 @@ export const OnboardingAppearance = forwardRef<
                         Track investments with clarity.
                       </div>
                       {/* Secondary: numbers sample */}
-                      <div className="text-muted-foreground/60 whitespace-nowrap text-[10px] sm:text-xs">
+                      <div className="text-muted-foreground/60 text-[10px] whitespace-nowrap sm:text-xs">
                         12345 · $1,234
                       </div>
                     </div>
@@ -254,7 +254,7 @@ export const OnboardingAppearance = forwardRef<
                     <div className="text-muted-foreground text-xs">{f.description}</div>
                   </div>
                   {font === f.value && (
-                    <div className="bg-primary absolute right-2 top-2 rounded-full p-0.5">
+                    <div className="bg-primary absolute top-2 right-2 rounded-full p-0.5">
                       <Icons.Check className="h-3 w-3 text-white" />
                     </div>
                   )}
diff --git a/apps/frontend/src/pages/onboarding/onboarding-page.tsx b/apps/frontend/src/pages/onboarding/onboarding-page.tsx
index 5dc4d3e41..7f5a04bab 100644
--- a/apps/frontend/src/pages/onboarding/onboarding-page.tsx
+++ b/apps/frontend/src/pages/onboarding/onboarding-page.tsx
@@ -113,7 +113,7 @@ const OnboardingPage = () => {
 
       {/* Fixed Footer */}
       <footer className="flex-none pb-[env(safe-area-inset-bottom)]">
-        <div className="sm:pb-18 mx-auto max-w-4xl px-4 pb-8 pt-6 sm:px-6">
+        <div className="mx-auto max-w-4xl px-4 pt-6 pb-8 sm:px-6 sm:pb-18">
           {isFinalStep ? (
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <div className="order-2 sm:order-1">
@@ -137,7 +137,7 @@ const OnboardingPage = () => {
                 )}
                 <Button
                   data-testid="onboarding-finish-button"
-                  className="from-primary to-primary/90 bg-linear-to-r order-1 sm:order-2"
+                  className="from-primary to-primary/90 order-1 bg-linear-to-r sm:order-2"
                   onClick={() => updateSettings({ onboardingCompleted: true })}
                 >
                   Get Started
diff --git a/apps/frontend/src/pages/onboarding/onboarding-step1.tsx b/apps/frontend/src/pages/onboarding/onboarding-step1.tsx
index dab454a88..3f39b72f5 100644
--- a/apps/frontend/src/pages/onboarding/onboarding-step1.tsx
+++ b/apps/frontend/src/pages/onboarding/onboarding-step1.tsx
@@ -10,8 +10,8 @@ export const OnboardingStep1: React.FC = () => {
       </div>
 
       <div className="mx-auto grid gap-5 px-2 md:grid-cols-2 md:gap-6 md:px-4 lg:gap-8">
-        <Card className="border-border/50 from-card to-card/80 hover:border-primary/50 bg-linear-to-br group relative flex flex-col overflow-hidden border-2 p-5 transition-all duration-300 hover:shadow-lg md:p-6">
-          <div className="bg-linear-to-br absolute inset-0 from-green-500/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+        <Card className="border-border/50 from-card to-card/80 hover:border-primary/50 group relative flex flex-col overflow-hidden border-2 bg-linear-to-br p-5 transition-all duration-300 hover:shadow-lg md:p-6">
+          <div className="absolute inset-0 bg-linear-to-br from-green-500/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
 
           {/* Header */}
           <div className="relative mb-3 flex items-center gap-3">
@@ -58,8 +58,8 @@ export const OnboardingStep1: React.FC = () => {
           </div>
         </Card>
 
-        <Card className="border-border/50 from-card to-card/80 hover:border-primary/50 bg-linear-to-br group relative flex flex-col overflow-hidden border-2 p-5 transition-all duration-300 hover:shadow-lg md:p-6">
-          <div className="bg-linear-to-br absolute inset-0 from-blue-500/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+        <Card className="border-border/50 from-card to-card/80 hover:border-primary/50 group relative flex flex-col overflow-hidden border-2 bg-linear-to-br p-5 transition-all duration-300 hover:shadow-lg md:p-6">
+          <div className="absolute inset-0 bg-linear-to-br from-blue-500/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
 
           {/* Header */}
           <div className="relative mb-3 flex items-center gap-3">
diff --git a/apps/frontend/src/pages/onboarding/onboarding-step2.tsx b/apps/frontend/src/pages/onboarding/onboarding-step2.tsx
index 02646c2a0..69db77040 100644
--- a/apps/frontend/src/pages/onboarding/onboarding-step2.tsx
+++ b/apps/frontend/src/pages/onboarding/onboarding-step2.tsx
@@ -163,7 +163,7 @@ export const OnboardingStep2 = forwardRef<OnboardingStep2Handle, OnboardingStep2
                             <button
                               type="button"
                               onClick={() => setShowCurrencySearch(true)}
-                              className="border-border hover:border-primary/50 hover:bg-accent ring-offset-background focus-visible:ring-ring inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+                              className="border-border hover:border-primary/50 hover:bg-accent ring-offset-background focus-visible:ring-ring inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg border-2 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
                             >
                               <Icons.Search className="size-5" />
                               Other
@@ -198,7 +198,7 @@ export const OnboardingStep2 = forwardRef<OnboardingStep2Handle, OnboardingStep2
                 </div>
 
                 <div className="relative mb-4">
-                  <Icons.Search className="text-muted-foreground absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 transform" />
+                  <Icons.Search className="text-muted-foreground absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform" />
                   <Input
                     type="text"
                     placeholder="Search currencies..."
diff --git a/apps/frontend/src/pages/performance/performance-page.tsx b/apps/frontend/src/pages/performance/performance-page.tsx
index c4c77983f..52f6993e2 100644
--- a/apps/frontend/src/pages/performance/performance-page.tsx
+++ b/apps/frontend/src/pages/performance/performance-page.tsx
@@ -102,9 +102,9 @@ function PerformanceContent({
       {isLoading && (
         <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
           <div className="animate-subtle-pulse absolute inset-0 border-2 border-transparent">
-            <div className="animate-progress-border bg-primary absolute left-0 top-0 h-[2px]"></div>
+            <div className="animate-progress-border bg-primary absolute top-0 left-0 h-[2px]"></div>
           </div>
-          <div className="absolute bottom-4 right-4">
+          <div className="absolute right-4 bottom-4">
             <div className="bg-background/80 rounded-md border px-3 py-1.5 shadow-sm backdrop-blur-sm">
               <p className="text-muted-foreground flex items-center text-xs font-medium">
                 <span className="bg-primary mr-2 inline-block h-2 w-2 animate-pulse rounded-full"></span>
@@ -156,7 +156,7 @@ const SelectedItemBadge = ({
       className={cn(
         "text-foreground group relative cursor-pointer rounded-md px-2.5 py-1.5 shadow-sm transition-all sm:px-3",
         "hover:bg-accent/80 hover:shadow-md",
-        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
         isSelected && "bg-warning/20 hover:bg-warning/30",
       )}
       onClick={onSelect}
@@ -354,7 +354,7 @@ export default function PerformancePage() {
   return (
     <>
       {/* Date range selector - fixed position in header area */}
-      <div className="pointer-events-auto fixed right-2 top-4 z-20 hidden md:block lg:right-4">
+      <div className="pointer-events-auto fixed top-4 right-2 z-20 hidden md:block lg:right-4">
         <DateRangeSelector value={dateRange} onChange={setDateRange} />
       </div>
 
@@ -512,7 +512,7 @@ export default function PerformancePage() {
                           <CarouselContent className="-ml-2 md:-ml-4">
                             <CarouselItem className="basis-[38%] pl-2 md:pl-4">
                               <div className="bg-muted/30 flex flex-col gap-0.5 rounded-lg px-3 py-2">
-                                <span className="text-muted-foreground text-[9px] font-medium uppercase tracking-wide">
+                                <span className="text-muted-foreground text-[9px] font-medium tracking-wide uppercase">
                                   Total Return
                                 </span>
                                 <span
@@ -534,7 +534,7 @@ export default function PerformancePage() {
 
                             <CarouselItem className="basis-[38%] pl-2 md:pl-4">
                               <div className="bg-muted/30 flex flex-col gap-0.5 rounded-lg px-3 py-2">
-                                <span className="text-muted-foreground text-[9px] font-medium uppercase tracking-wide">
+                                <span className="text-muted-foreground text-[9px] font-medium tracking-wide uppercase">
                                   Annualized
                                 </span>
                                 <span
@@ -556,7 +556,7 @@ export default function PerformancePage() {
 
                             <CarouselItem className="basis-[38%] pl-2 md:pl-4">
                               <div className="bg-muted/30 flex flex-col gap-0.5 rounded-lg px-3 py-2">
-                                <span className="text-muted-foreground text-[9px] font-medium uppercase tracking-wide">
+                                <span className="text-muted-foreground text-[9px] font-medium tracking-wide uppercase">
                                   Volatility
                                 </span>
                                 <span className="text-foreground text-base font-bold">
@@ -574,7 +574,7 @@ export default function PerformancePage() {
 
                             <CarouselItem className="basis-[38%] pl-2 md:pl-4">
                               <div className="bg-muted/30 flex flex-col gap-0.5 rounded-lg px-3 py-2">
-                                <span className="text-muted-foreground text-[9px] font-medium uppercase tracking-wide">
+                                <span className="text-muted-foreground text-[9px] font-medium tracking-wide uppercase">
                                   Max Drawdown
                                 </span>
                                 <span className="text-destructive text-base font-bold">
diff --git a/apps/frontend/src/pages/settings/about/about-page.tsx b/apps/frontend/src/pages/settings/about/about-page.tsx
index 5bab3c144..338623490 100644
--- a/apps/frontend/src/pages/settings/about/about-page.tsx
+++ b/apps/frontend/src/pages/settings/about/about-page.tsx
@@ -135,7 +135,7 @@ export default function AboutSettingsPage() {
 
               <div className="grid gap-4">
                 <div className="space-y-1">
-                  <p className="text-muted-foreground text-xs uppercase tracking-wide">
+                  <p className="text-muted-foreground text-xs tracking-wide uppercase">
                     Database path
                   </p>
                   <div className="flex items-center gap-2">
@@ -154,7 +154,7 @@ export default function AboutSettingsPage() {
                   </div>
                 </div>
                 <div className="space-y-1">
-                  <p className="text-muted-foreground text-xs uppercase tracking-wide">
+                  <p className="text-muted-foreground text-xs tracking-wide uppercase">
                     Logs directory
                   </p>
                   <div className="flex items-center gap-2">
@@ -181,7 +181,7 @@ export default function AboutSettingsPage() {
           <div className="space-y-4">
             <p className="text-muted-foreground text-sm">
               Have questions or found a bug? Please email us at{" "}
-              <span className="select-all font-mono font-semibold">support@wealthfolio.app</span>
+              <span className="font-mono font-semibold select-all">support@wealthfolio.app</span>
             </p>
             <div className="flex flex-wrap items-center gap-2">
               <Button
diff --git a/apps/frontend/src/pages/settings/accounts/accounts-page.tsx b/apps/frontend/src/pages/settings/accounts/accounts-page.tsx
index aa57762b4..e1e1f3673 100644
--- a/apps/frontend/src/pages/settings/accounts/accounts-page.tsx
+++ b/apps/frontend/src/pages/settings/accounts/accounts-page.tsx
@@ -176,19 +176,19 @@ const SettingsAccountsPage = () => {
         {/* Search and Filter Bar */}
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div className="relative flex-1 sm:max-w-sm">
-            <Icons.Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+            <Icons.Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
             <Input
               type="text"
               placeholder="Search accounts..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="!h-9 pl-9 pr-9 text-sm"
+              className="!h-9 pr-9 pl-9 text-sm"
             />
             {searchQuery && (
               <button
                 type="button"
                 onClick={() => setSearchQuery("")}
-                className="text-muted-foreground hover:text-foreground absolute right-3 top-1/2 -translate-y-1/2"
+                className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
                 aria-label="Clear search"
               >
                 <Icons.Close className="h-4 w-4" />
diff --git a/apps/frontend/src/pages/settings/accounts/components/account-form.tsx b/apps/frontend/src/pages/settings/accounts/components/account-form.tsx
index 016f0a14d..664fe6d8b 100644
--- a/apps/frontend/src/pages/settings/accounts/components/account-form.tsx
+++ b/apps/frontend/src/pages/settings/accounts/components/account-form.tsx
@@ -230,7 +230,7 @@ export function AccountForm({ defaultValues, onSuccess = () => undefined }: Acco
                 {needsSetup && !currentTrackingMode && (
                   <Alert
                     variant="warning"
-                    className="px-3 py-2.5 [&>svg]:left-3 [&>svg]:top-2.5 [&>svg~*]:pl-6"
+                    className="px-3 py-2.5 [&>svg]:top-2.5 [&>svg]:left-3 [&>svg~*]:pl-6"
                   >
                     <Icons.AlertTriangle className="h-4 w-4" />
                     <AlertDescription className="text-xs">
@@ -286,7 +286,7 @@ export function AccountForm({ defaultValues, onSuccess = () => undefined }: Acco
                 {field.value === "HOLDINGS" && (
                   <Alert
                     variant="warning"
-                    className="px-3 py-2.5 [&>svg]:left-3 [&>svg]:top-2.5 [&>svg~*]:pl-6"
+                    className="px-3 py-2.5 [&>svg]:top-2.5 [&>svg]:left-3 [&>svg~*]:pl-6"
                   >
                     <Icons.AlertTriangle className="h-4 w-4" />
                     <AlertDescription className="text-xs">
@@ -311,7 +311,7 @@ export function AccountForm({ defaultValues, onSuccess = () => undefined }: Acco
             control={form.control}
             name="isActive"
             render={({ field }) => (
-              <FormItem className="flex items-center space-x-3 space-y-0 rounded-lg border p-3">
+              <FormItem className="flex items-center space-y-0 space-x-3 rounded-lg border p-3">
                 <FormControl>
                   <Checkbox
                     checked={!field.value}
@@ -334,7 +334,7 @@ export function AccountForm({ defaultValues, onSuccess = () => undefined }: Acco
               control={form.control}
               name="isArchived"
               render={({ field }) => (
-                <FormItem className="border-destructive/30 flex items-center space-x-3 space-y-0 rounded-lg border p-3">
+                <FormItem className="border-destructive/30 flex items-center space-y-0 space-x-3 rounded-lg border p-3">
                   <FormControl>
                     <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                   </FormControl>
diff --git a/apps/frontend/src/pages/settings/addons/addon-settings.tsx b/apps/frontend/src/pages/settings/addons/addon-settings.tsx
index 186bfef6d..56ad167c3 100644
--- a/apps/frontend/src/pages/settings/addons/addon-settings.tsx
+++ b/apps/frontend/src/pages/settings/addons/addon-settings.tsx
@@ -199,7 +199,7 @@ export default function AddonSettingsPage() {
                           <Icons.Refresh className="h-4 w-4" />
                         )}
                         {hasUpdates() && (
-                          <div className="bg-destructive absolute -right-1 -top-1 h-2 w-2 rounded-full" />
+                          <div className="bg-destructive absolute -top-1 -right-1 h-2 w-2 rounded-full" />
                         )}
                       </Button>
                     </div>
diff --git a/apps/frontend/src/pages/settings/addons/components/addon-store-browser.tsx b/apps/frontend/src/pages/settings/addons/components/addon-store-browser.tsx
index 338b5577a..b605724c7 100644
--- a/apps/frontend/src/pages/settings/addons/components/addon-store-browser.tsx
+++ b/apps/frontend/src/pages/settings/addons/components/addon-store-browser.tsx
@@ -209,7 +209,7 @@ export function AddonStoreBrowser({ installedAddonIds, onInstallSuccess }: Addon
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
         {/* Search */}
         <div className="relative flex-1">
-          <Icons.Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+          <Icons.Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
           <Input
             placeholder="Search addons..."
             value={searchQuery}
diff --git a/apps/frontend/src/pages/settings/addons/components/addon-store-card.tsx b/apps/frontend/src/pages/settings/addons/components/addon-store-card.tsx
index bf63c4d8c..942526315 100644
--- a/apps/frontend/src/pages/settings/addons/components/addon-store-card.tsx
+++ b/apps/frontend/src/pages/settings/addons/components/addon-store-card.tsx
@@ -51,7 +51,7 @@ export function AddonStoreCard({
 
   return (
     <Card className="hover:shadow-primary/10 group relative h-full overflow-hidden transition-all duration-200 hover:shadow-lg">
-      <CardHeader className="pb-2 pt-8">
+      <CardHeader className="pt-8 pb-2">
         <CardTitle className="line-clamp-1 text-sm">{listing.name}</CardTitle>
         <CardDescription className="line-clamp-2 text-xs">{listing.description}</CardDescription>
       </CardHeader>
@@ -473,7 +473,7 @@ export function AddonStoreCard({
       </div>
 
       {/* Status Indicators */}
-      <div className="absolute right-2 top-2 flex flex-col gap-1 opacity-90">
+      <div className="absolute top-2 right-2 flex flex-col gap-1 opacity-90">
         {isInstalled && (
           <Badge
             variant="secondary"
diff --git a/apps/frontend/src/pages/settings/addons/components/addon-update-card.tsx b/apps/frontend/src/pages/settings/addons/components/addon-update-card.tsx
index e7f09f2ab..895bb3644 100644
--- a/apps/frontend/src/pages/settings/addons/components/addon-update-card.tsx
+++ b/apps/frontend/src/pages/settings/addons/components/addon-update-card.tsx
@@ -142,7 +142,7 @@ export function AddonUpdateCard({
                     {updateInfo.releaseNotes && (
                       <div className="space-y-2">
                         <h4 className="font-medium">Release Notes</h4>
-                        <div className="text-muted-foreground whitespace-pre-wrap text-sm">
+                        <div className="text-muted-foreground text-sm whitespace-pre-wrap">
                           {updateInfo.releaseNotes}
                         </div>
                       </div>
diff --git a/apps/frontend/src/pages/settings/exports/exports-form.tsx b/apps/frontend/src/pages/settings/exports/exports-form.tsx
index 49d8a6159..40ba81023 100644
--- a/apps/frontend/src/pages/settings/exports/exports-form.tsx
+++ b/apps/frontend/src/pages/settings/exports/exports-form.tsx
@@ -107,7 +107,7 @@ export const ExportForm = () => {
   return (
     <>
       <div className="mt-8 px-2">
-        <h3 className="pb-3 pt-5 font-semibold">Choose Your Preferred Format</h3>
+        <h3 className="pt-5 pb-3 font-semibold">Choose Your Preferred Format</h3>
         <RadioGroup
           onValueChange={setSelectedFormat}
           className="grid grid-cols-1 gap-4 md:grid-cols-3"
@@ -132,7 +132,7 @@ export const ExportForm = () => {
 
       {selectedFormat && (
         <div className="px-2 pt-4">
-          <h3 className="pb-3 pt-5 font-semibold">Customize Your Export</h3>
+          <h3 className="pt-5 pb-3 font-semibold">Customize Your Export</h3>
           {dataTypes[selectedFormat as keyof typeof dataTypes].map((item) => (
             <Card key={item.key} className="mb-4">
               <CardContent className="flex items-center justify-between p-4">
diff --git a/apps/frontend/src/pages/settings/goals/components/goal-allocations.tsx b/apps/frontend/src/pages/settings/goals/components/goal-allocations.tsx
index 5651fa0df..314019d3b 100644
--- a/apps/frontend/src/pages/settings/goals/components/goal-allocations.tsx
+++ b/apps/frontend/src/pages/settings/goals/components/goal-allocations.tsx
@@ -89,13 +89,13 @@ const GoalsAllocations: React.FC<GoalsAllocationsProps> = ({
               ))}
             </tr>
             <tr>
-              <td className="bg-muted text-muted-foreground sticky left-0 z-10 border-r border-t px-4 py-2 text-xs">
+              <td className="bg-muted text-muted-foreground sticky left-0 z-10 border-t border-r px-4 py-2 text-xs">
                 Total
               </td>
               {accounts.map((account) => (
                 <td
                   key={account.id}
-                  className={`text-muted-foreground border-l border-t px-4 py-2 text-right text-xs ${
+                  className={`text-muted-foreground border-t border-l px-4 py-2 text-right text-xs ${
                     totalAllocations[account.id] > 100 ? "text-destructive" : ""
                   }`}
                 >
diff --git a/apps/frontend/src/pages/settings/goals/goals-page.tsx b/apps/frontend/src/pages/settings/goals/goals-page.tsx
index bb58e4dc9..acc91f99e 100644
--- a/apps/frontend/src/pages/settings/goals/goals-page.tsx
+++ b/apps/frontend/src/pages/settings/goals/goals-page.tsx
@@ -92,7 +92,7 @@ const SettingsGoalsPage = () => {
                 ))}
               </div>
               <h3 className="p-2 pt-12 text-xl font-bold">Allocations</h3>
-              <h5 className="text-muted-foreground p-2 pb-4 pt-0 text-sm font-light">
+              <h5 className="text-muted-foreground p-2 pt-0 pb-4 text-sm font-light">
                 Click on a cell to specify the percentage of each account&apos;s allocation to your
                 goals.
               </h5>
diff --git a/apps/frontend/src/pages/settings/market-data/components/quote-import-help-popover.tsx b/apps/frontend/src/pages/settings/market-data/components/quote-import-help-popover.tsx
index e13942b8d..f6f39c867 100644
--- a/apps/frontend/src/pages/settings/market-data/components/quote-import-help-popover.tsx
+++ b/apps/frontend/src/pages/settings/market-data/components/quote-import-help-popover.tsx
@@ -62,7 +62,7 @@ export function QuoteImportHelpPopover() {
             <div className="space-y-4">
               <div>
                 <p className="font-semibold">Required CSV Format:</p>
-                <pre className="bg-muted mt-2 select-all overflow-x-auto rounded-md p-3 text-xs leading-relaxed">
+                <pre className="bg-muted mt-2 overflow-x-auto rounded-md p-3 text-xs leading-relaxed select-all">
                   <span className="text-muted-foreground">
                     # Required columns: symbol, date, close
                   </span>
diff --git a/apps/frontend/src/pages/settings/market-data/market-data-settings.tsx b/apps/frontend/src/pages/settings/market-data/market-data-settings.tsx
index 8de63cde1..05ad05b6d 100644
--- a/apps/frontend/src/pages/settings/market-data/market-data-settings.tsx
+++ b/apps/frontend/src/pages/settings/market-data/market-data-settings.tsx
@@ -253,7 +253,7 @@ function ProviderSettings({
             <div className="grid gap-6 md:grid-cols-2">
               {/* Left column - Capabilities */}
               <div className="space-y-4">
-                <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
+                <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                   Capabilities
                 </h4>
                 <div className="space-y-3">
@@ -319,7 +319,7 @@ function ProviderSettings({
 
               {/* Right column - Settings */}
               <div className="space-y-4">
-                <h4 className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
+                <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                   Settings
                 </h4>
                 <div className="space-y-4">
diff --git a/apps/frontend/src/pages/settings/settings-header.tsx b/apps/frontend/src/pages/settings/settings-header.tsx
index b28646f64..35f20701f 100644
--- a/apps/frontend/src/pages/settings/settings-header.tsx
+++ b/apps/frontend/src/pages/settings/settings-header.tsx
@@ -53,9 +53,9 @@ export function SettingsHeader({
           </Button>
         )}
         <div className="grid min-w-0 gap-1">
-          <h1 className="font-heading break-words text-lg font-bold lg:text-xl">{heading}</h1>
+          <h1 className="font-heading text-lg font-bold break-words lg:text-xl">{heading}</h1>
           {text && (
-            <p className="text-muted-foreground lg:text-md break-words text-sm font-light">
+            <p className="text-muted-foreground lg:text-md text-sm font-light break-words">
               {text}
             </p>
           )}
diff --git a/apps/frontend/src/pages/settings/settings-layout.tsx b/apps/frontend/src/pages/settings/settings-layout.tsx
index 76d6090dd..1b158e82e 100644
--- a/apps/frontend/src/pages/settings/settings-layout.tsx
+++ b/apps/frontend/src/pages/settings/settings-layout.tsx
@@ -139,7 +139,7 @@ export default function SettingsLayout() {
             <div className="space-y-6 p-3 pb-[calc(var(--mobile-nav-ui-height)+max(var(--mobile-nav-gap),env(safe-area-inset-bottom)))] lg:p-4 lg:pb-4">
               {settingsSections.map((section) => (
                 <div key={section.title} className="space-y-3">
-                  <div className="text-muted-foreground px-2 text-xs font-semibold uppercase tracking-widest">
+                  <div className="text-muted-foreground px-2 text-xs font-semibold tracking-widest uppercase">
                     {section.title}
                   </div>
                   <div className="divide-border bg-card divide-y overflow-hidden rounded-2xl border shadow-sm">
@@ -194,7 +194,7 @@ export default function SettingsLayout() {
               <div className="space-y-6">
                 {settingsSections.map((section) => (
                   <div key={section.title} className="space-y-2">
-                    <div className="text-muted-foreground pl-2 text-sm font-light uppercase tracking-widest">
+                    <div className="text-muted-foreground pl-2 text-sm font-light tracking-widest uppercase">
                       {section.title}
                     </div>
                     <SidebarNav items={section.items} />
diff --git a/apps/frontend/src/pages/settings/taxonomies/taxonomies-page.tsx b/apps/frontend/src/pages/settings/taxonomies/taxonomies-page.tsx
index daedb5c2b..b873c342d 100644
--- a/apps/frontend/src/pages/settings/taxonomies/taxonomies-page.tsx
+++ b/apps/frontend/src/pages/settings/taxonomies/taxonomies-page.tsx
@@ -147,7 +147,7 @@ export default function TaxonomiesPage() {
           {/* Categories and details */}
           <div className="flex min-h-[500px] flex-col lg:flex-row">
             {/* Category tree */}
-            <div className="w-full border-b lg:w-80 lg:border-b-0 lg:border-r">
+            <div className="w-full border-b lg:w-80 lg:border-r lg:border-b-0">
               <ScrollArea className="h-[300px] lg:h-[500px]">
                 {isLoadingCategories ? (
                   <div className="text-muted-foreground p-4 text-center text-sm">Loading...</div>
diff --git a/docs/adr/TEMPLATE.md b/docs/adr/TEMPLATE.md
index dfca0527a..f64ca8c72 100644
--- a/docs/adr/TEMPLATE.md
+++ b/docs/adr/TEMPLATE.md
@@ -1,58 +1,64 @@
 # ADR Template
 
-> **Architecture Decision Record** — Use this template for all significant architectural decisions.
+> **Architecture Decision Record** — Use this template for all significant
+> architectural decisions.
 
 ---
 
 ## ADR-NNN: [Short Title]
 
-| Field | Value |
-|-------|-------|
-| **Status** | Proposed \| Accepted \| Deprecated \| Superseded |
-| **Date** | YYYY-MM-DD |
-| **Authors** | [@author] |
-| **Reviewers** | [@reviewer] |
-| **Supersedes** | ADR-NNN (if applicable) |
+| Field          | Value                                            |
+| -------------- | ------------------------------------------------ |
+| **Status**     | Proposed \| Accepted \| Deprecated \| Superseded |
+| **Date**       | YYYY-MM-DD                                       |
+| **Authors**    | [@author]                                        |
+| **Reviewers**  | [@reviewer]                                      |
+| **Supersedes** | ADR-NNN (if applicable)                          |
 
 ---
 
 ## Context
 
-> What is the issue that we're seeing that is motivating this decision or change?
-> Describe the forces at play: technical, business, team, regulatory.
+> What is the issue that we're seeing that is motivating this decision or
+> change? Describe the forces at play: technical, business, team, regulatory.
 > Include relevant data, metrics, or constraints.
 
 ## Decision
 
-> What is the change that we're proposing and/or doing?
-> State the decision clearly and concisely. Use "We will..." language.
+> What is the change that we're proposing and/or doing? State the decision
+> clearly and concisely. Use "We will..." language.
 
 ## Consequences
 
 > What becomes easier or more difficult to do because of this change?
 
 ### Positive
+
 - [Benefit 1]
 - [Benefit 2]
 
 ### Negative
+
 - [Drawback 1]
 - [Drawback 2]
 
 ### Risks
+
 - [Risk 1 and mitigation strategy]
 
 ## Alternatives Considered
 
 | Alternative | Pros | Cons | Why Rejected |
-|-------------|------|------|--------------|
-| [Option A] | ... | ... | ... |
-| [Option B] | ... | ... | ... |
+| ----------- | ---- | ---- | ------------ |
+| [Option A]  | ...  | ...  | ...          |
+| [Option B]  | ...  | ...  | ...          |
 
 ## Compliance
 
 > Does this decision affect any architectural guardrails?
-> - [ ] Reviewed against [ARCHITECTURAL_GUARDRAILS.md](../../ARCHITECTURAL_GUARDRAILS.md)
+>
+> - [ ] Reviewed against
+>       [ARCHITECTURAL_GUARDRAILS.md](../../ARCHITECTURAL_GUARDRAILS.md)
 > - [ ] Any guardrail exceptions documented and justified
 
 ## References
diff --git a/packages/ui/src/components/common/action-confirm.tsx b/packages/ui/src/components/common/action-confirm.tsx
index 14528dfb1..f8875300a 100644
--- a/packages/ui/src/components/common/action-confirm.tsx
+++ b/packages/ui/src/components/common/action-confirm.tsx
@@ -60,7 +60,7 @@ export const ActionConfirm = ({
       <PopoverContent className="w-80" align="end" side={side}>
         <div className="space-y-4">
           <div className="space-y-2">
-            <h4 className="font-medium leading-none">{confirmTitle}</h4>
+            <h4 className="leading-none font-medium">{confirmTitle}</h4>
             <p className="text-muted-foreground text-sm">{confirmMessage}</p>
           </div>
           <div className="flex justify-end gap-2">
diff --git a/packages/ui/src/components/common/delete-confirm.tsx b/packages/ui/src/components/common/delete-confirm.tsx
index 2c11a014b..e2a2514ce 100644
--- a/packages/ui/src/components/common/delete-confirm.tsx
+++ b/packages/ui/src/components/common/delete-confirm.tsx
@@ -42,7 +42,7 @@ export const DeleteConfirm = ({
       <PopoverContent className="w-80" align="end">
         <div className="space-y-4">
           <div className="space-y-2">
-            <h4 className="font-medium leading-none">{deleteConfirmTitle}</h4>
+            <h4 className="leading-none font-medium">{deleteConfirmTitle}</h4>
             <p className="text-muted-foreground text-sm">{deleteConfirmMessage}</p>
           </div>
           <div className="flex justify-end gap-2">
diff --git a/packages/ui/src/components/common/donut-chart.tsx b/packages/ui/src/components/common/donut-chart.tsx
index d29e38838..31c885acf 100644
--- a/packages/ui/src/components/common/donut-chart.tsx
+++ b/packages/ui/src/components/common/donut-chart.tsx
@@ -65,7 +65,7 @@ const ChartCenterLabel: React.FC<ChartCenterLabelProps> = ({ activeData, totalVa
 
   return (
     <TooltipProvider>
-      <div className="pointer-events-auto absolute left-1/2 top-[108px] -translate-x-1/2 -translate-y-1/2 text-center">
+      <div className="pointer-events-auto absolute top-[108px] left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
         <p className="text-muted-foreground text-xs font-medium">{activeData.name}</p>
         <Tooltip delayDuration={100}>
           <TooltipTrigger asChild>
diff --git a/packages/ui/src/components/common/error-boundary.tsx b/packages/ui/src/components/common/error-boundary.tsx
index 68e018463..6cba735d6 100644
--- a/packages/ui/src/components/common/error-boundary.tsx
+++ b/packages/ui/src/components/common/error-boundary.tsx
@@ -55,7 +55,7 @@ function ErrorFallback({ error }: { error?: Error }) {
         {showDetails && error && (
           <div className="bg-muted/50 mt-4 w-full overflow-hidden rounded-lg border">
             <div className="border-b px-3 py-2">
-              <span className="text-muted-foreground text-xs font-medium uppercase tracking-wide">Error details</span>
+              <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">Error details</span>
             </div>
             <pre className="text-foreground/80 max-h-40 overflow-auto p-3 font-mono text-xs leading-relaxed">
               {error.message}
diff --git a/packages/ui/src/components/data-grid/data-grid-cell-variants.tsx b/packages/ui/src/components/data-grid/data-grid-cell-variants.tsx
index e10d825bc..29b0dd470 100644
--- a/packages/ui/src/components/data-grid/data-grid-cell-variants.tsx
+++ b/packages/ui/src/components/data-grid/data-grid-cell-variants.tsx
@@ -171,7 +171,7 @@ export function ShortTextCell<TData>({
         onInput={onInput}
         suppressContentEditableWarning
         className={cn("size-full overflow-hidden outline-none", {
-          "**:inline **:whitespace-nowrap whitespace-nowrap [&_br]:hidden": isEditing,
+          "whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden": isEditing,
         })}
       >
         {displayValue}
@@ -749,7 +749,7 @@ export function UrlCell<TData>({
             href={urlHref}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-primary decoration-primary/30 hover:decoration-primary/60 data-focused:text-foreground data-invalid:text-destructive data-focused:decoration-foreground/50 data-invalid:decoration-destructive/50 data-focused:hover:decoration-foreground/70 data-invalid:hover:decoration-destructive/70 data-invalid:cursor-not-allowed truncate underline underline-offset-2"
+            className="text-primary decoration-primary/30 hover:decoration-primary/60 data-focused:text-foreground data-invalid:text-destructive data-focused:decoration-foreground/50 data-invalid:decoration-destructive/50 data-focused:hover:decoration-foreground/70 data-invalid:hover:decoration-destructive/70 truncate underline underline-offset-2 data-invalid:cursor-not-allowed"
             onClick={onLinkClick}
           >
             {displayValue}
@@ -766,7 +766,7 @@ export function UrlCell<TData>({
           onInput={onInput}
           suppressContentEditableWarning
           className={cn("size-full overflow-hidden outline-none", {
-            "**:inline **:whitespace-nowrap whitespace-nowrap [&_br]:hidden": isEditing,
+            "whitespace-nowrap **:inline **:whitespace-nowrap [&_br]:hidden": isEditing,
           })}
         >
           {displayValue}
@@ -979,7 +979,7 @@ export function SelectCell<TData>({
     }
 
     return (
-      <Badge data-slot="grid-cell-content" variant="secondary" className="whitespace-pre-wrap px-1.5 text-xs">
+      <Badge data-slot="grid-cell-content" variant="secondary" className="px-1.5 text-xs whitespace-pre-wrap">
         {displayLabel}
       </Badge>
     );
@@ -1009,7 +1009,7 @@ export function SelectCell<TData>({
         <Select value={selectValue} onValueChange={onValueChange} open={isEditing} onOpenChange={onOpenChange}>
           <SelectTrigger className="size-full h-auto items-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden">
             {displayLabel ? (
-              <Badge variant="secondary" className="whitespace-pre-wrap px-1.5 text-xs">
+              <Badge variant="secondary" className="px-1.5 text-xs whitespace-pre-wrap">
                 <SelectValue />
               </Badge>
             ) : (
@@ -1250,7 +1250,7 @@ export function MultiSelectCell<TData>({
               </div>
               <CommandList className="max-h-full">
                 <CommandEmpty>No options found.</CommandEmpty>
-                <CommandGroup className="max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden">
+                <CommandGroup className="max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto">
                   {options.map((option) => {
                     const isSelected = selectedValues.includes(option.value);
 
@@ -2344,7 +2344,7 @@ export function FileCell<TData>({
                 data-invalid={error ? "" : undefined}
                 data-disabled={isPending ? "" : undefined}
                 tabIndex={isDragging || isPending ? -1 : 0}
-                className="hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 outline-none transition-colors"
+                className="hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20 flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 transition-colors outline-none data-disabled:pointer-events-none data-disabled:opacity-50"
                 ref={dropzoneRef}
                 onClick={onDropzoneClick}
                 onDragEnter={onDropzoneDragEnter}
@@ -2404,7 +2404,7 @@ export function FileCell<TData>({
                         <div
                           key={file.id}
                           data-pending={isFilePending ? "" : undefined}
-                          className="bg-muted/50 data-pending:opacity-60 flex items-center gap-2 rounded-md border px-2 py-1.5"
+                          className="bg-muted/50 flex items-center gap-2 rounded-md border px-2 py-1.5 data-pending:opacity-60"
                         >
                           {FileIcon && <FileIcon className="text-muted-foreground size-4 shrink-0" />}
                           <div className="flex-1 overflow-hidden">
diff --git a/packages/ui/src/components/data-grid/data-grid-cell-wrapper.tsx b/packages/ui/src/components/data-grid/data-grid-cell-wrapper.tsx
index aa0efaa5f..9bc258530 100644
--- a/packages/ui/src/components/data-grid/data-grid-cell-wrapper.tsx
+++ b/packages/ui/src/components/data-grid/data-grid-cell-wrapper.tsx
@@ -183,7 +183,7 @@ export function DataGridCellWrapper<TData>({
       ref={composedRef}
       style={{ ...props.style, ...cellStateStyle }}
       className={cn(
-        "has-data-[slot=checkbox]:pt-2.5 size-full px-2 py-1.5 text-start text-sm outline-none",
+        "size-full px-2 py-1.5 text-start text-sm outline-none has-data-[slot=checkbox]:pt-2.5",
         {
           "ring-ring ring-1 ring-inset": isFocused,
           "bg-yellow-100 dark:bg-yellow-900/30": isSearchMatch && !isActiveSearchMatch,
diff --git a/packages/ui/src/components/data-grid/data-grid-column-header.tsx b/packages/ui/src/components/data-grid/data-grid-column-header.tsx
index 46f36c798..e90a27a3d 100644
--- a/packages/ui/src/components/data-grid/data-grid-column-header.tsx
+++ b/packages/ui/src/components/data-grid/data-grid-column-header.tsx
@@ -117,7 +117,7 @@ export function DataGridColumnHeader<TData, TValue>({
           {column.getCanSort() && (
             <>
               <DropdownMenuCheckboxItem
-                className="[&_svg]:text-muted-foreground relative ltr:pl-2 ltr:pr-8 rtl:pl-8 rtl:pr-2 [&>span:first-child]:ltr:left-auto [&>span:first-child]:ltr:right-2 [&>span:first-child]:rtl:left-2 [&>span:first-child]:rtl:right-auto"
+                className="[&_svg]:text-muted-foreground relative ltr:pr-8 ltr:pl-2 rtl:pr-2 rtl:pl-8 [&>span:first-child]:ltr:right-2 [&>span:first-child]:ltr:left-auto [&>span:first-child]:rtl:right-auto [&>span:first-child]:rtl:left-2"
                 checked={column.getIsSorted() === "asc"}
                 onClick={() => onSortingChange("asc")}
               >
@@ -125,7 +125,7 @@ export function DataGridColumnHeader<TData, TValue>({
                 Sort asc
               </DropdownMenuCheckboxItem>
               <DropdownMenuCheckboxItem
-                className="[&_svg]:text-muted-foreground relative ltr:pl-2 ltr:pr-8 rtl:pl-8 rtl:pr-2 [&>span:first-child]:ltr:left-auto [&>span:first-child]:ltr:right-2 [&>span:first-child]:rtl:left-2 [&>span:first-child]:rtl:right-auto"
+                className="[&_svg]:text-muted-foreground relative ltr:pr-8 ltr:pl-2 rtl:pr-2 rtl:pl-8 [&>span:first-child]:ltr:right-2 [&>span:first-child]:ltr:left-auto [&>span:first-child]:rtl:right-auto [&>span:first-child]:rtl:left-2"
                 checked={column.getIsSorted() === "desc"}
                 onClick={() => onSortingChange("desc")}
               >
@@ -221,7 +221,7 @@ function DataGridColumnResizerImpl<TData, TValue>({ header, table, label }: Data
       aria-valuemax={defaultColumnDef.maxSize}
       tabIndex={0}
       className={cn(
-        "bg-border hover:bg-primary focus:bg-primary absolute -end-px top-0 z-50 h-full w-0.5 cursor-ew-resize touch-none select-none transition-opacity after:absolute after:inset-y-0 after:start-1/2 after:h-full after:w-[18px] after:-translate-x-1/2 after:content-[''] focus:outline-none",
+        "bg-border hover:bg-primary focus:bg-primary absolute -end-px top-0 z-50 h-full w-0.5 cursor-ew-resize touch-none transition-opacity select-none after:absolute after:inset-y-0 after:start-1/2 after:h-full after:w-[18px] after:-translate-x-1/2 after:content-[''] focus:outline-none",
         header.column.getIsResizing() ? "bg-primary" : "opacity-0 hover:opacity-100",
       )}
       onDoubleClick={onDoubleClick}
diff --git a/packages/ui/src/components/data-grid/data-grid-paste-dialog.tsx b/packages/ui/src/components/data-grid/data-grid-paste-dialog.tsx
index 5ac90b2b8..f651f6eda 100644
--- a/packages/ui/src/components/data-grid/data-grid-paste-dialog.tsx
+++ b/packages/ui/src/components/data-grid/data-grid-paste-dialog.tsx
@@ -76,7 +76,7 @@ function PasteDialogImpl({
           <label className="flex cursor-pointer items-start gap-3">
             <RadioItem ref={expandRadioRef} name="expand-option" value="expand" defaultChecked />
             <div className="flex flex-col gap-1">
-              <span className="text-sm font-medium leading-none">Create new rows</span>
+              <span className="text-sm leading-none font-medium">Create new rows</span>
               <span className="text-muted-foreground text-sm">
                 Add {pasteDialog.rowsNeeded} new row
                 {pasteDialog.rowsNeeded !== 1 ? "s" : ""} to the table and paste all data
@@ -86,7 +86,7 @@ function PasteDialogImpl({
           <label className="flex cursor-pointer items-start gap-3">
             <RadioItem name="expand-option" value="no-expand" />
             <div className="flex flex-col gap-1">
-              <span className="text-sm font-medium leading-none">Keep current rows</span>
+              <span className="text-sm leading-none font-medium">Keep current rows</span>
               <span className="text-muted-foreground text-sm">Paste only what fits in the existing rows</span>
             </div>
           </label>
@@ -107,7 +107,7 @@ function RadioItem({ className, ...props }: React.ComponentProps<"input">) {
     <input
       type="radio"
       className={cn(
-        "border-input bg-background shadow-xs relative size-4 shrink-0 appearance-none rounded-full border outline-none transition-[color,box-shadow]",
+        "border-input bg-background relative size-4 shrink-0 appearance-none rounded-full border shadow-xs transition-[color,box-shadow] outline-none",
         "text-primary focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "checked:before:bg-primary checked:before:absolute checked:before:start-1/2 checked:before:top-1/2 checked:before:size-2 checked:before:-translate-x-1/2 checked:before:-translate-y-1/2 checked:before:rounded-full checked:before:content-['']",
diff --git a/packages/ui/src/components/data-grid/data-grid-search.tsx b/packages/ui/src/components/data-grid/data-grid-search.tsx
index de9c126af..f54a227ee 100644
--- a/packages/ui/src/components/data-grid/data-grid-search.tsx
+++ b/packages/ui/src/components/data-grid/data-grid-search.tsx
@@ -181,7 +181,7 @@ function DataGridSearchImpl({
           </Button>
         </div>
       </div>
-      <div className="text-muted-foreground flex items-center gap-1 whitespace-nowrap text-xs">
+      <div className="text-muted-foreground flex items-center gap-1 text-xs whitespace-nowrap">
         {searchMatches.length > 0 ? (
           <span>
             {matchIndex + 1} of {searchMatches.length}
diff --git a/packages/ui/src/components/data-grid/data-grid.tsx b/packages/ui/src/components/data-grid/data-grid.tsx
index b0f45b1f5..59df46cde 100644
--- a/packages/ui/src/components/data-grid/data-grid.tsx
+++ b/packages/ui/src/components/data-grid/data-grid.tsx
@@ -89,7 +89,7 @@ export function DataGrid<TData>({
         data-slot="grid"
         tabIndex={0}
         ref={dataGridRef}
-        className={cn("relative grid select-none overflow-auto rounded-md border focus:outline-none", className)}
+        className={cn("relative grid overflow-auto rounded-md border select-none focus:outline-none", className)}
         style={{
           ...columnSizeVars,
           ...(height !== undefined && {
diff --git a/packages/ui/src/components/financial/currency-input.tsx b/packages/ui/src/components/financial/currency-input.tsx
index 15ba7a990..c9086cdf5 100644
--- a/packages/ui/src/components/financial/currency-input.tsx
+++ b/packages/ui/src/components/financial/currency-input.tsx
@@ -135,10 +135,10 @@ export const CurrencyInput = forwardRef<HTMLButtonElement, CurrencyInputProps>(
           <Sheet open={open} onOpenChange={setOpen}>
             <SheetContent
               side="bottom"
-              className="rounded-t-4xl mx-1 h-[85vh] p-0"
+              className="mx-1 h-[85vh] rounded-t-4xl p-0"
               onOpenAutoFocus={handleOpenAutoFocus}
             >
-              <SheetHeader className="border-border border-b px-6 pb-4 pt-6">
+              <SheetHeader className="border-border border-b px-6 pt-6 pb-4">
                 <SheetTitle>Select Currency</SheetTitle>
                 <SheetDescription>Choose your activity currency</SheetDescription>
               </SheetHeader>
@@ -174,7 +174,7 @@ export const CurrencyInput = forwardRef<HTMLButtonElement, CurrencyInputProps>(
                 </div>
                 <div className="border-border border-b px-6 py-4">
                   <div className="relative">
-                    <Icons.Search className="text-muted-foreground absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2" />
+                    <Icons.Search className="text-muted-foreground absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2" />
                     <Input
                       ref={searchInputRef}
                       type="text"
diff --git a/packages/ui/src/components/financial/gain-percent.tsx b/packages/ui/src/components/financial/gain-percent.tsx
index 818853071..85495ad6c 100644
--- a/packages/ui/src/components/financial/gain-percent.tsx
+++ b/packages/ui/src/components/financial/gain-percent.tsx
@@ -50,7 +50,7 @@ export function GainPercent({
         "amount inline-flex items-center justify-end text-right text-sm",
         value > 0 ? "text-success" : value < 0 ? "text-destructive" : "text-foreground",
         variant === "badge" && [
-          "rounded-md py-px pl-[9px] pr-[12px] font-light",
+          "rounded-md py-px pr-[12px] pl-[9px] font-light",
           value > 0 ? "bg-success/10" : value < 0 ? "bg-destructive/10" : "bg-foreground/10",
         ],
         className,
diff --git a/packages/ui/src/components/ui/accordion.tsx b/packages/ui/src/components/ui/accordion.tsx
index 500e70dc5..ecaae4fe1 100644
--- a/packages/ui/src/components/ui/accordion.tsx
+++ b/packages/ui/src/components/ui/accordion.tsx
@@ -43,7 +43,7 @@ const AccordionContent = React.forwardRef<
     className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
     {...props}
   >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    <div className={cn("pt-0 pb-4", className)}>{children}</div>
   </AccordionPrimitive.Content>
 ));
 
diff --git a/packages/ui/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/ui/alert-dialog.tsx
index 4cc01904d..5768b5cb9 100644
--- a/packages/ui/src/components/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/ui/alert-dialog.tsx
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background 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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/ui/alert.tsx b/packages/ui/src/components/ui/alert.tsx
index f70442c39..dd3d09d20 100644
--- a/packages/ui/src/components/ui/alert.tsx
+++ b/packages/ui/src/components/ui/alert.tsx
@@ -34,7 +34,7 @@ Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+    <h5 ref={ref} className={cn("mb-1 leading-none font-medium tracking-tight", className)} {...props} />
   ),
 );
 AlertTitle.displayName = "AlertTitle";
diff --git a/packages/ui/src/components/ui/autocomplete.tsx b/packages/ui/src/components/ui/autocomplete.tsx
index 56035ec7b..2a577e28d 100644
--- a/packages/ui/src/components/ui/autocomplete.tsx
+++ b/packages/ui/src/components/ui/autocomplete.tsx
@@ -107,7 +107,7 @@ export const AutoComplete = ({
 
   return (
     <CommandPrimitive onKeyDown={handleKeyDown}>
-      <div className="border-input bg-input-bg dark:bg-input/30 ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-input-height flex w-full rounded-md border py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
+      <div className="border-input bg-input-bg dark:bg-input/30 ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-input-height flex w-full rounded-md border py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50">
         <CommandInput
           ref={inputRef}
           value={inputValue}
@@ -116,7 +116,7 @@ export const AutoComplete = ({
           //onFocus={() => setOpen(true)}
           placeholder={placeholder}
           disabled={disabled}
-          className="w-full border-0 border-transparent bg-transparent focus:outline-none focus:ring-0 focus:ring-transparent"
+          className="w-full border-0 border-transparent bg-transparent focus:ring-0 focus:ring-transparent focus:outline-none"
         />
       </div>
       <div className="relative mt-1">
@@ -153,7 +153,7 @@ export const AutoComplete = ({
                 </CommandGroup>
               ) : null}
               {!isLoading ? (
-                <CommandPrimitive.Empty className="select-none rounded-sm px-2 py-3 text-center text-sm">
+                <CommandPrimitive.Empty className="rounded-sm px-2 py-3 text-center text-sm select-none">
                   {emptyMessage}
                 </CommandPrimitive.Empty>
               ) : null}
diff --git a/packages/ui/src/components/ui/calendar-rac.tsx b/packages/ui/src/components/ui/calendar-rac.tsx
index ef13d08d3..443dd5afc 100644
--- a/packages/ui/src/components/ui/calendar-rac.tsx
+++ b/packages/ui/src/components/ui/calendar-rac.tsx
@@ -28,14 +28,14 @@ function CalendarHeader() {
     <header className="flex w-full items-center gap-1 pb-1">
       <Button
         slot="previous"
-        className="text-muted-foreground/80 hover:bg-accent hover:text-foreground focus-visible:ring-ring/50 flex size-9 items-center justify-center rounded-md outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+        className="text-muted-foreground/80 hover:bg-accent hover:text-foreground focus-visible:ring-ring/50 flex size-9 items-center justify-center rounded-md transition-[color,box-shadow] outline-none focus-visible:ring-[3px]"
       >
         <Icons.ChevronLeft size={16} />
       </Button>
       <HeadingRac className="grow text-center text-sm font-medium" />
       <Button
         slot="next"
-        className="text-muted-foreground/80 hover:bg-accent hover:text-foreground focus-visible:ring-ring/50 flex size-9 items-center justify-center rounded-md outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+        className="text-muted-foreground/80 hover:bg-accent hover:text-foreground focus-visible:ring-ring/50 flex size-9 items-center justify-center rounded-md transition-[color,box-shadow] outline-none focus-visible:ring-[3px]"
       >
         <Icons.ChevronRight size={16} />
       </Button>
@@ -63,7 +63,7 @@ function CalendarGridComponent({ isRange = false }: { isRange?: boolean }) {
               isOutsideMonth ? (
                 <div
                   className={cn(
-                    "data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-focus-visible:ring-ring/50 text-secondary data-disabled:pointer-events-none data-disabled:opacity-30 data-focus-visible:z-10 data-focus-visible:ring-[3px] data-unavailable:pointer-events-none data-unavailable:line-through data-unavailable:opacity-30 relative flex size-9 cursor-default items-center justify-center whitespace-nowrap rounded-md p-0 text-sm font-normal outline-none",
+                    "data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-focus-visible:ring-ring/50 text-secondary relative flex size-9 cursor-default items-center justify-center rounded-md p-0 text-sm font-normal whitespace-nowrap outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-focus-visible:z-10 data-focus-visible:ring-[3px] data-unavailable:pointer-events-none data-unavailable:line-through data-unavailable:opacity-30",
                   )}
                 >
                   {formattedDate}
@@ -71,12 +71,12 @@ function CalendarGridComponent({ isRange = false }: { isRange?: boolean }) {
               ) : (
                 <div
                   className={cn(
-                    "data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-focus-visible:ring-ring/50 text-foreground hover:bg-secondary data-disabled:pointer-events-none data-disabled:opacity-30 data-focus-visible:z-10 data-focus-visible:ring-[3px] data-unavailable:pointer-events-none data-unavailable:line-through data-unavailable:opacity-30 relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 text-sm font-normal outline-none transition-colors duration-150",
+                    "data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-focus-visible:ring-ring/50 text-foreground hover:bg-secondary relative flex size-9 items-center justify-center rounded-md p-0 text-sm font-normal whitespace-nowrap transition-colors duration-150 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-focus-visible:z-10 data-focus-visible:ring-[3px] data-unavailable:pointer-events-none data-unavailable:line-through data-unavailable:opacity-30",
                     isRange &&
                       "data-selected:bg-accent data-selected:text-foreground data-invalid:data-selection-end:bg-destructive data-invalid:data-selection-start:bg-destructive data-selection-end:bg-primary data-selection-start:bg-primary data-selection-end:text-primary-foreground data-selection-start:text-primary-foreground data-invalid:bg-red-100 data-selected:rounded-none data-selection-end:rounded-e-md data-invalid:data-selection-end:text-white data-selection-start:rounded-s-md data-invalid:data-selection-start:text-white",
                     date.compare(now) === 0 &&
                       cn(
-                        "after:bg-primary after:pointer-events-none after:absolute after:bottom-1 after:start-1/2 after:z-10 after:size-[3px] after:-translate-x-1/2 after:rounded-full",
+                        "after:bg-primary after:pointer-events-none after:absolute after:start-1/2 after:bottom-1 after:z-10 after:size-[3px] after:-translate-x-1/2 after:rounded-full",
                         isRange
                           ? "data-selection-end:after:bg-background data-selection-start:after:bg-background"
                           : "data-selected:after:bg-background",
diff --git a/packages/ui/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx
index cfafb56ba..8be28fa44 100644
--- a/packages/ui/src/components/ui/calendar.tsx
+++ b/packages/ui/src/components/ui/calendar.tsx
@@ -26,7 +26,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent p-3 [--cell-size:2rem]",
+        "bg-background group/calendar p-3 [--cell-size:2rem] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className,
@@ -115,7 +115,7 @@ function Calendar({
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>
-              <div className="size-(--cell-size) flex items-center justify-center text-center">{children}</div>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
             </td>
           );
         },
@@ -147,7 +147,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }: React.Compon
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 min-w-(--cell-size) flex aspect-square h-auto w-full flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className,
       )}
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
index bc8663cce..8530d71ee 100644
--- a/packages/ui/src/components/ui/card.tsx
+++ b/packages/ui/src/components/ui/card.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("bg-card text-card-foreground shadow-xs rounded-lg border", className)} {...props} />
+  <div ref={ref} className={cn("bg-card text-card-foreground rounded-lg border shadow-xs", className)} {...props} />
 ));
 Card.displayName = "Card";
 
@@ -16,7 +16,7 @@ CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-xl font-semibold leading-none tracking-tight", className)} {...props} />
+    <div ref={ref} className={cn("text-xl leading-none font-semibold tracking-tight", className)} {...props} />
   ),
 );
 CardTitle.displayName = "CardTitle";
diff --git a/packages/ui/src/components/ui/carousel.tsx b/packages/ui/src/components/ui/carousel.tsx
index d359deaa5..27fdd9ddb 100644
--- a/packages/ui/src/components/ui/carousel.tsx
+++ b/packages/ui/src/components/ui/carousel.tsx
@@ -180,7 +180,7 @@ const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProp
         className={cn(
           "absolute h-8 w-8 rounded-full",
           orientation === "horizontal"
-            ? "-left-12 top-1/2 -translate-y-1/2"
+            ? "top-1/2 -left-12 -translate-y-1/2"
             : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
           className,
         )}
@@ -208,7 +208,7 @@ const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<ty
         className={cn(
           "absolute h-8 w-8 rounded-full",
           orientation === "horizontal"
-            ? "-right-12 top-1/2 -translate-y-1/2"
+            ? "top-1/2 -right-12 -translate-y-1/2"
             : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
           className,
         )}
diff --git a/packages/ui/src/components/ui/chart.tsx b/packages/ui/src/components/ui/chart.tsx
index 73523e1c9..fcfceba3f 100644
--- a/packages/ui/src/components/ui/chart.tsx
+++ b/packages/ui/src/components/ui/chart.tsx
@@ -53,7 +53,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-none",
           className,
         )}
         {...props}
@@ -197,7 +197,7 @@ const ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContent
                     ) : (
                       !hideIndicator && (
                         <div
-                          className={cn("border-border bg-(--color-bg) shrink-0 rounded-[2px]", {
+                          className={cn("border-border shrink-0 rounded-[2px] bg-(--color-bg)", {
                             "h-2.5 w-2.5": indicator === "dot",
                             "w-1": indicator === "line",
                             "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
diff --git a/packages/ui/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx
index 287b419d6..369c332e7 100644
--- a/packages/ui/src/components/ui/checkbox.tsx
+++ b/packages/ui/src/components/ui/checkbox.tsx
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
index 981fe7354..3d5410407 100644
--- a/packages/ui/src/components/ui/command.tsx
+++ b/packages/ui/src/components/ui/command.tsx
@@ -27,7 +27,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg [&>button]:top-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]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -60,7 +60,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("max-h-[300px] overflow-x-hidden overflow-y-auto", className)}
     {...props}
   />
 ));
@@ -105,7 +105,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/data-table/data-table-pagination.tsx b/packages/ui/src/components/ui/data-table/data-table-pagination.tsx
index ccf880de6..cdcafc9c2 100644
--- a/packages/ui/src/components/ui/data-table/data-table-pagination.tsx
+++ b/packages/ui/src/components/ui/data-table/data-table-pagination.tsx
@@ -105,7 +105,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             className="h-9 w-[60px] text-center sm:h-8"
             title={`Enter a page number between 1 and ${totalPages}`}
           />
-          <span className="text-muted-foreground whitespace-nowrap text-sm">
+          <span className="text-muted-foreground text-sm whitespace-nowrap">
             <span className="hidden sm:inline">of</span>
             <span className="sm:hidden">/</span> {totalPages}
           </span>
diff --git a/packages/ui/src/components/ui/data-table/data-table-toolbar.tsx b/packages/ui/src/components/ui/data-table/data-table-toolbar.tsx
index 9e71339a5..1f7d05343 100644
--- a/packages/ui/src/components/ui/data-table/data-table-toolbar.tsx
+++ b/packages/ui/src/components/ui/data-table/data-table-toolbar.tsx
@@ -132,7 +132,7 @@ function SearchInput({
 
   return (
     <div className={cn("relative", className)}>
-      <Icons.Search className="text-muted-foreground pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
+      <Icons.Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2" />
       <input
         type="text"
         value={value}
@@ -141,7 +141,7 @@ function SearchInput({
         onBlur={handleBlur}
         placeholder={placeholder}
         className={cn(
-          "shadow-inner-xs bg-muted/90 hover:bg-muted/80 h-8 w-full rounded-md pl-8 pr-8 text-sm outline-none transition-colors",
+          "shadow-inner-xs bg-muted/90 hover:bg-muted/80 h-8 w-full rounded-md pr-8 pl-8 text-sm transition-colors outline-none",
           "placeholder:text-muted-foreground",
           "focus:ring-ring/50 focus:ring-2",
         )}
@@ -150,7 +150,7 @@ function SearchInput({
         <button
           type="button"
           onClick={handleClear}
-          className="text-muted-foreground hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2"
+          className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
         >
           <Icons.Close className="h-4 w-4" />
           <span className="sr-only">Clear search</span>
diff --git a/packages/ui/src/components/ui/date-picker-input.tsx b/packages/ui/src/components/ui/date-picker-input.tsx
index d007304f2..e1b3f059e 100644
--- a/packages/ui/src/components/ui/date-picker-input.tsx
+++ b/packages/ui/src/components/ui/date-picker-input.tsx
@@ -119,19 +119,19 @@ export function DatePickerInput({
     >
       <Group
         className={cn(
-          "dark:bg-input/30 border-input ring-offset-background bg-input-bg h-input-height flex w-full flex-nowrap items-center whitespace-nowrap rounded-md border px-3 py-1 text-sm",
-          "focus-within:ring-ring focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2",
+          "dark:bg-input/30 border-input ring-offset-background bg-input-bg h-input-height flex w-full flex-nowrap items-center rounded-md border px-3 py-1 text-sm whitespace-nowrap",
+          "focus-within:ring-ring focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none",
           disabled && "cursor-not-allowed opacity-50",
         )}
         data-testid={testId}
       >
         <DateInput
           unstyled
-          className="flex-1 border-none bg-transparent outline-none ring-0 focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+          className="flex-1 border-none bg-transparent ring-0 outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
         />
         <Button
           className={cn(
-            "text-muted-foreground/80 hover:text-foreground focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            "text-muted-foreground/80 hover:text-foreground focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
             "flex h-6 w-6 items-center justify-center rounded-sm transition-[color]",
             disabled && "pointer-events-none",
           )}
@@ -141,7 +141,7 @@ export function DatePickerInput({
         </Button>
       </Group>
       <Popover
-        className="bg-background text-popover-foreground data-entering:animate-in data-exiting:animate-out data-entering:fade-in-0 data-exiting:fade-out-0 data-entering:zoom-in-95 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 outline-hidden z-50 rounded-lg border shadow-lg"
+        className="bg-background text-popover-foreground data-entering:animate-in data-exiting:animate-out data-entering:fade-in-0 data-exiting:fade-out-0 data-entering:zoom-in-95 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-lg border shadow-lg outline-hidden"
         offset={4}
         onOpenChange={(isOpen: boolean) => {
           if (!isOpen && onInteractionEnd) {
diff --git a/packages/ui/src/components/ui/datefield-rac.tsx b/packages/ui/src/components/ui/datefield-rac.tsx
index 655da0601..5f52f9132 100644
--- a/packages/ui/src/components/ui/datefield-rac.tsx
+++ b/packages/ui/src/components/ui/datefield-rac.tsx
@@ -35,7 +35,7 @@ function DateSegment({ className, ...props }: DateSegmentProps) {
     <DateSegmentRac
       className={composeRenderProps(className, (className) =>
         cn(
-          "text-foreground data-focused:bg-primary data-focused:text-primary-foreground data-focused:data-placeholder:text-primary-foreground data-invalid:data-focused:bg-destructive data-invalid:data-focused:text-destructive-foreground data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-placeholder:text-muted-foreground/70 data-[type=literal]:text-muted-foreground/70 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-50 inline rounded p-0.5 caret-transparent data-[type=literal]:px-0",
+          "text-foreground data-focused:bg-primary data-focused:text-primary-foreground data-focused:data-placeholder:text-primary-foreground data-invalid:data-focused:bg-destructive data-invalid:data-focused:text-destructive-foreground data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-placeholder:text-muted-foreground/70 data-[type=literal]:text-muted-foreground/70 inline rounded p-0.5 caret-transparent outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[type=literal]:px-0",
           className,
         ),
       )}
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
index 5f1b7f22c..3ed6f9411 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -138,7 +138,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
         <SheetContent
           side={side}
           showCloseButton={showCloseButton}
-          className={cn(mobileClassName, "!rounded-t-4xl mx-1", className)}
+          className={cn(mobileClassName, "mx-1 !rounded-t-4xl", className)}
         >
           {children}
         </SheetContent>
@@ -152,7 +152,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
           ref={ref}
           data-slot="dialog-content"
           className={cn(
-            "bg-background 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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200",
+            "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200",
             className,
           )}
           {...props}
@@ -161,7 +161,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
           {showCloseButton && (
             <DialogPrimitive.Close
               data-slot="dialog-close"
-              className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+              className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
             >
               <Icons.X />
               <span className="sr-only">Close</span>
@@ -202,7 +202,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg font-semibold leading-none", className)}
+      className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
   );
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
index 8a037442c..550be4e14 100644
--- a/packages/ui/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className,
     )}
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
       className,
     )}
     {...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-32 overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
         className,
       )}
       {...props}
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       variant === "destructive" && "text-destructive focus:text-destructive",
       className,
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 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 relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     checked={checked}
@@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 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 relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/empty-placeholder.tsx b/packages/ui/src/components/ui/empty-placeholder.tsx
index fa92b1e45..3cd411657 100644
--- a/packages/ui/src/components/ui/empty-placeholder.tsx
+++ b/packages/ui/src/components/ui/empty-placeholder.tsx
@@ -63,7 +63,7 @@ EmptyPlaceholder.Description = function EmptyPlaceholderDescription({
 }: EmptyPlacholderDescriptionProps) {
   return (
     <p
-      className={cn("text-muted-foreground mb-8 mt-2 text-center text-sm font-normal leading-6", className)}
+      className={cn("text-muted-foreground mt-2 mb-8 text-center text-sm leading-6 font-normal", className)}
       {...props}
     />
   );
diff --git a/packages/ui/src/components/ui/faceted-search-input.tsx b/packages/ui/src/components/ui/faceted-search-input.tsx
index d75a42060..315c189f4 100644
--- a/packages/ui/src/components/ui/faceted-search-input.tsx
+++ b/packages/ui/src/components/ui/faceted-search-input.tsx
@@ -23,14 +23,14 @@ export function FacetedSearchInput({
 
   return (
     <div className={cn("relative", className)}>
-      <Icons.Search className="text-muted-foreground pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
+      <Icons.Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2" />
       <input
         type="text"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
         className={cn(
-          "shadow-inner-xs bg-muted/90 hover:bg-muted/80 h-8 w-full rounded-md pl-8 pr-8 text-sm outline-none transition-colors",
+          "shadow-inner-xs bg-muted/90 hover:bg-muted/80 h-8 w-full rounded-md pr-8 pl-8 text-sm transition-colors outline-none",
           "placeholder:text-muted-foreground",
           "focus:ring-ring/50 focus:ring-2",
         )}
@@ -40,7 +40,7 @@ export function FacetedSearchInput({
         <button
           type="button"
           onClick={handleClear}
-          className="text-muted-foreground hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2"
+          className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
         >
           <Icons.Close className="h-4 w-4" />
           <span className="sr-only">Clear search</span>
diff --git a/packages/ui/src/components/ui/hover-card.tsx b/packages/ui/src/components/ui/hover-card.tsx
index 6b5356fc8..c45ce4f7f 100644
--- a/packages/ui/src/components/ui/hover-card.tsx
+++ b/packages/ui/src/components/ui/hover-card.tsx
@@ -16,7 +16,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin) z-50 w-64 rounded-md border p-4 shadow-md outline-none",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-none",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/input-group.tsx b/packages/ui/src/components/ui/input-group.tsx
index 1d51de40e..5d1b666c3 100644
--- a/packages/ui/src/components/ui/input-group.tsx
+++ b/packages/ui/src/components/ui/input-group.tsx
@@ -12,7 +12,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 has-disabled:opacity-50 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border outline-none transition-colors has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0",
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0",
         className,
       )}
       {...props}
@@ -99,7 +99,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -112,7 +112,7 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<"input">)
     <Input
       data-slot="input-group-control"
       className={cn(
-        "aria-invalid:ring-0 flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent dark:bg-transparent dark:disabled:bg-transparent",
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
         className,
       )}
       {...props}
@@ -125,7 +125,7 @@ function InputGroupTextarea({ className, ...props }: React.ComponentProps<"texta
     <Textarea
       data-slot="input-group-control"
       className={cn(
-        "aria-invalid:ring-0 flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent dark:bg-transparent dark:disabled:bg-transparent",
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
index ed99dd51a..d052161cf 100644
--- a/packages/ui/src/components/ui/input.tsx
+++ b/packages/ui/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-bg h-input-height shadow-xs w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-bg h-input-height w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,
diff --git a/packages/ui/src/components/ui/item.tsx b/packages/ui/src/components/ui/item.tsx
index 687ea3bb1..9e292229e 100644
--- a/packages/ui/src/components/ui/item.tsx
+++ b/packages/ui/src/components/ui/item.tsx
@@ -100,7 +100,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-title"
-      className={cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className)}
+      className={cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)}
       {...props}
     />
   );
@@ -111,7 +111,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className,
       )}
diff --git a/packages/ui/src/components/ui/page.tsx b/packages/ui/src/components/ui/page.tsx
index fab5a49d8..412adf274 100644
--- a/packages/ui/src/components/ui/page.tsx
+++ b/packages/ui/src/components/ui/page.tsx
@@ -38,7 +38,7 @@ export const PageScrollContainer = React.forwardRef<HTMLDivElement, PageScrollCo
         data-page-scroll-container
         data-with-mobile-nav-offset={withMobileNavOffset ? "true" : undefined}
         className={cn(
-          "momentum-scroll scroll-pt-header min-h-0 w-full max-w-full flex-1 overflow-y-auto overflow-x-hidden",
+          "momentum-scroll scroll-pt-header min-h-0 w-full max-w-full flex-1 overflow-x-hidden overflow-y-auto",
           withMobileNavOffset && "scroll-pb-nav",
           className,
         )}
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
index 695f2f8f0..36f51d1d2 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-none",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/ui/progress-indicator.tsx b/packages/ui/src/components/ui/progress-indicator.tsx
index 6c4c9b854..f71045d30 100644
--- a/packages/ui/src/components/ui/progress-indicator.tsx
+++ b/packages/ui/src/components/ui/progress-indicator.tsx
@@ -15,7 +15,7 @@ const DialogContentWithoutClose = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background 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=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "bg-background 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=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
         className,
       )}
       {...props}
@@ -101,7 +101,7 @@ export function ProgressIndicator({
             {/* Beautiful gradient progress bar */}
             <div className="bg-secondary/30 h-2.5 w-full overflow-hidden rounded-full">
               <motion.div
-                className="bg-linear-to-r h-full rounded-full from-red-500 via-orange-500 to-yellow-500"
+                className="h-full rounded-full bg-linear-to-r from-red-500 via-orange-500 to-yellow-500"
                 initial={{ x: "-100%" }}
                 animate={{ x: "100%" }}
                 transition={{
diff --git a/packages/ui/src/components/ui/responsive-select.tsx b/packages/ui/src/components/ui/responsive-select.tsx
index 1f9889baf..cda17c324 100644
--- a/packages/ui/src/components/ui/responsive-select.tsx
+++ b/packages/ui/src/components/ui/responsive-select.tsx
@@ -76,8 +76,8 @@ export function ResponsiveSelect({
         </Button>
 
         <Sheet open={open} onOpenChange={setOpen}>
-          <SheetContent side={mobileSide} className="rounded-t-4xl mx-1 h-[80vh] p-0">
-            <SheetHeader className="border-border border-b px-6 pb-4 pt-6">
+          <SheetContent side={mobileSide} className="mx-1 h-[80vh] rounded-t-4xl p-0">
+            <SheetHeader className="border-border border-b px-6 pt-6 pb-4">
               <SheetTitle>{sheetTitle}</SheetTitle>
               {sheetDescription ? <SheetDescription>{sheetDescription}</SheetDescription> : null}
             </SheetHeader>
diff --git a/packages/ui/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
index 823461aa2..3a572572c 100644
--- a/packages/ui/src/components/ui/scroll-area.tsx
+++ b/packages/ui/src/components/ui/scroll-area.tsx
@@ -23,7 +23,7 @@ const ScrollBar = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
+      "flex touch-none transition-colors select-none",
       orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
       orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
       className,
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index c099c21c2..f17750b51 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "border-input bg-input-bg dark:bg-input/30 ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring h-input-height flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "border-input bg-input-bg dark:bg-input/30 ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring h-input-height flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-md border shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         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,
@@ -94,7 +94,7 @@ const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
+  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pr-2 pl-8 text-sm font-semibold", className)} {...props} />
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
@@ -105,7 +105,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/sheet.tsx b/packages/ui/src/components/ui/sheet.tsx
index 11f08d9d2..2b518e2a9 100644
--- a/packages/ui/src/components/ui/sheet.tsx
+++ b/packages/ui/src/components/ui/sheet.tsx
@@ -61,7 +61,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
       <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
         {children}
         {showCloseButton && (
-          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary bg-muted absolute right-4 top-4 cursor-pointer rounded-full p-2 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary bg-muted absolute top-4 right-4 cursor-pointer rounded-full p-2 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
             <Icons.X className="h-5 w-5 sm:h-4 sm:w-4" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
diff --git a/packages/ui/src/components/ui/swipable-view.tsx b/packages/ui/src/components/ui/swipable-view.tsx
index 609aba3d7..93252e25f 100644
--- a/packages/ui/src/components/ui/swipable-view.tsx
+++ b/packages/ui/src/components/ui/swipable-view.tsx
@@ -138,7 +138,7 @@ export function SwipableView({
                   onClick={() => scrollTo(index)}
                   className={cn(
                     "size-2 rounded-full transition-all duration-300",
-                    "focus-visible:ring-ring hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                    "focus-visible:ring-ring hover:scale-110 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
                     "bg-foreground/20 hover:bg-foreground/40",
                     dotClassName,
                   )}
@@ -166,7 +166,7 @@ export function SwipableView({
                  2. This ensures the Header stays fixed while content scrolls.
                  3. touch-pan-y allows vertical scrolling while horizontal swipes trigger the carousel.
                */}
-              <div className="h-full w-full overflow-y-auto overflow-x-hidden">
+              <div className="h-full w-full overflow-x-hidden overflow-y-auto">
                 {shouldRender(index) ? (
                   item.content
                 ) : (
diff --git a/packages/ui/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
index 9cdf4fc69..aa092a33b 100644
--- a/packages/ui/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "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",
+      "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:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/tabs.tsx b/packages/ui/src/components/ui/tabs.tsx
index 99941293d..f2ba11ad2 100644
--- a/packages/ui/src/components/ui/tabs.tsx
+++ b/packages/ui/src/components/ui/tabs.tsx
@@ -75,7 +75,7 @@ const TabsTrigger = React.forwardRef<
       ref={ref}
       value={value}
       className={cn(
-        "ring-offset-background focus-visible:ring-ring text-muted-foreground data-[state=active]:text-foreground relative inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        "ring-offset-background focus-visible:ring-ring text-muted-foreground data-[state=active]:text-foreground relative inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
         "isolate overflow-hidden",
         className,
       )}
@@ -103,7 +103,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/tag-input.tsx b/packages/ui/src/components/ui/tag-input.tsx
index f16273a0d..86d55dce1 100644
--- a/packages/ui/src/components/ui/tag-input.tsx
+++ b/packages/ui/src/components/ui/tag-input.tsx
@@ -35,7 +35,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
       <div
         className={cn(
           // caveat: :has() variant requires tailwind v3.4 or above: https://tailwindcss.com/blog/tailwindcss-v3-4#new-has-variant
-          "border-input dark:bg-input/30 bg-input-bg min-h-input-height shadow-xs flex w-full flex-wrap gap-2 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "border-input dark:bg-input/30 bg-input-bg min-h-input-height flex w-full flex-wrap gap-2 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           "has-focus-visible:border-ring has-focus-visible:ring-ring/50 has-focus-visible:ring-[3px]",
           className,
         )}
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
index 58d42b2b3..f9e33fe41 100644
--- a/packages/ui/src/components/ui/textarea.tsx
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"tex
     return (
       <textarea
         className={cn(
-          "border-input bg-input-bg dark:bg-input/30 ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "border-input bg-input-bg dark:bg-input/30 ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
index 681be61b6..f15f8459a 100644
--- a/packages/ui/src/components/ui/tooltip.tsx
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground 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 origin-(--radix-tooltip-content-transform-origin) z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+        "bg-popover text-popover-foreground 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 z-50 origin-(--radix-tooltip-content-transform-origin) overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
         className,
       )}
       {...props}