diff --git a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
index fb10c935a..f943a4e36 100644
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
@@ -10,6 +10,7 @@
             <router-outlet></router-outlet>
         </div>
         <clr-vertical-nav [clrVerticalNavCollapsible]="true" *ngIf="isUserExisting">
+            <div>
             <a clrVerticalNavLink routerLinkActive="active" routerLink="/harbor/projects">
                 <clr-icon shape="organization" clrVerticalNavIcon></clr-icon>
                 {{'SIDE_NAV.PROJECTS' | translate}}
@@ -18,10 +19,6 @@
                 <clr-icon shape="list" clrVerticalNavIcon></clr-icon>
                 {{'SIDE_NAV.LOGS' | translate}}
             </a>
-            <a clrVerticalNavLink target="_blank" routerLink="/devcenter" routerLinkActive="active">
-                <clr-icon shape="terminal" clrVerticalNavIcon></clr-icon>
-                {{'SIDE_NAV.SYSTEM_MGMT.DEVCENTER' | translate}}
-            </a>
             <clr-vertical-nav-group *ngIf="isSystemAdmin" routerLinkActive="active">
                 <clr-icon shape="administrator" clrVerticalNavIcon></clr-icon>
                 {{'SIDE_NAV.SYSTEM_MGMT.NAME' | translate}}
@@ -49,6 +46,14 @@
                     </a>
                 </clr-vertical-nav-group-children>
             </clr-vertical-nav-group>
+            </div>
+            <div class="vertical-nav-footer">                                             
+                <a clrVerticalNavLink target="_blank" routerLink="/devcenter">
+                    <button type="button" class="btn btn-sm api-button">
+                        <span>{{'SIDE_NAV.API_EXPLORER' | translate }}</span>
+                    </button>
+                </a>
+            </div>
         </clr-vertical-nav>
         <hbr-operation-model *ngIf="isUserExisting"></hbr-operation-model>
     </div>
diff --git a/src/portal/src/app/base/harbor-shell/harbor-shell.component.scss b/src/portal/src/app/base/harbor-shell/harbor-shell.component.scss
index 903edb90d..4ad3dc730 100644
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.scss
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.scss
@@ -24,6 +24,29 @@
 .nav-link-override {
     width: 126px !important;
 }
-:host >>> .clr-vertical-nav .nav-trigger+.nav-content{
-    padding-top: 0;
-}
\ No newline at end of file
+
+clr-vertical-nav {
+    ::ng-deep {
+        .nav-content {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    .vertical-nav-footer {
+        margin: 15px 20px;
+        a {
+            display: inline-block;
+            line-height: 0;
+            padding: 0;
+            height: 24px;
+            &:hover {
+                background: transparent;
+                cursor: default;
+            }
+            .api-button {
+                margin: 0;
+            }
+        }
+	}
+}
+
diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json
index ab30ea7ac..40a1a5d94 100644
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@@ -121,10 +121,10 @@
             "GROUP": "Groups",
             "REGISTRY": "Registries",
             "REPLICATION": "Replications",
-            "CONFIG": "Configuration",
-            "DEVCENTER": "Developer Center"
+            "CONFIG": "Configuration"
         },
-        "LOGS": "Logs"
+        "LOGS": "Logs",
+        "API_EXPLORER": "API EXPLORER"
     },
     "USER": {
         "ADD_ACTION": "New User",
diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json
index fc49cc392..8b72c3852 100644
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@@ -121,10 +121,10 @@
             "REGISTRY": "Registries",
             "GROUP": "Groups",
             "REPLICATION": "Replicacións",
-            "CONFIG": "Configuración",
-            "DEVCENTER": "Developer Center"
+            "CONFIG": "Configuración"
         },
-        "LOGS": "Logs"
+        "LOGS": "Logs",
+        "API_EXPLORER": "API EXPLORER"
     },
     "USER": {
         "ADD_ACTION": "New User",
diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json
index 97dc82719..7519ca080 100644
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@@ -107,10 +107,10 @@
             "USER": "Utilisateurs",
             "GROUP": "Groups",
             "REPLICATION": "Réplication",
-            "CONFIG": "Configuration",
-            "DEVCENTER": "Developer Center"
+            "CONFIG": "Configuration"
         },
-        "LOGS": "Logs"
+        "LOGS": "Logs",
+        "API_EXPLORER": "API EXPLORER"
     },
     "USER": {
         "ADD_ACTION": "UTILISATEUR",
diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json
index a803e4ac8..9de296d5f 100644
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@@ -119,10 +119,10 @@
             "GROUP": "Grupos",
             "REGISTRY": "Registros",
             "REPLICATION": "Replicações",
-            "CONFIG": "Configuração",
-            "DEVCENTER": "Developer Center"
+            "CONFIG": "Configuração"
         },
-        "LOGS": "Logs"
+        "LOGS": "Logs",
+        "API_EXPLORER": "API EXPLORER"
     },
     "USER": {
         "ADD_ACTION": "Novo Usuário",
diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json
index 47df87120..95d79c400 100644
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@@ -120,10 +120,10 @@
             "GROUP": "组管理",
             "REGISTRY": "仓库管理",
             "REPLICATION": "复制管理",
-            "CONFIG": "配置管理",
-            "DEVCENTER": "开发者中心"
+            "CONFIG": "配置管理"
         },
-        "LOGS": "日志"
+        "LOGS": "日志",
+        "API_EXPLORER": "API控制中心"
     },
     "USER": {
         "ADD_ACTION": "创建用户",