diff --git a/package.json b/package.json
index 1b30aed..59a520b 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "main": "./dist/vue-components.umd.js",
   "module": "./dist/vue-components.es.js",
   "typings": "./dist/src/main.d.ts",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",
diff --git a/src/__tests__/OeContainer.cy.ts b/src/__tests__/OeContainer.cy.ts
index f376ff7..d1a0934 100644
--- a/src/__tests__/OeContainer.cy.ts
+++ b/src/__tests__/OeContainer.cy.ts
@@ -58,7 +58,7 @@ describe('Container', () => {
       setup: () => {
         const tabs = ref([
           { label: 'Menu', id: 'menu', closable: false, editMode: false },
-          { label: 'Tab 1', id: '1', closable: true, editMode: false },
+          { label: 'Tab 1', id: '1', closable: true, editMode: true },
           { label: 'Tab 2', id: '2', closable: true, editMode: false },
         ]);
         const activeTab = ref<ITab>(tabs.value[0]);
@@ -134,11 +134,12 @@ describe('Container', () => {
       });
     });
 
-    it('emits a tab-closed event with the selected tab on close', () => {
+    it('emits a tab-closed event with the selected tab on close after confirmation', () => {
       const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
 
       cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
         cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+        cy.dataCy('confirm-button').click();
 
         cy.get('@onTabClosedSpy').should(
           'have.been.calledWith',
@@ -146,5 +147,60 @@ describe('Container', () => {
         );
       });
     });
+
+    it('does not emit a tab-closed event with the selected tab on close after confirmation cancellation', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+        cy.dataCy('cancel-button').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'not.have.been.calledWith',
+          component.tabs.find((t) => t.id === '1')
+        );
+      });
+    });
+
+    it('emits a tab-closed event with the selected tab on close when confirmation is disabled', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy, disableConfirmCloseTab: true } }).then(
+        ({ component }) => {
+          cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+
+          cy.get('@onTabClosedSpy').should(
+            'have.been.calledWith',
+            component.tabs.find((t) => t.id === '1')
+          );
+        }
+      );
+    });
+
+    it('does not emit a tab-closed event with the selected tab on close when tab is in edit mode without confirmation', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'not.have.been.calledWith',
+          component.tabs.find((t) => t.id === '1')
+        );
+      });
+    });
+
+    it('emits a tab-closed event with the selected tab on close when tab is not in edit mode', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-2 .vl-pill__close').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'have.been.calledWith',
+          component.tabs.find((t) => t.id === '2')
+        );
+      });
+    });
   });
 });
diff --git a/src/components/smart/OeActorWidgetDetail.vue b/src/components/dumb/OeActorWidgetDetail.vue
similarity index 100%
rename from src/components/smart/OeActorWidgetDetail.vue
rename to src/components/dumb/OeActorWidgetDetail.vue
diff --git a/src/components/smart/OeActorWidgetGridActies.vue b/src/components/dumb/OeActorWidgetGridActies.vue
similarity index 87%
rename from src/components/smart/OeActorWidgetGridActies.vue
rename to src/components/dumb/OeActorWidgetGridActies.vue
index 9c6e457..8e01e23 100644
--- a/src/components/smart/OeActorWidgetGridActies.vue
+++ b/src/components/dumb/OeActorWidgetGridActies.vue
@@ -7,7 +7,7 @@
       icon="eye"
       @click="props.params.setStateDetail(params.data?.id as number)"
     />
-    <a :href="`${props.params.actorenUrl}/beheer#/${params.data?.id}`" target="_blank" title="Bewerk actor">
+    <a :href="`${props.params.actorenUrl}beheer/${params.data?.id}`" target="_blank" title="Bewerk actor">
       <font-awesome-icon class="icon" icon="pencil" />
     </a>
   </div>
diff --git a/src/components/dumb/OeContainer.vue b/src/components/dumb/OeContainer.vue
index a66f0e5..f77e23c 100644
--- a/src/components/dumb/OeContainer.vue
+++ b/src/components/dumb/OeContainer.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="oe-container">
+    <OeModalConfirmCancelChanges
+      v-if="!props.disableConfirmCloseTab"
+      :open="confirmCancelChangesOpen"
+      @close="confirmCancelChangesOpen = false"
+      @confirm="closeTab(confirmTab as ITab, true)"
+    />
     <div data-cy="oe-container-content" class="oe-container__content">
       <slot></slot>
     </div>
@@ -13,7 +19,7 @@
           :close-label="`Sluit tab ${item.label}`"
           mod-clickable
           @click="(event: Event) => select(event, item)"
-          @close="close(item)"
+          @close="closeTab(item)"
         >
           {{ item.label }}
         </vl-pill>
@@ -24,11 +30,14 @@
 
 <script setup lang="ts">
 import { VlActionGroup, VlPill } from '@govflanders/vl-ui-design-system-vue3';
+import { ref } from 'vue';
+import { OeModalConfirmCancelChanges } from '@components/dumb';
 import type { IContainerProps, ITab } from '@models/container';
 
 const props = withDefaults(defineProps<IContainerProps>(), {
   tabs: () => [],
   activeTab: undefined,
+  disableConfirmCloseTab: false,
 });
 const emit = defineEmits<{
   (e: 'tab-selected', tab: ITab): void;
@@ -44,8 +53,17 @@ const select = (event: Event, item: ITab) => {
   }
 };
 
-const close = (item: ITab) => {
-  emit('tab-closed', item);
+// Confirm cancel modal
+const confirmCancelChangesOpen = ref(false);
+const confirmTab = ref<ITab>();
+const closeTab = (item: ITab, confirm = false) => {
+  if (confirm || props.disableConfirmCloseTab || !item.editMode) {
+    confirmCancelChangesOpen.value = false;
+    emit('tab-closed', item);
+  } else {
+    confirmTab.value = item;
+    confirmCancelChangesOpen.value = true;
+  }
 };
 </script>
 
diff --git a/src/components/dumb/OeModalConfirmCancelChanges.vue b/src/components/dumb/OeModalConfirmCancelChanges.vue
new file mode 100644
index 0000000..2412ab3
--- /dev/null
+++ b/src/components/dumb/OeModalConfirmCancelChanges.vue
@@ -0,0 +1,27 @@
+<template>
+  <vl-modal id="confirm-cancel-changes-modal">
+    <h2 class="vl-title vl-title--h2 vl-modal-dialog__title">
+      Ben je zeker dat je deze wijzigingen niet wilt bewaren?
+    </h2>
+    <div class="vl-u-spacer-bottom">
+      <p class="vl-u-spacer-bottom">
+        Bij het sluiten van deze fiche zullen je onbewaarde wijzigingen verloren gaan. Zorg ervoor dat je eerst je
+        wijzigingen bewaart, alvorens deze pagina te verlaten.
+      </p>
+    </div>
+    <div class="vl-u-flex vl-u-flex-align-center">
+      <vl-button data-cy="confirm-button" class="vl-button vl-u-spacer-right" @click="emit('confirm')"
+        >Ja, annuleer mijn wijzigingen</vl-button
+      >
+      <vl-button data-cy="cancel-button" class="vl-button large" @click="emit('close')"
+        >Nee, behoud mijn wijzigingen</vl-button
+      >
+    </div>
+  </vl-modal>
+</template>
+
+<script setup lang="ts">
+import { VlButton, VlModal } from '@govflanders/vl-ui-design-system-vue3';
+
+const emit = defineEmits(['confirm', 'close']);
+</script>
diff --git a/src/components/dumb/index.ts b/src/components/dumb/index.ts
index 6100e15..2775647 100644
--- a/src/components/dumb/index.ts
+++ b/src/components/dumb/index.ts
@@ -7,6 +7,8 @@ import FilterText from './FilterText.vue';
 import GridWorkflow from './GridWorkflow.vue';
 import InputPhone from './InputPhone.vue';
 import NoRowsOverlay from './NoRowsOverlay.vue';
+import OeActorWidgetDetail from './OeActorWidgetDetail.vue';
+import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import OeAutocomplete from './OeAutocomplete.vue';
 import OeButton from './OeButton.vue';
 import OeContainer from './OeContainer.vue';
@@ -14,6 +16,7 @@ import OeGrid from './OeGrid.vue';
 import OeHeader from './OeHeader.vue';
 import OeInventarisLoadedLink from './OeInventarisLoadedLink.vue';
 import OeLoader from './OeLoader.vue';
+import OeModalConfirmCancelChanges from './OeModalConfirmCancelChanges.vue';
 import OeSelect from './OeSelect.vue';
 import OeTinyMce from './OeTinyMCE.vue';
 import OeToaster from './OeToaster.vue';
@@ -40,6 +43,9 @@ export {
   OeSelect,
   OeTinyMce,
   OeToaster,
+  OeActorWidgetGridActies,
+  OeActorWidgetDetail,
   OeWizard,
   SystemFields,
+  OeModalConfirmCancelChanges,
 };
diff --git a/src/components/smart/OeActorWidget.vue b/src/components/smart/OeActorWidget.vue
index a12dc55..9fce08a 100644
--- a/src/components/smart/OeActorWidget.vue
+++ b/src/components/smart/OeActorWidget.vue
@@ -4,6 +4,7 @@
     <template #modal-content>
       <grid
         v-if="state === ActorWidgetState.Grid"
+        :search-actor="props.searchActor"
         :api="props.api"
         :get-sso-token="props.getSsoToken"
         data-cy="actor-widget-grid"
@@ -40,8 +41,8 @@
 <script setup lang="ts">
 import { VlButton, VlModal } from '@govflanders/vl-ui-design-system-vue3';
 import { ref } from 'vue';
+import Detail from '@components/dumb/OeActorWidgetDetail.vue';
 import OeLoader from '@components/dumb/OeLoader.vue';
-import Detail from '@components/smart/OeActorWidgetDetail.vue';
 import Grid from '@components/smart/OeActorWidgetGrid.vue';
 import { ActorService } from '@services/actor.service';
 import type { ActorType, IActor } from '@models/actor';
@@ -49,8 +50,9 @@ import type { ActorType, IActor } from '@models/actor';
 interface IOeActorWidgetProps {
   id: string;
   api: string;
-  getSsoToken: () => Promise<string>;
+  getSsoToken?: () => Promise<string>;
   actorType?: ActorType;
+  searchActor?: string;
 }
 
 enum ActorWidgetState {
@@ -63,7 +65,9 @@ const props = withDefaults(defineProps<IOeActorWidgetProps>(), {
   api: '',
   getSsoToken: undefined,
   actorType: undefined,
+  searchActor: '',
 });
+
 const emit = defineEmits<{
   add: [IActor];
   close: [void];
diff --git a/src/components/smart/OeActorWidgetGrid.vue b/src/components/smart/OeActorWidgetGrid.vue
index 7ce1dd5..8825d4c 100644
--- a/src/components/smart/OeActorWidgetGrid.vue
+++ b/src/components/smart/OeActorWidgetGrid.vue
@@ -4,6 +4,7 @@
       <div class="vl-col--1-1 vl-u-flex vl-u-flex-align-flex-end">
         <vl-search
           id="actor-widget-menu-search"
+          v-model="zoekterm"
           name="actor-widget-menu-search"
           mod-inline
           mod-alt
@@ -42,23 +43,25 @@
 <script setup lang="ts">
 import { VlButton, VlSearch } from '@govflanders/vl-ui-design-system-vue3';
 import { isEmpty, omitBy } from 'lodash';
-import { computed, getCurrentInstance, ref } from 'vue';
+import { computed, getCurrentInstance, ref, watch } from 'vue';
+import { OeActorWidgetGridActies } from '@components/dumb';
 import OeGrid from '@components/dumb/OeGrid.vue';
-import OeActorWidgetGridActies from '@components/smart/OeActorWidgetGridActies.vue';
 import { ActorService, type IActorenQuery } from '@services/actor.service';
 import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
 import type { ActorType, IActor } from '@models/actor';
 
 interface IOeActorWidgetGridProps {
   api: string;
-  getSsoToken: () => Promise<string>;
+  getSsoToken?: () => Promise<string>;
   actorType?: ActorType;
+  searchActor?: string;
 }
 
 const props = withDefaults(defineProps<IOeActorWidgetGridProps>(), {
   api: '',
   getSsoToken: undefined,
   actorType: undefined,
+  searchActor: '',
 });
 const emit = defineEmits<{
   selectActor: [IActor];
@@ -85,12 +88,15 @@ const handleSearchClick = (event: Event) => {
 const refresh = () => {
   // reset sort values
   gridOptions.value.columnApi?.resetColumnState();
-  // reset zoekterm values
-  zoekterm.value = '';
-  (document.querySelector('#actor-widget-menu-search') as HTMLInputElement).value = '';
   search();
 };
-
+watch(
+  () => props.searchActor,
+  () => {
+    zoekterm.value = props.searchActor;
+  },
+  { immediate: true }
+);
 // Grid
 const rowCount = ref(0);
 const getColumnDefinitions = (): ColDef[] => {
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
index 49c097b..c2c08b4 100644
--- a/src/components/smart/index.ts
+++ b/src/components/smart/index.ts
@@ -4,6 +4,7 @@ import FilterGemeente from './FilterGemeente.vue';
 import FilterProvincie from './FilterProvincie.vue';
 import OeActorReferences from './OeActorReferences.vue';
 import OeActorWidget from './OeActorWidget.vue';
+import OeActorWidgetGrid from './OeActorWidgetGrid.vue';
 import OeAdres from './OeAdres.vue';
 import OeInventarisLink from './OeInventarisLink.vue';
 import OeZoneerder from './OeZoneerder.vue';
@@ -15,6 +16,7 @@ export {
   FilterGemeente,
   FilterProvincie,
   OeActorWidget,
+  OeActorWidgetGrid,
   OeActorReferences,
   OeZoneerder,
   OeInventarisLink,
diff --git a/src/models/container.ts b/src/models/container.ts
index dfc8742..924c8cd 100644
--- a/src/models/container.ts
+++ b/src/models/container.ts
@@ -1,6 +1,7 @@
 export interface IContainerProps {
   activeTab?: ITab;
   tabs?: ITab[];
+  disableConfirmCloseTab?: boolean;
 }
 
 export interface ITab {
diff --git a/src/services/actor.service.ts b/src/services/actor.service.ts
index cbed1f8..0eb2b54 100644
--- a/src/services/actor.service.ts
+++ b/src/services/actor.service.ts
@@ -1,4 +1,5 @@
 import { HttpService } from './http.service';
+import type { AxiosError } from 'axios';
 import type { ActorType, IActor } from '@models/actor';
 import type { IResponse } from '@models/grid';
 
@@ -12,21 +13,24 @@ export class ActorService extends HttpService {
   readonly API_URL: string;
 
   private actoren: IActor[] = [];
-  private getSsoToken: () => Promise<string>;
-  constructor(apiUrl: string, getSsoToken: () => Promise<string>) {
+  private getSsoToken: () => Promise<string | void>;
+
+  constructor(apiUrl: string, getSsoToken?: () => Promise<string>) {
     super();
     this.API_URL = apiUrl;
-    this.getSsoToken = getSsoToken;
+    this.getSsoToken = (getSsoToken as () => Promise<string>) || (() => Promise.resolve());
   }
 
   async getAOEActoren(searchTerm: string): Promise<IActor[]> {
     if (this.actoren?.length) {
       return this.actoren;
     }
-    const ssoToken = await this.getSsoToken();
+
     return (
       await this.get<IActor[]>(`${this.API_URL}/actoren/wij`, {
-        headers: { Authorization: 'Bearer ' + ssoToken },
+        headers: {
+          ...((await this.getSsoToken()) && { Authorization: 'Bearer ' + (await this.getSsoToken()) }),
+        },
         params: { omschrijving: `${searchTerm}` },
       })
     ).data;
@@ -38,7 +42,7 @@ export class ActorService extends HttpService {
       headers: {
         Range: contentRange,
         Accept: 'application/json',
-        Authorization: 'Bearer ' + (await this.getSsoToken()),
+        ...((await this.getSsoToken()) && { Authorization: 'Bearer ' + (await this.getSsoToken()) }),
       },
       params: query,
     });
@@ -52,13 +56,23 @@ export class ActorService extends HttpService {
   }
 
   async getActorById(id: number): Promise<IActor> {
-    return (
-      await this.get<IActor>(`${this.API_URL}/actoren/${id.toString()}?adressenregister`, {
-        headers: {
-          Accept: 'application/json',
-          Authorization: 'Bearer ' + (await this.getSsoToken()),
-        },
-      })
-    ).data;
+    try {
+      return (
+        await this.get<IActor>(`${this.API_URL}/actoren/${id.toString()}?adressenregister`, {
+          headers: {
+            Accept: 'application/json',
+            ...((await this.getSsoToken()) && { Authorization: 'Bearer ' + (await this.getSsoToken()) }),
+          },
+        })
+      ).data;
+    } catch (error) {
+      const e = error as AxiosError;
+      if (e.response?.status) {
+        console.error('Gelieve een gelding token te voorzien via de [getSsoToken] callback');
+      } else {
+        console.error(e);
+      }
+      return Promise.reject();
+    }
   }
 }
diff --git a/src/stories/dumb-components/container.stories.ts b/src/stories/dumb-components/container.stories.ts
index 81ef37a..b7d10ae 100644
--- a/src/stories/dumb-components/container.stories.ts
+++ b/src/stories/dumb-components/container.stories.ts
@@ -95,7 +95,7 @@ export const Tabs: Story = {
   parameters: {
     docs: {
       story: {
-        height: '250px',
+        height: '500px',
       },
       description: {
         story:
@@ -111,13 +111,14 @@ export const Tabs: Story = {
       VlButton,
     },
     setup: () => {
-      const tabs = ref([{ label: 'Menu', id: 'menu', closable: false }]);
+      const tabs = ref([{ label: 'Menu', id: 'menu', closable: false, editMode: false }]);
       const activeTab = ref<ITab>(tabs.value[0]);
       const addTab = () => {
         tabs.value.push({
           label: `Tab ${tabs.value.length.toString()}`,
           id: tabs.value.length.toString(),
           closable: true,
+          editMode: false,
         });
         activeTab.value = last(tabs.value) as ITab;
       };
@@ -126,17 +127,29 @@ export const Tabs: Story = {
         remove(tabs.value, (item) => item.id === tab.id);
         activeTab.value = tabs.value[0];
       };
+      const setEditMode = () => {
+        tabs.value[1].editMode = true;
+      };
 
-      return { tabs, activeTab, addTab, setActiveTab, closeTab };
+      return { tabs, activeTab, addTab, setActiveTab, closeTab, setEditMode };
     },
     template: `
-     <oe-container style="height: 200px" :tabs="tabs" :active-tab="activeTab" @tab-selected="setActiveTab" @tab-closed="closeTab">
+     <oe-container :tabs="tabs" :active-tab="activeTab" @tab-selected="setActiveTab" @tab-closed="closeTab">
       <div v-if="activeTab.id === 'menu'">
         <p class="vl-u-spacer--small">Dit is het menu overzicht</p>
+        <p class="vl-u-spacer-bottom--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum tellus pellentesque. Euismod quis viverra nibh cras pulvinar. Id leo in vitae turpis. Pretium lectus quam id leo. Dis parturient montes nascetur ridiculus mus. Enim facilisis gravida neque convallis a cras. Eget gravida cum sociis natoque penatibus et magnis. Nec nam aliquam sem et tortor consequat id porta. Non diam phasellus vestibulum lorem sed risus ultricies. Massa massa ultricies mi quis hendrerit dolor magna eget est. Eu nisl nunc mi ipsum faucibus vitae.</p> <br>
+        <p>Viverra nibh cras pulvinar mattis nunc sed. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Nulla facilisi etiam dignissim diam quis enim. Ipsum consequat nisl vel pretium lectus. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Ultrices tincidunt arcu non sodales neque. Enim eu turpis egestas pretium aenean. Sit amet nisl purus in mollis nunc sed. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. At tellus at urna condimentum mattis. Cum sociis natoque penatibus et. Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
+
         <vl-button @click="addTab">Open new tab</vl-button>
       </div>
        <div v-else>
-        Actieve tab - {{ activeTab.label }}
+        <vl-button @click="addTab">Open new tab</vl-button>
+        <vl-button @click="setEditMode">Set edit mode tab 1</vl-button>
+
+        Actieve tab - {{ activeTab }}
+        <pre>{{tabs}}</pre>
+        <p class="vl-u-spacer-bottom--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum tellus pellentesque. Euismod quis viverra nibh cras pulvinar. Id leo in vitae turpis. Pretium lectus quam id leo. Dis parturient montes nascetur ridiculus mus. Enim facilisis gravida neque convallis a cras. Eget gravida cum sociis natoque penatibus et magnis. Nec nam aliquam sem et tortor consequat id porta. Non diam phasellus vestibulum lorem sed risus ultricies. Massa massa ultricies mi quis hendrerit dolor magna eget est. Eu nisl nunc mi ipsum faucibus vitae.</p> <br>
+        <p>Viverra nibh cras pulvinar mattis nunc sed. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Nulla facilisi etiam dignissim diam quis enim. Ipsum consequat nisl vel pretium lectus. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Ultrices tincidunt arcu non sodales neque. Enim eu turpis egestas pretium aenean. Sit amet nisl purus in mollis nunc sed. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. At tellus at urna condimentum mattis. Cum sociis natoque penatibus et. Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
        </div>
      </oe-container>
     `,
diff --git a/src/stories/smart-components/oe-actor-widget.stories.ts b/src/stories/smart-components/oe-actor-widget.stories.ts
index 9f7582a..d841055 100644
--- a/src/stories/smart-components/oe-actor-widget.stories.ts
+++ b/src/stories/smart-components/oe-actor-widget.stories.ts
@@ -55,13 +55,36 @@ export const Default: Story = {
     setup() {
       const actorType = ActorType.PERSOON;
       const id = '1';
-      const api = 'https://dev-actoren.onroerenderfgoed.be';
+      const api = 'https://dev-actoren.onroerenderfgoed.be/';
+      return { id, api, actorType };
+    },
+    template: `
+    <div style="zoom: .95">
+      <oe-actor-widget search-actor="van hum" :id="id" :api="api" :open="true" @add="console.log" @close="console.log" :actor-type="actorType">
+        <template v-slot:dropdown>
+          <div class="dropdown"></div>
+        </template>
+      </oe-actor-widget>
+    </div>
+    `,
+  }),
+};
+
+export const WithSsoTokenCallback: Story = {
+  render: () => ({
+    components: {
+      OeActorWidget,
+    },
+    setup() {
+      const actorType = ActorType.PERSOON;
+      const id = '1';
+      const api = 'http://local.onroerenderfgoed.be:6543/';
       const getSsoToken = async () => 1;
       return { id, api, getSsoToken, actorType };
     },
     template: `
     <div style="zoom: .95">
-      <oe-actor-widget :id="id" :api="api" :get-sso-token="getSsoToken" :open="true" @add="console.log" @close="console.log" :actor-type="actorType">
+      <oe-actor-widget search-actor="sois" :id="id" :api="api" :get-sso-token="getSsoToken" :open="true" @add="console.log" @close="console.log" :actor-type="actorType">
         <template v-slot:dropdown>
           <div class="dropdown"></div>
         </template>