diff --git a/_includes/team_card.html b/_includes/team_card.html
index 070e58e..6a615db 100644
--- a/_includes/team_card.html
+++ b/_includes/team_card.html
@@ -1,5 +1,14 @@
 {% assign member = include.member %}
-<div class="team-cards__card card" id="member-{{ member.username | replace: ' ', '-' }}">
+{%- assign member_roles_classes = '' -%}
+{%- for member_role_membership_type in member.role_memberships -%}
+	{%- for member_role_name in member_role_membership_type[1] -%}
+		{%- assign role_name_normalized = member_role_name | replace: ' ', '-' | downcase -%}
+		{%- unless role_name_normalized == '' -%}
+			{%- assign member_roles_classes = member_roles_classes | append: ' team-member--' | append: role_name_normalized -%}
+		{%- endunless -%}
+	{%- endfor -%}
+{%- endfor -%}
+<div class="team-cards__card card{{ member_roles_classes }}" id="member-{{ member.username | replace: ' ', '-' }}">
 	<a href="#member-{{ member.username | replace: ' ', '-' }}" class="team-cards__card__anchor">
 		<h3 class="card__username {% if member.name %}card__username--has-name{% endif %}">{{ member.username }}</h3>
 	</a>
diff --git a/about/team.html b/about/team.html
index 43da684..39b4abc 100644
--- a/about/team.html
+++ b/about/team.html
@@ -9,6 +9,25 @@
 - /credits
 ---
 
+<style>
+.team-members-clear-filter {
+	display: none;
+	text-transform: uppercase;
+	font-size: 1.4rem;
+	font-weight: normal;
+	line-height: 1;
+}
+{%- assign team_cards_divs_open = '' -%}
+{%- assign team_cards_divs_close = '' -%}
+{% for data_role in site.data.roles %}
+{%- assign role_name_normalized = data_role.name | replace: ' ', '-' | downcase -%}
+{%- assign team_cards_divs_open = team_cards_divs_open | append: '<div id="team-members-' | append: role_name_normalized | append: '">' -%}
+{%- assign team_cards_divs_close = team_cards_divs_open | append: '</div>' -%}
+#team-members-{{ role_name_normalized }}:target .team-cards__card:not(.team-member--{{ role_name_normalized }}) { display: none; }
+#team-members-{{ role_name_normalized }}:target .team-members-clear-filter { display: inline; }
+#team-members-{{ role_name_normalized }}:target .team-members-button-{{ role_name_normalized }} { background: #f7f7f7; }
+{% endfor %}
+</style>
 <aside class="page-sidebar">
 	{% include section_nav.html section='about' %}
 
@@ -41,9 +60,16 @@ <h1 class="block__heading">Joining the MyBB Team</h1>
 </aside>
 
 <div class="page-content page-content--sidebar">
-	<section class="block">
+	{{ team_cards_divs_open }}
+	<section class="block" id="team-members">
 		<header class="block__heading">
-			<h1 class="block__heading__title">The MyBB Team</h1>
+			<h1 class="block__heading__title">The MyBB Team <a href="#team-members" class="team-members-clear-filter">Clear filter</a></h1>
+			<p class="block__heading__subtitle">
+				{% for role in site.data.roles %}
+				{% assign role_name_normalized = role.name | replace: ' ', '-' | downcase %}
+					<a href="#team-members-{{ role_name_normalized }}"><span class="team-role team-role--{{ role_name_normalized }} team-members-button-{{ role_name_normalized }}" data-role-color="{{ role.color }}">{{ role.name }}</span></a>
+				{% endfor %}
+			</p>
 		</header>
 		<div class="team-cards">
 			{% assign sorted_team_data = site.data.team_members | sort:"uid" %}
@@ -52,4 +78,5 @@ <h1 class="block__heading__title">The MyBB Team</h1>
 			{% endfor %}
 		</div>
 	</section>
+	{{ team_cards_divs_close }}
 </div>