diff --git a/dashboard/oidc_device_confirm.html b/dashboard/oidc_device_confirm.html
index 83d19074e..7a6282911 100644
--- a/dashboard/oidc_device_confirm.html
+++ b/dashboard/oidc_device_confirm.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>OpenID Device Confirm</title>
+    <title>OpenID Confirm</title>
 
     <script>
-      window.cloudron = <%- JSON.stringify({ clientName, userCode, form }) %>;
+      window.cloudron = <%- JSON.stringify({ name, clientName, userCode, form }) %>;
     </script>
 
   </head>
diff --git a/dashboard/oidc_device_input.html b/dashboard/oidc_device_input.html
index a75c7a3c0..495cd1a4c 100644
--- a/dashboard/oidc_device_input.html
+++ b/dashboard/oidc_device_input.html
@@ -4,7 +4,7 @@
     <title>OpenID Device Sign-in</title>
 
     <script>
-      window.cloudron = <%- JSON.stringify({ message, form }) %>;
+      window.cloudron = <%- JSON.stringify({ name, message, form }) %>;
     </script>
 
   </head>
diff --git a/dashboard/oidc_device_success.html b/dashboard/oidc_device_success.html
index b03b5af7e..c3cc26769 100644
--- a/dashboard/oidc_device_success.html
+++ b/dashboard/oidc_device_success.html
@@ -4,7 +4,7 @@
     <title>OpenID Device Success</title>
 
     <script>
-      window.cloudron = <%- JSON.stringify({ iconUrl, name, footer }) %>;
+      window.cloudron = <%- JSON.stringify({ name }) %>;
     </script>
 
   </head>
diff --git a/dashboard/src/views/OidcDeviceConfirmView.vue b/dashboard/src/views/OidcDeviceConfirmView.vue
index d9f5548e3..32497b168 100644
--- a/dashboard/src/views/OidcDeviceConfirmView.vue
+++ b/dashboard/src/views/OidcDeviceConfirmView.vue
@@ -1,5 +1,7 @@
 <script setup>
 
+import { Button } from '@cloudron/pankow';
+
 import PublicPageLayout from '../components/PublicPageLayout.vue';
 
 // coming from oidc_device_confirm.html server-side rendered
@@ -11,63 +13,48 @@ const form = window.cloudron.form;
 
 <template>
   <PublicPageLayout>
-    <div style="max-width: 300px;">
-      <h2>Confirm Device</h2>
-      <p>
-        <strong>{{ clientName }}</strong>
-        <br/><br/>
-        The following code should be displayed on your device<br/><br/>
-        <code class="user-code">{{ userCode }}</code>
-        <br/><br/>
-        <small>If you did not initiate this action or the code does not match, please close this window or click abort.</small>
-      </p>
-      <div v-html="form" class="device-form"></div>
-      <button type="submit" form="op.deviceConfirmForm" class="device-submit" autofocus>Continue</button>
-      <div class="help">
-        <button type="submit" form="op.deviceConfirmForm" value="yes" name="abort" class="abort-link">[ Abort ]</button>
-      </div>
+    <div>
+      <h2>Authorize {{ clientName }}</h2>
+      <p>Verify the code below</p>
+      <div class="user-code">{{ userCode }}</div>
+      <p class="code-hint">If you did not initiate this action or the code does not match, please close this window or cancel.</p>
+
+      <!-- injected form for submission from oidcserver.js -->
+      <div v-html="form"></div>
+
+      <button class="pankow-button" type="submit" form="op.deviceConfirmForm">Continue</button>
+      <button type="submit" form="op.deviceConfirmForm" value="yes" name="abort" class="cancel-button">Cancel</button>
     </div>
   </PublicPageLayout>
 </template>
 
 <style scoped>
+
+p {
+  padding: 10px 0;
+}
+
 .user-code {
-  font-size: 2em;
+  font-size: 26px;
+  font-family: monospace;
 }
-.device-submit {
-  width: 100%;
-  display: block;
-  margin-top: 12px;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 700;
-  height: 36px;
-  padding: 0 8px;
-  border: 0;
-  color: #fff;
-  background-color: #4d90fe;
-  cursor: pointer;
-  border-radius: 4px;
-}
-.device-submit:hover {
-  background-color: #357ae8;
-}
-.help {
-  width: 100%;
+
+.code-hint {
   font-size: 12px;
-  text-align: center;
-  margin-top: 8px;
 }
-.abort-link {
+
+.cancel-button {
+  margin-left: 15px;
   background: none;
   border: none;
   padding: 0;
-  font: inherit;
   cursor: pointer;
-  color: #666;
-  opacity: 0.6;
+  font-size: 12px;
+  color: var(--pankow-color-dark);
 }
-.abort-link:hover {
-  opacity: 1;
+
+.cancel-button:hover {
+  color: var(--pankow-color-primary-hover);
 }
+
 </style>
diff --git a/dashboard/src/views/OidcDeviceInputView.vue b/dashboard/src/views/OidcDeviceInputView.vue
index 5820ad957..fb629a817 100644
--- a/dashboard/src/views/OidcDeviceInputView.vue
+++ b/dashboard/src/views/OidcDeviceInputView.vue
@@ -10,35 +10,17 @@ const form = window.cloudron.form;
 
 <template>
   <PublicPageLayout>
-    <div style="max-width: 300px;">
-      <h2>Sign-in</h2>
-      <div v-html="message" class="device-message"></div>
-      <div v-html="form" class="device-form"></div>
-      <button type="submit" form="op.deviceInputForm" class="device-submit">Continue</button>
+    <div>
+      <h2>Authorization canceled</h2>
+
+<!-- in theory one can enter the code manually there, but we don't support this right now
+      <div v-html="message"></div>
+      <div v-html="form"></div>
+      <button type="submit" form="op.deviceInputForm">Continue</button>
+-->
     </div>
   </PublicPageLayout>
 </template>
 
 <style scoped>
-.device-message :deep(.red) {
-  color: #d50000;
-}
-.device-submit {
-  width: 100%;
-  display: block;
-  margin-top: 12px;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 700;
-  height: 36px;
-  padding: 0 8px;
-  border: 0;
-  color: #fff;
-  background-color: #4d90fe;
-  cursor: pointer;
-  border-radius: 4px;
-}
-.device-submit:hover {
-  background-color: #357ae8;
-}
 </style>
diff --git a/dashboard/src/views/OidcDeviceSuccessView.vue b/dashboard/src/views/OidcDeviceSuccessView.vue
index 85ec74ec2..9e10b9f2c 100644
--- a/dashboard/src/views/OidcDeviceSuccessView.vue
+++ b/dashboard/src/views/OidcDeviceSuccessView.vue
@@ -3,14 +3,12 @@
 import PublicPageLayout from '../components/PublicPageLayout.vue';
 
 // coming from oidc_device_success.html server-side rendered (optional)
-const cloudron = window.cloudron || {};
-const iconUrl = cloudron.iconUrl;
-const cloudronName = cloudron.name;
+const cloudronName = window.cloudron.name;
 
 </script>
 
 <template>
-  <PublicPageLayout :icon-url="iconUrl" :cloudron-name="cloudronName">
+  <PublicPageLayout :cloudron-name="cloudronName">
     <div style="max-width: 300px;">
       <h2>Success</h2>
       <p>Your device has been authorized. You can close this window.</p>
diff --git a/src/oidcserver.js b/src/oidcserver.js
index 20dcea3df..77e76083b 100644
--- a/src/oidcserver.js
+++ b/src/oidcserver.js
@@ -25,7 +25,6 @@ import { HttpError } from '@cloudron/connect-lastmile';
 import * as jose from 'jose';
 import safe from 'safetydance';
 import settings from './settings.js';
-import superagent from '@cloudron/superagent';
 import tokens from './tokens.js';
 import users from './users.js';
 import groups from './groups.js';
@@ -725,6 +724,7 @@ async function start() {
                 charset: 'base-20',
                 mask: '****-****',
                 userCodeInputSource: async function (ctx, form, out, err) {
+                    // below errors and message is currently unused
                     let message;
                     if (err && (err.userCode || err.name === 'NoCodeError')) {
                         message = '<p class="red">The code you entered is incorrect. Try again</p>';
@@ -735,13 +735,24 @@ async function start() {
                     } else {
                         message = '<p>Enter the code displayed on your device</p>';
                     }
-                    ctx.body = ejs.render(TEMPLATE_DEVICE_INPUT, { message, form });
+                    ctx.body = ejs.render(TEMPLATE_DEVICE_INPUT, {
+                        name: await branding.getCloudronName(),
+                        message,
+                        form
+                    });
                 },
                 userCodeConfirmSource: async function (ctx, form, client, deviceInfo, userCode) {
-                    ctx.body = ejs.render(TEMPLATE_DEVICE_CONFIRM, { clientName: ctx.oidc.client.clientName || ctx.oidc.client.clientId, userCode, form });
+                    ctx.body = ejs.render(TEMPLATE_DEVICE_CONFIRM, {
+                        name: await branding.getCloudronName(),
+                        clientName: ctx.oidc.client.clientName || ctx.oidc.client.clientId,
+                        userCode,
+                        form
+                    });
                 },
                 successSource: async function (ctx) {
-                    ctx.body = ejs.render(TEMPLATE_DEVICE_SUCCESS, {});
+                    ctx.body = ejs.render(TEMPLATE_DEVICE_SUCCESS, {
+                        name: await branding.getCloudronName()
+                    });
                 },
             },
         },
