diff --git a/docs/customize_look&feel_guide.md b/docs/customize_look&feel_guide.md
index 4c2db5dcd..bc967b6d0 100644
--- a/docs/customize_look&feel_guide.md
+++ b/docs/customize_look&feel_guide.md
@@ -10,11 +10,10 @@ Open the `setting.json` file, you'll see the default content as shown below:
   "headerBgColor": "#004a70",
   "headerLogo": "",
   "loginBgImg": "",
+  "appTitle": "",
   "product": {
-    "title": "Harbor",
-    "company": "goharbor",
     "name": "Harbor",
-    "introductions": {
+    "introduction": {
       "zh-cn": "",
       "es-es": "",
       "en-us": ""
diff --git a/src/portal/src/app/base/global-search/global-search.component.ts b/src/portal/src/app/base/global-search/global-search.component.ts
index 18cec297b..2aba69e2c 100644
--- a/src/portal/src/app/base/global-search/global-search.component.ts
+++ b/src/portal/src/app/base/global-search/global-search.component.ts
@@ -58,8 +58,8 @@ export class GlobalSearchComponent implements OnInit, OnDestroy {
     ngOnInit(): void {
         // custom skin
         let customSkinObj = this.skinableConfig.getProject();
-        if (customSkinObj && customSkinObj.projectName) {
-            this.translate.get('GLOBAL_SEARCH.PLACEHOLDER', {'param': customSkinObj.projectName}).subscribe(res => {
+        if (customSkinObj && customSkinObj.name) {
+            this.translate.get('GLOBAL_SEARCH.PLACEHOLDER', {'param': customSkinObj.name}).subscribe(res => {
                 // Placeholder text
                 this.placeholderText = res;
             });
diff --git a/src/portal/src/app/base/navigator/navigator.component.html b/src/portal/src/app/base/navigator/navigator.component.html
index 7c3cc19af..6783998c0 100644
--- a/src/portal/src/app/base/navigator/navigator.component.html
+++ b/src/portal/src/app/base/navigator/navigator.component.html
@@ -2,9 +2,9 @@
     <div class="branding">
         <a href="javascript:void(0)" class="nav-link" (click)="homeAction()">
             <!-- <clr-icon shape="vm-bug"  *ngIf="!customStyle?.headerLogo"></clr-icon> -->
-            <img [src]="'images/harbor-logo.svg'" class="harbor-logo" />
-            <img [attr.src]="'static/images/'+customStyle?.headerLogo" *ngIf="customStyle?.headerLogo" class="headerLogo">
-            <span class="title">{{customProjectName?.projectName? customProjectName?.projectName:(appTitle | translate)}}</span>
+            <img [attr.src]="'images/'+customStyle?.headerLogo" *ngIf="customStyle?.headerLogo;else elseBlock" class="headerLogo">
+            <ng-template #elseBlock><img [src]="'images/harbor-logo.svg'" class="harbor-logo" /></ng-template>
+            <span class="title">{{customProjectName?.name? customProjectName?.name:(appTitle | translate)}}</span>
         </a>
     </div>
     <div class="header-nav">
diff --git a/src/portal/src/app/base/navigator/navigator.component.ts b/src/portal/src/app/base/navigator/navigator.component.ts
index 0c432d5f2..2bcc194b1 100644
--- a/src/portal/src/app/base/navigator/navigator.component.ts
+++ b/src/portal/src/app/base/navigator/navigator.component.ts
@@ -61,8 +61,8 @@ export class NavigatorComponent implements OnInit {
         // custom skin
         let customSkinObj = this.skinableConfig.getSkinConfig();
         if (customSkinObj) {
-            if (customSkinObj.projects) {
-                this.customProjectName = customSkinObj.projects;
+            if (customSkinObj.product) {
+                this.customProjectName = customSkinObj.product;
             }
             this.customStyle = customSkinObj;
         }
diff --git a/src/portal/src/app/shared/about-dialog/about-dialog.component.html b/src/portal/src/app/shared/about-dialog/about-dialog.component.html
index 75ec45695..ae3f1d9c8 100644
--- a/src/portal/src/app/shared/about-dialog/about-dialog.component.html
+++ b/src/portal/src/app/shared/about-dialog/about-dialog.component.html
@@ -4,7 +4,7 @@
             <img [src]="'images/harbor-logo.svg'" class="harbor-icon">
         </div>
         <div class="content">
-            <div>{{customName?.projectName? customName?.projectName : ('APP_TITLE.HARBOR' | translate)}}</div>
+            <div>{{customName?.name? customName?.name : ('APP_TITLE.HARBOR' | translate)}}</div>
             <div>
                 <span class="p5 about-version">{{'ABOUT.VERSION' | translate}} {{version}}</span>
             </div>
diff --git a/src/portal/src/app/sign-in/sign-in.component.html b/src/portal/src/app/sign-in/sign-in.component.html
index 0b076d27f..5258aa345 100644
--- a/src/portal/src/app/sign-in/sign-in.component.html
+++ b/src/portal/src/app/sign-in/sign-in.component.html
@@ -2,7 +2,7 @@
     <global-message [isAppLevel]="true"></global-message>
     <navigator></navigator>
     <search-result></search-result>
-    <div class="login-wrapper" [ngStyle]="{'background-image': customLoginBgImg? 'url(static/images/' + customLoginBgImg + ')': ''}">
+    <div class="login-wrapper" [ngStyle]="{'background-image': customLoginBgImg? 'url(/images/' + customLoginBgImg + ')': ''}">
         <form #signInForm="ngForm" class="login">
             <label class="title"> {{customAppTitle? customAppTitle:(appTitle | translate)}}
             </label>
diff --git a/src/portal/src/app/skinable-config.service.ts b/src/portal/src/app/skinable-config.service.ts
index 852553e1a..db2e3ae89 100644
--- a/src/portal/src/app/skinable-config.service.ts
+++ b/src/portal/src/app/skinable-config.service.ts
@@ -23,7 +23,7 @@ export class SkinableConfig {
 
     public getProject() {
         if (this.customSkinData) {
-            return this.customSkinData.project;
+            return this.customSkinData.product;
         } else {
             return null;
         }
diff --git a/src/portal/src/setting.json b/src/portal/src/setting.json
index c02f826ba..5ed09efbb 100644
--- a/src/portal/src/setting.json
+++ b/src/portal/src/setting.json
@@ -3,9 +3,8 @@
   "headerLogo": "",
   "loginBgImg": "",
   "appTitle": "",
-  "project": {
-    "companyName": "",
-    "projectName": "",
+  "product": {
+    "name": "",
     "introduction": {
       "zh-cn": "",
       "es-es": "",