diff --git a/ui/src/__tests__/components/header/__snapshots__/Header.test.js.snap b/ui/src/__tests__/components/header/__snapshots__/Header.test.js.snap
index 9699a423924..749e7a47070 100644
--- a/ui/src/__tests__/components/header/__snapshots__/Header.test.js.snap
+++ b/ui/src/__tests__/components/header/__snapshots__/Header.test.js.snap
@@ -637,6 +637,25 @@ exports[`Header should render with search 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -650,7 +669,7 @@ exports[`Header should render with search 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -676,42 +695,42 @@ exports[`Header should render with search 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -719,51 +738,22 @@ exports[`Header should render with search 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -774,29 +764,41 @@ exports[`Header should render with search 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
@@ -829,40 +831,102 @@ exports[`Header should render with search 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-9 denali-input animated"
-          data-testid="input-wrapper"
+          class="emotion-9 emotion-10"
         >
-          <input
-            autocomplete="off"
-            data-testid="input-node"
-            name="search"
-            placeholder="Enter domain name"
-            value=""
-          />
           <div
-            class="input-icon"
+            class="emotion-11 emotion-12"
           >
-            <svg
-              class="emotion-10"
-              data-testid="icon"
-              data-wdio=""
-              height="24px"
-              id=""
-              viewBox="0 0 1024 1024"
-              width="24px"
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-labelledby="downshift-0-label"
+              class="emotion-13 denali-input-dropdown"
+              data-testid="input-dropdown"
+              role="combobox"
             >
-              <title>
-                search
-              </title>
-              <path
-                d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-              />
-            </svg>
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-labelledby="downshift-0-label"
+                  autocomplete="off"
+                  autocorrect="off"
+                  data-testid="input-node"
+                  id="downshift-0-input"
+                  name="search-type"
+                  readonly=""
+                  spellcheck="false"
+                  value="Domain"
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-15"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      arrowhead-down
+                    </title>
+                    <path
+                      d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
           <div
-            class="message"
-            data-testid="message"
-          />
+            class="emotion-16 emotion-17"
+          >
+            <div
+              class="emotion-14 denali-input animated"
+              data-testid="input-wrapper"
+            >
+              <input
+                autocomplete="off"
+                data-testid="input-node"
+                name="search-text"
+                placeholder="Search"
+                value=""
+              />
+              <div
+                class="input-icon"
+              >
+                <svg
+                  class="emotion-19"
+                  data-testid="icon"
+                  data-wdio=""
+                  height="24px"
+                  id=""
+                  viewBox="0 0 1024 1024"
+                  width="24px"
+                >
+                  <title>
+                    search
+                  </title>
+                  <path
+                    d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                  />
+                </svg>
+              </div>
+              <div
+                class="message"
+                data-testid="message"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -871,11 +935,11 @@ exports[`Header should render with search 1`] = `
       data-testid="navbar-item"
     >
       <div
-        class="emotion-12 emotion-13"
+        class="emotion-21 emotion-22"
         data-testid="header-menu"
       >
         <svg
-          class="emotion-14"
+          class="emotion-23"
           data-testid="icon"
           data-wdio=""
           height="25px"
@@ -891,13 +955,13 @@ exports[`Header should render with search 1`] = `
           />
         </svg>
         <div
-          class="emotion-15 emotion-16"
+          class="emotion-24 emotion-25"
         />
         <div
-          class="emotion-17 emotion-18"
+          class="emotion-26 emotion-27"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
diff --git a/ui/src/__tests__/pages/__snapshots__/index.test.js.snap b/ui/src/__tests__/pages/__snapshots__/index.test.js.snap
index d65eacae6db..fcba10155a3 100644
--- a/ui/src/__tests__/pages/__snapshots__/index.test.js.snap
+++ b/ui/src/__tests__/pages/__snapshots__/index.test.js.snap
@@ -365,6 +365,25 @@ exports[`Home should render 1`] = `
 }
 
 .emotion-36 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-38 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-40 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-40 input {
+  cursor: pointer;
+}
+
+.emotion-41 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -378,7 +397,7 @@ exports[`Home should render 1`] = `
   width: 100%;
 }
 
-.emotion-36 input {
+.emotion-41 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -404,42 +423,42 @@ exports[`Home should render 1`] = `
   width: 100%;
 }
 
-.emotion-36.animated input {
+.emotion-41.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-36 input::-webkit-input-placeholder {
+.emotion-41 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-36 input::-moz-placeholder {
+.emotion-41 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-36 input:-ms-input-placeholder {
+.emotion-41 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-36 input::placeholder {
+.emotion-41 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-36 input.focused,
-.emotion-36 input:active,
-.emotion-36 input:focus {
+.emotion-41 input.focused,
+.emotion-41 input:active,
+.emotion-41 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-36 input:invalid {
+.emotion-41 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-36 .message {
+.emotion-41 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -447,22 +466,22 @@ exports[`Home should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-36.error input,
-.emotion-36.error input.focused,
-.emotion-36.error input:active,
-.emotion-36.error input:focus {
+.emotion-41.error input,
+.emotion-41.error input.focused,
+.emotion-41.error input:active,
+.emotion-41.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-36.error .message {
+.emotion-41.error .message {
   color: #d01111;
 }
 
-.emotion-36 input {
+.emotion-41 input {
   padding-right: 36px;
 }
 
-.emotion-36 .input-icon {
+.emotion-41 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -473,13 +492,25 @@ exports[`Home should render 1`] = `
   right: 6px;
 }
 
-.emotion-37 {
+.emotion-42 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-43 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-46 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-38 {
+.emotion-47 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -502,13 +533,13 @@ exports[`Home should render 1`] = `
   width: 20px;
 }
 
-.emotion-40 {
+.emotion-49 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-41 {
+.emotion-50 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -523,7 +554,7 @@ exports[`Home should render 1`] = `
   width: 350px;
 }
 
-.emotion-43 {
+.emotion-52 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -539,38 +570,38 @@ exports[`Home should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-45 {
+.emotion-54 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-47 {
+.emotion-56 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-49 {
+.emotion-58 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-53 {
+.emotion-62 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-55 {
+.emotion-64 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-59 {
+.emotion-68 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -704,40 +735,102 @@ exports[`Home should render 1`] = `
             class="emotion-34 emotion-35"
           >
             <div
-              class="emotion-36 denali-input animated"
-              data-testid="input-wrapper"
+              class="emotion-36 emotion-37"
             >
-              <input
-                autocomplete="off"
-                data-testid="input-node"
-                name="search"
-                placeholder="Enter domain name"
-                value=""
-              />
               <div
-                class="input-icon"
+                class="emotion-38 emotion-39"
               >
-                <svg
-                  class="emotion-37"
-                  data-testid="icon"
-                  data-wdio=""
-                  height="24px"
-                  id=""
-                  viewBox="0 0 1024 1024"
-                  width="24px"
+                <div
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-labelledby="downshift-1-label"
+                  class="emotion-40 denali-input-dropdown"
+                  data-testid="input-dropdown"
+                  role="combobox"
                 >
-                  <title>
-                    search
-                  </title>
-                  <path
-                    d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                  />
-                </svg>
+                  <div
+                    class="emotion-41 denali-input animated"
+                    data-testid="input-wrapper"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-labelledby="downshift-1-label"
+                      autocomplete="off"
+                      autocorrect="off"
+                      data-testid="input-node"
+                      id="downshift-1-input"
+                      name="search-type"
+                      readonly=""
+                      spellcheck="false"
+                      value="Domain"
+                    />
+                    <div
+                      class="input-icon"
+                    >
+                      <svg
+                        class="emotion-42"
+                        data-testid="icon"
+                        data-wdio=""
+                        height="24px"
+                        id=""
+                        viewBox="0 0 1024 1024"
+                        width="24px"
+                      >
+                        <title>
+                          arrowhead-down
+                        </title>
+                        <path
+                          d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="message"
+                      data-testid="message"
+                    />
+                  </div>
+                </div>
               </div>
               <div
-                class="message"
-                data-testid="message"
-              />
+                class="emotion-43 emotion-44"
+              >
+                <div
+                  class="emotion-41 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    autocomplete="off"
+                    data-testid="input-node"
+                    name="search-text"
+                    placeholder="Search"
+                    value=""
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-46"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        search
+                      </title>
+                      <path
+                        d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -746,11 +839,11 @@ exports[`Home should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-38 emotion-39"
+          class="emotion-47 emotion-48"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-40"
+            class="emotion-49"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -767,30 +860,30 @@ exports[`Home should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-41 emotion-42"
+          class="emotion-50 emotion-51"
         >
           <div
-            class="emotion-43 emotion-44"
+            class="emotion-52 emotion-53"
           >
             <div
-              class="emotion-45 emotion-46"
+              class="emotion-54 emotion-55"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-47 emotion-48"
+                class="emotion-56 emotion-57"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-49 emotion-50"
+                class="emotion-58 emotion-59"
               >
                  | 
               </span>
               <a
-                class="emotion-47 emotion-48"
+                class="emotion-56 emotion-57"
                 href="/domain/manage"
               >
                 Manage
@@ -798,16 +891,16 @@ exports[`Home should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-53 emotion-54"
+            class="emotion-62 emotion-63"
           >
             <div
-              class="emotion-55 emotion-56"
+              class="emotion-64 emotion-65"
             >
               <div
-                class="emotion-57 emotion-58"
+                class="emotion-66 emotion-67"
               >
                 <svg
-                  class="emotion-59"
+                  class="emotion-68"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -830,20 +923,20 @@ exports[`Home should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-47 emotion-48"
+                class="emotion-56 emotion-57"
                 href="/domain/dom1/role"
               >
                 dom1
               </a>
             </div>
             <div
-              class="emotion-55 emotion-56"
+              class="emotion-64 emotion-65"
             >
               <div
-                class="emotion-57 emotion-58"
+                class="emotion-66 emotion-67"
               >
                 <svg
-                  class="emotion-59"
+                  class="emotion-68"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -866,7 +959,7 @@ exports[`Home should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-47 emotion-48"
+                class="emotion-56 emotion-57"
                 href="/domain/dom2/role"
               >
                 dom2
@@ -1354,6 +1447,35 @@ exports[`Home should render 2`] = `
 }
 
 .emotion-36 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-36 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-38 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-38 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-40 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-40 input {
+  cursor: pointer;
+}
+
+.emotion-41 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -1367,7 +1489,7 @@ exports[`Home should render 2`] = `
   width: 100%;
 }
 
-.emotion-36 input {
+.emotion-41 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -1393,42 +1515,42 @@ exports[`Home should render 2`] = `
   width: 100%;
 }
 
-.emotion-36.animated input {
+.emotion-41.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-36 input::-webkit-input-placeholder {
+.emotion-41 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-36 input::-moz-placeholder {
+.emotion-41 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-36 input:-ms-input-placeholder {
+.emotion-41 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-36 input::placeholder {
+.emotion-41 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-36 input.focused,
-.emotion-36 input:active,
-.emotion-36 input:focus {
+.emotion-41 input.focused,
+.emotion-41 input:active,
+.emotion-41 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-36 input:invalid {
+.emotion-41 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-36 .message {
+.emotion-41 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -1436,22 +1558,22 @@ exports[`Home should render 2`] = `
   top: 2.571rem;
 }
 
-.emotion-36.error input,
-.emotion-36.error input.focused,
-.emotion-36.error input:active,
-.emotion-36.error input:focus {
+.emotion-41.error input,
+.emotion-41.error input.focused,
+.emotion-41.error input:active,
+.emotion-41.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-36.error .message {
+.emotion-41.error .message {
   color: #d01111;
 }
 
-.emotion-36 input {
+.emotion-41 input {
   padding-right: 36px;
 }
 
-.emotion-36 .input-icon {
+.emotion-41 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1462,13 +1584,31 @@ exports[`Home should render 2`] = `
   right: 6px;
 }
 
-.emotion-37 {
+.emotion-42 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-43 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-43 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-46 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-38 {
+.emotion-47 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1491,7 +1631,7 @@ exports[`Home should render 2`] = `
   width: 20px;
 }
 
-.emotion-38 {
+.emotion-47 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1514,13 +1654,13 @@ exports[`Home should render 2`] = `
   width: 20px;
 }
 
-.emotion-40 {
+.emotion-49 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-41 {
+.emotion-50 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -1535,7 +1675,7 @@ exports[`Home should render 2`] = `
   width: 350px;
 }
 
-.emotion-41 {
+.emotion-50 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -1550,7 +1690,7 @@ exports[`Home should render 2`] = `
   width: 350px;
 }
 
-.emotion-43 {
+.emotion-52 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -1566,7 +1706,7 @@ exports[`Home should render 2`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-43 {
+.emotion-52 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -1582,69 +1722,69 @@ exports[`Home should render 2`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-45 {
+.emotion-54 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-45 {
+.emotion-54 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-47 {
+.emotion-56 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-47 {
+.emotion-56 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-49 {
+.emotion-58 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-49 {
+.emotion-58 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-53 {
+.emotion-62 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-53 {
+.emotion-62 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-55 {
+.emotion-64 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-55 {
+.emotion-64 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-59 {
+.emotion-68 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -1778,40 +1918,102 @@ exports[`Home should render 2`] = `
             class="emotion-34 emotion-35"
           >
             <div
-              class="emotion-36 denali-input animated"
-              data-testid="input-wrapper"
+              class="emotion-36 emotion-37"
             >
-              <input
-                autocomplete="off"
-                data-testid="input-node"
-                name="search"
-                placeholder="Enter domain name"
-                value=""
-              />
               <div
-                class="input-icon"
+                class="emotion-38 emotion-39"
               >
-                <svg
-                  class="emotion-37"
-                  data-testid="icon"
-                  data-wdio=""
-                  height="24px"
-                  id=""
-                  viewBox="0 0 1024 1024"
-                  width="24px"
+                <div
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-labelledby="downshift-3-label"
+                  class="emotion-40 denali-input-dropdown"
+                  data-testid="input-dropdown"
+                  role="combobox"
                 >
-                  <title>
-                    search
-                  </title>
-                  <path
-                    d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                  />
-                </svg>
+                  <div
+                    class="emotion-41 denali-input animated"
+                    data-testid="input-wrapper"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-labelledby="downshift-3-label"
+                      autocomplete="off"
+                      autocorrect="off"
+                      data-testid="input-node"
+                      id="downshift-3-input"
+                      name="search-type"
+                      readonly=""
+                      spellcheck="false"
+                      value="Domain"
+                    />
+                    <div
+                      class="input-icon"
+                    >
+                      <svg
+                        class="emotion-42"
+                        data-testid="icon"
+                        data-wdio=""
+                        height="24px"
+                        id=""
+                        viewBox="0 0 1024 1024"
+                        width="24px"
+                      >
+                        <title>
+                          arrowhead-down
+                        </title>
+                        <path
+                          d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="message"
+                      data-testid="message"
+                    />
+                  </div>
+                </div>
               </div>
               <div
-                class="message"
-                data-testid="message"
-              />
+                class="emotion-43 emotion-44"
+              >
+                <div
+                  class="emotion-41 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    autocomplete="off"
+                    data-testid="input-node"
+                    name="search-text"
+                    placeholder="Search"
+                    value=""
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-46"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        search
+                      </title>
+                      <path
+                        d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -1820,11 +2022,11 @@ exports[`Home should render 2`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-38 emotion-39"
+          class="emotion-47 emotion-48"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-40"
+            class="emotion-49"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1841,30 +2043,30 @@ exports[`Home should render 2`] = `
           </svg>
         </div>
         <div
-          class="emotion-41 emotion-42"
+          class="emotion-50 emotion-51"
         >
           <div
-            class="emotion-43 emotion-44"
+            class="emotion-52 emotion-53"
           >
             <div
-              class="emotion-45 emotion-46"
+              class="emotion-54 emotion-55"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-47 emotion-48"
+                class="emotion-56 emotion-57"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-49 emotion-50"
+                class="emotion-58 emotion-59"
               >
                  | 
               </span>
               <a
-                class="emotion-47 emotion-48"
+                class="emotion-56 emotion-57"
                 href="/domain/manage"
               >
                 Manage
@@ -1872,16 +2074,16 @@ exports[`Home should render 2`] = `
             </div>
           </div>
           <div
-            class="emotion-53 emotion-54"
+            class="emotion-62 emotion-63"
           >
             <div
-              class="emotion-55 emotion-56"
+              class="emotion-64 emotion-65"
             >
               <div
-                class="emotion-57 emotion-58"
+                class="emotion-66 emotion-67"
               >
                 <svg
-                  class="emotion-59"
+                  class="emotion-68"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1904,20 +2106,20 @@ exports[`Home should render 2`] = `
                 </svg>
               </div>
               <a
-                class="emotion-47 emotion-48"
+                class="emotion-56 emotion-57"
                 href="/domain/dom1/role"
               >
                 dom1
               </a>
             </div>
             <div
-              class="emotion-55 emotion-56"
+              class="emotion-64 emotion-65"
             >
               <div
-                class="emotion-57 emotion-58"
+                class="emotion-66 emotion-67"
               >
                 <svg
-                  class="emotion-59"
+                  class="emotion-68"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1940,7 +2142,7 @@ exports[`Home should render 2`] = `
                 </svg>
               </div>
               <a
-                class="emotion-47 emotion-48"
+                class="emotion-56 emotion-57"
                 href="/domain/dom2/role"
               >
                 dom2
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/domain-settings.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/domain-settings.test.js.snap
index dd4140b3cd9..6293a3bd11a 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/domain-settings.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/domain-settings.test.js.snap
@@ -265,6 +265,25 @@ exports[`DomainSettingsPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`DomainSettingsPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`DomainSettingsPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`DomainSettingsPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`DomainSettingsPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`DomainSettingsPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`DomainSettingsPage should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`DomainSettingsPage should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`DomainSettingsPage should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`DomainSettingsPage should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`DomainSettingsPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`DomainSettingsPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-85 {
+.emotion-94 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -669,7 +671,7 @@ exports[`DomainSettingsPage should render 1`] = `
   position: relative;
 }
 
-.emotion-85.vertical {
+.emotion-94.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -682,7 +684,7 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-86 {
+.emotion-95 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -703,11 +705,11 @@ exports[`DomainSettingsPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-86:hover {
+.emotion-95:hover {
   color: #3570f4;
 }
 
-.emotion-86.active {
+.emotion-95.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -715,11 +717,11 @@ exports[`DomainSettingsPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-86.active:hover {
+.emotion-95.active:hover {
   color: #303030;
 }
 
-.emotion-86.vertical {
+.emotion-95.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -731,21 +733,21 @@ exports[`DomainSettingsPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-86.vertical.active {
+.emotion-95.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-86.vertical.active:hover {
+.emotion-95.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-95 {
+.emotion-104 {
   margin: 20px;
 }
 
-.emotion-97 {
+.emotion-106 {
   width: 100%;
   border-spacing: 0 20px;
   display: table;
@@ -753,7 +755,7 @@ exports[`DomainSettingsPage should render 1`] = `
   border-color: grey;
 }
 
-.emotion-99 {
+.emotion-108 {
   box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 1px 4px #d9d9d9;
@@ -763,7 +765,7 @@ exports[`DomainSettingsPage should render 1`] = `
   height: 50px;
 }
 
-.emotion-101 {
+.emotion-110 {
   text-align: left;
   width: auto;
   padding: 5px 0 5px 15px;
@@ -771,11 +773,11 @@ exports[`DomainSettingsPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-105 {
+.emotion-114 {
   display: flex;
 }
 
-.emotion-107 {
+.emotion-116 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -789,7 +791,7 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-107 input {
+.emotion-116 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -815,42 +817,42 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-107.animated input {
+.emotion-116.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-107 input::-webkit-input-placeholder {
+.emotion-116 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-107 input::-moz-placeholder {
+.emotion-116 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-107 input:-ms-input-placeholder {
+.emotion-116 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-107 input::placeholder {
+.emotion-116 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-107 input.focused,
-.emotion-107 input:active,
-.emotion-107 input:focus {
+.emotion-116 input.focused,
+.emotion-116 input:active,
+.emotion-116 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-107 input:invalid {
+.emotion-116 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-107 .message {
+.emotion-116 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -858,22 +860,22 @@ exports[`DomainSettingsPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-107.error input,
-.emotion-107.error input.focused,
-.emotion-107.error input:active,
-.emotion-107.error input:focus {
+.emotion-116.error input,
+.emotion-116.error input.focused,
+.emotion-116.error input:active,
+.emotion-116.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-107.error .message {
+.emotion-116.error .message {
   color: #d01111;
 }
 
-.emotion-108 {
+.emotion-117 {
   margin-top: 5px;
 }
 
-.emotion-164 {
+.emotion-173 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -889,7 +891,7 @@ exports[`DomainSettingsPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-166 {
+.emotion-175 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -914,25 +916,25 @@ exports[`DomainSettingsPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-166:first-of-type {
+.emotion-175:first-of-type {
   margin-left: 0;
 }
 
-.emotion-166:disabled {
+.emotion-175:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-166:disabled {
+.emotion-175:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-166:hover:not(:disabled) {
+.emotion-175:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-168 {
+.emotion-177 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -955,13 +957,13 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-170 {
+.emotion-179 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-171 {
+.emotion-180 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -976,7 +978,7 @@ exports[`DomainSettingsPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-173 {
+.emotion-182 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -992,38 +994,38 @@ exports[`DomainSettingsPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-175 {
+.emotion-184 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-177 {
+.emotion-186 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-179 {
+.emotion-188 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-183 {
+.emotion-192 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-185 {
+.emotion-194 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-187 {
+.emotion-196 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-189 {
+.emotion-198 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -1061,40 +1063,102 @@ exports[`DomainSettingsPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1103,11 +1167,11 @@ exports[`DomainSettingsPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1123,13 +1187,13 @@ exports[`DomainSettingsPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1156,33 +1220,33 @@ exports[`DomainSettingsPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 dom
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1200,72 +1264,72 @@ exports[`DomainSettingsPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1282,49 +1346,49 @@ exports[`DomainSettingsPage should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1346,59 +1410,59 @@ exports[`DomainSettingsPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-85 denali-tab-group"
+              class="emotion-94 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Groups
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Services
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Policies
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Templates
               </div>
               <div
-                class="emotion-86 denali-tab active"
+                class="emotion-95 denali-tab active"
                 data-active="true"
               >
                 Settings
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Visibility
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 History
@@ -1406,32 +1470,32 @@ exports[`DomainSettingsPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-95 emotion-96"
+            class="emotion-104 emotion-105"
           >
             <table
-              class="emotion-97 emotion-98"
+              class="emotion-106 emotion-107"
               data-testid="setting-table"
             >
               <tbody>
                 <tr
-                  class="emotion-99 emotion-100"
+                  class="emotion-108 emotion-109"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     User Expiry (Days)
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     <div
-                      class="emotion-105 emotion-106"
+                      class="emotion-114 emotion-115"
                     >
                       <div
-                        class="emotion-107 denali-input animated emotion-108 emotion-109"
+                        class="emotion-116 denali-input animated emotion-117 emotion-118"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1450,31 +1514,31 @@ exports[`DomainSettingsPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     All user members in the domain will have specified max expiry days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-99 emotion-100"
+                  class="emotion-108 emotion-109"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     Group Expiry (Days)
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     <div
-                      class="emotion-105 emotion-106"
+                      class="emotion-114 emotion-115"
                     >
                       <div
-                        class="emotion-107 denali-input animated emotion-108 emotion-109"
+                        class="emotion-116 denali-input animated emotion-117 emotion-118"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1493,31 +1557,31 @@ exports[`DomainSettingsPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     All group members in the domain will have specified max expiry days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-99 emotion-100"
+                  class="emotion-108 emotion-109"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     Service Expiry (Days)
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     <div
-                      class="emotion-105 emotion-106"
+                      class="emotion-114 emotion-115"
                     >
                       <div
-                        class="emotion-107 denali-input animated emotion-108 emotion-109"
+                        class="emotion-116 denali-input animated emotion-117 emotion-118"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1536,31 +1600,31 @@ exports[`DomainSettingsPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     All services in the domain will have specified max expiry days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-99 emotion-100"
+                  class="emotion-108 emotion-109"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     Token Expiry (Mins)
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     <div
-                      class="emotion-105 emotion-106"
+                      class="emotion-114 emotion-115"
                     >
                       <div
-                        class="emotion-107 denali-input animated emotion-108 emotion-109"
+                        class="emotion-116 denali-input animated emotion-117 emotion-118"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1579,31 +1643,31 @@ exports[`DomainSettingsPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     Tokens issued for this domain will have specified max timeout in mins
                   </td>
                 </tr>
                 <tr
-                  class="emotion-99 emotion-100"
+                  class="emotion-108 emotion-109"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     Role Certificate Expiry (Mins)
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     <div
-                      class="emotion-105 emotion-106"
+                      class="emotion-114 emotion-115"
                     >
                       <div
-                        class="emotion-107 denali-input animated emotion-108 emotion-109"
+                        class="emotion-116 denali-input animated emotion-117 emotion-118"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1622,7 +1686,7 @@ exports[`DomainSettingsPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-101 emotion-102"
+                    class="emotion-110 emotion-111"
                     width="auto"
                   >
                     Role Certs issued for this domain will have specified max timeout in mins
@@ -1631,17 +1695,17 @@ exports[`DomainSettingsPage should render 1`] = `
               </tbody>
             </table>
             <div
-              class="emotion-164 emotion-165"
+              class="emotion-173 emotion-174"
             >
               <div>
                 <button
-                  class="emotion-166 denali-button"
+                  class="emotion-175 denali-button"
                   disabled=""
                 >
                   Submit
                 </button>
                 <button
-                  class="emotion-166 denali-button"
+                  class="emotion-175 denali-button"
                 >
                   Reset
                 </button>
@@ -1654,11 +1718,11 @@ exports[`DomainSettingsPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-168 emotion-169"
+          class="emotion-177 emotion-178"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-170"
+            class="emotion-179"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1675,30 +1739,30 @@ exports[`DomainSettingsPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-171 emotion-172"
+          class="emotion-180 emotion-181"
         >
           <div
-            class="emotion-173 emotion-174"
+            class="emotion-182 emotion-183"
           >
             <div
-              class="emotion-175 emotion-176"
+              class="emotion-184 emotion-185"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-177 emotion-178"
+                class="emotion-186 emotion-187"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-179 emotion-180"
+                class="emotion-188 emotion-189"
               >
                  | 
               </span>
               <a
-                class="emotion-177 emotion-178"
+                class="emotion-186 emotion-187"
                 href="/domain/manage"
               >
                 Manage
@@ -1706,16 +1770,16 @@ exports[`DomainSettingsPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-183 emotion-184"
+            class="emotion-192 emotion-193"
           >
             <div
-              class="emotion-185 emotion-186"
+              class="emotion-194 emotion-195"
             >
               <div
-                class="emotion-187 emotion-188"
+                class="emotion-196 emotion-197"
               >
                 <svg
-                  class="emotion-189"
+                  class="emotion-198"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1738,20 +1802,20 @@ exports[`DomainSettingsPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-177 emotion-178"
+                class="emotion-186 emotion-187"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-185 emotion-186"
+              class="emotion-194 emotion-195"
             >
               <div
-                class="emotion-187 emotion-188"
+                class="emotion-196 emotion-197"
               >
                 <svg
-                  class="emotion-189"
+                  class="emotion-198"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1774,7 +1838,7 @@ exports[`DomainSettingsPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-177 emotion-178"
+                class="emotion-186 emotion-187"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/group.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/group.test.js.snap
index b267abd9b04..fe679131084 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/group.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/group.test.js.snap
@@ -265,6 +265,25 @@ exports[`GroupPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`GroupPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`GroupPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`GroupPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`GroupPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`GroupPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`GroupPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`GroupPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`GroupPage should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`GroupPage should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`GroupPage should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`GroupPage should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`GroupPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`GroupPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`GroupPage should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`GroupPage should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-85 {
+.emotion-94 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -669,7 +671,7 @@ exports[`GroupPage should render 1`] = `
   position: relative;
 }
 
-.emotion-85.vertical {
+.emotion-94.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -682,7 +684,7 @@ exports[`GroupPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-86 {
+.emotion-95 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -703,11 +705,11 @@ exports[`GroupPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-86:hover {
+.emotion-95:hover {
   color: #3570f4;
 }
 
-.emotion-86.active {
+.emotion-95.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -715,11 +717,11 @@ exports[`GroupPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-86.active:hover {
+.emotion-95.active:hover {
   color: #303030;
 }
 
-.emotion-86.vertical {
+.emotion-95.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -731,21 +733,21 @@ exports[`GroupPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-86.vertical.active {
+.emotion-95.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-86.vertical.active:hover {
+.emotion-95.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-95 {
+.emotion-104 {
   margin: 20px;
 }
 
-.emotion-97 {
+.emotion-106 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -761,11 +763,11 @@ exports[`GroupPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-99 {
+.emotion-108 {
   width: 50%;
 }
 
-.emotion-101 {
+.emotion-110 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -790,25 +792,25 @@ exports[`GroupPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-101:first-of-type {
+.emotion-110:first-of-type {
   margin-left: 0;
 }
 
-.emotion-101:disabled {
+.emotion-110:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-101:disabled {
+.emotion-110:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-101:hover:not(:disabled) {
+.emotion-110:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-102 {
+.emotion-111 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -831,13 +833,13 @@ exports[`GroupPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-104 {
+.emotion-113 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-105 {
+.emotion-114 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -852,7 +854,7 @@ exports[`GroupPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-107 {
+.emotion-116 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -868,38 +870,38 @@ exports[`GroupPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-109 {
+.emotion-118 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-111 {
+.emotion-120 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-113 {
+.emotion-122 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-117 {
+.emotion-126 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-119 {
+.emotion-128 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-121 {
+.emotion-130 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-123 {
+.emotion-132 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -937,40 +939,102 @@ exports[`GroupPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -979,11 +1043,11 @@ exports[`GroupPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -999,13 +1063,13 @@ exports[`GroupPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1032,33 +1096,33 @@ exports[`GroupPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 dom
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1076,72 +1140,72 @@ exports[`GroupPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1158,49 +1222,49 @@ exports[`GroupPage should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1222,59 +1286,59 @@ exports[`GroupPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-85 denali-tab-group"
+              class="emotion-94 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-86 denali-tab active"
+                class="emotion-95 denali-tab active"
                 data-active="true"
               >
                 Groups
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Services
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Policies
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Templates
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Visibility
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 History
@@ -1282,20 +1346,20 @@ exports[`GroupPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-95 emotion-96"
+            class="emotion-104 emotion-105"
             data-testid="grouplist"
           >
             <div
-              class="emotion-97 emotion-98"
+              class="emotion-106 emotion-107"
             >
               <div
-                class="emotion-99 emotion-100"
+                class="emotion-108 emotion-109"
               >
                 Click on Add Group button to create a new group.
               </div>
               <div>
                 <button
-                  class="emotion-101 denali-button"
+                  class="emotion-110 denali-button"
                 >
                   Add Group
                 </button>
@@ -1308,11 +1372,11 @@ exports[`GroupPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-102 emotion-103"
+          class="emotion-111 emotion-112"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-104"
+            class="emotion-113"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1329,30 +1393,30 @@ exports[`GroupPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-105 emotion-106"
+          class="emotion-114 emotion-115"
         >
           <div
-            class="emotion-107 emotion-108"
+            class="emotion-116 emotion-117"
           >
             <div
-              class="emotion-109 emotion-110"
+              class="emotion-118 emotion-119"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-113 emotion-114"
+                class="emotion-122 emotion-123"
               >
                  | 
               </span>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/manage"
               >
                 Manage
@@ -1360,16 +1424,16 @@ exports[`GroupPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-117 emotion-118"
+            class="emotion-126 emotion-127"
           >
             <div
-              class="emotion-119 emotion-120"
+              class="emotion-128 emotion-129"
             >
               <div
-                class="emotion-121 emotion-122"
+                class="emotion-130 emotion-131"
               >
                 <svg
-                  class="emotion-123"
+                  class="emotion-132"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1392,20 +1456,20 @@ exports[`GroupPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-119 emotion-120"
+              class="emotion-128 emotion-129"
             >
               <div
-                class="emotion-121 emotion-122"
+                class="emotion-130 emotion-131"
               >
                 <svg
-                  class="emotion-123"
+                  class="emotion-132"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1428,7 +1492,7 @@ exports[`GroupPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/microsegmentation.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/microsegmentation.test.js.snap
index c47c77029b2..b3b883a8e49 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/microsegmentation.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/microsegmentation.test.js.snap
@@ -265,6 +265,25 @@ exports[`MicrosegmentationPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`MicrosegmentationPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`MicrosegmentationPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`MicrosegmentationPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`MicrosegmentationPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`MicrosegmentationPage should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`MicrosegmentationPage should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`MicrosegmentationPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`MicrosegmentationPage should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-85 {
+.emotion-94 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -669,7 +671,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   position: relative;
 }
 
-.emotion-85.vertical {
+.emotion-94.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -682,7 +684,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-86 {
+.emotion-95 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -703,11 +705,11 @@ exports[`MicrosegmentationPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-86:hover {
+.emotion-95:hover {
   color: #3570f4;
 }
 
-.emotion-86.active {
+.emotion-95.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -715,11 +717,11 @@ exports[`MicrosegmentationPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-86.active:hover {
+.emotion-95.active:hover {
   color: #303030;
 }
 
-.emotion-86.vertical {
+.emotion-95.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -731,21 +733,21 @@ exports[`MicrosegmentationPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-86.vertical.active {
+.emotion-95.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-86.vertical.active:hover {
+.emotion-95.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-95 {
+.emotion-104 {
   margin: 20px;
 }
 
-.emotion-97 {
+.emotion-106 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -762,11 +764,11 @@ exports[`MicrosegmentationPage should render 1`] = `
   float: right;
 }
 
-.emotion-99 {
+.emotion-108 {
   margin-right: 10px;
 }
 
-.emotion-101 {
+.emotion-110 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -791,25 +793,25 @@ exports[`MicrosegmentationPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-101:first-of-type {
+.emotion-110:first-of-type {
   margin-left: 0;
 }
 
-.emotion-101:disabled {
+.emotion-110:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-101:disabled {
+.emotion-110:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-101:hover:not(:disabled) {
+.emotion-110:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-102 {
+.emotion-111 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -832,13 +834,13 @@ exports[`MicrosegmentationPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-104 {
+.emotion-113 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-105 {
+.emotion-114 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -853,7 +855,7 @@ exports[`MicrosegmentationPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-107 {
+.emotion-116 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -869,38 +871,38 @@ exports[`MicrosegmentationPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-109 {
+.emotion-118 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-111 {
+.emotion-120 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-113 {
+.emotion-122 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-117 {
+.emotion-126 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-119 {
+.emotion-128 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-121 {
+.emotion-130 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-123 {
+.emotion-132 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -938,40 +940,102 @@ exports[`MicrosegmentationPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -980,11 +1044,11 @@ exports[`MicrosegmentationPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1000,13 +1064,13 @@ exports[`MicrosegmentationPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1033,33 +1097,33 @@ exports[`MicrosegmentationPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 dom
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1077,72 +1141,72 @@ exports[`MicrosegmentationPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1159,49 +1223,49 @@ exports[`MicrosegmentationPage should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1223,59 +1287,59 @@ exports[`MicrosegmentationPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-85 denali-tab-group"
+              class="emotion-94 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Groups
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Services
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Policies
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Templates
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Visibility
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 History
@@ -1283,14 +1347,14 @@ exports[`MicrosegmentationPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-95 emotion-96"
+            class="emotion-104 emotion-105"
             data-testid="segmentation-data-list"
           >
             <div
-              class="emotion-97 emotion-98"
+              class="emotion-106 emotion-107"
             >
               <div
-                class="emotion-99 emotion-100"
+                class="emotion-108 emotion-109"
               >
                 <div
                   class="toggle is-small"
@@ -1322,7 +1386,7 @@ exports[`MicrosegmentationPage should render 1`] = `
               </div>
               <div>
                 <button
-                  class="emotion-101 denali-button"
+                  class="emotion-110 denali-button"
                 >
                   Add ACL Policy
                 </button>
@@ -1339,11 +1403,11 @@ exports[`MicrosegmentationPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-102 emotion-103"
+          class="emotion-111 emotion-112"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-104"
+            class="emotion-113"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1360,30 +1424,30 @@ exports[`MicrosegmentationPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-105 emotion-106"
+          class="emotion-114 emotion-115"
         >
           <div
-            class="emotion-107 emotion-108"
+            class="emotion-116 emotion-117"
           >
             <div
-              class="emotion-109 emotion-110"
+              class="emotion-118 emotion-119"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-113 emotion-114"
+                class="emotion-122 emotion-123"
               >
                  | 
               </span>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/manage"
               >
                 Manage
@@ -1391,16 +1455,16 @@ exports[`MicrosegmentationPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-117 emotion-118"
+            class="emotion-126 emotion-127"
           >
             <div
-              class="emotion-119 emotion-120"
+              class="emotion-128 emotion-129"
             >
               <div
-                class="emotion-121 emotion-122"
+                class="emotion-130 emotion-131"
               >
                 <svg
-                  class="emotion-123"
+                  class="emotion-132"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1423,20 +1487,20 @@ exports[`MicrosegmentationPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-119 emotion-120"
+              class="emotion-128 emotion-129"
             >
               <div
-                class="emotion-121 emotion-122"
+                class="emotion-130 emotion-131"
               >
                 <svg
-                  class="emotion-123"
+                  class="emotion-132"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1459,7 +1523,7 @@ exports[`MicrosegmentationPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/policy.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/policy.test.js.snap
index 3d16253fa0c..98d85efdd79 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/policy.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/policy.test.js.snap
@@ -265,6 +265,25 @@ exports[`PolicyPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`PolicyPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`PolicyPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`PolicyPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`PolicyPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`PolicyPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`PolicyPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`PolicyPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`PolicyPage should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`PolicyPage should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`PolicyPage should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`PolicyPage should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`PolicyPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`PolicyPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`PolicyPage should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`PolicyPage should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-87 {
+.emotion-96 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -679,25 +681,25 @@ exports[`PolicyPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-87:first-of-type {
+.emotion-96:first-of-type {
   margin-left: 0;
 }
 
-.emotion-87:disabled {
+.emotion-96:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-87:disabled {
+.emotion-96:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-87:hover:not(:disabled) {
+.emotion-96:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-88 {
+.emotion-97 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -712,7 +714,7 @@ exports[`PolicyPage should render 1`] = `
   position: relative;
 }
 
-.emotion-88.vertical {
+.emotion-97.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -725,7 +727,7 @@ exports[`PolicyPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-89 {
+.emotion-98 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -746,11 +748,11 @@ exports[`PolicyPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-89:hover {
+.emotion-98:hover {
   color: #3570f4;
 }
 
-.emotion-89.active {
+.emotion-98.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -758,11 +760,11 @@ exports[`PolicyPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-89.active:hover {
+.emotion-98.active:hover {
   color: #303030;
 }
 
-.emotion-89.vertical {
+.emotion-98.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -774,21 +776,21 @@ exports[`PolicyPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-89.vertical.active {
+.emotion-98.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-89.vertical.active:hover {
+.emotion-98.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-98 {
+.emotion-107 {
   margin: 20px;
 }
 
-.emotion-100 {
+.emotion-109 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -805,7 +807,7 @@ exports[`PolicyPage should render 1`] = `
   float: right;
 }
 
-.emotion-103 {
+.emotion-112 {
   width: 100%;
   border-spacing: 0 15px;
   display: table;
@@ -813,7 +815,7 @@ exports[`PolicyPage should render 1`] = `
   border-color: grey;
 }
 
-.emotion-105 {
+.emotion-114 {
   text-align: center;
   border-bottom: 2px solid rgb(213, 213, 213);
   color: rgb(154, 154, 154);
@@ -825,7 +827,7 @@ exports[`PolicyPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-107 {
+.emotion-116 {
   text-align: left;
   border-bottom: 2px solid rgb(213, 213, 213);
   color: rgb(154, 154, 154);
@@ -837,7 +839,7 @@ exports[`PolicyPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-121 {
+.emotion-130 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -860,13 +862,13 @@ exports[`PolicyPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-123 {
+.emotion-132 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-124 {
+.emotion-133 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -881,7 +883,7 @@ exports[`PolicyPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-126 {
+.emotion-135 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -897,38 +899,38 @@ exports[`PolicyPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-128 {
+.emotion-137 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-130 {
+.emotion-139 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-132 {
+.emotion-141 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-136 {
+.emotion-145 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-138 {
+.emotion-147 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-140 {
+.emotion-149 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-142 {
+.emotion-151 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -966,40 +968,102 @@ exports[`PolicyPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1008,11 +1072,11 @@ exports[`PolicyPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1028,13 +1092,13 @@ exports[`PolicyPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1061,33 +1125,33 @@ exports[`PolicyPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 home.pgote
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1105,72 +1169,72 @@ exports[`PolicyPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-01-24 18:14 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1187,49 +1251,49 @@ exports[`PolicyPage should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     1231243134
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1249,10 +1313,10 @@ exports[`PolicyPage should render 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <button
-                    class="emotion-87 denali-button"
+                    class="emotion-96 denali-button"
                   >
                     Onboard to AWS
                   </button>
@@ -1260,59 +1324,59 @@ exports[`PolicyPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-88 denali-tab-group"
+              class="emotion-97 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Groups
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Services
               </div>
               <div
-                class="emotion-89 denali-tab active"
+                class="emotion-98 denali-tab active"
                 data-active="true"
               >
                 Policies
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Templates
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Visibility
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 History
@@ -1320,62 +1384,62 @@ exports[`PolicyPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-98 emotion-99"
+            class="emotion-107 emotion-108"
             data-testid="policylist"
           >
             <div
-              class="emotion-100 emotion-101"
+              class="emotion-109 emotion-110"
             >
               <div>
                 <button
-                  class="emotion-87 denali-button"
+                  class="emotion-96 denali-button"
                 >
                   Add Policy
                 </button>
               </div>
             </div>
             <table
-              class="emotion-103 emotion-104"
+              class="emotion-112 emotion-113"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-105 emotion-106"
+                    class="emotion-114 emotion-115"
                   >
                     Active
                   </th>
                   <th
-                    class="emotion-107 emotion-106"
+                    class="emotion-116 emotion-115"
                   >
                     Policy
                   </th>
                   <th
-                    class="emotion-107 emotion-106"
+                    class="emotion-116 emotion-115"
                   >
                     Versions
                   </th>
                   <th
-                    class="emotion-107 emotion-106"
+                    class="emotion-116 emotion-115"
                   >
                     Modified Date
                   </th>
                   <th
-                    class="emotion-105 emotion-106"
+                    class="emotion-114 emotion-115"
                   >
                     Rules
                   </th>
                   <th
-                    class="emotion-105 emotion-106"
+                    class="emotion-114 emotion-115"
                   >
                     Tags
                   </th>
                   <th
-                    class="emotion-105 emotion-106"
+                    class="emotion-114 emotion-115"
                   >
                     Duplicate
                   </th>
                   <th
-                    class="emotion-105 emotion-106"
+                    class="emotion-114 emotion-115"
                   >
                     Delete
                   </th>
@@ -1390,11 +1454,11 @@ exports[`PolicyPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-121 emotion-122"
+          class="emotion-130 emotion-131"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-123"
+            class="emotion-132"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1411,30 +1475,30 @@ exports[`PolicyPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-124 emotion-125"
+          class="emotion-133 emotion-134"
         >
           <div
-            class="emotion-126 emotion-127"
+            class="emotion-135 emotion-136"
           >
             <div
-              class="emotion-128 emotion-129"
+              class="emotion-137 emotion-138"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-130 emotion-131"
+                class="emotion-139 emotion-140"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-132 emotion-133"
+                class="emotion-141 emotion-142"
               >
                  | 
               </span>
               <a
-                class="emotion-130 emotion-131"
+                class="emotion-139 emotion-140"
                 href="/domain/manage"
               >
                 Manage
@@ -1442,16 +1506,16 @@ exports[`PolicyPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-136 emotion-137"
+            class="emotion-145 emotion-146"
           >
             <div
-              class="emotion-138 emotion-139"
+              class="emotion-147 emotion-148"
             >
               <div
-                class="emotion-140 emotion-141"
+                class="emotion-149 emotion-150"
               >
                 <svg
-                  class="emotion-142"
+                  class="emotion-151"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1474,20 +1538,20 @@ exports[`PolicyPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-130 emotion-131"
+                class="emotion-139 emotion-140"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-138 emotion-139"
+              class="emotion-147 emotion-148"
             >
               <div
-                class="emotion-140 emotion-141"
+                class="emotion-149 emotion-150"
               >
                 <svg
-                  class="emotion-142"
+                  class="emotion-151"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1510,7 +1574,7 @@ exports[`PolicyPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-130 emotion-131"
+                class="emotion-139 emotion-140"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/role.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/role.test.js.snap
index 7574eae707f..16555257001 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/role.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/role.test.js.snap
@@ -265,6 +265,25 @@ exports[`RolePage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`RolePage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`RolePage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`RolePage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`RolePage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`RolePage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`RolePage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`RolePage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`RolePage should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`RolePage should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`RolePage should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`RolePage should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`RolePage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`RolePage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`RolePage should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`RolePage should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-85 {
+.emotion-94 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -669,7 +671,7 @@ exports[`RolePage should render 1`] = `
   position: relative;
 }
 
-.emotion-85.vertical {
+.emotion-94.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -682,7 +684,7 @@ exports[`RolePage should render 1`] = `
   width: 300px;
 }
 
-.emotion-86 {
+.emotion-95 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -703,11 +705,11 @@ exports[`RolePage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-86:hover {
+.emotion-95:hover {
   color: #3570f4;
 }
 
-.emotion-86.active {
+.emotion-95.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -715,11 +717,11 @@ exports[`RolePage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-86.active:hover {
+.emotion-95.active:hover {
   color: #303030;
 }
 
-.emotion-86.vertical {
+.emotion-95.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -731,21 +733,21 @@ exports[`RolePage should render 1`] = `
   text-align: left;
 }
 
-.emotion-86.vertical.active {
+.emotion-95.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-86.vertical.active:hover {
+.emotion-95.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-95 {
+.emotion-104 {
   margin: 20px;
 }
 
-.emotion-97 {
+.emotion-106 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -761,11 +763,11 @@ exports[`RolePage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-99 {
+.emotion-108 {
   vertical-align: middle;
 }
 
-.emotion-101 {
+.emotion-110 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -779,7 +781,7 @@ exports[`RolePage should render 1`] = `
   position: relative;
 }
 
-.emotion-101::before {
+.emotion-110::before {
   background: #fff;
   border: 2px solid #0072df;
   border-radius: 2px;
@@ -793,7 +795,7 @@ exports[`RolePage should render 1`] = `
   width: calc(50% + 4px);
 }
 
-.emotion-102 {
+.emotion-111 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -818,11 +820,11 @@ exports[`RolePage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-102:hover {
+.emotion-111:hover {
   color: #303030;
 }
 
-.emotion-103 {
+.emotion-112 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -847,124 +849,15 @@ exports[`RolePage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-103:hover {
+.emotion-112:hover {
   color: #3570f4;
 }
 
-.emotion-104 {
+.emotion-113 {
   width: 50%;
 }
 
-.emotion-106 {
-  box-sizing: border-box;
-  display: inline-flex;
-  -webkit-box-flex-flow: row nowrap;
-  -webkit-flex-flow: row nowrap;
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  position: relative;
-  width: 100%;
-}
-
-.emotion-106 input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: rgba(53,112,244,0.05);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: transparent;
-  border-left: transparent;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #303030;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  font: inherit;
-  height: 36px;
-  margin: 0;
-  outline: none;
-  padding: 0 1rem;
-  text-align: left;
-  width: 100%;
-}
-
-.emotion-106.animated input {
-  -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-}
-
-.emotion-106 input::-webkit-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-106 input::-moz-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-106 input:-ms-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-106 input::placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-106 input.focused,
-.emotion-106 input:active,
-.emotion-106 input:focus {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #3570f4;
-  color: #303030;
-}
-
-.emotion-106 input:invalid {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #d01111;
-  color: #303030;
-}
-
-.emotion-106 .message {
-  font-size: 12px;
-  left: 0;
-  line-height: 1.8;
-  position: absolute;
-  top: 2.571rem;
-}
-
-.emotion-106.error input,
-.emotion-106.error input.focused,
-.emotion-106.error input:active,
-.emotion-106.error input:focus {
-  border-bottom: 2px solid #d01111;
-}
-
-.emotion-106.error .message {
-  color: #d01111;
-}
-
-.emotion-106 input {
-  padding-right: 36px;
-}
-
-.emotion-106 .input-icon {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: flex;
-  height: 36px;
-  position: absolute;
-  right: 6px;
-}
-
-.emotion-108 {
+.emotion-117 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -989,25 +882,25 @@ exports[`RolePage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-108:first-of-type {
+.emotion-117:first-of-type {
   margin-left: 0;
 }
 
-.emotion-108:disabled {
+.emotion-117:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-108:disabled {
+.emotion-117:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-108:hover:not(:disabled) {
+.emotion-117:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-110 {
+.emotion-119 {
   width: 100%;
   border-spacing: 0 15px;
   display: table;
@@ -1015,7 +908,7 @@ exports[`RolePage should render 1`] = `
   border-color: grey;
 }
 
-.emotion-112 {
+.emotion-121 {
   border-bottom: 2px solid rgb(213, 213, 213);
   color: rgb(154, 154, 154);
   vertical-align: top;
@@ -1025,22 +918,22 @@ exports[`RolePage should render 1`] = `
   display: flex;
 }
 
-.emotion-114 {
+.emotion-123 {
   text-align: left;
   width: 28%;
 }
 
-.emotion-116 {
+.emotion-125 {
   text-align: left;
   width: 15%;
 }
 
-.emotion-120 {
+.emotion-129 {
   text-align: center;
   width: 7%;
 }
 
-.emotion-134 {
+.emotion-143 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1063,13 +956,13 @@ exports[`RolePage should render 1`] = `
   width: 20px;
 }
 
-.emotion-136 {
+.emotion-145 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-137 {
+.emotion-146 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -1084,7 +977,7 @@ exports[`RolePage should render 1`] = `
   width: 350px;
 }
 
-.emotion-139 {
+.emotion-148 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -1100,38 +993,38 @@ exports[`RolePage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-141 {
+.emotion-150 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-143 {
+.emotion-152 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-145 {
+.emotion-154 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-149 {
+.emotion-158 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-151 {
+.emotion-160 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-153 {
+.emotion-162 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-155 {
+.emotion-164 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -1169,40 +1062,102 @@ exports[`RolePage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1211,11 +1166,11 @@ exports[`RolePage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1231,13 +1186,13 @@ exports[`RolePage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1264,33 +1219,33 @@ exports[`RolePage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 dom
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1308,72 +1263,72 @@ exports[`RolePage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1390,49 +1345,49 @@ exports[`RolePage should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1454,59 +1409,59 @@ exports[`RolePage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-85 denali-tab-group"
+              class="emotion-94 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-86 denali-tab active"
+                class="emotion-95 denali-tab active"
                 data-active="true"
               >
                 Roles
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Groups
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Services
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Policies
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Templates
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Visibility
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 History
@@ -1514,28 +1469,28 @@ exports[`RolePage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-95 emotion-96"
+            class="emotion-104 emotion-105"
             data-testid="rolelist"
           >
             <div
-              class="emotion-97 emotion-98"
+              class="emotion-106 emotion-107"
             >
               <div
-                class="emotion-99 emotion-100"
+                class="emotion-108 emotion-109"
               >
                 <div
-                  class="emotion-101 denali-button-group"
+                  class="emotion-110 denali-button-group"
                   data-testid="buttongroup"
                 >
                   <div
-                    class="emotion-102"
+                    class="emotion-111"
                     data-active="true"
                     id="button-roles"
                   >
                     Roles
                   </div>
                   <div
-                    class="emotion-103"
+                    class="emotion-112"
                     data-active="false"
                     id="button-users"
                   >
@@ -1544,10 +1499,10 @@ exports[`RolePage should render 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-104 emotion-105"
+                class="emotion-113 emotion-114"
               >
                 <div
-                  class="emotion-106 denali-input animated"
+                  class="emotion-14 denali-input animated"
                   data-testid="input-wrapper"
                 >
                   <input
@@ -1561,7 +1516,7 @@ exports[`RolePage should render 1`] = `
                     class="input-icon"
                   >
                     <svg
-                      class="emotion-10"
+                      class="emotion-19"
                       data-testid="icon"
                       data-wdio=""
                       height="24px"
@@ -1585,71 +1540,71 @@ exports[`RolePage should render 1`] = `
               </div>
               <div>
                 <button
-                  class="emotion-108 denali-button"
+                  class="emotion-117 denali-button"
                 >
                   Add Role
                 </button>
                 <button
-                  class="emotion-108 denali-button"
+                  class="emotion-117 denali-button"
                 >
                   Add Member
                 </button>
               </div>
             </div>
             <div
-              class="emotion-110 emotion-111"
+              class="emotion-119 emotion-120"
               data-testid="roletable"
             >
               <div
-                class="emotion-112 emotion-113"
+                class="emotion-121 emotion-122"
               >
                 <div
-                  class="emotion-114 emotion-115"
+                  class="emotion-123 emotion-124"
                 >
                   Role
                 </div>
                 <div
-                  class="emotion-116 emotion-117"
+                  class="emotion-125 emotion-126"
                 >
                   Modified Date
                 </div>
                 <div
-                  class="emotion-116 emotion-117"
+                  class="emotion-125 emotion-126"
                 >
                   Reviewed Date
                 </div>
                 <div
-                  class="emotion-120 emotion-121"
+                  class="emotion-129 emotion-130"
                 >
                   Members
                 </div>
                 <div
-                  class="emotion-120 emotion-121"
+                  class="emotion-129 emotion-130"
                 >
                   Review
                 </div>
                 <div
-                  class="emotion-120 emotion-121"
+                  class="emotion-129 emotion-130"
                 >
                   Policy Rule
                 </div>
                 <div
-                  class="emotion-120 emotion-121"
+                  class="emotion-129 emotion-130"
                 >
                   Tags
                 </div>
                 <div
-                  class="emotion-120 emotion-121"
+                  class="emotion-129 emotion-130"
                 >
                   Settings
                 </div>
                 <div
-                  class="emotion-120 emotion-121"
+                  class="emotion-129 emotion-130"
                 >
                   History
                 </div>
                 <div
-                  class="emotion-120 emotion-121"
+                  class="emotion-129 emotion-130"
                 >
                   Delete
                 </div>
@@ -1662,11 +1617,11 @@ exports[`RolePage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-134 emotion-135"
+          class="emotion-143 emotion-144"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-136"
+            class="emotion-145"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1683,30 +1638,30 @@ exports[`RolePage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-137 emotion-138"
+          class="emotion-146 emotion-147"
         >
           <div
-            class="emotion-139 emotion-140"
+            class="emotion-148 emotion-149"
           >
             <div
-              class="emotion-141 emotion-142"
+              class="emotion-150 emotion-151"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-143 emotion-144"
+                class="emotion-152 emotion-153"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-145 emotion-146"
+                class="emotion-154 emotion-155"
               >
                  | 
               </span>
               <a
-                class="emotion-143 emotion-144"
+                class="emotion-152 emotion-153"
                 href="/domain/manage"
               >
                 Manage
@@ -1714,16 +1669,16 @@ exports[`RolePage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-149 emotion-150"
+            class="emotion-158 emotion-159"
           >
             <div
-              class="emotion-151 emotion-152"
+              class="emotion-160 emotion-161"
             >
               <div
-                class="emotion-153 emotion-154"
+                class="emotion-162 emotion-163"
               >
                 <svg
-                  class="emotion-155"
+                  class="emotion-164"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1746,20 +1701,20 @@ exports[`RolePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-143 emotion-144"
+                class="emotion-152 emotion-153"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-151 emotion-152"
+              class="emotion-160 emotion-161"
             >
               <div
-                class="emotion-153 emotion-154"
+                class="emotion-162 emotion-163"
               >
                 <svg
-                  class="emotion-155"
+                  class="emotion-164"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1782,7 +1737,7 @@ exports[`RolePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-143 emotion-144"
+                class="emotion-152 emotion-153"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/service.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/service.test.js.snap
index 7988878ea9b..408ecaf65f5 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/service.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/service.test.js.snap
@@ -265,6 +265,25 @@ exports[`ServicePage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`ServicePage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`ServicePage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`ServicePage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`ServicePage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`ServicePage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`ServicePage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`ServicePage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`ServicePage should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`ServicePage should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`ServicePage should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`ServicePage should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`ServicePage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`ServicePage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`ServicePage should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`ServicePage should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-87 {
+.emotion-96 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -679,25 +681,25 @@ exports[`ServicePage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-87:first-of-type {
+.emotion-96:first-of-type {
   margin-left: 0;
 }
 
-.emotion-87:disabled {
+.emotion-96:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-87:disabled {
+.emotion-96:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-87:hover:not(:disabled) {
+.emotion-96:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-88 {
+.emotion-97 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -712,7 +714,7 @@ exports[`ServicePage should render 1`] = `
   position: relative;
 }
 
-.emotion-88.vertical {
+.emotion-97.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -725,7 +727,7 @@ exports[`ServicePage should render 1`] = `
   width: 300px;
 }
 
-.emotion-89 {
+.emotion-98 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -746,11 +748,11 @@ exports[`ServicePage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-89:hover {
+.emotion-98:hover {
   color: #3570f4;
 }
 
-.emotion-89.active {
+.emotion-98.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -758,11 +760,11 @@ exports[`ServicePage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-89.active:hover {
+.emotion-98.active:hover {
   color: #303030;
 }
 
-.emotion-89.vertical {
+.emotion-98.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -774,21 +776,21 @@ exports[`ServicePage should render 1`] = `
   text-align: left;
 }
 
-.emotion-89.vertical.active {
+.emotion-98.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-89.vertical.active:hover {
+.emotion-98.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-98 {
+.emotion-107 {
   margin: 20px;
 }
 
-.emotion-100 {
+.emotion-109 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -805,7 +807,7 @@ exports[`ServicePage should render 1`] = `
   float: right;
 }
 
-.emotion-103 {
+.emotion-112 {
   width: 100%;
   border-spacing: 0;
   display: table;
@@ -813,7 +815,7 @@ exports[`ServicePage should render 1`] = `
   border-color: #9a9a9a;
 }
 
-.emotion-105 {
+.emotion-114 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -825,7 +827,7 @@ exports[`ServicePage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-109 {
+.emotion-118 {
   text-align: center;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -837,7 +839,7 @@ exports[`ServicePage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-121 {
+.emotion-130 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -845,7 +847,7 @@ exports[`ServicePage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-125 {
+.emotion-134 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -853,21 +855,21 @@ exports[`ServicePage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-142 {
+.emotion-151 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-146 {
+.emotion-155 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-161 {
+.emotion-170 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -890,13 +892,13 @@ exports[`ServicePage should render 1`] = `
   width: 20px;
 }
 
-.emotion-163 {
+.emotion-172 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-164 {
+.emotion-173 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -911,7 +913,7 @@ exports[`ServicePage should render 1`] = `
   width: 350px;
 }
 
-.emotion-166 {
+.emotion-175 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -927,38 +929,38 @@ exports[`ServicePage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-168 {
+.emotion-177 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-170 {
+.emotion-179 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-172 {
+.emotion-181 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-176 {
+.emotion-185 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-178 {
+.emotion-187 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-180 {
+.emotion-189 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-182 {
+.emotion-191 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -996,40 +998,102 @@ exports[`ServicePage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1038,11 +1102,11 @@ exports[`ServicePage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1058,13 +1122,13 @@ exports[`ServicePage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1091,33 +1155,33 @@ exports[`ServicePage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 home.pgote
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1135,72 +1199,72 @@ exports[`ServicePage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-01-24 18:14 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1217,49 +1281,49 @@ exports[`ServicePage should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     1231243134
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1279,10 +1343,10 @@ exports[`ServicePage should render 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <button
-                    class="emotion-87 denali-button"
+                    class="emotion-96 denali-button"
                   >
                     Onboard to AWS
                   </button>
@@ -1290,59 +1354,59 @@ exports[`ServicePage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-88 denali-tab-group"
+              class="emotion-97 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Groups
               </div>
               <div
-                class="emotion-89 denali-tab active"
+                class="emotion-98 denali-tab active"
                 data-active="true"
               >
                 Services
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Policies
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Templates
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Visibility
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 History
@@ -1350,58 +1414,58 @@ exports[`ServicePage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-98 emotion-99"
+            class="emotion-107 emotion-108"
             data-testid="service-list"
           >
             <div
-              class="emotion-100 emotion-101"
+              class="emotion-109 emotion-110"
             >
               <div>
                 <button
-                  class="emotion-87 denali-button"
+                  class="emotion-96 denali-button"
                 >
                   Add Service
                 </button>
               </div>
             </div>
             <table
-              class="emotion-103 emotion-104"
+              class="emotion-112 emotion-113"
               id="services-table"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-105 emotion-106"
+                    class="emotion-114 emotion-115"
                   >
                     Service
                   </th>
                   <th
-                    class="emotion-105 emotion-106"
+                    class="emotion-114 emotion-115"
                   >
                     Modified Date
                   </th>
                   <th
-                    class="emotion-109 emotion-106"
+                    class="emotion-118 emotion-115"
                   >
                     Public Keys
                   </th>
                   <th
-                    class="emotion-109 emotion-106"
+                    class="emotion-118 emotion-115"
                   >
                     Tags
                   </th>
                   <th
-                    class="emotion-109 emotion-106"
+                    class="emotion-118 emotion-115"
                   >
                     MSD Policies
                   </th>
                   <th
-                    class="emotion-109 emotion-106"
+                    class="emotion-118 emotion-115"
                   >
                     Providers
                   </th>
                   <th
-                    class="emotion-109 emotion-106"
+                    class="emotion-118 emotion-115"
                   >
                     Delete
                   </th>
@@ -1409,27 +1473,27 @@ exports[`ServicePage should render 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="emotion-119 emotion-120"
+                  class="emotion-128 emotion-129"
                   data-testid="service-row"
                 >
                   <td
-                    class="emotion-121 emotion-122"
+                    class="emotion-130 emotion-131"
                     color="#3570f40D"
                   >
                     bastion
                   </td>
                   <td
-                    class="emotion-121 emotion-122"
+                    class="emotion-130 emotion-131"
                     color="#3570f40D"
                   >
                     2017-12-21 18:59 UTC
                   </td>
                   <td
-                    class="emotion-125 emotion-122"
+                    class="emotion-134 emotion-131"
                     color="#3570f40D"
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1446,11 +1510,11 @@ exports[`ServicePage should render 1`] = `
                     </svg>
                   </td>
                   <td
-                    class="emotion-125 emotion-122"
+                    class="emotion-134 emotion-131"
                     color="#3570f40D"
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1470,11 +1534,11 @@ exports[`ServicePage should render 1`] = `
                     </svg>
                   </td>
                   <td
-                    class="emotion-125 emotion-122"
+                    class="emotion-134 emotion-131"
                     color="#3570f40D"
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1491,11 +1555,11 @@ exports[`ServicePage should render 1`] = `
                     </svg>
                   </td>
                   <td
-                    class="emotion-125 emotion-122"
+                    class="emotion-134 emotion-131"
                     color="#3570f40D"
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1512,11 +1576,11 @@ exports[`ServicePage should render 1`] = `
                     </svg>
                   </td>
                   <td
-                    class="emotion-125 emotion-122"
+                    class="emotion-134 emotion-131"
                     color="#3570f40D"
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1537,27 +1601,27 @@ exports[`ServicePage should render 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="emotion-119 emotion-120"
+                  class="emotion-128 emotion-129"
                   data-testid="service-row"
                 >
                   <td
-                    class="emotion-142 emotion-122"
+                    class="emotion-151 emotion-131"
                     color=""
                   >
                     openhouse
                   </td>
                   <td
-                    class="emotion-142 emotion-122"
+                    class="emotion-151 emotion-131"
                     color=""
                   >
                     2017-12-19 20:24 UTC
                   </td>
                   <td
-                    class="emotion-146 emotion-122"
+                    class="emotion-155 emotion-131"
                     color=""
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1574,11 +1638,11 @@ exports[`ServicePage should render 1`] = `
                     </svg>
                   </td>
                   <td
-                    class="emotion-146 emotion-122"
+                    class="emotion-155 emotion-131"
                     color=""
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1598,11 +1662,11 @@ exports[`ServicePage should render 1`] = `
                     </svg>
                   </td>
                   <td
-                    class="emotion-146 emotion-122"
+                    class="emotion-155 emotion-131"
                     color=""
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1619,11 +1683,11 @@ exports[`ServicePage should render 1`] = `
                     </svg>
                   </td>
                   <td
-                    class="emotion-146 emotion-122"
+                    class="emotion-155 emotion-131"
                     color=""
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1640,11 +1704,11 @@ exports[`ServicePage should render 1`] = `
                     </svg>
                   </td>
                   <td
-                    class="emotion-146 emotion-122"
+                    class="emotion-155 emotion-131"
                     color=""
                   >
                     <svg
-                      class="emotion-84"
+                      class="emotion-93"
                       data-testid="icon"
                       data-wdio=""
                       height="1.25em"
@@ -1673,11 +1737,11 @@ exports[`ServicePage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-161 emotion-162"
+          class="emotion-170 emotion-171"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-163"
+            class="emotion-172"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1694,30 +1758,30 @@ exports[`ServicePage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-164 emotion-165"
+          class="emotion-173 emotion-174"
         >
           <div
-            class="emotion-166 emotion-167"
+            class="emotion-175 emotion-176"
           >
             <div
-              class="emotion-168 emotion-169"
+              class="emotion-177 emotion-178"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-170 emotion-171"
+                class="emotion-179 emotion-180"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-172 emotion-173"
+                class="emotion-181 emotion-182"
               >
                  | 
               </span>
               <a
-                class="emotion-170 emotion-171"
+                class="emotion-179 emotion-180"
                 href="/domain/manage"
               >
                 Manage
@@ -1725,16 +1789,16 @@ exports[`ServicePage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-176 emotion-177"
+            class="emotion-185 emotion-186"
           >
             <div
-              class="emotion-178 emotion-179"
+              class="emotion-187 emotion-188"
             >
               <div
-                class="emotion-180 emotion-181"
+                class="emotion-189 emotion-190"
               >
                 <svg
-                  class="emotion-182"
+                  class="emotion-191"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1757,20 +1821,20 @@ exports[`ServicePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-170 emotion-171"
+                class="emotion-179 emotion-180"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-178 emotion-179"
+              class="emotion-187 emotion-188"
             >
               <div
-                class="emotion-180 emotion-181"
+                class="emotion-189 emotion-190"
               >
                 <svg
-                  class="emotion-182"
+                  class="emotion-191"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1793,7 +1857,7 @@ exports[`ServicePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-170 emotion-171"
+                class="emotion-179 emotion-180"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/tags.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/tags.test.js.snap
index d33d809f728..b31c1baa4e8 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/tags.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/tags.test.js.snap
@@ -265,6 +265,25 @@ exports[`Tag Page should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`Tag Page should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`Tag Page should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`Tag Page should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`Tag Page should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`Tag Page should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`Tag Page should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`Tag Page should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`Tag Page should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`Tag Page should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`Tag Page should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`Tag Page should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`Tag Page should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`Tag Page should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-87 {
+.emotion-96 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -679,25 +681,25 @@ exports[`Tag Page should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-87:first-of-type {
+.emotion-96:first-of-type {
   margin-left: 0;
 }
 
-.emotion-87:disabled {
+.emotion-96:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-87:disabled {
+.emotion-96:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-87:hover:not(:disabled) {
+.emotion-96:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-88 {
+.emotion-97 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -712,7 +714,7 @@ exports[`Tag Page should render 1`] = `
   position: relative;
 }
 
-.emotion-88.vertical {
+.emotion-97.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -725,7 +727,7 @@ exports[`Tag Page should render 1`] = `
   width: 300px;
 }
 
-.emotion-89 {
+.emotion-98 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -746,11 +748,11 @@ exports[`Tag Page should render 1`] = `
   z-index: 1;
 }
 
-.emotion-89:hover {
+.emotion-98:hover {
   color: #3570f4;
 }
 
-.emotion-89.active {
+.emotion-98.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -758,11 +760,11 @@ exports[`Tag Page should render 1`] = `
   cursor: initial;
 }
 
-.emotion-89.active:hover {
+.emotion-98.active:hover {
   color: #303030;
 }
 
-.emotion-89.vertical {
+.emotion-98.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -774,21 +776,21 @@ exports[`Tag Page should render 1`] = `
   text-align: left;
 }
 
-.emotion-89.vertical.active {
+.emotion-98.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-89.vertical.active:hover {
+.emotion-98.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-98 {
+.emotion-107 {
   margin: 20px;
 }
 
-.emotion-100 {
+.emotion-109 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -805,7 +807,7 @@ exports[`Tag Page should render 1`] = `
   float: right;
 }
 
-.emotion-103 {
+.emotion-112 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -828,13 +830,13 @@ exports[`Tag Page should render 1`] = `
   width: 20px;
 }
 
-.emotion-105 {
+.emotion-114 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-106 {
+.emotion-115 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -849,7 +851,7 @@ exports[`Tag Page should render 1`] = `
   width: 350px;
 }
 
-.emotion-108 {
+.emotion-117 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -865,38 +867,38 @@ exports[`Tag Page should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-110 {
+.emotion-119 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-112 {
+.emotion-121 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-114 {
+.emotion-123 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-118 {
+.emotion-127 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-120 {
+.emotion-129 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-122 {
+.emotion-131 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-124 {
+.emotion-133 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -934,40 +936,102 @@ exports[`Tag Page should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -976,11 +1040,11 @@ exports[`Tag Page should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -996,13 +1060,13 @@ exports[`Tag Page should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1029,33 +1093,33 @@ exports[`Tag Page should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 home.test
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1073,72 +1137,72 @@ exports[`Tag Page should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-01-24 18:14 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1155,49 +1219,49 @@ exports[`Tag Page should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     1231243134
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1217,10 +1281,10 @@ exports[`Tag Page should render 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <button
-                    class="emotion-87 denali-button"
+                    class="emotion-96 denali-button"
                   >
                     Onboard to AWS
                   </button>
@@ -1228,59 +1292,59 @@ exports[`Tag Page should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-88 denali-tab-group"
+              class="emotion-97 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Groups
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Services
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Policies
               </div>
               <div
-                class="emotion-89 denali-tab active"
+                class="emotion-98 denali-tab active"
                 data-active="true"
               >
                 Tags
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Templates
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Visibility
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 History
@@ -1288,15 +1352,15 @@ exports[`Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-98 emotion-99"
+            class="emotion-107 emotion-108"
             data-testid="tag-list"
           >
             <div
-              class="emotion-100 emotion-101"
+              class="emotion-109 emotion-110"
             >
               <div>
                 <button
-                  class="emotion-87 denali-button"
+                  class="emotion-96 denali-button"
                 >
                   Add Tag
                 </button>
@@ -1310,11 +1374,11 @@ exports[`Tag Page should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-103 emotion-104"
+          class="emotion-112 emotion-113"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-105"
+            class="emotion-114"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1331,30 +1395,30 @@ exports[`Tag Page should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-106 emotion-107"
+          class="emotion-115 emotion-116"
         >
           <div
-            class="emotion-108 emotion-109"
+            class="emotion-117 emotion-118"
           >
             <div
-              class="emotion-110 emotion-111"
+              class="emotion-119 emotion-120"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-112 emotion-113"
+                class="emotion-121 emotion-122"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-114 emotion-115"
+                class="emotion-123 emotion-124"
               >
                  | 
               </span>
               <a
-                class="emotion-112 emotion-113"
+                class="emotion-121 emotion-122"
                 href="/domain/manage"
               >
                 Manage
@@ -1362,16 +1426,16 @@ exports[`Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-118 emotion-119"
+            class="emotion-127 emotion-128"
           >
             <div
-              class="emotion-120 emotion-121"
+              class="emotion-129 emotion-130"
             >
               <div
-                class="emotion-122 emotion-123"
+                class="emotion-131 emotion-132"
               >
                 <svg
-                  class="emotion-124"
+                  class="emotion-133"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1394,20 +1458,20 @@ exports[`Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-112 emotion-113"
+                class="emotion-121 emotion-122"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-120 emotion-121"
+              class="emotion-129 emotion-130"
             >
               <div
-                class="emotion-122 emotion-123"
+                class="emotion-131 emotion-132"
               >
                 <svg
-                  class="emotion-124"
+                  class="emotion-133"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1430,7 +1494,7 @@ exports[`Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-112 emotion-113"
+                class="emotion-121 emotion-122"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/template.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/template.test.js.snap
index 3e8e44fbe3d..366888ba2d3 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/template.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/template.test.js.snap
@@ -265,6 +265,25 @@ exports[`Template Page should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`Template Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`Template Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`Template Page should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`Template Page should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`Template Page should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`Template Page should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`Template Page should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`Template Page should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`Template Page should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`Template Page should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`Template Page should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`Template Page should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`Template Page should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`Template Page should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`Template Page should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-87 {
+.emotion-96 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -679,25 +681,25 @@ exports[`Template Page should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-87:first-of-type {
+.emotion-96:first-of-type {
   margin-left: 0;
 }
 
-.emotion-87:disabled {
+.emotion-96:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-87:disabled {
+.emotion-96:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-87:hover:not(:disabled) {
+.emotion-96:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-88 {
+.emotion-97 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -712,7 +714,7 @@ exports[`Template Page should render 1`] = `
   position: relative;
 }
 
-.emotion-88.vertical {
+.emotion-97.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -725,7 +727,7 @@ exports[`Template Page should render 1`] = `
   width: 300px;
 }
 
-.emotion-89 {
+.emotion-98 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -746,11 +748,11 @@ exports[`Template Page should render 1`] = `
   z-index: 1;
 }
 
-.emotion-89:hover {
+.emotion-98:hover {
   color: #3570f4;
 }
 
-.emotion-89.active {
+.emotion-98.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -758,11 +760,11 @@ exports[`Template Page should render 1`] = `
   cursor: initial;
 }
 
-.emotion-89.active:hover {
+.emotion-98.active:hover {
   color: #303030;
 }
 
-.emotion-89.vertical {
+.emotion-98.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -774,27 +776,27 @@ exports[`Template Page should render 1`] = `
   text-align: left;
 }
 
-.emotion-89.vertical.active {
+.emotion-98.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-89.vertical.active:hover {
+.emotion-98.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-98 {
+.emotion-107 {
   margin: 20px;
 }
 
-.emotion-100 {
+.emotion-109 {
   font: 600 15px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 20px;
   margin-top: 40px;
 }
 
-.emotion-102 {
+.emotion-111 {
   width: 100%;
   border-spacing: 0;
   display: table;
@@ -802,7 +804,7 @@ exports[`Template Page should render 1`] = `
   border-color: #9a9a9a;
 }
 
-.emotion-104 {
+.emotion-113 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -814,7 +816,7 @@ exports[`Template Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-108 {
+.emotion-117 {
   text-align: center;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -826,7 +828,7 @@ exports[`Template Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-132 {
+.emotion-141 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -849,13 +851,13 @@ exports[`Template Page should render 1`] = `
   width: 20px;
 }
 
-.emotion-134 {
+.emotion-143 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-135 {
+.emotion-144 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -870,7 +872,7 @@ exports[`Template Page should render 1`] = `
   width: 350px;
 }
 
-.emotion-137 {
+.emotion-146 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -886,38 +888,38 @@ exports[`Template Page should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-139 {
+.emotion-148 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-141 {
+.emotion-150 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-143 {
+.emotion-152 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-147 {
+.emotion-156 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-149 {
+.emotion-158 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-151 {
+.emotion-160 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-153 {
+.emotion-162 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -955,40 +957,102 @@ exports[`Template Page should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -997,11 +1061,11 @@ exports[`Template Page should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1017,13 +1081,13 @@ exports[`Template Page should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1050,33 +1114,33 @@ exports[`Template Page should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 home.test
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1094,72 +1158,72 @@ exports[`Template Page should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-01-24 18:14 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1176,49 +1240,49 @@ exports[`Template Page should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     1231243134
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1238,10 +1302,10 @@ exports[`Template Page should render 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <button
-                    class="emotion-87 denali-button"
+                    class="emotion-96 denali-button"
                   >
                     Onboard to AWS
                   </button>
@@ -1249,59 +1313,59 @@ exports[`Template Page should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-88 denali-tab-group"
+              class="emotion-97 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Groups
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Services
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Policies
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-89 denali-tab active"
+                class="emotion-98 denali-tab active"
                 data-active="true"
               >
                 Templates
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 Visibility
               </div>
               <div
-                class="emotion-89 denali-tab"
+                class="emotion-98 denali-tab"
                 data-active="false"
               >
                 History
@@ -1309,46 +1373,46 @@ exports[`Template Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-98 emotion-99"
+            class="emotion-107 emotion-108"
             data-testid="template-list"
           >
             <div
-              class="emotion-100 emotion-101"
+              class="emotion-109 emotion-110"
             >
               Domain Templates
             </div>
             <table
-              class="emotion-102 emotion-103"
+              class="emotion-111 emotion-112"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-104 emotion-105"
+                    class="emotion-113 emotion-114"
                   >
                     TEMPLATE
                   </th>
                   <th
-                    class="emotion-104 emotion-105"
+                    class="emotion-113 emotion-114"
                   >
                     INFO
                   </th>
                   <th
-                    class="emotion-108 emotion-105"
+                    class="emotion-117 emotion-114"
                   >
                     CURRENT VERSION
                   </th>
                   <th
-                    class="emotion-108 emotion-105"
+                    class="emotion-117 emotion-114"
                   >
                     LATEST VERSION
                   </th>
                   <th
-                    class="emotion-108 emotion-105"
+                    class="emotion-117 emotion-114"
                   >
                     UPDATED DATE
                   </th>
                   <th
-                    class="emotion-108 emotion-105"
+                    class="emotion-117 emotion-114"
                   >
                     UPDATE VERSION
                   </th>
@@ -1357,42 +1421,42 @@ exports[`Template Page should render 1`] = `
               <tbody />
             </table>
             <div
-              class="emotion-100 emotion-101"
+              class="emotion-109 emotion-110"
             >
               Server Templates
             </div>
             <table
-              class="emotion-102 emotion-103"
+              class="emotion-111 emotion-112"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-104 emotion-105"
+                    class="emotion-113 emotion-114"
                   >
                     TEMPLATE
                   </th>
                   <th
-                    class="emotion-104 emotion-105"
+                    class="emotion-113 emotion-114"
                   >
                     INFO
                   </th>
                   <th
-                    class="emotion-108 emotion-105"
+                    class="emotion-117 emotion-114"
                   >
                     CURRENT VERSION
                   </th>
                   <th
-                    class="emotion-108 emotion-105"
+                    class="emotion-117 emotion-114"
                   >
                     LATEST VERSION
                   </th>
                   <th
-                    class="emotion-108 emotion-105"
+                    class="emotion-117 emotion-114"
                   >
                     UPDATED DATE
                   </th>
                   <th
-                    class="emotion-108 emotion-105"
+                    class="emotion-117 emotion-114"
                   >
                     UPDATE VERSION
                   </th>
@@ -1407,11 +1471,11 @@ exports[`Template Page should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-132 emotion-133"
+          class="emotion-141 emotion-142"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-134"
+            class="emotion-143"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1428,30 +1492,30 @@ exports[`Template Page should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-135 emotion-136"
+          class="emotion-144 emotion-145"
         >
           <div
-            class="emotion-137 emotion-138"
+            class="emotion-146 emotion-147"
           >
             <div
-              class="emotion-139 emotion-140"
+              class="emotion-148 emotion-149"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-141 emotion-142"
+                class="emotion-150 emotion-151"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-143 emotion-144"
+                class="emotion-152 emotion-153"
               >
                  | 
               </span>
               <a
-                class="emotion-141 emotion-142"
+                class="emotion-150 emotion-151"
                 href="/domain/manage"
               >
                 Manage
@@ -1459,16 +1523,16 @@ exports[`Template Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-147 emotion-148"
+            class="emotion-156 emotion-157"
           >
             <div
-              class="emotion-149 emotion-150"
+              class="emotion-158 emotion-159"
             >
               <div
-                class="emotion-151 emotion-152"
+                class="emotion-160 emotion-161"
               >
                 <svg
-                  class="emotion-153"
+                  class="emotion-162"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1491,20 +1555,20 @@ exports[`Template Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-141 emotion-142"
+                class="emotion-150 emotion-151"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-149 emotion-150"
+              class="emotion-158 emotion-159"
             >
               <div
-                class="emotion-151 emotion-152"
+                class="emotion-160 emotion-161"
               >
                 <svg
-                  class="emotion-153"
+                  class="emotion-162"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1527,7 +1591,7 @@ exports[`Template Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-141 emotion-142"
+                class="emotion-150 emotion-151"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/visibility.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/visibility.test.js.snap
index 85ca25e910e..6919f11990b 100644
--- a/ui/src/__tests__/pages/domain/[domain]/__snapshots__/visibility.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/__snapshots__/visibility.test.js.snap
@@ -265,6 +265,25 @@ exports[`VisibilityPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`VisibilityPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`VisibilityPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`VisibilityPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`VisibilityPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`VisibilityPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`VisibilityPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,33 +471,33 @@ exports[`VisibilityPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: inline-block;
 }
 
-.emotion-32 {
+.emotion-41 {
   margin-left: 10px;
   display: inline-block;
 }
 
-.emotion-34 {
+.emotion-43 {
   fill: #3697f2;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin: 20px 0;
 }
 
-.emotion-37 {
+.emotion-46 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -504,14 +506,14 @@ exports[`VisibilityPage should render 1`] = `
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   padding-right: 50px;
   -webkit-flex-basis: 15%;
   -ms-flex-preferred-size: 15%;
   flex-basis: 15%;
 }
 
-.emotion-41 {
+.emotion-50 {
   font-weight: 600;
   word-break: break-all;
   overflow: hidden;
@@ -520,7 +522,7 @@ exports[`VisibilityPage should render 1`] = `
   max-width: 400px;
 }
 
-.emotion-43 {
+.emotion-52 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -528,17 +530,17 @@ exports[`VisibilityPage should render 1`] = `
   font-weight: '';
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-weight: 600;
 }
 
-.emotion-65 {
+.emotion-74 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -552,7 +554,7 @@ exports[`VisibilityPage should render 1`] = `
   position: relative;
 }
 
-.emotion-65>input[type='checkbox'] {
+.emotion-74>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -560,7 +562,7 @@ exports[`VisibilityPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-65>input[type='checkbox']+label {
+.emotion-74>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -571,18 +573,18 @@ exports[`VisibilityPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-65>input[type='checkbox']+label .label-content {
+.emotion-74>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-65>input[type='checkbox']+label .label-content {
+  .emotion-74>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-65>input[type='checkbox']+label:before {
+.emotion-74>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -598,7 +600,7 @@ exports[`VisibilityPage should render 1`] = `
   width: 34px;
 }
 
-.emotion-65>input[type='checkbox']+label::after {
+.emotion-74>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -615,46 +617,46 @@ exports[`VisibilityPage should render 1`] = `
   width: 18px;
 }
 
-.emotion-65>input[type='checkbox']:checked+label::before {
+.emotion-74>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-65>input[type='checkbox']:checked+label::after {
+.emotion-74>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label {
+.emotion-74>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::before {
+.emotion-74>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:disabled+label::after {
+.emotion-74>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-65>input[type='checkbox']:checked:disabled+label::after {
+.emotion-74>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-left: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-85 {
+.emotion-94 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -669,7 +671,7 @@ exports[`VisibilityPage should render 1`] = `
   position: relative;
 }
 
-.emotion-85.vertical {
+.emotion-94.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -682,7 +684,7 @@ exports[`VisibilityPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-86 {
+.emotion-95 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -703,11 +705,11 @@ exports[`VisibilityPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-86:hover {
+.emotion-95:hover {
   color: #3570f4;
 }
 
-.emotion-86.active {
+.emotion-95.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -715,11 +717,11 @@ exports[`VisibilityPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-86.active:hover {
+.emotion-95.active:hover {
   color: #303030;
 }
 
-.emotion-86.vertical {
+.emotion-95.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -731,25 +733,25 @@ exports[`VisibilityPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-86.vertical.active {
+.emotion-95.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-86.vertical.active:hover {
+.emotion-95.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-95 {
+.emotion-104 {
   margin: 20px;
 }
 
-.emotion-97 {
+.emotion-106 {
   vertical-align: middle;
 }
 
-.emotion-99 {
+.emotion-108 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -763,7 +765,7 @@ exports[`VisibilityPage should render 1`] = `
   position: relative;
 }
 
-.emotion-99::before {
+.emotion-108::before {
   background: #fff;
   border: 2px solid #0072df;
   border-radius: 2px;
@@ -777,7 +779,7 @@ exports[`VisibilityPage should render 1`] = `
   width: calc(50% + 4px);
 }
 
-.emotion-100 {
+.emotion-109 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -802,11 +804,11 @@ exports[`VisibilityPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-100:hover {
+.emotion-109:hover {
   color: #303030;
 }
 
-.emotion-101 {
+.emotion-110 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -831,11 +833,11 @@ exports[`VisibilityPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-101:hover {
+.emotion-110:hover {
   color: #3570f4;
 }
 
-.emotion-102 {
+.emotion-111 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -858,13 +860,13 @@ exports[`VisibilityPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-104 {
+.emotion-113 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-105 {
+.emotion-114 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -879,7 +881,7 @@ exports[`VisibilityPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-107 {
+.emotion-116 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -895,38 +897,38 @@ exports[`VisibilityPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-109 {
+.emotion-118 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-111 {
+.emotion-120 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-113 {
+.emotion-122 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-117 {
+.emotion-126 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-119 {
+.emotion-128 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-121 {
+.emotion-130 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-123 {
+.emotion-132 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -964,40 +966,102 @@ exports[`VisibilityPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1006,11 +1070,11 @@ exports[`VisibilityPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1026,13 +1090,13 @@ exports[`VisibilityPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1059,33 +1123,33 @@ exports[`VisibilityPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
               data-testid="domain-name-header"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 dom
               </div>
               <div
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
               >
                 <svg
-                  class="emotion-34"
+                  class="emotion-43"
                   data-testid="icon"
                   data-wdio=""
                   height="25px"
@@ -1103,72 +1167,72 @@ exports[`VisibilityPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
               data-testid="domain-details"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <a
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                       data-testid="security-poc-link"
                     >
                       add
                     </a>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     SECURITY POINT OF CONTACT
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     <div
-                      class="emotion-65 denali-switch"
+                      class="emotion-74 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1185,49 +1249,49 @@ exports[`VisibilityPage should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AUDIT ENABLED
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     AWS ACCOUNT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-39 emotion-40"
+                  class="emotion-48 emotion-49"
                 >
                   <div
-                    class="emotion-57 emotion-58"
+                    class="emotion-66 emotion-67"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-54 emotion-55"
                   >
                     GCP PROJECT ID
                   </div>
                 </div>
                 <div
-                  class="emotion-57 emotion-58"
+                  class="emotion-66 emotion-67"
                 >
                   More Details
                 </div>
                 <div
-                  class="emotion-82 emotion-83"
+                  class="emotion-91 emotion-92"
                 >
                   <svg
-                    class="emotion-84"
+                    class="emotion-93"
                     data-testid="icon"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
@@ -1249,59 +1313,59 @@ exports[`VisibilityPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-85 denali-tab-group"
+              class="emotion-94 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Groups
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Services
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Policies
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Templates
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-86 denali-tab active"
+                class="emotion-95 denali-tab active"
                 data-active="true"
               >
                 Visibility
               </div>
               <div
-                class="emotion-86 denali-tab"
+                class="emotion-95 denali-tab"
                 data-active="false"
               >
                 History
@@ -1309,25 +1373,25 @@ exports[`VisibilityPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-95 emotion-96"
+            class="emotion-104 emotion-105"
             data-testid="visibilitySection"
           >
             <div
-              class="emotion-97 emotion-98"
+              class="emotion-106 emotion-107"
             >
               <div
-                class="emotion-99 denali-button-group"
+                class="emotion-108 denali-button-group"
                 data-testid="buttongroup"
               >
                 <div
-                  class="emotion-100"
+                  class="emotion-109"
                   data-active="true"
                   id="button-dependencies"
                 >
                   Dependencies
                 </div>
                 <div
-                  class="emotion-101"
+                  class="emotion-110"
                   data-active="false"
                   id="button-auth"
                 >
@@ -1342,11 +1406,11 @@ exports[`VisibilityPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-102 emotion-103"
+          class="emotion-111 emotion-112"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-104"
+            class="emotion-113"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1363,30 +1427,30 @@ exports[`VisibilityPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-105 emotion-106"
+          class="emotion-114 emotion-115"
         >
           <div
-            class="emotion-107 emotion-108"
+            class="emotion-116 emotion-117"
           >
             <div
-              class="emotion-109 emotion-110"
+              class="emotion-118 emotion-119"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-113 emotion-114"
+                class="emotion-122 emotion-123"
               >
                  | 
               </span>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/manage"
               >
                 Manage
@@ -1394,16 +1458,16 @@ exports[`VisibilityPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-117 emotion-118"
+            class="emotion-126 emotion-127"
           >
             <div
-              class="emotion-119 emotion-120"
+              class="emotion-128 emotion-129"
             >
               <div
-                class="emotion-121 emotion-122"
+                class="emotion-130 emotion-131"
               >
                 <svg
-                  class="emotion-123"
+                  class="emotion-132"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1426,20 +1490,20 @@ exports[`VisibilityPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-119 emotion-120"
+              class="emotion-128 emotion-129"
             >
               <div
-                class="emotion-121 emotion-122"
+                class="emotion-130 emotion-131"
               >
                 <svg
-                  class="emotion-123"
+                  class="emotion-132"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1462,7 +1526,7 @@ exports[`VisibilityPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-111 emotion-112"
+                class="emotion-120 emotion-121"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/members.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/members.test.js.snap
index ba4ce8384c2..1b1096141ba 100644
--- a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/members.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/members.test.js.snap
@@ -265,6 +265,25 @@ exports[`GroupMemberPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`GroupMemberPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`GroupMemberPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`GroupMemberPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`GroupMemberPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`GroupMemberPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`GroupMemberPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`GroupMemberPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`GroupMemberPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`GroupMemberPage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`GroupMemberPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`GroupMemberPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`GroupMemberPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`GroupMemberPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
 }
 
-.emotion-59 {
+.emotion-68 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -620,7 +622,7 @@ exports[`GroupMemberPage should render 1`] = `
   float: right;
 }
 
-.emotion-61 {
+.emotion-70 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -645,25 +647,25 @@ exports[`GroupMemberPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-61:first-of-type {
+.emotion-70:first-of-type {
   margin-left: 0;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-61:hover:not(:disabled) {
+.emotion-70:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-62 {
+.emotion-71 {
   width: 100%;
   border-spacing: 0;
   display: table;
@@ -678,7 +680,7 @@ exports[`GroupMemberPage should render 1`] = `
   height: 50px;
 }
 
-.emotion-64 {
+.emotion-73 {
   height: 25px;
   margin-left: 10px;
   margin-top: 10px;
@@ -690,18 +692,18 @@ exports[`GroupMemberPage should render 1`] = `
   display: table-cell;
 }
 
-.emotion-66 {
+.emotion-75 {
   margin-right: 10px;
   verticalalign: bottom;
 }
 
-.emotion-68 {
+.emotion-77 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-69 {
+.emotion-78 {
   text-align: center;
   width: 1%;
   border-bottom: 2px solid #d5d5d5;
@@ -714,7 +716,7 @@ exports[`GroupMemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-71 {
+.emotion-80 {
   text-align: left;
   width: 25%;
   border-bottom: 2px solid #d5d5d5;
@@ -727,7 +729,7 @@ exports[`GroupMemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-73 {
+.emotion-82 {
   text-align: left;
   width: 25%;
   border-bottom: 2px solid #d5d5d5;
@@ -740,7 +742,7 @@ exports[`GroupMemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-75 {
+.emotion-84 {
   text-align: left;
   width: 39%;
   border-bottom: 2px solid #d5d5d5;
@@ -753,7 +755,7 @@ exports[`GroupMemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-77 {
+.emotion-86 {
   text-align: center;
   width: 8%;
   border-bottom: 2px solid #d5d5d5;
@@ -766,7 +768,7 @@ exports[`GroupMemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-79 {
+.emotion-88 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -789,13 +791,13 @@ exports[`GroupMemberPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-81 {
+.emotion-90 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-82 {
+.emotion-91 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -810,7 +812,7 @@ exports[`GroupMemberPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-84 {
+.emotion-93 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -826,38 +828,38 @@ exports[`GroupMemberPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-86 {
+.emotion-95 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-88 {
+.emotion-97 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-90 {
+.emotion-99 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-94 {
+.emotion-103 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-96 {
+.emotion-105 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-98 {
+.emotion-107 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-100 {
+.emotion-109 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -895,40 +897,102 @@ exports[`GroupMemberPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -937,11 +1001,11 @@ exports[`GroupMemberPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -957,13 +1021,13 @@ exports[`GroupMemberPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -990,26 +1054,26 @@ exports[`GroupMemberPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/group"
               >
                 dom
@@ -1020,36 +1084,36 @@ exports[`GroupMemberPage should render 1`] = `
               group1
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -1057,41 +1121,41 @@ exports[`GroupMemberPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1099,35 +1163,35 @@ exports[`GroupMemberPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
             data-testid="member-list"
           >
             <div
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
             >
               <div>
                 <button
-                  class="emotion-61 denali-button"
+                  class="emotion-70 denali-button"
                 >
                   Add Member
                 </button>
               </div>
             </div>
             <table
-              class="emotion-62 emotion-63"
+              class="emotion-71 emotion-72"
               data-testid="member-table"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                     colspan="3"
                   >
                     <span
-                      class="emotion-66 emotion-67"
+                      class="emotion-75 emotion-76"
                     >
                       <svg
-                        class="emotion-68"
+                        class="emotion-77"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1148,29 +1212,29 @@ exports[`GroupMemberPage should render 1`] = `
                 </tr>
                 <tr>
                   <th
-                    class="emotion-69 emotion-70"
+                    class="emotion-78 emotion-79"
                     width="1"
                   />
                   <th
-                    class="emotion-71 emotion-72"
+                    class="emotion-80 emotion-81"
                     width="25"
                   >
                     User Name
                   </th>
                   <th
-                    class="emotion-73 emotion-70"
+                    class="emotion-82 emotion-79"
                     width="25"
                   >
                     Name of User
                   </th>
                   <th
-                    class="emotion-75 emotion-70"
+                    class="emotion-84 emotion-79"
                     width="39"
                   >
                     Expiration Date
                   </th>
                   <th
-                    class="emotion-77 emotion-70"
+                    class="emotion-86 emotion-79"
                     width="8"
                   >
                     Delete
@@ -1187,11 +1251,11 @@ exports[`GroupMemberPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-79 emotion-80"
+          class="emotion-88 emotion-89"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-81"
+            class="emotion-90"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1208,30 +1272,30 @@ exports[`GroupMemberPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-82 emotion-83"
+          class="emotion-91 emotion-92"
         >
           <div
-            class="emotion-84 emotion-85"
+            class="emotion-93 emotion-94"
           >
             <div
-              class="emotion-86 emotion-87"
+              class="emotion-95 emotion-96"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-88 emotion-89"
+                class="emotion-97 emotion-98"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-90 emotion-91"
+                class="emotion-99 emotion-100"
               >
                  | 
               </span>
               <a
-                class="emotion-88 emotion-89"
+                class="emotion-97 emotion-98"
                 href="/domain/manage"
               >
                 Manage
@@ -1239,16 +1303,16 @@ exports[`GroupMemberPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-94 emotion-95"
+            class="emotion-103 emotion-104"
           >
             <div
-              class="emotion-96 emotion-97"
+              class="emotion-105 emotion-106"
             >
               <div
-                class="emotion-98 emotion-99"
+                class="emotion-107 emotion-108"
               >
                 <svg
-                  class="emotion-100"
+                  class="emotion-109"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1271,20 +1335,20 @@ exports[`GroupMemberPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-88 emotion-89"
+                class="emotion-97 emotion-98"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-96 emotion-97"
+              class="emotion-105 emotion-106"
             >
               <div
-                class="emotion-98 emotion-99"
+                class="emotion-107 emotion-108"
               >
                 <svg
-                  class="emotion-100"
+                  class="emotion-109"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1307,7 +1371,7 @@ exports[`GroupMemberPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-88 emotion-89"
+                class="emotion-97 emotion-98"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/review.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/review.test.js.snap
index 5871d4e41f0..5bb017a1072 100644
--- a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/review.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/review.test.js.snap
@@ -265,6 +265,25 @@ exports[`GroupReviewPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`GroupReviewPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`GroupReviewPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`GroupReviewPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`GroupReviewPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`GroupReviewPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`GroupReviewPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`GroupReviewPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`GroupReviewPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`GroupReviewPage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`GroupReviewPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`GroupReviewPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`GroupReviewPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,35 +591,35 @@ exports[`GroupReviewPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
   margin-bottom: 0px;
 }
 
-.emotion-59 {
+.emotion-68 {
   margin: 0;
 }
 
-.emotion-61 {
+.emotion-70 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-63 {
+.emotion-72 {
   margin: 20px;
 }
 
-.emotion-65 {
+.emotion-74 {
   width: 100%;
   border-spacing: 0 15px;
   display: table;
@@ -626,7 +628,7 @@ exports[`GroupReviewPage should render 1`] = `
   table-layout: fixed;
 }
 
-.emotion-67 {
+.emotion-76 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -638,7 +640,7 @@ exports[`GroupReviewPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-73 {
+.emotion-82 {
   text-align: center;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -650,11 +652,11 @@ exports[`GroupReviewPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-79 {
+.emotion-88 {
   width: 500px;
 }
 
-.emotion-81 {
+.emotion-90 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -668,7 +670,7 @@ exports[`GroupReviewPage should render 1`] = `
   width: 250px;
 }
 
-.emotion-81 input {
+.emotion-90 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -694,42 +696,42 @@ exports[`GroupReviewPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-81.animated input {
+.emotion-90.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-81 input::-webkit-input-placeholder {
+.emotion-90 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-81 input::-moz-placeholder {
+.emotion-90 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-81 input:-ms-input-placeholder {
+.emotion-90 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-81 input::placeholder {
+.emotion-90 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-81 input.focused,
-.emotion-81 input:active,
-.emotion-81 input:focus {
+.emotion-90 input.focused,
+.emotion-90 input:active,
+.emotion-90 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-81 input:invalid {
+.emotion-90 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-81 .message {
+.emotion-90 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -737,27 +739,27 @@ exports[`GroupReviewPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-81.error input,
-.emotion-81.error input.focused,
-.emotion-81.error input:active,
-.emotion-81.error input:focus {
+.emotion-90.error input,
+.emotion-90.error input.focused,
+.emotion-90.error input:active,
+.emotion-90.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-81.error .message {
+.emotion-90.error .message {
   color: #d01111;
 }
 
-.emotion-82 {
+.emotion-91 {
   width: 300px;
   margin-top: 5px;
 }
 
-.emotion-84 {
+.emotion-93 {
   margin-top: 10px;
 }
 
-.emotion-86 {
+.emotion-95 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -782,25 +784,25 @@ exports[`GroupReviewPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-86:first-of-type {
+.emotion-95:first-of-type {
   margin-left: 0;
 }
 
-.emotion-86:disabled {
+.emotion-95:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-86:disabled {
+.emotion-95:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-86:hover:not(:disabled) {
+.emotion-95:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-87 {
+.emotion-96 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -823,13 +825,13 @@ exports[`GroupReviewPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-89 {
+.emotion-98 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-90 {
+.emotion-99 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -844,7 +846,7 @@ exports[`GroupReviewPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-92 {
+.emotion-101 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -860,38 +862,38 @@ exports[`GroupReviewPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-94 {
+.emotion-103 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-96 {
+.emotion-105 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-98 {
+.emotion-107 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-102 {
+.emotion-111 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-104 {
+.emotion-113 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-106 {
+.emotion-115 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-108 {
+.emotion-117 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -929,40 +931,102 @@ exports[`GroupReviewPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -971,11 +1035,11 @@ exports[`GroupReviewPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -991,13 +1055,13 @@ exports[`GroupReviewPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1024,26 +1088,26 @@ exports[`GroupReviewPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/group"
               >
                 dom
@@ -1054,36 +1118,36 @@ exports[`GroupReviewPage should render 1`] = `
               group1
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -1091,41 +1155,41 @@ exports[`GroupReviewPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1133,54 +1197,54 @@ exports[`GroupReviewPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
             data-testid="review-list"
           >
             <div
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
             >
               <div
-                class="emotion-61 emotion-62"
+                class="emotion-70 emotion-71"
               >
                 REVIEW GROUP MEMBERS
               </div>
               <div
-                class="emotion-63 emotion-64"
+                class="emotion-72 emotion-73"
                 data-testid="review-table"
               >
                 <table
-                  class="emotion-65 emotion-66"
+                  class="emotion-74 emotion-75"
                 >
                   <thead>
                     <tr>
                       <th
-                        class="emotion-67 emotion-68"
+                        class="emotion-76 emotion-77"
                       >
                         MEMBER
                       </th>
                       <th
-                        class="emotion-67 emotion-68"
+                        class="emotion-76 emotion-77"
                       >
                         MEMBER NAME
                       </th>
                       <th
-                        class="emotion-67 emotion-68"
+                        class="emotion-76 emotion-77"
                         colspan="2"
                       >
                         EXPIRATION DATE
                       </th>
                       <th
-                        class="emotion-73 emotion-68"
+                        class="emotion-82 emotion-77"
                       >
                         EXTEND
                       </th>
                       <th
-                        class="emotion-73 emotion-68"
+                        class="emotion-82 emotion-77"
                       >
                         NO ACTION
                       </th>
                       <th
-                        class="emotion-73 emotion-68"
+                        class="emotion-82 emotion-77"
                       >
                         DELETE
                       </th>
@@ -1188,7 +1252,7 @@ exports[`GroupReviewPage should render 1`] = `
                   </thead>
                   <tbody>
                     <p
-                      class="emotion-79 emotion-80"
+                      class="emotion-88 emotion-89"
                     >
                       There are no members to review for group:
                        
@@ -1200,7 +1264,7 @@ exports[`GroupReviewPage should render 1`] = `
                         colspan="2"
                       >
                         <div
-                          class="emotion-81 denali-input animated emotion-82 emotion-83"
+                          class="emotion-90 denali-input animated emotion-91 emotion-92"
                           data-testid="input-wrapper"
                         >
                           <input
@@ -1221,11 +1285,11 @@ exports[`GroupReviewPage should render 1`] = `
                         colspan="1"
                       >
                         <div
-                          class="emotion-84 emotion-85"
+                          class="emotion-93 emotion-94"
                           id="submit-button-group1"
                         >
                           <button
-                            class="emotion-86 denali-button"
+                            class="emotion-95 denali-button"
                           >
                             Submit Review
                           </button>
@@ -1251,11 +1315,11 @@ exports[`GroupReviewPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-87 emotion-88"
+          class="emotion-96 emotion-97"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-89"
+            class="emotion-98"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1272,30 +1336,30 @@ exports[`GroupReviewPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-90 emotion-91"
+          class="emotion-99 emotion-100"
         >
           <div
-            class="emotion-92 emotion-93"
+            class="emotion-101 emotion-102"
           >
             <div
-              class="emotion-94 emotion-95"
+              class="emotion-103 emotion-104"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-96 emotion-97"
+                class="emotion-105 emotion-106"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-98 emotion-99"
+                class="emotion-107 emotion-108"
               >
                  | 
               </span>
               <a
-                class="emotion-96 emotion-97"
+                class="emotion-105 emotion-106"
                 href="/domain/manage"
               >
                 Manage
@@ -1303,16 +1367,16 @@ exports[`GroupReviewPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-102 emotion-103"
+            class="emotion-111 emotion-112"
           >
             <div
-              class="emotion-104 emotion-105"
+              class="emotion-113 emotion-114"
             >
               <div
-                class="emotion-106 emotion-107"
+                class="emotion-115 emotion-116"
               >
                 <svg
-                  class="emotion-108"
+                  class="emotion-117"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1335,20 +1399,20 @@ exports[`GroupReviewPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-96 emotion-97"
+                class="emotion-105 emotion-106"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-104 emotion-105"
+              class="emotion-113 emotion-114"
             >
               <div
-                class="emotion-106 emotion-107"
+                class="emotion-115 emotion-116"
               >
                 <svg
-                  class="emotion-108"
+                  class="emotion-117"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1371,7 +1435,7 @@ exports[`GroupReviewPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-96 emotion-97"
+                class="emotion-105 emotion-106"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/roles.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/roles.test.js.snap
index 9bda89c0489..49f67563218 100644
--- a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/roles.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/roles.test.js.snap
@@ -265,6 +265,25 @@ exports[`GroupRolesPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`GroupRolesPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`GroupRolesPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`GroupRolesPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`GroupRolesPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`GroupRolesPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`GroupRolesPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`GroupRolesPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`GroupRolesPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`GroupRolesPage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`GroupRolesPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`GroupRolesPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`GroupRolesPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,17 +591,17 @@ exports[`GroupRolesPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -615,122 +617,13 @@ exports[`GroupRolesPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-59 {
+.emotion-68 {
   width: 50%;
   margin-top: 20px;
   margin-left: 30px;
 }
 
-.emotion-61 {
-  box-sizing: border-box;
-  display: inline-flex;
-  -webkit-box-flex-flow: row nowrap;
-  -webkit-flex-flow: row nowrap;
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  position: relative;
-  width: 100%;
-}
-
-.emotion-61 input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: rgba(53,112,244,0.05);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: transparent;
-  border-left: transparent;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #303030;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  font: inherit;
-  height: 36px;
-  margin: 0;
-  outline: none;
-  padding: 0 1rem;
-  text-align: left;
-  width: 100%;
-}
-
-.emotion-61.animated input {
-  -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-}
-
-.emotion-61 input::-webkit-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-61 input::-moz-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-61 input:-ms-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-61 input::placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-61 input.focused,
-.emotion-61 input:active,
-.emotion-61 input:focus {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #3570f4;
-  color: #303030;
-}
-
-.emotion-61 input:invalid {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #d01111;
-  color: #303030;
-}
-
-.emotion-61 .message {
-  font-size: 12px;
-  left: 0;
-  line-height: 1.8;
-  position: absolute;
-  top: 2.571rem;
-}
-
-.emotion-61.error input,
-.emotion-61.error input.focused,
-.emotion-61.error input:active,
-.emotion-61.error input:focus {
-  border-bottom: 2px solid #d01111;
-}
-
-.emotion-61.error .message {
-  color: #d01111;
-}
-
-.emotion-61 input {
-  padding-right: 36px;
-}
-
-.emotion-61 .input-icon {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: flex;
-  height: 36px;
-  position: absolute;
-  right: 6px;
-}
-
-.emotion-63 {
+.emotion-72 {
   width: 95%;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -738,11 +631,11 @@ exports[`GroupRolesPage should render 1`] = `
   padding-left: 2%;
 }
 
-.emotion-65 {
+.emotion-74 {
   padding-top: 20px;
 }
 
-.emotion-67 {
+.emotion-76 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -765,13 +658,13 @@ exports[`GroupRolesPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-69 {
+.emotion-78 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-70 {
+.emotion-79 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -786,7 +679,7 @@ exports[`GroupRolesPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-72 {
+.emotion-81 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -802,38 +695,38 @@ exports[`GroupRolesPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-74 {
+.emotion-83 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-76 {
+.emotion-85 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-78 {
+.emotion-87 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-84 {
+.emotion-93 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-86 {
+.emotion-95 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-88 {
+.emotion-97 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -871,40 +764,102 @@ exports[`GroupRolesPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -913,11 +868,11 @@ exports[`GroupRolesPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -933,13 +888,13 @@ exports[`GroupRolesPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -966,26 +921,26 @@ exports[`GroupRolesPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/group"
               >
                 dom
@@ -996,36 +951,36 @@ exports[`GroupRolesPage should render 1`] = `
               grp
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -1033,41 +988,41 @@ exports[`GroupRolesPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Roles
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1075,13 +1030,13 @@ exports[`GroupRolesPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
           >
             <div
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
             >
               <div
-                class="emotion-61 denali-input animated"
+                class="emotion-14 denali-input animated"
                 data-testid="input-wrapper"
               >
                 <input
@@ -1095,7 +1050,7 @@ exports[`GroupRolesPage should render 1`] = `
                   class="input-icon"
                 >
                   <svg
-                    class="emotion-10"
+                    class="emotion-19"
                     data-testid="icon"
                     data-wdio=""
                     height="24px"
@@ -1119,10 +1074,10 @@ exports[`GroupRolesPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-63 emotion-64"
+            class="emotion-72 emotion-73"
           >
             <div
-              class="emotion-65 emotion-66"
+              class="emotion-74 emotion-75"
             >
               The group isn't a member of any role.
             </div>
@@ -1133,11 +1088,11 @@ exports[`GroupRolesPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-67 emotion-68"
+          class="emotion-76 emotion-77"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-69"
+            class="emotion-78"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1154,30 +1109,30 @@ exports[`GroupRolesPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-70 emotion-71"
+          class="emotion-79 emotion-80"
         >
           <div
-            class="emotion-72 emotion-73"
+            class="emotion-81 emotion-82"
           >
             <div
-              class="emotion-74 emotion-75"
+              class="emotion-83 emotion-84"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-76 emotion-77"
+                class="emotion-85 emotion-86"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-78 emotion-79"
+                class="emotion-87 emotion-88"
               >
                  | 
               </span>
               <a
-                class="emotion-76 emotion-77"
+                class="emotion-85 emotion-86"
                 href="/domain/manage"
               >
                 Manage
@@ -1185,16 +1140,16 @@ exports[`GroupRolesPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-82 emotion-83"
+            class="emotion-91 emotion-92"
           >
             <div
-              class="emotion-84 emotion-85"
+              class="emotion-93 emotion-94"
             >
               <div
-                class="emotion-86 emotion-87"
+                class="emotion-95 emotion-96"
               >
                 <svg
-                  class="emotion-88"
+                  class="emotion-97"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1217,20 +1172,20 @@ exports[`GroupRolesPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-76 emotion-77"
+                class="emotion-85 emotion-86"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-84 emotion-85"
+              class="emotion-93 emotion-94"
             >
               <div
-                class="emotion-86 emotion-87"
+                class="emotion-95 emotion-96"
               >
                 <svg
-                  class="emotion-88"
+                  class="emotion-97"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1253,7 +1208,7 @@ exports[`GroupRolesPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-76 emotion-77"
+                class="emotion-85 emotion-86"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/settings.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/settings.test.js.snap
index f8e34e5a79c..b28bb5e83b1 100644
--- a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/settings.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/settings.test.js.snap
@@ -265,6 +265,25 @@ exports[`GroupSettingPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`GroupSettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`GroupSettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`GroupSettingPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`GroupSettingPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`GroupSettingPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`GroupSettingPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`GroupSettingPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`GroupSettingPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`GroupSettingPage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`GroupSettingPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`GroupSettingPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`GroupSettingPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`GroupSettingPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
 }
 
-.emotion-59 {
+.emotion-68 {
   width: 100%;
   border-spacing: 0 20px;
   display: table;
@@ -611,7 +613,7 @@ exports[`GroupSettingPage should render 1`] = `
   border-color: grey;
 }
 
-.emotion-61 {
+.emotion-70 {
   box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 1px 4px #d9d9d9;
@@ -621,7 +623,7 @@ exports[`GroupSettingPage should render 1`] = `
   height: 50px;
 }
 
-.emotion-63 {
+.emotion-72 {
   text-align: left;
   width: auto;
   padding: 5px 0 5px 15px;
@@ -629,7 +631,7 @@ exports[`GroupSettingPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-67 {
+.emotion-76 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -643,7 +645,7 @@ exports[`GroupSettingPage should render 1`] = `
   position: relative;
 }
 
-.emotion-67>input[type='checkbox'] {
+.emotion-76>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -651,7 +653,7 @@ exports[`GroupSettingPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-67>input[type='checkbox']+label {
+.emotion-76>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -662,18 +664,18 @@ exports[`GroupSettingPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-67>input[type='checkbox']+label .label-content {
+.emotion-76>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-67>input[type='checkbox']+label .label-content {
+  .emotion-76>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-67>input[type='checkbox']+label:before {
+.emotion-76>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -689,7 +691,7 @@ exports[`GroupSettingPage should render 1`] = `
   width: 34px;
 }
 
-.emotion-67>input[type='checkbox']+label::after {
+.emotion-76>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -706,40 +708,40 @@ exports[`GroupSettingPage should render 1`] = `
   width: 18px;
 }
 
-.emotion-67>input[type='checkbox']:checked+label::before {
+.emotion-76>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-67>input[type='checkbox']:checked+label::after {
+.emotion-76>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-67>input[type='checkbox']:disabled+label {
+.emotion-76>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-67>input[type='checkbox']:disabled+label::before {
+.emotion-76>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-67>input[type='checkbox']:disabled+label::after {
+.emotion-76>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-67>input[type='checkbox']:checked:disabled+label::after {
+.emotion-76>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-103 {
+.emotion-112 {
   display: flex;
 }
 
-.emotion-105 {
+.emotion-114 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -753,7 +755,7 @@ exports[`GroupSettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-105 input {
+.emotion-114 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -779,42 +781,42 @@ exports[`GroupSettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-105.animated input {
+.emotion-114.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-105 input::-webkit-input-placeholder {
+.emotion-114 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-105 input::-moz-placeholder {
+.emotion-114 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-105 input:-ms-input-placeholder {
+.emotion-114 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-105 input::placeholder {
+.emotion-114 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-105 input.focused,
-.emotion-105 input:active,
-.emotion-105 input:focus {
+.emotion-114 input.focused,
+.emotion-114 input:active,
+.emotion-114 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-105 input:invalid {
+.emotion-114 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-105 .message {
+.emotion-114 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -822,29 +824,29 @@ exports[`GroupSettingPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-105.error input,
-.emotion-105.error input.focused,
-.emotion-105.error input:active,
-.emotion-105.error input:focus {
+.emotion-114.error input,
+.emotion-114.error input.focused,
+.emotion-114.error input:active,
+.emotion-114.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-105.error .message {
+.emotion-114.error .message {
   color: #d01111;
 }
 
-.emotion-105 input[disabled] {
+.emotion-114 input[disabled] {
   background: rgba(48,48,48,0.05);
   border-bottom: 2px solid rgba(48,48,48,0.05);
   color: rgba(48,48,48,0.25);
   cursor: not-allowed;
 }
 
-.emotion-106 {
+.emotion-115 {
   margin-top: 5px;
 }
 
-.emotion-118 {
+.emotion-127 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -858,7 +860,7 @@ exports[`GroupSettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-118 input {
+.emotion-127 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -884,42 +886,42 @@ exports[`GroupSettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-118.animated input {
+.emotion-127.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-118 input::-webkit-input-placeholder {
+.emotion-127 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-118 input::-moz-placeholder {
+.emotion-127 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-118 input:-ms-input-placeholder {
+.emotion-127 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-118 input::placeholder {
+.emotion-127 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-118 input.focused,
-.emotion-118 input:active,
-.emotion-118 input:focus {
+.emotion-127 input.focused,
+.emotion-127 input:active,
+.emotion-127 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-118 input:invalid {
+.emotion-127 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-118 .message {
+.emotion-127 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -927,147 +929,32 @@ exports[`GroupSettingPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-118.error input,
-.emotion-118.error input.focused,
-.emotion-118.error input:active,
-.emotion-118.error input:focus {
+.emotion-127.error input,
+.emotion-127.error input.focused,
+.emotion-127.error input:active,
+.emotion-127.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-118.error .message {
+.emotion-127.error .message {
   color: #d01111;
 }
 
-.emotion-144 {
+.emotion-153 {
   position: relative;
   width: 100%;
 }
 
-.emotion-144 input {
+.emotion-153 input {
   cursor: inherit;
 }
 
-.emotion-145 {
+.emotion-154 {
   margin-top: 5px;
   display: block;
 }
 
-.emotion-147 {
-  box-sizing: border-box;
-  display: inline-flex;
-  -webkit-box-flex-flow: row nowrap;
-  -webkit-flex-flow: row nowrap;
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  position: relative;
-  width: 100%;
-}
-
-.emotion-147 input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: rgba(53,112,244,0.05);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: transparent;
-  border-left: transparent;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #303030;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  font: inherit;
-  height: 36px;
-  margin: 0;
-  outline: none;
-  padding: 0 1rem;
-  text-align: left;
-  width: 100%;
-}
-
-.emotion-147.animated input {
-  -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-}
-
-.emotion-147 input::-webkit-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-147 input::-moz-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-147 input:-ms-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-147 input::placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-147 input.focused,
-.emotion-147 input:active,
-.emotion-147 input:focus {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #3570f4;
-  color: #303030;
-}
-
-.emotion-147 input:invalid {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #d01111;
-  color: #303030;
-}
-
-.emotion-147 .message {
-  font-size: 12px;
-  left: 0;
-  line-height: 1.8;
-  position: absolute;
-  top: 2.571rem;
-}
-
-.emotion-147.error input,
-.emotion-147.error input.focused,
-.emotion-147.error input:active,
-.emotion-147.error input:focus {
-  border-bottom: 2px solid #d01111;
-}
-
-.emotion-147.error .message {
-  color: #d01111;
-}
-
-.emotion-147 input {
-  padding-right: 36px;
-}
-
-.emotion-147 .input-icon {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: flex;
-  height: 36px;
-  position: absolute;
-  right: 6px;
-}
-
-.emotion-148 {
-  fill: #d5d5d5;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
-.emotion-192 {
+.emotion-201 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -1083,7 +970,7 @@ exports[`GroupSettingPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-194 {
+.emotion-203 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -1108,25 +995,25 @@ exports[`GroupSettingPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-194:first-of-type {
+.emotion-203:first-of-type {
   margin-left: 0;
 }
 
-.emotion-194:disabled {
+.emotion-203:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-194:disabled {
+.emotion-203:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-194:hover:not(:disabled) {
+.emotion-203:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-196 {
+.emotion-205 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1149,13 +1036,13 @@ exports[`GroupSettingPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-198 {
+.emotion-207 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-199 {
+.emotion-208 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -1170,7 +1057,7 @@ exports[`GroupSettingPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-201 {
+.emotion-210 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -1186,38 +1073,38 @@ exports[`GroupSettingPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-203 {
+.emotion-212 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-205 {
+.emotion-214 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-207 {
+.emotion-216 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-211 {
+.emotion-220 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-213 {
+.emotion-222 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-215 {
+.emotion-224 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-217 {
+.emotion-226 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -1255,40 +1142,102 @@ exports[`GroupSettingPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-3-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-3-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-3-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1297,11 +1246,11 @@ exports[`GroupSettingPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1317,13 +1266,13 @@ exports[`GroupSettingPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1350,26 +1299,26 @@ exports[`GroupSettingPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/group"
               >
                 dom
@@ -1380,36 +1329,36 @@ exports[`GroupSettingPage should render 1`] = `
               groupName
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -1417,41 +1366,41 @@ exports[`GroupSettingPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1459,29 +1408,29 @@ exports[`GroupSettingPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
           >
             <table
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
               data-testid="setting-table"
             >
               <tbody>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Review
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-67 denali-switch"
+                      class="emotion-76 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1497,28 +1446,28 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Flag indicates whether or not group updates require another review and approval
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Delete Protection
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-67 denali-switch"
+                      class="emotion-76 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1534,28 +1483,28 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Flag indicates whether or not the group will be protected from accidental deletions
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Self-Service
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-67 denali-switch"
+                      class="emotion-76 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1571,28 +1520,28 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Flag indicates whether or not group allows self service
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Self-Renew
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-67 denali-switch"
+                      class="emotion-76 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1608,31 +1557,31 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Flag indicates whether or not group allows self renew
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Self Renew (Mins)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-105 denali-input animated emotion-106 emotion-107"
+                        class="emotion-114 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1652,31 +1601,31 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Number of minutes members can renew their membership if self review option is enabled
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     User Expiry (Days)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1695,31 +1644,31 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     All user members in the group will have specified max expiry days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Service Expiry (Days)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1738,48 +1687,48 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     All services in the group will have specified max expiry days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     User Authority Filter
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        aria-labelledby="downshift-2-label"
-                        class="emotion-144 denali-input-dropdown emotion-145 emotion-146"
+                        aria-labelledby="downshift-4-label"
+                        class="emotion-153 denali-input-dropdown emotion-154 emotion-155"
                         data-testid="input-dropdown"
                         role="combobox"
                       >
                         <div
-                          class="emotion-147 denali-input animated"
+                          class="emotion-14 denali-input animated"
                           data-testid="input-wrapper"
                         >
                           <input
                             aria-autocomplete="list"
-                            aria-labelledby="downshift-2-label"
+                            aria-labelledby="downshift-4-label"
                             autocomplete="off"
                             autocorrect="off"
                             data-testid="input-node"
-                            id="downshift-2-input"
+                            id="downshift-4-input"
                             name="setting-userAuthorityFilter"
                             placeholder="User Authority Filter"
                             spellcheck="false"
@@ -1789,7 +1738,7 @@ exports[`GroupSettingPage should render 1`] = `
                             class="input-icon"
                           >
                             <svg
-                              class="emotion-148"
+                              class="emotion-15"
                               data-testid="icon"
                               data-wdio=""
                               height="24px"
@@ -1814,48 +1763,48 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     membership filtered based on user authority configured attributes
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     User Authority Expiration
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        aria-labelledby="downshift-3-label"
-                        class="emotion-144 denali-input-dropdown emotion-145 emotion-146"
+                        aria-labelledby="downshift-5-label"
+                        class="emotion-153 denali-input-dropdown emotion-154 emotion-155"
                         data-testid="input-dropdown"
                         role="combobox"
                       >
                         <div
-                          class="emotion-147 denali-input animated"
+                          class="emotion-14 denali-input animated"
                           data-testid="input-wrapper"
                         >
                           <input
                             aria-autocomplete="list"
-                            aria-labelledby="downshift-3-label"
+                            aria-labelledby="downshift-5-label"
                             autocomplete="off"
                             autocorrect="off"
                             data-testid="input-node"
-                            id="downshift-3-input"
+                            id="downshift-5-input"
                             name="setting-userAuthorityExpiration"
                             placeholder="User Authority Expiration"
                             spellcheck="false"
@@ -1865,7 +1814,7 @@ exports[`GroupSettingPage should render 1`] = `
                             class="input-icon"
                           >
                             <svg
-                              class="emotion-148"
+                              class="emotion-15"
                               data-testid="icon"
                               data-wdio=""
                               height="24px"
@@ -1890,31 +1839,31 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     expiration enforced by a user authority configured attribute
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Max Members (Number)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1933,31 +1882,31 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Maximum number of members allowed in the group
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Domain Filter
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1974,7 +1923,7 @@ exports[`GroupSettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Membership filtered based on configured principal domains
@@ -1983,17 +1932,17 @@ exports[`GroupSettingPage should render 1`] = `
               </tbody>
             </table>
             <div
-              class="emotion-192 emotion-193"
+              class="emotion-201 emotion-202"
             >
               <div>
                 <button
-                  class="emotion-194 denali-button"
+                  class="emotion-203 denali-button"
                   disabled=""
                 >
                   Submit
                 </button>
                 <button
-                  class="emotion-194 denali-button"
+                  class="emotion-203 denali-button"
                 >
                   Reset
                 </button>
@@ -2006,11 +1955,11 @@ exports[`GroupSettingPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-196 emotion-197"
+          class="emotion-205 emotion-206"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-198"
+            class="emotion-207"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -2027,30 +1976,30 @@ exports[`GroupSettingPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-199 emotion-200"
+          class="emotion-208 emotion-209"
         >
           <div
-            class="emotion-201 emotion-202"
+            class="emotion-210 emotion-211"
           >
             <div
-              class="emotion-203 emotion-204"
+              class="emotion-212 emotion-213"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-205 emotion-206"
+                class="emotion-214 emotion-215"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-207 emotion-208"
+                class="emotion-216 emotion-217"
               >
                  | 
               </span>
               <a
-                class="emotion-205 emotion-206"
+                class="emotion-214 emotion-215"
                 href="/domain/manage"
               >
                 Manage
@@ -2058,16 +2007,16 @@ exports[`GroupSettingPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-211 emotion-212"
+            class="emotion-220 emotion-221"
           >
             <div
-              class="emotion-213 emotion-214"
+              class="emotion-222 emotion-223"
             >
               <div
-                class="emotion-215 emotion-216"
+                class="emotion-224 emotion-225"
               >
                 <svg
-                  class="emotion-217"
+                  class="emotion-226"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -2090,20 +2039,20 @@ exports[`GroupSettingPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-205 emotion-206"
+                class="emotion-214 emotion-215"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-213 emotion-214"
+              class="emotion-222 emotion-223"
             >
               <div
-                class="emotion-215 emotion-216"
+                class="emotion-224 emotion-225"
               >
                 <svg
-                  class="emotion-217"
+                  class="emotion-226"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -2126,7 +2075,7 @@ exports[`GroupSettingPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-205 emotion-206"
+                class="emotion-214 emotion-215"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/tags.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/tags.test.js.snap
index e3166a139d6..8a17b921fe6 100644
--- a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/tags.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/tags.test.js.snap
@@ -265,6 +265,25 @@ exports[`Groups Tag Page should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`Groups Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`Groups Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`Groups Tag Page should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`Groups Tag Page should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`Groups Tag Page should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`Groups Tag Page should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`Groups Tag Page should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`Groups Tag Page should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`Groups Tag Page should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`Groups Tag Page should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`Groups Tag Page should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`Groups Tag Page should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`Groups Tag Page should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
 }
 
-.emotion-59 {
+.emotion-68 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -620,7 +622,7 @@ exports[`Groups Tag Page should render 1`] = `
   float: right;
 }
 
-.emotion-61 {
+.emotion-70 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -645,25 +647,25 @@ exports[`Groups Tag Page should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-61:first-of-type {
+.emotion-70:first-of-type {
   margin-left: 0;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-61:hover:not(:disabled) {
+.emotion-70:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-62 {
+.emotion-71 {
   width: 100%;
   border-spacing: 0;
   display: table;
@@ -671,7 +673,7 @@ exports[`Groups Tag Page should render 1`] = `
   border-color: #9a9a9a;
 }
 
-.emotion-64 {
+.emotion-73 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -683,7 +685,7 @@ exports[`Groups Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-68 {
+.emotion-77 {
   text-align: center;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -695,7 +697,7 @@ exports[`Groups Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-74 {
+.emotion-83 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -703,7 +705,7 @@ exports[`Groups Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-78 {
+.emotion-87 {
   font-family: Helvetica,Arial,sans-serif;
   background: rgba(53, 112, 244, 0.08);
   border-radius: 14px;
@@ -726,11 +728,11 @@ exports[`Groups Tag Page should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-78:hover {
+.emotion-87:hover {
   background: #cbd9f9;
 }
 
-.emotion-78 .tag-remove {
+.emotion-87 .tag-remove {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -755,13 +757,13 @@ exports[`Groups Tag Page should render 1`] = `
   width: 28px;
 }
 
-.emotion-78:hover .tag-remove {
+.emotion-87:hover .tag-remove {
   box-shadow: -4px 0 5px -1px rgba(48,48,48,0.2);
   opacity: 1;
   right: 0;
 }
 
-.emotion-79 {
+.emotion-88 {
   color: #d5d5d5;
   font-size: 14px;
   height: 28px;
@@ -771,22 +773,22 @@ exports[`Groups Tag Page should render 1`] = `
   background: rgba(53, 112, 244, 0.08);
 }
 
-.emotion-79:hover {
+.emotion-88:hover {
   background: #ffffff;
 }
 
-.emotion-81 {
+.emotion-90 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-83 {
+.emotion-92 {
   fill: rgba(48,48,48,0.6);
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-90 {
+.emotion-99 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -794,13 +796,13 @@ exports[`Groups Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-92 {
+.emotion-101 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-96 {
+.emotion-105 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -823,13 +825,13 @@ exports[`Groups Tag Page should render 1`] = `
   width: 20px;
 }
 
-.emotion-98 {
+.emotion-107 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-99 {
+.emotion-108 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -844,7 +846,7 @@ exports[`Groups Tag Page should render 1`] = `
   width: 350px;
 }
 
-.emotion-101 {
+.emotion-110 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -860,38 +862,38 @@ exports[`Groups Tag Page should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-103 {
+.emotion-112 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-105 {
+.emotion-114 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-107 {
+.emotion-116 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-111 {
+.emotion-120 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-113 {
+.emotion-122 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-115 {
+.emotion-124 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-117 {
+.emotion-126 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -929,40 +931,102 @@ exports[`Groups Tag Page should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -971,11 +1035,11 @@ exports[`Groups Tag Page should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -991,13 +1055,13 @@ exports[`Groups Tag Page should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1024,26 +1088,26 @@ exports[`Groups Tag Page should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/group"
               >
                 dom
@@ -1054,36 +1118,36 @@ exports[`Groups Tag Page should render 1`] = `
               expiration
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2022-10-02 14:37 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -1091,41 +1155,41 @@ exports[`Groups Tag Page should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Roles
               </div>
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1133,42 +1197,42 @@ exports[`Groups Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
             data-testid="tag-list"
           >
             <div
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
             >
               <div>
                 <button
-                  class="emotion-61 denali-button"
+                  class="emotion-70 denali-button"
                 >
                   Add Tag
                 </button>
               </div>
             </div>
             <table
-              class="emotion-62 emotion-63"
+              class="emotion-71 emotion-72"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     TAG NAME
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     TAG VALUES
                   </th>
                   <th
-                    class="emotion-68 emotion-65"
+                    class="emotion-77 emotion-74"
                   >
                     EDIT
                   </th>
                   <th
-                    class="emotion-68 emotion-65"
+                    class="emotion-77 emotion-74"
                   >
                     DELETE
                   </th>
@@ -1176,25 +1240,25 @@ exports[`Groups Tag Page should render 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="emotion-72 emotion-73"
+                  class="emotion-81 emotion-82"
                   data-testid="tag-row"
                 >
                   <td
-                    class="emotion-74 emotion-75"
+                    class="emotion-83 emotion-84"
                     color="#3570f40D"
                   >
                     tag
                   </td>
                   <td
-                    class="emotion-74 emotion-75"
+                    class="emotion-83 emotion-84"
                     color="#3570f40D"
                   >
                     <div
-                      class="emotion-78 denali-tag emotion-79 emotion-80"
+                      class="emotion-87 denali-tag emotion-88 emotion-89"
                       data-testid="tag"
                     >
                       <a
-                        class="emotion-81 emotion-82"
+                        class="emotion-90 emotion-91"
                         style="color: rgb(53, 112, 244);"
                       >
                          
@@ -1205,7 +1269,7 @@ exports[`Groups Tag Page should render 1`] = `
                         class="tag-remove"
                       >
                         <svg
-                          class="emotion-83"
+                          class="emotion-92"
                           data-testid="icon"
                           data-wdio=""
                           height="20px"
@@ -1223,11 +1287,11 @@ exports[`Groups Tag Page should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="emotion-78 denali-tag emotion-79 emotion-80"
+                      class="emotion-87 denali-tag emotion-88 emotion-89"
                       data-testid="tag"
                     >
                       <a
-                        class="emotion-81 emotion-82"
+                        class="emotion-90 emotion-91"
                         style="color: rgb(53, 112, 244);"
                       >
                          
@@ -1238,7 +1302,7 @@ exports[`Groups Tag Page should render 1`] = `
                         class="tag-remove"
                       >
                         <svg
-                          class="emotion-83"
+                          class="emotion-92"
                           data-testid="icon"
                           data-wdio=""
                           height="20px"
@@ -1257,12 +1321,12 @@ exports[`Groups Tag Page should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-90 emotion-75"
+                    class="emotion-99 emotion-84"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-92"
+                        class="emotion-101"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1280,12 +1344,12 @@ exports[`Groups Tag Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-90 emotion-75"
+                    class="emotion-99 emotion-84"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-92"
+                        class="emotion-101"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1315,11 +1379,11 @@ exports[`Groups Tag Page should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-96 emotion-97"
+          class="emotion-105 emotion-106"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-98"
+            class="emotion-107"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1336,30 +1400,30 @@ exports[`Groups Tag Page should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-99 emotion-100"
+          class="emotion-108 emotion-109"
         >
           <div
-            class="emotion-101 emotion-102"
+            class="emotion-110 emotion-111"
           >
             <div
-              class="emotion-103 emotion-104"
+              class="emotion-112 emotion-113"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-105 emotion-106"
+                class="emotion-114 emotion-115"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-107 emotion-108"
+                class="emotion-116 emotion-117"
               >
                  | 
               </span>
               <a
-                class="emotion-105 emotion-106"
+                class="emotion-114 emotion-115"
                 href="/domain/manage"
               >
                 Manage
@@ -1367,16 +1431,16 @@ exports[`Groups Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-111 emotion-112"
+            class="emotion-120 emotion-121"
           >
             <div
-              class="emotion-113 emotion-114"
+              class="emotion-122 emotion-123"
             >
               <div
-                class="emotion-115 emotion-116"
+                class="emotion-124 emotion-125"
               >
                 <svg
-                  class="emotion-117"
+                  class="emotion-126"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1399,20 +1463,20 @@ exports[`Groups Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-105 emotion-106"
+                class="emotion-114 emotion-115"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-113 emotion-114"
+              class="emotion-122 emotion-123"
             >
               <div
-                class="emotion-115 emotion-116"
+                class="emotion-124 emotion-125"
               >
                 <svg
-                  class="emotion-117"
+                  class="emotion-126"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1435,7 +1499,7 @@ exports[`Groups Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-105 emotion-106"
+                class="emotion-114 emotion-115"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/policy/[policy]/__snapshots__/tags.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/policy/[policy]/__snapshots__/tags.test.js.snap
index ec6f66ff094..f23960a66ee 100644
--- a/ui/src/__tests__/pages/domain/[domain]/policy/[policy]/__snapshots__/tags.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/policy/[policy]/__snapshots__/tags.test.js.snap
@@ -265,6 +265,25 @@ exports[`Policies Tag Page should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`Policies Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`Policies Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`Policies Tag Page should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`Policies Tag Page should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`Policies Tag Page should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`Policies Tag Page should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`Policies Tag Page should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`Policies Tag Page should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-56 {
+.emotion-65 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`Policies Tag Page should render 1`] = `
   position: relative;
 }
 
-.emotion-56.vertical {
+.emotion-65.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`Policies Tag Page should render 1`] = `
   width: 300px;
 }
 
-.emotion-57 {
+.emotion-66 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`Policies Tag Page should render 1`] = `
   z-index: 1;
 }
 
-.emotion-57:hover {
+.emotion-66:hover {
   color: #3570f4;
 }
 
-.emotion-57.active {
+.emotion-66.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`Policies Tag Page should render 1`] = `
   cursor: initial;
 }
 
-.emotion-57.active:hover {
+.emotion-66.active:hover {
   color: #303030;
 }
 
-.emotion-57.vertical {
+.emotion-66.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`Policies Tag Page should render 1`] = `
   text-align: left;
 }
 
-.emotion-57.vertical.active {
+.emotion-66.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-57.vertical.active:hover {
+.emotion-66.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-58 {
+.emotion-67 {
   margin: 20px;
 }
 
-.emotion-60 {
+.emotion-69 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -620,7 +622,7 @@ exports[`Policies Tag Page should render 1`] = `
   float: right;
 }
 
-.emotion-62 {
+.emotion-71 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -645,25 +647,25 @@ exports[`Policies Tag Page should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-62:first-of-type {
+.emotion-71:first-of-type {
   margin-left: 0;
 }
 
-.emotion-62:disabled {
+.emotion-71:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-62:disabled {
+.emotion-71:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-62:hover:not(:disabled) {
+.emotion-71:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-63 {
+.emotion-72 {
   width: 100%;
   border-spacing: 0;
   display: table;
@@ -671,7 +673,7 @@ exports[`Policies Tag Page should render 1`] = `
   border-color: #9a9a9a;
 }
 
-.emotion-65 {
+.emotion-74 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -683,7 +685,7 @@ exports[`Policies Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-69 {
+.emotion-78 {
   text-align: center;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -695,7 +697,7 @@ exports[`Policies Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-75 {
+.emotion-84 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -703,7 +705,7 @@ exports[`Policies Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-79 {
+.emotion-88 {
   font-family: Helvetica,Arial,sans-serif;
   background: rgba(53, 112, 244, 0.08);
   border-radius: 14px;
@@ -726,11 +728,11 @@ exports[`Policies Tag Page should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-79:hover {
+.emotion-88:hover {
   background: #cbd9f9;
 }
 
-.emotion-79 .tag-remove {
+.emotion-88 .tag-remove {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -755,13 +757,13 @@ exports[`Policies Tag Page should render 1`] = `
   width: 28px;
 }
 
-.emotion-79:hover .tag-remove {
+.emotion-88:hover .tag-remove {
   box-shadow: -4px 0 5px -1px rgba(48,48,48,0.2);
   opacity: 1;
   right: 0;
 }
 
-.emotion-80 {
+.emotion-89 {
   color: #d5d5d5;
   font-size: 14px;
   height: 28px;
@@ -771,22 +773,22 @@ exports[`Policies Tag Page should render 1`] = `
   background: rgba(53, 112, 244, 0.08);
 }
 
-.emotion-80:hover {
+.emotion-89:hover {
   background: #ffffff;
 }
 
-.emotion-82 {
+.emotion-91 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-84 {
+.emotion-93 {
   fill: rgba(48,48,48,0.6);
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-91 {
+.emotion-100 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -794,27 +796,27 @@ exports[`Policies Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-93 {
+.emotion-102 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-99 {
+.emotion-108 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-109 {
+.emotion-118 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-115 {
+.emotion-124 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -837,13 +839,13 @@ exports[`Policies Tag Page should render 1`] = `
   width: 20px;
 }
 
-.emotion-117 {
+.emotion-126 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-118 {
+.emotion-127 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -858,7 +860,7 @@ exports[`Policies Tag Page should render 1`] = `
   width: 350px;
 }
 
-.emotion-120 {
+.emotion-129 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -874,38 +876,38 @@ exports[`Policies Tag Page should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-122 {
+.emotion-131 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-124 {
+.emotion-133 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-126 {
+.emotion-135 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-130 {
+.emotion-139 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-132 {
+.emotion-141 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-134 {
+.emotion-143 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-136 {
+.emotion-145 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -943,40 +945,102 @@ exports[`Policies Tag Page should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -985,11 +1049,11 @@ exports[`Policies Tag Page should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1005,13 +1069,13 @@ exports[`Policies Tag Page should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1038,26 +1102,26 @@ exports[`Policies Tag Page should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/service"
               >
                 dom
@@ -1068,62 +1132,62 @@ exports[`Policies Tag Page should render 1`] = `
               policy1
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2022-10-02 14:37 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
                 </div>
               </div>
               <div
-                class="emotion-38 emotion-39"
+                class="emotion-47 emotion-48"
               >
                 <div
-                  class="emotion-40 emotion-41"
+                  class="emotion-49 emotion-50"
                 >
                   2
                 </div>
                 <div
-                  class="emotion-42 emotion-43"
+                  class="emotion-51 emotion-52"
                 >
                   POLICY VERSION
                 </div>
               </div>
             </div>
             <div
-              class="emotion-56 denali-tab-group"
+              class="emotion-65 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-57 denali-tab active"
+                class="emotion-66 denali-tab active"
                 data-active="true"
               >
                 Tags
@@ -1131,42 +1195,42 @@ exports[`Policies Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-58 emotion-59"
+            class="emotion-67 emotion-68"
             data-testid="tag-list"
           >
             <div
-              class="emotion-60 emotion-61"
+              class="emotion-69 emotion-70"
             >
               <div>
                 <button
-                  class="emotion-62 denali-button"
+                  class="emotion-71 denali-button"
                 >
                   Add Tag
                 </button>
               </div>
             </div>
             <table
-              class="emotion-63 emotion-64"
+              class="emotion-72 emotion-73"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-65 emotion-66"
+                    class="emotion-74 emotion-75"
                   >
                     TAG NAME
                   </th>
                   <th
-                    class="emotion-65 emotion-66"
+                    class="emotion-74 emotion-75"
                   >
                     TAG VALUES
                   </th>
                   <th
-                    class="emotion-69 emotion-66"
+                    class="emotion-78 emotion-75"
                   >
                     EDIT
                   </th>
                   <th
-                    class="emotion-69 emotion-66"
+                    class="emotion-78 emotion-75"
                   >
                     DELETE
                   </th>
@@ -1174,25 +1238,25 @@ exports[`Policies Tag Page should render 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="emotion-73 emotion-74"
+                  class="emotion-82 emotion-83"
                   data-testid="tag-row"
                 >
                   <td
-                    class="emotion-75 emotion-76"
+                    class="emotion-84 emotion-85"
                     color="#3570f40D"
                   >
                     tag
                   </td>
                   <td
-                    class="emotion-75 emotion-76"
+                    class="emotion-84 emotion-85"
                     color="#3570f40D"
                   >
                     <div
-                      class="emotion-79 denali-tag emotion-80 emotion-81"
+                      class="emotion-88 denali-tag emotion-89 emotion-90"
                       data-testid="tag"
                     >
                       <a
-                        class="emotion-82 emotion-83"
+                        class="emotion-91 emotion-92"
                         style="color: rgb(53, 112, 244);"
                       >
                          
@@ -1203,7 +1267,7 @@ exports[`Policies Tag Page should render 1`] = `
                         class="tag-remove"
                       >
                         <svg
-                          class="emotion-84"
+                          class="emotion-93"
                           data-testid="icon"
                           data-wdio=""
                           height="20px"
@@ -1221,11 +1285,11 @@ exports[`Policies Tag Page should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="emotion-79 denali-tag emotion-80 emotion-81"
+                      class="emotion-88 denali-tag emotion-89 emotion-90"
                       data-testid="tag"
                     >
                       <a
-                        class="emotion-82 emotion-83"
+                        class="emotion-91 emotion-92"
                         style="color: rgb(53, 112, 244);"
                       >
                          
@@ -1236,7 +1300,7 @@ exports[`Policies Tag Page should render 1`] = `
                         class="tag-remove"
                       >
                         <svg
-                          class="emotion-84"
+                          class="emotion-93"
                           data-testid="icon"
                           data-wdio=""
                           height="20px"
@@ -1255,12 +1319,12 @@ exports[`Policies Tag Page should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-91 emotion-76"
+                    class="emotion-100 emotion-85"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-93"
+                        class="emotion-102"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1278,12 +1342,12 @@ exports[`Policies Tag Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-91 emotion-76"
+                    class="emotion-100 emotion-85"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-93"
+                        class="emotion-102"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1305,25 +1369,25 @@ exports[`Policies Tag Page should render 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="emotion-73 emotion-74"
+                  class="emotion-82 emotion-83"
                   data-testid="tag-row"
                 >
                   <td
-                    class="emotion-99 emotion-76"
+                    class="emotion-108 emotion-85"
                     color=""
                   >
                     tag2
                   </td>
                   <td
-                    class="emotion-99 emotion-76"
+                    class="emotion-108 emotion-85"
                     color=""
                   >
                     <div
-                      class="emotion-79 denali-tag emotion-80 emotion-81"
+                      class="emotion-88 denali-tag emotion-89 emotion-90"
                       data-testid="tag"
                     >
                       <a
-                        class="emotion-82 emotion-83"
+                        class="emotion-91 emotion-92"
                         style="color: rgb(53, 112, 244);"
                       >
                          
@@ -1334,7 +1398,7 @@ exports[`Policies Tag Page should render 1`] = `
                         class="tag-remove"
                       >
                         <svg
-                          class="emotion-84"
+                          class="emotion-93"
                           data-testid="icon"
                           data-wdio=""
                           height="20px"
@@ -1353,12 +1417,12 @@ exports[`Policies Tag Page should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-109 emotion-76"
+                    class="emotion-118 emotion-85"
                     color=""
                   >
                     <span>
                       <svg
-                        class="emotion-93"
+                        class="emotion-102"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1376,12 +1440,12 @@ exports[`Policies Tag Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-109 emotion-76"
+                    class="emotion-118 emotion-85"
                     color=""
                   >
                     <span>
                       <svg
-                        class="emotion-93"
+                        class="emotion-102"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1411,11 +1475,11 @@ exports[`Policies Tag Page should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-115 emotion-116"
+          class="emotion-124 emotion-125"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-117"
+            class="emotion-126"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1432,30 +1496,30 @@ exports[`Policies Tag Page should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-118 emotion-119"
+          class="emotion-127 emotion-128"
         >
           <div
-            class="emotion-120 emotion-121"
+            class="emotion-129 emotion-130"
           >
             <div
-              class="emotion-122 emotion-123"
+              class="emotion-131 emotion-132"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-124 emotion-125"
+                class="emotion-133 emotion-134"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-126 emotion-127"
+                class="emotion-135 emotion-136"
               >
                  | 
               </span>
               <a
-                class="emotion-124 emotion-125"
+                class="emotion-133 emotion-134"
                 href="/domain/manage"
               >
                 Manage
@@ -1463,16 +1527,16 @@ exports[`Policies Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-130 emotion-131"
+            class="emotion-139 emotion-140"
           >
             <div
-              class="emotion-132 emotion-133"
+              class="emotion-141 emotion-142"
             >
               <div
-                class="emotion-134 emotion-135"
+                class="emotion-143 emotion-144"
               >
                 <svg
-                  class="emotion-136"
+                  class="emotion-145"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1495,20 +1559,20 @@ exports[`Policies Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-124 emotion-125"
+                class="emotion-133 emotion-134"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-132 emotion-133"
+              class="emotion-141 emotion-142"
             >
               <div
-                class="emotion-134 emotion-135"
+                class="emotion-143 emotion-144"
               >
                 <svg
-                  class="emotion-136"
+                  class="emotion-145"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1531,7 +1595,7 @@ exports[`Policies Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-124 emotion-125"
+                class="emotion-133 emotion-134"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/members.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/members.test.js.snap
index 03452f848fb..c0ab1ec0a8e 100644
--- a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/members.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/members.test.js.snap
@@ -265,6 +265,25 @@ exports[`MemberPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`MemberPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`MemberPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`MemberPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`MemberPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`MemberPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`MemberPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`MemberPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`MemberPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`MemberPage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`MemberPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`MemberPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`MemberPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`MemberPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
 }
 
-.emotion-59 {
+.emotion-68 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -620,7 +622,7 @@ exports[`MemberPage should render 1`] = `
   float: right;
 }
 
-.emotion-61 {
+.emotion-70 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -645,25 +647,25 @@ exports[`MemberPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-61:first-of-type {
+.emotion-70:first-of-type {
   margin-left: 0;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-61:hover:not(:disabled) {
+.emotion-70:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-62 {
+.emotion-71 {
   width: 100%;
   border-spacing: 0;
   display: table;
@@ -678,7 +680,7 @@ exports[`MemberPage should render 1`] = `
   height: 50px;
 }
 
-.emotion-64 {
+.emotion-73 {
   height: 25px;
   margin-left: 10px;
   margin-top: 10px;
@@ -690,18 +692,18 @@ exports[`MemberPage should render 1`] = `
   display: table-cell;
 }
 
-.emotion-66 {
+.emotion-75 {
   margin-right: 10px;
   verticalalign: bottom;
 }
 
-.emotion-68 {
+.emotion-77 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-69 {
+.emotion-78 {
   text-align: center;
   width: 1%;
   border-bottom: 2px solid #d5d5d5;
@@ -714,7 +716,7 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-71 {
+.emotion-80 {
   text-align: left;
   width: 18.5%;
   border-bottom: 2px solid #d5d5d5;
@@ -727,7 +729,7 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-73 {
+.emotion-82 {
   text-align: left;
   width: 18.5%;
   border-bottom: 2px solid #d5d5d5;
@@ -740,7 +742,7 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-77 {
+.emotion-86 {
   text-align: left;
   width: 32.5%;
   border-bottom: 2px solid #d5d5d5;
@@ -753,7 +755,7 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-79 {
+.emotion-88 {
   text-align: center;
   width: 8%;
   border-bottom: 2px solid #d5d5d5;
@@ -766,7 +768,7 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-81 {
+.emotion-90 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -789,13 +791,13 @@ exports[`MemberPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-83 {
+.emotion-92 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-84 {
+.emotion-93 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -810,7 +812,7 @@ exports[`MemberPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-86 {
+.emotion-95 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -826,38 +828,38 @@ exports[`MemberPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-88 {
+.emotion-97 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-90 {
+.emotion-99 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-92 {
+.emotion-101 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-96 {
+.emotion-105 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-98 {
+.emotion-107 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-100 {
+.emotion-109 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-102 {
+.emotion-111 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -895,40 +897,102 @@ exports[`MemberPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -937,11 +1001,11 @@ exports[`MemberPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -957,13 +1021,13 @@ exports[`MemberPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -990,26 +1054,26 @@ exports[`MemberPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/role"
               >
                 dom
@@ -1020,36 +1084,36 @@ exports[`MemberPage should render 1`] = `
               redux-role1
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -1057,41 +1121,41 @@ exports[`MemberPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Policy Rules
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1099,35 +1163,35 @@ exports[`MemberPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
             data-testid="member-list"
           >
             <div
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
             >
               <div>
                 <button
-                  class="emotion-61 denali-button"
+                  class="emotion-70 denali-button"
                 >
                   Add Member
                 </button>
               </div>
             </div>
             <table
-              class="emotion-62 emotion-63"
+              class="emotion-71 emotion-72"
               data-testid="member-table"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                     colspan="3"
                   >
                     <span
-                      class="emotion-66 emotion-67"
+                      class="emotion-75 emotion-76"
                     >
                       <svg
-                        class="emotion-68"
+                        class="emotion-77"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1148,35 +1212,35 @@ exports[`MemberPage should render 1`] = `
                 </tr>
                 <tr>
                   <th
-                    class="emotion-69 emotion-70"
+                    class="emotion-78 emotion-79"
                     width="1"
                   />
                   <th
-                    class="emotion-71 emotion-72"
+                    class="emotion-80 emotion-81"
                     width="18.5"
                   >
                     User Name
                   </th>
                   <th
-                    class="emotion-73 emotion-70"
+                    class="emotion-82 emotion-79"
                     width="18.5"
                   >
                     Name of User
                   </th>
                   <th
-                    class="emotion-73 emotion-70"
+                    class="emotion-82 emotion-79"
                     width="18.5"
                   >
                     Expiration Date
                   </th>
                   <th
-                    class="emotion-77 emotion-70"
+                    class="emotion-86 emotion-79"
                     width="32.5"
                   >
                     Review Reminder Date
                   </th>
                   <th
-                    class="emotion-79 emotion-70"
+                    class="emotion-88 emotion-79"
                     width="8"
                   >
                     Delete
@@ -1193,11 +1257,11 @@ exports[`MemberPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-81 emotion-82"
+          class="emotion-90 emotion-91"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-83"
+            class="emotion-92"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1214,30 +1278,30 @@ exports[`MemberPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-84 emotion-85"
+          class="emotion-93 emotion-94"
         >
           <div
-            class="emotion-86 emotion-87"
+            class="emotion-95 emotion-96"
           >
             <div
-              class="emotion-88 emotion-89"
+              class="emotion-97 emotion-98"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-90 emotion-91"
+                class="emotion-99 emotion-100"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-92 emotion-93"
+                class="emotion-101 emotion-102"
               >
                  | 
               </span>
               <a
-                class="emotion-90 emotion-91"
+                class="emotion-99 emotion-100"
                 href="/domain/manage"
               >
                 Manage
@@ -1245,16 +1309,16 @@ exports[`MemberPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-96 emotion-97"
+            class="emotion-105 emotion-106"
           >
             <div
-              class="emotion-98 emotion-99"
+              class="emotion-107 emotion-108"
             >
               <div
-                class="emotion-100 emotion-101"
+                class="emotion-109 emotion-110"
               >
                 <svg
-                  class="emotion-102"
+                  class="emotion-111"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1277,20 +1341,20 @@ exports[`MemberPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-90 emotion-91"
+                class="emotion-99 emotion-100"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-98 emotion-99"
+              class="emotion-107 emotion-108"
             >
               <div
-                class="emotion-100 emotion-101"
+                class="emotion-109 emotion-110"
               >
                 <svg
-                  class="emotion-102"
+                  class="emotion-111"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1313,7 +1377,7 @@ exports[`MemberPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-90 emotion-91"
+                class="emotion-99 emotion-100"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/policy.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/policy.test.js.snap
index 680c46687c3..f0db723d121 100644
--- a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/policy.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/policy.test.js.snap
@@ -265,6 +265,25 @@ exports[`RolePolicyPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`RolePolicyPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`RolePolicyPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`RolePolicyPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`RolePolicyPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`RolePolicyPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`RolePolicyPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`RolePolicyPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`RolePolicyPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`RolePolicyPage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`RolePolicyPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`RolePolicyPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`RolePolicyPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`RolePolicyPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
 }
 
-.emotion-59 {
+.emotion-68 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -620,7 +622,7 @@ exports[`RolePolicyPage should render 1`] = `
   float: right;
 }
 
-.emotion-61 {
+.emotion-70 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -645,25 +647,25 @@ exports[`RolePolicyPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-61:first-of-type {
+.emotion-70:first-of-type {
   margin-left: 0;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-61:hover:not(:disabled) {
+.emotion-70:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-62 {
+.emotion-71 {
   width: 100%;
   border-spacing: 0 15px;
   display: table;
@@ -671,7 +673,7 @@ exports[`RolePolicyPage should render 1`] = `
   border-color: grey;
 }
 
-.emotion-64 {
+.emotion-73 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -694,13 +696,13 @@ exports[`RolePolicyPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-66 {
+.emotion-75 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-67 {
+.emotion-76 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -715,7 +717,7 @@ exports[`RolePolicyPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-69 {
+.emotion-78 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -731,38 +733,38 @@ exports[`RolePolicyPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-71 {
+.emotion-80 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-73 {
+.emotion-82 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-75 {
+.emotion-84 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-79 {
+.emotion-88 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-81 {
+.emotion-90 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-83 {
+.emotion-92 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-85 {
+.emotion-94 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -800,40 +802,102 @@ exports[`RolePolicyPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -842,11 +906,11 @@ exports[`RolePolicyPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -862,13 +926,13 @@ exports[`RolePolicyPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -895,26 +959,26 @@ exports[`RolePolicyPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/role"
               >
                 dom
@@ -925,36 +989,36 @@ exports[`RolePolicyPage should render 1`] = `
               role1
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -962,41 +1026,41 @@ exports[`RolePolicyPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Policy Rules
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1004,22 +1068,22 @@ exports[`RolePolicyPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
             data-testid="role-policy-list"
           >
             <div
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
             >
               <div>
                 <button
-                  class="emotion-61 denali-button"
+                  class="emotion-70 denali-button"
                 >
                   Add Policy
                 </button>
               </div>
             </div>
             <table
-              class="emotion-62 emotion-63"
+              class="emotion-71 emotion-72"
             >
               <tbody>
                 <tr>
@@ -1036,11 +1100,11 @@ exports[`RolePolicyPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-64 emotion-65"
+          class="emotion-73 emotion-74"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-66"
+            class="emotion-75"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1057,30 +1121,30 @@ exports[`RolePolicyPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-67 emotion-68"
+          class="emotion-76 emotion-77"
         >
           <div
-            class="emotion-69 emotion-70"
+            class="emotion-78 emotion-79"
           >
             <div
-              class="emotion-71 emotion-72"
+              class="emotion-80 emotion-81"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-73 emotion-74"
+                class="emotion-82 emotion-83"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-75 emotion-76"
+                class="emotion-84 emotion-85"
               >
                  | 
               </span>
               <a
-                class="emotion-73 emotion-74"
+                class="emotion-82 emotion-83"
                 href="/domain/manage"
               >
                 Manage
@@ -1088,16 +1152,16 @@ exports[`RolePolicyPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-79 emotion-80"
+            class="emotion-88 emotion-89"
           >
             <div
-              class="emotion-81 emotion-82"
+              class="emotion-90 emotion-91"
             >
               <div
-                class="emotion-83 emotion-84"
+                class="emotion-92 emotion-93"
               >
                 <svg
-                  class="emotion-85"
+                  class="emotion-94"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1120,20 +1184,20 @@ exports[`RolePolicyPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-73 emotion-74"
+                class="emotion-82 emotion-83"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-81 emotion-82"
+              class="emotion-90 emotion-91"
             >
               <div
-                class="emotion-83 emotion-84"
+                class="emotion-92 emotion-93"
               >
                 <svg
-                  class="emotion-85"
+                  class="emotion-94"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1156,7 +1220,7 @@ exports[`RolePolicyPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-73 emotion-74"
+                class="emotion-82 emotion-83"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/review.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/review.test.js.snap
index 889bc3d1f17..a0886eb667f 100644
--- a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/review.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/review.test.js.snap
@@ -265,6 +265,25 @@ exports[`ReviewPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`ReviewPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`ReviewPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`ReviewPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`ReviewPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`ReviewPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`ReviewPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`ReviewPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`ReviewPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`ReviewPage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`ReviewPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`ReviewPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`ReviewPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,40 +591,40 @@ exports[`ReviewPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
   margin-bottom: 0px;
 }
 
-.emotion-59 {
+.emotion-68 {
   margin: 0;
 }
 
-.emotion-61 {
+.emotion-70 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-63 {
+.emotion-72 {
   margin: 20px;
   margin-bottom: 0px;
 }
 
-.emotion-65 {
+.emotion-74 {
   width: 500px;
 }
 
-.emotion-67 {
+.emotion-76 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -645,13 +647,13 @@ exports[`ReviewPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-69 {
+.emotion-78 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-70 {
+.emotion-79 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -666,7 +668,7 @@ exports[`ReviewPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-72 {
+.emotion-81 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -682,38 +684,38 @@ exports[`ReviewPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-74 {
+.emotion-83 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-76 {
+.emotion-85 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-78 {
+.emotion-87 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-82 {
+.emotion-91 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-84 {
+.emotion-93 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-86 {
+.emotion-95 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-88 {
+.emotion-97 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -751,40 +753,102 @@ exports[`ReviewPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -793,11 +857,11 @@ exports[`ReviewPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -813,13 +877,13 @@ exports[`ReviewPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -846,26 +910,26 @@ exports[`ReviewPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/role"
               >
                 dom
@@ -876,36 +940,36 @@ exports[`ReviewPage should render 1`] = `
               role1
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -913,41 +977,41 @@ exports[`ReviewPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Policy Rules
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -955,23 +1019,23 @@ exports[`ReviewPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
             data-testid="review-list"
           >
             <div
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
             >
               <div
-                class="emotion-61 emotion-62"
+                class="emotion-70 emotion-71"
               >
                 REVIEW EXPIRING MEMBERS
               </div>
               <div
-                class="emotion-63 emotion-64"
+                class="emotion-72 emotion-73"
                 data-testid="review-table"
               >
                 <p
-                  class="emotion-65 emotion-66"
+                  class="emotion-74 emotion-75"
                 >
                   There are no members to review for role:
                    
@@ -987,11 +1051,11 @@ exports[`ReviewPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-67 emotion-68"
+          class="emotion-76 emotion-77"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-69"
+            class="emotion-78"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1008,30 +1072,30 @@ exports[`ReviewPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-70 emotion-71"
+          class="emotion-79 emotion-80"
         >
           <div
-            class="emotion-72 emotion-73"
+            class="emotion-81 emotion-82"
           >
             <div
-              class="emotion-74 emotion-75"
+              class="emotion-83 emotion-84"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-76 emotion-77"
+                class="emotion-85 emotion-86"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-78 emotion-79"
+                class="emotion-87 emotion-88"
               >
                  | 
               </span>
               <a
-                class="emotion-76 emotion-77"
+                class="emotion-85 emotion-86"
                 href="/domain/manage"
               >
                 Manage
@@ -1039,16 +1103,16 @@ exports[`ReviewPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-82 emotion-83"
+            class="emotion-91 emotion-92"
           >
             <div
-              class="emotion-84 emotion-85"
+              class="emotion-93 emotion-94"
             >
               <div
-                class="emotion-86 emotion-87"
+                class="emotion-95 emotion-96"
               >
                 <svg
-                  class="emotion-88"
+                  class="emotion-97"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1071,20 +1135,20 @@ exports[`ReviewPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-76 emotion-77"
+                class="emotion-85 emotion-86"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-84 emotion-85"
+              class="emotion-93 emotion-94"
             >
               <div
-                class="emotion-86 emotion-87"
+                class="emotion-95 emotion-96"
               >
                 <svg
-                  class="emotion-88"
+                  class="emotion-97"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1107,7 +1171,7 @@ exports[`ReviewPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-76 emotion-77"
+                class="emotion-85 emotion-86"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/settings.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/settings.test.js.snap
index 2b3f3d9b26c..001bd3dae80 100644
--- a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/settings.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/settings.test.js.snap
@@ -265,6 +265,25 @@ exports[`SettingPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`SettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`SettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`SettingPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`SettingPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`SettingPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`SettingPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`SettingPage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`SettingPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`SettingPage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`SettingPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`SettingPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`SettingPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`SettingPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
 }
 
-.emotion-59 {
+.emotion-68 {
   width: 100%;
   border-spacing: 0 20px;
   display: table;
@@ -611,7 +613,7 @@ exports[`SettingPage should render 1`] = `
   border-color: grey;
 }
 
-.emotion-61 {
+.emotion-70 {
   box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 1px 4px #d9d9d9;
@@ -621,7 +623,7 @@ exports[`SettingPage should render 1`] = `
   height: 50px;
 }
 
-.emotion-63 {
+.emotion-72 {
   text-align: left;
   width: auto;
   padding: 5px 0 5px 15px;
@@ -629,7 +631,7 @@ exports[`SettingPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-67 {
+.emotion-76 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -643,7 +645,7 @@ exports[`SettingPage should render 1`] = `
   position: relative;
 }
 
-.emotion-67>input[type='checkbox'] {
+.emotion-76>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   position: absolute;
@@ -651,7 +653,7 @@ exports[`SettingPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-67>input[type='checkbox']+label {
+.emotion-76>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -662,18 +664,18 @@ exports[`SettingPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-67>input[type='checkbox']+label .label-content {
+.emotion-76>input[type='checkbox']+label .label-content {
   display: inline-flex;
   margin-left: 6px;
 }
 
 @-moz-document url-prefix() {
-  .emotion-67>input[type='checkbox']+label .label-content {
+  .emotion-76>input[type='checkbox']+label .label-content {
     margin-top: 1px;
   }
 }
 
-.emotion-67>input[type='checkbox']+label:before {
+.emotion-76>input[type='checkbox']+label:before {
   background: #d5d5d5;
   border-radius: 9px;
   box-sizing: border-box;
@@ -689,7 +691,7 @@ exports[`SettingPage should render 1`] = `
   width: 34px;
 }
 
-.emotion-67>input[type='checkbox']+label::after {
+.emotion-76>input[type='checkbox']+label::after {
   background-color: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 50%;
@@ -706,40 +708,40 @@ exports[`SettingPage should render 1`] = `
   width: 18px;
 }
 
-.emotion-67>input[type='checkbox']:checked+label::before {
+.emotion-76>input[type='checkbox']:checked+label::before {
   background-color: rgba(21,192,70,0.45);
 }
 
-.emotion-67>input[type='checkbox']:checked+label::after {
+.emotion-76>input[type='checkbox']:checked+label::after {
   background-color: #15c046;
   border-color: #15c046;
   left: 16px;
 }
 
-.emotion-67>input[type='checkbox']:disabled+label {
+.emotion-76>input[type='checkbox']:disabled+label {
   color: #9a9a9a;
   cursor: not-allowed;
 }
 
-.emotion-67>input[type='checkbox']:disabled+label::before {
+.emotion-76>input[type='checkbox']:disabled+label::before {
   background-color: #e8e8e8;
   cursor: not-allowed;
 }
 
-.emotion-67>input[type='checkbox']:disabled+label::after {
+.emotion-76>input[type='checkbox']:disabled+label::after {
   border-color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-67>input[type='checkbox']:checked:disabled+label::after {
+.emotion-76>input[type='checkbox']:checked:disabled+label::after {
   background: #d5d5d5;
 }
 
-.emotion-103 {
+.emotion-112 {
   display: flex;
 }
 
-.emotion-105 {
+.emotion-114 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -753,7 +755,7 @@ exports[`SettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-105 input {
+.emotion-114 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -779,42 +781,42 @@ exports[`SettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-105.animated input {
+.emotion-114.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-105 input::-webkit-input-placeholder {
+.emotion-114 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-105 input::-moz-placeholder {
+.emotion-114 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-105 input:-ms-input-placeholder {
+.emotion-114 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-105 input::placeholder {
+.emotion-114 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-105 input.focused,
-.emotion-105 input:active,
-.emotion-105 input:focus {
+.emotion-114 input.focused,
+.emotion-114 input:active,
+.emotion-114 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-105 input:invalid {
+.emotion-114 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-105 .message {
+.emotion-114 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -822,29 +824,29 @@ exports[`SettingPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-105.error input,
-.emotion-105.error input.focused,
-.emotion-105.error input:active,
-.emotion-105.error input:focus {
+.emotion-114.error input,
+.emotion-114.error input.focused,
+.emotion-114.error input:active,
+.emotion-114.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-105.error .message {
+.emotion-114.error .message {
   color: #d01111;
 }
 
-.emotion-105 input[disabled] {
+.emotion-114 input[disabled] {
   background: rgba(48,48,48,0.05);
   border-bottom: 2px solid rgba(48,48,48,0.05);
   color: rgba(48,48,48,0.25);
   cursor: not-allowed;
 }
 
-.emotion-106 {
+.emotion-115 {
   margin-top: 5px;
 }
 
-.emotion-118 {
+.emotion-127 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -858,7 +860,7 @@ exports[`SettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-118 input {
+.emotion-127 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -884,42 +886,42 @@ exports[`SettingPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-118.animated input {
+.emotion-127.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-118 input::-webkit-input-placeholder {
+.emotion-127 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-118 input::-moz-placeholder {
+.emotion-127 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-118 input:-ms-input-placeholder {
+.emotion-127 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-118 input::placeholder {
+.emotion-127 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-118 input.focused,
-.emotion-118 input:active,
-.emotion-118 input:focus {
+.emotion-127 input.focused,
+.emotion-127 input:active,
+.emotion-127 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-118 input:invalid {
+.emotion-127 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-118 .message {
+.emotion-127 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -927,147 +929,32 @@ exports[`SettingPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-118.error input,
-.emotion-118.error input.focused,
-.emotion-118.error input:active,
-.emotion-118.error input:focus {
+.emotion-127.error input,
+.emotion-127.error input.focused,
+.emotion-127.error input:active,
+.emotion-127.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-118.error .message {
+.emotion-127.error .message {
   color: #d01111;
 }
 
-.emotion-222 {
+.emotion-231 {
   position: relative;
   width: 100%;
 }
 
-.emotion-222 input {
+.emotion-231 input {
   cursor: inherit;
 }
 
-.emotion-223 {
+.emotion-232 {
   margin-top: 5px;
   display: block;
 }
 
-.emotion-225 {
-  box-sizing: border-box;
-  display: inline-flex;
-  -webkit-box-flex-flow: row nowrap;
-  -webkit-flex-flow: row nowrap;
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  position: relative;
-  width: 100%;
-}
-
-.emotion-225 input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: rgba(53,112,244,0.05);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: transparent;
-  border-left: transparent;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #303030;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  font: inherit;
-  height: 36px;
-  margin: 0;
-  outline: none;
-  padding: 0 1rem;
-  text-align: left;
-  width: 100%;
-}
-
-.emotion-225.animated input {
-  -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-}
-
-.emotion-225 input::-webkit-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-225 input::-moz-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-225 input:-ms-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-225 input::placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-225 input.focused,
-.emotion-225 input:active,
-.emotion-225 input:focus {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #3570f4;
-  color: #303030;
-}
-
-.emotion-225 input:invalid {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #d01111;
-  color: #303030;
-}
-
-.emotion-225 .message {
-  font-size: 12px;
-  left: 0;
-  line-height: 1.8;
-  position: absolute;
-  top: 2.571rem;
-}
-
-.emotion-225.error input,
-.emotion-225.error input.focused,
-.emotion-225.error input:active,
-.emotion-225.error input:focus {
-  border-bottom: 2px solid #d01111;
-}
-
-.emotion-225.error .message {
-  color: #d01111;
-}
-
-.emotion-225 input {
-  padding-right: 36px;
-}
-
-.emotion-225 .input-icon {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: flex;
-  height: 36px;
-  position: absolute;
-  right: 6px;
-}
-
-.emotion-226 {
-  fill: #d5d5d5;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
-.emotion-283 {
+.emotion-292 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -1083,7 +970,7 @@ exports[`SettingPage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-285 {
+.emotion-294 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -1108,25 +995,25 @@ exports[`SettingPage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-285:first-of-type {
+.emotion-294:first-of-type {
   margin-left: 0;
 }
 
-.emotion-285:disabled {
+.emotion-294:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-285:disabled {
+.emotion-294:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-285:hover:not(:disabled) {
+.emotion-294:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-287 {
+.emotion-296 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1149,13 +1036,13 @@ exports[`SettingPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-289 {
+.emotion-298 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-290 {
+.emotion-299 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -1170,7 +1057,7 @@ exports[`SettingPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-292 {
+.emotion-301 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -1186,38 +1073,38 @@ exports[`SettingPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-294 {
+.emotion-303 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-296 {
+.emotion-305 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-298 {
+.emotion-307 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-302 {
+.emotion-311 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-304 {
+.emotion-313 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-306 {
+.emotion-315 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-308 {
+.emotion-317 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -1255,40 +1142,102 @@ exports[`SettingPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-0-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-0-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-0-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1297,11 +1246,11 @@ exports[`SettingPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1317,13 +1266,13 @@ exports[`SettingPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1350,26 +1299,26 @@ exports[`SettingPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/role"
               >
                 dom
@@ -1380,36 +1329,36 @@ exports[`SettingPage should render 1`] = `
               roleName
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2020-02-12 21:44 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -1417,41 +1366,41 @@ exports[`SettingPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Policy Rules
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1459,29 +1408,29 @@ exports[`SettingPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
           >
             <table
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
               data-testid="setting-table"
             >
               <tbody>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Review
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-67 denali-switch"
+                      class="emotion-76 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1497,28 +1446,28 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Flag indicates whether or not role updates require another review and approval
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Delete Protection
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-67 denali-switch"
+                      class="emotion-76 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1534,28 +1483,28 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Flag indicates whether or not the role will be protected from accidental deletions
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Self-Service
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-67 denali-switch"
+                      class="emotion-76 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1571,28 +1520,28 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Flag indicates whether or not role allows self service
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Self-Renew
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-67 denali-switch"
+                      class="emotion-76 denali-switch"
                       data-testid="switch-wrapper"
                     >
                       <input
@@ -1608,31 +1557,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Flag indicates whether or not role allows self renew
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Self Renew (Mins)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-105 denali-input animated emotion-106 emotion-107"
+                        class="emotion-114 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1652,31 +1601,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Number of minutes members can renew their membership if self review option is enabled
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     User Expiry (Days)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1695,31 +1644,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     All user members in the role will have specified max expiry days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     User Review (Days)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1738,31 +1687,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     All user members in the role will have specified review days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Group Expiry (Days)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1781,31 +1730,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     All group members in the role will have specified max expiry days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Group Review (Days)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1824,31 +1773,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     All groups in the role will have specified max review days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Service Expiry (Days)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1867,31 +1816,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     All services in the role will have specified max expiry days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Service Review (Days)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1910,31 +1859,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     All service members in the role will have specified review days
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Token Expiry (Mins)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1953,31 +1902,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Tokens issued for this role will have specified max timeout in mins
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Certificate Expiry (Mins)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -1996,48 +1945,48 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Certs issued for this role will have specified max timeout in mins
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     User Authority Filter
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        aria-labelledby="downshift-0-label"
-                        class="emotion-222 denali-input-dropdown emotion-223 emotion-224"
+                        aria-labelledby="downshift-1-label"
+                        class="emotion-231 denali-input-dropdown emotion-232 emotion-233"
                         data-testid="input-dropdown"
                         role="combobox"
                       >
                         <div
-                          class="emotion-225 denali-input animated"
+                          class="emotion-14 denali-input animated"
                           data-testid="input-wrapper"
                         >
                           <input
                             aria-autocomplete="list"
-                            aria-labelledby="downshift-0-label"
+                            aria-labelledby="downshift-1-label"
                             autocomplete="off"
                             autocorrect="off"
                             data-testid="input-node"
-                            id="downshift-0-input"
+                            id="downshift-1-input"
                             name="setting-userAuthorityFilter"
                             placeholder="User Authority Filter"
                             spellcheck="false"
@@ -2047,7 +1996,7 @@ exports[`SettingPage should render 1`] = `
                             class="input-icon"
                           >
                             <svg
-                              class="emotion-226"
+                              class="emotion-15"
                               data-testid="icon"
                               data-wdio=""
                               height="24px"
@@ -2072,48 +2021,48 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     membership filtered based on user authority configured attributes
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     User Authority Expiration
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        aria-labelledby="downshift-1-label"
-                        class="emotion-222 denali-input-dropdown emotion-223 emotion-224"
+                        aria-labelledby="downshift-2-label"
+                        class="emotion-231 denali-input-dropdown emotion-232 emotion-233"
                         data-testid="input-dropdown"
                         role="combobox"
                       >
                         <div
-                          class="emotion-225 denali-input animated"
+                          class="emotion-14 denali-input animated"
                           data-testid="input-wrapper"
                         >
                           <input
                             aria-autocomplete="list"
-                            aria-labelledby="downshift-1-label"
+                            aria-labelledby="downshift-2-label"
                             autocomplete="off"
                             autocorrect="off"
                             data-testid="input-node"
-                            id="downshift-1-input"
+                            id="downshift-2-input"
                             name="setting-userAuthorityExpiration"
                             placeholder="User Authority Expiration"
                             spellcheck="false"
@@ -2123,7 +2072,7 @@ exports[`SettingPage should render 1`] = `
                             class="input-icon"
                           >
                             <svg
-                              class="emotion-226"
+                              class="emotion-15"
                               data-testid="icon"
                               data-wdio=""
                               height="24px"
@@ -2148,31 +2097,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     expiration enforced by a user authority configured attribute
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Role Description
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -2189,31 +2138,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Role Description (Optional)
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Max Members (Number)
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -2232,31 +2181,31 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Maximum number of members allowed in the role
                   </td>
                 </tr>
                 <tr
-                  class="emotion-61 emotion-62"
+                  class="emotion-70 emotion-71"
                   data-testid="setting-row"
                 >
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Domain Filter
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     <div
-                      class="emotion-103 emotion-104"
+                      class="emotion-112 emotion-113"
                     >
                       <div
-                        class="emotion-118 denali-input animated emotion-106 emotion-107"
+                        class="emotion-127 denali-input animated emotion-115 emotion-116"
                         data-testid="input-wrapper"
                       >
                         <input
@@ -2273,7 +2222,7 @@ exports[`SettingPage should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-63 emotion-64"
+                    class="emotion-72 emotion-73"
                     width="auto"
                   >
                     Membership filtered based on configured principal domains
@@ -2282,17 +2231,17 @@ exports[`SettingPage should render 1`] = `
               </tbody>
             </table>
             <div
-              class="emotion-283 emotion-284"
+              class="emotion-292 emotion-293"
             >
               <div>
                 <button
-                  class="emotion-285 denali-button"
+                  class="emotion-294 denali-button"
                   disabled=""
                 >
                   Submit
                 </button>
                 <button
-                  class="emotion-285 denali-button"
+                  class="emotion-294 denali-button"
                 >
                   Reset
                 </button>
@@ -2305,11 +2254,11 @@ exports[`SettingPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-287 emotion-288"
+          class="emotion-296 emotion-297"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-289"
+            class="emotion-298"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -2326,30 +2275,30 @@ exports[`SettingPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-290 emotion-291"
+          class="emotion-299 emotion-300"
         >
           <div
-            class="emotion-292 emotion-293"
+            class="emotion-301 emotion-302"
           >
             <div
-              class="emotion-294 emotion-295"
+              class="emotion-303 emotion-304"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-296 emotion-297"
+                class="emotion-305 emotion-306"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-298 emotion-299"
+                class="emotion-307 emotion-308"
               >
                  | 
               </span>
               <a
-                class="emotion-296 emotion-297"
+                class="emotion-305 emotion-306"
                 href="/domain/manage"
               >
                 Manage
@@ -2357,16 +2306,16 @@ exports[`SettingPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-302 emotion-303"
+            class="emotion-311 emotion-312"
           >
             <div
-              class="emotion-304 emotion-305"
+              class="emotion-313 emotion-314"
             >
               <div
-                class="emotion-306 emotion-307"
+                class="emotion-315 emotion-316"
               >
                 <svg
-                  class="emotion-308"
+                  class="emotion-317"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -2389,20 +2338,20 @@ exports[`SettingPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-296 emotion-297"
+                class="emotion-305 emotion-306"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-304 emotion-305"
+              class="emotion-313 emotion-314"
             >
               <div
-                class="emotion-306 emotion-307"
+                class="emotion-315 emotion-316"
               >
                 <svg
-                  class="emotion-308"
+                  class="emotion-317"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -2425,7 +2374,7 @@ exports[`SettingPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-296 emotion-297"
+                class="emotion-305 emotion-306"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/tags.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/tags.test.js.snap
index 323a0454a9e..13f915e0ef0 100644
--- a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/tags.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/tags.test.js.snap
@@ -265,6 +265,25 @@ exports[`Roles Tag Page should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`Roles Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`Roles Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`Roles Tag Page should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`Roles Tag Page should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`Roles Tag Page should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`Roles Tag Page should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`Roles Tag Page should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`Roles Tag Page should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`Roles Tag Page should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`Roles Tag Page should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`Roles Tag Page should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`Roles Tag Page should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`Roles Tag Page should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin: 20px;
 }
 
-.emotion-59 {
+.emotion-68 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -620,7 +622,7 @@ exports[`Roles Tag Page should render 1`] = `
   float: right;
 }
 
-.emotion-61 {
+.emotion-70 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -645,25 +647,25 @@ exports[`Roles Tag Page should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-61:first-of-type {
+.emotion-70:first-of-type {
   margin-left: 0;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-61:disabled {
+.emotion-70:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-61:hover:not(:disabled) {
+.emotion-70:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-62 {
+.emotion-71 {
   width: 100%;
   border-spacing: 0;
   display: table;
@@ -671,7 +673,7 @@ exports[`Roles Tag Page should render 1`] = `
   border-color: #9a9a9a;
 }
 
-.emotion-64 {
+.emotion-73 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -683,7 +685,7 @@ exports[`Roles Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-68 {
+.emotion-77 {
   text-align: center;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -695,7 +697,7 @@ exports[`Roles Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-74 {
+.emotion-83 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -703,7 +705,7 @@ exports[`Roles Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-78 {
+.emotion-87 {
   font-family: Helvetica,Arial,sans-serif;
   background: rgba(53, 112, 244, 0.08);
   border-radius: 14px;
@@ -726,11 +728,11 @@ exports[`Roles Tag Page should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-78:hover {
+.emotion-87:hover {
   background: #cbd9f9;
 }
 
-.emotion-78 .tag-remove {
+.emotion-87 .tag-remove {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -755,13 +757,13 @@ exports[`Roles Tag Page should render 1`] = `
   width: 28px;
 }
 
-.emotion-78:hover .tag-remove {
+.emotion-87:hover .tag-remove {
   box-shadow: -4px 0 5px -1px rgba(48,48,48,0.2);
   opacity: 1;
   right: 0;
 }
 
-.emotion-79 {
+.emotion-88 {
   color: #d5d5d5;
   font-size: 14px;
   height: 28px;
@@ -771,22 +773,22 @@ exports[`Roles Tag Page should render 1`] = `
   background: rgba(53, 112, 244, 0.08);
 }
 
-.emotion-79:hover {
+.emotion-88:hover {
   background: #ffffff;
 }
 
-.emotion-81 {
+.emotion-90 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-83 {
+.emotion-92 {
   fill: rgba(48,48,48,0.6);
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-84 {
+.emotion-93 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -794,13 +796,13 @@ exports[`Roles Tag Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-86 {
+.emotion-95 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-90 {
+.emotion-99 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -823,13 +825,13 @@ exports[`Roles Tag Page should render 1`] = `
   width: 20px;
 }
 
-.emotion-92 {
+.emotion-101 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-93 {
+.emotion-102 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -844,7 +846,7 @@ exports[`Roles Tag Page should render 1`] = `
   width: 350px;
 }
 
-.emotion-95 {
+.emotion-104 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -860,38 +862,38 @@ exports[`Roles Tag Page should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-97 {
+.emotion-106 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-99 {
+.emotion-108 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-101 {
+.emotion-110 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-105 {
+.emotion-114 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-107 {
+.emotion-116 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-109 {
+.emotion-118 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-111 {
+.emotion-120 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -929,40 +931,102 @@ exports[`Roles Tag Page should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -971,11 +1035,11 @@ exports[`Roles Tag Page should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -991,13 +1055,13 @@ exports[`Roles Tag Page should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1024,26 +1088,26 @@ exports[`Roles Tag Page should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/role"
               >
                 dom
@@ -1054,36 +1118,36 @@ exports[`Roles Tag Page should render 1`] = `
               singlerole
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     Invalid date
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
                 </div>
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     N/A
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     REVIEWED DATE
                   </div>
@@ -1091,41 +1155,41 @@ exports[`Roles Tag Page should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Members
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Review
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Policy Rules
               </div>
               <div
-                class="emotion-51 denali-tab active"
+                class="emotion-60 denali-tab active"
                 data-active="true"
               >
                 Tags
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Settings
               </div>
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 History
@@ -1133,42 +1197,42 @@ exports[`Roles Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-57 emotion-58"
+            class="emotion-66 emotion-67"
             data-testid="tag-list"
           >
             <div
-              class="emotion-59 emotion-60"
+              class="emotion-68 emotion-69"
             >
               <div>
                 <button
-                  class="emotion-61 denali-button"
+                  class="emotion-70 denali-button"
                 >
                   Add Tag
                 </button>
               </div>
             </div>
             <table
-              class="emotion-62 emotion-63"
+              class="emotion-71 emotion-72"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     TAG NAME
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     TAG VALUES
                   </th>
                   <th
-                    class="emotion-68 emotion-65"
+                    class="emotion-77 emotion-74"
                   >
                     EDIT
                   </th>
                   <th
-                    class="emotion-68 emotion-65"
+                    class="emotion-77 emotion-74"
                   >
                     DELETE
                   </th>
@@ -1176,25 +1240,25 @@ exports[`Roles Tag Page should render 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="emotion-72 emotion-73"
+                  class="emotion-81 emotion-82"
                   data-testid="tag-row"
                 >
                   <td
-                    class="emotion-74 emotion-75"
+                    class="emotion-83 emotion-84"
                     color="#3570f40D"
                   >
                     tag
                   </td>
                   <td
-                    class="emotion-74 emotion-75"
+                    class="emotion-83 emotion-84"
                     color="#3570f40D"
                   >
                     <div
-                      class="emotion-78 denali-tag emotion-79 emotion-80"
+                      class="emotion-87 denali-tag emotion-88 emotion-89"
                       data-testid="tag"
                     >
                       <a
-                        class="emotion-81 emotion-82"
+                        class="emotion-90 emotion-91"
                         style="color: rgb(53, 112, 244);"
                       >
                          
@@ -1205,7 +1269,7 @@ exports[`Roles Tag Page should render 1`] = `
                         class="tag-remove"
                       >
                         <svg
-                          class="emotion-83"
+                          class="emotion-92"
                           data-testid="icon"
                           data-wdio=""
                           height="20px"
@@ -1224,12 +1288,12 @@ exports[`Roles Tag Page should render 1`] = `
                     </div>
                   </td>
                   <td
-                    class="emotion-84 emotion-75"
+                    class="emotion-93 emotion-84"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-86"
+                        class="emotion-95"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1247,12 +1311,12 @@ exports[`Roles Tag Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-84 emotion-75"
+                    class="emotion-93 emotion-84"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-86"
+                        class="emotion-95"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1282,11 +1346,11 @@ exports[`Roles Tag Page should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-90 emotion-91"
+          class="emotion-99 emotion-100"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-92"
+            class="emotion-101"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1303,30 +1367,30 @@ exports[`Roles Tag Page should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-93 emotion-94"
+          class="emotion-102 emotion-103"
         >
           <div
-            class="emotion-95 emotion-96"
+            class="emotion-104 emotion-105"
           >
             <div
-              class="emotion-97 emotion-98"
+              class="emotion-106 emotion-107"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-99 emotion-100"
+                class="emotion-108 emotion-109"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-101 emotion-102"
+                class="emotion-110 emotion-111"
               >
                  | 
               </span>
               <a
-                class="emotion-99 emotion-100"
+                class="emotion-108 emotion-109"
                 href="/domain/manage"
               >
                 Manage
@@ -1334,16 +1398,16 @@ exports[`Roles Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-105 emotion-106"
+            class="emotion-114 emotion-115"
           >
             <div
-              class="emotion-107 emotion-108"
+              class="emotion-116 emotion-117"
             >
               <div
-                class="emotion-109 emotion-110"
+                class="emotion-118 emotion-119"
               >
                 <svg
-                  class="emotion-111"
+                  class="emotion-120"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1366,20 +1430,20 @@ exports[`Roles Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-99 emotion-100"
+                class="emotion-108 emotion-109"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-107 emotion-108"
+              class="emotion-116 emotion-117"
             >
               <div
-                class="emotion-109 emotion-110"
+                class="emotion-118 emotion-119"
               >
                 <svg
-                  class="emotion-111"
+                  class="emotion-120"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1402,7 +1466,7 @@ exports[`Roles Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-99 emotion-100"
+                class="emotion-108 emotion-109"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/service/[service]/__snapshots__/microsegmentation.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/service/[service]/__snapshots__/microsegmentation.test.js.snap
index 168874a5236..56dc2ff21c1 100644
--- a/ui/src/__tests__/pages/domain/[domain]/service/[service]/__snapshots__/microsegmentation.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/service/[service]/__snapshots__/microsegmentation.test.js.snap
@@ -265,6 +265,25 @@ exports[`Service Microsegmentation Page should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`Service Microsegmentation Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`Service Microsegmentation Page should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`Service Microsegmentation Page should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`Service Microsegmentation Page should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`Service Microsegmentation Page should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-44 {
+.emotion-53 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   position: relative;
 }
 
-.emotion-44.vertical {
+.emotion-53.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   width: 300px;
 }
 
-.emotion-45 {
+.emotion-54 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`Service Microsegmentation Page should render 1`] = `
   z-index: 1;
 }
 
-.emotion-45:hover {
+.emotion-54:hover {
   color: #3570f4;
 }
 
-.emotion-45.active {
+.emotion-54.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`Service Microsegmentation Page should render 1`] = `
   cursor: initial;
 }
 
-.emotion-45.active:hover {
+.emotion-54.active:hover {
   color: #303030;
 }
 
-.emotion-45.vertical {
+.emotion-54.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`Service Microsegmentation Page should render 1`] = `
   text-align: left;
 }
 
-.emotion-45.vertical.active {
+.emotion-54.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-45.vertical.active:hover {
+.emotion-54.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-46 {
+.emotion-55 {
   margin: 20px;
 }
 
-.emotion-48 {
+.emotion-57 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -620,11 +622,11 @@ exports[`Service Microsegmentation Page should render 1`] = `
   float: right;
 }
 
-.emotion-50 {
+.emotion-59 {
   margin-right: 10px;
 }
 
-.emotion-52 {
+.emotion-61 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -649,25 +651,25 @@ exports[`Service Microsegmentation Page should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-52:first-of-type {
+.emotion-61:first-of-type {
   margin-left: 0;
 }
 
-.emotion-52:disabled {
+.emotion-61:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-52:disabled {
+.emotion-61:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-52:hover:not(:disabled) {
+.emotion-61:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-53 {
+.emotion-62 {
   width: 100%;
   border-spacing: 0;
   display: table;
@@ -682,7 +684,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   height: 50px;
 }
 
-.emotion-55 {
+.emotion-64 {
   height: 25px;
   margin-left: 10px;
   margin-top: 10px;
@@ -694,18 +696,18 @@ exports[`Service Microsegmentation Page should render 1`] = `
   font-weight: lighter;
 }
 
-.emotion-57 {
+.emotion-66 {
   margin-right: 10px;
   verticalalign: bottom;
 }
 
-.emotion-59 {
+.emotion-68 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-60 {
+.emotion-69 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -718,7 +720,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-64 {
+.emotion-73 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -731,7 +733,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-74 {
+.emotion-83 {
   text-align: center;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -744,7 +746,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-82 {
+.emotion-91 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -752,7 +754,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-88 {
+.emotion-97 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -762,7 +764,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   text-decoration: dashed underline;
 }
 
-.emotion-97 {
+.emotion-106 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -772,7 +774,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   text-decoration: dashed underline;
 }
 
-.emotion-100 {
+.emotion-109 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -780,14 +782,14 @@ exports[`Service Microsegmentation Page should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-108 {
+.emotion-117 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-114 {
+.emotion-123 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
@@ -796,7 +798,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   text-decoration: dashed underline;
 }
 
-.emotion-123 {
+.emotion-132 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
@@ -805,14 +807,14 @@ exports[`Service Microsegmentation Page should render 1`] = `
   text-decoration: dashed underline;
 }
 
-.emotion-126 {
+.emotion-135 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-185 {
+.emotion-194 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -835,13 +837,13 @@ exports[`Service Microsegmentation Page should render 1`] = `
   width: 20px;
 }
 
-.emotion-187 {
+.emotion-196 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-188 {
+.emotion-197 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -856,7 +858,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
   width: 350px;
 }
 
-.emotion-190 {
+.emotion-199 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -872,38 +874,38 @@ exports[`Service Microsegmentation Page should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-192 {
+.emotion-201 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-194 {
+.emotion-203 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-196 {
+.emotion-205 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-200 {
+.emotion-209 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-202 {
+.emotion-211 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-204 {
+.emotion-213 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-206 {
+.emotion-215 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -941,40 +943,102 @@ exports[`Service Microsegmentation Page should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -983,11 +1047,11 @@ exports[`Service Microsegmentation Page should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1003,13 +1067,13 @@ exports[`Service Microsegmentation Page should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1036,26 +1100,26 @@ exports[`Service Microsegmentation Page should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/service"
               >
                 dom
@@ -1066,22 +1130,22 @@ exports[`Service Microsegmentation Page should render 1`] = `
               openhouse
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2022-10-02 14:37 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
@@ -1089,11 +1153,11 @@ exports[`Service Microsegmentation Page should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-44 denali-tab-group"
+              class="emotion-53 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-45 denali-tab"
+                class="emotion-54 denali-tab"
                 data-active="false"
               >
                 Tags
@@ -1101,14 +1165,14 @@ exports[`Service Microsegmentation Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-46 emotion-47"
+            class="emotion-55 emotion-56"
             data-testid="segmentation-data-list"
           >
             <div
-              class="emotion-48 emotion-49"
+              class="emotion-57 emotion-58"
             >
               <div
-                class="emotion-50 emotion-51"
+                class="emotion-59 emotion-60"
               >
                 <div
                   class="toggle is-small"
@@ -1140,26 +1204,26 @@ exports[`Service Microsegmentation Page should render 1`] = `
               </div>
               <div>
                 <button
-                  class="emotion-52 denali-button"
+                  class="emotion-61 denali-button"
                 >
                   Add ACL Policy
                 </button>
               </div>
             </div>
             <table
-              class="emotion-53 emotion-54"
+              class="emotion-62 emotion-63"
               data-testid="segmentation-rule-table"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-55 emotion-56"
+                    class="emotion-64 emotion-65"
                   >
                     <span
-                      class="emotion-57 emotion-58"
+                      class="emotion-66 emotion-67"
                     >
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1180,52 +1244,52 @@ exports[`Service Microsegmentation Page should render 1`] = `
                 </tr>
                 <tr>
                   <th
-                    class="emotion-60 emotion-61"
+                    class="emotion-69 emotion-70"
                   >
                     Identifier
                   </th>
                   <th
-                    class="emotion-60 emotion-61"
+                    class="emotion-69 emotion-70"
                   >
                     Destination Service
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Destination Port
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Source Service
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Source Port
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Layer
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Scope
                   </th>
                   <th
-                    class="emotion-74 emotion-65"
+                    class="emotion-83 emotion-74"
                   >
                     Enforcement State
                   </th>
                   <th
-                    class="emotion-74 emotion-65"
+                    class="emotion-83 emotion-74"
                   >
                     Edit
                   </th>
                   <th
-                    class="emotion-74 emotion-65"
+                    class="emotion-83 emotion-74"
                   >
                     Delete
                   </th>
@@ -1233,34 +1297,34 @@ exports[`Service Microsegmentation Page should render 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="emotion-80 emotion-81"
+                  class="emotion-89 emotion-90"
                   data-testid="segmentation-row"
                 >
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     test1
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     openhouse
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     4443
                   </td>
                   <td
-                    class="emotion-88 emotion-89"
+                    class="emotion-97 emotion-98"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1281,30 +1345,30 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     1024-65535
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     TCP
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     OnPrem
                   </td>
                   <td
-                    class="emotion-97 emotion-89"
+                    class="emotion-106 emotion-98"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1331,12 +1395,12 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-100 emotion-83"
+                    class="emotion-109 emotion-92"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1354,12 +1418,12 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-100 emotion-83"
+                    class="emotion-109 emotion-92"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1381,34 +1445,34 @@ exports[`Service Microsegmentation Page should render 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="emotion-80 emotion-81"
+                  class="emotion-89 emotion-90"
                   data-testid="segmentation-row"
                 >
                   <td
-                    class="emotion-108 emotion-83"
+                    class="emotion-117 emotion-92"
                     color=""
                   >
                     test2
                   </td>
                   <td
-                    class="emotion-108 emotion-83"
+                    class="emotion-117 emotion-92"
                     color=""
                   >
                     openhouse
                   </td>
                   <td
-                    class="emotion-108 emotion-83"
+                    class="emotion-117 emotion-92"
                     color=""
                   >
                     8443-8444
                   </td>
                   <td
-                    class="emotion-114 emotion-89"
+                    class="emotion-123 emotion-98"
                     color=""
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1429,30 +1493,30 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-108 emotion-83"
+                    class="emotion-117 emotion-92"
                     color=""
                   >
                     1024-65535
                   </td>
                   <td
-                    class="emotion-108 emotion-83"
+                    class="emotion-117 emotion-92"
                     color=""
                   >
                     TCP
                   </td>
                   <td
-                    class="emotion-108 emotion-83"
+                    class="emotion-117 emotion-92"
                     color=""
                   >
                     OnPrem
                   </td>
                   <td
-                    class="emotion-123 emotion-89"
+                    class="emotion-132 emotion-98"
                     color=""
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1479,12 +1543,12 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-126 emotion-83"
+                    class="emotion-135 emotion-92"
                     color=""
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1502,12 +1566,12 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-126 emotion-83"
+                    class="emotion-135 emotion-92"
                     color=""
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1532,19 +1596,19 @@ exports[`Service Microsegmentation Page should render 1`] = `
             </table>
             <br />
             <table
-              class="emotion-53 emotion-54"
+              class="emotion-62 emotion-63"
               data-testid="segmentation-rule-table"
             >
               <thead>
                 <tr>
                   <th
-                    class="emotion-55 emotion-56"
+                    class="emotion-64 emotion-65"
                   >
                     <span
-                      class="emotion-57 emotion-58"
+                      class="emotion-66 emotion-67"
                     >
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1565,52 +1629,52 @@ exports[`Service Microsegmentation Page should render 1`] = `
                 </tr>
                 <tr>
                   <th
-                    class="emotion-60 emotion-61"
+                    class="emotion-69 emotion-70"
                   >
                     Identifier
                   </th>
                   <th
-                    class="emotion-60 emotion-61"
+                    class="emotion-69 emotion-70"
                   >
                     Source Service
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Source Port
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Destination Service
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Destination Port
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Layer
                   </th>
                   <th
-                    class="emotion-64 emotion-65"
+                    class="emotion-73 emotion-74"
                   >
                     Scope
                   </th>
                   <th
-                    class="emotion-74 emotion-65"
+                    class="emotion-83 emotion-74"
                   >
                     Enforcement State
                   </th>
                   <th
-                    class="emotion-74 emotion-65"
+                    class="emotion-83 emotion-74"
                   >
                     Edit
                   </th>
                   <th
-                    class="emotion-74 emotion-65"
+                    class="emotion-83 emotion-74"
                   >
                     Delete
                   </th>
@@ -1618,34 +1682,34 @@ exports[`Service Microsegmentation Page should render 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="emotion-80 emotion-81"
+                  class="emotion-89 emotion-90"
                   data-testid="segmentation-row"
                 >
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     test2
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     openhouse
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     1024-65535
                   </td>
                   <td
-                    class="emotion-88 emotion-89"
+                    class="emotion-97 emotion-98"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1666,30 +1730,30 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     4443
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     TCP
                   </td>
                   <td
-                    class="emotion-82 emotion-83"
+                    class="emotion-91 emotion-92"
                     color="#3570f40D"
                   >
                     OnPrem
                   </td>
                   <td
-                    class="emotion-97 emotion-89"
+                    class="emotion-106 emotion-98"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1707,12 +1771,12 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-100 emotion-83"
+                    class="emotion-109 emotion-92"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1730,12 +1794,12 @@ exports[`Service Microsegmentation Page should render 1`] = `
                     </span>
                   </td>
                   <td
-                    class="emotion-100 emotion-83"
+                    class="emotion-109 emotion-92"
                     color="#3570f40D"
                   >
                     <span>
                       <svg
-                        class="emotion-59"
+                        class="emotion-68"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1765,11 +1829,11 @@ exports[`Service Microsegmentation Page should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-185 emotion-186"
+          class="emotion-194 emotion-195"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-187"
+            class="emotion-196"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1786,30 +1850,30 @@ exports[`Service Microsegmentation Page should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-188 emotion-189"
+          class="emotion-197 emotion-198"
         >
           <div
-            class="emotion-190 emotion-191"
+            class="emotion-199 emotion-200"
           >
             <div
-              class="emotion-192 emotion-193"
+              class="emotion-201 emotion-202"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-194 emotion-195"
+                class="emotion-203 emotion-204"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-196 emotion-197"
+                class="emotion-205 emotion-206"
               >
                  | 
               </span>
               <a
-                class="emotion-194 emotion-195"
+                class="emotion-203 emotion-204"
                 href="/domain/manage"
               >
                 Manage
@@ -1817,16 +1881,16 @@ exports[`Service Microsegmentation Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-200 emotion-201"
+            class="emotion-209 emotion-210"
           >
             <div
-              class="emotion-202 emotion-203"
+              class="emotion-211 emotion-212"
             >
               <div
-                class="emotion-204 emotion-205"
+                class="emotion-213 emotion-214"
               >
                 <svg
-                  class="emotion-206"
+                  class="emotion-215"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1849,20 +1913,20 @@ exports[`Service Microsegmentation Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-194 emotion-195"
+                class="emotion-203 emotion-204"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-202 emotion-203"
+              class="emotion-211 emotion-212"
             >
               <div
-                class="emotion-204 emotion-205"
+                class="emotion-213 emotion-214"
               >
                 <svg
-                  class="emotion-206"
+                  class="emotion-215"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1885,7 +1949,7 @@ exports[`Service Microsegmentation Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-194 emotion-195"
+                class="emotion-203 emotion-204"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/service/[service]/__snapshots__/tags.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/service/[service]/__snapshots__/tags.test.js.snap
index 8d66d7469cc..0c1de8b8cec 100644
--- a/ui/src/__tests__/pages/domain/[domain]/service/[service]/__snapshots__/tags.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/service/[service]/__snapshots__/tags.test.js.snap
@@ -265,6 +265,25 @@ exports[`Service Tag Page should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`Service Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`Service Tag Page should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`Service Tag Page should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`Service Tag Page should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`Service Tag Page should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`Service Tag Page should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,28 +471,28 @@ exports[`Service Tag Page should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 20px 0;
 }
 
-.emotion-36 {
+.emotion-45 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -498,21 +500,21 @@ exports[`Service Tag Page should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   padding-right: 50px;
 }
 
-.emotion-40 {
+.emotion-49 {
   font-weight: 600;
 }
 
-.emotion-42 {
+.emotion-51 {
   color: #9a9a9a;
   font-size: 12px;
   text-transform: uppercase;
 }
 
-.emotion-44 {
+.emotion-53 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -527,7 +529,7 @@ exports[`Service Tag Page should render 1`] = `
   position: relative;
 }
 
-.emotion-44.vertical {
+.emotion-53.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -540,7 +542,7 @@ exports[`Service Tag Page should render 1`] = `
   width: 300px;
 }
 
-.emotion-45 {
+.emotion-54 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -561,11 +563,11 @@ exports[`Service Tag Page should render 1`] = `
   z-index: 1;
 }
 
-.emotion-45:hover {
+.emotion-54:hover {
   color: #3570f4;
 }
 
-.emotion-45.active {
+.emotion-54.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -573,11 +575,11 @@ exports[`Service Tag Page should render 1`] = `
   cursor: initial;
 }
 
-.emotion-45.active:hover {
+.emotion-54.active:hover {
   color: #303030;
 }
 
-.emotion-45.vertical {
+.emotion-54.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -589,21 +591,21 @@ exports[`Service Tag Page should render 1`] = `
   text-align: left;
 }
 
-.emotion-45.vertical.active {
+.emotion-54.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-45.vertical.active:hover {
+.emotion-54.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-46 {
+.emotion-55 {
   margin: 20px;
 }
 
-.emotion-48 {
+.emotion-57 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -620,7 +622,7 @@ exports[`Service Tag Page should render 1`] = `
   float: right;
 }
 
-.emotion-50 {
+.emotion-59 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -645,25 +647,25 @@ exports[`Service Tag Page should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-50:first-of-type {
+.emotion-59:first-of-type {
   margin-left: 0;
 }
 
-.emotion-50:disabled {
+.emotion-59:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-50:disabled {
+.emotion-59:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-50:hover:not(:disabled) {
+.emotion-59:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-51 {
+.emotion-60 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -686,13 +688,13 @@ exports[`Service Tag Page should render 1`] = `
   width: 20px;
 }
 
-.emotion-53 {
+.emotion-62 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-54 {
+.emotion-63 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -707,7 +709,7 @@ exports[`Service Tag Page should render 1`] = `
   width: 350px;
 }
 
-.emotion-56 {
+.emotion-65 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -723,38 +725,38 @@ exports[`Service Tag Page should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-58 {
+.emotion-67 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-60 {
+.emotion-69 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-62 {
+.emotion-71 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-66 {
+.emotion-75 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-68 {
+.emotion-77 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-70 {
+.emotion-79 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-72 {
+.emotion-81 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -792,40 +794,102 @@ exports[`Service Tag Page should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -834,11 +898,11 @@ exports[`Service Tag Page should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -854,13 +918,13 @@ exports[`Service Tag Page should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -887,26 +951,26 @@ exports[`Service Tag Page should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="collection-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/service"
               >
                 dom
@@ -917,22 +981,22 @@ exports[`Service Tag Page should render 1`] = `
               service1
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
               data-testid="collection-details"
             >
               <div
-                class="emotion-36 emotion-37"
+                class="emotion-45 emotion-46"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-47 emotion-48"
                 >
                   <div
-                    class="emotion-40 emotion-41"
+                    class="emotion-49 emotion-50"
                   >
                     2022-10-02 14:37 UTC
                   </div>
                   <div
-                    class="emotion-42 emotion-43"
+                    class="emotion-51 emotion-52"
                   >
                     MODIFIED DATE
                   </div>
@@ -940,11 +1004,11 @@ exports[`Service Tag Page should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-44 denali-tab-group"
+              class="emotion-53 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-45 denali-tab active"
+                class="emotion-54 denali-tab active"
                 data-active="true"
               >
                 Tags
@@ -952,15 +1016,15 @@ exports[`Service Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-46 emotion-47"
+            class="emotion-55 emotion-56"
             data-testid="tag-list"
           >
             <div
-              class="emotion-48 emotion-49"
+              class="emotion-57 emotion-58"
             >
               <div>
                 <button
-                  class="emotion-50 denali-button"
+                  class="emotion-59 denali-button"
                 >
                   Add Tag
                 </button>
@@ -974,11 +1038,11 @@ exports[`Service Tag Page should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-51 emotion-52"
+          class="emotion-60 emotion-61"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-53"
+            class="emotion-62"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -995,30 +1059,30 @@ exports[`Service Tag Page should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-54 emotion-55"
+          class="emotion-63 emotion-64"
         >
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-65 emotion-66"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-67 emotion-68"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-60 emotion-61"
+                class="emotion-69 emotion-70"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-62 emotion-63"
+                class="emotion-71 emotion-72"
               >
                  | 
               </span>
               <a
-                class="emotion-60 emotion-61"
+                class="emotion-69 emotion-70"
                 href="/domain/manage"
               >
                 Manage
@@ -1026,16 +1090,16 @@ exports[`Service Tag Page should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-66 emotion-67"
+            class="emotion-75 emotion-76"
           >
             <div
-              class="emotion-68 emotion-69"
+              class="emotion-77 emotion-78"
             >
               <div
-                class="emotion-70 emotion-71"
+                class="emotion-79 emotion-80"
               >
                 <svg
-                  class="emotion-72"
+                  class="emotion-81"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1058,20 +1122,20 @@ exports[`Service Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-60 emotion-61"
+                class="emotion-69 emotion-70"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-68 emotion-69"
+              class="emotion-77 emotion-78"
             >
               <div
-                class="emotion-70 emotion-71"
+                class="emotion-79 emotion-80"
               >
                 <svg
-                  class="emotion-72"
+                  class="emotion-81"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1094,7 +1158,7 @@ exports[`Service Tag Page should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-60 emotion-61"
+                class="emotion-69 emotion-70"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/__snapshots__/dynamic.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/__snapshots__/dynamic.test.js.snap
index e21d3358648..0a68a1b2455 100644
--- a/ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/__snapshots__/dynamic.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/__snapshots__/dynamic.test.js.snap
@@ -265,6 +265,25 @@ exports[`DynamicInstancePage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`DynamicInstancePage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`DynamicInstancePage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`DynamicInstancePage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`DynamicInstancePage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`DynamicInstancePage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`DynamicInstancePage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,39 +471,39 @@ exports[`DynamicInstancePage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 3px;
   vertical-align: 3px;
 }
 
-.emotion-36 {
+.emotion-45 {
   fill: #0072df;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-37 {
+.emotion-46 {
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -509,15 +511,15 @@ exports[`DynamicInstancePage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-41 {
+.emotion-50 {
   padding-right: 50px;
 }
 
-.emotion-43 {
+.emotion-52 {
   font-weight: 600;
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -525,12 +527,12 @@ exports[`DynamicInstancePage should render 1`] = `
   cursor: pointer;
 }
 
-.emotion-47 {
+.emotion-56 {
   margin: 3px;
   vertical-align: 2px;
 }
 
-.emotion-59 {
+.emotion-68 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -545,7 +547,7 @@ exports[`DynamicInstancePage should render 1`] = `
   position: relative;
 }
 
-.emotion-59.vertical {
+.emotion-68.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -558,7 +560,7 @@ exports[`DynamicInstancePage should render 1`] = `
   width: 300px;
 }
 
-.emotion-60 {
+.emotion-69 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -579,11 +581,11 @@ exports[`DynamicInstancePage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-60:hover {
+.emotion-69:hover {
   color: #3570f4;
 }
 
-.emotion-60.active {
+.emotion-69.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -591,11 +593,11 @@ exports[`DynamicInstancePage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-60.active:hover {
+.emotion-69.active:hover {
   color: #303030;
 }
 
-.emotion-60.vertical {
+.emotion-69.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -607,21 +609,21 @@ exports[`DynamicInstancePage should render 1`] = `
   text-align: left;
 }
 
-.emotion-60.vertical.active {
+.emotion-69.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-60.vertical.active:hover {
+.emotion-69.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-61 {
+.emotion-70 {
   margin: 20px;
 }
 
-.emotion-63 {
+.emotion-72 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -637,151 +639,11 @@ exports[`DynamicInstancePage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-65 {
-  width: 50%;
-}
-
-.emotion-67 {
-  display: flex;
-  width: 100%;
-}
-
-.emotion-69 {
-  background: #ffffff;
-  width: 35%;
-}
-
-.emotion-71 {
-  position: relative;
-  width: 100%;
-}
-
-.emotion-71 input {
-  cursor: pointer;
-}
-
-.emotion-72 {
-  box-sizing: border-box;
-  display: inline-flex;
-  -webkit-box-flex-flow: row nowrap;
-  -webkit-flex-flow: row nowrap;
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  position: relative;
-  width: 100%;
-}
-
-.emotion-72 input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: rgba(53,112,244,0.05);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: transparent;
-  border-left: transparent;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #303030;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  font: inherit;
-  height: 36px;
-  margin: 0;
-  outline: none;
-  padding: 0 1rem;
-  text-align: left;
-  width: 100%;
-}
-
-.emotion-72.animated input {
-  -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-}
-
-.emotion-72 input::-webkit-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-72 input::-moz-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-72 input:-ms-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-72 input::placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-72 input.focused,
-.emotion-72 input:active,
-.emotion-72 input:focus {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #3570f4;
-  color: #303030;
-}
-
-.emotion-72 input:invalid {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #d01111;
-  color: #303030;
-}
-
-.emotion-72 .message {
-  font-size: 12px;
-  left: 0;
-  line-height: 1.8;
-  position: absolute;
-  top: 2.571rem;
-}
-
-.emotion-72.error input,
-.emotion-72.error input.focused,
-.emotion-72.error input:active,
-.emotion-72.error input:focus {
-  border-bottom: 2px solid #d01111;
-}
-
-.emotion-72.error .message {
-  color: #d01111;
-}
-
-.emotion-72 input {
-  padding-right: 36px;
-}
-
-.emotion-72 .input-icon {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: flex;
-  height: 36px;
-  position: absolute;
-  right: 6px;
-}
-
-.emotion-73 {
-  fill: #d5d5d5;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
 .emotion-74 {
-  background: #ffffff;
-  width: 65%;
-  margin-left: 5px;
+  width: 50%;
 }
 
-.emotion-78 {
+.emotion-87 {
   width: 100%;
   border-spacing: 0 15px;
   display: table;
@@ -789,7 +651,7 @@ exports[`DynamicInstancePage should render 1`] = `
   border-color: grey;
 }
 
-.emotion-80 {
+.emotion-89 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -800,7 +662,7 @@ exports[`DynamicInstancePage should render 1`] = `
   padding: 5px 0 5px 25px;
 }
 
-.emotion-94 {
+.emotion-103 {
   box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 1px 4px #d9d9d9;
@@ -810,13 +672,13 @@ exports[`DynamicInstancePage should render 1`] = `
   padding: 5px 0 5px 15px;
 }
 
-.emotion-96 {
+.emotion-105 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
 }
 
-.emotion-98 {
+.emotion-107 {
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -824,19 +686,19 @@ exports[`DynamicInstancePage should render 1`] = `
   padding-bottom: 10px;
 }
 
-.emotion-110 {
+.emotion-119 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
 }
 
-.emotion-112 {
+.emotion-121 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-113 {
+.emotion-122 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -859,13 +721,13 @@ exports[`DynamicInstancePage should render 1`] = `
   width: 20px;
 }
 
-.emotion-115 {
+.emotion-124 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-116 {
+.emotion-125 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -880,7 +742,7 @@ exports[`DynamicInstancePage should render 1`] = `
   width: 350px;
 }
 
-.emotion-118 {
+.emotion-127 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -896,38 +758,38 @@ exports[`DynamicInstancePage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-120 {
+.emotion-129 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-122 {
+.emotion-131 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-124 {
+.emotion-133 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-128 {
+.emotion-137 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-130 {
+.emotion-139 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-132 {
+.emotion-141 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-134 {
+.emotion-143 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -965,40 +827,102 @@ exports[`DynamicInstancePage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-0-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-0-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-0-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1007,11 +931,11 @@ exports[`DynamicInstancePage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1027,13 +951,13 @@ exports[`DynamicInstancePage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1060,26 +984,26 @@ exports[`DynamicInstancePage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="service-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/service"
               >
                 dom
@@ -1087,10 +1011,10 @@ exports[`DynamicInstancePage should render 1`] = `
               :service.
               serv
               <span
-                class="emotion-34 emotion-35"
+                class="emotion-43 emotion-44"
               >
                 <svg
-                  class="emotion-36"
+                  class="emotion-45"
                   data-testid="icon"
                   data-wdio=""
                   height="15px"
@@ -1111,29 +1035,29 @@ exports[`DynamicInstancePage should render 1`] = `
               </span>
             </div>
             <div
-              class="emotion-37 emotion-38"
+              class="emotion-46 emotion-47"
             >
               <div
-                class="emotion-39 emotion-40"
+                class="emotion-48 emotion-49"
               >
                 <span>
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <div
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                     >
                       10
                     </div>
                     <div
-                      class="emotion-45 emotion-46"
+                      class="emotion-54 emotion-55"
                     >
                       Total Dynamic Instances
                       <span
-                        class="emotion-47 emotion-48"
+                        class="emotion-56 emotion-57"
                       >
                         <svg
-                          class="emotion-36"
+                          class="emotion-45"
                           data-testid="icon"
                           data-wdio=""
                           height="15px"
@@ -1157,22 +1081,22 @@ exports[`DynamicInstancePage should render 1`] = `
                 </span>
                 <span>
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <div
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                     >
                       8
                     </div>
                     <div
-                      class="emotion-45 emotion-46"
+                      class="emotion-54 emotion-55"
                     >
                       Total Healthy Dynamic Instances
                       <span
-                        class="emotion-47 emotion-48"
+                        class="emotion-56 emotion-57"
                       >
                         <svg
-                          class="emotion-36"
+                          class="emotion-45"
                           data-testid="icon"
                           data-wdio=""
                           height="15px"
@@ -1197,11 +1121,11 @@ exports[`DynamicInstancePage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-59 denali-tab-group"
+              class="emotion-68 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-60 denali-tab"
+                class="emotion-69 denali-tab"
                 data-active="false"
               >
                 Tags
@@ -1209,40 +1133,40 @@ exports[`DynamicInstancePage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-61 emotion-62"
+            class="emotion-70 emotion-71"
             data-testid="instancelist"
           >
             <div
-              class="emotion-63 emotion-64"
+              class="emotion-72 emotion-73"
             >
               <div
-                class="emotion-65 emotion-66"
+                class="emotion-74 emotion-75"
               >
                 <div
-                  class="emotion-67 emotion-68"
+                  class="emotion-9 emotion-77"
                 >
                   <div
-                    class="emotion-69 emotion-70"
+                    class="emotion-11 emotion-79"
                   >
                     <div
                       aria-expanded="false"
                       aria-haspopup="listbox"
-                      aria-labelledby="downshift-0-label"
-                      class="emotion-71 denali-input-dropdown"
+                      aria-labelledby="downshift-1-label"
+                      class="emotion-13 denali-input-dropdown"
                       data-testid="input-dropdown"
                       role="combobox"
                     >
                       <div
-                        class="emotion-72 denali-input animated"
+                        class="emotion-14 denali-input animated"
                         data-testid="input-wrapper"
                       >
                         <input
                           aria-autocomplete="list"
-                          aria-labelledby="downshift-0-label"
+                          aria-labelledby="downshift-1-label"
                           autocomplete="off"
                           autocorrect="off"
                           data-testid="input-node"
-                          id="downshift-0-input"
+                          id="downshift-1-input"
                           name="search-type"
                           placeholder="Select an option"
                           readonly=""
@@ -1253,7 +1177,7 @@ exports[`DynamicInstancePage should render 1`] = `
                           class="input-icon"
                         >
                           <svg
-                            class="emotion-73"
+                            class="emotion-15"
                             data-testid="icon"
                             data-wdio=""
                             height="24px"
@@ -1277,10 +1201,10 @@ exports[`DynamicInstancePage should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-74 emotion-75"
+                    class="emotion-16 emotion-84"
                   >
                     <div
-                      class="emotion-72 denali-input animated"
+                      class="emotion-14 denali-input animated"
                       data-testid="input-wrapper"
                     >
                       <input
@@ -1294,7 +1218,7 @@ exports[`DynamicInstancePage should render 1`] = `
                         class="input-icon"
                       >
                         <svg
-                          class="emotion-10"
+                          class="emotion-19"
                           data-testid="icon"
                           data-wdio=""
                           height="24px"
@@ -1320,7 +1244,7 @@ exports[`DynamicInstancePage should render 1`] = `
               </div>
             </div>
             <table
-              class="emotion-78 emotion-79"
+              class="emotion-87 emotion-88"
               data-testid="instancetable"
             >
               <colgroup>
@@ -1349,37 +1273,37 @@ exports[`DynamicInstancePage should render 1`] = `
               <thead>
                 <tr>
                   <th
-                    class="emotion-80 emotion-81"
+                    class="emotion-89 emotion-90"
                   >
                     Instance
                   </th>
                   <th
-                    class="emotion-80 emotion-81"
+                    class="emotion-89 emotion-90"
                   >
                     Hostname
                   </th>
                   <th
-                    class="emotion-80 emotion-81"
+                    class="emotion-89 emotion-90"
                   >
                     Provider
                   </th>
                   <th
-                    class="emotion-80 emotion-81"
+                    class="emotion-89 emotion-90"
                   >
                     ID
                   </th>
                   <th
-                    class="emotion-80 emotion-81"
+                    class="emotion-89 emotion-90"
                   >
                     Expires On
                   </th>
                   <th
-                    class="emotion-80 emotion-81"
+                    class="emotion-89 emotion-90"
                   >
                     Last Certificate Refresh
                   </th>
                   <th
-                    class="emotion-80 emotion-81"
+                    class="emotion-89 emotion-90"
                   >
                     Delete
                   </th>
@@ -1387,52 +1311,52 @@ exports[`DynamicInstancePage should render 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="emotion-94 emotion-95"
+                  class="emotion-103 emotion-104"
                   data-testid="instance-row"
                 >
                   <td
-                    class="emotion-96 emotion-97"
+                    class="emotion-105 emotion-106"
                     color=""
                   >
                     <div
-                      class="emotion-98 emotion-99"
+                      class="emotion-107 emotion-108"
                     />
                   </td>
                   <td
-                    class="emotion-96 emotion-97"
+                    class="emotion-105 emotion-106"
                     color=""
                   />
                   <td
-                    class="emotion-96 emotion-97"
+                    class="emotion-105 emotion-106"
                     color=""
                   >
                     Static
                   </td>
                   <td
-                    class="emotion-96 emotion-97"
+                    class="emotion-105 emotion-106"
                     color=""
                   >
                     10.1.1.1
                   </td>
                   <td
-                    class="emotion-96 emotion-97"
+                    class="emotion-105 emotion-106"
                     color=""
                   >
                     Invalid date
                   </td>
                   <td
-                    class="emotion-96 emotion-97"
+                    class="emotion-105 emotion-106"
                     color=""
                   >
                     2021-05-15 01:17 UTC
                   </td>
                   <td
-                    class="emotion-110 emotion-97"
+                    class="emotion-119 emotion-106"
                     color=""
                   >
                     <span>
                       <svg
-                        class="emotion-112"
+                        class="emotion-121"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1462,11 +1386,11 @@ exports[`DynamicInstancePage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-113 emotion-114"
+          class="emotion-122 emotion-123"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-115"
+            class="emotion-124"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1483,30 +1407,30 @@ exports[`DynamicInstancePage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-116 emotion-117"
+          class="emotion-125 emotion-126"
         >
           <div
-            class="emotion-118 emotion-119"
+            class="emotion-127 emotion-128"
           >
             <div
-              class="emotion-120 emotion-121"
+              class="emotion-129 emotion-130"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-122 emotion-123"
+                class="emotion-131 emotion-132"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-124 emotion-125"
+                class="emotion-133 emotion-134"
               >
                  | 
               </span>
               <a
-                class="emotion-122 emotion-123"
+                class="emotion-131 emotion-132"
                 href="/domain/manage"
               >
                 Manage
@@ -1514,16 +1438,16 @@ exports[`DynamicInstancePage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-128 emotion-129"
+            class="emotion-137 emotion-138"
           >
             <div
-              class="emotion-130 emotion-131"
+              class="emotion-139 emotion-140"
             >
               <div
-                class="emotion-132 emotion-133"
+                class="emotion-141 emotion-142"
               >
                 <svg
-                  class="emotion-134"
+                  class="emotion-143"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1546,20 +1470,20 @@ exports[`DynamicInstancePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-122 emotion-123"
+                class="emotion-131 emotion-132"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-130 emotion-131"
+              class="emotion-139 emotion-140"
             >
               <div
-                class="emotion-132 emotion-133"
+                class="emotion-141 emotion-142"
               >
                 <svg
-                  class="emotion-134"
+                  class="emotion-143"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1582,7 +1506,7 @@ exports[`DynamicInstancePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-122 emotion-123"
+                class="emotion-131 emotion-132"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/__snapshots__/static.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/__snapshots__/static.test.js.snap
index 2016ad3668b..00a8d28b85b 100644
--- a/ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/__snapshots__/static.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/__snapshots__/static.test.js.snap
@@ -265,6 +265,25 @@ exports[`StaticInstancePage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`StaticInstancePage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`StaticInstancePage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`StaticInstancePage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`StaticInstancePage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`StaticInstancePage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`StaticInstancePage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,39 +471,39 @@ exports[`StaticInstancePage should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-34 {
+.emotion-43 {
   margin: 3px;
   vertical-align: 3px;
 }
 
-.emotion-36 {
+.emotion-45 {
   fill: #0072df;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-37 {
+.emotion-46 {
   margin: 20px 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   display: flex;
   -webkit-box-flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap;
@@ -509,15 +511,15 @@ exports[`StaticInstancePage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-41 {
+.emotion-50 {
   padding-right: 50px;
 }
 
-.emotion-43 {
+.emotion-52 {
   font-weight: 600;
 }
 
-.emotion-45 {
+.emotion-54 {
   color: #9a9a9a;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -525,12 +527,12 @@ exports[`StaticInstancePage should render 1`] = `
   cursor: pointer;
 }
 
-.emotion-47 {
+.emotion-56 {
   margin: 3px;
   vertical-align: 2px;
 }
 
-.emotion-50 {
+.emotion-59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -545,7 +547,7 @@ exports[`StaticInstancePage should render 1`] = `
   position: relative;
 }
 
-.emotion-50.vertical {
+.emotion-59.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -558,7 +560,7 @@ exports[`StaticInstancePage should render 1`] = `
   width: 300px;
 }
 
-.emotion-51 {
+.emotion-60 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -579,11 +581,11 @@ exports[`StaticInstancePage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-51:hover {
+.emotion-60:hover {
   color: #3570f4;
 }
 
-.emotion-51.active {
+.emotion-60.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -591,11 +593,11 @@ exports[`StaticInstancePage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-51.active:hover {
+.emotion-60.active:hover {
   color: #303030;
 }
 
-.emotion-51.vertical {
+.emotion-60.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -607,21 +609,21 @@ exports[`StaticInstancePage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51.vertical.active {
+.emotion-60.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-51.vertical.active:hover {
+.emotion-60.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-52 {
+.emotion-61 {
   margin: 20px;
 }
 
-.emotion-54 {
+.emotion-63 {
   padding-bottom: 20px;
   display: flex;
   -webkit-box-pack: justify;
@@ -637,131 +639,11 @@ exports[`StaticInstancePage should render 1`] = `
   flex-flow: row nowrap;
 }
 
-.emotion-56 {
+.emotion-65 {
   width: 50%;
 }
 
-.emotion-58 {
-  display: flex;
-  width: 100%;
-}
-
-.emotion-60 {
-  background: #ffffff;
-  width: 65%;
-  margin-left: 5px;
-}
-
-.emotion-62 {
-  box-sizing: border-box;
-  display: inline-flex;
-  -webkit-box-flex-flow: row nowrap;
-  -webkit-flex-flow: row nowrap;
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  position: relative;
-  width: 100%;
-}
-
-.emotion-62 input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: rgba(53,112,244,0.05);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: transparent;
-  border-left: transparent;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #303030;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  font: inherit;
-  height: 36px;
-  margin: 0;
-  outline: none;
-  padding: 0 1rem;
-  text-align: left;
-  width: 100%;
-}
-
-.emotion-62.animated input {
-  -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-}
-
-.emotion-62 input::-webkit-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-62 input::-moz-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-62 input:-ms-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-62 input::placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-62 input.focused,
-.emotion-62 input:active,
-.emotion-62 input:focus {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #3570f4;
-  color: #303030;
-}
-
-.emotion-62 input:invalid {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #d01111;
-  color: #303030;
-}
-
-.emotion-62 .message {
-  font-size: 12px;
-  left: 0;
-  line-height: 1.8;
-  position: absolute;
-  top: 2.571rem;
-}
-
-.emotion-62.error input,
-.emotion-62.error input.focused,
-.emotion-62.error input:active,
-.emotion-62.error input:focus {
-  border-bottom: 2px solid #d01111;
-}
-
-.emotion-62.error .message {
-  color: #d01111;
-}
-
-.emotion-62 input {
-  padding-right: 36px;
-}
-
-.emotion-62 .input-icon {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: flex;
-  height: 36px;
-  position: absolute;
-  right: 6px;
-}
-
-.emotion-64 {
+.emotion-73 {
   border: none;
   border-radius: 2px;
   box-shadow: 0 0 0 1px #3697f2 inset;
@@ -786,25 +668,25 @@ exports[`StaticInstancePage should render 1`] = `
   color: #3697f2;
 }
 
-.emotion-64:first-of-type {
+.emotion-73:first-of-type {
   margin-left: 0;
 }
 
-.emotion-64:disabled {
+.emotion-73:disabled {
   background: rgba(48,48,48,0.1);
   color: rgba(48,48,48,0.2);
   cursor: not-allowed;
 }
 
-.emotion-64:disabled {
+.emotion-73:disabled {
   box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
 }
 
-.emotion-64:hover:not(:disabled) {
+.emotion-73:hover:not(:disabled) {
   background: #d7e2fd;
 }
 
-.emotion-65 {
+.emotion-74 {
   width: 100%;
   border-spacing: 0 15px;
   display: table;
@@ -812,7 +694,7 @@ exports[`StaticInstancePage should render 1`] = `
   border-color: grey;
 }
 
-.emotion-67 {
+.emotion-76 {
   text-align: left;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -823,7 +705,7 @@ exports[`StaticInstancePage should render 1`] = `
   padding: 5px 0 5px 25px;
 }
 
-.emotion-75 {
+.emotion-84 {
   box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 1px 4px #d9d9d9;
@@ -833,13 +715,13 @@ exports[`StaticInstancePage should render 1`] = `
   padding: 5px 0 5px 15px;
 }
 
-.emotion-77 {
+.emotion-86 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
 }
 
-.emotion-79 {
+.emotion-88 {
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -847,19 +729,19 @@ exports[`StaticInstancePage should render 1`] = `
   padding-bottom: 10px;
 }
 
-.emotion-85 {
+.emotion-94 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
 }
 
-.emotion-87 {
+.emotion-96 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-88 {
+.emotion-97 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -882,13 +764,13 @@ exports[`StaticInstancePage should render 1`] = `
   width: 20px;
 }
 
-.emotion-90 {
+.emotion-99 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-91 {
+.emotion-100 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -903,7 +785,7 @@ exports[`StaticInstancePage should render 1`] = `
   width: 350px;
 }
 
-.emotion-93 {
+.emotion-102 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -919,38 +801,38 @@ exports[`StaticInstancePage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-95 {
+.emotion-104 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-97 {
+.emotion-106 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-99 {
+.emotion-108 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-103 {
+.emotion-112 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-105 {
+.emotion-114 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-107 {
+.emotion-116 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-109 {
+.emotion-118 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -988,40 +870,102 @@ exports[`StaticInstancePage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-0-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-0-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-0-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1030,11 +974,11 @@ exports[`StaticInstancePage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1050,13 +994,13 @@ exports[`StaticInstancePage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1083,26 +1027,26 @@ exports[`StaticInstancePage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
               data-testid="service-name-header"
             >
               <a
-                class="emotion-32 emotion-33"
+                class="emotion-41 emotion-42"
                 href="/domain/dom/service"
               >
                 dom
@@ -1110,10 +1054,10 @@ exports[`StaticInstancePage should render 1`] = `
               :service.
               serv
               <span
-                class="emotion-34 emotion-35"
+                class="emotion-43 emotion-44"
               >
                 <svg
-                  class="emotion-36"
+                  class="emotion-45"
                   data-testid="icon"
                   data-wdio=""
                   height="15px"
@@ -1134,29 +1078,29 @@ exports[`StaticInstancePage should render 1`] = `
               </span>
             </div>
             <div
-              class="emotion-37 emotion-38"
+              class="emotion-46 emotion-47"
             >
               <div
-                class="emotion-39 emotion-40"
+                class="emotion-48 emotion-49"
               >
                 <span>
                   <div
-                    class="emotion-41 emotion-42"
+                    class="emotion-50 emotion-51"
                   >
                     <div
-                      class="emotion-43 emotion-44"
+                      class="emotion-52 emotion-53"
                     >
                       9
                     </div>
                     <div
-                      class="emotion-45 emotion-46"
+                      class="emotion-54 emotion-55"
                     >
                       Total Static Instances
                       <span
-                        class="emotion-47 emotion-48"
+                        class="emotion-56 emotion-57"
                       >
                         <svg
-                          class="emotion-36"
+                          class="emotion-45"
                           data-testid="icon"
                           data-wdio=""
                           height="15px"
@@ -1181,11 +1125,11 @@ exports[`StaticInstancePage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-50 denali-tab-group"
+              class="emotion-59 denali-tab-group"
               data-testid="tabgroup"
             >
               <div
-                class="emotion-51 denali-tab"
+                class="emotion-60 denali-tab"
                 data-active="false"
               >
                 Tags
@@ -1193,23 +1137,23 @@ exports[`StaticInstancePage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-52 emotion-53"
+            class="emotion-61 emotion-62"
             data-testid="instancelist"
           >
             <div
-              class="emotion-54 emotion-55"
+              class="emotion-63 emotion-64"
             >
               <div
-                class="emotion-56 emotion-57"
+                class="emotion-65 emotion-66"
               >
                 <div
-                  class="emotion-58 emotion-59"
+                  class="emotion-9 emotion-68"
                 >
                   <div
-                    class="emotion-60 emotion-61"
+                    class="emotion-16 emotion-70"
                   >
                     <div
-                      class="emotion-62 denali-input animated"
+                      class="emotion-14 denali-input animated"
                       data-testid="input-wrapper"
                     >
                       <input
@@ -1223,7 +1167,7 @@ exports[`StaticInstancePage should render 1`] = `
                         class="input-icon"
                       >
                         <svg
-                          class="emotion-10"
+                          class="emotion-19"
                           data-testid="icon"
                           data-wdio=""
                           height="24px"
@@ -1249,14 +1193,14 @@ exports[`StaticInstancePage should render 1`] = `
               </div>
               <div>
                 <button
-                  class="emotion-64 denali-button"
+                  class="emotion-73 denali-button"
                 >
                   Add Static Instance
                 </button>
               </div>
             </div>
             <table
-              class="emotion-65 emotion-66"
+              class="emotion-74 emotion-75"
               data-testid="instancetable"
             >
               <colgroup>
@@ -1276,22 +1220,22 @@ exports[`StaticInstancePage should render 1`] = `
               <thead>
                 <tr>
                   <th
-                    class="emotion-67 emotion-68"
+                    class="emotion-76 emotion-77"
                   >
                     Instance
                   </th>
                   <th
-                    class="emotion-67 emotion-68"
+                    class="emotion-76 emotion-77"
                   >
                     Type
                   </th>
                   <th
-                    class="emotion-67 emotion-68"
+                    class="emotion-76 emotion-77"
                   >
                     Date Added
                   </th>
                   <th
-                    class="emotion-67 emotion-68"
+                    class="emotion-76 emotion-77"
                   >
                     Delete
                   </th>
@@ -1299,34 +1243,34 @@ exports[`StaticInstancePage should render 1`] = `
               </thead>
               <tbody>
                 <tr
-                  class="emotion-75 emotion-76"
+                  class="emotion-84 emotion-85"
                   data-testid="instance-row"
                 >
                   <td
-                    class="emotion-77 emotion-78"
+                    class="emotion-86 emotion-87"
                     color=""
                   >
                     <div
-                      class="emotion-79 emotion-80"
+                      class="emotion-88 emotion-89"
                     />
                   </td>
                   <td
-                    class="emotion-77 emotion-78"
+                    class="emotion-86 emotion-87"
                     color=""
                   />
                   <td
-                    class="emotion-77 emotion-78"
+                    class="emotion-86 emotion-87"
                     color=""
                   >
                     2021-05-15 01:17 UTC
                   </td>
                   <td
-                    class="emotion-85 emotion-78"
+                    class="emotion-94 emotion-87"
                     color=""
                   >
                     <span>
                       <svg
-                        class="emotion-87"
+                        class="emotion-96"
                         data-testid="icon"
                         data-wdio=""
                         height="1.25em"
@@ -1356,11 +1300,11 @@ exports[`StaticInstancePage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-88 emotion-89"
+          class="emotion-97 emotion-98"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-90"
+            class="emotion-99"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -1377,30 +1321,30 @@ exports[`StaticInstancePage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-91 emotion-92"
+          class="emotion-100 emotion-101"
         >
           <div
-            class="emotion-93 emotion-94"
+            class="emotion-102 emotion-103"
           >
             <div
-              class="emotion-95 emotion-96"
+              class="emotion-104 emotion-105"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-97 emotion-98"
+                class="emotion-106 emotion-107"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-99 emotion-100"
+                class="emotion-108 emotion-109"
               >
                  | 
               </span>
               <a
-                class="emotion-97 emotion-98"
+                class="emotion-106 emotion-107"
                 href="/domain/manage"
               >
                 Manage
@@ -1408,16 +1352,16 @@ exports[`StaticInstancePage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-103 emotion-104"
+            class="emotion-112 emotion-113"
           >
             <div
-              class="emotion-105 emotion-106"
+              class="emotion-114 emotion-115"
             >
               <div
-                class="emotion-107 emotion-108"
+                class="emotion-116 emotion-117"
               >
                 <svg
-                  class="emotion-109"
+                  class="emotion-118"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1440,20 +1384,20 @@ exports[`StaticInstancePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-97 emotion-98"
+                class="emotion-106 emotion-107"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-105 emotion-106"
+              class="emotion-114 emotion-115"
             >
               <div
-                class="emotion-107 emotion-108"
+                class="emotion-116 emotion-117"
               >
                 <svg
-                  class="emotion-109"
+                  class="emotion-118"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -1476,7 +1420,7 @@ exports[`StaticInstancePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-97 emotion-98"
+                class="emotion-106 emotion-107"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/search/[type]/[searchterm]/__snapshots__/search.test.js.snap b/ui/src/__tests__/pages/search/[type]/[searchterm]/__snapshots__/search.test.js.snap
index 39efd0633c9..98eec342f9a 100644
--- a/ui/src/__tests__/pages/search/[type]/[searchterm]/__snapshots__/search.test.js.snap
+++ b/ui/src/__tests__/pages/search/[type]/[searchterm]/__snapshots__/search.test.js.snap
@@ -265,6 +265,25 @@ exports[`Search should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`Search should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`Search should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`Search should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`Search should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`Search should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,7 +455,7 @@ exports[`Search should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -469,29 +471,29 @@ exports[`Search should render 1`] = `
   flex-direction: column;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: #f5f8fe;
   padding: 20px 30px 0;
 }
 
-.emotion-30 {
+.emotion-39 {
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   margin-bottom: 10px;
   display: flex;
 }
 
-.emotion-32 {
+.emotion-41 {
   color: #9a9a9a;
 }
 
-.emotion-34 {
+.emotion-43 {
   border-bottom: 1px solid #d5d5d5;
   margin-top: 10px;
   margin-bottom: 10px;
   width: 100%;
 }
 
-.emotion-36 {
+.emotion-45 {
   color: #3570f4;
   margin-bottom: 5px;
   font: 100 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
@@ -500,26 +502,26 @@ exports[`Search should render 1`] = `
   display: flex;
 }
 
-.emotion-38 {
+.emotion-47 {
   font-size: 1.25em;
   margin-right: 5px;
   vertical-align: text-bottom;
 }
 
-.emotion-40 {
+.emotion-49 {
   fill: #303030;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-41 {
+.emotion-50 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-43 {
+.emotion-52 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -542,13 +544,13 @@ exports[`Search should render 1`] = `
   width: 20px;
 }
 
-.emotion-45 {
+.emotion-54 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-46 {
+.emotion-55 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -563,7 +565,7 @@ exports[`Search should render 1`] = `
   width: 350px;
 }
 
-.emotion-48 {
+.emotion-57 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -579,38 +581,38 @@ exports[`Search should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-50 {
+.emotion-59 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-52 {
+.emotion-61 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-54 {
+.emotion-63 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-58 {
+.emotion-67 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-60 {
+.emotion-69 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-62 {
+.emotion-71 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-64 {
+.emotion-73 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -648,40 +650,102 @@ exports[`Search should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value="test"
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-0-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-0-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-0-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -690,11 +754,11 @@ exports[`Search should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -710,13 +774,13 @@ exports[`Search should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -743,43 +807,44 @@ exports[`Search should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-37 emotion-38"
           >
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-39 emotion-40"
             >
               Search Results
             </div>
             <div
-              class="emotion-32 emotion-33"
+              class="emotion-41 emotion-42"
             >
               1
                Results
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-43 emotion-44"
             />
           </div>
           <div
-            class="emotion-36 emotion-37"
+            class="emotion-45 emotion-46"
+            data-wdio="search-result"
           >
             <div
-              class="emotion-38 emotion-39"
+              class="emotion-47 emotion-48"
             >
               <svg
-                class="emotion-40"
+                class="emotion-49"
                 data-testid="icon"
                 data-wdio=""
                 height="1em"
@@ -802,7 +867,7 @@ exports[`Search should render 1`] = `
               </svg>
             </div>
             <a
-              class="emotion-41 emotion-42"
+              class="emotion-50 emotion-51"
               href="/domain/athens.ci/role"
             >
               athens.ci
@@ -814,11 +879,11 @@ exports[`Search should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-43 emotion-44"
+          class="emotion-52 emotion-53"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-45"
+            class="emotion-54"
             data-testid="icon"
             data-wdio=""
             height="1em"
@@ -835,30 +900,30 @@ exports[`Search should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-46 emotion-47"
+          class="emotion-55 emotion-56"
         >
           <div
-            class="emotion-48 emotion-49"
+            class="emotion-57 emotion-58"
           >
             <div
-              class="emotion-50 emotion-51"
+              class="emotion-59 emotion-60"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-52 emotion-53"
+                class="emotion-61 emotion-62"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-54 emotion-55"
+                class="emotion-63 emotion-64"
               >
                  | 
               </span>
               <a
-                class="emotion-52 emotion-53"
+                class="emotion-61 emotion-62"
                 href="/domain/manage"
               >
                 Manage
@@ -866,16 +931,16 @@ exports[`Search should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-58 emotion-59"
+            class="emotion-67 emotion-68"
           >
             <div
-              class="emotion-60 emotion-61"
+              class="emotion-69 emotion-70"
             >
               <div
-                class="emotion-62 emotion-63"
+                class="emotion-71 emotion-72"
               >
                 <svg
-                  class="emotion-64"
+                  class="emotion-73"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -898,20 +963,20 @@ exports[`Search should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-52 emotion-53"
+                class="emotion-61 emotion-62"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-60 emotion-61"
+              class="emotion-69 emotion-70"
             >
               <div
-                class="emotion-62 emotion-63"
+                class="emotion-71 emotion-72"
               >
                 <svg
-                  class="emotion-64"
+                  class="emotion-73"
                   data-testid="icon"
                   data-wdio=""
                   height="1em"
@@ -934,7 +999,7 @@ exports[`Search should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-52 emotion-53"
+                class="emotion-61 emotion-62"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/workflow/__snapshots__/admin.test.js.snap b/ui/src/__tests__/pages/workflow/__snapshots__/admin.test.js.snap
index dc4910d9d97..06365d039ae 100644
--- a/ui/src/__tests__/pages/workflow/__snapshots__/admin.test.js.snap
+++ b/ui/src/__tests__/pages/workflow/__snapshots__/admin.test.js.snap
@@ -265,6 +265,25 @@ exports[`PendingApprovalPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`PendingApprovalPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`PendingApprovalPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`PendingApprovalPage should render 1`] = `
   font: 500 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,13 +455,13 @@ exports[`PendingApprovalPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-flex: 1 1;
   -ms-flex: 1 1;
   flex: 1 1;
 }
 
-.emotion-26 {
+.emotion-35 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -473,17 +475,17 @@ exports[`PendingApprovalPage should render 1`] = `
   box-sizing: content-box!important;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0px 30px;
 }
 
-.emotion-30 {
+.emotion-39 {
   padding-bottom: 20px;
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-32 {
+.emotion-41 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -498,7 +500,7 @@ exports[`PendingApprovalPage should render 1`] = `
   position: relative;
 }
 
-.emotion-32.vertical {
+.emotion-41.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -511,7 +513,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-33 {
+.emotion-42 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -532,11 +534,11 @@ exports[`PendingApprovalPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-33:hover {
+.emotion-42:hover {
   color: #3570f4;
 }
 
-.emotion-33.active {
+.emotion-42.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -544,11 +546,11 @@ exports[`PendingApprovalPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-33.active:hover {
+.emotion-42.active:hover {
   color: #303030;
 }
 
-.emotion-33.vertical {
+.emotion-42.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -560,30 +562,30 @@ exports[`PendingApprovalPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-33.vertical.active {
+.emotion-42.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-33.vertical.active:hover {
+.emotion-42.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-35 {
+.emotion-44 {
   width: calc(100vw - 15em);
   overflow-x: scroll;
   overflow-y: visible;
   box-sizing: content-box!important;
 }
 
-.emotion-37 {
+.emotion-46 {
   margin-top: 20px;
   width: 100%;
   border-spacing: 0;
 }
 
-.emotion-39 {
+.emotion-48 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -595,7 +597,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 1%;
 }
 
-.emotion-41 {
+.emotion-50 {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   box-sizing: border-box;
@@ -608,7 +610,7 @@ exports[`PendingApprovalPage should render 1`] = `
   vertical-align: middle;
 }
 
-.emotion-41>input[type='checkbox'] {
+.emotion-50>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
@@ -617,7 +619,7 @@ exports[`PendingApprovalPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-41>input[type='checkbox']+label {
+.emotion-50>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -630,7 +632,7 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-41>input[type='checkbox']+label:before {
+.emotion-50>input[type='checkbox']+label:before {
   background: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 2px;
@@ -646,33 +648,33 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 16px;
 }
 
-.emotion-41>input[type='checkbox']:hover+label:before {
+.emotion-50>input[type='checkbox']:hover+label:before {
   border: 2px solid #3697f2;
 }
 
-.emotion-41>input[type='checkbox']:focus+label:before {
+.emotion-50>input[type='checkbox']:focus+label:before {
   border: 2px solid rgba(54,151,242,0.5);
 }
 
-.emotion-41>input[type='checkbox'][data-partial='true']+label:before,
-.emotion-41>input[type='checkbox']:checked+label:before {
+.emotion-50>input[type='checkbox'][data-partial='true']+label:before,
+.emotion-50>input[type='checkbox']:checked+label:before {
   border: 2px solid #3697f2;
 }
 
-.emotion-41>input[type='checkbox']:disabled+label {
+.emotion-50>input[type='checkbox']:disabled+label {
   color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-41>input[type='checkbox']:disabled+label:before {
+.emotion-50>input[type='checkbox']:disabled+label:before {
   border: 2px solid #d5d5d5;
 }
 
-.emotion-41>input[type='checkbox']:checked:not([data-partial='true'])+label:before {
+.emotion-50>input[type='checkbox']:checked:not([data-partial='true'])+label:before {
   background: #3697f2;
 }
 
-.emotion-41>input[type='checkbox'][data-partial='true']+label:after {
+.emotion-50>input[type='checkbox'][data-partial='true']+label:after {
   border: solid #3697f2;
   border-width: 2px 0 0 0;
   box-sizing: border-box;
@@ -687,7 +689,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 8px;
 }
 
-.emotion-41>input[type='checkbox']:checked:not([data-partial='true'])+label:after {
+.emotion-50>input[type='checkbox']:checked:not([data-partial='true'])+label:after {
   border: solid #fff;
   border-width: 0 2px 2px 0;
   box-sizing: border-box;
@@ -707,7 +709,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 4.5px;
 }
 
-.emotion-42 {
+.emotion-51 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -718,7 +720,7 @@ exports[`PendingApprovalPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-44 {
+.emotion-53 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -730,7 +732,7 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-54 {
+.emotion-63 {
   border-bottom: 2px solid #d5d5d5;
   font-weight: 600;
   font-size: 1.2rem;
@@ -739,7 +741,7 @@ exports[`PendingApprovalPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-56 {
+.emotion-65 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -753,7 +755,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-56>textarea {
+.emotion-65>textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -782,43 +784,43 @@ exports[`PendingApprovalPage should render 1`] = `
   width: auto;
 }
 
-.emotion-56>textarea::-webkit-input-placeholder {
+.emotion-65>textarea::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-56>textarea::-moz-placeholder {
+.emotion-65>textarea::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-56>textarea:-ms-input-placeholder {
+.emotion-65>textarea:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-56>textarea::placeholder {
+.emotion-65>textarea::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-56>textarea:active,
-.emotion-56>textarea:focus {
+.emotion-65>textarea:active,
+.emotion-65>textarea:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-56>textarea:invalid {
+.emotion-65>textarea:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-56>textarea[disabled] {
+.emotion-65>textarea[disabled] {
   background: rgba(48,48,48,0.05);
   border-bottom: 2px solid rgba(48,48,48,0.05);
   color: rgba(48,48,48,0.25);
   cursor: not-allowed;
 }
 
-.emotion-56 .message {
+.emotion-65 .message {
   font-size: 12px;
   color: #303030;
   left: 0;
@@ -827,11 +829,11 @@ exports[`PendingApprovalPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-57>textarea {
+.emotion-66>textarea {
   resize: vertical;
 }
 
-.emotion-61>div input {
+.emotion-70>div input {
   position: relative;
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   background-color: rgba(48,48,48,0.05);
@@ -856,22 +858,22 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 10em;
 }
 
-.emotion-63 {
+.emotion-72 {
   display: flex;
 }
 
-.emotion-65 {
+.emotion-74 {
   margin-left: -7px;
   margin-top: 10px!important;
 }
 
-.emotion-67 {
+.emotion-76 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-77 {
+.emotion-86 {
   border-bottom: 1px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -887,17 +889,11 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0 5px 15px;
 }
 
-.emotion-79 {
+.emotion-88 {
   margin-top: 10px;
 }
 
-.emotion-81 {
-  fill: #d5d5d5;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
-.emotion-82 {
+.emotion-91 {
   border-bottom: 1px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -914,7 +910,7 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0 5px 15px;
 }
 
-.emotion-87 {
+.emotion-96 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -927,7 +923,7 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-89 {
+.emotion-98 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -939,7 +935,7 @@ exports[`PendingApprovalPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-111 {
+.emotion-120 {
   border-top: 1px solid #d5d5d5;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -959,7 +955,7 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-113 {
+.emotion-122 {
   border-top: 1px solid #d5d5d5;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -980,11 +976,11 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-115 {
+.emotion-124 {
   background-color: #3570f40D;
 }
 
-.emotion-117 {
+.emotion-126 {
   text-align: left;
   vertical-align: middle;
   word-break: break-all;
@@ -992,20 +988,20 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-120 {
+.emotion-129 {
   text-align: left;
   vertical-align: middle;
   word-break: break-all;
   padding: 5px 0px 5px 0px;
 }
 
-.emotion-128 {
+.emotion-137 {
   text-align: left;
   vertical-align: middle;
   padding: 5px 0px 5px 15px;
 }
 
-.emotion-138 {
+.emotion-147 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -1019,7 +1015,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-138>textarea {
+.emotion-147>textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -1048,43 +1044,43 @@ exports[`PendingApprovalPage should render 1`] = `
   width: auto;
 }
 
-.emotion-138>textarea::-webkit-input-placeholder {
+.emotion-147>textarea::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-138>textarea::-moz-placeholder {
+.emotion-147>textarea::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-138>textarea:-ms-input-placeholder {
+.emotion-147>textarea:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-138>textarea::placeholder {
+.emotion-147>textarea::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-138>textarea:active,
-.emotion-138>textarea:focus {
+.emotion-147>textarea:active,
+.emotion-147>textarea:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-138>textarea:invalid {
+.emotion-147>textarea:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-138>textarea[disabled] {
+.emotion-147>textarea[disabled] {
   background: rgba(48,48,48,0.05);
   border-bottom: 2px solid rgba(48,48,48,0.05);
   color: rgba(48,48,48,0.25);
   cursor: not-allowed;
 }
 
-.emotion-138 .message {
+.emotion-147 .message {
   font-size: 12px;
   color: #303030;
   left: 0;
@@ -1093,7 +1089,7 @@ exports[`PendingApprovalPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-143>div input {
+.emotion-152>div input {
   position: relative;
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   background-color: rgba(53, 112, 244, 0.05);
@@ -1118,7 +1114,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 10em;
 }
 
-.emotion-159 {
+.emotion-168 {
   vertical-align: middle;
   word-break: break-all;
   text-align: center;
@@ -1130,17 +1126,17 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0px 5px 14px;
 }
 
-.emotion-161 {
+.emotion-170 {
   margin-top: 45px;
 }
 
-.emotion-163 {
+.emotion-172 {
   fill: #1dad51;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-164 {
+.emotion-173 {
   vertical-align: middle;
   word-break: break-all;
   text-align: center;
@@ -1153,13 +1149,13 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0px 5px 0px;
 }
 
-.emotion-168 {
+.emotion-177 {
   fill: #ea0000;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-213 {
+.emotion-222 {
   vertical-align: middle;
   word-break: break-all;
   text-align: center;
@@ -1171,7 +1167,7 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0px 5px 14px;
 }
 
-.emotion-218 {
+.emotion-227 {
   vertical-align: middle;
   word-break: break-all;
   text-align: center;
@@ -1184,7 +1180,7 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0px 5px 0px;
 }
 
-.emotion-223 {
+.emotion-232 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1207,7 +1203,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-225 {
+.emotion-234 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
@@ -1245,40 +1241,102 @@ exports[`PendingApprovalPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
+            >
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
+              >
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-16 emotion-17"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
                 />
-              </svg>
+              </div>
             </div>
-            <div
-              class="message"
-              data-testid="message"
-            />
           </div>
         </div>
       </div>
@@ -1287,11 +1345,11 @@ exports[`PendingApprovalPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1307,13 +1365,13 @@ exports[`PendingApprovalPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1340,32 +1398,32 @@ exports[`PendingApprovalPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div>
             <div
-              class="emotion-28 emotion-29"
+              class="emotion-37 emotion-38"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 Action Required
               </div>
               <div
-                class="emotion-32 denali-tab-group"
+                class="emotion-41 denali-tab-group"
                 data-testid="tabgroup"
               >
                 <div
-                  class="emotion-33 denali-tab active"
+                  class="emotion-42 denali-tab active"
                   data-active="true"
                 >
                   <span
@@ -1378,7 +1436,7 @@ exports[`PendingApprovalPage should render 1`] = `
                   </span>
                 </div>
                 <div
-                  class="emotion-33 denali-tab"
+                  class="emotion-42 denali-tab"
                   data-active="false"
                 >
                   <span
@@ -1393,10 +1451,10 @@ exports[`PendingApprovalPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
             >
               <table
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
                 data-testid="pending-approval-table"
               >
                 <thead>
@@ -1404,10 +1462,10 @@ exports[`PendingApprovalPage should render 1`] = `
                     data-testid="pending-approval-table-header"
                   >
                     <th
-                      class="emotion-39 emotion-40"
+                      class="emotion-48 emotion-49"
                     >
                       <div
-                        class="emotion-41 denali-checkbox"
+                        class="emotion-50 denali-checkbox"
                         data-testid="checkbox-wrapper"
                       >
                         <input
@@ -1422,33 +1480,33 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-42 emotion-43"
+                      class="emotion-51 emotion-52"
                     >
                       <div>
                          Select All 
                       </div>
                     </th>
                     <th
-                      class="emotion-44 emotion-45"
+                      class="emotion-53 emotion-54"
                     />
                     <th
-                      class="emotion-44 emotion-45"
+                      class="emotion-53 emotion-54"
                     />
                     <th
-                      class="emotion-44 emotion-45"
+                      class="emotion-53 emotion-54"
                       colspan="4"
                     />
                     <th
-                      class="emotion-44 emotion-45"
+                      class="emotion-53 emotion-54"
                     />
                     <th
-                      class="emotion-44 emotion-45"
+                      class="emotion-53 emotion-54"
                     />
                     <th
-                      class="emotion-54 emotion-55"
+                      class="emotion-63 emotion-64"
                     >
                       <div
-                        class="emotion-56 denali-textarea emotion-57 emotion-58"
+                        class="emotion-65 denali-textarea emotion-66 emotion-67"
                         data-testid="textarea-wrapper"
                       >
                         <textarea
@@ -1460,14 +1518,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-54 emotion-55"
+                      class="emotion-63 emotion-64"
                     >
                       <div
-                        class="emotion-61 emotion-62"
+                        class="emotion-70 emotion-71"
                         disabled=""
                       >
                         <div
-                          class="fp-workflowHeaderExpiry emotion-63 emotion-64"
+                          class="fp-workflowHeaderExpiry emotion-72 emotion-73"
                         >
                           <input
                             class="flatpickr-input"
@@ -1485,11 +1543,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-65 emotion-66"
+                            class="emotion-74 emotion-75"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-67"
+                              class="emotion-76"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -1509,14 +1567,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-54 emotion-55"
+                      class="emotion-63 emotion-64"
                     >
                       <div
-                        class="emotion-61 emotion-62"
+                        class="emotion-70 emotion-71"
                         disabled=""
                       >
                         <div
-                          class="fp-workflowHeaderReviewReminder emotion-63 emotion-64"
+                          class="fp-workflowHeaderReviewReminder emotion-72 emotion-73"
                         >
                           <input
                             class="flatpickr-input"
@@ -1534,11 +1592,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-65 emotion-66"
+                            class="emotion-74 emotion-75"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-67"
+                              class="emotion-76"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -1558,13 +1616,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-77 emotion-78"
+                      class="emotion-86 emotion-87"
                     >
                       <div
-                        class="emotion-79 emotion-80"
+                        class="emotion-88 emotion-89"
                       >
                         <svg
-                          class="emotion-81"
+                          class="emotion-15"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -1585,13 +1643,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-82 emotion-83"
+                      class="emotion-91 emotion-92"
                     >
                       <div
-                        class="emotion-79 emotion-80"
+                        class="emotion-88 emotion-89"
                       >
                         <svg
-                          class="emotion-81"
+                          class="emotion-15"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -1611,71 +1669,71 @@ exports[`PendingApprovalPage should render 1`] = `
                   </tr>
                   <tr>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     />
                     <th
-                      class="emotion-89 emotion-90"
+                      class="emotion-98 emotion-99"
                     >
                       Domain
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Type
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Pending State
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Name
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Member
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                       colspan="2"
                     >
                       User Comment
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Requester
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Request Time
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Audit Reference
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Expiration Date
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       Reminder Date
                     </th>
                     <th
-                      class="emotion-111 emotion-112"
+                      class="emotion-120 emotion-121"
                     >
                       Approve
                     </th>
                     <th
-                      class="emotion-113 emotion-114"
+                      class="emotion-122 emotion-123"
                     >
                       Reject
                     </th>
@@ -1683,15 +1741,15 @@ exports[`PendingApprovalPage should render 1`] = `
                 </thead>
                 <tbody>
                   <tr
-                    class="emotion-115 emotion-116"
+                    class="emotion-124 emotion-125"
                     color="#3570f40D"
                     data-testid="pending-approval-table-row"
                   >
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       <div
-                        class="emotion-41 denali-checkbox"
+                        class="emotion-50 denali-checkbox"
                         data-testid="checkbox-wrapper"
                       >
                         <input
@@ -1706,25 +1764,25 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       home.domain1
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       role
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     />
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       testrole1
                     </td>
                     <td
-                      class="emotion-128 emotion-129"
+                      class="emotion-137 emotion-138"
                     >
                       <p>
                         Test
@@ -1736,13 +1794,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </p>
                     </td>
                     <td
-                      class="emotion-128 emotion-129"
+                      class="emotion-137 emotion-138"
                       colspan="2"
                     >
                       testing1
                     </td>
                     <td
-                      class="emotion-128 emotion-129"
+                      class="emotion-137 emotion-138"
                     >
                       <p>
                         Test
@@ -1754,15 +1812,15 @@ exports[`PendingApprovalPage should render 1`] = `
                       </p>
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       2022-02-15 18:14 UTC
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       <div
-                        class="emotion-138 denali-textarea emotion-57 emotion-140"
+                        class="emotion-147 denali-textarea emotion-66 emotion-149"
                         data-testid="textarea-wrapper"
                       >
                         <textarea
@@ -1774,13 +1832,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       <div
-                        class="emotion-143 emotion-144"
+                        class="emotion-152 emotion-153"
                       >
                         <div
-                          class="fp-home_domain1user_test1testrole1expiry emotion-63 emotion-64"
+                          class="fp-home_domain1user_test1testrole1expiry emotion-72 emotion-73"
                         >
                           <input
                             class="flatpickr-input"
@@ -1798,11 +1856,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-65 emotion-66"
+                            class="emotion-74 emotion-75"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-67"
+                              class="emotion-76"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -1822,13 +1880,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       <div
-                        class="emotion-143 emotion-144"
+                        class="emotion-152 emotion-153"
                       >
                         <div
-                          class="fp-home_domain1user_test1testrole1reviewReminder emotion-63 emotion-64"
+                          class="fp-home_domain1user_test1testrole1reviewReminder emotion-72 emotion-73"
                         >
                           <input
                             class="flatpickr-input"
@@ -1846,11 +1904,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-65 emotion-66"
+                            class="emotion-74 emotion-75"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-67"
+                              class="emotion-76"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -1870,14 +1928,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-159 emotion-160"
+                      class="emotion-168 emotion-169"
                       color="rgba(244, 248, 254, 1)"
                     >
                       <div
-                        class="emotion-161 emotion-162"
+                        class="emotion-170 emotion-171"
                       >
                         <svg
-                          class="emotion-163"
+                          class="emotion-172"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -1898,14 +1956,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-164 emotion-165"
+                      class="emotion-173 emotion-174"
                       color="rgba(244, 248, 254, 1)"
                     >
                       <div
-                        class="emotion-161 emotion-162"
+                        class="emotion-170 emotion-171"
                       >
                         <svg
-                          class="emotion-168"
+                          class="emotion-177"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -1924,15 +1982,15 @@ exports[`PendingApprovalPage should render 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="emotion-169 emotion-116"
+                    class="emotion-178 emotion-125"
                     color=""
                     data-testid="pending-approval-table-row"
                   >
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       <div
-                        class="emotion-41 denali-checkbox"
+                        class="emotion-50 denali-checkbox"
                         data-testid="checkbox-wrapper"
                       >
                         <input
@@ -1947,25 +2005,25 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       home.domain2
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       role
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     />
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       add-test
                     </td>
                     <td
-                      class="emotion-128 emotion-129"
+                      class="emotion-137 emotion-138"
                     >
                       <p>
                         Test
@@ -1977,13 +2035,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </p>
                     </td>
                     <td
-                      class="emotion-128 emotion-129"
+                      class="emotion-137 emotion-138"
                       colspan="2"
                     >
                       test
                     </td>
                     <td
-                      class="emotion-128 emotion-129"
+                      class="emotion-137 emotion-138"
                     >
                       <p>
                         Test
@@ -1995,15 +2053,15 @@ exports[`PendingApprovalPage should render 1`] = `
                       </p>
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       2022-02-16 16:02 UTC
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       <div
-                        class="emotion-138 denali-textarea emotion-57 emotion-140"
+                        class="emotion-147 denali-textarea emotion-66 emotion-149"
                         data-testid="textarea-wrapper"
                       >
                         <textarea
@@ -2015,13 +2073,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       <div
-                        class="emotion-143 emotion-144"
+                        class="emotion-152 emotion-153"
                       >
                         <div
-                          class="fp-home_domain2user_test2add_testexpiry emotion-63 emotion-64"
+                          class="fp-home_domain2user_test2add_testexpiry emotion-72 emotion-73"
                         >
                           <input
                             class="flatpickr-input"
@@ -2039,11 +2097,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-65 emotion-66"
+                            class="emotion-74 emotion-75"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-67"
+                              class="emotion-76"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -2063,13 +2121,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-117 emotion-118"
+                      class="emotion-126 emotion-127"
                     >
                       <div
-                        class="emotion-143 emotion-144"
+                        class="emotion-152 emotion-153"
                       >
                         <div
-                          class="fp-home_domain2user_test2add_testreviewReminder emotion-63 emotion-64"
+                          class="fp-home_domain2user_test2add_testreviewReminder emotion-72 emotion-73"
                         >
                           <input
                             class="flatpickr-input"
@@ -2087,11 +2145,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-65 emotion-66"
+                            class="emotion-74 emotion-75"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-67"
+                              class="emotion-76"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -2111,14 +2169,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-213 emotion-160"
+                      class="emotion-222 emotion-169"
                       color="rgba(255, 255, 255, 1)"
                     >
                       <div
-                        class="emotion-161 emotion-162"
+                        class="emotion-170 emotion-171"
                       >
                         <svg
-                          class="emotion-163"
+                          class="emotion-172"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -2139,14 +2197,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-218 emotion-165"
+                      class="emotion-227 emotion-174"
                       color="rgba(255, 255, 255, 1)"
                     >
                       <div
-                        class="emotion-161 emotion-162"
+                        class="emotion-170 emotion-171"
                       >
                         <svg
-                          class="emotion-168"
+                          class="emotion-177"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -2174,11 +2232,11 @@ exports[`PendingApprovalPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-223 emotion-224"
+          class="emotion-232 emotion-233"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-225"
+            class="emotion-234"
             data-testid="icon"
             data-wdio=""
             height="1em"
diff --git a/ui/src/__tests__/pages/workflow/__snapshots__/domain.test.js.snap b/ui/src/__tests__/pages/workflow/__snapshots__/domain.test.js.snap
index 9f787f73878..d10b7eb84c5 100644
--- a/ui/src/__tests__/pages/workflow/__snapshots__/domain.test.js.snap
+++ b/ui/src/__tests__/pages/workflow/__snapshots__/domain.test.js.snap
@@ -265,6 +265,25 @@ exports[`PendingApprovalPage should render 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`PendingApprovalPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`PendingApprovalPage should render 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`PendingApprovalPage should render 1`] = `
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,13 +455,13 @@ exports[`PendingApprovalPage should render 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-flex: 1 1;
   -ms-flex: 1 1;
   flex: 1 1;
 }
 
-.emotion-26 {
+.emotion-35 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -472,17 +474,17 @@ exports[`PendingApprovalPage should render 1`] = `
   position: relative;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0px 30px;
 }
 
-.emotion-30 {
+.emotion-39 {
   padding-bottom: 20px;
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-32 {
+.emotion-41 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -497,7 +499,7 @@ exports[`PendingApprovalPage should render 1`] = `
   position: relative;
 }
 
-.emotion-32.vertical {
+.emotion-41.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -510,7 +512,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 300px;
 }
 
-.emotion-33 {
+.emotion-42 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -531,11 +533,11 @@ exports[`PendingApprovalPage should render 1`] = `
   z-index: 1;
 }
 
-.emotion-33:hover {
+.emotion-42:hover {
   color: #3570f4;
 }
 
-.emotion-33.active {
+.emotion-42.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -543,11 +545,11 @@ exports[`PendingApprovalPage should render 1`] = `
   cursor: initial;
 }
 
-.emotion-33.active:hover {
+.emotion-42.active:hover {
   color: #303030;
 }
 
-.emotion-33.vertical {
+.emotion-42.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -559,163 +561,48 @@ exports[`PendingApprovalPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-33.vertical.active {
+.emotion-42.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-33.vertical.active:hover {
+.emotion-42.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-35 {
+.emotion-44 {
   width: calc(100vw - 15em);
   overflow-x: scroll;
   overflow-y: visible;
   box-sizing: content-box!important;
 }
 
-.emotion-37 {
+.emotion-46 {
   width: 460px;
 }
 
-.emotion-39 {
+.emotion-48 {
   position: relative;
   width: 100%;
 }
 
-.emotion-39 input {
+.emotion-48 input {
   cursor: inherit;
 }
 
-.emotion-40 {
+.emotion-49 {
   padding-top: 15px;
   padding-left: 30px;
 }
 
-.emotion-42 {
-  box-sizing: border-box;
-  display: inline-flex;
-  -webkit-box-flex-flow: row nowrap;
-  -webkit-flex-flow: row nowrap;
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  position: relative;
-  width: 100%;
-}
-
-.emotion-42 input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: rgba(53,112,244,0.05);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: transparent;
-  border-left: transparent;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #303030;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  font: inherit;
-  height: 36px;
-  margin: 0;
-  outline: none;
-  padding: 0 1rem;
-  text-align: left;
-  width: 100%;
-}
-
-.emotion-42.animated input {
-  -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-}
-
-.emotion-42 input::-webkit-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-42 input::-moz-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-42 input:-ms-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-42 input::placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-42 input.focused,
-.emotion-42 input:active,
-.emotion-42 input:focus {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #3570f4;
-  color: #303030;
-}
-
-.emotion-42 input:invalid {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #d01111;
-  color: #303030;
-}
-
-.emotion-42 .message {
-  font-size: 12px;
-  left: 0;
-  line-height: 1.8;
-  position: absolute;
-  top: 2.571rem;
-}
-
-.emotion-42.error input,
-.emotion-42.error input.focused,
-.emotion-42.error input:active,
-.emotion-42.error input:focus {
-  border-bottom: 2px solid #d01111;
-}
-
-.emotion-42.error .message {
-  color: #d01111;
-}
-
-.emotion-42 input {
-  padding-right: 36px;
-}
-
-.emotion-42 .input-icon {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: flex;
-  height: 36px;
-  position: absolute;
-  right: 6px;
-}
-
-.emotion-43 {
-  fill: #d5d5d5;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
-.emotion-44 {
+.emotion-53 {
   margin-top: 20px;
   width: 100%;
   border-spacing: 0;
 }
 
-.emotion-46 {
+.emotion-55 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -727,7 +614,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 1%;
 }
 
-.emotion-48 {
+.emotion-57 {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   box-sizing: border-box;
@@ -740,7 +627,7 @@ exports[`PendingApprovalPage should render 1`] = `
   vertical-align: middle;
 }
 
-.emotion-48>input[type='checkbox'] {
+.emotion-57>input[type='checkbox'] {
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
@@ -749,7 +636,7 @@ exports[`PendingApprovalPage should render 1`] = `
   visibility: hidden;
 }
 
-.emotion-48>input[type='checkbox']+label {
+.emotion-57>input[type='checkbox']+label {
   box-sizing: border-box;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
@@ -762,7 +649,7 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-48>input[type='checkbox']+label:before {
+.emotion-57>input[type='checkbox']+label:before {
   background: #fff;
   border: 2px solid rgba(54,151,242,0.5);
   border-radius: 2px;
@@ -778,33 +665,33 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 16px;
 }
 
-.emotion-48>input[type='checkbox']:hover+label:before {
+.emotion-57>input[type='checkbox']:hover+label:before {
   border: 2px solid #3697f2;
 }
 
-.emotion-48>input[type='checkbox']:focus+label:before {
+.emotion-57>input[type='checkbox']:focus+label:before {
   border: 2px solid rgba(54,151,242,0.5);
 }
 
-.emotion-48>input[type='checkbox'][data-partial='true']+label:before,
-.emotion-48>input[type='checkbox']:checked+label:before {
+.emotion-57>input[type='checkbox'][data-partial='true']+label:before,
+.emotion-57>input[type='checkbox']:checked+label:before {
   border: 2px solid #3697f2;
 }
 
-.emotion-48>input[type='checkbox']:disabled+label {
+.emotion-57>input[type='checkbox']:disabled+label {
   color: #d5d5d5;
   cursor: not-allowed;
 }
 
-.emotion-48>input[type='checkbox']:disabled+label:before {
+.emotion-57>input[type='checkbox']:disabled+label:before {
   border: 2px solid #d5d5d5;
 }
 
-.emotion-48>input[type='checkbox']:checked:not([data-partial='true'])+label:before {
+.emotion-57>input[type='checkbox']:checked:not([data-partial='true'])+label:before {
   background: #3697f2;
 }
 
-.emotion-48>input[type='checkbox'][data-partial='true']+label:after {
+.emotion-57>input[type='checkbox'][data-partial='true']+label:after {
   border: solid #3697f2;
   border-width: 2px 0 0 0;
   box-sizing: border-box;
@@ -819,7 +706,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 8px;
 }
 
-.emotion-48>input[type='checkbox']:checked:not([data-partial='true'])+label:after {
+.emotion-57>input[type='checkbox']:checked:not([data-partial='true'])+label:after {
   border: solid #fff;
   border-width: 0 2px 2px 0;
   box-sizing: border-box;
@@ -839,7 +726,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 4.5px;
 }
 
-.emotion-49 {
+.emotion-58 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -850,7 +737,7 @@ exports[`PendingApprovalPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-51 {
+.emotion-60 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -862,7 +749,7 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-59 {
+.emotion-68 {
   border-bottom: 2px solid #d5d5d5;
   font-weight: 600;
   font-size: 1.2rem;
@@ -871,7 +758,7 @@ exports[`PendingApprovalPage should render 1`] = `
   text-align: left;
 }
 
-.emotion-61 {
+.emotion-70 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -885,7 +772,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-61>textarea {
+.emotion-70>textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -914,43 +801,43 @@ exports[`PendingApprovalPage should render 1`] = `
   width: auto;
 }
 
-.emotion-61>textarea::-webkit-input-placeholder {
+.emotion-70>textarea::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-61>textarea::-moz-placeholder {
+.emotion-70>textarea::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-61>textarea:-ms-input-placeholder {
+.emotion-70>textarea:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-61>textarea::placeholder {
+.emotion-70>textarea::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-61>textarea:active,
-.emotion-61>textarea:focus {
+.emotion-70>textarea:active,
+.emotion-70>textarea:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-61>textarea:invalid {
+.emotion-70>textarea:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-61>textarea[disabled] {
+.emotion-70>textarea[disabled] {
   background: rgba(48,48,48,0.05);
   border-bottom: 2px solid rgba(48,48,48,0.05);
   color: rgba(48,48,48,0.25);
   cursor: not-allowed;
 }
 
-.emotion-61 .message {
+.emotion-70 .message {
   font-size: 12px;
   color: #303030;
   left: 0;
@@ -959,11 +846,11 @@ exports[`PendingApprovalPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-62>textarea {
+.emotion-71>textarea {
   resize: vertical;
 }
 
-.emotion-66>div input {
+.emotion-75>div input {
   position: relative;
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   background-color: rgba(48,48,48,0.05);
@@ -988,22 +875,22 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 10em;
 }
 
-.emotion-68 {
+.emotion-77 {
   display: flex;
 }
 
-.emotion-70 {
+.emotion-79 {
   margin-left: -7px;
   margin-top: 10px!important;
 }
 
-.emotion-72 {
+.emotion-81 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-82 {
+.emotion-91 {
   border-bottom: 1px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -1019,11 +906,11 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0 5px 15px;
 }
 
-.emotion-84 {
+.emotion-93 {
   margin-top: 10px;
 }
 
-.emotion-87 {
+.emotion-96 {
   border-bottom: 1px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -1040,7 +927,7 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0 5px 15px;
 }
 
-.emotion-92 {
+.emotion-101 {
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -1053,7 +940,7 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-114 {
+.emotion-123 {
   border-top: 1px solid #d5d5d5;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -1073,7 +960,7 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-116 {
+.emotion-125 {
   border-top: 1px solid #d5d5d5;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
@@ -1094,11 +981,11 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-118 {
+.emotion-127 {
   background-color: #3570f40D;
 }
 
-.emotion-120 {
+.emotion-129 {
   text-align: left;
   vertical-align: middle;
   word-break: break-all;
@@ -1106,13 +993,13 @@ exports[`PendingApprovalPage should render 1`] = `
   white-space: nowrap;
 }
 
-.emotion-129 {
+.emotion-138 {
   text-align: left;
   vertical-align: middle;
   padding: 5px 0px 5px 15px;
 }
 
-.emotion-139 {
+.emotion-148 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -1126,7 +1013,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 100%;
 }
 
-.emotion-139>textarea {
+.emotion-148>textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -1155,43 +1042,43 @@ exports[`PendingApprovalPage should render 1`] = `
   width: auto;
 }
 
-.emotion-139>textarea::-webkit-input-placeholder {
+.emotion-148>textarea::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-139>textarea::-moz-placeholder {
+.emotion-148>textarea::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-139>textarea:-ms-input-placeholder {
+.emotion-148>textarea:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-139>textarea::placeholder {
+.emotion-148>textarea::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-139>textarea:active,
-.emotion-139>textarea:focus {
+.emotion-148>textarea:active,
+.emotion-148>textarea:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-139>textarea:invalid {
+.emotion-148>textarea:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-139>textarea[disabled] {
+.emotion-148>textarea[disabled] {
   background: rgba(48,48,48,0.05);
   border-bottom: 2px solid rgba(48,48,48,0.05);
   color: rgba(48,48,48,0.25);
   cursor: not-allowed;
 }
 
-.emotion-139 .message {
+.emotion-148 .message {
   font-size: 12px;
   color: #303030;
   left: 0;
@@ -1200,7 +1087,7 @@ exports[`PendingApprovalPage should render 1`] = `
   top: 2.571rem;
 }
 
-.emotion-144>div input {
+.emotion-153>div input {
   position: relative;
   font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
   background-color: rgba(53, 112, 244, 0.05);
@@ -1225,7 +1112,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 10em;
 }
 
-.emotion-160 {
+.emotion-169 {
   vertical-align: middle;
   word-break: break-all;
   text-align: center;
@@ -1237,17 +1124,17 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0px 5px 14px;
 }
 
-.emotion-162 {
+.emotion-171 {
   margin-top: 45px;
 }
 
-.emotion-164 {
+.emotion-173 {
   fill: #1dad51;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-165 {
+.emotion-174 {
   vertical-align: middle;
   word-break: break-all;
   text-align: center;
@@ -1260,13 +1147,13 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0px 5px 0px;
 }
 
-.emotion-169 {
+.emotion-178 {
   fill: #ea0000;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-212 {
+.emotion-221 {
   vertical-align: middle;
   word-break: break-all;
   text-align: center;
@@ -1278,7 +1165,7 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0px 5px 14px;
 }
 
-.emotion-217 {
+.emotion-226 {
   vertical-align: middle;
   word-break: break-all;
   text-align: center;
@@ -1291,7 +1178,7 @@ exports[`PendingApprovalPage should render 1`] = `
   padding: 5px 0px 5px 0px;
 }
 
-.emotion-222 {
+.emotion-231 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1314,7 +1201,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-224 {
+.emotion-233 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
@@ -1352,40 +1239,102 @@ exports[`PendingApprovalPage should render 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-2-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-2-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-2-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1394,11 +1343,11 @@ exports[`PendingApprovalPage should render 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -1414,13 +1363,13 @@ exports[`PendingApprovalPage should render 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -1447,32 +1396,32 @@ exports[`PendingApprovalPage should render 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div>
             <div
-              class="emotion-28 emotion-29"
+              class="emotion-37 emotion-38"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 Action Required
               </div>
               <div
-                class="emotion-32 denali-tab-group"
+                class="emotion-41 denali-tab-group"
                 data-testid="tabgroup"
               >
                 <div
-                  class="emotion-33 denali-tab"
+                  class="emotion-42 denali-tab"
                   data-active="false"
                 >
                   <span
@@ -1485,7 +1434,7 @@ exports[`PendingApprovalPage should render 1`] = `
                   </span>
                 </div>
                 <div
-                  class="emotion-33 denali-tab active"
+                  class="emotion-42 denali-tab active"
                   data-active="true"
                 >
                   <span
@@ -1500,30 +1449,30 @@ exports[`PendingApprovalPage should render 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
             >
               <div
-                class="emotion-37 emotion-38"
+                class="emotion-46 emotion-47"
               >
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  aria-labelledby="downshift-1-label"
-                  class="emotion-39 denali-input-dropdown emotion-40 emotion-41"
+                  aria-labelledby="downshift-3-label"
+                  class="emotion-48 denali-input-dropdown emotion-49 emotion-50"
                   data-testid="input-dropdown"
                   role="combobox"
                 >
                   <div
-                    class="emotion-42 denali-input animated"
+                    class="emotion-14 denali-input animated"
                     data-testid="input-wrapper"
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-labelledby="downshift-1-label"
+                      aria-labelledby="downshift-3-label"
                       autocomplete="off"
                       autocorrect="off"
                       data-testid="input-node"
-                      id="downshift-1-input"
+                      id="downshift-3-input"
                       name="domains-inputd"
                       placeholder="Select a Domain to View Pending Members"
                       spellcheck="false"
@@ -1533,7 +1482,7 @@ exports[`PendingApprovalPage should render 1`] = `
                       class="input-icon"
                     >
                       <svg
-                        class="emotion-43"
+                        class="emotion-15"
                         data-testid="icon"
                         data-wdio=""
                         height="24px"
@@ -1557,7 +1506,7 @@ exports[`PendingApprovalPage should render 1`] = `
                 </div>
               </div>
               <table
-                class="emotion-44 emotion-45"
+                class="emotion-53 emotion-54"
                 data-testid="pending-approval-table"
               >
                 <thead>
@@ -1565,10 +1514,10 @@ exports[`PendingApprovalPage should render 1`] = `
                     data-testid="pending-approval-table-header"
                   >
                     <th
-                      class="emotion-46 emotion-47"
+                      class="emotion-55 emotion-56"
                     >
                       <div
-                        class="emotion-48 denali-checkbox"
+                        class="emotion-57 denali-checkbox"
                         data-testid="checkbox-wrapper"
                       >
                         <input
@@ -1583,30 +1532,30 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-49 emotion-50"
+                      class="emotion-58 emotion-59"
                     >
                       <div>
                          Select All 
                       </div>
                     </th>
                     <th
-                      class="emotion-51 emotion-52"
+                      class="emotion-60 emotion-61"
                     />
                     <th
-                      class="emotion-51 emotion-52"
+                      class="emotion-60 emotion-61"
                       colspan="4"
                     />
                     <th
-                      class="emotion-51 emotion-52"
+                      class="emotion-60 emotion-61"
                     />
                     <th
-                      class="emotion-51 emotion-52"
+                      class="emotion-60 emotion-61"
                     />
                     <th
-                      class="emotion-59 emotion-60"
+                      class="emotion-68 emotion-69"
                     >
                       <div
-                        class="emotion-61 denali-textarea emotion-62 emotion-63"
+                        class="emotion-70 denali-textarea emotion-71 emotion-72"
                         data-testid="textarea-wrapper"
                       >
                         <textarea
@@ -1618,14 +1567,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-59 emotion-60"
+                      class="emotion-68 emotion-69"
                     >
                       <div
-                        class="emotion-66 emotion-67"
+                        class="emotion-75 emotion-76"
                         disabled=""
                       >
                         <div
-                          class="fp-workflowHeaderExpiry emotion-68 emotion-69"
+                          class="fp-workflowHeaderExpiry emotion-77 emotion-78"
                         >
                           <input
                             class="flatpickr-input"
@@ -1643,11 +1592,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-70 emotion-71"
+                            class="emotion-79 emotion-80"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-72"
+                              class="emotion-81"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -1667,14 +1616,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-59 emotion-60"
+                      class="emotion-68 emotion-69"
                     >
                       <div
-                        class="emotion-66 emotion-67"
+                        class="emotion-75 emotion-76"
                         disabled=""
                       >
                         <div
-                          class="fp-workflowHeaderReviewReminder emotion-68 emotion-69"
+                          class="fp-workflowHeaderReviewReminder emotion-77 emotion-78"
                         >
                           <input
                             class="flatpickr-input"
@@ -1692,11 +1641,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-70 emotion-71"
+                            class="emotion-79 emotion-80"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-72"
+                              class="emotion-81"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -1716,13 +1665,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-82 emotion-83"
+                      class="emotion-91 emotion-92"
                     >
                       <div
-                        class="emotion-84 emotion-85"
+                        class="emotion-93 emotion-94"
                       >
                         <svg
-                          class="emotion-43"
+                          class="emotion-15"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -1743,13 +1692,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </th>
                     <th
-                      class="emotion-87 emotion-88"
+                      class="emotion-96 emotion-97"
                     >
                       <div
-                        class="emotion-84 emotion-85"
+                        class="emotion-93 emotion-94"
                       >
                         <svg
-                          class="emotion-43"
+                          class="emotion-15"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -1769,66 +1718,66 @@ exports[`PendingApprovalPage should render 1`] = `
                   </tr>
                   <tr>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     />
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Type
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Pending State
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Name
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Member
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                       colspan="2"
                     >
                       User Comment
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Requester
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Request Time
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Audit Reference
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Expiration Date
                     </th>
                     <th
-                      class="emotion-92 emotion-93"
+                      class="emotion-101 emotion-102"
                     >
                       Reminder Date
                     </th>
                     <th
-                      class="emotion-114 emotion-115"
+                      class="emotion-123 emotion-124"
                     >
                       Approve
                     </th>
                     <th
-                      class="emotion-116 emotion-117"
+                      class="emotion-125 emotion-126"
                     >
                       Reject
                     </th>
@@ -1836,15 +1785,15 @@ exports[`PendingApprovalPage should render 1`] = `
                 </thead>
                 <tbody>
                   <tr
-                    class="emotion-118 emotion-119"
+                    class="emotion-127 emotion-128"
                     color="#3570f40D"
                     data-testid="pending-approval-table-row"
                   >
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       <div
-                        class="emotion-48 denali-checkbox"
+                        class="emotion-57 denali-checkbox"
                         data-testid="checkbox-wrapper"
                       >
                         <input
@@ -1859,20 +1808,20 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       role
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     />
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       testrole1
                     </td>
                     <td
-                      class="emotion-129 emotion-130"
+                      class="emotion-138 emotion-139"
                     >
                       <p>
                         Test
@@ -1884,13 +1833,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </p>
                     </td>
                     <td
-                      class="emotion-129 emotion-130"
+                      class="emotion-138 emotion-139"
                       colspan="2"
                     >
                       testing1
                     </td>
                     <td
-                      class="emotion-129 emotion-130"
+                      class="emotion-138 emotion-139"
                     >
                       <p>
                         Test
@@ -1902,15 +1851,15 @@ exports[`PendingApprovalPage should render 1`] = `
                       </p>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       2022-02-15 18:14 UTC
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       <div
-                        class="emotion-139 denali-textarea emotion-62 emotion-141"
+                        class="emotion-148 denali-textarea emotion-71 emotion-150"
                         data-testid="textarea-wrapper"
                       >
                         <textarea
@@ -1922,13 +1871,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       <div
-                        class="emotion-144 emotion-145"
+                        class="emotion-153 emotion-154"
                       >
                         <div
-                          class="fp-home_domain1user_test1testrole1expiry emotion-68 emotion-69"
+                          class="fp-home_domain1user_test1testrole1expiry emotion-77 emotion-78"
                         >
                           <input
                             class="flatpickr-input"
@@ -1946,11 +1895,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-70 emotion-71"
+                            class="emotion-79 emotion-80"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-72"
+                              class="emotion-81"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -1970,13 +1919,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       <div
-                        class="emotion-144 emotion-145"
+                        class="emotion-153 emotion-154"
                       >
                         <div
-                          class="fp-home_domain1user_test1testrole1reviewReminder emotion-68 emotion-69"
+                          class="fp-home_domain1user_test1testrole1reviewReminder emotion-77 emotion-78"
                         >
                           <input
                             class="flatpickr-input"
@@ -1994,11 +1943,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-70 emotion-71"
+                            class="emotion-79 emotion-80"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-72"
+                              class="emotion-81"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -2018,14 +1967,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-160 emotion-161"
+                      class="emotion-169 emotion-170"
                       color="rgba(244, 248, 254, 1)"
                     >
                       <div
-                        class="emotion-162 emotion-163"
+                        class="emotion-171 emotion-172"
                       >
                         <svg
-                          class="emotion-164"
+                          class="emotion-173"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -2046,14 +1995,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-165 emotion-166"
+                      class="emotion-174 emotion-175"
                       color="rgba(244, 248, 254, 1)"
                     >
                       <div
-                        class="emotion-162 emotion-163"
+                        class="emotion-171 emotion-172"
                       >
                         <svg
-                          class="emotion-169"
+                          class="emotion-178"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -2072,15 +2021,15 @@ exports[`PendingApprovalPage should render 1`] = `
                     </td>
                   </tr>
                   <tr
-                    class="emotion-170 emotion-119"
+                    class="emotion-179 emotion-128"
                     color=""
                     data-testid="pending-approval-table-row"
                   >
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       <div
-                        class="emotion-48 denali-checkbox"
+                        class="emotion-57 denali-checkbox"
                         data-testid="checkbox-wrapper"
                       >
                         <input
@@ -2095,20 +2044,20 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       role
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     />
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       add-test
                     </td>
                     <td
-                      class="emotion-129 emotion-130"
+                      class="emotion-138 emotion-139"
                     >
                       <p>
                         Test
@@ -2120,13 +2069,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </p>
                     </td>
                     <td
-                      class="emotion-129 emotion-130"
+                      class="emotion-138 emotion-139"
                       colspan="2"
                     >
                       test
                     </td>
                     <td
-                      class="emotion-129 emotion-130"
+                      class="emotion-138 emotion-139"
                     >
                       <p>
                         Test
@@ -2138,15 +2087,15 @@ exports[`PendingApprovalPage should render 1`] = `
                       </p>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       2022-02-16 16:02 UTC
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       <div
-                        class="emotion-139 denali-textarea emotion-62 emotion-141"
+                        class="emotion-148 denali-textarea emotion-71 emotion-150"
                         data-testid="textarea-wrapper"
                       >
                         <textarea
@@ -2158,13 +2107,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       <div
-                        class="emotion-144 emotion-145"
+                        class="emotion-153 emotion-154"
                       >
                         <div
-                          class="fp-home_domain2user_test2add_testexpiry emotion-68 emotion-69"
+                          class="fp-home_domain2user_test2add_testexpiry emotion-77 emotion-78"
                         >
                           <input
                             class="flatpickr-input"
@@ -2182,11 +2131,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-70 emotion-71"
+                            class="emotion-79 emotion-80"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-72"
+                              class="emotion-81"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -2206,13 +2155,13 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-120 emotion-121"
+                      class="emotion-129 emotion-130"
                     >
                       <div
-                        class="emotion-144 emotion-145"
+                        class="emotion-153 emotion-154"
                       >
                         <div
-                          class="fp-home_domain2user_test2add_testreviewReminder emotion-68 emotion-69"
+                          class="fp-home_domain2user_test2add_testreviewReminder emotion-77 emotion-78"
                         >
                           <input
                             class="flatpickr-input"
@@ -2230,11 +2179,11 @@ exports[`PendingApprovalPage should render 1`] = `
                             type="text"
                           />
                           <a
-                            class="emotion-70 emotion-71"
+                            class="emotion-79 emotion-80"
                             data-clear=""
                           >
                             <svg
-                              class="emotion-72"
+                              class="emotion-81"
                               data-testid="icon"
                               data-wdio=""
                               height="1.25em"
@@ -2254,14 +2203,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-212 emotion-161"
+                      class="emotion-221 emotion-170"
                       color="rgba(255, 255, 255, 1)"
                     >
                       <div
-                        class="emotion-162 emotion-163"
+                        class="emotion-171 emotion-172"
                       >
                         <svg
-                          class="emotion-164"
+                          class="emotion-173"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -2282,14 +2231,14 @@ exports[`PendingApprovalPage should render 1`] = `
                       </div>
                     </td>
                     <td
-                      class="emotion-217 emotion-166"
+                      class="emotion-226 emotion-175"
                       color="rgba(255, 255, 255, 1)"
                     >
                       <div
-                        class="emotion-162 emotion-163"
+                        class="emotion-171 emotion-172"
                       >
                         <svg
-                          class="emotion-169"
+                          class="emotion-178"
                           data-testid="icon"
                           data-wdio=""
                           height="1.25em"
@@ -2317,11 +2266,11 @@ exports[`PendingApprovalPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-222 emotion-223"
+          class="emotion-231 emotion-232"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-224"
+            class="emotion-233"
             data-testid="icon"
             data-wdio=""
             height="1em"
diff --git a/ui/src/__tests__/pages/workflow/__snapshots__/group.test.js.snap b/ui/src/__tests__/pages/workflow/__snapshots__/group.test.js.snap
index 3f10090c5ee..e791e49d6f7 100644
--- a/ui/src/__tests__/pages/workflow/__snapshots__/group.test.js.snap
+++ b/ui/src/__tests__/pages/workflow/__snapshots__/group.test.js.snap
@@ -265,6 +265,25 @@ exports[`WorkflowGroup should render without error 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`WorkflowGroup should render without error 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`WorkflowGroup should render without error 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`WorkflowGroup should render without error 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   font: 500 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,13 +455,13 @@ exports[`WorkflowGroup should render without error 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-flex: 1 1;
   -ms-flex: 1 1;
   flex: 1 1;
 }
 
-.emotion-26 {
+.emotion-35 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -473,17 +475,17 @@ exports[`WorkflowGroup should render without error 1`] = `
   box-sizing: content-box!important;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0px 30px;
 }
 
-.emotion-30 {
+.emotion-39 {
   padding-bottom: 20px;
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-32 {
+.emotion-41 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -498,7 +500,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   position: relative;
 }
 
-.emotion-32.vertical {
+.emotion-41.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -511,7 +513,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   width: 300px;
 }
 
-.emotion-33 {
+.emotion-42 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -532,11 +534,11 @@ exports[`WorkflowGroup should render without error 1`] = `
   z-index: 1;
 }
 
-.emotion-33:hover {
+.emotion-42:hover {
   color: #3570f4;
 }
 
-.emotion-33.active {
+.emotion-42.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -544,11 +546,11 @@ exports[`WorkflowGroup should render without error 1`] = `
   cursor: initial;
 }
 
-.emotion-33.active:hover {
+.emotion-42.active:hover {
   color: #303030;
 }
 
-.emotion-33.vertical {
+.emotion-42.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -560,23 +562,23 @@ exports[`WorkflowGroup should render without error 1`] = `
   text-align: left;
 }
 
-.emotion-33.vertical.active {
+.emotion-42.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-33.vertical.active:hover {
+.emotion-42.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin-left: 50px;
   margin-top: 20px;
   display: flex;
 }
 
-.emotion-37 {
+.emotion-46 {
   font-size: 14px;
   font-weight: 600;
   color: #303030;
@@ -584,7 +586,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   white-space: nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   margin-top: 5px;
   -webkit-flex-basis: 20%;
   -ms-flex-preferred-size: 20%;
@@ -592,7 +594,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   display: block;
 }
 
-.emotion-40 {
+.emotion-49 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -606,7 +608,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   width: 250px;
 }
 
-.emotion-40 input {
+.emotion-49 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -632,42 +634,42 @@ exports[`WorkflowGroup should render without error 1`] = `
   width: 100%;
 }
 
-.emotion-40.animated input {
+.emotion-49.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-40 input::-webkit-input-placeholder {
+.emotion-49 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-40 input::-moz-placeholder {
+.emotion-49 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-40 input:-ms-input-placeholder {
+.emotion-49 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-40 input::placeholder {
+.emotion-49 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-40 input.focused,
-.emotion-40 input:active,
-.emotion-40 input:focus {
+.emotion-49 input.focused,
+.emotion-49 input:active,
+.emotion-49 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-40 input:invalid {
+.emotion-49 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-40 .message {
+.emotion-49 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -675,30 +677,30 @@ exports[`WorkflowGroup should render without error 1`] = `
   top: 2.571rem;
 }
 
-.emotion-40.error input,
-.emotion-40.error input.focused,
-.emotion-40.error input:active,
-.emotion-40.error input:focus {
+.emotion-49.error input,
+.emotion-49.error input.focused,
+.emotion-49.error input:active,
+.emotion-49.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-40.error .message {
+.emotion-49.error .message {
   color: #d01111;
 }
 
-.emotion-41 {
+.emotion-50 {
   width: 300px;
   margin-top: 5px;
 }
 
-.emotion-43 {
+.emotion-52 {
   width: 100%;
   overflow-x: scroll;
   overflow-y: visible;
   box-sizing: content-box!important;
 }
 
-.emotion-49 {
+.emotion-58 {
   display: grid;
   margin-right: 3%;
   -webkit-align-items: center;
@@ -707,7 +709,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   align-items: center;
 }
 
-.emotion-51 {
+.emotion-60 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -730,7 +732,7 @@ exports[`WorkflowGroup should render without error 1`] = `
   width: 20px;
 }
 
-.emotion-53 {
+.emotion-62 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
@@ -768,40 +770,102 @@ exports[`WorkflowGroup should render without error 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -810,11 +874,11 @@ exports[`WorkflowGroup should render without error 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -830,13 +894,13 @@ exports[`WorkflowGroup should render without error 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -863,32 +927,32 @@ exports[`WorkflowGroup should render without error 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div>
             <div
-              class="emotion-28 emotion-29"
+              class="emotion-37 emotion-38"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 Action Required
               </div>
               <div
-                class="emotion-32 denali-tab-group"
+                class="emotion-41 denali-tab-group"
                 data-testid="tabgroup"
               >
                 <div
-                  class="emotion-33 denali-tab"
+                  class="emotion-42 denali-tab"
                   data-active="false"
                 >
                   <span
@@ -901,7 +965,7 @@ exports[`WorkflowGroup should render without error 1`] = `
                   </span>
                 </div>
                 <div
-                  class="emotion-33 denali-tab"
+                  class="emotion-42 denali-tab"
                   data-active="false"
                 >
                   <span
@@ -916,15 +980,15 @@ exports[`WorkflowGroup should render without error 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
             >
               <label
-                class="emotion-37 denali-input-label emotion-38 emotion-39"
+                class="emotion-46 denali-input-label emotion-47 emotion-48"
               >
                 Provide Justification for All Reviews
               </label>
               <div
-                class="emotion-40 denali-input animated emotion-41 emotion-42"
+                class="emotion-49 denali-input animated emotion-50 emotion-51"
                 data-testid="input-wrapper"
               >
                 <input
@@ -942,18 +1006,18 @@ exports[`WorkflowGroup should render without error 1`] = `
               </div>
             </div>
             <div
-              class="emotion-43 emotion-44"
+              class="emotion-52 emotion-53"
             >
               <div
-                class="emotion-35 emotion-36"
+                class="emotion-44 emotion-45"
               >
                 No roles to review.
               </div>
               <div
-                class="emotion-35 emotion-36"
+                class="emotion-44 emotion-45"
               >
                 <div
-                  class="emotion-49 emotion-50"
+                  class="emotion-58 emotion-59"
                 >
                   Displaying page
                    
@@ -971,11 +1035,11 @@ exports[`WorkflowGroup should render without error 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-51 emotion-52"
+          class="emotion-60 emotion-61"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-53"
+            class="emotion-62"
             data-testid="icon"
             data-wdio=""
             height="1em"
diff --git a/ui/src/__tests__/pages/workflow/__snapshots__/role.test.js.snap b/ui/src/__tests__/pages/workflow/__snapshots__/role.test.js.snap
index 7db965ffc58..94f0adee29a 100644
--- a/ui/src/__tests__/pages/workflow/__snapshots__/role.test.js.snap
+++ b/ui/src/__tests__/pages/workflow/__snapshots__/role.test.js.snap
@@ -265,6 +265,25 @@ exports[`WorkflowRole should render without error 1`] = `
 }
 
 .emotion-9 {
+  display: flex;
+  width: 100%;
+}
+
+.emotion-11 {
+  background: #ffffff;
+  width: 35%;
+}
+
+.emotion-13 {
+  position: relative;
+  width: 100%;
+}
+
+.emotion-13 input {
+  cursor: pointer;
+}
+
+.emotion-14 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -278,7 +297,7 @@ exports[`WorkflowRole should render without error 1`] = `
   width: 100%;
 }
 
-.emotion-9 input {
+.emotion-14 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -304,42 +323,42 @@ exports[`WorkflowRole should render without error 1`] = `
   width: 100%;
 }
 
-.emotion-9.animated input {
+.emotion-14.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-9 input::-webkit-input-placeholder {
+.emotion-14 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::-moz-placeholder {
+.emotion-14 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input:-ms-input-placeholder {
+.emotion-14 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input::placeholder {
+.emotion-14 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
+.emotion-14 input.focused,
+.emotion-14 input:active,
+.emotion-14 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-9 input:invalid {
+.emotion-14 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-9 .message {
+.emotion-14 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -347,51 +366,22 @@ exports[`WorkflowRole should render without error 1`] = `
   top: 2.571rem;
 }
 
-.emotion-9.error input,
-.emotion-9.error input.focused,
-.emotion-9.error input:active,
-.emotion-9.error input:focus {
+.emotion-14.error input,
+.emotion-14.error input.focused,
+.emotion-14.error input:active,
+.emotion-14.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-9.error .message {
+.emotion-14.error .message {
   color: #d01111;
 }
 
-.emotion-9 input {
-  background: rgba(242,242,242,0.1);
-  color: #fff;
-}
-
-.emotion-9 input::-webkit-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::-moz-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input:-ms-input-placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input::placeholder {
-  color: rgba(255,255,255,0.6);
-}
-
-.emotion-9 input.focused,
-.emotion-9 input:active,
-.emotion-9 input:focus {
-  background: rgba(242,242,242,0.1);
-  border-bottom: 2px solid #3570f4;
-  color: #fff;
-}
-
-.emotion-9 input {
+.emotion-14 input {
   padding-right: 36px;
 }
 
-.emotion-9 .input-icon {
+.emotion-14 .input-icon {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -402,33 +392,45 @@ exports[`WorkflowRole should render without error 1`] = `
   right: 6px;
 }
 
-.emotion-10 {
+.emotion-15 {
+  fill: #d5d5d5;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+
+.emotion-16 {
+  background: #ffffff;
+  width: 65%;
+  margin-left: 5px;
+}
+
+.emotion-19 {
   fill: #3570f4;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-12 {
+.emotion-21 {
   display: flex;
 }
 
-.emotion-14 {
+.emotion-23 {
   fill: #fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-15 {
+.emotion-24 {
   position: relative;
   width: 0;
   height: 0;
 }
 
-.emotion-17 {
+.emotion-26 {
   margin-left: 15px;
 }
 
-.emotion-20 {
+.emotion-29 {
   -webkit-flex: 1 1 calc(100vh - 60px);
   -ms-flex: 1 1 calc(100vh - 60px);
   flex: 1 1 calc(100vh - 60px);
@@ -436,7 +438,7 @@ exports[`WorkflowRole should render without error 1`] = `
   font: 500 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-22 {
+.emotion-31 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -453,13 +455,13 @@ exports[`WorkflowRole should render without error 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-24 {
+.emotion-33 {
   -webkit-flex: 1 1;
   -ms-flex: 1 1;
   flex: 1 1;
 }
 
-.emotion-26 {
+.emotion-35 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -473,17 +475,17 @@ exports[`WorkflowRole should render without error 1`] = `
   box-sizing: content-box!important;
 }
 
-.emotion-28 {
+.emotion-37 {
   background: linear-gradient(to top, #f2f2f2, #fff);
   padding: 20px 30px 0px 30px;
 }
 
-.emotion-30 {
+.emotion-39 {
   padding-bottom: 20px;
   font: 600 20px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
 }
 
-.emotion-32 {
+.emotion-41 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -498,7 +500,7 @@ exports[`WorkflowRole should render without error 1`] = `
   position: relative;
 }
 
-.emotion-32.vertical {
+.emotion-41.vertical {
   background: #f5f8fe;
   display: flex;
   -webkit-flex-direction: column;
@@ -511,7 +513,7 @@ exports[`WorkflowRole should render without error 1`] = `
   width: 300px;
 }
 
-.emotion-33 {
+.emotion-42 {
   font-family: Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-weight: 300;
@@ -532,11 +534,11 @@ exports[`WorkflowRole should render without error 1`] = `
   z-index: 1;
 }
 
-.emotion-33:hover {
+.emotion-42:hover {
   color: #3570f4;
 }
 
-.emotion-33.active {
+.emotion-42.active {
   background: #fff;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -544,11 +546,11 @@ exports[`WorkflowRole should render without error 1`] = `
   cursor: initial;
 }
 
-.emotion-33.active:hover {
+.emotion-42.active:hover {
   color: #303030;
 }
 
-.emotion-33.vertical {
+.emotion-42.vertical {
   background: #f5f8fe;
   border-left: solid 4px #f5f8fe;
   height: 24px;
@@ -560,23 +562,23 @@ exports[`WorkflowRole should render without error 1`] = `
   text-align: left;
 }
 
-.emotion-33.vertical.active {
+.emotion-42.vertical.active {
   background: #fff;
   border-left: solid 4px #3697f2;
   color: #303030;
 }
 
-.emotion-33.vertical.active:hover {
+.emotion-42.vertical.active:hover {
   color: #303030;
 }
 
-.emotion-35 {
+.emotion-44 {
   margin-left: 50px;
   margin-top: 20px;
   display: flex;
 }
 
-.emotion-37 {
+.emotion-46 {
   font-size: 14px;
   font-weight: 600;
   color: #303030;
@@ -584,7 +586,7 @@ exports[`WorkflowRole should render without error 1`] = `
   white-space: nowrap;
 }
 
-.emotion-38 {
+.emotion-47 {
   margin-top: 5px;
   -webkit-flex-basis: 20%;
   -ms-flex-preferred-size: 20%;
@@ -592,7 +594,7 @@ exports[`WorkflowRole should render without error 1`] = `
   display: block;
 }
 
-.emotion-40 {
+.emotion-49 {
   box-sizing: border-box;
   display: inline-flex;
   -webkit-box-flex-flow: row nowrap;
@@ -606,7 +608,7 @@ exports[`WorkflowRole should render without error 1`] = `
   width: 250px;
 }
 
-.emotion-40 input {
+.emotion-49 input {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -632,42 +634,42 @@ exports[`WorkflowRole should render without error 1`] = `
   width: 100%;
 }
 
-.emotion-40.animated input {
+.emotion-49.animated input {
   -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
 }
 
-.emotion-40 input::-webkit-input-placeholder {
+.emotion-49 input::-webkit-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-40 input::-moz-placeholder {
+.emotion-49 input::-moz-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-40 input:-ms-input-placeholder {
+.emotion-49 input:-ms-input-placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-40 input::placeholder {
+.emotion-49 input::placeholder {
   color: rgba(48,48,48,0.6);
 }
 
-.emotion-40 input.focused,
-.emotion-40 input:active,
-.emotion-40 input:focus {
+.emotion-49 input.focused,
+.emotion-49 input:active,
+.emotion-49 input:focus {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #3570f4;
   color: #303030;
 }
 
-.emotion-40 input:invalid {
+.emotion-49 input:invalid {
   background: rgba(53,112,244,0.05);
   border-bottom: 2px solid #d01111;
   color: #303030;
 }
 
-.emotion-40 .message {
+.emotion-49 .message {
   font-size: 12px;
   left: 0;
   line-height: 1.8;
@@ -675,30 +677,30 @@ exports[`WorkflowRole should render without error 1`] = `
   top: 2.571rem;
 }
 
-.emotion-40.error input,
-.emotion-40.error input.focused,
-.emotion-40.error input:active,
-.emotion-40.error input:focus {
+.emotion-49.error input,
+.emotion-49.error input.focused,
+.emotion-49.error input:active,
+.emotion-49.error input:focus {
   border-bottom: 2px solid #d01111;
 }
 
-.emotion-40.error .message {
+.emotion-49.error .message {
   color: #d01111;
 }
 
-.emotion-41 {
+.emotion-50 {
   width: 300px;
   margin-top: 5px;
 }
 
-.emotion-43 {
+.emotion-52 {
   width: 100%;
   overflow-x: scroll;
   overflow-y: visible;
   box-sizing: content-box!important;
 }
 
-.emotion-49 {
+.emotion-58 {
   display: grid;
   margin-right: 3%;
   -webkit-align-items: center;
@@ -707,7 +709,7 @@ exports[`WorkflowRole should render without error 1`] = `
   align-items: center;
 }
 
-.emotion-51 {
+.emotion-60 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -730,7 +732,7 @@ exports[`WorkflowRole should render without error 1`] = `
   width: 20px;
 }
 
-.emotion-53 {
+.emotion-62 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
@@ -768,40 +770,102 @@ exports[`WorkflowRole should render without error 1`] = `
           data-testid="navbar-item"
         >
           <div
-            class="emotion-9 denali-input animated"
-            data-testid="input-wrapper"
+            class="emotion-9 emotion-10"
           >
-            <input
-              autocomplete="off"
-              data-testid="input-node"
-              name="search"
-              placeholder="Enter domain name"
-              value=""
-            />
             <div
-              class="input-icon"
+              class="emotion-11 emotion-12"
             >
-              <svg
-                class="emotion-10"
-                data-testid="icon"
-                data-wdio=""
-                height="24px"
-                id=""
-                viewBox="0 0 1024 1024"
-                width="24px"
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-1-label"
+                class="emotion-13 denali-input-dropdown"
+                data-testid="input-dropdown"
+                role="combobox"
               >
-                <title>
-                  search
-                </title>
-                <path
-                  d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
-                />
-              </svg>
+                <div
+                  class="emotion-14 denali-input animated"
+                  data-testid="input-wrapper"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-labelledby="downshift-1-label"
+                    autocomplete="off"
+                    autocorrect="off"
+                    data-testid="input-node"
+                    id="downshift-1-input"
+                    name="search-type"
+                    readonly=""
+                    spellcheck="false"
+                    value="Domain"
+                  />
+                  <div
+                    class="input-icon"
+                  >
+                    <svg
+                      class="emotion-15"
+                      data-testid="icon"
+                      data-wdio=""
+                      height="24px"
+                      id=""
+                      viewBox="0 0 1024 1024"
+                      width="24px"
+                    >
+                      <title>
+                        arrowhead-down
+                      </title>
+                      <path
+                        d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="message"
+                    data-testid="message"
+                  />
+                </div>
+              </div>
             </div>
             <div
-              class="message"
-              data-testid="message"
-            />
+              class="emotion-16 emotion-17"
+            >
+              <div
+                class="emotion-14 denali-input animated"
+                data-testid="input-wrapper"
+              >
+                <input
+                  autocomplete="off"
+                  data-testid="input-node"
+                  name="search-text"
+                  placeholder="Search"
+                  value=""
+                />
+                <div
+                  class="input-icon"
+                >
+                  <svg
+                    class="emotion-19"
+                    data-testid="icon"
+                    data-wdio=""
+                    height="24px"
+                    id=""
+                    viewBox="0 0 1024 1024"
+                    width="24px"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="message"
+                  data-testid="message"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -810,11 +874,11 @@ exports[`WorkflowRole should render without error 1`] = `
         data-testid="navbar-item"
       >
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-21 emotion-22"
           data-testid="header-menu"
         >
           <svg
-            class="emotion-14"
+            class="emotion-23"
             data-testid="icon"
             data-wdio=""
             height="25px"
@@ -830,13 +894,13 @@ exports[`WorkflowRole should render without error 1`] = `
             />
           </svg>
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-24 emotion-25"
           />
           <div
-            class="emotion-17 emotion-18"
+            class="emotion-26 emotion-27"
           >
             <svg
-              class="emotion-14"
+              class="emotion-23"
               data-testid="icon"
               data-wdio=""
               height="25px"
@@ -863,32 +927,32 @@ exports[`WorkflowRole should render without error 1`] = `
     </div>
   </div>
   <div
-    class="emotion-20 emotion-21"
+    class="emotion-29 emotion-30"
   >
     <div
-      class="emotion-22 emotion-23"
+      class="emotion-31 emotion-32"
     >
       <div
-        class="emotion-24 emotion-25"
+        class="emotion-33 emotion-34"
       >
         <div
-          class="emotion-26 emotion-27"
+          class="emotion-35 emotion-36"
         >
           <div>
             <div
-              class="emotion-28 emotion-29"
+              class="emotion-37 emotion-38"
             >
               <div
-                class="emotion-30 emotion-31"
+                class="emotion-39 emotion-40"
               >
                 Action Required
               </div>
               <div
-                class="emotion-32 denali-tab-group"
+                class="emotion-41 denali-tab-group"
                 data-testid="tabgroup"
               >
                 <div
-                  class="emotion-33 denali-tab"
+                  class="emotion-42 denali-tab"
                   data-active="false"
                 >
                   <span
@@ -901,7 +965,7 @@ exports[`WorkflowRole should render without error 1`] = `
                   </span>
                 </div>
                 <div
-                  class="emotion-33 denali-tab"
+                  class="emotion-42 denali-tab"
                   data-active="false"
                 >
                   <span
@@ -916,15 +980,15 @@ exports[`WorkflowRole should render without error 1`] = `
               </div>
             </div>
             <div
-              class="emotion-35 emotion-36"
+              class="emotion-44 emotion-45"
             >
               <label
-                class="emotion-37 denali-input-label emotion-38 emotion-39"
+                class="emotion-46 denali-input-label emotion-47 emotion-48"
               >
                 Provide Justification for All Reviews
               </label>
               <div
-                class="emotion-40 denali-input animated emotion-41 emotion-42"
+                class="emotion-49 denali-input animated emotion-50 emotion-51"
                 data-testid="input-wrapper"
               >
                 <input
@@ -942,18 +1006,18 @@ exports[`WorkflowRole should render without error 1`] = `
               </div>
             </div>
             <div
-              class="emotion-43 emotion-44"
+              class="emotion-52 emotion-53"
             >
               <div
-                class="emotion-35 emotion-36"
+                class="emotion-44 emotion-45"
               >
                 No roles to review.
               </div>
               <div
-                class="emotion-35 emotion-36"
+                class="emotion-44 emotion-45"
               >
                 <div
-                  class="emotion-49 emotion-50"
+                  class="emotion-58 emotion-59"
                 >
                   Displaying page
                    
@@ -971,11 +1035,11 @@ exports[`WorkflowRole should render without error 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-51 emotion-52"
+          class="emotion-60 emotion-61"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-53"
+            class="emotion-62"
             data-testid="icon"
             data-wdio=""
             height="1em"
diff --git a/ui/src/__tests__/spec/tests/search.spec.js b/ui/src/__tests__/spec/tests/search.spec.js
new file mode 100644
index 00000000000..b9e80ac1dfd
--- /dev/null
+++ b/ui/src/__tests__/spec/tests/search.spec.js
@@ -0,0 +1,184 @@
+/*
+ * Copyright The Athenz Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const SERVICE_NAME = 'test-service-search';
+const SERVICE_NAME1 = `${SERVICE_NAME}1`;
+const SERVICE_NAME2 = `${SERVICE_NAME}2`;
+
+describe('Search functionality tests', () => {
+    // BEFORE ALL TESTS - create 2 services
+    before(async () => {
+        // open browser on services page
+        await browser.newUser();
+        await browser.url(`/domain/athenz.dev.functional-test/service`);
+
+        // add first service
+        await $('button*=Add Service').click();
+        await $('[name="service-name"]').addValue(SERVICE_NAME1);
+        await $('button*=Submit').click();
+
+        // add second service
+        await $('button*=Add Service').click();
+        await $('[name="service-name"]').addValue(SERVICE_NAME2);
+        await $('button*=Submit').click();
+    });
+
+    it('Search for a substring of a Service name - the result must display both matching services', async () => {
+        // open browser
+        await browser.newUser();
+        await browser.url(`/`);
+
+        // search for domain
+        const domainName = 'athenz.dev.functional-test';
+
+        // select Services in search type dropdown
+        await $('[name="search-type"]').click();
+        await $('div*=Service').click();
+
+        // input service name
+        const searchInput = await $('[name="search-text"]');
+        await searchInput.clearValue();
+        await searchInput.addValue(SERVICE_NAME);
+        expect(await searchInput.getValue()).toBe(SERVICE_NAME); // to make sure we don't press Enter before search value is in input
+
+        // press Enter to trigger search
+        await browser.keys('Enter');
+
+        // Wait until the URL has changed
+        searchResultsUrl = `search/service/${SERVICE_NAME}`;
+        await browser.waitUntil(
+            async () => {
+                const newUrl = await browser.getUrl();
+                return newUrl.includes(searchResultsUrl); // Return true if the URL has changed
+            },
+            {
+                timeout: 5000, // Maximum time to wait
+                timeoutMsg: `URL did not change to "${searchResultsUrl}" within the expected time`,
+            }
+        );
+
+        // find the first service link in search results
+        const link1 = await $(
+            `div[data-wdio="search-result"] a[href*="/service/${SERVICE_NAME1}/instance/dynamic"]`
+        );
+        const href1 = await link1.getAttribute('href');
+        // Validate that the href contains the expected URL
+        expect(href1).toContain(`service/${SERVICE_NAME1}/instance/dynamic`);
+
+        // find the second service link in search results
+        const link2 = await $(
+            `div[data-wdio="search-result"] a[href*="/service/${SERVICE_NAME2}/instance/dynamic"]`
+        );
+        const href2 = await link2.getAttribute('href');
+        // Validate that the href contains the expected URL
+        expect(href2).toContain(`service/${SERVICE_NAME2}/instance/dynamic`);
+    });
+
+    it('Search for Domain and then repeated search - search for Service from results screen', async () => {
+        // open browser
+        await browser.newUser();
+        await browser.url(`/`);
+
+        // search for domain
+        const domainName = 'athenz.dev.functional-test';
+        await $('[name="search-text"]').addValue(domainName);
+        expect(await $('[name="search-text"]').getValue()).toBe(domainName); // to make sure we don't press Enter before search value is in input
+        // press Enter to trigger search
+        await browser.keys('Enter');
+
+        // Wait until the URL has changed
+        let searchResultsUrl = `search/domain/${domainName}`;
+        await browser.waitUntil(
+            async () => {
+                const newUrl = await browser.getUrl();
+                return newUrl.includes(searchResultsUrl); // Return true if the URL has changed
+            },
+            {
+                timeout: 5000, // Maximum time to wait
+                timeoutMsg: `URL did not change to "${searchResultsUrl}" within the expected time`,
+            }
+        );
+
+        const link = await $('div[data-wdio="search-result"] a');
+        const href = await link.getAttribute('href');
+        // Validate that the href contains the expected URL
+        expect(href).toContain(`domain/${domainName}/role`);
+
+        // NOW SEARCH FOR SERVICE
+        // select Services in search type dropdown
+        await $('[name="search-type"]').click();
+        await $('div*=Service').click();
+
+        // input service name
+        const searchInput = await $('[name="search-text"]');
+        await searchInput.clearValue();
+        await searchInput.addValue(SERVICE_NAME);
+        expect(await searchInput.getValue()).toBe(SERVICE_NAME); // to make sure we don't press Enter before search value is in input
+
+        // press Enter to trigger search
+        await browser.keys('Enter');
+
+        // Wait until the URL has changed
+        searchResultsUrl = `search/service/${SERVICE_NAME}`;
+        await browser.waitUntil(
+            async () => {
+                const newUrl = await browser.getUrl();
+                return newUrl.includes(searchResultsUrl); // Return true if the URL has changed
+            },
+            {
+                timeout: 5000, // Maximum time to wait
+                timeoutMsg: `URL did not change to "${searchResultsUrl}" within the expected time`,
+            }
+        );
+
+        // find the first service link in search results
+        const link1 = await $(
+            `div[data-wdio="search-result"] a[href*="/service/${SERVICE_NAME1}/instance/dynamic"]`
+        );
+        const href1 = await link1.getAttribute('href');
+        // Validate that the href contains the expected URL
+        expect(href1).toContain(`service/${SERVICE_NAME1}/instance/dynamic`);
+
+        // find the second service link in search results
+        const link2 = await $(
+            `div[data-wdio="search-result"] a[href*="/service/${SERVICE_NAME2}/instance/dynamic"]`
+        );
+        const href2 = await link2.getAttribute('href');
+        // Validate that the href contains the expected URL
+        expect(href2).toContain(`service/${SERVICE_NAME2}/instance/dynamic`);
+    });
+
+    // AFTER ALL TESTS - delete both services
+    after(async () => {
+        // open browser on services page
+        await browser.newUser();
+        await browser.url(`/domain/athenz.dev.functional-test/service`);
+
+        // delete both services used in the test
+        await $(
+            `.//*[local-name()="svg" and @id="delete-service-${SERVICE_NAME1}"]`
+        ).click();
+        await $('button*=Delete').click();
+
+        // close successful deletion notification
+        await $('div[data-wdio="alert-close"]').click();
+
+        await $(
+            `.//*[local-name()="svg" and @id="delete-service-${SERVICE_NAME2}"]`
+        ).click();
+        await $('button*=Delete').click();
+    });
+});
diff --git a/ui/src/api.js b/ui/src/api.js
index fa9377a0435..810fa4fd941 100644
--- a/ui/src/api.js
+++ b/ui/src/api.js
@@ -811,6 +811,25 @@ const Api = (req) => {
             });
         },
 
+        searchServices(serviceName) {
+            return new Promise((resolve, reject) => {
+                fetchr
+                    .read('search-services')
+                    .params({ serviceName, substringMatch: true })
+                    .end((err, data) => {
+                        if (err) {
+                            reject(err);
+                        } else {
+                            if (data) {
+                                resolve(data);
+                            } else {
+                                resolve([]);
+                            }
+                        }
+                    });
+            });
+        },
+
         getServices(domainName, publickeys, hosts) {
             return new Promise((resolve, reject) => {
                 fetchr
diff --git a/ui/src/components/search/Search.js b/ui/src/components/search/Search.js
index e4bf04c8930..40d92742285 100644
--- a/ui/src/components/search/Search.js
+++ b/ui/src/components/search/Search.js
@@ -16,50 +16,106 @@
 import React from 'react';
 import SearchInput from '../denali/SearchInput';
 import { withRouter } from 'next/router';
+import InputDropdown from '../denali/InputDropdown';
+import styled from '@emotion/styled';
+
+const SearchDiv = styled.div`
+    display: flex;
+    width: 100%;
+`;
+
+const DropDownDiv = styled.div`
+    background: #ffffff;
+    width: 35%;
+`;
+
+const SearchTextDiv = styled.div`
+    background: #ffffff;
+    width: 65%;
+    margin-left: 5px;
+`;
 
 class Search extends React.Component {
     constructor(props) {
         super(props);
+        this.optionChanged = this.optionChanged.bind(this);
+        this.searchTextChanged = this.searchTextChanged.bind(this);
+        this.handleKeyPress = this.handleKeyPress.bind(this);
         this.state = {
-            selected: this.props.option || 'domain',
-            searchText: this.props.searchData ? this.props.searchData : '',
+            placeholder: 'Search',
+            options: [
+                { value: 'domain', name: 'Domain' },
+                { value: 'service', name: 'Service' },
+            ],
+            selected: this.props.router.query?.type || 'domain',
+            searchText: this.props.searchData || '',
         };
     }
 
+    optionChanged(chosen) {
+        let placeholder = 'Search';
+        if (chosen.value === 'headlessUser' || chosen.value === 'unixGroup') {
+            placeholder = 'Lookup';
+        }
+        this.setState({
+            selected: chosen.value,
+            placeholder: placeholder,
+        });
+    }
+
+    searchTextChanged(evt) {
+        evt.preventDefault();
+        this.setState({ searchText: evt.target.value });
+    }
+
+    handleKeyPress(evt) {
+        // on Enter - go to search page passing domain/service and search term
+        if (evt.key === 'Enter') {
+            if (this.state.searchText.length === 0) {
+                this.setState({ error: true });
+            } else {
+                this.props.router.push(
+                    `/search/${
+                        this.state.selected
+                    }/${this.state.searchText.trim()}`,
+                    `/search/${
+                        this.state.selected
+                    }/${this.state.searchText.trim()}`
+                );
+            }
+        }
+    }
+
     render() {
         return (
-            <SearchInput
-                dark={!!this.props.isHeader}
-                name='search'
-                fluid={true}
-                value={this.state.searchText}
-                placeholder='Enter domain name'
-                error={this.state.error}
-                onChange={(event) =>
-                    this.setState({
-                        searchText: event.target.value,
-                        error: false,
-                    })
-                }
-                onKeyPress={(event) => {
-                    if (event.key === 'Enter') {
-                        if (this.state.searchText.length === 0) {
+            <SearchDiv>
+                <DropDownDiv>
+                    <InputDropdown
+                        name='search-type'
+                        defaultSelectedValue={this.state.selected}
+                        onChange={this.optionChanged}
+                        options={this.state.options}
+                        noclear
+                        fluid
+                    />
+                </DropDownDiv>
+                <SearchTextDiv>
+                    <SearchInput
+                        name='search-text'
+                        value={this.state.searchText}
+                        onChange={(event) =>
                             this.setState({
-                                error: true,
-                            });
-                        } else {
-                            this.props.router.push(
-                                `/search/${
-                                    this.state.selected
-                                }/${this.state.searchText.trim()}`,
-                                `/search/${
-                                    this.state.selected
-                                }/${this.state.searchText.trim()}`
-                            );
+                                searchText: event.target.value,
+                                error: false,
+                            })
                         }
-                    }
-                }}
-            />
+                        onKeyPress={this.handleKeyPress}
+                        fluid
+                        error={this.state.error}
+                        placeholder={this.state.placeholder}
+                    />
+                </SearchTextDiv>
+            </SearchDiv>
         );
     }
 }
diff --git a/ui/src/config/zms.json b/ui/src/config/zms.json
index a892ebe11ad..1dba066077d 100644
--- a/ui/src/config/zms.json
+++ b/ui/src/config/zms.json
@@ -1638,6 +1638,12 @@
                         "optional": false,
                         "comment": "list of services",
                         "items": "ServiceIdentity"
+                    },
+                    {
+                        "name": "serviceMatchCount",
+                        "type": "Int64",
+                        "optional": false,
+                        "comment": "if set, the value indicates the total number of services in the system that match the query criteria but not returned due to limit constraints; thus, the result in the list is a partial set."
                     }
                 ],
                 "closed": false
@@ -10201,6 +10207,54 @@
                 }
             }
         },
+        {
+            "type": "ServiceIdentities",
+            "method": "GET",
+            "path": "/service/{serviceName}",
+            "comment": "Search for all services across all domains that match the specified service name. The service name can be a substring match based on the option substringMatch query parameter. The domainFilter query parameter can be used to limit the domain names.",
+            "inputs": [
+                {
+                    "name": "serviceName",
+                    "type": "SimpleName",
+                    "comment": "name of the service (could be substring)",
+                    "pathParam": true,
+                    "optional": false,
+                    "flag": false
+                },
+                {
+                    "name": "substringMatch",
+                    "type": "Bool",
+                    "comment": "substring match for service name",
+                    "pathParam": false,
+                    "queryParam": "substringMatch",
+                    "optional": false,
+                    "flag": false,
+                    "default": false
+                },
+                {
+                    "name": "domainFilter",
+                    "type": "DomainName",
+                    "comment": "domain filter match for service name",
+                    "pathParam": false,
+                    "queryParam": "domainFilter",
+                    "optional": true,
+                    "flag": false
+                }
+            ],
+            "auth": {
+                "authenticate": true
+            },
+            "expected": "OK",
+            "exceptions": {
+                "TOO_MANY_REQUESTS": {
+                    "type": "ResourceError"
+                },
+                "BAD_REQUEST": {
+                    "type": "ResourceError"
+                }
+            },
+            "name": "searchServiceIdentities"
+        },
         {
             "type": "Tenancy",
             "method": "PUT",
diff --git a/ui/src/pages/search/[type]/[searchterm].js b/ui/src/pages/search/[type]/[searchterm].js
index b0a2b96ab8c..20c08118c33 100644
--- a/ui/src/pages/search/[type]/[searchterm].js
+++ b/ui/src/pages/search/[type]/[searchterm].js
@@ -36,6 +36,7 @@ import { connect } from 'react-redux';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import RequestUtils from '../../../components/utils/RequestUtils';
+import { searchServices } from '../../../redux/thunks/services';
 
 const AppContainerDiv = styled.div`
     align-items: stretch;
@@ -111,16 +112,32 @@ export async function getServerSideProps(context) {
     let error = null;
     return {
         props: {
-            domain: context.query.searchterm,
+            searchterm: context.query.searchterm,
             domainResults: [],
             type: type,
             error,
             reload,
             nonce: context.req && context.req.headers.rid,
+            services: [],
         },
     };
 }
 
+function extractDomainAndService(domainService) {
+    const lastDotIndex = domainService.lastIndexOf('.'); // Find the last occurrence of '.'
+
+    if (lastDotIndex === -1) {
+        // If no '.' is found, return nothing
+        return ['', ''];
+    }
+
+    // Split the string into two parts: before and after the last '.'
+    const domain = domainService.substring(0, lastDotIndex);
+    const service = domainService.substring(lastDotIndex + 1);
+
+    return [domain, service];
+}
+
 class PageSearchDetails extends React.Component {
     constructor(props) {
         super(props);
@@ -131,19 +148,98 @@ class PageSearchDetails extends React.Component {
         this.state = {
             domainResults: props.domainResults,
             type: props.type,
-            domain: props.domain,
+            searchterm: props.searchterm,
+            services: [],
+            error: props.error,
         };
-        this.makeDomainResults = this.makeDomainResults.bind(this);
+        this.findDomains = this.findDomains.bind(this);
+        this.setupServicesSearchResults =
+            this.setupServicesSearchResults.bind(this);
+        this.performSearch = this.performSearch.bind(this);
+        this.showError = this.showError.bind(this);
     }
 
     componentDidMount() {
-        const { getDomainList, getAllDomainsList } = this.props;
-        Promise.all([getDomainList(), getAllDomainsList()]).catch((err) => {
-            this.showError(RequestUtils.fetcherErrorCheckHelper(err));
-        });
+        // on first load of the component
+        this.performSearch();
     }
 
-    makeDomainResults(searchTerm) {
+    showError(errorMessage) {
+        this.setState({ error: errorMessage });
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        // if properties for this component change - e.g. on a new search - update state
+        if (
+            this.props.router.query.type !== prevProps.router.query.type ||
+            this.props.router.query.searchterm !==
+                prevProps.router.query.searchterm
+        ) {
+            this.setState(
+                {
+                    type: this.props.router.query.type,
+                    searchterm: this.props.router.query.searchterm,
+                },
+                this.performSearch
+            );
+        }
+    }
+
+    performSearch() {
+        // clear old search results before making new one
+        // since domain search results are not stored in state
+        // clear only services
+        this.setState(
+            {
+                services: [],
+            },
+            () => {
+                // perform search in callback
+                switch (this.state.type) {
+                    case 'domain':
+                        {
+                            if (!this.state.allDomainList) {
+                                // searching for domains is done client-side
+                                // so fetching domains can be done only once
+                                Promise.all([
+                                    this.props.getDomainList(),
+                                    this.props.getAllDomainsList(),
+                                ]).catch((err) => {
+                                    this.showError(
+                                        RequestUtils.fetcherErrorCheckHelper(
+                                            err
+                                        )
+                                    );
+                                });
+                            }
+                        }
+                        break;
+                    case 'service':
+                        {
+                            // searching for services is done server-side
+                            // so each time search must be done anew
+                            this.props
+                                .searchServices(this.state.searchterm)
+                                .then((data) => {
+                                    this.setState({
+                                        services: data ? data : [],
+                                    });
+                                })
+                                .catch((err) => {
+                                    this.showError(
+                                        RequestUtils.fetcherErrorCheckHelper(
+                                            err
+                                        )
+                                    );
+                                });
+                        }
+                        break;
+                }
+            }
+        );
+    }
+
+    findDomains(searchTerm) {
         const { allDomainList, userDomains } = this.props;
         let domainResults = [];
         if (allDomainList.length > 0 || userDomains.length > 0) {
@@ -174,15 +270,44 @@ class PageSearchDetails extends React.Component {
         return domainResults;
     }
 
-    componentDidUpdate = (prevProps) => {
-        if (this.props.router.query.type !== prevProps.router.query.type) {
-            this.setState({
-                type: this.props.router.query.type,
-            });
-        }
-    };
+    setupServicesSearchResults() {
+        // setup services for display
+        let items = [];
+        this.state.services.forEach(function (domainService) {
+            const [domain, serviceName] =
+                extractDomainAndService(domainService);
+            items.push(
+                <ResultsDiv key={domainService} data-wdio={'search-result'}>
+                    <Link
+                        href={`${PageUtils.servicePage(
+                            domain
+                        )}/${serviceName}/instance/dynamic`}
+                        passHref
+                        legacyBehavior
+                    >
+                        <StyledAnchor>{domainService}</StyledAnchor>
+                    </Link>
+                </ResultsDiv>
+            );
+        });
+        return (
+            <SearchContainerDiv>
+                <SearchContentDiv>
+                    <PageHeaderDiv>
+                        <TitleDiv>Search Results</TitleDiv>
+                        <ResultsCountDiv>
+                            {items.length} Results
+                        </ResultsCountDiv>
+                        <LineSeparator />
+                    </PageHeaderDiv>
+                    {items}
+                </SearchContentDiv>
+            </SearchContainerDiv>
+        );
+    }
 
-    displayDomainResults(domainResults) {
+    setupDomainSearchResults(domainResults) {
+        // setup domains for display
         let items = [];
         domainResults.forEach(function (currentDomain) {
             let domain = currentDomain.name;
@@ -204,7 +329,7 @@ class PageSearchDetails extends React.Component {
                 );
             }
             items.push(
-                <ResultsDiv key={domain}>
+                <ResultsDiv key={domain} data-wdio={'search-result'}>
                     <DomainLogoDiv>{icon}</DomainLogoDiv>
                     <Link
                         href={PageUtils.rolePage(domain)}
@@ -238,26 +363,33 @@ class PageSearchDetails extends React.Component {
             window.location.reload();
             return <div />;
         }
-        if (this.props.error) {
-            return <Error err={this.props.error} />;
+        if (this.state.error) {
+            return <Error err={this.state.error} />;
         }
-        let domainResult = this.makeDomainResults(
-            this.props.router.query.searchterm
-        );
-        let displayDomainResults = '';
+
+        let resultsToDisplay = '';
+        // prepare results for display depending on search type
         if (this.state.type === 'domain') {
-            displayDomainResults = this.displayDomainResults(domainResult);
+            let domainResult = this.findDomains(
+                this.props.router.query.searchterm
+            );
+            resultsToDisplay = this.setupDomainSearchResults(domainResult);
+        } else if (this.state.type === 'service') {
+            resultsToDisplay = this.setupServicesSearchResults();
         }
         return (
             <CacheProvider value={this.cache}>
                 <div data-testid='search'>
                     <Head>
-                        <title>{this.state.domain} - Athenz</title>
+                        <title>{this.state.searchterm} - Athenz</title>
                     </Head>
-                    <Header showSearch={true} searchData={this.props.domain} />
+                    <Header
+                        showSearch={true}
+                        searchData={this.props.searchterm}
+                    />
                     <MainContentDiv>
                         <AppContainerDiv>
-                            {displayDomainResults}
+                            {resultsToDisplay}
                             <UserDomains />
                         </AppContainerDiv>
                     </MainContentDiv>
@@ -278,6 +410,7 @@ const mapStateToProps = (state, props) => {
 const mapDispatchToProps = (dispatch) => ({
     getAllDomainsList: () => dispatch(getAllDomainsList()),
     getDomainList: () => dispatch(getUserDomainsList()),
+    searchServices: (subString) => dispatch(searchServices(subString)),
 });
 
 export default connect(
diff --git a/ui/src/redux/thunks/services.js b/ui/src/redux/thunks/services.js
index 46d336868a9..fd89b715f86 100644
--- a/ui/src/redux/thunks/services.js
+++ b/ui/src/redux/thunks/services.js
@@ -18,7 +18,6 @@ import API from '../../api';
 
 import {
     addKeyToStore,
-    addServiceHostToStore,
     addServiceToStore,
     allowProviderTemplateToStore,
     deleteKeyFromStore,
@@ -34,7 +33,6 @@ import { storeServices } from '../actions/domains';
 import {
     buildErrorForDoesntExistCase,
     buildErrorForDuplicateCase,
-    getCurrentTime,
     getFullName,
     isExpired,
     listToMap,
@@ -45,19 +43,8 @@ import {
     thunkSelectService,
     thunkSelectServices,
 } from '../selectors/services';
-import { roleDelimiter, serviceDelimiter } from '../config';
-import {
-    loadingFailed,
-    loadingInProcess,
-    loadingSuccess,
-} from '../actions/loading';
-import { thunkSelectRoles } from '../selectors/roles';
-import { deleteRoleFromStore } from '../actions/roles';
-import { getRoles } from './roles';
-import {
-    SERVICE_TYPE_DYNAMIC,
-    SERVICE_TYPE_STATIC,
-} from '../../components/constants/constants';
+import { serviceDelimiter } from '../config';
+import { SERVICE_TYPE_DYNAMIC } from '../../components/constants/constants';
 import { getFeatureFlag } from './domains';
 
 export const addService =
@@ -182,6 +169,18 @@ export const addKey =
         }
     };
 
+export const searchServices = (subString) => async () => {
+    if (!subString) {
+        return 'you must provide part of service name to search for';
+    } else {
+        try {
+            return API().searchServices(subString);
+        } catch (err) {
+            return Promise.reject(err);
+        }
+    }
+};
+
 export const getServices = (domainName) => async (dispatch, getState) => {
     if (getState().services.expiry) {
         if (getState().services.domainName !== domainName) {
diff --git a/ui/src/server/handlers/api.js b/ui/src/server/handlers/api.js
index 06f2f7b69c1..d8a5519cf1a 100644
--- a/ui/src/server/handlers/api.js
+++ b/ui/src/server/handlers/api.js
@@ -1798,6 +1798,32 @@ Fetchr.registerService({
     },
 });
 
+Fetchr.registerService({
+    name: 'search-services',
+    read(req, resource, params, config, callback) {
+        req.clients.zms.searchServiceIdentities(params, function (err, data) {
+            if (!err && Array.isArray(data.list)) {
+                data.list.sort((a, b) => {
+                    debug(a.name, b.name);
+                    return a.name > b.name ? 1 : -1;
+                });
+                const services = data?.list.map((service) => service.name);
+                return callback(null, services);
+            }
+            if (err) {
+                debug(
+                    `principal: ${req.session.shortId} rid: ${
+                        req.headers.rid
+                    } Error from ZMS while calling searchServiceIdentities API: ${JSON.stringify(
+                        errorHandler.fetcherError(err)
+                    )}`
+                );
+            }
+            return callback(errorHandler.fetcherError(err));
+        });
+    },
+});
+
 Fetchr.registerService({
     name: 'services',
     read(req, resource, params, config, callback) {