diff --git a/environments/environment.ts b/environments/environment.ts
index f7e6166d..9acd7cd9 100644
--- a/environments/environment.ts
+++ b/environments/environment.ts
@@ -1,5 +1,8 @@
 export const environment = {
-  dfAdminApiKey: '6498a8ad1beb9d84d63035c5d1120c007fad6de706734db9689f8996707e0f7d',
-  dfApiDocsApiKey: '36fda24fe5588fa4285ac6c6c2fdfbdb6b6bc9834699774c9bf777f706d05a88',
-  dfFileManagerApiKey: 'b5cb82af7b5d4130f36149f90aa2746782e59a872ac70454ac188743cb55b0ba',
+  dfAdminApiKey:
+    '6498a8ad1beb9d84d63035c5d1120c007fad6de706734db9689f8996707e0f7d',
+  dfApiDocsApiKey:
+    '36fda24fe5588fa4285ac6c6c2fdfbdb6b6bc9834699774c9bf777f706d05a88',
+  dfFileManagerApiKey:
+    'b5cb82af7b5d4130f36149f90aa2746782e59a872ac70454ac188743cb55b0ba',
 };
diff --git a/src/app/adf-roles/df-role-details/df-role-details.component.html b/src/app/adf-roles/df-role-details/df-role-details.component.html
index 14b231dc..c206b26c 100644
--- a/src/app/adf-roles/df-role-details/df-role-details.component.html
+++ b/src/app/adf-roles/df-role-details/df-role-details.component.html
@@ -32,6 +32,7 @@
 
   <div formArrayName="serviceAccess" class="full-width">
     <df-roles-access
+      [visible]="visibilityArray"
       [formArray]="serviceAccess"
       [roleForm]="roleForm"
       class="full-width"></df-roles-access>
diff --git a/src/app/adf-roles/df-role-details/df-role-details.component.ts b/src/app/adf-roles/df-role-details/df-role-details.component.ts
index 71e8a954..a52d768b 100644
--- a/src/app/adf-roles/df-role-details/df-role-details.component.ts
+++ b/src/app/adf-roles/df-role-details/df-role-details.component.ts
@@ -60,6 +60,7 @@ export class DfRoleDetailsComponent implements OnInit {
   alertMsg = '';
   showAlert = false;
   alertType: AlertType = 'error';
+  visibilityArray: boolean[] = [];
 
   constructor(
     @Inject(ROLE_SERVICE_TOKEN)
@@ -100,6 +101,7 @@ export class DfRoleDetailsComponent implements OnInit {
           this.filterOp = data.roleServiceAccessByRoleId[0].filterOp;
           data.roleServiceAccessByRoleId.forEach(
             (item: RoleServiceAccessType) => {
+              this.visibilityArray.push(true);
               const advancedFilters = new FormArray(
                 (item.filters || []).map(
                   (each: any) =>
@@ -266,7 +268,7 @@ export class DfRoleDetailsComponent implements OnInit {
       description: formValue.description,
       isActive: formValue.active,
       roleServiceAccessByRoleId: formValue.serviceAccess.map(
-        (val: AccessForm) => {
+        (val: AccessForm, index: number) => {
           const filtersArray = val.advancedFilters.map((filter: any) => ({
             name: filter.expandField,
             operator: filter.expandOperator,
@@ -275,8 +277,10 @@ export class DfRoleDetailsComponent implements OnInit {
           const filterOp = val.advancedFilters.map(
             (filter: any) => filter.filterOp
           );
+          const roleId = this.visibilityArray[index] ? formValue.id : null;
           return {
             id: val.id,
+            roleId: roleId,
             serviceId: val.service === 0 ? null : val.service,
             component: val.component,
             verbMask: val.access.reduce((acc, cur) => acc + cur, 0), // add up all the values in the array
diff --git a/src/app/adf-roles/df-roles-access/df-roles-access.component.ts b/src/app/adf-roles/df-roles-access/df-roles-access.component.ts
index 66db9615..2062ee33 100644
--- a/src/app/adf-roles/df-roles-access/df-roles-access.component.ts
+++ b/src/app/adf-roles/df-roles-access/df-roles-access.component.ts
@@ -69,6 +69,7 @@ import { CommonModule } from '@angular/common';
 export class DfRolesAccessComponent implements OnInit {
   @Input() formArray: FormArray;
   @Input() roleForm: FormGroup;
+  @Input() visible: boolean[];
   rootForm: FormGroup;
   serviceAccess: FormArray;
   dataSource: MatTableDataSource<any>;
@@ -268,8 +269,10 @@ export class DfRolesAccessComponent implements OnInit {
   }
 
   updateDataSource() {
-    if (!this.formArray) return;
-    this.dataSource = new MatTableDataSource(this.formArray.controls);
+    const visibleControls = this.formArray.controls.filter(
+      (control, index) => this.visible[index]
+    );
+    this.dataSource = new MatTableDataSource(visibleControls);
   }
 
   get hasServiceAccess() {
@@ -290,7 +293,7 @@ export class DfRolesAccessComponent implements OnInit {
         serviceAccess: new FormControl(''),
       })
     );
-
+    this.visible.push(true);
     this.updateDataSource();
   }
 
@@ -320,7 +323,9 @@ export class DfRolesAccessComponent implements OnInit {
   }
 
   remove(index: number) {
-    this.formArray.removeAt(index);
+    if (index >= 0 && index < this.formArray.length) {
+      this.visible[index] = false;
+    }
     this.updateDataSource();
   }
 
diff --git a/src/app/shared/interceptors/session-token.interceptor.ts b/src/app/shared/interceptors/session-token.interceptor.ts
index e732c488..d340a9b5 100644
--- a/src/app/shared/interceptors/session-token.interceptor.ts
+++ b/src/app/shared/interceptors/session-token.interceptor.ts
@@ -16,12 +16,15 @@ export const sessionTokenInterceptor: HttpInterceptorFn = (
   next: HttpHandlerFn
 ) => {
   if (req.url.startsWith('/api')) {
-    const isApiDocs = req.urlWithParams.includes('swagger') ||
-                              req.url.includes('service_type') ||
-                              req.url.includes('api_docs');
+    const isApiDocs =
+      req.urlWithParams.includes('swagger') ||
+      req.url.includes('service_type') ||
+      req.url.includes('api_docs');
     req = req.clone({
       setHeaders: {
-        [API_KEY_HEADER]: isApiDocs ? environment.dfApiDocsApiKey : environment.dfAdminApiKey,
+        [API_KEY_HEADER]: isApiDocs
+          ? environment.dfApiDocsApiKey
+          : environment.dfAdminApiKey,
       },
     });
     const userDataService = inject(DfUserDataService);