diff --git a/webadmin/src/index.html b/webadmin/src/index.html
index f8102f538..ca4f8f43d 100644
--- a/webadmin/src/index.html
+++ b/webadmin/src/index.html
@@ -167,6 +167,15 @@
         </div>
     </div>
 
+    <div class="upgrade hide">
+        <div class="content">
+            <h4>Your Cloudron trial ends soon</h4>
+            <p>To keep your Cloudron, just <a href="https://cloudron.io/console.html#/billing" target="_blank">setup a payment method at cloudron.io</a> or <a href="mailto: support@cloudron.io">send us a mail</a>.</p>
+        </div>
+
+        <div class="trigger">Keep your Cloudron</div>
+    </div>
+
     <!-- Footer -->
     <footer class="text-center">
         <span class="text-muted">Copyright &copy; <a href="https://cloudron.io" target="_blank">Cloudron</a> 2014-16</span>
diff --git a/webadmin/src/js/main.js b/webadmin/src/js/main.js
index 35d389ebd..a710acd80 100644
--- a/webadmin/src/js/main.js
+++ b/webadmin/src/js/main.js
@@ -134,6 +134,16 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
         }
     });
 
+    $('.upgrade .trigger').hover(function () {
+        $('.upgrade .content')[0].classList.add('active');
+        $('.upgrade .trigger')[0].classList.add('active');
+    });
+
+    $('.upgrade').hover(function () {}, function () {
+        $('.upgrade .content')[0].classList.remove('active');
+        $('.upgrade .trigger')[0].classList.remove('active');
+    });
+
     // setup all the dialog focus handling
     ['updateModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
diff --git a/webadmin/src/theme.scss b/webadmin/src/theme.scss
index a9610b420..cc963a511 100644
--- a/webadmin/src/theme.scss
+++ b/webadmin/src/theme.scss
@@ -582,7 +582,7 @@ footer {
     color: #555;
     font-size: 14px;
     padding: 5px;
-    z-index: 10000;
+    z-index: 1000;
     opacity: 0.5;
     transition: all 250ms;
 }
@@ -940,3 +940,60 @@ $graphs-success-alt:    lighten(#27CE65, 20%);
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+
+// ----------------------------
+// Upgrade
+// ----------------------------
+
+.upgrade {
+    position: fixed;
+    right: 10px;
+    bottom: 30px;
+    color: white;
+    z-index: 1200;
+    text-align: right;
+
+    .content {
+        height: 0;
+        overflow: hidden;
+        transition: height 250ms;
+        background-color: #00A500;
+        text-align: left;
+        border-radius: 0;
+        transition: all 250ms;
+        box-shadow: 0 3px 5px rgba(0,0,0,.5);
+
+        a {
+            color: white;
+            text-decoration: underline;
+
+            &:hover {
+                font-weight: bold;
+            }
+        }
+
+        &.active {
+            padding: 10px;
+            border-radius: 5px;
+            border-bottom-right-radius: 0;
+            height: auto;
+        }
+    }
+
+    .trigger {
+        cursor: pointer;
+        padding: 4px 10px;
+        display: inline-block;
+        font-size: 18px;
+        background-color: #00A500;
+        border-radius: 5px;
+        transition: all 250ms;
+        box-shadow: 0 3px 5px rgba(0,0,0,.5);
+
+        &.active {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+}