diff --git a/projects/fusio-sdk/package.json b/projects/fusio-sdk/package.json
index ab434ef..3d38fcd 100644
--- a/projects/fusio-sdk/package.json
+++ b/projects/fusio-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-fusio-sdk",
-  "version": "5.1.3",
+  "version": "6.0.0",
   "description": "SDK to integrate Fusio into an Angular app",
   "keywords": [
     "Fusio",
diff --git a/projects/fusio-sdk/src/lib/abstract/detail.ts b/projects/fusio-sdk/src/lib/abstract/detail.ts
index a0ff834..b9dbbd6 100644
--- a/projects/fusio-sdk/src/lib/abstract/detail.ts
+++ b/projects/fusio-sdk/src/lib/abstract/detail.ts
@@ -1,32 +1,66 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {CommonMessage} from "fusio-sdk";
+import {ErrorService} from "../service/error.service";
+import {Service} from "./service";
 
 /**
- * This component is only a basic view component which renders a provided entity. It should only render the provided
- * JSON data it should not contain any additional logic to request data from an endpoint
+ * Base component to show a detail page of a single entity
  */
 @Component({
   template: '',
 })
 export abstract class Detail<T> implements OnInit {
 
-  @Input()
-  selected!: T;
-  @Output()
-  updateClick: EventEmitter<void> = new EventEmitter<void>();
-  @Output()
-  deleteClick: EventEmitter<void> = new EventEmitter<void>();
+  public selected?: T;
+  public response?: CommonMessage;
 
-  jsonView: boolean = false;
+  protected constructor(protected route: ActivatedRoute, public router: Router, protected error: ErrorService) {
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.route.paramMap.subscribe(async params => {
+      const id = params.get('id');
+      if (id) {
+        await this.doGet(id);
+      }
+    });
+  }
+
+  async doGet(id: string) {
+    try {
+      this.selected = await this.getService().get(id);
 
-  async ngOnInit() {
+      this.onLoad();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
   }
 
-  doUpdateClick() {
-    this.updateClick.emit();
+  public getListLink(): Array<string>
+  {
+    return this.getService().getLink();
   }
 
-  doDeleteClick() {
-    this.deleteClick.emit();
+  public getEditLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    link.push('edit')
+    return link;
   }
 
+  public getDeleteLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    link.push('delete')
+    return link;
+  }
+
+  protected abstract getService(): Service<T>;
+
+  protected onLoad(): void
+  {
+  }
 }
diff --git a/projects/fusio-sdk/src/lib/abstract/form.ts b/projects/fusio-sdk/src/lib/abstract/form.ts
new file mode 100644
index 0000000..fa4b768
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/abstract/form.ts
@@ -0,0 +1,97 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {CommonMessage} from "fusio-sdk";
+import {ErrorService} from "../service/error.service";
+import {Service} from "./service";
+
+/**
+ * Base component to provide a form to create, update or delete an entity
+ */
+@Component({
+  template: '',
+})
+export abstract class Form<T> implements OnInit {
+
+  public entity?: T;
+  public response?: CommonMessage;
+  public mode: Mode = Mode.Create;
+
+  protected constructor(protected route: ActivatedRoute, public router: Router, protected error: ErrorService) {
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.entity = this.getService().newEntity();
+
+    this.route.data.subscribe((data) => {
+      this.mode = data['mode'];
+    });
+
+    this.route.paramMap.subscribe(async params => {
+      const id = params.get('id');
+      if (id) {
+        await this.doGet(id);
+      }
+    });
+  }
+
+  async doGet(id: string) {
+    try {
+      this.entity = await this.getService().get(id);
+
+      this.onLoad();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+  async doCreate(entity: T) {
+    try {
+      this.response = await this.getService().create(entity);
+
+      this.onSubmit();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+  async doUpdate(entity: T) {
+    try {
+      this.response = await this.getService().update(entity);
+
+      this.onSubmit();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+  async doDelete(entity: T) {
+    try {
+      this.response = await this.getService().delete(entity);
+
+      this.onSubmit();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+  public getListLink(): Array<string>
+  {
+    return this.getService().getLink();
+  }
+
+  protected abstract getService(): Service<T>;
+
+  protected onLoad(): void
+  {
+  }
+
+  protected onSubmit(): void
+  {
+  }
+}
+
+export enum Mode {
+  Create = 1,
+  Update,
+  Delete,
+}
diff --git a/projects/fusio-sdk/src/lib/abstract/list.ts b/projects/fusio-sdk/src/lib/abstract/list.ts
index 2179518..479ce7c 100644
--- a/projects/fusio-sdk/src/lib/abstract/list.ts
+++ b/projects/fusio-sdk/src/lib/abstract/list.ts
@@ -1,82 +1,125 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {ClientAbstract} from "sdkgen-client";
-import {ApiService} from "../service/api.service";
+import {CommonMessage} from "fusio-sdk";
 import {ErrorService} from "../service/error.service";
-import {EventService} from "../service/event.service";
-import {Result} from "./modal";
-import {ModelId, Query} from "./query";
+import {Service} from "./service";
 
 /**
- * List panel which uses a modal to CRUD entities. Note it depends on ng-bootstrap so you can use it only if your
- * project also uses ng-bootstrap
+ * Base component to list entities, with a pagination and a search
  */
 @Component({
   template: '',
 })
-export abstract class List<C extends ClientAbstract, T extends ModelId> extends Query<C, T> {
+export abstract class List<T> implements OnInit {
 
-  protected modalService: NgbModal;
+  public search: string = '';
+  public totalResults: number = 0;
+  public entries: Array<T> = [];
+  public page: number = 1;
+  public pageSize: number = 16;
+  public response?: CommonMessage;
 
-  constructor(fusio: ApiService<C>, route: ActivatedRoute, router: Router, event: EventService, error: ErrorService, modalService: NgbModal) {
-    super(fusio, route, router, event, error);
-    this.modalService = modalService;
+  protected constructor(protected route: ActivatedRoute, public router: Router, protected error: ErrorService) {
   }
 
-  openCreateDialog() {
-    const modalRef = this.modalService.open(this.getDetailComponent(), {
-      size: 'lg'
-    });
-    modalRef.componentInstance.mode = Mode.Create;
-    modalRef.closed.subscribe(async (result: Result<T>) => {
-      this.response = result.response;
-      if (result.response.success) {
-        this.event.dispatchModelCreated(result.entity, this.getRoute());
+  async ngOnInit(): Promise<void> {
+    this.route.queryParams.subscribe(async params => {
+      let page, search;
+      if (params['page']) {
+        page = parseInt(params['page']);
+      }
+      if (params['search']) {
+        search = params['search'];
+      }
 
-        await this.doList();
+      if (!this.hasQueryParamsChange(page, search)) {
+        return;
       }
+
+      this.page = page || 1;
+      this.search = search || '';
+
+      await this.doList();
     });
   }
 
-  openUpdateDialog(entity: T) {
-    const modalRef = this.modalService.open(this.getDetailComponent(), {
-      size: 'lg'
-    });
-    modalRef.componentInstance.mode = Mode.Update;
-    modalRef.componentInstance.entity = entity;
-    modalRef.closed.subscribe(async (result: Result<T>) => {
-      this.response = result.response;
-      if (result.response.success) {
-        this.event.dispatchModelUpdated(result.entity, this.getRoute());
-
-        await this.doList();
-      }
-    });
+  async doList() {
+    try {
+      const response = await this.getService().getAll(this.getCollectionQuery());
+
+      this.totalResults = response.totalResults || 0;
+      this.entries = response.entry || [];
+
+      this.onLoad();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
   }
 
-  openDeleteDialog(entity: T) {
-    const modalRef = this.modalService.open(this.getDetailComponent(), {
-      size: 'lg'
-    });
-    modalRef.componentInstance.mode = Mode.Delete;
-    modalRef.componentInstance.entity = entity;
-    modalRef.closed.subscribe(async (result: Result<T>) => {
-      this.response = result.response;
-      if (result.response.success) {
-        this.event.dispatchModelDeleted(result.entity, this.getRoute());
-
-        await this.doList();
-      }
-    });
+  async doSearch(page?: number, search?: string) {
+    if (!this.hasQueryParamsChange(page, search)) {
+      return;
+    }
+
+    if (page !== undefined) {
+      this.page = page;
+    }
+
+    if (search !== undefined) {
+      this.search = search;
+    }
+
+    await this.doList();
   }
 
-  protected abstract getDetailComponent(): any;
+  public getDetailLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    return link;
+  }
 
-}
+  public getNewLink(): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('-')
+    link.push('new')
+    return link;
+  }
+
+  public getEditLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    link.push('edit')
+    return link;
+  }
+
+  public getDeleteLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    link.push('delete')
+    return link;
+  }
+
+  protected getCollectionQuery(): Array<any> {
+    let query: Array<any> = [];
+    query.push((this.page - 1) * this.pageSize);
+    query.push(this.pageSize);
+    if (this.search) {
+      query.push(this.search);
+    }
+    return query;
+  }
 
-export enum Mode {
-  Create = 1,
-  Update,
-  Delete,
+  protected hasQueryParamsChange(page?: number, search?: string): boolean {
+    return this.page !== page || this.search !== search;
+  }
+
+  protected abstract getService(): Service<T>;
+
+  protected onLoad(): void
+  {
+  }
 }
diff --git a/projects/fusio-sdk/src/lib/abstract/manipulation.ts b/projects/fusio-sdk/src/lib/abstract/manipulation.ts
deleted file mode 100644
index e256b8b..0000000
--- a/projects/fusio-sdk/src/lib/abstract/manipulation.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import {Component, Input, OnInit} from "@angular/core";
-import {CommonMessage} from "fusio-sdk";
-import {ClientAbstract} from "sdkgen-client";
-import {Mode} from "./list";
-import {ApiService} from "../service/api.service";
-import {ErrorService} from "../service/error.service";
-import {ModelId} from "./query";
-
-/**
- * Base component if you want to create a panel to create, update or delete an entity. If you extend this class you
- * need to implement the {@see create}, {@see update} and {@see delete} method. This class only uses native angular
- * components so you can use it independently of your UI framework
- */
-@Component({
-  template: '',
-})
-export abstract class Manipulation<C extends ClientAbstract, T extends ModelId> implements OnInit {
-
-  response?: CommonMessage;
-  loading: boolean = false;
-
-  @Input() mode: Mode = Mode.Create;
-  @Input() entity: T = this.newEntity();
-
-  protected fusio: ApiService<C>;
-  protected error: ErrorService;
-
-  constructor(fusio: ApiService<C>, error: ErrorService) {
-    this.fusio = fusio;
-    this.error = error;
-  }
-
-  ngOnInit(): void {
-  }
-
-  async submit() {
-    if (!this.entity) {
-      return;
-    }
-
-    this.loading = true;
-
-    const data = this.entity;
-
-    try {
-      let response;
-      if (this.mode === Mode.Create) {
-        response = await this.create(data);
-      } else if (this.mode === Mode.Update) {
-        response = await this.update(data);
-      } else if (this.mode === Mode.Delete) {
-        response = await this.delete(data);
-      }
-
-      this.loading = false;
-
-      if (response) {
-        this.onResponse(response, data);
-      }
-    } catch (error) {
-      this.loading = false;
-      this.response = this.error.convert(error);
-    }
-  }
-
-  protected onResponse(response: CommonMessage, entity: T): void {
-  }
-
-  protected abstract create(entity: T): Promise<CommonMessage|void>;
-  protected abstract update(entity: T): Promise<CommonMessage|void>;
-  protected abstract delete(entity: T): Promise<CommonMessage|void>;
-  protected abstract newEntity(): T;
-
-}
diff --git a/projects/fusio-sdk/src/lib/abstract/modal.ts b/projects/fusio-sdk/src/lib/abstract/modal.ts
deleted file mode 100644
index 806e051..0000000
--- a/projects/fusio-sdk/src/lib/abstract/modal.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {Component} from "@angular/core";
-import {CommonMessage} from "fusio-sdk";
-import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {ClientAbstract} from "sdkgen-client";
-import {ApiService} from "../service/api.service";
-import {ErrorService} from "../service/error.service";
-import {Manipulation} from "./manipulation";
-import {ModelId} from "./query";
-
-/**
- * Manipulation panel which uses a modal to create, update or delete an entity. Note it depends on ng-bootstrap so you
- * can use it only if your project also uses ng-bootstrap
- */
-@Component({
-  template: '',
-})
-export abstract class Modal<C extends ClientAbstract, T extends ModelId> extends Manipulation<C, T> {
-
-  protected modalService: NgbModal;
-  public modal: NgbActiveModal;
-
-  constructor(fusio: ApiService<C>, error: ErrorService, modalService: NgbModal, modal: NgbActiveModal) {
-    super(fusio, error);
-    this.modalService = modalService;
-    this.modal = modal;
-  }
-
-  protected override onResponse(response: CommonMessage, entity: T) {
-    this.modal.close({
-      entity: entity,
-      response: response,
-    });
-  }
-
-}
-
-export interface Result<T> {
-  entity: T,
-  response: CommonMessage,
-}
diff --git a/projects/fusio-sdk/src/lib/abstract/object-selector.ts b/projects/fusio-sdk/src/lib/abstract/object-selector.ts
deleted file mode 100644
index 9ddcc62..0000000
--- a/projects/fusio-sdk/src/lib/abstract/object-selector.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {catchError, debounceTime, distinctUntilChanged, map, merge, Observable, of, OperatorFunction, Subject, switchMap, tap} from "rxjs";
-import {fromPromise} from "rxjs/internal/observable/innerFrom";
-import {CommonCollection} from "fusio-sdk";
-
-/**
- * Object selector
- */
-@Component({
-  template: '',
-})
-export abstract class ObjectSelector<T, R> implements OnInit {
-
-  @Input() name!: string;
-  @Input() disabled: boolean = false;
-  @Input() data?: R = undefined;
-  @Output() dataChange = new EventEmitter<R>();
-
-  focus$ = new Subject<string>();
-
-  searching = false;
-  searchFailed = false;
-
-  selected?: T
-
-  objectFormatter = (object: T): string => {
-    const name = this.getNameProperty(object);
-    if (name) {
-      return name;
-    }
-
-    const id = this.getIdProperty(object);
-    if (id) {
-      return '' + id;
-    }
-
-    return '-';
-  };
-
-  objectSearch: OperatorFunction<string, Array<T>> = (text$: Observable<string>) => {
-    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
-    const inputFocus$ = this.focus$;
-
-    return merge(debouncedText$, inputFocus$).pipe(
-      tap(() => (this.searching = true)),
-      switchMap((term) =>
-        fromPromise(this.getAll([0, 16, term])).pipe(
-          map((response) => {
-            return response.entry ? response.entry : [];
-          }),
-          tap(() => (this.searchFailed = false)),
-          catchError(() => {
-            this.searchFailed = true;
-            return of([]);
-          }),
-        ),
-      ),
-      tap(() => (this.searching = false)),
-    );
-  }
-
-  async ngOnInit(): Promise<void> {
-    if (this.data) {
-      this.selected = await this.get('' + this.data);
-    }
-  }
-
-  changeValue() {
-    if (this.disabled || !this.selected) {
-      return;
-    }
-
-    const id = this.getIdProperty(this.selected);
-    if (!id) {
-      return;
-    }
-
-    this.dataChange.emit(id);
-  }
-
-  protected getIdKey(): string
-  {
-    return 'id';
-  }
-
-  protected getNameKey(): string
-  {
-    return 'name';
-  }
-
-  protected abstract getAll(parameters: Array<any>): Promise<CommonCollection<T>>;
-
-  protected abstract get(id: string): Promise<T>;
-
-  private getIdProperty(object: T): R|undefined
-  {
-    if (typeof object === 'object' && object && object.hasOwnProperty(this.getIdKey())) {
-      return (object as any)[this.getIdKey()];
-    }
-
-    return undefined;
-  }
-
-  private getNameProperty(object: T): string|undefined
-  {
-    if (typeof object === 'object' && object && object.hasOwnProperty(this.getNameKey())) {
-      return (object as any)[this.getNameKey()];
-    }
-
-    return undefined;
-  }
-
-}
diff --git a/projects/fusio-sdk/src/lib/abstract/query.ts b/projects/fusio-sdk/src/lib/abstract/query.ts
deleted file mode 100644
index 73a6c62..0000000
--- a/projects/fusio-sdk/src/lib/abstract/query.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from "@angular/router";
-import {ClientAbstract} from "sdkgen-client";
-import {CommonCollection, CommonMessage} from "fusio-sdk";
-import {ApiService} from "../service/api.service";
-import {ErrorService} from "../service/error.service";
-import {EventService} from "../service/event.service";
-
-/**
- * Base component to create a list panel to show and browse entities. If you extend this component you need to implement
- * the {@see openCreateDialog}, {@see openUpdateDialog} and {@see openDeleteDialog} method which are called in case the
- * user clicks on the new, edit or delete button. This class only uses native angular components so you can use it
- * independently of your UI framework
- */
-@Component({
-  template: '',
-})
-export abstract class Query<C extends ClientAbstract, T extends ModelId> implements OnInit {
-
-  public search: string = '';
-  public totalResults: number = 0;
-  public entries: Array<T> = [];
-  public selected?: T;
-  public page: number = 1;
-  public pageSize: number = 16;
-  public response?: CommonMessage;
-  public loading: boolean = true;
-
-  protected fusio: ApiService<C>;
-  protected route: ActivatedRoute;
-  protected router: Router;
-  protected event: EventService;
-  protected error: ErrorService;
-
-  constructor(fusio: ApiService<C>, route: ActivatedRoute, router: Router, event: EventService, error: ErrorService) {
-    this.fusio = fusio;
-    this.route = route;
-    this.router = router;
-    this.event = event;
-    this.error = error;
-  }
-
-  async ngOnInit(): Promise<void> {
-    this.startLoading();
-    this.route.queryParams.subscribe(async params => {
-      let page, search;
-      if (params['page']) {
-        page = parseInt(params['page']);
-      }
-      if (params['search']) {
-        search = params['search'];
-      }
-      if (!this.hasQueryParamsChange(page, search)) {
-        return;
-      }
-      this.startLoading();
-      this.page = page || 1;
-      this.search = search || '';
-      await this.doList();
-    });
-
-    this.route.paramMap.subscribe(async params => {
-      const id = params.get('id');
-      if (id) {
-        this.startLoading();
-        await this.doGet(id);
-      }
-    });
-  }
-
-  async doList() {
-    try {
-      const response = await this.getAll(this.getCollectionQuery());
-
-      this.totalResults = response.totalResults || 0;
-      this.entries = response.entry || [];
-
-      this.onList();
-    } catch (error) {
-      this.response = this.error.convert(error);
-    }
-
-    // in case we are not at a specific route redirect to the first
-    const isDetailRoute: boolean|undefined = this.route.routeConfig?.path?.endsWith(':id');
-    if (this.entries.length > 0 && this.entries[0].id && isDetailRoute === false && !this.selected) {
-      await this.doGet('' + this.entries[0].id);
-    }
-
-    this.finishLoading();
-  }
-
-  protected getCollectionQuery(): Array<any> {
-    let query: Array<any> = [];
-    query.push((this.page - 1) * this.pageSize);
-    query.push(this.pageSize);
-    if (this.search) {
-      query.push(this.search);
-    }
-    return query;
-  }
-
-  async doGet(id: string) {
-    try {
-      this.selected = await this.get(id);
-      this.onGet();
-    } catch (error) {
-      this.response = this.error.convert(error);
-    }
-
-    this.finishLoading();
-  }
-
-  async doSearch(page?: number, search?: string) {
-    if (!this.hasQueryParamsChange(page, search) || this.loading) {
-      return;
-    }
-    if (this.selected) {
-      await this.router.navigate([this.getRoute(), this.selected.id], {
-        queryParams: this.getQueryParams(page, search)
-      });
-    } else {
-      await this.router.navigate([this.getRoute()], {
-        queryParams: this.getQueryParams(page, search)
-      });
-    }
-    return false;
-  }
-
-  async doSelect(entry: T) {
-    await this.router.navigate([this.getRoute(), entry.id], {
-      queryParams: this.getQueryParams(this.page, this.search)
-    });
-  }
-
-  abstract openCreateDialog(): void;
-
-  abstract openUpdateDialog(entity: T): void;
-
-  abstract openDeleteDialog(entity: T): void;
-
-  getQueryParams(page?: number, search?: string): QueryParams {
-    const queryParams: QueryParams = {};
-    if (page) {
-      queryParams.page = page;
-    }
-    if (search) {
-      queryParams.search = search;
-    }
-    return queryParams;
-  }
-
-  hasQueryParamsChange(page?: number, search?: string): boolean {
-    return this.page !== page || this.search !== search;
-  }
-
-  private startLoading(): void {
-    this.loading = true;
-  }
-
-  private finishLoading(): void {
-    setTimeout(() => {
-      this.loading = false;
-    }, 100);
-  }
-
-  protected abstract getAll(parameters: Array<any>): Promise<CommonCollection<T>>;
-  protected abstract get(id: string): Promise<T>;
-  protected abstract getRoute(): string;
-
-  protected onList(): void
-  {
-    this.event.dispatchModelList(this.getRoute());
-  }
-
-  protected onGet(): void
-  {
-    this.event.dispatchModelDetail(this.selected, this.getRoute());
-  }
-
-}
-
-export interface QueryParams {
-  page?: number
-  search?: string
-}
-
-export interface ModelId {
-  id?: number|string
-}
diff --git a/projects/fusio-sdk/src/lib/abstract/service.ts b/projects/fusio-sdk/src/lib/abstract/service.ts
new file mode 100644
index 0000000..4770b6c
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/abstract/service.ts
@@ -0,0 +1,119 @@
+import {CommonCollection, CommonMessage} from "fusio-sdk";
+
+/**
+ * A general service to access CRUD operations, this service can be reused at different components
+ */
+export abstract class Service<E> {
+
+  abstract getAll(parameters: Array<any>): Promise<CommonCollection<E>>;
+
+  abstract get(id: string): Promise<E>;
+
+  abstract create(entity: E): Promise<CommonMessage>;
+
+  abstract update(entity: E): Promise<CommonMessage>;
+
+  abstract delete(entity: E): Promise<CommonMessage>;
+
+  /**
+   * Returns an empty new entity
+   */
+  abstract newEntity(): E;
+
+  /**
+   * Returns the base link
+   */
+  abstract getLink(): Array<string>;
+
+  public async getAllWithIdAndName(parameters: Array<any>): Promise<CommonCollection<IdAndName<E>>>
+  {
+    const result = await this.getAll(parameters);
+
+    const entries: Array<IdAndName<E>> = [];
+    result.entry?.forEach((entry) => {
+      entries.push(this.convert(entry));
+    });
+
+    return {
+      totalResults: result.totalResults,
+      startIndex: result.startIndex,
+      itemsPerPage: result.itemsPerPage,
+      entry: entries,
+    };
+  }
+
+  public async getWithIdAndName(id: string): Promise<IdAndName<E>>
+  {
+    return this.convert(await this.get(id));
+  }
+
+  /**
+   * Returns the id key of the entity, normally this is the property "id"
+   */
+  protected getIdKey(): string
+  {
+    return 'id';
+  }
+
+  /**
+   * Returns the display name key, normally a property like "name" or "title"
+   */
+  protected getNameKey(): string
+  {
+    return 'name';
+  }
+
+  private convert(entity: E): IdAndName<E>
+  {
+    const id = this.getIdValue(entity);
+    if (id === undefined) {
+      throw new Error('Configured id value does not exist, available properties: ' + Object.getOwnPropertyNames(entity).join(','));
+    }
+
+    const name = this.getNameValue(entity);
+    if (name === undefined) {
+      throw new Error('Configured name value does not exist, available properties: ' + Object.getOwnPropertyNames(entity).join(','));
+    }
+
+    return {
+      id: id,
+      name: name,
+      raw: entity
+    };
+  }
+
+  private getIdValue(entity: E): string|undefined
+  {
+    if (typeof entity === 'object' && entity && entity.hasOwnProperty(this.getIdKey())) {
+      const id = (entity as any)[this.getIdKey()];
+      if (id === undefined || id === null) {
+        return undefined;
+      }
+
+      return '' + id;
+    }
+
+    return undefined;
+  }
+
+  private getNameValue(entity: E): string|undefined
+  {
+    if (typeof entity === 'object' && entity && entity.hasOwnProperty(this.getNameKey())) {
+      const name = (entity as any)[this.getNameKey()];
+      if (name === undefined || name === null) {
+        return undefined;
+      }
+
+      return '' + name;
+    }
+
+    return undefined;
+  }
+
+}
+
+export interface IdAndName<T> {
+  id: string
+  name: string
+  raw: T
+}
diff --git a/projects/fusio-sdk/src/lib/component/app/detail/app-detail.component.html b/projects/fusio-sdk/src/lib/component/app/detail/app-detail.component.html
index 5d05a05..c377e18 100644
--- a/projects/fusio-sdk/src/lib/component/app/detail/app-detail.component.html
+++ b/projects/fusio-sdk/src/lib/component/app/detail/app-detail.component.html
@@ -2,8 +2,9 @@
   <div class="card-header">{{selected.name}}</div>
   <div class="card-body">
     <div class="btn-group" role="group">
-      <button type="button" (click)="doUpdateClick()" class="btn btn-primary fusio-btn-update">Update</button>
-      <button type="button" (click)="doDeleteClick()" class="btn btn-danger fusio-btn-delete">Delete</button>
+      <a [routerLink]="getListLink()" class="btn btn-secondary fusio-btn-back">Back</a>
+      <a [routerLink]="getEditLink(selected.id)" class="btn btn-primary fusio-btn-update">Update</a>
+      <a [routerLink]="getDeleteLink(selected.id)" class="btn btn-danger fusio-btn-delete">Delete</a>
     </div>
     <div class="fusio-detail">
       <div class="row">
diff --git a/projects/fusio-sdk/src/lib/component/app/detail/app-detail.component.ts b/projects/fusio-sdk/src/lib/component/app/detail/app-detail.component.ts
index e4eaf02..0c27c5f 100644
--- a/projects/fusio-sdk/src/lib/component/app/detail/app-detail.component.ts
+++ b/projects/fusio-sdk/src/lib/component/app/detail/app-detail.component.ts
@@ -1,6 +1,9 @@
 import {Component} from '@angular/core';
 import {ConsumerApp} from "fusio-sdk";
 import {Detail} from "../../../abstract/detail";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ErrorService} from "../../../service/error.service";
+import {AppService} from "../../../service/app.service";
 
 @Component({
   selector: 'fusio-app-detail',
@@ -11,4 +14,12 @@ export class AppDetailComponent extends Detail<ConsumerApp> {
 
   hideSecret = true;
 
+  constructor(private app: AppService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
+  }
+
+  protected getService(): AppService {
+    return this.app;
+  }
+
 }
diff --git a/projects/fusio-sdk/src/lib/component/app/modal/app-modal.component.css b/projects/fusio-sdk/src/lib/component/app/form/app-form.component.css
similarity index 100%
rename from projects/fusio-sdk/src/lib/component/app/modal/app-modal.component.css
rename to projects/fusio-sdk/src/lib/component/app/form/app-form.component.css
diff --git a/projects/fusio-sdk/src/lib/component/app/form/app-form.component.html b/projects/fusio-sdk/src/lib/component/app/form/app-form.component.html
new file mode 100644
index 0000000..e48b8fc
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/app/form/app-form.component.html
@@ -0,0 +1,44 @@
+<div class="card" *ngIf="entity">
+  <div class="card-header">
+    <ng-container *ngIf="mode === 1">Create</ng-container>
+    <ng-container *ngIf="mode === 2">Update</ng-container>
+    <ng-container *ngIf="mode === 3">Delete</ng-container>
+  </div>
+  <div class="card-body">
+    <fusio-message [response]="response"></fusio-message>
+    <form>
+      <div class="mb-3 row">
+        <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input type="text" id="name" name="name" [(ngModel)]="entity.name" [disabled]="mode === 3" class="form-control">
+            <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
+            <ng-template #nameHelp>Name of the app</ng-template>
+          </div>
+        </div>
+      </div>
+      <div class="mb-3 row">
+        <label for="url" class="col-sm-2 col-form-label fw-bold">Url</label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input type="url" id="url" name="url" [(ngModel)]="entity.url" [disabled]="mode === 3" class="form-control">
+            <button class="btn btn-outline-secondary" type="button" [ngbPopover]="urlHelp"><i class="bi bi-question"></i></button>
+            <ng-template #urlHelp>Url of the app</ng-template>
+          </div>
+        </div>
+      </div>
+      <div class="mb-3 row">
+        <label class="col-sm-2 col-form-label fw-bold">Scopes</label>
+        <div class="col-sm-10">
+          <fusio-checkbox-list name="scopes" [service]="scope" [data]="entity.scopes" (dataChange)="entity.scopes = $event" [disabled]="mode === 3"></fusio-checkbox-list>
+        </div>
+      </div>
+      <div class="btn-group" role="group">
+        <ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="doCreate(entity)">Create</button></ng-container>
+        <ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="doUpdate(entity)">Update</button></ng-container>
+        <ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="doDelete(entity)">Delete</button></ng-container>
+        <button type="button" (click)="router.navigate(getListLink())" class="btn btn-light fusio-btn-back">Back</button>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/projects/fusio-sdk/src/lib/component/app/form/app-form.component.ts b/projects/fusio-sdk/src/lib/component/app/form/app-form.component.ts
new file mode 100644
index 0000000..1653983
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/app/form/app-form.component.ts
@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {ConsumerApp, ConsumerScope} from "fusio-sdk";
+import {ErrorService} from "../../../service/error.service";
+import {Form} from "../../../abstract/form";
+import {ActivatedRoute, Router} from "@angular/router";
+import {AppService} from "../../../service/app.service";
+import {ScopeService} from "../../../service/scope.service";
+
+@Component({
+  selector: 'fusio-app-form',
+  templateUrl: './app-form.component.html',
+  styleUrls: ['./app-form.component.css']
+})
+export class AppFormComponent extends Form<ConsumerApp> {
+
+  scopes?: Array<ConsumerScope>;
+
+  constructor(private app: AppService, public scope: ScopeService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
+  }
+
+  protected getService(): AppService {
+    return this.app;
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/component/app/list/app-list.component.html b/projects/fusio-sdk/src/lib/component/app/list/app-list.component.html
index 6bfad2c..65eacab 100644
--- a/projects/fusio-sdk/src/lib/component/app/list/app-list.component.html
+++ b/projects/fusio-sdk/src/lib/component/app/list/app-list.component.html
@@ -1,33 +1,47 @@
-
-<fusio-message [response]="response"></fusio-message>
-
-<fusio-search
-  [searchTerm]="search"
-  (search)="doSearch(1, $event)"
-  (newClick)="openCreateDialog()"
-  placeholder="app">
-</fusio-search>
-
-<div class="row">
-  <div class="col-md-3">
-    <fusio-sidebar
-      name="app"
-      nameKey="name"
-      [entries]="entries"
-      [totalResults]="totalResults"
-      [selected]="selected"
-      [page]="page"
+<div class="card">
+  <div class="card-header">Apps</div>
+  <div class="card-body">
+    <fusio-search
+      [searchTerm]="search"
+      (search)="doSearch(1, $event)"
+      (newClick)="router.navigate(getNewLink())"
+      placeholder="app">
+    </fusio-search>
+    <table class="table table-striped">
+      <thead>
+      <tr>
+        <th style="width:100px">Status</th>
+        <th style="">Name</th>
+        <th style="width:200px">Insert-Date</th>
+        <th style="width:100px"></th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let entry of entries">
+        <td>
+          <ng-container *ngIf="entry.status === 1"><span class="badge text-bg-primary">Active</span></ng-container>
+          <ng-container *ngIf="entry.status === 2"><span class="badge text-bg-secondary">Pending</span></ng-container>
+          <ng-container *ngIf="entry.status === 3"><span class="badge text-bg-danger">Deactivated</span></ng-container>
+          <ng-container *ngIf="entry.status === 4"><span class="badge text-bg-secondary">Deleted</span></ng-container>
+        </td>
+        <td>{{entry.name}}</td>
+        <td>{{entry.date|date:'short'}}</td>
+        <td>
+          <div class="btn-group" role="group">
+            <a [routerLink]="getDetailLink(entry.id)" class="btn btn-primary"><i class="bi bi-search"></i></a>
+            <a [routerLink]="getEditLink(entry.id)" class="btn btn-secondary"><i class="bi bi-pen"></i></a>
+            <a [routerLink]="getDeleteLink(entry.id)" class="btn btn-secondary"><i class="bi bi-x"></i></a>
+          </div>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <ngb-pagination
+      [(page)]="page"
       [pageSize]="pageSize"
-      (pageChange)="doSearch($event, search)"
-      (entrySelect)="doSelect($event)">
-    </fusio-sidebar>
-  </div>
-  <div class="col-md-9">
-    <fusio-empty *ngIf="!selected" [loading]="loading" (newClick)="openCreateDialog()"></fusio-empty>
-    <fusio-app-detail *ngIf="selected"
-                            [selected]="selected"
-                            (updateClick)="openUpdateDialog(selected)"
-                            (deleteClick)="openDeleteDialog(selected)">
-    </fusio-app-detail>
+      [collectionSize]="totalResults"
+      [maxSize]="4"
+      [ellipses]="false"
+      (pageChange)="doSearch($event)"></ngb-pagination>
   </div>
 </div>
diff --git a/projects/fusio-sdk/src/lib/component/app/list/app-list.component.ts b/projects/fusio-sdk/src/lib/component/app/list/app-list.component.ts
index aacdca3..4ce8c2b 100644
--- a/projects/fusio-sdk/src/lib/component/app/list/app-list.component.ts
+++ b/projects/fusio-sdk/src/lib/component/app/list/app-list.component.ts
@@ -1,38 +1,23 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {Client, CommonCollection, ConsumerApp} from "fusio-sdk";
+import {ConsumerApp} from "fusio-sdk";
 import {List} from "../../../abstract/list";
-import {AppModalComponent} from "../modal/app-modal.component";
-import {FusioService} from "../../../service/fusio.service";
-import {EventService} from "../../../service/event.service";
 import {ErrorService} from "../../../service/error.service";
+import {AppService} from "../../../service/app.service";
 
 @Component({
   selector: 'fusio-app-list',
   templateUrl: './app-list.component.html',
   styleUrls: ['./app-list.component.css']
 })
-export class AppListComponent extends List<Client, ConsumerApp> {
+export class AppListComponent extends List<ConsumerApp> {
 
-  constructor(fusio: FusioService, route: ActivatedRoute, router: Router, event: EventService, error: ErrorService, modalService: NgbModal) {
-    super(fusio, route, router, event, error, modalService);
+  constructor(private app: AppService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
   }
 
-  protected async getAll(parameters: Array<any>): Promise<CommonCollection<ConsumerApp>> {
-    return this.fusio.getClient().consumer().app().getAll(...parameters);
-  }
-
-  protected async get(id: string): Promise<ConsumerApp> {
-    return this.fusio.getClient().consumer().app().get(id);
-  }
-
-  protected getDetailComponent(): any {
-    return AppModalComponent;
-  }
-
-  protected getRoute(): any {
-    return '/account/app';
+  protected getService(): AppService {
+    return this.app;
   }
 
 }
diff --git a/projects/fusio-sdk/src/lib/component/app/modal/app-modal.component.html b/projects/fusio-sdk/src/lib/component/app/modal/app-modal.component.html
deleted file mode 100644
index 351ba66..0000000
--- a/projects/fusio-sdk/src/lib/component/app/modal/app-modal.component.html
+++ /dev/null
@@ -1,49 +0,0 @@
-
-<div class="modal-header">
-  <h4 class="modal-title">
-    <ng-container *ngIf="mode === 1">Create</ng-container>
-    <ng-container *ngIf="mode === 2">Update</ng-container>
-    <ng-container *ngIf="mode === 3">Delete</ng-container>
-  </h4>
-  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
-</div>
-<div class="modal-body">
-  <fusio-message [response]="response"></fusio-message>
-  <form>
-    <div class="mb-3 row">
-      <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <input type="text" id="name" name="name" [(ngModel)]="entity.name" class="form-control">
-          <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
-          <ng-template #nameHelp>Name of the app</ng-template>
-        </div>
-      </div>
-    </div>
-    <div class="mb-3 row">
-      <label for="url" class="col-sm-2 col-form-label fw-bold">Url</label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <input type="url" id="url" name="url" [(ngModel)]="entity.url" class="form-control">
-          <button class="btn btn-outline-secondary" type="button" [ngbPopover]="urlHelp"><i class="bi bi-question"></i></button>
-          <ng-template #urlHelp>Url of the app</ng-template>
-        </div>
-      </div>
-    </div>
-    <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label fw-bold">Scopes</label>
-      <div class="col-sm-10">
-        <div class="form-check" *ngFor="let scope of scopes">
-          <input class="form-check-input" type="checkbox" [value]="scope.id" (change)="scopeSelect($event, scope.name)" [checked]="scope.name && this.entity.scopes?.includes(scope.name)" [id]="scope.name">
-          <label class="form-check-label" [for]="scope.name">{{scope.name}}</label>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-<div class="modal-footer">
-  <ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="submit()">Create</button></ng-container>
-  <ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="submit()">Update</button></ng-container>
-  <ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="submit()">Delete</button></ng-container>
-  <button type="button" class="btn btn-light" (click)="modal.close()">Close</button>
-</div>
diff --git a/projects/fusio-sdk/src/lib/component/app/modal/app-modal.component.ts b/projects/fusio-sdk/src/lib/component/app/modal/app-modal.component.ts
deleted file mode 100644
index 2c42f66..0000000
--- a/projects/fusio-sdk/src/lib/component/app/modal/app-modal.component.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import {Component} from '@angular/core';
-import {Client, CommonMessage, ConsumerApp, ConsumerAppCreate, ConsumerAppUpdate, ConsumerScope} from "fusio-sdk";
-import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {Modal} from "../../../abstract/modal";
-import {FusioService} from "../../../service/fusio.service";
-import {ErrorService} from "../../../service/error.service";
-
-@Component({
-  selector: 'fusio-app-modal',
-  templateUrl: './app-modal.component.html',
-  styleUrls: ['./app-modal.component.css']
-})
-export class AppModalComponent extends Modal<Client, ConsumerApp> {
-
-  scopes?: Array<ConsumerScope>;
-
-  constructor(fusio: FusioService, error: ErrorService, modalService: NgbModal, modal: NgbActiveModal) {
-    super(fusio, error, modalService, modal);
-  }
-
-  override async ngOnInit(): Promise<void> {
-    const response = await this.fusio.getClient().consumer().scope().getAll(0, 1024);
-    this.scopes = response.entry;
-  }
-
-  protected async create(entity: ConsumerApp): Promise<CommonMessage> {
-    return this.fusio.getClient().consumer().app().create(<ConsumerAppCreate> entity);
-  }
-
-  protected async update(entity: ConsumerApp): Promise<CommonMessage> {
-    return this.fusio.getClient().consumer().app().update('' + entity.id, <ConsumerAppUpdate> entity);
-  }
-
-  protected async delete(entity: ConsumerApp): Promise<CommonMessage> {
-    return this.fusio.getClient().consumer().app().delete('' + entity.id);
-  }
-
-  protected newEntity(): ConsumerApp {
-    return {
-      name: '',
-      url: '',
-      scopes: []
-    };
-  }
-
-  scopeSelect(event: any, scope?: string) {
-    const selected = event.target.checked;
-    if (!scope) {
-      return;
-    }
-
-    if (selected) {
-      this.addScope(scope);
-    } else {
-      this.removeScope(scope);
-    }
-  }
-
-  private addScope(scope: string) {
-    this.entity.scopes?.push(scope)
-  }
-
-  private removeScope(scope: string) {
-    this.entity.scopes = this.entity.scopes?.filter((value) => {
-      return value !== scope;
-    });
-  }
-
-}
diff --git a/projects/fusio-sdk/src/lib/component/token/modal/token-modal.component.css b/projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.css
similarity index 100%
rename from projects/fusio-sdk/src/lib/component/token/modal/token-modal.component.css
rename to projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.css
diff --git a/projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.html b/projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.html
new file mode 100644
index 0000000..61e733f
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.html
@@ -0,0 +1,22 @@
+
+<div class="input-group">
+  <input
+    type="text"
+    [id]="name + '_value'"
+    [name]="name + '_value'"
+    class="form-control"
+    [(ngModel)]="selected"
+    [ngbTypeahead]="objectSearch"
+    (focus)="focus$.next($any($event).target.value)"
+    [inputFormatter]="objectFormatter"
+    [resultFormatter]="objectFormatter"
+    [editable]="false"
+    (ngModelChange)="changeValue()"
+    [disabled]="disabled"
+  />
+  <button class="btn btn-outline-secondary" type="button" disabled *ngIf="searching">
+    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+    <span class="visually-hidden" role="status">Loading...</span>
+  </button>
+  <button class="btn btn-outline-secondary" type="button"><i class="bi bi-question"></i></button>
+</div>
diff --git a/projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.ts b/projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.ts
new file mode 100644
index 0000000..99cd5a1
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/autocomplete/form-autocomplete.component.ts
@@ -0,0 +1,72 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {IdAndName, Service} from "../../../abstract/service";
+import {catchError, debounceTime, distinctUntilChanged, map, merge, Observable, of, OperatorFunction, Subject, switchMap, tap} from "rxjs";
+import {fromPromise} from "rxjs/internal/observable/innerFrom";
+
+@Component({
+  selector: 'fusio-form-autocomplete',
+  templateUrl: './form-autocomplete.component.html',
+  styleUrls: ['./form-autocomplete.component.css']
+})
+export class FormAutocompleteComponent implements OnInit {
+
+  @Input() name!: string;
+  @Input() disabled: boolean = false;
+  @Input() data?: string = undefined;
+  @Input() service!: Service<any>;
+  @Input() useName: boolean = false;
+  @Output() dataChange = new EventEmitter<string>();
+
+  focus$ = new Subject<string>();
+
+  searching = false;
+  searchFailed = false;
+
+  selected?: IdAndName<any>
+
+  objectFormatter = (object: IdAndName<any>): string => {
+    return object.name;
+  };
+
+  objectSearch: OperatorFunction<string, Array<IdAndName<any>>> = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
+    const inputFocus$ = this.focus$;
+
+    return merge(debouncedText$, inputFocus$).pipe(
+      tap(() => (this.searching = true)),
+      switchMap((term) =>
+        fromPromise(this.service.getAllWithIdAndName([0, 16, term])).pipe(
+          map((response) => {
+            return response.entry ? response.entry : [];
+          }),
+          tap(() => (this.searchFailed = false)),
+          catchError(() => {
+            this.searchFailed = true;
+            return of([]);
+          }),
+        ),
+      ),
+      tap(() => (this.searching = false)),
+    );
+  }
+
+  async ngOnInit(): Promise<void> {
+    if (this.data) {
+      this.selected = await this.service.getWithIdAndName('' + this.data);
+    }
+  }
+
+  changeValue() {
+    if (this.disabled || !this.selected) {
+      return;
+    }
+
+    const value = this.useName ? this.selected.name : this.selected.id;
+    if (!value) {
+      return;
+    }
+
+    this.dataChange.emit(value);
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/component/webhook/modal/webhook-modal.component.css b/projects/fusio-sdk/src/lib/component/form/checkbox-list/form-checkbox-list.component.css
similarity index 100%
rename from projects/fusio-sdk/src/lib/component/webhook/modal/webhook-modal.component.css
rename to projects/fusio-sdk/src/lib/component/form/checkbox-list/form-checkbox-list.component.css
diff --git a/projects/fusio-sdk/src/lib/component/form/checkbox-list/form-checkbox-list.component.html b/projects/fusio-sdk/src/lib/component/form/checkbox-list/form-checkbox-list.component.html
new file mode 100644
index 0000000..e462b29
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/checkbox-list/form-checkbox-list.component.html
@@ -0,0 +1,13 @@
+
+<ng-container *ngIf="useName">
+  <div class="form-check" *ngFor="let entry of entries">
+    <input class="form-check-input" type="checkbox" [value]="entry.id" (change)="scopeSelect($event, entry.name)" [checked]="entry.name && data?.includes(entry.name)" [id]="entry.name">
+    <label class="form-check-label" [for]="entry.name">{{entry.name}}</label>
+  </div>
+</ng-container>
+<ng-container *ngIf="!useName">
+  <div class="form-check" *ngFor="let entry of entries">
+    <input class="form-check-input" type="checkbox" [value]="entry.id" (change)="scopeSelect($event, entry.id)" [checked]="entry.id && data?.includes(entry.id)" [id]="entry.id">
+    <label class="form-check-label" [for]="entry.id">{{entry.name}}</label>
+  </div>
+</ng-container>
diff --git a/projects/fusio-sdk/src/lib/component/form/checkbox-list/form-checkbox-list.component.ts b/projects/fusio-sdk/src/lib/component/form/checkbox-list/form-checkbox-list.component.ts
new file mode 100644
index 0000000..a7fe1f3
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/checkbox-list/form-checkbox-list.component.ts
@@ -0,0 +1,50 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {IdAndName, Service} from "../../../abstract/service";
+
+@Component({
+  selector: 'fusio-checkbox-list',
+  templateUrl: './form-checkbox-list.component.html',
+  styleUrls: ['./form-checkbox-list.component.css']
+})
+export class FormCheckboxListComponent implements OnInit {
+
+  @Input() name!: string;
+  @Input() disabled: boolean = false;
+  @Input() data?: Array<string> = undefined;
+  @Input() service!: Service<any>;
+  @Input() useName: boolean = true;
+  @Output() dataChange = new EventEmitter<Array<string>>();
+
+  entries?: Array<IdAndName<any>>
+
+  async ngOnInit(): Promise<void> {
+    const response = await this.service.getAllWithIdAndName([0, 1024]);
+    this.entries = response.entry;
+  }
+
+  scopeSelect(event: any, scope?: string) {
+    const selected = event.target.checked;
+    if (!scope) {
+      return;
+    }
+
+    if (selected) {
+      this.addScope(scope);
+    } else {
+      this.removeScope(scope);
+    }
+  }
+
+  private addScope(scope: string) {
+    this.data?.push(scope)
+    this.dataChange.emit(this.data);
+  }
+
+  private removeScope(scope: string) {
+    this.data = this.data?.filter((value) => {
+      return value !== scope;
+    });
+    this.dataChange.emit(this.data);
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/component/form/list/form-list.component.css b/projects/fusio-sdk/src/lib/component/form/list/form-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/projects/fusio-sdk/src/lib/component/form/list/form-list.component.html b/projects/fusio-sdk/src/lib/component/form/list/form-list.component.html
new file mode 100644
index 0000000..a20a851
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/list/form-list.component.html
@@ -0,0 +1,22 @@
+
+<div class="mb-3 row" *ngFor="let property of local; let i = index">
+  <div class="col-sm-12">
+    <div class="input-group">
+      <ng-container *ngIf="type !== 'selector'">
+        <input type="{{type}}" id="{{name}}-{{i}}" name="{{name}}-{{i}}" [ngModel]="property.value" (ngModelChange)="doChange(i, $event)" class="form-control">
+      </ng-container>
+      <ng-container *ngIf="type === 'selector' && service">
+        <fusio-form-autocomplete id="{{name}}-{{i}}" name="{{name}}-{{i}}" [service]="service" [data]="property.value" (dataChange)="property.value = $event"></fusio-form-autocomplete>
+      </ng-container>
+      <button class="btn btn-danger" type="button" (click)="doRemove(i)"><i class="bi bi-x"></i></button>
+    </div>
+  </div>
+</div>
+<div class="mb-3 row">
+  <div class="col-sm-12">
+    <div class="input-group">
+      <input id="{{name}}-newValue" name="{{name}}-newValue" type="{{type}}" [(ngModel)]="newValue" class="form-control">
+      <button class="btn btn-success" type="button" (click)="doAdd()"><i class="bi bi-plus"></i></button>
+    </div>
+  </div>
+</div>
diff --git a/projects/fusio-sdk/src/lib/component/form/list/form-list.component.ts b/projects/fusio-sdk/src/lib/component/form/list/form-list.component.ts
new file mode 100644
index 0000000..c81ac8a
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/list/form-list.component.ts
@@ -0,0 +1,77 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Service} from "../../../abstract/service";
+
+@Component({
+  selector: 'fusio-form-list',
+  templateUrl: './form-list.component.html',
+  styleUrls: ['./form-list.component.css']
+})
+export class FormListComponent implements OnInit {
+
+  @Input() name: string = 'list';
+  @Input() type: string = 'text';
+  @Input() data: Array<any> = [];
+  @Input() service?: Service<any>;
+  @Output() dataChange = new EventEmitter<Array<any>>();
+
+  local: Array<any> = [];
+  newValue: any = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+    if (this.data) {
+      this.local = this.toLocal(this.data);
+    }
+  }
+
+  doChange(index: number, value?: any) {
+    this.local[index].value = value;
+    this.dataChange.emit(this.fromLocal());
+  }
+
+  doAdd() {
+    if (!this.newValue) {
+      return;
+    }
+
+    let newValue = this.newValue;
+    if (this.type === 'number') {
+      newValue = parseInt(newValue);
+    }
+
+    this.local.push({
+      value: newValue
+    });
+    this.newValue = '';
+    this.dataChange.emit(this.fromLocal());
+  }
+
+  doRemove(index: number) {
+    this.local.splice(index, 1);
+    this.dataChange.emit(this.fromLocal());
+  }
+
+  toLocal(data: Array<any>): Array<Entry> {
+    let local: Array<Entry> = [];
+    data.forEach((value) => {
+      local.push({
+        value: value
+      });
+    })
+    return local;
+  }
+
+  fromLocal(): Array<any> {
+    let data: Array<any> = [];
+    this.local.forEach((entry: Entry) => {
+      data.push(entry.value);
+    });
+    return data;
+  }
+
+}
+
+interface Entry {
+  value: string
+}
diff --git a/projects/fusio-sdk/src/lib/component/form/map/form-map.component.css b/projects/fusio-sdk/src/lib/component/form/map/form-map.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/projects/fusio-sdk/src/lib/component/form/map/form-map.component.html b/projects/fusio-sdk/src/lib/component/form/map/form-map.component.html
new file mode 100644
index 0000000..e973bb2
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/map/form-map.component.html
@@ -0,0 +1,26 @@
+
+<div class="mb-3 row" *ngFor="let property of local; let i = index">
+  <label for="{{name}}-{{property.key}}" class="col-sm-2 col-form-label fw-bold">{{property.key}}</label>
+  <div class="col-sm-10">
+    <div class="input-group">
+      <ng-container *ngIf="type !== 'selector'">
+        <input type="{{type}}" id="{{name}}-{{property.key}}" name="{{name}}-{{property.key}}" [ngModel]="property.value" (ngModelChange)="doChange(i, $event)" class="form-control">
+      </ng-container>
+      <ng-container *ngIf="type === 'selector' && service">
+        <fusio-form-autocomplete id="{{name}}-{{property.key}}" name="{{name}}-{{property.key}}" [service]="service" [data]="property.value" (dataChange)="property.value = $event"></fusio-form-autocomplete>
+      </ng-container>
+      <button class="btn btn-danger" type="button" (click)="doRemove(i)"><i class="bi bi-x"></i></button>
+    </div>
+  </div>
+</div>
+<div class="mb-3 row">
+  <div class="col-sm-2">
+    <input type="text" id="{{name}}-newKey" name="{{name}}-newKey" [(ngModel)]="newKey" class="form-control">
+  </div>
+  <div class="col-sm-10">
+    <div class="input-group">
+      <input type="{{type}}" id="{{name}}-newValue" name="{{name}}-newValue" [(ngModel)]="newValue" class="form-control">
+      <button class="btn btn-success" type="button" (click)="doAdd()"><i class="bi bi-plus"></i></button>
+    </div>
+  </div>
+</div>
diff --git a/projects/fusio-sdk/src/lib/component/form/map/form-map.component.ts b/projects/fusio-sdk/src/lib/component/form/map/form-map.component.ts
new file mode 100644
index 0000000..1d49b85
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/map/form-map.component.ts
@@ -0,0 +1,83 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Service} from "../../../abstract/service";
+
+@Component({
+  selector: 'fusio-form-map',
+  templateUrl: './form-map.component.html',
+  styleUrls: ['./form-map.component.css']
+})
+export class FormMapComponent implements OnInit {
+
+  @Input() name: string = 'map';
+  @Input() type: string = 'text';
+  @Input() data: Record<string, any> = {};
+  @Input() service?: Service<any>;
+  @Output() dataChange = new EventEmitter<Record<string, any>>();
+
+  local: Array<Entry> = [];
+  newKey: string = '';
+  newValue: any = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+    if (this.data) {
+      this.local = this.toLocal(this.data);
+    }
+  }
+
+  doChange(index: number, value?: any) {
+    this.local[index].value = value;
+    this.dataChange.emit(this.fromLocal());
+  }
+
+  doAdd() {
+    if (!this.newKey || !this.newValue) {
+      return;
+    }
+
+    let newValue = this.newValue;
+    if (this.type === 'number') {
+      newValue = parseInt(newValue);
+    }
+
+    this.local.push({
+      key: this.newKey,
+      value: newValue,
+    });
+
+    this.newKey = '';
+    this.newValue = '';
+    this.dataChange.emit(this.fromLocal());
+  }
+
+  doRemove(index: number) {
+    this.local.splice(index, 1);
+    this.dataChange.emit(this.fromLocal());
+  }
+
+  toLocal(data: Record<string, any>): Array<Entry> {
+    let local = [];
+    for (const [key, value] of Object.entries(data)) {
+      local.push({
+        key: key,
+        value: value
+      });
+    }
+    return local;
+  }
+
+  fromLocal(): Record<string, any> {
+    let data: Record<string, any> = {};
+    this.local.forEach((entry: Entry) => {
+      data[entry.key] = entry.value;
+    });
+    return data;
+  }
+
+}
+
+interface Entry {
+  key: string
+  value: string
+}
diff --git a/projects/fusio-sdk/src/lib/component/form/select/form-select.component.css b/projects/fusio-sdk/src/lib/component/form/select/form-select.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/projects/fusio-sdk/src/lib/component/form/select/form-select.component.html b/projects/fusio-sdk/src/lib/component/form/select/form-select.component.html
new file mode 100644
index 0000000..eab0dc5
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/select/form-select.component.html
@@ -0,0 +1,13 @@
+
+<div class="input-group">
+  <ng-container *ngIf="useName">
+    <select [id]="name" [name]="name" [ngModel]="data" (ngModelChange)="changeValue($event)" [disabled]="disabled" class="form-select">
+      <option *ngFor="let entry of entries" [ngValue]="entry.name">{{entry.name}}</option>
+    </select>
+  </ng-container>
+  <ng-container *ngIf="!useName">
+    <select [id]="name" [name]="name" [ngModel]="data" (ngModelChange)="changeValue($event)" [disabled]="disabled" class="form-select">
+      <option *ngFor="let entry of entries" [ngValue]="entry.id">{{entry.name}}</option>
+    </select>
+  </ng-container>
+</div>
diff --git a/projects/fusio-sdk/src/lib/component/form/select/form-select.component.ts b/projects/fusio-sdk/src/lib/component/form/select/form-select.component.ts
new file mode 100644
index 0000000..4ea1f37
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/form/select/form-select.component.ts
@@ -0,0 +1,33 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {IdAndName, Service} from "../../../abstract/service";
+
+@Component({
+  selector: 'fusio-select',
+  templateUrl: './form-select.component.html',
+  styleUrls: ['./form-select.component.css']
+})
+export class FormSelectComponent implements OnInit {
+
+  @Input() name!: string;
+  @Input() disabled: boolean = false;
+  @Input() data?: string = undefined;
+  @Input() service!: Service<any>;
+  @Input() useName: boolean = true;
+  @Output() dataChange = new EventEmitter<string>();
+
+  entries?: Array<IdAndName<any>>
+
+  async ngOnInit(): Promise<void> {
+    const response = await this.service.getAllWithIdAndName([0, 1024]);
+    this.entries = response.entry;
+  }
+
+  changeValue(value: string) {
+    if (!value) {
+      return;
+    }
+
+    this.dataChange.emit(value);
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/component/log/detail/log-detail.component.html b/projects/fusio-sdk/src/lib/component/log/detail/log-detail.component.html
index 6b1c23d..8d1e7b9 100644
--- a/projects/fusio-sdk/src/lib/component/log/detail/log-detail.component.html
+++ b/projects/fusio-sdk/src/lib/component/log/detail/log-detail.component.html
@@ -1,6 +1,9 @@
 <div class="card" *ngIf="selected">
   <div class="card-header">{{selected.path}}</div>
   <div class="card-body">
+    <div class="btn-group" role="group">
+      <a [routerLink]="getListLink()" class="btn btn-secondary fusio-btn-back">Back</a>
+    </div>
     <div class="fusio-detail">
       <div class="row">
         <div class="col-lg-2 fw-bold">IP</div>
diff --git a/projects/fusio-sdk/src/lib/component/log/detail/log-detail.component.ts b/projects/fusio-sdk/src/lib/component/log/detail/log-detail.component.ts
index 2dec83a..b85c9a6 100644
--- a/projects/fusio-sdk/src/lib/component/log/detail/log-detail.component.ts
+++ b/projects/fusio-sdk/src/lib/component/log/detail/log-detail.component.ts
@@ -1,6 +1,9 @@
 import {Component} from '@angular/core';
 import {ConsumerLog} from "fusio-sdk";
 import {Detail} from "../../../abstract/detail";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ErrorService} from "../../../service/error.service";
+import {LogService} from "../../../service/log.service";
 
 @Component({
   selector: 'fusio-log-detail',
@@ -9,4 +12,12 @@ import {Detail} from "../../../abstract/detail";
 })
 export class LogDetailComponent extends Detail<ConsumerLog> {
 
+  constructor(private log: LogService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
+  }
+
+  protected getService(): LogService {
+    return this.log;
+  }
+
 }
diff --git a/projects/fusio-sdk/src/lib/component/log/list/log-list.component.html b/projects/fusio-sdk/src/lib/component/log/list/log-list.component.html
index a2bbbc4..0b54c68 100644
--- a/projects/fusio-sdk/src/lib/component/log/list/log-list.component.html
+++ b/projects/fusio-sdk/src/lib/component/log/list/log-list.component.html
@@ -1,28 +1,41 @@
-
-<fusio-message [response]="response"></fusio-message>
-
-<fusio-search
-  [searchTerm]="search"
-  (search)="doSearch(1, $event)"
-  placeholder="log">
-</fusio-search>
-
-<div class="row">
-  <div class="col-md-3">
-    <fusio-sidebar
-      name="log"
-      nameKey="path"
-      [entries]="entries"
-      [totalResults]="totalResults"
-      [selected]="selected"
-      [page]="page"
+<div class="card">
+  <div class="card-header">Log</div>
+  <div class="card-body">
+    <fusio-search
+      [searchTerm]="search"
+      (search)="doSearch(1, $event)"
+      placeholder="log">
+    </fusio-search>
+    <table class="table table-striped">
+      <thead>
+      <tr>
+        <th>Method</th>
+        <th>Path</th>
+        <th>IP</th>
+        <th>Insert-Date</th>
+        <th></th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let entry of entries">
+        <td>{{entry.method}}</td>
+        <td>{{entry.path}}</td>
+        <td>{{entry.ip}}</td>
+        <td>{{entry.date|date:'short'}}</td>
+        <td>
+          <div class="btn-group" role="group">
+            <a [routerLink]="getDetailLink(entry.id)" class="btn btn-primary"><i class="bi bi-search"></i></a>
+          </div>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <ngb-pagination
+      [(page)]="page"
       [pageSize]="pageSize"
-      (pageChange)="doSearch($event, search)"
-      (entrySelect)="doSelect($event)">
-    </fusio-sidebar>
-  </div>
-  <div class="col-md-9">
-    <fusio-empty *ngIf="!selected" [loading]="loading" ></fusio-empty>
-    <fusio-log-detail *ngIf="selected" [selected]="selected"></fusio-log-detail>
+      [collectionSize]="totalResults"
+      [maxSize]="4"
+      [ellipses]="false"
+      (pageChange)="doSearch($event)"></ngb-pagination>
   </div>
 </div>
diff --git a/projects/fusio-sdk/src/lib/component/log/list/log-list.component.ts b/projects/fusio-sdk/src/lib/component/log/list/log-list.component.ts
index 21d4b33..c1dbe6d 100644
--- a/projects/fusio-sdk/src/lib/component/log/list/log-list.component.ts
+++ b/projects/fusio-sdk/src/lib/component/log/list/log-list.component.ts
@@ -1,28 +1,23 @@
 import {Component} from '@angular/core';
-import {Client, ConsumerLog, ConsumerLogCollection} from "fusio-sdk";
 import {List} from "../../../abstract/list";
+import {ConsumerLog} from "fusio-sdk";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ErrorService} from "../../../service/error.service";
+import {LogService} from "../../../service/log.service";
 
 @Component({
   selector: 'fusio-log-list',
   templateUrl: './log-list.component.html',
   styleUrls: ['./log-list.component.css']
 })
-export class LogListComponent extends List<Client, ConsumerLog> {
+export class LogListComponent extends List<ConsumerLog> {
 
-  protected async getAll(parameters: Array<any>): Promise<ConsumerLogCollection> {
-    return this.fusio.getClient().consumer().log().getAll(...parameters);
+  constructor(private log: LogService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
   }
 
-  protected async get(id: string): Promise<ConsumerLog> {
-    return this.fusio.getClient().consumer().log().get('' + id);
-  }
-
-  protected getDetailComponent(): any {
-    return null;
-  }
-
-  protected getRoute(): any {
-    return '/account/log';
+  protected getService(): LogService {
+    return this.log;
   }
 
 }
diff --git a/projects/fusio-sdk/src/lib/component/register/activate/activate.component.ts b/projects/fusio-sdk/src/lib/component/register/activate/activate.component.ts
index 9bbf3f4..55be9e5 100644
--- a/projects/fusio-sdk/src/lib/component/register/activate/activate.component.ts
+++ b/projects/fusio-sdk/src/lib/component/register/activate/activate.component.ts
@@ -14,7 +14,7 @@ export class ActivateComponent implements OnInit {
 
   response?: CommonMessage;
 
-  constructor(private fusio: FusioService, private event: EventService, private error: ErrorService, protected route: ActivatedRoute) {
+  constructor(private fusio: FusioService, private error: ErrorService, protected route: ActivatedRoute) {
   }
 
   async ngOnInit(): Promise<void> {
@@ -33,8 +33,6 @@ export class ActivateComponent implements OnInit {
 
     try {
       this.response = await this.fusio.getClientAnonymous().consumer().account().activate(activate);
-
-      this.event.dispatchRegisterActivate();
     } catch (error) {
       this.response = this.error.convert(error);
     }
diff --git a/projects/fusio-sdk/src/lib/component/register/register.component.ts b/projects/fusio-sdk/src/lib/component/register/register.component.ts
index b8fc8cf..2806857 100644
--- a/projects/fusio-sdk/src/lib/component/register/register.component.ts
+++ b/projects/fusio-sdk/src/lib/component/register/register.component.ts
@@ -24,7 +24,7 @@ export class RegisterComponent implements OnInit {
   response?: CommonMessage;
   loading = false
 
-  constructor(private fusio: FusioService, private event: EventService, private error: ErrorService, private config: ConfigService) {
+  constructor(private fusio: FusioService, private error: ErrorService, private config: ConfigService) {
   }
 
   ngOnInit(): void {
@@ -54,8 +54,6 @@ export class RegisterComponent implements OnInit {
       this.response = await this.fusio.getClientAnonymous().consumer().account().register(this.credentials);
       this.loading = false;
 
-      this.event.dispatchRegister(this.credentials.name, this.credentials.email);
-
       this.resetForm();
     } catch (error) {
       this.loading = false;
diff --git a/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.css b/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.css
deleted file mode 100644
index 583938b..0000000
--- a/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.css
+++ /dev/null
@@ -1,35 +0,0 @@
-
-.fusio-sidebar
-{
-  min-height:600px;
-}
-
-.fusio-sidebar ul
-{
-  list-style-type:none;
-  margin:0;
-  padding:0;
-}
-
-.fusio-sidebar li
-{
-  margin:0;
-  padding:0;
-}
-
-.fusio-sidebar a
-{
-  font-family:monospace;
-  font-size: 14px;
-  cursor:pointer;
-  padding:8px 0;
-  display:block;
-  overflow:hidden;
-  white-space:nowrap;
-  text-decoration:none;
-}
-
-.fusio-sidebar a:hover
-{
-  background-color:#eee;
-}
diff --git a/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.html b/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.html
deleted file mode 100644
index 83970e5..0000000
--- a/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-<div class="card">
-  <div class="card-header">{{name | titlecase}}</div>
-  <div class="card-body">
-    <div class="fusio-sidebar">
-      <ul>
-        <li *ngFor="let entry of entries">
-          <a (click)="doEntrySelect(entry)" class="link-primary" title="{{entry[nameKey]}}">
-            <b *ngIf="selected?.id === entry.id">{{entry[nameKey]}}</b>
-            <span *ngIf="selected?.id !== entry.id">{{entry[nameKey]}}</span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <ngb-pagination
-      [(page)]="page"
-      [pageSize]="pageSize"
-      [collectionSize]="totalResults"
-      [maxSize]="4"
-      [ellipses]="false"
-      (pageChange)="doPageChange($event)"></ngb-pagination>
-  </div>
-</div>
diff --git a/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.ts b/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.ts
deleted file mode 100644
index 1a2fdfe..0000000
--- a/projects/fusio-sdk/src/lib/component/sidebar/sidebar.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {ModelId} from "../../abstract/query";
-
-@Component({
-  selector: 'fusio-sidebar',
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.css']
-})
-export class SidebarComponent<T extends ModelId & Properties> implements OnInit {
-
-  @Input()
-  public name!: string;
-  @Input()
-  public nameKey!: string;
-  @Input()
-  public totalResults: number = 0;
-  @Input()
-  public entries: Array<T> = [];
-  @Input()
-  public selected?: T;
-  @Input()
-  public page!: number;
-  @Input()
-  public pageSize!: number;
-  @Output()
-  pageChange: EventEmitter<number> = new EventEmitter<number>();
-  @Output()
-  entrySelect: EventEmitter<T> = new EventEmitter<T>();
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  doPageChange(page: number): void {
-    this.pageChange.emit(page);
-  }
-
-  doEntrySelect(entry: T): void {
-    this.entrySelect.emit(entry);
-  }
-
-}
-
-interface Properties {
-  [key: string]: any
-}
diff --git a/projects/fusio-sdk/src/lib/component/subscription/callback/callback.component.ts b/projects/fusio-sdk/src/lib/component/subscription/callback/callback.component.ts
index fa381d4..ba92b94 100644
--- a/projects/fusio-sdk/src/lib/component/subscription/callback/callback.component.ts
+++ b/projects/fusio-sdk/src/lib/component/subscription/callback/callback.component.ts
@@ -17,7 +17,7 @@ export class CallbackComponent implements OnInit {
   plan?: ConsumerPlan;
   response?: CommonMessage;
 
-  constructor(private fusio: FusioService, private event: EventService, private error: ErrorService, private config: ConfigService, private route: ActivatedRoute) { }
+  constructor(private fusio: FusioService, private error: ErrorService, private config: ConfigService, private route: ActivatedRoute) { }
 
   async ngOnInit(): Promise<void> {
     this.homePath = this.config.getHomePath();
@@ -33,8 +33,6 @@ export class CallbackComponent implements OnInit {
   async loadPlan(id: string) {
     try {
       this.plan = await this.fusio.getClient().consumer().plan().get(id);
-
-      this.event.dispatchPurchase(this.plan);
     } catch (error) {
       this.response = this.error.convert(error);
     }
diff --git a/projects/fusio-sdk/src/lib/component/subscription/subscription.component.ts b/projects/fusio-sdk/src/lib/component/subscription/subscription.component.ts
index 304c7b5..7d01f39 100644
--- a/projects/fusio-sdk/src/lib/component/subscription/subscription.component.ts
+++ b/projects/fusio-sdk/src/lib/component/subscription/subscription.component.ts
@@ -17,7 +17,7 @@ export class SubscriptionComponent implements OnInit {
   plans?: Array<ConsumerPlan>
   response?: CommonMessage;
 
-  constructor(private fusio: FusioService, private location: LocationStrategy, private event: EventService, private error: ErrorService, private config: ConfigService) { }
+  constructor(private fusio: FusioService, private location: LocationStrategy, private error: ErrorService, private config: ConfigService) { }
 
   async ngOnInit(): Promise<void> {
     const response = await this.fusio.getClient().consumer().plan().getAll(0, 1024);
@@ -55,8 +55,6 @@ export class SubscriptionComponent implements OnInit {
       });
 
       if (response.approvalUrl) {
-        this.event.dispatchCheckout(plan);
-
         location.href = response.approvalUrl;
       }
     } catch (error) {
diff --git a/projects/fusio-sdk/src/lib/component/token/detail/token-detail.component.html b/projects/fusio-sdk/src/lib/component/token/detail/token-detail.component.html
index 1b67ece..4c3e6b6 100644
--- a/projects/fusio-sdk/src/lib/component/token/detail/token-detail.component.html
+++ b/projects/fusio-sdk/src/lib/component/token/detail/token-detail.component.html
@@ -2,8 +2,9 @@
   <div class="card-header">{{selected.name}}</div>
   <div class="card-body">
     <div class="btn-group" role="group">
-      <button type="button" (click)="doUpdateClick()" class="btn btn-primary fusio-btn-update">Update</button>
-      <button type="button" (click)="doDeleteClick()" class="btn btn-danger fusio-btn-delete">Delete</button>
+      <a [routerLink]="getListLink()" class="btn btn-secondary fusio-btn-back">Back</a>
+      <a [routerLink]="getEditLink(selected.id)" class="btn btn-primary fusio-btn-update">Update</a>
+      <a [routerLink]="getDeleteLink(selected.id)" class="btn btn-danger fusio-btn-delete">Delete</a>
     </div>
     <div class="fusio-detail">
       <div class="row">
diff --git a/projects/fusio-sdk/src/lib/component/token/detail/token-detail.component.ts b/projects/fusio-sdk/src/lib/component/token/detail/token-detail.component.ts
index 6a7f93b..3ceb460 100644
--- a/projects/fusio-sdk/src/lib/component/token/detail/token-detail.component.ts
+++ b/projects/fusio-sdk/src/lib/component/token/detail/token-detail.component.ts
@@ -1,6 +1,9 @@
 import {Component} from '@angular/core';
 import {ConsumerToken} from "fusio-sdk";
 import {Detail} from "../../../abstract/detail";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ErrorService} from "../../../service/error.service";
+import {TokenService} from "../../../service/token.service";
 
 @Component({
   selector: 'fusio-token-detail',
@@ -9,4 +12,12 @@ import {Detail} from "../../../abstract/detail";
 })
 export class TokenDetailComponent extends Detail<ConsumerToken> {
 
+  constructor(private token: TokenService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
+  }
+
+  protected getService(): TokenService {
+    return this.token;
+  }
+
 }
diff --git a/projects/fusio-sdk/src/lib/component/token/form/token-form.component.css b/projects/fusio-sdk/src/lib/component/token/form/token-form.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/projects/fusio-sdk/src/lib/component/token/form/token-form.component.html b/projects/fusio-sdk/src/lib/component/token/form/token-form.component.html
new file mode 100644
index 0000000..70935ff
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/token/form/token-form.component.html
@@ -0,0 +1,51 @@
+<div class="card" *ngIf="entity">
+  <div class="card-header">
+    <ng-container *ngIf="mode === 1">Create</ng-container>
+    <ng-container *ngIf="mode === 2">Update</ng-container>
+    <ng-container *ngIf="mode === 3">Delete</ng-container>
+  </div>
+  <div class="card-body">
+    <fusio-message [response]="response"></fusio-message>
+    <div *ngIf="accessToken">
+      <p>Make sure to copy your personal access token now as you will not be able to see this again.</p>
+      <div class="input-group mb-3">
+        <input type="text" [ngModel]="accessToken.access_token" readonly class="form-control">
+        <button class="btn btn-primary" ngxClipboard [cbContent]="accessToken.access_token">Copy</button>
+      </div>
+    </div>
+    <form>
+      <div class="mb-3 row">
+        <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input type="text" id="name" name="name" [(ngModel)]="entity.name" [disabled]="mode === 3" class="form-control">
+            <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
+            <ng-template #nameHelp>The name of the token</ng-template>
+          </div>
+        </div>
+      </div>
+      <div class="mb-3 row">
+        <label for="name" class="col-sm-2 col-form-label fw-bold">Expires</label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input type="date" id="expire" name="expire" [(ngModel)]="entity.expire" [disabled]="mode === 3" class="form-control">
+            <button class="btn btn-outline-secondary" type="button" [ngbPopover]="expireHelp"><i class="bi bi-question"></i></button>
+            <ng-template #expireHelp>Date at which the token expires</ng-template>
+          </div>
+        </div>
+      </div>
+      <div class="mb-3 row">
+        <label class="col-sm-2 col-form-label fw-bold">Scopes</label>
+        <div class="col-sm-10">
+          <fusio-checkbox-list name="scopes" [service]="scope" [data]="entity.scopes" (dataChange)="entity.scopes = $event" [disabled]="mode === 3"></fusio-checkbox-list>
+        </div>
+      </div>
+      <div class="btn-group" role="group">
+        <ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="doCreate(entity)">Create</button></ng-container>
+        <ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="doUpdate(entity)">Update</button></ng-container>
+        <ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="doDelete(entity)">Delete</button></ng-container>
+        <button type="button" (click)="router.navigate(getListLink())" class="btn btn-light fusio-btn-back">Back</button>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/projects/fusio-sdk/src/lib/component/token/form/token-form.component.ts b/projects/fusio-sdk/src/lib/component/token/form/token-form.component.ts
new file mode 100644
index 0000000..fb101e3
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/token/form/token-form.component.ts
@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {ConsumerToken, ConsumerTokenAccessToken} from "fusio-sdk";
+import {ErrorService} from "../../../service/error.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {Form} from "../../../abstract/form";
+import {TokenService} from "../../../service/token.service";
+import {ScopeService} from "../../../service/scope.service";
+import {error} from "ng-packagr/lib/utils/log";
+
+@Component({
+  selector: 'fusio-token-form',
+  templateUrl: './token-form.component.html',
+  styleUrls: ['./token-form.component.css']
+})
+export class TokenFormComponent extends Form<ConsumerToken> {
+
+  accessToken?: ConsumerTokenAccessToken;
+
+  constructor(private token: TokenService, public scope: ScopeService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
+  }
+
+  protected getService(): TokenService {
+    return this.token;
+  }
+
+  protected override onSubmit() {
+    this.accessToken = this.token.getToken();
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/component/token/list/token-list.component.html b/projects/fusio-sdk/src/lib/component/token/list/token-list.component.html
index 8642d8d..d4ffbae 100644
--- a/projects/fusio-sdk/src/lib/component/token/list/token-list.component.html
+++ b/projects/fusio-sdk/src/lib/component/token/list/token-list.component.html
@@ -1,33 +1,40 @@
-
-<fusio-message [response]="response"></fusio-message>
-
-<fusio-search
-  [searchTerm]="search"
-  (search)="doSearch(1, $event)"
-  (newClick)="openCreateDialog()"
-  placeholder="token">
-</fusio-search>
-
-<div class="row">
-  <div class="col-md-3">
-    <fusio-sidebar
-      name="token"
-      nameKey="name"
-      [entries]="entries"
-      [totalResults]="totalResults"
-      [selected]="selected"
-      [page]="page"
+<div class="card">
+  <div class="card-header">Token</div>
+  <div class="card-body">
+    <fusio-search
+      [searchTerm]="search"
+      (search)="doSearch(1, $event)"
+      (newClick)="router.navigate(getNewLink())"
+      placeholder="token">
+    </fusio-search>
+    <table class="table table-striped">
+      <thead>
+      <tr>
+        <th style="width:50%">Name</th>
+        <th style="width:50%">Scopes</th>
+        <th style="width:100px"></th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let entry of entries">
+        <td>{{entry.name}}</td>
+        <td><fusio-scopes [scopes]="entry.scopes"></fusio-scopes></td>
+        <td>
+          <div class="btn-group" role="group">
+            <a [routerLink]="getDetailLink(entry.id)" class="btn btn-primary"><i class="bi bi-search"></i></a>
+            <a [routerLink]="getEditLink(entry.id)" class="btn btn-secondary"><i class="bi bi-pen"></i></a>
+            <a [routerLink]="getDeleteLink(entry.id)" class="btn btn-secondary"><i class="bi bi-x"></i></a>
+          </div>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <ngb-pagination
+      [(page)]="page"
       [pageSize]="pageSize"
-      (pageChange)="doSearch($event, search)"
-      (entrySelect)="doSelect($event)">
-    </fusio-sidebar>
-  </div>
-  <div class="col-md-9">
-    <fusio-empty *ngIf="!selected" [loading]="loading" (newClick)="openCreateDialog()"></fusio-empty>
-    <fusio-token-detail *ngIf="selected"
-                              [selected]="selected"
-                              (updateClick)="openUpdateDialog(selected)"
-                              (deleteClick)="openDeleteDialog(selected)">
-    </fusio-token-detail>
+      [collectionSize]="totalResults"
+      [maxSize]="4"
+      [ellipses]="false"
+      (pageChange)="doSearch($event)"></ngb-pagination>
   </div>
 </div>
diff --git a/projects/fusio-sdk/src/lib/component/token/list/token-list.component.ts b/projects/fusio-sdk/src/lib/component/token/list/token-list.component.ts
index 9d9dfaf..21ad977 100644
--- a/projects/fusio-sdk/src/lib/component/token/list/token-list.component.ts
+++ b/projects/fusio-sdk/src/lib/component/token/list/token-list.component.ts
@@ -1,29 +1,23 @@
 import {Component} from '@angular/core';
-import {Client, ConsumerToken, ConsumerTokenCollection} from "fusio-sdk";
+import {ConsumerToken} from "fusio-sdk";
 import {List} from "../../../abstract/list";
-import {TokenModalComponent} from "../modal/token-modal.component";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ErrorService} from "../../../service/error.service";
+import {TokenService} from "../../../service/token.service";
 
 @Component({
   selector: 'fusio-token-list',
   templateUrl: './token-list.component.html',
   styleUrls: ['./token-list.component.css']
 })
-export class TokenListComponent extends List<Client, ConsumerToken> {
+export class TokenListComponent extends List<ConsumerToken> {
 
-  protected async getAll(parameters: Array<any>): Promise<ConsumerTokenCollection> {
-    return this.fusio.getClient().consumer().token().getAll(...parameters);
+  constructor(private token: TokenService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
   }
 
-  protected async get(id: string): Promise<ConsumerToken> {
-    return this.fusio.getClient().consumer().token().get('' + id);
-  }
-
-  protected getDetailComponent(): any {
-    return TokenModalComponent;
-  }
-
-  protected getRoute(): any {
-    return '/account/token';
+  protected getService(): TokenService {
+    return this.token;
   }
 
 }
diff --git a/projects/fusio-sdk/src/lib/component/token/modal/token-modal.component.html b/projects/fusio-sdk/src/lib/component/token/modal/token-modal.component.html
deleted file mode 100644
index 151a67f..0000000
--- a/projects/fusio-sdk/src/lib/component/token/modal/token-modal.component.html
+++ /dev/null
@@ -1,49 +0,0 @@
-
-<div class="modal-header">
-  <h4 class="modal-title">
-    <ng-container *ngIf="mode === 1">Create</ng-container>
-    <ng-container *ngIf="mode === 2">Update</ng-container>
-    <ng-container *ngIf="mode === 3">Delete</ng-container>
-  </h4>
-  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
-</div>
-<div class="modal-body">
-  <fusio-message [response]="response"></fusio-message>
-  <form>
-    <div class="mb-3 row">
-      <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <input type="text" id="name" name="name" [(ngModel)]="entity.name" class="form-control">
-          <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
-          <ng-template #nameHelp>The name of the token</ng-template>
-        </div>
-      </div>
-    </div>
-    <div class="mb-3 row">
-      <label for="name" class="col-sm-2 col-form-label fw-bold">Expires</label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <input type="date" id="expire" name="expire" [(ngModel)]="entity.expire" class="form-control">
-          <button class="btn btn-outline-secondary" type="button" [ngbPopover]="expireHelp"><i class="bi bi-question"></i></button>
-          <ng-template #expireHelp>Date at which the token expires</ng-template>
-        </div>
-      </div>
-    </div>
-    <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label fw-bold">Scopes</label>
-      <div class="col-sm-10">
-        <div class="form-check" *ngFor="let scope of scopes">
-          <input class="form-check-input" type="checkbox" [value]="scope.id" (change)="scopeSelect($event, scope.name)" [checked]="scope.name && this.entity.scopes?.includes(scope.name)" [id]="scope.name">
-          <label class="form-check-label" [for]="scope.name">{{scope.name}}</label>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-<div class="modal-footer">
-  <ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="submit()">Create</button></ng-container>
-  <ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="submit()">Update</button></ng-container>
-  <ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="submit()">Delete</button></ng-container>
-  <button type="button" class="btn btn-light" (click)="modal.close()">Close</button>
-</div>
diff --git a/projects/fusio-sdk/src/lib/component/token/modal/token-modal.component.ts b/projects/fusio-sdk/src/lib/component/token/modal/token-modal.component.ts
deleted file mode 100644
index 1be790d..0000000
--- a/projects/fusio-sdk/src/lib/component/token/modal/token-modal.component.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import {Component} from '@angular/core';
-import {Client, CommonMessage, ConsumerScope, ConsumerToken, ConsumerTokenCreate, ConsumerTokenUpdate} from "fusio-sdk";
-import {Modal} from "../../../abstract/modal";
-import {FusioService} from "../../../service/fusio.service";
-import {ErrorService} from "../../../service/error.service";
-import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {TokenShowComponent} from "../show/token-show.component";
-
-@Component({
-  selector: 'fusio-token-modal',
-  templateUrl: './token-modal.component.html',
-  styleUrls: ['./token-modal.component.css']
-})
-export class TokenModalComponent extends Modal<Client, ConsumerToken> {
-
-  scopes?: Array<ConsumerScope>;
-
-  constructor(fusio: FusioService, error: ErrorService, modalService: NgbModal, modal: NgbActiveModal) {
-    super(fusio, error, modalService, modal);
-  }
-
-  override async ngOnInit(): Promise<void> {
-    const response = await this.fusio.getClient().consumer().scope().getAll(0, 1024);
-    this.scopes = response.entry;
-  }
-
-  protected async create(entity: ConsumerToken): Promise<CommonMessage> {
-    const accessToken = await this.fusio.getClient().consumer().token().create(<ConsumerTokenCreate> entity);
-
-    const modalRef = this.modalService.open(TokenShowComponent, {
-      size: 'md'
-    });
-    modalRef.componentInstance.token = accessToken;
-
-    return {
-      success: true,
-      message: 'Token successfully generated',
-    };
-  }
-
-  protected async update(entity: ConsumerToken): Promise<CommonMessage> {
-    const accessToken = await this.fusio.getClient().consumer().token().update('' + entity.id, <ConsumerTokenUpdate> entity);
-
-    const modalRef = this.modalService.open(TokenShowComponent, {
-      size: 'md'
-    });
-    modalRef.componentInstance.token = accessToken;
-
-    return {
-      success: true,
-      message: 'Token successfully updated',
-    };
-  }
-
-  protected async delete(entity: ConsumerToken): Promise<CommonMessage> {
-    return this.fusio.getClient().consumer().token().delete('' + entity.id);
-  }
-
-  protected newEntity(): ConsumerToken {
-    return {
-      name: '',
-      scopes: [],
-    };
-  }
-
-  scopeSelect(event: any, scope?: string) {
-    const selected = event.target.checked;
-    if (!scope) {
-      return;
-    }
-
-    if (selected) {
-      this.addScope(scope);
-    } else {
-      this.removeScope(scope);
-    }
-  }
-
-  private addScope(scope: string) {
-    this.entity.scopes?.push(scope)
-  }
-
-  private removeScope(scope: string) {
-    this.entity.scopes = this.entity.scopes?.filter((value) => {
-      return value !== scope;
-    });
-  }
-
-}
diff --git a/projects/fusio-sdk/src/lib/component/token/show/token-show.component.html b/projects/fusio-sdk/src/lib/component/token/show/token-show.component.html
index 16fb98f..e9d34f0 100644
--- a/projects/fusio-sdk/src/lib/component/token/show/token-show.component.html
+++ b/projects/fusio-sdk/src/lib/component/token/show/token-show.component.html
@@ -4,12 +4,7 @@ <h4 class="modal-title">Token</h4>
   <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
 </div>
 <div class="modal-body">
-  <p>Make sure to copy your personal access token now as you will not be able to see this again.</p>
-  <div class="input-group mb-3">
-    <input type="text" [ngModel]="token.access_token" readonly class="form-control">
-    <button class="btn btn-primary" ngxClipboard [cbContent]="token.access_token">Copy</button>
-  </div>
-  <p class="text-muted">Expires on: {{expires|date:'yyyy-MM-dd'}}</p>
+
 </div>
 <div class="modal-footer">
   <button type="button" class="btn btn-light" (click)="modal.close()">Close</button>
diff --git a/projects/fusio-sdk/src/lib/component/webhook/detail/webhook-detail.component.html b/projects/fusio-sdk/src/lib/component/webhook/detail/webhook-detail.component.html
index 90bcf59..619f9bb 100644
--- a/projects/fusio-sdk/src/lib/component/webhook/detail/webhook-detail.component.html
+++ b/projects/fusio-sdk/src/lib/component/webhook/detail/webhook-detail.component.html
@@ -2,8 +2,9 @@
   <div class="card-header">{{selected.name}}</div>
   <div class="card-body">
     <div class="btn-group" role="group">
-      <button type="button" (click)="doUpdateClick()" class="btn btn-primary fusio-btn-update">Update</button>
-      <button type="button" (click)="doDeleteClick()" class="btn btn-danger fusio-btn-delete">Delete</button>
+      <a [routerLink]="getListLink()" class="btn btn-secondary fusio-btn-back">Back</a>
+      <a [routerLink]="getEditLink(selected.id)" class="btn btn-primary fusio-btn-update">Update</a>
+      <a [routerLink]="getDeleteLink(selected.id)" class="btn btn-danger fusio-btn-delete">Delete</a>
     </div>
     <div class="fusio-detail">
       <div class="row">
diff --git a/projects/fusio-sdk/src/lib/component/webhook/detail/webhook-detail.component.ts b/projects/fusio-sdk/src/lib/component/webhook/detail/webhook-detail.component.ts
index a505159..4c869b6 100644
--- a/projects/fusio-sdk/src/lib/component/webhook/detail/webhook-detail.component.ts
+++ b/projects/fusio-sdk/src/lib/component/webhook/detail/webhook-detail.component.ts
@@ -1,6 +1,9 @@
 import {Component} from '@angular/core';
 import {Detail} from "../../../abstract/detail";
 import {ConsumerWebhook} from "fusio-sdk";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ErrorService} from "../../../service/error.service";
+import {WebhookService} from "../../../service/webhook.service";
 
 @Component({
   selector: 'fusio-webhook-detail',
@@ -9,4 +12,12 @@ import {ConsumerWebhook} from "fusio-sdk";
 })
 export class WebhookDetailComponent extends Detail<ConsumerWebhook> {
 
+  constructor(private webhook: WebhookService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
+  }
+
+  protected getService(): WebhookService {
+    return this.webhook;
+  }
+
 }
diff --git a/projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.css b/projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.html b/projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.html
new file mode 100644
index 0000000..95d0435
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.html
@@ -0,0 +1,44 @@
+<div class="card" *ngIf="entity">
+  <div class="card-header">
+    <ng-container *ngIf="mode === 1">Create</ng-container>
+    <ng-container *ngIf="mode === 2">Update</ng-container>
+    <ng-container *ngIf="mode === 3">Delete</ng-container>
+  </div>
+  <div class="card-body">
+    <fusio-message [response]="response"></fusio-message>
+    <form>
+      <div class="mb-3 row">
+        <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input type="text" id="name" name="name" [(ngModel)]="entity.name" [disabled]="mode === 3" class="form-control">
+            <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
+            <ng-template #nameHelp>The name of the webhook</ng-template>
+          </div>
+        </div>
+      </div>
+      <div class="mb-3 row">
+        <label for="event" class="col-sm-2 col-form-label fw-bold">Event</label>
+        <div class="col-sm-10">
+          <fusio-select id="event" name="event" [service]="event" [data]="entity.event" (dataChange)="entity.event = $event" [disabled]="mode === 3"></fusio-select>
+        </div>
+      </div>
+      <div class="mb-3 row">
+        <label for="endpoint" class="col-sm-2 col-form-label fw-bold">Endpoint</label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input type="url" id="endpoint" name="endpoint" [(ngModel)]="entity.endpoint" [disabled]="mode === 3" class="form-control">
+            <button class="btn btn-outline-secondary" type="button" [ngbPopover]="endpointHelp"><i class="bi bi-question"></i></button>
+            <ng-template #endpointHelp>The endpoint which receives the webhook</ng-template>
+          </div>
+        </div>
+      </div>
+      <div class="btn-group" role="group">
+        <ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="doCreate(entity)">Create</button></ng-container>
+        <ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="doUpdate(entity)">Update</button></ng-container>
+        <ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="doDelete(entity)">Delete</button></ng-container>
+        <button type="button" (click)="router.navigate(getListLink())" class="btn btn-light fusio-btn-back">Back</button>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.ts b/projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.ts
new file mode 100644
index 0000000..fc13b95
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/component/webhook/form/webhook-form.component.ts
@@ -0,0 +1,24 @@
+import {Component} from '@angular/core';
+import {ConsumerWebhook} from "fusio-sdk";
+import {ErrorService} from "../../../service/error.service";
+import {Form} from "../../../abstract/form";
+import {ActivatedRoute, Router} from "@angular/router";
+import {WebhookService} from "../../../service/webhook.service";
+import {EventService} from "../../../service/event.service";
+
+@Component({
+  selector: 'fusio-webhook-form',
+  templateUrl: './webhook-form.component.html',
+  styleUrls: ['./webhook-form.component.css']
+})
+export class WebhookFormComponent extends Form<ConsumerWebhook> {
+
+  constructor(private webhook: WebhookService, public event: EventService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
+  }
+
+  protected getService(): WebhookService {
+    return this.webhook;
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/component/webhook/list/webhook-list.component.html b/projects/fusio-sdk/src/lib/component/webhook/list/webhook-list.component.html
index b18b8f5..fe03d9f 100644
--- a/projects/fusio-sdk/src/lib/component/webhook/list/webhook-list.component.html
+++ b/projects/fusio-sdk/src/lib/component/webhook/list/webhook-list.component.html
@@ -1,33 +1,42 @@
-
-<fusio-message [response]="response"></fusio-message>
-
-<fusio-search
-  [searchTerm]="search"
-  (search)="doSearch(1, $event)"
-  (newClick)="openCreateDialog()"
-  placeholder="webhook">
-</fusio-search>
-
-<div class="row">
-  <div class="col-md-3">
-    <fusio-sidebar
-      name="webhook"
-      nameKey="name"
-      [entries]="entries"
-      [totalResults]="totalResults"
-      [selected]="selected"
-      [page]="page"
+<div class="card">
+  <div class="card-header">Webhook</div>
+  <div class="card-body">
+    <fusio-search
+      [searchTerm]="search"
+      (search)="doSearch(1, $event)"
+      (newClick)="router.navigate(getNewLink())"
+      placeholder="webhook">
+    </fusio-search>
+    <table class="table table-striped">
+      <thead>
+      <tr>
+        <th style="width:20%">Name</th>
+        <th style="width:20%">Event</th>
+        <th style="width:60%">Endpoint</th>
+        <th style="width:100px"></th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let entry of entries">
+        <td>{{entry.name}}</td>
+        <td>{{entry.event}}</td>
+        <td>{{entry.endpoint}}</td>
+        <td>
+          <div class="btn-group" role="group">
+            <a [routerLink]="getDetailLink(entry.id)" class="btn btn-primary"><i class="bi bi-search"></i></a>
+            <a [routerLink]="getEditLink(entry.id)" class="btn btn-secondary"><i class="bi bi-pen"></i></a>
+            <a [routerLink]="getDeleteLink(entry.id)" class="btn btn-secondary"><i class="bi bi-x"></i></a>
+          </div>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <ngb-pagination
+      [(page)]="page"
       [pageSize]="pageSize"
-      (pageChange)="doSearch($event, search)"
-      (entrySelect)="doSelect($event)">
-    </fusio-sidebar>
-  </div>
-  <div class="col-md-9">
-    <fusio-empty *ngIf="!selected" [loading]="loading" (newClick)="openCreateDialog()"></fusio-empty>
-    <fusio-webhook-detail *ngIf="selected"
-                              [selected]="selected"
-                              (updateClick)="openUpdateDialog(selected)"
-                              (deleteClick)="openDeleteDialog(selected)">
-    </fusio-webhook-detail>
+      [collectionSize]="totalResults"
+      [maxSize]="4"
+      [ellipses]="false"
+      (pageChange)="doSearch($event)"></ngb-pagination>
   </div>
 </div>
diff --git a/projects/fusio-sdk/src/lib/component/webhook/list/webhook-list.component.ts b/projects/fusio-sdk/src/lib/component/webhook/list/webhook-list.component.ts
index 6c57a54..7a772e6 100644
--- a/projects/fusio-sdk/src/lib/component/webhook/list/webhook-list.component.ts
+++ b/projects/fusio-sdk/src/lib/component/webhook/list/webhook-list.component.ts
@@ -1,29 +1,23 @@
 import {Component} from '@angular/core';
-import {Client, ConsumerWebhook, ConsumerWebhookCollection} from "fusio-sdk";
+import {ConsumerWebhook} from "fusio-sdk";
 import {List} from "../../../abstract/list";
-import {WebhookModalComponent} from "../modal/webhook-modal.component";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ErrorService} from "../../../service/error.service";
+import {WebhookService} from "../../../service/webhook.service";
 
 @Component({
   selector: 'fusio-webhook-list',
   templateUrl: './webhook-list.component.html',
   styleUrls: ['./webhook-list.component.css']
 })
-export class WebhookListComponent extends List<Client, ConsumerWebhook> {
+export class WebhookListComponent extends List<ConsumerWebhook> {
 
-  protected async getAll(parameters: Array<any>): Promise<ConsumerWebhookCollection> {
-    return this.fusio.getClient().consumer().webhook().getAll(...parameters);
+  constructor(private webhook: WebhookService, route: ActivatedRoute, router: Router, error: ErrorService) {
+    super(route, router, error);
   }
 
-  protected async get(id: string): Promise<ConsumerWebhook> {
-    return this.fusio.getClient().consumer().webhook().get('' + id);
-  }
-
-  protected getDetailComponent(): any {
-    return WebhookModalComponent;
-  }
-
-  protected getRoute(): any {
-    return '/account/webhook';
+  protected getService(): WebhookService {
+    return this.webhook;
   }
 
 }
diff --git a/projects/fusio-sdk/src/lib/component/webhook/modal/webhook-modal.component.html b/projects/fusio-sdk/src/lib/component/webhook/modal/webhook-modal.component.html
deleted file mode 100644
index f56dbfb..0000000
--- a/projects/fusio-sdk/src/lib/component/webhook/modal/webhook-modal.component.html
+++ /dev/null
@@ -1,52 +0,0 @@
-
-<div class="modal-header">
-  <h4 class="modal-title">
-    <ng-container *ngIf="mode === 1">Create</ng-container>
-    <ng-container *ngIf="mode === 2">Update</ng-container>
-    <ng-container *ngIf="mode === 3">Delete</ng-container>
-  </h4>
-  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
-</div>
-<div class="modal-body">
-  <fusio-message [response]="response"></fusio-message>
-  <form>
-    <div class="mb-3 row">
-      <label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <input type="text" id="name" name="name" [(ngModel)]="entity.name" class="form-control">
-          <button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
-          <ng-template #nameHelp>The name of the webhook</ng-template>
-        </div>
-      </div>
-    </div>
-    <div class="mb-3 row">
-      <label for="event" class="col-sm-2 col-form-label fw-bold">Event</label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <select id="event" name="event" [(ngModel)]="entity.event" class="form-select">
-            <option *ngFor="let event of events" [ngValue]="event.name">{{event.name}}</option>
-          </select>
-          <button class="btn btn-outline-secondary" type="button" [ngbPopover]="eventHelp"><i class="bi bi-question"></i></button>
-          <ng-template #eventHelp>Target event to trigger this webhook</ng-template>
-        </div>
-      </div>
-    </div>
-    <div class="mb-3 row">
-      <label for="endpoint" class="col-sm-2 col-form-label fw-bold">Endpoint</label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <input type="url" id="endpoint" name="endpoint" [(ngModel)]="entity.endpoint" class="form-control">
-          <button class="btn btn-outline-secondary" type="button" [ngbPopover]="endpointHelp"><i class="bi bi-question"></i></button>
-          <ng-template #endpointHelp>The endpoint which receives the webhook</ng-template>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-<div class="modal-footer">
-  <ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="submit()">Create</button></ng-container>
-  <ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="submit()">Update</button></ng-container>
-  <ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="submit()">Delete</button></ng-container>
-  <button type="button" class="btn btn-light" (click)="modal.close()">Close</button>
-</div>
diff --git a/projects/fusio-sdk/src/lib/component/webhook/modal/webhook-modal.component.ts b/projects/fusio-sdk/src/lib/component/webhook/modal/webhook-modal.component.ts
deleted file mode 100644
index 8a4726d..0000000
--- a/projects/fusio-sdk/src/lib/component/webhook/modal/webhook-modal.component.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {Component} from '@angular/core';
-import {Client, CommonMessage, ConsumerEvent, ConsumerWebhook, ConsumerWebhookCreate, ConsumerWebhookUpdate} from "fusio-sdk";
-import {Modal} from "../../../abstract/modal";
-import {FusioService} from "../../../service/fusio.service";
-import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {ErrorService} from "../../../service/error.service";
-
-@Component({
-  selector: 'fusio-webhook-modal',
-  templateUrl: './webhook-modal.component.html',
-  styleUrls: ['./webhook-modal.component.css']
-})
-export class WebhookModalComponent extends Modal<Client, ConsumerWebhook> {
-
-  events?: Array<ConsumerEvent>;
-
-  constructor(fusio: FusioService, error: ErrorService, modalService: NgbModal, modal: NgbActiveModal) {
-    super(fusio, error, modalService, modal);
-  }
-
-  override async ngOnInit(): Promise<void> {
-    const response = await this.fusio.getClient().consumer().event().getAll(0, 1024);
-    this.events = response.entry;
-  }
-
-  protected async create(entity: ConsumerWebhook): Promise<CommonMessage> {
-    return this.fusio.getClient().consumer().webhook().create(<ConsumerWebhookCreate> entity);
-  }
-
-  protected async update(entity: ConsumerWebhook): Promise<CommonMessage> {
-    return this.fusio.getClient().consumer().webhook().update('' + entity.id, <ConsumerWebhookUpdate> entity);
-  }
-
-  protected async delete(entity: ConsumerWebhook): Promise<CommonMessage> {
-    return this.fusio.getClient().consumer().webhook().delete('' + entity.id);
-  }
-
-  protected newEntity(): ConsumerWebhook {
-    return {
-      event: '',
-      endpoint: '',
-    };
-  }
-
-}
diff --git a/projects/fusio-sdk/src/lib/fusio-sdk.module.ts b/projects/fusio-sdk/src/lib/fusio-sdk.module.ts
index ab0b674..92507e2 100644
--- a/projects/fusio-sdk/src/lib/fusio-sdk.module.ts
+++ b/projects/fusio-sdk/src/lib/fusio-sdk.module.ts
@@ -11,7 +11,6 @@ import {Config, FUSIO_CONFIG} from "./config/config";
 import {EmptyComponent} from "./component/empty/empty.component";
 import {MessageComponent} from "./component/message/message.component";
 import {SearchComponent} from "./component/search/search.component";
-import {SidebarComponent} from "./component/sidebar/sidebar.component";
 import {HelpComponent} from "./component/help/help.component";
 import {BrowserModule} from "@angular/platform-browser";
 import {ScopesComponent} from "./component/scopes/scopes.component";
@@ -28,7 +27,7 @@ import {SecurityComponent} from './component/security/security.component';
 import {SpecificationComponent} from "./component/specification/specification.component";
 import {AppDetailComponent} from './component/app/detail/app-detail.component';
 import {AppListComponent} from './component/app/list/app-list.component';
-import {AppModalComponent} from './component/app/modal/app-modal.component';
+import {AppFormComponent} from './component/app/form/app-form.component';
 import {AccountContainerComponent} from "./component/account-container/account-container.component";
 import {SubscriptionComponent} from './component/subscription/subscription.component';
 import {CallbackComponent} from './component/subscription/callback/callback.component';
@@ -36,13 +35,18 @@ import {NavigationComponent} from "./component/navigation/navigation.component";
 import {BootstrapComponent} from "./component/bootstrap/bootstrap.component";
 import {TokenDetailComponent} from "./component/token/detail/token-detail.component";
 import {TokenListComponent} from "./component/token/list/token-list.component";
-import {TokenModalComponent} from "./component/token/modal/token-modal.component";
+import {TokenFormComponent} from "./component/token/form/token-form.component";
 import {TokenShowComponent} from "./component/token/show/token-show.component";
 import {WebhookDetailComponent} from "./component/webhook/detail/webhook-detail.component";
 import {WebhookListComponent} from "./component/webhook/list/webhook-list.component";
-import {WebhookModalComponent} from "./component/webhook/modal/webhook-modal.component";
+import {WebhookFormComponent} from "./component/webhook/form/webhook-form.component";
 import {LogListComponent} from "./component/log/list/log-list.component";
 import {LogDetailComponent} from "./component/log/detail/log-detail.component";
+import {FormListComponent} from "./component/form/list/form-list.component";
+import {FormMapComponent} from "./component/form/map/form-map.component";
+import {FormCheckboxListComponent} from "./component/form/checkbox-list/form-checkbox-list.component";
+import {FormAutocompleteComponent} from "./component/form/autocomplete/form-autocomplete.component";
+import {FormSelectComponent} from "./component/form/select/form-select.component";
 
 @NgModule({
   declarations: [
@@ -53,7 +57,6 @@ import {LogDetailComponent} from "./component/log/detail/log-detail.component";
     NavigationComponent,
     ScopesComponent,
     SearchComponent,
-    SidebarComponent,
 
     // authorization
     LoginComponent,
@@ -64,13 +67,20 @@ import {LogDetailComponent} from "./component/log/detail/log-detail.component";
     ConfirmComponent,
     ResetComponent,
 
+    // form
+    FormAutocompleteComponent,
+    FormCheckboxListComponent,
+    FormListComponent,
+    FormMapComponent,
+    FormSelectComponent,
+
     // account
     AboutComponent,
     AccountComponent,
     AccountContainerComponent,
     AppDetailComponent,
     AppListComponent,
-    AppModalComponent,
+    AppFormComponent,
     LogListComponent,
     LogDetailComponent,
     SecurityComponent,
@@ -79,11 +89,11 @@ import {LogDetailComponent} from "./component/log/detail/log-detail.component";
     CallbackComponent,
     TokenDetailComponent,
     TokenListComponent,
-    TokenModalComponent,
+    TokenFormComponent,
     TokenShowComponent,
     WebhookDetailComponent,
     WebhookListComponent,
-    WebhookModalComponent,
+    WebhookFormComponent,
   ],
   imports: [
     BrowserModule,
@@ -113,7 +123,6 @@ import {LogDetailComponent} from "./component/log/detail/log-detail.component";
     ScopesComponent,
     SearchComponent,
     SecurityComponent,
-    SidebarComponent,
     SubscriptionComponent,
     CallbackComponent,
   ]
diff --git a/projects/fusio-sdk/src/lib/route/account-route.ts b/projects/fusio-sdk/src/lib/route/account-route.ts
index f5104a9..f8c4288 100644
--- a/projects/fusio-sdk/src/lib/route/account-route.ts
+++ b/projects/fusio-sdk/src/lib/route/account-route.ts
@@ -10,25 +10,29 @@ import {SpecificationComponent} from "../component/specification/specification.c
 import {AboutComponent} from "../component/about/about.component";
 import {isAuthenticated} from "../guard/authentication.guard";
 import {LogListComponent} from "../component/log/list/log-list.component";
+import {WebhookFormComponent} from "../component/webhook/form/webhook-form.component";
+import {TokenFormComponent} from "../component/token/form/token-form.component";
+import {TokenDetailComponent} from "../component/token/detail/token-detail.component";
+import {WebhookDetailComponent} from "../component/webhook/detail/webhook-detail.component";
+import {LogDetailComponent} from "../component/log/detail/log-detail.component";
+import {AppDetailComponent} from "../component/app/detail/app-detail.component";
+import {AppFormComponent} from "../component/app/form/app-form.component";
+import {EntityRoute} from "./entity-route";
 
 export class AccountRoute {
 
   public static getAll(): Routes {
     return [
-      {path: '', component: AccountComponent, canActivate: [isAuthenticated] },
-      {path: 'security', component: SecurityComponent, canActivate: [isAuthenticated] },
-      {path: 'app', component: AppListComponent, canActivate: [isAuthenticated] },
-      {path: 'app/:id', component: AppListComponent, canActivate: [isAuthenticated] },
-      {path: 'subscription', component: SubscriptionComponent, canActivate: [isAuthenticated] },
-      {path: 'subscription/callback/:plan_id', component: CallbackComponent, canActivate: [isAuthenticated] },
-      {path: 'webhook', component: WebhookListComponent, canActivate: [isAuthenticated] },
-      {path: 'webhook/:id', component: WebhookListComponent, canActivate: [isAuthenticated] },
-      {path: 'token', component: TokenListComponent, canActivate: [isAuthenticated] },
-      {path: 'token/:id', component: TokenListComponent, canActivate: [isAuthenticated] },
-      {path: 'log', component: LogListComponent, canActivate: [isAuthenticated] },
-      {path: 'log/:id', component: LogListComponent, canActivate: [isAuthenticated] },
-      {path: 'specification', component: SpecificationComponent, canActivate: [isAuthenticated] },
-      {path: 'about', component: AboutComponent, canActivate: [isAuthenticated] },
+      {path: '', component: AccountComponent, canActivate: [isAuthenticated]},
+      {path: 'security', component: SecurityComponent, canActivate: [isAuthenticated]},
+      {path: 'app', canActivate: [isAuthenticated], children: EntityRoute.getAll(AppListComponent, AppDetailComponent, AppFormComponent)},
+      {path: 'subscription', component: SubscriptionComponent, canActivate: [isAuthenticated]},
+      {path: 'subscription/callback/:plan_id', component: CallbackComponent, canActivate: [isAuthenticated]},
+      {path: 'webhook', canActivate: [isAuthenticated], children: EntityRoute.getAll(WebhookListComponent, WebhookDetailComponent, WebhookFormComponent)},
+      {path: 'token', canActivate: [isAuthenticated], children: EntityRoute.getAll(TokenListComponent, TokenDetailComponent, TokenFormComponent)},
+      {path: 'log', canActivate: [isAuthenticated], children: EntityRoute.getAll(LogListComponent, LogDetailComponent)},
+      {path: 'specification', component: SpecificationComponent, canActivate: [isAuthenticated]},
+      {path: 'about', component: AboutComponent, canActivate: [isAuthenticated]},
     ];
   }
 
diff --git a/projects/fusio-sdk/src/lib/route/entity-route.ts b/projects/fusio-sdk/src/lib/route/entity-route.ts
new file mode 100644
index 0000000..7f2ea2b
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/route/entity-route.ts
@@ -0,0 +1,23 @@
+import {Routes} from "@angular/router";
+import {isAuthenticated} from "../guard/authentication.guard";
+import {Mode} from "../abstract/form";
+import {Type} from "@angular/core";
+
+export class EntityRoute {
+
+  public static getAll(list: Type<any>, detail: Type<any>, form?: Type<any>): Routes {
+    const routes: Routes = [
+      {path: '', component: list, canActivate: [isAuthenticated]},
+      {path: ':id', component: detail, canActivate: [isAuthenticated]},
+    ];
+
+    if (form) {
+      routes.push({path: '-/new', component: form, data: {mode: Mode.Create}, canActivate: [isAuthenticated]});
+      routes.push({path: ':id/edit', component: form, data: {mode: Mode.Update}, canActivate: [isAuthenticated]});
+      routes.push({path: ':id/delete', component: form, data: {mode: Mode.Delete}, canActivate: [isAuthenticated]});
+    }
+
+    return routes;
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/service/app.service.ts b/projects/fusio-sdk/src/lib/service/app.service.ts
new file mode 100644
index 0000000..7905a38
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/service/app.service.ts
@@ -0,0 +1,47 @@
+import {CommonCollection, CommonMessage, ConsumerApp, ConsumerAppCreate, ConsumerAppUpdate} from "fusio-sdk";
+import {Injectable} from "@angular/core";
+import {Service} from "../abstract/service";
+import {FusioService} from "./fusio.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppService extends Service<ConsumerApp> {
+
+  constructor(private fusio: FusioService) {
+    super();
+  }
+
+  async getAll(parameters: Array<any>): Promise<CommonCollection<ConsumerApp>> {
+    return this.fusio.getClient().consumer().app().getAll(...parameters);
+  }
+
+  async get(id: string): Promise<ConsumerApp> {
+    return this.fusio.getClient().consumer().app().get(id);
+  }
+
+  async create(entity: ConsumerApp): Promise<CommonMessage> {
+    return this.fusio.getClient().consumer().app().create(<ConsumerAppCreate> entity);
+  }
+
+  async update(entity: ConsumerApp): Promise<CommonMessage> {
+    return this.fusio.getClient().consumer().app().update('' + entity.id, <ConsumerAppUpdate> entity);
+  }
+
+  async delete(entity: ConsumerApp): Promise<CommonMessage> {
+    return this.fusio.getClient().consumer().app().delete('' + entity.id);
+  }
+
+  newEntity(): ConsumerApp {
+    return {
+      name: '',
+      url: '',
+      scopes: []
+    };
+  }
+
+  getLink(): Array<string> {
+    return ['/', 'account', 'app'];
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/service/error.service.ts b/projects/fusio-sdk/src/lib/service/error.service.ts
index 38fd038..623e701 100644
--- a/projects/fusio-sdk/src/lib/service/error.service.ts
+++ b/projects/fusio-sdk/src/lib/service/error.service.ts
@@ -1,14 +1,13 @@
 import {Injectable} from '@angular/core';
 import {CommonMessage} from "fusio-sdk";
 import {KnownStatusCodeException} from "sdkgen-client";
-import {EventService} from "./event.service";
 
 @Injectable({
   providedIn: 'root'
 })
 export class ErrorService {
 
-  constructor(private event: EventService) { }
+  constructor() { }
 
   public convert(error: any): CommonMessage {
     let message: CommonMessage;
@@ -21,8 +20,6 @@ export class ErrorService {
       };
     }
 
-    this.event.dispatchError(message);
-
     return message;
   }
 
diff --git a/projects/fusio-sdk/src/lib/service/event.service.ts b/projects/fusio-sdk/src/lib/service/event.service.ts
index aa8253b..5d04b49 100644
--- a/projects/fusio-sdk/src/lib/service/event.service.ts
+++ b/projects/fusio-sdk/src/lib/service/event.service.ts
@@ -1,101 +1,45 @@
 import {Injectable} from '@angular/core';
-import {CommonMessage, ConsumerPlan, ConsumerUserAccount} from "fusio-sdk";
-import {ConfigService} from "./config.service";
-import {EventListener} from "../config/config";
+import {CommonCollection, CommonMessage, ConsumerEvent} from "fusio-sdk";
+import {FusioService} from "./fusio.service";
+import {Service} from "../abstract/service";
 
 @Injectable({
   providedIn: 'root'
 })
-export class EventService {
+export class EventService extends Service<ConsumerEvent> {
 
-  private eventListener: EventListener;
-
-  constructor(config: ConfigService) {
-    this.eventListener = config.getEventListener();
-  }
-
-  public dispatchLogin(user: ConsumerUserAccount): void {
-    if (this.eventListener.login) {
-      this.eventListener.login.call(this, user);
-    }
-  }
-
-  public dispatchLogout(): void {
-    if (this.eventListener.logout) {
-      this.eventListener.logout.call(this);
-    }
-  }
-
-  public dispatchRegister(name: string, email: string): void {
-    if (this.eventListener.register) {
-      this.eventListener.register.call(this, name, email);
-    }
-  }
-
-  public dispatchRegisterActivate(): void {
-    if (this.eventListener.register_activate) {
-      this.eventListener.register_activate.call(this);
-    }
-  }
-
-  public dispatchPasswordConfirm(): void {
-    if (this.eventListener.password_confirm) {
-      this.eventListener.password_confirm.call(this);
-    }
-  }
-
-  public dispatchPasswordReset(): void {
-    if (this.eventListener.password_reset) {
-      this.eventListener.password_reset.call(this);
-    }
-  }
-
-  public dispatchCheckout(plan: ConsumerPlan): void {
-    if (this.eventListener.checkout) {
-      this.eventListener.checkout.call(this, plan);
-    }
+  constructor(private fusio: FusioService) {
+    super();
   }
 
-  public dispatchPurchase(plan: ConsumerPlan): void {
-    if (this.eventListener.purchase) {
-      this.eventListener.purchase.call(this, plan);
-    }
+  async getAll(parameters: Array<any>): Promise<CommonCollection<ConsumerEvent>> {
+    return this.fusio.getClient().consumer().event().getAll(...parameters);
   }
 
-  public dispatchError(error: CommonMessage): void {
-    if (this.eventListener.error) {
-      this.eventListener.error.call(this, error);
-    }
+  async get(id: string): Promise<ConsumerEvent> {
+    return {};
   }
 
-  public dispatchModelList(route: string): void {
-    if (this.eventListener.model_list) {
-      this.eventListener.model_list.call(this, route);
-    }
+  async create(entity: ConsumerEvent): Promise<CommonMessage> {
+    return {};
   }
 
-  public dispatchModelDetail(model: any, route: string): void {
-    if (this.eventListener.model_detail) {
-      this.eventListener.model_detail.call(this, model, route);
-    }
+  async update(entity: ConsumerEvent): Promise<CommonMessage> {
+    return {};
   }
 
-  public dispatchModelCreated(model: any, route: string): void {
-    if (this.eventListener.model_created) {
-      this.eventListener.model_created.call(this, model, route);
-    }
+  async delete(entity: ConsumerEvent): Promise<CommonMessage> {
+    return {};
   }
 
-  public dispatchModelUpdated(model: any, route: string): void {
-    if (this.eventListener.model_updated) {
-      this.eventListener.model_updated.call(this, model, route);
-    }
+  newEntity(): ConsumerEvent {
+    return {
+      name: '',
+    };
   }
 
-  public dispatchModelDeleted(model: any, route: string): void {
-    if (this.eventListener.model_deleted) {
-      this.eventListener.model_deleted.call(this, model, route);
-    }
+  getLink(): Array<string> {
+    return ['/', 'account', 'event'];
   }
 
 }
diff --git a/projects/fusio-sdk/src/lib/service/log.service.ts b/projects/fusio-sdk/src/lib/service/log.service.ts
new file mode 100644
index 0000000..dc28229
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/service/log.service.ts
@@ -0,0 +1,48 @@
+import {CommonCollection, CommonMessage, ConsumerLog} from "fusio-sdk";
+import {Injectable} from "@angular/core";
+import {Service} from "../abstract/service";
+import {FusioService} from "./fusio.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LogService extends Service<ConsumerLog> {
+
+  constructor(private fusio: FusioService) {
+    super();
+  }
+
+  async getAll(parameters: Array<any>): Promise<CommonCollection<ConsumerLog>> {
+    return this.fusio.getClient().consumer().log().getAll(...parameters);
+  }
+
+  async get(id: string): Promise<ConsumerLog> {
+    return this.fusio.getClient().consumer().log().get(id);
+  }
+
+  async create(entity: ConsumerLog): Promise<CommonMessage> {
+    return {};
+  }
+
+  async update(entity: ConsumerLog): Promise<CommonMessage> {
+    return {};
+  }
+
+  async delete(entity: ConsumerLog): Promise<CommonMessage> {
+    return {};
+  }
+
+  newEntity(): ConsumerLog {
+    return {};
+  }
+
+  getLink(): Array<string> {
+    return ['/', 'account', 'log'];
+  }
+
+  protected override getNameKey(): string
+  {
+    return 'path';
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/service/scope.service.ts b/projects/fusio-sdk/src/lib/service/scope.service.ts
new file mode 100644
index 0000000..e9f37a7
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/service/scope.service.ts
@@ -0,0 +1,43 @@
+import {CommonCollection, CommonMessage, ConsumerLog, ConsumerScope} from "fusio-sdk";
+import {Injectable} from "@angular/core";
+import {Service} from "../abstract/service";
+import {FusioService} from "./fusio.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ScopeService extends Service<ConsumerLog> {
+
+  constructor(private fusio: FusioService) {
+    super();
+  }
+
+  async getAll(parameters: Array<any>): Promise<CommonCollection<ConsumerScope>> {
+    return this.fusio.getClient().consumer().scope().getAll(...parameters);
+  }
+
+  async get(id: string): Promise<ConsumerScope> {
+    return {};
+  }
+
+  async create(entity: ConsumerScope): Promise<CommonMessage> {
+    return {};
+  }
+
+  async update(entity: ConsumerScope): Promise<CommonMessage> {
+    return {};
+  }
+
+  async delete(entity: ConsumerScope): Promise<CommonMessage> {
+    return {};
+  }
+
+  newEntity(): ConsumerScope {
+    return {};
+  }
+
+  getLink(): Array<string> {
+    return ['/', 'account', 'scope'];
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/service/token.service.ts b/projects/fusio-sdk/src/lib/service/token.service.ts
new file mode 100644
index 0000000..986666c
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/service/token.service.ts
@@ -0,0 +1,61 @@
+import {CommonCollection, CommonMessage, ConsumerToken, ConsumerWebhookCreate, ConsumerWebhookUpdate} from "fusio-sdk";
+import {Injectable} from "@angular/core";
+import {ConsumerTokenAccessToken} from "fusio-sdk/dist";
+import {Service} from "../abstract/service";
+import {FusioService} from "./fusio.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TokenService extends Service<ConsumerToken> {
+
+  token?: ConsumerTokenAccessToken
+
+  constructor(private fusio: FusioService) {
+    super();
+  }
+
+  async getAll(parameters: Array<any>): Promise<CommonCollection<ConsumerToken>> {
+    return this.fusio.getClient().consumer().token().getAll(...parameters);
+  }
+
+  async get(id: string): Promise<ConsumerToken> {
+    return this.fusio.getClient().consumer().token().get(id);
+  }
+
+  async create(entity: ConsumerToken): Promise<CommonMessage> {
+    this.token = await this.fusio.getClient().consumer().token().create(<ConsumerWebhookCreate> entity);
+    return {
+      success: true,
+      message: 'Created token successfully'
+    };
+  }
+
+  async update(entity: ConsumerToken): Promise<CommonMessage> {
+    this.token = await this.fusio.getClient().consumer().token().update('' + entity.id, <ConsumerWebhookUpdate> entity);
+    return {
+      success: true,
+      message: 'Updated token successfully'
+    };
+  }
+
+  async delete(entity: ConsumerToken): Promise<CommonMessage> {
+    return this.fusio.getClient().consumer().token().delete('' + entity.id);
+  }
+
+  newEntity(): ConsumerToken {
+    return {
+      name: '',
+      scopes: [],
+    };
+  }
+
+  getLink(): Array<string> {
+    return ['/', 'account', 'token'];
+  }
+
+  getToken(): ConsumerTokenAccessToken|undefined {
+    return this.token;
+  }
+
+}
diff --git a/projects/fusio-sdk/src/lib/service/user.service.ts b/projects/fusio-sdk/src/lib/service/user.service.ts
index 0c42791..86b56dd 100644
--- a/projects/fusio-sdk/src/lib/service/user.service.ts
+++ b/projects/fusio-sdk/src/lib/service/user.service.ts
@@ -11,13 +11,11 @@ export class UserService {
 
   private user?: ConsumerUserAccount;
 
-  constructor(private fusio: FusioService, private config: ConfigService, private event: EventService) { }
+  constructor(private fusio: FusioService, private config: ConfigService) { }
 
   public login(user: ConsumerUserAccount): void {
     this.user = user;
     sessionStorage.setItem(this.getKey(), JSON.stringify(user));
-
-    this.event.dispatchLogin(user);
   }
 
   public get(): ConsumerUserAccount|undefined {
@@ -41,8 +39,6 @@ export class UserService {
     this.user = undefined;
     sessionStorage.removeItem(this.getKey());
     this.fusio.logout();
-
-    this.event.dispatchLogout();
   }
 
   private getKey(): string {
diff --git a/projects/fusio-sdk/src/lib/service/webhook.service.ts b/projects/fusio-sdk/src/lib/service/webhook.service.ts
new file mode 100644
index 0000000..ef23a58
--- /dev/null
+++ b/projects/fusio-sdk/src/lib/service/webhook.service.ts
@@ -0,0 +1,46 @@
+import {CommonCollection, CommonMessage, ConsumerWebhook, ConsumerWebhookCreate, ConsumerWebhookUpdate} from "fusio-sdk";
+import {Injectable} from "@angular/core";
+import {Service} from "../abstract/service";
+import {FusioService} from "./fusio.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WebhookService extends Service<ConsumerWebhook> {
+
+  constructor(private fusio: FusioService) {
+    super();
+  }
+
+  async getAll(parameters: Array<any>): Promise<CommonCollection<ConsumerWebhook>> {
+    return this.fusio.getClient().consumer().webhook().getAll(...parameters);
+  }
+
+  async get(id: string): Promise<ConsumerWebhook> {
+    return this.fusio.getClient().consumer().webhook().get(id);
+  }
+
+  async create(entity: ConsumerWebhook): Promise<CommonMessage> {
+    return this.fusio.getClient().consumer().webhook().create(<ConsumerWebhookCreate> entity);
+  }
+
+  async update(entity: ConsumerWebhook): Promise<CommonMessage> {
+    return this.fusio.getClient().consumer().webhook().update('' + entity.id, <ConsumerWebhookUpdate> entity);
+  }
+
+  async delete(entity: ConsumerWebhook): Promise<CommonMessage> {
+    return this.fusio.getClient().consumer().webhook().delete('' + entity.id);
+  }
+
+  newEntity(): ConsumerWebhook {
+    return {
+      event: '',
+      endpoint: '',
+    };
+  }
+
+  getLink(): Array<string> {
+    return ['/', 'account', 'webhook'];
+  }
+
+}
diff --git a/projects/fusio-sdk/src/public-api.ts b/projects/fusio-sdk/src/public-api.ts
index 2464b17..ba6505c 100644
--- a/projects/fusio-sdk/src/public-api.ts
+++ b/projects/fusio-sdk/src/public-api.ts
@@ -3,16 +3,16 @@
  */
 
 export * from './lib/abstract/detail';
+export * from './lib/abstract/form';
 export * from './lib/abstract/list';
-export * from './lib/abstract/manipulation';
-export * from './lib/abstract/modal';
-export * from './lib/abstract/object-selector';
-export * from './lib/abstract/query';
+export * from './lib/abstract/service';
 
 export * from './lib/component/account/account.component';
 export * from './lib/component/account-container/account-container.component';
 export * from './lib/component/bootstrap/bootstrap.component';
 export * from './lib/component/empty/empty.component';
+export * from './lib/component/form/list/form-list.component';
+export * from './lib/component/form/map/form-map.component';
 export * from './lib/component/help/help.component';
 export * from './lib/component/login/login.component';
 export * from './lib/component/login/provider/provider.component';
@@ -26,20 +26,24 @@ export * from './lib/component/register/activate/activate.component';
 export * from './lib/component/scopes/scopes.component';
 export * from './lib/component/search/search.component';
 export * from './lib/component/security/security.component';
-export * from './lib/component/sidebar/sidebar.component';
 export * from './lib/component/subscription/subscription.component';
 export * from './lib/component/subscription/callback/callback.component';
 
 export * from './lib/guard/authentication.guard';
 
-export * from './lib/service/fusio.service';
+export * from './lib/service/api.service';
+export * from './lib/service/app.service';
 export * from './lib/service/config.service';
 export * from './lib/service/error.service';
 export * from './lib/service/event.service';
-export * from './lib/service/api.service';
+export * from './lib/service/fusio.service';
 export * from './lib/service/help.service';
+export * from './lib/service/log.service';
 export * from './lib/service/navigation.service';
+export * from './lib/service/scope.service';
+export * from './lib/service/token.service';
 export * from './lib/service/user.service';
+export * from './lib/service/webhook.service';
 
 export * from './lib/route/account-route';
 export * from './lib/route/authorization-route';