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 ade54d7d5..8590d25a9 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,42 +1,53 @@
-<div class="login-wrapper" [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>
+        </label>
+        <a href="/c/oidc/login" class="login-oidc">
+            <button type="button" class="btn btn-primary btn-block">
+                <span>{{'BUTTON.LOG_IN_OIDC' | translate }}</span>
+            </button>
+        </a>
         <div class="login-group">
-            <label for="username" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left">
-                <input class="username" type="text" required
-                [(ngModel)]="signInCredential.principal" 
-                name="login_username" id="login_username" placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}'
-                #userNameInput='ngModel'>
+            <label for="username" aria-haspopup="true" role="tooltip"
+                class="tooltip tooltip-validation tooltip-md tooltip-top-left">
+                <input class="username" type="text" required [(ngModel)]="signInCredential.principal"
+                    name="login_username" id="login_username" placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}'
+                    #userNameInput='ngModel'>
                 <span class="tooltip-content">
                     {{ 'TOOLTIP.SIGN_IN_USERNAME' | translate }}
                 </span>
             </label>
-            <label for="username" aria-haspopup="true" role="tpopular-repo-wrapperooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left">
-                <input class="password" type="password" required 
-                [(ngModel)]="signInCredential.password" 
-                name="login_password" id="login_password" placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}'
-                #passwordInput="ngModel">
+            <label for="username" aria-haspopup="true" role="tpopular-repo-wrapperooltip"
+                class="tooltip tooltip-validation tooltip-md tooltip-top-left">
+                <input class="password" type="password" required [(ngModel)]="signInCredential.password"
+                    name="login_password" id="login_password" placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}'
+                    #passwordInput="ngModel">
                 <span class="tooltip-content">
                     {{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
                 </span>
             </label>
             <div class="checkbox">
-                <input type="checkbox" id="rememberme" #rememberMeBox (click)="clickRememberMe($event)" [checked]="rememberMe">
+                <input type="checkbox" id="rememberme" #rememberMeBox (click)="clickRememberMe($event)"
+                    [checked]="rememberMe">
                 <label for="rememberme">{{ 'SIGN_IN.REMEMBER' | translate }}</label>
-                <a *ngIf="showForgetPwd" href="javascript:void(0)" class="forgot-password-link" (click)="forgotPassword()">{{'SIGN_IN.FORGOT_PWD' | translate}}</a>
+                <a *ngIf="showForgetPwd" href="javascript:void(0)" class="forgot-password-link"
+                    (click)="forgotPassword()">{{'SIGN_IN.FORGOT_PWD' | translate}}</a>
             </div>
             <div [class.visibility-hidden]="!isError" class="error active">
                 {{ 'SIGN_IN.INVALID_MSG' | translate }}
             </div>
-            <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary" (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
-            <a href="javascript:void(0)" class="signup" (click)="signUp()" *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
+            <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary"
+                (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
+            <a href="javascript:void(0)" class="signup" (click)="signUp()"
+                *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
         </div>
         <div>
-            <a href="https://github.com/goharbor/harbor" target="_blank" class="more-info-link">{{ 'BUTTON.MORE_INFO' | translate }}</a>
+            <a href="https://github.com/goharbor/harbor" target="_blank"
+                class="more-info-link">{{ 'BUTTON.MORE_INFO' | translate }}</a>
         </div>
     </form>
-    <div *ngIf="appConfig.show_popular_repo" 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 62b702217..87fc25d66 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
@@ -59,4 +59,7 @@
     .login {
         background:transparent;
     }
+}
+.title{
+    margin-bottom: 50px;
 }
\ No newline at end of file
diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json
index ad5b69ca3..a5b9d967d 100644
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@@ -21,6 +21,7 @@
         "OK": "OK",
         "DELETE": "DELETE",
         "LOG_IN": "LOG IN",
+        "LOG_IN_OIDC": "Login via OIDC provider",
         "SIGN_UP_LINK": "Sign up for an account",
         "SIGN_UP": "SIGN UP",
         "CONFIRM": "CONFIRM",
diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json
index fa508e16b..8f0596196 100644
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@@ -21,6 +21,7 @@
         "OK": "OK",
         "DELETE": "ELIMINAR",
         "LOG_IN": "IDENTIFICARSE",
+        "LOG_IN_OIDC": "Login Via OIDC proveedor",
         "SIGN_UP_LINK": "Registrar una cuenta",
         "SIGN_UP": "REGISTRARSE",
         "CONFIRM": "CONFIRMAR",
diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json
index fe962848d..3d3d67990 100644
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@@ -21,6 +21,7 @@
         "OK": "OK",
         "DELETE": "SUPPRIMER",
         "LOG_IN": "S'IDENTIFIER",
+        "LOG_IN_OIDC": "Connexion via OIDC fournisseur",
         "SIGN_UP_LINK": "Ouvrir un compte",
         "SIGN_UP": "S'INSCRIRE",
         "CONFIRM": "CONFIRMER",
diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json
index f58fdb8bb..d0f8d3227 100644
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@@ -21,6 +21,7 @@
         "OK": "OK",
         "DELETE": "DELETAR",
         "LOG_IN": "LOG IN",
+        "LOG_IN_OIDC": "Login via OIDC provedor",
         "SIGN_UP_LINK": "Registre-se para uma conta",
         "SIGN_UP": "REGISTRE-Se",
         "CONFIRM": "CONFIRMAR",
diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json
index 6c53a89ca..472d2d340 100644
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@@ -21,6 +21,7 @@
         "OK": "确定",
         "DELETE": "删除",
         "LOG_IN": "登录",
+        "LOG_IN_OIDC": "通过OIDC提供商登录",
         "SIGN_UP_LINK": "注册账号",
         "SIGN_UP": "注册",
         "CONFIRM": "确定",