diff --git a/dashboard/oidc_error.html b/dashboard/oidc_error.html
index c5f8e29c8..afe7a0121 100644
--- a/dashboard/oidc_error.html
+++ b/dashboard/oidc_error.html
@@ -4,53 +4,31 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
 
-    <title>OpenID Connect Error</title>
+    <title>##NAME## OpenID Error</title>
 
-    <link id="favicon" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">
-    <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
-    <link rel="icon" href="/api/v1/cloudron/avatar">
+    <link rel="icon" href="##ICON_URL##">
+    <link rel="apple-touch-icon" href="##ICON_URL##">
 
     <style>
-
-      body {
-        display: flex;
-        flex-direction: column;
-
-        /* not using pankow*/
-        --pankow-text-color: black;
-        --pankow-color-primary: #2196f3;
-      }
-
       @media (prefers-color-scheme: dark) {
         body {
           background-color: black;
-          --pankow-text-color: white;
         }
       }
-
-      .outer {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-      }
-
     </style>
 
+    <script>
+      window.cloudron = {};
+      window.cloudron.name = '##NAME##';
+      window.cloudron.iconUrl = '##ICON_URL##';
+      window.cloudron.errorMessage = `##ERROR_MESSAGE##`;
+      window.cloudron.footer = `##FOOTER##`;
+    </script>
+
   </head>
-<body>
 
-<div class="outer">
-  <img width="128" height="128" class="avatar" src="/api/v1/cloudron/avatar"/>
-  <br/>
-  <h2>OpenID Connect Error</h2>
-  <p>##ERROR_MESSAGE##</p>
-  <a href="/" style="padding: 10px;">Back</a>
-</div>
-
-<footer>##FOOTER##</footer>
-
-</body>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/oidcerror.js"></script>
+  </body>
 </html>
diff --git a/dashboard/src/components/OidcError.vue b/dashboard/src/components/OidcError.vue
new file mode 100644
index 000000000..de0f0347a
--- /dev/null
+++ b/dashboard/src/components/OidcError.vue
@@ -0,0 +1,72 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+import { marked } from 'marked';
+import { Button, PasswordInput, TextInput, fetcher } from 'pankow';
+import { API_ORIGIN } from '../constants.js';
+
+// coming from oidc_error.html server-side rendered
+const name = window.cloudron.name;
+const iconUrl = window.cloudron.iconUrl;
+const backgroundUrl = `${API_ORIGIN}/api/v1/cloudron/background`;
+const errorMessage = window.cloudron.errorMessage;
+const footer = window.cloudron.footer;
+
+</script>
+
+<template>
+  <div class="layout-root">
+    <div class="layout-left" :style="{ 'background-image': `url(${backgroundUrl})` }">
+      <img width="128" height="128" class="icon" :src="iconUrl"/>
+    </div>
+
+    <div class="layout-right">
+
+      <div>
+        <h2>{{ name }} OpenID Error</h2>
+        <div>{{ errorMessage }}</div>
+        <br/>
+        <Button href="/">{{ $t('passwordReset.backToLoginAction') }}</Button>
+      </div>
+
+    </div>
+  </div>
+
+  <footer v-show="footer" v-html="footer"></footer>
+</template>
+
+<style>
+
+.icon {
+  margin-bottom: 20%;
+}
+
+.layout-root {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  height: 100%;
+}
+
+.layout-left {
+  background-color: rgba(0,0,0,0.1);
+  background-size: cover;
+  background-position: center;
+  flex-basis: 30%;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+}
+
+.layout-right {
+  padding-left: 20px;
+  flex-basis: 70%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  justify-content: center;
+}
+
+</style>
+
diff --git a/dashboard/src/oidcerror.js b/dashboard/src/oidcerror.js
new file mode 100644
index 000000000..de02a5580
--- /dev/null
+++ b/dashboard/src/oidcerror.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import '@fontsource/noto-sans';
+
+import i18n from './i18n.js';
+import OidcError from './components/OidcError.vue';
+
+import './style.css';
+
+(async function init() {
+  const app = createApp(OidcError);
+
+  app.use(await i18n());
+
+  app.mount('#app');
+})();
diff --git a/src/oidc.js b/src/oidc.js
index 20089b8eb..90d49d358 100644
--- a/src/oidc.js
+++ b/src/oidc.js
@@ -550,6 +550,8 @@ function renderInteractionPage(provider) {
             debug('route interaction get error', error);
 
             const data = {
+                ICON_URL: '/api/v1/cloudron/avatar',
+                NAME: 'Cloudron',
                 ERROR_MESSAGE: error.error_description || 'Internal error',
                 FOOTER: marked.parse(await branding.renderFooter())
             };
