diff --git a/src/ui_ng/src/app/config/auth/config-auth.component.html b/src/ui_ng/src/app/config/auth/config-auth.component.html
index 2ab0dfd33..a3329ef8f 100644
--- a/src/ui_ng/src/app/config/auth/config-auth.component.html
+++ b/src/ui_ng/src/app/config/auth/config-auth.component.html
@@ -15,6 +15,30 @@
             </a>
         </div>
     </section>
+
+    <section class="form-block" *ngIf="showUAA">
+        <div class="form-group">
+            <label for="uaa-endpoint" class="required">{{'CONFIG.UAA.ENDPOINT' | translate}}</label>
+            <input type="text" id="uaa-endpoint" name="uaa-endpoint" size="35"
+            [(ngModel)]="currentConfig.uaa_endpoint.value" [disabled]="!currentConfig.uaa_verify_cert.editable">
+        </div>
+        <div class="form-group">
+            <label for="uaa-id" class="required">{{'CONFIG.UAA.CLIENT_ID' | translate}}</label>
+            <input type="text" id="uaa-cid" name="uaa-client-id" size="35"
+            [(ngModel)]="currentConfig.uaa_client_id.value" [disabled]="!currentConfig.uaa_verify_cert.editable">
+        </div>
+        <div class="form-group">
+            <label for="uaa-id" class="required">{{'CONFIG.UAA.CLIENT_SECRET' | translate}}</label>
+            <input type="text" id="uaa-secret" name="uaa-client-secret" type="password" size="35"
+            [(ngModel)]="currentConfig.uaa_client_secret.value" [disabled]="!currentConfig.uaa_verify_cert.editable">
+        </div>
+        <div class="form-group">
+            <label for="uaa-cert" class="required">{{'CONFIG.UAA.VERIFY_CERT' | translate}}</label>
+            <clr-checkbox id="uaa-cert" name="uaa-cert" [(clrChecked)]="currentConfig.uaa_verify_cert.value"
+            [clrDisabled]="!currentConfig.uaa_verify_cert.editable"></clr-checkbox>
+        </div>
+    </section>
+
     <section class="form-block" *ngIf="showLdap">
         <div class="form-group">
             <label for="ldapUrl" class="required">{{'CONFIG.LDAP.URL' | translate}}</label>
diff --git a/src/ui_ng/src/app/config/auth/config-auth.component.ts b/src/ui_ng/src/app/config/auth/config-auth.component.ts
index 72321a38c..23bb78790 100644
--- a/src/ui_ng/src/app/config/auth/config-auth.component.ts
+++ b/src/ui_ng/src/app/config/auth/config-auth.component.ts
@@ -24,7 +24,7 @@ import { Configuration } from 'harbor-ui';
 })
 export class ConfigurationAuthComponent implements OnChanges {
     changeSub: Subscription;
-    @Input("ldapConfig") currentConfig: Configuration = new Configuration();
+    @Input("allConfig") currentConfig: Configuration = new Configuration();
 
     @ViewChild("authConfigFrom") authForm: NgForm;
 
@@ -50,6 +50,10 @@ export class ConfigurationAuthComponent implements OnChanges {
             this.currentConfig.auth_mode.value === 'ldap_auth';
     }
 
+    public get showUAA(): boolean {
+        return this.currentConfig && this.currentConfig.auth_mode && this.currentConfig.auth_mode.value === 'uaa_auth';
+    }
+
     public get showSelfReg(): boolean {
         if (!this.currentConfig || !this.currentConfig.auth_mode) {
             return true;
diff --git a/src/ui_ng/src/app/config/config.component.css b/src/ui_ng/src/app/config/config.component.css
index d8e00e3d2..485ffef8d 100644
--- a/src/ui_ng/src/app/config/config.component.css
+++ b/src/ui_ng/src/app/config/config.component.css
@@ -8,4 +8,12 @@
 
 .info-tips-icon:hover {
     color: #007CBB;
+}
+
+clr-icon {
+    color: grey;
+    margin-top: -3px;
+}
+clr-icon:hover {
+    color: #007CBB;
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/app/config/config.component.html b/src/ui_ng/src/app/config/config.component.html
index 2a1d13ce0..5a467a180 100644
--- a/src/ui_ng/src/app/config/config.component.html
+++ b/src/ui_ng/src/app/config/config.component.html
@@ -17,7 +17,7 @@
             </li>
         </ul>
         <section id="authentication" role="tabpanel" aria-labelledby="config-auth" [hidden]='!isCurrentTabContent("authentication")'>
-            <config-auth [ldapConfig]="allConfig"></config-auth>
+            <config-auth [allConfig]="allConfig"></config-auth>
         </section>
         <section id="email" role="tabpanel" aria-labelledby="config-email" [hidden]='!isCurrentTabContent("email")'>
             <config-email [mailConfig]="allConfig"></config-email>
diff --git a/src/ui_ng/src/app/config/config.component.ts b/src/ui_ng/src/app/config/config.component.ts
index 7d2e8f757..24ce587c8 100644
--- a/src/ui_ng/src/app/config/config.component.ts
+++ b/src/ui_ng/src/app/config/config.component.ts
@@ -50,13 +50,13 @@ const TabLinkContentMap = {
     styleUrls: ['config.component.css']
 })
 export class ConfigurationComponent implements OnInit, OnDestroy {
-    onGoing: boolean = false;
+    onGoing = false;
     allConfig: Configuration = new Configuration();
-    currentTabId: string = "config-auth";//default tab
+    currentTabId = 'config-auth'; // default tab
     originalCopy: Configuration;
     confirmSub: Subscription;
-    testingMailOnGoing: boolean = false;
-    testingLDAPOnGoing: boolean = false;
+    testingMailOnGoing = false;
+    testingLDAPOnGoing = false;
 
     @ViewChild(SystemSettingsComponent) systemSettingsConfig: SystemSettingsComponent;
     @ViewChild(VulnerabilityConfigComponent) vulnerabilityConfig: VulnerabilityConfigComponent;
@@ -405,7 +405,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
                 //Add two password fields
                 configurations.email_password = new StringValueItem(fakePass, true);
                 configurations.ldap_search_password = new StringValueItem(fakePass, true);
-
+                configurations.uaa_client_secret = new StringValueItem(fakePass, false);
                 this.allConfig = configurations;
                 //Keep the original copy of the data
                 this.originalCopy = this.clone(configurations);
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index 27cd31709..625445c0c 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -443,6 +443,12 @@
             "SCOPE": "LDAP Scope",
             "VERIFY_CERT": "LDAP Verify Cert"
         },
+        "UAA": {
+            "ENDPOINT": "UAA Endpoint",
+            "CLIENT_ID": "UAA Client ID",
+            "CLIENT_SECRET": "UAA Client Secret",
+            "VERIFY_CERT": "UAA Verify Cert"
+        },
         "SCANNING": {
             "TRIGGER_SCAN_ALL_SUCCESS": "Trigger scan all successfully!",
             "TRIGGER_SCAN_ALL_FAIL": "Failed to trigger scan all with error: {{error}",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index 0ef85d151..5d2bf54d8 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -444,6 +444,12 @@
             "SCOPE": "LDAP Ámbito",
             "VERIFY_CERT": "LDAP Verify Cert"
         },
+        "UAA": {
+            "ENDPOINT": "UAA Endpoint",
+            "CLIENT_ID": "UAA Client ID",
+            "CLIENT_SECRET": "UAA Client Secret",
+            "VERIFY_CERT": "UAA Verify Cert"
+        },
         "SCANNING": {
             "TRIGGER_SCAN_ALL_SUCCESS": "Trigger scan all successfully!",
             "TRIGGER_SCAN_ALL_FAIL": "Failed to trigger scan all with error: {{error}",
diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
index 2dda77d23..73f41424b 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -443,6 +443,12 @@
             "SCOPE": "LDAP搜索范围",
             "VERIFY_CERT": "LDAP 检查证书"
         },
+        "UAA": {
+            "ENDPOINT": "UAA Endpoint",
+            "CLIENT_ID": "UAA Client ID",
+            "CLIENT_SECRET": "UAA Client Secret",
+            "VERIFY_CERT": "UAA 检查证书"
+        },
         "SCANNING": {
             "TRIGGER_SCAN_ALL_SUCCESS": "启动扫描所有镜像任务成功!",
             "TRIGGER_SCAN_ALL_FAIL": "启动扫描所有镜像任务失败:{{error}",