diff --git a/app/templates/yearly_overview/fragments/currency_data.html b/app/templates/yearly_overview/fragments/currency_data.html
index 5941fb8..2e97b5a 100644
--- a/app/templates/yearly_overview/fragments/currency_data.html
+++ b/app/templates/yearly_overview/fragments/currency_data.html
@@ -1,10 +1,11 @@
 {% load month_name %}
 {% load i18n %}
 <div class="col">
-  <div class="d-flex justify-content-between">
+  <div class="d-flex justify-content-between align-items-baseline mt-2">
     <div class="text-end font-monospace">
       <div class="tw-text-gray-400">{% translate 'projected income' %}</div>
     </div>
+    <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.income_unpaid %}
         <c-amount.display
@@ -17,10 +18,11 @@
       {% endfor %}
     </div>
   </div>
-  <div class="d-flex justify-content-between mt-2">
+  <div class="d-flex justify-content-between align-items-baseline mt-2">
     <div class="text-end font-monospace">
       <div class="tw-text-gray-400">{% translate 'projected expenses' %}</div>
     </div>
+    <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.expense_unpaid %}
         <c-amount.display
@@ -33,10 +35,11 @@
       {% endfor %}
     </div>
   </div>
-  <div class="d-flex justify-content-between mt-2">
+  <div class="d-flex justify-content-between align-items-baseline mt-2">
     <div class="text-end font-monospace">
       <div class="tw-text-gray-400">{% translate 'projected total' %}</div>
     </div>
+    <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.balance_unpaid %}
         <div class="{% if entry.amount > 0 %}tw-text-green-400{% elif entry.amount < 0 %}tw-text-red-400{% endif %}">
@@ -51,11 +54,12 @@
       {% endfor %}
     </div>
   </div>
-  <hr class="my-1">
-  <div class="d-flex justify-content-between mt-2">
+  <hr class="my-3">
+  <div class="d-flex justify-content-between align-items-baseline mt-2">
     <div class="text-end font-monospace">
       <div class="tw-text-gray-400">{% translate 'current income' %}</div>
     </div>
+    <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.income_paid %}
         <c-amount.display
@@ -68,10 +72,11 @@
       {% endfor %}
     </div>
   </div>
-  <div class="d-flex justify-content-between mt-2">
+  <div class="d-flex justify-content-between align-items-baseline mt-2">
     <div class="text-end font-monospace">
       <div class="tw-text-gray-400">{% translate 'current expenses' %}</div>
     </div>
+    <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.expense_paid %}
         <c-amount.display
@@ -84,10 +89,11 @@
       {% endfor %}
     </div>
   </div>
-  <div class="d-flex justify-content-between mt-2">
+  <div class="d-flex justify-content-between align-items-baseline mt-2">
     <div class="text-end font-monospace">
       <div class="tw-text-gray-400">{% translate 'current total' %}</div>
     </div>
+    <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace tw-text-yellow-400">
       {% for entry in totals.balance_paid %}
         <div class="{% if entry.amount > 0 %}tw-text-green-400{% elif entry.amount < 0 %}tw-text-red-400{% endif %}">
@@ -102,11 +108,12 @@
       {% endfor %}
     </div>
   </div>
-  <hr class="my-1">
-  <div class="d-flex justify-content-between mt-2">
+  <hr class="my-3">
+  <div class="d-flex justify-content-between align-items-baseline mt-2">
     <div class="text-end font-monospace">
       <div class="tw-text-gray-400">{% translate 'final total' %}</div>
     </div>
+    <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.balance_total %}
         <div class="{% if entry.amount > 0 %}tw-text-green-400{% elif entry.amount < 0 %}tw-text-red-400{% endif %}">