diff --git a/locales/default.pot b/locales/default.pot
index f0bc0574b..a90838d04 100644
--- a/locales/default.pot
+++ b/locales/default.pot
@@ -1609,6 +1609,21 @@ msgstr ""
 msgid "Error while creating new object."
 msgstr ""
 
+msgid "Edit related objects"
+msgstr ""
+
+msgid "Choose object type"
+msgstr ""
+
+msgid "Choose relation"
+msgstr ""
+
+msgid "Filter to apply"
+msgstr ""
+
+msgid "Search related objects"
+msgstr ""
+
 msgid "Action"
 msgstr ""
 
diff --git a/locales/en_US/default.po b/locales/en_US/default.po
index 413e1e849..00dadeb67 100644
--- a/locales/en_US/default.po
+++ b/locales/en_US/default.po
@@ -1612,6 +1612,21 @@ msgstr ""
 msgid "Error while creating new object."
 msgstr ""
 
+msgid "Edit related objects"
+msgstr ""
+
+msgid "Choose object type"
+msgstr ""
+
+msgid "Choose relation"
+msgstr ""
+
+msgid "Filter to apply"
+msgstr ""
+
+msgid "Search related objects"
+msgstr ""
+
 msgid "Action"
 msgstr ""
 
diff --git a/locales/it_IT/default.po b/locales/it_IT/default.po
index a95dc55f1..01df7a0ef 100644
--- a/locales/it_IT/default.po
+++ b/locales/it_IT/default.po
@@ -1631,6 +1631,21 @@ msgstr "Dato obbligatorio mancante \"${ required }\". Riprovare"
 msgid "Error while creating new object."
 msgstr "Si è verificato un errore durante la creazione del nuovo oggetto."
 
+msgid "Edit related objects"
+msgstr "Modifica oggetti correlati"
+
+msgid "Choose object type"
+msgstr "Scegli il tipo di oggetto"
+
+msgid "Choose relation"
+msgstr "Scegli la relazione"
+
+msgid "Filter to apply"
+msgstr "Filtro da applicare"
+
+msgid "Search related objects"
+msgstr "Cerca oggetti correlati"
+
 msgid "Action"
 msgstr "Azione"
 
diff --git a/resources/js/app/app.js b/resources/js/app/app.js
index 24f1b3a85..746b02120 100644
--- a/resources/js/app/app.js
+++ b/resources/js/app/app.js
@@ -111,6 +111,7 @@ const _vueInstance = new Vue({
         FieldTextarea: () => import(/* webpackChunkName: "field-textarea" */'app/components/form/field-textarea'),
         FieldTitle: () => import(/* webpackChunkName: "field-title" */'app/components/form/field-title'),
         ObjectInfo: () => import(/* webpackChunkName: "object-info" */'app/components/object-info/object-info'),
+        RelatedObjectsFilter: () => import(/* webpackChunkName: "related-objects-filter" */'app/components/related-objects-filter/related-objects-filter'),
         ModuleProperties: () => import(/* webpackChunkName: "module-properties" */'app/components/module/module-properties'),
         ModuleSetup: () => import(/* webpackChunkName: "module-setup" */'app/components/module/module-setup'),
         AddRelatedById: () => import(/* webpackChunkName: "add-related-by-id" */'app/components/add-related-by-id/add-related-by-id'),
@@ -624,6 +625,7 @@ window._vueInstance = _vueInstance;
 
 // use component everywhere in Manager
 Vue.component('AppIcon', AppIcon);
+Vue.component('ClipboardItem', _vueInstance.$options.components.ClipboardItem);
 Vue.component('DateRangesView', _vueInstance.$options.components.DateRangesView);
 Vue.component('FieldCheckbox', _vueInstance.$options.components.FieldCheckbox);
 Vue.component('FieldGeoCoordinates', _vueInstance.$options.components.FieldGeoCoordinates);
@@ -643,5 +645,7 @@ Vue.component('ModuleSetup', _vueInstance.$options.components.ModuleSetup);
 Vue.component('ObjectCategories', _vueInstance.$options.components.ObjectCategories);
 Vue.component('ObjectCaptions', _vueInstance.$options.components.ObjectCaptions);
 Vue.component('ObjectInfo', _vueInstance.$options.components.ObjectInfo);
+Vue.component('RelatedObjectsFilter', _vueInstance.$options.components.RelatedObjectsFilter);
+Vue.component('Thumbnail', _vueInstance.$options.components.Thumbnail);
 Vue.component('RibbonItem', _vueInstance.$options.components.RibbonItem);
 Vue.component('UploadedObject', _vueInstance.$options.components.UploadedObject);
diff --git a/resources/js/app/components/filter-box.vue b/resources/js/app/components/filter-box.vue
index f113215f5..d612acb3e 100644
--- a/resources/js/app/components/filter-box.vue
+++ b/resources/js/app/components/filter-box.vue
@@ -38,6 +38,10 @@ export default {
             default: '[10]'
         },
         filterActive: Boolean,
+        filterRelationsActive: {
+            type: Boolean,
+            default: false
+        },
         filterList: {
             type: Array,
             default: () => [],
@@ -81,7 +85,9 @@ export default {
              * When disabled, only direct children are fetched.
              * This will switch the API filter between `parent` and `ancestor`.
              */
+            editFilterRelations: this.filterRelationsActive,
             filterByDescendants: false,
+            filterRelations: {},
             folder: null,
             moreFilters: this.filterActive,
             pageSize: this.pagination.page_size,
@@ -364,6 +370,10 @@ export default {
 
             const filter = this.prepareFilters();
             const filterObject = { ...this.queryFilter, filter };
+            filterObject.filter = {
+                ...filterObject.filter,
+                ...this.filterRelations,
+            };
             this.availableFilters = this.filtersByType?.[filterObject?.filter?.type] || [];
             this.$emit('filter-objects', filterObject);
         },
@@ -461,6 +471,20 @@ export default {
             delete this.queryFilter.filter[oldFilter];
             this.queryFilter.filter[newFilter] = this.folder?.id || null;
         },
+
+        toggleFilterRelations() {
+            this.editFilterRelations = !this.editFilterRelations;
+        },
+
+        updateFilterRelations(filter) {
+            this.filterRelations = {};
+            for (const [key, value] of Object.entries(filter)) {
+                this.filterRelations[key] = [];
+                for (const v of value) {
+                    this.filterRelations[key].push(v);
+                }
+            }
+        },
     }
 };
 </script>
diff --git a/resources/js/app/components/object-info/object-info.vue b/resources/js/app/components/object-info/object-info.vue
index 1d0739910..eb0ce58fa 100644
--- a/resources/js/app/components/object-info/object-info.vue
+++ b/resources/js/app/components/object-info/object-info.vue
@@ -57,7 +57,7 @@ export default {
         fillData() {
             const source = BEDITA?.indexLists?.[this.reloadedData?.type] || {};
             this.fields = source || ['title', 'description'];
-            this.fields = this.fields.filter((value, index, array) => {
+            this.fields = this.fields?.filter((value, index, array) => {
                 return array.indexOf(value) === index;
             });
             for (const field of this.fields) {
diff --git a/resources/js/app/components/related-objects-filter/related-objects-filter.vue b/resources/js/app/components/related-objects-filter/related-objects-filter.vue
new file mode 100644
index 000000000..3fb122353
--- /dev/null
+++ b/resources/js/app/components/related-objects-filter/related-objects-filter.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class="related-objects-filter">
+        <template v-if="openPanel">
+            <related-objects-panel
+                :initial-filter="initialFilter"
+                :relations-schema="relationsSchema"
+                :show-panel="openPanel"
+                @update:filter="updateData('filter', $event)"
+                @update:objectsMap="updateData('objectsMap', $event)"
+                @update:showPanel="updateData('openPanel', $event)"
+            />
+        </template>
+        <template v-if="filter">
+            <div class="filter-to-apply">
+                <div
+                    v-for="relationName in Object.keys(filter)"
+                    :key="relationName"
+                >
+                    <template v-if="filter?.[relationName]?.length">
+                        <span class="tag relation">{{ tr(relationName) }}</span>
+                        <template v-for="relatedId in filter[relationName]">
+                            <div
+                                class="tag"
+                                :class="moduleClass(relatedId)"
+                                :key="relatedId"
+                            >
+                                [{{ relatedId }}] {{ objectsMap?.[relatedId]?.title }}
+                                <a
+                                    class="unpick"
+                                    @click.prevent="pickout(relationName, relatedId)"
+                                >
+                                    <app-icon
+                                        icon="carbon:close"
+                                        width="18"
+                                        height="18"
+                                    />
+                                </a>
+                            </div>
+                        </template>
+                    </template>
+                </div>
+
+                <button
+                    class="mt-1 button button-outlined is-small"
+                    @click.prevent="openPanel = true"
+                >
+                    <app-icon icon="carbon:edit" />
+                    <span class="ml-05">{{ msgEdit }}</span>
+                </button>
+            </div>
+        </template>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'RelatedObjectsFilter',
+    components: {
+        'related-objects-panel': () => import('./related-objects-panel.vue'),
+    },
+    props: {
+        initialFilter: {
+            type: Object,
+            default: () => ({}),
+        },
+        relationsSchema: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            filter: null,
+            msgEdit: t`Edit related objects`,
+            objectsMap: null,
+            openPanel: false,
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (this.initialFilter) {
+                const relationNames = Object.keys(this.relationsSchema);
+                const relationKeys = Object.keys(this.initialFilter).filter((key) => relationNames.includes(key));
+                this.filter = relationKeys.reduce((acc, key) => {
+                    acc[key] = this.initialFilter[key];
+                    return acc;
+                }, {});
+            } else {
+                this.openPanel = true;
+            }
+        });
+    },
+    methods: {
+        moduleClass(item) {
+            const objectType = this.objectsMap?.[item]?.type || null;
+            if (!objectType) {
+                return '';
+            }
+
+            return `has-background-module-${objectType}`;
+        },
+        pickout(relationName, relatedId) {
+            if (this.filter?.[relationName]) {
+                this.filter[relationName] = this.filter[relationName].filter((id) => id !== relatedId);
+                this.updateFilter();
+            }
+        },
+        tr(item) {
+            return BEDITA_I18N?.[item] || this.t(item) || item;
+        },
+        updateData(key, value) {
+            this.$emit('edit-filter-relations', true);
+            this[key] = value;
+            if (key === 'filter') {
+                this.updateFilter();
+            }
+        },
+        updateFilter() {
+            this.$forceUpdate();
+            this.$emit('update-filter-related', this.filter);
+        },
+    },
+}
+</script>
+<style scoped>
+div.related-objects-filter {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 0.5em;
+    justify-content: space-between;
+}
+</style>
diff --git a/resources/js/app/components/related-objects-filter/related-objects-panel.vue b/resources/js/app/components/related-objects-filter/related-objects-panel.vue
new file mode 100644
index 000000000..81cdec1f1
--- /dev/null
+++ b/resources/js/app/components/related-objects-filter/related-objects-panel.vue
@@ -0,0 +1,401 @@
+<template>
+    <div class="related-objects-panel">
+        <template v-if="showPanel">
+            <div
+                class="backdrop"
+                style="display: block; z-index: 1001;"
+                @click="closePanel()"
+            />
+            <aside
+                class="main-panel-container on"
+                custom-footer="true"
+                custom-header="true"
+            >
+                <div class="main-panel fieldset">
+                    <header class="mx-1 mt-1 tab tab-static unselectable">
+                        <h2>{{ msgSearchRelated }}</h2>
+                        <button
+                            class="button button-outlined close"
+                            v-title="msgClose"
+                            @click.prevent.stop="closePanel()"
+                        >
+                            <app-icon icon="carbon:close" />
+                        </button>
+                    </header>
+                    <div class="pcontainer">
+                        <div class="filter-to-apply">
+                            <div
+                                v-for="relationName in Object.keys(filter)"
+                                :key="relationName"
+                            >
+                                <template v-if="filter?.[relationName]?.length">
+                                    <span class="tag relation">{{ tr(relationName) }}</span>
+                                    <div
+                                        class="tag"
+                                        :class="moduleClass(relatedId)"
+                                        v-for="relatedId in filter[relationName]"
+                                        :key="relatedId"
+                                    >
+                                        [{{ relatedId }}] {{ objectsMap?.[relatedId]?.title }}
+                                        <a
+                                            class="unpick"
+                                            @click.prevent="pickout(relationName, relatedId)"
+                                        >
+                                            <app-icon
+                                                icon="carbon:close"
+                                                width="18"
+                                                height="18"
+                                            />
+                                        </a>
+                                    </div>
+                                </template>
+                            </div>
+                            <div v-if="Object.keys(filter).length">
+                                <button @click.prevent="closePanel()">
+                                    <app-icon icon="carbon:checkmark" />
+                                    <span class="ml-05">Ok</span>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="selection-container">
+                            <div>
+                                <select
+                                    class="is-width-full"
+                                    v-model="relation"
+                                    @change="changeRelation"
+                                >
+                                    <option
+                                        v-for="item in relations"
+                                        :key="item.name"
+                                        :value="item.name"
+                                    >
+                                        {{ tr(item.label) }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div
+                                class="ml-05"
+                                v-if="relation"
+                            >
+                                <select
+                                    class="is-width-full"
+                                    v-model="objectType"
+                                >
+                                    <option
+                                        v-for="item in objectTypes"
+                                        :key="item"
+                                        :value="item"
+                                    >
+                                        {{ tr(item) }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div
+                                class="ml-05"
+                                v-if="relation && objectType != msgChooseObjectType"
+                            >
+                                <input
+                                    type="text"
+                                    v-model="searchText"
+                                >
+                                <button
+                                    :class="{ 'is-loading-spinner': loading }"
+                                    :disabled="loading"
+                                    @click.prevent="search"
+                                >
+                                    <app-icon icon="carbon:search" />
+                                    <span class="ml-05">{{ msgSearch }}</span>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="pagination"
+                            v-if="!loading && searchResults?.length"
+                        >
+                            <results-pagination
+                                :count="paginationCount"
+                                :filter="paginationFilter"
+                                :object-type="objectType"
+                                :options="paginationOptions"
+                                @update="updatePagination"
+                            />
+                        </div>
+                        <div
+                            class="columns"
+                            v-if="!loading && searchResults?.length"
+                        >
+                            <div
+                                class="column is-3"
+                                v-for="item in searchResults"
+                                :key="item.id"
+                            >
+                                <search-result
+                                    :item="item"
+                                    @select="select"
+                                    @discard="discard"
+                                />
+                            </div>
+                        </div>
+                        <div class="buttons">
+                            <button
+                                class="button button-primary"
+                                @click.prevent.stop="closePanel()"
+                            >
+                                <app-icon icon="carbon:close" />
+                                <span class="ml-05">
+                                    {{ msgClose }}
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        </template>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+export default {
+    name: 'RelatedObjectsPanel',
+    components: {
+        'ResultsPagination': () => import('./results-pagination.vue'),
+        'SearchResult': () => import('./search-result.vue'),
+    },
+    props: {
+        initialFilter: {
+            type: Object,
+            default: () => ({}),
+        },
+        paginationOptions: {
+            type: Object,
+            default: () => ({ page: 1, pageSize: 10, sizes: [10, 20, 50, 100] }),
+        },
+        relationsSchema: {
+            type: Object,
+            required: true,
+        },
+        showPanel: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            currentPage: 1,
+            filter: {},
+            loading: false,
+            msgChooseObjectType: t`Choose object type`,
+            msgChooseRelation: t`Choose relation`,
+            msgClose: t`Close`,
+            msgFilterToApply: t`Filter to apply`,
+            msgSearch: t`Search`,
+            msgSearchRelated: t`Search related objects`,
+            objectsMap: {},
+            objectType: null,
+            objectTypes: [],
+            openPanel: false,
+            pageSize: 10,
+            paginationCount: 0,
+            paginationFilter: {page: 1, pageSize: 10},
+            relation: null,
+            relations: [],
+            searchResults: [],
+            searchText: null,
+        }
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            for (const [key, value] of Object.entries(this.relationsSchema)) {
+                this.relations.push({
+                    label: this.$helpers.humanize(value?.label || key),
+                    name: key,
+                    types: value?.types || [],
+                });
+            }
+            this.relations.sort((a, b) => {
+                if (a.label < b.label) return -1;
+                if (a.label > b.label) return 1;
+                return 0;
+            });
+            this.relations.unshift({
+                label: this.msgChooseRelation,
+                name: null,
+                types: [],
+            });
+            this.relation = this.relations[0].name;
+            if (this.initialFilter) {
+                const relationNames = Object.keys(this.relationsSchema);
+                const relationKeys = Object.keys(this.initialFilter).filter((key) => relationNames.includes(key));
+                this.filter = relationKeys.reduce((acc, key) => {
+                    acc[key] = this.initialFilter[key];
+                    return acc;
+                }, {});
+            }
+        });
+    },
+    methods: {
+        changeRelation() {
+            this.searchResults = [];
+            this.objectTypes = this.relations.find((item) => item.name === this.relation)?.types || [];
+            this.objectTypes.sort((a, b) => {
+                if (a < b) return -1;
+                if (a > b) return 1;
+                return 0;
+            });
+            if (!this.objectTypes.includes(this.msgChooseObjectType)) {
+                this.objectTypes.unshift(this.msgChooseObjectType);
+            }
+            this.objectType = this.msgChooseObjectType;
+        },
+        closePanel() {
+            this.$emit('update:filter', this.filter);
+            this.$emit('update:objectsMap', this.objectsMap);
+            this.$emit('update:showPanel', false);
+        },
+        discard(id) {
+            if (this.filter?.[this.relation]) {
+                this.filter[this.relation] = this.filter[this.relation].filter((item) => item !== id);
+            }
+            this.updateFilter();
+        },
+        moduleClass(item) {
+            const objectType = this.objectsMap?.[item]?.type || null;
+            if (!objectType) {
+                return '';
+            }
+
+            return `has-background-module-${objectType}`;
+        },
+        pickout(relationName, relatedId) {
+            if (this.filter?.[relationName]) {
+                this.filter[relationName] = this.filter[relationName].filter((id) => id !== relatedId);
+                this.updateFilter();
+            }
+        },
+        async search(filter = {page: 1, pageSize: 10}) {
+            try {
+                this.loading = true;
+                const headers = new Headers({
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': BEDITA.csrfToken,
+                });
+                const options = {
+                    credentials: 'same-origin',
+                    headers,
+                    method: 'GET',
+                };
+                let query = this.searchText?.trim().length >= 3 ? `q=${this.searchText.trim()}&` : '';
+                query += `page=${filter?.page || 1}&page_size=${filter?.pageSize || 10}`;
+                const url = `/api/${this.objectType}?${query}`;
+                const response = await fetch(url, options);
+                const responseJson = await response.json();
+                if (responseJson?.error) {
+                    throw new Error(responseJson.error);
+                }
+                if (filter?.page || filter?.pageSize) {
+                    this.paginationFilter = filter;
+                }
+                if (responseJson?.data) {
+                    this.searchResults = responseJson.data;
+                    this.paginationCount = responseJson?.meta?.pagination?.count || 0;
+                } else {
+                    this.searchResults = [];
+                }
+                for (const item of this.searchResults) {
+                    if (!this.objectsMap[item.id]) {
+                        this.objectsMap[item.id] = {'type': item?.type || '', 'title': item?.attributes?.title || ''};
+                    }
+                }
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+        select(id) {
+            if (!this.filter[this.relation]) {
+                this.filter[this.relation] = [];
+            }
+            if (this.filter?.[this.relation]?.includes(id)) {
+                return;
+            }
+            this.filter[this.relation].push(id);
+            this.updateFilter();
+        },
+        tr(item) {
+            return BEDITA_I18N?.[item] || this.t(item) || item;
+        },
+        updateFilter() {
+            this.$forceUpdate();
+            this.$emit('update-filter-related', this.filter);
+        },
+        async updatePagination(pagination) {
+            await this.search(pagination);
+        },
+    },
+}
+</script>
+<style scoped>
+div.related-objects-panel aside.main-panel-container {
+    z-index: 1002;
+}
+div.related-objects-panel aside.main-panel {
+    margin: 1rem;
+    padding: 1rem;
+}
+div.related-objects-panel button.close {
+    border: solid transparent 0px;
+    min-width: 36px;
+    max-width: 36px;
+}
+div.related-objects-panel .pcontainer {
+    padding: 1rem;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+div.related-objects-panel div.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+div.related-objects-panel div.selection-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 50%;
+    grid-gap: 0.5em;
+    width: 100%;
+}
+div.related-objects-panel button.picker {
+    height: 20px;
+    background-color: transparent;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+}
+div.related-objects-panel div.filter-to-apply {
+    display: block;
+    width: 100%;
+}
+div.related-objects-panel .unpick {
+    cursor: pointer;
+    height: 100%;
+}
+div.related-objects-panel .unpick > svg {
+    margin-left: 0.5rem;
+    height: 100%;
+}
+div.related-objects-panel .relation {
+    background-color: darkslategrey;
+    color: white;
+}
+div.related-objects-panel .search-results {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+</style>
diff --git a/resources/js/app/components/related-objects-filter/results-pagination.vue b/resources/js/app/components/related-objects-filter/results-pagination.vue
new file mode 100644
index 000000000..34f22e311
--- /dev/null
+++ b/resources/js/app/components/related-objects-filter/results-pagination.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="pagination">
+        <div>
+            <nav class="pagination has-text-size-smallest">
+                <div class="count-items">
+                    <span class="has-font-weight-bold">{{ count }}</span>
+                    <span>{{ msgItems }}</span>
+                </div>
+                <div class="page-size">
+                    <span>{{ msgSize }}</span>
+                    <select
+                        class="page-size-selector has-background-gray-700 has-border-gray-700 has-font-weight-light has-text-gray-200 has-text-size-smallest"
+                        v-model="changeSize"
+                        @change="update"
+                    >
+                        <option
+                            v-for="size in options.sizes"
+                            :key="size"
+                            :value="size"
+                        >
+                            {{ size }}
+                        </option>
+                    </select>
+                </div>
+                <div
+                    class="pagination-buttons"
+                    v-if="pages > 1"
+                >
+                    <div>
+                        <template v-for="page in pages">
+                            <input
+                                size="2"
+                                class="ml-05 mr-05"
+                                type="number"
+                                min="1"
+                                :max="pages"
+                                :key="`input-${page}`"
+                                v-model="changePage"
+                                @keyup.enter="updatePage(changePage)"
+                                @change="updatePage(changePage)"
+                                v-if="page == changePage"
+                            >
+                            <button
+                                :key="page"
+                                class="button is-width-auto has-text-size-smallest"
+                                :class="{ 'current-page': page === (filter?.page || 1), 'button-outlined': page !== (filter?.page || 1) }"
+                                @click.prevent="updatePage(page)"
+                                v-if="visiblePages.includes(page) && page !== changePage"
+                            >
+                                {{ page }}
+                            </button>
+                            <template v-if="!visiblePages.includes(page) && (page === changePage - 2 || page === changePage + 2)">
+                                <span
+                                    :key="page"
+                                    class="pages-delimiter"
+                                />
+                            </template>
+                        </template>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'ResultsPagination',
+    props: {
+        count: {
+            type: Number,
+            default: 0,
+        },
+        filter: {
+            type: Object,
+            default: null,
+        },
+        objectType: {
+            type: String,
+            default: null,
+        },
+        options: {
+            type: Object,
+            default: () => ({ page: 1, pageSize: 10, sizes: [10, 20, 50, 100] }),
+        },
+    },
+    data() {
+        return {
+            changePage: null,
+            changeSize: null,
+            msgItems: BEDITA_I18N?.[this.objectType] || t`Items`,
+            msgSize: t`Size`,
+            pages: 1,
+            visiblePages: [],
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.changePage = this.filter?.page || this.options.page || 1,
+            this.changeSize = this.filter?.pageSize || this.options.pageSize || 10,
+            this.pages = Math.ceil(this.count / this.changeSize);
+            let visiblePages = [];
+            if (this.pages <= 5) {
+                visiblePages = Array.from({ length: this.pages }, (_, i) => i + 1);
+                visiblePages = [...new Set(visiblePages)];
+                visiblePages.sort();
+                this.visiblePages = visiblePages;
+                return;
+            }
+            // visible pages should be the first, the last, current, the previous and the next page
+            visiblePages = [
+                1,
+                this.pages,
+                this.changePage - 1,
+                this.changePage,
+                this.changePage + 1
+            ].filter(page => page > 0 && page <= this.pages);
+            visiblePages = [...new Set(visiblePages)];
+            visiblePages.sort();
+            this.visiblePages = visiblePages;
+        });
+    },
+    methods: {
+        update() {
+            this.$emit('update', {
+                page: this.changePage,
+                pageSize: this.changeSize,
+            });
+        },
+        updatePage(page) {
+            this.changePage = parseInt(page);
+            this.update();
+        },
+    },
+}
+</script>
diff --git a/resources/js/app/components/related-objects-filter/search-result.vue b/resources/js/app/components/related-objects-filter/search-result.vue
new file mode 100644
index 000000000..1ebf018db
--- /dev/null
+++ b/resources/js/app/components/related-objects-filter/search-result.vue
@@ -0,0 +1,133 @@
+<template>
+    <article class="search-result box">
+        <thumbnail :related="item" />
+        <div class="box-body p-05">
+            <div class="is-flex space-between align-center">
+                <span :class="`tag has-background-module-${objectType}`">{{ objectType }}</span>
+                <span
+                    class="icon-calendar-check-o"
+                    v-title="datesInfo(item)"
+                />
+                <span class="status is-uppercase has-text-size-smallest on">{{ item.attributes.status }}</span>
+            </div>
+            <div class="is-flex space-between align-center">
+                <clipboard-item
+                    label="ID"
+                    :text="item.id"
+                />
+                <clipboard-item
+                    label="uname"
+                    :text="item.attributes.uname"
+                />
+            </div>
+            <header class="is-flex space-between mt-05">
+                <div>
+                    <h3
+                        class="title m-0 has-text-size-small"
+                        style="padding-bottom: 7px;"
+                    >
+                        <span :title="item.attributes.title">{{ item.attributes.title }}</span>
+                    </h3>
+                </div>
+            </header>
+        </div>
+        <footer class="is-flex space-between mt-05 p-05">
+            <button
+                class="is-small has-font-weight-bold mr-1"
+                :class="selected ? 'button-secondary icon-check' : 'button-outlined-white button-text icon-check-empty'"
+                @click.prevent="toggle()"
+            >
+                <template v-if="selected">
+                    {{ msgDiscard }}
+                </template>
+                <template v-else>
+                    {{ msgPick }}
+                </template>
+            </button>
+            <object-info :object-data="item" />
+            <a
+                :href="`/view/${item.id}`"
+                target="_blank"
+                class="button button-outlined-white is-small"
+            >
+                <app-icon icon="carbon:launch" />
+                <span class="ml-05">{{ msgOpen }}</span>
+            </a>
+        </footer>
+    </article>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'SearchResult',
+    props: {
+        item: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            msgDiscard: t`Discard`,
+            msgOpen: t`Open`,
+            msgPick: t`Pick`,
+            objectType: this.item?.type || 'unknown',
+            selected: false,
+        };
+    },
+    methods: {
+        datesInfo(obj) {
+            if (obj?.meta?.created === undefined || obj?.meta?.modified === undefined) {
+                return '';
+            }
+            const created = new Date(obj.meta.created).toLocaleDateString() + ' ' + new Date(obj.meta.created).toLocaleTimeString();
+            const modified = new Date(obj.meta.modified).toLocaleDateString() + ' ' + new Date(obj.meta.modified).toLocaleTimeString();
+            if (!obj?.attributes?.publish_start) {
+                return t`Created on ${created}.` + ' ' + t`Modified on ${modified}.`;
+            }
+            const published = new Date(obj.meta.publish_start).toLocaleDateString() + ' ' + new Date(obj.attributes.publish_start).toLocaleTimeString();
+
+            return t`Created on ${created}.` + ' ' + t`Modified on ${modified}.` + ' ' + t`Publish start on ${published}.`;
+        },
+        toggle() {
+            this.selected = !this.selected;
+            const event = this.selected ? 'select' : 'discard';
+            this.$emit(event, this.item.id);
+        },
+    },
+};
+</script>
+<style scoped>
+article.search-result {
+    flex: 1;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 12px;
+    background-color: #fff;
+}
+article.search-result .thumbnail {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 63%;
+    background-color: #f8f9fa;
+    pointer-events: none;
+}
+article.search-result .thumbnail figure {
+    font-size: 2.5rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+}
+article.search-result .thumbnail figure img {
+    display: block;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/src/View/Helper/ArrayHelper.php b/src/View/Helper/ArrayHelper.php
index 92482e9c5..5f292c2c5 100644
--- a/src/View/Helper/ArrayHelper.php
+++ b/src/View/Helper/ArrayHelper.php
@@ -81,4 +81,16 @@ public function extract($data, $path): array
     {
         return (array)Hash::extract($data, $path);
     }
+
+    /**
+     * Return intersection of two arrays reindexing values.
+     *
+     * @param array $arr1 First array.
+     * @param array $arr2 Second array.
+     * @return array The intersection of two arrays.
+     */
+    public function intersect(array $arr1, array $arr2): array
+    {
+        return array_values(array_intersect($arr1, $arr2));
+    }
 }
diff --git a/templates/Element/FilterBox/filter_box.twig b/templates/Element/FilterBox/filter_box.twig
index cf887d72b..b81d926cd 100644
--- a/templates/Element/FilterBox/filter_box.twig
+++ b/templates/Element/FilterBox/filter_box.twig
@@ -1,7 +1,7 @@
 <div class="filter-box">
     {% if not hideFilter %}
     <div>
-        {{ element('FilterBox/filter_box_common', { showFilterSearchByType }) }}
+        {{ element('FilterBox/filter_box_common', { showFilterSearchByType, hideFilterRelations }) }}
     </div>
     {% endif %}
 
diff --git a/templates/Element/FilterBox/filter_box_common.twig b/templates/Element/FilterBox/filter_box_common.twig
index ad8775d4f..88f759f6e 100644
--- a/templates/Element/FilterBox/filter_box_common.twig
+++ b/templates/Element/FilterBox/filter_box_common.twig
@@ -58,12 +58,34 @@
                 <span class="ml-05">{{ __('Reset') }}</span>
             </button>
 
+            {% if hideFilterRelations == '' %}
+            <button class="toggle-filters button button-outlined is-width-auto" type="button" @click.prevent="toggleFilterRelations()">
+                <app-icon icon="carbon:filter-edit" v-show="!editFilterRelations"></app-icon><span class="ml-05" v-show="!editFilterRelations">{{ __('Relations') }}</span>
+                <app-icon icon="carbon:filter" v-show="editFilterRelations"></app-icon><span class="ml-05" v-show="editFilterRelations">{{ __('Relations') }}</span>
+            </button>
+            {% endif %}
+
             <button class="toggle-filters button button-outlined is-width-auto" type="button" @click="moreFilters = !moreFilters" v-if="canShowAdvanced">
                 <app-icon icon="carbon:filter-edit" v-if="!moreFilters"></app-icon><span class="ml-05" v-show="!moreFilters">{{ __('More') }}</span>
                 <app-icon icon="carbon:filter" v-if="moreFilters"></app-icon><span class="ml-05" v-show="moreFilters">{{ __('Less') }}</span>
             </button>
+
+        </div>
+    </div>
+
+    {% if hideFilterRelations == '' %}
+    <div class="more-filters" v-show="editFilterRelations">
+        <div class="filter-container">
+            <related-objects-filter
+                :initial-filter="{{ _view.request.getQuery('filter')|json_encode }}"
+                :relations-schema="{{ schema['relations']|json_encode }}"
+                @edit-filter-relations="editFilterRelations = 1"
+                @update-filter-related="updateFilterRelations"
+            >
+            </related-objects-filter>
         </div>
     </div>
+    {% endif %}
 
     <div class="more-filters" v-show="moreFilters">
         {# object type filter #}
diff --git a/templates/Element/Form/relation.twig b/templates/Element/Form/relation.twig
index 655342939..4cb6ed074 100644
--- a/templates/Element/Form/relation.twig
+++ b/templates/Element/Form/relation.twig
@@ -44,7 +44,7 @@
                     @filter-reset="reloadObjects"
                     inline-template
                 >
-                    {{ element('FilterBox/filter_box') }}
+                    {{ element('FilterBox/filter_box', {'hideFilterRelations': true}) }}
                 </filter-box-view>
             </div>
 
diff --git a/templates/Element/Modules/index_header.twig b/templates/Element/Modules/index_header.twig
index 6a61dae36..5ba3c0720 100644
--- a/templates/Element/Modules/index_header.twig
+++ b/templates/Element/Modules/index_header.twig
@@ -1,12 +1,14 @@
 <div class="module-header">
     {% set filterActive = (_view.request.getQuery('filter') or _view.request.getQuery('q')) %}
     {% set list = Schema.filterList(filter | default([]), schema.properties) %}
+    {% set relationsFilter = Array.intersect(_view.request.getQuery('filter')|keys|default([]), schema.relations|keys|default([])) %}
     <filter-box-view
         :pagination="{{ meta.pagination|json_encode|escape('html_attr') }}"
         :init-filter="urlFilterQuery"
         :selected-types='selectedTypes'
         :filter-list="{{ list|json_encode|escape('html_attr') }}"
         :filter-active="{{ filterActive|json_encode|escape('html_attr') }}"
+        :filter-relations-active="{{ relationsFilter|length > 0 ? 'true' : 'false' }}"
 
         config-paginate-sizes="{{ config('Pagination.sizeAvailable')|json_encode|escape('html_attr') }}"
         placeholder="{{ __('Search') }}"
diff --git a/templates/Element/Panel/relations_add.twig b/templates/Element/Panel/relations_add.twig
index d6d986cbc..995d4742c 100644
--- a/templates/Element/Panel/relations_add.twig
+++ b/templates/Element/Panel/relations_add.twig
@@ -45,7 +45,7 @@
 
                 inline-template
             >
-                {{ element('FilterBox/filter_box', { 'showFilterSearchByType': true }) }}
+                {{ element('FilterBox/filter_box', { 'showFilterSearchByType': true, 'hideFilterRelations': true }) }}
             </filter-box-view>
         </div>
 
diff --git a/tests/TestCase/View/Helper/ArrayHelperTest.php b/tests/TestCase/View/Helper/ArrayHelperTest.php
index 5b75f4d07..ce3fc5233 100644
--- a/tests/TestCase/View/Helper/ArrayHelperTest.php
+++ b/tests/TestCase/View/Helper/ArrayHelperTest.php
@@ -199,4 +199,19 @@ public function testExtract(): void
         $actual = $this->Array->extract($data, $pattern);
         static::assertSame($expected, $actual);
     }
+
+    /**
+     * Test `intersect()` method.
+     *
+     * @return void
+     * @covers ::intersect()
+     */
+    public function testIntersect(): void
+    {
+        $a = ['a', 'b', 'c', 'd'];
+        $b = ['c', 'd', 'e', 'f'];
+        $expected = ['c', 'd'];
+        $actual = $this->Array->intersect($a, $b);
+        static::assertSame($expected, $actual);
+    }
 }