diff --git a/client/package.json b/client/package.json
index 8f5b4ad7b4b..bf6b816241c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -81,6 +81,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.3.1",
     "vue-rx": "^6.2.0",
+    "vue-scrollto": "^2.20.0",
     "vuedraggable": "2.24.1",
     "vueisotope": "^3.1.2",
     "vuex": "^3.4.0",
diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
new file mode 100644
index 00000000000..56531098ef6
--- /dev/null
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -0,0 +1,36 @@
+<template>
+    <b-button v-if="wait" variant="info" disabled>
+        <font-awesome-icon icon="spinner" class="mr-2" spin />Please wait...
+    </b-button>
+    <b-button v-else variant="primary" v-b-tooltip.hover.bottom :title="tooltip" @click="$emit('onClick')">
+        <font-awesome-icon icon="check" class="mr-2" />{{ title }}
+    </b-button>
+</template>
+<script>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheck, faSpinner } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faCheck);
+library.add(faSpinner);
+
+export default {
+    components: {
+        FontAwesomeIcon,
+    },
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        wait: {
+            type: Boolean,
+            default: false,
+        },
+        tooltip: {
+            type: String,
+            default: null,
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Common/Webhook.vue b/client/src/components/Common/Webhook.vue
new file mode 100644
index 00000000000..a3885849690
--- /dev/null
+++ b/client/src/components/Common/Webhook.vue
@@ -0,0 +1,27 @@
+<template>
+    <div ref="webhook" id="webhook-view" />
+</template>
+<script>
+import Webhooks from "mvc/webhooks";
+
+export default {
+    props: {
+        type: {
+            type: String,
+            required: true,
+        },
+        toolId: {
+            type: String,
+            default: null,
+        },
+    },
+    mounted() {
+        const el = this.$refs["webhook"];
+        new Webhooks.WebhookView({
+            el,
+            type: this.type,
+            toolId: this.toolId,
+        });
+    },
+};
+</script>
diff --git a/client/src/components/Form/Elements/FormBoolean.test.js b/client/src/components/Form/Elements/FormBoolean.test.js
new file mode 100644
index 00000000000..90149c2442c
--- /dev/null
+++ b/client/src/components/Form/Elements/FormBoolean.test.js
@@ -0,0 +1,32 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import FormBoolean from "./FormBoolean";
+import Vue from "vue";
+
+const localVue = getLocalVue();
+
+describe("FormBoolean", () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(FormBoolean, {
+            propsData: {
+                value: false,
+            },
+            localVue,
+        });
+    });
+
+    it("check initial value and value change", async () => {
+        const input = wrapper.find("input");
+        expect(wrapper.vm.currentValue).toBe(false);
+        wrapper.setProps({ value: true });
+        await Vue.nextTick();
+        expect(wrapper.vm.currentValue).toBe(true);
+        input.trigger("click");
+        expect(input.element.checked).toBe(false);
+        input.trigger("click");
+        expect(input.element.checked).toBe(true);
+        expect(wrapper.emitted().input[0][0]).toBe(true);
+    });
+});
diff --git a/client/src/components/Form/Elements/FormBoolean.vue b/client/src/components/Form/Elements/FormBoolean.vue
new file mode 100644
index 00000000000..b926c2c3738
--- /dev/null
+++ b/client/src/components/Form/Elements/FormBoolean.vue
@@ -0,0 +1,24 @@
+<template>
+    <b-form-checkbox v-model="currentValue" size="lg" switch />
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    computed: {
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit("input", val);
+            },
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Form/FormInput.test.js b/client/src/components/Form/Elements/FormInput.test.js
similarity index 88%
rename from client/src/components/Form/FormInput.test.js
rename to client/src/components/Form/Elements/FormInput.test.js
index ebe24aa5960..c9b7eb9247b 100644
--- a/client/src/components/Form/FormInput.test.js
+++ b/client/src/components/Form/Elements/FormInput.test.js
@@ -24,7 +24,7 @@ describe("FormInput", () => {
         expect(input.element.value).toBe("initial_value");
         await input.setValue("new_value");
         expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
+        expect(wrapper.emitted().input[0][0]).toBe("new_value");
     });
 
     it("check switching to text area", async () => {
@@ -33,6 +33,6 @@ describe("FormInput", () => {
         expect(input.element.value).toBe("initial_value");
         await input.setValue("new_value");
         expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
+        expect(wrapper.emitted().input[0][0]).toBe("new_value");
     });
 });
diff --git a/client/src/components/Form/Elements/FormInput.vue b/client/src/components/Form/Elements/FormInput.vue
new file mode 100644
index 00000000000..05758a19b28
--- /dev/null
+++ b/client/src/components/Form/Elements/FormInput.vue
@@ -0,0 +1,32 @@
+<template>
+    <textarea v-if="area" class="ui-input" v-model="currentValue" />
+    <input v-else class="ui-input" v-model="currentValue" />
+</template>
+<script>
+export default {
+    props: {
+        id: {
+            type: String,
+            required: true,
+        },
+        value: {
+            type: String,
+            default: "",
+        },
+        area: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit("input", val);
+            },
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/Form.vue
deleted file mode 100644
index 078671ffa80..00000000000
--- a/client/src/components/Form/Form.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <div ref="form" />
-</template>
-
-<script>
-import Form from "mvc/form/form-view";
-
-export default {
-    props: {
-        id: {
-            type: String,
-            default: null,
-        },
-        inputs: {
-            type: Array,
-            required: true,
-        },
-        textEnable: {
-            type: String,
-            default: null,
-        },
-        textDisable: {
-            type: String,
-            default: null,
-        },
-        initialErrors: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    watch: {
-        id() {
-            this.onRender();
-        },
-    },
-    mounted() {
-        this.onRender();
-    },
-    methods: {
-        onChange() {
-            this.$emit("onChange", this.form.data.create());
-        },
-        onRender() {
-            this.$nextTick(() => {
-                const el = this.$refs["form"];
-                this.form = new Form({
-                    el,
-                    inputs: this.inputs,
-                    initial_errors: this.initialErrors,
-                    text_enable: this.textEnable,
-                    text_disable: this.textDisable,
-                }).on("change", this.onChange);
-                this.onChange();
-            });
-        },
-        parseUpdate(data) {
-            this.$nextTick(() => {
-                this.form.update(data, false);
-            });
-        },
-        parseErrors(data) {
-            this.$nextTick(() => {
-                this.form.errors(data);
-            });
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Form/FormCard.test.js b/client/src/components/Form/FormCard.test.js
new file mode 100644
index 00000000000..303e4f7c5cd
--- /dev/null
+++ b/client/src/components/Form/FormCard.test.js
@@ -0,0 +1,29 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import FormCard from "./FormCard";
+
+const localVue = getLocalVue();
+
+describe("FormCard", () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(FormCard, {
+            propsData: {
+                title: "title",
+                description: "description",
+                icon: "icon-class",
+            },
+            localVue,
+        });
+    });
+
+    it("check props", async () => {
+        const title = wrapper.find(".portlet-title-text > b");
+        expect(title.text()).toBe("title");
+        const description = wrapper.find(".portlet-title-text > span");
+        expect(description.text()).toBe("description");
+        const icon = wrapper.find(".portlet-title-icon");
+        expect(icon.classes()).toContain("icon-class");
+    });
+});
diff --git a/client/src/components/Form/FormCard.vue b/client/src/components/Form/FormCard.vue
index 05443ec7630..1562b2e8161 100644
--- a/client/src/components/Form/FormCard.vue
+++ b/client/src/components/Form/FormCard.vue
@@ -8,7 +8,6 @@
                 <i :class="['portlet-title-icon fa mr-1', icon]" style="display: inline"></i>
                 <span class="portlet-title-text">
                     <b itemprop="name">{{ title }}</b> <span itemprop="description">{{ description }}</span>
-                    {{ version }}
                 </span>
             </div>
         </div>
@@ -26,11 +25,7 @@ export default {
         },
         description: {
             type: String,
-            required: false,
-        },
-        version: {
-            type: String,
-            required: false,
+            default: null,
         },
         icon: {
             type: String,
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
new file mode 100644
index 00000000000..09d42bd6f16
--- /dev/null
+++ b/client/src/components/Form/FormDisplay.vue
@@ -0,0 +1,156 @@
+<template>
+    <div ref="form" />
+</template>
+
+<script>
+import Form from "mvc/form/form-view";
+
+export default {
+    props: {
+        id: {
+            type: String,
+            default: null,
+        },
+        inputs: {
+            type: Array,
+            required: true,
+        },
+        textEnable: {
+            type: String,
+            default: null,
+        },
+        textDisable: {
+            type: String,
+            default: null,
+        },
+        initialErrors: {
+            type: Boolean,
+            default: false,
+        },
+        validationScrollTo: {
+            type: Array,
+            default: null,
+        },
+        validationErrors: {
+            type: Object,
+            default: null,
+        },
+        formConfig: {
+            type: Object,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            formData: {},
+        };
+    },
+    watch: {
+        id() {
+            this.onRender();
+        },
+        validationScrollTo() {
+            this.onHighlight(this.validationScrollTo);
+        },
+        validation() {
+            this.onHighlight(this.validation, true);
+            this.$emit("onValidation", this.validation);
+        },
+        validationErrors() {
+            const matchedErrors = Object.entries(this.form.data.matchResponse(this.validationErrors));
+            if (matchedErrors.length > 0) {
+                this.onHighlight(matchedErrors[0]);
+            }
+        },
+        formConfig() {
+            this.$nextTick(() => {
+                this.form.update(this.formConfig);
+                if (this.initialErrors) {
+                    this.form.errors(this.formConfig);
+                }
+            });
+        },
+    },
+    mounted() {
+        this.onRender();
+    },
+    beforeDestroy() {
+        this.form.off();
+    },
+    computed: {
+        validation() {
+            let batch_n = -1;
+            let batch_src = null;
+            for (const job_input_id in this.formData) {
+                const input_value = this.formData[job_input_id];
+                const input_id = this.form.data.match(job_input_id);
+                const input_field = this.form.field_list[input_id];
+                const input_def = this.form.input_list[input_id];
+                if (!input_id || !input_def || !input_field) {
+                    continue;
+                }
+                if (!input_def.optional && input_value == null && input_def.type != "hidden") {
+                    return [input_id, "Please provide a value for this option."];
+                }
+                if (input_field.validate) {
+                    const message = input_field.validate();
+                    if (message) {
+                        return [input_id, message];
+                    }
+                }
+                if (input_value && input_value.batch) {
+                    const n = input_value.values.length;
+                    const src = n > 0 && input_value.values[0] && input_value.values[0].src;
+                    if (src) {
+                        if (batch_src === null) {
+                            batch_src = src;
+                        } else if (batch_src !== src) {
+                            return [
+                                input_id,
+                                "Please select either dataset or dataset list fields for all batch mode fields.",
+                            ];
+                        }
+                    }
+                    if (batch_n === -1) {
+                        batch_n = n;
+                    } else if (batch_n !== n) {
+                        return [
+                            input_id,
+                            `Please make sure that you select the same number of inputs for all batch mode fields. This field contains <b>${n}</b> selection(s) while a previous field contains <b>${batch_n}</b>.`,
+                        ];
+                    }
+                }
+            }
+            return null;
+        },
+    },
+    methods: {
+        onChange() {
+            this.formData = this.form.data.create();
+            this.$emit("onChange", this.formData);
+        },
+        onRender() {
+            this.$nextTick(() => {
+                const el = this.$refs["form"];
+                this.form = new Form({
+                    el,
+                    inputs: this.inputs,
+                    initial_errors: this.initialErrors,
+                    text_enable: this.textEnable,
+                    text_disable: this.textDisable,
+                    onchange: () => {
+                        this.onChange();
+                    },
+                });
+                this.onChange();
+            });
+        },
+        onHighlight(validation, silent = false) {
+            this.form.trigger("reset");
+            if (validation && validation.length == 2) {
+                this.form.highlight(validation[0], validation[1], silent);
+            }
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Form/FormElement.test.js b/client/src/components/Form/FormElement.test.js
index 34f8c604732..90c4e295f01 100644
--- a/client/src/components/Form/FormElement.test.js
+++ b/client/src/components/Form/FormElement.test.js
@@ -22,7 +22,7 @@ describe("FormElement", () => {
         });
     });
 
-    it("check help text", async () => {
+    it("check props", async () => {
         const help = wrapper.find(".ui-form-info");
         expect(help.text()).toBe("help_text");
         const error = wrapper.find(".ui-form-error-text");
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 9235cbe2c38..89abca8ca1e 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -6,16 +6,19 @@
         </div>
         <div class="ui-form-title">{{ title }}</div>
         <div class="ui-form-field">
-            <FormInput :id="id" :value="value" :area="area" @onChange="onChange" />
+            <FormInput v-if="type == 'text'" :id="id" :area="area" v-model="currentValue" />
+            <FormBoolean v-else-if="type == 'boolean'" :id="id" v-model="currentValue" />
             <span class="ui-form-info form-text text-muted mt-2">{{ help }}</span>
         </div>
     </div>
 </template>
 <script>
-import FormInput from "./FormInput";
+import FormBoolean from "./Elements/FormBoolean";
+import FormInput from "./Elements/FormInput";
 
 export default {
     components: {
+        FormBoolean,
         FormInput,
     },
     props: {
@@ -24,16 +27,16 @@ export default {
             required: true,
         },
         value: {
-            type: String,
-            default: "",
+            type: [String, Boolean],
+            default: null,
         },
         title: {
             type: String,
-            default: "",
+            default: null,
         },
         help: {
             type: String,
-            default: "",
+            default: null,
         },
         area: {
             type: Boolean,
@@ -43,8 +46,20 @@ export default {
             type: String,
             default: null,
         },
+        type: {
+            type: String,
+            default: "text",
+        },
     },
     computed: {
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit("input", val);
+            },
+        },
         hasError() {
             return !!this.error;
         },
@@ -56,10 +71,5 @@ export default {
             }
         },
     },
-    methods: {
-        onChange(value) {
-            this.$emit("onChange", value);
-        },
-    },
 };
 </script>
diff --git a/client/src/components/Form/FormInput.vue b/client/src/components/Form/FormInput.vue
deleted file mode 100644
index ed25eb4917b..00000000000
--- a/client/src/components/Form/FormInput.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <textarea v-if="area" class="ui-input" v-model="currentValue" @input="onChange" @change="onChange" />
-    <input v-else class="ui-input" v-model="currentValue" @input="onChange" @change="onChange" />
-</template>
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        value: {
-            type: String,
-            default: "",
-        },
-        area: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    watch: {
-        value(newValue) {
-            this.currentValue = newValue;
-        },
-    },
-    data() {
-        return {
-            currentValue: this.value,
-        };
-    },
-    methods: {
-        onChange() {
-            this.$emit("onChange", this.currentValue);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/MarkdownVisualization.vue b/client/src/components/Markdown/MarkdownVisualization.vue
index b9c5bcce32d..358508fa1bd 100644
--- a/client/src/components/Markdown/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/MarkdownVisualization.vue
@@ -19,7 +19,7 @@
             @ok="onOk"
             @cancel="onCancel"
         >
-            <Form :inputs="formInputs" @onChange="onChange" />
+            <FormDisplay :inputs="formInputs" @onChange="onChange" />
         </b-modal>
     </span>
 </template>
@@ -29,7 +29,7 @@ import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import MarkdownSelector from "./MarkdownSelector";
 import DataDialog from "components/DataDialog/DataDialog";
-import Form from "components/Form/Form";
+import FormDisplay from "components/Form/FormDisplay";
 
 Vue.use(BootstrapVue);
 
@@ -37,7 +37,7 @@ export default {
     components: {
         MarkdownSelector,
         DataDialog,
-        Form,
+        FormDisplay,
     },
     props: {
         argumentName: {
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 73167474b32..fca9bd812ce 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -28,10 +28,10 @@
             <div class="toolMenuContainer">
                 <div class="toolMenu">
                     <tool-section
-                        v-for="section in sections"
+                        v-for="(section, key) in sections"
                         :category="section"
                         :query-filter="queryFilter"
-                        :key="section.id"
+                        :key="key"
                         @onClick="onOpen"
                     />
                 </div>
diff --git a/client/src/components/Tool/ToolCard.test.js b/client/src/components/Tool/ToolCard.test.js
new file mode 100644
index 00000000000..6e3638b9530
--- /dev/null
+++ b/client/src/components/Tool/ToolCard.test.js
@@ -0,0 +1,50 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import ToolCard from "./ToolCard";
+
+const localVue = getLocalVue();
+
+describe("ToolCard", () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(ToolCard, {
+            propsData: {
+                id: "identifier",
+                user: {
+                    id: "user.id",
+                    email: "user.email",
+                    is_admin: true,
+                    preferences: {},
+                },
+                version: "version",
+                title: "title",
+                description: "description",
+                sustainVersion: false,
+                options: {
+                    id: "options.id",
+                    versions: [],
+                    sharable_url: "options.sharable_url",
+                    help: "options.help",
+                    citations: null,
+                },
+                messageText: "messageText",
+                messageVariant: "warning",
+            },
+            localVue,
+        });
+    });
+
+    it("check props", async () => {
+        const title = wrapper.find(".portlet-title-text > b");
+        expect(title.text()).toBe("title");
+        const description = wrapper.find(".portlet-title-text > span");
+        expect(description.text()).toBe("description");
+        const icon = wrapper.find(".portlet-title-icon");
+        expect(icon.classes()).toContain("fa-wrench");
+        const dropdownHeader = wrapper.find(".tool-dropdown");
+        expect(dropdownHeader.attributes("title")).toBe("Options");
+        const dropdownItems = wrapper.findAll(".dropdown-item");
+        expect(dropdownItems.length).toBe(4);
+    });
+});
diff --git a/client/src/components/Form/FormCardTool.vue b/client/src/components/Tool/ToolCard.vue
similarity index 88%
rename from client/src/components/Form/FormCardTool.vue
rename to client/src/components/Tool/ToolCard.vue
index ffc3640f60d..850cfd2050a 100644
--- a/client/src/components/Form/FormCardTool.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -10,26 +10,30 @@
                         title="Options"
                         variant="link"
                         aria-label="View all Options"
-                        class="float-right"
+                        class="tool-dropdown float-right"
                         size="sm"
                         v-b-tooltip.hover
                     >
                         <template v-slot:button-content>
                             <span class="fa fa-caret-down" />
                         </template>
-                        <b-dropdown-item @click="onCopyLink"> <span class="fa fa-chain" /> Copy Link </b-dropdown-item>
-                        <b-dropdown-item @click="onCopyId">
-                            <span class="fa fa-files-o" /> Copy Tool ID
+                        <b-dropdown-item @click="onCopyLink"
+                            ><span class="fa fa-chain" /><span v-localize>Copy Link</span>
                         </b-dropdown-item>
-                        <b-dropdown-item v-if="showDownload" @click="onDownload">
-                            <span class="fa fa-download" /> Download
+                        <b-dropdown-item @click="onCopyId"
+                            ><span class="fa fa-files-o" /><span v-localize>Copy Tool ID</span>
                         </b-dropdown-item>
-                        <b-dropdown-item v-if="showLink" @click="onLink">
-                            <span class="fa fa-external-link" /> See in Tool Shed
-                        </b-dropdown-item>
-                        <b-dropdown-item v-for="w of webhookDetails" :key="w.title" @click="w.onclick">
-                            <span :class="w.icon" /> {{ w.title }}
+                        <b-dropdown-item v-if="showDownload" @click="onDownload"
+                            ><span class="fa fa-download" /><span v-localize>Download</span>
                         </b-dropdown-item>
+                        <b-dropdown-item v-if="showLink" @click="onLink"
+                            ><span class="fa fa-external-link" /><span v-localize
+                                >See in Tool Shed</span
+                            ></b-dropdown-item
+                        >
+                        <b-dropdown-item v-for="w of webhookDetails" :key="w.title" @click="w.onclick"
+                            ><span :class="w.icon" />{{ w.title | l }}</b-dropdown-item
+                        >
                     </b-dropdown>
                     <b-dropdown
                         v-if="showVersions"
@@ -47,8 +51,8 @@
                             <span class="fa fa-cubes" />
                         </template>
                         <b-dropdown-item v-for="v of availableVersions" :key="v" @click="$emit('onChangeVersion', v)">
-                            <span class="fa fa-cube" /> Switch to {{ v }}
-                        </b-dropdown-item>
+                            <span class="fa fa-cube" /><span v-localize>Switch to </span>{{ v }}</b-dropdown-item
+                        >
                     </b-dropdown>
                     <b-button
                         v-if="showAddFavorite"
@@ -79,7 +83,7 @@
                     <i class="portlet-title-icon fa mr-1 fa-wrench" style="display: inline"></i>
                     <span class="portlet-title-text">
                         <b itemprop="name">{{ title }}</b> <span itemprop="description">{{ description }}</span> (Galaxy
-                        Verson {{ version }})
+                        Version {{ version }})
                     </span>
                 </div>
             </div>
@@ -89,6 +93,7 @@
                 <slot name="body" />
             </div>
         </div>
+        <slot name="buttons" />
         <div class="m-1">
             <ToolHelp :content="options.help" />
             <ToolFooter
@@ -105,7 +110,7 @@
 <script>
 import ariaAlert from "utils/ariaAlert";
 import { copyLink, downloadTool, openLink } from "./utilities";
-import FormMessage from "./FormMessage";
+import FormMessage from "components/Form/FormMessage";
 import ToolFooter from "components/Tool/ToolFooter";
 import ToolHelp from "components/Tool/ToolHelp";
 import Webhooks from "mvc/webhooks";
@@ -205,7 +210,7 @@ export default {
                         this.webhookDetails.push({
                             icon: `fa ${webhook.config.icon}`,
                             title: webhook.config.title,
-                            onclick: function () {
+                            onclick: () => {
                                 const func = new Function("options", webhook.config.function);
                                 func(this.options);
                             },
diff --git a/client/src/components/Tool/ToolFooter.vue b/client/src/components/Tool/ToolFooter.vue
index 22d097f2704..991b9788be3 100644
--- a/client/src/components/Tool/ToolFooter.vue
+++ b/client/src/components/Tool/ToolFooter.vue
@@ -76,9 +76,9 @@ import { faQuestion, faCopy, faAngleDoubleDown, faAngleDoubleUp } from "@fortawe
 library.add(faQuestion, faCopy, faAngleDoubleDown, faAngleDoubleUp);
 
 import { getCitations } from "components/Citation/services";
-import Citation from "components/Citation/Citation.vue";
-import License from "components/License/License.vue";
-import Creators from "components/SchemaOrg/Creators.vue";
+import Citation from "components/Citation/Citation";
+import License from "components/License/License";
+import Creators from "components/SchemaOrg/Creators";
 import { copy } from "utils/clipboard";
 
 export default {
diff --git a/client/src/components/Tool/ToolForm.test.js b/client/src/components/Tool/ToolForm.test.js
new file mode 100644
index 00000000000..15cf8df15f7
--- /dev/null
+++ b/client/src/components/Tool/ToolForm.test.js
@@ -0,0 +1,61 @@
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import ToolForm from "./ToolForm";
+import MockCurrentUser from "../providers/MockCurrentUser";
+import MockConfigProvider from "../providers/MockConfigProvider";
+import MockCurrentHistory from "../History/providers/UserHistories/MockCurrentHistory";
+import Vue from "vue";
+
+const localVue = getLocalVue();
+
+describe("ToolForm", () => {
+    let wrapper;
+    let axiosMock;
+
+    beforeEach(() => {
+        axiosMock = new MockAdapter(axios);
+
+        const toolData = {
+            id: "tool_id",
+            name: "tool_name",
+            version: "version",
+            inputs: [],
+            help: "help_text",
+        };
+        axiosMock.onGet(`/api/tools/tool_id/build?tool_version=version`).reply(200, toolData);
+
+        const citations = [];
+        axiosMock.onGet(`/api/tools/tool_id/citations`).reply(200, citations);
+
+        wrapper = mount(ToolForm, {
+            propsData: {
+                id: "tool_id",
+                version: "version",
+            },
+            localVue,
+            stubs: {
+                CurrentUser: MockCurrentUser({ id: "fakeuser" }),
+                UserHistories: MockCurrentHistory({ id: "fakehistory" }),
+                ConfigProvider: MockConfigProvider({ id: "fakeconfig" }),
+                FormDisplay: true,
+            },
+        });
+    });
+
+    afterEach(() => {
+        axiosMock.restore();
+        axiosMock.reset();
+    });
+
+    it("check props", async () => {
+        await Vue.nextTick();
+        const button = wrapper.find(".btn-primary");
+        expect(button.attributes("title")).toBe("Execute: tool_name (version)");
+        const dropdown = wrapper.findAll(".dropdown-item");
+        expect(dropdown.length).toBe(2);
+        const help = wrapper.find(".form-help");
+        expect(help.text()).toBe("help_text");
+    });
+});
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
new file mode 100644
index 00000000000..29f5de66e28
--- /dev/null
+++ b/client/src/components/Tool/ToolForm.vue
@@ -0,0 +1,316 @@
+<template>
+    <ConfigProvider v-slot="{ config }">
+        <CurrentUser v-slot="{ user }">
+            <UserHistories v-if="user" :user="user" v-slot="{ currentHistory }">
+                <div>
+                    <LoadingSpan v-if="showLoading" message="Loading Tool" />
+                    <div v-if="showEntryPoints">
+                        <ToolEntryPoints v-for="job in entryPoints" :job-id="job.id" :key="job.id" />
+                    </div>
+                    <ToolSuccess
+                        v-if="showSuccess"
+                        :job-def="jobDef"
+                        :job-response="jobResponse"
+                        :tool-name="toolName"
+                    />
+                    <Webhook v-if="showSuccess" type="tool" :tool-id="jobDef.tool_id" />
+                    <b-alert v-if="showError" show variant="danger">
+                        <h4>{{ errorTitle | l }}</h4>
+                        <p>
+                            The server could not complete the request. Please contact the Galaxy Team if this error
+                            persists.
+                        </p>
+                        <pre>{{ errorContentPretty }}</pre>
+                    </b-alert>
+                    <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
+                    <ToolCard
+                        v-if="showForm"
+                        :id="formConfig.id"
+                        :user="user"
+                        :version="formConfig.version"
+                        :title="formConfig.name"
+                        :description="formConfig.description"
+                        :options="formConfig"
+                        :message-text="messageText"
+                        :message-variant="messageVariant"
+                        @onChangeVersion="onChangeVersion"
+                        @onUpdateFavorites="onUpdateFavorites"
+                        itemscope="itemscope"
+                        itemtype="https://schema.org/CreativeWork"
+                    >
+                        <template v-slot:body>
+                            <FormDisplay
+                                :id="formConfig.id"
+                                :inputs="inputs"
+                                :validation-errors="validationErrors"
+                                :validation-scroll-to="validationScrollTo"
+                                :form-config="formConfig"
+                                @onChange="onChange"
+                                @onValidation="onValidation"
+                            />
+                            <FormElement
+                                v-if="emailAllowed(config, user)"
+                                id="send_email_notification"
+                                title="Email notification"
+                                help="Send an email notification when the job completes."
+                                type="boolean"
+                                v-model="email"
+                            />
+                            <FormElement
+                                v-if="remapAllowed"
+                                id="rerun_remap_job_id"
+                                :title="remapTitle"
+                                :help="remapHelp"
+                                type="boolean"
+                                v-model="remap"
+                            />
+                            <FormElement
+                                v-if="reuseAllowed(user)"
+                                id="use_cached_job"
+                                title="Attempt to re-use jobs with identical parameters?"
+                                help="This may skip executing jobs that you have already run."
+                                type="boolean"
+                                v-model="reuse"
+                            />
+                        </template>
+                        <template v-slot:buttons>
+                            <ButtonSpinner
+                                id="execute"
+                                title="Execute"
+                                @onClick="onExecute(config, currentHistory.id)"
+                                :wait="showExecuting"
+                                :tooltip="tooltip"
+                            />
+                        </template>
+                    </ToolCard>
+                </div>
+            </UserHistories>
+        </CurrentUser>
+    </ConfigProvider>
+</template>
+
+<script>
+import Scroller from "vue-scrollto";
+import { getGalaxyInstance } from "app";
+import { getToolFormData, updateToolFormData, submitJob } from "./services";
+import ToolCard from "./ToolCard";
+import ButtonSpinner from "components/Common/ButtonSpinner";
+import CurrentUser from "components/providers/CurrentUser";
+import ConfigProvider from "components/providers/ConfigProvider";
+import LoadingSpan from "components/LoadingSpan";
+import FormDisplay from "components/Form/FormDisplay";
+import FormElement from "components/Form/FormElement";
+import ToolSuccess from "./ToolSuccess";
+import UserHistories from "components/History/providers/UserHistories";
+import Webhook from "components/Common/Webhook";
+
+export default {
+    components: {
+        ButtonSpinner,
+        CurrentUser,
+        ConfigProvider,
+        LoadingSpan,
+        FormDisplay,
+        ToolCard,
+        FormElement,
+        ToolSuccess,
+        UserHistories,
+        Webhook,
+    },
+    props: {
+        id: {
+            type: String,
+            default: null,
+        },
+        version: {
+            type: String,
+            default: null,
+        },
+        job_id: {
+            type: String,
+            default: null,
+        },
+        history_id: {
+            type: String,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            showLoading: true,
+            showForm: false,
+            showEntryPoints: false,
+            showRecommendation: false,
+            showSuccess: false,
+            showError: false,
+            showExecuting: false,
+            error: null,
+            formConfig: {},
+            formData: {},
+            errorTitle: null,
+            errorContent: null,
+            messageVariant: "",
+            messageText: "",
+            reuse: false,
+            email: false,
+            remap: false,
+            entryPoints: [],
+            jobDef: {},
+            jobResponse: {},
+            validationInternal: null,
+            validationScrollTo: null,
+            validationErrors: null,
+            currentVersion: this.version,
+        };
+    },
+    created() {
+        this.requestTool();
+        const Galaxy = getGalaxyInstance();
+        if (Galaxy && Galaxy.currHistoryPanel) {
+            Galaxy.currHistoryPanel.collection.on("change", () => {
+                this.onUpdate();
+            });
+        }
+    },
+    computed: {
+        toolName() {
+            return this.formConfig.name;
+        },
+        tooltip() {
+            return `Execute: ${this.formConfig.name} (${this.formConfig.version})`;
+        },
+        errorContentPretty() {
+            return JSON.stringify(this.errorContent, null, 4);
+        },
+        inputs() {
+            return this.formConfig.inputs;
+        },
+        remapAllowed() {
+            return this.job_id && this.formConfig.job_remap;
+        },
+        remapTitle() {
+            if (this.formConfig.job_remap === "job_produced_collection_elements") {
+                return "Replace elements in collection ?";
+            } else {
+                return "Resume dependencies from this job ?";
+            }
+        },
+        remapHelp() {
+            if (this.formConfig.job_remap === "job_produced_collection_elements") {
+                return "The previous run of this tool failed. Use this option to replace the failed element(s) in the dataset collection that were produced during the previous tool run.";
+            } else {
+                return "The previous run of this tool failed and other tools were waiting for it to finish successfully. Use this option to resume those tools using the new output(s) of this tool run.";
+            }
+        },
+    },
+    methods: {
+        emailAllowed(config, user) {
+            return config.server_mail_configured && !user.isAnonymous;
+        },
+        reuseAllowed(user) {
+            if (user.preferences && "extra_user_preferences" in user.preferences) {
+                const extra_user_preferences = JSON.parse(user.preferences.extra_user_preferences);
+                const keyCached = "use_cached_job|use_cached_job_checkbox";
+                const hasCachedJobs = keyCached in extra_user_preferences;
+                return hasCachedJobs ? extra_user_preferences[keyCached] : false;
+            } else {
+                return false;
+            }
+        },
+        onValidation(validationInternal) {
+            this.validationInternal = validationInternal;
+        },
+        onChange(newData) {
+            this.formData = newData;
+            this.onUpdate();
+        },
+        onUpdate() {
+            updateToolFormData(this.formConfig.id, this.currentVersion, this.formData).then((data) => {
+                this.formConfig = data;
+            });
+        },
+        onChangeVersion(newVersion) {
+            this.requestTool(newVersion);
+        },
+        onUpdateFavorites(user, newFavorites) {
+            user.preferences["favorites"] = newFavorites;
+        },
+        requestTool(newVersion) {
+            this.currentVersion = newVersion || this.currentVersion;
+            getToolFormData(this.id, this.currentVersion, this.job_id, this.history_id).then((data) => {
+                this.formConfig = data;
+                this.showLoading = false;
+                this.showForm = true;
+                if (newVersion) {
+                    this.messageVariant = "success";
+                    this.messageText = `Now you are using '${data.name}' version ${data.version}, id '${data.id}'.`;
+                }
+            });
+        },
+        onExecute(config, historyId) {
+            if (this.validationInternal) {
+                this.validationScrollTo = this.validationInternal.slice();
+                return;
+            }
+            this.showExecuting = true;
+            const Galaxy = getGalaxyInstance();
+            const jobDef = {
+                history_id: historyId,
+                tool_id: this.formConfig.id,
+                tool_version: this.formConfig.version,
+                inputs: {
+                    ...this.formData,
+                },
+            };
+            if (this.email) {
+                jobDef.inputs["send_email_notification"] = true;
+            }
+            if (this.remap) {
+                jobDef.inputs["rerun_remap_job_id"] = this.job_id;
+            }
+            if (this.reuse) {
+                jobDef.inputs["use_cached_job"] = true;
+            }
+            console.debug("toolForm::onExecute()", jobDef);
+            submitJob(jobDef).then(
+                (jobResponse) => {
+                    if (Galaxy.currHistoryPanel) {
+                        Galaxy.currHistoryPanel.refreshContents();
+                    }
+                    this.showForm = false;
+                    if (jobResponse.produces_entry_points) {
+                        this.showEntryPoints = true;
+                        this.entryPoints = jobResponse.jobs;
+                    }
+                    const nJobs = jobResponse && jobResponse.jobs ? jobResponse.jobs.length : 0;
+                    if (nJobs > 0) {
+                        this.showSuccess = true;
+                        this.jobDef = jobDef;
+                        this.jobResponse = jobResponse;
+                    } else {
+                        this.showError = true;
+                        this.errorTitle = "Invalid success response. No jobs found.";
+                        this.errorContent = jobResponse;
+                    }
+                    if ([true, "true"].includes(config.enable_tool_recommendations)) {
+                        this.showRecommendation = true;
+                    }
+                    Scroller.scrollTo("body");
+                },
+                (e) => {
+                    this.showExecuting = false;
+                    const errorData = e && e.response && e.response.data && e.response.data.err_data;
+                    if (errorData) {
+                        this.validationErrors = errorData;
+                    } else {
+                        this.showError = true;
+                        this.showForm = false;
+                        this.errorTitle = "Job submission failed";
+                        this.errorContent = this.jobDef;
+                    }
+                }
+            );
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Tool/ToolSuccess.vue b/client/src/components/Tool/ToolSuccess.vue
new file mode 100644
index 00000000000..eeb9e8e3ed6
--- /dev/null
+++ b/client/src/components/Tool/ToolSuccess.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="donemessagelarge">
+        <p>
+            Executed <b>{{ toolName }}</b> and successfully added {{ nJobsText }} to the queue.
+        </p>
+        <p>The tool uses {{ nInputsText }}:</p>
+        <ul>
+            <li v-for="item of inputs" :key="item.hid">
+                <b>{{ item.hid }}: {{ item.name }}</b>
+            </li>
+        </ul>
+        <p>It produces {{ nOutputsText }}:</p>
+        <ul>
+            <li v-for="item of jobResponse.outputs" :key="item.hid">
+                <b>{{ item.hid }}: {{ item.name }}</b>
+            </li>
+        </ul>
+        <p>
+            You can check the status of queued jobs and view the resulting data by refreshing the History panel. When
+            the job has been run the status will change from 'running' to 'finished' if completed successfully or
+            'error' if problems were encountered.
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        jobDef: {
+            type: Object,
+            required: true,
+        },
+        jobResponse: {
+            type: Object,
+            required: true,
+        },
+        toolName: {
+            type: String,
+            required: true,
+        },
+    },
+    computed: {
+        inputs() {
+            const inputs = [];
+            const index = {};
+            for (const i in this.jobDef.inputs) {
+                const input = this.jobDef.inputs[i];
+                if (input && Array.isArray(input.values)) {
+                    for (const j of input.values) {
+                        if (j.src && !index[j.id]) {
+                            inputs.push(j);
+                            index[j.id] = true;
+                        }
+                    }
+                }
+            }
+            return inputs;
+        },
+        nInputs() {
+            return this.inputs.length;
+        },
+        nOutputs() {
+            return this.jobResponse && this.jobResponse.outputs ? this.jobResponse.outputs.length : 0;
+        },
+        nJobs() {
+            return this.jobResponse && this.jobResponse.jobs ? this.jobResponse.jobs.length : 0;
+        },
+        nJobsText() {
+            return this.nJobs > 1 ? `${this.njobs} jobs` : `1 job`;
+        },
+        nInputsText() {
+            return this.nInputs > 1 ? `${this.nInputs} inputs` : `this input`;
+        },
+        nOutputsText() {
+            return this.nOutputs > 1 ? `${this.nOutputs} outputs` : `this output`;
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Tool/services.js b/client/src/components/Tool/services.js
index 7fc0c2f230e..f8df815e275 100644
--- a/client/src/components/Tool/services.js
+++ b/client/src/components/Tool/services.js
@@ -2,6 +2,63 @@ import axios from "axios";
 import { rethrowSimple } from "utils/simple-error";
 import { getAppRoot } from "onload/loadConfig";
 
+export async function updateToolFormData(tool_id, tool_version, inputs) {
+    const current_state = {
+        tool_id: tool_id,
+        tool_version: tool_version,
+        inputs: inputs,
+    };
+    const url = `${getAppRoot()}api/tools/${tool_id}/build`;
+    try {
+        const { data } = await axios.post(url, current_state);
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
+    }
+}
+
+/** Tools data request helper **/
+export async function getToolFormData(tool_id, tool_version, job_id, history_id) {
+    let url = "";
+    const data = {};
+
+    // build request url and collect request data
+    if (job_id) {
+        url = `${getAppRoot()}api/jobs/${job_id}/build_for_rerun`;
+    } else {
+        url = `${getAppRoot()}api/tools/${tool_id}/build`;
+        const queryString = window.location.search;
+        const params = new URLSearchParams(queryString);
+        for (const [key, value] of params.entries()) {
+            if (key != "tool_id") {
+                data[key] = value;
+            }
+        }
+    }
+    history_id && (data["history_id"] = history_id);
+    tool_version && (data["tool_version"] = tool_version);
+
+    // attach data to request url
+    if (Object.entries(data).length != 0) {
+        const params = new URLSearchParams(data);
+        url = `${url}?${params.toString()}`;
+    }
+
+    // request tool data
+    try {
+        const { data } = await axios.get(url);
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
+    }
+}
+
+export async function submitJob(jobDetails) {
+    const url = `${getAppRoot()}api/tools`;
+    const { data } = await axios.post(url, jobDetails);
+    return data;
+}
+
 export async function addFavorite(userId, toolId) {
     const url = `${getAppRoot()}api/users/${userId}/favorites/tools`;
     try {
diff --git a/client/src/components/Form/utilities.js b/client/src/components/Tool/utilities.js
similarity index 100%
rename from client/src/components/Form/utilities.js
rename to client/src/components/Tool/utilities.js
diff --git a/client/src/components/Workflow/Editor/Forms/FormDefault.vue b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
index fa9d6be0061..226b2a11a82 100644
--- a/client/src/components/Workflow/Editor/Forms/FormDefault.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
@@ -33,7 +33,7 @@
                 :value="node.label"
                 title="Label"
                 help="Add a step label."
-                @onChange="onLabel"
+                @input="onLabel"
                 :error="errorLabel"
             />
             <FormElement
@@ -42,15 +42,15 @@
                 title="Step Annotation"
                 :area="true"
                 help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
-                @onChange="onAnnotation"
+                @input="onAnnotation"
             />
-            <Form :id="id" :inputs="inputs" @onChange="onChange" />
+            <FormDisplay :id="id" :inputs="inputs" @onChange="onChange" />
         </template>
     </FormCard>
 </template>
 
 <script>
-import Form from "components/Form/Form";
+import FormDisplay from "components/Form/FormDisplay";
 import FormCard from "components/Form/FormCard";
 import FormElement from "components/Form/FormElement";
 import FormMessage from "components/Form/FormMessage";
@@ -60,7 +60,7 @@ import WorkflowIcons from "components/Workflow/icons";
 
 export default {
     components: {
-        Form,
+        FormDisplay,
         FormCard,
         FormElement,
         FormMessage,
diff --git a/client/src/components/Workflow/Editor/Forms/FormSection.vue b/client/src/components/Workflow/Editor/Forms/FormSection.vue
index 8c5a082427c..c49fe7768f6 100644
--- a/client/src/components/Workflow/Editor/Forms/FormSection.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormSection.vue
@@ -1,14 +1,14 @@
 <template>
-    <Form :id="id" :inputs="inputs" ref="form" @onChange="onChange" />
+    <FormDisplay :id="id" :inputs="inputs" ref="form" @onChange="onChange" />
 </template>
 
 <script>
-import Form from "components/Form/Form";
+import FormDisplay from "components/Form/FormDisplay";
 import makeSection from "./makeSection";
 
 export default {
     components: {
-        Form,
+        FormDisplay,
     },
     props: {
         id: {
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index 45f81bdf325..70caeb2084d 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -1,6 +1,6 @@
 <template>
     <CurrentUser v-slot="{ user }">
-        <FormCardTool
+        <ToolCard
             :id="node.config_form.id"
             :user="user"
             :version="node.config_form.version"
@@ -18,7 +18,7 @@
                     :value="node.label"
                     title="Label"
                     help="Add a step label."
-                    @onChange="onLabel"
+                    @input="onLabel"
                     :error="errorLabel"
                 />
                 <FormElement
@@ -27,16 +27,16 @@
                     title="Step Annotation"
                     :area="true"
                     help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
-                    @onChange="onAnnotation"
+                    @input="onAnnotation"
                 />
-                <Form
+                <FormDisplay
                     :id="id"
                     :inputs="inputs"
                     :initial-errors="true"
+                    :form-config="formConfig"
                     text-enable="Set in Advance"
                     text-disable="Set at Runtime"
                     @onChange="onChange"
-                    ref="form"
                 />
                 <FormSection
                     :id="id"
@@ -46,14 +46,14 @@
                     @onChangeOutputDatatype="onChangeOutputDatatype"
                 />
             </template>
-        </FormCardTool>
+        </ToolCard>
     </CurrentUser>
 </template>
 
 <script>
 import CurrentUser from "components/providers/CurrentUser";
-import Form from "components/Form/Form";
-import FormCardTool from "components/Form/FormCardTool";
+import FormDisplay from "components/Form/FormDisplay";
+import ToolCard from "components/Tool/ToolCard";
 import FormSection from "./FormSection";
 import FormElement from "components/Form/FormElement";
 import { getModule } from "components/Workflow/Editor/modules/services";
@@ -63,8 +63,8 @@ import Utils from "utils/utils";
 export default {
     components: {
         CurrentUser,
-        Form,
-        FormCardTool,
+        FormDisplay,
+        ToolCard,
         FormElement,
         FormSection,
     },
@@ -88,6 +88,7 @@ export default {
             sectionValues: {},
             messageVariant: "",
             messageText: "",
+            formConfig: {},
         };
     },
     computed: {
@@ -161,9 +162,7 @@ export default {
                 inputs: Object.assign({}, this.mainValues, this.sectionValues),
             }).then((data) => {
                 this.$emit("onSetData", this.node.id, data);
-                const form = this.$refs["form"];
-                form.parseUpdate(data.config_form);
-                form.parseErrors(data.config_form);
+                this.formConfig = data;
                 if (newVersion) {
                     const options = data.config_form;
                     this.messageVariant = "success";
diff --git a/client/src/components/Workflow/Editor/Options.vue b/client/src/components/Workflow/Editor/Options.vue
index 552d1eda949..da81a9dbc16 100644
--- a/client/src/components/Workflow/Editor/Options.vue
+++ b/client/src/components/Workflow/Editor/Options.vue
@@ -52,19 +52,19 @@
                 <span class="fa fa-cog" />
             </template>
             <b-dropdown-item href="#" @click="$emit('onSaveAs')"
-                ><span class="fa fa-floppy-o mr-1" />Save As...</b-dropdown-item
+                ><span class="fa fa-floppy-o" />Save As...</b-dropdown-item
             >
             <b-dropdown-item href="#" @click="$emit('onLayout')"
-                ><span class="fa fa-align-left mr-1" />Auto Layout</b-dropdown-item
+                ><span class="fa fa-align-left" />Auto Layout</b-dropdown-item
             >
             <b-dropdown-item href="#" @click="$emit('onLint')"
-                ><span class="fa fa-magic mr-1" />Best Practices</b-dropdown-item
+                ><span class="fa fa-magic" />Best Practices</b-dropdown-item
             >
             <b-dropdown-item href="#" @click="$emit('onUpgrade')"
-                ><span class="fa fa-recycle mr-1" />Upgrade Workflow</b-dropdown-item
+                ><span class="fa fa-recycle" />Upgrade Workflow</b-dropdown-item
             >
             <b-dropdown-item href="#" @click="$emit('onDownload')"
-                ><span class="fa fa-download mr-1" />Download</b-dropdown-item
+                ><span class="fa fa-download" />Download</b-dropdown-item
             >
         </b-dropdown>
         <b-button
diff --git a/client/src/components/providers/MockConfigProvider.js b/client/src/components/providers/MockConfigProvider.js
new file mode 100644
index 00000000000..0126446102b
--- /dev/null
+++ b/client/src/components/providers/MockConfigProvider.js
@@ -0,0 +1,9 @@
+const MockConfigProvider = (fakeConfig) => ({
+    render() {
+        return this.$scopedSlots.default({
+            config: fakeConfig,
+        });
+    },
+});
+
+export default MockConfigProvider;
diff --git a/client/src/entry/analysis/AnalysisRouter.js b/client/src/entry/analysis/AnalysisRouter.js
index 63e71476752..d0e31fa7618 100644
--- a/client/src/entry/analysis/AnalysisRouter.js
+++ b/client/src/entry/analysis/AnalysisRouter.js
@@ -15,7 +15,7 @@ import { getGalaxyInstance } from "app";
 import { getAppRoot } from "onload";
 import decodeUriComponent from "decode-uri-component";
 import Router from "layout/router";
-import ToolForm from "mvc/tool/tool-form";
+import ToolForm from "components/Tool/ToolForm";
 import FormWrapper from "mvc/form/form-wrapper";
 import Sharing from "components/Sharing.vue";
 import UserPreferences from "components/User/UserPreferences.vue";
@@ -427,7 +427,7 @@ export const getAnalysisRouter = (Galaxy) => {
             if (params.version) {
                 params.version = decodeUriComponent(params.version);
             }
-            this.page.display(new ToolForm.View(params));
+            this._display_vue_helper(ToolForm, params);
         },
 
         /** load the center panel iframe using the given url */
diff --git a/client/src/mvc/form/form-input.js b/client/src/mvc/form/form-input.js
index 8d337c2ccec..a4f84d75328 100644
--- a/client/src/mvc/form/form-input.js
+++ b/client/src/mvc/form/form-input.js
@@ -121,7 +121,7 @@ export default Backbone.View.extend({
         // render error messages
         var error_text = this.model.get("error_text");
         this.$error[error_text ? "show" : "hide"]();
-        this.$el[error_text ? "addClass" : "removeClass"]("alert alert-danger");
+        this.$el[error_text ? "addClass" : "removeClass"]("alert alert-info");
         this.$error_text.html(error_text);
         // render backdrop
         this.$backdrop[this.model.get("backdrop") ? "show" : "hide"]();
@@ -186,7 +186,7 @@ export default Backbone.View.extend({
             .append(
                 $("<div/>")
                     .addClass("ui-form-error")
-                    .append($("<span/>").addClass("fa fa-arrow-down mr-1"))
+                    .append($("<span/>").addClass("fa fa-exclamation mr-1"))
                     .append($("<span/>").addClass("ui-form-error-text"))
             )
             .append(
diff --git a/client/src/mvc/form/form-view.js b/client/src/mvc/form/form-view.js
index efaf8d6d6d6..fe0bc26a869 100644
--- a/client/src/mvc/form/form-view.js
+++ b/client/src/mvc/form/form-view.js
@@ -8,7 +8,6 @@ import Portlet from "mvc/ui/ui-portlet";
 import Ui from "mvc/ui/ui-misc";
 import FormSection from "mvc/form/form-section";
 import FormData from "mvc/form/form-data";
-import { getGalaxyInstance } from "app";
 
 export default Backbone.View.extend({
     initialize: function (options) {
@@ -26,15 +25,14 @@ export default Backbone.View.extend({
     },
 
     /** Update available options */
-    update: function (new_model, triggerChange = true) {
+    update: function (new_model) {
         var self = this;
         this.data.matchModel(new_model, (node, input_id) => {
             var field = self.field_list[input_id];
             if (field.update) {
                 field.update(node);
-                triggerChange && field.trigger("change");
-                const Galaxy = getGalaxyInstance();
-                Galaxy.emit.debug("form-view::update()", `Updating input: ${input_id}`);
+                field.trigger("change");
+                console.debug("form-view::update()", `Updating input: ${input_id}`);
             }
         });
     },
@@ -54,7 +52,7 @@ export default Backbone.View.extend({
     highlight: function (input_id, message, silent) {
         var input_element = this.element_list[input_id];
         if (input_element) {
-            input_element.error(message || "Please verify this parameter.");
+            input_element.error(message || "Please verify this option.");
             this.portlet.expand();
             this.trigger("expand", input_id);
             if (!silent) {
@@ -157,7 +155,6 @@ export default Backbone.View.extend({
                 message: options.message,
             });
         }
-        const Galaxy = getGalaxyInstance();
-        Galaxy.emit.debug("form-view::initialize()", "Completed");
+        console.debug("form-view::initialize()", "Completed");
     },
 });
diff --git a/client/src/mvc/tool/tool-form.js b/client/src/mvc/tool/tool-form.js
deleted file mode 100644
index e1bb04265ec..00000000000
--- a/client/src/mvc/tool/tool-form.js
+++ /dev/null
@@ -1,472 +0,0 @@
-/* This is the regular tool form */
-
-import _ from "underscore";
-import $ from "jquery";
-import Backbone from "backbone";
-import { getAppRoot } from "onload/loadConfig";
-import { getGalaxyInstance } from "app";
-import _l from "utils/localization";
-import Utils from "utils/utils";
-import Ui from "mvc/ui/ui-misc";
-import Modal from "mvc/ui/ui-modal";
-import ToolFormBase from "mvc/tool/tool-form-base";
-import Webhooks from "mvc/webhooks";
-import Vue from "vue";
-import ToolEntryPoints from "components/ToolEntryPoints/ToolEntryPoints";
-import ToolRecommendation from "components/ToolRecommendation";
-
-const View = Backbone.View.extend({
-    initialize: function (options) {
-        const Galaxy = getGalaxyInstance();
-        this.modal = Galaxy.modal || new Modal.View();
-        this.form = new ToolFormBase(
-            Utils.merge(
-                {
-                    setupToolMicrodata: true,
-                    listen_to_history: true,
-                    always_refresh: false,
-                    buildmodel: (process, form) => {
-                        const options = form.model.attributes;
-
-                        // build request url
-                        let build_url = "";
-                        let build_data = {};
-                        const job_id = options.job_id;
-                        if (job_id) {
-                            build_url = `${getAppRoot()}api/jobs/${job_id}/build_for_rerun`;
-                        } else {
-                            build_url = `${getAppRoot()}api/tools/${options.id}/build`;
-                            build_data = $.extend({}, Galaxy.params);
-                            build_data["tool_id"] && delete build_data["tool_id"];
-                        }
-                        options.version && (build_data["tool_version"] = options.version);
-
-                        // get initial model
-                        Utils.get({
-                            url: build_url,
-                            data: build_data,
-                            success: (data) => {
-                                if (!data.display) {
-                                    window.location = getAppRoot();
-                                    return;
-                                }
-
-                                // we can rely on tool_id, only if it's installed from toolshed
-                                // if no version provided and tool_id is not in toolshed style, don't show the warning
-                                const client_version =
-                                    options.version ||
-                                    (options.tool_id && options.tool_id.match(/^(toolshed)\./)
-                                        ? options.tool_id
-                                        : false);
-
-                                if (
-                                    data.versions &&
-                                    client_version &&
-                                    !data.versions.includes(client_version.replace(/.*\//, ""))
-                                ) {
-                                    data.message = `Requested version unavailable.`;
-                                }
-
-                                form.model.set(data);
-                                this._customize(form);
-                                Galaxy.emit.debug("tool-form-base::_buildModel()", "Initial tool model ready.", data);
-                                process.resolve();
-                            },
-                            error: (response, status) => {
-                                const error_message = (response && response.err_msg) || "Uncaught error.";
-                                if (status == 401) {
-                                    window.location = `${getAppRoot()}user/login?${$.param({
-                                        redirect: `${getAppRoot()}?tool_id=${options.id}`,
-                                    })}`;
-                                } else if (form.$el.is(":empty")) {
-                                    form.$el.prepend(
-                                        new Ui.Message({
-                                            message: error_message,
-                                            status: "danger",
-                                            persistent: true,
-                                        }).$el
-                                    );
-                                } else {
-                                    Galaxy.modal &&
-                                        Galaxy.modal.show({
-                                            title: _l("Tool request failed"),
-                                            body: error_message,
-                                            buttons: {
-                                                Close: () => {
-                                                    Galaxy.modal.hide();
-                                                },
-                                            },
-                                        });
-                                }
-                                Galaxy.emit.debug(
-                                    "tool-form-base::_buildModel()",
-                                    "Initial tool model request failed.",
-                                    response
-                                );
-                                process.reject();
-                            },
-                        });
-                    },
-                    postchange: (process, form) => {
-                        const current_state = {
-                            tool_id: form.model.get("id"),
-                            tool_version: form.model.get("version"),
-                            inputs: $.extend(true, {}, form.data.create()),
-                        };
-                        form.wait(true);
-                        Galaxy.emit.debug("tool-form::postchange()", "Sending current state.", current_state);
-                        Utils.request({
-                            type: "POST",
-                            url: `${getAppRoot()}api/tools/${form.model.get("id")}/build`,
-                            data: current_state,
-                            success: (data) => {
-                                form.update(data);
-                                form.wait(false);
-                                Galaxy.emit.debug("tool-form::postchange()", "Received new model.", data);
-                                process.resolve();
-                            },
-                            error: (response) => {
-                                Galaxy.emit.debug("tool-form::postchange()", "Refresh request failed.", response);
-                                process.reject();
-                            },
-                        });
-                    },
-                },
-                options
-            )
-        );
-        this.deferred = this.form.deferred;
-        this.setElement("<div/>");
-        this.$el.append(this.form.$el);
-    },
-
-    _customize: function (form) {
-        const Galaxy = getGalaxyInstance();
-        const options = form.model.attributes;
-        var inputs = options.inputs;
-        /* only append notification interface if
-           Galaxy has the server mail configured
-        */
-        if (Galaxy.config.server_mail_configured && !Galaxy.user.isAnonymous()) {
-            inputs.push({
-                name: `send_email_notification`,
-                label: _l("Email notification"),
-                type: "boolean",
-                value: "false",
-                ignore: "false",
-                help: _l("Send an email notification when the job completes."),
-            });
-        }
-
-        // build execute button
-        const execute_button = new Ui.Button({
-            icon: "fa-check",
-            tooltip: `Execute: ${options.name} (${options.version})`,
-            title: _l("Execute"),
-            cls: "btn btn-primary",
-            wait_cls: "btn btn-info",
-            onclick: () => {
-                execute_button.wait();
-                form.portlet.disable();
-                this.submit(options, () => {
-                    execute_button.unwait();
-                    form.portlet.enable();
-                });
-            },
-        });
-        options.buttons = { execute: execute_button };
-
-        // remap feature
-        if (options.job_id && options.job_remap) {
-            let label;
-            let help;
-            if (options.job_remap === "job_produced_collection_elements") {
-                label = "Replace elements in collection ?";
-                help =
-                    "The previous run of this tool failed. Use this option to replace the failed element(s) in the dataset collection that were produced during the previous tool run.";
-            } else {
-                label = "Resume dependencies from this job ?";
-                help =
-                    "The previous run of this tool failed and other tools were waiting for it to finish successfully. Use this option to resume those tools using the new output(s) of this tool run.";
-            }
-            options.inputs.push({
-                label: label,
-                name: "rerun_remap_job_id",
-                type: "select",
-                display: "radio",
-                ignore: "__ignore__",
-                value: "__ignore__",
-                options: [
-                    ["Yes", options.job_id],
-                    ["No", "__ignore__"],
-                ],
-                help: help,
-            });
-        }
-
-        // Job Re-use Options
-        let extra_user_preferences = {};
-        if (Galaxy.user.attributes.preferences && "extra_user_preferences" in Galaxy.user.attributes.preferences) {
-            extra_user_preferences = JSON.parse(Galaxy.user.attributes.preferences.extra_user_preferences);
-        }
-        const use_cached_job =
-            "use_cached_job|use_cached_job_checkbox" in extra_user_preferences
-                ? extra_user_preferences["use_cached_job|use_cached_job_checkbox"]
-                : false;
-        if (use_cached_job === "true") {
-            options.inputs.push({
-                label: "BETA: Attempt to re-use jobs with identical parameters ?",
-                help: "This may skip executing jobs that you have already run",
-                name: "use_cached_job",
-                type: "select",
-                display: "radio",
-                ignore: "__ignore__",
-                value: "__ignore__",
-                options: [
-                    ["No", false],
-                    ["Yes", true],
-                ],
-            });
-        }
-    },
-
-    /** Submit a regular job.
-     * @param{dict}     options   - Specifies tool id and version
-     * @param{function} callback  - Called when request has completed
-     */
-    submit: function (options, callback) {
-        const Galaxy = getGalaxyInstance();
-        const history_id = Galaxy.currHistoryPanel && Galaxy.currHistoryPanel.model.id;
-        const job_def = {
-            history_id: history_id,
-            tool_id: options.id,
-            tool_version: options.version,
-            inputs: this.form.data.create(),
-        };
-        this.form.trigger("reset");
-        if (!this.validate(job_def)) {
-            Galaxy.emit.debug("tool-form::submit()", "Submission canceled. Validation failed.");
-            callback && callback();
-            return;
-        }
-        if (options.action !== `${getAppRoot()}tool_runner/index`) {
-            const $f = $("<form/>").attr({
-                action: options.action,
-                method: options.method,
-                enctype: options.enctype,
-            });
-            _.each(job_def.inputs, (value, key) => {
-                $f.append($("<input/>").attr({ name: key, value: value }));
-            });
-            $f.hide().appendTo("body").submit().remove();
-            callback && callback();
-            return;
-        }
-        Galaxy.emit.debug("tool-form::submit()", "Validation complete.", job_def);
-        Utils.request({
-            type: "POST",
-            url: `${getAppRoot()}api/tools`,
-            data: job_def,
-            success: (response) => {
-                callback && callback();
-                this.$el.children().hide();
-                if (response.produces_entry_points) {
-                    for (const job of response.jobs) {
-                        const toolEntryPointsInstance = Vue.extend(ToolEntryPoints);
-                        const vm = document.createElement("div");
-                        this.$el.append(vm);
-                        const instance = new toolEntryPointsInstance({
-                            propsData: {
-                                jobId: job.id,
-                            },
-                        });
-                        instance.$mount(vm);
-                    }
-                }
-                this.$el.append(this._templateSuccess(response, job_def));
-                const enable_tool_recommendations = Galaxy.config.enable_tool_recommendations;
-                if (enable_tool_recommendations === true || enable_tool_recommendations === "true") {
-                    // show tool recommendations
-                    const ToolRecommendationInstance = Vue.extend(ToolRecommendation);
-                    const vm = document.createElement("div");
-                    this.$el.append(vm);
-                    const instance = new ToolRecommendationInstance({
-                        propsData: {
-                            toolId: job_def.tool_id,
-                        },
-                    });
-                    instance.$mount(vm);
-                }
-                this.$el.parent().scrollTop(0);
-                // Show Webhook if job is running
-                if (response.jobs && response.jobs.length > 0) {
-                    this.$el.append($("<div/>", { id: "webhook-view" }));
-                    new Webhooks.WebhookView({
-                        type: "tool",
-                        toolId: job_def.tool_id,
-                    });
-                }
-                if (Galaxy.currHistoryPanel) {
-                    this.form.stopListening(Galaxy.currHistoryPanel.collection);
-                    Galaxy.currHistoryPanel.refreshContents();
-                }
-            },
-            error: (response) => {
-                callback && callback();
-                Galaxy.emit.debug("tool-form::submit", "Submission failed.", response);
-                let input_found = false;
-                if (response && response.err_data) {
-                    const error_messages = this.form.data.matchResponse(response.err_data);
-                    for (const input_id in error_messages) {
-                        this.form.highlight(input_id, error_messages[input_id]);
-                        input_found = true;
-                        break;
-                    }
-                }
-                if (!input_found) {
-                    this.modal.show({
-                        title: _l("Job submission failed"),
-                        body: this._templateError(job_def, response && response.err_msg),
-                        buttons: {
-                            Close: () => {
-                                this.modal.hide();
-                            },
-                        },
-                    });
-                }
-            },
-        });
-    },
-
-    /** Validate job dictionary.
-     * @param{dict}     job_def   - Job execution dictionary
-     */
-    validate: function (job_def) {
-        const Galaxy = getGalaxyInstance();
-        const job_inputs = job_def.inputs;
-        let batch_n = -1;
-        let batch_src = null;
-        for (const job_input_id in job_inputs) {
-            const input_value = job_inputs[job_input_id];
-            const input_id = this.form.data.match(job_input_id);
-            const input_field = this.form.field_list[input_id];
-            const input_def = this.form.input_list[input_id];
-            if (!input_id || !input_def || !input_field) {
-                Galaxy.emit.debug("tool-form::validate()", "Retrieving input objects failed.");
-                continue;
-            }
-            if (!input_def.optional && input_value == null && input_def.type != "hidden") {
-                this.form.highlight(input_id, "This input requires a value.");
-                return false;
-            }
-            if (input_field.validate) {
-                const message = input_field.validate();
-                if (message) {
-                    this.form.highlight(input_id, message);
-                    return false;
-                }
-            }
-            if (input_value && input_value.batch) {
-                const n = input_value.values.length;
-                const src = n > 0 && input_value.values[0] && input_value.values[0].src;
-                if (src) {
-                    if (batch_src === null) {
-                        batch_src = src;
-                    } else if (batch_src !== src) {
-                        this.form.highlight(
-                            input_id,
-                            "Please select either dataset or dataset list fields for all batch mode fields."
-                        );
-                        return false;
-                    }
-                }
-                if (batch_n === -1) {
-                    batch_n = n;
-                } else if (batch_n !== n) {
-                    this.form.highlight(
-                        input_id,
-                        `Please make sure that you select the same number of inputs for all batch mode fields. This field contains <b>${n}</b> selection(s) while a previous field contains <b>${batch_n}</b>.`
-                    );
-                    return false;
-                }
-            }
-        }
-        return true;
-    },
-
-    _getInputs: function (job_def) {
-        const inputs = [];
-        const index = {};
-        for (const i in job_def.inputs) {
-            const input = job_def.inputs[i];
-            if (input && Array.isArray(input.values)) {
-                for (const j of input.values) {
-                    if (j.src && !index[j.id]) {
-                        inputs.push(j);
-                        index[j.id] = true;
-                    }
-                }
-            }
-        }
-        return inputs;
-    },
-
-    _templateRow: function (list, title) {
-        let blurb = "";
-        if (list.length > 0) {
-            blurb += `<p>${title}:</p>`;
-            list.sort((a, b) => {
-                b.hid - a.hid;
-            });
-            blurb += `<ul>`;
-            for (const item of list) {
-                const rowString = `${item.hid}: ${_.escape(item.name)}`;
-                blurb += `<li><b>${rowString}</b></li>`;
-            }
-            blurb += `</ul>`;
-        }
-        return blurb;
-    },
-
-    _templateSuccess: function (response, job_def) {
-        const njobs = response && response.jobs ? response.jobs.length : 0;
-        if (njobs > 0) {
-            const inputs = this._getInputs(job_def);
-            const ninputs = inputs.length;
-            const noutputs = response.outputs.length;
-            const njobsText = njobs > 1 ? `${njobs} jobs` : `1 job`;
-            const ninputsText = ninputs > 1 ? `${ninputs} inputs` : `this input`;
-            const noutputsText = noutputs > 1 ? `${noutputs} outputs` : `this output`;
-            const tool_name = this.form.model.get("name");
-            return `<div class="donemessagelarge">
-                        <p>
-                            Executed <b>${tool_name}</b> and successfully added ${njobsText} to the queue.
-                        </p>
-                        ${this._templateRow(inputs, `The tool uses ${ninputsText}`)}
-                        ${this._templateRow(response.outputs, `It produces ${noutputsText}`)}
-                        <p>
-                            You can check the status of queued jobs and view the resulting data by refreshing the History panel. When the job has been run the status will change from 'running' to 'finished' if completed successfully or 'error' if problems were encountered.
-                        </p>
-                    </div>`;
-        } else {
-            return this._templateError(response, "Invalid success response. No jobs found.");
-        }
-    },
-
-    _templateError: function (response, err_msg) {
-        return $("<div/>")
-            .addClass("errormessagelarge")
-            .append(
-                $("<p/>").text(
-                    `The server could not complete the request. Please contact the Galaxy Team if this error persists. ${
-                        err_msg || ""
-                    }`
-                )
-            )
-            .append($("<pre/>").text(JSON.stringify(response, null, 4)));
-    },
-});
-
-export default {
-    View: View,
-};
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 49433ed6d73..f7b71f82d12 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -364,8 +364,8 @@ body {
                     .nav-note {
                         @extend .font-weight-bold;
                         @extend .position-absolute;
-                        left: 2.2rem;
-                        top: 2.2rem;
+                        left: 1.9rem;
+                        top: 1.9rem;
                         font-size: 0.6rem;
                     }
                 }
diff --git a/client/src/style/scss/overrides.scss b/client/src/style/scss/overrides.scss
index 9593a7323db..637584c2382 100644
--- a/client/src/style/scss/overrides.scss
+++ b/client/src/style/scss/overrides.scss
@@ -35,6 +35,10 @@ pre {
 .dropdown-menu {
     .dropdown-item {
         text-decoration: none;
+        .fa {
+            @extend .fa-fw;
+            @extend .mr-2;
+        }
     }
 }
 
diff --git a/client/tests/qunit/tests/form_tests.js b/client/tests/qunit/tests/form_tests.js
index 2023ebb6f61..1968121230e 100644
--- a/client/tests/qunit/tests/form_tests.js
+++ b/client/tests/qunit/tests/form_tests.js
@@ -8,9 +8,10 @@ import testApp from "../test-app";
 import InputElement from "mvc/form/form-input";
 import Ui from "mvc/ui/ui-misc";
 import FormData from "mvc/form/form-data";
-import ToolForm from "mvc/tool/tool-form";
+import Form from "mvc/form/form-view";
 import Utils from "utils/utils";
 import { getAppRoot } from "onload/loadConfig";
+import toolsTestBuild from "../test-data/json/tools.test.build";
 
 QUnit.module("Form test", {
     beforeEach: function () {
@@ -32,16 +33,9 @@ QUnit.module("Form test", {
     },
 });
 
-QUnit.test("tool-form", function (assert) {
-    var toolform = new ToolForm.View({ id: "test" });
-    $("body").prepend(toolform.$el);
-    window.fakeserver.respond();
-
-    var form = toolform.form;
-    assert.ok(
-        form.$(".portlet-title-text").html() == `<b itemprop="name">_name</b> <span itemprop="description">_description</span> (Galaxy Version _version)`,
-        "Title correct"
-    );
+QUnit.test("form", function (assert) {
+    var form = new Form(toolsTestBuild);
+    $("body").prepend(form.$el);
     var tour_ids = [];
     $("[tour_id]").each(function () {
         tour_ids.push($(this).attr("tour_id"));
@@ -90,7 +84,7 @@ QUnit.test("data", function (assert) {
     Utils.get({
         url: getAppRoot() + "api/tools/test/build",
         success: function (response) {
-            FormData.visitInputs(response.inputs, function (node, name, context) {
+            FormData.visitInputs(response.inputs, function (node, name) {
                 visits.push({ name: name, node: node });
             });
         },
diff --git a/client/yarn.lock b/client/yarn.lock
index 1cd304c4292..cdc734cab1e 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3248,6 +3248,11 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
+bezier-easing@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+  integrity sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY=
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -15169,6 +15174,13 @@ vue-rx@^6.2.0:
   resolved "https://registry.yarnpkg.com/vue-rx/-/vue-rx-6.2.0.tgz#c3b86462b252626edd16417385bb9054a3a23acb"
   integrity sha512-tpKUcqS5IUYS+HsdbR5TlE5LL9PK4zwlplEtmMeydnbqaUTa9ciLMplJXAtFSiQw1vuURoyEJmCXqMxaVEIloQ==
 
+vue-scrollto@^2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/vue-scrollto/-/vue-scrollto-2.20.0.tgz#3ba52239a62710c97003d12d4393f1f3393cd5cc"
+  integrity sha512-7i+AGKJTThZnMEkhIPgrZjyAX+fXV7/rGdg+CV283uZZwCxwiMXaBLTmIc5RTA4uwGnT+E6eJle3mXQfM2OD3A==
+  dependencies:
+    bezier-easing "2.1.0"
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index 54d8a126222..46a476e85a0 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -361,7 +361,7 @@ registration:
 
 tool_form:
   selectors:
-    options: '#options [data-toggle="dropdown"]'
+    options: '.tool-dropdown'
     execute: 'button#execute'
     parameter_div: 'div.ui-form-element[tour_id="${parameter}"]'
     parameter_checkbox: 'div.ui-form-element[tour_id="${parameter}"] .ui-switch div'