diff --git a/app/apps/yearly_overview/views.py b/app/apps/yearly_overview/views.py
index 1a06eee..8d3d7e2 100644
--- a/app/apps/yearly_overview/views.py
+++ b/app/apps/yearly_overview/views.py
@@ -12,7 +12,6 @@ from django.db.models.functions import Concat
 from apps.transactions.models import Transaction
 
 
-# Create your views here.
 @login_required
 def index(request):
     now = timezone.localdate(timezone.now())
@@ -21,18 +20,18 @@ def index(request):
 
 
 def yearly_overview(request, year: int):
-    transactions = Transaction.objects.filter(date__year=year)
+    next_year = year + 1
+    previous_year = year - 1
+
+    transactions = Transaction.objects.filter(reference_date__year=year)
 
     monthly_data = (
-        transactions.annotate(month=TruncMonth("date"))
+        transactions.annotate(month=TruncMonth("reference_date"))
         .values(
             "month",
-            "account__id",
-            "account__name",
-            "account__group__name",
             "account__currency__code",
-            "account__currency__suffix",
             "account__currency__prefix",
+            "account__currency__suffix",
             "account__currency__decimal_places",
         )
         .annotate(
@@ -103,7 +102,7 @@ def yearly_overview(request, year: int):
             - F("expense_paid")
             - F("expense_unpaid"),
         )
-        .order_by("month", "account__group__name")
+        .order_by("month", "account__currency__code")
     )
 
     # Create a list of all months in the year
@@ -126,15 +125,10 @@ def yearly_overview(request, year: int):
     # Fill in the data
     for entry in monthly_data:
         month = entry["month"]
-        account_info = {
-            "id": entry["account__id"],
-            "name": entry["account__name"],
-            "currency": entry["account__currency__code"],
-            "suffix": entry["account__currency__suffix"],
-            "prefix": entry["account__currency__prefix"],
-            "decimal_places": entry["account__currency__decimal_places"],
-            "group": entry["account__group__name"],
-        }
+        currency_code = entry["account__currency__code"]
+        prefix = entry["account__currency__prefix"]
+        suffix = entry["account__currency__suffix"]
+        decimal_places = entry["account__currency__decimal_places"]
 
         for field in [
             "income_paid",
@@ -146,7 +140,13 @@ def yearly_overview(request, year: int):
             "balance_total",
         ]:
             result[month][field].append(
-                {"account": account_info, "amount": entry[field]}
+                {
+                    "code": currency_code,
+                    "prefix": prefix,
+                    "suffix": suffix,
+                    "decimal_places": decimal_places,
+                    "amount": entry[field],
+                }
             )
 
     # Fill in missing months with empty lists
@@ -162,308 +162,13 @@ def yearly_overview(request, year: int):
                 "balance_total": [],
             }
 
-    from pprint import pprint
-
-    pprint(result)
-
     return render(
         request,
-        "yearly_overview/pages/overview2.html",
+        "yearly_overview/pages/overview.html",
         context={
             "year": year,
-            # "next_month": next_month,
-            # "next_year": next_year,
-            # "previous_month": previous_month,
-            # "previous_year": previous_year,
-            "data": result,
+            "next_year": next_year,
+            "previous_year": previous_year,
+            "totals": result,
         },
     )
-
-
-# def yearly_overview(request, year: int):
-#     # First, let's create a base queryset for the given year
-#     base_queryset = Transaction.objects.filter(date__year=year)
-#
-#     # Create a list of all months in the year
-#     months = [month for month in range(1, 13)]
-#
-#     # Create the queryset with all the required annotations
-#     queryset = (
-#         base_queryset.annotate(month=TruncMonth("date"))
-#         .values("month", "account__group__name")
-#         .annotate(
-#             income_paid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             Q(type=Transaction.Type.INCOME, is_paid=True),
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(0),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(0, output_field=DecimalField()),
-#             ),
-#             expense_paid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             Q(type=Transaction.Type.EXPENSE, is_paid=True),
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(0),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(0, output_field=DecimalField()),
-#             ),
-#             income_unpaid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             Q(type=Transaction.Type.INCOME, is_paid=False),
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(0),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(0, output_field=DecimalField()),
-#             ),
-#             expense_unpaid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             Q(type=Transaction.Type.EXPENSE, is_paid=False),
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(0),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(0, output_field=DecimalField()),
-#             ),
-#         )
-#         .annotate(
-#             balance_unpaid=F("income_unpaid") - F("expense_unpaid"),
-#             balance_paid=F("income_paid") - F("expense_paid"),
-#             balance_total=F("income_paid")
-#             + F("income_unpaid")
-#             - F("expense_paid")
-#             - F("expense_unpaid"),
-#         )
-#         .order_by("month", "account__group__name")
-#     )
-#
-#     # Create a dictionary to store results
-#     results = {month: {} for month in months}
-#     print(results)
-#
-#     # Populate the results dictionary
-#     for entry in queryset:
-#         month = int(entry["month"].strftime("%m"))
-#         account_group = entry["account__group__name"]
-#
-#         if account_group not in results[month]:
-#             results[month][account_group] = {
-#                 "income_paid": entry["income_paid"],
-#                 "expense_paid": entry["expense_paid"],
-#                 "income_unpaid": entry["income_unpaid"],
-#                 "expense_unpaid": entry["expense_unpaid"],
-#                 "balance_unpaid": entry["balance_unpaid"],
-#                 "balance_paid": entry["balance_paid"],
-#                 "balance_total": entry["balance_total"],
-#             }
-#         else:
-#             # If the account group already exists, update the values
-#             for key in [
-#                 "income_paid",
-#                 "expense_paid",
-#                 "income_unpaid",
-#                 "expense_unpaid",
-#                 "balance_unpaid",
-#                 "balance_paid",
-#                 "balance_total",
-#             ]:
-#                 results[month][account_group][key] += entry[key]
-#
-#     # Replace empty months with "-"
-#     for month in results:
-#         if not results[month]:
-#             results[month] = "-"
-#
-#     from pprint import pprint
-#
-#     pprint(results)
-#
-#     return render(
-#         request,
-#         "yearly_overview/pages/overview2.html",
-#         context={
-#             "year": year,
-#             # "next_month": next_month,
-#             # "next_year": next_year,
-#             # "previous_month": previous_month,
-#             # "previous_year": previous_year,
-#             "data": results,
-#         },
-#     )
-
-
-# def yearly_overview(request, year: int):
-#     transactions = Transaction.objects.filter(reference_date__year=year)
-#
-#     monthly_data = (
-#         transactions.annotate(month=TruncMonth("reference_date"))
-#         .values(
-#             "month",
-#             "account__currency__code",
-#             "account__currency__prefix",
-#             "account__currency__suffix",
-#             "account__currency__decimal_places",
-#         )
-#         .annotate(
-#             income_paid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             type=Transaction.Type.INCOME, is_paid=True, then=F("amount")
-#                         ),
-#                         default=Value(Decimal("0")),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(Decimal("0")),
-#                 output_field=DecimalField(),
-#             ),
-#             expense_paid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             type=Transaction.Type.EXPENSE,
-#                             is_paid=True,
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(Decimal("0")),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(Decimal("0")),
-#                 output_field=DecimalField(),
-#             ),
-#             income_unpaid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             type=Transaction.Type.INCOME,
-#                             is_paid=False,
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(Decimal("0")),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(Decimal("0")),
-#                 output_field=DecimalField(),
-#             ),
-#             expense_unpaid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             type=Transaction.Type.EXPENSE,
-#                             is_paid=False,
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(Decimal("0")),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(Decimal("0")),
-#                 output_field=DecimalField(),
-#             ),
-#         )
-#         .annotate(
-#             balance_unpaid=F("income_unpaid") - F("expense_unpaid"),
-#             balance_paid=F("income_paid") - F("expense_paid"),
-#             balance_total=F("income_paid")
-#             + F("income_unpaid")
-#             - F("expense_paid")
-#             - F("expense_unpaid"),
-#         )
-#         .order_by("month", "account__currency__code")
-#     )
-#
-#     # Create a list of all months in the year
-#     all_months = [date(year, month, 1) for month in range(1, 13)]
-#
-#     # Create a dictionary to store the final result
-#     result = {
-#         month: {
-#             "income_paid": [],
-#             "expense_paid": [],
-#             "income_unpaid": [],
-#             "expense_unpaid": [],
-#             "balance_unpaid": [],
-#             "balance_paid": [],
-#             "balance_total": [],
-#         }
-#         for month in all_months
-#     }
-#
-#     # Fill in the data
-#     for entry in monthly_data:
-#         month = entry["month"]
-#         currency_code = entry["account__currency__code"]
-#         prefix = entry["account__currency__prefix"]
-#         suffix = entry["account__currency__suffix"]
-#         decimal_places = entry["account__currency__decimal_places"]
-#
-#         for field in [
-#             "income_paid",
-#             "expense_paid",
-#             "income_unpaid",
-#             "expense_unpaid",
-#             "balance_unpaid",
-#             "balance_paid",
-#             "balance_total",
-#         ]:
-#             result[month][field].append(
-#                 {
-#                     "code": currency_code,
-#                     "prefix": prefix,
-#                     "suffix": suffix,
-#                     "decimal_places": decimal_places,
-#                     "amount": entry[field],
-#                 }
-#             )
-#
-#     # Fill in missing months with empty lists
-#     for month in all_months:
-#         if not any(result[month].values()):
-#             result[month] = {
-#                 "income_paid": [],
-#                 "expense_paid": [],
-#                 "income_unpaid": [],
-#                 "expense_unpaid": [],
-#                 "balance_unpaid": [],
-#                 "balance_paid": [],
-#                 "balance_total": [],
-#             }
-#
-#     from pprint import pprint
-#
-#     pprint(result)
-#
-#     return render(
-#         request,
-#         "yearly_overview/pages/overview.html",
-#         context={
-#             "year": year,
-#             # "next_month": next_month,
-#             # "next_year": next_year,
-#             # "previous_month": previous_month,
-#             # "previous_year": previous_year,
-#             "totals": result,
-#         },
-#     )
diff --git a/app/templates/yearly_overview/pages/overview.html b/app/templates/yearly_overview/pages/overview.html
index a99181d..1286228 100644
--- a/app/templates/yearly_overview/pages/overview.html
+++ b/app/templates/yearly_overview/pages/overview.html
@@ -9,189 +9,293 @@
 {% block title %}{% translate 'Yearly Overview' %} :: {{ year }}{% endblock %}
 
 {% block body_hyperscript %}
-  on keyup[code is 'KeyE' and target.nodeName is 'BODY'] from body trigger 'add_expense' end
-  on keyup[code is 'KeyI' and target.nodeName is 'BODY'] from body trigger 'add_income' end
-  on keyup[code is 'KeyB' and target.nodeName is 'BODY'] from body trigger 'balance' end
-  on keyup[code is 'KeyT' and target.nodeName is 'BODY'] from body trigger 'add_transfer' end
-  on keyup[code is 'KeyN' and target.nodeName is 'BODY'] from body trigger 'installment' end
-  on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_month' end
-  on keyup[code is 'ArrowRight' and target.nodeName is 'BODY'] from body trigger 'next_month' end
+  on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_year' end
+  on keyup[code is 'ArrowRight' and target.nodeName is 'BODY'] from body trigger 'next_year' end
 {% endblock %}
 
 {% block content %}
 <div class="container px-md-3 py-3 column-gap-5">
-{#  <div class="row mb-3 gx-xl-4 gy-3 mb-4">#}
+  <div class="row mb-3 gx-xl-4 gy-3 mb-4">
 {#    Date picker#}
-{#    <div class="col-12 col-xl-4 flex-row align-items-center d-flex">#}
-{#      <div class="tw-text-base h-100 align-items-center d-flex">#}
-{#        <a role="button"#}
-{#           class="pe-4 py-2"#}
-{#           hx-boost="true"#}
-{#           hx-trigger="click, previous_month from:window"#}
-{#           href="{% url 'monthly_overview' month=previous_month year=previous_year %}"><i#}
-{#            class="fa-solid fa-chevron-left"></i></a>#}
-{#      </div>#}
-{#      <div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"#}
-{#           hx-get="{% url 'available_dates' %}"#}
-{#           hx-target="#generic-offcanvas-left"#}
-{#           hx-trigger="click, date_picker from:window"#}
-{#           hx-vals='{"month": {{ month }}, "year": {{ year }}}' role="button">#}
-{#        {{ month|month_name }} {{ year }}#}
-{#      </div>#}
-{#      <div class="tw-text-base mx-2 h-100 align-items-center d-flex">#}
-{#        <a role="button"#}
-{#           class="ps-3 py-2"#}
-{#           hx-boost="true"#}
-{#           hx-trigger="click, next_month from:window"#}
-{#           href="{% url 'monthly_overview' month=next_month year=next_year %}">#}
-{#          <i class="fa-solid fa-chevron-right"></i>#}
-{#        </a>#}
-{#      </div>#}
-{#    </div>#}
+    <div class="col-12 col-xl-2 flex-row align-items-center d-flex">
+      <div class="tw-text-base h-100 align-items-center d-flex">
+        <a role="button"
+           class="pe-4 py-2"
+           hx-boost="true"
+           hx-trigger="click, previous_year from:window"
+           href="{% url 'yearly_overview' year=previous_year %}">
+          <i class="fa-solid fa-chevron-left"></i></a>
+      </div>
+      <div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center">
+        {{ year }}
+      </div>
+      <div class="tw-text-base mx-2 h-100 align-items-center d-flex">
+        <a role="button"
+           class="ps-3 py-2"
+           hx-boost="true"
+           hx-trigger="click, next_year from:window"
+           href="{% url 'yearly_overview' year=next_year %}">
+          <i class="fa-solid fa-chevron-right"></i>
+        </a>
+      </div>
+    </div>
 {#    Action buttons#}
-{#    <div class="col-12 col-xl-8">#}
-{#      <div class="d-grid gap-2 d-xl-flex justify-content-xl-end">#}
-{#        <button class="btn btn-sm btn-outline-success"#}
-{#                      hx-get="{% url 'transaction_add' %}"#}
-{#                      hx-target="#generic-offcanvas"#}
-{#                      hx-trigger="click, add_income from:window"#}
-{#                      hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "IN"}'>#}
-{#                <i class="fa-solid fa-arrow-right-to-bracket me-2"></i>#}
-{#                {% translate "Income" %}#}
-{#        </button>#}
-{#        <button class="btn btn-sm btn-outline-danger"#}
-{#                      hx-get="{% url 'transaction_add' %}"#}
-{#                      hx-target="#generic-offcanvas"#}
-{#                      hx-trigger="click, add_expense from:window"#}
-{#                      hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "EX"}'>#}
-{#                <i class="fa-solid fa-arrow-right-from-bracket me-2"></i>#}
-{#                {% translate "Expense" %}#}
-{#        </button>#}
-{#        <button class="btn btn-sm btn-outline-warning"#}
-{#                hx-get="{% url 'installments_add' %}"#}
-{#                hx-trigger="click, installment from:window"#}
-{#                hx-target="#generic-offcanvas">#}
-{#          <i class="fa-solid fa-divide me-2"></i>#}
-{#          {% translate "Installment" %}#}
-{#        </button>#}
-{#        <button class="btn btn-sm btn-outline-info"#}
-{#                hx-get="{% url 'transactions_transfer' %}"#}
-{#                hx-target="#generic-offcanvas"#}
-{#                hx-trigger="click, add_transfer from:window"#}
-{#                hx-vals='{"year": {{ year }}, "month": {{ month }}}'>#}
-{#          <i class="fa-solid fa-money-bill-transfer me-2"></i>#}
-{#          {% translate "Transfer" %}#}
-{#        </button>#}
-{#        <button class="btn btn-sm btn-outline-info"#}
-{#                hx-get="{% url 'account_reconciliation' %}"#}
-{#                hx-trigger="click, balance from:window"#}
-{#                hx-target="#generic-offcanvas">#}
-{#          <i class="fa-solid fa-scale-balanced me-2"></i>#}
-{#          {% translate "Balance" %}#}
-{#        </button>#}
-{#      </div>#}
-{#    </div>#}
-{#  </div>#}
-{#  Monthly summary#}
-  <div class="row gx-xl-4 gy-3">
-{#    <div class="col-12 col-xl-4 order-0 order-xl-2">#}
-{#      <div id="summary" hx-get="{% url 'monthly_summary' month=month year=year %}" class="sticky-sidebar"#}
-{#           hx-trigger="load, updated from:window, monthly_summary_update from:window">#}
-{#      </div>#}
-{#    </div>#}
-    <div class="col-12">
-{#      Filter transactions#}
-{#      <div class="row mb-1">#}
-{#          <div class="col-12">#}
-{#            <div class="dropdown">#}
-{#              <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"#}
-{#                      aria-expanded="false" data-bs-auto-close="false">#}
-{#                <i class="fa-solid fa-filter fa-fw me-2"></i>{% translate 'Filter transactions' %}#}
-{#              </button>#}
-{#              <form hx-get="{% url 'monthly_transactions_list' month=month year=year %}" hx-trigger="change, submit, search"#}
-{#                    hx-target="#transactions" id="filter" hx-indicator="#transactions"#}
-{#                    class="dropdown-menu p-4 w-lg-50 tw-w-full lg:tw-w-2/4"#}
-{#                    _="install init_tom_select">#}
-{#                {% crispy filter.form %}#}
-{#              </form>#}
-{#            </div>#}
-{#          </div>#}
-{#        </div>#}
-      <div class="row">
-        <div class="no-more-tables">
-        <table class="table table-hover">
-          <thead>
-            <tr>
-              <th scope="col">{% translate 'Month' %}</th>
-              <td>{% translate 'Projected Income' %}</td>
-              <td>{% translate 'Projected Expenses' %}</td>
-              <td>{% translate 'Projected Total' %}</td>
-              <td>{% translate 'Current Income' %}</td>
-              <td>{% translate 'Current Expenses' %}</td>
-              <td>{% translate 'Current Total' %}</td>
-              <td>{% translate 'Final Total' %}</td>
-            </tr>
-          </thead>
-          <tbody>
-            {% for date, x in totals.items %}
-            <tr>
-              <th scope="row">{{ date.month|month_name }}</th>
-              <td class="!tw-text-green-400">
-                {% for data in x.income_unpaid %}
-                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>
-                {% empty %}
-                  <div>-</div>
-                {% endfor %}
-              </td>
-              <td class="!tw-text-red-400">
-                {% for data in x.expense_unpaid %}
-                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>
-                {% empty %}
-                  <div>-</div>
-                {% endfor %}
-              </td>
-              <td>
-                {% for data in x.balance_unpaid %}
-                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>
-                {% empty %}
-                  <div>-</div>
-                {% endfor %}
-              </td>
-              <td class="!tw-text-green-400">
-                {% for data in x.income_paid %}
-                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>
-                {% empty %}
-                  <div>-</div>
-                {% endfor %}
-              </td>
-              <td class="!tw-text-red-400">
-                {% for data in x.expense_paid %}
-                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>
-                {% empty %}
-                  <div>-</div>
-                {% endfor %}
-              </td>
-              <td>
-                {% for data in x.balance_paid %}
-                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>
-                {% empty %}
-                  <div>-</div>
-                {% endfor %}
-              </td>
-              <td>
-                {% for data in x.balance_total %}
-                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>
-                {% empty %}
-                  <div>-</div>
-                {% endfor %}
-              </td>
-            </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-        </div>
+    <div class="col-12 col-xl-10">
+      <div class="d-grid gap-2 d-xl-flex justify-content-xl-end">
+        <button class="btn btn-sm btn-outline-success"
+                      hx-get="{% url 'transaction_add' %}"
+                      hx-target="#generic-offcanvas"
+                      hx-trigger="click, add_income from:window"
+                      hx-vals='{"year": {{ year }}, "type": "IN"}'>
+                <i class="fa-solid fa-arrow-right-to-bracket me-2"></i>
+                {% translate "Income" %}
+        </button>
+        <button class="btn btn-sm btn-outline-danger"
+                      hx-get="{% url 'transaction_add' %}"
+                      hx-target="#generic-offcanvas"
+                      hx-trigger="click, add_expense from:window"
+                      hx-vals='{"year": {{ year }}, "type": "EX"}'>
+                <i class="fa-solid fa-arrow-right-from-bracket me-2"></i>
+                {% translate "Expense" %}
+        </button>
+        <button class="btn btn-sm btn-outline-warning"
+                hx-get="{% url 'installment_plan_add' %}"
+                hx-trigger="click, installment from:window"
+                hx-target="#generic-offcanvas">
+          <i class="fa-solid fa-divide me-2"></i>
+          {% translate "Installment" %}
+        </button>
+        <button class="btn btn-sm btn-outline-warning"
+                hx-get="{% url 'recurring_transaction_add' %}"
+                hx-trigger="click, balance from:window"
+                hx-target="#generic-offcanvas">
+          <i class="fa-solid fa-repeat me-2"></i>
+          {% translate "Recurring" %}
+        </button>
+        <button class="btn btn-sm btn-outline-info"
+                hx-get="{% url 'transactions_transfer' %}"
+                hx-target="#generic-offcanvas"
+                hx-trigger="click, add_transfer from:window"
+                hx-vals='{"year": {{ year }}}'>
+          <i class="fa-solid fa-money-bill-transfer me-2"></i>
+          {% translate "Transfer" %}
+        </button>
+        <button class="btn btn-sm btn-outline-info"
+                hx-get="{% url 'account_reconciliation' %}"
+                hx-trigger="click, balance from:window"
+                hx-target="#generic-offcanvas">
+          <i class="fa-solid fa-scale-balanced me-2"></i>
+          {% translate "Balance" %}
+        </button>
       </div>
     </div>
   </div>
+{#  <div class="row gx-xl-4 gy-3">#}
+{#    <div class="col-12">#}
+{#      <div class="row">#}
+{#        <div class="no-more-tables">#}
+{#        <table class="table table-hover text-nowrap">#}
+{#          <thead>#}
+{#            <tr>#}
+{#              <th scope="col">{% translate 'Month' %}</th>#}
+{#              <td>{% translate 'Projected Income' %}</td>#}
+{#              <td>{% translate 'Projected Expenses' %}</td>#}
+{#              <td>{% translate 'Projected Total' %}</td>#}
+{#              <td>{% translate 'Current Income' %}</td>#}
+{#              <td>{% translate 'Current Expenses' %}</td>#}
+{#              <td>{% translate 'Current Total' %}</td>#}
+{#              <td>{% translate 'Final Total' %}</td>#}
+{#            </tr>#}
+{#          </thead>#}
+{#          <tbody>#}
+{#            {% for date, x in totals.items %}#}
+{#            <tr>#}
+{#              <th scope="row">{{ date.month|month_name }}</th>#}
+{#              <td class="!tw-text-green-400" data-title="{% translate 'Projected Income' %}">#}
+{#                {% for data in x.income_unpaid %}#}
+{#                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>#}
+{#                {% empty %}#}
+{#                  <div>-</div>#}
+{#                {% endfor %}#}
+{#              </td>#}
+{#              <td class="!tw-text-red-400" data-title="{% translate 'Projected Expenses' %}">#}
+{#                {% for data in x.expense_unpaid %}#}
+{#                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>#}
+{#                {% empty %}#}
+{#                  <div>-</div>#}
+{#                {% endfor %}#}
+{#              </td>#}
+{#              <td data-title="{% translate 'Projected Total' %}">#}
+{#                {% for data in x.balance_unpaid %}#}
+{#                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>#}
+{#                {% empty %}#}
+{#                  <div>-</div>#}
+{#                {% endfor %}#}
+{#              </td>#}
+{#              <td class="!tw-text-green-400" data-title="{% translate 'Current Income' %}">#}
+{#                {% for data in x.income_paid %}#}
+{#                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>#}
+{#                {% empty %}#}
+{#                  <div>-</div>#}
+{#                {% endfor %}#}
+{#              </td>#}
+{#              <td class="!tw-text-red-400" data-title="{% translate 'Current Expenses' %}">#}
+{#                {% for data in x.expense_paid %}#}
+{#                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>#}
+{#                {% empty %}#}
+{#                  <div>-</div>#}
+{#                {% endfor %}#}
+{#              </td>#}
+{#              <td data-title="{% translate 'Current Total' %}">#}
+{#                {% for data in x.balance_paid %}#}
+{#                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>#}
+{#                {% empty %}#}
+{#                  <div>-</div>#}
+{#                {% endfor %}#}
+{#              </td>#}
+{#              <td data-title="{% translate 'Final Total' %}">#}
+{#                {% for data in x.balance_total %}#}
+{#                  <div class="amount" data-original-value="{% currency_display amount=data.amount prefix=data.prefix suffix=data.suffix decimal_places=data.decimal_places %}"></div>#}
+{#                {% empty %}#}
+{#                  <div>-</div>#}
+{#                {% endfor %}#}
+{#              </td>#}
+{#            </tr>#}
+{#            {% endfor %}#}
+{#          </tbody>#}
+{#        </table>#}
+{#        </div>#}
+{#      </div>#}
+{#    </div>#}
+{#  </div>#}
+  <div class="row row-cols-1 row-cols-xl-3 g-4 mb-3">
+    {% for date, x in totals.items %}
+    <div class="col">
+      <div class="card tw-relative h-100 shadow">
+        <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-yellow-300 tw-text-yellow-800 text-center
+        align-items-center d-flex justify-content-center rounded-2 tw-font-bold">
+          {{ forloop.counter }}
+        </div>
+        <div class="card-body">
+          <h5 class="tw-text-yellow-400 fw-bold">{{ date.month|month_name }}</h5>
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-end font-monospace">
+              <div class="tw-text-gray-400">{% translate 'projected income' %}</div>
+            </div>
+            <div class="text-end font-monospace tw-text-green-300">
+              {% for entry in x.income_unpaid %}
+                <c-amount.display
+                            :amount="entry.amount"
+                            :prefix="entry.prefix"
+                            :suffix="entry.suffix"
+                            :decimal_places="entry.decimal_places"></c-amount.display>
+              {% empty %}
+                <div>-</div>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-end font-monospace">
+              <div class="tw-text-gray-400">{% translate 'projected expenses' %}</div>
+            </div>
+            <div class="text-end font-monospace tw-text-red-300">
+              {% for entry in x.expense_unpaid %}
+                <c-amount.display
+                            :amount="entry.amount"
+                            :prefix="entry.prefix"
+                            :suffix="entry.suffix"
+                            :decimal_places="entry.decimal_places"></c-amount.display>
+              {% empty %}
+                <div>-</div>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-end font-monospace">
+              <div class="tw-text-gray-400">{% translate 'projected total' %}</div>
+            </div>
+            <div class="text-end font-monospace tw-text-yellow-300">
+              {% for entry in x.balance_unpaid %}
+                <c-amount.display
+                            :amount="entry.amount"
+                            :prefix="entry.prefix"
+                            :suffix="entry.suffix"
+                            :decimal_places="entry.decimal_places"></c-amount.display>
+              {% empty %}
+                <div>-</div>
+              {% endfor %}
+            </div>
+          </div>
+          <hr class="my-1">
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-end font-monospace">
+              <div class="tw-text-gray-400">{% translate 'current income' %}</div>
+            </div>
+            <div class="text-end font-monospace tw-text-green-400">
+              {% for entry in x.income_paid %}
+                <c-amount.display
+                            :amount="entry.amount"
+                            :prefix="entry.prefix"
+                            :suffix="entry.suffix"
+                            :decimal_places="entry.decimal_places"></c-amount.display>
+              {% empty %}
+                <div>-</div>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-end font-monospace">
+              <div class="tw-text-gray-400">{% translate 'current expenses' %}</div>
+            </div>
+            <div class="text-end font-monospace tw-text-red-400">
+              {% for entry in x.expense_paid %}
+                <c-amount.display
+                            :amount="entry.amount"
+                            :prefix="entry.prefix"
+                            :suffix="entry.suffix"
+                            :decimal_places="entry.decimal_places"></c-amount.display>
+              {% empty %}
+                <div>-</div>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-end font-monospace">
+              <div class="tw-text-gray-400">{% translate 'current total' %}</div>
+            </div>
+            <div class="text-end font-monospace tw-text-yellow-400">
+              {% for entry in x.balance_paid %}
+                <c-amount.display
+                            :amount="entry.amount"
+                            :prefix="entry.prefix"
+                            :suffix="entry.suffix"
+                            :decimal_places="entry.decimal_places"></c-amount.display>
+              {% empty %}
+                <div>-</div>
+              {% endfor %}
+            </div>
+          </div>
+          <hr class="my-1">
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-end font-monospace">
+              <div class="tw-text-gray-400">{% translate 'final total' %}</div>
+            </div>
+            <div class="text-end font-monospace">
+              {% for entry in x.balance_total %}
+                <c-amount.display
+                            :amount="entry.amount"
+                            :prefix="entry.prefix"
+                            :suffix="entry.suffix"
+                            :decimal_places="entry.decimal_places"></c-amount.display>
+              {% empty %}
+                <div>-</div>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
 </div>
 {% endblock %}