diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
index 22158f8c8..d64db10c6 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
@@ -86,26 +86,35 @@
             <span class="spinner"></span>
         </div>
     </div>
-    <clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
-        <h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate}}</h3>
+    <clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
+        <h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate | titlecase}}</h3>
         <div class="modal-body">
             <form #chartUploadForm="ngForm" enctype="multipart/form-data" (ngSubmit)="upload()">
                 <section class="form-block">
                     <div class="form-group">
-                        <label for="chart"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
-                        <input type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
+                        <label class="filename-label"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
+                        <input class="filename-input" type="text" placeholder="{{this.chartFile?.name || 'BUTTON.NO_FILE' | translate}}" disabled>
+                        <label for="chart" class="btn btn-secondary btn-sm file-browser-btn">{{'BUTTON.BROWSE' | translate}}</label>
+                        <input class="file-input" type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
                     </div>
                     <div class="form-group">
-                        <label for="prov"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
-                        <input type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
+                        <label class="filename-label"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
+                        <input class="filename-input" type="text" placeholder="{{this.provFile?.name || 'BUTTON.NO_FILE' | translate}}" disabled>
+                        <label for="prov" class="btn btn-secondary btn-sm file-browser-btn">{{'BUTTON.BROWSE' | translate}}</label>
+                        <input class="file-input" type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
                     </div>
                 </section>
-                <button type="submit" class="btn btn-secondary" [disabled]="isUploading">
-                    <span>{{'HELM_CHART.UPLOAD' | translate}}</span>
-                </button>
-                <span *ngIf="isUploading" class="spinner spinner-inline">
-                    Loading...
-                </span>
+                <div class="row flex-items-xs-right">
+                    <button class="btn btn-secondary" [disabled]="isUploading" (click)="cancelUpload()">
+                        <span>{{'BUTTON.CANCEL' | translate}}</span>
+                    </button>
+                    <button type="submit" class="btn btn-primary" [disabled]="isUploading">
+                        <span>{{'HELM_CHART.UPLOAD' | translate}}</span>
+                        <span *ngIf="isUploading" class="spinner spinner-inline">
+                            Loading...
+                        </span>
+                    </button>
+                </div>
             </form>
         </div>
     </clr-modal>
diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss b/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
index f3ea44d18..c5e0f8725 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
@@ -76,4 +76,35 @@ $size60:60px;
 
 .margin-right-12 {
     margin-right:12px;
+}
+
+.file-input {
+    display: none;
+}
+
+.filename-span {
+    @include text-overflow;
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+}
+
+clr-modal {
+    .form-group {
+        padding-left: 6rem;
+
+        .filename-label {
+            padding-top: 9px;
+        }
+
+        .filename-input {
+            margin-top: 12px;
+            width: 68%;
+        }
+    
+        .file-browser-btn {
+            margin-left: 15px;
+            max-width: 25%;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
index 2ebd20e6a..7006a87e6 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
@@ -17,6 +17,7 @@ import { ErrorHandler } from "../error-handler/error-handler";
 import { toPromise, DEFAULT_PAGE_SIZE } from "../utils";
 import { HelmChartService } from "../service/helm-chart.service";
 import { DefaultHelmIcon} from "../shared/shared.const";
+import { Roles } from './../shared/shared.const';
 
 @Component({
   selector: "hbr-helm-chart",
@@ -30,7 +31,7 @@ export class HelmChartComponent implements OnInit {
   @Input() projectName = "unknown";
   @Input() urlPrefix: string;
   @Input() hasSignedIn: boolean;
-  @Input() projectRoleID = 0;
+  @Input() projectRoleID = Roles.OTHER;
   @Input() hasProjectAdminRole: boolean;
   @Output() chartClickEvt = new EventEmitter<any>();
   @Output() chartDownloadEve = new EventEmitter<string>();
@@ -74,8 +75,7 @@ export class HelmChartComponent implements OnInit {
   }
 
   public get developerRoleOrAbove(): boolean {
-    // 1: admin, 2: developer, 3: guest
-    return this.projectRoleID === 2 || this.hasProjectAdminRole;
+    return this.projectRoleID === Roles.DEVELOPER || this.hasProjectAdminRole;
   }
 
   ngOnInit(): void {
@@ -117,13 +117,22 @@ export class HelmChartComponent implements OnInit {
     this.chartClickEvt.emit(item.name);
   }
 
-  onChartUpload() {
+  resetUploadForm() {
     this.chartFile = null;
     this.provFile = null;
     this.uploadForm.reset();
+  }
+
+  onChartUpload() {
+    this.resetUploadForm();
     this.isUploadModalOpen = true;
   }
 
+  cancelUpload() {
+    this.resetUploadForm();
+    this.isUploadModalOpen = false;
+  }
+
   upload() {
     if (!this.chartFile && !this.provFile) {
       return;
diff --git a/src/ui_ng/lib/src/shared/shared.const.ts b/src/ui_ng/lib/src/shared/shared.const.ts
index c2c0d3750..7df04c52e 100644
--- a/src/ui_ng/lib/src/shared/shared.const.ts
+++ b/src/ui_ng/lib/src/shared/shared.const.ts
@@ -92,3 +92,10 @@ export const LabelColor = [
 export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' };
 
 export const DefaultHelmIcon = '/static/images/helm-gray.png';
+
+export enum Roles {
+  PROJECT_ADMIN = 1,
+  DEVELOPER = 2,
+  GUEST = 3,
+  OTHER = 0,
+}
diff --git a/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts b/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
index 2abe7f009..bc3c2e1b9 100644
--- a/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
+++ b/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
@@ -5,7 +5,6 @@ import { Component, OnInit } from '@angular/core';
 import { Project } from './../project';
 import { SessionUser } from './../../shared/session-user';
 import { SessionService } from './../../shared/session.service';
-import { RoleMapping } from '../../shared/shared.const';
 
 @Component({
   selector: 'list-chart-version',
diff --git a/src/ui_ng/src/app/project/member/add-group/add-group.component.ts b/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
index 8e0327eca..82f7ffb74 100644
--- a/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
+++ b/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
@@ -89,6 +89,7 @@ export class AddGroupComponent implements OnInit {
   }
 
   resetModaldata() {
+    this.createGroupMode = false;
     this.group = new UserGroup();
     this.selectedRole = 1;
     this.selectedGroups = [];
diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.ts b/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
index 02f433f39..ac7a60694 100644
--- a/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
+++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
@@ -19,7 +19,6 @@ import { Project } from '../project';
 import { SessionService } from '../../shared/session.service';
 import { ProjectService } from '../../project/project.service';
 
-import { RoleMapping } from '../../shared/shared.const';
 import {AppConfigService} from "../../app-config.service";
 
 @Component({
diff --git a/src/ui_ng/src/app/project/project-routing-resolver.service.ts b/src/ui_ng/src/app/project/project-routing-resolver.service.ts
index 1b92711f8..db83bb0d8 100644
--- a/src/ui_ng/src/app/project/project-routing-resolver.service.ts
+++ b/src/ui_ng/src/app/project/project-routing-resolver.service.ts
@@ -20,6 +20,8 @@ import { ProjectService } from './project.service';
 import { SessionService } from '../shared/session.service';
 import 'rxjs/add/operator/mergeMap';
 
+import { Roles } from '../shared/shared.const'
+
 @Injectable()
 export class ProjectRoutingResolver implements Resolve<Project> {
 
@@ -46,7 +48,7 @@ export class ProjectRoutingResolver implements Resolve<Project> {
               project.is_member = true;
               project.role_name = 'MEMBER.SYS_ADMIN';
             } else {
-              project.has_project_admin_role = (project.current_user_role_id === 1);
+              project.has_project_admin_role = (project.current_user_role_id === Roles.PROJECT_ADMIN);
               project.is_member = (project.current_user_role_id > 0);
               project.role_name = RoleInfo[project.current_user_role_id];
             }
diff --git a/src/ui_ng/src/app/shared/shared.const.ts b/src/ui_ng/src/app/shared/shared.const.ts
index 2478447e2..2fa65d081 100644
--- a/src/ui_ng/src/app/shared/shared.const.ts
+++ b/src/ui_ng/src/app/shared/shared.const.ts
@@ -83,3 +83,10 @@ export const ProjectRoles = [
   { id: 2, value: "MEMBER.DEVELOPER" },
   { id: 3, value: "MEMBER.GUEST" }
 ];
+
+export enum Roles {
+  PROJECT_ADMIN = 1,
+  DEVELOPER = 2,
+  GUEST = 3,
+  OTHER = 0,
+}
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 b6c306bba..af3c8793c 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -36,7 +36,10 @@
         "EDIT": "EDIT",
         "SWITCH": "SWITCH",
         "REPLICATE": "REPLICATE",
-        "ACTIONS": "Actions"
+        "ACTIONS": "Actions",
+        "BROWSE": "Browse",
+        "UPLOAD": "Upload",
+        "NO_FILE": "No file selected"
     },
     "BATCH": {
         "DELETED_SUCCESS": "Deleted successfully",
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 6bbcff786..dbb18db27 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -36,8 +36,10 @@
         "EDIT": "EDITAR",
         "SWITCH": "SWITCH",
         "REPLICATE": "REPLICATE",
-        "ACTIONS": "Actions"
-
+        "ACTIONS": "Actions",
+        "BROWSE": "Browse",
+        "UPLOAD": "Upload",
+        "NO_FILE": "No file selected"
     },
     "BATCH": {
         "DELETED_SUCCESS": "Deleted successfully",
diff --git a/src/ui_ng/src/i18n/lang/fr-fr-lang.json b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
index 25a76ca03..0e29e2971 100644
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@@ -33,7 +33,10 @@
         "NO": "NON",
         "NEGATIVE": "NEGATIF",
         "COPY": "COPIER",
-        "ACTIONS": "Actions"
+        "ACTIONS": "Actions",
+        "BROWSE": "Browse",
+        "UPLOAD": "Upload",
+        "NO_FILE": "No file selected"
     },
     "TOOLTIP": {
         "EMAIL": "L'email doit être une adresse email valide comme name@example.com.",
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 88686fd82..52d432a0a 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -36,7 +36,10 @@
         "EDIT": "编辑",
         "SWITCH": "切换",
         "REPLICATE": "复制",
-        "ACTIONS": "操作"
+        "ACTIONS": "操作",
+        "BROWSE": "选择文件",
+        "UPLOAD": "上传",
+        "NO_FILE": "未选择文件"
     },
     "BATCH": {
         "DELETED_SUCCESS": "删除成功",