diff --git a/src/app/adf-config/df-system-info/df-system-info.component.html b/src/app/adf-config/df-system-info/df-system-info.component.html
index d1c71be8..61422d24 100644
--- a/src/app/adf-config/df-system-info/df-system-info.component.html
+++ b/src/app/adf-config/df-system-info/df-system-info.component.html
@@ -32,6 +32,7 @@ <h2>DreamFactory {{ 'systemInfo.instance.instance' | transloco }}</h2>
           {{ 'version' | transloco }}:
           {{ environment.platform?.version }}
         </li>
+        <li>UI {{ 'version' | transloco }}: 1.3.6</li>
         <li *ngIf="environment.platform?.dbDriver">
           {{ 'systemInfo.instance.systemDatabase' | transloco }}:
           {{ environment.platform?.dbDriver }}
diff --git a/src/app/adf-event-scripts/df-script-details/df-script-details.component.html b/src/app/adf-event-scripts/df-script-details/df-script-details.component.html
index 3e4795a1..76cf3ce0 100644
--- a/src/app/adf-event-scripts/df-script-details/df-script-details.component.html
+++ b/src/app/adf-event-scripts/df-script-details/df-script-details.component.html
@@ -110,7 +110,7 @@
   >
   <df-link-service
     [cache]="scriptForm.getRawValue().name"
-    [storageServiceId]="getControl('storageServiceId')"
+    [storageServiceId]="selectedServiceItem"
     [storagePath]="getControl('storagePath')"
     [content]="getControl('content')"></df-link-service>
   <df-script-editor
diff --git a/src/app/adf-event-scripts/df-script-details/df-script-details.component.ts b/src/app/adf-event-scripts/df-script-details/df-script-details.component.ts
index 468f85e8..0bf02194 100644
--- a/src/app/adf-event-scripts/df-script-details/df-script-details.component.ts
+++ b/src/app/adf-event-scripts/df-script-details/df-script-details.component.ts
@@ -31,7 +31,6 @@ import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 import { DfLinkServiceComponent } from 'src/app/shared/components/df-link-service/df-link-service.component';
 import { camelToSnakeString } from 'src/app/shared/utilities/case';
 
-
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-script-details',
diff --git a/src/app/adf-roles/df-roles-access/df-roles-access.component.html b/src/app/adf-roles/df-roles-access/df-roles-access.component.html
index 83dee270..bb127d28 100644
--- a/src/app/adf-roles/df-roles-access/df-roles-access.component.html
+++ b/src/app/adf-roles/df-roles-access/df-roles-access.component.html
@@ -53,12 +53,23 @@
                 <mat-label>{{
                   'roles.accessOverview.tableHeadings.component' | transloco
                 }}</mat-label>
-                <mat-select formControlName="component" panelWdith="null">
+                <mat-select
+                  (openedChange)="onSelectOpened(i)"
+                  panelClass="select-search-panel">
+                  <mat-option>
+                    <mat-form-field>
+                      <input
+                        matInput
+                        (click)="$event.stopPropagation()"
+                        (input)="filterOptions($event, i)"
+                        placeholder="Search" />
+                    </mat-form-field>
+                  </mat-option>
                   <mat-option
-                    *ngFor="let option of getComponentArray(i)"
-                    [value]="option"
-                    >{{ option }}</mat-option
-                  >
+                    *ngFor="let option of filteredComponentArray[i]"
+                    [value]="option">
+                    {{ option }}
+                  </mat-option>
                 </mat-select>
               </mat-form-field>
             </td>
diff --git a/src/app/adf-roles/df-roles-access/df-roles-access.component.scss b/src/app/adf-roles/df-roles-access/df-roles-access.component.scss
index d6756233..d75198b0 100644
--- a/src/app/adf-roles/df-roles-access/df-roles-access.component.scss
+++ b/src/app/adf-roles/df-roles-access/df-roles-access.component.scss
@@ -40,3 +40,8 @@ tr.element-row:not(.example-expanded-row):active {
 .detail-input {
   margin-right: 20px;
 }
+::ng-deep {
+  .cdk-overlay-pane {
+    width: max-content !important;
+  }
+}
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 928fb3dc..4c0c890f 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
@@ -5,6 +5,7 @@ import {
   FormGroup,
   ReactiveFormsModule,
   Validators,
+  FormBuilder,
 } from '@angular/forms';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
@@ -19,6 +20,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatButtonModule } from '@angular/material/button';
+
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { BehaviorSubject } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
@@ -112,13 +114,24 @@ export class DfRolesAccessComponent implements OnInit {
     { value: 'is null', label: 'is null' },
     { value: 'is not null', label: 'is not null' },
   ];
-
+  form: FormGroup;
   constructor(
     private activatedRoute: ActivatedRoute,
     @Inject(BASE_SERVICE_TOKEN)
-    private baseService: DfBaseCrudService
-  ) {}
-
+    private baseService: DfBaseCrudService,
+    private fb: FormBuilder
+  ) {
+    this.form = this.fb.group({
+      cFormArray: this.fb.array([this.createItem()]),
+    });
+  }
+  createItem(): FormGroup {
+    return this.fb.group({
+      service: [''],
+      component: [''],
+    });
+  }
+  filteredComponentArray: Array<Array<string>> = [];
   ngOnInit() {
     // get services options
     this.activatedRoute.data.subscribe((data: any) => {
@@ -165,10 +178,41 @@ export class DfRolesAccessComponent implements OnInit {
         });
       }
     });
+    this.initializeFilteredComponents();
 
     this.updateDataSource();
   }
+  get cFormArray(): FormArray {
+    return this.form.get('formArray') as FormArray;
+  }
 
+  initializeFilteredComponents() {
+    this.filteredComponentArray = this.formArray.controls.map((_, i) =>
+      this.getComponentArray(i)
+    );
+  }
+  getComponentArray(index: number): Array<string> {
+    const serviceId = this.formArray.at(index).get('service')?.value;
+    const components = this.componentOptions.find(
+      option => option.serviceId === serviceId
+    )?.components;
+    return components || [];
+  }
+
+  filterOptions(event: Event, index: number) {
+    const input = (event.target as HTMLInputElement).value.toLowerCase();
+    const serviceId = this.formArray.at(index).get('service')?.value;
+    const components =
+      this.componentOptions.find(option => option.serviceId === serviceId)
+        ?.components || [];
+    this.filteredComponentArray[index] = components.filter(option =>
+      option.toLowerCase().includes(input)
+    );
+  }
+
+  onSelectOpened(index: number) {
+    this.filteredComponentArray[index] = this.getComponentArray(index);
+  }
   async getComponents(index: number) {
     const serviceId = this.formArray.controls[index].get('service')?.value;
     const service =
@@ -198,14 +242,6 @@ export class DfRolesAccessComponent implements OnInit {
     }
   }
 
-  getComponentArray(index: number) {
-    const serviceId = this.formArray.at(index).get('service')?.value;
-    const components = this.componentOptions.find(
-      option => option.serviceId === serviceId
-    )?.components;
-    return components || [];
-  }
-
   getExtendOperator(index: number) {
     const serviceId = this.serviceAccess.at(index).get('extend-operator')
       ?.value;
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 aa25f41f..c6a3fff3 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
@@ -2,8 +2,8 @@
   [formGroup]="serviceForm"
   class="details-section"
   [class]="(isDarkMode | async) ? 'dark-theme' : ''"
-  (ngSubmit)="save(false)">
-  <ng-container *ngIf="this.isDatabase && !this.edit; else notDatabase">
+  (ngSubmit)="save()">
+  <ng-container *ngIf="this.isDatabase && !this.edit; else notDatabaseEdit">
     <mat-stepper linear #stepper>
       <mat-step errorMessage="Service Type is required." [editable]="true">
         <ng-template matStepLabel>
@@ -280,25 +280,47 @@ <h4 class="text-center" style="color: black !important">
       </ng-template>
     </mat-stepper>
   </ng-container>
-  <ng-template #notDatabase>
-    <mat-form-field
-      subscriptSizing="dynamic"
-      class="dynamic-width"
-      appearance="outline">
-      <mat-label>{{
-        'services.controls.serviceType.label' | transloco
-      }}</mat-label>
-      <mat-select formControlName="type">
-        <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
-          {{ type.label }}
-        </mat-option>
-      </mat-select>
-      <fa-icon
-        class="tool-tip-trigger"
-        matSuffix
-        [icon]="faCircleInfo"
-        [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
-    </mat-form-field>
+  <ng-template #notDatabaseEdit>
+    <ng-container *ngIf="this.isNetworkService; else notNetwork">
+      <mat-form-field
+        subscriptSizing="dynamic"
+        class="dynamic-width"
+        appearance="outline">
+        <mat-label>{{
+          'services.controls.serviceType.label' | transloco
+        }}</mat-label>
+        <mat-select formControlName="type">
+          <mat-option *ngFor="let type of serviceTypes" [value]="type.label">
+            {{ type.label }}
+          </mat-option>
+        </mat-select>
+        <fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
+      </mat-form-field>
+    </ng-container>
+    <ng-template #notNetwork>
+      <mat-form-field
+        subscriptSizing="dynamic"
+        class="dynamic-width"
+        appearance="outline">
+        <mat-label>{{
+          'services.controls.serviceType.label' | transloco
+        }}</mat-label>
+        <mat-select formControlName="type">
+          <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
+            {{ type.label }}
+          </mat-option>
+        </mat-select>
+        <fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
+      </mat-form-field>
+    </ng-template>
     <mat-form-field
       subscriptSizing="dynamic"
       class="dynamic-width"
@@ -348,6 +370,28 @@ <h4 class="text-center" style="color: black !important">
       *ngIf="!subscriptionRequired"
       ><span>{{ 'active' | transloco }}</span></mat-slide-toggle
     >
+    <div class="full-width">
+      <ng-container *ngIf="this.edit">
+        <ng-container *ngIf="this.isDatabase; else notDatabase">
+          <button
+            type="button"
+            mat-flat-button
+            class="save-btn"
+            (click)="gotoSchema()">
+            {{ 'schema' | transloco }}
+          </button>
+        </ng-container>
+        <ng-template #notDatabase>
+          <button
+            type="button"
+            mat-flat-button
+            class="save-btn"
+            (click)="gotoAPIDocs()">
+            {{ 'apiDocs' | transloco }}
+          </button>
+        </ng-template>
+      </ng-container>
+    </div>
     <ng-container *ngIf="viewSchema && !subscriptionRequired">
       <ng-container formGroupName="config">
         <mat-accordion class="full-width">
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 4c530b35..f1b2bbf6 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
@@ -463,7 +463,8 @@ export class DfServiceDetailsComponent implements OnInit {
           params
         )
         .subscribe(() => {
-          this.router.navigate(['../'], { relativeTo: this.activatedRoute });
+          this.router.navigate([`/api-connections/api-docs/${data.name}`]);
+          // this.router.navigate(['../'], { relativeTo: this.activatedRoute });
         });
     }
   }
@@ -472,6 +473,16 @@ export class DfServiceDetailsComponent implements OnInit {
     this.router.navigate(['../'], { relativeTo: this.activatedRoute });
   }
 
+  gotoSchema() {
+    const data = this.serviceForm.getRawValue();
+    this.router.navigate([`/admin-settings/schema/${data.name}`]);
+  }
+
+  gotoAPIDocs() {
+    const data = this.serviceForm.getRawValue();
+    this.router.navigate([`/api-connections/api-docs/${data.name}`]);
+  }
+
   getBackgroundImage(typeLabel: string) {
     const image = this.images?.find(img => img.label == typeLabel);
     if (!image) {
diff --git a/src/app/shared/components/df-link-service/df-link-service.component.html b/src/app/shared/components/df-link-service/df-link-service.component.html
index ed781187..0c06628b 100644
--- a/src/app/shared/components/df-link-service/df-link-service.component.html
+++ b/src/app/shared/components/df-link-service/df-link-service.component.html
@@ -1,3 +1,85 @@
+<ng-container *ngIf="selectType">
+  <form
+    [formGroup]="roleForm"
+    class="details-section"
+    [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+    <mat-accordion>
+      <mat-expansion-panel [expanded]="false">
+        <mat-expansion-panel-header>
+          <mat-panel-title> Link to Service </mat-panel-title>
+          <mat-panel-description> </mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-form-field
+          appearance="outline"
+          class="full-width form-field-gap"
+          subscriptSizing="dynamic">
+          <mat-label>Select Service</mat-label>
+          <mat-select formControlName="serviceList">
+            <mat-option
+              *ngFor="let service of storageServices"
+              [value]="service.label">
+              {{ service.label }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="full-width form-field-gap">
+          <mat-label>Repository: </mat-label>
+          <input
+            matInput
+            type="text"
+            placeholder="path"
+            formControlName="repoInput" />
+        </mat-form-field>
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="full-width form-field-gap">
+          <mat-label>Branch/Tag: </mat-label>
+          <input
+            matInput
+            type="text"
+            placeholder="path"
+            formControlName="branchInput" />
+        </mat-form-field>
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="full-width form-field-gap">
+          <mat-label>Path</mat-label>
+          <input
+            matInput
+            type="text"
+            placeholder="path"
+            formControlName="pathInput" />
+        </mat-form-field>
+        <div class="full-width action-bar">
+          <button
+            class="save-btn"
+            mat-flat-button
+            type="button"
+            (click)="onViewLatest()"
+            color="primary">
+            <i class="fa fa-refresh"></i>
+            View Latest
+          </button>
+          <button
+            class="save-btn"
+            mat-flat-button
+            type="button"
+            (click)="onDeleteCache()"
+            color="primary">
+            <i class="fa fa-refresh"></i>
+            Delete Cache
+          </button>
+        </div>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </form>
+</ng-container>
+=======
 <form
   [formGroup]="roleForm"
   class="details-section"
diff --git a/src/app/shared/components/df-link-service/df-link-service.component.ts b/src/app/shared/components/df-link-service/df-link-service.component.ts
index 2c9caf9d..79fb7d0d 100644
--- a/src/app/shared/components/df-link-service/df-link-service.component.ts
+++ b/src/app/shared/components/df-link-service/df-link-service.component.ts
@@ -1,4 +1,11 @@
-import { Component, Inject, OnInit, Input } from '@angular/core';
+import {
+  Component,
+  Inject,
+  OnInit,
+  Input,
+  SimpleChanges,
+  OnChanges,
+} from '@angular/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTableModule } from '@angular/material/table';
@@ -46,14 +53,16 @@ import { Service, ServiceType } from '../../types/service';
   ],
   providers: [DfBaseCrudService],
 })
-export class DfLinkServiceComponent implements OnInit {
+export class DfLinkServiceComponent implements OnInit, OnChanges {
   @Input() cache: string;
-  @Input({ required: true }) storageServiceId: FormControl;
+  @Input({ required: true }) storageServiceId!: string;
+
   @Input({ required: true }) storagePath: FormControl;
   @Input({ required: true }) content: FormControl;
 
   roleForm: FormGroup;
   storageServices: Array<Service> = [];
+  selectType = false;
 
   constructor(
     private themeService: DfThemeService,
@@ -87,6 +96,24 @@ export class DfLinkServiceComponent implements OnInit {
   ngOnInit() {
     this.updateDataSource();
   }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['storageServiceId']) {
+      this.findServiceById();
+    }
+  }
+
+  findServiceById() {
+    const select = this.storageServices.find(
+      service => service.name === this.storageServiceId
+    );
+    if (select?.type === 'github') {
+      this.selectType = true;
+    } else {
+      this.selectType = false;
+    }
+  }
+
   updateDataSource() {
     //
   }
diff --git a/src/app/shared/components/df-script-editor/df-script-editor.component.html b/src/app/shared/components/df-script-editor/df-script-editor.component.html
index 2968dc9f..39cb475d 100644
--- a/src/app/shared/components/df-script-editor/df-script-editor.component.html
+++ b/src/app/shared/components/df-script-editor/df-script-editor.component.html
@@ -23,22 +23,18 @@
       {{ 'githubFile' | transloco }}
     </button>
   </div>
-  <!-- <mat-form-field class="dynamic-width" subscriptSizing="dynamic">
-    <mat-label>{{ 'service' | transloco }}</mat-label>
-    <mat-select [formControl]="storageServiceId">
-      <mat-option></mat-option>
-      <mat-option *ngFor="let service of storageServices" [value]="service.id">
-        {{ service.label }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field> -->
-  <mat-form-field
-    *ngIf="!storageServiceId || !storageServiceId.getRawValue()"
-    class="dynamic-width"
-    subscriptSizing="dynamic">
-    <mat-label>{{ 'path' | transloco }}</mat-label>
-    <input matInput [formControl]="storagePath" />
-  </mat-form-field>
+  <mat-checkbox [(ngModel)]="checked">
+    {{ 'scripts.path' | transloco }}?</mat-checkbox
+  >
+  <ng-container *ngIf="checked">
+    <mat-form-field
+      *ngIf="!storageServiceId || !storageServiceId.getRawValue()"
+      class="full-width"
+      subscriptSizing="dynamic">
+      <mat-label>{{ 'path' | transloco }}</mat-label>
+      <input matInput [formControl]="storagePath" />
+    </mat-form-field>
+  </ng-container>
   <div class="actions" *ngIf="storageServiceId.getRawValue()">
     <button
       mat-flat-button
diff --git a/src/app/shared/components/df-script-editor/df-script-editor.component.ts b/src/app/shared/components/df-script-editor/df-script-editor.component.ts
index dfa6f48a..bd9367e1 100644
--- a/src/app/shared/components/df-script-editor/df-script-editor.component.ts
+++ b/src/app/shared/components/df-script-editor/df-script-editor.component.ts
@@ -1,11 +1,17 @@
 import { NgFor, NgIf } from '@angular/common';
 import { Component, Inject, Input, OnInit } from '@angular/core';
-import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+  FormControl,
+  ReactiveFormsModule,
+  Validators,
+  FormsModule,
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { TranslocoPipe } from '@ngneat/transloco';
 import {
   BASE_SERVICE_TOKEN,
@@ -33,7 +39,9 @@ import { DfThemeService } from '../../services/df-theme.service';
     NgIf,
     MatFormFieldModule,
     MatSelectModule,
+    MatCheckboxModule,
     NgFor,
+    FormsModule,
     MatDialogModule,
     MatInputModule,
     DfAceEditorComponent,
@@ -49,6 +57,7 @@ export class DfScriptEditorComponent implements OnInit {
   @Input({ required: true }) content: FormControl;
 
   storageServices: Array<Service> = [];
+  checked = false;
 
   constructor(
     private dialog: MatDialog,
@@ -93,7 +102,6 @@ export class DfScriptEditorComponent implements OnInit {
       this.storagePath.updateValueAndValidity();
     });
   }
-
   fileUpload(event: Event) {
     const input = event.target as HTMLInputElement;
     if (input.files) {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index ecc36f91..42ec50d3 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -102,6 +102,8 @@
   "toggleNav": "Toggle navigation",
   "desktopFile": "Upload File",
   "githubFile": "Github Import",
+  "schema": "Schema",
+  "apiDocs": "API docs",
   "searchFeatures": "Search Features",
   "scriptType": "Script Type",
   "scriptTypes": {