diff --git a/client/templates/sections/current-prosecutors/current-prosecutors.html b/client/templates/sections/current-prosecutors/current-prosecutors.html
index 1886e4f4..51b27562 100644
--- a/client/templates/sections/current-prosecutors/current-prosecutors.html
+++ b/client/templates/sections/current-prosecutors/current-prosecutors.html
@@ -1,53 +1,72 @@
 <template name="currentProsecutors">
 
-  <div class="row my-5">
-    <div class="container mx-auto text-center">
-      <h3>Filter by Role</h3>
-      <div class="mx-auto text-left" style="width: fit-content;">
-        {{#each filter in roleFilters}}
-        <div class="checkbox">
-          <label>
-            <input class="role-filter" name={{filter}} type="checkbox">
-            {{filter}}
-          </label>
+    <div class="row my-5">
+        <div class="col-sm">
+            <div class="container mx-auto text-center">
+                <h3>Role</h3>
+                <div class="mx-auto text-left" style="width: fit-content;">
+                    {{#each filter in roleFilters}}
+                        <div class="checkbox">
+                            <label>
+                                <input class="role-filter" name={{filter}} type="checkbox">
+                                {{filter}}
+                            </label>
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+        <div class="col-sm">
+            <div class="container mx-auto text-center">
+                <h3>Race/Ethnicity</h3>
+                <div class="mx-auto text-left" style="width: fit-content;">
+                    {{#each filter in raceFilters}}
+                        <div class="checkbox">
+                            <label>
+                                <input class="race-filter" name={{filter}} type="checkbox">
+                                {{filter}}
+                            </label>
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
         </div>
-        {{/each}}
-      </div>
     </div>
-  </div>
 
-  <div class="container-fluid mx-auto text-center">
-    {{#if attorneys}}
-    <div id="prosecutor-list">
-      <ul>
-        {{#each attorney in attorneys}}
-        <li class="col-sm-6 col-md-4 col-lg-3 single-attorney">
-          <a class="card" href="{{pathFor 'attorneyView' data=attorney}}">
-            <h3 class="card-header">{{attorney.name}}</h3>
-            {{#if attorney.headshot}}
-            <div class="thumbnail" style="background-image:url('{{attorney.headshot}}')"></div>
-            {{else}}
-            <div class="thumbnail" style="background-image:url('images/anon-prosecutor.jpg')"></div>
-            {{/if}}
-            <div class="card-body">
-              <h4 class="card-title">{{attorney.role}}</h4>
-              <h5 class="card-subtitle">{{attorney.state}}</h5>
-              <div class="card-text">
-                {{#if attorney.county}}<p class="card-text">{{attorney.county}}</p>{{/if}}
-                {{#if attorney.district}}<p class="card-text">{{attorney.district}}</p>{{/if}}
-              </div>
+    <div class="container-fluid mx-auto text-center">
+        {{#if attorneys}}
+            <div id="prosecutor-list">
+                <ul>
+                    {{#each attorney in attorneys}}
+                        <li class="col-sm-6 col-md-4 col-lg-3 single-attorney">
+                            <a class="card" href="{{pathFor 'attorneyView' data=attorney}}">
+                                <h3 class="card-header">{{attorney.name}}</h3>
+                                {{#if attorney.headshot}}
+                                    <div class="thumbnail" style="background-image:url('{{attorney.headshot}}')"></div>
+                                {{else}}
+                                    <div class="thumbnail"
+                                         style="background-image:url('images/anon-prosecutor.jpg')"></div>
+                                {{/if}}
+                                <div class="card-body">
+                                    <h4 class="card-title">{{attorney.role}}</h4>
+                                    <h5 class="card-subtitle">{{attorney.state}}</h5>
+                                    <div class="card-text">
+                                        {{#if attorney.county}}<p class="card-text">{{attorney.county}}</p>{{/if}}
+                                        {{#if attorney.district}}<p class="card-text">{{attorney.district}}</p>{{/if}}
+                                    </div>
+                                </div>
+                                <div class="card-footer text-muted">{{#if attorney.appointed}}
+                                    Appointed: <p class="card-text">
+                                    {{formatDate attorney.appointed}}</p>{{/if}}</div>
+                            </a>
+                        </li>
+                    {{/each}}
+                </ul>
             </div>
-            <div class="card-footer text-muted">{{#if attorney.appointed}}Appointed: <p class="card-text">
-                {{formatDate attorney.appointed}}</p>{{/if}}</div>
-          </a>
-        </li>
-        {{/each}}
-      </ul>
+        {{else}}
+            <p>No data available.</p>
+        {{/if}}
     </div>
-    {{else}}
-    <p>No data available.</p>
-    {{/if}}
-  </div>
 
 
 </template>
diff --git a/client/templates/sections/current-prosecutors/currentProsecutors.js b/client/templates/sections/current-prosecutors/currentProsecutors.js
index 0f8e27f5..710e0582 100644
--- a/client/templates/sections/current-prosecutors/currentProsecutors.js
+++ b/client/templates/sections/current-prosecutors/currentProsecutors.js
@@ -1,13 +1,14 @@
-import { Template } from 'meteor/templating';
-import { ReactiveDict } from 'meteor/reactive-dict';
+import {Template} from 'meteor/templating';
+import {ReactiveDict} from 'meteor/reactive-dict';
 
-import { Attorneys } from '../../../../imports/api/attorneys.js';
+import {Attorneys} from '../../../../imports/api/attorneys.js';
 import './current-prosecutors.html';
 
 Template.currentProsecutors.onCreated(function () {
     this.state = new ReactiveDict();
     this.state.setDefault({
-        selectedRoleFilters: []
+        selectedRoleFilters: [],
+        selectedRaceFilters: []
     });
 });
 
@@ -20,11 +21,28 @@ Template.currentProsecutors.helpers({
             'Municipal Attorney'
         ]
     },
+    raceFilters() {
+        return [
+            'American Indian',
+            'Asian',
+            'Black',
+            'Hispanic',
+            'Pacific Islander',
+            'White'
+        ]
+    },
     attorneys() {
         const selectedRoleFilters = Template.instance().state.get("selectedRoleFilters")
-        return selectedRoleFilters.length > 0
-            ? Attorneys.find({ "role": { $in: selectedRoleFilters } }).fetch()
-            : Attorneys.find().fetch()
+        const selectedRaceFilters = Template.instance().state.get("selectedRaceFilters")
+        if (selectedRoleFilters.length > 0 && selectedRaceFilters.length > 0) {
+            return Attorneys.find({"role": {$in: selectedRoleFilters}, "race": {$in: selectedRaceFilters}}).fetch()
+        } else if (selectedRoleFilters.length > 0 && selectedRaceFilters.length === 0) {
+            return Attorneys.find({"role": {$in: selectedRoleFilters}}).fetch()
+        } else if (selectedRoleFilters.length === 0 && selectedRaceFilters.length > 0) {
+            return Attorneys.find({"race": {$in: selectedRaceFilters}}).fetch()
+        } else {
+            return Attorneys.find().fetch()
+        }
     },
 });
 
@@ -36,5 +54,13 @@ Template.currentProsecutors.events({
             ? selectedRoleFilters.filter((value) => value !== filter)
             : [...selectedRoleFilters, filter]
         instance.state.set("selectedRoleFilters", newSelectedRoleFilters)
+    },
+    "change .race-filter"(event, instance) {
+        const filter = event.currentTarget.name
+        const selectedRaceFilters = instance.state.get("selectedRaceFilters")
+        const newSelectedRaceFilters = selectedRaceFilters.includes(filter)
+            ? selectedRaceFilters.filter((value) => value !== filter)
+            : [...selectedRaceFilters, filter]
+        instance.state.set("selectedRaceFilters", newSelectedRaceFilters)
     }
 })
diff --git a/imports/api/attorneys.js b/imports/api/attorneys.js
index b555eccf..367643a0 100644
--- a/imports/api/attorneys.js
+++ b/imports/api/attorneys.js
@@ -1,42 +1,47 @@
-import { Mongo } from 'meteor/mongo';
+import {Mongo} from 'meteor/mongo';
 
 import SimpleSchema from 'simpl-schema';
 
-export const Attorneys = new Mongo.Collection( 'Attorneys' );
+export const Attorneys = new Mongo.Collection('Attorneys');
 
-if ( Meteor.isServer ) {
-  Attorneys._ensureIndex( {
-    name: 1,
-    role: 1,
-    state: 1
-  });
+if (Meteor.isServer) {
+    Attorneys._ensureIndex({
+        name: 1,
+        role: 1,
+        state: 1
+    });
 }
 
 Attorneys.allow({
-  insert: () => false,
-  update: () => false,
-  remove: () => false
+    insert: () => false,
+    update: () => false,
+    remove: () => false
 });
 
 Attorneys.deny({
-  insert: () => true,
-  update: () => true,
-  remove: () => true
+    insert: () => true,
+    update: () => true,
+    remove: () => true
 });
 
 let AttorneysSchema = new SimpleSchema({
-  'name': {
-    type: String,
-    label: 'The name of this attorney.'
-  },
-  'role': {
-    type: String,
-    label: 'The role of this attorney.'
-  },
-  'state': {
-    type: String,
-    label: 'The state of this attorney.'
-  }
+    'name': {
+        type: String,
+        label: 'The name of this attorney.'
+    },
+    'role': {
+        type: String,
+        label: 'The role of this attorney.'
+    },
+    'state': {
+        type: String,
+        label: 'The state of this attorney.'
+    },
+    'race': {
+        type: String,
+        label: 'The race of this attorney.'
+    },
+
 });
 
-Attorneys.attachSchema( AttorneysSchema );
+Attorneys.attachSchema(AttorneysSchema);