diff --git a/src/pat/contentbrowser/contentbrowser.js b/src/pat/contentbrowser/contentbrowser.js
index ce890eb00..dd9f647eb 100644
--- a/src/pat/contentbrowser/contentbrowser.js
+++ b/src/pat/contentbrowser/contentbrowser.js
@@ -37,10 +37,9 @@ parser.addArgument(
     true
 );
 parser.addArgument("max-depth", "200");
-// parser.addArgument("base-path", `/`);
+parser.addArgument("base-path", `/`);
 parser.addArgument("maximum-selection-size", -1);
-// parser.addArgument("selectable-types", [],[], true);
-//parser.addArgument("selectable-types", [],[], true);
+parser.addArgument("selectable-types", [], null, true);
 parser.addArgument("separator", ";");
 parser.addArgument("selection", []);
 
@@ -52,38 +51,26 @@ class Pattern extends BasePattern {
     async init() {
         this.el.setAttribute('style', 'display: none');
 
-        // ensure an id on our elemen (eg TinyMCE doesn't have one)
+        // ensure an id on our elemen (TinyMCE doesn't have one)
         let nodeId = this.el.getAttribute("id");
         if (!nodeId) {
             nodeId = utils.generateId();
             this.el.setAttribute("id", nodeId);
         }
 
-        const ContentBrowser = (await import("./src/ContentBrowser.svelte")).default;
+        const ContentBrowserApp = (await import("./src/App.svelte")).default;
 
-        // create wrapper
+        // create browser node
         const contentBrowserEl = document.createElement("div");
         contentBrowserEl.classList.add("content-browser-wrapper");
         this.el.parentNode.insertBefore(contentBrowserEl, this.el);
 
-        this.component_instance_browser = new ContentBrowser({
+        this.component_content_browser = new ContentBrowserApp({
             target: contentBrowserEl,
-            props: this.options,
-        });
-
-        const selectedItemsEl = document.createElement("div");
-        selectedItemsEl.classList.add("selected-items");
-        contentBrowserEl.append(selectedItemsEl);
-
-        const SelectedItems = (await import("./src/SelectedItems.svelte")).default;
-
-        this.component_instance_sel_items = new SelectedItems({
-            target: selectedItemsEl,
             props: {
-                maximumSelectionSize: this.options.maximumSelectionSize,
-                selectedItemsNode: this.el,
+                fieldId: nodeId,
                 ...this.options,
-            },
+            }
         });
     }
 }
diff --git a/src/pat/contentbrowser/src/App.svelte b/src/pat/contentbrowser/src/App.svelte
new file mode 100644
index 000000000..703166905
--- /dev/null
+++ b/src/pat/contentbrowser/src/App.svelte
@@ -0,0 +1,45 @@
+<script>
+    import { getContext } from "svelte";
+    import ContentBrowser from "./ContentBrowser.svelte";
+    import SelectedItems from "./SelectedItems.svelte";
+    import {
+        setConfig,
+        setSelectedItems,
+        setSelectedUids,
+        setShowContentBrowser,
+    } from "./stores";
+
+    export let maxDepth;
+    export let basePath = "";
+    export let selectableTypes = [];
+    export let maximumSelectionSize = -1;
+    export let attributes;
+    export let separator;
+    export let selection = [];
+    export let vocabularyUrl;
+    export let fieldId;
+
+    // initialize context stores
+    setConfig();
+    setSelectedItems();
+    setShowContentBrowser();
+    setSelectedUids();
+
+    let config = getContext("config");
+    $config = {
+        maxDepth: maxDepth,
+        basePath: basePath,
+        selectableTypes: selectableTypes,
+        maximumSelectionSize: maximumSelectionSize,
+        attributes: attributes,
+        separator: separator,
+        selection: selection,
+        vocabularyUrl: vocabularyUrl,
+        fieldId: fieldId,
+    }
+
+    console.log(`Initialized App<${fieldId}> with config ${JSON.stringify($config)}`);
+</script>
+
+<ContentBrowser />
+<SelectedItems />
diff --git a/src/pat/contentbrowser/src/ContentBrowser.svelte b/src/pat/contentbrowser/src/ContentBrowser.svelte
index 0fe951ffa..134a0baef 100644
--- a/src/pat/contentbrowser/src/ContentBrowser.svelte
+++ b/src/pat/contentbrowser/src/ContentBrowser.svelte
@@ -1,6 +1,6 @@
 <script>
     import utils from "@patternslib/patternslib/src/core/utils";
-    import { onDestroy, onMount } from "svelte";
+    import { getContext, onMount } from "svelte";
     import * as animateScroll from "svelte-scrollto";
     import { fly } from "svelte/transition";
     import contentStore from "./ContentStore";
@@ -9,12 +9,7 @@
     import Upload from "../../upload/upload";
 
     import {
-        setConfig,
-        getConfig,
         currentPath,
-        selectedItemsMap,
-        selectedUids,
-        showContentBrowser,
     } from "./stores.js";
     // import Keydown from "svelte-keydown";
 
@@ -24,17 +19,14 @@
         duration: 500,
     });
 
-    export let maxDepth;
-    export let basePath = "";
-    export let attributes;
-    export let vocabularyUrl;
-    export let fieldId;
-    export const contentItems = contentStore();
+    // get context stores
+    const config = getContext("config");
+    const showContentBrowser = getContext("showContentBrowser");
+    const selectedItems = getContext("selectedItems");
+    const selectedUids = getContext("selectedUids");
 
-    // initialize reactive context config
-    setConfig();
-    // get creative context config
-    const config = getConfig();
+    // initialize content browser store
+    const contentItems = contentStore($config);
 
     let showUpload = false;
     let previewItem = { UID: "" };
@@ -65,10 +57,6 @@
     }
 
     onMount(() => {
-        $config.maxDepth = maxDepth;
-        $config.basePath = basePath;
-        $config.vocabularyUrl = vocabularyUrl;
-        $config.attributes = attributes;
         breakPoint = getBreakPoint();
         console.log(
             `ContentBrowser initialized reactive context config: ${JSON.stringify($config)}`,
@@ -113,12 +101,12 @@
     }
 
     async function selectItem(item) {
-        console.log(`add ${JSON.stringify(item)} to ${fieldId}`);
-        $selectedItemsMap.push(fieldId, item);
-        selectedUids.update(() => $selectedItemsMap.get(fieldId).map((x) => x.UID));
+        console.log(`add ${JSON.stringify(item)} to ${$config.fieldId}`);
+        selectedItems.update((n) => [...n, item]);
+        selectedUids.update(() => $selectedItems.map((x) => x.UID));
         $showContentBrowser = false;
         previewItem = { UID: "" };
-        console.log($selectedItemsMap.get(fieldId));
+        console.log($selectedItems);
         console.log($selectedUids);
     }
 
@@ -225,7 +213,7 @@
                                     <button
                                         class="btn btn-primary btn-sm"
                                         disabled={!isSelectable(level)}
-                                        on:click={() => selectItem(level)}
+                                        on:click|preventDefault={() => selectItem(level)}
                                     >
                                         select
                                     </button>
@@ -275,7 +263,7 @@
                                 <button
                                     class="btn btn-primary btn-sm"
                                     disabled={!isSelectable(previewItem)}
-                                    on:click={() => selectItem(previewItem)}
+                                    on:click|preventDefault={() => selectItem(previewItem)}
                                     >select</button
                                 >
                             </div>
diff --git a/src/pat/contentbrowser/src/ContentStore.js b/src/pat/contentbrowser/src/ContentStore.js
index c440b89a8..c0de33033 100644
--- a/src/pat/contentbrowser/src/ContentStore.js
+++ b/src/pat/contentbrowser/src/ContentStore.js
@@ -1,14 +1,8 @@
 import { writable, get } from "svelte/store";
-import { config, cache } from "./stores";
+import { cache } from "./stores";
 
-let cfg = get(config);
 
-// update cfg when config store changes
-export const config_unsubscribe = config.subscribe((value) => {
-    cfg = value;
-});
-
-export default function () {
+export default function (config) {
     const store = writable([]);
 
     store.request = async ({
@@ -17,8 +11,11 @@ export default function () {
         uids = null,
         params = null,
         searchTerm = null,
+        selectableTypes = [],
     }) => {
-        let vocabQuery;
+        let vocabQuery = {
+            criteria: [],
+        };
         if (path) {
             vocabQuery = {
                 criteria: [
@@ -51,10 +48,21 @@ export default function () {
 
             })
         }
-
-        let url = `${cfg.vocabularyUrl}&query=${JSON.stringify(
+        // if(selectableTypes) {
+        //     if(selectableTypes.indexOf("Folder") == -1) {
+        //         // add Folder always to preserve browsing through structure
+        //         selectableTypes.push("Folder");
+        //     }
+        //     // query only selectable types
+        //     vocabQuery.criteria.push({
+        //         i: "portal_type",
+        //         o: "plone.app.querystring.operation.selection.any",
+        //         v: selectableTypes,
+        //     });
+        // }
+        let url = `${config.vocabularyUrl}&query=${JSON.stringify(
             vocabQuery
-        )}&attributes=${JSON.stringify(cfg.attributes)}&batch=${JSON.stringify({
+        )}&attributes=${JSON.stringify(config.attributes)}&batch=${JSON.stringify({
             page: 1,
             size: 100,
         })}`;
@@ -86,7 +94,7 @@ export default function () {
 
     store.get = async (path, searchTerm, levelData) => {
         let parts = path.split("/") || [];
-        const depth = parts.length >= cfg.maxDepth ? cfg.maxDepth : parts.length;
+        const depth = parts.length >= config.maxDepth ? config.maxDepth : parts.length;
         let paths = [];
 
         let partsToShow = parts.slice(parts.length - depth, parts.length);
@@ -113,7 +121,7 @@ export default function () {
                 let query = {
                     method: "GET"
                 };
-                let queryPath = cfg.basePath;
+                let queryPath = config.basePath;
                 if (queryPath === "/") {
                     queryPath = "";
                 }
@@ -122,6 +130,9 @@ export default function () {
                 if(isFirstPath && searchTerm){
                     query["searchTerm"] = searchTerm + "*";
                 }
+                if(config.selectableTypes.length) {
+                    query["selectableTypes"] = config.selectableTypes;
+                }
                 level = await store.request(query);
                 if(!skipCache){
                     cache.update((n) => {
diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index 36c9ec313..dc3117375 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -1,34 +1,28 @@
 <script>
-    import { onMount } from "svelte";
-    import {
-        selectedUids,
-        showContentBrowser,
-        getSelectedItems,
-        getConfig,
-        setSelectedItems,
-    } from "./stores.js";
+    import { getContext, onMount } from "svelte";
     import { flip } from "svelte/animate";
     import { request } from "./api.js";
     import { resolveIcon } from "./resolveIcon.js";
 
-    export let maximumSelectionSize;
-    export let selectedItemsNode;
-    export let separator = ";";
-    export let selection = []; // inject selected values (eg. TinyMCE)
-
     let ref;
-    const fieldId = selectedItemsNode.getAttribute("id");
-
-    // initialize reactive context store
-    setSelectedItems();
-    // get reactive context store
-    const selectedItems = getSelectedItems();
+    let initializing = true;
 
     // get reactive context config
-    const config = getConfig();
+    const config = getContext("config");
+    const fieldId = $config.fieldId;
+    const selectedItemsNode = document.getElementById(fieldId);
+
+    console.log(`${fieldId} get context config: ${JSON.stringify($config)}`);
+
+    // get reactive context store
+    const selectedItems = getContext("selectedItems");
+    const selectedUids = getContext("selectedUids");
 
     console.log(`${fieldId} initialized reactive context store`);
 
+    // showContentBrowser reactive state
+    const showContentBrowser = getContext("showContentBrowser");
+
     function event_dispatch(name, detail) {
         const event = new CustomEvent(name, {
             detail: {
@@ -45,6 +39,7 @@
         console.log(
             `${fieldId} end onMount(). $selectedItems: ${JSON.stringify($selectedItems)}`,
         );
+        initializing = false;
     });
 
     function unselectItem(i) {
@@ -53,6 +48,7 @@
             return n;
         });
         selectedUids.update(() => $selectedItems.map((x) => x.UID));
+        console.log(`Unselected i=${i}, new value: ${JSON.stringify($selectedUids)}`);
     }
 
     async function getSelectedItemsUids(uids) {
@@ -70,10 +66,10 @@
     }
 
     async function initializeSelectedItemsStore() {
-        const initialValue = selection.length
-            ? selection
+        const initialValue = $config.selection.length
+            ? $config.selection
             : selectedItemsNode?.value
-              ? selectedItemsNode.value.split(separator)
+              ? selectedItemsNode.value.split($config.separator)
               : [];
 
         if (!initialValue.length) {
@@ -84,19 +80,24 @@
         $selectedItems = selectedItemsUids;
         selectedUids.update(() => selectedItemsUids.map((x) => x.UID));
 
-        if (maximumSelectionSize !== 1) {
+        if ($config.maximumSelectionSize !== 1 && $selectedItems.length > 1) {
             let Sortable = (await import("sortablejs")).default;
-            Sortable.create(document.querySelector(".content-browser-selected-items"), {
-                draggable: ".selected-item",
-                animation: 200,
-                onUpdate: (e) => {
-                    let sortedUuids = [];
-                    for (const el of e.target.children) {
-                        sortedUuids.push(el.dataset["uuid"]);
-                    }
-                    setNodeValue(sortedUuids);
+            Sortable.create(
+                selectedItemsNode.previousSibling.querySelector(
+                    ".content-browser-selected-items",
+                ),
+                {
+                    draggable: ".selected-item",
+                    animation: 200,
+                    onUpdate: (e) => {
+                        let sortedUuids = [];
+                        for (const el of e.target.children) {
+                            sortedUuids.push(el.dataset["uuid"]);
+                        }
+                        setNodeValue(sortedUuids);
+                    },
                 },
-            });
+            );
         }
     }
 
@@ -109,17 +110,21 @@
     }
 
     function setNodeValue(selectedUids) {
-        const node_val = selectedUids.join(separator);
+        const node_val = selectedUids.join($config.separator);
         console.log(`set value of ${fieldId} to ${node_val}`);
         selectedItemsNode.value = node_val;
     }
 
+    function openContentBrowser() {
+        $showContentBrowser = true;
+    }
+
     $: {
         $selectedItems;
         console.log(
             `${fieldId} reactive change in $selectedItems: ${JSON.stringify($selectedItems)}`,
         );
-        if ($selectedItems.length) {
+        if ($selectedItems.length || !initializing) {
             setNodeValue(selectedUidsFromSelectedItems());
             event_dispatch("updateSelection", selectedUids);
         }
@@ -162,10 +167,10 @@
     <button
         class="btn btn-primary"
         style="border-radius:0 var(--bs-border-radius) var(--bs-border-radius) 0"
-        disabled={maximumSelectionSize > 0 &&
-            ($selectedItems.length || 0) >= maximumSelectionSize}
-        on:click|preventDefault={($showContentBrowser = true)}
-        >{#if maximumSelectionSize == 1}choose{:else}add{/if}</button
+        disabled={$config.maximumSelectionSize > 0 &&
+            ($selectedItems.length || 0) >= $config.maximumSelectionSize}
+        on:click|preventDefault={openContentBrowser}
+        >{#if config.maximumSelectionSize == 1}choose{:else}add{/if}</button
     >
 </div>
 
diff --git a/src/pat/contentbrowser/src/api.js b/src/pat/contentbrowser/src/api.js
index e687b2571..6e863f6db 100644
--- a/src/pat/contentbrowser/src/api.js
+++ b/src/pat/contentbrowser/src/api.js
@@ -1,7 +1,8 @@
+import { getContext } from "svelte";
 
 export async function request({
     method = "GET",
-    vocabularyUrl = null,
+    vocabularyUrl = "",
     attributes = {},
     path = null,
     uids = null,
@@ -40,12 +41,6 @@ export async function request({
         size: 100,
     })}`;
 
-    // store.update((data) => {
-    //     delete data.errors;
-    //     data.loading = true;
-    //     return data;
-    // });
-
     let headers = new Headers();
     // headers.set("Content-type", "application/json");
     headers.set("Accept", "application/json");
@@ -57,12 +52,6 @@ export async function request({
     if (response.ok) {
         return json;
     } else {
-        // store.update((data) => {
-        //     data.loading = false;
-        //     data.errors = json.errors;
-        //     return data;
-        // });
-        // return {};
         return json.errors;
     }
 }
diff --git a/src/pat/contentbrowser/src/stores.js b/src/pat/contentbrowser/src/stores.js
index 62ff1089d..8a8d5cedd 100644
--- a/src/pat/contentbrowser/src/stores.js
+++ b/src/pat/contentbrowser/src/stores.js
@@ -1,81 +1,26 @@
-import { getContext, setContext } from 'svelte';
-import { derived, writable } from 'svelte/store';
+import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
 
 export const currentPath = writable('/');
-export const config = writable({
-    vocabularyUrl: null,
-    attributes: null,
-    maxDepth: 3,
-    basePath: null,
-});
-export const selectedItems = writable([]);
-export const selectedUids = writable([]);
-export const showContentBrowser = writable(false);
-export const fieldId = writable("");
-
 export const cache = writable({});
 
-// see https://svelte.dev/repl/ccbc94cb1b4c493a9cf8f117badaeb31?version=4.2.12
-// as basis. we enhanced this with get, push ans splice API for reactively
-// updateing list values of this dict store
-function createMapStore(initial) {
-    const store = writable(initial);
-    const set = (key, value) => store.update(m => Object.assign({}, m, { [key]: value }));
-    const results = derived(store, s => ({
-        keys: Object.keys(s),
-        values: Object.values(s),
-        entries: Object.entries(s),
-        set(k, v) {
-            store.update(s => Object.assign({}, s, { [k]: v }))
-        },
-        get(k) {
-            return s[k];
-        },
-        remove(k) {
-            store.update(s => {
-                delete s[k];
-                return s;
-            });
-        },
-        push(k, v) {
-            store.update(s => {
-                s[k].push(v);
-                return s;
-            })
-        },
-        splice(k, idx) {
-            store.update(s => {
-                s[k].splice(idx, 1);
-                return s;
-            })
-        }
-    }));
-    return {
-        subscribe: results.subscribe,
-        set: store.set,
-    }
-}
-
-// we need a store map with field_id => selectedItems to ensure correct
-// selectedItems for multiple pattern occurrences on one page
-export const selectedItemsMap = createMapStore({});
-
-// another try with reactive context stores
+// reactive context stores
 export function setSelectedItems() {
     let selItems = writable([]);
     setContext('selectedItems', selItems);
 }
 
-export function getSelectedItems() {
-    return getContext('selectedItems');
-}
-
 export function setConfig() {
     let config = writable({});
     setContext('config', config);
 }
 
-export function getConfig() {
-    return getContext('config');
+export function setShowContentBrowser() {
+    let showContentBrowser = writable(false);
+    setContext('showContentBrowser', showContentBrowser);
 }
 
+export function setSelectedUids() {
+    let selUids = writable([]);
+    setContext("selectedUids", selUids);
+}
diff --git a/src/pat/tinymce/js/links.js b/src/pat/tinymce/js/links.js
index f9d481b79..37c024142 100644
--- a/src/pat/tinymce/js/links.js
+++ b/src/pat/tinymce/js/links.js
@@ -97,6 +97,7 @@ var InternalLink = LinkType.extend({
     createContentBrowser: async function () {
         var options = {
             "selection": [],
+            ...this.linkModal.options?.relatedItems,
         };
         options["maximum-selection-size"] = 1;
         const inputEl = this.getEl();