diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseElement.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseElement.vue
index aa81904b0b..0c0830b13b 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseElement.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseElement.vue
@@ -57,6 +57,11 @@ export default {
                 if (prop.type === "boolean") {
                     acc[key] = prop.value;
                 }
+
+                if (key === "disabled") {
+                    const currentValue = acc[key];
+                    acc[key] = !!currentValue;
+                }
                 return acc;
             }, {});
             const attr = show ? this.attr.showElement : this.attr;
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
index 85c67a76fb..85ce005129 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
@@ -1,5 +1,6 @@
 <script>
 import { inject } from "vue";
+import { build_url } from "../composables/datatables";
 
 export default {
     setup(props) {
@@ -7,6 +8,9 @@ export default {
         const { setConfirmationDialog, setMessage, setError, setWarning } =
             inject("mainStore");
 
+        const AVStore = inject("AVStore");
+        const { get_lib_from_av, map_av_dt_filter } = AVStore;
+
         const format_date = $date;
         const patron_to_html = $patron_to_html;
 
@@ -18,6 +22,11 @@ export default {
             setWarning,
             format_date,
             patron_to_html,
+            logged_in_user,
+            escape_str,
+            get_lib_from_av,
+            map_av_dt_filter,
+            build_url,
         };
     },
     methods: {
@@ -166,6 +175,26 @@ export default {
         additionalFieldsChanged(additionalFieldValues, resource) {
             resource.extended_attributes = additionalFieldValues;
         },
+        getFilters(query, filterData) {
+            const filters = filterData ? filterData : this.tableFilters;
+            const filterOptions = filters.reduce((acc, filter) => {
+                acc[filter.name] = filter.value;
+                return acc;
+            }, {});
+
+            Object.keys(query).forEach(key => {
+                if (
+                    filterOptions.hasOwnProperty(key) &&
+                    query[key] !== filterOptions[key]
+                ) {
+                    filterOptions[key] = query[key];
+                }
+                if (!filterOptions.hasOwnProperty(key)) {
+                    filterOptions[key] = query[key];
+                }
+            });
+            return filterOptions;
+        },
     },
     name: "BaseResource",
     props: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementResource.vue
index 3d11ca0f61..c2f4deb5c7 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementResource.vue
@@ -1,4 +1,21 @@
 <template>
+    <ResourceList
+        v-if="action === 'list'"
+        v-bind="{
+            api_client,
+            i18n,
+            tableOptions,
+            resource_name,
+            goToResourceShow,
+            goToResourceEdit,
+            doResourceDelete,
+            goToResourceAdd,
+            tableFilters,
+            getFilters,
+            filterTable,
+            tableUrl,
+        }"
+    />
     <ResourceShow
         v-if="action === 'show'"
         v-bind="{
@@ -32,9 +49,10 @@ import { storeToRefs } from "pinia";
 import { APIClient } from "../../fetch/api-client.js";
 import ResourceShow from "../ResourceShow.vue";
 import ResourceFormAdd from "../ResourceFormAdd.vue";
+import ResourceList from "../ResourceList.vue";
 
 export default {
-    components: { ResourceShow, ResourceFormAdd },
+    components: { ResourceShow, ResourceFormAdd, ResourceList },
     extends: BaseResource,
     props: {
         action: String,
@@ -51,6 +69,9 @@ export default {
             av_agreement_relationships,
         } = storeToRefs(AVStore);
 
+        const vendorStore = inject("vendorStore");
+        const { vendors } = storeToRefs(vendorStore);
+
         return {
             ...BaseResource.setup({
                 resource_name: "agreement",
@@ -64,6 +85,8 @@ export default {
                 resource_table_url: APIClient.erm._baseURL + "agreements",
                 i18n: {
                     display_name: __("Agreement"),
+                    display_name_lc: __("agreement"),
+                    display_name_plural: __("agreements"),
                 },
                 av_agreement_statuses,
                 av_agreement_closure_reasons,
@@ -72,10 +95,15 @@ export default {
                 av_agreement_license_statuses,
                 av_agreement_license_location,
                 av_agreement_relationships,
+                agreement_table_settings,
+                vendors,
             }),
         };
     },
     data() {
+        const tableFilters = this.getTableFilters();
+        const defaults = this.getFilters(this.$route.query, tableFilters);
+
         return {
             resource_attrs: [
                 {
@@ -631,6 +659,55 @@ export default {
                 documents: [],
                 extended_attributes: [],
             },
+            tableOptions: {
+                columns: this.getTableColumns(),
+                options: {
+                    embed: "user_roles,vendor,extended_attributes,+strings",
+                },
+                url: () => this.tableUrl(defaults),
+                table_settings: this.agreement_table_settings,
+                add_filters: true,
+                filters_options: {
+                    1: () =>
+                        this.vendors.map(e => {
+                            e["_id"] = e["id"];
+                            e["_str"] = e["name"];
+                            return e;
+                        }),
+                    3: () => this.map_av_dt_filter("av_agreement_statuses"),
+                    4: () =>
+                        this.map_av_dt_filter("av_agreement_closure_reasons"),
+                    5: [
+                        { _id: 0, _str: this.$__("No") },
+                        { _id: 1, _str: this.$__("Yes") },
+                    ],
+                    6: () =>
+                        this.map_av_dt_filter(
+                            "av_agreement_renewal_priorities"
+                        ),
+                },
+                actions: {
+                    0: ["show"],
+                    "-1": this.embedded
+                        ? [
+                              {
+                                  select: {
+                                      text: this.$__("Select"),
+                                      icon: "fa fa-check",
+                                  },
+                              },
+                          ]
+                        : ["edit", "delete"],
+                },
+                default_filters: {
+                    "user_roles.user_id": function () {
+                        return defaults.by_mine
+                            ? logged_in_user.borrowernumber
+                            : "";
+                    },
+                },
+            },
+            tableFilters,
         };
     },
     methods: {
@@ -776,6 +853,162 @@ export default {
                 );
             }
         },
+        getTableColumns() {
+            let get_lib_from_av = this.get_lib_from_av;
+            let escape_str = this.escape_str;
+
+            return [
+                {
+                    title: __("Name"),
+                    data: "me.name:me.agreement_id",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return (
+                            '<a role="button" class="show">' +
+                            escape_str(`${row.name} (#${row.agreement_id})`) +
+                            "</a>"
+                        );
+                    },
+                },
+                {
+                    title: __("Vendor"),
+                    data: "vendor_id",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return row.vendor_id != undefined
+                            ? '<a href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=' +
+                                  row.vendor_id +
+                                  '">' +
+                                  escape_str(row.vendor.name) +
+                                  "</a>"
+                            : "";
+                    },
+                },
+                {
+                    title: __("Description"),
+                    data: "description",
+                    searchable: true,
+                    orderable: true,
+                },
+                {
+                    title: __("Status"),
+                    data: "status",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return escape_str(
+                            get_lib_from_av("av_agreement_statuses", row.status)
+                        );
+                    },
+                },
+                {
+                    title: __("Closure reason"),
+                    data: "closure_reason",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return escape_str(
+                            get_lib_from_av(
+                                "av_agreement_closure_reasons",
+                                row.closure_reason
+                            )
+                        );
+                    },
+                },
+                {
+                    title: __("Is perpetual"),
+                    data: "is_perpetual",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return escape_str(
+                            row.is_perpetual ? __("Yes") : __("No")
+                        );
+                    },
+                },
+                {
+                    title: __("Renewal priority"),
+                    data: "renewal_priority",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return escape_str(
+                            get_lib_from_av(
+                                "av_agreement_renewal_priorities",
+                                row.renewal_priority
+                            )
+                        );
+                    },
+                },
+            ];
+        },
+        getTableFilters() {
+            return [
+                {
+                    name: "by_expired",
+                    type: "checkbox",
+                    label: __("Filter by expired"),
+                    value: false,
+                    onChange: function (filters) {
+                        if (filters.by_expired) {
+                            filters.max_expiration_date = new Date()
+                                .toISOString()
+                                .substring(0, 10);
+                        } else {
+                            filters.max_expiration_date = "";
+                        }
+                        return filters;
+                    },
+                },
+                {
+                    name: "max_expiration_date",
+                    type: "component",
+                    label: __("on"),
+                    componentPath: "./FlatPickrWrapper.vue",
+                    props: {
+                        id: {
+                            type: "string",
+                            value: "max_expiration_date_filter",
+                        },
+                        disabled: {
+                            type: "resourceProperty",
+                            resourceProperty: "by_expired",
+                        },
+                    },
+                    value: "",
+                },
+                {
+                    name: "by_mine",
+                    type: "checkbox",
+                    label: __("Show mine only"),
+                    value: false,
+                },
+            ];
+        },
+        tableUrl(filters) {
+            let url = this.getResourceTableUrl();
+            if (filters?.by_expired)
+                url += "?max_expiration_date=" + filters.max_expiration_date;
+            return url;
+        },
+        async filterTable(filters, table, embedded = false) {
+            if (!embedded) {
+                if (filters.by_expired && !filters.max_expiration_date) {
+                    filters.max_expiration_date = new Date()
+                        .toISOString()
+                        .substring(0, 10);
+                }
+                if (!filters.by_expired) {
+                    filters.max_expiration_date = "";
+                }
+                let { href } = this.$router.resolve({ name: "AgreementsList" });
+                let new_route = this.build_url(href, filters);
+                this.$router.push(new_route);
+            }
+            table.redraw(this.tableUrl(filters));
+        },
     },
     computed: {
         newResource() {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
index 4a1a1f5438..302bbf9808 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="attr.type == 'text'">
+    <template v-if="attr.type == 'text'">
         <label
             :for="`${attr.name}${index}`"
             :class="{ required: attr.required }"
@@ -12,8 +12,8 @@
             :required="attr.required ? true : false"
         />
         <span v-if="attr.required" class="required">{{ $__("Required") }}</span>
-    </div>
-    <div v-else-if="attr.type == 'textarea'">
+    </template>
+    <template v-else-if="attr.type == 'textarea'">
         <label
             :for="`${attr.name}${index}`"
             :class="{ required: attr.required }"
@@ -28,8 +28,22 @@
             :required="attr.required ? true : false"
         />
         <span v-if="attr.required" class="required">{{ $__("Required") }}</span>
-    </div>
-    <div v-else-if="attr.type == 'boolean'">
+    </template>
+    <template v-else-if="attr.type == 'checkbox'">
+        <label
+            :for="`${attr.name}${index}`"
+            :class="{ required: attr.required }"
+            >{{ attr.label }}:</label
+        >
+        <input
+            type="checkbox"
+            :id="`${attr.name}${index}`"
+            v-model="resource[attr.name]"
+            @change="attr.onChange && attr.onChange(resource)"
+        />
+        <span v-if="attr.required" class="required">{{ $__("Required") }}</span>
+    </template>
+    <template v-else-if="attr.type == 'boolean'">
         <label :for="`${attr.name}${index}`">{{ attr.label }}:</label>
         <label class="radio" :for="`${attr.name}${index}` + '_yes'"
             >{{ $__("Yes") }}:
@@ -51,8 +65,8 @@
                 v-model="resource[attr.name]"
             />
         </label>
-    </div>
-    <div v-else-if="attr.type == 'select'">
+    </template>
+    <template v-else-if="attr.type == 'select'">
         <label
             :for="`${attr.name}${index}`"
             :class="{ required: attr.required }"
@@ -78,8 +92,8 @@
             </template>
         </v-select>
         <span v-if="attr.required" class="required">{{ $__("Required") }}</span>
-    </div>
-    <div v-else-if="attr.type == 'component'">
+    </template>
+    <template v-else-if="attr.type == 'component'">
         <label
             v-if="attr.label"
             :for="attr.name"
@@ -100,7 +114,7 @@
             v-on="getEventHandlers()"
         ></component>
         <span v-if="attr.required" class="required">{{ $__("Required") }}</span>
-    </div>
+    </template>
     <template v-else-if="attr.type == 'relationship' && attr.componentPath">
         <component
             :is="requiredComponent"
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
new file mode 100644
index 0000000000..019ab14cf1
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
@@ -0,0 +1,168 @@
+<template>
+    <div v-if="!initialized">{{ $__("Loading") }}</div>
+    <div v-else id="resource_list">
+        <Toolbar v-if="!embedded">
+            <ToolbarButton
+                action="add"
+                @go-to-add-resource="goToResourceAdd"
+                :title="$__('New %s').format(i18n.display_name_lc)"
+            />
+        </Toolbar>
+        <fieldset
+            v-if="tableFilters?.length > 0 && resource_count > 0"
+            class="filters"
+        >
+            <template
+                v-for="(filter, index) in tableFilters"
+                v-bind:key="index"
+            >
+                <FormElement
+                    :resource="filters"
+                    :attr="filter"
+                    :index="index"
+                />
+            </template>
+            <input
+                @click="filterTable(filters, table, embedded)"
+                id="filterTable"
+                type="button"
+                :value="$__('Filter')"
+            />
+        </fieldset>
+        <div v-if="resource_count > 0" class="page-section">
+            <KohaTable
+                ref="table"
+                v-bind="tableOptions"
+                :searchable_additional_fields="searchable_additional_fields"
+                :searchable_av_options="searchable_av_options"
+                @show="goToResourceShow"
+                @edit="goToResourceEdit"
+                @delete="doResourceDelete"
+            ></KohaTable>
+        </div>
+        <div v-else class="alert alert-info">
+            {{
+                $__("There are no %s defined").format(i18n.display_name_plural)
+            }}
+        </div>
+    </div>
+</template>
+
+<script>
+import Toolbar from "./Toolbar.vue";
+import ToolbarButton from "./ToolbarButton.vue";
+import { ref } from "vue";
+import { APIClient } from "../fetch/api-client.js";
+import KohaTable from "./KohaTable.vue";
+import FormElement from "./FormElement.vue";
+
+export default {
+    setup() {
+        const table = ref();
+
+        return {
+            table,
+            license_table_settings,
+        };
+    },
+    props: {
+        embedded: { type: Boolean, default: false },
+        api_client: Object,
+        i18n: Object,
+        tableOptions: Object,
+        resource_name: String,
+        goToResourceShow: Function,
+        goToResourceEdit: Function,
+        doResourceDelete: Function,
+        goToResourceAdd: Function,
+        tableFilters: Array,
+        getFilters: Function,
+        filterTable: Function,
+        tableUrl: Function,
+    },
+    data: function () {
+        return {
+            resource_count: 0,
+            initialized: false,
+            searchable_additional_fields: [],
+            searchable_av_options: [],
+            filters: this.getFilters(this.$route.query),
+            router: this.$router,
+        };
+    },
+    created() {
+        if (this.embedded) {
+            this.getResourceCount().then(() => (this.initialized = true));
+        } else {
+            this.getResourceCount().then(() =>
+                this.getSearchableAdditionalFields().then(() =>
+                    this.getSearchableAVOptions().then(
+                        () => (this.initialized = true)
+                    )
+                )
+            );
+        }
+    },
+    methods: {
+        async getResourceCount() {
+            await this.api_client.count().then(
+                count => {
+                    this.resource_count = count;
+                },
+                error => {}
+            );
+        },
+        async getSearchableAdditionalFields() {
+            const client = APIClient.additional_fields;
+            await client.additional_fields.getAll(this.resource_name).then(
+                searchable_additional_fields => {
+                    this.searchable_additional_fields =
+                        searchable_additional_fields.filter(
+                            field => field.searchable
+                        );
+                },
+                error => {}
+            );
+        },
+        async getSearchableAVOptions() {
+            const client_av = APIClient.authorised_values;
+            let av_cat_array = this.searchable_additional_fields
+                .filter(field => field.authorised_value_category_name)
+                .map(field => field.authorised_value_category_name);
+
+            await client_av.values
+                .getCategoriesWithValues([
+                    ...new Set(av_cat_array.map(av_cat => '"' + av_cat + '"')),
+                ]) // unique
+                .then(av_categories => {
+                    av_cat_array.forEach(av_cat => {
+                        let av_match = av_categories.find(
+                            element => element.category_name == av_cat
+                        );
+                        this.searchable_av_options[av_cat] =
+                            av_match.authorised_values.map(av => ({
+                                value: av.value,
+                                label: av.description,
+                            }));
+                    });
+                });
+        },
+        redrawTable() {
+            if (this.filterTable) {
+                this.filterTable();
+            } else {
+                this.table.redraw(this.tableUrl(this.filters));
+            }
+        },
+    },
+    components: { Toolbar, ToolbarButton, KohaTable, FormElement },
+    name: "ResourcesList",
+};
+</script>
+
+<style scoped>
+.filters > input[type="checkbox"],
+.filters > input[type="button"] {
+    margin-left: 1rem;
+}
+</style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js
index b63ac898d0..6f7d90a902 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js
@@ -56,7 +56,7 @@ export const routes = [
                     {
                         path: "",
                         name: "AgreementsList",
-                        component: markRaw(AgreementsList),
+                        component: markRaw(ResourceWrapper),
                     },
                     {
                         path: ":agreement_id",