diff --git a/src/theme.scss b/src/theme.scss
index 7cdea3f16..1ed98f1b7 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -293,6 +293,23 @@ textarea {
     max-width: 100%;
 }
 
+// status classes for circle indicators
+.status-active {
+    color: #27CE65;
+}
+
+.status-inactive {
+    color: #7c7c7c;
+}
+
+.status-starting {
+    color: #f0ad4e;
+}
+
+.status-error {
+    color: #ec534f;
+}
+
 // ----------------------------
 // Apps view
 // ----------------------------
diff --git a/src/translation/en.json b/src/translation/en.json
index 01ba26473..de3458c0c 100644
--- a/src/translation/en.json
+++ b/src/translation/en.json
@@ -81,7 +81,9 @@
             "users": "Users"
         },
         "disableAction": "Disable",
-        "enableAction": "Enable"
+        "enableAction": "Enable",
+        "statusEnabled": "Enabled",
+        "statusDisabled": "Disabled"
     },
     "appstore": {
         "title": "App Store",
diff --git a/src/views/network.html b/src/views/network.html
index ede1650d5..699e226c0 100644
--- a/src/views/network.html
+++ b/src/views/network.html
@@ -250,7 +250,10 @@
     </div>
 
     <div class="row">
-      <div class="col-md-12 text-right">
+      <div class="col-md-2" style="padding-top: 12px;">
+        <i class="fa fa-circle" ng-class="{ 'status-active': dyndnsConfigure.isEnabled, 'status-inactive': !dyndnsConfigure.isEnabled }"></i> {{ dyndnsConfigure.isEnabled ? 'main.statusEnabled' : 'main.statusDisabled' | tr }}
+      </div>
+      <div class="col-md-10 text-right">
         <button class="btn btn-outline btn-primary" ng-hide="dyndnsConfigure.isEnabled" ng-click="dyndnsConfigure.setEnabled(true)" ng-disabled="dyndnsConfigure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="dyndnsConfigure.busy"></i>  {{ 'main.enableAction' | tr }}</button>
         <button class="btn btn-outline btn-danger" ng-show="dyndnsConfigure.isEnabled" ng-click="dyndnsConfigure.setEnabled(false)" ng-disabled="dyndnsConfigure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="dyndnsConfigure.busy"></i>  {{ 'main.disableAction' | tr }}</button>
       </div>
diff --git a/src/views/services.html b/src/views/services.html
index 99964f21c..e4008e167 100644
--- a/src/views/services.html
+++ b/src/views/services.html
@@ -76,7 +76,7 @@
               </thead>
               <tbody>
                 <tr>
-                  <td><i class="fa fa-circle" uib-tooltip="active" style="color: #27CE65"></i></td>
+                  <td><i class="fa fa-circle status-active" uib-tooltip="active"></i></td>
                   <td class="elide-table-cell">cloudron</td>
                   <td class="elide-table-cell"></td>
                   <td class="elide-table-cell text-center"></td>
@@ -88,14 +88,14 @@
                   <td>
                     <span ng-switch on="service.status" ng-show="service.status">
                       <span ng-switch-when="active">
-                        <i class="fa fa-circle" uib-tooltip="active" ng-style="{ color: '#27CE65' }"></i>
+                        <i class="fa fa-circle status-active" uib-tooltip="active"></i>
                       </span>
                       <span ng-switch-when="starting">
-                        <i class="fa fa-circle" uib-tooltip="starting" ng-style="{ color: '#f0ad4e' }" ng-show="!service.config.recoveryMode"></i>
-                        <i class="fa fa-circle" uib-tooltip="recovery mode" ng-style="{ color: '#ec534f' }" ng-show="service.config.recoveryMode"></i>
+                        <i class="fa fa-circle status-starting" uib-tooltip="starting" ng-show="!service.config.recoveryMode"></i>
+                        <i class="fa fa-circle status-inactive" uib-tooltip="recovery mode" ng-show="service.config.recoveryMode"></i>
                       </span>
                       <span ng-switch-default>
-                        <i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-style="{ color: '#d9534f' }"></i>
+                        <i class="fa fa-circle status-error" uib-tooltip="{{ service.status }}"></i>
                       </span>
                     </span>
                     <i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
@@ -125,7 +125,7 @@
                 </tr>
                 <tr ng-show="redisServicesExpanded" ng-repeat="service in services | filter:{ isRedis: true } | orderBy:'name'">
                   <td>
-                    <i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-style="{ color: service.status === 'active' ? '#27CE65' : (service.status === 'starting' ? '#f0ad4e' : '#d9534f') }" ng-show="service.status"></i>
+                    <i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-class="{ 'status-active': service.status === 'active', 'status-starting': service.status === 'starting', 'status-error': (service.status !== 'starting' && service.status !== 'active') }" ng-show="service.status"></i>
                     <i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
                   </td>
                   <td class="elide-table-cell">