From f10332d9f58a9c352cd6fc9f072258b49a97b77e Mon Sep 17 00:00:00 2001
From: kris <kris@zb2.hm.keyb.ie>
Date: Fri, 29 Aug 2025 18:54:29 +0000
Subject: [PATCH] Add comprehensive cash savings and transfers system with
 total holdings tracking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add cash accounts management with CRUD operations and account types
- Implement date-stamped transfer system with deposits/withdrawals
- Add total holdings card combining portfolio and cash values
- Create dedicated "Add Transfer" page in navigation
- Include automatic balance calculations and transaction history
- Add database migrations for cash_accounts and cash_transfers tables
- Integrate cash data with dashboard and real-time updates

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 index.html |  417 ++++++++++++++++++++-
 script.js  | 1038 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 server.js  |  642 +++++++++++++++++++++++++++++++-
 styles.css |  979 +++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 3054 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 97c4819..108cc1d 100644
--- a/index.html
+++ b/index.html
@@ -21,22 +21,34 @@
                     <span class="menu-icon">💼</span>
                     <span class="menu-text">Portfolio</span>
                 </li>
-                <li class="menu-item" data-page="trade-history">
-                    <span class="menu-icon">📋</span>
-                    <span class="menu-text">Trade History</span>
+                <li class="menu-item" data-page="add-trade">
+                    <span class="menu-icon">➕</span>
+                    <span class="menu-text">Add Trade</span>
+                </li>
+                <li class="menu-item" data-page="cash-accounts">
+                    <span class="menu-icon">💰</span>
+                    <span class="menu-text">Cash Accounts</span>
+                </li>
+                <li class="menu-item" data-page="add-transfer">
+                    <span class="menu-icon">💸</span>
+                    <span class="menu-text">Add Transfer</span>
                 </li>
                 <li class="menu-item" data-page="gains-losses">
                     <span class="menu-icon">📈</span>
                     <span class="menu-text">Gains/Losses</span>
                 </li>
-                <li class="menu-item menu-separator" data-page="add-trade">
-                    <span class="menu-icon">➕</span>
-                    <span class="menu-text">Add Trade</span>
+                <li class="menu-item" data-page="trade-history">
+                    <span class="menu-icon">📋</span>
+                    <span class="menu-text">Trade History</span>
                 </li>
-                <li class="menu-item" data-page="cgt-settings">
+                <li class="menu-item menu-separator" data-page="cgt-settings">
                     <span class="menu-icon">🧮</span>
                     <span class="menu-text">CGT Settings</span>
                 </li>
+                <li class="menu-item" data-page="tokens">
+                    <span class="menu-icon">🔑</span>
+                    <span class="menu-text">API Tokens</span>
+                </li>
                 <li class="menu-item admin-only" data-page="admin" style="display: none;">
                     <span class="menu-icon">👥</span>
                     <span class="menu-text">Admin Panel</span>
@@ -120,6 +132,53 @@
                         </div>
                     </div>
                     
+                    <!-- Total Holdings Card -->
+                    <div class="total-holdings-section">
+                        <div class="total-holdings-card">
+                            <h3>Total Holdings</h3>
+                            <div class="holdings-breakdown">
+                                <div class="holdings-item">
+                                    <span class="holdings-label">Portfolio Value:</span>
+                                    <span class="holdings-value" id="total-holdings-portfolio">€0.00</span>
+                                </div>
+                                <div class="holdings-item">
+                                    <span class="holdings-label">Cash Savings:</span>
+                                    <span class="holdings-value" id="total-holdings-cash">€0.00</span>
+                                </div>
+                                <div class="holdings-divider"></div>
+                                <div class="holdings-total">
+                                    <span class="holdings-label">Total Value:</span>
+                                    <span class="holdings-value total" id="total-holdings-combined">€0.00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="cash-breakdown" id="cash-breakdown" style="display: none;">
+                        <h3>Cash Savings Summary</h3>
+                        <div class="cash-summary-overview">
+                            <div class="cash-total-card">
+                                <div class="cash-amount-line" id="dashboard-cash-eur-line">
+                                    <span class="currency-label">EUR:</span>
+                                    <span class="amount" id="dashboard-cash-eur">€0.00</span>
+                                </div>
+                                <div class="cash-amount-line" id="dashboard-cash-usd-line" style="display: none;">
+                                    <span class="currency-label">USD:</span>
+                                    <span class="amount" id="dashboard-cash-usd">$0.00</span>
+                                </div>
+                            </div>
+                            <div class="cash-stats-card">
+                                <span class="stat-detail" id="dashboard-account-count">0 accounts</span>
+                                <span class="stat-detail" id="dashboard-avg-interest-display" style="display: none;">Avg: 0.0%</span>
+                            </div>
+                        </div>
+                        <div id="cash-accounts-breakdown" class="breakdown-list">
+                            <div id="dashboard-cash-accounts-list">
+                                <p class="no-data">No cash accounts yet</p>
+                            </div>
+                        </div>
+                    </div>
+                    
                     <div class="etf-breakdown">
                         <h3>ETF Breakdown</h3>
                         <div id="etf-breakdown-list" class="breakdown-list">
@@ -257,6 +316,337 @@
                     </div>
                 </div>
                 
+                <!-- API Tokens Page -->
+                <div id="tokens-page" class="page">
+                    <div class="tokens-container">
+                        <h2>API Access Tokens</h2>
+                        <div class="tokens-intro">
+                            <p>Create access tokens to authenticate API requests for third-party integrations like n8n workflows. Keep your tokens secure and never share them publicly.</p>
+                        </div>
+                        
+                        <div class="token-actions">
+                            <h3>Create New Token</h3>
+                            <form id="create-token-form" class="create-token-form">
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="token-name">Token Name</label>
+                                        <input type="text" id="token-name" required placeholder="e.g., N8N Workflow Token" maxlength="50">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="token-expires">Expires (optional)</label>
+                                        <select id="token-expires">
+                                            <option value="">Never</option>
+                                            <option value="30">30 days</option>
+                                            <option value="90">90 days</option>
+                                            <option value="365">1 year</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="token-scopes">Permissions</label>
+                                        <select id="token-scopes">
+                                            <option value="read">Read Only</option>
+                                            <option value="read,write" selected>Read & Write</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <button type="submit" class="create-token-btn">Create Token</button>
+                            </form>
+                        </div>
+                        
+                        <div class="tokens-list-section">
+                            <h3>Your Access Tokens</h3>
+                            <div id="tokens-list" class="tokens-list">
+                                <p class="no-data">Loading tokens...</p>
+                            </div>
+                        </div>
+                        
+                        <!-- Token Creation Modal -->
+                        <div id="token-modal" class="modal" style="display: none;">
+                            <div class="modal-content">
+                                <h3>Token Created Successfully</h3>
+                                <p><strong>Important:</strong> Copy your token now. You won't be able to see it again!</p>
+                                <div class="token-display">
+                                    <input type="text" id="new-token-value" readonly>
+                                    <button id="copy-token-btn" class="copy-btn">Copy</button>
+                                </div>
+                                <div class="token-usage">
+                                    <h4>Usage Example:</h4>
+                                    <code class="usage-example">
+curl -H "Authorization: Bearer YOUR_TOKEN" \<br>
+&nbsp;&nbsp;&nbsp;&nbsp;http://localhost:3000/api/trades
+                                    </code>
+                                </div>
+                                <button id="close-token-modal" class="close-modal-btn">Close</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Cash Accounts Page -->
+                <div id="cash-accounts-page" class="page">
+                    <div class="cash-accounts-container">
+                        <h2>Cash Savings Accounts</h2>
+                        <div class="cash-intro">
+                            <p>Track your cash savings accounts alongside your ETF investments. Manage different account types and monitor your total cash position.</p>
+                        </div>
+                        
+                        <div class="cash-summary-cards">
+                            <div class="cash-summary-card total-cash">
+                                <h3>Total Cash</h3>
+                                <div class="cash-amounts">
+                                    <div class="amount-line">
+                                        <span class="currency">EUR:</span>
+                                        <span class="amount" id="total-cash-eur">€0.00</span>
+                                    </div>
+                                    <div class="amount-line">
+                                        <span class="currency">USD:</span>
+                                        <span class="amount" id="total-cash-usd">$0.00</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="cash-summary-card account-stats">
+                                <h3>Account Stats</h3>
+                                <div class="stat-line">
+                                    <span>Accounts:</span>
+                                    <span id="account-count">0</span>
+                                </div>
+                                <div class="stat-line">
+                                    <span>Avg Interest:</span>
+                                    <span id="avg-interest">0.0%</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="cash-actions">
+                            <h3>Add New Account</h3>
+                            <form id="create-account-form" class="create-account-form">
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="account-name">Account Name</label>
+                                        <input type="text" id="account-name" required placeholder="e.g., Emergency Savings" maxlength="100">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="account-type">Account Type</label>
+                                        <select id="account-type">
+                                            <option value="savings">Savings Account</option>
+                                            <option value="checking">Checking Account</option>
+                                            <option value="money_market">Money Market</option>
+                                            <option value="cd">Certificate of Deposit</option>
+                                            <option value="other">Other</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="account-balance">Balance</label>
+                                        <input type="number" id="account-balance" step="0.01" min="0" required placeholder="0.00">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="account-currency">Currency</label>
+                                        <select id="account-currency">
+                                            <option value="EUR" selected>EUR (€)</option>
+                                            <option value="USD">USD ($)</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="institution-name">Institution (optional)</label>
+                                        <input type="text" id="institution-name" placeholder="e.g., Bank of Ireland">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="interest-rate">Interest Rate % (optional)</label>
+                                        <input type="number" id="interest-rate" step="0.01" min="0" placeholder="0.00">
+                                    </div>
+                                </div>
+                                <div class="form-row">
+                                    <div class="form-group full-width">
+                                        <label for="account-notes">Notes (optional)</label>
+                                        <textarea id="account-notes" placeholder="Additional notes about this account" rows="2"></textarea>
+                                    </div>
+                                </div>
+                                <button type="submit" class="create-account-btn">Add Account</button>
+                            </form>
+                        </div>
+                        
+                        <div class="accounts-list-section">
+                            <h3>Your Cash Accounts</h3>
+                            <div id="accounts-list" class="accounts-list">
+                                <p class="no-data">Loading accounts...</p>
+                            </div>
+                        </div>
+                        
+                        <!-- Edit Account Modal -->
+                        <div id="edit-account-modal" class="modal" style="display: none;">
+                            <div class="modal-content">
+                                <h3>Edit Cash Account</h3>
+                                <form id="edit-account-form">
+                                    <div class="form-row">
+                                        <div class="form-group">
+                                            <label for="edit-account-name">Account Name</label>
+                                            <input type="text" id="edit-account-name" required maxlength="100">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="edit-account-type">Account Type</label>
+                                            <select id="edit-account-type">
+                                                <option value="savings">Savings Account</option>
+                                                <option value="checking">Checking Account</option>
+                                                <option value="money_market">Money Market</option>
+                                                <option value="cd">Certificate of Deposit</option>
+                                                <option value="other">Other</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="form-row">
+                                        <div class="form-group">
+                                            <label for="edit-account-balance">Balance</label>
+                                            <input type="number" id="edit-account-balance" step="0.01" min="0" required>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="edit-account-currency">Currency</label>
+                                            <select id="edit-account-currency">
+                                                <option value="EUR">EUR (€)</option>
+                                                <option value="USD">USD ($)</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="form-row">
+                                        <div class="form-group">
+                                            <label for="edit-institution-name">Institution</label>
+                                            <input type="text" id="edit-institution-name">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="edit-interest-rate">Interest Rate %</label>
+                                            <input type="number" id="edit-interest-rate" step="0.01" min="0">
+                                        </div>
+                                    </div>
+                                    <div class="form-row">
+                                        <div class="form-group full-width">
+                                            <label for="edit-account-notes">Notes</label>
+                                            <textarea id="edit-account-notes" rows="2"></textarea>
+                                        </div>
+                                    </div>
+                                    <div class="modal-buttons">
+                                        <button type="button" id="cancel-edit-account" class="cancel-btn">Cancel</button>
+                                        <button type="submit" class="save-btn">Save Changes</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                        
+                        <!-- Transfer Modal -->
+                        <div id="transfer-modal" class="modal" style="display: none;">
+                            <div class="modal-content">
+                                <h3>Add Transfer</h3>
+                                <form id="transfer-form">
+                                    <div class="form-row">
+                                        <div class="form-group">
+                                            <label for="transfer-account">Account</label>
+                                            <select id="transfer-account" required>
+                                                <option value="">Select Account</option>
+                                            </select>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="transfer-type">Transfer Type</label>
+                                            <select id="transfer-type" required>
+                                                <option value="">Select Type</option>
+                                                <option value="deposit">Deposit</option>
+                                                <option value="withdrawal">Withdrawal</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="form-row">
+                                        <div class="form-group">
+                                            <label for="transfer-amount">Amount</label>
+                                            <input type="number" id="transfer-amount" step="0.01" min="0.01" required>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="transfer-date">Transfer Date</label>
+                                            <input type="date" id="transfer-date" required>
+                                        </div>
+                                    </div>
+                                    <div class="form-row">
+                                        <div class="form-group full-width">
+                                            <label for="transfer-description">Description</label>
+                                            <textarea id="transfer-description" rows="2" placeholder="Optional description"></textarea>
+                                        </div>
+                                    </div>
+                                    <div class="modal-buttons">
+                                        <button type="button" id="cancel-transfer" class="cancel-btn">Cancel</button>
+                                        <button type="submit" class="save-btn">Add Transfer</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                        
+                        <!-- Transfers Section -->
+                        <div class="transfers-section">
+                            <div class="section-header">
+                                <h3>Recent Transfers</h3>
+                                <button id="add-transfer-btn" class="primary-btn">Add Transfer</button>
+                            </div>
+                            <div id="transfers-list" class="transfers-list">
+                                <p class="no-data">No transfers found</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Add Transfer Page -->
+                <div id="add-transfer-page" class="page">
+                    <div class="transfer-form-container">
+                        <h2>Add Cash Transfer</h2>
+                        <div class="transfer-intro">
+                            <p>Record deposits and withdrawals for your cash accounts. Transfers will automatically update account balances.</p>
+                        </div>
+                        
+                        <form id="standalone-transfer-form" class="transfer-form">
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label for="standalone-transfer-account">Account</label>
+                                    <select id="standalone-transfer-account" required>
+                                        <option value="">Select Account</option>
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <label for="standalone-transfer-type">Transfer Type</label>
+                                    <select id="standalone-transfer-type" required>
+                                        <option value="">Select Type</option>
+                                        <option value="deposit">Deposit</option>
+                                        <option value="withdrawal">Withdrawal</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label for="standalone-transfer-amount">Amount</label>
+                                    <input type="number" id="standalone-transfer-amount" step="0.01" min="0.01" required>
+                                </div>
+                                <div class="form-group">
+                                    <label for="standalone-transfer-date">Transfer Date</label>
+                                    <input type="date" id="standalone-transfer-date" required>
+                                </div>
+                            </div>
+                            <div class="form-row">
+                                <div class="form-group full-width">
+                                    <label for="standalone-transfer-description">Description</label>
+                                    <textarea id="standalone-transfer-description" rows="3" placeholder="Optional description"></textarea>
+                                </div>
+                            </div>
+                            <button type="submit" class="submit-btn">Add Transfer</button>
+                        </form>
+                        
+                        <div class="recent-transfers">
+                            <h3>Recent Transfers</h3>
+                            <div id="standalone-transfers-list" class="transfers-list">
+                                <p class="no-data">No transfers found</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
                 <!-- Gains/Losses Page -->
                 <div id="gains-losses-page" class="page">
                     <div class="gains-losses-container">
@@ -407,9 +797,14 @@
                                 </div>
                                 
                                 <div class="cgt-rate-item">
-                                    <label for="cgt-longterm">2+ Years (%)</label>
+                                    <label for="cgt-longterm">2-8 Years (%)</label>
                                     <input type="number" id="cgt-longterm" min="0" max="100" step="0.1" value="10" class="cgt-rate-input">
                                 </div>
+                                
+                                <div class="cgt-rate-item">
+                                    <label for="cgt-8years">8+ Years (%)</label>
+                                    <input type="number" id="cgt-8years" min="0" max="100" step="0.1" value="33" class="cgt-rate-input">
+                                </div>
                             </div>
                             
                             <div class="cgt-options">
@@ -454,9 +849,13 @@
                                     <div class="rate-value">20%</div>
                                 </div>
                                 <div class="rate-bar" data-period="longterm">
-                                    <span class="period-label">2Y+</span>
+                                    <span class="period-label">2-8Y</span>
                                     <div class="rate-value">10%</div>
                                 </div>
+                                <div class="rate-bar" data-period="8years">
+                                    <span class="period-label">8Y+</span>
+                                    <div class="rate-value">33%</div>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/script.js b/script.js
index 970f104..9f4dab9 100644
--- a/script.js
+++ b/script.js
@@ -95,6 +95,9 @@ class ETFTradeTracker {
             'portfolio': 'Portfolio',
             'gains-losses': 'Gains & Losses',
             'cgt-settings': 'CGT Settings',
+            'tokens': 'API Tokens',
+            'cash-accounts': 'Cash Accounts',
+            'add-transfer': 'Add Transfer',
             'admin': 'Admin Panel'
         };
         
@@ -107,6 +110,12 @@ class ETFTradeTracker {
             this.renderGainsLossesPage();
         } else if (pageId === 'cgt-settings') {
             this.renderCGTSettingsPage();
+        } else if (pageId === 'tokens') {
+            this.renderTokensPage();
+        } else if (pageId === 'cash-accounts') {
+            this.renderCashAccountsPage();
+        } else if (pageId === 'add-transfer') {
+            this.renderAddTransferPage();
         } else if (pageId === 'admin') {
             this.renderAdminPage();
         }
@@ -619,6 +628,7 @@ class ETFTradeTracker {
     updateDashboard() {
         this.calculateDashboardMetrics();
         this.renderETFBreakdown();
+        this.loadDashboardCashData();
     }
 
     updateDashboardColors(totalGains) {
@@ -728,6 +738,9 @@ class ETFTradeTracker {
 
         // Update dashboard card colors for gains/losses
         this.updateDashboardColors(totalGains);
+        
+        // Update total holdings card with portfolio data
+        this.updateTotalHoldingsCard();
     }
 
     renderETFBreakdown() {
@@ -788,6 +801,168 @@ class ETFTradeTracker {
         breakdownList.innerHTML = breakdownHTML;
     }
 
+    async loadDashboardCashData() {
+        try {
+            // Load cash summary
+            const summaryResponse = await fetch(`${this.apiUrl}/cash-summary`, {
+                credentials: 'include'
+            });
+
+            if (summaryResponse.ok) {
+                const summary = await summaryResponse.json();
+                this.updateDashboardCashSummary(summary);
+
+                // If there are cash accounts, also load detailed account list
+                if (summary.account_count > 0) {
+                    const accountsResponse = await fetch(`${this.apiUrl}/cash-accounts`, {
+                        credentials: 'include'
+                    });
+
+                    if (accountsResponse.ok) {
+                        const accounts = await accountsResponse.json();
+                        this.renderDashboardCashAccounts(accounts);
+                        
+                        // Show the cash breakdown section
+                        const cashBreakdown = document.getElementById('cash-breakdown');
+                        if (cashBreakdown) {
+                            cashBreakdown.style.display = 'block';
+                        }
+                    }
+                } else {
+                    // Hide the cash breakdown section if no accounts
+                    const cashBreakdown = document.getElementById('cash-breakdown');
+                    if (cashBreakdown) {
+                        cashBreakdown.style.display = 'none';
+                    }
+                }
+            }
+        } catch (error) {
+            console.error('Error loading dashboard cash data:', error);
+            // Hide the cash breakdown section on error
+            const cashBreakdown = document.getElementById('cash-breakdown');
+            if (cashBreakdown) {
+                cashBreakdown.style.display = 'none';
+            }
+        }
+    }
+
+    updateDashboardCashSummary(summary) {
+        // Update EUR amount
+        document.getElementById('dashboard-cash-eur').textContent = `€${summary.total_eur.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+        
+        // Update USD amount and show/hide USD line based on amount
+        const usdLine = document.getElementById('dashboard-cash-usd-line');
+        const usdAmount = document.getElementById('dashboard-cash-usd');
+        usdAmount.textContent = `$${summary.total_usd.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+        
+        if (summary.total_usd > 0) {
+            usdLine.style.display = 'flex';
+        } else {
+            usdLine.style.display = 'none';
+        }
+        
+        // Update account count
+        const accountCountText = summary.account_count === 1 ? '1 account' : `${summary.account_count} accounts`;
+        document.getElementById('dashboard-account-count').textContent = accountCountText;
+        
+        // Update average interest and show/hide based on whether there are accounts with interest
+        const avgInterestDisplay = document.getElementById('dashboard-avg-interest-display');
+        if (summary.avg_interest_rate > 0) {
+            avgInterestDisplay.textContent = `Avg: ${summary.avg_interest_rate.toFixed(1)}%`;
+            avgInterestDisplay.style.display = 'block';
+        } else {
+            avgInterestDisplay.style.display = 'none';
+        }
+        
+        // Update total holdings card after cash summary is updated
+        this.updateTotalHoldingsCard();
+    }
+
+    updateTotalHoldingsCard() {
+        // Get current portfolio value (from dashboard metric)
+        const portfolioValueElement = document.getElementById('dashboard-current-value');
+        let portfolioValue = 0;
+        
+        if (portfolioValueElement && portfolioValueElement.textContent) {
+            // Parse the portfolio value (remove € and commas)
+            const portfolioText = portfolioValueElement.textContent.replace(/[€,]/g, '').trim();
+            portfolioValue = parseFloat(portfolioText) || 0;
+        }
+        
+        // Get current cash savings total (EUR equivalent)
+        let totalCashEUR = 0;
+        
+        // Get EUR cash
+        const eurCashElement = document.getElementById('dashboard-cash-eur');
+        if (eurCashElement && eurCashElement.textContent) {
+            const eurText = eurCashElement.textContent.replace(/[€,]/g, '').trim();
+            totalCashEUR += parseFloat(eurText) || 0;
+        }
+        
+        // Get USD cash and convert to EUR (simplified conversion - ideally use actual rates)
+        const usdCashElement = document.getElementById('dashboard-cash-usd');
+        if (usdCashElement && usdCashElement.textContent && usdCashElement.closest('#dashboard-cash-usd-line').style.display !== 'none') {
+            const usdText = usdCashElement.textContent.replace(/[\$,]/g, '').trim();
+            const usdAmount = parseFloat(usdText) || 0;
+            // Convert USD to EUR (using approximate rate of 0.85, should be made configurable)
+            totalCashEUR += usdAmount * 0.85;
+        }
+        
+        // Calculate total
+        const totalHoldings = portfolioValue + totalCashEUR;
+        
+        // Update the display
+        document.getElementById('total-holdings-portfolio').textContent = `€${portfolioValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+        document.getElementById('total-holdings-cash').textContent = `€${totalCashEUR.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+        document.getElementById('total-holdings-combined').textContent = `€${totalHoldings.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+    }
+
+    renderDashboardCashAccounts(accounts) {
+        const accountsList = document.getElementById('dashboard-cash-accounts-list');
+        
+        if (!accounts || accounts.length === 0) {
+            accountsList.innerHTML = '<p class="no-data">No cash accounts yet</p>';
+            return;
+        }
+
+        const accountTypeMap = {
+            savings: 'Savings',
+            checking: 'Checking', 
+            money_market: 'Money Market',
+            cd: 'Certificate of Deposit',
+            other: 'Other'
+        };
+
+        accountsList.innerHTML = accounts.slice(0, 5).map(account => {
+            const balance = parseFloat(account.balance);
+            const currencySymbol = account.currency === 'EUR' ? '€' : '$';
+            const formattedBalance = `${currencySymbol}${balance.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+            
+            return `
+                <div class="cash-account-breakdown-item">
+                    <div class="cash-account-info">
+                        <div class="cash-account-name">${this.escapeHtml(account.account_name)}</div>
+                        <div class="cash-account-type">${accountTypeMap[account.account_type] || 'Other'}</div>
+                    </div>
+                    <div class="cash-account-balance">${formattedBalance}</div>
+                </div>
+            `;
+        }).join('');
+
+        // Add "View All" link if there are more than 5 accounts
+        if (accounts.length > 5) {
+            accountsList.innerHTML += `
+                <div class="cash-account-breakdown-item" style="border-left: 3px solid #17a2b8; cursor: pointer;" onclick="app.showPage('cash-accounts')">
+                    <div class="cash-account-info">
+                        <div class="cash-account-name" style="color: #17a2b8;">View All Cash Accounts</div>
+                        <div class="cash-account-type">+${accounts.length - 5} more accounts</div>
+                    </div>
+                    <div class="cash-account-balance" style="color: #17a2b8;">→</div>
+                </div>
+            `;
+        }
+    }
+
     renderPortfolioPage() {
         const portfolioSummary = document.getElementById('portfolio-summary');
         const etfMap = new Map();
@@ -1252,7 +1427,7 @@ class ETFTradeTracker {
 
         const now = new Date();
         const eightYearsInDays = 8 * 365.25;
-        const cgtRate = 0.33; // 33% rate for 8+ years
+        const cgtRate = (this.cgtSettings?.rate_8years || 33) / 100; // Rate from settings for 8+ years
         
         let eligiblePositions = [];
         let totalEligibleValue = 0;
@@ -1416,6 +1591,7 @@ class ETFTradeTracker {
                     rate_1year: 30.0,
                     rate_2years: 20.0,
                     rate_longterm: 10.0,
+                    rate_8years: 33.0,
                     annual_exemption: 1270.0,
                     enabled: true
                 };
@@ -1428,6 +1604,7 @@ class ETFTradeTracker {
                 rate_1year: 30.0,
                 rate_2years: 20.0,
                 rate_longterm: 10.0,
+                rate_8years: 33.0,
                 annual_exemption: 1270.0,
                 enabled: true
             };
@@ -1588,6 +1765,7 @@ class ETFTradeTracker {
         document.getElementById('cgt-1year').value = this.cgtSettings.rate_1year;
         document.getElementById('cgt-2years').value = this.cgtSettings.rate_2years;
         document.getElementById('cgt-longterm').value = this.cgtSettings.rate_longterm;
+        document.getElementById('cgt-8years').value = this.cgtSettings.rate_8years;
         document.getElementById('cgt-annual-exemption').value = this.cgtSettings.annual_exemption;
         document.getElementById('cgt-enabled').checked = this.cgtSettings.enabled;
 
@@ -1614,6 +1792,7 @@ class ETFTradeTracker {
                 rate_1year: parseFloat(document.getElementById('cgt-1year').value),
                 rate_2years: parseFloat(document.getElementById('cgt-2years').value),
                 rate_longterm: parseFloat(document.getElementById('cgt-longterm').value),
+                rate_8years: parseFloat(document.getElementById('cgt-8years').value),
                 annual_exemption: parseFloat(document.getElementById('cgt-annual-exemption').value),
                 enabled: document.getElementById('cgt-enabled').checked
             };
@@ -1628,6 +1807,7 @@ class ETFTradeTracker {
             document.getElementById('cgt-1year').value = 30;
             document.getElementById('cgt-2years').value = 20;
             document.getElementById('cgt-longterm').value = 10;
+            document.getElementById('cgt-8years').value = 33;
             document.getElementById('cgt-annual-exemption').value = 1270;
             document.getElementById('cgt-enabled').checked = true;
             this.updateCGTPreview();
@@ -1648,7 +1828,8 @@ class ETFTradeTracker {
             '6months': parseFloat(document.getElementById('cgt-6months').value) || 0,
             '1year': parseFloat(document.getElementById('cgt-1year').value) || 0,
             '2years': parseFloat(document.getElementById('cgt-2years').value) || 0,
-            'longterm': parseFloat(document.getElementById('cgt-longterm').value) || 0
+            'longterm': parseFloat(document.getElementById('cgt-longterm').value) || 0,
+            '8years': parseFloat(document.getElementById('cgt-8years').value) || 0
         };
 
         Object.keys(rates).forEach(period => {
@@ -1663,6 +1844,859 @@ class ETFTradeTracker {
             }
         });
     }
+
+    // Cash Accounts Management Methods
+    async renderCashAccountsPage() {
+        await this.loadCashAccounts();
+        await this.loadCashSummary();
+        await this.renderTransfersSection();
+        this.bindCashAccountEvents();
+    }
+
+    async loadCashAccounts() {
+        try {
+            const response = await fetch(`${this.apiUrl}/cash-accounts`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const accounts = await response.json();
+                this.renderAccountsList(accounts);
+            } else {
+                this.showNotification('Failed to load cash accounts', 'error');
+            }
+        } catch (error) {
+            console.error('Error loading cash accounts:', error);
+            this.showNotification('Failed to load cash accounts', 'error');
+        }
+    }
+
+    async loadCashSummary() {
+        try {
+            const response = await fetch(`${this.apiUrl}/cash-summary`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const summary = await response.json();
+                this.updateCashSummary(summary);
+            } else {
+                console.error('Failed to load cash summary');
+            }
+        } catch (error) {
+            console.error('Error loading cash summary:', error);
+        }
+    }
+
+    updateCashSummary(summary) {
+        document.getElementById('total-cash-eur').textContent = `€${summary.total_eur.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+        document.getElementById('total-cash-usd').textContent = `$${summary.total_usd.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+        document.getElementById('account-count').textContent = summary.account_count;
+        document.getElementById('avg-interest').textContent = `${summary.avg_interest_rate.toFixed(1)}%`;
+    }
+
+    renderAccountsList(accounts) {
+        const accountsList = document.getElementById('accounts-list');
+        
+        if (!accounts || accounts.length === 0) {
+            accountsList.innerHTML = '<p class="no-data">No cash accounts found. Add your first account above.</p>';
+            return;
+        }
+
+        accountsList.innerHTML = accounts.map(account => {
+            const createdDate = new Date(account.created_at).toLocaleDateString();
+            const balance = parseFloat(account.balance);
+            const currencySymbol = account.currency === 'EUR' ? '€' : '$';
+            const formattedBalance = `${currencySymbol}${balance.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+            
+            const accountTypeMap = {
+                savings: 'Savings Account',
+                checking: 'Checking Account', 
+                money_market: 'Money Market',
+                cd: 'Certificate of Deposit',
+                other: 'Other'
+            };
+            
+            return `
+                <div class="account-item" data-account-id="${account.id}">
+                    <div class="account-info">
+                        <div class="account-name">${this.escapeHtml(account.account_name)}</div>
+                        <div class="account-type-badge">${accountTypeMap[account.account_type] || 'Other'}</div>
+                        <div class="account-details">
+                            <div class="account-detail">
+                                <span class="account-detail-label">Balance</span>
+                                <span class="account-balance">${formattedBalance}</span>
+                            </div>
+                            ${account.institution_name ? `
+                                <div class="account-detail">
+                                    <span class="account-detail-label">Institution</span>
+                                    <span>${this.escapeHtml(account.institution_name)}</span>
+                                </div>
+                            ` : ''}
+                            ${account.interest_rate > 0 ? `
+                                <div class="account-detail">
+                                    <span class="account-detail-label">Interest Rate</span>
+                                    <span>${account.interest_rate}%</span>
+                                </div>
+                            ` : ''}
+                            <div class="account-detail">
+                                <span class="account-detail-label">Created</span>
+                                <span>${createdDate}</span>
+                            </div>
+                            ${account.notes ? `
+                                <div class="account-detail">
+                                    <span class="account-detail-label">Notes</span>
+                                    <span>${this.escapeHtml(account.notes)}</span>
+                                </div>
+                            ` : ''}
+                        </div>
+                    </div>
+                    <div class="account-actions-buttons">
+                        <button class="account-edit-btn" data-account-id="${account.id}">Edit</button>
+                        <button class="account-delete-btn" data-account-id="${account.id}">Delete</button>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    bindCashAccountEvents() {
+        const createAccountForm = document.getElementById('create-account-form');
+        const editAccountForm = document.getElementById('edit-account-form');
+        const editModal = document.getElementById('edit-account-modal');
+        const cancelEditBtn = document.getElementById('cancel-edit-account');
+
+        // Remove existing listeners
+        createAccountForm.removeEventListener('submit', this.handleCreateAccount);
+        editAccountForm.removeEventListener('submit', this.handleEditAccount);
+        cancelEditBtn.removeEventListener('click', this.handleCancelEdit);
+
+        // Create account form
+        this.handleCreateAccount = async (e) => {
+            e.preventDefault();
+            
+            const formData = {
+                account_name: document.getElementById('account-name').value.trim(),
+                account_type: document.getElementById('account-type').value,
+                balance: parseFloat(document.getElementById('account-balance').value) || 0,
+                currency: document.getElementById('account-currency').value,
+                institution_name: document.getElementById('institution-name').value.trim(),
+                interest_rate: parseFloat(document.getElementById('interest-rate').value) || 0,
+                notes: document.getElementById('account-notes').value.trim()
+            };
+
+            try {
+                const response = await fetch(`${this.apiUrl}/cash-accounts`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify(formData)
+                });
+
+                const result = await response.json();
+
+                if (response.ok) {
+                    createAccountForm.reset();
+                    await this.loadCashAccounts();
+                    await this.loadCashSummary();
+                    this.updateDashboard(); // Refresh dashboard cash data
+                    this.showNotification('Cash account created successfully!', 'success');
+                } else {
+                    this.showNotification(result.error || 'Failed to create account', 'error');
+                }
+            } catch (error) {
+                console.error('Error creating account:', error);
+                this.showNotification('Failed to create account', 'error');
+            }
+        };
+
+        // Edit account form
+        this.handleEditAccount = async (e) => {
+            e.preventDefault();
+            
+            const accountId = editAccountForm.getAttribute('data-account-id');
+            const formData = {
+                account_name: document.getElementById('edit-account-name').value.trim(),
+                account_type: document.getElementById('edit-account-type').value,
+                balance: parseFloat(document.getElementById('edit-account-balance').value) || 0,
+                currency: document.getElementById('edit-account-currency').value,
+                institution_name: document.getElementById('edit-institution-name').value.trim(),
+                interest_rate: parseFloat(document.getElementById('edit-interest-rate').value) || 0,
+                notes: document.getElementById('edit-account-notes').value.trim()
+            };
+
+            try {
+                const response = await fetch(`${this.apiUrl}/cash-accounts/${accountId}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify(formData)
+                });
+
+                const result = await response.json();
+
+                if (response.ok) {
+                    editModal.style.display = 'none';
+                    await this.loadCashAccounts();
+                    await this.loadCashSummary();
+                    this.updateDashboard(); // Refresh dashboard cash data
+                    this.showNotification('Cash account updated successfully!', 'success');
+                } else {
+                    this.showNotification(result.error || 'Failed to update account', 'error');
+                }
+            } catch (error) {
+                console.error('Error updating account:', error);
+                this.showNotification('Failed to update account', 'error');
+            }
+        };
+
+        // Cancel edit
+        this.handleCancelEdit = () => {
+            editModal.style.display = 'none';
+        };
+
+        // Bind events
+        createAccountForm.addEventListener('submit', this.handleCreateAccount);
+        editAccountForm.addEventListener('submit', this.handleEditAccount);
+        cancelEditBtn.addEventListener('click', this.handleCancelEdit);
+
+        // Bind account action buttons
+        document.querySelectorAll('.account-delete-btn').forEach(btn => {
+            btn.addEventListener('click', this.handleDeleteAccount.bind(this));
+        });
+
+        document.querySelectorAll('.account-edit-btn').forEach(btn => {
+            btn.addEventListener('click', this.handleEditAccountClick.bind(this));
+        });
+
+        // Close modal on backdrop click
+        editModal.addEventListener('click', (e) => {
+            if (e.target === editModal) {
+                this.handleCancelEdit();
+            }
+        });
+    }
+
+    async handleDeleteAccount(e) {
+        const accountId = e.target.getAttribute('data-account-id');
+        const accountName = e.target.closest('.account-item').querySelector('.account-name').textContent;
+        
+        if (!confirm(`Are you sure you want to delete the account "${accountName}"? This action cannot be undone.`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`${this.apiUrl}/cash-accounts/${accountId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                await this.loadCashAccounts();
+                await this.loadCashSummary();
+                this.updateDashboard(); // Refresh dashboard cash data
+                this.showNotification('Cash account deleted successfully', 'success');
+            } else {
+                const result = await response.json();
+                this.showNotification(result.error || 'Failed to delete account', 'error');
+            }
+        } catch (error) {
+            console.error('Error deleting account:', error);
+            this.showNotification('Failed to delete account', 'error');
+        }
+    }
+
+    async handleEditAccountClick(e) {
+        const accountId = e.target.getAttribute('data-account-id');
+        
+        try {
+            const response = await fetch(`${this.apiUrl}/cash-accounts`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const accounts = await response.json();
+                const account = accounts.find(acc => acc.id == accountId);
+                
+                if (account) {
+                    // Populate edit form
+                    document.getElementById('edit-account-name').value = account.account_name;
+                    document.getElementById('edit-account-type').value = account.account_type;
+                    document.getElementById('edit-account-balance').value = account.balance;
+                    document.getElementById('edit-account-currency').value = account.currency;
+                    document.getElementById('edit-institution-name').value = account.institution_name || '';
+                    document.getElementById('edit-interest-rate').value = account.interest_rate || '';
+                    document.getElementById('edit-account-notes').value = account.notes || '';
+                    
+                    // Set account ID for form submission
+                    document.getElementById('edit-account-form').setAttribute('data-account-id', accountId);
+                    
+                    // Show modal
+                    document.getElementById('edit-account-modal').style.display = 'flex';
+                }
+            }
+        } catch (error) {
+            console.error('Error loading account for edit:', error);
+            this.showNotification('Failed to load account details', 'error');
+        }
+    }
+
+    // Cash Transfers Methods
+    async renderTransfersSection() {
+        await this.loadTransfers();
+        this.bindTransferEvents();
+    }
+
+    async loadTransfers() {
+        try {
+            const response = await fetch(`${this.apiUrl}/cash-transfers`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const transfers = await response.json();
+                this.renderTransfersList(transfers);
+            } else {
+                this.showNotification('Failed to load transfers', 'error');
+            }
+        } catch (error) {
+            console.error('Error loading transfers:', error);
+            this.showNotification('Failed to load transfers', 'error');
+        }
+    }
+
+    renderTransfersList(transfers) {
+        const transfersList = document.getElementById('transfers-list');
+        
+        if (!transfers || transfers.length === 0) {
+            transfersList.innerHTML = '<p class="no-data">No transfers found</p>';
+            return;
+        }
+
+        transfersList.innerHTML = transfers.map(transfer => {
+            const transferDate = new Date(transfer.transfer_date).toLocaleDateString();
+            const amount = parseFloat(transfer.amount);
+            const currencySymbol = transfer.currency === 'USD' ? '$' : '€';
+            
+            return `
+                <div class="transfer-item">
+                    <div class="transfer-info">
+                        <div class="transfer-header">
+                            <span class="transfer-account">${transfer.account_name}</span>
+                            <span class="transfer-type ${transfer.transfer_type}">${transfer.transfer_type}</span>
+                        </div>
+                        <div class="transfer-details">
+                            <span class="transfer-date">${transferDate}</span>
+                            ${transfer.description ? `<span class="transfer-description">${transfer.description}</span>` : ''}
+                        </div>
+                    </div>
+                    <div class="transfer-amount ${transfer.transfer_type}">
+                        ${currencySymbol}${amount.toFixed(2)}
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    async populateTransferAccounts() {
+        try {
+            const response = await fetch(`${this.apiUrl}/cash-accounts`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const accounts = await response.json();
+                const accountSelect = document.getElementById('transfer-account');
+                
+                // Clear existing options except the first one
+                accountSelect.innerHTML = '<option value="">Select Account</option>';
+                
+                // Add active accounts
+                const activeAccounts = accounts.filter(account => account.is_active);
+                activeAccounts.forEach(account => {
+                    const currencySymbol = account.currency === 'USD' ? '$' : '€';
+                    const option = document.createElement('option');
+                    option.value = account.id;
+                    option.textContent = `${account.account_name} (${currencySymbol}${parseFloat(account.balance).toFixed(2)})`;
+                    accountSelect.appendChild(option);
+                });
+            }
+        } catch (error) {
+            console.error('Error loading accounts for transfer:', error);
+        }
+    }
+
+    bindTransferEvents() {
+        const addTransferBtn = document.getElementById('add-transfer-btn');
+        const transferModal = document.getElementById('transfer-modal');
+        const transferForm = document.getElementById('transfer-form');
+        const cancelTransferBtn = document.getElementById('cancel-transfer');
+
+        // Remove existing listeners
+        addTransferBtn.removeEventListener('click', this.handleShowTransferModal);
+        transferForm.removeEventListener('submit', this.handleCreateTransfer);
+        cancelTransferBtn.removeEventListener('click', this.handleCancelTransfer);
+
+        // Add transfer button
+        this.handleShowTransferModal = async () => {
+            await this.populateTransferAccounts();
+            // Set today's date as default
+            document.getElementById('transfer-date').value = new Date().toISOString().split('T')[0];
+            transferModal.style.display = 'flex';
+        };
+
+        // Create transfer form
+        this.handleCreateTransfer = async (e) => {
+            e.preventDefault();
+            
+            const formData = {
+                account_id: parseInt(document.getElementById('transfer-account').value),
+                transfer_type: document.getElementById('transfer-type').value,
+                amount: parseFloat(document.getElementById('transfer-amount').value),
+                transfer_date: document.getElementById('transfer-date').value,
+                description: document.getElementById('transfer-description').value.trim()
+            };
+
+            try {
+                const response = await fetch(`${this.apiUrl}/cash-transfers`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify(formData)
+                });
+
+                const result = await response.json();
+
+                if (response.ok) {
+                    transferModal.style.display = 'none';
+                    transferForm.reset();
+                    await this.loadTransfers();
+                    await this.loadCashAccounts();
+                    await this.loadCashSummary();
+                    this.updateDashboard(); // Refresh dashboard cash data
+                    this.showNotification('Transfer added successfully!', 'success');
+                } else {
+                    this.showNotification(result.error || 'Failed to add transfer', 'error');
+                }
+            } catch (error) {
+                console.error('Error creating transfer:', error);
+                this.showNotification('Failed to add transfer', 'error');
+            }
+        };
+
+        // Cancel transfer
+        this.handleCancelTransfer = () => {
+            transferModal.style.display = 'none';
+            transferForm.reset();
+        };
+
+        // Bind events
+        addTransferBtn.addEventListener('click', this.handleShowTransferModal);
+        transferForm.addEventListener('submit', this.handleCreateTransfer);
+        cancelTransferBtn.addEventListener('click', this.handleCancelTransfer);
+
+        // Close modal when clicking outside
+        transferModal.addEventListener('click', (e) => {
+            if (e.target === transferModal) {
+                this.handleCancelTransfer();
+            }
+        });
+    }
+
+    // Standalone Add Transfer Page Methods
+    async renderAddTransferPage() {
+        await this.populateStandaloneTransferAccounts();
+        await this.loadStandaloneTransfers();
+        this.bindStandaloneTransferEvents();
+        
+        // Set today's date as default
+        document.getElementById('standalone-transfer-date').value = new Date().toISOString().split('T')[0];
+    }
+
+    async populateStandaloneTransferAccounts() {
+        try {
+            const response = await fetch(`${this.apiUrl}/cash-accounts`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const accounts = await response.json();
+                const accountSelect = document.getElementById('standalone-transfer-account');
+                
+                // Clear existing options except the first one
+                accountSelect.innerHTML = '<option value="">Select Account</option>';
+                
+                // Add active accounts
+                const activeAccounts = accounts.filter(account => account.is_active);
+                activeAccounts.forEach(account => {
+                    const currencySymbol = account.currency === 'USD' ? '$' : '€';
+                    const option = document.createElement('option');
+                    option.value = account.id;
+                    option.textContent = `${account.account_name} (${currencySymbol}${parseFloat(account.balance).toFixed(2)})`;
+                    accountSelect.appendChild(option);
+                });
+            }
+        } catch (error) {
+            console.error('Error loading accounts for transfer:', error);
+        }
+    }
+
+    async loadStandaloneTransfers() {
+        try {
+            const response = await fetch(`${this.apiUrl}/cash-transfers`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const transfers = await response.json();
+                this.renderStandaloneTransfersList(transfers);
+            } else {
+                this.showNotification('Failed to load transfers', 'error');
+            }
+        } catch (error) {
+            console.error('Error loading transfers:', error);
+            this.showNotification('Failed to load transfers', 'error');
+        }
+    }
+
+    renderStandaloneTransfersList(transfers) {
+        const transfersList = document.getElementById('standalone-transfers-list');
+        
+        if (!transfers || transfers.length === 0) {
+            transfersList.innerHTML = '<p class="no-data">No transfers found</p>';
+            return;
+        }
+
+        // Show only the last 10 transfers for the standalone page
+        const recentTransfers = transfers.slice(0, 10);
+        
+        transfersList.innerHTML = recentTransfers.map(transfer => {
+            const transferDate = new Date(transfer.transfer_date).toLocaleDateString();
+            const amount = parseFloat(transfer.amount);
+            const currencySymbol = transfer.currency === 'USD' ? '$' : '€';
+            
+            return `
+                <div class="transfer-item">
+                    <div class="transfer-info">
+                        <div class="transfer-header">
+                            <span class="transfer-account">${transfer.account_name}</span>
+                            <span class="transfer-type ${transfer.transfer_type}">${transfer.transfer_type}</span>
+                        </div>
+                        <div class="transfer-details">
+                            <span class="transfer-date">${transferDate}</span>
+                            ${transfer.description ? `<span class="transfer-description">${transfer.description}</span>` : ''}
+                        </div>
+                    </div>
+                    <div class="transfer-amount ${transfer.transfer_type}">
+                        ${currencySymbol}${amount.toFixed(2)}
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    bindStandaloneTransferEvents() {
+        const transferForm = document.getElementById('standalone-transfer-form');
+
+        // Remove existing listener
+        transferForm.removeEventListener('submit', this.handleStandaloneTransfer);
+
+        // Create transfer form handler
+        this.handleStandaloneTransfer = async (e) => {
+            e.preventDefault();
+            
+            const formData = {
+                account_id: parseInt(document.getElementById('standalone-transfer-account').value),
+                transfer_type: document.getElementById('standalone-transfer-type').value,
+                amount: parseFloat(document.getElementById('standalone-transfer-amount').value),
+                transfer_date: document.getElementById('standalone-transfer-date').value,
+                description: document.getElementById('standalone-transfer-description').value.trim()
+            };
+
+            try {
+                const response = await fetch(`${this.apiUrl}/cash-transfers`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify(formData)
+                });
+
+                const result = await response.json();
+
+                if (response.ok) {
+                    transferForm.reset();
+                    // Set today's date as default again
+                    document.getElementById('standalone-transfer-date').value = new Date().toISOString().split('T')[0];
+                    
+                    await this.loadStandaloneTransfers();
+                    await this.populateStandaloneTransferAccounts(); // Refresh account balances
+                    this.updateDashboard(); // Refresh dashboard cash data
+                    this.showNotification('Transfer added successfully!', 'success');
+                } else {
+                    this.showNotification(result.error || 'Failed to add transfer', 'error');
+                }
+            } catch (error) {
+                console.error('Error creating transfer:', error);
+                this.showNotification('Failed to add transfer', 'error');
+            }
+        };
+
+        // Bind form submission
+        transferForm.addEventListener('submit', this.handleStandaloneTransfer);
+    }
+
+    // Token Management Methods
+    async renderTokensPage() {
+        await this.loadTokens();
+        this.bindTokenEvents();
+    }
+
+    async loadTokens() {
+        try {
+            const response = await fetch(`${this.apiUrl}/tokens`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const tokens = await response.json();
+                this.renderTokensList(tokens);
+            } else {
+                this.showNotification('Failed to load tokens', 'error');
+            }
+        } catch (error) {
+            console.error('Error loading tokens:', error);
+            this.showNotification('Failed to load tokens', 'error');
+        }
+    }
+
+    renderTokensList(tokens) {
+        const tokensList = document.getElementById('tokens-list');
+        
+        if (!tokens || tokens.length === 0) {
+            tokensList.innerHTML = '<p class="no-data">No access tokens found. Create your first token above.</p>';
+            return;
+        }
+
+        tokensList.innerHTML = tokens.map(token => {
+            const createdDate = new Date(token.created_at).toLocaleDateString();
+            const lastUsed = token.last_used_at ? new Date(token.last_used_at).toLocaleDateString() : 'Never';
+            const expiresAt = token.expires_at ? new Date(token.expires_at).toLocaleDateString() : 'Never';
+            const isExpired = token.expires_at && new Date(token.expires_at) < new Date();
+            
+            return `
+                <div class="token-item" data-token-id="${token.id}">
+                    <div class="token-info">
+                        <div class="token-name">${this.escapeHtml(token.token_name)}</div>
+                        <div class="token-details">
+                            <div class="token-detail">
+                                <span>Token:</span>
+                                <span class="token-prefix">${token.token_prefix}•••••••</span>
+                            </div>
+                            <div class="token-detail">
+                                <span>Scopes:</span>
+                                <span>${token.scopes}</span>
+                            </div>
+                            <div class="token-detail">
+                                <span>Created:</span>
+                                <span>${createdDate}</span>
+                            </div>
+                            <div class="token-detail">
+                                <span>Last used:</span>
+                                <span>${lastUsed}</span>
+                            </div>
+                            <div class="token-detail">
+                                <span>Expires:</span>
+                                <span>${expiresAt}</span>
+                            </div>
+                            <div class="token-detail">
+                                <span class="token-status ${isExpired ? 'expired' : 'active'}">
+                                    ${isExpired ? 'Expired' : 'Active'}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="token-actions-buttons">
+                        <button class="token-edit-btn" data-token-id="${token.id}">Edit</button>
+                        <button class="token-delete-btn" data-token-id="${token.id}">Delete</button>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    bindTokenEvents() {
+        const createTokenForm = document.getElementById('create-token-form');
+        const copyTokenBtn = document.getElementById('copy-token-btn');
+        const closeModalBtn = document.getElementById('close-token-modal');
+        const tokenModal = document.getElementById('token-modal');
+
+        // Remove existing listeners
+        createTokenForm.removeEventListener('submit', this.handleCreateToken);
+        copyTokenBtn.removeEventListener('click', this.handleCopyToken);
+        closeModalBtn.removeEventListener('click', this.handleCloseTokenModal);
+
+        // Create token form
+        this.handleCreateToken = async (e) => {
+            e.preventDefault();
+            
+            const formData = {
+                name: document.getElementById('token-name').value.trim(),
+                expires_in_days: document.getElementById('token-expires').value || null,
+                scopes: document.getElementById('token-scopes').value
+            };
+
+            try {
+                const response = await fetch(`${this.apiUrl}/tokens`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify(formData)
+                });
+
+                const result = await response.json();
+
+                if (response.ok) {
+                    document.getElementById('new-token-value').value = result.token;
+                    tokenModal.style.display = 'flex';
+                    createTokenForm.reset();
+                    await this.loadTokens();
+                    this.showNotification('Token created successfully!', 'success');
+                } else {
+                    this.showNotification(result.error || 'Failed to create token', 'error');
+                }
+            } catch (error) {
+                console.error('Error creating token:', error);
+                this.showNotification('Failed to create token', 'error');
+            }
+        };
+
+        // Copy token to clipboard
+        this.handleCopyToken = async () => {
+            const tokenInput = document.getElementById('new-token-value');
+            try {
+                await navigator.clipboard.writeText(tokenInput.value);
+                copyTokenBtn.textContent = 'Copied!';
+                copyTokenBtn.classList.add('copied');
+                setTimeout(() => {
+                    copyTokenBtn.textContent = 'Copy';
+                    copyTokenBtn.classList.remove('copied');
+                }, 2000);
+            } catch (error) {
+                // Fallback for older browsers
+                tokenInput.select();
+                document.execCommand('copy');
+                copyTokenBtn.textContent = 'Copied!';
+                copyTokenBtn.classList.add('copied');
+                setTimeout(() => {
+                    copyTokenBtn.textContent = 'Copy';
+                    copyTokenBtn.classList.remove('copied');
+                }, 2000);
+            }
+        };
+
+        // Close modal
+        this.handleCloseTokenModal = () => {
+            tokenModal.style.display = 'none';
+            document.getElementById('new-token-value').value = '';
+        };
+
+        // Bind events
+        createTokenForm.addEventListener('submit', this.handleCreateToken);
+        copyTokenBtn.addEventListener('click', this.handleCopyToken);
+        closeModalBtn.addEventListener('click', this.handleCloseTokenModal);
+
+        // Bind token action buttons
+        document.querySelectorAll('.token-delete-btn').forEach(btn => {
+            btn.addEventListener('click', this.handleDeleteToken.bind(this));
+        });
+
+        document.querySelectorAll('.token-edit-btn').forEach(btn => {
+            btn.addEventListener('click', this.handleEditToken.bind(this));
+        });
+
+        // Close modal on backdrop click
+        tokenModal.addEventListener('click', (e) => {
+            if (e.target === tokenModal) {
+                this.handleCloseTokenModal();
+            }
+        });
+    }
+
+    async handleDeleteToken(e) {
+        const tokenId = e.target.getAttribute('data-token-id');
+        const tokenName = e.target.closest('.token-item').querySelector('.token-name').textContent;
+        
+        if (!confirm(`Are you sure you want to delete the token "${tokenName}"? This action cannot be undone.`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`${this.apiUrl}/tokens/${tokenId}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                await this.loadTokens();
+                this.showNotification('Token deleted successfully', 'success');
+            } else {
+                const result = await response.json();
+                this.showNotification(result.error || 'Failed to delete token', 'error');
+            }
+        } catch (error) {
+            console.error('Error deleting token:', error);
+            this.showNotification('Failed to delete token', 'error');
+        }
+    }
+
+    async handleEditToken(e) {
+        const tokenId = e.target.getAttribute('data-token-id');
+        const tokenItem = e.target.closest('.token-item');
+        const tokenName = tokenItem.querySelector('.token-name').textContent;
+        
+        const newName = prompt('Enter new token name:', tokenName);
+        if (!newName || newName.trim() === tokenName) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`${this.apiUrl}/tokens/${tokenId}`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({ name: newName.trim() })
+            });
+
+            if (response.ok) {
+                await this.loadTokens();
+                this.showNotification('Token updated successfully', 'success');
+            } else {
+                const result = await response.json();
+                this.showNotification(result.error || 'Failed to update token', 'error');
+            }
+        } catch (error) {
+            console.error('Error updating token:', error);
+            this.showNotification('Failed to update token', 'error');
+        }
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
 }
 
 const app = new ETFTradeTracker();
\ No newline at end of file
diff --git a/server.js b/server.js
index f5d5d00..81abf1d 100644
--- a/server.js
+++ b/server.js
@@ -4,6 +4,7 @@ const cors = require('cors');
 const path = require('path');
 const session = require('express-session');
 const bcrypt = require('bcrypt');
+const crypto = require('crypto');
 const fs = require('fs');
 
 const app = express();
@@ -88,6 +89,35 @@ function initializeDatabase() {
             console.error('Error creating trades table:', err.message);
         } else {
             console.log('Trades table ready');
+            
+            // Check if user_id column exists, if not add it (for existing databases)
+            db.all("PRAGMA table_info(trades)", (err, columns) => {
+                if (err) {
+                    console.error('Error checking trades table structure:', err.message);
+                    return;
+                }
+                
+                const hasUserId = columns.some(col => col.name === 'user_id');
+                if (!hasUserId) {
+                    console.log('Adding user_id column to existing trades table...');
+                    db.run("ALTER TABLE trades ADD COLUMN user_id INTEGER DEFAULT 1", (err) => {
+                        if (err) {
+                            console.error('Error adding user_id column:', err.message);
+                        } else {
+                            console.log('user_id column added to trades table');
+                            
+                            // Update all existing trades to belong to user 1 (admin)
+                            db.run("UPDATE trades SET user_id = 1 WHERE user_id IS NULL", (err) => {
+                                if (err) {
+                                    console.error('Error updating existing trades:', err.message);
+                                } else {
+                                    console.log('Existing trades updated with user_id');
+                                }
+                            });
+                        }
+                    });
+                }
+            });
         }
     });
 
@@ -101,6 +131,7 @@ function initializeDatabase() {
             rate_1year REAL DEFAULT 30.0,
             rate_2years REAL DEFAULT 20.0,
             rate_longterm REAL DEFAULT 10.0,
+            rate_8years REAL DEFAULT 33.0,
             annual_exemption REAL DEFAULT 1270.0,
             enabled BOOLEAN DEFAULT 1,
             updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
@@ -116,6 +147,81 @@ function initializeDatabase() {
             console.log('CGT settings table ready');
         }
     });
+
+    // Create access tokens table
+    const createAccessTokensTableSQL = `
+        CREATE TABLE IF NOT EXISTS access_tokens (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            user_id INTEGER NOT NULL,
+            token_name TEXT NOT NULL,
+            token_hash TEXT NOT NULL,
+            token_prefix TEXT NOT NULL,
+            scopes TEXT DEFAULT 'read,write',
+            last_used_at DATETIME,
+            expires_at DATETIME,
+            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE
+        )
+    `;
+    
+    db.run(createAccessTokensTableSQL, (err) => {
+        if (err) {
+            console.error('Error creating access tokens table:', err.message);
+        } else {
+            console.log('Access tokens table ready');
+        }
+    });
+
+    // Create cash accounts table
+    const createCashAccountsTableSQL = `
+        CREATE TABLE IF NOT EXISTS cash_accounts (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            user_id INTEGER NOT NULL,
+            account_name TEXT NOT NULL,
+            account_type TEXT DEFAULT 'savings' CHECK (account_type IN ('savings', 'checking', 'money_market', 'cd', 'other')),
+            balance REAL NOT NULL DEFAULT 0 CHECK (balance >= 0),
+            currency TEXT NOT NULL DEFAULT 'EUR' CHECK (currency IN ('EUR', 'USD')),
+            institution_name TEXT,
+            interest_rate REAL DEFAULT 0 CHECK (interest_rate >= 0),
+            notes TEXT,
+            is_active BOOLEAN DEFAULT 1,
+            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE
+        )
+    `;
+    
+    // Create cash transfers table
+    const createCashTransfersTableSQL = `
+        CREATE TABLE IF NOT EXISTS cash_transfers (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            user_id INTEGER NOT NULL,
+            account_id INTEGER NOT NULL,
+            transfer_type TEXT NOT NULL CHECK (transfer_type IN ('deposit', 'withdrawal')),
+            amount REAL NOT NULL CHECK (amount > 0),
+            description TEXT,
+            transfer_date DATE NOT NULL,
+            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE,
+            FOREIGN KEY (account_id) REFERENCES cash_accounts (id) ON DELETE CASCADE
+        )
+    `;
+    
+    db.run(createCashAccountsTableSQL, (err) => {
+        if (err) {
+            console.error('Error creating cash accounts table:', err.message);
+        } else {
+            console.log('Cash accounts table ready');
+        }
+    });
+    
+    db.run(createCashTransfersTableSQL, (err) => {
+        if (err) {
+            console.error('Error creating cash transfers table:', err.message);
+        } else {
+            console.log('Cash transfers table ready');
+        }
+    });
 }
 
 async function createDefaultAdmin() {
@@ -167,6 +273,72 @@ function requireAdmin(req, res, next) {
     }
 }
 
+// Middleware for token-based authentication
+async function authenticateToken(req, res, next) {
+    const authHeader = req.headers['authorization'];
+    const token = authHeader && authHeader.startsWith('Bearer ') ? authHeader.slice(7) : null;
+
+    if (!token) {
+        return res.status(401).json({ error: 'Access token required' });
+    }
+
+    // Extract token prefix (first 8 characters)
+    const tokenPrefix = token.substring(0, 8);
+    const tokenHash = crypto.createHash('sha256').update(token).digest('hex');
+
+    try {
+        const sql = `
+            SELECT at.*, u.username, u.is_admin 
+            FROM access_tokens at 
+            JOIN users u ON at.user_id = u.id 
+            WHERE at.token_prefix = ? AND at.token_hash = ?
+        `;
+
+        db.get(sql, [tokenPrefix, tokenHash], (err, row) => {
+            if (err) {
+                console.error('Token authentication error:', err);
+                return res.status(500).json({ error: 'Authentication error' });
+            }
+
+            if (!row) {
+                return res.status(401).json({ error: 'Invalid access token' });
+            }
+
+            // Check if token is expired
+            if (row.expires_at && new Date() > new Date(row.expires_at)) {
+                return res.status(401).json({ error: 'Access token expired' });
+            }
+
+            // Update last used timestamp
+            db.run('UPDATE access_tokens SET last_used_at = CURRENT_TIMESTAMP WHERE id = ?', [row.id]);
+
+            // Set user info for downstream middleware
+            req.session = req.session || {};
+            req.session.userId = row.user_id;
+            req.session.username = row.username;
+            req.session.isAdmin = row.is_admin === 1;
+            req.tokenAuth = true;
+            req.tokenScopes = row.scopes ? row.scopes.split(',') : ['read', 'write'];
+
+            next();
+        });
+    } catch (error) {
+        console.error('Token authentication error:', error);
+        res.status(500).json({ error: 'Authentication error' });
+    }
+}
+
+// Combined authentication middleware (session or token)
+function requireAuthOrToken(req, res, next) {
+    // Check for token authentication first
+    if (req.headers['authorization']) {
+        return authenticateToken(req, res, next);
+    }
+    
+    // Fall back to session authentication
+    return requireAuth(req, res, next);
+}
+
 // Authentication endpoints
 app.post('/api/login', async (req, res) => {
     const { username, password } = req.body;
@@ -220,7 +392,7 @@ app.post('/api/logout', (req, res) => {
     });
 });
 
-app.get('/api/me', requireAuth, (req, res) => {
+app.get('/api/me', requireAuthOrToken, (req, res) => {
     res.json({
         id: req.session.userId,
         username: req.session.username,
@@ -306,7 +478,450 @@ app.delete('/api/admin/users/:id', requireAdmin, (req, res) => {
     });
 });
 
-app.get('/api/trades', requireAuth, (req, res) => {
+// Access Token Management endpoints
+app.get('/api/tokens', requireAuthOrToken, (req, res) => {
+    const sql = `
+        SELECT id, token_name, token_prefix, scopes, last_used_at, expires_at, created_at
+        FROM access_tokens 
+        WHERE user_id = ?
+        ORDER BY created_at DESC
+    `;
+
+    db.all(sql, [req.session.userId], (err, rows) => {
+        if (err) {
+            console.error('Error fetching tokens:', err.message);
+            res.status(500).json({ error: 'Failed to fetch access tokens' });
+            return;
+        }
+
+        res.json(rows || []);
+    });
+});
+
+app.post('/api/tokens', requireAuthOrToken, (req, res) => {
+    const { name, expires_in_days = null, scopes = 'read,write' } = req.body;
+
+    if (!name || name.trim().length === 0) {
+        return res.status(400).json({ error: 'Token name is required' });
+    }
+
+    if (name.length > 50) {
+        return res.status(400).json({ error: 'Token name must be 50 characters or less' });
+    }
+
+    // Generate a secure token (32 bytes = 64 hex characters)
+    const token = crypto.randomBytes(32).toString('hex');
+    const tokenPrefix = token.substring(0, 8);
+    const tokenHash = crypto.createHash('sha256').update(token).digest('hex');
+
+    // Calculate expiration date
+    const expiresAt = expires_in_days ? new Date(Date.now() + expires_in_days * 24 * 60 * 60 * 1000) : null;
+
+    const sql = `
+        INSERT INTO access_tokens (user_id, token_name, token_hash, token_prefix, scopes, expires_at)
+        VALUES (?, ?, ?, ?, ?, ?)
+    `;
+
+    db.run(sql, [req.session.userId, name.trim(), tokenHash, tokenPrefix, scopes, expiresAt], function(err) {
+        if (err) {
+            console.error('Error creating access token:', err.message);
+            res.status(500).json({ error: 'Failed to create access token' });
+            return;
+        }
+
+        res.status(201).json({
+            message: 'Access token created successfully',
+            token_id: this.lastID,
+            token: token, // Only returned once
+            token_name: name.trim(),
+            scopes: scopes,
+            expires_at: expiresAt
+        });
+    });
+});
+
+app.delete('/api/tokens/:id', requireAuthOrToken, (req, res) => {
+    const tokenId = req.params.id;
+
+    if (!tokenId || isNaN(tokenId)) {
+        return res.status(400).json({ error: 'Invalid token ID' });
+    }
+
+    const sql = 'DELETE FROM access_tokens WHERE id = ? AND user_id = ?';
+
+    db.run(sql, [tokenId, req.session.userId], function(err) {
+        if (err) {
+            console.error('Error deleting access token:', err.message);
+            res.status(500).json({ error: 'Failed to delete access token' });
+            return;
+        }
+
+        if (this.changes === 0) {
+            res.status(404).json({ error: 'Access token not found' });
+            return;
+        }
+
+        res.json({ message: 'Access token deleted successfully' });
+    });
+});
+
+app.patch('/api/tokens/:id', requireAuthOrToken, (req, res) => {
+    const tokenId = req.params.id;
+    const { name } = req.body;
+
+    if (!tokenId || isNaN(tokenId)) {
+        return res.status(400).json({ error: 'Invalid token ID' });
+    }
+
+    if (!name || name.trim().length === 0) {
+        return res.status(400).json({ error: 'Token name is required' });
+    }
+
+    if (name.length > 50) {
+        return res.status(400).json({ error: 'Token name must be 50 characters or less' });
+    }
+
+    const sql = 'UPDATE access_tokens SET token_name = ? WHERE id = ? AND user_id = ?';
+
+    db.run(sql, [name.trim(), tokenId, req.session.userId], function(err) {
+        if (err) {
+            console.error('Error updating access token:', err.message);
+            res.status(500).json({ error: 'Failed to update access token' });
+            return;
+        }
+
+        if (this.changes === 0) {
+            res.status(404).json({ error: 'Access token not found' });
+            return;
+        }
+
+        res.json({ message: 'Access token updated successfully' });
+    });
+});
+
+// Cash Accounts Management endpoints
+app.get('/api/cash-accounts', requireAuthOrToken, (req, res) => {
+    const sql = `
+        SELECT id, account_name, account_type, balance, currency, institution_name, 
+               interest_rate, notes, is_active, created_at, updated_at
+        FROM cash_accounts 
+        WHERE user_id = ? AND is_active = 1
+        ORDER BY account_name ASC
+    `;
+
+    db.all(sql, [req.session.userId], (err, rows) => {
+        if (err) {
+            console.error('Error fetching cash accounts:', err.message);
+            res.status(500).json({ error: 'Failed to fetch cash accounts' });
+            return;
+        }
+
+        res.json(rows || []);
+    });
+});
+
+app.post('/api/cash-accounts', requireAuthOrToken, (req, res) => {
+    const {
+        account_name,
+        account_type = 'savings',
+        balance = 0,
+        currency = 'EUR',
+        institution_name = '',
+        interest_rate = 0,
+        notes = ''
+    } = req.body;
+
+    if (!account_name || account_name.trim().length === 0) {
+        return res.status(400).json({ error: 'Account name is required' });
+    }
+
+    if (account_name.length > 100) {
+        return res.status(400).json({ error: 'Account name must be 100 characters or less' });
+    }
+
+    if (balance < 0) {
+        return res.status(400).json({ error: 'Balance cannot be negative' });
+    }
+
+    if (interest_rate < 0) {
+        return res.status(400).json({ error: 'Interest rate cannot be negative' });
+    }
+
+    const sql = `
+        INSERT INTO cash_accounts (
+            user_id, account_name, account_type, balance, currency, 
+            institution_name, interest_rate, notes
+        )
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `;
+
+    db.run(sql, [
+        req.session.userId,
+        account_name.trim(),
+        account_type,
+        parseFloat(balance),
+        currency,
+        institution_name.trim(),
+        parseFloat(interest_rate),
+        notes.trim()
+    ], function(err) {
+        if (err) {
+            console.error('Error creating cash account:', err.message);
+            res.status(500).json({ error: 'Failed to create cash account' });
+            return;
+        }
+
+        res.status(201).json({
+            message: 'Cash account created successfully',
+            account_id: this.lastID,
+            account_name: account_name.trim(),
+            account_type,
+            balance: parseFloat(balance),
+            currency
+        });
+    });
+});
+
+app.put('/api/cash-accounts/:id', requireAuthOrToken, (req, res) => {
+    const accountId = req.params.id;
+    const {
+        account_name,
+        account_type,
+        balance,
+        currency,
+        institution_name = '',
+        interest_rate = 0,
+        notes = ''
+    } = req.body;
+
+    if (!accountId || isNaN(accountId)) {
+        return res.status(400).json({ error: 'Invalid account ID' });
+    }
+
+    if (!account_name || account_name.trim().length === 0) {
+        return res.status(400).json({ error: 'Account name is required' });
+    }
+
+    if (account_name.length > 100) {
+        return res.status(400).json({ error: 'Account name must be 100 characters or less' });
+    }
+
+    if (balance < 0) {
+        return res.status(400).json({ error: 'Balance cannot be negative' });
+    }
+
+    if (interest_rate < 0) {
+        return res.status(400).json({ error: 'Interest rate cannot be negative' });
+    }
+
+    const sql = `
+        UPDATE cash_accounts 
+        SET account_name = ?, account_type = ?, balance = ?, currency = ?, 
+            institution_name = ?, interest_rate = ?, notes = ?, updated_at = CURRENT_TIMESTAMP
+        WHERE id = ? AND user_id = ?
+    `;
+
+    db.run(sql, [
+        account_name.trim(),
+        account_type,
+        parseFloat(balance),
+        currency,
+        institution_name.trim(),
+        parseFloat(interest_rate),
+        notes.trim(),
+        accountId,
+        req.session.userId
+    ], function(err) {
+        if (err) {
+            console.error('Error updating cash account:', err.message);
+            res.status(500).json({ error: 'Failed to update cash account' });
+            return;
+        }
+
+        if (this.changes === 0) {
+            res.status(404).json({ error: 'Cash account not found' });
+            return;
+        }
+
+        res.json({ message: 'Cash account updated successfully' });
+    });
+});
+
+app.delete('/api/cash-accounts/:id', requireAuthOrToken, (req, res) => {
+    const accountId = req.params.id;
+
+    if (!accountId || isNaN(accountId)) {
+        return res.status(400).json({ error: 'Invalid account ID' });
+    }
+
+    const sql = 'UPDATE cash_accounts SET is_active = 0 WHERE id = ? AND user_id = ?';
+
+    db.run(sql, [accountId, req.session.userId], function(err) {
+        if (err) {
+            console.error('Error deleting cash account:', err.message);
+            res.status(500).json({ error: 'Failed to delete cash account' });
+            return;
+        }
+
+        if (this.changes === 0) {
+            res.status(404).json({ error: 'Cash account not found' });
+            return;
+        }
+
+        res.json({ message: 'Cash account deleted successfully' });
+    });
+});
+
+app.get('/api/cash-summary', requireAuthOrToken, (req, res) => {
+    const sql = `
+        SELECT 
+            SUM(CASE WHEN currency = 'EUR' THEN balance ELSE 0 END) as total_eur,
+            SUM(CASE WHEN currency = 'USD' THEN balance ELSE 0 END) as total_usd,
+            COUNT(*) as account_count,
+            AVG(CASE WHEN interest_rate > 0 THEN interest_rate ELSE NULL END) as avg_interest_rate
+        FROM cash_accounts 
+        WHERE user_id = ? AND is_active = 1
+    `;
+
+    db.get(sql, [req.session.userId], (err, row) => {
+        if (err) {
+            console.error('Error fetching cash summary:', err.message);
+            res.status(500).json({ error: 'Failed to fetch cash summary' });
+            return;
+        }
+
+        res.json({
+            total_eur: row.total_eur || 0,
+            total_usd: row.total_usd || 0,
+            account_count: row.account_count || 0,
+            avg_interest_rate: row.avg_interest_rate || 0
+        });
+    });
+});
+
+// Cash Transfers API endpoints
+app.post('/api/cash-transfers', requireAuthOrToken, (req, res) => {
+    const {
+        account_id,
+        transfer_type,
+        amount,
+        description = '',
+        transfer_date
+    } = req.body;
+
+    if (!account_id || !transfer_type || !amount || !transfer_date) {
+        return res.status(400).json({ error: 'Missing required fields' });
+    }
+
+    if (!['deposit', 'withdrawal'].includes(transfer_type)) {
+        return res.status(400).json({ error: 'Invalid transfer type' });
+    }
+
+    if (amount <= 0) {
+        return res.status(400).json({ error: 'Amount must be greater than 0' });
+    }
+
+    // First check if account belongs to user
+    db.get('SELECT * FROM cash_accounts WHERE id = ? AND user_id = ? AND is_active = 1', 
+        [account_id, req.session.userId], 
+        (err, account) => {
+            if (err) {
+                console.error('Error checking account:', err.message);
+                return res.status(500).json({ error: 'Failed to verify account' });
+            }
+
+            if (!account) {
+                return res.status(404).json({ error: 'Account not found' });
+            }
+
+            // For withdrawals, check if sufficient balance
+            if (transfer_type === 'withdrawal' && account.balance < amount) {
+                return res.status(400).json({ error: 'Insufficient balance' });
+            }
+
+            // Begin transaction
+            db.serialize(() => {
+                db.run('BEGIN TRANSACTION');
+
+                // Insert transfer record
+                const insertTransferSQL = `
+                    INSERT INTO cash_transfers (user_id, account_id, transfer_type, amount, description, transfer_date)
+                    VALUES (?, ?, ?, ?, ?, ?)
+                `;
+
+                db.run(insertTransferSQL, [req.session.userId, account_id, transfer_type, amount, description, transfer_date], 
+                    function(err) {
+                        if (err) {
+                            console.error('Error inserting transfer:', err.message);
+                            db.run('ROLLBACK');
+                            return res.status(500).json({ error: 'Failed to create transfer' });
+                        }
+
+                        const transferId = this.lastID;
+
+                        // Update account balance
+                        const balanceChange = transfer_type === 'deposit' ? amount : -amount;
+                        const updateBalanceSQL = `
+                            UPDATE cash_accounts 
+                            SET balance = balance + ?, updated_at = CURRENT_TIMESTAMP 
+                            WHERE id = ? AND user_id = ?
+                        `;
+
+                        db.run(updateBalanceSQL, [balanceChange, account_id, req.session.userId], 
+                            function(err) {
+                                if (err) {
+                                    console.error('Error updating balance:', err.message);
+                                    db.run('ROLLBACK');
+                                    return res.status(500).json({ error: 'Failed to update balance' });
+                                }
+
+                                db.run('COMMIT');
+
+                                res.json({
+                                    id: transferId,
+                                    account_id,
+                                    transfer_type,
+                                    amount,
+                                    description,
+                                    transfer_date,
+                                    message: 'Transfer created successfully'
+                                });
+                            });
+                    });
+            });
+        });
+});
+
+app.get('/api/cash-transfers', requireAuthOrToken, (req, res) => {
+    const { account_id } = req.query;
+    
+    let sql = `
+        SELECT ct.*, ca.account_name, ca.currency
+        FROM cash_transfers ct
+        JOIN cash_accounts ca ON ct.account_id = ca.id
+        WHERE ct.user_id = ?
+    `;
+    const params = [req.session.userId];
+    
+    if (account_id) {
+        sql += ' AND ct.account_id = ?';
+        params.push(account_id);
+    }
+    
+    sql += ' ORDER BY ct.transfer_date DESC, ct.created_at DESC';
+
+    db.all(sql, params, (err, rows) => {
+        if (err) {
+            console.error('Error fetching transfers:', err.message);
+            res.status(500).json({ error: 'Failed to fetch transfers' });
+            return;
+        }
+
+        res.json(rows);
+    });
+});
+
+app.get('/api/trades', requireAuthOrToken, (req, res) => {
     const sql = 'SELECT * FROM trades WHERE user_id = ? ORDER BY trade_datetime DESC, created_at DESC';
     
     db.all(sql, [req.session.userId], (err, rows) => {
@@ -334,7 +949,7 @@ app.get('/api/trades', requireAuth, (req, res) => {
     });
 });
 
-app.post('/api/trades', requireAuth, (req, res) => {
+app.post('/api/trades', requireAuthOrToken, (req, res) => {
     const {
         etfSymbol,
         tradeType,
@@ -407,7 +1022,7 @@ app.post('/api/trades', requireAuth, (req, res) => {
     });
 });
 
-app.delete('/api/trades/:id', requireAuth, (req, res) => {
+app.delete('/api/trades/:id', requireAuthOrToken, (req, res) => {
     const tradeId = req.params.id;
 
     if (!tradeId || isNaN(tradeId)) {
@@ -432,7 +1047,7 @@ app.delete('/api/trades/:id', requireAuth, (req, res) => {
     });
 });
 
-app.delete('/api/trades', requireAuth, (req, res) => {
+app.delete('/api/trades', requireAuthOrToken, (req, res) => {
     const sql = 'DELETE FROM trades WHERE user_id = ?';
 
     db.run(sql, [req.session.userId], function(err) {
@@ -450,7 +1065,7 @@ app.delete('/api/trades', requireAuth, (req, res) => {
 });
 
 // CGT Settings endpoints
-app.get('/api/cgt-settings', requireAuth, (req, res) => {
+app.get('/api/cgt-settings', requireAuthOrToken, (req, res) => {
     const sql = 'SELECT * FROM cgt_settings WHERE user_id = ?';
     
     db.get(sql, [req.session.userId], (err, row) => {
@@ -468,6 +1083,7 @@ app.get('/api/cgt-settings', requireAuth, (req, res) => {
                 rate_1year: 30.0,
                 rate_2years: 20.0,
                 rate_longterm: 10.0,
+                rate_8years: 33.0,
                 annual_exemption: 1270.0,
                 enabled: true
             });
@@ -480,25 +1096,27 @@ app.get('/api/cgt-settings', requireAuth, (req, res) => {
             rate_1year: row.rate_1year,
             rate_2years: row.rate_2years,
             rate_longterm: row.rate_longterm,
+            rate_8years: row.rate_8years,
             annual_exemption: row.annual_exemption,
             enabled: row.enabled === 1
         });
     });
 });
 
-app.post('/api/cgt-settings', requireAuth, (req, res) => {
+app.post('/api/cgt-settings', requireAuthOrToken, (req, res) => {
     const {
         rate_1month = 40.0,
         rate_6months = 35.0,
         rate_1year = 30.0,
         rate_2years = 20.0,
         rate_longterm = 10.0,
+        rate_8years = 33.0,
         annual_exemption = 1270.0,
         enabled = true
     } = req.body;
 
     // Validate rates are between 0 and 100
-    const rates = [rate_1month, rate_6months, rate_1year, rate_2years, rate_longterm];
+    const rates = [rate_1month, rate_6months, rate_1year, rate_2years, rate_longterm, rate_8years];
     if (rates.some(rate => rate < 0 || rate > 100)) {
         return res.status(400).json({ error: 'CGT rates must be between 0 and 100' });
     }
@@ -509,8 +1127,8 @@ app.post('/api/cgt-settings', requireAuth, (req, res) => {
 
     const sql = `
         INSERT OR REPLACE INTO cgt_settings 
-        (user_id, rate_1month, rate_6months, rate_1year, rate_2years, rate_longterm, annual_exemption, enabled, updated_at)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
+        (user_id, rate_1month, rate_6months, rate_1year, rate_2years, rate_longterm, rate_8years, annual_exemption, enabled, updated_at)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
     `;
 
     const params = [
@@ -520,6 +1138,7 @@ app.post('/api/cgt-settings', requireAuth, (req, res) => {
         rate_1year,
         rate_2years,
         rate_longterm,
+        rate_8years,
         annual_exemption,
         enabled ? 1 : 0
     ];
@@ -539,6 +1158,7 @@ app.post('/api/cgt-settings', requireAuth, (req, res) => {
                 rate_1year,
                 rate_2years,
                 rate_longterm,
+                rate_8years,
                 annual_exemption,
                 enabled
             }
@@ -546,7 +1166,7 @@ app.post('/api/cgt-settings', requireAuth, (req, res) => {
     });
 });
 
-app.get('/api/portfolio-summary', requireAuth, (req, res) => {
+app.get('/api/portfolio-summary', requireAuthOrToken, (req, res) => {
     const sql = `
         SELECT 
             etf_symbol,
diff --git a/styles.css b/styles.css
index 7a87f72..939ea05 100644
--- a/styles.css
+++ b/styles.css
@@ -535,6 +535,94 @@ body {
     border-left-color: #dc3545;
 }
 
+/* Total Holdings Card Styles */
+.total-holdings-section {
+    margin: 20px 0;
+}
+
+.total-holdings-card {
+    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
+    padding: 25px;
+    border-radius: 15px;
+    border-left: 4px solid #f39c12;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.total-holdings-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.total-holdings-card h3 {
+    margin: 0 0 20px 0;
+    font-size: 1.3rem;
+    color: #e67e22;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    text-align: center;
+    border-bottom: 2px solid #f39c12;
+    padding-bottom: 10px;
+}
+
+.holdings-breakdown {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.holdings-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+}
+
+.holdings-label {
+    font-size: 14px;
+    color: #6c757d;
+    font-weight: 500;
+}
+
+.holdings-value {
+    font-size: 16px;
+    font-weight: 600;
+    color: #e67e22;
+}
+
+.holdings-divider {
+    height: 2px;
+    background: linear-gradient(90deg, #f39c12 0%, #e67e22 100%);
+    margin: 10px 0;
+    border-radius: 1px;
+}
+
+.holdings-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    background: rgba(243, 156, 18, 0.1);
+    border-radius: 8px;
+    padding: 15px 20px;
+    margin-top: 5px;
+}
+
+.holdings-total .holdings-label {
+    font-size: 16px;
+    font-weight: 600;
+    color: #d35400;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.holdings-total .holdings-value.total {
+    font-size: 20px;
+    font-weight: 700;
+    color: #d35400;
+}
+
 .etf-breakdown {
     margin-top: 20px;
 }
@@ -1798,4 +1886,895 @@ body {
 .long-term-stat span:last-child {
     font-weight: 600;
     color: #333;
+}
+
+/* ===========================================
+   API Tokens Styles
+   =========================================== */
+.tokens-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.tokens-intro {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+    border-left: 4px solid #007bff;
+}
+
+.tokens-intro p {
+    margin: 0;
+    color: #555;
+    font-size: 0.95em;
+    line-height: 1.5;
+}
+
+.token-actions {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin-bottom: 30px;
+}
+
+.create-token-form .form-row {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.create-token-form .form-group {
+    flex: 1;
+}
+
+.create-token-form label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #333;
+}
+
+.create-token-form input,
+.create-token-form select {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #e1e5e9;
+    border-radius: 6px;
+    font-size: 14px;
+    transition: border-color 0.2s;
+}
+
+.create-token-form input:focus,
+.create-token-form select:focus {
+    outline: none;
+    border-color: #007bff;
+}
+
+.create-token-btn {
+    background: #007bff;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.create-token-btn:hover {
+    background: #0056b3;
+}
+
+.tokens-list-section {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.tokens-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.token-item {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 4px solid #28a745;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.token-info {
+    flex: 1;
+}
+
+.token-name {
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+    font-size: 16px;
+}
+
+.token-details {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    font-size: 13px;
+    color: #666;
+}
+
+.token-detail {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.token-prefix {
+    font-family: 'Courier New', monospace;
+    background: #e9ecef;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 12px;
+}
+
+.token-status {
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.token-status.active {
+    background: #d4edda;
+    color: #155724;
+}
+
+.token-status.expired {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.token-actions-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.token-edit-btn,
+.token-delete-btn {
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: background-color 0.2s;
+}
+
+.token-edit-btn {
+    background: #ffc107;
+    color: #212529;
+}
+
+.token-edit-btn:hover {
+    background: #e0a800;
+}
+
+.token-delete-btn {
+    background: #dc3545;
+    color: white;
+}
+
+.token-delete-btn:hover {
+    background: #c82333;
+}
+
+/* Modal Styles */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    max-width: 600px;
+    width: 90%;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+
+.token-display {
+    display: flex;
+    margin: 20px 0;
+    gap: 10px;
+}
+
+.token-display input {
+    flex: 1;
+    padding: 10px;
+    border: 2px solid #28a745;
+    border-radius: 6px;
+    font-family: 'Courier New', monospace;
+    font-size: 14px;
+    background: #f8f9fa;
+}
+
+.copy-btn {
+    background: #28a745;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+}
+
+.copy-btn:hover {
+    background: #218838;
+}
+
+.copy-btn.copied {
+    background: #17a2b8;
+}
+
+.token-usage {
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 6px;
+    margin: 20px 0;
+}
+
+.usage-example {
+    display: block;
+    background: #2d3748;
+    color: #e2e8f0;
+    padding: 15px;
+    border-radius: 6px;
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+    line-height: 1.4;
+    margin-top: 10px;
+    white-space: pre-wrap;
+    overflow-x: auto;
+}
+
+.close-modal-btn {
+    background: #6c757d;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    width: 100%;
+    margin-top: 20px;
+    transition: background-color 0.2s;
+}
+
+.close-modal-btn:hover {
+    background: #5a6268;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .create-token-form .form-row {
+        flex-direction: column;
+        gap: 15px;
+    }
+    
+    .token-item {
+        flex-direction: column;
+        gap: 15px;
+    }
+    
+    .token-actions-buttons {
+        align-self: stretch;
+    }
+    
+    .modal-content {
+        width: 95%;
+        padding: 20px;
+        margin: 20px;
+    }
+}
+
+/* ===========================================
+   Cash Accounts Styles
+   =========================================== */
+.cash-accounts-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.cash-intro {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+    border-left: 4px solid #28a745;
+}
+
+.cash-intro p {
+    margin: 0;
+    color: #555;
+    font-size: 0.95em;
+    line-height: 1.5;
+}
+
+.cash-summary-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.cash-summary-card {
+    background: white;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    border-left: 4px solid #28a745;
+}
+
+.cash-summary-card h3 {
+    margin: 0 0 15px 0;
+    color: #333;
+    font-size: 16px;
+}
+
+.cash-amounts {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.amount-line, .stat-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.amount-line .currency {
+    font-weight: 500;
+    color: #666;
+}
+
+.amount-line .amount {
+    font-weight: 600;
+    font-size: 18px;
+    color: #28a745;
+}
+
+.stat-line span:first-child {
+    color: #666;
+}
+
+.stat-line span:last-child {
+    font-weight: 600;
+    color: #333;
+}
+
+.cash-actions {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin-bottom: 30px;
+}
+
+.create-account-form .form-group.full-width {
+    grid-column: 1 / -1;
+}
+
+.create-account-form textarea {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #e1e5e9;
+    border-radius: 6px;
+    font-size: 14px;
+    font-family: inherit;
+    resize: vertical;
+    transition: border-color 0.2s;
+}
+
+.create-account-form textarea:focus {
+    outline: none;
+    border-color: #28a745;
+}
+
+.create-account-btn {
+    background: #28a745;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.create-account-btn:hover {
+    background: #218838;
+}
+
+.accounts-list-section {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.accounts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.account-item {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 4px solid #28a745;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.account-info {
+    flex: 1;
+}
+
+.account-name {
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+    font-size: 16px;
+}
+
+.account-type-badge {
+    display: inline-block;
+    background: #e9ecef;
+    color: #495057;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: capitalize;
+    margin-bottom: 8px;
+}
+
+.account-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 10px;
+    font-size: 13px;
+    color: #666;
+}
+
+.account-detail {
+    display: flex;
+    flex-direction: column;
+}
+
+.account-detail-label {
+    font-weight: 500;
+    color: #495057;
+    margin-bottom: 2px;
+}
+
+.account-balance {
+    font-weight: 600;
+    font-size: 18px;
+    color: #28a745;
+}
+
+.account-actions-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.account-edit-btn,
+.account-delete-btn {
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: background-color 0.2s;
+}
+
+.account-edit-btn {
+    background: #ffc107;
+    color: #212529;
+}
+
+.account-edit-btn:hover {
+    background: #e0a800;
+}
+
+.account-delete-btn {
+    background: #dc3545;
+    color: white;
+}
+
+.account-delete-btn:hover {
+    background: #c82333;
+}
+
+/* Modal buttons */
+.modal-buttons {
+    display: flex;
+    gap: 15px;
+    margin-top: 20px;
+}
+
+.cancel-btn {
+    background: #6c757d;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+}
+
+.cancel-btn:hover {
+    background: #5a6268;
+}
+
+.save-btn {
+    background: #28a745;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.save-btn:hover {
+    background: #218838;
+}
+
+/* Transfers Section Styles */
+.transfers-section {
+    margin-top: 40px;
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid #eee;
+}
+
+.section-header h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1.2rem;
+}
+
+.transfers-list {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.transfer-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    margin-bottom: 10px;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    transition: box-shadow 0.2s;
+}
+
+.transfer-item:hover {
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.transfer-item:last-child {
+    margin-bottom: 0;
+}
+
+.transfer-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.transfer-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 4px;
+}
+
+.transfer-account {
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+}
+
+.transfer-type {
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.transfer-type.deposit {
+    background: #d4edda;
+    color: #155724;
+}
+
+.transfer-type.withdrawal {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.transfer-details {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.transfer-date {
+    font-size: 12px;
+    color: #666;
+}
+
+.transfer-description {
+    font-size: 12px;
+    color: #888;
+    font-style: italic;
+}
+
+.transfer-amount {
+    font-weight: 600;
+    font-size: 16px;
+    min-width: 80px;
+    text-align: right;
+}
+
+.transfer-amount.deposit {
+    color: #28a745;
+}
+
+.transfer-amount.withdrawal {
+    color: #dc3545;
+}
+
+.transfer-amount.deposit::before {
+    content: '+';
+}
+
+.transfer-amount.withdrawal::before {
+    content: '-';
+}
+
+/* Standalone Transfer Form Page Styles */
+.transfer-form-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.transfer-intro {
+    background: #e8f4fd;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+    border-left: 4px solid #007bff;
+}
+
+.transfer-intro p {
+    margin: 0;
+    color: #555;
+    font-size: 0.95em;
+    line-height: 1.5;
+}
+
+.transfer-form {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin-bottom: 30px;
+}
+
+.transfer-form h2 {
+    margin: 0 0 20px 0;
+    color: #333;
+    font-size: 1.5rem;
+    border-bottom: 2px solid #eee;
+    padding-bottom: 15px;
+}
+
+.recent-transfers {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.recent-transfers h3 {
+    margin: 0 0 20px 0;
+    color: #333;
+    font-size: 1.2rem;
+    border-bottom: 2px solid #eee;
+    padding-bottom: 10px;
+}
+
+/* Responsive Design for Cash Accounts */
+@media (max-width: 768px) {
+    .cash-summary-cards {
+        grid-template-columns: 1fr;
+    }
+    
+    .account-item {
+        flex-direction: column;
+        gap: 15px;
+    }
+    
+    .account-details {
+        grid-template-columns: 1fr;
+        gap: 8px;
+    }
+    
+    .account-actions-buttons {
+        align-self: stretch;
+    }
+}
+
+/* ===========================================
+   Dashboard Cash Cards Styles  
+   =========================================== */
+.cash-breakdown {
+    margin-top: 20px;
+}
+
+.cash-breakdown h3 {
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 1.3rem;
+    border-bottom: 2px solid #eee;
+    padding-bottom: 10px;
+}
+
+.cash-summary-overview {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cash-total-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cash-amount-line {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.currency-label {
+    color: #666;
+    font-weight: 500;
+    font-size: 14px;
+    min-width: 35px;
+}
+
+.cash-amount-line .amount {
+    font-weight: 600;
+    color: #28a745;
+    font-size: 16px;
+}
+
+.cash-stats-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+}
+
+.stat-detail {
+    color: #666;
+    font-size: 13px;
+}
+
+
+.cash-account-breakdown-item {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: box-shadow 0.2s;
+}
+
+.cash-account-breakdown-item:hover {
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.cash-account-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.cash-account-name {
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+    margin-bottom: 2px;
+}
+
+.cash-account-type {
+    font-size: 12px;
+    color: #666;
+}
+
+.cash-account-balance {
+    font-weight: 600;
+    color: #28a745;
+    font-size: 14px;
+}
+
+/* Responsive Design for Dashboard Cash */
+@media (max-width: 768px) {
+    .cash-summary-overview {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+    
+    .cash-stats-card {
+        align-items: flex-start;
+    }
+    
+    .cash-account-breakdown-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
 }
\ No newline at end of file