diff --git a/budget.py b/budget.py
index e2ed2d2..6eb68e0 100644
--- a/budget.py
+++ b/budget.py
@@ -16,39 +16,135 @@ def get_month_total():
return cur.fetchone()[0]
HTML = """
- <!doctype html>
- <html>
+ <!DOCTYPE html>
+ <html lang="en">
<head>
- <meta charset="utf-8">
- <title>Budget Tracker</title>
- <style>
- body {{
- font-family: sans-serif;
- max-width: 800px;
- margin: 40px auto;
- }}
-
- .card {{
- border: 1px solid #ccc;
- padding: 10px;
- margin-top: 20px;
- }}
- </style>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Budget Tracker</title>
+ <style>
+ * {{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }}
+
+ body {{
+ background: #f5f5f5;
+ font-family: system-ui, -apple-system, sans-serif;
+ padding: 2rem;
+ }}
+
+ .dashboard {{
+ max-width: 800px;
+ margin: 0 auto;
+ }}
+
+ .title-wrapper {{
+ text-align: center;
+ margin-bottom: 2rem;
+ }}
+
+ h1 {{
+ font-size: 1.75rem;
+ font-weight: 500;
+ color: #333;
+ display: inline-block;
+ }}
+
+ .cards-row {{
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.5rem;
+ margin-bottom: 1.5rem;
+ }}
+
+ .month-label {{
+ margin-top: 0.5rem;
+ margin-bottom: 1rem;
+ }}
+
+ .month-section-title {{
+ font-size: 1.6rem;
+ font-weight: 500;
+ color: #555;
+ text-align: center;
+ }}
+
+ .card {{
+ flex: 1 1 250px;
+ background: white;
+ border-radius: 12px;
+ padding: 1.5rem;
+ border: 1px solid #e0e0e0;
+ transition: box-shadow 0.2s ease;
+ }}
+
+ .card h2 {{
+ font-size: 1rem;
+ font-weight: 500;
+ margin-bottom: 1rem;
+ color: #666;
+ }}
+
+ .amount {{
+ font-size: 1.8rem;
+ font-weight: 600;
+ color: #333;
+ }}
+
+ .currency-symbol {{
+ font-size: 1.2rem;
+ font-weight: 500;
+ color: #666;
+ margin-right: 2px;
+ }}
+
+ .card-note {{
+ font-size: 0.75rem;
+ color: #999;
+ margin-top: 0.75rem;
+ }}
+
+ @media (max-width: 600px) {{
+ body {{
+ padding: 1rem;
+ }}
+ .card {{
+ flex: 1 1 100%;
+ }}
+ }}
+ </style>
</head>
<body>
-
- <h1>Budget Dashboard</h1>
-
- <div class="card">
- <h2>Current Balance</h2>
- <p>{balance:.2f}</p>
+ <div class="dashboard">
+ <div class="title-wrapper">
+ <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>
+ </div>
+
+ <div class="month-label">
+ <div class="month-section-title">This Month</div>
+ </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>
+ </div>
</div>
-
- <div class="card">
- <h2>This Month</h2>
- <p>Total In & Out: {month:.2f}</p>
- </div>
-
</body>
</html>
"""