diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
index 7871d0b74..c928438c6 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
@@ -984,6 +984,14 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
         if (this.selectedRow && this.selectedRow.length) {
             for (let i = 0; i < this.selectedRow.length; i++) {
                 if (artifact.digest === this.selectedRow[i].digest) {
+                    if (artifact.sbom_overview) {
+                        this.selectedRow[i].sbom_overview =
+                            artifact.sbom_overview;
+                    }
+                    if (artifact.sbom_overview.sbom_digest) {
+                        this.selectedRow[i].sbomDigest =
+                            artifact.sbom_overview.sbom_digest;
+                    }
                     this.selectedRow.splice(i, 1);
                     break;
                 }
diff --git a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/scanning.scss b/src/portal/src/app/base/project/repository/artifact/sbom-scanning/scanning.scss
index 248361e33..dc983f009 100644
--- a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/scanning.scss
+++ b/src/portal/src/app/base/project/repository/artifact/sbom-scanning/scanning.scss
@@ -2,6 +2,12 @@
     width: 210px;
 }
 
+hbr-sbom-bar {
+    .label,.not-scan {
+        width: 90%;
+    }
+}
+
 .bar-state {
     .unknow-text {
         margin-left: -5px;
@@ -15,6 +21,7 @@
 .bar-state-chart {
     .loop-height {
         height: 2px;
+        width: 100px;
     }
 }
 
@@ -29,144 +36,6 @@
     cursor: pointer;
 }
 
-.scanning-button {
-    height: 24px;
-    margin-top: 0;
-    margin-bottom: 0;
-    vertical-align: middle;
-    top: -12px;
-    position: relative;
-}
-
-.tip-wrapper {
-    display: inline-block;
-    height: 10px;
-    max-width: 120px;
-}
-
-
-.bar-tooltip-font-title {
-    font-weight: 600;
-}
-
-.bar-summary {
-    margin-top: 12px;
-    text-align: left;
-}
-
-.bar-scanning-time {
-    margin-top: 12px;
-}
-
-.bar-summary-item {
-    margin-top: 3px;
-    margin-bottom: 3px;
-}
-
-.bar-summary-item span:nth-child(1){
-    width: 30px;
-    text-align: center;
-    display: inline-block;
-}
-
-.bar-summary-item span:nth-child(2){
-    width: 28px;
-    display: inline-block;
-}
-
-.option-right {
-  padding-right: 16px;
-}
-
-.refresh-btn {
-    cursor: pointer;
-}
-
-.refresh-btn:hover {
-    color: #007CBB;
-}
-
-.tip-icon-medium {
-    color: orange;
-}
-
-.tip-icon-low {
-    color: yellow;
-}
-
-.font-color-green{
-    color:green;
-}
-/* stylelint-disable */
-.bar-tooltip-font-larger span{
-    font-size:16px;
-    vertical-align:middle
-}
-
-hr{
-    border-bottom: 0;
-    border-color: #aaa;
-    margin: 6px -10px;
-}
-
-.font-weight-600{
-    font-weight:600;
-}
-
-.rightPos{
-    position: absolute;
-    z-index: 100;
-    right: 35px;
-    margin-top: 4px;
-}
-
-.result-row {
-    position: relative;
-}
-
-.help-icon {
-    margin-left: 3px;
-}
-
-.mt-3px {
-    margin-top: 5px;
-}
-
-.label-critical {
-    background:#ff4d2e;
-    color:#000;
-}
-
-.label-danger {
-    background:#ff8f3d!important;
-    color:#000!important;
-}
-
-.label-medium {
-    background-color: #ffce66;
-    color:#000;
-}
-
-.label-low {
-    background: #fff1ad;
-    color:#000;
-}
-
-.label-none {
-    background-color: #2ec0ff;
-    color:#000;
-}
-
-.no-border {
-    border: none;
-}
-
-hbr-vulnerability-bar {
-    .label,.not-scan {
-        width: 90%;
-    }
-}
-
 .stopped {
     border-color: #cccc15;
 }