diff --git a/resources/js/components/accounts/account-balance-chart.tsx b/resources/js/components/accounts/account-balance-chart.tsx
index 81e926af..84d3360e 100644
--- a/resources/js/components/accounts/account-balance-chart.tsx
+++ b/resources/js/components/accounts/account-balance-chart.tsx
@@ -39,6 +39,7 @@ interface AccountBalanceChartProps {
     account: Account;
     loading?: boolean;
     refreshKey?: number;
+    onBalanceClick?: () => void;
 }
 
 function formatXAxisLabel(value: string): string {
@@ -117,6 +118,7 @@ export function AccountBalanceChart({
     account,
     loading: initialLoading,
     refreshKey,
+    onBalanceClick,
 }: AccountBalanceChartProps) {
     const [balanceData, setBalanceData] = useState<AccountBalanceData | null>(
         null,
@@ -235,12 +237,16 @@ export function AccountBalanceChart({
                         </CardDescription>
                     </div>
                     <div>
-                        <span className="text-4xl font-semibold tabular-nums">
+                        <button
+                            type="button"
+                            onClick={onBalanceClick}
+                            className="-mr-2 cursor-pointer rounded-md px-2 py-1 text-4xl font-semibold tabular-nums transition-colors hover:bg-muted"
+                        >
                             {formatCurrency(
                                 currentBalance,
                                 account.currency_code,
                             )}
-                        </span>
+                        </button>
                     </div>
                 </div>
             </CardHeader>
diff --git a/resources/js/components/accounts/account-list-card.tsx b/resources/js/components/accounts/account-list-card.tsx
index 6ed2b360..11fc70c1 100644
--- a/resources/js/components/accounts/account-list-card.tsx
+++ b/resources/js/components/accounts/account-list-card.tsx
@@ -95,9 +95,13 @@ export function AccountListCard({
                             </div>
                         </div>
                         <div className="flex flex-col items-end">
-                            <span className="text-2xl font-bold tabular-nums">
+                            <button
+                                type="button"
+                                onClick={() => setUpdateBalanceOpen(true)}
+                                className="-mr-2 cursor-pointer rounded-md px-2 py-1 text-2xl font-bold tabular-nums transition-colors hover:bg-muted"
+                            >
                                 {formatter.format(account.currentBalance / 100)}
-                            </span>
+                            </button>
                             <div
                                 className={`flex items-center gap-1 text-sm ${trendColorClass}`}
                             >
diff --git a/resources/js/pages/Accounts/Show.tsx b/resources/js/pages/Accounts/Show.tsx
index 5d388697..f7de9d43 100644
--- a/resources/js/pages/Accounts/Show.tsx
+++ b/resources/js/pages/Accounts/Show.tsx
@@ -156,6 +156,7 @@ export default function AccountShow({
                 <AccountBalanceChart
                     account={account}
                     refreshKey={chartRefreshKey}
+                    onBalanceClick={() => setUpdateBalanceOpen(true)}
                 />
 
                 {isTransactionalAccount(account) && (