diff --git a/src/panel/graph_panel/partials/reconnect_to_datasource.html b/src/panel/graph_panel/partials/reconnect_to_datasource.html
index 1d56393..b8751cf 100644
--- a/src/panel/graph_panel/partials/reconnect_to_datasource.html
+++ b/src/panel/graph_panel/partials/reconnect_to_datasource.html
@@ -1,7 +1,20 @@
 <div class="gf-form-button-row" ng-if="ctrl.hasticDatasource !== undefined && ctrl.analyticsController.serverStatus === false">
-  <h5>Hastic server at "{{ctrl.hasticDatasource.url}}" is not available</h5>
-  <button class="btn btn-inverse" ng-click="ctrl.onHasticDatasourceChange()">
-    <i class="fa fa-plug"></i>
-    Reconnect to Hastic server
-  </button>
+  <div class="gf-form-group">
+    <div class="alert-{{ctrl.hasticDatasourceStatus.status}} alert"">
+      <div class="alert-icon">
+        <i class="fa fa-spiner fa-spin" ng-show="ctrl.hasticDatasourceStatus.testing"></i>
+        <i class="fa fa-exclamation-triangle" ng-show="ctrl.hasticDatasourceStatus.status === 'error'"></i>
+        <i class="fa fa-check" ng-show="ctrl.hasticDatasourceStatus.status !== 'error'"></i>
+      </div>
+      <div class="alert-body">
+        <div class="alert-title" ng-bind-html="ctrl.hasticDatasourceStatus.message" />
+      </div>
+    </div>
+    <div ng-hide="ctrl.hasticDatasourceStatus.testing">
+      <button class="btn btn-secondary" ng-click="ctrl.onHasticDatasourceChange()">
+        <i class="fa fa-plug"></i>
+        &nbsp; Connect to Hastic Datasource
+      </button>
+    </div>
+  </div>
 </div>