diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index 57ea00d1118..2ee00326c7b 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -24,7 +24,8 @@
     "angular-elastic-input": "~2.0.1",
     "angular-xeditable": "0.1.8",
     "highlightjs": "~8.4.0",
-    "lodash": "~3.9.3"
+    "lodash": "~3.9.3",
+    "angular-filter": "~0.5.4"
   },
   "devDependencies": {
     "angular-mocks": "1.3.8",
diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js
index 0d163d9f44f..6dfa8e5d911 100644
--- a/zeppelin-web/src/app/app.js
+++ b/zeppelin-web/src/app/app.js
@@ -27,6 +27,7 @@ angular.module('zeppelinWebApp', [
     'ui.sortable',
     'ngTouch',
     'ngDragDrop',
+    'angular.filter',
     'monospaced.elastic',
     'puElasticInput',
     'xeditable'
diff --git a/zeppelin-web/src/app/interpreter/interpreter-create/interpreter-create.html b/zeppelin-web/src/app/interpreter/interpreter-create/interpreter-create.html
index e7096f64e0f..b181ed37456 100644
--- a/zeppelin-web/src/app/interpreter/interpreter-create/interpreter-create.html
+++ b/zeppelin-web/src/app/interpreter/interpreter-create/interpreter-create.html
@@ -29,7 +29,9 @@ <h4>Create new interpreter</h4>
              style="width:180px">
           <select class="form-control input-sm" ng-model="newInterpreterSetting.group"
                   ng-change="newInterpreterGroupChange()">
-            <option ng-repeat="(groupName, interpreterGroup) in availableInterpreters" value="{{groupName}}">{{groupName}}</option>
+            <option ng-repeat="availableInterpreter in availableInterpreters | unique: 'group'" value="{{availableInterpreter.group}}">
+              {{availableInterpreter.group}}
+            </option>
           </select>
         </div>
 
@@ -43,7 +45,7 @@ <h4>Create new interpreter</h4>
           </tr>
           <tr ng-repeat="(key, value) in newInterpreterSetting.properties">
             <td>{{key}}</td>
-            <td><textarea msd-elastic ng-model="value.value" ng-init="value.value = value.defaultValue"></textarea></td>
+            <td><textarea msd-elastic ng-model="value.value"></textarea></td>
             <td>{{value.description}}</td>
             <td>
               <div class="btn btn-default btn-sm fa fa-remove" ng-click="removeInterpreterProperty(key)">
diff --git a/zeppelin-web/src/app/interpreter/interpreter.controller.js b/zeppelin-web/src/app/interpreter/interpreter.controller.js
index 499c270cf8a..a671ec9c113 100644
--- a/zeppelin-web/src/app/interpreter/interpreter.controller.js
+++ b/zeppelin-web/src/app/interpreter/interpreter.controller.js
@@ -105,7 +105,20 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
   };
 
   $scope.newInterpreterGroupChange = function() {
-    $scope.newInterpreterSetting.properties = $scope.availableInterpreters[$scope.newInterpreterSetting.group].properties;
+    var el = _.pluck(_.filter($scope.availableInterpreters, { 'group': $scope.newInterpreterSetting.group }), 'properties');
+    
+    var properties = {};
+    for (var i=0; i < el.length; i++) {
+      var intpInfo = el[i];
+      for (var key in intpInfo) {
+        properties[key] = {
+          value : intpInfo[key].defaultValue,
+          description : intpInfo[key].description
+        };
+      }
+    }
+    
+    $scope.newInterpreterSetting.properties = properties;
   };
 
   $scope.restartInterpreterSetting = function(settingId) {
@@ -152,7 +165,6 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
     });
   };
 
-
   $scope.resetNewInterpreterSetting = function() {
     $scope.newInterpreterSetting = {
       name : undefined,
@@ -179,11 +191,14 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
       if (!$scope.newInterpreterSetting.propertyKey || $scope.newInterpreterSetting.propertyKey === '') {
         return;
       }
-      $scope.newInterpreterSetting.properties[$scope.newInterpreterSetting.propertyKey] = $scope.newInterpreterSetting.propertyValue;
+      
+      $scope.newInterpreterSetting.properties[$scope.newInterpreterSetting.propertyKey] = {
+        value: $scope.newInterpreterSetting.propertyValue
+      };
       emptyNewProperty($scope.newInterpreterSetting);
     }
     else {
-      // Add new property from create form 
+      // Add new property from edit form
       var index = _.findIndex($scope.interpreterSettings, { 'id': settingId });
       var setting = $scope.interpreterSettings[index];
 
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 5676afac591..ed0ccf415d0 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -100,6 +100,7 @@
     <script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
     <script src="bower_components/highlightjs/highlight.pack.js"></script>
     <script src="bower_components/lodash/lodash.js"></script>
+    <script src="bower_components/angular-filter/dist/angular-filter.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->