diff --git a/18-expenses-chart/templates/index.templ b/18-expenses-chart/templates/index.templ
index 9903a27..578fa5a 100644
--- a/18-expenses-chart/templates/index.templ
+++ b/18-expenses-chart/templates/index.templ
@@ -14,6 +14,10 @@ templ myBalanceComponent() {
 
 var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"}
 
+// returns templ SummaryComponent
+// with all attributes computed from the expenses slice
+// the percentages of the columns, current day number, etc
+// NOTE: this seems to be the way to mix go calculations and templates
 func prepareSummaryComponent(expenses []float32) templ.Component {
 	fmt.Println("hello, preparing expenses: ", expenses)
 	max := slices.Max(expenses)
@@ -35,7 +39,7 @@ css expenseBarVars(percentage float32) {
 templ dayExpenseColumn(expense, percentage float32, day string, isCurrentDay bool) {
 	<div class="flex flex-col place-items-center">
 		<div
-			class={ "rounded w-full h-24 origin-bottom ",
+			class={ "rounded w-full h-32 origin-bottom ",
  expenseBarVars(percentage),
 		 templ.KV("bg-primary-soft-red", !isCurrentDay),
 		 templ.KV("bg-primary-cyan", isCurrentDay) }
@@ -55,8 +59,8 @@ 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 flex flex-col">
-		<p2 class="text-neutral-dark-brown text-lg font-bold pb-4">Spending - Last 7 days</p2>
+	<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col">
+		<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">