diff --git a/data/assets/templates/quota.tpl b/data/assets/templates/quota.tpl
index eef5c92a..24555478 100644
--- a/data/assets/templates/quota.tpl
+++ b/data/assets/templates/quota.tpl
@@ -1,29 +1,53 @@
 <html>
-  <head>
-  <style>
-  body {
-    font-family: sans-serif;
-  }
-  #progressbar {
-    background-color: #f0f0f0;
-    border-radius: 0px;
-    padding: 0px;
-    width:50%;
-  }  
-  #progressbar > div {
-    background-color: #ff9c9c;
-    width: {{percent}}%;
-    height: 20px;
-    border-radius: 0px;
-  }
-  </style>
-  </head>
-  <body>
-    <p>Hi {{username}}!<br><br>
-    Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br>
-    <div id="progressbar">
-      <div></div>
-    </div>
-    </p>
-  </body>
+   <head>
+      <style>
+         body {
+         font-family: sans-serif;
+         }
+         div {
+         /* width based on text fill*/
+         display: inline-block;
+         }
+         #progressbar {
+         color: #000;
+         background-color: #f1f1f1;
+         width: 100%;
+         }
+         {% if (percent >= 95) %}
+         #progressbar > div {
+         color: #fff;
+         background-color: #FF0000;
+         text-align: center;
+         padding: 0.01em;
+         width: {{percent}}%;
+         }
+         {% elif (percent < 95) and (percent >= 80) %}
+         #progressbar > div {
+         color: #fff;
+         background-color: #FF8C00;
+         text-align: center;
+         padding: 0.01em;
+         width: {{percent}}%;
+         }
+         {% else %}
+         #progressbar > div {
+         color: #fff;
+         background-color: #00B000;
+         text-align: center;
+         padding: 0.01em;
+         width: {{percent}}%;
+         }
+         {% endif %}
+      </style>
+   </head>
+   <body>
+      <div>
+         <p>Hi {{username}}!<br><br>
+            Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br>
+         <div id="progressbar">
+            <div>{{percent}}%</div>
+         </div>
+         </p>
+      </div>
+   </body>
 </html>
