diff --git a/src/sass/views/_login.scss b/src/sass/views/_login.scss
index e600ace..f663995 100644
--- a/src/sass/views/_login.scss
+++ b/src/sass/views/_login.scss
@@ -164,6 +164,14 @@
             text-decoration: none;
         }
 
+        .connection-error {
+            margin: 30px 0;
+
+            p {
+                margin-bottom: 15px;
+            }
+        }
+
         .details {
             fieldset {
                 margin: 0 0 10px 0;
diff --git a/src/tpl/login-set-credentials.html b/src/tpl/login-set-credentials.html
index 0c59cb3..601baa8 100644
--- a/src/tpl/login-set-credentials.html
+++ b/src/tpl/login-set-credentials.html
@@ -11,14 +11,12 @@
     <form name="form">
 
       <div>
-        <div ng-show="connectionError">
+        <fieldset class="connection-error" ng-show="connectionError">
+          <legend>Connection Error</legend>
           <p class="input-error-message">{{connectionError.message}}</p>
-          <div ng-show="connectionError.underlyingError">
-            <a href="#" class="input-error-message" wo-touch='showUnderlyingError = !showUnderlyingError; $event.preventDefault()'>{{showUnderlyingError ? "Hide Details" : "Show Details"}}</a>
-            <p ng-show="showUnderlyingError" class="input-error-message">{{connectionError.underlyingError.message}}</p>
-          </div>
+          <p ng-show="connectionError.underlyingError" class="input-error-message">Underlying Cause: {{connectionError.underlyingError.message}}</p>
           <a class="input-error-message" href="https://github.com/whiteout-io/mail-html5/wiki/FAQ#troubleshooting" target="_blank">Find out more in the FAQ.</a>
-        </div>
+        </fieldset>
 
         <label class="input-error-message" ng-show="form.$invalid || credentialsIncomplete">Please fill out all required fields!</label>
         <br>