diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorInterfaces.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorInterfaces.vue
index 1f658950e8..5180951a47 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorInterfaces.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorInterfaces.vue
@@ -1,8 +1,5 @@
 <template>
-    <fieldset class="rows" v-if="display">
-        <h2>
-            {{ $__("Interfaces") }}
-        </h2>
+    <fieldset class="rows">
         <ol v-for="vi in vendor.interfaces" :key="vi.id">
             <h3>{{ vi.name }}</h3>
             <li v-if="vi.type">
@@ -65,113 +62,24 @@
             </li>
         </ol>
     </fieldset>
-    <fieldset class="rows" v-else>
-        <legend>{{ $__("Interfaces") }}</legend>
-        <fieldset
-            v-for="(vendorInterface, i) in vendor.interfaces"
-            v-bind:key="i"
-            class="rows"
-            :id="`vendor_interface_${i}`"
-        >
-            <legend>
-                {{ $__("Interface details") }}
-            </legend>
-            <ol>
-                <li>
-                    <label :for="`vendorInterface_${i}_name`"
-                        >{{ $__("Name") }}:</label
-                    >
-                    <input
-                        :id="`vendorInterface_${i}_name`"
-                        v-model="vendorInterface.name"
-                    />
-                </li>
-                <li>
-                    <label for="vendorInterface_type">{{ $__("Type") }}:</label>
-                    <v-select
-                        id="vendorInterface_type"
-                        v-model="vendorInterface.type"
-                        label="description"
-                        :reduce="av => av.value"
-                        :options="authorisedValues['av_vendor_interface_types']"
-                    />
-                </li>
-                <li>
-                    <label :for="`vendorInterface_${i}_uri`"
-                        >{{ $__("URI") }}:</label
-                    >
-                    <input
-                        :id="`vendorInterface_${i}_uri`"
-                        v-model="vendorInterface.uri"
-                    />
-                </li>
-                <li>
-                    <label :for="`vendorInterface_${i}_login`"
-                        >{{ $__("Login") }}:</label
-                    >
-                    <input
-                        :id="`vendorInterface_${i}_login`"
-                        v-model="vendorInterface.login"
-                    />
-                </li>
-                <li>
-                    <label :for="`vendorInterface_${i}_password`"
-                        >{{ $__("Password") }}:</label
-                    >
-                    <input
-                        :id="`vendorInterface_${i}_password`"
-                        v-model="vendorInterface.password"
-                    />
-                </li>
-                <li>
-                    <label :for="`vendorInterface_${i}_accountemail`"
-                        >{{ $__("Account email") }}:</label
-                    >
-                    <input
-                        :id="`vendorInterface_${i}_accountemail`"
-                        v-model="vendorInterface.account_email"
-                        type="email"
-                    />
-                </li>
-                <li>
-                    <label :for="`vendorInterface_${i}_notes`"
-                        >{{ $__("Notes") }}:</label
-                    >
-                    <textarea
-                        :id="`vendorInterface_${i}_notes`"
-                        v-model="vendorInterface.notes"
-                        cols="40"
-                        rows="3"
-                    />
-                </li>
-            </ol>
-            <span class="btn btn-default" @click.prevent="deleteInterface(i)"
-                ><font-awesome-icon icon="trash" />
-                {{ $__("Delete interface") }}</span
-            >
-        </fieldset>
-        <span class="btn btn-default" @click="addInterface"
-            ><font-awesome-icon icon="plus" />
-            {{ $__("Add new interface") }}</span
-        >
-    </fieldset>
 </template>
 
 <script>
-import { inject } from "vue";
+import { inject, ref } from "vue";
 import Link from "../Link.vue";
 
 export default {
     props: {
         vendor: Object,
-        display: Boolean,
     },
     setup() {
         const vendorStore = inject("vendorStore");
-        const { get_lib_from_av, authorisedValues } = vendorStore;
+        const { get_lib_from_av } = vendorStore;
+
+        const showPassword = ref(false);
         return {
             get_lib_from_av,
-            authorisedValues,
+            showPassword,
         };
     },
     data() {
@@ -179,22 +87,6 @@ export default {
             showPassword: false,
         };
     },
-    methods: {
-        addInterface() {
-            this.vendor.interfaces.push({
-                type: "",
-                name: "",
-                uri: "",
-                login: "",
-                password: "",
-                account_email: "",
-                notes: "",
-            });
-        },
-        deleteInterface(interfaceIndex) {
-            this.vendor.interfaces.splice(interfaceIndex, 1);
-        },
-    },
     components: {
         Link,
     },
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorResource.vue
index 3a75abedb2..4979a87471 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorResource.vue
@@ -51,6 +51,7 @@ export default {
             },
             props,
             moduleStore: "vendorStore",
+            formGroupsDisplayMode: "accordion",
             resourceAttrs: [
                 {
                     name: "id",
@@ -314,36 +315,15 @@ export default {
                     type: "relationshipWidget",
                     group: __("Interfaces"),
                     showElement: {
-                        type: "table",
-                        columnData: "interfaces",
+                        type: "component",
                         hidden: vendor => !!vendor.interfaces?.length,
-                        columns: [
-                            {
-                                name: $__("Type"),
-                                value: "type",
-                                av: "av_vendor_interface_types",
+                        componentPath: "./Vendors/VendorInterfaces.vue",
+                        componentProps: {
+                            vendor: {
+                                type: "resource",
+                                value: null,
                             },
-                            {
-                                name: $__("Name"),
-                                value: "name",
-                            },
-                            {
-                                name: $__("URI"),
-                                value: "uri",
-                            },
-                            {
-                                name: $__("Password"),
-                                value: "password",
-                            },
-                            {
-                                name: $__("Email"),
-                                value: "account_email",
-                            },
-                            {
-                                name: $__("Notes"),
-                                value: "notes",
-                            },
-                        ],
+                        },
                     },
                     componentProps: {
                         resourceRelationships: {
@@ -721,118 +701,99 @@ export default {
 
         const appendToShow = componentData => {
             let format_date = componentData.instancedResource.format_date;
-            return [
-                {
-                    type: "component",
-                    name: $__("Contracts"),
-                    hidden: vendor => vendor.contracts.length,
-                    componentPath: "./RelationshipTableDisplay.vue",
-                    componentProps: {
-                        tableOptions: {
-                            type: "object",
-                            value: {
-                                columns: [
-                                    {
-                                        title: __("Name"),
-                                        data: "contractname",
-                                        render: function (
-                                            data,
-                                            type,
-                                            row,
-                                            meta
-                                        ) {
-                                            return (
-                                                `<a href="/cgi-bin/koha/admin/aqcontract.pl?op=add_form&booksellerid=${row.booksellerid}&contractnumber=${row.contractnumber}">` +
-                                                escape_str(row.contractname) +
-                                                "</a>"
-                                            );
-                                        },
+            const contracts = {
+                type: "component",
+                name: $__("Contracts"),
+                componentPath: "./RelationshipTableDisplay.vue",
+                componentProps: {
+                    tableOptions: {
+                        type: "object",
+                        value: {
+                            columns: [
+                                {
+                                    title: __("Name"),
+                                    data: "contractname",
+                                    render: function (data, type, row, meta) {
+                                        return (
+                                            `<a href="/cgi-bin/koha/admin/aqcontract.pl?op=add_form&booksellerid=${row.booksellerid}&contractnumber=${row.contractnumber}">` +
+                                            escape_str(row.contractname) +
+                                            "</a>"
+                                        );
                                     },
-                                    {
-                                        title: __("Description"),
-                                        data: "contractdescription",
+                                },
+                                {
+                                    title: __("Description"),
+                                    data: "contractdescription",
+                                },
+                                {
+                                    title: __("Start date"),
+                                    data: "contractstartdate",
+                                    render: function (data, type, row, meta) {
+                                        return type == "sort"
+                                            ? row.contractstartdate
+                                            : format_date(
+                                                  row.contractstartdate
+                                              );
                                     },
-                                    {
-                                        title: __("Start date"),
-                                        data: "contractstartdate",
-                                        render: function (
-                                            data,
-                                            type,
-                                            row,
-                                            meta
-                                        ) {
-                                            return type == "sort"
-                                                ? row.contractstartdate
-                                                : format_date(
-                                                      row.contractstartdate
+                                },
+                                {
+                                    title: __("End date"),
+                                    data: "contractenddate",
+                                    render: function (data, type, row, meta) {
+                                        return type == "sort"
+                                            ? row.contractenddate
+                                            : format_date(row.contractenddate);
+                                    },
+                                },
+                                ...(componentData.instancedResource.isUserPermitted(
+                                    "CAN_user_acquisition_contracts_manage"
+                                )
+                                    ? [
+                                          {
+                                              title: __("Actions"),
+                                              data: "contractnumber",
+                                              searchable: false,
+                                              orderable: false,
+                                              render: function (
+                                                  data,
+                                                  type,
+                                                  row,
+                                                  meta
+                                              ) {
+                                                  return (
+                                                      `<a class="btn btn-default btn-xs" href="/cgi-bin/koha/admin/aqcontract.pl?op=add_form&contractnumber=${row.contractnumber}&booksellerid=${row.booksellerid}"><i class="fa-solid fa-pencil" aria-hidden="true"></i>` +
+                                                      " " +
+                                                      __("Edit") +
+                                                      "</a>" +
+                                                      `<a style="margin-left: 5px;" class="btn btn-default btn-xs" href="/cgi-bin/koha/admin/aqcontract.pl?op=delete_confirm&contractnumber=${row.contractnumber}&booksellerid=${row.booksellerid}"><i class="fa-solid fa-trash-can" aria-hidden="true"></i>` +
+                                                      " " +
+                                                      __("Delete") +
+                                                      "</a>"
                                                   );
-                                        },
-                                    },
-                                    {
-                                        title: __("End date"),
-                                        data: "contractenddate",
-                                        render: function (
-                                            data,
-                                            type,
-                                            row,
-                                            meta
-                                        ) {
-                                            return type == "sort"
-                                                ? row.contractenddate
-                                                : format_date(
-                                                      row.contractenddate
-                                                  );
-                                        },
-                                    },
-                                    ...(componentData.instancedResource.isUserPermitted(
-                                        "CAN_user_acquisition_contracts_manage"
-                                    )
-                                        ? [
-                                              {
-                                                  title: __("Actions"),
-                                                  data: "contractnumber",
-                                                  searchable: false,
-                                                  orderable: false,
-                                                  render: function (
-                                                      data,
-                                                      type,
-                                                      row,
-                                                      meta
-                                                  ) {
-                                                      return (
-                                                          `<a class="btn btn-default btn-xs" href="/cgi-bin/koha/admin/aqcontract.pl?op=add_form&contractnumber=${row.contractnumber}&booksellerid=${row.booksellerid}"><i class="fa-solid fa-pencil" aria-hidden="true"></i>` +
-                                                          " " +
-                                                          __("Edit") +
-                                                          "</a>" +
-                                                          `<a style="margin-left: 5px;" class="btn btn-default btn-xs" href="/cgi-bin/koha/admin/aqcontract.pl?op=delete_confirm&contractnumber=${row.contractnumber}&booksellerid=${row.booksellerid}"><i class="fa-solid fa-trash-can" aria-hidden="true"></i>` +
-                                                          " " +
-                                                          __("Delete") +
-                                                          "</a>"
-                                                      );
-                                                  },
                                               },
-                                          ]
-                                        : []),
-                                ],
-                                dom: '<<"table_entries">>',
-                                autoWidth: false,
-                                data: componentData.resource.contracts,
-                            },
-                        },
-                        resource: {
-                            type: "resource",
-                        },
-                        resourceName: {
-                            type: "string",
-                            value: $__("contract"),
-                        },
-                        resourceNamePlural: {
-                            type: "string",
-                            value: $__("contracts"),
+                                          },
+                                      ]
+                                    : []),
+                            ],
+                            dom: '<<"table_entries">>',
+                            autoWidth: false,
+                            data: componentData.resource.contracts,
                         },
                     },
+                    resource: {
+                        type: "resource",
+                    },
+                    resourceName: {
+                        type: "string",
+                        value: $__("contract"),
+                    },
+                    resourceNamePlural: {
+                        type: "string",
+                        value: $__("contracts"),
+                    },
                 },
-            ];
+            };
+            return componentData.resource.contracts.length ? [contracts] : [];
         };
 
         baseResource.created();