diff --git a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html
index 09cf43c3a..315af6583 100644
--- a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html
+++ b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html
@@ -45,10 +45,10 @@
           <label for="destination_url" class="col-md-4 form-group-label-override required">{{ 'DESTINATION.URL' |
             translate }}</label>
           <label class="col-md-8" for="destination_url" aria-haspopup="true" role="tooltip" [class.invalid]="targetEndpoint?.errors && (targetEndpoint?.dirty || targetEndpoint?.touched)"
-                 [class.valid]="targetEndpoint?.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
+                 [class.valid]="targetEndpoint?.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left clr-select-wrapper">
             <input *ngIf="!endpointList.length" type="text" id="destination_url" [disabled]="testOngoing || urlDisabled" [readonly]="!editable" [(ngModel)]="target.url"
                    size="25" name="endpointUrl" #targetEndpoint="ngModel" required placeholder="http(s)://192.168.1.1">
-            <select *ngIf="endpointList.length" [(ngModel)]="target.url" name="endpointUrl" #targetEndpoint="ngModel">
+            <select *ngIf="endpointList.length" [(ngModel)]="target.url" class="clr-select" name="endpointUrl" #targetEndpoint="ngModel">
               <option class="display-none" value=""></option>
               <option *ngFor="let endpoint of endpointList" value="{{endpoint.value}}">{{endpoint.key}}</option>
             </select>
diff --git a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
index 7d6daa5b7..28d7624e4 100644
--- a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
+++ b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
@@ -34,6 +34,14 @@ import { clone, compareValue, isEmptyObject } from "../utils";
 const FAKE_PASSWORD = "rjGcfuRu";
 const FAKE_JSON_KEY = "No Change";
 const DOCKERHUB_URL = "https://hub.docker.com";
+const HELM_HUB_URL = "https://hub.helm.sh";
+const HELM_HUB_ACCESS_KEY = "_json_key";
+const REGISTRY_NAME_LIST = {
+  DOCKER_HUB: "docker-hub",
+  HELM_HUB: "helm-hub",
+  GOOGLE_GCR: "google-gcr",
+  AWS_ECR: "aws-ecr"
+};
 @Component({
   selector: "hbr-create-edit-endpoint",
   templateUrl: "./create-edit-endpoint.component.html",
@@ -214,19 +222,22 @@ export class CreateEditEndpointComponent
 
   adapterChange($event): void {
     let selectValue = this.targetForm.controls.adapter.value;
-    if (selectValue === 'docker-hub') {
+    if (selectValue === REGISTRY_NAME_LIST.DOCKER_HUB) {
       this.urlDisabled = true;
       this.targetForm.controls.endpointUrl.setValue(DOCKERHUB_URL);
+    } else if (selectValue === REGISTRY_NAME_LIST.HELM_HUB) {
+      this.urlDisabled = true;
+      this.targetForm.controls.endpointUrl.setValue(HELM_HUB_URL);
     } else {
       this.urlDisabled = false;
       this.targetForm.controls.endpointUrl.setValue("");
     }
-    if (selectValue === 'google-gcr') {
-      this.targetForm.controls.access_key.setValue("_json_key");
+    if (selectValue === REGISTRY_NAME_LIST.GOOGLE_GCR) {
+      this.targetForm.controls.access_key.setValue(HELM_HUB_ACCESS_KEY);
     } else {
       this.targetForm.controls.access_key.setValue("");
     }
-    if (selectValue === 'google-gcr') {
+    if (selectValue === REGISTRY_NAME_LIST.GOOGLE_GCR) {
       this.endpointList = [
         {
           key: "gcr.io",
@@ -245,7 +256,7 @@ export class CreateEditEndpointComponent
           value: "https://asia.gcr.io"
         }
       ];
-    } else if (selectValue === 'aws-ecr') {
+    } else if (selectValue === REGISTRY_NAME_LIST.AWS_ECR) {
       this.endpointList = [
         {
           key: "ap-northeast-1",