diff --git a/src/workbench/controllers/consumer-list.js b/src/workbench/controllers/consumer-list.js
index 376ebe5..020225e 100644
--- a/src/workbench/controllers/consumer-list.js
+++ b/src/workbench/controllers/consumer-list.js
@@ -23,6 +23,7 @@ import {epochToDate} from '../helpers/date-lib.js';
 export default function ConsumerListController(scope, restClient, viewFrame, toast) {
     scope.consumerList = [];
     scope.consumerNext = {offset: ''};
+    scope.consumerFilter = '';
 
     /**
      * Retrieves the list of consumers.
diff --git a/src/workbench/static/css/layout.css b/src/workbench/static/css/layout.css
index 30d99e8..74c3d8d 100644
--- a/src/workbench/static/css/layout.css
+++ b/src/workbench/static/css/layout.css
@@ -128,7 +128,7 @@ body {
     padding: 0;
     overflow: hidden;
     color: var(--default-fg);
-    font-family: "Roboto", sans-serif;
+    font-family: 'Roboto', sans-serif;
     letter-spacing: 0.2px;
     background-color: var(--default-bg);
     animation: fadein 1s;
@@ -146,9 +146,9 @@ hr {
 
 /** =-=-=-=-=-= Form Input Elements =-=-=-=-=-= */
 
-input[type="text"],
-input[type="number"],
-input[type="password"],
+input[type='text'],
+input[type='number'],
+input[type='password'],
 textarea,
 select,
 label.checkbox {
@@ -185,33 +185,33 @@ textarea {
     min-height: 100px;
     width: 100%;
     height: 200px;
-    font-family: "Roboto", sans-serif;
+    font-family: 'Roboto', sans-serif;
 }
 
-input[type="text"]:focus,
-input[type="number"]:focus,
+input[type='text']:focus,
+input[type='number']:focus,
 textarea:focus,
 select:focus,
-input[type="text"]:active,
-input[type="number"]:active,
-input[type="password"]:active,
+input[type='text']:active,
+input[type='number']:active,
+input[type='password']:active,
 textarea:active {
     background-color: var(--widget-tc);
 }
 
-input[type="text"]:focus,
-input[type="number"]:focus,
-input[type="password"]:focus,
+input[type='text']:focus,
+input[type='number']:focus,
+input[type='password']:focus,
 textarea:focus {
     outline-width: 0;
 }
 
-input[type="text"]:read-only,
+input[type='text']:read-only,
 textarea:read-only {
     background-color: var(--widget-bg);
 }
 
-input[type="range"] {
+input[type='range'] {
     display: inline-block;
     width: 100%;
     height: 10px;
@@ -224,7 +224,7 @@ input[type="range"] {
     margin-top: 12px;
 }
 
-input[type="range"]::-webkit-slider-thumb {
+input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 18px;
@@ -235,7 +235,7 @@ input[type="range"]::-webkit-slider-thumb {
     cursor: pointer;
 }
 
-input[type="checkbox"] {
+input[type='checkbox'] {
     position: relative;
     width: 17px;
     height: 17px;
@@ -246,34 +246,34 @@ input[type="checkbox"] {
     color: var(--primary-fg);
 }
 
-input[type="checkbox"]:disabled {
+input[type='checkbox']:disabled {
     border-color: var(--widget-tc);
     color: var(--widget-tc);
 }
 
-input[type="checkbox"]::after {
+input[type='checkbox']::after {
     display: block;
     margin: -1px 0 0 1px;
-    content: "\00a0";
+    content: '\00a0';
 }
 
-input[type="checkbox"]:checked {
+input[type='checkbox']:checked {
     background-color: var(--accent-bg);
     color: var(--accent-fg);
     border-color: var(--accent-bg);
 }
 
-input[type="checkbox"]:disabled:checked {
+input[type='checkbox']:disabled:checked {
     background-color: var(--widget-tc);
     color: var(--default-fg);
     border-color: var(--widget-tc);
 }
 
-input[type="checkbox"]:checked::after {
-    content: "✔";
+input[type='checkbox']:checked::after {
+    content: '✔';
 }
 
-input[type="radio"] {
+input[type='radio'] {
     position: relative;
     width: 20px;
     height: 20px;
@@ -284,25 +284,25 @@ input[type="radio"] {
     text-align: center;
 }
 
-input[type="checkbox"],
-input[type="radio"] {
+input[type='checkbox'],
+input[type='radio'] {
     appearance: none;
     transition: 0.5s;
     -webkit-appearance: none;
     -webkit-transition: 0.5s;
 }
 
-input[type="radio"]::after {
+input[type='radio']::after {
     display: none;
     margin: 2px 1px 1px 1px;
-    content: "\00a0";
+    content: '\00a0';
     background-color: transparent;
     border-radius: 100%;
     width: 12px;
     height: 12px;
 }
 
-input[type="radio"]:checked::after {
+input[type='radio']:checked::after {
     display: inline-block;
     background-color: var(--accent-bg);
     border-color: var(--accent-bg);
@@ -313,7 +313,7 @@ textarea.tx-small {
     height: 100px !important;
 }
 
-input[type="color"] {
+input[type='color'] {
     display: inline-block;
     min-height: 40px;
     min-width: 50px;
@@ -324,11 +324,11 @@ input[type="color"] {
     border-radius: var(--corner-radius);
 }
 
-input[type="color"]::after {
+input[type='color']::after {
     height: 20px;
 }
 
-input[type="color" i] {
+input[type='color' i] {
     background-color: var(--widget-tc);
 }
 
@@ -383,7 +383,7 @@ record-map ul > li {
     padding: 0;
 }
 
-record-map input[type="text"] {
+record-map input[type='text'] {
     display: inline-block;
     width: 50%;
     padding: 8px 5px;
@@ -392,11 +392,11 @@ record-map input[type="text"] {
     border-radius: 0;
 }
 
-record-map input[type="text"]:focus {
+record-map input[type='text']:focus {
     background: transparent none;
 }
 
-record-map input[type="text"]:first-child {
+record-map input[type='text']:first-child {
     border-right-width: 1px;
 }
 
@@ -888,7 +888,7 @@ header#mainHeader {
 
 header#mainHeader::after {
     display: table;
-    content: " ";
+    content: ' ';
     clear: both;
 }
 
@@ -1178,7 +1178,7 @@ footer#mainFooter span.material-icons {
     vertical-align: -2px;
 }
 
-input[type="checkbox"]#chk_ToggleLog + label {
+input[type='checkbox']#chk_ToggleLog + label {
     display: inline-block;
     height: 100%;
     background: transparent none;
@@ -1187,7 +1187,7 @@ input[type="checkbox"]#chk_ToggleLog + label {
     padding: 0 8px;
 }
 
-input[type="checkbox"]#chk_ToggleLog + label:hover {
+input[type='checkbox']#chk_ToggleLog + label:hover {
     background-color: var(--primary-tc);
 }
 
@@ -1267,8 +1267,8 @@ form .form__field ul.field-input > li > label {
     display: inline-block;
 }
 
-form .form__field ul.field-input > li > label > input[type="checkbox"],
-form .form__field ul.field-input > li > label > input[type="radio"] {
+form .form__field ul.field-input > li > label > input[type='checkbox'],
+form .form__field ul.field-input > li > label > input[type='radio'] {
     vertical-align: text-bottom;
 }
 
@@ -1352,7 +1352,7 @@ form div.input-control label.field-label:last-child {
     margin-bottom: 0;
 }
 
-form .form__field .field-input input[type="range"] + .field-input__legend {
+form .form__field .field-input input[type='range'] + .field-input__legend {
     width: 100%;
     display: inline-block;
     text-align: center;
@@ -1583,6 +1583,19 @@ form p.metadata {
     vertical-align: middle;
 }
 
+.well .well__filter {
+    width: 98%;
+    min-height: 40px;
+    padding: 10px;
+    margin: 10px;
+    border: var(--border-size) solid var(--border-fg);
+    border-radius: var(--corner-radius);
+    background-color: var(--widget-bg);
+    color: var(--primary-fg);
+    font-size: 1rem;
+    font-weight: normal;
+}
+
 .well .well__heading a {
     font-size: 1rem;
     vertical-align: middle;
@@ -1697,7 +1710,7 @@ form .row {
 .row::before,
 .row::after {
     display: table;
-    content: " ";
+    content: ' ';
 }
 .row::after {
     clear: both;
diff --git a/src/workbench/static/views/consumer-list.html b/src/workbench/static/views/consumer-list.html
index 6e362a5..30e9d93 100644
--- a/src/workbench/static/views/consumer-list.html
+++ b/src/workbench/static/views/consumer-list.html
@@ -1,35 +1,65 @@
 <!-- ==-==-==-==-== Display this block if no consumers are present. ==-==-==-==-== -->
-<ul data-ng-if="consumerList.length===0" class="hero-placeholder" >
+<ul data-ng-if="consumerList.length===0" class="hero-placeholder">
     <li><span class="material-icons hero">person_pin</span></li>
     <li><strong>Looks like no consumers are present</strong></li>
-    <li>Consumers represents a user of a service.
-        <a target="_blank" href="https://docs.konghq.com/gateway/2.7.x/admin-api/#consumer-object">Learn More <span class="material-icons">launch</span></a>
+    <li>
+        Consumers represents a user of a service.
+        <a target="_blank" href="https://docs.konghq.com/gateway/2.7.x/admin-api/#consumer-object"
+            >Learn More <span class="material-icons">launch</span></a
+        >
     </li>
     <li><a href="#!/consumers/__create__" class="btn">Create Consumer</a></li>
-</ul><!-- .hero-placeholder -->
+</ul>
+<!-- .hero-placeholder -->
 
 <!-- ==-==-==-==-== Display this block only if consumers are present. ==-==-==-==-== -->
 <div data-ng-if="consumerList.length>=1" class="container">
-<div class="well">
-<div class="well__heading">All Consumers</div>
-<table class="data-table">
-    <thead><tr><th title="username or id">Username</th><th title="custom_id">Custom Id</th><th title="created_at">Created On</th><th class="row-actions">Actions</th></tr></thead>
+    <div class="well">
+        <div class="well__heading">All Consumers</div>
+        <input
+            class="well__filter"
+            type="text"
+            name="consumerPrefix"
+            placeholder="Filter..."
+            data-ng-model="consumerFilter" />
+        <table class="data-table">
+            <thead>
+                <tr>
+                    <th title="username or id">Username</th>
+                    <th title="custom_id">Custom Id</th>
+                    <th title="created_at">Created On</th>
+                    <th class="row-actions">Actions</th>
+                </tr>
+            </thead>
 
-    <tbody data-ng-click="deleteTableRow($event)">
-    <tr data-ng-repeat="consumer in consumerList">
-        <td><a href="#!/consumers/{{consumer.id}}">{{consumer.displayText}}</a></td>
-        <td>{{consumer.custom_id}}</td>
-        <td>{{consumer.createdAt}}</td>
-        <td class="row-actions">
-            <a title="Edit Consumer" href="#!/consumers/{{consumer.id}}"><span class="material-icons warning">edit</span></a>
-            <span title="Delete Consumer" class="material-icons critical delete" data-target="consumer" data-endpoint="/consumers/{{consumer.id}}">delete_forever</span>
-        </td>
-    </tr>
-    </tbody>
-</table>
-</div><!-- .well -->
+            <tbody data-ng-click="deleteTableRow($event)">
+                <tr data-ng-repeat="consumer in consumerList | filter: {displayText: consumerFilter}">
+                    <td><a href="#!/consumers/{{consumer.id}}">{{consumer.displayText}}</a></td>
+                    <td>{{consumer.custom_id}}</td>
+                    <td>{{consumer.createdAt}}</td>
+                    <td class="row-actions">
+                        <a title="Edit Consumer" href="#!/consumers/{{consumer.id}}"
+                            ><span class="material-icons warning">edit</span></a
+                        >
+                        <span
+                            title="Delete Consumer"
+                            class="material-icons critical delete"
+                            data-target="consumer"
+                            data-endpoint="/consumers/{{consumer.id}}"
+                            >delete_forever</span
+                        >
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <!-- .well -->
 
-<div data-ng-if="consumerNext.offset.length>=5" class="pagination">
-    <button class="text" data-ng-click="fetchConsumerList(consumerNext)">Load More<span class="material-icons">navigate_next</span></button>
-</div><!-- .pagination -->
-</div><!-- .container -->
+    <div data-ng-if="consumerNext.offset.length>=5" class="pagination">
+        <button class="text" data-ng-click="fetchConsumerList(consumerNext)">
+            Load More<span class="material-icons">navigate_next</span>
+        </button>
+    </div>
+    <!-- .pagination -->
+</div>
+<!-- .container -->