diff --git a/src/portal/src/app/account/sign-in/sign-in.component.html b/src/portal/src/app/account/sign-in/sign-in.component.html
index 490cccfbf..ade54d7d5 100644
--- a/src/portal/src/app/account/sign-in/sign-in.component.html
+++ b/src/portal/src/app/account/sign-in/sign-in.component.html
@@ -1,4 +1,4 @@
-<div class="login-wrapper login-wrapper-override"  [ngStyle]="{'background-image': customLoginBgImg? 'url(static/images/' + customLoginBgImg + ')': ''}">
+<div class="login-wrapper" [ngStyle]="{'background-image': customLoginBgImg? 'url(static/images/' + customLoginBgImg + ')': ''}">
     <form #signInForm="ngForm" class="login">
         <label class="title"> {{customAppTitle? customAppTitle:(appTitle | translate)}}
     </label>
@@ -36,7 +36,7 @@
             <a href="https://github.com/goharbor/harbor" target="_blank" class="more-info-link">{{ 'BUTTON.MORE_INFO' | translate }}</a>
         </div>
     </form>
-    <div id="pop_repo" class="popular-repo-wrapper">
+    <div *ngIf="appConfig.show_popular_repo" id="pop_repo" class="popular-repo-wrapper" >
         <top-repo class="repo-container"></top-repo>
     </div>
 </div>
diff --git a/src/portal/src/app/account/sign-in/sign-in.component.scss b/src/portal/src/app/account/sign-in/sign-in.component.scss
index ed6572137..ae9461e23 100644
--- a/src/portal/src/app/account/sign-in/sign-in.component.scss
+++ b/src/portal/src/app/account/sign-in/sign-in.component.scss
@@ -27,10 +27,6 @@
     border-left: 1px solid #eee;
 }
 
-.login-wrapper-override {
-    flex-wrap: wrap;
-}
-
 .repo-container {
     width: 100%;
     margin-top: -210px;
@@ -48,4 +44,20 @@
     position: relative;
     top: -9px;
 }
-.bg{position: absolute;top: 60px; right: 0px;width: 100%; height: 100%; background-size: cover;}
\ No newline at end of file
+.bg{
+    position: absolute;
+    top: 60px; 
+    right: 0px;
+    width: 100%; 
+    height: 100%; 
+    background-size: cover;
+}
+
+.login-wrapper {
+    background: transparent;
+    flex-wrap: wrap;
+    margin-top:-20px;
+    .login {
+        background:transparent;
+    }
+}
\ No newline at end of file
diff --git a/src/portal/src/app/account/sign-in/sign-in.component.ts b/src/portal/src/app/account/sign-in/sign-in.component.ts
index 2fee0ff35..b071808e7 100644
--- a/src/portal/src/app/account/sign-in/sign-in.component.ts
+++ b/src/portal/src/app/account/sign-in/sign-in.component.ts
@@ -28,7 +28,7 @@ import { AppConfig } from '../../app-config';
 import { User } from '../../user/user';
 
 import { CookieService, CookieOptions } from 'ngx-cookie';
-import {SkinableConfig} from "../../skinable-config.service";
+import { SkinableConfig } from "../../skinable-config.service";
 
 // Define status flags for signing in states
 export const signInStatusNormal = 0;
diff --git a/src/portal/src/app/app-config.ts b/src/portal/src/app/app-config.ts
index 0e80d6eaa..2293a986e 100644
--- a/src/portal/src/app/app-config.ts
+++ b/src/portal/src/app/app-config.ts
@@ -29,6 +29,7 @@ export class AppConfig {
     registry_storage_provider_name: string;
     read_only: boolean;
     with_chartmuseum: boolean;
+    show_popular_repo: boolean;
 
     constructor() {
         // Set default value
@@ -50,5 +51,6 @@ export class AppConfig {
         this.registry_storage_provider_name = "";
         this.read_only = false;
         this.with_chartmuseum = false;
+        this.show_popular_repo = false;
     }
 }