diff --git a/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-modal.controller.js b/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-modal.controller.js
index 7c273bee..b26daa56 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-modal.controller.js
+++ b/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-modal.controller.js
@@ -36,35 +36,13 @@
 
   function signCertificateController(magnum, model) {
     var ctrl = this;
-    ctrl.changeFile = changeFile;
     ctrl.model = model;
     ctrl.form = null;
+    ctrl.title = gettext("CSR");
     magnum.getCluster(model.newCertificateSpec.cluster_uuid).success(onGetCluster);
 
     function onGetCluster(response) {
       ctrl.model.cluster_name = response.name;
     }
-
-    function changeFile(files) {
-      // NOTE: this uses on-file-changed directive in Swift-UI included Horizon.
-      if (files.length) {
-        // load csr file and set into model
-        var reader = new FileReader();
-        reader.readAsText(files[0]);
-        reader.onload = function() {
-          model.newCertificateSpec.csr = reader.result;
-          ctrl.model.csrfile = files[0];
-          ctrl.form.$setDirty();
-        };
-        // Note that a $scope.$digest() is now needed for the change to the ngModel to be
-        // reflected in the page (since this callback is fired from inside a DOM event)
-        // but the on-file-changed directive currently does a digest after this callback
-        // is invoked.
-      } else {
-        model.newCertificateSpec.csr = "";
-        ctrl.model.csrfile = null;
-        ctrl.form.$setPristine();
-      }
-    }
   }
 })();
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-modal.html b/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-modal.html
index de7f3fd8..495d3fc8 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-modal.html
+++ b/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-modal.html
@@ -11,16 +11,12 @@
   <div class="modal-body">
     <div class="row">
       <div class="col-sm-6">
-        <fieldset>
-          <div class="form-group">
-            <label class="control-label required" for="csr-file">
-              <translate>CSR File</translate>
-              <span class="hz-icon-required fa fa-asterisk"></span>
-            </label>
-            <input id="csr-file" type="file" name="file" required
-                   ng-model="ctrl.model.csrfile" on-file-change="ctrl.changeFile">
-          </div>
-        </fieldset>
+        <load-edit title="{$ ctrl.title $}"
+           model="ctrl.model.newCertificateSpec.csr"
+           max-bytes="{$ 16 * 1024 $}"
+           key="public-key"
+           rows=8 required="true">
+        </load-edit>
       </div>
     </div>
   </div>
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-model.js b/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-model.js
index 62c76c73..ef5a1ad4 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-model.js
+++ b/magnum_ui/static/dashboard/container-infra/clusters/sign-certificate/sign-certificate-model.js
@@ -25,9 +25,8 @@
 
   function CertificateModel(magnum) {
     var model = {
-      newClusterSpec: {},
+      newCertificateSpec: {},
       cluster_name: "",
-      csrfile: null,
 
       // API methods
       init: init,
@@ -41,7 +40,6 @@
         csr: ""
       };
       model.cluster_name = "";
-      model.csrfile = null;
     }
 
     function signCertificate() {