diff --git a/src/views/app.html b/src/views/app.html
index f59554eb6..db39535af 100644
--- a/src/views/app.html
+++ b/src/views/app.html
@@ -991,7 +991,8 @@
           <div class="col-md-12">
             <label class="control-label">Automatic Backups</label>
 
-            <p>Cloudron periodically creates a backup based on the <a href="/#/backups">backup</a> settings. Automatic Backups is currently <b>{{ backups.enableBackup ? 'enabled' : 'disabled' }}</b>.</p>
+            <p>Cloudron periodically creates a backup based on the <a href="/#/backups">backup</a> settings.
+              Automatic Backups is currently <b ng-class="backups.enableBackup ? 'text-success' : 'text-danger'">{{ backups.enableBackup ? 'enabled' : 'disabled' }}</b>.</p>
 
             <button class="btn btn-primary pull-right" ng-class="{ 'btn-danger': backups.enableBackup }" ng-click="backups.toggleAutomaticBackups()" ng-disabled="backups.busy"><i class="fa fa-circle-notch fa-spin" ng-show="backups.busy"></i> {{ backups.enableBackup ? 'Disable' : 'Enable' }} Automatic Backups</button>
           </div>