diff --git a/static/js/expense_chart.js b/static/js/expense_chart.js
index 9e98585..dc27573 100644
--- a/static/js/expense_chart.js
+++ b/static/js/expense_chart.js
@@ -173,15 +173,52 @@ document.addEventListener("DOMContentLoaded", function () {
         loadExpenses("currentmonth");
     }
 
-    document.getElementById('toggleDailySplit').addEventListener('click', function() {
-    // Pobierz aktualne daty jeśli są ustawione w inputach
-    const startDateInput = document.getElementById('startDate');
-    const endDateInput = document.getElementById('endDate');
-    let startDate = startDateInput ? startDateInput.value : null;
-    let endDate = endDateInput ? endDateInput.value : null;
 
-    // Wywołaj funkcję z "daily" jako typ zakresu
-    loadExpenses('daily', startDate, endDate);
+    // podzial casu
+    const toggleMonthlySplit = document.getElementById('toggleMonthlySplit');
+    const toggleDailySplit = document.getElementById('toggleDailySplit');
+    const toggleCategorySplit = document.getElementById('toggleCategorySplit');
+
+    toggleMonthlySplit.addEventListener('click', function() {
+    this.classList.add('btn-primary');
+    this.classList.remove('btn-outline-light');
+    this.setAttribute('aria-pressed', 'true');
+    
+    toggleDailySplit.classList.remove('btn-primary');
+    toggleDailySplit.classList.add('btn-outline-light');
+    toggleDailySplit.setAttribute('aria-pressed', 'false');
+
+    loadExpenses('monthly');
     });
 
+    toggleDailySplit.addEventListener('click', function() {
+    this.classList.add('btn-primary');
+    this.classList.remove('btn-outline-light');
+    this.setAttribute('aria-pressed', 'true');
+
+    toggleMonthlySplit.classList.remove('btn-primary');
+    toggleMonthlySplit.classList.add('btn-outline-light');
+    toggleMonthlySplit.setAttribute('aria-pressed', 'false');
+
+    loadExpenses('daily');
+    });
+
+    toggleCategorySplit.addEventListener('click', function() {
+    const isActive = this.classList.contains('btn-primary');
+    if (isActive) {
+        this.classList.remove('btn-primary');
+        this.classList.add('btn-outline-light');
+        this.setAttribute('aria-pressed', 'false');
+        // Wyłącz podział na kategorie
+        loadExpenses(); // bez podziału na kategorie
+    } else {
+        this.classList.add('btn-primary');
+        this.classList.remove('btn-outline-light');
+        this.setAttribute('aria-pressed', 'true');
+        // Włącz podział na kategorie
+        loadExpenses({ bycategory: true });
+    }
+    });
+
+
 });
diff --git a/templates/expenses.html b/templates/expenses.html
index 60b3e28..15a7b87 100644
--- a/templates/expenses.html
+++ b/templates/expenses.html
@@ -133,14 +133,20 @@
         <div class="card bg-dark text-white mb-4">
           <div class="card-body">
 
-            <div class="d-flex gap-2 mb-2">
-              <button class="btn btn-outline-light flex-fill py-2 mb-0 d-flex align-items-center justify-content-center gap-2" id="toggleCategorySplit">
-                Pokaż podział na kategorie
-              </button>
-              <button class="btn btn-outline-light flex-fill py-2 mb-0 d-flex align-items-center justify-content-center gap-2" id="toggleDailySplit">
-                Pokaż podział dzienny
-              </button>
+          <div class="d-flex gap-3 mb-3">
+            <div>
+              <h6 class="text-white">Podział według czasu</h6>
+              <div class="btn-group" role="group" aria-label="Podział czasu">
+                <button type="button" class="btn btn-outline-light" id="toggleMonthlySplit" aria-pressed="true">Pokaż podział miesięczny</button>
+                <button type="button" class="btn btn-outline-light" id="toggleDailySplit" aria-pressed="false">Pokaż podział dzienny</button>
+              </div>
             </div>
+            <div>
+              <h6 class="text-white">Podział według kategorii</h6>
+              <button class="btn btn-outline-light" id="toggleCategorySplit" aria-pressed="false">Pokaż podział na kategorie</button>
+            </div>
+          </div>
+
 
             <p id="chartRangeLabel" class="fw-bold mb-3">Widok: miesięczne</p>
             <canvas id="expensesChart" height="120"></canvas>