diff --git a/webadmin/src/views/certs.html b/webadmin/src/views/certs.html
index 301e4ed5a..af8d8f293 100644
--- a/webadmin/src/views/certs.html
+++ b/webadmin/src/views/certs.html
@@ -1,3 +1,33 @@
+<div class="modal fade" id="dnsCredentialsModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Configure DNS</h4>
+            </div>
+            <div class="modal-body">
+                <form name="dnsCredentialsForm" role="form" novalidate ng-submit="setDnsCredentials()" autocomplete="off">
+                    <fieldset>
+                        <p class="has-error text-center" ng-show="dnsCredentials.error">{{ dnsCredentials.error }}</p>
+
+                        <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>
+                    </fieldset>
+                </form>
+            </div>
+            <div class="modal-footer ">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-success" ng-click="setDnsCredentials()" ng-disabled="dnsCredentialsForm.$invalid"><i class="fa fa-spinner fa-pulse" ng-show="dnsCredentials.busy"></i> Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="section-header">
     <div class="text-left">
         <h1>Domain & Certificates</h1>
@@ -18,7 +48,7 @@
             <table width="100%">
                 <tr ng-show="config.isCustomDomain">
                     <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>
+                    <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ dnsConfig.accessKeyId || 'unset' }}</td>
                 </tr>
                 <tr ng-show="config.isCustomDomain">
                     <td class="text-muted" style="vertical-align: top;">Secret Access Key</td>
@@ -26,31 +56,9 @@
                 </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>
+                    <td class="text-right" style="vertical-align: top;"><button class="btn btn-outline btn-xs btn-primary" ng-click="showChangeDnsCredentials()">Change</button></td>
                 </tr>
             </table>
-
-            <div class="collapse" id="collapseDnsCredentialsForm" data-toggle="false">
-                <p>The security credentials must have full Route53 access.</p>
-                <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>
-
-                        <a href="" class="pull-left" ng-click="hideDnsCredentialsForm()">Collapse</a>
-
-                        <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/certs.js b/webadmin/src/views/certs.js
index b0b4fec51..68ef26a8e 100644
--- a/webadmin/src/views/certs.js
+++ b/webadmin/src/views/certs.js
@@ -4,6 +4,7 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
     Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
 
     $scope.config = Client.getConfig();
+    $scope.dnsConfig = null;
 
     $scope.defaultCert = {
         error: null,
@@ -29,7 +30,6 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
         error: null,
         success: false,
         busy: false,
-        formVisible: false,
         accessKeyId: '',
         secretAccessKey: '',
         provider: 'route53'
@@ -95,11 +95,6 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
         });
     };
 
-    $scope.hideDnsCredentialsForm = function () {
-        $('#collapseDnsCredentialsForm').collapse('hide');
-        $scope.dnsCredentials.formVisible = false;
-    };
-
     $scope.setDnsCredentials = function () {
         $scope.dnsCredentials.busy = true;
         $scope.dnsCredentials.error = null;
@@ -120,28 +115,35 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
                 $scope.dnsConfig.accessKeyId = $scope.dnsCredentials.accessKeyId;
                 $scope.dnsConfig.secretAccessKey = $scope.dnsCredentials.secretAccessKey;
 
-                $scope.dnsCredentials.accessKeyId = '';
-                $scope.dnsCredentials.secretAccessKey = '';
+                $('#dnsCredentialsModal').modal('hide');
 
-                $scope.hideDnsCredentialsForm();
+                dnsCredentialsReset();
             }
 
             $scope.dnsCredentials.busy = false;
         });
     };
 
-    $scope.showDnsCredentialsForm = function () {
+    function dnsCredentialsReset() {
         $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.showChangeDnsCredentials = function () {
+        dnsCredentialsReset();
+
+        $scope.dnsCredentials.accessKeyId = $scope.dnsConfig.accessKeyId;
+
+        $('#dnsCredentialsModal').modal('show');
     };
 
     Client.onReady(function () {
@@ -151,4 +153,11 @@ angular.module('Application').controller('CertsController', ['$scope', '$locatio
             $scope.dnsConfig = result;
         });
     });
+
+    // setup all the dialog focus handling
+    ['dnsCredentialsModal'].forEach(function (id) {
+        $('#' + id).on('shown.bs.modal', function () {
+            $(this).find("[autofocus]:first").focus();
+        });
+    });
 }]);