diff --git a/app/src/App.tsx b/app/src/App.tsx
index f0dc594..de8d353 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -16,6 +16,7 @@ import NotFound from "./pages/NotFound";
 import { Landing } from "./pages/Landing";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
 import Account from "./pages/Account";
+import { Accounts } from "./pages/Accounts";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -91,6 +92,14 @@ const App = () => (
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="accounts"
+              element={
+                <ProtectedRoute>
+                  <Accounts />
+                </ProtectedRoute>
+              }
+            />
           </Route>
           <Route path="/signin" element={<SignIn />} />
           <Route path="/register" element={<Register />} />
diff --git a/app/src/__tests__/accounts.test.ts b/app/src/__tests__/accounts.test.ts
new file mode 100644
index 0000000..a774630
--- /dev/null
+++ b/app/src/__tests__/accounts.test.ts
@@ -0,0 +1,340 @@
+import {
+  listAccounts,
+  getAccount,
+  createAccount,
+  updateAccount,
+  deleteAccount,
+  getAccountSummary,
+  depositToAccount,
+  withdrawFromAccount,
+  transferBetweenAccounts,
+  getAccountTransactions,
+  type Account,
+  type AccountSummary,
+  type AccountTransaction,
+} from '../api/accounts';
+import * as client from '../api/client';
+
+// Mock the API client
+jest.mock('../api/client', () => ({
+  api: jest.fn(),
+  baseURL: 'http://localhost:3000/api',
+}));
+
+const mockAccount: Account = {
+  id: 1,
+  name: 'Main Checking',
+  type: 'CHECKING',
+  balance: 5000,
+  currency: 'USD',
+  institution: 'Bank of America',
+  account_number_last4: '1234',
+  active: true,
+  created_at: '2026-01-01T00:00:00Z',
+  updated_at: '2026-03-01T00:00:00Z',
+};
+
+const mockSummary: AccountSummary = {
+  total_assets: 15000,
+  total_liabilities: 2000,
+  net_worth: 13000,
+  accounts_by_type: {
+    CHECKING: { count: 2, total: 8000 },
+    SAVINGS: { count: 1, total: 5000 },
+    CREDIT_CARD: { count: 1, total: -2000 },
+    INVESTMENT: { count: 1, total: 4000 },
+    CASH: { count: 0, total: 0 },
+    OTHER: { count: 0, total: 0 },
+  },
+  currency: 'USD',
+};
+
+const mockTransaction: AccountTransaction = {
+  id: 1,
+  account_id: 1,
+  amount: 100,
+  type: 'DEPOSIT',
+  description: 'Paycheck',
+  date: '2026-03-10T00:00:00Z',
+  balance_after: 5100,
+};
+
+describe('accounts API', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('listAccounts', () => {
+    it('fetches all accounts', async () => {
+      const mockAccounts = [mockAccount];
+      (client.api as jest.Mock).mockResolvedValueOnce(mockAccounts);
+
+      const result = await listAccounts();
+
+      expect(client.api).toHaveBeenCalledWith('/accounts');
+      expect(result).toEqual(mockAccounts);
+    });
+
+    it('filters by account type', async () => {
+      const mockAccounts = [mockAccount];
+      (client.api as jest.Mock).mockResolvedValueOnce(mockAccounts);
+
+      const result = await listAccounts({ type: 'CHECKING' });
+
+      expect(client.api).toHaveBeenCalledWith('/accounts?type=CHECKING');
+      expect(result).toEqual(mockAccounts);
+    });
+
+    it('filters by active status', async () => {
+      const mockAccounts = [mockAccount];
+      (client.api as jest.Mock).mockResolvedValueOnce(mockAccounts);
+
+      const result = await listAccounts({ active: true });
+
+      expect(client.api).toHaveBeenCalledWith('/accounts?active=true');
+      expect(result).toEqual(mockAccounts);
+    });
+  });
+
+  describe('getAccount', () => {
+    it('fetches a single account by ID', async () => {
+      (client.api as jest.Mock).mockResolvedValueOnce(mockAccount);
+
+      const result = await getAccount(1);
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1');
+      expect(result).toEqual(mockAccount);
+    });
+  });
+
+  describe('createAccount', () => {
+    it('creates a new account', async () => {
+      const payload = {
+        name: 'Savings Account',
+        type: 'SAVINGS' as const,
+        balance: 1000,
+        institution: 'Chase',
+      };
+      const created = { ...mockAccount, ...payload, id: 2 };
+      (client.api as jest.Mock).mockResolvedValueOnce(created);
+
+      const result = await createAccount(payload);
+
+      expect(client.api).toHaveBeenCalledWith('/accounts', {
+        method: 'POST',
+        body: payload,
+      });
+      expect(result).toEqual(created);
+    });
+
+    it('creates a credit card account', async () => {
+      const payload = {
+        name: 'Visa Card',
+        type: 'CREDIT_CARD' as const,
+        balance: -500,
+        institution: 'Citibank',
+        account_number_last4: '5678',
+      };
+      (client.api as jest.Mock).mockResolvedValueOnce({ ...mockAccount, ...payload });
+
+      const result = await createAccount(payload);
+
+      expect(client.api).toHaveBeenCalledWith('/accounts', {
+        method: 'POST',
+        body: payload,
+      });
+    });
+  });
+
+  describe('updateAccount', () => {
+    it('updates an existing account', async () => {
+      const update = { name: 'Updated Checking' };
+      const updated = { ...mockAccount, ...update };
+      (client.api as jest.Mock).mockResolvedValueOnce(updated);
+
+      const result = await updateAccount(1, update);
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1', {
+        method: 'PATCH',
+        body: update,
+      });
+      expect(result.name).toBe('Updated Checking');
+    });
+
+    it('deactivates an account', async () => {
+      const update = { active: false };
+      const updated = { ...mockAccount, active: false };
+      (client.api as jest.Mock).mockResolvedValueOnce(updated);
+
+      const result = await updateAccount(1, update);
+
+      expect(result.active).toBe(false);
+    });
+  });
+
+  describe('deleteAccount', () => {
+    it('deletes an account', async () => {
+      const response = { message: 'Account deleted' };
+      (client.api as jest.Mock).mockResolvedValueOnce(response);
+
+      const result = await deleteAccount(1);
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1', {
+        method: 'DELETE',
+      });
+      expect(result).toEqual(response);
+    });
+  });
+
+  describe('getAccountSummary', () => {
+    it('fetches account summary and net worth', async () => {
+      (client.api as jest.Mock).mockResolvedValueOnce(mockSummary);
+
+      const result = await getAccountSummary();
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/summary');
+      expect(result).toEqual(mockSummary);
+      expect(result.net_worth).toBe(13000);
+    });
+
+    it('calculates correct account type totals', async () => {
+      (client.api as jest.Mock).mockResolvedValueOnce(mockSummary);
+
+      const result = await getAccountSummary();
+
+      expect(result.accounts_by_type.CHECKING.total).toBe(8000);
+      expect(result.accounts_by_type.CREDIT_CARD.total).toBe(-2000);
+    });
+  });
+
+  describe('depositToAccount', () => {
+    it('deposits funds to an account', async () => {
+      const updated = { ...mockAccount, balance: 5500 };
+      (client.api as jest.Mock).mockResolvedValueOnce(updated);
+
+      const result = await depositToAccount(1, 500, 'Paycheck');
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1/deposit', {
+        method: 'POST',
+        body: { amount: 500, description: 'Paycheck' },
+      });
+      expect(result.balance).toBe(5500);
+    });
+
+    it('deposits without description', async () => {
+      const updated = { ...mockAccount, balance: 5200 };
+      (client.api as jest.Mock).mockResolvedValueOnce(updated);
+
+      const result = await depositToAccount(1, 200);
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1/deposit', {
+        method: 'POST',
+        body: { amount: 200, description: undefined },
+      });
+    });
+  });
+
+  describe('withdrawFromAccount', () => {
+    it('withdraws funds from an account', async () => {
+      const updated = { ...mockAccount, balance: 4500 };
+      (client.api as jest.Mock).mockResolvedValueOnce(updated);
+
+      const result = await withdrawFromAccount(1, 500, 'ATM withdrawal');
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1/withdraw', {
+        method: 'POST',
+        body: { amount: 500, description: 'ATM withdrawal' },
+      });
+      expect(result.balance).toBe(4500);
+    });
+  });
+
+  describe('transferBetweenAccounts', () => {
+    it('transfers funds between accounts', async () => {
+      const fromAccount = { ...mockAccount, balance: 4500 };
+      const toAccount = { ...mockAccount, id: 2, balance: 1500 };
+      (client.api as jest.Mock).mockResolvedValueOnce({
+        from_account: fromAccount,
+        to_account: toAccount,
+      });
+
+      const result = await transferBetweenAccounts(1, 2, 500, 'Transfer to savings');
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/transfer', {
+        method: 'POST',
+        body: {
+          from_account_id: 1,
+          to_account_id: 2,
+          amount: 500,
+          description: 'Transfer to savings',
+        },
+      });
+      expect(result.from_account.balance).toBe(4500);
+      expect(result.to_account.balance).toBe(1500);
+    });
+  });
+
+  describe('getAccountTransactions', () => {
+    it('fetches transaction history', async () => {
+      const mockTransactions = [mockTransaction];
+      (client.api as jest.Mock).mockResolvedValueOnce(mockTransactions);
+
+      const result = await getAccountTransactions(1);
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1/transactions');
+      expect(result).toEqual(mockTransactions);
+    });
+
+    it('filters transactions by date range', async () => {
+      const mockTransactions = [mockTransaction];
+      (client.api as jest.Mock).mockResolvedValueOnce(mockTransactions);
+
+      const result = await getAccountTransactions(1, {
+        from: '2026-01-01',
+        to: '2026-03-01',
+      });
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1/transactions?from=2026-01-01&to=2026-03-01');
+      expect(result).toEqual(mockTransactions);
+    });
+
+    it('limits transaction results', async () => {
+      const mockTransactions = [mockTransaction];
+      (client.api as jest.Mock).mockResolvedValueOnce(mockTransactions);
+
+      const result = await getAccountTransactions(1, { limit: 10 });
+
+      expect(client.api).toHaveBeenCalledWith('/accounts/1/transactions?limit=10');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles negative balances (credit cards)', async () => {
+      const creditCard = { ...mockAccount, type: 'CREDIT_CARD' as const, balance: -1500 };
+      (client.api as jest.Mock).mockResolvedValueOnce(creditCard);
+
+      const result = await getAccount(5);
+
+      expect(result.balance).toBeLessThan(0);
+      expect(result.type).toBe('CREDIT_CARD');
+    });
+
+    it('handles zero balance accounts', async () => {
+      const zeroAccount = { ...mockAccount, balance: 0 };
+      (client.api as jest.Mock).mockResolvedValueOnce(zeroAccount);
+
+      const result = await getAccount(99);
+
+      expect(result.balance).toBe(0);
+    });
+
+    it('handles inactive accounts', async () => {
+      const inactiveAccount = { ...mockAccount, active: false };
+      (client.api as jest.Mock).mockResolvedValueOnce(inactiveAccount);
+
+      const result = await getAccount(10);
+
+      expect(result.active).toBe(false);
+    });
+  });
+});
diff --git a/app/src/api/accounts.ts b/app/src/api/accounts.ts
new file mode 100644
index 0000000..f3fb260
--- /dev/null
+++ b/app/src/api/accounts.ts
@@ -0,0 +1,170 @@
+import { api } from './client';
+
+export type AccountType = 'CHECKING' | 'SAVINGS' | 'CREDIT_CARD' | 'INVESTMENT' | 'CASH' | 'OTHER';
+
+export type Account = {
+  id: number;
+  name: string;
+  type: AccountType;
+  balance: number;
+  currency: string;
+  institution?: string;
+  account_number_last4?: string;
+  color?: string;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+};
+
+export type AccountCreate = {
+  name: string;
+  type: AccountType;
+  balance?: number;
+  currency?: string;
+  institution?: string;
+  account_number_last4?: string;
+  color?: string;
+};
+
+export type AccountUpdate = Partial<AccountCreate> & {
+  active?: boolean;
+};
+
+export type AccountSummary = {
+  total_assets: number;
+  total_liabilities: number;
+  net_worth: number;
+  accounts_by_type: Record<AccountType, { count: number; total: number }>;
+  currency: string;
+};
+
+export type AccountTransaction = {
+  id: number;
+  account_id: number;
+  amount: number;
+  type: 'DEPOSIT' | 'WITHDRAWAL' | 'TRANSFER';
+  description?: string;
+  date: string;
+  balance_after: number;
+};
+
+/**
+ * List all accounts for the current user
+ */
+export async function listAccounts(params?: {
+  type?: AccountType;
+  active?: boolean;
+}): Promise<Account[]> {
+  const qs = new URLSearchParams();
+  if (params) {
+    Object.entries(params).forEach(([k, v]) => {
+      if (v !== undefined && v !== null && v !== '') qs.set(k, String(v));
+    });
+  }
+  const path = '/accounts' + (qs.toString() ? `?${qs.toString()}` : '');
+  return api<Account[]>(path);
+}
+
+/**
+ * Get a single account by ID
+ */
+export async function getAccount(id: number): Promise<Account> {
+  return api<Account>(`/accounts/${id}`);
+}
+
+/**
+ * Create a new account
+ */
+export async function createAccount(payload: AccountCreate): Promise<Account> {
+  return api<Account>('/accounts', { method: 'POST', body: payload });
+}
+
+/**
+ * Update an existing account
+ */
+export async function updateAccount(id: number, payload: AccountUpdate): Promise<Account> {
+  return api<Account>(`/accounts/${id}`, { method: 'PATCH', body: payload });
+}
+
+/**
+ * Delete an account
+ */
+export async function deleteAccount(id: number): Promise<{ message: string }> {
+  return api<{ message: string }>(`/accounts/${id}`, { method: 'DELETE' });
+}
+
+/**
+ * Get overall account summary and net worth
+ */
+export async function getAccountSummary(): Promise<AccountSummary> {
+  return api<AccountSummary>('/accounts/summary');
+}
+
+/**
+ * Record a deposit to an account
+ */
+export async function depositToAccount(
+  id: number,
+  amount: number,
+  description?: string,
+): Promise<Account> {
+  return api<Account>(`/accounts/${id}/deposit`, {
+    method: 'POST',
+    body: { amount, description },
+  });
+}
+
+/**
+ * Record a withdrawal from an account
+ */
+export async function withdrawFromAccount(
+  id: number,
+  amount: number,
+  description?: string,
+): Promise<Account> {
+  return api<Account>(`/accounts/${id}/withdraw`, {
+    method: 'POST',
+    body: { amount, description },
+  });
+}
+
+/**
+ * Transfer funds between accounts
+ */
+export async function transferBetweenAccounts(
+  fromAccountId: number,
+  toAccountId: number,
+  amount: number,
+  description?: string,
+): Promise<{ from_account: Account; to_account: Account }> {
+  return api(`/accounts/transfer`, {
+    method: 'POST',
+    body: {
+      from_account_id: fromAccountId,
+      to_account_id: toAccountId,
+      amount,
+      description,
+    },
+  });
+}
+
+/**
+ * Get transaction history for an account
+ */
+export async function getAccountTransactions(
+  accountId: number,
+  params?: {
+    from?: string;
+    to?: string;
+    limit?: number;
+  },
+): Promise<AccountTransaction[]> {
+  const qs = new URLSearchParams();
+  if (params) {
+    Object.entries(params).forEach(([k, v]) => {
+      if (v !== undefined && v !== null && v !== '') qs.set(k, String(v));
+    });
+  }
+  const path = `/accounts/${accountId}/transactions` + (qs.toString() ? `?${qs.toString()}` : '');
+  return api<AccountTransaction[]>(path);
+}
diff --git a/app/src/components/layout/Navbar.tsx b/app/src/components/layout/Navbar.tsx
index c7593b7..b4bb558 100644
--- a/app/src/components/layout/Navbar.tsx
+++ b/app/src/components/layout/Navbar.tsx
@@ -8,6 +8,7 @@ import { logout as logoutApi } from '@/api/auth';
 
 const navigation = [
   { name: 'Dashboard', href: '/dashboard' },
+  { name: 'Accounts', href: '/accounts' },
   { name: 'Budgets', href: '/budgets' },
   { name: 'Bills', href: '/bills' },
   { name: 'Reminders', href: '/reminders' },
diff --git a/app/src/pages/Accounts.tsx b/app/src/pages/Accounts.tsx
new file mode 100644
index 0000000..802cdaf
--- /dev/null
+++ b/app/src/pages/Accounts.tsx
@@ -0,0 +1,491 @@
+import { useState, useEffect } from 'react';
+import {
+  FinancialCard,
+  FinancialCardContent,
+  FinancialCardDescription,
+  FinancialCardFooter,
+  FinancialCardHeader,
+  FinancialCardTitle,
+} from '@/components/ui/financial-card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Wallet,
+  Plus,
+  CreditCard,
+  PiggyBank,
+  TrendingUp,
+  TrendingDown,
+  Building2,
+  DollarSign,
+  Edit,
+  Trash2,
+  ArrowUpCircle,
+  ArrowDownCircle,
+  ArrowRightLeft,
+} from 'lucide-react';
+import {
+  listAccounts,
+  getAccountSummary,
+  createAccount,
+  updateAccount,
+  deleteAccount,
+  depositToAccount,
+  withdrawFromAccount,
+  transferBetweenAccounts,
+  type Account,
+  type AccountType,
+  type AccountSummary,
+} from '@/api/accounts';
+
+const ACCOUNT_TYPE_ICONS: Record<AccountType, typeof Wallet> = {
+  CHECKING: Wallet,
+  SAVINGS: PiggyBank,
+  CREDIT_CARD: CreditCard,
+  INVESTMENT: TrendingUp,
+  CASH: DollarSign,
+  OTHER: Building2,
+};
+
+const ACCOUNT_TYPE_COLORS: Record<AccountType, string> = {
+  CHECKING: 'bg-blue-500',
+  SAVINGS: 'bg-green-500',
+  CREDIT_CARD: 'bg-red-500',
+  INVESTMENT: 'bg-purple-500',
+  CASH: 'bg-yellow-500',
+  OTHER: 'bg-gray-500',
+};
+
+export function Accounts() {
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [summary, setSummary] = useState<AccountSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingAccount, setEditingAccount] = useState<Account | null>(null);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  async function loadData() {
+    try {
+      setLoading(true);
+      setError(null);
+      const [accountsData, summaryData] = await Promise.all([
+        listAccounts(),
+        getAccountSummary(),
+      ]);
+      setAccounts(accountsData);
+      setSummary(summaryData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load accounts');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleCreateAccount(data: {
+    name: string;
+    type: AccountType;
+    balance?: number;
+    institution?: string;
+    account_number_last4?: string;
+  }) {
+    try {
+      await createAccount(data);
+      await loadData();
+      setShowCreateModal(false);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to create account');
+    }
+  }
+
+  async function handleUpdateAccount(id: number, data: Partial<Account>) {
+    try {
+      await updateAccount(id, data);
+      await loadData();
+      setEditingAccount(null);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to update account');
+    }
+  }
+
+  async function handleDeleteAccount(id: number) {
+    if (!confirm('Are you sure you want to delete this account? This action cannot be undone.')) {
+      return;
+    }
+    try {
+      await deleteAccount(id);
+      await loadData();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to delete account');
+    }
+  }
+
+  async function handleDeposit(id: number) {
+    const amount = prompt('Enter deposit amount:');
+    if (!amount) return;
+    const description = prompt('Description (optional):');
+    try {
+      await depositToAccount(id, parseFloat(amount), description || undefined);
+      await loadData();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to deposit funds');
+    }
+  }
+
+  async function handleWithdraw(id: number) {
+    const amount = prompt('Enter withdrawal amount:');
+    if (!amount) return;
+    const description = prompt('Description (optional):');
+    try {
+      await withdrawFromAccount(id, parseFloat(amount), description || undefined);
+      await loadData();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to withdraw funds');
+    }
+  }
+
+  async function handleTransfer() {
+    const fromId = prompt('From Account ID:');
+    const toId = prompt('To Account ID:');
+    const amount = prompt('Transfer amount:');
+    if (!fromId || !toId || !amount) return;
+    const description = prompt('Description (optional):');
+    try {
+      await transferBetweenAccounts(
+        parseInt(fromId),
+        parseInt(toId),
+        parseFloat(amount),
+        description || undefined,
+      );
+      await loadData();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to transfer funds');
+    }
+  }
+
+  function getAccountIcon(type: AccountType) {
+    const Icon = ACCOUNT_TYPE_ICONS[type];
+    return <Icon className="h-5 w-5" />;
+  }
+
+  function getAccountColor(type: AccountType) {
+    return ACCOUNT_TYPE_COLORS[type];
+  }
+
+  const activeAccounts = accounts.filter((a) => a.active);
+  const inactiveAccounts = accounts.filter((a) => !a.active);
+
+  if (loading) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="flex items-center justify-center h-64">
+          <p className="text-muted-foreground">Loading accounts...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-6 space-y-8">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-4xl font-bold">Accounts</h1>
+          <p className="text-muted-foreground mt-2">
+            Manage all your financial accounts in one place
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button onClick={handleTransfer} variant="outline">
+            <ArrowRightLeft className="mr-2 h-4 w-4" />
+            Transfer
+          </Button>
+          <Button onClick={() => setShowCreateModal(true)} size="lg">
+            <Plus className="mr-2 h-5 w-5" />
+            New Account
+          </Button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="bg-destructive/10 border border-destructive text-destructive px-4 py-3 rounded">
+          {error}
+        </div>
+      )}
+
+      {/* Summary Cards */}
+      {summary && (
+        <div className="grid gap-6 md:grid-cols-3">
+          <FinancialCard>
+            <FinancialCardHeader>
+              <FinancialCardTitle className="flex items-center gap-2">
+                <TrendingUp className="h-5 w-5 text-green-500" />
+                Total Assets
+              </FinancialCardTitle>
+            </FinancialCardHeader>
+            <FinancialCardContent>
+              <p className="text-4xl font-bold text-green-600">
+                ${summary.total_assets.toFixed(2)}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">{summary.currency}</p>
+            </FinancialCardContent>
+          </FinancialCard>
+
+          <FinancialCard>
+            <FinancialCardHeader>
+              <FinancialCardTitle className="flex items-center gap-2">
+                <TrendingDown className="h-5 w-5 text-red-500" />
+                Total Liabilities
+              </FinancialCardTitle>
+            </FinancialCardHeader>
+            <FinancialCardContent>
+              <p className="text-4xl font-bold text-red-600">
+                ${Math.abs(summary.total_liabilities).toFixed(2)}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">Credit cards & loans</p>
+            </FinancialCardContent>
+          </FinancialCard>
+
+          <FinancialCard>
+            <FinancialCardHeader>
+              <FinancialCardTitle className="flex items-center gap-2">
+                <DollarSign className="h-5 w-5 text-blue-500" />
+                Net Worth
+              </FinancialCardTitle>
+            </FinancialCardHeader>
+            <FinancialCardContent>
+              <p className="text-4xl font-bold">
+                ${summary.net_worth.toFixed(2)}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Assets - Liabilities
+              </p>
+            </FinancialCardContent>
+          </FinancialCard>
+        </div>
+      )}
+
+      {/* Active Accounts */}
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Active Accounts</h2>
+        {activeAccounts.length === 0 ? (
+          <FinancialCard>
+            <FinancialCardContent className="py-12 text-center">
+              <Wallet className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+              <p className="text-lg font-semibold mb-2">No accounts yet</p>
+              <p className="text-muted-foreground mb-4">
+                Add your first financial account to start tracking
+              </p>
+              <Button onClick={() => setShowCreateModal(true)}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create Your First Account
+              </Button>
+            </FinancialCardContent>
+          </FinancialCard>
+        ) : (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {activeAccounts.map((account) => {
+              const isLiability = account.balance < 0 || account.type === 'CREDIT_CARD';
+              return (
+                <FinancialCard
+                  key={account.id}
+                  className="hover:shadow-lg transition-shadow border-l-4"
+                  style={{ borderLeftColor: account.color }}
+                >
+                  <FinancialCardHeader>
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <FinancialCardTitle className="flex items-center gap-2">
+                          <div className={`p-2 rounded-full ${getAccountColor(account.type)} text-white`}>
+                            {getAccountIcon(account.type)}
+                          </div>
+                          {account.name}
+                        </FinancialCardTitle>
+                        <FinancialCardDescription>
+                          {account.institution && (
+                            <span className="flex items-center gap-1 mt-1">
+                              <Building2 className="h-3 w-3" />
+                              {account.institution}
+                              {account.account_number_last4 && ` •••• ${account.account_number_last4}`}
+                            </span>
+                          )}
+                        </FinancialCardDescription>
+                      </div>
+                      <Badge variant={isLiability ? 'destructive' : 'default'}>
+                        {account.type.replace('_', ' ')}
+                      </Badge>
+                    </div>
+                  </FinancialCardHeader>
+
+                  <FinancialCardContent className="space-y-4">
+                    <div>
+                      <p className="text-sm text-muted-foreground">Balance</p>
+                      <p className={`text-3xl font-bold ${isLiability ? 'text-red-600' : 'text-green-600'}`}>
+                        ${Math.abs(account.balance).toFixed(2)}
+                      </p>
+                      {isLiability && account.balance < 0 && (
+                        <p className="text-xs text-muted-foreground mt-1">
+                          (Owed)
+                        </p>
+                      )}
+                    </div>
+                  </FinancialCardContent>
+
+                  <FinancialCardFooter className="flex gap-2 flex-wrap">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleDeposit(account.id)}
+                      className="flex-1"
+                    >
+                      <ArrowUpCircle className="h-4 w-4 mr-1" />
+                      {isLiability ? 'Pay' : 'Deposit'}
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleWithdraw(account.id)}
+                      className="flex-1"
+                    >
+                      <ArrowDownCircle className="h-4 w-4 mr-1" />
+                      {isLiability ? 'Charge' : 'Withdraw'}
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => setEditingAccount(account)}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleDeleteAccount(account.id)}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </FinancialCardFooter>
+                </FinancialCard>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Inactive Accounts */}
+      {inactiveAccounts.length > 0 && (
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold text-muted-foreground">Inactive Accounts</h2>
+          <div className="grid gap-4 md:grid-cols-3 opacity-60">
+            {inactiveAccounts.map((account) => (
+              <FinancialCard key={account.id} className="border-dashed">
+                <FinancialCardHeader>
+                  <FinancialCardTitle className="flex items-center gap-2">
+                    {getAccountIcon(account.type)}
+                    {account.name}
+                  </FinancialCardTitle>
+                </FinancialCardHeader>
+                <FinancialCardContent>
+                  <Badge variant="secondary">Inactive</Badge>
+                </FinancialCardContent>
+                <FinancialCardFooter>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => handleUpdateAccount(account.id, { active: true })}
+                  >
+                    Reactivate
+                  </Button>
+                </FinancialCardFooter>
+              </FinancialCard>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Create Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-background p-6 rounded-lg shadow-xl max-w-md w-full">
+            <h2 className="text-2xl font-bold mb-4">Add Account</h2>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                handleCreateAccount({
+                  name: formData.get('name') as string,
+                  type: formData.get('type') as AccountType,
+                  balance: parseFloat(formData.get('balance') as string) || 0,
+                  institution: formData.get('institution') as string || undefined,
+                  account_number_last4: formData.get('account_number_last4') as string || undefined,
+                });
+              }}
+              className="space-y-4"
+            >
+              <div>
+                <label className="block text-sm font-medium mb-1">Account Name *</label>
+                <input
+                  type="text"
+                  name="name"
+                  required
+                  className="w-full border rounded px-3 py-2"
+                  placeholder="My Checking Account"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Account Type *</label>
+                <select name="type" required className="w-full border rounded px-3 py-2">
+                  <option value="CHECKING">Checking</option>
+                  <option value="SAVINGS">Savings</option>
+                  <option value="CREDIT_CARD">Credit Card</option>
+                  <option value="INVESTMENT">Investment</option>
+                  <option value="CASH">Cash</option>
+                  <option value="OTHER">Other</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Current Balance</label>
+                <input
+                  type="number"
+                  name="balance"
+                  step="0.01"
+                  className="w-full border rounded px-3 py-2"
+                  placeholder="0.00"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Institution</label>
+                <input
+                  type="text"
+                  name="institution"
+                  className="w-full border rounded px-3 py-2"
+                  placeholder="Bank of America"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Last 4 Digits</label>
+                <input
+                  type="text"
+                  name="account_number_last4"
+                  maxLength={4}
+                  pattern="[0-9]{4}"
+                  className="w-full border rounded px-3 py-2"
+                  placeholder="1234"
+                />
+              </div>
+              <div className="flex gap-2 justify-end">
+                <Button type="button" variant="outline" onClick={() => setShowCreateModal(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit">Add Account</Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}