diff --git a/client/galaxy/scripts/components/PluginList.vue b/client/galaxy/scripts/components/PluginList.vue
index 2909e7e9439..2f70becf0c7 100644
--- a/client/galaxy/scripts/components/PluginList.vue
+++ b/client/galaxy/scripts/components/PluginList.vue
@@ -2,14 +2,16 @@
     <div class="ui-thumbnails">
         <div v-if="error" class="alert alert-danger">{{ error }}</div>
         <div v-else>
-            <input
-                class="search-query parent-width"
-                name="query"
-                placeholder="search visualizations"
-                autocomplete="off"
-                type="text"
-                v-model="search"
-            />
+            <div class="search-input">
+                <input
+                    class="search-query parent-width"
+                    name="query"
+                    placeholder="search visualizations"
+                    autocomplete="off"
+                    type="text"
+                    v-model="search"
+                />
+            </div>
             <div v-for="plugin in plugins" :key="plugin.name">
                 <table v-if="match(plugin)">
                     <tr class="ui-thumbnails-item" @click="select(plugin)">
diff --git a/client/galaxy/scripts/mvc/collection/list-of-pairs-collection-creator.js b/client/galaxy/scripts/mvc/collection/list-of-pairs-collection-creator.js
index 15ec4654c2b..52d84691d82 100644
--- a/client/galaxy/scripts/mvc/collection/list-of-pairs-collection-creator.js
+++ b/client/galaxy/scripts/mvc/collection/list-of-pairs-collection-creator.js
@@ -1568,7 +1568,7 @@ var PairedCollectionCreator = Backbone.View.extend(baseMVC.LoggableMixin)
                     "</span>",
                     '<span class="title-info unpaired-info"></span>',
                     "</div>",
-                    '<div class="unpaired-filter forward-unpaired-filter float-left">',
+                    '<div class="unpaired-filter forward-unpaired-filter float-left search-input">',
                     '<input class="search-query" placeholder="',
                     _l("Filter this list"),
                     '" />',
@@ -1596,7 +1596,7 @@ var PairedCollectionCreator = Backbone.View.extend(baseMVC.LoggableMixin)
                     "</span>",
                     '<span class="title-info unpaired-info"></span>',
                     "</div>",
-                    '<div class="unpaired-filter reverse-unpaired-filter float-left">',
+                    '<div class="unpaired-filter reverse-unpaired-filter float-left search-input">',
                     '<input class="search-query" placeholder="',
                     _l("Filter this list"),
                     '" />',
diff --git a/client/galaxy/scripts/mvc/tool/tools.js b/client/galaxy/scripts/mvc/tool/tools.js
index d1831083fb9..ddda58bc452 100644
--- a/client/galaxy/scripts/mvc/tool/tools.js
+++ b/client/galaxy/scripts/mvc/tool/tools.js
@@ -347,9 +347,7 @@ var ToolSearch = Backbone.Model.extend({
     SEARCH_RESERVED_TERMS_FAVORITES: ["#favs", "#favorites", "#favourites"],
 
     defaults: {
-        search_hint_string: "search tools",
         min_chars_for_search: 3,
-        clear_btn_url: "",
         visible: true,
         query: "",
         results: null,
@@ -635,7 +633,7 @@ var ToolSectionView = BaseView.extend({
 var ToolSearchView = Backbone.View.extend({
     tagName: "div",
     id: "tool-search",
-    className: "bar",
+    className: "search-input",
 
     events: {
         click: "focus_and_select",
@@ -649,7 +647,6 @@ var ToolSearchView = Backbone.View.extend({
         if (!this.model.is_visible()) {
             this.$el.hide();
         }
-
         this.$el.find("[title]").tooltip();
         return this;
     },
@@ -774,10 +771,9 @@ var templates = {
     // the search bar at the top of the tool panel
     tool_search: _.template(
         `<input id="tool-search-query" class="search-query parent-width" name="query"
-                placeholder="<%- search_hint_string %>" autocomplete="off" type="text" />
-         <a id="search-clear-btn" title="clear search (esc)"> </a>
-         <span id="search-spinner" class="search-spinner fa fa-spinner fa-spin"></span>
-    `
+                placeholder="search tools" autocomplete="off" type="text" />
+         <span id="search-clear-btn" class="search-clear fa fa-times-circle" title="clear search (esc)"/>
+         <span id="search-spinner" class="search-loading fa fa-spinner fa-spin"/>`
     ),
 
     // the category level container in the tool panel (e.g. 'Get Data', 'Text Manipulation')
diff --git a/client/galaxy/scripts/mvc/workflow/workflow-view.js b/client/galaxy/scripts/mvc/workflow/workflow-view.js
index eb5449e4268..f4a29b16cf1 100644
--- a/client/galaxy/scripts/mvc/workflow/workflow-view.js
+++ b/client/galaxy/scripts/mvc/workflow/workflow-view.js
@@ -47,6 +47,7 @@ function reset_tool_search(initValue) {
 
         // Reset search input.
         tool_menu_frame.find("#search-spinner").hide();
+        tool_menu_frame.find("#search-clear-btn").show();
         if (initValue) {
             var search_input = tool_menu_frame.find("#tool-search-query");
             search_input.val("search tools");
@@ -155,6 +156,7 @@ export default Backbone.View.extend({
                     }
                     // Start a new ajax-request in X ms
                     $("#search-spinner").show();
+                    $("#search-clear-btn").hide();
                     this.timer = window.setTimeout(() => {
                         $.get(
                             self.urls.tool_search,
@@ -209,6 +211,7 @@ export default Backbone.View.extend({
                                     $("#search-no-results").show();
                                 }
                                 $("#search-spinner").hide();
+                                $("#search-clear-btn").show();
                             },
                             "json"
                         );
diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index 74b47b27bcb..2e2cb4c6ede 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -735,54 +735,6 @@ button {
     }
 }
 
-.search-query {
-    display: inline-block;
-    padding: 4px;
-    font-size: $font-size-base;
-    line-height: $line-height-base;
-    color: $text-color;
-    border: 1px solid $border-default-color;
-    padding-left: 14px !important;
-    padding-right: 14px;
-    margin-bottom: 0;
-    @include border-radius(14px);
-    background: $brand-white;
-}
-.search-query:focus {
-    border-color: darken(rgba(82, 168, 236, 0.8), 15%);
-    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-    @include box-shadow($shadow);
-    outline: 0;
-    outline: thin dotted \9; /* IE6-8 */
-}
-
-.search-spinner {
-    position: absolute;
-    display: none;
-    right: 6px;
-    top: 5px;
-    font-size: 1.4em;
-    color: #888;
-}
-
-#tool-search {
-    position: relative;
-    @extend .mb-2;
-    #search-clear-btn {
-        position: absolute;
-        right: 6px;
-        top: 6px;
-        display: block;
-        font-size: 1.4em !important;
-        text-decoration: none;
-        color: #888;
-        @extend .fa-icon;
-        &:before {
-            content: "\f057";
-        }
-    }
-}
-
 // Messages
 
 .errormessagelarge,
diff --git a/client/galaxy/style/scss/history.scss b/client/galaxy/style/scss/history.scss
index 8bea041c41e..4e4686de8d8 100644
--- a/client/galaxy/style/scss/history.scss
+++ b/client/galaxy/style/scss/history.scss
@@ -470,21 +470,6 @@
         .btn {
             @extend .btn-sm;
         }
-        .search-control {
-            display: inline-block;
-            width: 40%;
-
-            .search-clear,
-            .search-loading {
-                margin-top: -22px;
-            }
-        }
-        input.search-query {
-            font-size: 90%;
-            height: 21px;
-            line-height: normal;
-            padding: 2px 2px 1px 2px;
-        }
         .open-more-options {
             padding: 2px 6px 2px 6px;
             font-size: 100%;
diff --git a/client/galaxy/style/scss/theme/blue.scss b/client/galaxy/style/scss/theme/blue.scss
index de520a37669..a6d2e196b6d 100644
--- a/client/galaxy/style/scss/theme/blue.scss
+++ b/client/galaxy/style/scss/theme/blue.scss
@@ -114,7 +114,9 @@ $layout-border: none;
 // Borders
 $border-radius-base: 0.1875rem;
 $border-radius-large: 0.3125rem;
+$border-radius-extralarge: 1rem;
 $border-default-color: $gray-400;
+$border-default: 1px solid $border-default-color;
 
 // Buttons
 $btn-default-color: $text-color;
diff --git a/client/galaxy/style/scss/ui/search-input.scss b/client/galaxy/style/scss/ui/search-input.scss
index 71b0d9290ca..1b35779a931 100644
--- a/client/galaxy/style/scss/ui/search-input.scss
+++ b/client/galaxy/style/scss/ui/search-input.scss
@@ -1,26 +1,37 @@
-// search bar, see: scripts/jq-plugins/ui/search-input.js
 .search-input {
-    .search-query {
-        width: 100%;
-        padding-right: 24px;
-    }
+    @extend .mb-2;
     .search-clear,
     .search-loading {
-        // it places the icons on the right of the bar (and puts the lotion on its skin)
+        @extend .mr-2;
         position: relative;
         display: inline-block;
-
         float: right;
         margin-top: -25px;
-        margin-right: 4px;
-
         font-size: 1.4em;
-        line-height: 23px;
-        color: grey;
+        color: $gray-500;
     }
-
     .search-clear:hover {
-        color: $link-color;
+        color: $brand-info;
         cursor: pointer;
     }
+    .search-loading {
+        display: none;
+    }
+    .search-query {
+        @extend .px-3;
+        @extend .py-1;
+        width: 100%;
+        display: inline-block;
+        font-size: $font-size-base;
+        line-height: $line-height-base;
+        color: $text-color;
+        border: $border-default;
+        @include border-radius($border-radius-extralarge);
+        max-width: auto;
+        background: $brand-white;
+    }
+    .search-query:focus {
+        border-color: $brand-info;
+        outline: 0;
+    }
 }
diff --git a/templates/webapps/galaxy/workflow/editor.mako b/templates/webapps/galaxy/workflow/editor.mako
index ad361a31d93..187f634ca99 100644
--- a/templates/webapps/galaxy/workflow/editor.mako
+++ b/templates/webapps/galaxy/workflow/editor.mako
@@ -148,10 +148,10 @@
     </div>
 
     <div class="unified-panel-controls">
-        <div id="tool-search" class="bar">
+        <div id="tool-search" class="search-input">
             <input id="tool-search-query" class="search-query parent-width" name="query" placeholder="search tools" autocomplete="off" type="text">
-             <a id="search-clear-btn" title="" data-original-title="clear search (esc)"> </a>
-             <span id="search-spinner" class="search-spinner fa fa-spinner fa-spin"></span>
+            <span id="search-clear-btn" class="search-clear fa fa-times-circle" title="" data-original-title="clear search (esc)" />
+            <span id="search-spinner" class="search-loading fa fa-spinner fa-spin" />
         </div>
     </div>