diff --git a/charts/ui/Chart.yaml b/charts/ui/Chart.yaml
index 1cbf90e5..1230bd1b 100644
--- a/charts/ui/Chart.yaml
+++ b/charts/ui/Chart.yaml
@@ -2,8 +2,8 @@ apiVersion: v2
 name: ui
 description: Policy Reporter UI
 type: application
-version: 0.0.15
-appVersion: "2.0.0-alpha.10"
+version: 0.0.16
+appVersion: "2.0.0-alpha.11"
 
 icon: https://github.com/kyverno/kyverno/raw/main/img/logo.png
 home: https://kyverno.github.io/policy-reporter-ui
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 5beda49f..b4f3c48a 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -72,7 +72,15 @@
     </v-navigation-drawer>
 
     <v-main :class="bg">
-      <slot />
+      <v-container fluid v-if="config.error">
+        <app-row>
+          <v-card class="pa-2">
+            <v-alert variant="outlined" type="error">Failed to access API: {{ config.error }}</v-alert>
+          </v-card>
+        </app-row>
+      </v-container>
+
+      <slot v-else />
     </v-main>
   </v-layout>
 </template>
@@ -80,6 +88,8 @@
 <script setup lang="ts">
 import { useTheme } from "vuetify";
 import type { LayoutConfig } from "~/modules/core/types";
+import {use} from "h3";
+import {useConfigStore} from "~/store/config";
 
 const drawer = ref(true)
 
@@ -87,6 +97,8 @@ const { data: layout } = useAPI((api) => api.layout(), { default: (): LayoutConf
 
 const theme = useTheme()
 
+const config = useConfigStore()
+
 const bg = computed(() => {
   if (theme.current.value.dark) {
     return 'bg-grey-darken-3'
diff --git a/frontend/modules/core/plugins/apis.ts b/frontend/modules/core/plugins/apis.ts
index f660e9c0..04713c4d 100644
--- a/frontend/modules/core/plugins/apis.ts
+++ b/frontend/modules/core/plugins/apis.ts
@@ -1,12 +1,26 @@
-import { defineNuxtPlugin } from 'nuxt/app'
-import { create } from '~/modules/core/api'
-import { useConfigStore } from "~/store/config";
+import {defineNuxtPlugin} from 'nuxt/app'
+import {create} from '~/modules/core/api'
+import {useConfigStore} from "~/store/config";
+import {type Config, DisplayMode} from "~/modules/core/types";
 
 export default defineNuxtPlugin(async () => {
   const config = useRuntimeConfig()
   const api = create({ baseURL: config.public.coreApi as string, prefix: '' })
 
-  const apiConfig = await api.config()
+  const apiConfig = await api.config().catch((error): Config => {
+    console.error(`failed to load config: ${error}`)
+
+    return {
+      error,
+      displayMode: DisplayMode.UNSPECIFIED,
+      default: 'default',
+      sources: [],
+      plugins: [],
+      defaultFilter: { resources: [], clusterResources: [] },
+      clusters: [{ name: 'Default', slug: 'default', plugins: [] }],
+      oauth: false,
+    }
+  })
 
   api.setPrefix(apiConfig.default)
 
diff --git a/frontend/modules/core/types.ts b/frontend/modules/core/types.ts
index 7e2a1fc6..0c870bfd 100644
--- a/frontend/modules/core/types.ts
+++ b/frontend/modules/core/types.ts
@@ -215,9 +215,9 @@ export type PolicyDetails = {
 }
 
 export type Config = {
+    error?: Error;
     plugins: string[];
     displayMode: DisplayMode;
-    views: ViewsCofig;
     clusters: Cluster[];
     sources: SourceConfig[];
     oauth: boolean;
diff --git a/frontend/store/config.ts b/frontend/store/config.ts
index b9a17bef..0925eaef 100644
--- a/frontend/store/config.ts
+++ b/frontend/store/config.ts
@@ -9,6 +9,7 @@ type State = {
     plugins: string[];
     clusters: Cluster[];
     oauth: boolean;
+    error?: Error;
 }
 
 export const useConfigStore = defineStore('config', {
@@ -32,6 +33,7 @@ export const useConfigStore = defineStore('config', {
   },
   actions: {
     setConfig(config: Config) {
+      this.error = config.error
       this.clusters = config.clusters
       this.oauth = config.oauth
     },