diff --git a/app/templates/cotton/ui/percentage_distribution.html b/app/templates/cotton/ui/percentage_distribution.html
index 461efed..93477d2 100644
--- a/app/templates/cotton/ui/percentage_distribution.html
+++ b/app/templates/cotton/ui/percentage_distribution.html
@@ -1,7 +1,7 @@
 {% load i18n %}
-<div class="progress-stacked mt-3">
+<div class="progress-stacked">
   <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.income_projected|floatformat:0 }}%">
-    <div class="progress-bar progress-bar-striped !tw-bg-green-400"
+    <div class="progress-bar progress-bar-striped !tw-bg-green-300"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)">
@@ -15,7 +15,7 @@
     </div>
   </div>
   <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.expense_projected|floatformat:0 }}%">
-    <div class="progress-bar progress-bar-striped !tw-bg-red-400"
+    <div class="progress-bar progress-bar-striped !tw-bg-red-300"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)">
@@ -28,4 +28,4 @@
          title="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)">
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/templates/yearly_overview/fragments/account_data.html b/app/templates/yearly_overview/fragments/account_data.html
index 34b8698..d4a0f5d 100644
--- a/app/templates/yearly_overview/fragments/account_data.html
+++ b/app/templates/yearly_overview/fragments/account_data.html
@@ -175,7 +175,9 @@
           {% endif %}
         </div>
         {% with p=percentages|get_dict_item:account_id %}
-        <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
+        <div class="my-3">
+          <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
+        </div>
         {% endwith %}
       {% empty %}
         <c-msg.empty
diff --git a/app/templates/yearly_overview/fragments/currency_data.html b/app/templates/yearly_overview/fragments/currency_data.html
index e5dc5ef..1cbe016 100644
--- a/app/templates/yearly_overview/fragments/currency_data.html
+++ b/app/templates/yearly_overview/fragments/currency_data.html
@@ -175,7 +175,9 @@
           {% endif %}
         </div>
         {% with p=percentages|get_dict_item:currency_id %}
-        <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
+        <div class="my-3">
+          <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
+        </div>
         {% endwith %}
       {% empty %}
         <c-msg.empty