diff --git a/_includes/meetup.html b/_includes/meetup.html
index e06ef9b9..ebd24050 100644
--- a/_includes/meetup.html
+++ b/_includes/meetup.html
@@ -1,4 +1,4 @@
-<div class="meetup-item {{ meetup.date | date: '%Y%m' }}">
+<div class="meetup-item {{ meetup.date | date: '%Y%m' }} {% if meetup.location == 'Online' %}online{% else %}in-person{% endif %}">
   <dt>
     {% if meetup.url %}
       <a href="{{ meetup.url }}">{{ meetup.name }}</a>
diff --git a/_includes/meetup_dates_filter.html b/_includes/meetup_dates_filter.html
deleted file mode 100644
index 896a183a..00000000
--- a/_includes/meetup_dates_filter.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<div class="meetup-dates-container">
-  {% assign unique_dates = "" | split: "" %}
-  {% assign now = "now" | date: "%Y-%m-%d 00:00:00" | date: "%s" | plus: 0 %}
-  {% for meetup in meetups %}
-    {% assign date = meetup.date | date: "%s" | plus: 0 %}
-    {% if date >= now %}
-      {% assign formatted_date = meetup.date | date: "%Y%m" %}
-      {% unless unique_dates contains formatted_date %}
-        <div class="meetup-date-clip"
-             title="{{ meetup.date | date: '%B %Y' }}"
-             onclick="toggleByYearMonth(`{{ meetup.date | date: '%Y%m' }}`, this)">
-          {{ meetup.date | date: "%B %Y" }}
-        </div>
-        {% assign unique_dates = unique_dates | push: formatted_date %}
-      {% endunless %}
-    {% endif %}
-  {% endfor %}
-</div>
-
-<script>
-  function toggleByYearMonth(yearMonthToShow, element) {
-    const isElementSelected = element.classList.contains('selected');
-    if (isElementSelected) {
-      showAllMeetups();
-      element.classList.remove('selected');
-    } else {
-      showMeetups(yearMonthToShow);
-
-      const clips = document.querySelectorAll('.meetup-date-clip');
-      clips.forEach(clip => clip.classList.remove('selected'));
-      element.classList.add('selected');
-    } 
-  }
-
-  function showAllMeetups() {
-    const meetups = document.getElementsByClassName('meetup-item');
-    Array.from(meetups).forEach(meetup => {
-      meetup.style.display = 'block';
-    });
-  }
-
-  function showMeetups(yearMonth) {
-    const meetups = document.getElementsByClassName('meetup-item');
-    Array.from(meetups).forEach(meetup => {
-      if (meetup.classList.contains(yearMonth)) {
-        meetup.style.display = 'block';
-      } else {
-        meetup.style.display = 'none';
-      }
-    });
-  }
-</script>
-
-<style>
-  .meetup-dates-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 24px;
-    white-space: nowrap;
-  }
-
-  .meetup-date-clip {
-    color: #444;
-    background-color: white;
-    padding: 4px 16px;
-    border-radius: 24px;
-    white-space: nowrap;
-    &:hover {
-      background-color: #f0f0f0;
-      cursor: pointer;
-    }
-    &.selected {
-      background-color: #c72c41;
-      color: white;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/_includes/meetup_filters.html b/_includes/meetup_filters.html
new file mode 100644
index 00000000..11324158
--- /dev/null
+++ b/_includes/meetup_filters.html
@@ -0,0 +1,152 @@
+<div class="filter-container">
+  {% assign unique_months = "" | split: "" %}
+  {% assign now = "now" | date: "%Y-%m-%d 00:00:00" | date: "%s" | plus: 0 %}
+  {% for meetup in meetups %}
+    {% assign date = meetup.date | date: "%s" | plus: 0 %}
+    {% if date >= now %}
+      {% assign formatted_month = meetup.date | date: "%Y%m" %}
+      {% unless unique_months contains formatted_month %}
+        <div
+          class="filter-item filter-month"
+          title="{{ meetup.date | date: '%B %Y' }}"
+          onclick="toggleFilter('month', '{{ meetup.date | date: '%Y%m' }}', this)"
+        >
+          {{ meetup.date | date: "%B %Y" }}
+        </div>
+        {% assign unique_months = unique_months | push: formatted_month %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
+</div>
+
+<div class="filter-container">
+  <div class="filter-item filter-format" onclick="toggleFilter('format', 'in-person', this)">In-Person</div>
+  <div class="filter-item filter-format" onclick="toggleFilter('format', 'online', this)">Online</div>
+</div>
+
+<div class="filter-container filter-summary">
+  <div id="meetup-count"></div>
+  <div id="clear-filters" class="clear-filters" onclick="clearFilters()" style="display: none;">Clear filters</div>
+</div>
+
+<script>
+  let activeFilters = {
+    month: null,
+    format: null
+  };
+
+  function toggleFilter(filterType, value, element) {
+    if (activeFilters[filterType] === value) {
+      activeFilters[filterType] = null;
+      element.classList.remove('selected');
+    } else {
+      activeFilters[filterType] = value;
+      const filterItems = document.querySelectorAll(`.filter-${filterType}`);
+      filterItems.forEach(item => item.classList.remove('selected'));
+      element.classList.add('selected');
+    }
+    applyFilters();
+    updateClearFiltersVisibility();
+  }
+
+  function applyFilters() {
+    const meetups = document.getElementsByClassName('meetup-item');
+    let visibleCount = 0;
+
+    Array.from(meetups).forEach(meetup => {
+      const monthMatch = !activeFilters.month || meetup.classList.contains(activeFilters.month);
+      const formatMatch = !activeFilters.format || meetup.classList.contains(activeFilters.format);
+      const isVisible = monthMatch && formatMatch;
+      meetup.style.display = isVisible ? 'block' : 'none';
+      if (isVisible) visibleCount++;
+    });
+
+    updateMeetupCount(visibleCount);
+  }
+
+  function showAllMeetups() {
+    const meetups = document.getElementsByClassName('meetup-item');
+
+    Array.from(meetups).forEach(meetup => {
+      meetup.style.display = 'block';
+    });
+
+    updateMeetupCount(meetups.length);
+  }
+
+  function updateMeetupCount(count) {
+    const countElement = document.getElementById('meetup-count');
+    countElement.textContent = `Showing ${count} meetup${count !== 1 ? 's' : ''}`;
+  }
+
+  function clearFilters() {
+    activeFilters.month = null;
+    activeFilters.format = null;
+    const filterItems = document.querySelectorAll('.filter-item');
+    filterItems.forEach(item => item.classList.remove('selected'));
+    showAllMeetups();
+    updateClearFiltersVisibility();
+  }
+
+  function updateClearFiltersVisibility() {
+    const clearFiltersButton = document.getElementById('clear-filters');
+    const filtersActive = activeFilters.month !== null || activeFilters.format !== null;
+    clearFiltersButton.style.display = filtersActive ? 'block' : 'none';
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const meetups = document.getElementsByClassName('meetup-item');
+    updateMeetupCount(meetups.length);
+    updateClearFiltersVisibility();
+  });
+</script>
+
+<style>
+  .filter-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .filter-summary {
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .filter-item {
+    color: #444;
+    background-color: white;
+    padding: 4px 16px;
+    border-radius: 24px;
+    white-space: nowrap;
+    &:hover {
+      background-color: #f0f0f0;
+      cursor: pointer;
+    }
+    &.selected {
+      background-color: #c72c41;
+      color: white;
+    }
+    &.selected:hover {
+      background-color: #a52537;
+    }
+  }
+
+  .clear-filters {
+    color: #444;
+    cursor: pointer;
+    margin-left: 8px;
+    text-decoration: underline;
+  }
+
+  .clear-filters:hover {
+    color: #c72c41;
+  }
+
+  #meetup-count {
+    font-weight: 500;
+    color: #999;
+  }
+</style>
diff --git a/meetups/index.html b/meetups/index.html
index 5a196fdd..d4bacb43 100644
--- a/meetups/index.html
+++ b/meetups/index.html
@@ -5,7 +5,7 @@
   <dl>
     {% assign now = "now" | date: "%Y-%m-%d 00:00:00" | date: "%s" | plus: 0 %}
     {% assign meetups = site.data.meetups | sort: "date" %}
-    {% include meetup_dates_filter.html %}
+    {% include meetup_filters.html %}
     {% for meetup in meetups %}
       {% assign date = meetup.date | date: "%s" | plus: 0 %}
       {% if date >= now %}