diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts
index d26651d6b..b01fdbd9a 100644
--- a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts
+++ b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts
@@ -76,7 +76,12 @@ export class ResultTipComponent implements OnInit {
         let m: number = this.totalPackages;
 
         if (m === 0) {
-            return 0 + 'px';
+            //If no packages recognized, then show green bar
+            if (severity === VulnerabilitySeverity.NONE) {
+                return MAX_TIP_WIDTH + 'px';
+            } else {
+                return 0 + 'px';
+            }
         }
 
         switch (severity) {
@@ -93,7 +98,9 @@ export class ResultTipComponent implements OnInit {
                 n = this.unknownCount;
                 break;
             case VulnerabilitySeverity.NONE:
-                n = this.noneCount;
+                //Show all the left as green bar
+                n = m - (this.highCount + this.mediumCount + this.lowCount + this.unknownCount);
+                if (n < 0) { n = 0; }
                 break;
             default:
                 n = 0;
@@ -101,7 +108,7 @@ export class ResultTipComponent implements OnInit {
         }
 
         let width: number = Math.round((n / m) * MAX_TIP_WIDTH);
-        if (width < MIN_TIP_WIDTH) {
+        if (width > 0 && width < MIN_TIP_WIDTH) {
             width = MIN_TIP_WIDTH;
         }
 
diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts
index 3018d3079..d8459a894 100644
--- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts
+++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts
@@ -13,23 +13,23 @@ export const TIP_COMPONENT_HTML: string = `
             <div class="bar-summary bar-tooltip-fon">
                 <div *ngIf="hasHigh" class="bar-summary-item">
                     <clr-icon shape="exclamation-circle" class="is-error" size="24"></clr-icon>
-                    <span>{{highCount}} {{packageText(highCount) | translate }} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{ highSuffix | translate }}</span>
+                    <span>{{highCount}} {{packageText(highCount) | translate }} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}</span>
                 </div>
                 <div *ngIf="hasMedium" class="bar-summary-item">
-                    <clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="is-warning" size="24"></clr-icon>
-                    <span>{{mediumCount}} {{packageText(mediumCount) | translate }} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{ mediumSuffix | translate }}</span>
+                    <clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="is-warning" size="20"></clr-icon>
+                    <span>{{mediumCount}} {{packageText(mediumCount) | translate }} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}</span>
                 </div>
                 <div *ngIf="hasLow" class="bar-summary-item">
                     <clr-icon shape="info-circle" class="is-info" size="24"></clr-icon>
-                    <span>{{lowCount}} {{packageText(lowCount) | translate }} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{ lowSuffix | translate }}</span>
+                    <span>{{lowCount}} {{packageText(lowCount) | translate }} {{'VULNERABILITY.SEVERITY.LOW' | translate }}</span>
                 </div>
                 <div *ngIf="hasUnknown" class="bar-summary-item">
                     <clr-icon shape="help" size="24"></clr-icon>
-                    <span>{{unknownCount}} {{packageText(unknownCount) | translate }} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{ unknownSuffix | translate }}</span>
+                    <span>{{unknownCount}} {{packageText(unknownCount) | translate }} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}</span>
                 </div>
                 <div *ngIf="hasNone" class="bar-summary-item">
                     <clr-icon shape="check-circle" class="is-success" size="24"></clr-icon>
-                    <span>{{noneCount}} {{packageText(noneCount) | translate }} {{'VULNERABILITY.SEVERITY.NONE' | translate }} {{ noneSuffix | translate }}</span>
+                    <span>{{noneCount}} {{packageText(noneCount) | translate }} {{'VULNERABILITY.SEVERITY.NONE' | translate }}</span>
                 </div>
             </div>
             <div>
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index a4a85af91..7a049eee5 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -31,7 +31,7 @@
         "clarity-icons": "^0.9.8",
         "clarity-ui": "^0.9.8",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.2.85",
+        "harbor-ui": "0.2.87",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index f4b1ab29b..6501446e9 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -480,15 +480,15 @@
         },
         "CHART": {
             "SCANNING_TIME": "Scan completed",
-            "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} packages with vulnerabilities across all {{totalPackages}} packages."
+            "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} package(s) with vulnerabilities across all {{totalPackages}} package(s)."
         },
         "SEVERITY": {
-            "HIGH": "High level",
-            "MEDIUM": "Medium level",
-            "LOW": "Low level",
-            "NEGLIGIBLE": "Negligible",
-            "UNKNOWN": "Unknown",
-            "NONE": "None"
+            "HIGH": "high",
+            "MEDIUM": "medium",
+            "LOW": "low",
+            "NEGLIGIBLE": "negligible",
+            "UNKNOWN": "unknown",
+            "NONE": "none"
         },
         "SINGULAR": "Vulnerability",
         "PLURAL": "Vulnerabilities",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index 887ca4968..2fb260b59 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -479,15 +479,15 @@
         },
         "CHART": {
             "SCANNING_TIME": "Scan completed",
-            "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} packages with vulnerabilities across all {{totalPackages}} packages."
+            "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} package(s) with vulnerabilities across all {{totalPackages}} package(s)."
         },
         "SEVERITY": {
-            "HIGH": "High level",
-            "MEDIUM": "Medium level",
-            "LOW": "Low level",
-            "NEGLIGIBLE": "Negligible",
-            "UNKNOWN": "Unknown",
-            "NONE": "None"
+            "HIGH": "high",
+            "MEDIUM": "medium",
+            "LOW": "low",
+            "NEGLIGIBLE": "negligible",
+            "UNKNOWN": "unknown",
+            "NONE": "none"
         },
         "SINGULAR": "Vulnerability",
         "PLURAL": "Vulnerabilities",