diff --git a/src/ui_ng/src/app/account/sign-in/sign-in.component.css b/src/ui_ng/src/app/account/sign-in/sign-in.component.css
index f9251f47c5e..ed65721371d 100644
--- a/src/ui_ng/src/app/account/sign-in/sign-in.component.css
+++ b/src/ui_ng/src/app/account/sign-in/sign-in.component.css
@@ -47,4 +47,5 @@
     font-size: 14px !important;
     position: relative;
     top: -9px;
-}
\ No newline at end of file
+}
+.bg{position: absolute;top: 60px; right: 0px;width: 100%; height: 100%; background-size: cover;}
\ No newline at end of file
diff --git a/src/ui_ng/src/app/account/sign-in/sign-in.component.html b/src/ui_ng/src/app/account/sign-in/sign-in.component.html
index e19d06e01f3..4452331952e 100644
--- a/src/ui_ng/src/app/account/sign-in/sign-in.component.html
+++ b/src/ui_ng/src/app/account/sign-in/sign-in.component.html
@@ -1,4 +1,5 @@
-<div class="login-wrapper login-wrapper-override" [ngStyle]="{'background-image': 'url(' + customLoginBgImg + ')'}">
+<div class="login-wrapper login-wrapper-override">
+    <div class="bg" *ngIf="customLoginBgImg" [ngStyle]="{'background-image': 'url(static/images/' + customLoginBgImg + ')'}"></div>
     <form #signInForm="ngForm" class="login">
         <label class="title"> {{customAppTitle? customAppTitle:(appTitle | translate)}}<span class="trademark tm-font">&#8482;</span>
     </label>
diff --git a/src/ui_ng/src/app/base/global-search/global-search.component.ts b/src/ui_ng/src/app/base/global-search/global-search.component.ts
index 037ae4a2e15..7dc679921c7 100644
--- a/src/ui_ng/src/app/base/global-search/global-search.component.ts
+++ b/src/ui_ng/src/app/base/global-search/global-search.component.ts
@@ -57,7 +57,7 @@ export class GlobalSearchComponent implements OnInit, OnDestroy {
 
     ngOnInit(): void {
         //custom skin
-        let customSkinObj = this.skinableConfig.getProjects();
+        let customSkinObj = this.skinableConfig.getProject();
         if (customSkinObj && customSkinObj.projectName) {
             this.translate.get('GLOBAL_SEARCH.PLACEHOLDER', {'param': customSkinObj.projectName}).subscribe(res => {
                 //Placeholder text
diff --git a/src/ui_ng/src/app/base/navigator/navigator.component.html b/src/ui_ng/src/app/base/navigator/navigator.component.html
index 0fd55f6f4ca..fcc8bc30628 100644
--- a/src/ui_ng/src/app/base/navigator/navigator.component.html
+++ b/src/ui_ng/src/app/base/navigator/navigator.component.html
@@ -2,7 +2,7 @@
     <div class="branding">
         <a href="javascript:void(0)" class="nav-link" (click)="homeAction()">
             <clr-icon shape="vm-bug"  *ngIf="!customStyle?.headerLogo"></clr-icon>
-            <img [attr.src]="customStyle?.headerLogo" *ngIf="customStyle?.headerLogo" style="width: 36px;height: 36px; object-fit: fill;">
+            <img [attr.src]="'static/images/'+customStyle?.headerLogo" *ngIf="customStyle?.headerLogo" style="width: 36px;height: 36px; object-fit: fill;">
             <span class="title">{{customProjectName?.projectName? customProjectName?.projectName:(appTitle | translate)}}</span>
         </a>
     </div>
diff --git a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts
index 40057475020..f598d6f4d9c 100644
--- a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts
+++ b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts
@@ -35,7 +35,7 @@ export class AboutDialogComponent implements OnInit{
 
     ngOnInit(): void {
         // custom skin
-        let customSkinObj = this.skinableConfig.getProjects();
+        let customSkinObj = this.skinableConfig.getProject();
         if (customSkinObj) {
             let selectedLang = this.translate.currentLang;
             this.customName = customSkinObj;
diff --git a/src/ui_ng/src/app/skinable-config.service.ts b/src/ui_ng/src/app/skinable-config.service.ts
index 5db164786be..b1ae140c807 100644
--- a/src/ui_ng/src/app/skinable-config.service.ts
+++ b/src/ui_ng/src/app/skinable-config.service.ts
@@ -12,7 +12,7 @@ export class SkinableConfig {
     constructor(private http: Http) {}
 
     public getCustomFile(): Promise<any> {
-       return this.http.get('../setting.json')
+       return this.http.get('../static/setting.json')
            .toPromise()
            .then(response => { this.customSkinData = response.json(); return this.customSkinData; })
            .catch(error => {
@@ -24,9 +24,9 @@ export class SkinableConfig {
         return this.customSkinData;
     }
 
-    public getProjects() {
+    public getProject() {
         if (this.customSkinData) {
-            return this.customSkinData.projects;
+            return this.customSkinData.project;
         }else {
             return null;
         }
diff --git a/src/ui_ng/src/setting.json b/src/ui_ng/src/setting.json
index ad411fd58f8..c02f826ba6f 100644
--- a/src/ui_ng/src/setting.json
+++ b/src/ui_ng/src/setting.json
@@ -1,11 +1,11 @@
 {
-  "headerBgColor": "#004a70",
+  "headerBgColor": "",
   "headerLogo": "",
   "loginBgImg": "",
-  "appTitle": "VMware Harbor",
-  "projects": {
-    "companyName": "vmware",
-    "projectName": "Harbor",
+  "appTitle": "",
+  "project": {
+    "companyName": "",
+    "projectName": "",
     "introduction": {
       "zh-cn": "",
       "es-es": "",