diff --git a/scss/atat.scss b/scss/atat.scss
index 596ed396..f9e7f6aa 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -27,6 +27,7 @@
 @import 'components/modal';
 @import 'components/footer';
 @import 'components/progress_menu.scss';
+@import 'components/search_bar';
 
 @import 'sections/login';
 @import 'sections/request_approval';
diff --git a/scss/components/_search_bar.scss b/scss/components/_search_bar.scss
new file mode 100644
index 00000000..f5c031f8
--- /dev/null
+++ b/scss/components/_search_bar.scss
@@ -0,0 +1,72 @@
+.search-bar {
+  @include grid-row;
+  @include panel-base;
+  @include panel-theme-default;
+  @include panel-margin;
+  padding: $gap;
+  flex-wrap: wrap;
+
+  .usa-input {
+    margin: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    height: $search-input-height;
+    position: relative;
+    margin-top: $gap;
+
+    @include media($large-screen) {
+      flex-shrink: 1;
+      flex-basis: auto;
+      margin-top: 0;
+      margin-left: $gap;
+    }
+
+    label {
+      @include hide;
+    }
+
+    &:first-child {
+      margin-left: 0;
+      margin-top: 0;
+    }
+  }
+
+  .search-input {
+    @include media($medium-screen) {
+      flex-basis: 50%;
+    }
+
+    @media (min-width:800px) and (max-width:900px) {
+      flex-basis: auto;
+    }
+
+    input[type='search'] {
+      width: auto;
+      height: $search-input-height;
+      width: calc(100% - #{$search-button-width});
+      max-width: none;
+      font-size: 1.6rem;
+    }
+
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      height: $search-input-height;
+      width: $search-button-width;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      text-align: center;
+
+      &:after {
+        content: url('/static/icons/search.svg');
+        display: inline-block;
+        width: 1.6rem;
+        height: 1.6rem;
+      }
+    }
+  }
+}
diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss
index 7bc7d759..79c0e759 100644
--- a/scss/core/_variables.scss
+++ b/scss/core/_variables.scss
@@ -8,6 +8,8 @@ $topbar-height:           4.8rem;
 $icon-bar-width:          4.0rem;
 $icon-size-small:         2.4rem;
 $hover-transition-time:   0.2s;
+$search-input-height:     4.4rem;
+$search-button-width:     5.0rem;
 
 /*
  * USWDS Variables
diff --git a/static/icons/search.svg b/static/icons/search.svg
index 4d22f4df..691cf79d 100644
--- a/static/icons/search.svg
+++ b/static/icons/search.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1 15l5.465-5.465M1 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l5.465-5.465c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-5.465 5.465C1.512 15.902 1.256 16 1 16zm9-4c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm0-10C7.794 2 6 3.794 6 6s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1 15l5.465-5.465M1 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l5.465-5.465c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-5.465 5.465C1.512 15.902 1.256 16 1 16zm9-4c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm0-10C7.794 2 6 3.794 6 6s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z" fill="#fff" fill-rule="nonzero"/></svg>
diff --git a/templates/requests.html.to b/templates/requests.html.to
index 756c4bbc..66dbcd9d 100644
--- a/templates/requests.html.to
+++ b/templates/requests.html.to
@@ -38,27 +38,25 @@
 
 <div class="col col--grow">
 
-  <div class='panel panel__actions'>
-    <div class='row'>
-      <div class='col col--grow col--pad'>
-        <form class="usa-search usa-search-small">
-          <label class="usa-sr-only" for="search-field-small">Search small</label>
-          <input id="search-field-small" type="search" name="search" placeholder="Search by Order ID">
-          <button type="submit">
-            <span class="usa-sr-only">Search</span>
-          </button>
-        </form>
-      </div>
-      <div class='col col--grow col--pad'>
-        <select id="filter_status" name="filter_status" required="">
-          <option value="" selected disabled>Filter by status</option>
-          <option value="">Active</option>
-          <option value="">Pending</option>
-          <option value="">Denied</option>
-        </select>
-      </div>
+  <form class='search-bar'>
+    <div class='usa-input search-input'>
+      <label for='requests-search'>Search requests by Order ID</label>
+      <input type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/>
+      <button type="submit">
+        <span class="hide">Search</span>
+      </button>
     </div>
-  </div>
+
+    <div class='usa-input'>
+      <label for='filter-status'>Filter requests by status</label>
+      <select id="filter-status" name="filter-status">
+        <option value="" selected disabled>Filter by status</option>
+        <option value="">Active</option>
+        <option value="">Pending</option>
+        <option value="">Denied</option>
+      </select>
+    </div>
+  </form>
 
   <div class='responsive-table-wrapper'>
     <table>
diff --git a/templates/workspace_members.html.to b/templates/workspace_members.html.to
index c32e292c..a27a0b0b 100644
--- a/templates/workspace_members.html.to
+++ b/templates/workspace_members.html.to
@@ -3,7 +3,37 @@
 {% block workspace_content %}
 
 
-<div class='panel panel__actions'>
+<form class='search-bar'>
+  <div class='usa-input search-input'>
+    <label for='members-search'>Search members by name</label>
+    <input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
+    <button type="submit">
+      <span class="hide">Search</span>
+    </button>
+  </div>
+
+  <div class='usa-input filter-input'>
+    <label for='filter-status'>Filter members by status</label>
+    <select id="filter-status" name="filter-status">
+      <option value="" selected disabled>Filter by status</option>
+      <option value="">Active</option>
+      <option value="">Pending</option>
+      <option value="">Denied</option>
+    </select>
+  </div>
+
+  <div class='usa-input filter-input'>
+    <label for='filter-role'>Filter members by role</label>
+    <select id="filter-role" name="filter-role">
+      <option value="" selected disabled>Filter by role</option>
+      <option value="">Admin</option>
+      <option value="">CCPO</option>
+      <option value="">Developer</option>
+    </select>
+  </div>
+</form>
+
+{# <div class='panel panel__actions'>
   <div class='row'>
     <div class='col col--grow col--pad'>
       <form class="usa-search usa-search-small">
@@ -31,32 +61,32 @@
       </select>
     </div>
   </div>
+</div> #}
+
+
+<div class='responsive-table-wrapper'>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col" width="50%">Name</th>
+        <th scope="col" class='table-cell--shrink'>&nbsp;<span class="hide">Status Flag</span></th>
+        <th scope="col">Status</th>
+        <th scope="col">Workspace Role</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for m in members %}
+      <tr>
+        <td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
+        <td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
+        <td>{{ m['status'] }}</a></td>
+        <td>{{ m['workspace_role'] }}</a></td>
+      </tr>
+      {% end %}
+    </tbody>
+  </table>
 </div>
 
-<div class="panel">
-  <div class='responsive-table-wrapper'>
-    <table>
-      <thead>
-        <tr>
-          <th scope="col" width="50%">Name</th>
-          <th scope="col" class='table-cell--shrink'>&nbsp;<span class="hide">Status Flag</span></th>
-          <th scope="col">Status</th>
-          <th scope="col">Workspace Role</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for m in members %}
-        <tr>
-          <td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
-          <td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
-          <td>{{ m['status'] }}</a></td>
-          <td>{{ m['workspace_role'] }}</a></td>
-        </tr>
-        {% end %}
-      </tbody>
-    </table>
-  </div>
-</div>
 
 
 {% end %}