diff --git a/src/ui_ng/src/app/log/audit-log.component.html b/src/ui_ng/src/app/log/audit-log.component.html
index 39e2b726e..d787c1cf5 100644
--- a/src/ui_ng/src/app/log/audit-log.component.html
+++ b/src/ui_ng/src/app/log/audit-log.component.html
@@ -14,7 +14,11 @@
           <clr-icon shape="caret down"></clr-icon>
         </button>
         <div class="dropdown-menu">
-          <a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)"><clr-icon shape="check" [hidden]="!f.checked"></clr-icon> {{f.description | translate}}</a>
+          <a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)">
+            <clr-icon shape="check" [hidden]="!f.checked"></clr-icon>
+            <ng-template [ngIf]="!f.checked"><span style="display: inline-block;width: 16px;"></span></ng-template>
+            {{f.description | translate}}
+          </a> 
         </div>
       </clr-dropdown>
       <div class="flex-xs-middle">
diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.html b/src/ui_ng/src/app/project/create-project/create-project.component.html
index 97f838bb2..48117cbc4 100644
--- a/src/ui_ng/src/app/project/create-project/create-project.component.html
+++ b/src/ui_ng/src/app/project/create-project/create-project.component.html
@@ -4,10 +4,10 @@
   <div class="modal-body" style="height: 12.8em; overflow-y: hidden;">
     <form #projectForm="ngForm">
       <section class="form-block">
-        <div class="form-group">
-          <label for="create_project_name" class="col-md-4 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
+        <div class="form-group" style="padding-left: 135px;">
+          <label for="create_project_name" class="col-md-3 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
           <label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" [class.valid]="projectName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
-            <input type="text" id="create_project_name"  [(ngModel)]="project.name" name="name" size="20" required minlength="2" #projectName="ngModel" targetExists="PROJECT_NAME">
+            <input type="text" id="create_project_name"  [(ngModel)]="project.name" name="name" size="38" required minlength="2" #projectName="ngModel" targetExists="PROJECT_NAME">
             <span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.required && (projectName.dirty || projectName.touched)">
               {{'PROJECT.NAME_IS_REQUIRED' | translate}}
             </span>
@@ -19,16 +19,17 @@
             </span>
           </label>
         </div>
-        <div class="form-group">
-          <label class="col-md-4 form-group-label-override">{{'PROJECT.PUBLIC_OR_PRIVATE' | translate}}</label>
+        <div class="form-group" style="padding-left: 135px;">
+          <label class="col-md-3 form-group-label-override">{{'PROJECT.PUBLIC_OR_PRIVATE' | translate}}</label>
           <div class="checkbox-inline">
             <input type="checkbox" id="create_project_public" [(ngModel)]="project.public" name="public">
             <label for="create_project_public"></label>
+            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right" style="top:-8px; left:-8px;">
+             <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
+             <span class="tooltip-content" style="margin-left: 5px;">{{'PROJECT.INLINE_HELP_PUBLIC' | translate }}</span>
+           </a>
           </div>
         </div>
-        <p class="inline-help-public">
-          {{'PROJECT.INLINE_HELP_PUBLIC' | translate }}
-        </p>
       </section>
     </form>
   </div>
diff --git a/src/ui_ng/src/app/project/create-project/create-project.css b/src/ui_ng/src/app/project/create-project/create-project.css
index 526c33101..0bcac82e9 100644
--- a/src/ui_ng/src/app/project/create-project/create-project.css
+++ b/src/ui_ng/src/app/project/create-project/create-project.css
@@ -1,12 +1,3 @@
-.inline-help-public {
-  color: #CCCCCC;
-  font-size: 12px;
-  line-height: 1.5em;
-  letter-spacing: 0.01em;
-  margin-top: 0;
-  padding: 0 14px;
-}
-
 .form-group-label-override {
     font-size: 14px;
     font-weight: 400;
diff --git a/src/ui_ng/src/app/project/member/member.component.css b/src/ui_ng/src/app/project/member/member.component.css
index c782e3827..ab3bc903f 100644
--- a/src/ui_ng/src/app/project/member/member.component.css
+++ b/src/ui_ng/src/app/project/member/member.component.css
@@ -5,8 +5,4 @@
 .option-right {
   padding-right: 16px;
   margin-top: 18px;
-}
-
-.datagrid-foot {
-  margin-bottom: 0.5px;
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/app/project/member/member.component.html b/src/ui_ng/src/app/project/member/member.component.html
index 78ba04ea8..7f36d7639 100644
--- a/src/ui_ng/src/app/project/member/member.component.html
+++ b/src/ui_ng/src/app/project/member/member.component.html
@@ -19,9 +19,9 @@
             <clr-dg-column>{{'MEMBER.ROLE' | translate}}</clr-dg-column>
             <clr-dg-row *clrDgItems="let m of members">
                 <clr-dg-action-overflow [hidden]="m.user_id === currentUser.user_id || !hasProjectAdminRole">
-                    <button class="action-item" (click)="changeRole(m, 1)">{{'MEMBER.PROJECT_ADMIN' | translate}}</button>
-                    <button class="action-item" (click)="changeRole(m, 2)">{{'MEMBER.DEVELOPER' | translate}}</button>
-                    <button class="action-item" (click)="changeRole(m, 3)">{{'MEMBER.GUEST' | translate}}</button>
+                    <button class="action-item" [hidden]="m.role_id === 1" (click)="changeRole(m, 1)">{{'MEMBER.PROJECT_ADMIN' | translate}}</button>
+                    <button class="action-item" [hidden]="m.role_id === 2" (click)="changeRole(m, 2)">{{'MEMBER.DEVELOPER' | translate}}</button>
+                    <button class="action-item" [hidden]="m.role_id === 3" (click)="changeRole(m, 3)">{{'MEMBER.GUEST' | translate}}</button>
                     <button class="action-item" (click)="deleteMember(m)">{{'MEMBER.DELETE' | translate}}</button>
                 </clr-dg-action-overflow>
                 <clr-dg-cell>{{m.username}}</clr-dg-cell>
diff --git a/src/ui_ng/src/app/project/member/member.component.ts b/src/ui_ng/src/app/project/member/member.component.ts
index a69ac692c..494dfcb4d 100644
--- a/src/ui_ng/src/app/project/member/member.component.ts
+++ b/src/ui_ng/src/app/project/member/member.component.ts
@@ -111,8 +111,8 @@ export class MemberComponent implements OnInit, OnDestroy {
   ngOnInit() {
     //Get projectId from route params snapshot.          
     this.projectId = +this.route.snapshot.parent.params['id'];   
-    this.currentUser = this.session.getCurrentUser();
     //Get current user from registered resolver.
+    this.currentUser = this.session.getCurrentUser();
     let resolverData = this.route.snapshot.parent.data;
     if(resolverData) {
       this.hasProjectAdminRole = (<Project>resolverData['projectResolver']).has_project_admin_role;
diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.css b/src/ui_ng/src/app/project/project-detail/project-detail.component.css
index 25f27c693..90f5add5f 100644
--- a/src/ui_ng/src/app/project/project-detail/project-detail.component.css
+++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.css
@@ -7,6 +7,10 @@
   background-color: #fafafa;
 }
 
+.subnav .nav {
+  padding-left: 0;
+}
+
 .role-label {
   color: #CCCCCC;
   font-size: 14px;
diff --git a/src/ui_ng/src/app/project/project.component.html b/src/ui_ng/src/app/project/project.component.html
index e2b82e968..ddc4aed0c 100644
--- a/src/ui_ng/src/app/project/project.component.html
+++ b/src/ui_ng/src/app/project/project.component.html
@@ -13,7 +13,7 @@
             </div>
             <div class="option-right">
                 <div class="select" style="float: left;">
-                    <select (change)="doFilterProjects($event)">
+                  <select (change)="doFilterProjects($event)">
                     <option value="0">{{projectTypes[0] | translate}}</option>
                     <option value="1">{{projectTypes[1] | translate}}</option>
                   </select>
diff --git a/src/ui_ng/src/app/replication/replication-management/replication-management.component.css b/src/ui_ng/src/app/replication/replication-management/replication-management.component.css
index 0286e4e83..fd8cfb74e 100644
--- a/src/ui_ng/src/app/replication/replication-management/replication-management.component.css
+++ b/src/ui_ng/src/app/replication/replication-management/replication-management.component.css
@@ -5,4 +5,8 @@
 
 .sub-nav-bg-color {
   background-color: #fafafa;
+}
+
+.subnav .nav {
+  padding-left: 0;
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/app/replication/replication.component.html b/src/ui_ng/src/app/replication/replication.component.html
index ac6a8e8f8..6bb7c5708 100644
--- a/src/ui_ng/src/app/replication/replication.component.html
+++ b/src/ui_ng/src/app/replication/replication.component.html
@@ -1,58 +1,50 @@
 <div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <div class="row flex-items-xs-between">
-            <div class="flex-xs-middle option-left">
-                <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
-                <create-edit-policy [projectId]="projectId" (reload)="reloadPolicies($event)"></create-edit-policy>
-            </div>
-            <div class="flex-xs-middle option-right">
-                <clr-dropdown [clrMenuPosition]="'bottom-left'">
-                    <button class="btn btn-link" clrDropdownToggle>
-              {{currentRuleStatus.description | translate}}
-            <clr-icon shape="caret down"></clr-icon>
-          </button>
-                    <div class="dropdown-menu">
-                        <a href="javascript:void(0)" clrDropdownItem *ngFor="let r of ruleStatus" (click)="doFilterPolicyStatus(r.key)"> {{r.description | translate}}</a>
-                    </div>
-                </clr-dropdown>
-                <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchPolicies($event)" [currentValue]="search.policyName"></grid-filter>
-                <a href="javascript:void(0)" (click)="refreshPolicies()">
-                    <clr-icon shape="refresh"></clr-icon>
-                </a>
-            </div>
-        </div>
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+    <div class="row flex-items-xs-between">
+      <div class="flex-xs-middle option-left">
+        <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
+        <create-edit-policy [projectId]="projectId" (reload)="reloadPolicies($event)"></create-edit-policy>
+      </div>
+      <div class="flex-xs-middle option-right">
+        <div class="select" style="float: left;">
+          <select (change)="doFilterPolicyStatus($event)">
+            <option *ngFor="let r of ruleStatus" value="{{r.key}}">{{r.description | translate}}</option>
+          </select>
+        </div> 
+        <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchPolicies($event)" [currentValue]="search.policyName"></grid-filter>
+        <a href="javascript:void(0)" (click)="refreshPolicies()">
+          <clr-icon shape="refresh"></clr-icon>
+        </a>
+      </div>
+    </div>
     </div>
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <list-policy [policies]="changedPolicies" [projectless]="false" [selectedId]="initSelectedId" (selectOne)="selectOnePolicy($event)" (editOne)="openEditPolicy($event)" (reload)="reloadPolicies($event)"></list-policy>
+      <list-policy [policies]="changedPolicies" [projectless]="false" [selectedId]="initSelectedId" (selectOne)="selectOnePolicy($event)" (editOne)="openEditPolicy($event)" (reload)="reloadPolicies($event)"></list-policy>
     </div>
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <div class="row flex-items-xs-between">
-            <h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5>
-            <div class="flex-items-xs-bottom option-right-down">
-                <button class="btn btn-link" (click)="toggleSearchJobOptionalName(currentJobSearchOption)">{{toggleJobSearchOption[currentJobSearchOption] | translate}}</button>
-                <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_JOBS_PLACEHOLDER" | translate}}' (filter)="doSearchJobs($event)" [currentValue]="search.repoName" ></grid-filter>
-                <a href="javascript:void(0)" (click)="refreshJobs()">
-                    <clr-icon shape="refresh"></clr-icon>
-                </a>
-            </div>
+      <div class="row flex-items-xs-between">
+        <h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5>
+        <div class="flex-items-xs-bottom option-right-down">
+          <button class="btn btn-link" (click)="toggleSearchJobOptionalName(currentJobSearchOption)">{{toggleJobSearchOption[currentJobSearchOption] | translate}}</button>
+          <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_JOBS_PLACEHOLDER" | translate}}' (filter)="doSearchJobs($event)" [currentValue]="search.repoName" ></grid-filter>
+          <a href="javascript:void(0)" (click)="refreshJobs()">
+            <clr-icon shape="refresh"></clr-icon>
+          </a>
         </div>
-        <div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">
-            <clr-dropdown [clrMenuPosition]="'bottom-left'">
-                <button class="btn btn-link" clrDropdownToggle>
-          {{currentJobStatus.description | translate}}
-          <clr-icon shape="caret down"></clr-icon>
-        </button>
-                <div class="dropdown-menu">
-                    <a href="javascript:void(0)" clrDropdownItem *ngFor="let j of jobStatus" (click)="doFilterJobStatus(j.key)"> {{j.description | translate}}</a>
-                </div>
-            </clr-dropdown>
-            <div class="flex-items-xs-middle">
-                <clr-icon shape="date"></clr-icon><input type="date" #fromTime (change)="doJobSearchByStartTime(fromTime.value)">
-                <clr-icon shape="date"></clr-icon><input type="date" #toTime (change)="doJobSearchByEndTime(toTime.value)">
-            </div>
+      </div>
+      <div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">
+        <div class="select" style="float: left;">
+          <select (change)="doFilterJobStatus($event)">
+          <option *ngFor="let j of jobStatus" value="{{j.key}}" [selected]="currentJobStatus.key === j.key">{{j.description | translate}}</option>
+          </select>
         </div>
+        <div class="flex-items-xs-middle">
+          <clr-icon shape="date"></clr-icon><input type="date" #fromTime (change)="doJobSearchByStartTime(fromTime.value)">
+          <clr-icon shape="date"></clr-icon><input type="date" #toTime (change)="doJobSearchByEndTime(toTime.value)">
+        </div>
+      </div>
     </div>
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <list-job [jobs]="changedJobs" [totalPage]="jobsTotalPage" [totalRecordCount]="jobsTotalRecordCount" (paginate)="fetchPolicyJobs($event)"></list-job>
+      <list-job [jobs]="changedJobs" [totalPage]="jobsTotalPage" [totalRecordCount]="jobsTotalRecordCount" (paginate)="fetchPolicyJobs($event)"></list-job>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/replication/replication.component.ts b/src/ui_ng/src/app/replication/replication.component.ts
index 1392332e7..903408c59 100644
--- a/src/ui_ng/src/app/replication/replication.component.ts
+++ b/src/ui_ng/src/app/replication/replication.component.ts
@@ -20,6 +20,7 @@ import { MessageHandlerService } from '../shared/message-handler/message-handler
 
 import { ReplicationService } from './replication.service';
 
+import { SessionUser } from '../shared/session-user';
 import { Policy } from './policy';
 import { Job } from './job';
 import { Target } from './target';
@@ -27,13 +28,13 @@ import { Target } from './target';
 import { State } from 'clarity-angular';
 
 const ruleStatus = [
-  { 'key':  '', 'description': 'REPLICATION.ALL_STATUS'},
+  { 'key': 'all', 'description': 'REPLICATION.ALL_STATUS'},
   { 'key': '1', 'description': 'REPLICATION.ENABLED'},
   { 'key': '0', 'description': 'REPLICATION.DISABLED'}
 ];
 
 const jobStatus = [
-  { 'key': '', 'description': 'REPLICATION.ALL' },
+  { 'key': 'all', 'description': 'REPLICATION.ALL' },
   { 'key': 'pending',  'description': 'REPLICATION.PENDING' },
   { 'key': 'running',  'description': 'REPLICATION.RUNNING' },
   { 'key': 'error',    'description': 'REPLICATION.ERROR' },
@@ -62,7 +63,7 @@ class SearchOption {
   styleUrls: ['./replication.component.css']
 })
 export class ReplicationComponent implements OnInit {
-    
+   
    projectId: number;
 
    search: SearchOption;
@@ -92,7 +93,7 @@ export class ReplicationComponent implements OnInit {
    constructor(
      private messageHandlerService: MessageHandlerService,
      private replicationService: ReplicationService,
-     private route: ActivatedRoute) { 
+     private route: ActivatedRoute) {
    }
 
    ngOnInit(): void {
@@ -171,9 +172,9 @@ export class ReplicationComponent implements OnInit {
      if(policy) {
       this.search.policyId = policy.id;
       this.search.repoName = '';
-      this.search.status = ''
+      this.search.status = '';
       this.currentJobSearchOption = 0;
-      this.currentJobStatus = { 'key': '', 'description': 'REPLICATION.ALL'};
+      this.currentJobStatus = { 'key': 'all', 'description': 'REPLICATION.ALL' };
       this.fetchPolicyJobs();
      }
    }
@@ -183,19 +184,28 @@ export class ReplicationComponent implements OnInit {
      this.retrievePolicies();
    }
 
-   doFilterPolicyStatus(status: string) {
-     this.currentRuleStatus = this.ruleStatus.find(r=>r.key === status);
-     if(status.trim() === '') {
-       this.changedPolicies = this.policies;
-     } else {
-       this.changedPolicies = this.policies.filter(policy=>policy.enabled === +this.currentRuleStatus.key);
+   doFilterPolicyStatus($event: any) {
+     if ($event && $event.target && $event.target["value"]) {
+       let status = $event.target["value"];
+       this.currentRuleStatus = this.ruleStatus.find(r=>r.key === status);
+       if(this.currentRuleStatus.key === 'all') {
+         this.changedPolicies = this.policies;
+       } else {
+         this.changedPolicies = this.policies.filter(policy=>policy.enabled === +this.currentRuleStatus.key);
+       }
      }
    }
 
-   doFilterJobStatus(status: string) {
-     this.currentJobStatus = this.jobStatus.find(r=>r.key === status);
-     this.search.status = status;
-     this.doSearchJobs(this.search.repoName);
+   doFilterJobStatus($event: any) {
+     if ($event && $event.target && $event.target["value"]) {
+       let status = $event.target["value"];
+       this.currentJobStatus = this.jobStatus.find(r=>r.key === status);
+       if(this.currentJobStatus.key === 'all') {
+         status = '';
+       }
+       this.search.status = status;
+       this.doSearchJobs(this.search.repoName);
+     }
    }
 
    doSearchJobs(repoName: string) {