diff --git a/magnum_ui/static/dashboard/container-infra/cluster-templates/cluster-templates.module.js b/magnum_ui/static/dashboard/container-infra/cluster-templates/cluster-templates.module.js
index 17226ad9..fe65f1e6 100644
--- a/magnum_ui/static/dashboard/container-infra/cluster-templates/cluster-templates.module.js
+++ b/magnum_ui/static/dashboard/container-infra/cluster-templates/cluster-templates.module.js
@@ -75,6 +75,9 @@
     .setProperty('coe', {
       label: gettext('COE')
     })
+    .setProperty('keypair_id', {
+      label: gettext('Keypair')
+    })
     .setProperty('network_driver', {
       label: gettext('Network Driver')
     })
@@ -95,6 +98,11 @@
       id: 'coe',
       priority: 1
     })
+    .append({
+      id: 'keypair_id',
+      priority: 1,
+      filters: ['noValue']
+    })
     .append({
       id: 'network_driver',
       priority: 2
diff --git a/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/cluster-template.spec.controller.js b/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/cluster-template.spec.controller.js
index 26a6ed71..f2b1bf1f 100644
--- a/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/cluster-template.spec.controller.js
+++ b/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/cluster-template.spec.controller.js
@@ -54,22 +54,20 @@
     }
 
     function onGetImages(response) {
-      angular.forEach(response.items, function(item) {
+      angular.forEach(response.data.items, function(item) {
         ctrl.images.push({id: item.name, name: item.name});
       });
     }
 
     function onGetFlavors(response) {
-      angular.forEach(response.items, function(item) {
+      angular.forEach(response.data.items, function(item) {
         ctrl.nflavors.push({id: item.name, name: item.name});
-      });
-      angular.forEach(response.items, function(item) {
         ctrl.mflavors.push({id: item.name, name: item.name});
       });
     }
 
     function onGetKeypairs(response) {
-      angular.forEach(response.items, function(item) {
+      angular.forEach(response.data.items, function(item) {
         ctrl.keypairs.push({id: item.keypair.name, name: item.keypair.name});
       });
     }
diff --git a/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/cluster-template.spec.controller.spec.js b/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/cluster-template.spec.controller.spec.js
index 27277d7a..8c66690e 100644
--- a/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/cluster-template.spec.controller.spec.js
+++ b/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/cluster-template.spec.controller.spec.js
@@ -29,9 +29,9 @@
       nova = $injector.get('horizon.app.core.openstack-service-api.nova');
 
       deferred = $q.defer();
-      deferred.resolve({items:{1:{name:1},2:{name:2}}});
+      deferred.resolve({data:{items:{1:{name:1},2:{name:2}}}});
       KeyDeferred = $q.defer();
-      KeyDeferred.resolve({items:{1:{keypair:{name:1}},2:{keypair:{name:2}}}});
+      KeyDeferred.resolve({data:{items:{1:{keypair:{name:1}},2:{keypair:{name:2}}}}});
 
       spyOn(glance, 'getImages').and.returnValue(deferred.promise);
       spyOn(nova, 'getFlavors').and.returnValue(deferred.promise);
diff --git a/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/spec.html b/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/spec.html
index 902a5f12..d12c5796 100644
--- a/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/spec.html
+++ b/magnum_ui/static/dashboard/container-infra/cluster-templates/create/spec/spec.html
@@ -14,12 +14,9 @@
     </div>
     <div class="col-xs-6">
       <div class="form-group">
-        <label class="control-label" for="cluster-template-keypair-id">
-          <translate>Keypair</translate>
-          <span class="hz-icon-required fa fa-asterisk"></span>
-        </label>
+        <label class="control-label" for="cluster-template-keypair-id" translate>Keypair</label>
         <select name="cluster-template-keypair-id" type="text" class="form-control" id="cluster-template-keypair-id"
-                ng-model="model.newClusterTemplateSpec.keypair_id" ng-required="true"
+                ng-model="model.newClusterTemplateSpec.keypair_id"
                 ng-options="keypair.id as keypair.name for keypair in ctrl.keypairs">
         </select>
       </div>
diff --git a/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.controller.js b/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.controller.js
index f91d4f90..15d68d7d 100644
--- a/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.controller.js
+++ b/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.controller.js
@@ -39,7 +39,7 @@
     }
 
     function onGetImages(images) {
-      angular.forEach(images.items, function(image) {
+      angular.forEach(images.data.items, function(image) {
         if (image.name === ctrl.cluster_template.image_id) {
           ctrl.image_uuid = image.id;
         }
diff --git a/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.controller.spec.js b/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.controller.spec.js
index 2fe11832..8f8639f9 100644
--- a/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.controller.spec.js
+++ b/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.controller.spec.js
@@ -26,7 +26,7 @@
     beforeEach(inject(function($controller, $q, $injector) {
       glance = $injector.get('horizon.app.core.openstack-service-api.glance');
       deferred = $q.defer();
-      deferred.resolve({data: {image_id: 1},items:{1:{name:1,id:1},2:{name:2,id:2}}});
+      deferred.resolve({data: {image_id: 1, items: {1: {name: 1, id: 1},2: {name: 2, id: 2}}}});
       spyOn(glance, 'getImages').and.returnValue(deferred.promise);
       ctrl = $controller('ClusterTemplateOverviewController',
         {
diff --git a/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.html b/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.html
index e4322d5f..b35ba953 100644
--- a/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.html
+++ b/magnum_ui/static/dashboard/container-infra/cluster-templates/details/overview.html
@@ -24,8 +24,9 @@
       <dl class="dl-horizontal">
         <dt translate>Image ID</dt>
         <dd><a href="project/images/{$ ctrl.image_uuid $}/" target="_self">{$ ctrl.cluster_template.image_id $}</a></dd>
-        <dt translate>Keypair ID</dt>
-        <dd><a href="project/access_and_security/keypairs/{$ ctrl.cluster_template.keypair_id $}/" target="_self">{$ ctrl.cluster_template.keypair_id $}</a></dd>
+        <dt translate>Keypair</dt>
+        <dd ng-if="ctrl.cluster_template.keypair_id!==null"><a href="project/access_and_security/keypairs/{$ ctrl.cluster_template.keypair_id $}/" target="_self">{$ ctrl.cluster_template.keypair_id $}</a></dd>
+        <dd ng-if="ctrl.cluster_template.keypair_id===null">-</dd>
         <dt translate>Flavor ID</dt>
         <dd>{$ ctrl.cluster_template.flavor_id $}</dd>
         <dt translate>Master Flavor ID</dt>
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/create/cluster-model.js b/magnum_ui/static/dashboard/container-infra/clusters/create/cluster-model.js
index 01673460..c963ab5b 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/create/cluster-model.js
+++ b/magnum_ui/static/dashboard/container-infra/clusters/create/cluster-model.js
@@ -28,6 +28,7 @@
   function ClusterModel(magnum) {
     var model = {
       newClusterSpec: {},
+      templateKeypair: null,
 
       // API methods
       init: init,
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/create/info/cluster.info.controller.js b/magnum_ui/static/dashboard/container-infra/clusters/create/info/cluster.info.controller.js
index 8f9008e2..1e3bd144 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/create/info/cluster.info.controller.js
+++ b/magnum_ui/static/dashboard/container-infra/clusters/create/info/cluster.info.controller.js
@@ -49,21 +49,22 @@
       registry_enabled: "",
       tls_disabled: "",
       apiserver_port: "",
-      keypair: ""
+      keypair_id: ""
     };
 
     $scope.changeClusterTemplate = function() {
-      angular.forEach(ctrl.cluster_templates, function(model) {
-        if ($scope.model.newClusterSpec.cluster_template_id === model.id) {
-          $scope.cluster_template_detail.name = model.name;
-          $scope.cluster_template_detail.id = model.id;
-          $scope.cluster_template_detail.coe = model.coe;
-          $scope.cluster_template_detail.image_id = model.image_id;
-          $scope.cluster_template_detail.public = model.public;
-          $scope.cluster_template_detail.registry_enabled = model.registry_enabled;
-          $scope.cluster_template_detail.tls_disabled = model.tls_disabled;
-          $scope.cluster_template_detail.apiserver_port = model.apiserver_port;
-          $scope.cluster_template_detail.keypair = model.keypair;
+      angular.forEach(ctrl.cluster_templates, function(template) {
+        if ($scope.model.newClusterSpec.cluster_template_id === template.id) {
+          $scope.cluster_template_detail.name = template.name;
+          $scope.cluster_template_detail.id = template.id;
+          $scope.cluster_template_detail.coe = template.coe;
+          $scope.cluster_template_detail.image_id = template.image_id;
+          $scope.cluster_template_detail.public = template.public;
+          $scope.cluster_template_detail.registry_enabled = template.registry_enabled;
+          $scope.cluster_template_detail.tls_disabled = template.tls_disabled;
+          $scope.cluster_template_detail.apiserver_port = template.apiserver_port;
+          $scope.cluster_template_detail.keypair = template.keypair_id;
+          $scope.model.templateKeypair = template.keypair_id;
         }
       });
     };
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/create/info/info.html b/magnum_ui/static/dashboard/container-infra/clusters/create/info/info.html
index 62921e0d..860cbe40 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/create/info/info.html
+++ b/magnum_ui/static/dashboard/container-infra/clusters/create/info/info.html
@@ -35,6 +35,8 @@
           <dd>{$ cluster_template_detail.coe $}</dd>
           <dt translate>Image ID</dt>
           <dd>{$ cluster_template_detail.image_id $}</dd>
+          <dt translate>Keypair</dt>
+          <dd>{$ cluster_template_detail.keypair|noValue $}</dd>
           <dt translate>Public</dt>
           <dd>{$ cluster_template_detail.public $}</dd>
           <dt translate>Registry Enabled</dt>
@@ -42,7 +44,7 @@
           <dt translate>TLS Disabled</dt>
           <dd>{$ cluster_template_detail.tls_disabled $}</dd>
           <dt translate>API Server Port</dt>
-          <dd>{$ cluster_template_detail.apiserver_port $}</dd>
+          <dd>{$ cluster_template_detail.apiserver_port|noValue $}</dd>
         </dl>
       </div>
     </div>
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/create/misc/cluster.misc.controller.js b/magnum_ui/static/dashboard/container-infra/clusters/create/misc/cluster.misc.controller.js
index 1b245ae3..e16558ba 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/create/misc/cluster.misc.controller.js
+++ b/magnum_ui/static/dashboard/container-infra/clusters/create/misc/cluster.misc.controller.js
@@ -50,6 +50,17 @@
         ctrl.keypairs.push({id: item.keypair.name, name: item.keypair.name});
       });
     }
-  }
 
+    function getKeypair() {
+      return $scope.model.templateKeypair;
+    }
+
+    function toggleKeypairRequirement(newValue) {
+      ctrl.templateKeypair = newValue;
+    }
+    var keypairWatcher = $scope.$watch(getKeypair, toggleKeypairRequirement, true);
+    $scope.$on('$destroy', function() {
+      keypairWatcher();
+    });
+  }
 })();
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/create/misc/misc.help.html b/magnum_ui/static/dashboard/container-infra/clusters/create/misc/misc.help.html
index c3d0339b..15ba05e4 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/create/misc/misc.help.html
+++ b/magnum_ui/static/dashboard/container-infra/clusters/create/misc/misc.help.html
@@ -1 +1,9 @@
 <p translate>Specify conditions for cluster creation.</p>
+<dl>
+  <dt>Keypair</dt>
+  <dd>
+    When the selected cluster template contains keypair, user can either provide a new keypair
+    for the cluster or inherit one from the cluster template. When the selected cluster template
+    has no keypair attached, user has to provide a keypair for the cluster.
+  </dd>
+</dl>
\ No newline at end of file
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/create/misc/misc.html b/magnum_ui/static/dashboard/container-infra/clusters/create/misc/misc.html
index d033046b..9128fa54 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/create/misc/misc.html
+++ b/magnum_ui/static/dashboard/container-infra/clusters/create/misc/misc.html
@@ -14,9 +14,12 @@
                placeholder="{$ 'The timeout for cluster creation in minutes. Set to 0 for no timeout. The default is no timeout.'|translate $}">
       </div>
       <div class="form-group">
-        <label class="control-label" for="cluster-keypair" translate>Keypair</label>
+        <label class="control-label" for="cluster-keypair">
+          <translate>Keypair</translate>
+          <span class="hz-icon-required fa fa-asterisk" ng-if="ctrl.templateKeypair === null"></span>
+        </label>
         <select name="cluster-keypair" type="text" class="form-control" id="cluster-keypair"
-                ng-model="model.newClusterSpec.keypair" ng-required="false"
+                ng-model="model.newClusterSpec.keypair" ng-required="ctrl.templateKeypair === null"
                 ng-options="keypair.id as keypair.name for keypair in ctrl.keypairs">
         </select>
       </div>
diff --git a/magnum_ui/static/dashboard/container-infra/clusters/details/overview.controller.js b/magnum_ui/static/dashboard/container-infra/clusters/details/overview.controller.js
index 352d3a0f..3c671088 100644
--- a/magnum_ui/static/dashboard/container-infra/clusters/details/overview.controller.js
+++ b/magnum_ui/static/dashboard/container-infra/clusters/details/overview.controller.js
@@ -39,7 +39,7 @@
     }
 
     function onGetClusterTemplate(clusterTemplate) {
-      ctrl.cluster_template = clusterTemplate;
+      ctrl.cluster_template = clusterTemplate.data;
     }
   }
 })();