diff --git a/cms/templates/html_error.html b/cms/templates/html_error.html
index 7bc75ad0a9..f0f82d959b 100644
--- a/cms/templates/html_error.html
+++ b/cms/templates/html_error.html
@@ -3,19 +3,25 @@
 <%block name="bodyclass">error</%block>
 
 <%block name="content">
-  <div class="error-prompt">
-    <h2 class="description">
-      ${_("We're having trouble rendering your component.")}
-      </h2>
-    % if message:
-    <p class="description">
-      ${_("Error message:")}
-      </p>
-      <span text-align="center" width="60%">
-    <pre class="description">
-      ${message | h}
-      </pre>
-  </span>
-    % endif
+  <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
+    <div class="error">
+
+      <div class="copy">
+        <h2 class="title">
+          <i class="icon-warning-sign"></i>
+          ${_("We're having trouble rendering your component")}
+        </h2>
+
+        <p>You can try re-editing your component to check that your syntax is correct.</p>
+
+        % if message:
+        <p class="description">
+            ${_("Error message:")}
+            ${message | h}
+        </p>
+        % endif
+
+
+    </div>
   </div>
 </%block>