diff --git a/src/ui_ng/src/app/user/user.component.html b/src/ui_ng/src/app/user/user.component.html
index 6c351efd7..516adf19a 100644
--- a/src/ui_ng/src/app/user/user.component.html
+++ b/src/ui_ng/src/app/user/user.component.html
@@ -6,18 +6,18 @@
         <button [class.hide-create]="!canCreateUser" type="submit" class="btn btn-link custom-add-button" (click)="addNewUser()"><clr-icon shape="add"></clr-icon>  {{'USER.ADD_ACTION' | translate}}</button>
       </span>
             <grid-filter class="filter-pos" filterPlaceholder='{{"USER.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></grid-filter>
-            <span class="refresh-btn" (click)="refreshUser()">
+            <span class="refresh-btn" (click)="refresh()">
         <clr-icon shape="refresh" [hidden]="inProgress" ng-disabled="inProgress"></clr-icon>
         <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
             </span>
         </div>
         <div>
-            <clr-datagrid [clrDgLoading]="inProgress">
+            <clr-datagrid (clrDgRefresh)="load($event)" [clrDgLoading]="inProgress">
                 <clr-dg-column>{{'USER.COLUMN_NAME' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'USER.COLUMN_ADMIN' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'USER.COLUMN_EMAIL' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'USER.COLUMN_REG_NAME' | translate}}</clr-dg-column>
-                <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
+                <clr-dg-row *ngFor="let user of users" [clrDgItem]="user">
                     <clr-dg-action-overflow [hidden]="isMySelf(user.user_id)">
                         <button class="action-item" (click)="changeAdminRole(user)">{{adminActions(user)}}</button>
                         <button class="action-item" (click)="deleteUser(user)">{{'USER.DEL_ACTION' | translate}}</button>
@@ -28,7 +28,7 @@
                     <clr-dg-cell>{{user.creation_time | date: 'short'}}</clr-dg-cell>
                 </clr-dg-row>
                 <clr-dg-footer>{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
-                    <clr-dg-pagination #pagination [clrDgPageSize]="15" [clrDgTotalItems]="users.length"> {{'USER.ITEMS' | translate}}
+                    <clr-dg-pagination #pagination [clrDgPageSize]="15" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount"> {{'USER.ITEMS' | translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>
diff --git a/src/ui_ng/src/app/user/user.component.ts b/src/ui_ng/src/app/user/user.component.ts
index c9c616161..bcb08bc27 100644
--- a/src/ui_ng/src/app/user/user.component.ts
+++ b/src/ui_ng/src/app/user/user.component.ts
@@ -27,6 +27,16 @@ import { MessageHandlerService } from '../shared/message-handler/message-handler
 import { SessionService } from '../shared/session.service';
 import { AppConfigService } from '../app-config.service';
 
+/**
+ * NOTES:
+ *   Pagination for this component is a temporary workaround solution. It will be replaced in future release.
+ * 
+ * @export
+ * @class UserComponent
+ * @implements {OnInit}
+ * @implements {OnDestroy}
+ */
+
 @Component({
   selector: 'harbor-user',
   templateUrl: 'user.component.html',
@@ -44,6 +54,8 @@ export class UserComponent implements OnInit, OnDestroy {
   private deletionSubscription: Subscription;
 
   currentTerm: string;
+  totalCount: number = 0;
+  currentPage: number = 1;
 
   @ViewChild(NewUserModalComponent)
   newUserDialog: NewUserModalComponent;
@@ -63,8 +75,8 @@ export class UserComponent implements OnInit, OnDestroy {
         this.delUser(confirmed.data);
       }
     });
-    let hnd = setInterval(()=>ref.markForCheck(), 100);
-    setTimeout(()=>clearInterval(hnd), 1000);
+    let hnd = setInterval(() => ref.markForCheck(), 100);
+    setTimeout(() => clearInterval(hnd), 1000);
   }
 
   isMySelf(uid: number): boolean {
@@ -78,8 +90,8 @@ export class UserComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  isMatchFilterTerm(terms: string, testedItem: string): boolean {
-    return testedItem.indexOf(terms) != -1;
+  private isMatchFilterTerm(terms: string, testedItem: string): boolean {
+    return testedItem.toLowerCase().indexOf(terms.toLowerCase()) != -1;
   }
 
   public get canCreateUser(): boolean {
@@ -114,7 +126,6 @@ export class UserComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.refreshUser();
   }
 
   ngOnDestroy(): void {
@@ -128,15 +139,15 @@ export class UserComponent implements OnInit, OnDestroy {
     this.currentTerm = terms;
     this.originalUsers.then(users => {
       if (terms.trim() === "") {
-        this.users = users;
+        this.refreshUser((this.currentPage - 1) * 15, this.currentPage * 15);
       } else {
         this.users = users.filter(user => {
           return this.isMatchFilterTerm(terms, user.username);
         })
       }
     });
-    let hnd = setInterval(()=>this.ref.markForCheck(), 100);
-    setTimeout(()=>clearInterval(hnd), 1000);
+    let hnd = setInterval(() => this.ref.markForCheck(), 100);
+    setTimeout(() => clearInterval(hnd), 1000);
   }
 
   //Disable the admin role for the specified user
@@ -164,8 +175,8 @@ export class UserComponent implements OnInit, OnDestroy {
       .then(() => {
         //Change view now
         user.has_admin_role = updatedUser.has_admin_role;
-        let hnd = setInterval(()=>this.ref.markForCheck(), 100);
-        setTimeout(()=>clearInterval(hnd), 1000);
+        let hnd = setInterval(() => this.ref.markForCheck(), 100);
+        setTimeout(() => clearInterval(hnd), 1000);
       })
       .catch(error => {
         this.msgHandler.handleError(error);
@@ -203,8 +214,8 @@ export class UserComponent implements OnInit, OnDestroy {
         this.originalUsers.then(users => {
           this.users = users.filter(u => u.user_id != user.user_id);
           this.msgHandler.showSuccess("USER.DELETE_SUCCESS");
-          let hnd = setInterval(()=>this.ref.markForCheck(), 100);
-          setTimeout(()=>clearInterval(hnd), 1000);
+          let hnd = setInterval(() => this.ref.markForCheck(), 100);
+          setTimeout(() => clearInterval(hnd), 1000);
         });
       })
       .catch(error => {
@@ -213,7 +224,7 @@ export class UserComponent implements OnInit, OnDestroy {
   }
 
   //Refresh the user list
-  refreshUser(): void {
+  refreshUser(from: number, to: number): void {
     //Start to get
     this.currentTerm = '';
     this.onGoing = true;
@@ -221,15 +232,18 @@ export class UserComponent implements OnInit, OnDestroy {
     this.originalUsers = this.userService.getUsers()
       .then(users => {
         this.onGoing = false;
-        this.users = users;
+
+        this.totalCount = users.length;
+        this.users = users.slice(from, to);//First page
+
         return users;
       })
       .catch(error => {
         this.onGoing = false;
         this.msgHandler.handleError(error);
       });
-      let hnd = setInterval(()=>this.ref.markForCheck(), 100);
-      setTimeout(()=>clearInterval(hnd), 1000);
+    let hnd = setInterval(() => this.ref.markForCheck(), 100);
+    setTimeout(() => clearInterval(hnd), 1000);
   }
 
   //Add new user
@@ -243,7 +257,28 @@ export class UserComponent implements OnInit, OnDestroy {
   //Add user to the user list
   addUserToList(user: User): void {
     //Currently we can only add it by reloading all
-    this.refreshUser();
+    this.refresh();
+  }
+
+  //Data loading
+  load(state: any): void {
+    if (state && state.page) {
+      if (this.originalUsers) {
+        this.originalUsers.then(users => {
+          this.users = users.slice(state.page.from, state.page.to + 1);
+        });
+      } else {
+        this.refreshUser(state.page.from, state.page.to + 1);
+      }
+    } else {
+      //Refresh
+      this.refresh();
+    }
+  }
+
+  refresh(): void {
+    this.currentPage = 1;//Refresh pagination
+    this.refreshUser(0, 15);
   }
 
 }