diff --git a/webadmin/src/views/settings.html b/webadmin/src/views/settings.html
index 247d52b08..44935549e 100644
--- a/webadmin/src/views/settings.html
+++ b/webadmin/src/views/settings.html
@@ -224,23 +224,40 @@
     <div class="row">
         <div class="col-md-12">
             <p>Currently only Amazon <a href="https://aws.amazon.com/route53/">Route53</a> is supported. The security credentials have to have access to the relevant Route53 zones.</p>
-            <form name="dnsCredentialsForm" ng-submit="setDnsCredentials()">
-                <fieldset>
-                    <div class="has-error text-center" ng-show="dnsCredentials.error">{{ dnsCredentials.error }}</div>
-                    <div class="text-success text-center" ng-show="dnsCredentials.success"><b>Update successful</b></div>
 
-                    <div class="form-group" ng-class="{ 'has-error': false }">
-                        <label class="control-label" for="dnsCredentialsAccessKeyId">Access Key Id</label>
-                        <input type="text" class="form-control" ng-model="dnsCredentials.accessKeyId" id="dnsCredentialsAccessKeyId" name="accessKeyId" ng-disabled="dnsCredentials.busy" ng-minlength="16" ng-maxlength="32" required>
-                    </div>
-                    <div class="form-group" ng-class="{ 'has-error': false }">
-                        <label class="control-label" for="dnsCredentialsSecretAccessKey">Secret Access Key</label>
-                        <input type="text" class="form-control" ng-model="dnsCredentials.secretAccessKey" id="dnsCredentialsSecretAccessKey" name="secretAccessKey" ng-disabled="dnsCredentials.busy" required>
-                    </div>
+            <table width="100%">
+                <tr>
+                    <td class="text-muted" style="vertical-align: top;">Access Key Id</td>
+                    <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ dnsConfig.accessKeyId }}</td>
+                </tr>
+                <tr>
+                    <td class="text-muted" style="vertical-align: top;">Secret Access Key</td>
+                    <td class="text-right" style="vertical-align: top; white-space: nowrap;"><i>hidden</i></td>
+                </tr>
+                <tr>
+                    <td class="text-muted" style="vertical-align: top;"></td>
+                    <td class="text-right" style="vertical-align: top;"><span class="text-success" ng-show="dnsCredentials.success"><b>Done</b></span> &nbsp; &nbsp; <button class="btn btn-outline btn-xs btn-primary" ng-show"!dnsCredentials.formVisible" ng-click="showDnsCredentialsForm()">Change</button></td>
+                </tr>
+            </table>
 
-                    <button type="submit" class="btn btn-outline btn-success pull-right" ng-disabled="dnsCredentialsForm.$invalid || busy"><i class="fa fa-spinner fa-pulse" ng-show="dnsCredentials.busy"></i> Save</button>
-                </fieldset>
-            </form>
+            <div class="collapse" id="collapseDnsCredentialsForm" data-toggle="false">
+                <form name="dnsCredentialsForm" ng-submit="setDnsCredentials()">
+                    <fieldset>
+                        <div class="has-error text-center" ng-show="dnsCredentials.error">{{ dnsCredentials.error }}</div>
+
+                        <div class="form-group" ng-class="{ 'has-error': false }">
+                            <label class="control-label" for="dnsCredentialsAccessKeyId">Access Key Id</label>
+                            <input type="text" class="form-control" ng-model="dnsCredentials.accessKeyId" id="dnsCredentialsAccessKeyId" name="accessKeyId" ng-disabled="dnsCredentials.busy" ng-minlength="16" ng-maxlength="32" required>
+                        </div>
+                        <div class="form-group" ng-class="{ 'has-error': false }">
+                            <label class="control-label" for="dnsCredentialsSecretAccessKey">Secret Access Key</label>
+                            <input type="text" class="form-control" ng-model="dnsCredentials.secretAccessKey" id="dnsCredentialsSecretAccessKey" name="secretAccessKey" ng-disabled="dnsCredentials.busy" required>
+                        </div>
+
+                        <button type="submit" class="btn btn-outline btn-success pull-right" ng-disabled="dnsCredentialsForm.$invalid || busy"><i class="fa fa-spinner fa-pulse" ng-show="dnsCredentials.busy"></i> Save</button>
+                    </fieldset>
+                </form>
+            </div>
         </div>
     </div>
  </div>
diff --git a/webadmin/src/views/settings.js b/webadmin/src/views/settings.js
index 199f2e2b3..c9872357d 100644
--- a/webadmin/src/views/settings.js
+++ b/webadmin/src/views/settings.js
@@ -5,6 +5,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
 
     $scope.user = Client.getUserInfo();
     $scope.config = Client.getConfig();
+    $scope.dnsConfig = {};
 
     $scope.lastBackup = null;
     $scope.backups = [];
@@ -107,6 +108,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         error: null,
         success: false,
         busy: false,
+        formVisible: false,
         accessKeyId: '',
         secretAccessKey: '',
         provider: 'route53'
@@ -185,8 +187,15 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
                 $scope.dnsCredentials.error = error.message;
             } else {
                 $scope.dnsCredentials.success = true;
+
+                $scope.dnsConfig.accessKeyId = $scope.dnsCredentials.accessKeyId;
+                $scope.dnsConfig.secretAccessKey = $scope.dnsCredentials.secretAccessKey;
+
                 $scope.dnsCredentials.accessKeyId = '';
                 $scope.dnsCredentials.secretAccessKey = '';
+
+                $('#collapseDnsCredentialsForm').collapse('hide');
+                $scope.dnsCredentials.formVisible = false;
             }
 
             $scope.dnsCredentials.busy = false;
@@ -338,6 +347,20 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         });
     };
 
+    $scope.showDnsCredentialsForm = function () {
+        $scope.dnsCredentials.busy = false;
+        $scope.dnsCredentials.success = false;
+        $scope.dnsCredentials.error = null;
+        $scope.dnsCredentials.accessKeyId = '';
+        $scope.dnsCredentials.secretAccessKey = '';
+        $scope.dnsCredentialsForm.$setPristine();
+        $scope.dnsCredentialsForm.$setUntouched();
+
+        $scope.dnsCredentials.formVisible = true;
+        $('#collapseDnsCredentialsForm').collapse('show');
+        $('#dnsCredentialsAccessKeyId').focus();
+    };
+
     $scope.showChangeDeveloperMode = function () {
         developerModeChangeReset();
         $('#developerModeChangeModal').modal('show');
@@ -373,6 +396,12 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         fetchBackups();
 
         $scope.avatar.url = '//my-' + $scope.config.fqdn + '/api/v1/cloudron/avatar';
+
+        Client.getDnsConfig(function (error, result) {
+            if (error) return console.error(error);
+
+            $scope.dnsConfig = result;
+        });
     });
 
     // setup all the dialog focus handling