diff --git a/modules/sanitycheck/templates/check.twig b/modules/sanitycheck/templates/check.twig
index ab53e5c5fd6f27a1317d9df03094b83202f9f0f0..d3e6bd75d2f4c1db7a057e0c76734bac1e65a926 100644
--- a/modules/sanitycheck/templates/check.twig
+++ b/modules/sanitycheck/templates/check.twig
@@ -5,30 +5,41 @@
 <h2>{{ pagetitle }}</h2>
 
 {% if errors %}
-<div style="border: 1px solid #800; background: #caa; margin: 1em; padding: .5em">
-<p><img class="float-r" src="/{{ baseurlpath }}resources/icons/silk/delete.png" alt="Failed" />
-These checks failed:</p>
-
-<ul>
-{% for err in errors %}
-    <li>{{ err }}</li>
-{% endfor %}
-</ul>
 
+<div class="errorbox">
+    <div class="pure-g">
+        <div class="pure-u-1-12">
+            <span class="fa fa-times-circle fa-2x"></span>
+        </div>
+        <div class="pure-u-11-12">
+            <p>{{ 'These checks failed:'|trans }}</p>
+
+            <ul class="error-list">
+            {% for err in errors %}
+                <li>{{ err }}</li>
+            {% endfor %}
+            </ul>
+        </div>
+    </div>
 </div>
 {% endif %}
 
 {% if info %}
-<div style="border: 1px solid #ccc; background: #eee; margin: 1em; padding: .5em">
-<p><img class="float-r" src="/{{ baseurlpath }}resources/icons/silk/accept.png" alt="OK" />
-These checks succeeded:</p> 
-
-<ul>
-{% for i in info %}
-    <li>{{ i }}</li>
-{% endfor %}
-</ul>
-
+<div class="successbox">
+    <div class="pure-g">
+        <div class="pure-u-1-12">
+            <span class="fa fa-check fa-2x"> </span>
+        </div>
+        <div class="pure-u-11-12">
+            <p>{{ 'These checks succeeded:'|trans }}</p>
+
+            <ul>
+            {% for i in info %}
+                <li>{{ i }}</li>
+            {% endfor %}
+            </ul>
+        </div>
+    </div>
 </div>
 {% endif %}
 
diff --git a/www/assets/css/src/default-rtl.css b/www/assets/css/src/default-rtl.css
index 6ebee2be1422d9441f81812f2a27730f081c907c..473de00c6087cd4d6f905b3edf7884f6c4c6569d 100644
--- a/www/assets/css/src/default-rtl.css
+++ b/www/assets/css/src/default-rtl.css
@@ -86,6 +86,22 @@ fieldset.fancyfieldset legend {
 	left:0;
 	right: auto;
 }
+.errorbox {
+	border-left-style: initial;
+	border-left-width: 0;
+	border-left-color: none;
+	border-right-style: solid;
+	border-right-width: 0.3125rem;
+	border-right-color: #cc4b37;
+}
+.successbox{
+	border-left-style: initial;
+	border-left-width: 0;
+	border-left-color: none;
+	border-right-style: solid;
+	border-right-width: 0.3125rem;
+	border-right-color: #46cc48;
+}
 
 /*selectize elements*/
 div .item{
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index 6430173d5b8d83aab2367bed70ba5e7aa9723d7a..328fa2e94346495199cb314d13813520bd967a92 100644
--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -70,7 +70,9 @@ a.pure-button-primary {
     background-color: rgb(219, 1, 0);
     color: #fff;
 }
-
+ul{
+    padding-left: 1.5em;
+}
 /* ***********************************************************
 HEADER
 ************************************************************ */
@@ -129,6 +131,17 @@ CONTENT
     position: relative;
     box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
 }
+.successbox{
+    padding: 1.3rem;
+    margin: 0 0 1rem 0;
+    background-color: #daf7e6;
+    border-left-style: solid;
+    border-left-width: 0.3125rem;
+    border-left-color: #46cc48;
+    position: relative;
+    box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
+}
+
 .auth_methods{
     margin-top: 2em;
     width: 35%;
@@ -161,6 +174,7 @@ CONTENT
     background-color: #f0f0f0;
     border: 1px solid #ccc;
 }
+
 /* ***********************************************************
 FOOTER
 ************************************************************ */