diff --git a/zanata-war/src/main/java/org/zanata/action/VersionGroupHome.java b/zanata-war/src/main/java/org/zanata/action/VersionGroupHome.java
index 23092d214a..81485848e0 100644
--- a/zanata-war/src/main/java/org/zanata/action/VersionGroupHome.java
+++ b/zanata-war/src/main/java/org/zanata/action/VersionGroupHome.java
@@ -97,10 +97,12 @@ public class VersionGroupHome extends SlugHome<HIterationGroup> {
 
     private List<SelectItem> statusList;
 
-    @Getter
     @Setter
-    // string format: #{hlocale.retrieveDisplayName()} [#{hlocale.localeId}]
-    private String newLanguage;
+    private String languageQuery;
+
+    @Setter
+    // localeId
+    private String selectedLocale;
 
     @Setter
     private String versionQuery;
@@ -164,23 +166,23 @@ public void setStatus(char initial) {
         getInstance().setStatus(EntityStatus.valueOf(initial));
     }
 
-    public List<HLocale> suggestLocales(final String query) {
+    public List<HLocale> suggestLocales() {
         List<HLocale> localeList = localeServiceImpl.getSupportedLocales();
 
         Collection<HLocale> filtered =
                 Collections2.filter(localeList, new Predicate<HLocale>() {
                     @Override
                     public boolean apply(@Nullable HLocale input) {
-                        if (StringUtils.isEmpty(query)) {
+                        if (StringUtils.isEmpty(languageQuery)) {
                             return !getInstance().getActiveLocales().contains(
                                     input);
                         }
                         return !getInstance().getActiveLocales()
                                 .contains(input)
                                 && (input.getLocaleId().getId()
-                                        .startsWith(query) || input
+                                        .startsWith(languageQuery) || input
                                         .retrieveDisplayName().toLowerCase()
-                                        .contains(query.toLowerCase()));
+                                        .contains(languageQuery.toLowerCase()));
                     }
                 });
 
@@ -221,26 +223,6 @@ public boolean apply(@Nullable HPerson input) {
         return Lists.newArrayList(filtered);
     }
 
-    // Chinese (Traditional Han) [zh-Hant]
-    @Restrict("#{s:hasPermission(versionGroupHome.instance, 'update')}")
-    public void addLanguage() {
-        if (StringUtils.isEmpty(newLanguage)) {
-            return;
-        }
-        String localeId = newLanguage.split("\\[")[1].replace("]", "");
-
-        HLocale locale = localeServiceImpl.getByLocaleId(localeId);
-
-        getInstance().getActiveLocales().add(locale);
-        super.update();
-        newLanguage = "";
-
-        addMessage(
-                StatusMessage.Severity.INFO,
-                zanataMessages.getMessage("jsf.LanguageAddedToGroup",
-                        locale.retrieveDisplayName()));
-    }
-
     /**
      * Use FlashScopeBean to store message in page. Multiple ajax requests for
      * re-rendering statistics after updating will clear FacesMessages.
@@ -260,6 +242,25 @@ private void clearMessage() {
         flashScope.getAndClearAttribute("message");
     }
 
+    @Restrict("#{s:hasPermission(versionGroupHome.instance, 'update')}")
+    public void addLanguage() {
+        if (StringUtils.isEmpty(selectedLocale)) {
+            return;
+        }
+
+        HLocale locale = localeServiceImpl.getByLocaleId(selectedLocale);
+
+        getInstance().getActiveLocales().add(locale);
+        super.update();
+        selectedLocale = "";
+        languageQuery = "";
+
+        addMessage(
+                StatusMessage.Severity.INFO,
+                zanataMessages.getMessage("jsf.LanguageAddedToGroup",
+                        locale.retrieveDisplayName()));
+    }
+
     @Restrict("#{s:hasPermission(versionGroupHome.instance, 'update')}")
     public void addVersion() {
         if (StringUtils.isEmpty(selectedVersion)) {
@@ -270,7 +271,8 @@ public void addVersion() {
                 projectIterationDAO.findById(new Long(selectedVersion));
         getInstance().getProjectIterations().add(version);
         super.update();
-        this.selectedVersion = "";
+        selectedVersion = "";
+        versionQuery = "";
 
         addMessage(
                 StatusMessage.Severity.INFO,
@@ -287,7 +289,8 @@ public void addMaintainer() {
         HPerson maintainer = personDAO.findByUsername(selectedMaintainer);
         getInstance().getMaintainers().add(maintainer);
         super.update();
-        this.selectedMaintainer = "";
+        selectedMaintainer = "";
+        maintainerQuery = "";
 
         addMessage(StatusMessage.Severity.INFO, zanataMessages.getMessage(
                 "jsf.MaintainerAddedToGroup", maintainer.getName()));
diff --git a/zanata-war/src/main/resources/messages.properties b/zanata-war/src/main/resources/messages.properties
index 7227a625b6..76596232e9 100644
--- a/zanata-war/src/main/resources/messages.properties
+++ b/zanata-war/src/main/resources/messages.properties
@@ -438,6 +438,8 @@ jsf.Missing=missing
 jsf.GroupId=Group ID
 jsf.General=General
 jsf.Maintainers=Maintainers
+jsf.SearchLanguages=Search Languages
+jsf.SearchUsers=Search Users
 
 
 
diff --git a/zanata-war/src/main/webapp/WEB-INF/layout/version-group/settings-tab.xhtml b/zanata-war/src/main/webapp/WEB-INF/layout/version-group/settings-tab.xhtml
index e3d1c67bef..95c4b09d7f 100644
--- a/zanata-war/src/main/webapp/WEB-INF/layout/version-group/settings-tab.xhtml
+++ b/zanata-war/src/main/webapp/WEB-INF/layout/version-group/settings-tab.xhtml
@@ -60,18 +60,6 @@
   }
 </script>
 
-<a4j:jsFunction name="addNewLanguage" render="settings-languages-form"
-  oncomplete="refreshStatistics();focusCurrentActiveInput()"
-  action="#{versionGroupHome.addLanguage()}">
-  <a4j:param name="val" assignTo="#{versionGroupHome.newLanguage}"/>
-</a4j:jsFunction>
-
-<a4j:jsFunction name="addNewVersion" render="settings-projects-form"
-  oncomplete="refreshStatistics();focusCurrentActiveInput()"
-  action="#{versionGroupHome.addVersion()}">
-  <a4j:param name="val" assignTo="#{versionGroupHome.newVersion}"/>
-</a4j:jsFunction>
-
 <h1>#{messages['Settings']}</h1>
 
 <div class="tabs--vertical js-tabs">
@@ -174,27 +162,26 @@
           </li>
         </ui:repeat>
         <li class="list--highlight__item--none">
-          <label for="#{rich:clientId('new--language')}Input">
+          <label
+            for="#{rich:clientId('languageAutocomplete')}-autocomplete__input">
             #{messages['jsf.AddALanguage']}
           </label>
 
-          <rich:autocomplete mode="cachedAjax" var="suggestLocale"
-            styleClass="auto-complete" id="new--language"
-            inputClass="autocomplete__input js-tabs-nav-focus-input"
-            onselectitem="addNewLanguage(this.value);"
-            autocompleteMethod="#{versionGroupHome.suggestLocales}"
-            layout="list"
-            oncomplete="updateResultClickEvent(newLanguageItems, addNewLanguage)"
-            fetchValue="#{suggestLocale.retrieveDisplayName()} [#{suggestLocale.localeId}]"
-            popupClass="auto-complete-list" minChars="0">
-            <rich:placeholder value="#{messages['jsf.AddALanguage']}"
-              styleClass="form__placeholder"/>
+          <zanata:autocomplete
+            selectedField="#{versionGroupHome.selectedLocale}"
+            getResultAction="#{versionGroupHome.suggestLocales()}"
+            onselectItem="#{versionGroupHome.addLanguage()}"
+            maxlength="80" minlength="1" id="languageAutocomplete"
+            queryField="#{versionGroupHome.languageQuery}"
+            displayValue="#{result.retrieveDisplayName()} [#{result.localeId}]"
+            fetchValue="#{result.localeId}" render="settings-languages-form"
+            oncomplete="refreshStatistics();focusCurrentActiveInput()"
+            placeholder="#{messages['jsf.SearchLanguages']}">
+
+            #{result.retrieveDisplayName()}<span
+            class="txt--understated l--push-left-quarter">[#{result.localeId}]</span>
+          </zanata:autocomplete>
 
-            <h:inputHidden
-              value="#{suggestLocale.retrieveDisplayName()} [#{suggestLocale.localeId}]"/>
-            #{suggestLocale.retrieveDisplayName()}<span
-            class="txt--understated l--push-left-quarter">[#{suggestLocale.localeId}]</span>
-          </rich:autocomplete>
         </li>
       </ul>
     </h:form>
@@ -204,7 +191,7 @@
       #{messages['jsf.Projects']}
     </h2>
     <h:form id="settings-projects-form" styleClass="l--push-bottom-0">
-      <ul class="list--slat l--push-top-half">
+      <ul class="list--slat list--highlight l--push-top-half">
         <ui:repeat
           value="#{versionGroupHome.getSortedInstanceProjectIterations()}"
           var="version">
@@ -226,7 +213,7 @@
         </ui:repeat>
         <li class="list--highlight__item--none">
           <label
-            for="#{rich:clientId('version-autocomplete')}:autocomplete__input">
+            for="#{rich:clientId('versionAutocomplete')}-autocomplete__input">
             #{messages['jsf.AddAProject']}
           </label>
 
@@ -240,7 +227,7 @@
             fetchValue="#{result.id}"
             render="settings-projects-form"
             oncomplete="refreshStatistics();focusCurrentActiveInput();"
-            placeholder="#{messages['jsf.AddAProject']}">
+            placeholder="#{messages['jsf.SearchProjects']}">
 
             #{result.project.slug} <i class="i i--version"></i> #{result.slug}
           </zanata:autocomplete>
@@ -253,7 +240,7 @@
       #{messages['jsf.Maintainers']}
     </h2>
     <h:form id="settings-maintainers-form" styleClass="l--push-bottom-0">
-      <ul class="list--slat l--push-top-half">
+      <ul class="list--slat list--highlight l--push-top-half">
         <ui:repeat value="#{versionGroupHome.getInstanceMaintainers()}"
           var="maintainer">
           <li class="reveal--list-item">
@@ -274,7 +261,7 @@
 
         <li class="list--highlight__item--none">
           <label
-            for="#{rich:clientId('maintainer-autocomplete')}:autocomplete__input">
+            for="#{rich:clientId('maintainerAutocomplete')}-autocomplete__input">
             #{messages['jsf.AddAMaintainer']}
           </label>
 
@@ -282,13 +269,13 @@
             selectedField="#{versionGroupHome.selectedMaintainer}"
             getResultAction="#{versionGroupHome.suggestMaintainers()}"
             onselectItem="#{versionGroupHome.addMaintainer()}"
-            maxlength="80" minlength="0" id="maintainerAutocomplete"
+            maxlength="80" minlength="3" id="maintainerAutocomplete"
             queryField="#{versionGroupHome.maintainerQuery}"
             displayValue="#{result.name} @#{result.account.username}"
             fetchValue="#{result.account.username}"
             render="settings-maintainers-form,pageMessages"
             oncomplete="focusCurrentActiveInput()"
-            placeholder="#{messages['jsf.AddAMaintainer']}">
+            placeholder="#{messages['jsf.SearchUsers']}">
 
           <span class="w--r-1 bx--round l--push-right-quarter">
             <img
diff --git a/zanata-war/src/main/webapp/resources/script/component-autocomplete.js b/zanata-war/src/main/webapp/resources/script/component-autocomplete.js
index 8789dcccd4..c7bebf65ae 100644
--- a/zanata-war/src/main/webapp/resources/script/component-autocomplete.js
+++ b/zanata-war/src/main/webapp/resources/script/component-autocomplete.js
@@ -20,61 +20,59 @@
  *  * site: http://www.fsf.org.
  */
 
-jQuery(document).ready(
-    function() {
-      jQuery(this).click(function(event) {
-        if (jQuery(event.target).attr("class") != 'autocomplete__results') {
-          jQuery('.autocomplete__results').remove();
-        }
-      });
+jQuery(document).ready(function() {
+  jQuery(this).click(function(event) {
+    if (jQuery(event.target).attr("class") != 'autocomplete__results') {
+      jQuery('.autocomplete__results').remove();
+    }
+  });
 
-      jQuery('.autocomplete__input').keyup(function(event) {
-        if (isEnterKey(event)) {
-          event.preventDefault();
-        }
-      });
+  //prevent form submit when enter key pressed in the input field.
+  jQuery('.autocomplete__input').keydown(function(event) {
+    if (isEnterKey(event)) {
+      event.preventDefault();
+    }
+  });
+});
 
-      jQuery(".autocomplete").keydown(
-          function(event) {
-            var currentSelected = jQuery(this).find('.autocomplete__results')
-                .children('.is-selected');
+function onResultKeyPressed(autocomplete, event, submitFormFunction) {
+  var currentSelected = jQuery(autocomplete).find('.autocomplete__results')
+      .children('.is-selected');
 
-            if (isEnterKey(event)) {
-              event.preventDefault();
-              if (currentSelected.length != 0) {
-                onselectRow(currentSelected);
-              }
-            } else if (event.keyCode == 40) {
-              // key: down
-              if (currentSelected.length == 0
-                  || jQuery(currentSelected).next().length == 0) {
-                selectRow(this, jQuery(this).find('.autocomplete__results')
-                    .children('li').first());
-              } else {
-                deselectRow(currentSelected);
-                selectRow(this, jQuery(currentSelected).next("li"));
-              }
-            } else if (event.keyCode == 38) {
-              // key: up
-              if (currentSelected.length == 0) {
-                selectRow(this, jQuery(this).find('.autocomplete__results')
-                    .children('li').last());
-              } else {
-                deselectRow(currentSelected);
-                selectRow(this, jQuery(currentSelected).prev("li"));
-              }
-            }
-          });
-    });
+  if (isEnterKey(event)) {
+    event.preventDefault();
+    if (currentSelected.length != 0) {
+      onSubmitForm(currentSelected, submitFormFunction);
+    }
+  } else if (event.keyCode == 40) {
+    // key: down
+    if (currentSelected.length == 0
+        || jQuery(currentSelected).next().length == 0) {
+      selectRow(jQuery(autocomplete).find('.autocomplete__results').children(
+          'li').first());
+    } else {
+      deselectRow(currentSelected);
+      selectRow(jQuery(currentSelected).next("li"));
+    }
+  } else if (event.keyCode == 38) {
+    // key: up
+    if (currentSelected.length == 0) {
+      selectRow(jQuery(autocomplete).find('.autocomplete__results').children(
+          'li').last());
+    } else {
+      deselectRow(currentSelected);
+      selectRow(jQuery(currentSelected).prev("li"));
+    }
+  }
+}
 
-function onselectRow(row) {
-  submitSelected(jQuery(row).children("input").first().val());
+function onSubmitForm(row, submitFormFunction) {
+  submitFormFunction(jQuery(row).children("input").first().val());
+  jQuery(row).parent().remove();
 }
 
-function selectRow(autocomplete, row) {
+function selectRow(row) {
   jQuery(row).addClass("is-selected");
-  jQuery(autocomplete).children('.autocomplete__input').val(
-      jQuery(row).children("input").eq(1).val());
 }
 
 function deselectRow(row) {
@@ -98,21 +96,25 @@ function onValueChange(inputField, event, renderResultFn) {
   }
 }
 
-function registerMouseEvent(autocompleteId) {
-  var autocompleteComponent = jQuery("[id='" + autocompleteId + "']");
-  autocompleteComponent.find('.autocomplete__results').children(
-      '.autocomplete__result').each(function() {
-    jQuery(this).mouseover(function() {
-      selectRow(autocompleteComponent, this);
-    });
+function registerMouseEvent(autocompleteId, submitFormFunction) {
+  jQuery("[id='" + autocompleteId + "']").find('.autocomplete__results')
+      .children('.autocomplete__result').each(function() {
+        jQuery(this).mouseover(function() {
+          selectRow(this);
+        });
 
-    jQuery(this).mouseout(function() {
-      deselectRow(this);
-    });
+        jQuery(this).mouseout(function() {
+          deselectRow(this);
+        });
 
-    jQuery(this).click(function() {
-      onselectRow(this);
-      jQuery(this).parent().remove();
-    });
-  });
+        jQuery(this).click(function() {
+          onSubmitForm(this, submitFormFunction);
+        });
+      });
+
+  var firstResult = jQuery("[id='" + autocompleteId + "']").find(
+      '.autocomplete__results').children('.autocomplete__result').first();
+  if (firstResult.length != 0) {
+    selectRow(firstResult);
+  }
 }
\ No newline at end of file
diff --git a/zanata-war/src/main/webapp/resources/zanata/autocomplete.xhtml b/zanata-war/src/main/webapp/resources/zanata/autocomplete.xhtml
index e24d7ef02d..71368bd7f8 100644
--- a/zanata-war/src/main/webapp/resources/zanata/autocomplete.xhtml
+++ b/zanata-war/src/main/webapp/resources/zanata/autocomplete.xhtml
@@ -18,7 +18,7 @@
     default="2"/>
 
   <composite:attribute name="id" type="java.lang.String"
-    shortDescription="id of component" required="true"/>
+    shortDescription="id of component (java naming)" required="true"/>
 
   <composite:attribute name="fetchValue" required="true" type="java.lang.String"
     shortDescription="A value to use when submit to server using onselectItem action"/>
@@ -52,25 +52,29 @@
 </composite:interface>
 
 <composite:implementation>
-  <a4j:jsFunction name="#{cc.attrs.id}RenderResult" render="#{cc.attrs.id}-result"
-    limitRender="true" oncomplete="registerMouseEvent('#{cc.attrs.id}')">
+  <a4j:jsFunction name="#{cc.attrs.id}RenderResult"
+    render="#{cc.attrs.id}-result"
+    limitRender="true"
+    oncomplete="registerMouseEvent('#{cc.attrs.id}', #{cc.attrs.id}SubmitSelected)">
     <a4j:param name="val" assignTo="#{cc.attrs.queryField}"/>
   </a4j:jsFunction>
 
-  <a4j:jsFunction name="submitSelected" action="#{cc.attrs.onselectItem}"
-    render="#{cc.attrs.render}" oncomplete="#{cc.attrs.oncomplete}"
+  <a4j:jsFunction name="#{cc.attrs.id}SubmitSelected"
+    action="#{cc.attrs.onselectItem}"
+    render="#{cc.attrs.render} #{cc.attrs.id}-result"
+    oncomplete="#{cc.attrs.oncomplete}"
     limitRender="true">
     <a4j:param name="val" assignTo="#{cc.attrs.selectedField}"/>
   </a4j:jsFunction>
 
-  <div class="autocomplete" id="#{cc.attrs.id}">
-    <h:inputText maxlength="#{cc.attrs.maxlength}" autocomplete="off"
-      styleClass="autocomplete__input js-tabs-nav-focus-input"
+  <div class="autocomplete" id="#{cc.attrs.id}"
+    onkeydown="onResultKeyPressed(this, event, #{cc.attrs.id}SubmitSelected)">
+
+    <input type="text" maxlength="#{cc.attrs.maxlength}" autocomplete="off"
+      class="autocomplete__input js-tabs-nav-focus-input"
       onkeyup="onValueChange(this, event, #{cc.attrs.id}RenderResult)"
-      id="autocomplete__input">
-      <rich:placeholder value="#{cc.attrs.placeholder}"
-        styleClass="form__placeholder"/>
-    </h:inputText>
+      id="#{cc.attrs.id}-autocomplete__input" placeholder="#{cc.attrs.placeholder}"/>
+
     <input type="hidden" value="#{cc.attrs.minlength}"/>
     <s:div id="#{cc.attrs.id}-result">
       <ui:param value="#{cc.attrs.getResultAction}" name="resultList"/>