diff --git a/src/portal/src/app/project/member/add-member/add-member.component.scss b/src/portal/src/app/project/member/add-member/add-member.component.scss
index 23ca0f347..66c0216ea 100644
--- a/src/portal/src/app/project/member/add-member/add-member.component.scss
+++ b/src/portal/src/app/project/member/add-member/add-member.component.scss
@@ -24,3 +24,8 @@
     background-image: linear-gradient(180deg,#f5f5f5 0,#e8e8e8);
     background-repeat: repeat-x;
 }
+.modal-body{
+    overflow: visible;
+}
+
+
diff --git a/src/portal/src/app/project/member/add-member/add-member.component.ts b/src/portal/src/app/project/member/add-member/add-member.component.ts
index 27ffdf43f..7c9c7cd39 100644
--- a/src/portal/src/app/project/member/add-member/add-member.component.ts
+++ b/src/portal/src/app/project/member/add-member/add-member.component.ts
@@ -26,7 +26,7 @@ import {
 import { Response } from '@angular/http';
 import { NgForm } from '@angular/forms';
 import {ActivatedRoute} from "@angular/router";
-import { Subject } from "rxjs";
+import { Subject, forkJoin } from "rxjs";
 
 
 
@@ -94,11 +94,6 @@ export class AddMemberComponent implements AfterViewChecked, OnInit, OnDestroy {
       hasProjectAdminRole = (<Project>resolverData['projectResolver']).has_project_admin_role;
     }
     if (hasProjectAdminRole) {
-      this.userService.getUsersNameList()
-        .subscribe(users => {
-          this.userLists = users;
-        });
-
       this.nameChecker.pipe(
         debounceTime(500),
         distinctUntilChanged(), )
@@ -108,32 +103,31 @@ export class AddMemberComponent implements AfterViewChecked, OnInit, OnDestroy {
             this.isMemberNameValid = cont.valid;
             if (cont.valid) {
               this.checkOnGoing = true;
-              this.memberService
-                .listMembers(this.projectId, cont.value)
-                .subscribe((members: Member[]) => {
-                  if (members.filter(m => { return m.entity_name === cont.value; }).length > 0) {
-                    this.isMemberNameValid = false;
-                    this.memberTooltip = 'MEMBER.USERNAME_ALREADY_EXISTS';
-                  }
-                  this.checkOnGoing = false;
-                }, error => {
-                  this.checkOnGoing = false;
-                });
-              // username autocomplete
-              if (this.userLists && this.userLists.length) {
-                this.selectUserName = [];
-                this.userLists.forEach(data => {
-                  if (data.username.startsWith(cont.value) && !this.memberList.find(mem => mem.entity_name === data.username)) {
-                    if (this.selectUserName.length < 10) {
-                      this.selectUserName.push(data.username);
+              forkJoin(this.userService.getUsersNameList(cont.value, 20), this.memberService
+              .listMembers(this.projectId, cont.value)).subscribe((res: Array<any>) => {
+                this.userLists = res[0];
+                if (res[1].filter(m => { return m.entity_name === cont.value; }).length > 0) {
+                  this.isMemberNameValid = false;
+                  this.memberTooltip = 'MEMBER.USERNAME_ALREADY_EXISTS';
+                }
+                this.checkOnGoing = false;
+                if (this.userLists && this.userLists.length) {
+                  this.selectUserName = [];
+                  this.userLists.forEach(data => {
+                    if (data.username.startsWith(cont.value) && !this.memberList.find(mem => mem.entity_name === data.username)) {
+                      if (this.selectUserName.length < 10) {
+                        this.selectUserName.push(data.username);
+                      }
                     }
-                  }
-                });
-                let changeTimer = setInterval(() => this.ref.detectChanges(), 200);
-                setTimeout(() => {
-                  clearInterval(changeTimer);
-                }, 2000);
-              }
+                  });
+                  let changeTimer = setInterval(() => this.ref.detectChanges(), 200);
+                  setTimeout(() => {
+                    clearInterval(changeTimer);
+                  }, 2000);
+                }
+              }, error => {
+                this.checkOnGoing = false;
+              });
             } else {
               this.memberTooltip = 'MEMBER.USERNAME_IS_REQUIRED';
             }
diff --git a/src/portal/src/app/user/user.service.ts b/src/portal/src/app/user/user.service.ts
index f9b49b92c..0f1faeb2a 100644
--- a/src/portal/src/app/user/user.service.ts
+++ b/src/portal/src/app/user/user.service.ts
@@ -21,7 +21,7 @@ import { User, LDAPUser } from './user';
 import LDAPUsertoUser from './user';
 
 const userMgmtEndpoint = '/api/users';
-const userListSearch = '/api/users/search';
+const userListSearch = '/api/users/search?';
 const ldapUserEndpoint = '/api/ldap/users';
 
 /**
@@ -41,8 +41,8 @@ export class UserService {
     }
 
     // Get the user list
-    getUsersNameList(): Observable<User[]> {
-        return this.http.get(userListSearch, HTTP_GET_OPTIONS)
+    getUsersNameList(name: string, page_size: number): Observable<User[]> {
+        return this.http.get(`${userListSearch}page_size=${page_size}&username=${name}`, HTTP_GET_OPTIONS)
             .pipe(map(response => response.json() as User[])
             , catchError(error => this.handleError(error)));
     }