diff --git a/budget.py b/budget.py
index 6b2885e..24a4320 100644
--- a/budget.py
+++ b/budget.py
@@ -108,26 +108,44 @@ HTML = """
<h1>Budget Dashboard</h1>
</div>
- <div class="cards-row" style="justify-content: flex-start;">
- <div class="card" style="flex: 0 1 300px;">
- <h2>Current Balance</h2>
- <div class="amount">
- <span class="currency-symbol">£</span>{balance:.2f}
- </div>
+ <div class="grid-container">
+ <div>
+ <h3>Current account</h3>
+ <span class="amount">{balance:,.2f}</span>
+ </div>
+ <div>
+ <h3>Savings account</h3>
+ <span class="amount">{savings:,.2f}</span>
+ </div>
+ <div>
+ <h3>ISA Trading212</h3>
+ <span class="amount">{tisa:,.2f}</span>
+ </div>
+ <div>
+ <h3>ISA Barclays</h3>
+ <span class="amount">{bisa:,.2f}</span>
</div>
</div>
<div class="month-label">
- <div class="month-section-title">This Month</div>
+ <h2>This Month</h2>
</div>
- <div class="cards-row" style="justify-content: flex-start;">
- <div class="card" style="flex: 0 1 300px;">
- <h2>Current Period</h2>
- <div class="amount">
- <span class="currency-symbol">£</span>{month:.2f}
- </div>
- <div class="card-note">Total in & out</div>
+ <div class="grid-container">
+ <div>
+ <h3>Current spend</h3>
+ <span class="amount">{month:,.2f}</span>
+ <div class="sub-card">Budget items</div>
+ </div>
+ <div>
+ <h3>Budget</h3>
+ <span class="amount">{budget:,.2f}</span>
+ <div class="sub-card">Avg. spend (3M)</div>
+ </div>
+ <div>
+ <h3>Projected bal.</h3>
+ <span class="amount">{projected:,.2f}</span>
+ <div class="sub-card">Projected EOM acc. bal.</div>
</div>
</div>
</div>