diff --git a/dashboard/oidc_error.html b/dashboard/oidc_error.html
index 4d329801e..e51e64486 100644
--- a/dashboard/oidc_error.html
+++ b/dashboard/oidc_error.html
@@ -41,7 +41,7 @@
 
     </style>
 
-</head>
+  </head>
 <body>
 
 <div class="outer">
diff --git a/dashboard/oidc_interaction_abort.html b/dashboard/oidc_interaction_abort.html
index 48d1449c0..926f89375 100644
--- a/dashboard/oidc_interaction_abort.html
+++ b/dashboard/oidc_interaction_abort.html
@@ -7,69 +7,51 @@
     <title>Authorize ##NAME##</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">
 
-    <!-- Theme CSS -->
-    <link type="text/css" rel="stylesheet" href="/theme.css">
+    <script type="module" src="./src/style.js"></script>
 
     <style>
 
       body {
-        background-image: url('/api/v1/cloudron/background');
-        background-size: cover;
-        background-position: center;
+        display: flex;
+        flex-direction: column;
+
+        /* not using pankow*/
+        --pankow-text-color: black;
+        --pankow-color-primary: #2196f3;
       }
 
-      .card {
-        padding: 20px;
-        margin-bottom: 0;
-        max-width: 620px;
-        min-height: 100%;
-      }
-
-      .avatar {
-        margin-top: 20px;
-      }
-
-      @media(min-width:620px) {
-        .card {
-          margin-bottom: 15px;
-          margin-top: 100px;
-          min-height: auto;
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: black;
+          --pankow-text-color: white;
         }
+      }
 
-        .avatar {
-          margin-top: -84px
-        }
+      .outer {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
       }
 
     </style>
 
-</head>
+  </head>
 <body>
 
-<div class="layout-root">
-  <div class="layout-content">
-    <div class="card">
-      <div class="row">
-        <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" class="avatar" src="##ICON_URL##"/>
-          <br/>
-          <h3>You do not have access to <b>##NAME##</b></h3>
-        </div>
-      </div>
-      <br/>
-      <div class="row">
-        <div class="col-md-12 text-center">
-          <a class="btn btn-primary btn-outline" href="##SUBMIT_URL##">Continue</a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <footer class="text-center">
-    <span class="text-muted">##FOOTER##</span>
-  </footer>
+<div class="outer">
+  <img width="128" height="128" class="avatar" src="##ICON_URL##"/>
+  <br/>
+  <h2>You do not have access to <b>##NAME##</b></h2>
+  <a class="btn btn-primary btn-outline" href="##SUBMIT_URL##">Continue</a>
 </div>
 
+<footer>##FOOTER##</footer>
+
 </body>
 </html>
