From 0a4d4c12b9ff3805b6220a3fdd20843290f78087 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Tue, 4 Nov 2025 10:29:40 -0300
Subject: [PATCH] feat: another batch of fixes

---
 .../calendar_view/fragments/list.html         |   8 +-
 app/templates/cotton/amount/display.html      |   2 +-
 app/templates/cotton/transaction/item.html    |  11 +-
 app/templates/cotton/ui/account_card.html     | 111 +++++-----
 app/templates/cotton/ui/currency_card.html    | 115 +++++-----
 app/templates/cotton/ui/help_icon.html        |   4 +-
 app/templates/cotton/ui/info_card.html        |   2 +-
 .../cotton/ui/percentage_distribution.html    |   8 +-
 app/templates/insights/pages/index.html       | 209 ++++++++++--------
 .../fragments/monthly_summary.html            |  16 +-
 app/templates/net_worth/net_worth.html        |   6 -
 .../pages/overview_by_account.html            |   8 +-
 .../pages/overview_by_currency.html           |   6 +-
 .../pages/yearly_overview_base.html           |  95 ++++----
 frontend/src/styles/_animations.scss          |  33 ++-
 frontend/src/styles/_bootstrap.scss           |  13 +-
 frontend/src/styles/style.scss                |  11 -
 frontend/src/styles/tailwind.css              |  57 ++++-
 18 files changed, 391 insertions(+), 324 deletions(-)

diff --git a/app/templates/calendar_view/fragments/list.html b/app/templates/calendar_view/fragments/list.html
index fba0561..85777ed 100644
--- a/app/templates/calendar_view/fragments/list.html
+++ b/app/templates/calendar_view/fragments/list.html
@@ -2,8 +2,8 @@
 {% load i18n %}
 
 <div>
-  <div class="hidden lg:grid lg:grid-cols-7 gap-4 lg:gap-0 bg-base-300">
-    <div class="border-l border-t border-b border-base-100 p-2 text-center">
+  <div class="hidden lg:grid lg:grid-cols-7 gap-4 lg:gap-0 bg-base-200">
+    <div class="border-l border-t border-b border-base-300 p-2 text-center">
       {% translate 'MON' %}
     </div>
     <div class="border-t border-b border-base-300 p-2 text-center">
@@ -28,7 +28,7 @@
   <div class="grid grid-cols-1 grid-rows-1 lg:grid-cols-7 lg:grid-rows-6 gap-4 lg:gap-0">
     {% for date in dates %}
       {% if date %}
-      <div class="card bg-base-200 h-full hover:bg-base-300! border-[1px] border-base-content/30  rounded-none card-border {% if not date.transactions %}hidden! lg:flex!{% endif %}{% if today == date.date %} card-border border-2 border-primary{% endif %} cursor-pointer" role="button"
+      <div class="card bg-base-100 h-full hover:bg-base-200! border border-base-content/30  rounded-none {% if not date.transactions %}hidden! lg:flex!{% endif %}{% if today == date.date %} border-2 border-primary{% endif %} cursor-pointer" role="button"
         hx-get="{% url 'calendar_transactions_list' day=date.date.day month=date.date.month year=date.date.year %}"
         hx-target="#persistent-generic-offcanvas-left">
         <div class="card-header border-0 bg-transparent text-end flex justify-between p-2 w-full">
@@ -62,7 +62,7 @@
         </div>
       </div>
       {% else %}
-        <div class="hidden! lg:block! card bg-base-100 h-full rounded-none"></div>
+        <div class="hidden! lg:block! card bg-base-300 h-full rounded-none"></div>
       {% endif %}
     {% endfor %}
   </div>
diff --git a/app/templates/cotton/amount/display.html b/app/templates/cotton/amount/display.html
index 1607424..226fc27 100644
--- a/app/templates/cotton/amount/display.html
+++ b/app/templates/cotton/amount/display.html
@@ -3,7 +3,7 @@
 {% if not divless %}
 <div class="{% if text_end %}text-end{% elif text_start %}text-start{% endif %}">
 {% endif %}
-  <span class="amount{% if color == 'grey' or color == "gray" %} text-base-content/50{% elif color == 'green' %} text-success {% elif color == 'red' %} text-error{% endif %} font-medium {{ custom_class }}"
+  <span class="amount{% if color == 'grey' or color == "gray" %} text-exchange-rate{% elif color == 'green' %} text-income {% elif color == 'red' %} text-expense{% endif %} font-medium {{ custom_class }}"
        data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}"
        data-amount="{{ amount|floatformat:"-40u" }}">
   </span><span>{{ slot }}</span>
diff --git a/app/templates/cotton/transaction/item.html b/app/templates/cotton/transaction/item.html
index 2c4353b..d184e45 100644
--- a/app/templates/cotton/transaction/item.html
+++ b/app/templates/cotton/transaction/item.html
@@ -35,7 +35,7 @@
           {% endif %}
         </div>
         <div
-            class="lg:flex-1 w-full {% if transaction.account.is_untracked_by or transaction.category.mute or transaction.mute %}brightness-80{% endif %}">
+            class="lg:flex-1 w-full {% if transaction.account.is_untracked_by or transaction.category.mute or transaction.mute %}opacity-70{% endif %}">
           {#      Date#}
           <div class="flex flex-wrap mb-2 lg:mb-1 text-base-content/70">
             <div class="w-auto pe-1"><i class="fa-solid fa-calendar fa-fw mr-1 fa-xs"></i></div>
@@ -106,7 +106,7 @@
           </div>
         </div>
         <div
-            class="lg:w-auto w-full lg:text-right self-end {% if transaction.account.is_untracked_by or transaction.category.mute or transaction.mute %}brightness-80{% endif %}">
+            class="lg:w-auto w-full lg:text-right self-end {% if transaction.account.is_untracked_by or transaction.category.mute or transaction.mute %}opacity-70{% endif %}">
           <div class="main-amount mb-2 lg:mb-0">
             <c-amount.display
                 :amount="transaction.amount"
@@ -161,7 +161,8 @@
                     <button class="btn btn-neutral btn-sm transaction-action" data-bs-toggle="dropdown" data-bs-container="body" aria-expanded="false">
                       <i class="fa-solid fa-ellipsis fa-fw"></i>
                     </button>
-                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start menu w-max">
+                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start menu w-max relative">
+                      <div class="absolute inset-[0rem_-3rem_-3rem_-3rem] pointer-events-auto -z-10"></div>
                       {% if transaction.account.is_untracked_by %}
                         <li>
                           <a class="disabled flex items-center" aria-disabled="true">
@@ -216,13 +217,13 @@
                           class="fa-solid fa-clone fa-fw mr-2"></i>{% translate 'Duplicate' %}</a></li>
                     </ul>
                 {% else %}
-                  <div class="tooltip" data-tip="{% translate "Restore" %}">
+                  <div class="tooltip" data-tippy-content="{% translate "Restore" %}">
                     <a class="btn btn-secondary btn-sm transaction-action"
                        role="button"
                        hx-get="{% url 'transaction_undelete' transaction_id=transaction.id %}"><i
                         class="fa-solid fa-trash-arrow-up"></i></a>
                   </div>
-                  <div class="tooltip" data-tip="{% translate "Delete" %}">
+                  <div class="tooltip" data-tippy-content="{% translate "Delete" %}">
                     <a class="btn btn-secondary btn-sm transaction-action"
                        role="button"
                        hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
diff --git a/app/templates/cotton/ui/account_card.html b/app/templates/cotton/ui/account_card.html
index 2051f60..5231c24 100644
--- a/app/templates/cotton/ui/account_card.html
+++ b/app/templates/cotton/ui/account_card.html
@@ -11,66 +11,70 @@
       {{ account.account.name }}
     </h5>
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'projected income' %}</div>
+      <div class="text-end ">
+        <div class="text-subtle">{% translate 'projected income' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line grow"></div>
       {% if account.income_projected != 0 %}
-      <div class="text-end font-mono text-green-400">
+      <div class="text-end">
         <c-amount.display
             :amount="account.income_projected"
             :prefix="account.currency.prefix"
             :suffix="account.currency.suffix"
-            :decimal_places="account.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.currency.decimal_places"
+            color="green"></c-amount.display>
       </div>
       {% else %}
-        <div class="text-end font-mono">-</div>
+        <div class="text-end ">-</div>
       {% endif %}
     </div>
     {% if account.exchanged and account.exchanged.income_projected %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="account.exchanged.income_projected"
             :prefix="account.exchanged.currency.prefix"
             :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'projected expenses' %}</div>
+      <div class="text-end ">
+        <div class="text-subtle">{% translate 'projected expenses' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line grow"></div>
       <div>
         {% if account.expense_projected != 0 %}
-        <div class="text-end font-mono text-red-400">
+        <div class="text-end">
           <c-amount.display
               :amount="account.expense_projected"
               :prefix="account.currency.prefix"
               :suffix="account.currency.suffix"
-              :decimal_places="account.currency.decimal_places"></c-amount.display>
+              :decimal_places="account.currency.decimal_places"
+              color="red"></c-amount.display>
         </div>
         {% else %}
-          <div class="text-end font-mono">-</div>
+          <div class="text-end ">-</div>
         {% endif %}
       </div>
     </div>
     {% if account.exchanged and account.exchanged.expense_projected %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="account.exchanged.expense_projected"
             :prefix="account.exchanged.currency.prefix"
             :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'projected total' %}</div>
+      <div class="text-end ">
+        <div class="text-subtle">{% translate 'projected total' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line grow"></div>
       <div
-          class="text-end font-mono">
+          class="text-end ">
         <c-amount.display
             :amount="account.total_projected"
             :prefix="account.currency.prefix"
@@ -80,73 +84,78 @@
       </div>
     </div>
     {% if account.exchanged.total_projected and account.exchanged.total_projected %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="account.exchanged.total_projected"
             :prefix="account.exchanged.currency.prefix"
             :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <hr class="my-3">
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'current income' %}</div>
+      <div class="text-end ">
+        <div class="text-subtle">{% translate 'current income' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line grow"></div>
       {% if account.income_current != 0 %}
-      <div class="text-end font-mono text-green-400">
+      <div class="text-end">
         <c-amount.display
             :amount="account.income_current"
             :prefix="account.currency.prefix"
             :suffix="account.currency.suffix"
-            :decimal_places="account.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.currency.decimal_places"
+            color="green"></c-amount.display>
       </div>
       {% else %}
-        <div class="text-end font-mono">-</div>
+        <div class="text-end ">-</div>
       {% endif %}
     </div>
     {% if account.exchanged and account.exchanged.income_current %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="account.exchanged.income_current"
             :prefix="account.exchanged.currency.prefix"
             :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'current expenses' %}</div>
+      <div class="text-end ">
+        <div class="text-subtle">{% translate 'current expenses' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line"></div>
       {% if account.expense_current != 0 %}
-      <div class="text-end font-mono text-red-400">
+      <div class="text-end">
         <c-amount.display
             :amount="account.expense_current"
             :prefix="account.currency.prefix"
             :suffix="account.currency.suffix"
-            :decimal_places="account.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.currency.decimal_places"
+            color="red"></c-amount.display>
       </div>
       {% else %}
-        <div class="text-end font-mono">-</div>
+        <div class="text-end ">-</div>
       {% endif %}
     </div>
     {% if account.exchanged and account.exchanged.expense_current %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="account.exchanged.expense_current"
             :prefix="account.exchanged.currency.prefix"
             :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'current total' %}</div>
+      <div class="text-end ">
+        <div class="text-subtle">{% translate 'current total' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
-      <div class="text-end font-mono">
+      <div class="dotted-linegrow"></div>
+      <div class="text-end ">
         <c-amount.display
             :amount="account.total_current"
             :prefix="account.currency.prefix"
@@ -156,22 +165,23 @@
       </div>
     </div>
     {% if account.exchanged and account.exchanged.total_current %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="account.exchanged.total_current"
             :prefix="account.exchanged.currency.prefix"
             :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="account.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div>
       <hr class="my-3">
       <div class="flex justify-between items-baseline mt-2">
-        <div class="text-end font-mono">
-          <div class="text-gray-400">{% translate 'final total' %}</div>
+        <div class="text-end ">
+          <div class="text-subtle">{% translate 'final total' %}</div>
         </div>
-        <div class="dotted-line flex-grow"></div>
-        <div class="text-end font-mono">
+        <div class="dotted-line grow"></div>
+        <div class="text-end ">
           <c-amount.display
               :amount="account.total_final"
               :prefix="account.currency.prefix"
@@ -181,12 +191,13 @@
         </div>
       </div>
       {% if account.exchanged and account.exchanged.total_final %}
-        <div class="text-end font-mono text-gray-500">
+        <div class="text-end">
           <c-amount.display
               :amount="account.exchanged.total_final"
               :prefix="account.exchanged.currency.prefix"
               :suffix="account.exchanged.currency.suffix"
-              :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
+              :decimal_places="account.exchanged.currency.decimal_places"
+              color="gray"></c-amount.display>
         </div>
       {% endif %}
     </div>
diff --git a/app/templates/cotton/ui/currency_card.html b/app/templates/cotton/ui/currency_card.html
index 45c3e73..8d6ffd0 100644
--- a/app/templates/cotton/ui/currency_card.html
+++ b/app/templates/cotton/ui/currency_card.html
@@ -6,65 +6,69 @@
       {{ currency.currency.name }}
     </h5>
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'projected income' %}</div>
+      <div class="text-end">
+        <div class="text-subtle">{% translate 'projected income' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line grow"></div>
       {% if currency.income_projected != 0 %}
-      <div class="text-end font-mono text-green-400">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.income_projected"
             :prefix="currency.currency.prefix"
             :suffix="currency.currency.suffix"
-            :decimal_places="currency.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.currency.decimal_places"
+            color="green"></c-amount.display>
       </div>
       {% else %}
-      <div class="text-end font-mono">-</div>
+      <div class="text-end">-</div>
       {% endif %}
     </div>
     {% if currency.exchanged and currency.exchanged.income_projected %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.exchanged.income_projected"
             :prefix="currency.exchanged.currency.prefix"
             :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'projected expenses' %}</div>
+      <div class="text-end">
+        <div class="text-subtle">{% translate 'projected expenses' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line grow"></div>
       <div>
         {% if currency.expense_projected != 0 %}
-        <div class="text-end font-mono text-red-400">
+        <div class="text-end">
           <c-amount.display
               :amount="currency.expense_projected"
               :prefix="currency.currency.prefix"
               :suffix="currency.currency.suffix"
-              :decimal_places="currency.currency.decimal_places"></c-amount.display>
+              :decimal_places="currency.currency.decimal_places"
+              color="red"></c-amount.display>
         </div>
         {% else %}
-          <div class="text-end font-mono">-</div>
+          <div class="text-end">-</div>
         {% endif %}
       </div>
     </div>
     {% if currency.exchanged and currency.exchanged.expense_projected %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.exchanged.expense_projected"
             :prefix="currency.exchanged.currency.prefix"
             :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'projected total' %}</div>
+      <div class="text-end">
+        <div class="text-subtle">{% translate 'projected total' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
-      <div class="text-end font-mono">
+      <div class="dotted-linegrow"></div>
+      <div class="text-end">
         <c-amount.display
             :amount="currency.total_projected"
             :prefix="currency.currency.prefix"
@@ -74,73 +78,78 @@
       </div>
     </div>
     {% if currency.exchanged.total_projected and currency.exchanged.total_projected %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.exchanged.total_projected"
             :prefix="currency.exchanged.currency.prefix"
             :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
-    <hr class="my-3">
+    <hr class="my-3 hr">
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'current income' %}</div>
+      <div class="text-end">
+        <div class="text-subtle">{% translate 'current income' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line grow"></div>
       {% if currency.income_current != 0 %}
-      <div class="text-end font-mono text-green-400">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.income_current"
             :prefix="currency.currency.prefix"
             :suffix="currency.currency.suffix"
-            :decimal_places="currency.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.currency.decimal_places"
+            color="green"></c-amount.display>
       </div>
       {% else %}
-        <div class="text-end font-mono">-</div>
+        <div class="text-end">-</div>
       {% endif %}
     </div>
     {% if currency.exchanged and currency.exchanged.income_current %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.exchanged.income_current"
             :prefix="currency.exchanged.currency.prefix"
             :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'current expenses' %}</div>
+      <div class="text-end">
+        <div class="text-subtle">{% translate 'current expenses' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
+      <div class="dotted-line grow"></div>
       {% if currency.expense_current != 0 %}
-      <div class="text-end font-mono text-red-400">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.expense_current"
             :prefix="currency.currency.prefix"
             :suffix="currency.currency.suffix"
-            :decimal_places="currency.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.currency.decimal_places"
+            color="red"></c-amount.display>
       </div>
       {% else %}
-        <div class="text-end font-mono">-</div>
+        <div class="text-end">-</div>
       {% endif %}
     </div>
     {% if currency.exchanged and currency.exchanged.expense_current %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.exchanged.expense_current"
             :prefix="currency.exchanged.currency.prefix"
             :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end font-mono">
-        <div class="text-gray-400">{% translate 'current total' %}</div>
+      <div class="text-end">
+        <div class="text-subtle">{% translate 'current total' %}</div>
       </div>
-      <div class="dotted-line flex-grow"></div>
-      <div class="text-end font-mono">
+      <div class="dotted-line grow"></div>
+      <div class="text-end">
         <c-amount.display
             :amount="currency.total_current"
             :prefix="currency.currency.prefix"
@@ -150,22 +159,23 @@
       </div>
     </div>
     {% if currency.exchanged and currency.exchanged.total_current %}
-      <div class="text-end font-mono text-gray-500">
+      <div class="text-end">
         <c-amount.display
             :amount="currency.exchanged.total_current"
             :prefix="currency.exchanged.currency.prefix"
             :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"></c-amount.display>
+            :decimal_places="currency.exchanged.currency.decimal_places"
+            color="gray"></c-amount.display>
       </div>
     {% endif %}
     <div>
-      <hr class="my-3">
+      <hr class="my-3 hr">
       <div class="flex justify-between items-baseline mt-2">
-        <div class="text-end font-mono">
-          <div class="text-gray-400">{% translate 'final total' %}</div>
+        <div class="text-end">
+          <div class="text-subtle">{% translate 'final total' %}</div>
         </div>
-        <div class="dotted-line flex-grow"></div>
-        <div class="text-end font-mono">
+        <div class="dotted-line grow"></div>
+        <div class="text-end">
           <c-amount.display
               :amount="currency.total_final"
               :prefix="currency.currency.prefix"
@@ -175,12 +185,13 @@
         </div>
       </div>
       {% if currency.exchanged and currency.exchanged.total_final %}
-        <div class="text-end font-mono text-gray-500">
+        <div class="text-end">
           <c-amount.display
               :amount="currency.exchanged.total_final"
               :prefix="currency.exchanged.currency.prefix"
               :suffix="currency.exchanged.currency.suffix"
-              :decimal_places="currency.exchanged.currency.decimal_places"></c-amount.display>
+              :decimal_places="currency.exchanged.currency.decimal_places"
+              color="gray"></c-amount.display>
         </div>
       {% endif %}
     </div>
diff --git a/app/templates/cotton/ui/help_icon.html b/app/templates/cotton/ui/help_icon.html
index 23a707d..8f092d9 100644
--- a/app/templates/cotton/ui/help_icon.html
+++ b/app/templates/cotton/ui/help_icon.html
@@ -1,8 +1,6 @@
 {% spaceless %}
 {% load i18n %}
-<div class="tooltip" data-tip="{{ content }}">
-<span class="text-xs text-base-content/50 mx-3">
+<span class="text-xs text-base-content/50 mx-1" data-tippy-content="{{ content }}">
   <i class="{% if not icon %}fa-solid fa-circle-question{% else %}{{ icon }}{% endif %} fa-fw"></i>
 </span>
-</div>
 {% endspaceless %}
diff --git a/app/templates/cotton/ui/info_card.html b/app/templates/cotton/ui/info_card.html
index df6ff99..1112016 100644
--- a/app/templates/cotton/ui/info_card.html
+++ b/app/templates/cotton/ui/info_card.html
@@ -1,4 +1,4 @@
-<div class="card card-border border-2 border-base-300 relative h-full shadow bg-base-100">
+<div class="card card-border relative h-full shadow bg-base-100">
   <div class="absolute h-8 w-8 right-2 top-2 bg-{{ color }}-300 text-{{ color }}-800 text-center flex items-center justify-center rounded-lg">
     {% if icon %}<i class="{{ icon }}"></i>{% else %}<span class="font-bold">{{ title.0 }}</span>{% endif %}
   </div>
diff --git a/app/templates/cotton/ui/percentage_distribution.html b/app/templates/cotton/ui/percentage_distribution.html
index e1d20e8..c28a331 100644
--- a/app/templates/cotton/ui/percentage_distribution.html
+++ b/app/templates/cotton/ui/percentage_distribution.html
@@ -8,7 +8,7 @@
         {% if percentage.percentages.income_projected > 0 %}rounded-s-full{% endif %}
         {% if percentage.percentages.income_projected > 0 and percentage.percentages.income_current <= 0 and percentage.percentages.expense_projected <= 0 and percentage.percentages.expense_current <= 0 %}rounded-e-full{% endif %}"
         style="width: {{ percentage.percentages.income_projected|floatformat:'2u' }}%"
-        data-tip="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)"
+        data-tippy-content="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)"
         role="progressbar"
         aria-label="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)"
         aria-valuenow="{{ percentage.percentages.income_projected|floatformat:0 }}"
@@ -21,7 +21,7 @@
         {% if percentage.percentages.income_projected <= 0 and percentage.percentages.income_current > 0 %}rounded-s-full{% endif %}
         {% if percentage.percentages.income_current > 0 and percentage.percentages.expense_projected <= 0 and percentage.percentages.expense_current <= 0 %}rounded-e-full{% endif %}"
         style="width: {{ percentage.percentages.income_current|floatformat:'2u' }}%"
-        data-tip="{% trans 'Current Income' %} ({{ percentage.percentages.income_current|floatformat:2 }}%)"
+        data-tippy-content="{% trans 'Current Income' %} ({{ percentage.percentages.income_current|floatformat:2 }}%)"
         role="progressbar"
         aria-label="{% trans 'Current Income' %} ({{ percentage.percentages.income_current|floatformat:2 }}%)"
         aria-valuenow="{{ percentage.percentages.income_current|floatformat:0 }}"
@@ -34,7 +34,7 @@
         {% if percentage.percentages.income_projected <= 0 and percentage.percentages.income_current <= 0 and percentage.percentages.expense_projected > 0 %}rounded-s-full{% endif %}
         {% if percentage.percentages.expense_projected > 0 and percentage.percentages.expense_current <= 0 %}rounded-e-full{% endif %}"
         style="width: {{ percentage.percentages.expense_projected|floatformat:'2u' }}%"
-        data-tip="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)"
+        data-tippy-content="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)"
         role="progressbar"
         aria-label="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)"
         aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}"
@@ -47,7 +47,7 @@
         {% if percentage.percentages.income_projected <= 0 and percentage.percentages.income_current <= 0 and percentage.percentages.expense_projected <= 0 and percentage.percentages.expense_current > 0 %}rounded-s-full{% endif %}
         {% if percentage.percentages.expense_current > 0 %}rounded-e-full{% endif %}"
         style="width: {{ percentage.percentages.expense_current|floatformat:'2u' }}%"
-        data-tip="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)"
+        data-tippy-content="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)"
         role="progressbar"
         aria-label="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)"
         aria-valuenow="{{ percentage.percentages.expense_current|floatformat:0 }}"
diff --git a/app/templates/insights/pages/index.html b/app/templates/insights/pages/index.html
index 176829b..4aaef24 100644
--- a/app/templates/insights/pages/index.html
+++ b/app/templates/insights/pages/index.html
@@ -6,114 +6,127 @@
 
 {% block content %}
   <div class="container-fluid">
-    <div class="flex flex-wrap my-3 h-full">
-      <div class="w-full lg:w-2/12 md:w-3/12 mb-3 md:mb-0">
-        <div class="sticky top-3">
-          <div class="">
-            <div class="mb-2 w-full lg:inline-flex grid gap-2 flex-wrap lg:justify-center" role="group"
-                 _="on change
-                    set type to event.target.value
-                    add .hidden to <#picker-form > div:not(.hidden)/>
+    <div class="row">
+      <div class="col-12 md:col-3">
+        <div class="flex flex-col gap-3">
+          <div class="card bg-base-100 card-borderS">
+            <div class="card-body">
+            <div class="">
+              <div class="mb-2 w-full lg:inline-flex grid gap-2 flex-wrap lg:justify-center" role="group"
+                  _="on change
+                      set type to event.target.value
+                      add .hidden to <#picker-form > div:not(.hidden)/>
 
-                    if type == 'month'
-                      remove .hidden from #month-form
-                    end
-                    if type == 'year'
-                      remove .hidden from #year-form
-                    end
-                    if type == 'month-range'
-                      remove .hidden from #month-range-form
-                    end
-                    if type == 'year-range'
-                      remove .hidden from #year-range-form
-                    end
-                    if type == 'date-range'
-                      remove .hidden from #date-range-form
-                    end
-                    then trigger updated"
-                 id="picker-type">
-              <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="month" id="monthradio" autocomplete="off" aria-label="{% translate 'Month' %}" checked>
+                      if type == 'month'
+                        remove .hidden from #month-form
+                      end
+                      if type == 'year'
+                        remove .hidden from #year-form
+                      end
+                      if type == 'month-range'
+                        remove .hidden from #month-range-form
+                      end
+                      if type == 'year-range'
+                        remove .hidden from #year-range-form
+                      end
+                      if type == 'date-range'
+                        remove .hidden from #date-range-form
+                      end
+                      then trigger updated"
+                  id="picker-type">
+                <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="month" id="monthradio" autocomplete="off" aria-label="{% translate 'Month' %}" checked>
 
-              <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="year" id="yearradio" autocomplete="off" aria-label="{% translate 'Year' %}">
+                <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="year" id="yearradio" autocomplete="off" aria-label="{% translate 'Year' %}">
 
-              <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="month-range" id="monthrangeradio" autocomplete="off" aria-label="{% translate 'Month Range' %}">
+                <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="month-range" id="monthrangeradio" autocomplete="off" aria-label="{% translate 'Month Range' %}">
 
-              <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="year-range" id="yearrangeradio" autocomplete="off" aria-label="{% translate 'Year Range' %}">
+                <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="year-range" id="yearrangeradio" autocomplete="off" aria-label="{% translate 'Year Range' %}">
 
-              <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="date-range" id="daterangeradio" autocomplete="off" aria-label="{% translate 'Date Range' %}">
+                <input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="date-range" id="daterangeradio" autocomplete="off" aria-label="{% translate 'Date Range' %}">
+              </div>
+              <form id="picker-form"
+                    _="install init_datepicker
+                    on change trigger updated">
+                <div id="month-form" class="">
+                  {% crispy month_form %}
+                </div>
+                <div id="year-form" class="hidden">
+                  {% crispy year_form %}
+                </div>
+                <div id="month-range-form" class="hidden">
+                  {% crispy month_range_form %}
+                </div>
+                <div id="year-range-form" class="hidden">
+                  {% crispy year_range_form %}
+                </div>
+                <div id="date-range-form" class="hidden">
+                  {% crispy date_range_form %}
+                </div>
+              </form>
+            </div>
+            <div class="flex flex-col gap-1 insights-list" role="tablist"
+                hx-indicator="#tab-content"
+                hx-target="#tab-content"
+                hx-sync="#tab-content:replace"
+                hx-include="#picker-form, #picker-type"
+                _="on click
+                    remove .btn-active from <.insights-list button/>
+                    add .btn-active to event.target
+                    set event.target's @aria-selected to 'true'">
+              <button class="btn btn-ghost justify-start"
+                      type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                      hx-get="{% url 'insights_sankey_by_account' %}">
+                      {% trans 'Account Flow' %}
+              </button>
+              <button class="btn btn-ghost justify-start"  data-bs-target="#v-pills-content"
+                      type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                      hx-get="{% url 'insights_sankey_by_currency' %}"
+                      >{% trans 'Currency Flow' %}
+              </button>
+              <button class="btn btn-ghost justify-start"  data-bs-target="#v-pills-content"
+                      type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                      hx-get="{% url 'category_explorer_index' %}">
+                      {% trans 'Category Explorer' %}
+              </button>
+              <button class="btn btn-ghost justify-start"  data-bs-target="#v-pills-content"
+                      type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                      hx-get="{% url 'category_overview' %}"
+                      >{% trans 'Categories Overview' %}
+              </button>
+            </div>
             </div>
-            <form id="picker-form"
-                  _="install init_datepicker
-                  on change trigger updated">
-              <div id="month-form" class="">
-                {% crispy month_form %}
-              </div>
-              <div id="year-form" class="hidden">
-                {% crispy year_form %}
-              </div>
-              <div id="month-range-form" class="hidden">
-                {% crispy month_range_form %}
-              </div>
-              <div id="year-range-form" class="hidden">
-                {% crispy year_range_form %}
-              </div>
-              <div id="date-range-form" class="hidden">
-                {% crispy date_range_form %}
-              </div>
-            </form>
           </div>
-          <div class="menu menu-vertical flex-col" id="v-pills-tab" role="tablist"
-               aria-orientation="vertical">
-            <button class="btn btn-ghost justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                    hx-get="{% url 'insights_sankey_by_account' %}" hx-include="#picker-form, #picker-type"
-                    hx-indicator="#tab-content"
-                    hx-target="#tab-content">{% trans 'Account Flow' %}
-            </button>
-            <button class="btn btn-ghost justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                    hx-get="{% url 'insights_sankey_by_currency' %}"
-                    hx-include="#picker-form, #picker-type"
-                    hx-indicator="#tab-content"
-                    hx-target="#tab-content">{% trans 'Currency Flow' %}
-            </button>
-            <button class="btn btn-ghost justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                    hx-get="{% url 'category_explorer_index' %}"
-                    hx-include="#picker-form, #picker-type"
-                    hx-indicator="#tab-content"
-                    hx-target="#tab-content">{% trans 'Category Explorer' %}
-            </button>
-            <button class="btn btn-ghost justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                    hx-get="{% url 'category_overview' %}"
-                    hx-include="#picker-form, #picker-type"
-                    hx-indicator="#tab-content"
-                    hx-target="#tab-content">{% trans 'Categories Overview' %}
-            </button>
-            <hr class="hr">
-            <button class="btn btn-ghost justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                    hx-get="{% url 'insights_late_transactions' %}"
-                    hx-indicator="#tab-content"
-                    hx-target="#tab-content">{% trans 'Late Transactions' %}
-            </button>
-            <button class="btn btn-ghost justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                    hx-get="{% url 'insights_latest_transactions' %}"
-                    hx-indicator="#tab-content"
-                    hx-target="#tab-content">{% trans 'Latest Transactions' %}
-            </button>
-            <button class="btn btn-ghost justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                    hx-get="{% url 'insights_emergency_fund' %}"
-                    hx-indicator="#tab-content"
-                    hx-target="#tab-content">{% trans 'Emergency Fund' %}
-            </button>
+          <div class="card bg-base-100 card-border">
+            <div class="card-body">
+              <div class="flex flex-col gap-1 insights-list" role="tablist"
+                hx-indicator="#tab-content"
+                hx-target="#tab-content"
+                hx-sync="#tab-content:replace"
+                _="on click
+                    remove .btn-active from <.insights-list button/>
+                    add .btn-active to event.target
+                    set event.target's @aria-selected to 'true'">
+                    <button class="btn btn-ghost justify-start"  data-bs-target="#v-pills-content"
+                            type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                            hx-get="{% url 'insights_late_transactions' %}">
+                            {% trans 'Late Transactions' %}
+                    </button>
+                    <button class="btn btn-ghost justify-start"  data-bs-target="#v-pills-content"
+                            type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                            hx-get="{% url 'insights_latest_transactions' %}">
+                            {% trans 'Latest Transactions' %}
+                    </button>
+                    <button class="btn btn-ghost justify-start"  data-bs-target="#v-pills-content"
+                            type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                            hx-get="{% url 'insights_emergency_fund' %}">
+                            {% trans 'Emergency Fund' %}
+                    </button>
+                  </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="w-full md:w-9/12 lg:w-10/12">
+      <div class="col-12 md:col-9">
         <div id="tab-content" class="show-loading"></div>
       </div>
     </div>
diff --git a/app/templates/monthly_overview/fragments/monthly_summary.html b/app/templates/monthly_overview/fragments/monthly_summary.html
index f16fe77..c67015c 100644
--- a/app/templates/monthly_overview/fragments/monthly_summary.html
+++ b/app/templates/monthly_overview/fragments/monthly_summary.html
@@ -6,7 +6,7 @@
     <c-ui.info-card color="yellow" icon="fa-solid fa-calendar-day" title="{% trans 'Daily Spending Allowance' %}" help_text={% trans "This is the final total divided by the remaining days in the month" %}>
       <div class="flex justify-between mt-3">
           <div class="text-right font-mono">
-            <div class="text-base-content/90">{% translate 'today' %}</div>
+            <div class="text-subtle">{% translate 'today' %}</div>
           </div>
           <div class="text-right font-mono">
             {% for currency in daily_spending_allowance.values %}
@@ -39,7 +39,7 @@
       <c-ui.info-card color="green" icon="fa-solid fa-arrow-right-to-bracket" title="{% trans 'Income' %}">
         <div class="flex justify-between mt-3">
           <div class="text-right font-mono">
-            <div class="text-base-content/90">{% translate 'current' %}</div>
+            <div class="text-subtle">{% translate 'current' %}</div>
           </div>
           <div class="text-right font-mono">
             {% for currency in income_current.values %}
@@ -68,7 +68,7 @@
         </div>
         <div class="flex justify-between">
           <div class="text-right font-mono">
-            <div class="text-base-content/90">{% translate 'projected' %}</div>
+            <div class="text-subtle">{% translate 'projected' %}</div>
           </div>
           <div class="text-right font-mono">
             {% for currency in income_projected.values %}
@@ -102,7 +102,7 @@
       <c-ui.info-card color="red" icon="fa-solid fa-arrow-right-from-bracket" title="{% trans 'Expenses' %}">
         <div class="flex justify-between mt-3">
           <div class="text-right font-mono">
-            <div class="text-base-content/90">{% translate 'current' %}</div>
+            <div class="text-subtle">{% translate 'current' %}</div>
           </div>
           <div class="text-right font-mono">
             {% for currency in expense_current.values %}
@@ -131,7 +131,7 @@
         </div>
         <div class="flex justify-between">
           <div class="text-right font-mono">
-            <div class="text-base-content/90">{% translate 'projected' %}</div>
+            <div class="text-subtle">{% translate 'projected' %}</div>
           </div>
           <div class="text-right font-mono">
             {% for currency in expense_projected.values %}
@@ -165,7 +165,7 @@
     <c-ui.info-card color="blue" icon="fa-solid fa-scale-balanced" title="{% trans 'Total' %}">
         <div class="flex justify-between mt-3">
           <div class="text-right font-mono">
-            <div class="text-base-content/90">{% translate 'current' %}</div>
+            <div class="text-subtle">{% translate 'current' %}</div>
           </div>
           <div class="text-right font-mono">
             {% for currency in total_current.values %}
@@ -194,7 +194,7 @@
         </div>
         <div class="flex justify-between mt-3">
           <div class="text-right font-mono">
-            <div class="text-base-content/90">{% translate 'projected' %}</div>
+            <div class="text-subtle">{% translate 'projected' %}</div>
           </div>
           <div class="text-right font-mono">
             {% for currency in total_projected.values %}
@@ -254,7 +254,7 @@
   <div>
     <c-ui.info-card color="yellow" icon="fa-solid fa-percent" title="{% trans 'Distribution' %}">
       {% for p in percentages.values %}
-        <p class="text-base-content/90 {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }}</p>
+        <p class="text-subtle {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }}</p>
         <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
       {% endfor %}
     </c-ui.info-card>
diff --git a/app/templates/net_worth/net_worth.html b/app/templates/net_worth/net_worth.html
index c253587..57c5840 100644
--- a/app/templates/net_worth/net_worth.html
+++ b/app/templates/net_worth/net_worth.html
@@ -34,12 +34,6 @@
                value="projected"
                {% if type == "projected" %}checked{% endif %} />
       </div>
-      {% comment %} <div class="gap-3" role="group" id="view-type" _="on change trigger updated">
-        <input type="radio" class="btn btn-outline btn-primary rounded-full" name="view_type" aria-label="{% trans "Current" %}" autocomplete="off" value="current" {% if type == "current" %}checked{% endif %} />
-        <i class="fa-solid fa-circle-plus fa-fw"></i>{% trans "Current" %}
-      </input />
-      <input type="radio" class="btn btn-outline btn-primary rounded-full" name="view_type" aria-label="{% trans "Projected" %}" autocomplete="off" value="projected" {% if type == "projected" %}checked{% endif %} />
-      </div> {% endcomment %}
     </div>
     <div class="container px-md-3 py-3"
          _="init call initializeAccountChart() then initializeCurrencyChart() then initializeMonthlyDifferenceChart() end">
diff --git a/app/templates/yearly_overview/pages/overview_by_account.html b/app/templates/yearly_overview/pages/overview_by_account.html
index d8e2ef3..d64b4aa 100644
--- a/app/templates/yearly_overview/pages/overview_by_account.html
+++ b/app/templates/yearly_overview/pages/overview_by_account.html
@@ -17,9 +17,9 @@
 
 {% block filter_pills %}
   <input type="hidden" name="account" value="">
-  <div class="join join-vertical flex-col" id="filter-pills" role="tablist"
+  <div class="flex flex-col w-full gap-1" id="filter-pills" role="tablist"
        hx-indicator="#data-content">
-    <button class="btn btn-outline btn-primary btn-active justify-start join-item"
+    <button class="btn btn-ghost btn-active justify-start w-full"
             role="tab"
             hx-get="{% url 'yearly_overview_account_data' year=year %}"
             hx-target="#data-content"
@@ -33,7 +33,7 @@
       {% translate 'All' %}
     </button>
     {% for account in accounts %}
-      <button class="btn btn-outline btn-primary justify-start join-item"
+      <button class="btn btn-ghost justify-start w-full"
               role="tab"
               hx-get="{% url 'yearly_overview_account_data' year=year %}"
               hx-target="#data-content"
@@ -44,7 +44,7 @@
               _="on click
                  remove .btn-active from <button/> in #filter-pills
                  add .btn-active to me">
-        {% if account.group.name %}<span class="badge badge-secondary me-2">{{ account.group.name }}</span>{% endif %} {{ account.name }}
+        {% if account.group.name %}<span class="badge badge-primary me-2">{{ account.group.name }}</span>{% endif %} {{ account.name }}
       </button>
     {% endfor %}
   </div>
diff --git a/app/templates/yearly_overview/pages/overview_by_currency.html b/app/templates/yearly_overview/pages/overview_by_currency.html
index d19418d..2c8ba37 100644
--- a/app/templates/yearly_overview/pages/overview_by_currency.html
+++ b/app/templates/yearly_overview/pages/overview_by_currency.html
@@ -19,9 +19,9 @@
 
 {% block filter_pills %}
   <input type="hidden" name="currency" value="">
-  <div class="join join-vertical flex-col" id="filter-pills" role="tablist"
+  <div class="flex flex-col w-full gap-1" id="filter-pills" role="tablist"
        hx-indicator="#data-content">
-    <button class="btn btn-outline btn-primary btn-active justify-start join-item"
+    <button class="btn btn-ghost btn-active justify-start w-full"
             role="tab"
             hx-get="{% url 'yearly_overview_currency_data' year=year %}"
             hx-target="#data-content"
@@ -35,7 +35,7 @@
       {% translate 'All' %}
     </button>
     {% for currency in currencies %}
-      <button class="btn btn-outline btn-primary justify-start join-item"
+      <button class="btn btn-ghost justify-start w-full"
               role="tab"
               hx-get="{% url 'yearly_overview_currency_data' year=year %}"
               hx-target="#data-content"
diff --git a/app/templates/yearly_overview/pages/yearly_overview_base.html b/app/templates/yearly_overview/pages/yearly_overview_base.html
index eb2c083..2381461 100644
--- a/app/templates/yearly_overview/pages/yearly_overview_base.html
+++ b/app/templates/yearly_overview/pages/yearly_overview_base.html
@@ -11,18 +11,17 @@
 {% endblock %}
 
 {% block content %}
-  <div class="h-full text-center mb-4 pt-2">
-    <div class="btn-group gap-3" role="group">
-      <a href="{% url 'yearly_overview_currency' year=year %}" class="btn {% if type != 'currency' %}btn-outline btn-primary{% else %}btn-primary{% endif %} rounded-full" hx-boost>
+  <div class="h-full text-center mb-4 pt-2 w-full">
+    <div role="tablist" class="tabs tabs-box mx-auto w-fit">
+      <a href="{% url 'yearly_overview_currency' year=year %}" class="tab {% if type == 'currency' %}tab-active{% endif %}" hx-boost>
         <i class="fa-solid fa-solid fa-coins fa-fw me-2"></i>{% trans 'Currency' %}
       </a>
-
-      <a href="{% url 'yearly_overview_account' year=year %}" class="btn {% if type != 'account' %}btn-outline btn-primary{% else %}btn-primary{% endif %} rounded-full" hx-boost>
+      <a href="{% url 'yearly_overview_account' year=year %}" class="tab {% if type == 'account' %}tab-active{% endif %}" hx-boost>
         <i class="fa-solid fa-wallet fa-fw me-2"></i>{% trans 'Account' %}
       </a>
     </div>
   </div>
-  <div class="container px-md-3 py-3 gap-x-5 overflow-x-hidden" id="yearly-content">
+  <div class="container" id="yearly-content">
     <div class="flex flex-wrap mb-4 gap-x-xl-4 gap-y-3">
       {#    Date picker#}
       <div class="w-full xl:w-auto flex-row items-center flex">
@@ -33,7 +32,7 @@
              href="{% block previous_year_url %}{% endblock %}">
             <i class="fa-solid fa-chevron-left"></i></a>
         </div>
-        <div class="text-2xl font-bold btn btn-ghost flex-1 text-center whitespace-normal flex-wrap h-auto min-w-0">
+        <div class="text-2xl font-bold flex-1 text-center whitespace-normal flex-wrap h-auto min-w-0">
           {{ year }}
         </div>
         <div class="text-base mx-2 h-full items-center flex btn btn-ghost">
@@ -46,48 +45,56 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-wrap">
-      <div class="w-full lg:w-2/12">
-        <input type="hidden" name="month" value="">
-        <div class="flex-col join join-vertical" id="month-pills" role="tablist"
-             hx-indicator="#data-content">
-          <button class="btn btn-outline btn-primary btn-active justify-start join-item"
-                  role="tab"
-                  hx-get="{% block data_url %}{% endblock %}"
-                  hx-target="#data-content"
-                  hx-trigger="click"
-                  hx-include="{% block hx_include %}{% endblock %}"
-                  hx-swap="innerHTML"
-                  onclick="document.querySelector('[name=month]').value = ''"
-                  _="on click
-                       remove .btn-active from <button/> in #month-pills
-                       add .btn-active to me">
-            {% translate 'Year' %}
-          </button>
-          {% for month in months %}
-            <button class="btn btn-outline btn-primary justify-start join-item"
-                    role="tab"
-                    hx-get="{% block month_data_url %}{% endblock %}"
-                    hx-target="#data-content"
-                    hx-trigger="click"
-                    hx-include="{% block month_hx_include %}{% endblock %}"
-                    hx-swap="innerHTML"
-                    onclick="document.querySelector('[name=month]').value = '{{ month }}'"
-                    _="on click
-                       remove .btn-active from <button/> in #month-pills
-                       add .btn-active to me">
-              {{ month|month_name }}
-            </button>
-          {% endfor %}
+    <div class="row gap-y-3">
+      <div class="col-12 xl:col-3">
+        <div class="card bg-base-100 card-border">
+          <div class="card-body">
+            <input type="hidden" name="month" value="">
+            <div class="flex flex-col gap-1 w-full" id="month-pills" role="tablist"
+                hx-indicator="#data-content">
+              <button class="btn btn-ghost btn-active justify-start w-full"
+                      role="tab"
+                      hx-get="{% block data_url %}{% endblock %}"
+                      hx-target="#data-content"
+                      hx-trigger="click"
+                      hx-include="{% block hx_include %}{% endblock %}"
+                      hx-swap="innerHTML"
+                      onclick="document.querySelector('[name=month]').value = ''"
+                      _="on click
+                          remove .btn-active from <button/> in #month-pills
+                          add .btn-active to me">
+                {% translate 'Year' %}
+              </button>
+              {% for month in months %}
+                <button class="btn btn-ghost justify-start w-full"
+                        role="tab"
+                        hx-get="{% block month_data_url %}{% endblock %}"
+                        hx-target="#data-content"
+                        hx-trigger="click"
+                        hx-include="{% block month_hx_include %}{% endblock %}"
+                        hx-swap="innerHTML"
+                        onclick="document.querySelector('[name=month]').value = '{{ month }}'"
+                        _="on click
+                          remove .btn-active from <button/> in #month-pills
+                          add .btn-active to me">
+                  {{ month|month_name }}
+                </button>
+              {% endfor %}
+            </div>
+          </div>
         </div>
       </div>
 
-      <hr class="my-4 block lg:hidden">
-      <div class="w-full lg:w-3/12">
-        {% block filter_pills %}{% endblock %}
+      <div class="col-12 xl:col-3">
+        <div class="card bg-base-100 card-border">
+          <div class="card-body">
+            {% block filter_pills %}{% endblock %}
+          </div>
+        </div>
       </div>
 
-      <div class="w-full lg:w-7/12">
+      <div class="col-12 xl:col-6">
+        <hr class="xl:hidden my-3 hr">
         <div id="data-content"
              class="show-loading"
              hx-get="{% block content_data_url %}{% endblock %}"
diff --git a/frontend/src/styles/_animations.scss b/frontend/src/styles/_animations.scss
index a0753bc..5a49e70 100644
--- a/frontend/src/styles/_animations.scss
+++ b/frontend/src/styles/_animations.scss
@@ -61,6 +61,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -70,6 +71,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -79,14 +81,15 @@
   position: relative;
   top: 0;
   min-height: 100px;
+  overflow: hidden;
 
   &::before {
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
     backdrop-filter: blur(4px);
     z-index: 100;
     animation: fade-in 0.1s ease-in forwards;
@@ -101,13 +104,13 @@
     left: 50%;
     width: 40px;
     height: 40px;
-    border: 4px solid #f3f3f3;
-    //border-top: 4px solid $primary;
+    border: 4px solid var(--color-primary);
+    border-top: 4px solid var(--color-base-300);
     border-radius: 50%;
     animation: spin 1s linear infinite, fade-in 0.1s ease-in forwards;
     animation-delay: 200ms;
     opacity: 0;
-    z-index: 101;
+    z-index: 9999;
   }
 }
 
@@ -133,6 +136,7 @@
     transform-origin: top;
     opacity: 1;
   }
+
   100% {
     transform: rotateX(-100deg);
     transform-origin: top;
@@ -157,6 +161,7 @@
     transform: scale(0);
     opacity: 1;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -184,6 +189,7 @@
     transform: scale(1);
     opacity: 1;
   }
+
   100% {
     transform: scale(0);
     opacity: 1;
@@ -195,9 +201,12 @@
 }
 
 @keyframes flash {
-  0%, 100% {
+
+  0%,
+  100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.3;
   }
@@ -233,6 +242,7 @@
     transform: translateY(1000px);
     opacity: 0;
   }
+
   100% {
     transform: translateY(0);
     opacity: 1;
@@ -240,10 +250,13 @@
 }
 
 @keyframes disable-pointer-events {
-  0%, 99% {
+
+  0%,
+  99% {
     pointer-events: none;
   }
+
   100% {
     pointer-events: auto;
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/styles/_bootstrap.scss b/frontend/src/styles/_bootstrap.scss
index 9381e5c..5b44434 100644
--- a/frontend/src/styles/_bootstrap.scss
+++ b/frontend/src/styles/_bootstrap.scss
@@ -1,14 +1,3 @@
-// Bootstrap Utilities and Custom Bootstrap Components
-// This file imports standalone implementations of Bootstrap components
-// and contains Bootstrap-related utilities
-
-// Standalone component implementations
 @use "offcanvas";
 @use "dropdown";
-@use "transitions";
-
-
-// Bootstrap-specific utility classes
-.dropdown-toggle.dropdown-toggle-no-icon::after {
-  display: none;
-}
\ No newline at end of file
+@use "transitions";
\ No newline at end of file
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 29ca497..9e23c0b 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -18,14 +18,6 @@ select {
   display: none;
 }
 
-// .ts-dropdown-content {
-//   max-height: 50vh;
-// }
-
-//.font-base {
-//  font-family: bootstrap.$font-family-base;
-//}
-
 ::selection {
   color: variables.$gray-800;
   background-color: variables.$primary;
@@ -51,9 +43,6 @@ select {
   padding: 0 8px !important;
 }
 
-//.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
-//  background-color: bootstrap.$primary-bg-subtle-dark;
-//}
 
 .offline {
   text-align: center;
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index 93e4c9d..48f764f 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -17,8 +17,8 @@
   --color-base-200: oklch(98% 0 0);
   --color-base-300: oklch(96% 0 0);
   --color-base-content: oklch(21% 0.006 285.885);
-  --color-primary: oklch(87% 0.169 91.605);
-  --color-primary-content: oklch(41% 0.112 45.904);
+  --color-primary: #b07526;
+  --color-primary-content: #fcf2e7;
   --color-secondary: oklch(44% 0.043 257.281);
   --color-secondary-content: oklch(98% 0.003 247.858);
   --color-accent: oklch(70% 0.01 56.259);
@@ -27,12 +27,12 @@
   --color-neutral-content: oklch(92% 0.004 286.32);
   --color-info: oklch(74% 0.16 232.661);
   --color-info-content: oklch(29% 0.066 243.157);
-  --color-success: oklch(76% 0.177 163.223);
-  --color-success-content: oklch(37% 0.077 168.94);
-  --color-warning: oklch(82% 0.189 84.429);
-  --color-warning-content: oklch(41% 0.112 45.904);
-  --color-error: oklch(71% 0.194 13.428);
-  --color-error-content: oklch(27% 0.105 12.094);
+  --color-success: #4b8f45;
+  --color-success-content: #ebf6ea;
+  --color-warning: #b07526;
+  --color-warning-content: #fcf2e7;
+  --color-error: #b44041;
+  --color-error-content: #ffeae8;
   --radius-selector: 0.5rem;
   --radius-field: 0.5rem;
   --radius-box: 0.5rem;
@@ -113,10 +113,51 @@
     .hr {
         @apply text-base-content/60;
     }
+
+    .card.card-border-base-100 {
+            border: var(--border) solid var(--color-base-100);
+    }
+
+    .card.card-border-base-200 {
+            border: var(--border) solid var(--color-base-200);
+    }
+
+    .card.card-border {
+            border: var(--border) solid var(--color-base-200);
+    }
+
+    .card.card-border-base-300 {
+            border: var(--border) solid var(--color-base-300);
+    }
+
+    .text-income {
+        @apply text-success;
+    }
+
+    .text-expense {
+        @apply text-error;
+    }
+
+    .text-exchange-rate {
+        @apply text-base-content/60;
+    }
+
+    .text-subtle {
+        @apply text-base-content/80;
+    }
 }
 
 
 @layer components {
+    .fab {
+    @layer daisyui.component {
+        > :nth-child(n+7) {
+            transition-delay: 150ms;
+        }
+
+  }
+}
+
     /* === Sidebar styles === */
     .sidebar-active {
         @apply text-primary-content bg-primary rounded-box;