diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json
index 3349775b9..b4aefed86 100644
--- a/src/ui_ng/lib/package.json
+++ b/src/ui_ng/lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.7.1",
+    "version": "0.7.2",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "scripts": {
         "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json",
diff --git a/src/ui_ng/lib/pkg/package.json b/src/ui_ng/lib/pkg/package.json
index 1b9a124b5..187bf8bd4 100644
--- a/src/ui_ng/lib/pkg/package.json
+++ b/src/ui_ng/lib/pkg/package.json
@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.7.1",
+    "version": "0.7.2",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "author": "VMware",
     "module": "index.js",
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css.ts
index b0b8539e5..acb48ccbd 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css.ts
@@ -36,16 +36,20 @@ export const REPOSITORY_GRIDVIEW_STYLE = `
     width: 100px;
 }
 
-
-.card-media-block {
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
 .card-media-block > img {
     height: 45px;
     width: 45px;
 }
+
+.card-media-title {
+    overflow: hidden;
+    height: 24px;
+}
+.card-media-text {
+    overflow: hidden;
+    height: 21px
+}
+
 .card-media-description {
     height: 45px;
 }
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
index 4d56b3396..409b119e2 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
@@ -50,12 +50,10 @@ export const REPOSITORY_GRIDVIEW_TEMPLATE = `
         <ng-template let-item="item">
             <a class="card clickable" (click)="watchRepoClickEvt(item)">
                 <div class="card-header">
-                    <div [ngClass]="{'card-media-block': withAdmiral, 'card-media-block wrap': !withAdmiral }">
+                    <div [ngClass]="{'card-media-block': true, 'wrap': !withAdmiral }">
                         <img *ngIf="withAdmiral" [src]="getImgLink(item)"/>
                         <div class="card-media-description">
-                            <span class="card-media-title">
-                                {{ (item.name?.length>29) ? (item.name | slice:0:29) + '...' : (item.name)}}
-                            </span>
+                            <span class="card-media-title">{{item.name}}</span>
                             <p class="card-media-text">{{registryUrl}}</p>
                         </div>
                     </div>
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
index 5fd234578..09a6a9af6 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
@@ -32,6 +32,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
   @Input() urlPrefix: string;
   @Input() hasSignedIn: boolean;
   @Input() hasProjectAdminRole: boolean;
+  @Input() mode = 'admiral';
   @Output() repoClickEvent = new EventEmitter<RepositoryItem>();
   @Output() repoProvisionEvent = new EventEmitter<RepositoryItem>();
   @Output() addInfoEvent = new EventEmitter<RepositoryItem>();
@@ -87,7 +88,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
   }
 
   public get withAdmiral(): boolean {
-    return this.systemInfo ? this.systemInfo.with_admiral : false;
+    return this.mode === 'admiral'
   }
 
   public get showDBStatusWarning(): boolean {
@@ -106,7 +107,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
       .then(systemInfo => this.systemInfo = systemInfo)
       .catch(error => this.errorHandler.error(error));
 
-    if (this.withAdmiral) {
+    if (this.mode === 'admiral') {
       this.isCardView = true;
     } else {
       this.isCardView = false;
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 90acc0295..5821269f3 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -30,7 +30,7 @@
         "clarity-icons": "0.10.24",
         "clarity-ui": "0.10.24",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.7.1",
+        "harbor-ui": "0.7.2",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",
diff --git a/src/ui_ng/src/app/repository/repository-page.component.html b/src/ui_ng/src/app/repository/repository-page.component.html
index 449b67ca9..a073468a7 100644
--- a/src/ui_ng/src/app/repository/repository-page.component.html
+++ b/src/ui_ng/src/app/repository/repository-page.component.html
@@ -1,5 +1,5 @@
 <div style="margin-top: 4px;">
     <hbr-repository-gridview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn"
-    [hasProjectAdminRole]="hasProjectAdminRole"
+    [hasProjectAdminRole]="hasProjectAdminRole" [mode]="mode"
     (repoClickEvent)="watchRepoClickEvent($event)"></hbr-repository-gridview>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/repository/repository-page.component.ts b/src/ui_ng/src/app/repository/repository-page.component.ts
index 5e77fb926..8d6e6ce07 100644
--- a/src/ui_ng/src/app/repository/repository-page.component.ts
+++ b/src/ui_ng/src/app/repository/repository-page.component.ts
@@ -28,6 +28,7 @@ export class RepositoryPageComponent implements OnInit {
   hasProjectAdminRole: boolean;
   hasSignedIn: boolean;
   projectName: string;
+  mode = 'standalone';
 
   constructor(
     private route: ActivatedRoute,