diff --git a/.github/workflows/guardrails.yml b/.github/workflows/guardrails.yml
index 480aa82ae..5cf95179b 100644
--- a/.github/workflows/guardrails.yml
+++ b/.github/workflows/guardrails.yml
@@ -32,7 +32,7 @@ jobs:
             ".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"
@@ -53,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/README.md b/README.md
index 2a22ce317..471d5212c 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,18 @@ Visit `http://localhost:3000` to access the application.
 
 ---
 
+## 📖 Documentation
+
+- **[User Manual](docs/user-manual.md)** — the full feature list and how to
+  configure and use Folio to manage your personal finances.
+- **[Getting Started](docs/getting-started.md)** — install, set up your first
+  account, and learn the core concepts.
+- **[Activity Types](docs/activities/activity-types.md)** — the 14 transaction
+  types and when to use each one.
+- **[Addons](docs/addons/index.md)** — extend Folio with community features.
+
+---
+
 ## 🛠️ Tech Stack
 
 | Component            | Technology        |
@@ -115,15 +127,19 @@ Visit `http://localhost:3000` to access the application.
 
 ## 📊 Supported Banks
 
-Folio supports automatic import from major Australian banks:
+**Bank Connect** (automatic import from the desktop app) supports:
 
-- Commonwealth Bank
-- Westpac
+- CommBank (CBA)
 - ANZ
-- NAB
 - ING
-- Macquarie
-- And more...
+- Bank of Melbourne
+- Beyond Bank
+- Interactive Brokers (broker, Beta)
+
+Coming soon: CommSec, Sharesies, SelfWealth, and Stake.
+
+Any other bank or broker can be tracked by importing a **CSV, OFX, or QIF**
+statement file. Most Australian institutions offer a statement export.
 
 ---
 
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/addons/addons-core.ts b/apps/frontend/src/addons/addons-core.ts
index 6a3db8ee7..fd1768ac9 100644
--- a/apps/frontend/src/addons/addons-core.ts
+++ b/apps/frontend/src/addons/addons-core.ts
@@ -138,9 +138,7 @@ async function loadAddon(addonFile: AddonFile, _context: AddonContext): Promise<
       default?: unknown;
     };
     const defaultObj = asRecord.default as
-      | ((ctx: AddonContext) => unknown)
-      | { enable?: (ctx: AddonContext) => unknown }
-      | undefined;
+      ((ctx: AddonContext) => unknown) | { enable?: (ctx: AddonContext) => unknown } | undefined;
     const enableFunction: EnableFn =
       (typeof defaultObj === "function" ? defaultObj : null) ??
       (defaultObj &&
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..92b02d84b 100644
--- a/apps/frontend/src/features/ai-assistant/components/attachment.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/attachment.tsx
@@ -2,8 +2,8 @@ import {
   AttachmentPrimitive,
   ComposerPrimitive,
   MessagePrimitive,
-  useAssistantApi,
-  useAssistantState,
+  useAui,
+  useAuiState,
 } from "@assistant-ui/react";
 import { PropsWithChildren, useEffect, useState, type FC } from "react";
 
@@ -41,7 +41,7 @@ const useFileSrc = (file: File | undefined) => {
 };
 
 const useAttachmentSrc = () => {
-  const { file, src } = useAssistantState(
+  const { file, src } = useAuiState(
     useShallow(({ attachment }): { file?: File; src?: string } => {
       if (attachment.type !== "image") return {};
       if (attachment.file) return { file: attachment.file };
@@ -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} />
@@ -98,7 +98,7 @@ const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
 };
 
 const AttachmentThumb: FC = () => {
-  const isImage = useAssistantState(({ attachment }) => attachment.type === "image");
+  const isImage = useAuiState(({ attachment }) => attachment.type === "image");
   const src = useAttachmentSrc();
 
   return (
@@ -116,11 +116,11 @@ const AttachmentThumb: FC = () => {
 };
 
 const AttachmentUI: FC = () => {
-  const api = useAssistantApi();
+  const api = useAui();
   const isComposer = api.attachment.source === "composer";
 
-  const isImage = useAssistantState(({ attachment }) => attachment.type === "image");
-  const typeLabel = useAssistantState(({ attachment }) => {
+  const isImage = useAuiState(({ attachment }) => attachment.type === "image");
+  const typeLabel = useAuiState(({ attachment }) => {
     const type = attachment.type;
     switch (type) {
       case "image":
@@ -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..a3dda0ff0 100644
--- a/apps/frontend/src/features/ai-assistant/components/reasoning.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/reasoning.tsx
@@ -14,7 +14,7 @@ import {
 
 import { cn } from "@/lib/utils";
 import {
-  useAssistantState,
+  useAuiState,
   useMessagePartReasoning,
   type ReasoningGroupComponent,
   type ReasoningMessagePartComponent,
@@ -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`,
@@ -65,7 +65,7 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({ children, startIndex, end
   const [duration, setDuration] = useState<number | undefined>(undefined);
   const startTimeRef = useRef<number | null>(null);
 
-  const isStreaming = useAssistantState(({ message }) => {
+  const isStreaming = useAuiState(({ message }) => {
     if (message.status?.type !== "running") return false;
     const lastIndex = message.parts.length - 1;
     if (lastIndex < 0) return false;
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..2ab297c25 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..."
@@ -280,7 +280,7 @@ export function ThreadSidebar({
 
       {/* Tag Filter */}
       {allTags.length > 0 && (
-        <div className="scrollbar-thin flex gap-1 overflow-x-auto border-b p-2">
+        <div className="flex scrollbar-thin gap-1 overflow-x-auto border-b p-2">
           {allTags.map((tag) => (
             <Badge
               key={tag}
diff --git a/apps/frontend/src/features/ai-assistant/components/thread.tsx b/apps/frontend/src/features/ai-assistant/components/thread.tsx
index a0e64df10..b4ad5a0e2 100644
--- a/apps/frontend/src/features/ai-assistant/components/thread.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/thread.tsx
@@ -5,7 +5,7 @@ import {
   ErrorPrimitive,
   MessagePrimitive,
   ThreadPrimitive,
-  useAssistantState,
+  useAuiState,
 } from "@assistant-ui/react";
 
 import type { FC, ReactNode } from "react";
@@ -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}
@@ -220,7 +220,7 @@ const MessageError: FC = () => {
 };
 
 const TypingIndicator: FC = () => {
-  const showIndicator = useAssistantState(({ message }) => {
+  const showIndicator = useAuiState(({ message }) => {
     // Show indicator when message is running and has no text/tool content yet
     if (message.status?.type !== "running") return false;
     // Hide if there are any parts (text started streaming or tools are being called)
@@ -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/ai-assistant/components/tool-uis/import-csv-tool-ui.tsx b/apps/frontend/src/features/ai-assistant/components/tool-uis/import-csv-tool-ui.tsx
index d6b5a28dc..8d71801ab 100644
--- a/apps/frontend/src/features/ai-assistant/components/tool-uis/import-csv-tool-ui.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/tool-uis/import-csv-tool-ui.tsx
@@ -257,12 +257,10 @@ function normalizeResult(result: unknown, fallbackCurrency: string): ImportCsvOu
     totalRows: (candidate.total_rows ?? candidate.totalRows) as number | undefined,
     truncated: candidate.truncated as boolean | undefined,
     usedSavedProfile: (candidate.used_saved_profile ?? candidate.usedSavedProfile) as
-      | boolean
-      | undefined,
+      boolean | undefined,
     submitted: candidate.submitted as boolean | undefined,
     createdActivityIds: (candidate.created_activity_ids ?? candidate.createdActivityIds) as
-      | string[]
-      | undefined,
+      string[] | undefined,
     submittedAt: (candidate.submitted_at ?? candidate.submittedAt) as string | undefined,
   };
 }
diff --git a/apps/frontend/src/features/ai-assistant/components/tool-uis/record-activity-tool-ui.tsx b/apps/frontend/src/features/ai-assistant/components/tool-uis/record-activity-tool-ui.tsx
index 60c58421c..bbb2d4422 100644
--- a/apps/frontend/src/features/ai-assistant/components/tool-uis/record-activity-tool-ui.tsx
+++ b/apps/frontend/src/features/ai-assistant/components/tool-uis/record-activity-tool-ui.tsx
@@ -251,8 +251,7 @@ function normalizeResult(result: unknown, fallbackCurrency: string): RecordActiv
 
   // Normalize resolved asset
   const assetRaw = (candidate.resolvedAsset ?? candidate.resolved_asset) as
-    | Record<string, unknown>
-    | undefined;
+    Record<string, unknown> | undefined;
   const resolvedAsset: ResolvedAsset | undefined = assetRaw
     ? {
         assetId: (assetRaw.assetId as string) ?? (assetRaw.asset_id as string) ?? "",
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/devices-sync/components/pairing-flow/index.tsx b/apps/frontend/src/features/devices-sync/components/pairing-flow/index.tsx
index e5ddbf911..1d12a6b31 100644
--- a/apps/frontend/src/features/devices-sync/components/pairing-flow/index.tsx
+++ b/apps/frontend/src/features/devices-sync/components/pairing-flow/index.tsx
@@ -20,12 +20,7 @@ interface PairingFlowProps {
 
 // Claimer flow steps
 type ClaimerStep =
-  | "enter_code"
-  | "connecting"
-  | "waiting_keys"
-  | "verify_sas"
-  | "success"
-  | "error";
+  "enter_code" | "connecting" | "waiting_keys" | "verify_sas" | "success" | "error";
 
 export function PairingFlow({ onComplete, onCancel }: PairingFlowProps) {
   const { state } = useDeviceSync();
diff --git a/apps/frontend/src/features/devices-sync/types.ts b/apps/frontend/src/features/devices-sync/types.ts
index 4b5115228..59c6c672c 100644
--- a/apps/frontend/src/features/devices-sync/types.ts
+++ b/apps/frontend/src/features/devices-sync/types.ts
@@ -4,14 +4,7 @@
 
 export type TrustState = "trusted" | "untrusted" | "revoked";
 export type DevicePlatform =
-  | "ios"
-  | "android"
-  | "mac"
-  | "macos"
-  | "windows"
-  | "linux"
-  | "web"
-  | "server";
+  "ios" | "android" | "mac" | "macos" | "windows" | "linux" | "web" | "server";
 export type PairingRole = "issuer" | "claimer";
 export type PairingStatus = "open" | "claimed" | "approved" | "completed" | "cancelled" | "expired";
 export type KeyState = "ACTIVE" | "PENDING";
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/lib/types.ts b/apps/frontend/src/lib/types.ts
index 29bfb97e4..039b063c7 100644
--- a/apps/frontend/src/lib/types.ts
+++ b/apps/frontend/src/lib/types.ts
@@ -942,12 +942,7 @@ export interface BrokerSyncState {
  * Alternative asset kind for API requests (lowercase variants)
  */
 export type AlternativeAssetKindApi =
-  | "property"
-  | "vehicle"
-  | "collectible"
-  | "precious"
-  | "liability"
-  | "other";
+  "property" | "vehicle" | "collectible" | "precious" | "liability" | "other";
 
 /**
  * Request to create a new alternative asset (property, vehicle, collectible, etc.)
@@ -1195,12 +1190,7 @@ export interface PreciousMetalMetadata {
  */
 export interface LiabilityMetadata {
   liabilityType?:
-    | "mortgage"
-    | "auto_loan"
-    | "student_loan"
-    | "credit_card"
-    | "personal_loan"
-    | "heloc";
+    "mortgage" | "auto_loan" | "student_loan" | "credit_card" | "personal_loan" | "heloc";
   linkedAssetId?: string;
   originalAmount?: string;
   originationDate?: string;
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..f37e08d39 100644
--- a/apps/frontend/src/pages/activity/components/activity-type-picker.tsx
+++ b/apps/frontend/src/pages/activity/components/activity-type-picker.tsx
@@ -11,12 +11,7 @@ import { Icons, type IconName } from "@sensible-folio/ui/components/ui/icons";
 import { cn } from "@/lib/utils";
 
 export type PrimaryActivityType =
-  | "BUY"
-  | "SELL"
-  | "DEPOSIT"
-  | "WITHDRAWAL"
-  | "DIVIDEND"
-  | "TRANSFER";
+  "BUY" | "SELL" | "DEPOSIT" | "WITHDRAWAL" | "DIVIDEND" | "TRANSFER";
 export type SecondaryActivityType = "SPLIT" | "FEE" | "INTEREST" | "TAX";
 export type ActivityType = PrimaryActivityType | SecondaryActivityType;
 
@@ -79,7 +74,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 +89,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/account-select.tsx b/apps/frontend/src/pages/activity/components/forms/fields/account-select.tsx
index ea1c4c371..0983a9ffa 100644
--- a/apps/frontend/src/pages/activity/components/forms/fields/account-select.tsx
+++ b/apps/frontend/src/pages/activity/components/forms/fields/account-select.tsx
@@ -40,8 +40,7 @@ export function AccountSelect<TFieldValues extends FieldValues = FieldValues>({
   const { control, getFieldState, getValues, setValue, watch } = useFormContext<TFieldValues>();
   const selectedAccountId = watch(name) as string | undefined;
   const watchedCurrency = watch((currencyName ?? name) as FieldPath<TFieldValues>) as
-    | string
-    | undefined;
+    string | undefined;
 
   // Backfill currency when account options arrive after mount (e.g., preselected account via URL).
   useEffect(() => {
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/hooks/use-activity-search.ts b/apps/frontend/src/pages/activity/hooks/use-activity-search.ts
index f877f7d96..ad880c1cd 100644
--- a/apps/frontend/src/pages/activity/hooks/use-activity-search.ts
+++ b/apps/frontend/src/pages/activity/hooks/use-activity-search.ts
@@ -31,8 +31,7 @@ export interface UseActivitySearchPaginatedOptions extends BaseOptions {
 }
 
 export type UseActivitySearchOptions =
-  | UseActivitySearchInfiniteOptions
-  | UseActivitySearchPaginatedOptions;
+  UseActivitySearchInfiniteOptions | UseActivitySearchPaginatedOptions;
 
 // Result type for infinite mode (load more)
 export interface UseActivitySearchInfiniteResult {
@@ -59,8 +58,7 @@ export interface UseActivitySearchPaginatedResult {
 }
 
 export type UseActivitySearchResult =
-  | UseActivitySearchInfiniteResult
-  | UseActivitySearchPaginatedResult;
+  UseActivitySearchInfiniteResult | UseActivitySearchPaginatedResult;
 
 const DEFAULT_SORT = { id: "date", desc: true };
 const DEFAULT_PAGE_SIZE = 50;
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-asset-content.tsx b/apps/frontend/src/pages/asset/alternative-asset-content.tsx
index a63d242ba..9d97a33bf 100644
--- a/apps/frontend/src/pages/asset/alternative-asset-content.tsx
+++ b/apps/frontend/src/pages/asset/alternative-asset-content.tsx
@@ -451,8 +451,7 @@ const AlternativeAssetDetailCard: React.FC<AlternativeAssetDetailCardProps> = ({
     const currentBalance = Math.abs(parseFloat(holding.marketValue));
     // Check both new field (original_amount) and legacy field (purchase_price) for backwards compatibility
     const origAmountStr = (metadata.original_amount ?? metadata.purchase_price) as
-      | string
-      | undefined;
+      string | undefined;
     const originalAmount = origAmountStr ? parseFloat(origAmountStr) : null;
 
     if (!originalAmount || originalAmount <= 0) {
@@ -695,8 +694,7 @@ function getDetailRows(
 
       // Original amount (check both new and legacy field names)
       const originalAmount = (metadata.original_amount ?? metadata.purchase_price) as
-        | string
-        | undefined;
+        string | undefined;
       if (originalAmount) {
         rows.push({
           label: "Original Amount",
@@ -720,8 +718,7 @@ function getDetailRows(
 
       // Origination date (check both new and legacy field names)
       const originationDate = (metadata.origination_date ?? metadata.purchase_date) as
-        | string
-        | undefined;
+        string | undefined;
       if (originationDate) {
         rows.push({
           label: "Origination Date",
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..739266cd3 100644
--- a/apps/frontend/src/pages/asset/asset-profile-page.tsx
+++ b/apps/frontend/src/pages/asset/asset-profile-page.tsx
@@ -326,8 +326,7 @@ export const AssetProfilePage = () => {
     // Legacy data is in asset.metadata.legacy (for migration purposes)
     // New data should come from taxonomies
     const legacy = asset?.metadata?.legacy as
-      | { sectors?: string | null; countries?: string | null }
-      | undefined;
+      { sectors?: string | null; countries?: string | null } | undefined;
 
     return {
       id: instrument?.id ?? asset?.id ?? "",
@@ -843,7 +842,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..5ca3b60f8 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}
@@ -261,13 +261,11 @@ export default function PerformancePage() {
           (item): item is PerformanceDataFromHook =>
             item !== null && typeof item.id === "string" && Array.isArray(item.returns),
         )
-        .map(
-          (perfItem): ChartDataItem => ({
-            id: perfItem.id,
-            name: perfItem.name, // Can now safely access name from perfItem
-            returns: perfItem.returns,
-          }),
-        )
+        .map((perfItem): ChartDataItem => ({
+          id: perfItem.id,
+          name: perfItem.name, // Can now safely access name from perfItem
+          returns: perfItem.returns,
+        }))
     );
   }, [performanceData, selectedItems]);
 
@@ -354,7 +352,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 +510,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 +532,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 +554,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 +572,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/crates/core/src/assets/assets_service.rs b/crates/core/src/assets/assets_service.rs
index 2b2cdd783..4881a44c0 100644
--- a/crates/core/src/assets/assets_service.rs
+++ b/crates/core/src/assets/assets_service.rs
@@ -1345,7 +1345,7 @@ impl AssetServiceTrait for AssetService {
         }
 
         let resolved_quote_ccy_by_key: HashMap<String, String> =
-            stream::iter(resolution_inputs_by_key.into_iter())
+            stream::iter(resolution_inputs_by_key)
                 .map(|(resolution_key, input)| async move {
                     let (
                         symbol,
diff --git a/crates/core/src/lib.rs b/crates/core/src/lib.rs
index dd2802d64..9e1e5ab90 100644
--- a/crates/core/src/lib.rs
+++ b/crates/core/src/lib.rs
@@ -4,6 +4,9 @@
 //! It is database-agnostic and defines traits that are implemented
 //! by the `storage-sqlite` crate.
 
+// async_trait generates `#[must_use]` on returned futures, which is redundant.
+#![allow(clippy::double_must_use)]
+
 pub mod accounts;
 pub mod activities;
 pub mod addons;
diff --git a/crates/core/src/portfolio/allocation/allocation_service.rs b/crates/core/src/portfolio/allocation/allocation_service.rs
index b84c29d64..617a4771c 100644
--- a/crates/core/src/portfolio/allocation/allocation_service.rs
+++ b/crates/core/src/portfolio/allocation/allocation_service.rs
@@ -206,7 +206,7 @@ impl AllocationService {
             }
             // Sort children by value descending
             for children in children_map.values_mut() {
-                children.sort_by(|a, b| b.value.cmp(&a.value));
+                children.sort_by_key(|c| std::cmp::Reverse(c.value));
             }
         }
 
@@ -244,7 +244,7 @@ impl AllocationService {
             .collect();
 
         // Sort by value descending
-        allocations.sort_by(|a, b| b.value.cmp(&a.value));
+        allocations.sort_by_key(|a| std::cmp::Reverse(a.value));
 
         TaxonomyAllocation {
             taxonomy_id: taxonomy_id.to_string(),
@@ -628,7 +628,7 @@ impl AllocationServiceTrait for AllocationService {
             .collect();
 
         // Sort by market value descending
-        summaries.sort_by(|a, b| b.market_value.cmp(&a.market_value));
+        summaries.sort_by_key(|s| std::cmp::Reverse(s.market_value));
 
         Ok(AllocationHoldings {
             taxonomy_id: taxonomy_id.to_string(),
diff --git a/crates/core/src/portfolio/net_worth/net_worth_service.rs b/crates/core/src/portfolio/net_worth/net_worth_service.rs
index ca0077779..57a94e52a 100644
--- a/crates/core/src/portfolio/net_worth/net_worth_service.rs
+++ b/crates/core/src/portfolio/net_worth/net_worth_service.rs
@@ -178,7 +178,7 @@ impl NetWorthService {
             .collect();
 
         // Sort by value descending for better display
-        breakdown.sort_by(|a, b| b.value.cmp(&a.value));
+        breakdown.sort_by_key(|b| std::cmp::Reverse(b.value));
 
         // Calculate total
         let total = breakdown.iter().map(|item| item.value).sum();
@@ -201,7 +201,7 @@ impl NetWorthService {
             .collect();
 
         // Sort by value descending
-        breakdown.sort_by(|a, b| b.value.cmp(&a.value));
+        breakdown.sort_by_key(|b| std::cmp::Reverse(b.value));
 
         // Calculate total
         let total = breakdown.iter().map(|item| item.value).sum();
diff --git a/crates/core/src/portfolio/snapshot/holdings_calculator.rs b/crates/core/src/portfolio/snapshot/holdings_calculator.rs
index 548a19245..b1151054d 100644
--- a/crates/core/src/portfolio/snapshot/holdings_calculator.rs
+++ b/crates/core/src/portfolio/snapshot/holdings_calculator.rs
@@ -348,7 +348,7 @@ impl HoldingsCalculator {
             Err(e) => {
                 warn!(
                     "Holdings Calc (NetContrib Deposit {}): Failed conversion {} {}->{} on {}: {}. Base contribution not updated.",
-                    activity.id, activity_amount, activity_currency, &base_ccy, activity_date, e
+                    activity.id, activity_amount, activity_currency, base_ccy, activity_date, e
                 );
                 Decimal::ZERO
             }
@@ -396,7 +396,7 @@ impl HoldingsCalculator {
             Err(e) => {
                 warn!(
                     "Holdings Calc (NetContrib Withdrawal {}): Failed conversion {} {}->{} on {}: {}. Base contribution not updated.",
-                    activity.id, activity_amount, activity_currency, &base_ccy, activity_date, e
+                    activity.id, activity_amount, activity_currency, base_ccy, activity_date, e
                 );
                 Decimal::ZERO
             }
@@ -456,7 +456,7 @@ impl HoldingsCalculator {
                 Err(e) => {
                     warn!(
                         "Holdings Calc (NetContrib Credit Bonus {}): Failed conversion {} {}->{} on {}: {}. Base contribution not updated.",
-                        activity.id, activity_amount, activity_currency, &base_ccy, activity_date, e
+                        activity.id, activity_amount, activity_currency, base_ccy, activity_date, e
                     );
                     Decimal::ZERO
                 }
@@ -999,7 +999,7 @@ impl HoldingsCalculator {
                     Err(e) => {
                         warn!(
                             "Failed to convert cash {} {} to base currency {}: {}. Using unconverted.",
-                            amount, currency, &base_ccy, e
+                            amount, currency, base_ccy, e
                         );
                         total_base += amount;
                     }
diff --git a/crates/core/src/quotes/service.rs b/crates/core/src/quotes/service.rs
index 08fa9718f..7b5be4a45 100644
--- a/crates/core/src/quotes/service.rs
+++ b/crates/core/src/quotes/service.rs
@@ -1232,7 +1232,7 @@ where
             });
         }
 
-        infos.sort_by(|a, b| a.priority.cmp(&b.priority));
+        infos.sort_by_key(|i| i.priority);
         Ok(infos)
     }
 
@@ -1338,7 +1338,7 @@ where
             let get_field =
                 |idx: usize| record.get(idx).map(|s| s.trim()).filter(|s| !s.is_empty());
             let parse_decimal = |idx: Option<usize>| -> Option<Decimal> {
-                idx.and_then(&get_field)
+                idx.and_then(get_field)
                     .and_then(|s| Decimal::from_str(&s.replace(',', "")).ok())
             };
 
diff --git a/crates/core/src/quotes/sync.rs b/crates/core/src/quotes/sync.rs
index 2f0b9d5aa..93240744d 100644
--- a/crates/core/src/quotes/sync.rs
+++ b/crates/core/src/quotes/sync.rs
@@ -1036,7 +1036,7 @@ where
         }
 
         // Sort by priority (highest first)
-        plans.sort_by(|a, b| b.priority.cmp(&a.priority));
+        plans.sort_by_key(|p| std::cmp::Reverse(p.priority));
         Ok(plans)
     }
 
diff --git a/crates/market-data/src/provider/alpha_vantage/mod.rs b/crates/market-data/src/provider/alpha_vantage/mod.rs
index b08f50e82..6bfc25fd5 100644
--- a/crates/market-data/src/provider/alpha_vantage/mod.rs
+++ b/crates/market-data/src/provider/alpha_vantage/mod.rs
@@ -631,7 +631,7 @@ impl AlphaVantageProvider {
             .collect();
 
         // Sort by timestamp ascending
-        quotes.sort_by(|a, b| a.timestamp.cmp(&b.timestamp));
+        quotes.sort_by_key(|a| a.timestamp);
 
         debug!(
             "Alpha Vantage: fetched {} equity quotes for {}",
@@ -691,7 +691,7 @@ impl AlphaVantageProvider {
             .collect();
 
         // Sort by timestamp ascending
-        quotes.sort_by(|a, b| a.timestamp.cmp(&b.timestamp));
+        quotes.sort_by_key(|a| a.timestamp);
 
         debug!(
             "Alpha Vantage: fetched {} FX quotes for {}/{}",
@@ -752,7 +752,7 @@ impl AlphaVantageProvider {
             .collect();
 
         // Sort by timestamp ascending
-        quotes.sort_by(|a, b| a.timestamp.cmp(&b.timestamp));
+        quotes.sort_by_key(|a| a.timestamp);
 
         debug!(
             "Alpha Vantage: fetched {} crypto quotes for {}/{}",
diff --git a/crates/market-data/src/provider/finnhub/mod.rs b/crates/market-data/src/provider/finnhub/mod.rs
index 2ebca0265..d06d61148 100644
--- a/crates/market-data/src/provider/finnhub/mod.rs
+++ b/crates/market-data/src/provider/finnhub/mod.rs
@@ -430,7 +430,7 @@ impl FinnhubProvider {
         }
 
         // Sort by timestamp ascending
-        quotes.sort_by(|a, b| a.timestamp.cmp(&b.timestamp));
+        quotes.sort_by_key(|a| a.timestamp);
 
         debug!(
             "Finnhub: fetched {} historical quotes for {} ({} to {})",
diff --git a/crates/market-data/src/provider/traits.rs b/crates/market-data/src/provider/traits.rs
index 11fc4a0bc..fee3ed77d 100644
--- a/crates/market-data/src/provider/traits.rs
+++ b/crates/market-data/src/provider/traits.rs
@@ -48,6 +48,7 @@ use super::capabilities::{ProviderCapabilities, RateLimit};
 ///     // ... implement quote methods
 /// }
 /// ```
+#[allow(clippy::double_must_use)]
 #[async_trait]
 pub trait MarketDataProvider: Send + Sync {
     /// Unique identifier for this provider.
diff --git a/docs/addons/addon-api-reference.md b/docs/addons/addon-api-reference.md
index 8358339a8..904c78b54 100644
--- a/docs/addons/addon-api-reference.md
+++ b/docs/addons/addon-api-reference.md
@@ -383,15 +383,9 @@ console.log(meta.totalRowCount);
 
 // Batch create
 const newActivities = await ctx.api.activities.saveMany([
-  {
-    /* activity 1 */
-  },
-  {
-    /* activity 2 */
-  },
-  {
-    /* activity 3 */
-  },
+  {/* activity 1 */},
+  {/* activity 2 */},
+  {/* activity 3 */},
 ]);
 ```
 
diff --git a/docs/addons/shared-query-client-design.md b/docs/addons/shared-query-client-design.md
index 568ee67c2..bfee9bb0d 100644
--- a/docs/addons/shared-query-client-design.md
+++ b/docs/addons/shared-query-client-design.md
@@ -17,9 +17,7 @@ application's QueryClient:
 
 ```tsx
 // Each addon had its own QueryClient
-const queryClient = new QueryClient({
-  /* config */
-});
+const queryClient = new QueryClient({/* config */});
 ```
 
 **After:**
@@ -35,12 +33,7 @@ The main app exposes its QueryClient globally:
 
 ```tsx
 // In App.tsx
-const [queryClient] = useState(
-  () =>
-    new QueryClient({
-      /* config */
-    }),
-);
+const [queryClient] = useState(() => new QueryClient({/* config */}));
 (window as any).__sensible_folio_query_client__ = queryClient;
 ```
 
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/docs/getting-started.md b/docs/getting-started.md
index aa2101714..b0402f724 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -244,6 +244,8 @@ your devices — no third-party server can read your data.
 
 ## Next Steps
 
+- Read the [user manual](./user-manual.md) for the full feature list and
+  step-by-step guides to managing your finances.
 - Add your first account and record a few activities manually to get a feel for
   the flow.
 - Review the [activity types reference](./activities/activity-types.md) before
diff --git a/docs/user-manual.md b/docs/user-manual.md
new file mode 100644
index 000000000..47bc5c323
--- /dev/null
+++ b/docs/user-manual.md
@@ -0,0 +1,550 @@
+# Sensible Folio — User Manual
+
+Sensible Folio is a local-first personal wealth application built for Australian
+investors. It brings your investments (shares, ETFs, managed funds, crypto,
+cash) and your bank accounts into one private dashboard, with automatic import
+of Australian bank statements, portfolio performance analytics, income tracking,
+and tax reporting.
+
+This manual is written from the **user's point of view**: what each feature
+does, and how to configure and use it to manage your personal finances.
+
+> **New to Folio?** If you just want to install it and get running, start with
+> [Getting Started](./getting-started.md). This manual is the full reference.
+
+---
+
+## Table of contents
+
+1. [Introduction](#1-introduction)
+2. [Key concepts](#2-key-concepts)
+3. [Feature list at a glance](#3-feature-list-at-a-glance)
+4. [Installing and first run](#4-installing-and-first-run)
+5. [Configuring Folio](#5-configuring-folio)
+6. [Managing your personal finances](#6-managing-your-personal-finances)
+7. [Activity types reference](#7-activity-types-reference)
+8. [Supported banks and brokers](#8-supported-banks-and-brokers)
+9. [Privacy and security](#9-privacy-and-security)
+10. [Troubleshooting and FAQ](#10-troubleshooting-and-faq)
+11. [Getting help](#11-getting-help)
+
+---
+
+## 1. Introduction
+
+### What Folio is
+
+Folio (distributed as **Sensible Folio**) is a wealth portfolio management
+application. Everything — your accounts, transactions, holdings, performance,
+and reports — lives in a SQLite database **on your own device**. There is no
+cloud account, no subscription, and no third-party server holding your financial
+data.
+
+### Who it is for
+
+- Australian investors who want to track shares, ETFs, managed funds, property,
+  crypto, and cash in one place.
+- People who want to import transactions from Australian banks and brokers
+  without handing credentials to a third-party aggregation service.
+- Anyone who values privacy: your data stays local unless _you_ explicitly turn
+  on encrypted device sync.
+
+### What makes Folio different
+
+- **Local-first.** Your data is stored on your machine. It works offline.
+- **Australian-focused.** Bank Connect supports Australian institutions, and
+  there is first-class support for importing bank and broker statements.
+- **Unified view.** Investments and bank/cash accounts appear in one dashboard,
+  so you can see your complete financial picture — not just your brokerage.
+- **Extensible.** An addon system lets you add new views and analysis without
+  modifying the core app.
+- **Private sync.** Optional end-to-end encrypted sync replicates your database
+  between _your own_ devices.
+
+---
+
+## 2. Key concepts
+
+Understanding these terms makes the rest of the manual easy to follow.
+
+| Concept                 | What it means in Folio                                                                                                                                              |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Account**             | A single real-world account — a brokerage, bank, or cash account. You can have as many as you have in real life.                                                    |
+| **Activity**            | Any event that changes an account: a trade, a deposit, a dividend, a fee, and so on. There are 14 canonical activity types (see [§7](#7-activity-types-reference)). |
+| **Holding / Position**  | The quantity of a security you own in an account, derived from your activities.                                                                                     |
+| **Portfolio**           | The combined view of all your accounts and holdings.                                                                                                                |
+| **Asset & taxonomy**    | A security or instrument you hold, plus the classification system (asset class, sector, region) used for allocation and grouping.                                   |
+| **Benchmark**           | An index (for example an ASX index) you compare your portfolio performance against.                                                                                 |
+| **Contribution limit**  | A cap on contributions (for example superannuation concessional/non-concessional caps) that you can track against.                                                  |
+| **Addon**               | An optional, sandboxed extension that adds new views or features.                                                                                                   |
+| **Bank Connect**        | The built-in browser panel that logs into your bank/broker site and imports transactions — desktop app only.                                                        |
+| **Wealthfolio Connect** | The optional encrypted sync feature that replicates your data to your own devices.                                                                                  |
+
+---
+
+## 3. Feature list at a glance
+
+### Portfolio and investments
+
+- **Multi-asset tracking** — shares, ETFs, managed funds, property, crypto,
+  cash.
+- **Holdings view** — current positions per account with cost basis.
+- **Holdings insights** — deeper breakdown and analysis of what you hold.
+- **Asset profiles** — a per-asset page showing your activity and exposure in
+  that instrument.
+- **Performance analytics** — time-weighted return (TWR) and money-weighted
+  return (IRR).
+- **Benchmark comparison** — compare your performance against a chosen index.
+- **Allocation charts** — see how your money is split by asset class, sector,
+  currency, and taxonomy.
+
+### Income and tax
+
+- **Income tracking** — dividends, interest, and distributions over time.
+- **Dividend tracking** — including dividend reinvestment (DRIP) handling.
+- **Tax reporting support** — capital gains and income summaries, plus an
+  **Exports** screen for taking data out of the app.
+
+### Bank and broker integration
+
+- **Bank Connect** — automatic import from supported Australian banks and
+  brokers via an embedded browser panel.
+- **Statement import** — import **CSV, OFX, and QIF** files from banks and
+  brokers.
+- **AI-assisted import** — the AI assistant can help map and import a CSV.
+- **Transaction categorisation and cash-flow analysis** — understand where your
+  money goes.
+
+### Planning and insight
+
+- **Net worth view** — your complete financial picture across accounts.
+- **Goals** — set and track savings/investment targets.
+- **Contribution limits** — track contributions against configured caps.
+- **Portfolio insights** — analysis screens that surface patterns in your data.
+- **Health view** — indicators that summarise the state of your finances.
+- **AI assistant** — ask questions about your data in natural language.
+
+### Platform and privacy
+
+- **Local-first storage** — SQLite on your device; works offline.
+- **Desktop and web parity** — the same app runs natively (macOS, Windows,
+  Linux) and in the browser via Docker.
+- **Addons** — install community extensions from a file.
+- **Private device sync** — optional E2EE sync between your own devices.
+- **Multi-platform** — native desktop installers plus a Docker web image.
+
+---
+
+## 4. Installing and first run
+
+### Desktop (macOS, Windows, Linux)
+
+Download the installer for your platform from GitHub Releases:
+
+```
+https://github.com/Sensible-Analytics/folio/releases
+```
+
+| Platform | File type             |
+| -------- | --------------------- |
+| macOS    | `.dmg`                |
+| Windows  | `.msi` or NSIS `.exe` |
+| Linux    | `.AppImage`           |
+
+Open the downloaded file and follow the standard install steps for your OS. No
+configuration is required on first launch.
+
+### Web mode (Docker)
+
+If you prefer browser access, or want to run Folio on a home server:
+
+```bash
+docker run -d \
+  -p 7472:7472 \
+  -v /path/to/your/data:/data \
+  -e WF_DB_PATH=/data/folio.db \
+  -e WF_SECRET_KEY=your-32-byte-secret-key-here \
+  ghcr.io/sensible-analytics/folio:latest
+```
+
+Then open `http://localhost:7472`.
+
+> **Note:** Bank Connect is a desktop-only feature. In web mode, use CSV/OFX/QIF
+> import instead.
+
+### First run: onboarding
+
+The first time you launch Folio you are guided through an **onboarding** flow.
+It introduces the app and helps you create your first account and set up your
+preferences. You can re-run or adjust these settings later at any time from
+**Settings**.
+
+---
+
+## 5. Configuring Folio
+
+All configuration lives under **Settings** in the sidebar. Below is what each
+section controls and how to use it.
+
+### General settings
+
+Basic application preferences: default currency, language/format, and other
+startup options. Set your **base currency** first — it drives how values are
+displayed across the app.
+
+### Accounts
+
+Create and manage accounts. Each account has a name, a currency, and a type. Use
+one account per real-world brokerage, bank, or cash account.
+
+> **Example:** "CommSec Trading", "ANZ Everyday", "Super — AustralianSuper".
+
+### Securities / market data
+
+- **Securities** — the list of assets (tickers/instruments) Folio knows about.
+- **Market data** — configure where prices come from, and **import market data**
+  from a file if you have offline prices.
+
+Keeping market data current is what makes your valuation and performance numbers
+accurate.
+
+### Taxonomies
+
+Classification schemes used to group your assets (for example asset class,
+sector, region). Taxonomies power the allocation charts and breakdowns. Adjust
+them if you want categories that match how _you_ think about your portfolio.
+
+### Contribution limits
+
+Define contribution caps to track against — useful for superannuation
+concessional and non-concessional limits.
+
+### Goals
+
+Create financial goals (for example, a savings target or a target portfolio
+value). Goals give you a progress indicator you can monitor over time.
+
+### Appearance
+
+Theme and display preferences.
+
+### AI providers
+
+Configure the AI assistant. Add a provider (and credentials) here to enable the
+**Assistant**. If you prefer not to use AI features, leave this empty — the rest
+of the app works fully without it.
+
+### Connect (Wealthfolio Connect)
+
+Configure optional **encrypted device sync** so your Folio data appears on your
+other devices. Keys stay on your devices; no third-party server can read your
+data. Leave this off if you only use Folio on one machine.
+
+### Addons
+
+Install and manage addons (see [§6.10](#610-extend-folio-with-addons)).
+
+### Exports
+
+Export your data — for example, for backup, reporting, or handing to an
+accountant.
+
+### About
+
+Version information and app details.
+
+---
+
+## 6. Managing your personal finances
+
+This section walks through the day-to-day workflows, in the order most people
+adopt them.
+
+### 6.1 Track your investments
+
+**Where:** Dashboard, **Holdings**, **Holdings Insights**, and individual
+**Asset** pages.
+
+- The **Dashboard** (Portfolio page) is your home view: total value, allocation,
+  and performance at a glance.
+- **Holdings** lists every position you own, per account.
+- **Holdings Insights** drills into what you hold across accounts.
+- Click any asset to open its **Asset Profile** page for activity and exposure
+  in that instrument.
+
+### 6.2 Import your transactions
+
+Everything in Folio is built from **activities**. There are three ways to get
+them in:
+
+1. **Manual entry.** Open an account and use **Add Activity**, or go to
+   **Activities → Manage** to review and edit what you have. Best for a small
+   number of transactions or corrections.
+
+2. **File import (CSV / OFX / QIF).** Export your history from your bank or
+   broker, then use the **Import** screen. Folio reads **CSV**, **OFX**, and
+   **QIF** files and maps the columns/fields to its activity types. You get to
+   review the mapping before it is committed.
+
+3. **Bank Connect (desktop).** Let Folio log into your bank or broker's site and
+   pull the transactions for you. See [§6.3](#63-bank-connect-automatic-import).
+
+> **Tip:** Before a large import, skim the
+> [activity types reference](./activities/activity-types.md) so you map your
+> provider's categories correctly. Unmapped rows become `UNKNOWN` placeholders
+> that you can reclassify later.
+
+### 6.3 Bank Connect (automatic import)
+
+**Where:** **Bank Connect** in the sidebar (desktop app only).
+
+Bank Connect is an embedded browser panel inside Folio. It lets you log into
+your bank or broker and automatically import your transactions, without ever
+handing your credentials to a third-party aggregation service.
+
+How to use it:
+
+1. Open **Bank Connect** from the sidebar.
+2. Choose your institution and open the connector.
+3. The panel loads the institution's real website in an embedded browser.
+4. Log in as you normally would — **on the bank's own site**.
+5. Folio detects the transaction history on the page and offers to import it.
+6. Review the detected transactions and confirm the import.
+
+Your credentials are entered directly on the bank's website inside the panel.
+They are **never stored by Folio and never sent anywhere** — the panel runs
+entirely on your local machine.
+
+Connector status is shown as you go: **Idle → Awaiting Login → Logged In →
+Downloading… → Complete** (or **Error** if something goes wrong).
+
+Supported institutions are listed in [§8](#8-supported-banks-and-brokers). For
+banks that are not yet supported by Bank Connect, use CSV/OFX/QIF import — most
+Australian banks let you export a statement file.
+
+### 6.4 Understand your performance
+
+**Where:** **Performance**.
+
+Folio computes standard performance metrics so you can judge how your portfolio
+is really doing:
+
+- **TWR (time-weighted return)** — how your investments performed, independent
+  of when you added or withdrew money.
+- **IRR (money-weighted return)** — the return on the money you actually put in.
+
+Use **Benchmark comparison** on the performance view to line your results up
+against a chosen index.
+
+### 6.5 Track income and dividends
+
+**Where:** **Income**.
+
+See the dividends, interest, and distributions you have received, over any
+period you choose. Dividend reinvestment (DRIP) is handled so reinvested amounts
+are reflected correctly rather than appearing as cash you never received.
+
+### 6.6 See your allocations and insights
+
+**Where:** **Insights**, **Holdings Insights**, allocation charts on the
+dashboard.
+
+Allocation charts break your portfolio down by **asset class**, **sector**, and
+**currency** (driven by your taxonomies). The **Insights** screens surface
+patterns — concentration, drift, and other observations — to help you decide
+what to do next.
+
+### 6.7 Track your net worth
+
+**Where:** Dashboard.
+
+Folio brings investment and cash/bank accounts into a single view so you can see
+your **net worth** as one number, and track how it changes over time.
+
+### 6.8 Set and track goals
+
+**Where:** **Settings → Goals** (and the goals widget on the dashboard).
+
+Create a goal with a target and a date. Folio shows progress toward it as your
+balances change. The bundled **goal-progress-tracker** addon adds a dedicated
+progress view (see [§6.10](#610-extend-folio-with-addons)).
+
+### 6.9 Plan for tax
+
+Folio helps you prepare for tax time:
+
+- **Capital gains and income summaries** are derived from your activities
+  (`SELL` activities are matched using FIFO cost basis by default).
+- **Contribution limits** (Settings) let you watch contributions against caps.
+- **Exports** and reports let you pull the numbers you need for your return or
+  for your accountant.
+
+> Folio is a tracking tool, not tax advice. Always confirm treatment with a
+> qualified professional.
+
+### 6.10 Use the AI assistant
+
+**Where:** **Assistant** in the sidebar (requires an AI provider configured in
+**Settings → AI Providers**).
+
+The assistant lets you ask questions about your own data in natural language —
+for example, to summarise your holdings, explain a change, or help map a CSV
+during import. It runs against your local data and the provider you configured.
+
+### 6.11 Extend Folio with addons
+
+**Where:** **Settings → Addons**.
+
+Addons are optional extensions that add new views or features. They run in a
+sandboxed environment and reach your data only through a controlled API.
+
+To install an addon:
+
+1. Download the addon file (`.folio-addon`).
+2. In Folio, go to **Settings → Addons**.
+3. Click **Install from file** and select the file.
+4. The addon's views appear in the sidebar immediately.
+
+To remove one, go to **Settings → Addons**, find it, and click **Uninstall**.
+
+Folio ships with three example addons: **goal-progress-tracker**,
+**investment-fees-tracker**, and **swingfolio-addon**. For addon development,
+see [./addons/addon-getting-started.md](./addons/addon-getting-started.md).
+
+---
+
+## 7. Activity types reference
+
+Every transaction is one of 14 canonical types. Choosing the right type matters
+— each affects your cash balance, holdings, cost basis, and performance
+differently.
+
+| Type           | What it represents                                                                                                      |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `BUY`          | Purchase of a security. Decreases cash, increases holdings.                                                             |
+| `SELL`         | Sale of a security. Increases cash, decreases holdings (FIFO cost matching).                                            |
+| `SPLIT`        | Stock split or reverse split. Adjusts quantity and per-share cost basis; total cost unchanged.                          |
+| `DEPOSIT`      | Cash arriving from outside your portfolio (e.g., funding your brokerage account). Counts as a new capital contribution. |
+| `WITHDRAWAL`   | Cash leaving to an external destination. Reduces net contribution.                                                      |
+| `TRANSFER_IN`  | Moving cash or assets into this account from another account you own. Cost basis is preserved.                          |
+| `TRANSFER_OUT` | Moving cash or assets out of this account to another account you own. Cost basis is preserved.                          |
+| `DIVIDEND`     | Cash dividend paid by a holding. Increases cash; does not affect holdings or cost basis.                                |
+| `INTEREST`     | Interest earned on cash or fixed-income. Increases cash.                                                                |
+| `CREDIT`       | Refund, rebate, or bonus. Increases cash. (A `BONUS` subtype counts as new capital; `REBATE`/`REFUND` do not.)          |
+| `FEE`          | Stand-alone fee not attached to a trade (e.g., account management fee). Decreases cash.                                 |
+| `TAX`          | Tax paid from the account (e.g., withholding). Decreases cash.                                                          |
+| `ADJUSTMENT`   | Non-trade correction — use for corporate actions, option expirations, return-of-capital basis changes.                  |
+| `UNKNOWN`      | Placeholder for unrecognized imports. Has no automatic effect until you reclassify it.                                  |
+
+**`TRANSFER_IN` vs `DEPOSIT`.** Use `DEPOSIT` when cash comes from _outside_
+your tracked portfolio. Use `TRANSFER_IN` when moving between two accounts you
+both track in Folio — that way the move nets to zero at the portfolio level and
+does not inflate your net contribution.
+
+**`ADJUSTMENT` vs `UNKNOWN`.** Use `ADJUSTMENT` when you know what the
+correction is but no other type fits. Use `UNKNOWN` as a temporary placeholder
+for imported rows you have not classified yet.
+
+For the complete reference, including subtypes such as `DRIP` and
+`STAKING_REWARD` and their field requirements, see
+[./activities/activity-types.md](./activities/activity-types.md).
+
+---
+
+## 8. Supported banks and brokers
+
+### Bank Connect (automatic import)
+
+The following institutions are supported by the built-in Bank Connect panel:
+
+| Institution         | Type   |
+| ------------------- | ------ |
+| CommBank (CBA)      | Bank   |
+| ANZ                 | Bank   |
+| ING                 | Bank   |
+| Bank of Melbourne   | Bank   |
+| Beyond Bank         | Bank   |
+| Interactive Brokers | Broker |
+
+**Coming soon** (broker support in progress): CommSec, Sharesies, SelfWealth,
+Stake.
+
+### Importing from any other institution
+
+If your bank or broker is not listed above, you can still track it. Most
+Australian institutions let you export a statement, and Folio imports **CSV,
+OFX, and QIF** files. Use the **Import** screen and map the columns to Folio's
+activity types.
+
+---
+
+## 9. Privacy and security
+
+- **Local-first.** Your data is stored in a SQLite database on your device.
+- **No cloud storage.** Folio does not store your financial data on any server.
+- **No tracking.** No analytics or tracking.
+- **Open source.** You can audit the code yourself.
+- **Credentials stay put.** Bank Connect enters your login directly on the
+  bank's own site inside a local panel; Folio never stores or transmits them.
+- **Encrypted sync (optional).** If you enable Wealthfolio Connect, your
+  database is replicated between your own devices with end-to-end encryption.
+  Keys stay on your devices.
+
+Never commit secrets (API keys, tokens, database credentials) to the repository.
+See [SECURITY.md](./SECURITY.md) for the full policy.
+
+---
+
+## 10. Troubleshooting and FAQ
+
+**Where is my data stored?**
+
+In a local SQLite database. In desktop mode it lives in the app's data
+directory; in web/Docker mode it is the file at `WF_DB_PATH`.
+
+**Can I use Folio on more than one computer?**
+
+Yes. Enable **Wealthfolio Connect** (Settings → Connect) for encrypted sync
+between your own devices, or copy the database file.
+
+**A transaction imported as `UNKNOWN`. What do I do?**
+
+Open **Activities → Manage**, find the transaction, and reclassify it to the
+correct type. `UNKNOWN` activities have no effect on your holdings until you do.
+
+**Why is my portfolio value or performance wrong?**
+
+Check that (a) all activities are recorded, (b) market data is current (Settings
+→ Market Data), and (c) transaction types are classified correctly.
+
+**Bank Connect isn't available.**
+
+Bank Connect is a desktop-only feature. In web mode, use CSV/OFX/QIF import.
+
+**My bank isn't in the Bank Connect list.**
+
+Export a statement from your bank and import it (CSV/OFX/QIF). Support for more
+institutions is being added over time.
+
+**Do I need the AI provider configured?**
+
+No. AI features are optional. Everything else works without a provider.
+
+---
+
+## 11. Getting help
+
+- **Getting Started:** [./getting-started.md](./getting-started.md)
+- **Activity types:**
+  [./activities/activity-types.md](./activities/activity-types.md)
+- **Addons:** [./addons/index.md](./addons/index.md)
+- **Security policy:** [./SECURITY.md](./SECURITY.md)
+- **Issues and questions:**
+  [GitHub Issues](https://github.com/Sensible-Analytics/folio/issues)
+
+---
+
+## Disclaimer
+
+Folio is a personal finance tracking tool and is **not financial advice**.
+Always consult a qualified financial advisor before making investment decisions.
diff --git a/packages/addon-sdk/src/data-types.ts b/packages/addon-sdk/src/data-types.ts
index ec3288afb..7dfc32172 100644
--- a/packages/addon-sdk/src/data-types.ts
+++ b/packages/addon-sdk/src/data-types.ts
@@ -437,8 +437,7 @@ export interface ImportValidationResult {
 }
 
 export type ValidationResult =
-  | { status: 'success' }
-  | { status: 'error'; errors: string[] };
+  { status: 'success' } | { status: 'error'; errors: string[] };
 
 // Holding types
 export interface Instrument {
@@ -825,11 +824,7 @@ export interface TrackedItem {
 export type ImportRunType = 'SYNC' | 'IMPORT';
 export type ImportRunMode = 'INITIAL' | 'INCREMENTAL' | 'BACKFILL' | 'REPAIR';
 export type ImportRunStatus =
-  | 'RUNNING'
-  | 'APPLIED'
-  | 'NEEDS_REVIEW'
-  | 'FAILED'
-  | 'CANCELLED';
+  'RUNNING' | 'APPLIED' | 'NEEDS_REVIEW' | 'FAILED' | 'CANCELLED';
 export type ReviewMode = 'NEVER' | 'ALWAYS' | 'IF_WARNINGS';
 
 export interface ImportRunSummary {
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-types.ts b/packages/ui/src/components/data-grid/data-grid-types.ts
index df2413935..74cd96bdd 100644
--- a/packages/ui/src/components/data-grid/data-grid-types.ts
+++ b/packages/ui/src/components/data-grid/data-grid-types.ts
@@ -282,12 +282,7 @@ export type DateFilterOperator =
   | "isNotEmpty";
 
 export type SelectFilterOperator =
-  | "is"
-  | "isNot"
-  | "isAnyOf"
-  | "isNoneOf"
-  | "isEmpty"
-  | "isNotEmpty";
+  "is" | "isNot" | "isAnyOf" | "isNoneOf" | "isEmpty" | "isNotEmpty";
 
 export type BooleanFilterOperator = "isTrue" | "isFalse";
 
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}