diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
index 4f40918c6..55c930574 100644
--- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
+++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
@@ -49,7 +49,7 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
             </clr-tooltip-content>
           </clr-tooltip>
         </div>
-        <div class="form-group">
+        <div class="form-group" style="height:30px;">
           <label for="spin" class="col-md-4"></label>
           <span class="col-md-8 spinner spinner-inline" [hidden]="!inProgress"></span>
         </div>
diff --git a/src/ui_ng/lib/src/log/recent-log.component.spec.ts b/src/ui_ng/lib/src/log/recent-log.component.spec.ts
index ed6851fa5..b6c81ea02 100644
--- a/src/ui_ng/lib/src/log/recent-log.component.spec.ts
+++ b/src/ui_ng/lib/src/log/recent-log.component.spec.ts
@@ -77,7 +77,7 @@ describe('RecentLogComponent (inline template)', () => {
 
     spy = spyOn(logService, 'getRecentLogs')
       .and.callFake(function (params: RequestQueryParams) {
-        if (params && params.get('repository')) {
+        if (params && params.get('username')) {
           return Promise.resolve(mockData2);
         } else {
           if (params.get('page') === '1') {
diff --git a/src/ui_ng/lib/src/log/recent-log.component.ts b/src/ui_ng/lib/src/log/recent-log.component.ts
index d1689d1a1..4c5115852 100644
--- a/src/ui_ng/lib/src/log/recent-log.component.ts
+++ b/src/ui_ng/lib/src/log/recent-log.component.ts
@@ -43,6 +43,8 @@ export class RecentLogComponent implements OnInit {
     logsCache: AccessLog;
     loading: boolean = true;
     currentTerm: string;
+    defaultFilter = "username";
+    isOpenFilterTag: boolean;
     @Input() withTitle: boolean = false;
 
     pageSize: number = DEFAULT_PAGE_SIZE;
@@ -94,6 +96,19 @@ export class RecentLogComponent implements OnInit {
         this.doFilter("");
     }
 
+    openFilter(isOpen: boolean): void {
+        if (isOpen) {
+            this.isOpenFilterTag = true;
+        }else {
+            this.isOpenFilterTag = false;
+        }
+    }
+
+    selectFilterKey($event: any): void {
+        this.defaultFilter = $event['target'].value;
+        this.doFilter(this.currentTerm);
+    }
+
     load(state: State) {
         //Keep it for future filter
         this.currentState = state;
@@ -105,7 +120,7 @@ export class RecentLogComponent implements OnInit {
             params.set("page", '' + pageNumber);
             params.set("page_size", '' + this.pageSize);
             if (this.currentTerm && this.currentTerm !== "") {
-                params.set('repository', this.currentTerm);
+                params.set(this.defaultFilter, this.currentTerm);
             }
 
             this.loading = true;
diff --git a/src/ui_ng/lib/src/log/recent-log.template.ts b/src/ui_ng/lib/src/log/recent-log.template.ts
index 2f50b3403..0d478af85 100644
--- a/src/ui_ng/lib/src/log/recent-log.template.ts
+++ b/src/ui_ng/lib/src/log/recent-log.template.ts
@@ -8,7 +8,15 @@ export const LOG_TEMPLATE: string = `
     <div class="row flex-items-xs-between flex-items-xs-bottom">
         <div></div>
         <div class="action-head-pos rightPos">
-            <hbr-filter [withDivider]="true" filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></hbr-filter>
+            <div class="select filterTag" [hidden]="!isOpenFilterTag">
+                <select id="selectKey" (change)="selectFilterKey($event)">
+                    <option value="username">{{"AUDIT_LOG.USERNAME" | translate | lowercase}}</option>
+                    <option value="repository">{{"CONFIG.REPOSITORY" | translate | lowercase}}</option>
+                    <option value="tag">{{"REPOSITORY.TAG" | translate | lowercase}}</option>
+                    <option value="operation">{{"AUDIT_LOG.OPERATION" | translate | lowercase}}</option>
+                </select>
+            </div>
+            <hbr-filter [withDivider]="true" filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" (openFlag)="openFilter($event)" [currentValue]="currentTerm"></hbr-filter>
             <span (click)="refresh()" class="refresh-btn">
             <clr-icon shape="refresh" [hidden]="inProgress" ng-disabled="inProgress"></clr-icon>
             <span class="spinner spinner-inline" [hidden]="!inProgress"></span>
@@ -90,4 +98,5 @@ export const LOG_STYLES: string = `
     right: 35px;
     margin-top: 4px;
 }
+.filterTag{float:left;margin-top:8px;}
 `;
\ No newline at end of file
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 3937cd9db..b17541866 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -30,7 +30,7 @@
         "clarity-icons": "^0.10.27",
         "clarity-ui": "^0.10.27",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.7.17",
+        "harbor-ui": "0.7.18",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",