diff --git a/css/index.css b/css/index.css
index c422a3c..a1087ff 100644
--- a/css/index.css
+++ b/css/index.css
@@ -242,9 +242,9 @@ article > header > * {
 }
 .categories-section > .filters {
   display: flex;
-  flex-direction: column;
-  /* justify-content: start; */
-  /* flex-wrap: wrap; */
+  flex-direction: row;
+  justify-content: start;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
@@ -261,12 +261,19 @@ article > header > * {
 .categories-section .-gone {
   display: none;
 }
+/*  */
+/* .categories-section > .filters > [role='group'] { */
+/*   /* Without max-width groups take up full width */
+*/
+/*   /* max-width: 20rem; */ */
+/*   margin: 0; */
+/* } */
 
-.categories-section > .filters > [role='group'] {
-  /* Without max-width groups take up full width */
-  /* max-width: 20rem; */
-  margin: 0;
+button.small,.button.small {
+  padding: 0.3rem 0.4rem;
 }
-button.small {
+
+select.small {
   padding: 0.3rem 0.4rem;
+  width: auto;
 }
diff --git a/index.html b/index.html
index 85fa669..025a5ce 100644
--- a/index.html
+++ b/index.html
@@ -51,21 +51,23 @@
               <div class="categories-section">
                 <h4 class="center">Categories</h4>
                 <div class="filters">
-                  <div role="group" class="types">
-                    <button data-value="income" class="small outline">
-                      Income
-                    </button>
-                    <button data-value="expense" class="small">Expenses</button>
-                  </div>
-                  <div class="scroll-x">
-                    <button data-value="all" class="small outline">All</button>
-                    <button data-value="overbudget" class="small outline">
-                      Overbudget
-                    </button>
-                    <button data-value="ontrack" class="small outline">
-                      On track
-                    </button>
-                  </div>
+                  <select
+                    name="category-type-select"
+                    aria-label="Select category type"
+                    class="small"
+                  >
+                    <option selected value="expense">Expenses</option>
+                    <option value="income">Income</option>
+                  </select>
+                  <select
+                    name="goal-filter-select"
+                    aria-label="Select goal filter"
+                    class="small"
+                  >
+                    <option selected value="all">All</option>
+                    <option value="ontrack">On track</option>
+                    <option value="overbudget">Overbudget</option>
+                  </select>
                 </div>
                 <div class="top-categories-list">
                   <div class="top-categories-item">
diff --git a/js/index.js b/js/index.js
index ce38fc6..6c357c2 100644
--- a/js/index.js
+++ b/js/index.js
@@ -422,31 +422,13 @@ function MonthCategoriesPanel(el) {
   const categoryFiltersContainer = el.querySelector(
     '.categories-section .filters',
   );
-  // const incomeExpensesButtons = categoryFiltersContainer.querySelectorAll('.types button');
-  const incomeFilterBtn = categoryFiltersContainer.querySelector(
-    'button[data-value="income"]',
+  const categoryTypeSelect = categoryFiltersContainer.querySelector(
+    'select[name="category-type-select"]',
   );
-  const expenseFilterBtn = categoryFiltersContainer.querySelector(
-    'button[data-value="expense"]',
+  const goalFilterSelect = categoryFiltersContainer.querySelector(
+    'select[name="goal-filter-select"]',
   );
 
-  const categoryTypeFilterBtns = [incomeFilterBtn, expenseFilterBtn];
-
-  const allFilterBtn = categoryFiltersContainer.querySelector(
-    'button[data-value="all"]',
-  );
-  const overbudgetFilterBtn = categoryFiltersContainer.querySelector(
-    'button[data-value="overbudget"]',
-  );
-  const onTrackFilterBtn = categoryFiltersContainer.querySelector(
-    'button[data-value="ontrack"]',
-  );
-  const categoryGoalFilterBtns = [
-    allFilterBtn,
-    overbudgetFilterBtn,
-    onTrackFilterBtn,
-  ];
-
   function updateTopCategories() {
     // TODO remove add filter buttons if apply to current categories
     // e.g. only add overbudget filter if there are overbudget categories
@@ -455,15 +437,8 @@ function MonthCategoriesPanel(el) {
       '.categories-section .top-categories-list',
     );
     // category type is income or expense
-    const selectedCategoryType =
-      categoryFiltersContainer
-        .querySelector('.types button.selected')
-        ?.getAttribute('data-value') ?? 'expense';
-
-    const selectedGoalFilter =
-      categoryGoalFilterBtns
-        .find((b) => isButtonSelected(b))
-        ?.getAttribute('data-value') ?? 'all';
+    const selectedCategoryType = categoryTypeSelect.value;
+    const selectedGoalFilter = goalFilterSelect.value;
     topCategoriesList.scrollTop = 0;
     const rowClass = 'top-categories-item';
     topCategoriesList
@@ -592,17 +567,29 @@ function MonthCategoriesPanel(el) {
     });
 
     topCategoriesList.innerHTML = itemsHtml;
+    const onTrackOption = goalFilterSelect.querySelector(
+      'option[value="ontrack"]',
+    );
+    const overbudgetOption = goalFilterSelect.querySelector(
+      'option[value="overbudget"]',
+    );
+    const allOption = goalFilterSelect.querySelector('option[value="all"]');
 
-    overbudgetFilterBtn.textContent = `(${overbudgetCount}) Overbudget`;
-    onTrackFilterBtn.textContent = `(${onTrackCount}) On Track`;
-    allFilterBtn.textContent = `(${allCount}) All`;
-
-    // hide overbudget category if type fitler is Income
-    if (selectedCategoryType === CategoryType.EXPENSE) {
-      displayElement(overbudgetFilterBtn, true);
-    } else {
-      displayElement(overbudgetFilterBtn, false);
+    function disableElement(el, disable = true) {
+      if (disable) {
+        el.setAttribute('disable', 'true');
+      } else {
+        el.removeAttribute('disable');
+      }
     }
+    overbudgetOption.textContent = `(${overbudgetCount}) Overbudget`;
+    disableElement(overbudgetOption, overbudgetCount === 0);
+
+    onTrackOption.textContent = `(${onTrackCount}) On Track`;
+    disableElement(onTrackOption, onTrackCount === 0);
+
+    allOption.textContent = `(${allCount}) All`;
+    disableElement(allOption, allCount === 0);
   }
 
   appContext.addEventListener('transactionsChange', updateTopCategories);
@@ -610,37 +597,34 @@ function MonthCategoriesPanel(el) {
   appContext.addEventListener('selectedMonthChange', updateTopCategories);
 
   // setup event listeners for each btn
-  categoryTypeFilterBtns.forEach((typeBtn) => {
-    unselectButton(typeBtn);
-    typeBtn.addEventListener('click', () => {
-      categoryTypeFilterBtns.forEach((b) => unselectButton(b));
-      selectButton(typeBtn);
-      // reset goal filter to "All"
-      categoryGoalFilterBtns.forEach((b) => unselectButton(b));
-      selectButton(allFilterBtn);
-      updateTopCategories();
-    });
+  goalFilterSelect.addEventListener('change', (e) => {
+    updateTopCategories();
   });
-  // select Expenses by default
-  selectButton(expenseFilterBtn);
-
-  categoryGoalFilterBtns.forEach((filterBtn) => {
-    unselectButton(filterBtn);
-    filterBtn.addEventListener('click', () => {
-      categoryGoalFilterBtns.forEach((b) => unselectButton(b));
-      selectButton(filterBtn);
-      updateTopCategories();
-    });
-  });
-  // select All by default
-  selectButton(allFilterBtn);
+
+  // categoryTypeSelect.value = 'expense';
+  // goalFilterSelect.value = 'all';
 }
 
+function SetupSelect(selectEl) {
+  //disable initially selected
+  selectEl.querySelector('option[selected]')?.setAttribute('disabled', 'true');
+  selectEl.addEventListener('change', (e) => {
+    const value = e.target.value;
+    selectEl
+      .querySelectorAll('option')
+      .forEach((el) => el.removeAttribute('disable'));
+    selectEl
+      .querySelector(`option[selected]`)
+      ?.setAttribute('disabled', 'true');
+    console.log(`option[value="${value}"]`);
+  });
+}
 const app = () => {
   console.log('Loading app');
   // register custom elements
   registerAppContext();
   // Setup mount function components
+  // document.querySelectorAll('select').forEach(el => SetupSelect(el))
   MonthPicker(document.querySelector('.month-picker'));
   MonthTotalsPanel(document.querySelector('.totals-section'));
   MonthCategoriesPanel(document.querySelector('.breakdown-sections-container'));