From f590afacd744b3a50dc5ac3869c0ba06763af522 Mon Sep 17 00:00:00 2001
From: Meina Zhou <meinaz@vmware.com>
Date: Fri, 6 Dec 2019 16:09:43 +0800
Subject: [PATCH] Modify some style

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../account-settings-modal.component.html          |  8 ++++----
 .../app/base/global-search/search.component.scss   |  3 +--
 .../base/harbor-shell/harbor-shell.component.html  |  2 +-
 .../config/scanner/config-scanner.component.html   | 10 +++++-----
 .../src/app/global-message/message.component.scss  |  6 +-----
 src/portal/src/app/group/group.component.html      |  8 ++++----
 .../interrogation-services.component.scss          |  4 ----
 src/portal/src/app/license/license.component.html  |  4 +++-
 src/portal/src/app/license/license.component.scss  |  9 ++++++++-
 .../helm-chart-detail/chart-detail.component.scss  |  7 +++++--
 .../chart-detail-summary.component.html            |  4 ++--
 .../chart-detail/chart-detail.component.html       |  4 ++--
 .../helm-chart-version.component.html              |  8 ++++----
 .../list-chart-versions.component.scss             |  7 +++++--
 .../list-charts-detail/helm-chart.component.html   | 12 ++++++------
 .../list-project/list-project.component.html       |  6 +++---
 .../src/app/project/member/member.component.html   |  8 ++++----
 .../project-detail/project-detail.component.html   |  6 +++---
 .../project-detail/project-detail.component.scss   |  5 ++++-
 .../robot-account/robot-account.component.html     |  6 +++---
 .../src/app/project/scanner/scanner.component.html | 10 +++++-----
 .../src/app/project/scanner/scanner.component.scss |  4 ++++
 .../immutable-tag/immutable-tag.component.html     |  6 +++---
 .../tag-retention/tag-retention.component.html     |  4 ++--
 .../tag-detail/tag-detail-page.component.html      |  8 +++++---
 .../tag-detail/tag-detail-page.component.scss      | 12 ++++++++++++
 .../tag-detail/tag-detail-page.component.ts        |  2 +-
 .../tag-repository/tag-repository.component.html   |  5 +++--
 .../tag-repository/tag-repository.component.scss   | 12 ++++++++++--
 .../inline-alert/inline-alert.component.html       |  6 +++---
 .../shared/statictics/statistics.component.scss    |  9 +++++----
 src/portal/src/app/user/user.component.html        | 10 +++++-----
 .../src/lib/components/config/gc/gc.component.html |  4 ++--
 .../project-quotas/project-quotas.component.html   | 14 ++++++++------
 .../project-quotas/project-quotas.component.scss   | 13 +++++++++----
 .../vulnerability-config.component.html            |  4 ++--
 .../create-edit-label.component.html               |  8 ++++----
 .../cron-schedule/cron-schedule.component.html     |  6 +++---
 .../components/endpoint/endpoint.component.html    |  8 ++++----
 .../inline-alert/inline-alert.component.html       |  6 +++---
 .../src/lib/components/label/label.component.html  |  6 +++---
 .../list-replication-rule.component.html           |  8 ++++----
 .../lib/components/log/recent-log.component.html   |  1 +
 .../replication-tasks.component.html               |  4 ++--
 .../replication/replication.component.html         |  2 +-
 .../repository-gridview.component.html             |  6 +++---
 .../repository/repository.component.html           |  4 ++--
 .../src/lib/components/tag/tag.component.html      | 10 +++++-----
 .../result-grid.component.html                     |  2 +-
 src/portal/src/styles.css                          |  8 ++++++--
 50 files changed, 189 insertions(+), 140 deletions(-)
 create mode 100644 src/portal/src/app/repository/tag-detail/tag-detail-page.component.scss

diff --git a/src/portal/src/app/account/account-settings/account-settings-modal.component.html b/src/portal/src/app/account/account-settings/account-settings-modal.component.html
index 51f17be5a..30894863e 100644
--- a/src/portal/src/app/account/account-settings/account-settings-modal.component.html
+++ b/src/portal/src/app/account/account-settings/account-settings-modal.component.html
@@ -10,7 +10,7 @@
                     <input class="clr-input" type="text" name="account_settings_username" [(ngModel)]="account.username"
                         disabled id="account_settings_username" size="30">
                     <div *ngIf="canRename" class="rename-tool">
-                        <button id="rename-btn" [disabled]="RenameOnGoing" (click)="onRename()" class="btn btn-outline btn-sm">
+                        <button id="rename-btn" [disabled]="RenameOnGoing" (click)="onRename()" class="btn btn-outline ">
                             {{'PROFILE.ADMIN_RENAME_BUTTON' | translate}}
                         </button>
                         <clr-tooltip>
@@ -72,10 +72,10 @@
                     [ngModel]="'account.oidc_user_meta.secret'" size="33">
 
                 <button (click)="generateCli(account.user_id)" id="generate-cli-btn"
-                    class="btn btn-outline btn-sm btn-padding-less" *ngIf="showGenerateCli">
+                    class="btn btn-outline  btn-padding-less" *ngIf="showGenerateCli">
                     {{'PROFILE.ADMIN_CIL_SECRET_BUTTON' | translate}}
                 </button>
-                <button (click)="showSecretDetail=true" id="reset-cli-btn" class="btn btn-outline btn-sm btn-padding-less"
+                <button (click)="showSecretDetail=true" id="reset-cli-btn" class="btn btn-outline  btn-padding-less"
                     *ngIf="showGenerateCli">
                     {{'PROFILE.ADMIN_CIL_SECRET_RESET_BUTTON' | translate}}
                 </button>
@@ -123,4 +123,4 @@
         <button type="button" class="btn btn-primary" [disabled]="disableChangeCliSecret()" (click)="resetCliSecret(resetSecretFrom.value.input_secret)">{{'BUTTON.CONFIRM' | translate}}</button>
     </div>
 </clr-modal>
-<confirmation-dialog #confirmationDialog (confirmAction)="confirmGenerate($event)"></confirmation-dialog>
\ No newline at end of file
+<confirmation-dialog #confirmationDialog (confirmAction)="confirmGenerate($event)"></confirmation-dialog>
diff --git a/src/portal/src/app/base/global-search/search.component.scss b/src/portal/src/app/base/global-search/search.component.scss
index 6e207dd69..baa6bbc76 100644
--- a/src/portal/src/app/base/global-search/search.component.scss
+++ b/src/portal/src/app/base/global-search/search.component.scss
@@ -57,7 +57,6 @@
 }
 
 .search::before {
-    position: absolute;
     content: '';
     display: inline-block;
     background: #fafafa;
@@ -74,4 +73,4 @@
 
 #placeholder1 {
     height: 24px;
-}
\ No newline at end of file
+}
diff --git a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
index e156cb66d..5d249e895 100644
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
@@ -79,7 +79,7 @@
             </div>
             <div class="vertical-nav-footer">
                 <a clrVerticalNavLink target="_blank" routerLink="/devcenter">
-                    <button type="button" class="btn btn-sm api-button">
+                    <button type="button" class="btn  api-button">
                         <span>{{'SIDE_NAV.API_EXPLORER' | translate }}</span>
                     </button>
                 </a>
diff --git a/src/portal/src/app/config/scanner/config-scanner.component.html b/src/portal/src/app/config/scanner/config-scanner.component.html
index 123f488b1..ff0097992 100644
--- a/src/portal/src/app/config/scanner/config-scanner.component.html
+++ b/src/portal/src/app/config/scanner/config-scanner.component.html
@@ -12,14 +12,14 @@
             <clr-dg-action-bar>
                 <div class="clr-row">
                     <div class="clr-col-7">
-                        <button type="button" class="btn btn-sm btn-secondary" (click)="addNewScanner()">
+                        <button type="button" class="btn  btn-secondary" (click)="addNewScanner()">
                             <clr-icon shape="plus" size="16"></clr-icon>
                             {{'SCANNER.NEW_SCANNER' | translate}}
                         </button>
                         <button id="set-default"  [disabled]="!(selectedRow && !selectedRow.is_default && !selectedRow.disabled)"
-                                class="btn btn-sm btn-secondary"
+                                class="btn  btn-secondary"
                                 (click)="setAsDefault()">{{'SCANNER.SET_AS_DEFAULT' | translate}}</button>
-                        <clr-dropdown  [clrCloseMenuOnItemClick]="false" class="btn btn-sm btn-link" clrDropdownTrigger>
+                        <clr-dropdown  [clrCloseMenuOnItemClick]="false" class="btn  btn-link" clrDropdownTrigger>
                             <span id="action-scanner">{{'MEMBER.ACTION' | translate}}<clr-icon class="clr-icon" shape="caret down"></clr-icon></span>
                             <clr-dropdown-menu *clrIfOpen>
                                 <button clrDropdownItem
@@ -36,13 +36,13 @@
                                 </button>
                                 <button clrDropdownItem
                                         (click)="editScanner()"
-                                        class="btn btn-sm btn-secondary" [disabled]="!selectedRow">
+                                        class="btn  btn-secondary" [disabled]="!selectedRow">
                                     <clr-icon class="margin-top-0" size="16" shape="pencil"></clr-icon>
                                     <span class="margin-left-10">{{'BUTTON.EDIT' | translate}}</span>
                                 </button>
                                 <button clrDropdownItem
                                         (click)="deleteScanners()"
-                                        class="btn btn-sm btn-secondary" [disabled]="!selectedRow">
+                                        class="btn  btn-secondary" [disabled]="!selectedRow">
                                     <clr-icon class="margin-top-0" size="16" shape="times"></clr-icon>
                                     <span id="delete-scanner-action" class="margin-left-10">{{'BUTTON.DELETE' | translate}}</span>
                                 </button>
diff --git a/src/portal/src/app/global-message/message.component.scss b/src/portal/src/app/global-message/message.component.scss
index 61ec86608..7cd6d90ae 100644
--- a/src/portal/src/app/global-message/message.component.scss
+++ b/src/portal/src/app/global-message/message.component.scss
@@ -1,7 +1,3 @@
-.alert-app-level {
-    margin-bottom:20px;
-}
-
 .alert-style {
     display: inline;
-}
\ No newline at end of file
+}
diff --git a/src/portal/src/app/group/group.component.html b/src/portal/src/app/group/group.component.html
index 1371e3c18..a1e09016d 100644
--- a/src/portal/src/app/group/group.component.html
+++ b/src/portal/src/app/group/group.component.html
@@ -11,11 +11,11 @@
     <div>
       <clr-datagrid [(clrDgSelected)]="selectedGroups" [clrDgLoading]="loading">
         <clr-dg-action-bar >
-            <button type="button" class="btn btn-sm btn-secondary" (click)="addGroup()" [disabled]="!canAddGroup">
+            <button type="button" class="btn  btn-secondary" (click)="addGroup()" [disabled]="!canAddGroup">
               <clr-icon shape="plus" size="15"></clr-icon>&nbsp;{{'GROUP.ADD' | translate}}</button>
-              <button type="button" class="btn btn-sm btn-secondary" (click)="editGroup()" [disabled]="!canEditGroup">
+              <button type="button" class="btn  btn-secondary" (click)="editGroup()" [disabled]="!canEditGroup">
                   <clr-icon shape="pencil" size="15"></clr-icon>&nbsp;{{'GROUP.EDIT' | translate}}</button>
-                  <button type="button" class="btn btn-sm btn-secondary" (click)="openDeleteConfirmationDialog()" [disabled]="!canDeleteGroup">
+                  <button type="button" class="btn  btn-secondary" (click)="openDeleteConfirmationDialog()" [disabled]="!canDeleteGroup">
                       <clr-icon shape="times" size="15"></clr-icon>&nbsp;{{'GROUP.DELETE' | translate}}</button>
         </clr-dg-action-bar>
 
@@ -40,4 +40,4 @@
     </div>
     <hbr-add-group-modal (dataChange)="loadData()"></hbr-add-group-modal>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/app/interrogation-services/interrogation-services.component.scss b/src/portal/src/app/interrogation-services/interrogation-services.component.scss
index 3d5e2656f..83e28b6be 100644
--- a/src/portal/src/app/interrogation-services/interrogation-services.component.scss
+++ b/src/portal/src/app/interrogation-services/interrogation-services.component.scss
@@ -3,10 +3,6 @@
   margin-bottom: 12px;
 }
 
-.sub-nav-bg-color {
-  background-color: #fafafa;
-}
-
 .subnav {
   .nav {
     padding-left: 0;
diff --git a/src/portal/src/app/license/license.component.html b/src/portal/src/app/license/license.component.html
index caa00cb9e..9c7c49734 100644
--- a/src/portal/src/app/license/license.component.html
+++ b/src/portal/src/app/license/license.component.html
@@ -1 +1,3 @@
-<div class="license" >{{licenseContent}}</div>
+<div class="overflow-y-scroll">
+    <div class="license" >{{licenseContent}}</div>
+</div>
diff --git a/src/portal/src/app/license/license.component.scss b/src/portal/src/app/license/license.component.scss
index 6d00fe18b..b302ce0c9 100644
--- a/src/portal/src/app/license/license.component.scss
+++ b/src/portal/src/app/license/license.component.scss
@@ -5,4 +5,11 @@
   white-space: pre-wrap;
   margin: 1em 0px;
   font-size: 1rem;
-}
\ No newline at end of file
+}
+
+.overflow-y-scroll {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  overflow-y: auto;
+}
diff --git a/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail.component.scss b/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail.component.scss
index 2f55847e7..cced76626 100644
--- a/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail.component.scss
+++ b/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail.component.scss
@@ -2,5 +2,8 @@
     text-decoration: none;
     cursor: pointer;
     color: #007cbb;
-    font-size: 12px;
-}
\ No newline at end of file
+    font-size: 16px;
+}
+.breadcrumb {
+    margin-bottom: 0.5rem;
+}
diff --git a/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-summary.component.html b/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-summary.component.html
index b1e934207..254096d30 100644
--- a/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-summary.component.html
+++ b/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-summary.component.html
@@ -4,7 +4,7 @@
     </div>
 </div>
 <div class="row content-wrapper">
-    <div class="col-md-8 md-container">
+    <div class="col-md-8 md-container pl-1">
         <div *ngIf="readme" class="md-div" [innerHTML]="readme | markdown"></div>
         <div *ngIf="!readme">{{'HELM_CHART.NO_README' | translate}}</div>
     </div>
@@ -142,4 +142,4 @@
         </div>
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail.component.html b/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail.component.html
index f2f9c4508..810f29df5 100644
--- a/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail.component.html
+++ b/src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail.component.html
@@ -9,7 +9,7 @@
             </div>
         </div>
         <div>
-            <button class="btn btn-sm btn-secondary"
+            <button class="btn  btn-secondary"
             (click)="downloadChart()">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
         </div>
     </div>
@@ -52,4 +52,4 @@
         <h6>{{'HELM_CHART.NO_DETAIL' | translate }}</h6>
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.html b/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.html
index 9bfaaa8c2..b8dbf4b39 100644
--- a/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.html
+++ b/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.html
@@ -37,18 +37,18 @@
         <div *ngIf="!isCardView" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <clr-datagrid (clrDgRefresh)="refresh()" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRows">
                 <clr-dg-action-bar>
-                    <button type="button" class="btn btn-sm btn-secondary"
+                    <button type="button" class="btn  btn-secondary"
                         [disabled]="!(selectedRows.length===1) || !hasDownloadHelmChartVersionPermission"
                         (click)="versionDownload()">
                         <clr-icon shape="download" size="16"></clr-icon>&nbsp;{{'HELM_CHART.DOWNLOAD' | translate}}
                     </button>
-                    <button type="button" class="btn btn-sm btn-secondary"
+                    <button type="button" class="btn  btn-secondary"
                         [disabled]="selectedRows.length<=0 || !hasDeleteHelmChartVersionPermission"
                         (click)="openVersionDeleteModal()">
                         <clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'BUTTON.DELETE' | translate}}
                     </button>
                     <clr-dropdown>
-                        <button type="button" class="btn btn-sm btn-secondary" clrDropdownTrigger
+                        <button type="button" class="btn  btn-secondary" clrDropdownTrigger
                             [disabled]="!(selectedRows.length===1)|| !hasAddRemoveHelmChartVersionPermission">
                             <clr-icon shape="plus" size="16"></clr-icon>{{'REPOSITORY.ADD_LABELS' | translate}}
                         </button>
@@ -156,4 +156,4 @@
         </div>
     </div>
     <confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/app/project/helm-chart/list-chart-versions/list-chart-versions.component.scss b/src/portal/src/app/project/helm-chart/list-chart-versions/list-chart-versions.component.scss
index 2f55847e7..cced76626 100644
--- a/src/portal/src/app/project/helm-chart/list-chart-versions/list-chart-versions.component.scss
+++ b/src/portal/src/app/project/helm-chart/list-chart-versions/list-chart-versions.component.scss
@@ -2,5 +2,8 @@
     text-decoration: none;
     cursor: pointer;
     color: #007cbb;
-    font-size: 12px;
-}
\ No newline at end of file
+    font-size: 16px;
+}
+.breadcrumb {
+    margin-bottom: 0.5rem;
+}
diff --git a/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.html b/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.html
index 56f714860..22c1f8205 100644
--- a/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.html
+++ b/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.html
@@ -23,15 +23,15 @@
         <div *ngIf="!isCardView" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <clr-datagrid (clrDgRefresh)="refresh()" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRows">
                 <clr-dg-action-bar>
-                    <button type="button" id="helm-chart-upload" class="btn btn-sm btn-secondary"
+                    <button type="button" id="helm-chart-upload" class="btn  btn-secondary"
                         [disabled]="!hasUploadHelmChartsPermission" (click)="onChartUpload()">
                         <clr-icon shape="upload" size="16"></clr-icon>{{'HELM_CHART.UPLOAD' | translate}}
                     </button>
-                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="!hasDeleteHelmChartsPermission || selectedRows.length<1"
+                    <button type="button" class="btn  btn-secondary" [disabled]="!hasDeleteHelmChartsPermission || selectedRows.length<1"
                         (click)="openChartDeleteModal()">
                         <clr-icon shape="trash" size="16"></clr-icon>{{'BUTTON.DELETE' | translate}}
                     </button>
-                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="!hasDownloadHelmChartsPermission ||selectedRows.length!==1"
+                    <button type="button" class="btn  btn-secondary" [disabled]="!hasDownloadHelmChartsPermission ||selectedRows.length!==1"
                         (click)="downloadLatestVersion()">
                         <clr-icon shape="download" size="16"></clr-icon>{{'HELM_CHART.DOWNLOAD' | translate}}
                     </button>
@@ -103,7 +103,7 @@
                     <div class="clr-input-wrapper">
                         <input class="filename-input clr-input" type="text" placeholder="{{this.chartFile?.name || 'BUTTON.NO_FILE' | translate}}"
                             disabled>
-                        <label for="chart" class="btn btn-secondary btn-sm file-browser-btn">{{'BUTTON.BROWSE' | translate}}
+                        <label for="chart" class="btn btn-secondary  file-browser-btn">{{'BUTTON.BROWSE' | translate}}
                         </label>
                         <input class="file-input" type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
                     </div>
@@ -113,7 +113,7 @@
                     <div class="clr-input-wrapper">
                         <input class="filename-input clr-input" type="text" placeholder="{{this.provFile?.name || 'BUTTON.NO_FILE' | translate}}"
                             disabled>
-                        <label for="prov" class="btn btn-secondary btn-sm file-browser-btn">{{'BUTTON.BROWSE' | translate}}
+                        <label for="prov" class="btn btn-secondary  file-browser-btn">{{'BUTTON.BROWSE' | translate}}
                         </label>
                         <input class="file-input" type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
                     </div>
@@ -132,4 +132,4 @@
             </button>
         </div>
     </clr-modal>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/app/project/list-project/list-project.component.html b/src/portal/src/app/project/list-project/list-project.component.html
index 08d45720b..a2c3acff3 100644
--- a/src/portal/src/app/project/list-project/list-project.component.html
+++ b/src/portal/src/app/project/list-project/list-project.component.html
@@ -1,8 +1,8 @@
 <clr-datagrid (clrDgRefresh)="clrLoad($event)" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRow">
     <clr-dg-action-bar>
-        <button type="button" class="btn btn-sm btn-secondary" (click)="addNewProject()" *ngIf="projectCreationRestriction">
+        <button type="button" class="btn  btn-secondary" (click)="addNewProject()" *ngIf="projectCreationRestriction">
             <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'PROJECT.NEW_PROJECT' | translate}}</button>
-        <button id="delete-project" type="button" class="btn btn-sm btn-secondary" [disabled]="!canDelete"
+        <button id="delete-project" type="button" class="btn  btn-secondary" [disabled]="!canDelete"
             (click)="deleteProjects(selectedRow)">
             <clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'PROJECT.DELETE' | translate}}</button>
     </clr-dg-action-bar>
@@ -27,4 +27,4 @@
         }} {{'PROJECT.ITEMS' | translate}}
         <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
     </clr-dg-footer>
-</clr-datagrid>
\ No newline at end of file
+</clr-datagrid>
diff --git a/src/portal/src/app/project/member/member.component.html b/src/portal/src/app/project/member/member.component.html
index 3d67d57a8..b718ab5ac 100644
--- a/src/portal/src/app/project/member/member.component.html
+++ b/src/portal/src/app/project/member/member.component.html
@@ -13,13 +13,13 @@
     </div>
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <clr-dg-action-bar>
-            <button class="btn btn-sm btn-secondary" (click)="openAddMemberModal()" [disabled]="!hasCreateMemberPermission">
+            <button class="btn  btn-secondary" (click)="openAddMemberModal()" [disabled]="!hasCreateMemberPermission">
                 <span><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'MEMBER.USER' | translate }}</span>
             </button>
-            <button class="btn btn-sm btn-secondary" (click)="openAddGroupModal()" [disabled]="!hasCreateMemberPermission || !(isLdapMode || isHttpAuthMode || isOidcMode)">
+            <button class="btn  btn-secondary" (click)="openAddGroupModal()" [disabled]="!hasCreateMemberPermission || !(isLdapMode || isHttpAuthMode || isOidcMode)">
                 <span><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'MEMBER.LDAP_GROUP' | translate}}</span>
             </button>
-            <clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn btn-sm btn-link" clrDropdownTrigger>
+            <clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn  btn-link" clrDropdownTrigger>
                 <span id='member-action'>{{'MEMBER.ACTION' | translate}}<clr-icon shape="caret down"></clr-icon></span>
                 <clr-dropdown-menu *clrIfOpen>
                     <label class="dropdown-header">{{'MEMBER.SET_ROLE' | translate}}</label>
@@ -55,4 +55,4 @@
     <add-member [projectId]="projectId" [memberList]="members" (added)="addedMember($event)"></add-member>
     <add-group [projectId]="projectId" [memberList]="members" (added)="addedGroup($event)"></add-group>
     <add-http-auth-group [projectId]="projectId" (added)="addedGroup($event)"></add-http-auth-group>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/app/project/project-detail/project-detail.component.html b/src/portal/src/app/project/project-detail/project-detail.component.html
index 05374f69f..69b5bd842 100644
--- a/src/portal/src/app/project/project-detail/project-detail.component.html
+++ b/src/portal/src/app/project/project-detail/project-detail.component.html
@@ -1,5 +1,5 @@
-<a *ngIf="hasSignedIn" (click)="backToProject()" class="backStyle">&lt; {{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
-<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']">&lt; {{'SEARCH.BACK' | translate}}</a>
+<a *ngIf="hasSignedIn" (click)="backToProject()" class="backStyle"> {{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
+<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']"> {{'SEARCH.BACK' | translate}}</a>
 
 <h1 class="custom-h2" sub-header-title>{{currentProject.name}} <span class="role-label"
         *ngIf="isMember">{{roleName | translate}}</span></h1>
@@ -15,4 +15,4 @@
     </ng-container>
 </clr-tabs>
 
-<router-outlet></router-outlet>
\ No newline at end of file
+<router-outlet></router-outlet>
diff --git a/src/portal/src/app/project/project-detail/project-detail.component.scss b/src/portal/src/app/project/project-detail/project-detail.component.scss
index a1d16063e..bd91fe14d 100644
--- a/src/portal/src/app/project/project-detail/project-detail.component.scss
+++ b/src/portal/src/app/project/project-detail/project-detail.component.scss
@@ -19,8 +19,11 @@
 }
 .backStyle {
   color: #007cbb;
-  font-size: 12px;
+  font-size: 16px;
   cursor: pointer;
+  background: #fafafa;
+  padding: 5px;
+  border-radius: 2px;
 }
 
 button {
diff --git a/src/portal/src/app/project/robot-account/robot-account.component.html b/src/portal/src/app/project/robot-account/robot-account.component.html
index b371268de..86662c32c 100644
--- a/src/portal/src/app/project/robot-account/robot-account.component.html
+++ b/src/portal/src/app/project/robot-account/robot-account.component.html
@@ -14,13 +14,13 @@
   </div>
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <clr-dg-action-bar>
-      <button class="btn btn-sm btn-secondary" [disabled]="!hasRobotCreatePermission" (click)="openAddRobotModal()">
+      <button class="btn  btn-secondary" [disabled]="!hasRobotCreatePermission" (click)="openAddRobotModal()">
         <span>
           <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'ROBOT_ACCOUNT.NEW_ROBOT_ACCOUNT'
           | translate }}
         </span>
       </button>
-      <clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn btn-sm
+      <clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn
         btn-link" clrDropdownTrigger>
         <span>{{'MEMBER.ACTION' | translate}}<clr-icon shape="caret
             down"></clr-icon></span>
@@ -67,4 +67,4 @@
     </clr-datagrid>
   </div>
   <add-robot [projectId]="projectId" [projectName]="projectName" (create)="createAccount($event)"></add-robot>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/app/project/scanner/scanner.component.html b/src/portal/src/app/project/scanner/scanner.component.html
index 3292c5abc..100850c77 100644
--- a/src/portal/src/app/project/scanner/scanner.component.html
+++ b/src/portal/src/app/project/scanner/scanner.component.html
@@ -3,21 +3,21 @@
 </div>
 <div *ngIf="!loading" class="clr-form clr-form-horizontal">
     <div class="clr-form-control">
-        <label class="clr-control-label name">{{'SCANNER.SCANNER' | translate}}</label>
+        <label *ngIf="!scanner" class="clr-control-label name">{{'SCANNER.SCANNER' | translate}}</label>
         <div class="clr-control-container">
-            <button *ngIf="(!scanner) && hasCreatePermission && scanners && scanners.length > 0" id="edit-scanner-copy" class="btn btn-primary btn-sm" (click)="open()">{{'SCANNER.EDIT' | translate}}</button>
+            <button *ngIf="(!scanner) && hasCreatePermission && scanners && scanners.length > 0" id="edit-scanner-copy" class="btn btn-primary " (click)="open()">{{'SCANNER.EDIT' | translate}}</button>
             <label *ngIf="(!scanner) && hasCreatePermission && !(scanners && scanners.length > 0)" class="name">{{'SCANNER.NOT_AVAILABLE' | translate}}</label>
             <label *ngIf="(!scanner) && !hasCreatePermission" class="name">{{'SCANNER.NO_PROJECT_SCANNER' | translate}}</label>
         </div>
     </div>
     <ng-container *ngIf="scanner">
         <div class="clr-form-control">
-            <label for="select-full" class="clr-control-label">{{'SCANNER.NAME' | translate}}</label>
+            <label for="select-full" class="clr-control-label name">{{'SCANNER.NAME' | translate}}</label>
             <div class="clr-control-container">
                 <div class="clr-input-wrapper">
-                    <div class="clr-input-wrapper">
+                    <div class="clr-input-wrapper name">
                         <span id="scanner-name" class="scanner-name">{{scanner?.name}}</span>
-                        <button *ngIf="hasCreatePermission && scanners && scanners.length > 0" id="edit-scanner" class="btn btn-primary btn-sm" (click)="open()">{{'SCANNER.EDIT' | translate}}</button>
+                        <button *ngIf="hasCreatePermission && scanners && scanners.length > 0" id="edit-scanner" class="btn btn-primary " (click)="open()">{{'SCANNER.EDIT' | translate}}</button>
                         <span *ngIf="scanner?.disabled" class="label label-warning ml-1">{{'SCANNER.DISABLED' | translate}}</span>
                         <span *ngIf="scanner?.health === 'unhealthy'" class="label label-danger ml-1">{{'SCANNER.UNHEALTHY' | translate}}</span>
                         <span *ngIf="scanner?.health === 'healthy'" class="label label-success ml-1">{{'SCANNER.HEALTHY' | translate}}</span>
diff --git a/src/portal/src/app/project/scanner/scanner.component.scss b/src/portal/src/app/project/scanner/scanner.component.scss
index c2f5a0d72..c27d8e614 100644
--- a/src/portal/src/app/project/scanner/scanner.component.scss
+++ b/src/portal/src/app/project/scanner/scanner.component.scss
@@ -21,3 +21,7 @@
 .clr-form-control {
   margin-top: 0.75rem !important;
 }
+.name {
+  height: 1.75rem;
+  line-height: 1.75rem;
+}
diff --git a/src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.html b/src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.html
index 7788317db..c207d0f82 100644
--- a/src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.html
+++ b/src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.html
@@ -11,7 +11,7 @@
                 <div class="clr-row">
                     <div class="clr-col-2 flex-150">
                         <div class="dropdown" [ngClass]="{open:ruleIndex===i}">
-                            <button (click)="openEditor(i)" id="{{'action'+i}}" class="dropdown-toggle btn btn-link btn-sm">
+                            <button (click)="openEditor(i)" id="{{'action'+i}}" class="dropdown-toggle btn btn-sm btn-link ">
                                 {{'IMMUTABLE_TAG.ACTION' | translate}}
                                 <clr-icon shape="caret down"></clr-icon>
                             </button>
@@ -50,7 +50,7 @@
         <div class="v-center clr-row" [ngClass]="{'pt-1':rules?.length > 0}">
             <div class="clr-col-2 flex-150"></div>
             <div class="add-rule-btn">
-                <button [disabled]="rules?.length >= 15" id="add-rule" class="btn btn-primary btn-sm" (click)="openAddRule()">{{'IMMUTABLE_TAG.ADD_RULE' | translate}}</button>
+                <button [disabled]="rules?.length >= 15" id="add-rule" class="btn btn-primary " (click)="openAddRule()">{{'IMMUTABLE_TAG.ADD_RULE' | translate}}</button>
             </div>
             <div class="clr-col-6 color-97 font-size-54">
                 {{'IMMUTABLE_TAG.ADD_RULE_HELP_1' | translate}}
@@ -60,4 +60,4 @@
 </div>
 
 <app-add-rule #addRule [rules]="rules" [projectId]="projectId" (clickAdd)="clickAdd($event)"></app-add-rule>
-<div class="backdrop-transparent" (click)="ruleIndex = -1" *ngIf="ruleIndex !== -1"></div>
\ No newline at end of file
+<div class="backdrop-transparent" (click)="ruleIndex = -1" *ngIf="ruleIndex !== -1"></div>
diff --git a/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html b/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html
index 5fc27a1f0..1ab3e1107 100644
--- a/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html
+++ b/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html
@@ -12,7 +12,7 @@
                 <div class="clr-row">
                     <div class="clr-col-2 flex-150">
                         <div class="dropdown" [ngClass]="{open:ruleIndex===i}">
-                            <button (click)="openEditor(i)" class="padding-left-0 dropdown-toggle btn btn-link btn-sm">
+                            <button (click)="openEditor(i)" class="padding-left-0 dropdown-toggle btn btn-sm btn-link ">
                                 {{'TAG_RETENTION.ACTION' | translate}}
                                 <clr-icon shape="caret down"></clr-icon>
                             </button>
@@ -58,7 +58,7 @@
         <div class="v-center clr-row" [ngClass]="{'pt-1':retention?.rules?.length > 0}">
             <div class="clr-col-2 flex-150"></div>
             <div class="flex-8p">
-                <button id="add-rule" [disabled]="retention?.rules?.length >= 15" class="btn btn-primary btn-sm" (click)="openAddRule()">{{'TAG_RETENTION.ADD_RULE' | translate}}</button>
+                <button id="add-rule" [disabled]="retention?.rules?.length >= 15" class="btn btn-primary " (click)="openAddRule()">{{'TAG_RETENTION.ADD_RULE' | translate}}</button>
             </div>
             <div class="clr-col-6 color-97 font-size-54">
                 {{'TAG_RETENTION.ADD_RULE_HELP_1' | translate}}
diff --git a/src/portal/src/app/repository/tag-detail/tag-detail-page.component.html b/src/portal/src/app/repository/tag-detail/tag-detail-page.component.html
index 0e46a7c50..f1f769562 100644
--- a/src/portal/src/app/repository/tag-detail/tag-detail-page.component.html
+++ b/src/portal/src/app/repository/tag-detail/tag-detail-page.component.html
@@ -1,8 +1,10 @@
 <div>
     <div class="arrow-block" *ngIf="!withAdmiral">
-        <a (click)="goBackPro()">< {{'SIDE_NAV.PROJECTS'| translate}}</a>
-        <a (click)="goBackRep()">< {{'REPOSITORY.REPOSITORIES'| translate}}</a>
-        <a (click)="goBack(repositoryId)">< {{repositoryId}}</a>
+        <a (click)="goBackPro()">{{'SIDE_NAV.PROJECTS'| translate}}</a>
+        <span class="back-icon"><</span>
+        <a (click)="goBackRep()">{{'REPOSITORY.REPOSITORIES'| translate}}</a>
+        <span class="back-icon"><</span>
+        <a (click)="goBack(repositoryId)">{{repositoryId}}</a>
     </div>
     <hbr-tag-detail (backEvt)="goBack($event)" 
     [tagId]="tagId"
diff --git a/src/portal/src/app/repository/tag-detail/tag-detail-page.component.scss b/src/portal/src/app/repository/tag-detail/tag-detail-page.component.scss
new file mode 100644
index 000000000..ee9c1dfba
--- /dev/null
+++ b/src/portal/src/app/repository/tag-detail/tag-detail-page.component.scss
@@ -0,0 +1,12 @@
+.arrow-block a{
+  cursor: pointer;
+  color: #007cbb;
+  font-size: 16px;
+  background: #fafafa;
+  padding: 5px;
+  border-radius: 2px;
+  margin-right: 5px;
+}
+.back-icon {
+    color: gray;
+}
diff --git a/src/portal/src/app/repository/tag-detail/tag-detail-page.component.ts b/src/portal/src/app/repository/tag-detail/tag-detail-page.component.ts
index 7a5d1c6a8..30d884428 100644
--- a/src/portal/src/app/repository/tag-detail/tag-detail-page.component.ts
+++ b/src/portal/src/app/repository/tag-detail/tag-detail-page.component.ts
@@ -19,7 +19,7 @@ import { SessionService } from '../../shared/session.service';
 @Component({
   selector: 'repository',
   templateUrl: 'tag-detail-page.component.html',
-  styles: ['.arrow-block a{text-decoration: none; cursor: pointer; cursor: pointer; color: #007cbb; font-size: 12px;}']
+  styleUrls: ["tag-detail-page.component.scss"]
 })
 export class TagDetailPageComponent implements OnInit {
   tagId: string;
diff --git a/src/portal/src/app/repository/tag-repository/tag-repository.component.html b/src/portal/src/app/repository/tag-repository/tag-repository.component.html
index 7c6c94c73..dc3a049d0 100644
--- a/src/portal/src/app/repository/tag-repository/tag-repository.component.html
+++ b/src/portal/src/app/repository/tag-repository/tag-repository.component.html
@@ -1,9 +1,10 @@
 <div>
     <div class="breadcrumb" *ngIf="!withAdmiral">
         <a (click)="goProBack()">{{'SIDE_NAV.PROJECTS'| translate}}</a>
-        <a (click)="watchGoBackEvt(projectId)">&lt; {{'REPOSITORY.REPOSITORIES'| translate}}</a>
+        <span class="back-icon"><</span>
+        <a (click)="watchGoBackEvt(projectId)">{{'REPOSITORY.REPOSITORIES'| translate}}</a>
     </div>
     <hbr-repository [repoName]="repoName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole"
                     [projectId]="projectId" [memberRoleID]="projectMemberRoleId" [isGuest]="isGuest"
                     (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="watchGoBackEvt($event)"></hbr-repository>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/app/repository/tag-repository/tag-repository.component.scss b/src/portal/src/app/repository/tag-repository/tag-repository.component.scss
index 2f55847e7..47b02bae0 100644
--- a/src/portal/src/app/repository/tag-repository/tag-repository.component.scss
+++ b/src/portal/src/app/repository/tag-repository/tag-repository.component.scss
@@ -2,5 +2,13 @@
     text-decoration: none;
     cursor: pointer;
     color: #007cbb;
-    font-size: 12px;
-}
\ No newline at end of file
+    font-size: 16px;
+    background: #fafafa;
+    padding: 5px;
+    border-radius: 2px;
+    margin-right: 5px;
+}
+
+.back-icon {
+    color: gray;
+}
diff --git a/src/portal/src/app/shared/inline-alert/inline-alert.component.html b/src/portal/src/app/shared/inline-alert/inline-alert.component.html
index 668e5392d..487f69d2f 100644
--- a/src/portal/src/app/shared/inline-alert/inline-alert.component.html
+++ b/src/portal/src/app/shared/inline-alert/inline-alert.component.html
@@ -4,8 +4,8 @@
             {{errorMessage}}
         </span>
         <div class="alert-actions" *ngIf="showCancelAction">
-            <button class="btn btn-sm btn-link alert-btn-link" (click)="close()">{{'BUTTON.NO' | translate}}</button>
-            <button class="btn btn-sm btn-link alert-btn-link" (click)="confirmCancel()">{{'BUTTON.YES' | translate}}</button>
+            <button class="btn  btn-link alert-btn-link" (click)="close()">{{'BUTTON.NO' | translate}}</button>
+            <button class="btn  btn-link alert-btn-link" (click)="confirmCancel()">{{'BUTTON.YES' | translate}}</button>
         </div>
     </div>
-</clr-alert>
\ No newline at end of file
+</clr-alert>
diff --git a/src/portal/src/app/shared/statictics/statistics.component.scss b/src/portal/src/app/shared/statictics/statistics.component.scss
index b11060943..cefb81174 100644
--- a/src/portal/src/app/shared/statictics/statistics.component.scss
+++ b/src/portal/src/app/shared/statictics/statistics.component.scss
@@ -8,15 +8,16 @@
 }
 
 .statistic-data {
-    font-size: 16px;
+    font-size: 24px;
     font-weight: 600;
     font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
-    line-height: 16px;
+    line-height: 24px;
+    margin-right: 10px;
 }
 
 .statistic-text {
-    font-size: 10px;
-    line-height: 10px;
+    font-size: 14px;
+    line-height: 14px;
     text-transform: uppercase;
     font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
 }
diff --git a/src/portal/src/app/user/user.component.html b/src/portal/src/app/user/user.component.html
index b9b567134..ed72c544c 100644
--- a/src/portal/src/app/user/user.component.html
+++ b/src/portal/src/app/user/user.component.html
@@ -11,15 +11,15 @@
         <div>
             <clr-datagrid (clrDgRefresh)="load($event)" [clrDgLoading]="inProgress"  [(clrDgSelected)]="selectedRow">
                 <clr-dg-action-bar>
-                    <button type="button" class="btn btn-sm btn-secondary" (click)="addNewUser()" [disabled]="!canCreateUser"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'USER.ADD_ACTION' | translate}}</button>
-                    <button type="button" class="btn btn-sm btn-secondary" id="set-admin" [disabled]="!ifSameRole" (click)="changeAdminRole()" ><clr-icon shape="wrench" size="16"></clr-icon>&nbsp;{{ISADMNISTRATOR  | translate}}</button>
-                    <clr-dropdown  [clrCloseMenuOnItemClick]="false" class="btn btn-sm btn-link" clrDropdownTrigger>
+                    <button type="button" class="btn  btn-secondary" (click)="addNewUser()" [disabled]="!canCreateUser"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'USER.ADD_ACTION' | translate}}</button>
+                    <button type="button" class="btn  btn-secondary" id="set-admin" [disabled]="!ifSameRole" (click)="changeAdminRole()" ><clr-icon shape="wrench" size="16"></clr-icon>&nbsp;{{ISADMNISTRATOR  | translate}}</button>
+                    <clr-dropdown  [clrCloseMenuOnItemClick]="false" class="btn  btn-link" clrDropdownTrigger>
                         <span id='member-action'>{{'BUTTON.ACTIONS' | translate}}<clr-icon shape="caret down"></clr-icon></span>
                         <clr-dropdown-menu *clrIfOpen>
                             <clr-dropdown>
-                                <button type="button" class="btn btn-sm btn-secondary" id="changePwd" [hidden]="!canCreateUser" [disabled]="!(selectedRow.length==1)" (click)="openChangePwdModal()" ><clr-icon shape="edit" size="16"></clr-icon>&nbsp;{{'RESET_PWD.TITLE'  | translate}}</button>
+                                <button type="button" class="btn  btn-secondary" id="changePwd" [hidden]="!canCreateUser" [disabled]="!(selectedRow.length==1)" (click)="openChangePwdModal()" ><clr-icon shape="edit" size="16"></clr-icon>&nbsp;{{'RESET_PWD.TITLE'  | translate}}</button>
                                 <div class="dropdown-divider"></div>
-                                <button id="deleteUser" type="button" class="btn btn-sm btn-secondary"
+                                <button id="deleteUser" type="button" class="btn  btn-secondary"
                                     (click)="deleteUsers(selectedRow)"
                                     [disabled]="!selectedRow.length || onlySelf || !canCreateUser">
                                     <clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'USER.DEL_ACTION' | translate}}
diff --git a/src/portal/src/lib/components/config/gc/gc.component.html b/src/portal/src/lib/components/config/gc/gc.component.html
index d1218b386..a86edd8fe 100644
--- a/src/portal/src/lib/components/config/gc/gc.component.html
+++ b/src/portal/src/lib/components/config/gc/gc.component.html
@@ -1,4 +1,4 @@
 <div class="cron-selection">
   <cron-selection [labelCurrent]="getLabelCurrent" #CronScheduleComponent [labelEdit]='getText' [originCron]='originCron' (inputvalue)="scheduleGc($event)"></cron-selection>
-  <button class="btn btn-outline btn-sm gc-start-btn" (click)="gcNow()" [disabled]="disableGC">{{'GC.GC_NOW' | translate}}</button>
-</div>
\ No newline at end of file
+  <button class="btn btn-outline  gc-start-btn" (click)="gcNow()" [disabled]="disableGC">{{'GC.GC_NOW' | translate}}</button>
+</div>
diff --git a/src/portal/src/lib/components/config/project-quotas/project-quotas.component.html b/src/portal/src/lib/components/config/project-quotas/project-quotas.component.html
index 25c8d2a84..64b175c93 100644
--- a/src/portal/src/lib/components/config/project-quotas/project-quotas.component.html
+++ b/src/portal/src/lib/components/config/project-quotas/project-quotas.component.html
@@ -3,16 +3,18 @@
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quota-top">
             <div class="default-quota">
                 <div>
-                    <div class="default-quota-text"><span class="width-10rem">{{'QUOTA.PROJECT_QUOTA_DEFAULT_ARTIFACT' | translate}}</span><span
-                            class="num-count">{{ quotaHardLimitValue?.countLimit === -1? ('QUOTA.UNLIMITED'| translate): quotaHardLimitValue?.countLimit }}</span>
+                    <div class="default-quota-text">
+                        <span class="width-10rem">{{'QUOTA.PROJECT_QUOTA_DEFAULT_ARTIFACT' | translate}}</span>
+                        <span class="num-count">{{ quotaHardLimitValue?.countLimit === -1 ? ('QUOTA.UNLIMITED'| translate) : quotaHardLimitValue?.countLimit }}</span>
+                        <button class="btn btn-link btn-sm  default-quota-edit-button"
+                    (click)="editDefaultQuota(quotaHardLimitValue)">{{'QUOTA.EDIT' | translate}}</button>
                     </div>
-                    <div class="default-quota-text"><span class="width-10rem">{{'QUOTA.PROJECT_QUOTA_DEFAULT_DISK' | translate}}</span><span class="num-count">
-                            {{ quotaHardLimitValue?.storageLimit === -1?('QUOTA.UNLIMITED' | translate): getIntegerAndUnit(quotaHardLimitValue?.storageLimit, 0).partNumberHard}}
+                    <div class="default-quota-text">
+                        <span class="width-10rem">{{'QUOTA.PROJECT_QUOTA_DEFAULT_DISK' | translate}}</span>
+                        <span class="num-count">{{ quotaHardLimitValue?.storageLimit === -1?('QUOTA.UNLIMITED' | translate): getIntegerAndUnit(quotaHardLimitValue?.storageLimit, 0).partNumberHard}}
                             {{ quotaHardLimitValue?.storageLimit === -1?'':quotaHardLimitValue?.storageUnit }}</span>
                     </div>
                 </div>
-                <button class="btn btn-link btn-sm default-quota-edit-button pt-0 mt-0 pl-0"
-                    (click)="editDefaultQuota(quotaHardLimitValue)">{{'QUOTA.EDIT' | translate}}</button>
             </div>
             <div class="refresh-div mr-1">
                 <span class="refresh-btn" (click)="refresh()">
diff --git a/src/portal/src/lib/components/config/project-quotas/project-quotas.component.scss b/src/portal/src/lib/components/config/project-quotas/project-quotas.component.scss
index 610977482..b55d953df 100644
--- a/src/portal/src/lib/components/config/project-quotas/project-quotas.component.scss
+++ b/src/portal/src/lib/components/config/project-quotas/project-quotas.component.scss
@@ -3,13 +3,18 @@
 
   .default-quota-text {
     display: flex;
+    align-items: center;
+    text-transform: uppercase;
+    font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
     .width-10rem {
-      width: 10.3rem;
+      width: 15rem;
     }
 
     .num-count {
       display: inline-block;
       min-width: 2rem;
+      font-weight: 600;
+      font-size: 18px;
     }
   }
 }
@@ -33,8 +38,8 @@
 }
 
 .default-quota-edit-button {
-  height: 1rem;
-  font-size: 12px;
+  font-size: 14px;
+  margin-left: 60px;
 }
 
 .min-label-width {
@@ -70,4 +75,4 @@
       height: 75%;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.html b/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.html
index 1b0d3b20d..7843b9ca9 100644
--- a/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.html
+++ b/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.html
@@ -6,14 +6,14 @@
          <span>{{ updatedTimeStr }} </span>
      </div>
     <div class="button-group">
-        <cron-selection [disabled]="!hasDefaultScanner" [labelCurrent]="getLabelCurrent" [labelEdit]='getLabelCurrent'
+        <cron-selection [buttonMarginLeft]="'200px'" [disabled]="!hasDefaultScanner" [labelCurrent]="getLabelCurrent" [labelEdit]='getLabelCurrent'
                         [originCron]='originCron' (inputvalue)="saveSchedule($event)"></cron-selection>
     </div>
 </section>
     <div class="clr-row">
     <div class="clr-col-2 flex-200">
         <div class="btn-scan-right btn-scan margin-top-16px">
-            <button id="scan-now" class="btn btn-outline btn-sm btn-scan" (click)="scanNow()"
+            <button id="scan-now" class="btn btn-outline  btn-scan" (click)="scanNow()"
                     [disabled]="!scanAvailable">
                 <span *ngIf="scanAvailable">{{ 'CONFIG.SCANNING.SCAN_NOW' | translate }}</span>
                 <span *ngIf="!scanAvailable">{{ 'CONFIG.SCANNING.SCAN' | translate }}</span>
diff --git a/src/portal/src/lib/components/create-edit-label/create-edit-label.component.html b/src/portal/src/lib/components/create-edit-label/create-edit-label.component.html
index 92f040130..197bd76ed 100644
--- a/src/portal/src/lib/components/create-edit-label/create-edit-label.component.html
+++ b/src/portal/src/lib/components/create-edit-label/create-edit-label.component.html
@@ -15,7 +15,7 @@
             <label>
                 <label for="color">{{'LABEL.COLOR' | translate}}</label>
                 <clr-dropdown [clrCloseMenuOnItemClick]="false" clrDropdownTrigger>
-                    <clr-icon shape="caret down" class="btn btn-outline btnColor btn-sm"></clr-icon>
+                    <clr-icon shape="caret down" class="btn btn-outline btnColor "></clr-icon>
                     <clr-dropdown-menu *clrIfOpen>
                         <label class="dropdown-item" (click)="labelModel.color=i.color" *ngFor="let i of labelColor"
                             [class.borderSty]="i.color == '#FFFFFF'"   [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</label>
@@ -29,13 +29,13 @@
                        #description="ngModel">
             </label>
             <label>
-                <button type="button" class="btn btn-sm btn-outline" (click)="onCancel()" [disabled]="inProgress">{{
+                <button type="button" class="btn  btn-outline" (click)="onCancel()" [disabled]="inProgress">{{
                     'BUTTON.CANCEL' | translate }}
                 </button>
-                <button type="submit" class="btn btn-sm btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{
+                <button type="submit" class="btn  btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{
                     'BUTTON.OK' | translate }}
                 </button>
             </label>
         </section>
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/lib/components/cron-schedule/cron-schedule.component.html b/src/portal/src/lib/components/cron-schedule/cron-schedule.component.html
index 207ffd434..05a771cfd 100644
--- a/src/portal/src/lib/components/cron-schedule/cron-schedule.component.html
+++ b/src/portal/src/lib/components/cron-schedule/cron-schedule.component.html
@@ -17,7 +17,7 @@
     <span [hidden]="originScheduleType!==SCHEDULE_TYPE.CUSTOM">{{ "SCHEDULE.CRON" | translate }} :</span>
     <span [hidden]="originScheduleType!==SCHEDULE_TYPE.CUSTOM">{{ oriCron }}</span>
   </div>
-  <button [style.margin-left]="buttonMarginLeft" [disabled]="disabled" class="btn btn-primary btn-sm" (click)="editSchedule()" id="editSchedule">
+  <button [style.margin-left]="buttonMarginLeft" [disabled]="disabled" class="btn btn-primary " (click)="editSchedule()" id="editSchedule">
     {{ "BUTTON.EDIT" | translate }}
   </button>
 </div>
@@ -49,11 +49,11 @@
     </a>
   </div>
   <div class="confirm-button">
-    <button [style.margin-left]="buttonMarginLeft" class="btn btn-primary btn-sm"
+    <button [style.margin-left]="buttonMarginLeft" class="btn btn-primary "
     (click)="save()" id="config-save">
     {{ "BUTTON.SAVE" | translate }}
     </button>
-    <button class="btn btn-primary btn-sm" (click)="isEditMode=false">
+    <button class="btn btn-primary " (click)="isEditMode=false">
       {{ "BUTTON.CANCEL" | translate }}
     </button>
   </div>
diff --git a/src/portal/src/lib/components/endpoint/endpoint.component.html b/src/portal/src/lib/components/endpoint/endpoint.component.html
index e582253a3..acf4bc4e7 100644
--- a/src/portal/src/lib/components/endpoint/endpoint.component.html
+++ b/src/portal/src/lib/components/endpoint/endpoint.component.html
@@ -13,9 +13,9 @@
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <clr-datagrid [clrDgLoading]="loading"  [(clrDgSelected)]="selectedRow" (clrDgSelectedChange)="selectedChange()">
                 <clr-dg-action-bar>
-                    <button type="button" class="btn btn-sm btn-secondary" (click)="openModal()"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'DESTINATION.NEW_ENDPOINT' | translate}}</button>
-                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="!(selectedRow.length ===1)"  (click)="editTargets(selectedRow)" ><clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'DESTINATION.EDIT' | translate}}</button>
-                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="!selectedRow.length" (click)="deleteTargets(selectedRow)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'DESTINATION.DELETE' | translate}}</button>
+                    <button type="button" class="btn  btn-secondary" (click)="openModal()"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'DESTINATION.NEW_ENDPOINT' | translate}}</button>
+                    <button type="button" class="btn  btn-secondary" [disabled]="!(selectedRow.length ===1)"  (click)="editTargets(selectedRow)" ><clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'DESTINATION.EDIT' | translate}}</button>
+                    <button type="button" class="btn  btn-secondary" [disabled]="!selectedRow.length" (click)="deleteTargets(selectedRow)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'DESTINATION.DELETE' | translate}}</button>
                 </clr-dg-action-bar>
                 <clr-dg-column [clrDgField]="'name'" class="flex-min-width">{{'DESTINATION.NAME' | translate}}</clr-dg-column>
                 <clr-dg-column [clrDgField]="'status'" class="flex-min-width">{{'DESTINATION.STATUS' | translate}}</clr-dg-column>                
@@ -50,4 +50,4 @@
     </div>
     <confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
     <hbr-create-edit-endpoint (reload)="reload($event)"></hbr-create-edit-endpoint>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/lib/components/inline-alert/inline-alert.component.html b/src/portal/src/lib/components/inline-alert/inline-alert.component.html
index 668e5392d..487f69d2f 100644
--- a/src/portal/src/lib/components/inline-alert/inline-alert.component.html
+++ b/src/portal/src/lib/components/inline-alert/inline-alert.component.html
@@ -4,8 +4,8 @@
             {{errorMessage}}
         </span>
         <div class="alert-actions" *ngIf="showCancelAction">
-            <button class="btn btn-sm btn-link alert-btn-link" (click)="close()">{{'BUTTON.NO' | translate}}</button>
-            <button class="btn btn-sm btn-link alert-btn-link" (click)="confirmCancel()">{{'BUTTON.YES' | translate}}</button>
+            <button class="btn  btn-link alert-btn-link" (click)="close()">{{'BUTTON.NO' | translate}}</button>
+            <button class="btn  btn-link alert-btn-link" (click)="confirmCancel()">{{'BUTTON.YES' | translate}}</button>
         </div>
     </div>
-</clr-alert>
\ No newline at end of file
+</clr-alert>
diff --git a/src/portal/src/lib/components/label/label.component.html b/src/portal/src/lib/components/label/label.component.html
index 03bfa36b4..cf545ab17 100644
--- a/src/portal/src/lib/components/label/label.component.html
+++ b/src/portal/src/lib/components/label/label.component.html
@@ -11,9 +11,9 @@
             </div>
         </div>
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 btnGroup">
-            <button type="button" class="btn btn-sm btn-secondary" [disabled]="!hasCreateLabelPermission" (click)="openModal()"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'LABEL.NEW_LABEL' | translate}}</button>
-            <button type="button" class="btn btn-sm btn-secondary" [disabled]="!(selectedRow.length == 1) || !hasUpdateLabelPermission" (click)="editLabel(selectedRow)"><clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'LABEL.EDIT' | translate}}</button>
-            <button type="button" class="btn btn-sm btn-secondary" [disabled]="!selectedRow.length || !hasDeleteLabelPermission" (click)="deleteLabels(selectedRow)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'LABEL.DELETE' | translate}}</button>     
+            <button type="button" class="btn  btn-secondary" [disabled]="!hasCreateLabelPermission" (click)="openModal()"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'LABEL.NEW_LABEL' | translate}}</button>
+            <button type="button" class="btn  btn-secondary" [disabled]="!(selectedRow.length == 1) || !hasUpdateLabelPermission" (click)="editLabel(selectedRow)"><clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'LABEL.EDIT' | translate}}</button>
+            <button type="button" class="btn  btn-secondary" [disabled]="!selectedRow.length || !hasDeleteLabelPermission" (click)="deleteLabels(selectedRow)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'LABEL.DELETE' | translate}}</button>
             <hbr-create-edit-label [scope]="scope"  [projectId]="projectId" (reload)="reload()"></hbr-create-edit-label>
         </div>
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
diff --git a/src/portal/src/lib/components/list-replication-rule/list-replication-rule.component.html b/src/portal/src/lib/components/list-replication-rule/list-replication-rule.component.html
index e15373b00..f985e79c1 100644
--- a/src/portal/src/lib/components/list-replication-rule/list-replication-rule.component.html
+++ b/src/portal/src/lib/components/list-replication-rule/list-replication-rule.component.html
@@ -1,10 +1,10 @@
 <div  class="list-rule">
 <clr-datagrid [clrDgLoading]="loading"  [(clrDgSingleSelected)]="selectedRow" (clrDgSingleSelectedChange)="selectRule($event)" [clrDgRowSelection]="true">
     <clr-dg-action-bar>
-        <button type="button" id="new_replication_rule_id" class="btn btn-sm btn-secondary" *ngIf="hasCreateReplicationPermission" (click)="openModal()"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'REPLICATION.NEW_REPLICATION_RULE' | translate}}</button>
-        <button type="button" id="edit_replication_rule_id" class="btn btn-sm btn-secondary" *ngIf="hasUpdateReplicationPermission" [disabled]="!selectedRow" (click)="editRule(selectedRow)"><clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'REPLICATION.EDIT_POLICY' | translate}}</button>
-        <button type="button" id="delete_replication_rule_id" class="btn btn-sm btn-secondary" *ngIf="hasDeleteReplicationPermission" [disabled]="!selectedRow" (click)="deleteRule(selectedRow)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPLICATION.DELETE_POLICY' | translate}}</button>
-        <button type="button" id="replication_exe_id" class="btn btn-sm btn-secondary" *ngIf="hasExecuteReplicationPermission" [disabled]="!selectedRow" (click)="replicateRule(selectedRow)"><clr-icon shape="export" size="16"></clr-icon>&nbsp;{{'REPLICATION.REPLICATE' | translate}}</button>
+        <button type="button" id="new_replication_rule_id" class="btn  btn-secondary" *ngIf="hasCreateReplicationPermission" (click)="openModal()"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'REPLICATION.NEW_REPLICATION_RULE' | translate}}</button>
+        <button type="button" id="edit_replication_rule_id" class="btn  btn-secondary" *ngIf="hasUpdateReplicationPermission" [disabled]="!selectedRow" (click)="editRule(selectedRow)"><clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'REPLICATION.EDIT_POLICY' | translate}}</button>
+        <button type="button" id="delete_replication_rule_id" class="btn  btn-secondary" *ngIf="hasDeleteReplicationPermission" [disabled]="!selectedRow" (click)="deleteRule(selectedRow)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPLICATION.DELETE_POLICY' | translate}}</button>
+        <button type="button" id="replication_exe_id" class="btn  btn-secondary" *ngIf="hasExecuteReplicationPermission" [disabled]="!selectedRow" (click)="replicateRule(selectedRow)"><clr-icon shape="export" size="16"></clr-icon>&nbsp;{{'REPLICATION.REPLICATE' | translate}}</button>
     </clr-dg-action-bar>
     <clr-dg-column>{{'REPLICATION.NAME' | translate}}</clr-dg-column>
     <clr-dg-column [clrDgField]="'status'" class="status-width">{{'REPLICATION.STATUS' | translate}}</clr-dg-column>
diff --git a/src/portal/src/lib/components/log/recent-log.component.html b/src/portal/src/lib/components/log/recent-log.component.html
index 3b147e302..6ad11483b 100644
--- a/src/portal/src/lib/components/log/recent-log.component.html
+++ b/src/portal/src/lib/components/log/recent-log.component.html
@@ -1,4 +1,5 @@
 <div>
+    <h2 class="custom-h2" sub-header-title> {{'SIDE_NAV.LOGS' | translate}}</h2>
     <div class="row flex-items-xs-between flex-items-xs-bottom">
         <div></div>
         <div class="action-head-pos">
diff --git a/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.html b/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.html
index 718d51222..13ae0193b 100644
--- a/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.html
+++ b/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.html
@@ -28,7 +28,7 @@
             </div>
           </div>
           <div>
-            <button class="btn btn-primary btn-sm" (click)="stopJob()"
+            <button class="btn btn-primary " (click)="stopJob()"
               [disabled]="stopOnGoing">{{'REPLICATION.STOPJOB' | translate}}</button>
             <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
           </div>
@@ -123,4 +123,4 @@
       </clr-dg-footer>
     </clr-datagrid>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/portal/src/lib/components/replication/replication.component.html b/src/portal/src/lib/components/replication/replication.component.html
index e75865bdf..7cf22cf6d 100644
--- a/src/portal/src/lib/components/replication/replication.component.html
+++ b/src/portal/src/lib/components/replication/replication.component.html
@@ -48,7 +48,7 @@
       <clr-datagrid [(clrDgSelected)]="selectedRow" [clrDgLoading]="jobsLoading" (clrDgRefresh)="clrLoadJobs($event)">
         <clr-dg-action-bar>
           <div class="btn-group">
-            <button type="button" class="btn btn-sm btn-secondary" *ngIf="isSystemAdmin" [disabled]="!(jobs && jobs.length>0) || isStopOnGoing || !selectedRow.length"
+            <button type="button" class="btn  btn-secondary" *ngIf="isSystemAdmin" [disabled]="!(jobs && jobs.length>0) || isStopOnGoing || !selectedRow.length"
               (click)="openStopExecutionsDialog(selectedRow)">{{'REPLICATION.STOPJOB' | translate}}</button>
           </div>
         </clr-dg-action-bar>
diff --git a/src/portal/src/lib/components/repository-gridview/repository-gridview.component.html b/src/portal/src/lib/components/repository-gridview/repository-gridview.component.html
index ed2bce3d0..9d7ab2029 100644
--- a/src/portal/src/lib/components/repository-gridview/repository-gridview.component.html
+++ b/src/portal/src/lib/components/repository-gridview/repository-gridview.component.html
@@ -25,9 +25,9 @@
         <div *ngIf="!isCardView" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <clr-datagrid (clrDgRefresh)="clrLoad($event)" [clrDgLoading]="loading"  [(clrDgSelected)]="selectedRow" (clrDgSelectedChange)="selectedChange()">
                 <clr-dg-action-bar>
-                    <button *ngIf="withAdmiral" type="button" class="btn btn-sm btn-secondary" (click)="provisionItemEvent($event, selectedRow[0])" [disabled]="!(selectedRow.length===1 && hasProjectAdminRole)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DEPLOY' | translate}}</button>
-                    <button *ngIf="withAdmiral" type="button" class="btn btn-sm btn-secondary" (click)="itemAddInfoEvent($event, selectedRow[0])" [disabled]="!(selectedRow.length===1 && hasProjectAdminRole)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.ADDITIONAL_INFO' | translate}}</button>
-                    <button type="button" class="btn btn-sm btn-secondary" (click)="deleteRepos(selectedRow)" [disabled]="!(selectedRow.length)|| !hasDeleteRepositoryPermission"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DELETE' | translate}}</button>
+                    <button *ngIf="withAdmiral" type="button" class="btn  btn-secondary" (click)="provisionItemEvent($event, selectedRow[0])" [disabled]="!(selectedRow.length===1 && hasProjectAdminRole)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DEPLOY' | translate}}</button>
+                    <button *ngIf="withAdmiral" type="button" class="btn  btn-secondary" (click)="itemAddInfoEvent($event, selectedRow[0])" [disabled]="!(selectedRow.length===1 && hasProjectAdminRole)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.ADDITIONAL_INFO' | translate}}</button>
+                    <button type="button" class="btn  btn-secondary" (click)="deleteRepos(selectedRow)" [disabled]="!(selectedRow.length)|| !hasDeleteRepositoryPermission"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DELETE' | translate}}</button>
                 </clr-dg-action-bar>
                 <clr-dg-column [clrDgField]="'q'" [clrDgSortBy]="'name'">{{'REPOSITORY.NAME' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'REPOSITORY.TAGS_COUNT' | translate}}</clr-dg-column>
diff --git a/src/portal/src/lib/components/repository/repository.component.html b/src/portal/src/lib/components/repository/repository.component.html
index 32f208f65..ac8c3220d 100644
--- a/src/portal/src/lib/components/repository/repository.component.html
+++ b/src/portal/src/lib/components/repository/repository.component.html
@@ -25,7 +25,7 @@
     <section id="info" role="tabpanel" aria-labelledby="repo-info" [hidden]='!isCurrentTabContent("info")'>
       <form #repoInfoForm="ngForm">
         <div id="info-edit-button">
-          <button class="btn btn-sm" [disabled]="editing || !hasProjectAdminRole " (click)="editInfo()">
+          <button class="btn " [disabled]="editing || !hasProjectAdminRole " (click)="editInfo()">
             <clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'BUTTON.EDIT' | translate}}
           </button>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 1024" preserveAspectRatio="xMinYMin" class="markdown">
@@ -45,7 +45,7 @@
           <textarea id="info-edit-textarea" class="clr-textarea w-100" rows="5" name="info-edit-textarea"
             [(ngModel)]="imageInfo"></textarea>
         </div>
-        <div class="btn-sm" *ngIf="editing">
+        <div class="" *ngIf="editing">
           <button id="edit-save" class="btn btn-primary" [disabled]="!hasChanges()" (click)="saveInfo()">{{'BUTTON.SAVE' | translate}}</button>
           <button id="edit-cancel" class="btn" (click)="cancelInfo()">{{'BUTTON.CANCEL' | translate}}</button>
         </div>
diff --git a/src/portal/src/lib/components/tag/tag.component.html b/src/portal/src/lib/components/tag/tag.component.html
index e67bc15a9..efece50e9 100644
--- a/src/portal/src/lib/components/tag/tag.component.html
+++ b/src/portal/src/lib/components/tag/tag.component.html
@@ -55,10 +55,10 @@
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <clr-datagrid [clrDgLoading]="loading" class="datagrid-top" [class.embeded-datagrid]="isEmbedded" [(clrDgSelected)]="selectedRow">
             <clr-dg-action-bar>
-                <button [clrLoading]="scanBtnState" type="button" class="btn btn-sm btn-secondary" [disabled]="!(canScanNow() && selectedRow.length==1 && hasEnabledScanner)" (click)="scanNow()"><clr-icon shape="shield-check" size="16"></clr-icon>&nbsp;{{'VULNERABILITY.SCAN_NOW' | translate}}</button>
-                <button type="button" class="btn btn-sm btn-secondary" [disabled]="!(selectedRow.length==1)" (click)="showDigestId()"><clr-icon shape="copy" size="16"></clr-icon>&nbsp;{{'REPOSITORY.COPY_DIGEST_ID' | translate}}</button>
+                <button [clrLoading]="scanBtnState" type="button" class="btn  btn-secondary" [disabled]="!(canScanNow() && selectedRow.length==1 && hasEnabledScanner)" (click)="scanNow()"><clr-icon shape="shield-check" size="16"></clr-icon>&nbsp;{{'VULNERABILITY.SCAN_NOW' | translate}}</button>
+                <button type="button" class="btn  btn-secondary" [disabled]="!(selectedRow.length==1)" (click)="showDigestId()"><clr-icon shape="copy" size="16"></clr-icon>&nbsp;{{'REPOSITORY.COPY_DIGEST_ID' | translate}}</button>
                 <clr-dropdown *ngIf="!withAdmiral">
-                    <button type="button" class="btn btn-sm btn-secondary" clrDropdownTrigger [disabled]="!(selectedRow.length==1)||!hasAddLabelImagePermission" (click)="addLabels()"><clr-icon shape="plus" size="16"></clr-icon>{{'REPOSITORY.ADD_LABELS' | translate}}</button>
+                    <button type="button" class="btn  btn-secondary" clrDropdownTrigger [disabled]="!(selectedRow.length==1)||!hasAddLabelImagePermission" (click)="addLabels()"><clr-icon shape="plus" size="16"></clr-icon>{{'REPOSITORY.ADD_LABELS' | translate}}</button>
                     <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
                         <clr-dropdown>
                             <div class="filter-grid">
@@ -75,8 +75,8 @@
                         </clr-dropdown>
                     </clr-dropdown-menu>
                 </clr-dropdown>
-                <button type="button" class="btn btn-sm btn-secondary" *ngIf="!withAdmiral" [disabled]="!(selectedRow.length===1)|| !hasRetagImagePermission" (click)="retag()"><clr-icon shape="copy" size="16"></clr-icon>&nbsp;{{'REPOSITORY.RETAG' | translate}}</button>
-                <button type="button" class="btn btn-sm btn-secondary" *ngIf="hasDeleteImagePermission" (click)="deleteTags()" [disabled]="!hasDeleteImagePermission||!selectedRow.length"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DELETE' | translate}}</button>
+                <button type="button" class="btn  btn-secondary" *ngIf="!withAdmiral" [disabled]="!(selectedRow.length===1)|| !hasRetagImagePermission" (click)="retag()"><clr-icon shape="copy" size="16"></clr-icon>&nbsp;{{'REPOSITORY.RETAG' | translate}}</button>
+                <button type="button" class="btn  btn-secondary" *ngIf="hasDeleteImagePermission" (click)="deleteTags()" [disabled]="!hasDeleteImagePermission||!selectedRow.length"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DELETE' | translate}}</button>
             </clr-dg-action-bar>
             <clr-dg-column class="flex-max-width" [clrDgField]="'name'">{{'REPOSITORY.TAG' | translate}}</clr-dg-column>
             <clr-dg-column [clrDgField]="'size'">{{'REPOSITORY.SIZE' | translate}}</clr-dg-column>
diff --git a/src/portal/src/lib/components/vulnerability-scanning/result-grid.component.html b/src/portal/src/lib/components/vulnerability-scanning/result-grid.component.html
index c454d316c..3e73c9ff5 100644
--- a/src/portal/src/lib/components/vulnerability-scanning/result-grid.component.html
+++ b/src/portal/src/lib/components/vulnerability-scanning/result-grid.component.html
@@ -10,7 +10,7 @@
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <clr-datagrid [clrDgLoading]="loading">
             <clr-dg-action-bar>
-                <button type="button" class="btn btn-sm btn-secondary" [clrLoading]="scanBtnState" [disabled]="!hasScanImagePermission || !hasEnabledScanner" (click)="scanNow()"><clr-icon shape="shield-check" size="16"></clr-icon>&nbsp;{{'VULNERABILITY.SCAN_NOW' | translate}}</button>
+                <button type="button" class="btn  btn-secondary" [clrLoading]="scanBtnState" [disabled]="!hasScanImagePermission || !hasEnabledScanner" (click)="scanNow()"><clr-icon shape="shield-check" size="16"></clr-icon>&nbsp;{{'VULNERABILITY.SCAN_NOW' | translate}}</button>
             </clr-dg-action-bar>
             <clr-dg-column [clrDgField]="'id'">{{'VULNERABILITY.GRID.COLUMN_ID' | translate}}</clr-dg-column>
             <clr-dg-column [clrDgSortBy]="severitySort">{{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}}</clr-dg-column>
diff --git a/src/portal/src/styles.css b/src/portal/src/styles.css
index f485a663d..5ddc58276 100644
--- a/src/portal/src/styles.css
+++ b/src/portal/src/styles.css
@@ -52,7 +52,6 @@ body {
     -o-transform: rotate(-90deg);
     transform: rotate(-90deg);
 }
-.datagrid-spinner{margin-top: 24px;}
 
 /* set overflow bar style */
 ::-webkit-scrollbar {
@@ -72,7 +71,6 @@ body {
     background: rgba(255,0,0,0.4);
 }
 .custom-h2 {
-    margin-top: 0 !important;
     line-height: 24px;
 }
 
@@ -104,4 +102,10 @@ body {
     justify-content: flex-end;
 }
 
+.clr-vertical-nav .nav-link {
+    border-radius: 5px;
+}
 
+button:focus {
+  outline: none;
+}