diff --git a/apps/directory/src/App.vue b/apps/directory/src/App.vue
index a076dc3624..428e7a9d92 100644
--- a/apps/directory/src/App.vue
+++ b/apps/directory/src/App.vue
@@ -3,6 +3,7 @@
     <template v-if="banner" #banner>
       <div v-html="banner"></div>
     </template>
+    <Error />
     <RouterView @click="closeAllDropdownButtons" />
     <template #footer>
       <Footer />
@@ -12,13 +13,14 @@
 
 <script setup>
 import { Molgenis } from "molgenis-components";
-import { computed, onMounted, watch, ref } from "vue";
-import { applyBookmark, createBookmark } from "./functions/bookmarkMapper";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { useFiltersStore } from "./stores/filtersStore";
+import Error from "./components/Error.vue";
+import Footer from "./components/Footer.vue";
+import { applyBookmark, createBookmark } from "./functions/bookmarkMapper";
 import { useCheckoutStore } from "./stores/checkoutStore";
+import { useFiltersStore } from "./stores/filtersStore";
 import { useSettingsStore } from "./stores/settingsStore";
-import Footer from "./components/Footer.vue";
 
 const route = useRoute();
 const query = computed(() => route.query);
diff --git a/apps/directory/src/components/Error.vue b/apps/directory/src/components/Error.vue
new file mode 100644
index 0000000000..b22ca68755
--- /dev/null
+++ b/apps/directory/src/components/Error.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div
+      v-if="error"
+      class="border border-danger justify-content-between bd-highligh p-2 align-middle"
+    >
+      <span style="color: red">
+        An error occurred while loading the data. Please, try a different
+        search. If this error persists, please contact our helpdesk.
+      </span>
+      <span>
+        <button class="btn" type="button" @click="clearError">
+          <span class="fa-solid fa-xmark" />
+        </button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useErrorHandler from "../composables/errorHandler";
+
+const { error, clearError } = useErrorHandler();
+</script>
diff --git a/apps/directory/src/composables/errorHandler.ts b/apps/directory/src/composables/errorHandler.ts
new file mode 100644
index 0000000000..df2d805541
--- /dev/null
+++ b/apps/directory/src/composables/errorHandler.ts
@@ -0,0 +1,15 @@
+import { ref } from "vue";
+
+const error = ref<null | any>(null);
+export default function useErrorHandler() {
+  const setError = (newError: any) => {
+    console.error("An error occurred: ", newError);
+    error.value = newError;
+  };
+
+  const clearError = () => {
+    error.value = null;
+  };
+
+  return { error, setError, clearError };
+}
diff --git a/apps/directory/src/functions/bookmarkMapper.ts b/apps/directory/src/functions/bookmarkMapper.ts
index 29a3a7a266..044db5d3db 100644
--- a/apps/directory/src/functions/bookmarkMapper.ts
+++ b/apps/directory/src/functions/bookmarkMapper.ts
@@ -2,9 +2,11 @@ import router from "../router";
 import { useFiltersStore } from "../stores/filtersStore";
 import { useCollectionStore } from "../stores/collectionStore";
 import { labelValuePair, useCheckoutStore } from "../stores/checkoutStore";
-
+import useErrorHandler from "../composables/errorHandler";
 let bookmarkApplied = false;
 
+const { setError } = useErrorHandler();
+
 export async function applyBookmark(watchedQuery: Record<string, string>) {
   if (bookmarkApplied) {
     bookmarkApplied = false;
@@ -180,10 +182,14 @@ export function createBookmark(
   }
 
   if (!filtersStore.bookmarkWaitingForApplication) {
-    router.push({
-      name: router.currentRoute.value.name,
-      query: bookmark,
-    });
+    try {
+      router.push({
+        name: router.currentRoute.value.name,
+        query: bookmark,
+      });
+    } catch (error) {
+      setError(error);
+    }
   }
 }
 
diff --git a/apps/directory/src/stores/biobanksStore.js b/apps/directory/src/stores/biobanksStore.js
index 360c48ff89..666ba65366 100644
--- a/apps/directory/src/stores/biobanksStore.js
+++ b/apps/directory/src/stores/biobanksStore.js
@@ -6,11 +6,13 @@ import { getPropertyByPath } from "../functions/getPropertyByPath";
 import { useCollectionStore } from "./collectionStore";
 import { useFiltersStore } from "./filtersStore";
 import { useSettingsStore } from "./settingsStore";
+import useErrorHandler from "../composables/errorHandler";
 
 export const useBiobanksStore = defineStore("biobanksStore", () => {
   const settingsStore = useSettingsStore();
   const collectionStore = useCollectionStore();
   const filtersStore = useFiltersStore();
+  const { setError } = useErrorHandler();
 
   const biobankReportColumns = settingsStore.config.biobankReportColumns;
   const biobankColumns = settingsStore.config.biobankColumns;
@@ -122,7 +124,12 @@ export const useBiobanksStore = defineStore("biobanksStore", () => {
       const requestTime = Date.now();
       lastRequestTime = requestTime;
 
-      const biobankResult = await baseQuery.execute();
+      let biobankResult = [];
+      try {
+        biobankResult = await baseQuery.execute();
+      } catch (error) {
+        setError(error);
+      }
 
       /* Update biobankCards only if the result is the most recent one*/
       if (requestTime === lastRequestTime) {
@@ -150,8 +157,12 @@ export const useBiobanksStore = defineStore("biobanksStore", () => {
       .orderBy("collections", "id", "asc")
       .where("id")
       .equals(id);
-
-    return await biobankReportQuery.execute();
+    try {
+      return await biobankReportQuery.execute();
+    } catch (error) {
+      setError(error);
+      return null;
+    }
   }
 
   function getPresentFilterOptions(facetIdentifier) {
diff --git a/apps/directory/src/stores/collectionStore.js b/apps/directory/src/stores/collectionStore.js
index 4a6458628b..5df89f4315 100644
--- a/apps/directory/src/stores/collectionStore.js
+++ b/apps/directory/src/stores/collectionStore.js
@@ -1,8 +1,10 @@
-import { defineStore } from "pinia";
 import { QueryEMX2 } from "molgenis-components";
-import { useSettingsStore } from "./settingsStore";
+import { defineStore } from "pinia";
+import useErrorHandler from "../composables/errorHandler";
 import { useCheckoutStore } from "./checkoutStore";
+import { useSettingsStore } from "./settingsStore";
 
+const { setError } = useErrorHandler();
 export const useCollectionStore = defineStore("collectionStore", () => {
   const settingsStore = useSettingsStore();
 
@@ -56,9 +58,14 @@ export const useCollectionStore = defineStore("collectionStore", () => {
         .select(["id", "name", "biobank.name", "also_known.url"])
         .where("id")
         .orLike(idsMissing);
-      const result = await missingCollectionQuery.execute();
 
-      return result.Collections;
+      try {
+        const result = await missingCollectionQuery.execute();
+        return result.Collections;
+      } catch (error) {
+        setError(error);
+        return {};
+      }
     } else {
       return {};
     }
@@ -72,7 +79,12 @@ export const useCollectionStore = defineStore("collectionStore", () => {
       .where("id")
       .equals(id);
 
-    const reportResults = await collectionReportQuery.execute();
+    let reportResults = [];
+    try {
+      reportResults = await collectionReportQuery.execute();
+    } catch (error) {
+      setError(error);
+    }
 
     const factQuery = new QueryEMX2(graphqlEndpoint)
       .table("CollectionFacts")
@@ -89,7 +101,13 @@ export const useCollectionStore = defineStore("collectionStore", () => {
       .where("collection.id")
       .like(id);
 
-    const factResults = await factQuery.execute();
+    let factResults = [];
+    try {
+      factResults = await factQuery.execute();
+    } catch (error) {
+      setError(error);
+    }
+
     reportResults.CollectionFacts = factResults.CollectionFacts;
     return reportResults;
   }
diff --git a/apps/directory/src/stores/filtersStore.ts b/apps/directory/src/stores/filtersStore.ts
index 649584cede..daa2b111b8 100644
--- a/apps/directory/src/stores/filtersStore.ts
+++ b/apps/directory/src/stores/filtersStore.ts
@@ -1,17 +1,20 @@
 import { defineStore } from "pinia";
-import { computed, ref, unref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { createFilters } from "../filter-config/facetConfigurator";
 import { applyFiltersToQuery } from "../functions/applyFiltersToQuery";
+import { applyBookmark, createBookmark } from "../functions/bookmarkMapper";
 import { useBiobanksStore } from "./biobanksStore";
-import { useSettingsStore } from "./settingsStore";
 import { useCheckoutStore } from "./checkoutStore";
-import { applyBookmark, createBookmark } from "../functions/bookmarkMapper";
+import { useSettingsStore } from "./settingsStore";
+import * as _ from "lodash";
 //@ts-ignore
 import { QueryEMX2 } from "molgenis-components";
+import useErrorHandler from "../composables/errorHandler";
 import { IFilterOption, IOntologyItem } from "../interfaces/interfaces";
-import * as _ from "lodash";
 import router from "../router";
 
+const { setError } = useErrorHandler();
+
 export const useFiltersStore = defineStore("filtersStore", () => {
   const biobankStore = useBiobanksStore();
   const checkoutStore = useCheckoutStore();
@@ -256,13 +259,18 @@ export const useFiltersStore = defineStore("filtersStore", () => {
     const ontologyResults = [];
 
     for (const codeBlock of codesToQuery) {
-      const ontologyResult = await new QueryEMX2(graphqlEndpointOntologyFilter)
-        .table(sourceTable)
-        .select(attributes)
-        .orWhere("code")
-        .in(codeBlock)
-        .orderBy(sourceTable, sortColumn, sortDirection)
-        .execute();
+      let ontologyResult;
+      try {
+        ontologyResult = await new QueryEMX2(graphqlEndpointOntologyFilter)
+          .table(sourceTable)
+          .select(attributes)
+          .orWhere("code")
+          .in(codeBlock)
+          .orderBy(sourceTable, sortColumn, sortDirection)
+          .execute();
+      } catch (error) {
+        setError(error);
+      }
 
       if (ontologyResult && ontologyResult[sourceTable]) {
         ontologyResults.push(...ontologyResult[sourceTable]);
diff --git a/apps/directory/src/stores/networkStore.ts b/apps/directory/src/stores/networkStore.ts
index 02dcdc564c..90472a536f 100644
--- a/apps/directory/src/stores/networkStore.ts
+++ b/apps/directory/src/stores/networkStore.ts
@@ -2,9 +2,12 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 //@ts-ignore
 import { QueryEMX2 } from "molgenis-components";
-import { useSettingsStore } from "./settingsStore";
-import { useCollectionStore } from "./collectionStore";
+import useErrorHandler from "../composables/errorHandler";
 import { ContactInfoColumns } from "../property-config/contactInfoColumns";
+import { useCollectionStore } from "./collectionStore";
+import { useSettingsStore } from "./settingsStore";
+
+const { setError } = useErrorHandler();
 
 export const useNetworkStore = defineStore("networkStore", () => {
   const settingsStore = useSettingsStore();
@@ -19,7 +22,14 @@ export const useNetworkStore = defineStore("networkStore", () => {
       .select(["name", "id", "description"])
       .where("network.id")
       .equals(netWorkId);
-    const biobanksResult = await biobanksQuery.execute();
+
+    let biobanksResult;
+    try {
+      biobanksResult = await biobanksQuery.execute();
+    } catch (error) {
+      setError(Error);
+      return;
+    }
 
     const reportQuery = new QueryEMX2(graphqlEndpoint)
       .table("Networks")
@@ -35,7 +45,14 @@ export const useNetworkStore = defineStore("networkStore", () => {
       ])
       .where("id")
       .equals(netWorkId);
-    const networkResult = await reportQuery.execute();
+
+    let networkResult;
+    try {
+      networkResult = await reportQuery.execute();
+    } catch (error) {
+      setError(error);
+      return;
+    }
 
     const collectionsColumns = collectionsStore.getCollectionColumns() as any;
     const collectionsQuery = new QueryEMX2(graphqlEndpoint)
diff --git a/apps/directory/src/stores/qualitiesStore.js b/apps/directory/src/stores/qualitiesStore.js
index 15f781744c..763e4f65d9 100644
--- a/apps/directory/src/stores/qualitiesStore.js
+++ b/apps/directory/src/stores/qualitiesStore.js
@@ -1,6 +1,9 @@
 import { QueryEMX2 } from "molgenis-components";
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import useErrorHandler from "../composables/errorHandler";
+
+const { setError } = useErrorHandler();
 
 export const useQualitiesStore = defineStore("qualitiesStore", () => {
   const qualityStandardsDictionary = ref({});
@@ -12,10 +15,17 @@ export const useQualitiesStore = defineStore("qualitiesStore", () => {
         waitingOnResults.value = true;
 
         const endpoint = `${window.location.protocol}//${window.location.host}/DirectoryOntologies/graphql`;
-        let qualityStandardsQueryResult = await new QueryEMX2(endpoint)
-          .table("QualityStandards")
-          .select(["name", "label", "definition"])
-          .execute();
+
+        let qualityStandardsQueryResult;
+        try {
+          qualityStandardsQueryResult = await new QueryEMX2(endpoint)
+            .table("QualityStandards")
+            .select(["name", "label", "definition"])
+            .execute();
+        } catch (error) {
+          setError(error);
+          return;
+        }
 
         if (qualityStandardsQueryResult.QualityStandards) {
           for (const quality of qualityStandardsQueryResult.QualityStandards) {
diff --git a/apps/directory/src/stores/settingsStore.js b/apps/directory/src/stores/settingsStore.js
index a0f7e08d84..0aa3dec3ff 100644
--- a/apps/directory/src/stores/settingsStore.js
+++ b/apps/directory/src/stores/settingsStore.js
@@ -1,17 +1,21 @@
-import { computed, ref } from "vue";
+import { QueryEMX2 } from "molgenis-components";
 import { defineStore } from "pinia";
-import { i18n } from "../i18n/i18n";
+import { computed, ref } from "vue";
+import useErrorHandler from "../composables/errorHandler";
 import { initialFilterFacets } from "../filter-config/initialFilterFacets";
-import initialCollectionColumns from "../property-config/initialCollectionColumns";
+import { i18n } from "../i18n/i18n";
 import initialBiobankColumns from "../property-config/initialBiobankColumns";
 import initialBiobankReportColumns from "../property-config/initialBiobankReportColumns";
+import initialCollectionColumns from "../property-config/initialCollectionColumns";
 import initialLandingpage from "../property-config/initialLandingpage";
-import { QueryEMX2 } from "molgenis-components";
 import initialStudyColumns from "../property-config/initialStudyColumns";
 /**
  * Settings store is where all the configuration of the application is handled.
  * This means that user config from the database is merged with the defaults here.
  */
+
+const { setError } = useErrorHandler();
+
 export const useSettingsStore = defineStore("settingsStore", () => {
   let session = ref({});
   let configUpdateStatus = ref(0);
@@ -39,10 +43,16 @@ export const useSettingsStore = defineStore("settingsStore", () => {
   });
 
   async function initializeConfig() {
-    const response = await new QueryEMX2(config.value.graphqlEndpoint)
-      .table("_settings")
-      .select(["key", "value"])
-      .execute();
+    let response;
+    try {
+      response = await new QueryEMX2(config.value.graphqlEndpoint)
+        .table("_settings")
+        .select(["key", "value"])
+        .execute();
+    } catch (error) {
+      setError(error);
+      return;
+    }
 
     const savedDirectoryConfig = response._settings.find(
       (setting) => setting.key === "directory"
diff --git a/apps/directory/src/stores/studyStore.ts b/apps/directory/src/stores/studyStore.ts
index 3b9477e265..be850bcd5b 100644
--- a/apps/directory/src/stores/studyStore.ts
+++ b/apps/directory/src/stores/studyStore.ts
@@ -1,8 +1,11 @@
 import { defineStore } from "pinia";
 //@ts-ignore
 import { QueryEMX2 } from "molgenis-components";
+import useErrorHandler from "../composables/errorHandler";
 import { useSettingsStore } from "./settingsStore";
 
+const { setError } = useErrorHandler();
+
 export const useStudyStore = defineStore("studyStore", () => {
   const settingsStore = useSettingsStore();
 
@@ -30,9 +33,12 @@ export const useStudyStore = defineStore("studyStore", () => {
       .orderBy("Studies", "id", "asc")
       .where("id")
       .equals(id);
-    const reportResults = await studyReportQuery.execute();
 
-    return reportResults;
+    try {
+      return await studyReportQuery.execute();
+    } catch (error) {
+      setError(error);
+    }
   }
 
   return {
diff --git a/apps/directory/src/views/HomeView.vue b/apps/directory/src/views/HomeView.vue
index 0567ef1332..e9400bfc71 100644
--- a/apps/directory/src/views/HomeView.vue
+++ b/apps/directory/src/views/HomeView.vue
@@ -1,10 +1,17 @@
-<script setup>
+<template>
+  <div class="main-view">
+    <ApplicationHeaderPartialView />
+    <BiobankCardsPartialView />
+  </div>
+</template>
+
+<script setup lang="ts">
 import { onMounted } from "vue";
 import ApplicationHeaderPartialView from "../components/partial-views/ApplicationHeaderPartialView.vue";
 import BiobankCardsPartialView from "../components/partial-views/BiobankCardsPartialView.vue";
+import { createBookmark } from "../functions/bookmarkMapper";
 import { useCheckoutStore } from "../stores/checkoutStore";
 import { useFiltersStore } from "../stores/filtersStore";
-import { createBookmark } from "../functions/bookmarkMapper";
 
 const checkoutStore = useCheckoutStore();
 const filtersStore = useFiltersStore();
@@ -22,23 +29,6 @@ onMounted(() => {
 });
 </script>
 
-<template>
-  <div class="main-view">
-    <application-header-partial-view />
-    <biobank-cards-partial-view />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "biobank-explorer",
-  components: {
-    ApplicationHeaderPartialView,
-    BiobankCardsPartialView,
-  },
-};
-</script>
-
 <style>
 .main-view {
   margin: 0 auto;
diff --git a/apps/directory/vite.config.js b/apps/directory/vite.config.js
index 8501bd1abe..4a3b07c79a 100644
--- a/apps/directory/vite.config.js
+++ b/apps/directory/vite.config.js
@@ -6,6 +6,7 @@ import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
 const HOST =
   process.env.MOLGENIS_APPS_HOST || "https://bbmri-emx2-test.molgeniscloud.org";
+// const HOST = "http://localhost:8080";
 const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "directory";
 
 const opts = { changeOrigin: true, secure: false, logLevel: "debug" };