diff --git a/src/oidc_templates/error.ejs b/src/oidc_templates/error.ejs
index 30e199323..8c35890c5 100644
--- a/src/oidc_templates/error.ejs
+++ b/src/oidc_templates/error.ejs
@@ -16,15 +16,42 @@
     <script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
     <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
 
+    <style>
+
+      .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;
+        }
+
+        .avatar {
+          margin-top: -84px
+        }
+      }
+
+    </style>
+
 </head>
 <body>
 
 <div class="layout-root">
   <div class="layout-content">
-    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+    <div class="card">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" class="avatar" src="/api/v1/cloudron/avatar"/>
           <br/>
           <h1>OpenID Connect Error</h1>
         </div>
diff --git a/src/oidc_templates/interaction.ejs b/src/oidc_templates/interaction.ejs
index 34efda79a..19b5a0148 100644
--- a/src/oidc_templates/interaction.ejs
+++ b/src/oidc_templates/interaction.ejs
@@ -16,15 +16,42 @@
     <script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
     <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
 
+    <style>
+
+      .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;
+        }
+
+        .avatar {
+          margin-top: -84px
+        }
+      }
+
+    </style>
+
 </head>
 <body>
 
 <div class="layout-root">
   <div class="layout-content">
-    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+    <div class="card">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" class="avatar" src="/api/v1/cloudron/avatar"/>
           <br/>
 <% if (hasAccess) { -%>
           <h3>Authorize for <b><%= name %></b></h3>
diff --git a/src/oidc_templates/login.ejs b/src/oidc_templates/login.ejs
index 596d3696e..9fcc54038 100644
--- a/src/oidc_templates/login.ejs
+++ b/src/oidc_templates/login.ejs
@@ -16,15 +16,42 @@
     <script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
     <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
 
+    <style>
+
+      .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;
+        }
+
+        .avatar {
+          margin-top: -84px
+        }
+      }
+
+    </style>
+
 </head>
 <body>
 
 <div class="layout-root">
   <div class="layout-content">
-    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+    <div class="card">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" class="avatar" src="/api/v1/cloudron/avatar"/>
           <br/>
           <h1>Login to <%= name %></h1>
         </div>
diff --git a/src/oidc_templates/logout.ejs b/src/oidc_templates/logout.ejs
index 5dcd2309b..deebe2afa 100644
--- a/src/oidc_templates/logout.ejs
+++ b/src/oidc_templates/logout.ejs
@@ -16,15 +16,42 @@
     <script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
     <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
 
+    <style>
+
+      .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;
+        }
+
+        .avatar {
+          margin-top: -84px
+        }
+      }
+
+    </style>
+
 </head>
 <body>
 
 <div class="layout-root">
   <div class="layout-content">
-    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+    <div class="card">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" class="avatar" src="/api/v1/cloudron/avatar"/>
           <br/>
           <h3>Also log out from the OpenID provider?</h3>
         </div>
diff --git a/src/oidc_templates/post_logout.ejs b/src/oidc_templates/post_logout.ejs
index 4e278533c..fb0985b5d 100644
--- a/src/oidc_templates/post_logout.ejs
+++ b/src/oidc_templates/post_logout.ejs
@@ -16,15 +16,42 @@
     <script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
     <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
 
+    <style>
+
+      .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;
+        }
+
+        .avatar {
+          margin-top: -84px
+        }
+      }
+
+    </style>
+
 </head>
 <body>
 
 <div class="layout-root">
   <div class="layout-content">
-    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+    <div class="card">
       <div class="row">
         <div class="col-md-12" style="text-align: center;">
-          <img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
+          <img width="128" height="128" class="avatar" src="/api/v1/cloudron/avatar"/>
           <br/>
           <h1>Succesfully logged out</h1>
         </div>
