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 02422d7e..928fb3dc 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
@@ -52,7 +52,7 @@ import { CommonModule } from '@angular/common';
   ],
   animations: [
     trigger('detailExpand', [
-      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+      state('collapsed,void', style({ height: '*', minHeight: '0' })),
       state('expanded', style({ height: '*' })),
       transition(
         'expanded <=> collapsed',
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
index 24ddb5d6..114c940d 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.html
+++ b/src/app/adf-services/df-service-details/df-service-details.component.html
@@ -364,14 +364,22 @@ <h4 class="text-center" style="color: black !important">
                   <mat-button-toggle value="0">JSON</mat-button-toggle>
                   <mat-button-toggle value="1">YAML</mat-button-toggle>
                 </mat-button-toggle-group>
-                <mat-form-field class="full-width" appearance="outline">
+                <mat-label class="full-width">Service Definition</mat-label>
+                <df-script-editor
+                  [type]="getControl('type')"
+                  [storageServiceId]="getConfigControl('storageServiceId')"
+                  [storagePath]="getConfigControl('storagePath')"
+                  [content]="getConfigControl('serviceDefinition')"
+                  [cache]="serviceData ? serviceData.name : ''"
+                  class="full-width"></df-script-editor>
+                <!-- <mat-form-field class="full-width" appearance="outline">
                   <mat-label>Service Definition</mat-label>
                   <textarea
                     matInput
                     rows="10"
                     [(ngModel)]="serviceDefinition"
                     [ngModelOptions]="{ standalone: true }"></textarea>
-                </mat-form-field>
+                </mat-form-field> -->
               </ng-container>
 
               <!-- <ng-container *ngIf="this.isNetworkService">
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts
index 980a07d9..e910c31a 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.ts
+++ b/src/app/adf-services/df-service-details/df-service-details.component.ts
@@ -27,7 +27,10 @@ import { TranslocoPipe } from '@ngneat/transloco';
 import { DfArrayFieldComponent } from 'src/app/shared/components/df-field-array/df-array-field.component';
 import { DfDynamicFieldComponent } from 'src/app/shared/components/df-dynamic-field/df-dynamic-field.component';
 import { ConfigSchema, ServiceType } from 'src/app/shared/types/service';
-import { snakeToCamelString } from 'src/app/shared/utilities/case';
+import {
+  camelToSnakeString,
+  snakeToCamelString,
+} from 'src/app/shared/utilities/case';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -191,6 +194,9 @@ export class DfServiceDetailsComponent implements OnInit {
             );
           }
         }
+        if (data?.serviceDocByServiceId.content) {
+          data.config.serviceDefinition = data?.serviceDocByServiceId.content;
+        }
         this.serviceData = data;
         if (this.edit) {
           this.configSchema = this.getConfigSchema(data.type);
@@ -199,8 +205,9 @@ export class DfServiceDetailsComponent implements OnInit {
             ...data,
             config: data.config,
           });
-          (this.serviceDefinition = data?.serviceDocByServiceId.content),
-            this.serviceForm.controls['type'].disable();
+
+          this.serviceDefinitionType = '' + data?.serviceDocByServiceId.format;
+          this.serviceForm.controls['type'].disable();
         } else {
           this.serviceForm.controls['type'].valueChanges.subscribe(value => {
             this.serviceForm.removeControl('config');
@@ -231,6 +238,19 @@ export class DfServiceDetailsComponent implements OnInit {
           new FormControl(control.default, validator)
         );
       });
+      const contentConfigControl = this.configSchema.filter(
+        control => control.name === 'content'
+      )?.[0];
+      if (contentConfigControl) {
+        const validator = [];
+        if (contentConfigControl.required) {
+          validator.push(Validators.required);
+        }
+        config?.addControl(
+          'serviceDefinition',
+          new FormControl(contentConfigControl.default, validator)
+        );
+      }
       this.serviceForm?.addControl('config', config);
     }
   }
@@ -262,20 +282,36 @@ export class DfServiceDetailsComponent implements OnInit {
         ?.configSchema.map(control => ({
           ...control,
           name: snakeToCamelString(control.name),
+          items:
+            control.type === 'array'
+              ? [
+                  ...((control.items as ConfigSchema[]) || []).map(
+                    (each: ConfigSchema) => ({
+                      ...each,
+                      name: snakeToCamelString(each.name),
+                    })
+                  ),
+                ]
+              : control.items,
         })) ?? []
     );
   }
 
   get viewSchema() {
-    return this.configSchema?.filter(
+    const result = this.configSchema?.filter(
       control => !['storageServiceId', 'storagePath'].includes(control.name)
     );
+    return result;
   }
 
   getConfigControl(name: string) {
     return this.serviceForm.get(`config.${name}`) as FormControl;
   }
 
+  getServiceDefinitionControl() {
+    return this.serviceForm.get('serviceDefinition') as FormControl;
+  }
+
   getControl(name: string) {
     return this.serviceForm.controls[name] as FormControl;
   }
@@ -287,8 +323,8 @@ export class DfServiceDetailsComponent implements OnInit {
     const data = this.serviceForm.getRawValue();
 
     type Params = {
-      snackbarError: string;
-      snackbarSuccess: string;
+      snackbarError?: string;
+      snackbarSuccess?: string;
       fields?: string;
       related?: string;
     };
@@ -314,15 +350,74 @@ export class DfServiceDetailsComponent implements OnInit {
         fields: '*',
         related: 'service_doc_by_service_id',
       };
-      data.service_doc_by_service_id = null;
-      data.config.content = this.serviceDefinition;
+      // data.service_doc_by_service_id = null;
+      // data.config.content = this.serviceDefinition;
+      data.service_doc_by_service_id.content = data.config.serviceDefinition;
+      data.service_doc_by_service_id.format = Number(
+        this.serviceDefinitionType
+      );
+      delete data.config.serviceDefinition;
     } else {
       delete data.service_doc_by_service_id;
     }
 
+    let payload;
+    if (data.type.toLowerCase().includes('saml')) {
+      params = {
+        ...params,
+        fields: '*',
+        related: 'service_doc_by_service_id',
+      };
+      data.service_doc_by_service_id = null;
+      payload = {
+        ...data,
+        is_active: data.isActive,
+        id: this.edit ? this.serviceData.id : null,
+        config: {
+          sp_nameIDFormat: data.config.spNameIDFormat,
+          default_role: data.config.defaultRole,
+          sp_x509cert: data.config.spX509cert,
+          sp_privateKey: data.config.spPrivateKey,
+          idp_entityId: data.config.idpEntityId,
+          idp_singleSignOnService_url: data.config.idpSingleSignOnServiceUrl,
+          idp_x509cert: data.config.idpX509cert,
+          relay_state: data.config.relayState,
+        },
+      };
+      if (data.config.appRoleMap) {
+        payload.config.app_role_map = data.config.appRoleMap.map(
+          (item: any) => {
+            return Object.keys(item).reduce(
+              (acc, cur) =>
+                (acc = { ...acc, [camelToSnakeString(cur)]: item[cur] }),
+              {}
+            );
+          }
+        );
+      }
+      if (data.config.iconClass) {
+        payload.config.icon_class = data.config.iconClass;
+      }
+      delete payload.isActive;
+    } else {
+      payload = { ...data };
+    }
     if (this.edit) {
+      const payload = {
+        ...this.serviceData,
+        ...data,
+        config: {
+          ...(this.serviceData.config || {}),
+          ...data.config,
+        },
+        service_doc_by_service_id: {
+          ...(this.serviceData.serviceDocByServiceId || {}),
+          ...data.service_doc_by_service_id,
+        },
+      };
+      delete payload.config.serviceDefinition;
       this.servicesService
-        .update(this.serviceData.id, data, {
+        .update(this.serviceData.id, payload, {
           snackbarError: 'server',
           snackbarSuccess: 'services.updateSuccessMsg',
         })
@@ -333,12 +428,13 @@ export class DfServiceDetailsComponent implements OnInit {
       this.servicesService
         .create(
           {
-            resource: [data],
+            resource: [payload],
           },
           params
         )
         .subscribe(() => {
-          this.router.navigate([`/api-connections/api-docs/${data.name}`]);
+          this.router.navigate(['../'], { relativeTo: this.activatedRoute });
+          // this.router.navigate([`/api-connections/api-docs/${data.name}`]);
         });
     }
   }
diff --git a/src/app/shared/components/df-field-array/df-array-field.component.ts b/src/app/shared/components/df-field-array/df-array-field.component.ts
index 0506ca93..d8a84ff6 100644
--- a/src/app/shared/components/df-field-array/df-array-field.component.ts
+++ b/src/app/shared/components/df-field-array/df-array-field.component.ts
@@ -73,6 +73,7 @@ export class DfArrayFieldComponent implements OnInit, ControlValueAccessor {
 
   updateDataSource() {
     this.dataSource = new MatTableDataSource(this.fieldArray.controls);
+    console.log(this.fieldArray.controls, '===== controls');
   }
 
   constructor(
diff --git a/src/app/shared/types/files.ts b/src/app/shared/types/files.ts
index cafca3e8..a6e25dba 100644
--- a/src/app/shared/types/files.ts
+++ b/src/app/shared/types/files.ts
@@ -16,6 +16,8 @@ export interface Service {
   label: string;
   description: string;
   type: string;
+  config?: any;
+  serviceDocByServiceId?: any;
 }
 
 export interface FileTableRow {
diff --git a/src/app/shared/utilities/case.ts b/src/app/shared/utilities/case.ts
index f6cbb4f4..d579b22b 100644
--- a/src/app/shared/utilities/case.ts
+++ b/src/app/shared/utilities/case.ts
@@ -48,14 +48,22 @@ export function mapCamelToSnake<T>(obj: T): T {
     return obj.map(item => mapCamelToSnake(item)) as unknown as T;
   } else if (typeof obj === 'object' && obj !== null) {
     const newObj: Record<string, unknown> = {};
-    for (const key in obj) {
-      if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        if (key === 'requestBody') {
+    if ('type' in obj && obj['type'] === 'okta_saml') {
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
           newObj[key] = (obj as Record<string, unknown>)[key];
-        } else {
-          newObj[camelToSnakeString(key)] = mapCamelToSnake(
-            (obj as Record<string, unknown>)[key]
-          );
+        }
+      }
+    } else {
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          if (key === 'requestBody') {
+            newObj[key] = (obj as Record<string, unknown>)[key];
+          } else {
+            newObj[camelToSnakeString(key)] = mapCamelToSnake(
+              (obj as Record<string, unknown>)[key]
+            );
+          }
         }
       }
     }