diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
index cd968c2029..3db1eee90b 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
@@ -1,5 +1,9 @@
 <template>
-    <div id="toolbar" class="btn-toolbar">
+    <div
+        id="toolbar"
+        :class="sticky ? 'btn-toolbar sticky' : 'btn-toolbar'"
+        ref="toolbar"
+    >
         <slot />
     </div>
 </template>
@@ -7,5 +11,29 @@
 <script>
 export default {
     name: "Toolbar",
+    props: {
+        sticky: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            observer: null,
+        };
+    },
+    methods: {
+        stickyToolbar([e]) {
+            e.target.classList.toggle("floating", e.intersectionRatio < 1);
+        },
+    },
+    mounted() {
+        if (this.sticky) {
+            this.observer = new IntersectionObserver(this.stickyToolbar, {
+                threshold: [1],
+            });
+            this.observer.observe(this.$refs.toolbar);
+        }
+    },
 };
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorFormAdd.vue
index 4f770c0456..669653fa82 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorFormAdd.vue
@@ -1,32 +1,30 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
-    <div v-else id="vendor_add">
+    <template v-else>
         <h1 v-if="vendor.id">
             {{ $__("Edit vendor #%s").format(vendor.id) }}
         </h1>
         <h1 v-else>{{ $__("Add vendor") }}</h1>
-        <div>
-            <form @submit="onSubmit($event)">
-                <VendorDetails :vendor="vendor" />
-                <VendorContacts :vendor="vendor" />
-                <VendorInterfaces :vendor="vendor" />
-                <VendorOrderingInformation
-                    :vendor="vendor"
-                    :verifyDiscountValue="verifyDiscountValue"
-                    :discountValid="discountValid"
-                />
-                <fieldset class="action">
-                    <ButtonSubmit />
-                    <router-link
-                        :to="{ name: 'VendorList' }"
-                        role="button"
-                        class="cancel"
-                        >{{ $__("Cancel") }}</router-link
-                    >
-                </fieldset>
-            </form>
-        </div>
-    </div>
+        <form @submit="onSubmit($event)" id="add_vendor">
+            <Toolbar :sticky="true">
+                <ButtonSubmit :text="$__('Save')" />
+                <ToolbarButton
+                    :to="{ name: 'VendorList' }"
+                    :title="$__('Cancel')"
+                    icon="times"
+                >
+                </ToolbarButton>
+            </Toolbar>
+            <VendorDetails :vendor="vendor" />
+            <VendorContacts :vendor="vendor" />
+            <VendorInterfaces :vendor="vendor" />
+            <VendorOrderingInformation
+                :vendor="vendor"
+                :verifyDiscountValue="verifyDiscountValue"
+                :discountValid="discountValid"
+            />
+        </form>
+    </template>
 </template>
 
 <script>
@@ -37,6 +35,8 @@ import VendorDetails from "./VendorDetails.vue";
 import VendorContacts from "./VendorContacts.vue";
 import VendorOrderingInformation from "./VendorOrderingInformation.vue";
 import VendorInterfaces from "./VendorInterfaces.vue";
+import Toolbar from "../Toolbar.vue";
+import ToolbarButton from "../ToolbarButton.vue";
 
 export default {
     data() {
@@ -197,6 +197,8 @@ export default {
         VendorContacts,
         VendorOrderingInformation,
         VendorInterfaces,
+        Toolbar,
+        ToolbarButton,
     },
     name: "VendorFormAdd",
 };
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts
index 8772607f04..c24ca4c26b 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts
@@ -12,6 +12,7 @@ import {
     faPlus,
     faSpinner,
     faTrash,
+    faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import vSelect from "vue-select";
@@ -24,7 +25,8 @@ library.add(
     faPencil,
     faPlus,
     faSpinner,
-    faTrash
+    faTrash,
+    faTimes
 );
 
 import App from "../components/Vendors/Main.vue";