diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
index 34e77e98b8..27eee68c05 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
@@ -1,24 +1,27 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="agreements_show">
+        <Toolbar>
+            <ToolbarButton
+                :to="{
+                    name: 'AgreementsFormAddEdit',
+                    params: { agreement_id: agreement.agreement_id },
+                }"
+                class="btn btn-default"
+                icon="pencil"
+                :title="$__('Edit')"
+            />
+            <a
+                @click="
+                    delete_agreement(agreement.agreement_id, agreement.name)
+                "
+                class="btn btn-default"
+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
+            >
+        </Toolbar>
+
         <h2>
             {{ $__("Agreement #%s").format(agreement.agreement_id) }}
-            <span class="action_links">
-                <router-link
-                    :to="{
-                        name: 'AgreementsFormAddEdit',
-                        params: { agreement_id: agreement.agreement_id },
-                    }"
-                    :title="$__('Edit')"
-                    ><i class="fa fa-pencil"></i
-                ></router-link>
-                <a
-                    @click="
-                        delete_agreement(agreement.agreement_id, agreement.name)
-                    "
-                    ><i class="fa fa-trash"></i
-                ></a>
-            </span>
         </h2>
         <div>
             <fieldset class="rows">
@@ -334,6 +337,8 @@
 <script>
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 
 export default {
     setup() {
@@ -420,15 +425,11 @@ export default {
             )
         },
     },
+    components: { Toolbar, ToolbarButton },
     name: "AgreementsShow",
 }
 </script>
 <style scoped>
-.action_links a {
-    padding-left: 0.2em;
-    font-size: 11px;
-    cursor: pointer;
-}
 #agreement_documents ul {
     padding-left: 0px;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesShow.vue
index e2e2c9bbe6..b864affc4e 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesShow.vue
@@ -1,25 +1,27 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else-if="erm_package" id="packages_show">
+        <Toolbar>
+            <ToolbarButton
+                :to="{
+                    name: 'EHoldingsLocalPackagesFormAddEdit',
+                    params: { package_id: erm_package.package_id },
+                }"
+                class="btn btn-default"
+                icon="pencil"
+                :title="$__('Edit')"
+            />
+            <a
+                @click="
+                    delete_package(erm_package.package_id, erm_package.name)
+                "
+                class="btn btn-default"
+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
+            >
+        </Toolbar>
+
         <h2>
             {{ $__("Package #%s").format(erm_package.package_id) }}
-            <span class="action_links">
-                <router-link
-                    :to="{
-                        name: 'EHoldingsLocalPackagesFormAddEdit',
-                        params: { package_id: erm_package.package_id },
-                    }"
-                    :title="$__('Edit')"
-                    ><i class="fa fa-pencil"></i
-                ></router-link>
-
-                <a
-                    @click="
-                        delete_package(erm_package.package_id, erm_package.name)
-                    "
-                    ><i class="fa fa-trash"></i
-                ></a>
-            </span>
         </h2>
         <div>
             <fieldset class="rows">
@@ -116,6 +118,8 @@
 import { inject } from "vue"
 import EHoldingsPackageTitlesList from "./EHoldingsLocalPackageTitlesList.vue"
 import { APIClient } from "../../fetch/api-client.js"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 
 export default {
     setup() {
@@ -200,16 +204,13 @@ export default {
     },
     components: {
         EHoldingsPackageTitlesList,
+        Toolbar,
+        ToolbarButton,
     },
     name: "EHoldingsLocalPackagesShow",
 }
 </script>
 <style scoped>
-.action_links a {
-    padding-left: 0.2em;
-    font-size: 11px;
-    cursor: pointer;
-}
 fieldset.rows label {
     width: 25rem;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesShow.vue
index ef943ad0ed..fbe7ac2752 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesShow.vue
@@ -1,25 +1,25 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else-if="title" id="eholdings_title_show">
+        <Toolbar>
+            <ToolbarButton
+                :to="{
+                    name: 'EHoldingsLocalTitlesFormAddEdit',
+                    params: { title_id: title.title_id },
+                }"
+                class="btn btn-default"
+                icon="pencil"
+                :title="$__('Edit')"
+            />
+            <a
+                @click="delete_title(title.title_id, title.publication_title)"
+                class="btn btn-default"
+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
+            >
+        </Toolbar>
+
         <h2>
             {{ $__("Title #%s").format(title.title_id) }}
-            <span class="action_links">
-                <router-link
-                    :to="{
-                        name: 'EHoldingsLocalTitlesFormAddEdit',
-                        params: { title_id: title.title_id },
-                    }"
-                    :title="$__('Edit')"
-                    ><i class="fa fa-pencil"></i
-                ></router-link>
-
-                <a
-                    @click="
-                        delete_title(title.title_id, title.publication_title)
-                    "
-                    ><i class="fa fa-trash"></i
-                ></a>
-            </span>
         </h2>
         <div>
             <fieldset class="rows">
@@ -265,6 +265,8 @@
 import { inject } from "vue"
 import EHoldingsTitlePackagesList from "./EHoldingsLocalTitlePackagesList.vue"
 import { APIClient } from "../../fetch/api-client.js"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 
 export default {
     setup() {
@@ -363,16 +365,13 @@ export default {
     },
     components: {
         EHoldingsTitlePackagesList,
+        Toolbar,
+        ToolbarButton,
     },
     name: "EHoldingsLocalTitlesShow",
 }
 </script>
 <style scoped>
-.action_links a {
-    padding-left: 0.2em;
-    font-size: 11px;
-    cursor: pointer;
-}
 fieldset.rows label {
     width: 25rem;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
index 19c853f4aa..400267c08f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
@@ -1,21 +1,25 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="licenses_show">
+        <Toolbar>
+            <ToolbarButton
+                :to="{
+                    name: 'LicensesFormAddEdit',
+                    params: { license_id: license.license_id },
+                }"
+                class="btn btn-default"
+                icon="pencil"
+                :title="$__('Edit')"
+            />
+            <a
+                @click="delete_license(license.license_id, license.name)"
+                class="btn btn-default"
+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
+            >
+        </Toolbar>
+
         <h2>
             {{ $__("License #%s").format(license.license_id) }}
-            <span class="action_links">
-                <router-link
-                    :to="{
-                        name: 'LicensesFormAddEdit',
-                        params: { license_id: license.license_id },
-                    }"
-                    :title="$__('Edit')"
-                    ><i class="fa fa-pencil"></i
-                ></router-link>
-                <a @click="delete_license(license.license_id, license.name)"
-                    ><i class="fa fa-trash"></i
-                ></a>
-            </span>
         </h2>
         <div>
             <fieldset class="rows">
@@ -147,6 +151,8 @@
 <script>
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 
 export default {
     setup() {
@@ -227,16 +233,11 @@ export default {
             )
         },
     },
-    components: {},
+    components: { Toolbar, ToolbarButton },
     name: "LicensesShow",
 }
 </script>
 <style scoped>
-.action_links a {
-    padding-left: 0.2em;
-    font-size: 11px;
-    cursor: pointer;
-}
 #license_documents ul {
     padding-left: 0px;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersShow.vue
index eb4813aad4..d9d6137ae8 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersShow.vue
@@ -1,34 +1,37 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="usage_data_providers_show">
+        <Toolbar>
+            <ToolbarButton
+                :to="{
+                    name: 'UsageStatisticsDataProvidersFormAddEdit',
+                    params: {
+                        usage_data_provider_id:
+                            usage_data_provider.erm_usage_data_provider_id,
+                    },
+                }"
+                class="btn btn-default"
+                icon="pencil"
+                :title="$__('Edit')"
+            />
+            <a
+                @click="
+                    delete_usage_data_provider(
+                        usage_data_provider.erm_usage_data_provider_id,
+                        usage_data_provider.name
+                    )
+                "
+                class="btn btn-default"
+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
+            >
+        </Toolbar>
+
         <h2>
             {{
                 $__("Data provider #%s").format(
                     usage_data_provider.erm_usage_data_provider_id
                 )
             }}
-            <span class="action_links">
-                <router-link
-                    :to="{
-                        name: 'UsageStatisticsDataProvidersFormAddEdit',
-                        params: {
-                            usage_data_provider_id:
-                                usage_data_provider.erm_usage_data_provider_id,
-                        },
-                    }"
-                    :title="$__('Edit')"
-                    ><i class="fa fa-pencil"></i
-                ></router-link>
-                <a
-                    @click="
-                        delete_usage_data_provider(
-                            usage_data_provider.erm_usage_data_provider_id,
-                            usage_data_provider.name
-                        )
-                    "
-                    ><i class="fa fa-trash"></i
-                ></a>
-            </span>
         </h2>
         <div id="usage_data_providerstabs" class="toptabs numbered">
             <ul class="nav nav-tabs" role="tablist">
@@ -123,6 +126,8 @@
 <script>
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 import UsageStatisticsDataProvidersFileImport from "./UsageStatisticsDataProvidersFileImport.vue"
 import UsageStatisticsDataProvidersCounterLogs from "./UsageStatisticsDataProvidersCounterLogs.vue"
 import UsageStatisticsDataProviderDetails from "./UsageStatisticsDataProviderDetails.vue"
@@ -230,15 +235,12 @@ export default {
         UsageStatisticsDataProvidersCounterLogs,
         UsageStatisticsDataProviderDetails,
         UsageStatisticsProviderDataList,
+        Toolbar,
+        ToolbarButton,
     },
 }
 </script>
 <style scoped>
-.action_links a {
-    padding-left: 0.2em;
-    font-size: 11px;
-    cursor: pointer;
-}
 .active {
     cursor: pointer;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/SettingsProcessingsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/SettingsProcessingsShow.vue
index 96cec7ce2f..82c35eeaf2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/SettingsProcessingsShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/SettingsProcessingsShow.vue
@@ -1,19 +1,23 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="processing_show">
+        <Toolbar>
+            <ToolbarButton
+                :to="{
+                    name: 'SettingsProcessingsFormEdit',
+                    params: { processing_id: processing.processing_id },
+                }"
+                class="btn btn-default"
+                icon="pencil"
+                :title="$__('Edit')"
+            />
+            <a @click="doDelete()" class="btn btn-default"
+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
+            >
+        </Toolbar>
+
         <h2>
             {{ $__("Processing #%s").format(processing.processing_id) }}
-            <span class="action_links">
-                <router-link
-                    :to="{
-                        name: 'SettingsProcessingsFormEdit',
-                        params: { processing_id: processing.processing_id },
-                    }"
-                    :title="$__('Edit')"
-                    ><i class="fa fa-pencil"></i
-                ></router-link>
-                <a @click="doDelete()"><i class="fa fa-trash"></i></a>
-            </span>
         </h2>
         <div>
             <fieldset class="rows">
@@ -86,6 +90,8 @@
 <script>
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 
 export default {
     setup() {
@@ -164,13 +170,8 @@ export default {
             )
         },
     },
+    components: { Toolbar, ToolbarButton },
     name: "ProcessingsShow",
 }
 </script>
-<style scoped>
-.action_links a {
-    padding-left: 0.2em;
-    font-size: 11px;
-    cursor: pointer;
-}
-</style>
+<style scoped></style>
diff --git a/t/cypress/integration/ERM/Agreements_spec.ts b/t/cypress/integration/ERM/Agreements_spec.ts
index e8b18014f6..f642034385 100644
--- a/t/cypress/integration/ERM/Agreements_spec.ts
+++ b/t/cypress/integration/ERM/Agreements_spec.ts
@@ -555,7 +555,7 @@ describe("Agreement CRUD operations", () => {
         // AV's libs displayed
         // Tables for periods and users
     });
-    it("Delete agreement", () => {
+    it.only("Delete agreement", () => {
         let agreement = cy.get_agreement();
         let agreements = [agreement];
 
@@ -633,7 +633,7 @@ describe("Agreement CRUD operations", () => {
             "Agreement #" + agreement.agreement_id
         );
 
-        cy.get("#agreements_show .action_links .fa-trash").click();
+        cy.get("#agreements_show #toolbar").contains("Delete").click();
         cy.get(".dialog.alert.confirmation h1").contains(
             "remove this agreement"
         );
diff --git a/t/cypress/integration/ERM/DataProviders_spec.ts b/t/cypress/integration/ERM/DataProviders_spec.ts
index 1f80f6ca78..ccce9e9fdc 100644
--- a/t/cypress/integration/ERM/DataProviders_spec.ts
+++ b/t/cypress/integration/ERM/DataProviders_spec.ts
@@ -383,7 +383,9 @@ describe("Data provider CRUD operations", () => {
             "Data provider #" + dataProvider.erm_usage_data_provider_id
         );
 
-        cy.get("#usage_data_providers_show .action_links .fa-trash").click();
+        cy.get("#usage_data_providers_show #toolbar")
+            .contains("Delete")
+            .click();
         cy.get(".dialog.alert.confirmation h1").contains(
             "remove this data provider"
         );
diff --git a/t/cypress/integration/ERM/Licenses_spec.ts b/t/cypress/integration/ERM/Licenses_spec.ts
index 5718ca4c6c..b223e626ef 100644
--- a/t/cypress/integration/ERM/Licenses_spec.ts
+++ b/t/cypress/integration/ERM/Licenses_spec.ts
@@ -352,7 +352,7 @@ describe("License CRUD operations", () => {
         cy.wait(500); // Cypress is too fast! Vue hasn't populated the form yet!
         cy.get("#licenses_show h2").contains("License #" + license.license_id);
 
-        cy.get("#licenses_show .action_links .fa-trash").click();
+        cy.get("#licenses_show #toolbar").contains("Delete").click();
         cy.get(".dialog.alert.confirmation h1").contains("remove this license");
         cy.contains("Yes, delete").click();
 
diff --git a/t/cypress/integration/ERM/Packages_spec.ts b/t/cypress/integration/ERM/Packages_spec.ts
index 2ba71e529a..7f3655b15a 100644
--- a/t/cypress/integration/ERM/Packages_spec.ts
+++ b/t/cypress/integration/ERM/Packages_spec.ts
@@ -351,7 +351,7 @@ describe("Package CRUD operations", () => {
             "Package #" + erm_package.package_id
         );
 
-        cy.get("#packages_show .action_links .fa-trash").click();
+        cy.get("#packages_show #toolbar").contains("Delete").click();
         cy.get(".dialog.alert.confirmation h1").contains("remove this package");
         cy.contains("Yes, delete").click();
 
diff --git a/t/cypress/integration/ERM/Titles_spec.ts b/t/cypress/integration/ERM/Titles_spec.ts
index 22229b339c..8a05c232b2 100644
--- a/t/cypress/integration/ERM/Titles_spec.ts
+++ b/t/cypress/integration/ERM/Titles_spec.ts
@@ -514,7 +514,7 @@ describe("Title CRUD operations", () => {
             "Title #" + erm_title.title_id
         );
 
-        cy.get("#eholdings_title_show .action_links .fa-trash").click();
+        cy.get("#eholdings_title_show #toolbar").contains("Delete").click();
         cy.get(".dialog.alert.confirmation h1").contains("remove this title");
         cy.contains("Yes, delete").click();