diff --git a/src/app/users/project-role/ProjectRoleComponent.html b/src/app/users/project-role/ProjectRoleComponent.html
index c093f37..c85b768 100644
--- a/src/app/users/project-role/ProjectRoleComponent.html
+++ b/src/app/users/project-role/ProjectRoleComponent.html
@@ -29,7 +29,9 @@
                     <i class="fas fa-plus-circle"></i> {{'PAGE.USERS.ADDMAPPINGS' | translate}}</button>
             </div>
         </div>
-        <label class="col-sm-12 col-form-label mandatory-label" [ngClass]="{'text-danger': projectRoleForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
+        <label class="col-sm-12 col-form-label mandatory-label"
+            [ngClass]="{'text-danger': projectRoleForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
+            translate}}</label>
         <div *ngFor="let params of getControls(); let i = index;" [formGroupName]="i">
             <div class="form-group row">
                 <label class="col-sm-2 col-form-label" for="project_{{i}}">{{'PROJECT' | translate}}*</label>
@@ -44,9 +46,19 @@
                         formControlName="role_name" id="roles_{{i}}"
                         [ngClass]="{ 'is-invalid': submitted && params.controls.role_name.errors }"></ng-select>
                 </div>
-                <div class="col-sm-1">
-                    <button type="button" class="btn btn-sm btn-danger remove-mapping" (click)="removeMapping(i)">
-                        <i class="fas fa-times-circle"></i>
+                <div class="col-sm-1"
+                    *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name === '' : true">
+                    <button class="button-xs" type="button" class="close mt-2" (click)="removeMapping(i)"
+                        placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
+                        <i class="fas fa-minus-circle text-danger"></i>
+                    </button>
+                </div>
+                <div class="col-sm-1"
+                    *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name !== '' : false">
+                    <button class="button-xs" type="button" class="close mt-2"
+                        (click)="deleteProjectAndRoleMapping(userDetails.project_role_mappings[i])" placement="right"
+                        ngbTooltip="{{ 'DELETE' | translate }}">
+                        <i class="fas fa-trash-alt text-danger"></i>
                     </button>
                 </div>
             </div>
diff --git a/src/app/users/project-role/ProjectRoleComponent.ts b/src/app/users/project-role/ProjectRoleComponent.ts
index f5bb772..600cecd 100644
--- a/src/app/users/project-role/ProjectRoleComponent.ts
+++ b/src/app/users/project-role/ProjectRoleComponent.ts
@@ -37,200 +37,222 @@
  * @Component takes ProjectRole.html as template url
  */
 @Component({
-  templateUrl: './ProjectRoleComponent.html',
-  styleUrls: ['./ProjectRoleComponent.scss']
+    templateUrl: './ProjectRoleComponent.html',
+    styleUrls: ['./ProjectRoleComponent.scss']
 })
 /** Exporting a class @exports ProjectRoleComponent */
 export class ProjectRoleComponent implements OnInit {
-  /** To inject services @public */
-  public injector: Injector;
+    /** To inject services @public */
+    public injector: Injector;
 
-  /** Instance for active modal service @public */
-  public activeModal: NgbActiveModal;
+    /** Instance for active modal service @public */
+    public activeModal: NgbActiveModal;
 
-  /** FormGroup user Edit Account added to the form @ html @public */
-  public projectRoleForm: FormGroup;
+    /** FormGroup user Edit Account added to the form @ html @public */
+    public projectRoleForm: FormGroup;
 
-  /** Form submission Add */
-  public submitted: boolean = false;
+    /** Form submission Add */
+    public submitted: boolean = false;
 
-  /** Input contains Modal dialog component Instance @private */
-  @Input() public userTitle: string;
+    /** Input contains Modal dialog component Instance @private */
+    @Input() public userTitle: string;
 
-  /** Input contains Modal dialog component Instance @private */
-  @Input() public userID: string;
+    /** Input contains Modal dialog component Instance @private */
+    @Input() public userID: string;
 
-  /** Contains user details information @public */
-  public userDetails: UserDetail;
+    /** Contains user details information @public */
+    public userDetails: UserDetail;
 
-  /** Project Role Mapping @public */
-  public projectRoleMap: UserRoleMap = {};
+    /** Project Role Mapping @public */
+    public projectRoleMap: UserRoleMap = {};
 
-  /** Check the loading results @public */
-  public isLoadingResults: boolean = false;
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = false;
 
-  /** Give the message for the loading @public */
-  public message: string = 'PLEASEWAIT';
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
 
-  /** Contains project information @public */
-  public projects: ProjectData[] = [];
+    /** Contains project information @public */
+    public projects: ProjectData[] = [];
 
-  /** Contains roles information @public */
-  public roles: RoleData[] = [];
+    /** Contains roles information @public */
+    public roles: RoleData[] = [];
 
-  /** Instance of the rest service @private */
-  private restService: RestService;
+    /** Instance of the rest service @private */
+    private restService: RestService;
 
-  /** FormBuilder instance added to the formBuilder @private */
-  private formBuilder: FormBuilder;
+    /** FormBuilder instance added to the formBuilder @private */
+    private formBuilder: FormBuilder;
 
-  /** Controls the header form @private */
-  private headers: HttpHeaders;
+    /** Controls the header form @private */
+    private headers: HttpHeaders;
 
-  /** Notifier service to popup notification @private */
-  private notifierService: NotifierService;
+    /** Notifier service to popup notification @private */
+    private notifierService: NotifierService;
 
-  /** Contains tranlsate instance @private */
-  private translateService: TranslateService;
+    /** Contains tranlsate instance @private */
+    private translateService: TranslateService;
 
-  /** Project Role Form array @private */
-  private projectRoleFormArray: FormArray;
+    /** Project Role Form array @private */
+    private projectRoleFormArray: FormArray;
 
-  /** Holds all project details @private */
-  private projectService: ProjectService;
+    /** Holds all project details @private */
+    private projectService: ProjectService;
 
-  constructor(injector: Injector) {
-    this.injector = injector;
-    this.formBuilder = this.injector.get(FormBuilder);
-    this.restService = this.injector.get(RestService);
-    this.activeModal = this.injector.get(NgbActiveModal);
-    this.notifierService = this.injector.get(NotifierService);
-    this.translateService = this.injector.get(TranslateService);
-    this.projectService = this.injector.get(ProjectService);
-    this.initializeForm();
-  }
-
-  /** Generate primitive params @public */
-  get projectRoleParamsBuilder(): FormGroup {
-    return this.formBuilder.group({
-      project_name: [null, [Validators.required]],
-      role_name: [null, [Validators.required]]
-    });
-  }
-
-  /** Lifecyle Hooks the trigger before component is instantiate @public */
-  public ngOnInit(): void {
-    this.headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      Accept: 'application/json',
-      'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
-    });
-    this.getProjects();
-    this.generateData();
-  }
-
-  /** convenience getter for easy access to form fields */
-  get f(): FormGroup['controls'] { return this.projectRoleForm.controls; }
-
-  /** Initializing Form Action  @public */
-  public initializeForm(): void {
-    this.projectRoleForm = this.formBuilder.group({
-      project_role_mappings: this.formBuilder.array([])
-    });
-  }
-
-  /** Handle FormArray Controls @public */
-  public getControls(): AbstractControl[] {
-    // tslint:disable-next-line:no-backbone-get-set-outside-model
-    return (this.projectRoleForm.get('project_role_mappings') as FormArray).controls;
-  }
-
-  /** Fetching the data from server to Load in the smarttable @public */
-  public generateData(): void {
-    if (this.userID !== '') {
-      this.isLoadingResults = true;
-      this.restService.getResource(environment.USERS_URL + '/' + this.userID).subscribe((userDetails: UserDetail) => {
-        this.userDetails = userDetails;
-        this.loadMapping();
-        this.isLoadingResults = false;
-      }, (error: ERRORDATA) => {
-        this.isLoadingResults = false;
-        this.restService.handleError(error, 'get');
-      });
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.formBuilder = this.injector.get(FormBuilder);
+        this.restService = this.injector.get(RestService);
+        this.activeModal = this.injector.get(NgbActiveModal);
+        this.notifierService = this.injector.get(NotifierService);
+        this.translateService = this.injector.get(TranslateService);
+        this.projectService = this.injector.get(ProjectService);
     }
-  }
-  /** Fetching the projects information @public */
-  public getProjects(): void {
-    this.isLoadingResults = true;
-    this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectData[]) => {
-      this.projects = projectsData;
-      this.getRoles();
-    }, (error: ERRORDATA) => {
-      this.isLoadingResults = false;
-      this.restService.handleError(error, 'get');
-    });
-  }
 
-  /** Fetching the Roles information @public */
-  public getRoles(): void {
-    this.restService.getResource(environment.ROLES_URL).subscribe((rolesData: RoleData[]) => {
-      this.roles = rolesData;
-      this.isLoadingResults = false;
-    }, (error: ERRORDATA) => {
-      this.isLoadingResults = false;
-      this.restService.handleError(error, 'get');
-    });
-  }
-
-  /** Set all roles and project values to the form @public */
-  public loadMapping(): void {
-    this.userDetails.project_role_mappings.forEach((data: ProjectRoleMappings) => {
-      // tslint:disable-next-line:no-backbone-get-set-outside-model
-      this.projectRoleFormArray = this.projectRoleForm.get('project_role_mappings') as FormArray;
-      this.projectRoleFormArray.push(this.projectRoleParamsBuilder);
-    });
-    this.projectRoleForm.patchValue(this.userDetails);
-  }
-
-  /** Remove project and roles from the list @public */
-  public removeMapping(index: number): void {
-    this.projectRoleFormArray.removeAt(index);
-  }
-
-  /** Submit project and roles @public */
-  public addProjectRole(): void {
-    this.submitted = true;
-    const modalData: MODALCLOSERESPONSEDATA = {
-      message: 'Done'
-    };
-    if (this.projectRoleForm.invalid) { return; }
-    const apiURLHeader: APIURLHEADER = {
-      url: environment.USERS_URL + '/' + this.userID
-    };
-    this.projectRoleMap.project_role_mappings = [];
-    this.projectRoleForm.value.project_role_mappings.forEach((res: ProjectRoleMappings) => {
-      this.projectRoleMap.project_role_mappings.push({ project: res.project_name, role: res.role_name });
-    });
-    if (this.projectRoleMap.project_role_mappings.length !== 0) {
-      this.isLoadingResults = true;
-      this.restService.patchResource(apiURLHeader, this.projectRoleMap).subscribe((result: {}) => {
-        this.isLoadingResults = false;
-        this.activeModal.close(modalData);
-        this.projectService.setHeaderProjects();
-        this.notifierService.notify('success', this.translateService.instant('PAGE.USERS.EDITEDSUCCESSFULLY'));
-      }, (error: ERRORDATA) => {
-        this.isLoadingResults = false;
-        this.restService.handleError(error, 'patch');
-      });
-    } else {
-      this.notifierService.notify('error', this.translateService.instant('PAGE.USERS.EDITPROJECTROLEERROR'));
+    /** Generate primitive params @public */
+    get projectRoleParamsBuilder(): FormGroup {
+        return this.formBuilder.group({
+            project_name: [null, [Validators.required]],
+            role_name: [null, [Validators.required]]
+        });
     }
-  }
 
-  /** Add extra mapping and set empty project and roles @public */
-  public addMapping(): void {
-    // tslint:disable-next-line:no-backbone-get-set-outside-model
-    this.projectRoleFormArray = this.projectRoleForm.get('project_role_mappings') as FormArray;
-    this.projectRoleFormArray.push(this.projectRoleParamsBuilder);
-  }
+    /** convenience getter for easy access to form fields */
+    get f(): FormGroup['controls'] { return this.projectRoleForm.controls; }
+
+    /** Lifecyle Hooks the trigger before component is instantiate @public */
+    public ngOnInit(): void {
+        this.headers = new HttpHeaders({
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
+        });
+        this.initializeForm();
+        this.getProjects();
+        this.generateData();
+    }
+
+    /** Initializing Form Action  @public */
+    public initializeForm(): void {
+        this.projectRoleForm = this.formBuilder.group({
+            project_role_mappings: this.formBuilder.array([])
+        });
+    }
+
+    /** Handle FormArray Controls @public */
+    public getControls(): AbstractControl[] {
+        // tslint:disable-next-line:no-backbone-get-set-outside-model
+        return (this.projectRoleForm.get('project_role_mappings') as FormArray).controls;
+    }
+
+    /** Fetching the data from server to Load in the smarttable @public */
+    public generateData(): void {
+        if (this.userID !== '') {
+            this.isLoadingResults = true;
+            this.restService.getResource(environment.USERS_URL + '/' + this.userID).subscribe((userDetails: UserDetail): void => {
+                this.userDetails = userDetails;
+                this.loadMapping();
+                this.isLoadingResults = false;
+            }, (error: ERRORDATA): void => {
+                this.isLoadingResults = false;
+                this.restService.handleError(error, 'get');
+            });
+        }
+    }
+    /** Fetching the projects information @public */
+    public getProjects(): void {
+        this.isLoadingResults = true;
+        this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectData[]): void => {
+            this.projects = projectsData;
+            this.getRoles();
+        }, (error: ERRORDATA): void => {
+            this.isLoadingResults = false;
+            this.restService.handleError(error, 'get');
+        });
+    }
+
+    /** Fetching the Roles information @public */
+    public getRoles(): void {
+        this.restService.getResource(environment.ROLES_URL).subscribe((rolesData: RoleData[]): void => {
+            this.roles = rolesData;
+            this.isLoadingResults = false;
+        }, (error: ERRORDATA): void => {
+            this.isLoadingResults = false;
+            this.restService.handleError(error, 'get');
+        });
+    }
+
+    /** Set all roles and project values to the form @public */
+    public loadMapping(): void {
+        this.userDetails.project_role_mappings.forEach((data: ProjectRoleMappings): void => {
+            // tslint:disable-next-line:no-backbone-get-set-outside-model
+            this.projectRoleFormArray = this.projectRoleForm.get('project_role_mappings') as FormArray;
+            this.projectRoleFormArray.push(this.projectRoleParamsBuilder);
+        });
+        this.projectRoleForm.patchValue(this.userDetails);
+    }
+
+    /** Remove project and roles from the list @public */
+    public removeMapping(index: number): void {
+        this.projectRoleFormArray.removeAt(index);
+    }
+
+    /** Submit project and roles @public */
+    public addProjectRole(): void {
+        this.submitted = true;
+        const modalData: MODALCLOSERESPONSEDATA = {
+            message: 'Done'
+        };
+        if (this.projectRoleForm.invalid) { return; }
+        const apiURLHeader: APIURLHEADER = {
+            url: environment.USERS_URL + '/' + this.userID
+        };
+        this.projectRoleMap.project_role_mappings = [];
+        this.projectRoleForm.value.project_role_mappings.forEach((res: ProjectRoleMappings): void => {
+            this.projectRoleMap.project_role_mappings.push({ project: res.project_name, role: res.role_name });
+        });
+        if (this.projectRoleMap.project_role_mappings.length !== 0) {
+            this.isLoadingResults = true;
+            this.restService.patchResource(apiURLHeader, this.projectRoleMap).subscribe((result: {}): void => {
+                this.isLoadingResults = false;
+                this.activeModal.close(modalData);
+                this.projectService.setHeaderProjects();
+                this.notifierService.notify('success', this.translateService.instant('PAGE.USERS.EDITEDSUCCESSFULLY'));
+            }, (error: ERRORDATA): void => {
+                this.isLoadingResults = false;
+                this.restService.handleError(error, 'patch');
+            });
+        } else {
+            this.notifierService.notify('error', this.translateService.instant('PAGE.USERS.EDITPROJECTROLEERROR'));
+        }
+    }
+
+    /** Add extra mapping and set empty project and roles @public */
+    public addMapping(): void {
+        // tslint:disable-next-line:no-backbone-get-set-outside-model
+        this.projectRoleFormArray = this.projectRoleForm.get('project_role_mappings') as FormArray;
+        this.projectRoleFormArray.push(this.projectRoleParamsBuilder);
+    }
+
+    /** Remove project and roles for the user @public */
+    public deleteProjectAndRoleMapping(getProjectRoles: ProjectRoleMappings): void {
+        const modalData: MODALCLOSERESPONSEDATA = {
+            message: 'Done'
+        };
+        const removeProjectRole: UserRoleMap = { remove_project_role_mappings: [] };
+        removeProjectRole.remove_project_role_mappings = [{ project: getProjectRoles.project_name, role: getProjectRoles.role_name }];
+        const apiURLHeader: APIURLHEADER = {
+            url: environment.USERS_URL + '/' + this.userID
+        };
+        this.isLoadingResults = true;
+        this.restService.patchResource(apiURLHeader, removeProjectRole).subscribe((result: {}): void => {
+            this.isLoadingResults = false;
+            this.activeModal.close(modalData);
+            this.projectService.setHeaderProjects();
+            this.notifierService.notify('success', this.translateService.instant('PAGE.USERS.EDITEDSUCCESSFULLY'));
+        }, (error: ERRORDATA): void => {
+            this.isLoadingResults = false;
+            this.restService.handleError(error, 'patch');
+        });
+    }
 }
diff --git a/src/models/MenuModel.ts b/src/models/MenuModel.ts
index 0b49db8..deb9654 100644
--- a/src/models/MenuModel.ts
+++ b/src/models/MenuModel.ts
@@ -247,7 +247,7 @@
         liClass: 'round-edge-bottom-3',
         anchorTagClass: 'link round-edge-bottom-3 individual',
         clickFunction: 'nosubmenu',
-        routerLink: '/roles',
+        routerLink: '/roles/details',
         routerLinkActive: ['parentactive'],
         routerLinkActiveOptions: true,
         icon: 'fas fa-user-tag',
diff --git a/src/models/UserModel.ts b/src/models/UserModel.ts
index 83dd08b..64626c8 100644
--- a/src/models/UserModel.ts
+++ b/src/models/UserModel.ts
@@ -42,6 +42,7 @@
 /** Interface for user role mappings */
 export interface UserRoleMap {
     project_role_mappings?: ProjectRoleMappings[];
+    remove_project_role_mappings?: ProjectRoleMappings[];
 }
 
 /** Interface for Admin */
diff --git a/src/services/AuthInterceptorService.ts b/src/services/AuthInterceptorService.ts
index 4a66482..8c5a9d7 100644
--- a/src/services/AuthInterceptorService.ts
+++ b/src/services/AuthInterceptorService.ts
@@ -93,8 +93,12 @@
             });
         } else {
             this.clonedReq = req.clone({
-                setHeaders: { Authorization: 'Bearer ' + idToken, 'Content-Type': 'charset=UTF-8',
-                'Cache-Control': 'no-cache', Pragma: 'no-cache' }
+                setHeaders: {
+                    Authorization: 'Bearer ' + idToken,
+                    'Content-Type': 'charset=UTF-8',
+                    'Cache-Control': 'no-cache',
+                    Pragma: 'no-cache'
+                }
             });
         }
     }
@@ -119,7 +123,7 @@
 
     /** Method to handle  401, 403 & 502 error */
     private handleError(err: HttpErrorResponse): void {
-        if (err.error.detail !== 'Access denied: lack of permissions.') {
+        if (err.error.detail !== 'Access denied: lack of permissions.' && err.error.detail !== 'You cannot remove system_admin role from admin user') {
             this.notifierService.hideAll();
             this.authService.logoutResponse();
             if (this.authService.handle401) {