diff --git a/18-expenses-chart/templates/index.templ b/18-expenses-chart/templates/index.templ
index 578fa5a..96c432a 100644
--- a/18-expenses-chart/templates/index.templ
+++ b/18-expenses-chart/templates/index.templ
@@ -50,7 +50,7 @@ templ dayExpenseColumn(expense, percentage float32, day string, isCurrentDay boo
 
 // The 7 vertical bars of the per-day expenses
 templ expensesChart(expenses, percentages []float32, currentDayNum int) {
-	<div class="grid grid-cols-7 place-content-between gap-x-3 py-2">
+	<div class="grid grid-cols-7 place-content-between gap-x-3">
 		for i := 0; i < 7; i++ {
 			@dayExpenseColumn(expenses[i], percentages[i], days[i], currentDayNum == i)
 		}
@@ -59,17 +59,17 @@ templ expensesChart(expenses, percentages []float32, currentDayNum int) {
 
 // Big container with chard and total expenses of the week
 templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int) {
-	<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col">
+	<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col gap-y-4">
 		<p2 class="text-neutral-dark-brown text-xl font-bold pb-6">Spending - Last 7 days</p2>
 		@expensesChart(expenses, percentages, currentDayNum)
 		<hr class="bg-neutral-cream border-t-0 h-0.5"/>
-		<div class="flex flex-row text-xs text-neutral-medium-brown">
-			<div>
-				Total this month
-				<p class="text-neutral-dark-brown text-xl font-bold">$478.33</p>
+		<div class="grid grid-cols-2 text-sm text-neutral-medium-brown">
+			<p class="col-span-full">Total this month</p>
+			<div class="grow">
+				<p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full">$478.33</p>
 			</div>
-			<div>
-				<p class="text-neutral-dark-brown">+2.4%</p>
+			<div class="text-right">
+				<p class="text-neutral-dark-brown font-bold">+2.4%</p>
 				from last month
 			</div>
 		</div>