From 6a31533f1c67b721fc59d0c28c8dfb39475edba2 Mon Sep 17 00:00:00 2001
From: Ermolz <00ermzahar@gmail.com>
Date: Thu, 25 Jun 2026 01:22:15 +0300
Subject: [PATCH] Redesign dashboard UI and add micro-animations

- Dashboard: hero Balance card (2/3 width) with sparkline + month delta badge, Income/Expense metric cards with colored glow orbs
- Card: add elevated/metric/glass/danger variants; base transition for hover-lift/shadow/border animations
- Button: active:scale-[0.98] press feedback
- Modal: animate-backdrop-in + animate-modal-in fade+scale entrance
- Skeleton: replace animate-pulse with shimmer gradient animation
- TransactionsHistory: bank-style rows with circle icon, category, meta string, colored amounts
- DashboardAnalytics: drawer slide-in animation, hover:border-brand on chart cards, UX label renames, backdrop overlay
- CreateTransactionModal: segmented pill control for Expense/Income kind
- EmptyState: SVG line-art illustrations (wallet, chart, receipt, spreadsheet, sync)
- SetupPage: split landing layout with branding panel, feature bullets, decorative preview, connect card
---
 app/src/app/styles/index.css                  |  56 +++++
 .../ui/CreateTransactionModal.tsx             |  60 ++++--
 app/src/pages/dashboard/ui/DashboardPage.tsx  | 185 +++++++++++++++-
 app/src/pages/setup/ui/SetupPage.tsx          | 114 ++++++++--
 app/src/shared/ui/button/button-variants.ts   |   2 +-
 app/src/shared/ui/card/Card.tsx               |  26 ++-
 app/src/shared/ui/empty-state/EmptyState.tsx  |  89 ++++++++
 app/src/shared/ui/modal/Modal.tsx             |   4 +-
 app/src/shared/ui/skeleton/Skeleton.tsx       |   6 +-
 .../ui/DashboardAnalytics.tsx                 | 179 ++++++++++------
 .../ui/TransactionsHistory.tsx                | 200 ++++++++----------
 11 files changed, 681 insertions(+), 240 deletions(-)

diff --git a/app/src/app/styles/index.css b/app/src/app/styles/index.css
index ae5153d..5641b67 100644
--- a/app/src/app/styles/index.css
+++ b/app/src/app/styles/index.css
@@ -38,6 +38,11 @@
 
   --color-info: #6366f1;
   --color-info-soft: #eef2ff;
+
+  /* Animations */
+  --animate-modal-in: modal-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-backdrop-in: backdrop-in 0.15s ease-out;
+  --animate-drawer-in-right: drawer-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 /* Dark theme overrides */
@@ -105,3 +110,54 @@ select,
 textarea {
   font: inherit;
 }
+
+@keyframes modal-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawer-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 200% center;
+  }
+  to {
+    background-position: -200% center;
+  }
+}
+
+@utility animate-shimmer {
+  animation: shimmer 1.6s linear infinite;
+  background-image: linear-gradient(
+    90deg,
+    var(--color-border) 0%,
+    var(--color-surface-hover) 50%,
+    var(--color-border) 100%
+  );
+  background-size: 200% 100%;
+}
diff --git a/app/src/features/create-transaction/ui/CreateTransactionModal.tsx b/app/src/features/create-transaction/ui/CreateTransactionModal.tsx
index 131c9ad..bcace78 100644
--- a/app/src/features/create-transaction/ui/CreateTransactionModal.tsx
+++ b/app/src/features/create-transaction/ui/CreateTransactionModal.tsx
@@ -11,7 +11,7 @@ import { DatePicker } from '@shared/ui/date-picker';
 import { Input } from '@shared/ui/input';
 import { localStorageService } from '@shared/lib/storage/local-storage.service';
 import { Modal } from '@shared/ui/modal';
-import { Select } from '@shared/ui/select';
+import { cn } from '@shared/lib/classnames/cn';
 
 import { mapFormToTransaction } from '../lib/map-form-to-transaction';
 import { createTransactionFormSchema } from '../model/transaction-form.schema';
@@ -144,6 +144,16 @@ export function CreateTransactionModal({
   );
   const [formError, setFormError] = useState<string | null>(null);
 
+  function switchKind(kind: 'income' | 'expense') {
+    setValues({
+      ...values,
+      categoryId: selectedCategory?.kind === kind ? values.categoryId : '',
+      categoryName: selectedCategory?.kind === kind ? values.categoryName : '',
+      kind,
+    });
+    setSelectedCategory((current) => (current?.kind === kind ? current : null));
+  }
+
   function selectCategory(category: Category) {
     setSelectedCategory(category);
     setValues({
@@ -222,28 +232,32 @@ export function CreateTransactionModal({
             {visibleError}
           </div>
         ) : null}
-        <Select
-          id="transaction-kind"
-          label="Type"
-          onChange={(nextKind) => {
-            const kind = nextKind as 'income' | 'expense';
-
-            setValues({
-              ...values,
-              categoryId: selectedCategory?.kind === kind ? values.categoryId : '',
-              categoryName: selectedCategory?.kind === kind ? values.categoryName : '',
-              kind,
-            });
-            setSelectedCategory((currentCategory) =>
-              currentCategory?.kind === kind ? currentCategory : null,
-            );
-          }}
-          options={[
-            { label: 'Expense', value: 'expense' },
-            { label: 'Income', value: 'income' },
-          ]}
-          value={values.kind}
-        />
+        <div className="grid grid-cols-2 rounded-xl bg-surface-muted p-1">
+          <button
+            className={cn(
+              'rounded-lg py-2 text-sm font-medium transition-all',
+              values.kind === 'expense'
+                ? 'bg-surface text-danger shadow-sm'
+                : 'text-text-soft hover:text-text-muted',
+            )}
+            onClick={() => switchKind('expense')}
+            type="button"
+          >
+            Expense
+          </button>
+          <button
+            className={cn(
+              'rounded-lg py-2 text-sm font-medium transition-all',
+              values.kind === 'income'
+                ? 'bg-surface text-success shadow-sm'
+                : 'text-text-soft hover:text-text-muted',
+            )}
+            onClick={() => switchKind('income')}
+            type="button"
+          >
+            Income
+          </button>
+        </div>
         <div className="grid gap-4 md:grid-cols-2">
           <DatePicker
             id="transaction-date"
diff --git a/app/src/pages/dashboard/ui/DashboardPage.tsx b/app/src/pages/dashboard/ui/DashboardPage.tsx
index 29eae3b..626bedd 100644
--- a/app/src/pages/dashboard/ui/DashboardPage.tsx
+++ b/app/src/pages/dashboard/ui/DashboardPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import type { Transaction } from '@entities/transaction';
 import { CreateTransactionModal } from '@features/create-transaction';
@@ -12,10 +12,12 @@ import {
 import { AppLayout } from '@widgets/app-layout';
 import { DashboardAnalytics } from '@widgets/dashboard-analytics';
 import { TransactionsHistory } from '@widgets/transactions-history';
+import { Area, AreaChart, ResponsiveContainer } from 'recharts';
 import { Button } from '@shared/ui/button';
 import { Card } from '@shared/ui/card';
 import { ConfirmModal } from '@shared/ui/confirm-modal';
 import { PageHeader } from '@shared/ui/page-header';
+import { cn } from '@shared/lib/classnames/cn';
 
 function formatMoney(amount: number, currency: string) {
   return `${amount.toLocaleString('en-US', {
@@ -24,20 +26,165 @@ function formatMoney(amount: number, currency: string) {
   })} ${currency}`;
 }
 
+function computeSparklineData(transactions: Transaction[], currency: string) {
+  const filtered = [...transactions]
+    .filter((t) => t.currency === currency)
+    .sort((a, b) => a.date.localeCompare(b.date));
+
+  let running = 0;
+  const points = filtered.map((t) => {
+    running += t.signedAmount;
+    return { value: running };
+  });
+
+  return points.slice(-20);
+}
+
+function computeMonthDelta(transactions: Transaction[], currency: string) {
+  const now = new Date();
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const thisMonth = `${now.getFullYear()}-${pad(now.getMonth() + 1)}`;
+
+  return transactions
+    .filter((t) => t.currency === currency && t.date.startsWith(thisMonth))
+    .reduce((sum, t) => sum + t.signedAmount, 0);
+}
+
+type BalanceHeroCardProps = {
+  className?: string;
+  summaries: CurrencySummary[];
+  transactions: Transaction[];
+};
+
+function BalanceHeroCard({ className, summaries, transactions }: BalanceHeroCardProps) {
+  const primary = summaries[0];
+
+  const sparklineData = useMemo(
+    () => (primary ? computeSparklineData(transactions, primary.currency) : []),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [transactions, primary?.currency],
+  );
+
+  const monthDelta = useMemo(
+    () => (primary ? computeMonthDelta(transactions, primary.currency) : 0),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [transactions, primary?.currency],
+  );
+
+  const isUp = monthDelta >= 0;
+  const sparkColor = isUp ? 'var(--color-success)' : 'var(--color-danger)';
+
+  return (
+    <Card
+      className={cn(
+        'relative flex flex-col overflow-hidden hover:-translate-y-0.5 hover:shadow-2xl',
+        className,
+      )}
+      variant="elevated"
+    >
+      <div className="absolute -right-8 -top-8 h-40 w-40 rounded-full bg-brand-soft blur-3xl" />
+      <p className="relative text-sm text-text-soft">Balance</p>
+      {!primary ? (
+        <p className="relative mt-3 text-4xl font-bold tracking-tight text-text-soft">—</p>
+      ) : (
+        <>
+          <p className="relative mt-3 text-3xl font-bold tracking-tight text-text sm:text-4xl md:text-5xl">
+            {formatMoney(primary.balance, primary.currency)}
+          </p>
+          {summaries.length > 1 && (
+            <ul className="relative mt-1 space-y-0.5">
+              {summaries.slice(1).map((s) => (
+                <li className="text-sm text-text-soft" key={s.currency}>
+                  {formatMoney(s.balance, s.currency)}
+                </li>
+              ))}
+            </ul>
+          )}
+          <div className="relative mt-3">
+            <span
+              className={cn(
+                'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',
+                isUp ? 'bg-success-soft text-success' : 'bg-danger-soft text-danger',
+              )}
+            >
+              {isUp ? '↑' : '↓'}
+              {formatMoney(Math.abs(monthDelta), primary.currency)} this month
+            </span>
+          </div>
+        </>
+      )}
+      {sparklineData.length > 2 && (
+        <div className="-mx-6 -mb-6 mt-auto pt-6">
+          <ResponsiveContainer height={64} width="100%">
+            <AreaChart data={sparklineData} margin={{ bottom: 0, left: 0, right: 0, top: 4 }}>
+              <defs>
+                <linearGradient id="balanceSparkGradient" x1="0" x2="0" y1="0" y2="1">
+                  <stop offset="0%" stopColor={sparkColor} stopOpacity={0.25} />
+                  <stop offset="100%" stopColor={sparkColor} stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <Area
+                dataKey="value"
+                dot={false}
+                fill="url(#balanceSparkGradient)"
+                isAnimationActive={false}
+                stroke={sparkColor}
+                strokeWidth={1.5}
+                type="monotone"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+const summaryColorMap = {
+  income: {
+    icon: '↑',
+    iconClass: 'bg-success-soft text-success',
+    orb: 'bg-success-soft',
+  },
+  expense: {
+    icon: '↓',
+    iconClass: 'bg-danger-soft text-danger',
+    orb: 'bg-danger-soft',
+  },
+} as const;
+
+type SummaryColor = keyof typeof summaryColorMap;
+
 type SummaryCardProps = {
-  label: string;
+  color: SummaryColor;
   getValue: (entry: CurrencySummary) => number;
+  label: string;
   summaries: CurrencySummary[];
 };
 
-function SummaryCard({ label, getValue, summaries }: SummaryCardProps) {
+function SummaryCard({ color, getValue, label, summaries }: SummaryCardProps) {
+  const { icon, iconClass, orb } = summaryColorMap[color];
   return (
-    <Card>
-      <p className="text-sm text-text-soft">{label}</p>
+    <Card
+      className="relative overflow-hidden hover:-translate-y-0.5 hover:shadow-md"
+      variant="metric"
+    >
+      <div className={cn('absolute -right-4 -top-4 h-20 w-20 rounded-full blur-2xl', orb)} />
+      <div className="relative flex items-center justify-between">
+        <p className="text-sm text-text-soft">{label}</p>
+        <span
+          className={cn(
+            'inline-flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold',
+            iconClass,
+          )}
+        >
+          {icon}
+        </span>
+      </div>
       {summaries.length === 0 ? (
-        <p className="mt-2 text-xl font-semibold text-text-soft md:text-2xl">—</p>
+        <p className="relative mt-2 text-xl font-semibold text-text-soft md:text-2xl">—</p>
       ) : (
-        <ul className="mt-2 space-y-1">
+        <ul className="relative mt-2 space-y-1">
           {summaries.map((entry) => (
             <li
               className="break-words text-xl font-semibold text-text md:text-2xl"
@@ -94,10 +241,26 @@ export function DashboardPage() {
         description="Track income, expenses and balance from your Google Sheets ledger."
         title="Dashboard"
       />
-      <section className="grid gap-3 sm:grid-cols-3 md:gap-4">
-        <SummaryCard getValue={(entry) => entry.income} label="Income" summaries={summaries} />
-        <SummaryCard getValue={(entry) => entry.expense} label="Expense" summaries={summaries} />
-        <SummaryCard getValue={(entry) => entry.balance} label="Balance" summaries={summaries} />
+      <section className="grid gap-3 md:gap-4 lg:grid-cols-3">
+        <BalanceHeroCard
+          className="lg:col-span-2"
+          summaries={summaries}
+          transactions={activeTransactions}
+        />
+        <div className="grid gap-3 sm:grid-cols-2 md:gap-4 lg:grid-cols-1">
+          <SummaryCard
+            color="income"
+            getValue={(entry) => entry.income}
+            label="Income"
+            summaries={summaries}
+          />
+          <SummaryCard
+            color="expense"
+            getValue={(entry) => entry.expense}
+            label="Expense"
+            summaries={summaries}
+          />
+        </div>
       </section>
       <DashboardAnalytics transactions={activeTransactions} />
       <TransactionsHistory
diff --git a/app/src/pages/setup/ui/SetupPage.tsx b/app/src/pages/setup/ui/SetupPage.tsx
index dd25a3a..1c4f21d 100644
--- a/app/src/pages/setup/ui/SetupPage.tsx
+++ b/app/src/pages/setup/ui/SetupPage.tsx
@@ -5,26 +5,114 @@ import { routePaths } from '@app/routes/route-paths';
 import { ConnectSpreadsheetModal } from '@features/connect-spreadsheet';
 import { Button } from '@shared/ui/button';
 import { Card } from '@shared/ui/card';
-import { PageHeader } from '@shared/ui/page-header';
+import { cn } from '@shared/lib/classnames/cn';
+
+const features = [
+  'Your data stays in your own spreadsheet',
+  'Works offline, syncs when online',
+  'No subscription, no lock-in',
+];
+
+const mockTransactions = [
+  { amount: '−850 UAH', cat: 'F', income: false, label: 'Food' },
+  { amount: '+41 000 UAH', cat: 'S', income: true, label: 'Salary' },
+  { amount: '−120 UAH', cat: 'T', income: false, label: 'Transport' },
+];
 
 export function SetupPage() {
   const navigate = useNavigate();
   const [isConnectOpen, setIsConnectOpen] = useState(false);
 
   return (
-    <main className="grid min-h-screen place-items-center bg-app-bg p-4">
-      <Card className="w-full max-w-xl">
-        <PageHeader
-          description="Sheetly stores finance data in your own Google Sheet. Paste a spreadsheet link to create the local connection; Google authorization comes in the next milestone."
-          title="Connect your spreadsheet"
-        />
-        <div className="mt-6 flex flex-wrap gap-3">
-          <Button onClick={() => setIsConnectOpen(true)}>Connect spreadsheet</Button>
-          <Button onClick={() => navigate(routePaths.settings)} variant="ghost">
-            Open settings
-          </Button>
+    <main className="min-h-screen bg-app-bg lg:grid lg:grid-cols-2">
+      {/* Left — branding */}
+      <div className="relative flex flex-col justify-center overflow-hidden px-8 py-16 sm:px-12 lg:px-16">
+        <div className="absolute -left-24 -top-24 h-96 w-96 rounded-full bg-brand-soft blur-3xl" />
+        <div className="absolute -bottom-24 right-0 h-72 w-72 rounded-full bg-success-soft blur-3xl opacity-50" />
+
+        <div className="relative max-w-md">
+          <div className="mb-10 flex items-center gap-2.5">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand text-sm font-bold text-text-inverted">
+              S
+            </div>
+            <span className="text-base font-semibold text-text">Sheetly</span>
+          </div>
+
+          <h1 className="text-3xl font-bold tracking-tight text-text sm:text-4xl">
+            Your clean finance tracker,{' '}
+            <span className="text-brand">powered by Google&nbsp;Sheets.</span>
+          </h1>
+
+          <ul className="mt-8 space-y-3">
+            {features.map((feature) => (
+              <li className="flex items-center gap-3 text-sm text-text-muted" key={feature}>
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-success-soft text-xs text-success">
+                  ✓
+                </span>
+                {feature}
+              </li>
+            ))}
+          </ul>
+
+          {/* Decorative dashboard preview */}
+          <div className="mt-10 max-w-xs rounded-2xl border border-border bg-surface/90 p-4 shadow-xl backdrop-blur-sm">
+            <div className="mb-3 rounded-xl border border-border bg-surface-muted/60 px-4 py-3">
+              <p className="text-xs text-text-soft">Balance</p>
+              <p className="mt-1 text-xl font-bold text-text">24 500 UAH</p>
+              <span className="mt-1.5 inline-flex items-center gap-1 rounded-full bg-success-soft px-2 py-0.5 text-xs text-success">
+                ↑ Synced
+              </span>
+            </div>
+            <div className="space-y-1">
+              {mockTransactions.map((t) => (
+                <div className="flex items-center gap-2.5 rounded-lg px-2 py-1.5" key={t.label}>
+                  <div
+                    className={cn(
+                      'flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold',
+                      t.income ? 'bg-success-soft text-success' : 'bg-danger-soft text-danger',
+                    )}
+                  >
+                    {t.cat}
+                  </div>
+                  <span className="flex-1 text-xs font-medium text-text">{t.label}</span>
+                  <span
+                    className={cn(
+                      'text-xs font-semibold tabular-nums',
+                      t.income ? 'text-success' : 'text-danger',
+                    )}
+                  >
+                    {t.amount}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
-      </Card>
+      </div>
+
+      {/* Right — connect card */}
+      <div className="flex items-center justify-center bg-surface-muted/30 px-8 py-16 sm:px-12">
+        <Card className="w-full max-w-md" variant="elevated">
+          <h2 className="text-xl font-semibold text-text">Connect your spreadsheet</h2>
+          <p className="mt-2 text-sm text-text-muted">
+            Sheetly stores finance data in your own Google Sheet. Paste a spreadsheet link to create
+            the local connection.
+          </p>
+          <div className="mt-6 flex flex-col gap-3">
+            <Button className="w-full" onClick={() => setIsConnectOpen(true)}>
+              Connect spreadsheet
+            </Button>
+            <Button
+              className="w-full"
+              onClick={() => navigate(routePaths.settings)}
+              variant="ghost"
+            >
+              Open settings
+            </Button>
+          </div>
+        </Card>
+      </div>
+
       <ConnectSpreadsheetModal
         isOpen={isConnectOpen}
         onClose={() => {
diff --git a/app/src/shared/ui/button/button-variants.ts b/app/src/shared/ui/button/button-variants.ts
index 510d618..44d0263 100644
--- a/app/src/shared/ui/button/button-variants.ts
+++ b/app/src/shared/ui/button/button-variants.ts
@@ -20,7 +20,7 @@ const sizeClasses: Record<ButtonSize, string> = {
 
 export function getButtonClasses(variant: ButtonVariant, size: ButtonSize, className?: string) {
   return cn(
-    'inline-flex items-center justify-center gap-2 rounded-md font-medium transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-60',
+    'inline-flex items-center justify-center gap-2 rounded-md font-medium transition active:scale-[0.98] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100',
     variantClasses[variant],
     sizeClasses[size],
     className,
diff --git a/app/src/shared/ui/card/Card.tsx b/app/src/shared/ui/card/Card.tsx
index f313769..55eeeb2 100644
--- a/app/src/shared/ui/card/Card.tsx
+++ b/app/src/shared/ui/card/Card.tsx
@@ -2,11 +2,23 @@ import type { HTMLAttributes } from 'react';
 
 import { cn } from '@shared/lib/classnames/cn';
 
-export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('rounded-lg border border-border bg-surface p-5 shadow-sm', className)}
-      {...props}
-    />
-  );
+const base = 'transition-[transform,box-shadow,border-color] duration-200';
+
+const variants = {
+  default: 'rounded-2xl border border-border bg-surface p-5 shadow-sm',
+  elevated: 'rounded-2xl border border-border bg-surface p-6 shadow-xl shadow-black/5',
+  metric:
+    'rounded-2xl border border-border bg-gradient-to-br from-surface to-surface-muted p-5 shadow-sm',
+  glass: 'rounded-2xl border border-border/20 bg-surface/80 p-5 shadow-xl backdrop-blur-md',
+  danger: 'rounded-2xl border border-danger/30 bg-danger-soft p-5 shadow-sm',
+} as const;
+
+type CardVariant = keyof typeof variants;
+
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+  variant?: CardVariant;
+};
+
+export function Card({ className, variant = 'default', ...props }: CardProps) {
+  return <div className={cn(base, variants[variant], className)} {...props} />;
 }
diff --git a/app/src/shared/ui/empty-state/EmptyState.tsx b/app/src/shared/ui/empty-state/EmptyState.tsx
index 89c19e7..67c1afd 100644
--- a/app/src/shared/ui/empty-state/EmptyState.tsx
+++ b/app/src/shared/ui/empty-state/EmptyState.tsx
@@ -1,10 +1,91 @@
+import type { ReactElement } from 'react';
+
 import { Button } from '@shared/ui/button';
 import { cn } from '@shared/lib/classnames/cn';
 
+export type IllustrationKind = 'chart' | 'receipt' | 'spreadsheet' | 'sync' | 'wallet';
+
+const illustrations: Record<IllustrationKind, ReactElement> = {
+  chart: (
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+      <rect height="14" rx="2" stroke="currentColor" strokeWidth="1.5" width="8" x="6" y="26" />
+      <rect height="24" rx="2" stroke="currentColor" strokeWidth="1.5" width="8" x="20" y="16" />
+      <rect height="20" rx="2" stroke="currentColor" strokeWidth="1.5" width="8" x="34" y="20" />
+      <path d="M4 40h40" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
+    </svg>
+  ),
+  receipt: (
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 4h28a2 2 0 0 1 2 2v34l-5-3.5-5 3.5-5-3.5-5 3.5-5-3.5-5 3.5V6a2 2 0 0 1 2-2z"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path d="M16 16h16" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
+      <path d="M16 24h16" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
+      <path d="M16 32h10" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
+    </svg>
+  ),
+  spreadsheet: (
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+      <rect height="36" rx="4" stroke="currentColor" strokeWidth="1.5" width="36" x="6" y="6" />
+      <path d="M6 18h36" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M6 30h36" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M18 18v24" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M30 18v24" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  ),
+  sync: (
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M24 8a16 16 0 0 1 13.9 8"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M38 7l1.5 10-9.5 1.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M24 40a16 16 0 0 1-13.9-8"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M10 41l-1.5-10 9.5-1.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  ),
+  wallet: (
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+      <rect height="28" rx="4" stroke="currentColor" strokeWidth="1.5" width="38" x="5" y="14" />
+      <path d="M5 22h38" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M5 18V11a4 4 0 0 1 4-4h26"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+      />
+      <circle cx="35" cy="33" r="3.5" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  ),
+};
+
 type EmptyStateProps = {
   actionLabel?: string;
   className?: string;
   description: string;
+  illustration?: IllustrationKind;
   onAction?: () => void;
   onSecondAction?: () => void;
   secondActionLabel?: string;
@@ -15,6 +96,7 @@ export function EmptyState({
   actionLabel,
   className,
   description,
+  illustration,
   onAction,
   onSecondAction,
   secondActionLabel,
@@ -27,6 +109,13 @@ export function EmptyState({
         className,
       )}
     >
+      {illustration ? (
+        <div className="mb-4 flex justify-center">
+          <div className="flex h-14 w-14 items-center justify-center rounded-full bg-surface-muted p-3 text-text-soft">
+            {illustrations[illustration]}
+          </div>
+        </div>
+      ) : null}
       <h2 className="text-lg font-semibold text-text">{title}</h2>
       <p className="mx-auto mt-2 max-w-md text-sm text-text-muted">{description}</p>
       {actionLabel && onAction ? (
diff --git a/app/src/shared/ui/modal/Modal.tsx b/app/src/shared/ui/modal/Modal.tsx
index 018a3e7..e25fbcb 100644
--- a/app/src/shared/ui/modal/Modal.tsx
+++ b/app/src/shared/ui/modal/Modal.tsx
@@ -38,7 +38,7 @@ export function Modal({ children, description, footer, isOpen, onClose, title }:
 
   return (
     <div
-      className="fixed inset-0 z-50 grid place-items-end bg-text/40 p-0 sm:place-items-center sm:p-4"
+      className="animate-backdrop-in fixed inset-0 z-50 grid place-items-end bg-text/40 p-0 sm:place-items-center sm:p-4"
       onMouseDown={(event) => {
         if (event.target === event.currentTarget) {
           onClose();
@@ -49,7 +49,7 @@ export function Modal({ children, description, footer, isOpen, onClose, title }:
         aria-describedby={description ? descriptionId : undefined}
         aria-labelledby={titleId}
         aria-modal="true"
-        className="max-h-[92vh] w-full overflow-y-auto rounded-t-lg bg-surface shadow-xl sm:max-w-lg sm:rounded-lg"
+        className="animate-modal-in max-h-[92vh] w-full overflow-y-auto rounded-t-lg bg-surface shadow-xl sm:max-w-lg sm:rounded-lg"
         role="dialog"
       >
         <header className="flex items-start justify-between gap-3 border-b border-border p-4 sm:p-5">
diff --git a/app/src/shared/ui/skeleton/Skeleton.tsx b/app/src/shared/ui/skeleton/Skeleton.tsx
index 3e0bb4e..ee01546 100644
--- a/app/src/shared/ui/skeleton/Skeleton.tsx
+++ b/app/src/shared/ui/skeleton/Skeleton.tsx
@@ -4,10 +4,6 @@ import { cn } from '@shared/lib/classnames/cn';
 
 export function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div
-      aria-hidden="true"
-      className={cn('animate-pulse rounded-md bg-border', className)}
-      {...props}
-    />
+    <div aria-hidden="true" className={cn('animate-shimmer rounded-md', className)} {...props} />
   );
 }
diff --git a/app/src/widgets/dashboard-analytics/ui/DashboardAnalytics.tsx b/app/src/widgets/dashboard-analytics/ui/DashboardAnalytics.tsx
index 740ccfb..d9852ff 100644
--- a/app/src/widgets/dashboard-analytics/ui/DashboardAnalytics.tsx
+++ b/app/src/widgets/dashboard-analytics/ui/DashboardAnalytics.tsx
@@ -60,6 +60,15 @@ type DailyExpenseStats = {
 
 const chartColors = ['#4f46e5', '#0f766e', '#dc2626', '#9333ea', '#ca8a04', '#0891b2'];
 
+const chartTypeLabels: Record<string, string> = {
+  'balance-trend': 'Line',
+  'category-bar': 'Bar',
+  'daily-expenses': 'Line',
+  'expense-categories': 'Pie',
+  'income-expense-ratio': 'Bar',
+  'monthly-cashflow': 'Bar',
+};
+
 function formatMoney(value: number) {
   return value.toLocaleString('en-US', {
     maximumFractionDigits: 0,
@@ -267,7 +276,11 @@ function ChartSlot({
 
   return (
     <Card
-      className={isWide ? 'min-h-[360px] md:min-h-[420px]' : 'min-h-[320px] md:min-h-[360px]'}
+      className={
+        isWide
+          ? 'min-h-[360px] md:min-h-[420px] hover:border-brand'
+          : 'min-h-[320px] md:min-h-[360px] hover:border-brand'
+      }
       onDragOver={(event) => event.preventDefault()}
       onDrop={(event) => {
         const droppedChartId = event.dataTransfer.getData('text/plain');
@@ -289,11 +302,11 @@ function ChartSlot({
         <div className="flex flex-wrap gap-2">
           {isWide && onSplit ? (
             <Button onClick={onSplit} size="sm" variant="ghost">
-              Split view
+              Two-column view
             </Button>
           ) : null}
           <Button onClick={onOpenPicker} size="sm" variant="secondary">
-            Change
+            Customize
           </Button>
         </div>
       </div>
@@ -431,6 +444,7 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
     return (
       <EmptyState
         description="Analytics will appear after you add transactions to Ledger."
+        illustration="chart"
         title="No analytics yet"
       />
     );
@@ -463,7 +477,7 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
               onClick={() => setIsPickerOpen((current) => !current)}
               variant="secondary"
             >
-              {isPickerOpen ? 'Hide charts' : 'Choose charts'}
+              {isPickerOpen ? 'Close' : 'Customize dashboard'}
             </Button>
           </div>
         </div>
@@ -477,7 +491,7 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
             onDropChart={updateWideChart}
             onOpenPicker={() => setIsPickerOpen(true)}
             onSplit={clearWideChart}
-            slotLabel="Wide chart"
+            slotLabel="Focus view"
           />
         ) : (
           <div className="grid gap-4 xl:grid-cols-2">
@@ -488,7 +502,7 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
               monthlyStats={monthlyStats}
               onDropChart={(chartId) => updateChartSlot(0, chartId)}
               onOpenPicker={() => openPicker(0)}
-              slotLabel="Slot 1"
+              slotLabel="Main insight"
             />
             <ChartSlot
               categoryStats={categoryStats}
@@ -497,81 +511,108 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
               monthlyStats={monthlyStats}
               onDropChart={(chartId) => updateChartSlot(1, chartId)}
               onOpenPicker={() => openPicker(1)}
-              slotLabel="Slot 2"
+              slotLabel="Secondary insight"
             />
           </div>
         )}
       </div>
       {isPickerOpen ? (
-        <aside className="fixed inset-x-3 bottom-3 top-16 z-40 overflow-y-auto sm:inset-x-4 sm:bottom-4 sm:top-20 xl:inset-x-auto xl:right-4 xl:w-80">
-          <Card className="min-h-full">
-            <div className="mb-4">
-              <div className="flex items-start justify-between gap-3">
+        <>
+          <div
+            className="fixed inset-0 z-30 bg-black/30 backdrop-blur-[2px]"
+            onClick={() => setIsPickerOpen(false)}
+          />
+          <aside className="animate-drawer-in-right fixed inset-x-3 bottom-3 top-16 z-40 overflow-y-auto sm:inset-x-4 sm:bottom-4 sm:top-20 xl:inset-x-auto xl:right-4 xl:w-96">
+            <Card className="min-h-full">
+              <div className="mb-5 flex items-start justify-between gap-3 border-b border-border pb-4">
                 <div>
-                  <h2 className="text-base font-semibold text-text">Chart library</h2>
+                  <h2 className="text-base font-semibold text-text">Customize dashboard</h2>
                   <p className="mt-1 text-sm text-text-soft">
-                    Choose chart for slot {selectedSlotIndex + 1} or wide view.
+                    Drag a chart onto the canvas or assign it to a slot.
                   </p>
                 </div>
                 <Button onClick={() => setIsPickerOpen(false)} size="sm" variant="ghost">
-                  Close
+                  ✕
                 </Button>
               </div>
-            </div>
-            <div className="grid gap-2">
-              {chartCatalog.map((chart) => (
-                <div
-                  className={
-                    chartSlots[selectedSlotIndex] === chart.id || wideChartId === chart.id
-                      ? 'rounded-md border border-brand bg-brand-soft px-3 py-3 text-left'
-                      : 'rounded-md border border-border bg-surface px-3 py-3 text-left hover:border-border-strong hover:bg-surface-hover'
-                  }
-                  draggable
-                  key={chart.id}
-                  onDragStart={(event) => {
-                    const preview = event.currentTarget.querySelector<HTMLElement>(
-                      '[data-chart-drag-preview]',
-                    );
-
-                    event.dataTransfer.effectAllowed = 'copy';
-                    event.dataTransfer.setData('text/plain', chart.id);
-
-                    if (preview) {
-                      event.dataTransfer.setDragImage(preview, 160, 96);
-                    }
-                  }}
-                  tabIndex={0}
-                >
-                  <span className="block text-sm font-semibold text-text">{chart.title}</span>
-                  <span className="mt-1 block text-sm text-text-soft">{chart.description}</span>
-                  <ChartDragPreview
-                    categoryStats={categoryStats}
-                    chartId={chart.id}
-                    dailyExpenseStats={dailyExpenseStats}
-                    monthlyStats={monthlyStats}
-                  />
-                  <div className="mt-3 grid grid-cols-3 gap-2">
-                    <Button onClick={() => updateChartSlot(0, chart.id)} size="sm" variant="ghost">
-                      Slot 1
-                    </Button>
-                    <Button onClick={() => updateChartSlot(1, chart.id)} size="sm" variant="ghost">
-                      Slot 2
-                    </Button>
-                    {chart.supportsWide ? (
-                      <Button
-                        onClick={() => updateWideChart(chart.id)}
-                        size="sm"
-                        variant="secondary"
-                      >
-                        Wide
-                      </Button>
-                    ) : null}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Card>
-        </aside>
+              <div className="grid gap-2">
+                {chartCatalog.map((chart) => {
+                  const isActive =
+                    chartSlots[selectedSlotIndex] === chart.id || wideChartId === chart.id;
+                  const typeLabel = chartTypeLabels[chart.id] ?? 'Chart';
+
+                  return (
+                    <div
+                      className={
+                        isActive
+                          ? 'rounded-xl border border-brand bg-brand-soft px-3 py-3 text-left'
+                          : 'rounded-xl border border-border bg-surface px-3 py-3 text-left hover:border-border-strong hover:bg-surface-hover'
+                      }
+                      draggable
+                      key={chart.id}
+                      onDragStart={(event) => {
+                        const preview = event.currentTarget.querySelector<HTMLElement>(
+                          '[data-chart-drag-preview]',
+                        );
+                        event.dataTransfer.effectAllowed = 'copy';
+                        event.dataTransfer.setData('text/plain', chart.id);
+                        if (preview) {
+                          event.dataTransfer.setDragImage(preview, 160, 96);
+                        }
+                      }}
+                      tabIndex={0}
+                    >
+                      <div className="flex items-start gap-2">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-semibold text-text">{chart.title}</span>
+                            <span className="rounded-full border border-border px-1.5 py-0.5 text-xs text-text-soft">
+                              {typeLabel}
+                            </span>
+                          </div>
+                          <span className="mt-0.5 block text-xs text-text-soft">
+                            {chart.description}
+                          </span>
+                        </div>
+                      </div>
+                      <ChartDragPreview
+                        categoryStats={categoryStats}
+                        chartId={chart.id}
+                        dailyExpenseStats={dailyExpenseStats}
+                        monthlyStats={monthlyStats}
+                      />
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        <Button
+                          onClick={() => updateChartSlot(0, chart.id)}
+                          size="sm"
+                          variant="ghost"
+                        >
+                          Main
+                        </Button>
+                        <Button
+                          onClick={() => updateChartSlot(1, chart.id)}
+                          size="sm"
+                          variant="ghost"
+                        >
+                          Secondary
+                        </Button>
+                        {chart.supportsWide ? (
+                          <Button
+                            onClick={() => updateWideChart(chart.id)}
+                            size="sm"
+                            variant="secondary"
+                          >
+                            Focus view
+                          </Button>
+                        ) : null}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </Card>
+          </aside>
+        </>
       ) : null}
     </section>
   );
diff --git a/app/src/widgets/transactions-history/ui/TransactionsHistory.tsx b/app/src/widgets/transactions-history/ui/TransactionsHistory.tsx
index 2d1d62d..3afc382 100644
--- a/app/src/widgets/transactions-history/ui/TransactionsHistory.tsx
+++ b/app/src/widgets/transactions-history/ui/TransactionsHistory.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { Transaction } from '@entities/transaction';
 import {
@@ -17,17 +17,18 @@ import { EmptyState } from '@shared/ui/empty-state';
 import { Input } from '@shared/ui/input';
 import { Select } from '@shared/ui/select';
 import { Skeleton } from '@shared/ui/skeleton';
+import { cn } from '@shared/lib/classnames/cn';
 
 type TransactionsHistoryProps = {
   containersEnabled?: boolean;
   error: string | null;
   isLoading: boolean;
+  isSyncing?: boolean;
   onCreateTransaction: () => void;
   onDeleteTransaction: (transactionId: string) => void | Promise<void>;
   onEditTransaction: (transaction: Transaction) => void;
   onRefresh: () => void | Promise<void>;
   onRetrySync: () => void | Promise<void>;
-  isSyncing?: boolean;
   syncWarning?: string | null;
   transactions: Transaction[];
 };
@@ -41,10 +42,6 @@ function formatMoney(amount: number, currency = defaultCurrency) {
   })} ${currency}`;
 }
 
-function formatKind(kind: Transaction['kind']) {
-  return kind === 'income' ? 'Income' : 'Expense';
-}
-
 const syncStatusVariants: Record<Transaction['syncStatus'], BadgeVariant> = {
   failed: 'danger',
   local: 'neutral',
@@ -61,9 +58,7 @@ function useOutsideClose(isOpen: boolean, onClose: () => void) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
+    if (!isOpen) return;
 
     function handlePointerDown(event: PointerEvent) {
       if (!ref.current?.contains(event.target as Node)) {
@@ -72,7 +67,6 @@ function useOutsideClose(isOpen: boolean, onClose: () => void) {
     }
 
     document.addEventListener('pointerdown', handlePointerDown);
-
     return () => document.removeEventListener('pointerdown', handlePointerDown);
   }, [isOpen, onClose]);
 
@@ -98,23 +92,19 @@ function hasActiveFilters(filters: TransactionFilters) {
 function TransactionsHistorySkeleton() {
   return (
     <div aria-label="Loading transactions" role="status">
-      <div className="hidden grid-cols-[120px_96px_1fr_140px_160px_1fr] gap-3 border-b border-border px-5 py-3 md:grid">
-        {Array.from({ length: 6 }, (_, index) => (
-          <Skeleton className="h-3" key={index} />
-        ))}
-      </div>
       <div className="divide-y divide-border">
-        {Array.from({ length: 6 }, (_, index) => (
-          <div
-            className="grid gap-3 px-5 py-4 md:grid-cols-[120px_96px_1fr_140px_160px_1fr] md:items-center"
-            key={index}
-          >
-            <Skeleton className="h-4 w-28" />
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-4 w-32" />
-            <Skeleton className="h-4 w-24 md:justify-self-end" />
-            <Skeleton className="h-4 w-28" />
-            <Skeleton className="h-4 w-full max-w-48" />
+        {Array.from({ length: 5 }, (_, index) => (
+          <div className="flex items-center gap-3 px-4 py-3 md:gap-4 md:px-5 md:py-4" key={index}>
+            <Skeleton className="h-9 w-9 shrink-0 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-48" />
+            </div>
+            <div className="flex flex-col items-end gap-1.5">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-5 w-16" />
+            </div>
+            <Skeleton className="h-8 w-8 shrink-0 rounded-md" />
           </div>
         ))}
       </div>
@@ -132,7 +122,7 @@ function RowActions({ onDelete, onEdit }: RowActionsProps) {
   const wrapperRef = useOutsideClose(isOpen, () => setIsOpen(false));
 
   return (
-    <div className="relative flex justify-start md:justify-end" ref={wrapperRef}>
+    <div className="relative shrink-0" ref={wrapperRef}>
       <button
         aria-label="Transaction actions"
         className="grid size-8 place-items-center rounded-md border border-border text-lg leading-none text-text-soft hover:bg-surface-hover hover:text-text"
@@ -169,29 +159,6 @@ function RowActions({ onDelete, onEdit }: RowActionsProps) {
   );
 }
 
-function CommentCell({ value }: { value?: string }) {
-  if (!value) {
-    return <div className="text-text-muted">-</div>;
-  }
-
-  return (
-    <div className="max-w-56 truncate text-text-muted" title={value}>
-      {value}
-    </div>
-  );
-}
-
-function TransactionField({ children, label }: { children: ReactNode; label: string }) {
-  return (
-    <div className="flex items-start justify-between gap-3 md:block">
-      <span className="shrink-0 text-xs font-semibold uppercase text-text-soft md:hidden">
-        {label}
-      </span>
-      <div className="min-w-0 text-right md:text-left">{children}</div>
-    </div>
-  );
-}
-
 export function TransactionsHistory({
   containersEnabled = false,
   error,
@@ -207,6 +174,7 @@ export function TransactionsHistory({
 }: TransactionsHistoryProps) {
   const [filters, setFilters] = useState<TransactionFilters>(createDefaultTransactionFilters);
   const [isAdvancedFiltersOpen, setIsAdvancedFiltersOpen] = useState(false);
+
   const categoryOptions = useMemo(
     () => getTransactionCategoryOptions(transactions),
     [transactions],
@@ -223,17 +191,15 @@ export function TransactionsHistory({
     () => filterTransactions(transactions, filters),
     [filters, transactions],
   );
+
   const isFiltered = hasActiveFilters(filters);
   const isInitialLoading = isLoading && !transactions.length;
-  const hasPendingSync = transactions.some((transaction) =>
-    ['failed', 'pending', 'syncing'].includes(transaction.syncStatus),
+  const hasPendingSync = transactions.some((t) =>
+    ['failed', 'pending', 'syncing'].includes(t.syncStatus),
   );
 
   function updateFilters(nextFilters: Partial<TransactionFilters>) {
-    setFilters((currentFilters) => ({
-      ...currentFilters,
-      ...nextFilters,
-    }));
+    setFilters((current) => ({ ...current, ...nextFilters }));
   }
 
   function clearFilters() {
@@ -258,6 +224,7 @@ export function TransactionsHistory({
       <EmptyState
         actionLabel="Create transaction"
         description="Transactions from Ledger will appear here after the first sync."
+        illustration="wallet"
         onAction={onCreateTransaction}
         onSecondAction={() => void onRefresh()}
         secondActionLabel="Refresh"
@@ -268,6 +235,7 @@ export function TransactionsHistory({
 
   return (
     <Card className="mb-16 p-0">
+      {/* Header */}
       <div className="flex flex-col gap-4 border-b border-border px-5 py-4 md:flex-row md:items-center md:justify-between">
         <div>
           <h2 className="text-base font-semibold text-text">Transactions history</h2>
@@ -300,6 +268,8 @@ export function TransactionsHistory({
           </Button>
         </div>
       </div>
+
+      {/* Filters */}
       <div className="border-b border-border bg-surface-muted/60 px-5 py-4">
         <div className="grid gap-3 lg:grid-cols-[minmax(220px,1.5fr)_minmax(120px,0.8fr)_minmax(160px,1fr)_auto_auto] lg:items-end">
           <Input
@@ -394,7 +364,10 @@ export function TransactionsHistory({
                 onChange={(container) => updateFilters({ container })}
                 options={[
                   { label: 'All containers', value: '' },
-                  ...containerOptions.map((container) => ({ label: container, value: container })),
+                  ...containerOptions.map((container) => ({
+                    label: container,
+                    value: container,
+                  })),
                 ]}
                 value={filters.container}
               />
@@ -427,6 +400,8 @@ export function TransactionsHistory({
           </div>
         ) : null}
       </div>
+
+      {/* List */}
       {isInitialLoading ? (
         <TransactionsHistorySkeleton />
       ) : !filteredTransactions.length ? (
@@ -438,72 +413,79 @@ export function TransactionsHistory({
           title="No matching transactions"
         />
       ) : (
-        <div>
-          <div className="hidden grid-cols-[110px_78px_1fr_110px_120px_1fr_110px_86px_104px] gap-3 border-b border-border px-5 py-3 text-xs font-semibold uppercase text-text-soft md:grid">
-            <span>Date</span>
-            <span>Type</span>
-            <span>Category</span>
-            <span className="text-right">Amount</span>
-            <span>Payment method</span>
-            <span>Comment</span>
-            <span>Container</span>
-            <span>Status</span>
-            <span className="text-right">Actions</span>
-          </div>
-          <div className="divide-y divide-border">
-            {filteredTransactions.map((transaction) => (
+        <div className="divide-y divide-border">
+          {filteredTransactions.map((transaction) => {
+            const isDeleted = Boolean(transaction.deletedAt);
+            const isIncome = transaction.kind === 'income';
+
+            const metaParts = [
+              transaction.date,
+              transaction.paymentMethod,
+              transaction.comment,
+              containersEnabled ? transaction.containerName : undefined,
+            ]
+              .filter(Boolean)
+              .join(' · ');
+
+            return (
               <div
-                className={
-                  transaction.deletedAt
-                    ? 'grid gap-3 bg-surface-muted px-4 py-4 text-sm opacity-70 md:grid-cols-[110px_78px_1fr_110px_120px_1fr_110px_86px_104px] md:items-center md:gap-3 md:px-5'
-                    : 'grid gap-3 px-4 py-4 text-sm md:grid-cols-[110px_78px_1fr_110px_120px_1fr_110px_86px_104px] md:items-center md:gap-3 md:px-5'
-                }
+                className={cn(
+                  'flex items-center gap-3 px-4 py-3 md:gap-4 md:px-5 md:py-4',
+                  isDeleted ? 'bg-surface-muted' : 'transition-colors hover:bg-surface-hover',
+                )}
                 key={transaction.id}
               >
-                <TransactionField label="Date">
-                  <div className="text-text-soft">{transaction.date}</div>
-                </TransactionField>
-                <TransactionField label="Type">
-                  <div className="font-medium text-text-muted">{formatKind(transaction.kind)}</div>
-                </TransactionField>
-                <TransactionField label="Category">
-                  <div className="font-medium text-text">{transaction.categoryName}</div>
-                </TransactionField>
-                <TransactionField label="Amount">
-                  <div
-                    className={
-                      transaction.kind === 'income'
-                        ? 'font-semibold text-emerald-600 md:text-right'
-                        : 'font-semibold text-danger md:text-right'
-                    }
+                <div
+                  className={cn(
+                    'flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold uppercase',
+                    isDeleted
+                      ? 'bg-border text-text-soft'
+                      : isIncome
+                        ? 'bg-success-soft text-success'
+                        : 'bg-danger-soft text-danger',
+                  )}
+                >
+                  {transaction.categoryName.charAt(0)}
+                </div>
+
+                <div className="min-w-0 flex-1">
+                  <p
+                    className={cn(
+                      'truncate text-sm font-semibold',
+                      isDeleted ? 'text-text-muted line-through' : 'text-text',
+                    )}
+                  >
+                    {transaction.categoryName}
+                  </p>
+                  {metaParts ? (
+                    <p className="mt-0.5 truncate text-xs text-text-soft">{metaParts}</p>
+                  ) : null}
+                </div>
+
+                <div className="flex shrink-0 flex-col items-end gap-1">
+                  <span
+                    className={cn(
+                      'text-sm font-semibold tabular-nums',
+                      isDeleted ? 'text-text-soft' : isIncome ? 'text-success' : 'text-danger',
+                    )}
                   >
                     {formatMoney(transaction.signedAmount, transaction.currency)}
-                  </div>
-                </TransactionField>
-                <TransactionField label="Payment">
-                  <div className="text-text-muted">{transaction.paymentMethod || '-'}</div>
-                </TransactionField>
-                <TransactionField label="Comment">
-                  <CommentCell value={transaction.comment} />
-                </TransactionField>
-                <TransactionField label="Container">
-                  <div className="text-text-muted">{transaction.containerName || '-'}</div>
-                </TransactionField>
-                <TransactionField label="Status">
-                  <div className="flex flex-wrap gap-1">
-                    {transaction.deletedAt ? <Badge variant="neutral">Deleted</Badge> : null}
+                  </span>
+                  <div className="flex flex-wrap justify-end gap-1">
+                    {isDeleted ? <Badge variant="neutral">Deleted</Badge> : null}
                     <Badge variant={syncStatusVariants[transaction.syncStatus]}>
                       {formatSyncStatus(transaction.syncStatus)}
                     </Badge>
                   </div>
-                </TransactionField>
+                </div>
+
                 <RowActions
                   onDelete={() => onDeleteTransaction(transaction.id)}
                   onEdit={() => onEditTransaction(transaction)}
                 />
               </div>
-            ))}
-          </div>
+            );
+          })}
         </div>
       )}
     </Card>