diff --git a/web/package.json b/web/package.json
index c01deb92..a37690f6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "web",
-    "version": "1.2.0",
+    "version": "1.2.dev407",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node update-version.ts",
diff --git a/web/src/app/base/component-with-table.ts b/web/src/app/base/component-with-table.ts
index 9386a28f..d38e09c9 100644
--- a/web/src/app/base/component-with-table.ts
+++ b/web/src/app/base/component-with-table.ts
@@ -1,44 +1,58 @@
+import { Level } from "../models/data/level.model";
+
 export interface Column {
-  key: string;
-  name: string;
+    key: string;
+    name: string;
 }
 
 export class ComponentWithTable {
-
-  private _hiddenColumns: Column[] = [];
-  set hiddenColumns(value: Column[]) {
-    this._hiddenColumns = value;
-    localStorage.setItem("hiddenColumns", JSON.stringify(value));
-  }
-
-  get hiddenColumns(): Column[] {
-    return this._hiddenColumns;
-  }
-
-  public name: string = "";
-  public columns: Column[] = [];
-
-  constructor(
-    name: string,
-    columns: string[]
-  ) {
-    this.name = name;
-    this.columns = columns.map(column => {
-      return { key: this.getKey(column), name: column };
-    });
-    let hiddenColumns = localStorage.getItem("hiddenColumns");
-    if (!hiddenColumns) {
-      localStorage.setItem("hiddenColumns", JSON.stringify([{}]));
-      hiddenColumns = localStorage.getItem("hiddenColumns") ?? JSON.stringify([{}]);
+    private _hiddenColumns: Column[] = [];
+    set hiddenColumns(value: Column[]) {
+        this._hiddenColumns = value;
+        localStorage.setItem("hiddenColumns", JSON.stringify(value));
     }
-    this._hiddenColumns = JSON.parse(hiddenColumns);
-  }
 
-  private getKey(column: string): string {
-    return `${this.name}_${column}`;
-  }
+    get hiddenColumns(): Column[] {
+        return this._hiddenColumns;
+    }
 
-  public isColumnVisible(column: string): boolean {
-    return !this._hiddenColumns.map(column => column.key).includes(this.getKey(column));
-  }
+    public name: string = "";
+    public columns: Column[] = [];
+
+    constructor(
+        name: string,
+        columns: string[]
+    ) {
+        this.name = name;
+        this.columns = columns.map(column => {
+            return { key: this.getKey(column), name: column };
+        });
+        let hiddenColumns = localStorage.getItem("hiddenColumns");
+        if (!hiddenColumns) {
+            localStorage.setItem("hiddenColumns", JSON.stringify([{}]));
+            hiddenColumns = localStorage.getItem("hiddenColumns") ?? JSON.stringify([{}]);
+        }
+        this._hiddenColumns = JSON.parse(hiddenColumns);
+    }
+
+    private getKey(column: string): string {
+        return `${this.name}_${column}`;
+    }
+
+    public isColumnVisible(column: string): boolean {
+        return !this._hiddenColumns.map(column => column.key).includes(this.getKey(column));
+    }
+
+    public callback = (data: any[]) => {
+        this.save(data);
+    };
+
+    public onRowEditSave(newLevel: any, index: number) {
+    }
+
+    public save(data: any[]) {
+        for (let i = 0; i < data.length; i++) {
+            this.onRowEditSave(data[i], i);
+        }
+    }
 }
diff --git a/web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html b/web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
index a61ff338..a8d34658 100644
--- a/web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
+++ b/web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
@@ -225,7 +225,7 @@
                       (click)="deleteUser(user)"></button>
 
               <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
-                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, user, ri)"></button>
+                      icon="pi pi-check-circle" (click)="onRowEditSave(user, ri)"></button>
               <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
                       icon="pi pi-times-circle" (click)="onRowEditCancel(user, ri)"></button>
             </div>
diff --git a/web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts b/web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts
index e0df3efb..cb69d8c2 100644
--- a/web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts
+++ b/web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts
@@ -193,7 +193,7 @@ export class AuthUserComponent extends ComponentWithTable implements OnInit, OnD
     this.clonedUsers[index] = { ...user };
   }
 
-  onRowEditSave(table: Table, newUser: AuthUserDTO, index: number) {
+  public override onRowEditSave(newUser: AuthUserDTO, index: number) {
     const oldUser = this.clonedUsers[index];
     delete this.clonedUsers[index];
 
@@ -219,7 +219,6 @@ export class AuthUserComponent extends ComponentWithTable implements OnInit, OnD
         newUser.email == ""
       )
     ) {
-      table.initRowEdit(newUser);
       return;
     }
 
@@ -239,7 +238,6 @@ export class AuthUserComponent extends ComponentWithTable implements OnInit, OnD
             this.toastService.error(this.translate.instant("admin.auth_users.message.user_already_exists"), this.translate.instant("admin.auth_users.message.user_already_exists_d", { email: newUser.email }));
           }
           error.error = null;
-          table.initRowEdit(newUser);
         }
         this.spinnerService.hideSpinner();
 
diff --git a/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.html b/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.html
new file mode 100644
index 00000000..4dc66234
--- /dev/null
+++ b/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.html
@@ -0,0 +1,10 @@
+<button pButton pTooltip="{{'common.export' | translate}}" tooltipPosition="left" icon="pi pi-download"
+        class="icon-btn btn" (click)="export()">
+</button>
+
+<p-fileUpload #upload pTooltip="{{'common.import' | translate}}" tooltipPosition="left" chooseIcon="pi pi-upload"
+              styleClass="icon-btn btn" mode="basic"
+              [auto]="true"
+              [customUpload]="true" accept="application/json"
+              (uploadHandler)="import($event)">
+</p-fileUpload>
diff --git a/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.scss b/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.scss
new file mode 100644
index 00000000..f22d5334
--- /dev/null
+++ b/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: row;
+}
+
diff --git a/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.spec.ts b/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.spec.ts
new file mode 100644
index 00000000..6c059443
--- /dev/null
+++ b/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataImportAndExportComponent } from './data-import-and-export.component';
+
+describe('DataImportAndExportComponent', () => {
+  let component: DataImportAndExportComponent;
+  let fixture: ComponentFixture<DataImportAndExportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DataImportAndExportComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DataImportAndExportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.ts b/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.ts
new file mode 100644
index 00000000..1a4ef75c
--- /dev/null
+++ b/web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.ts
@@ -0,0 +1,66 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
+import { ToastService } from "../../../../services/toast/toast.service";
+import { TranslateService } from "@ngx-translate/core";
+
+interface UploadEvent {
+    originalEvent: Event;
+    files: File[];
+}
+
+@Component({
+    selector: "app-data-import-and-export",
+    templateUrl: "./data-import-and-export.component.html",
+    styleUrls: ["./data-import-and-export.component.scss"]
+})
+export class DataImportAndExportComponent {
+
+    @ViewChild("upload") upload: any;
+
+    private _data: any[] = [];
+
+    @Input() name: string = "";
+
+    @Input()
+    set data(data: any[]) {
+        this._data = data;
+        this.dataChange.emit(data);
+    }
+
+    get data(): any[] {
+        return this._data;
+    }
+
+    @Output() dataChange: EventEmitter<any[]> = new EventEmitter<any[]>();
+    @Input() callback!: (data: any[]) => void;
+
+    public constructor(
+        private toastService: ToastService,
+        private translate: TranslateService
+    ) {
+
+    }
+
+    public export() {
+        const json = JSON.stringify(this.data);
+        const element = document.createElement("a");
+        element.setAttribute("href", "data:application/json;charset=UTF-8," + encodeURIComponent(json));
+        element.setAttribute("download", `${this.name}.json`);
+        element.style.display = "none";
+        document.body.appendChild(element);
+        element.click(); // simulate click
+        document.body.removeChild(element);
+    }
+
+    public import(event: { files: File[] }) {
+        const file = event.files[0];
+        const fileReader = new FileReader();
+        fileReader.onload = () => {
+            if (!fileReader.result) return;
+            this.data = JSON.parse(fileReader.result.toString());
+            this.upload.clear();
+            this.callback(this.data);
+            this.toastService.success(this.translate.instant("common.file.uploaded"), this.translate.instant("common.file.uploaded"));
+        };
+        fileReader.readAsText(file, "UTF-8");
+    }
+}
diff --git a/web/src/app/modules/shared/shared.module.ts b/web/src/app/modules/shared/shared.module.ts
index f05452c0..d4ce44bf 100644
--- a/web/src/app/modules/shared/shared.module.ts
+++ b/web/src/app/modules/shared/shared.module.ts
@@ -33,6 +33,8 @@ import { MultiSelectColumnsComponent } from './base/multi-select-columns/multi-s
 import { FeatureFlagListComponent } from './components/feature-flag-list/feature-flag-list.component';
 import { InputSwitchModule } from "primeng/inputswitch";
 import { CalendarModule } from "primeng/calendar";
+import { DataImportAndExportComponent } from './components/data-import-and-export/data-import-and-export.component';
+import { FileUploadModule } from "primeng/fileupload";
 
 
 const PrimeNGModules = [
@@ -61,6 +63,7 @@ const PrimeNGModules = [
   MultiSelectModule,
   InputSwitchModule,
   CalendarModule,
+  FileUploadModule,
 ]
 
 @NgModule({
@@ -74,6 +77,7 @@ const PrimeNGModules = [
     HideableHeaderComponent,
     MultiSelectColumnsComponent,
     FeatureFlagListComponent,
+    DataImportAndExportComponent,
   ],
   imports: [
     CommonModule,
@@ -91,6 +95,7 @@ const PrimeNGModules = [
     HideableHeaderComponent,
     MultiSelectColumnsComponent,
     FeatureFlagListComponent,
+    DataImportAndExportComponent
   ]
 })
 export class SharedModule {
diff --git a/web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html b/web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
index a84d3fbc..823db3e1 100644
--- a/web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
+++ b/web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
@@ -27,6 +27,8 @@
             <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
                     class="icon-btn btn" (click)="resetFilters()">
             </button>
+            <app-data-import-and-export name="achievements" [(data)]="achievements"
+                                        [callback]="callback"></app-data-import-and-export>
           </div>
         </div>
       </ng-template>
@@ -246,7 +248,7 @@
                       (click)="deleteAchievement(achievement)" [disabled]="!user || !user.isModerator && !user.isAdmin"></button>
 
               <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
-                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, achievement, ri)" [disabled]="!user || !user.isModerator && !user.isAdmin"></button>
+                      icon="pi pi-check-circle" (click)="onRowEditSave(achievement, ri)" [disabled]="!user || !user.isModerator && !user.isAdmin"></button>
               <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
                       icon="pi pi-times-circle" (click)="onRowEditCancel(ri)" [disabled]="!user || !user.isModerator && !user.isAdmin"></button>
             </div>
diff --git a/web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts b/web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts
index 96625572..18f03c2b 100644
--- a/web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts
+++ b/web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts
@@ -215,7 +215,7 @@ export class AchievementComponent extends ComponentWithTable implements OnInit,
     this.clonedAchievements[index] = { ...user };
   }
 
-  public onRowEditSave(table: Table, newAchievement: Achievement, index: number): void {
+  public override onRowEditSave(newAchievement: Achievement, index: number): void {
     if (this.isEditingNew && JSON.stringify(newAchievement) === JSON.stringify(this.newAchievementTemplate)) {
       this.isEditingNew = false;
       this.achievements.splice(index, 1);
diff --git a/web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html b/web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
index 432bdfae..638c8ad3 100644
--- a/web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
+++ b/web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
@@ -26,6 +26,8 @@
             <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
                     class="icon-btn btn" (click)="resetFilters()">
             </button>
+            <app-data-import-and-export name="achievements" [(data)]="rules"
+                                        [callback]="callback"></app-data-import-and-export>
           </div>
         </div>
       </ng-template>
@@ -174,7 +176,7 @@
                       (click)="deleteAutoRoleRule(autoRoleRule)"></button>
 
               <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
-                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, autoRoleRule, ri)"></button>
+                      icon="pi pi-check-circle" (click)="onRowEditSave(autoRoleRule, ri)"></button>
               <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
                       icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"></button>
             </div>
diff --git a/web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts b/web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts
index f19a8c2f..a8fda8d6 100644
--- a/web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts
+++ b/web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts
@@ -203,7 +203,7 @@ export class AutoRolesRulesComponent extends ComponentWithTable implements OnIni
     this.clonedUsers[index] = { ...autoRoleRule };
   }
 
-  public onRowEditSave(table: Table, newAutoRoleRule: AutoRoleRule, index: number): void {
+  public override onRowEditSave(newAutoRoleRule: AutoRoleRule, index: number): void {
     if (this.isEditingNew && JSON.stringify(newAutoRoleRule) === JSON.stringify(this.newAutoRoleTemplate)) {
       this.isEditingNew = false;
       this.rules.splice(index, 1);
diff --git a/web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html b/web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
index 12f1448c..7784981d 100644
--- a/web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
+++ b/web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
@@ -27,6 +27,8 @@
             <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
                     class="icon-btn btn" (click)="resetFilters()">
             </button>
+            <app-data-import-and-export name="achievements" [(data)]="auto_roles"
+                                        [callback]="callback"></app-data-import-and-export>
           </div>
         </div>
       </ng-template>
@@ -209,7 +211,7 @@
                       (click)="deleteAutoRole(autoRole)"></button>
 
               <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
-                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, autoRole, ri)"></button>
+                      icon="pi pi-check-circle" (click)="onRowEditSave(autoRole, ri)"></button>
               <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
                       icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"></button>
             </div>
diff --git a/web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts b/web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts
index 2c77fede..c5b26460 100644
--- a/web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts
+++ b/web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts
@@ -192,7 +192,7 @@ export class AutoRolesComponent extends ComponentWithTable implements OnInit, On
     this.clonedUsers[index] = { ...autoRole };
   }
 
-  public onRowEditSave(table: Table, newAutoRole: AutoRole, index: number): void {
+  public override onRowEditSave(newAutoRole: AutoRole, index: number): void {
     if (this.isEditingNew && JSON.stringify(newAutoRole) === JSON.stringify(this.newAutoRoleTemplate)) {
       this.isEditingNew = false;
       this.auto_roles.splice(index, 1);
diff --git a/web/src/app/modules/view/server/levels/components/levels/levels.component.html b/web/src/app/modules/view/server/levels/components/levels/levels.component.html
index 5d9f5912..329fcd3b 100644
--- a/web/src/app/modules/view/server/levels/components/levels/levels.component.html
+++ b/web/src/app/modules/view/server/levels/components/levels/levels.component.html
@@ -1,226 +1,238 @@
 <h1>
-  {{'view.server.levels.header' | translate}}
+    {{'view.server.levels.header' | translate}}
 </h1>
 <div class="content-wrapper">
-  <div class="content">
-    <p-table #dt [value]="levels" [responsive]="true"  responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
-             [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
-             [lazy]="true" (onLazyLoad)="nextPage($event)">
+    <div class="content">
+        <p-table #dt [value]="levels" [responsive]="true" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id"
+                 editMode="row" [rowHover]="true" [rows]="10"
+                 [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
+                 [lazy]="true" (onLazyLoad)="nextPage($event)">
 
-      <ng-template pTemplate="caption">
-        <div class="table-caption">
-          <div class="table-caption-table-info">
-            <div class="table-caption-text">
-              <ng-container *ngIf="!loading">{{levels.length}} {{'common.of' | translate}}
-                {{dt.totalRecords}}
-              </ng-container>
-              {{'view.server.levels.levels' | translate}}
-            </div>
+            <ng-template pTemplate="caption">
+                <div class="table-caption">
+                    <div class="table-caption-table-info">
+                        <div class="table-caption-text">
+                            <ng-container *ngIf="!loading">{{levels.length}} {{'common.of' | translate}}
+                                {{dt.totalRecords}}
+                            </ng-container>
+                            {{'view.server.levels.levels' | translate}}
+                        </div>
 
-            <app-multi-select-columns [table]="name" [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
-          </div>
+                        <app-multi-select-columns [table]="name" [columns]="columns"
+                                                  [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
+                    </div>
 
-          <div class="table-caption-btn-wrapper btn-wrapper">
-            <button pButton label="{{'common.add' | translate}}" class="icon-btn btn"
-                    icon="pi pi-plus" (click)="addLevel(dt)" [disabled]="isEditingNew || user?.isModerator && !user?.isAdmin">
-            </button>
-            <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
-                    class="icon-btn btn" (click)="resetFilters()">
-            </button>
-          </div>
-        </div>
-      </ng-template>
+                    <div class="table-caption-btn-wrapper btn-wrapper">
+                        <button pButton label="{{'common.add' | translate}}" class="icon-btn btn"
+                                icon="pi pi-plus" (click)="addLevel(dt)"
+                                [disabled]="isEditingNew || user?.isModerator && !user?.isAdmin">
+                        </button>
+                        <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
+                                class="icon-btn btn" (click)="resetFilters()">
+                        </button>
+                        <app-data-import-and-export name="levels" [(data)]="levels"
+                                                    [callback]="callback"></app-data-import-and-export>
+                    </div>
+                </div>
+            </ng-template>
 
-      <ng-template pTemplate="header">
-        <tr>
-          <th hideable-th="id" [parent]="this" [sortable]="true">
-            <div class="table-header-label">
-              <div class="table-header-text">{{'common.id' | translate}}</div>
-              <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
-            </div>
-          </th>
+            <ng-template pTemplate="header">
+                <tr>
+                    <th hideable-th="id" [parent]="this" [sortable]="true">
+                        <div class="table-header-label">
+                            <div class="table-header-text">{{'common.id' | translate}}</div>
+                            <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
+                        </div>
+                    </th>
 
-          <th hideable-th="name" [parent]="this" [sortable]="true">
-            <div class="table-header-label">
-              <div class="table-header-text">{{'common.name' | translate}}</div>
-              <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
-            </div>
-          </th>
+                    <th hideable-th="name" [parent]="this" [sortable]="true">
+                        <div class="table-header-label">
+                            <div class="table-header-text">{{'common.name' | translate}}</div>
+                            <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
+                        </div>
+                    </th>
 
-          <th hideable-th="color" [parent]="this" [sortable]="true">
-            <div class="table-header-label">
-              <div class="table-header-text">{{'common.color' | translate}}</div>
-              <p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
-            </div>
-          </th>
+                    <th hideable-th="color" [parent]="this" [sortable]="true">
+                        <div class="table-header-label">
+                            <div class="table-header-text">{{'common.color' | translate}}</div>
+                            <p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
+                        </div>
+                    </th>
 
-          <th hideable-th="min_xp" [parent]="this" [sortable]="true">
-            <div class="table-header-label">
-              <div class="table-header-text">{{'common.min_xp' | translate}}</div>
-              <p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
-            </div>
-          </th>
+                    <th hideable-th="min_xp" [parent]="this" [sortable]="true">
+                        <div class="table-header-label">
+                            <div class="table-header-text">{{'common.min_xp' | translate}}</div>
+                            <p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
+                        </div>
+                    </th>
 
-          <th hideable-th="permissions" [parent]="this" [sortable]="true">
-            <div class="table-header-label">
-              <div class="table-header-text">{{'common.permissions' | translate}}</div>
-              <p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
-            </div>
-          </th>
+                    <th hideable-th="permissions" [parent]="this" [sortable]="true">
+                        <div class="table-header-label">
+                            <div class="table-header-text">{{'common.permissions' | translate}}</div>
+                            <p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
+                        </div>
+                    </th>
 
-          <th>
-            <div class="table-header-label">
-              <div class="table-header-text">{{'common.created_at' | translate}}</div>
-            </div>
-          </th>
+                    <th>
+                        <div class="table-header-label">
+                            <div class="table-header-text">{{'common.created_at' | translate}}</div>
+                        </div>
+                    </th>
 
-          <th>
-            <div class="table-header-label">
-              <div class="table-header-text">{{'common.modified_at' | translate}}</div>
-            </div>
-          </th>
+                    <th>
+                        <div class="table-header-label">
+                            <div class="table-header-text">{{'common.modified_at' | translate}}</div>
+                        </div>
+                    </th>
 
-          <th>
-            <div class="table-header-label">
-              <div class="table-header-text">{{'common.actions' | translate}}</div>
-            </div>
-          </th>
-        </tr>
+                    <th>
+                        <div class="table-header-label">
+                            <div class="table-header-text">{{'common.actions' | translate}}</div>
+                        </div>
+                    </th>
+                </tr>
 
-        <tr>
-          <th hideable-th="id" [parent]="this" class="table-header-small">
-            <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="id"
-                     placeholder="{{'common.id' | translate}}">
-            </form>
-          </th>
-          <th hideable-th="name" [parent]="this">
-            <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="name"
-                     placeholder="{{'common.name' | translate}}">
-            </form>
-          </th>
-          <th hideable-th="color" [parent]="this"></th>
-          <th hideable-th="min_xp" [parent]="this"></th>
-          <th hideable-th="permissions" [parent]="this"></th>
-          <th class="table-header-small-dropdown"></th>
-          <th class="table-header-small-dropdown"></th>
-          <th class="table-header-actions"></th>
-        </tr>
-      </ng-template>
+                <tr>
+                    <th hideable-th="id" [parent]="this" class="table-header-small">
+                        <form [formGroup]="filterForm">
+                            <input type="text" pInputText formControlName="id"
+                                   placeholder="{{'common.id' | translate}}">
+                        </form>
+                    </th>
+                    <th hideable-th="name" [parent]="this">
+                        <form [formGroup]="filterForm">
+                            <input type="text" pInputText formControlName="name"
+                                   placeholder="{{'common.name' | translate}}">
+                        </form>
+                    </th>
+                    <th hideable-th="color" [parent]="this"></th>
+                    <th hideable-th="min_xp" [parent]="this"></th>
+                    <th hideable-th="permissions" [parent]="this"></th>
+                    <th class="table-header-small-dropdown"></th>
+                    <th class="table-header-small-dropdown"></th>
+                    <th class="table-header-actions"></th>
+                </tr>
+            </ng-template>
 
-      <ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
-        <tr [pEditableRow]="level">
-          <td hideable-th="id" [parent]="this">
-            <span class="p-column-title">{{'common.id' | translate}}:</span>
-            <p-cellEditor>
-              <ng-template pTemplate="input">
-                {{level.id}}
-              </ng-template>
-              <ng-template pTemplate="output">
-                {{level.id}}
-              </ng-template>
-            </p-cellEditor>
-          </td>
+            <ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
+                <tr [pEditableRow]="level">
+                    <td hideable-th="id" [parent]="this">
+                        <span class="p-column-title">{{'common.id' | translate}}:</span>
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                {{level.id}}
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                {{level.id}}
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
 
-          <td hideable-th="name" [parent]="this">
-            <span class="p-column-title">{{'common.name' | translate}}:</span>
-            <p-cellEditor>
-              <ng-template pTemplate="input">
-                <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
-              </ng-template>
-              <ng-template pTemplate="output">
-                {{level.name}}
-              </ng-template>
-            </p-cellEditor>
-          </td>
+                    <td hideable-th="name" [parent]="this">
+                        <span class="p-column-title">{{'common.name' | translate}}:</span>
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                {{level.name}}
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
 
-          <td hideable-th="color" [parent]="this">
-            <span class="p-column-title">{{'common.color' | translate}}:</span>
-            <p-cellEditor>
-              <ng-template pTemplate="input">
-                <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
-              </ng-template>
-              <ng-template pTemplate="output">
-                {{level.color}}
-              </ng-template>
-            </p-cellEditor>
-          </td>
+                    <td hideable-th="color" [parent]="this">
+                        <span class="p-column-title">{{'common.color' | translate}}:</span>
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                {{level.color}}
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
 
-          <td hideable-th="min_xp" [parent]="this">
-            <span class="p-column-title">{{'common.min_xp' | translate}}:</span>
-            <p-cellEditor>
-              <ng-template pTemplate="input">
-                <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp">
-              </ng-template>
-              <ng-template pTemplate="output">
-                {{level.minXp}}
-              </ng-template>
-            </p-cellEditor>
-          </td>
+                    <td hideable-th="min_xp" [parent]="this">
+                        <span class="p-column-title">{{'common.min_xp' | translate}}:</span>
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                <input class="table-edit-input" pInputText min="0" type="number"
+                                       [(ngModel)]="level.minXp">
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                {{level.minXp}}
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
 
-          <td hideable-th="permissions" [parent]="this">
-            <span class="p-column-title">{{'common.permissions' | translate}}:</span>
-            <p-cellEditor>
-              <ng-template pTemplate="input">
-                <input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions">
-              </ng-template>
-              <ng-template pTemplate="output">
-                {{level.permissions}}
-              </ng-template>
-            </p-cellEditor>
-          </td>
+                    <td hideable-th="permissions" [parent]="this">
+                        <span class="p-column-title">{{'common.permissions' | translate}}:</span>
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                <input class="table-edit-input" pInputText min="0" type="text"
+                                       [(ngModel)]="level.permissions">
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                {{level.permissions}}
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
 
-          <td>
-            <span class="p-column-title">{{'common.created_at' | translate}}:</span>
-            <p-cellEditor>
-              <ng-template pTemplate="input">
-                {{level.createdAt | date:'dd.MM.yy HH:mm'}}
-              </ng-template>
-              <ng-template pTemplate="output">
-                {{level.createdAt | date:'dd.MM.yy HH:mm'}}
-              </ng-template>
-            </p-cellEditor>
-          </td>
-          <td>
-            <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
-            <p-cellEditor>
-              <ng-template pTemplate="input">
-                {{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
-              </ng-template>
-              <ng-template pTemplate="output">
-                {{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
-              </ng-template>
-            </p-cellEditor>
-          </td>
-          <td>
-            <div class="btn-wrapper">
-              <app-history-btn *ngIf="!isEditingNew" [id]="level.id" [query]="query" translationKey="view.server.levels.header"></app-history-btn>
-              <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
-                      (click)="onRowEditInit(dt, level, ri)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
-              <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
-                      (click)="deleteLevel(level)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
+                    <td>
+                        <span class="p-column-title">{{'common.created_at' | translate}}:</span>
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                {{level.createdAt | date:'dd.MM.yy HH:mm'}}
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                {{level.createdAt | date:'dd.MM.yy HH:mm'}}
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
+                    <td>
+                        <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                {{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                {{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
+                    <td>
+                        <div class="btn-wrapper">
+                            <app-history-btn *ngIf="!isEditingNew" [id]="level.id" [query]="query"
+                                             translationKey="view.server.levels.header"></app-history-btn>
+                            <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
+                                    (click)="onRowEditInit(dt, level, ri)"
+                                    [disabled]="!user || user.isModerator && !user.isAdmin"></button>
+                            <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
+                                    (click)="deleteLevel(level)"
+                                    [disabled]="!user || user.isModerator && !user.isAdmin"></button>
 
-              <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
-                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, level, ri)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
-              <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
-                      icon="pi pi-times-circle" (click)="onRowEditCancel(ri)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
-            </div>
-          </td>
-        </tr>
-      </ng-template>
+                            <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
+                                    icon="pi pi-check-circle" (click)="onRowEditSave(level, ri)"
+                                    [disabled]="!user || user.isModerator && !user.isAdmin"></button>
+                            <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
+                                    icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"
+                                    [disabled]="!user || user.isModerator && !user.isAdmin"></button>
+                        </div>
+                    </td>
+                </tr>
+            </ng-template>
 
-      <ng-template pTemplate="emptymessage">
-        <tr></tr>
-        <tr>
-          <td colspan="10">{{'common.no_entries_found' | translate}}</td>
-        </tr>
-        <tr></tr>
-      </ng-template>
+            <ng-template pTemplate="emptymessage">
+                <tr></tr>
+                <tr>
+                    <td colspan="10">{{'common.no_entries_found' | translate}}</td>
+                </tr>
+                <tr></tr>
+            </ng-template>
 
-      <ng-template pTemplate="paginatorleft">
-      </ng-template>
-    </p-table>
-  </div>
+            <ng-template pTemplate="paginatorleft">
+            </ng-template>
+        </p-table>
+    </div>
 </div>
 
diff --git a/web/src/app/modules/view/server/levels/components/levels/levels.component.ts b/web/src/app/modules/view/server/levels/components/levels/levels.component.ts
index c1b808b2..80f3660a 100644
--- a/web/src/app/modules/view/server/levels/components/levels/levels.component.ts
+++ b/web/src/app/modules/view/server/levels/components/levels/levels.component.ts
@@ -25,249 +25,241 @@ import { UserDTO } from "../../../../../../models/auth/auth-user.dto";
 import { ComponentWithTable } from "../../../../../../base/component-with-table";
 
 @Component({
-  selector: "app-levels",
-  templateUrl: "./levels.component.html",
-  styleUrls: ["./levels.component.scss"]
+    selector: "app-levels",
+    templateUrl: "./levels.component.html",
+    styleUrls: ["./levels.component.scss"]
 })
 export class LevelsComponent extends ComponentWithTable implements OnInit, OnDestroy {
-  public levels: Level[] = [];
-  public loading = true;
+    public levels: Level[] = [];
+    public loading = true;
 
-  public isEditingNew: boolean = false;
+    public isEditingNew: boolean = false;
 
-  public filterForm!: FormGroup<{
-    id: FormControl<number | null>,
-    name: FormControl<string | null>,
-    color: FormControl<string | null>,
-    min_xp: FormControl<number | null>,
-    permissions: FormControl<string | null>,
-  }>;
+    public filterForm!: FormGroup<{
+        id: FormControl<number | null>,
+        name: FormControl<string | null>,
+        color: FormControl<string | null>,
+        min_xp: FormControl<number | null>,
+        permissions: FormControl<string | null>,
+    }>;
 
-  public filter: LevelFilter = {};
-  public page: Page = {
-    pageSize: undefined,
-    pageIndex: undefined
-  };
-  public sort: Sort = {
-    sortColumn: undefined,
-    sortDirection: undefined
-  };
+    public filter: LevelFilter = {};
+    public page: Page = {
+        pageSize: undefined,
+        pageIndex: undefined
+    };
+    public sort: Sort = {
+        sortColumn: undefined,
+        sortDirection: undefined
+    };
 
-  public totalRecords: number = 0;
+    public totalRecords: number = 0;
 
-  public clonedLevels: { [s: string]: Level; } = {};
+    public clonedLevels: { [s: string]: Level; } = {};
 
-  private unsubscriber = new Subject<void>();
-  private server: Server = {};
-  public user: UserDTO | null = null;
+    private unsubscriber = new Subject<void>();
+    private server: Server = {};
+    public user: UserDTO | null = null;
 
-  query: string = Queries.levelWithHistoryQuery;
+    query: string = Queries.levelWithHistoryQuery;
 
-  public constructor(
-    private authService: AuthService,
-    private spinner: SpinnerService,
-    private toastService: ToastService,
-    private confirmDialog: ConfirmationDialogService,
-    private fb: FormBuilder,
-    private translate: TranslateService,
-    private data: DataService,
-    private sidebar: SidebarService,
-    private route: ActivatedRoute
-  ) {
-    super("level", ["id", "name", "color", "min_xp", "permissions"]);
-  }
-
-  public ngOnInit(): void {
-    this.setFilterForm();
-    this.data.getServerFromRoute(this.route).then(async server => {
-      this.server = server;
-      this.loadNextPage();
-      let authUser = await this.authService.getLoggedInUser();
-      this.user = authUser?.users?.find(u => u.server == this.server.id) ?? null;
-    });
-  }
-
-  public ngOnDestroy(): void {
-    this.unsubscriber.next();
-    this.unsubscriber.complete();
-  }
-
-  public loadNextPage(): void {
-    this.loading = true;
-    this.data.query<LevelListQuery>(Queries.levelQuery, {
-        serverId: this.server.id, filter: this.filter, page: this.page, sort: this.sort
-      },
-      (data: Query) => {
-        return data.servers[0];
-      }
-    ).subscribe(data => {
-      this.totalRecords = data.levelCount;
-      this.levels = data.levels;
-      this.spinner.hideSpinner();
-      this.loading = false;
-    });
-  }
-
-  public setFilterForm(): void {
-    this.filterForm = this.fb.group({
-      id: new FormControl<number | null>(null),
-      name: new FormControl<string | null>(null),
-      color: new FormControl<string | null>(null),
-      min_xp: new FormControl<number | null>(null),
-      permissions: new FormControl<string | null>(null)
-    });
-
-    this.filterForm.valueChanges.pipe(
-      takeUntil(this.unsubscriber),
-      debounceTime(600)
-    ).subscribe(changes => {
-      if (changes.id) {
-        this.filter.id = changes.id;
-      } else {
-        this.filter.id = undefined;
-      }
-
-      if (changes.name) {
-        this.filter.name = changes.name;
-      } else {
-        this.filter.name = undefined;
-      }
-
-      if (this.page.pageSize)
-        this.page.pageSize = 10;
-
-      if (this.page.pageIndex)
-        this.page.pageIndex = 0;
-
-      this.loadNextPage();
-    });
-  }
-
-  public newLevelTemplate: Level = {
-    createdAt: "",
-    modifiedAt: ""
-  };
-
-  public nextPage(event: LazyLoadEvent): void {
-    this.page.pageSize = event.rows ?? 0;
-    if (event.first != null && event.rows != null)
-      this.page.pageIndex = event.first / event.rows;
-    this.sort.sortColumn = event.sortField ?? undefined;
-    this.sort.sortDirection = event.sortOrder === 1 ? SortDirection.ASC : event.sortOrder === -1 ? SortDirection.DESC : SortDirection.ASC;
-
-    this.loadNextPage();
-  }
-
-  public resetFilters(): void {
-    this.filterForm.reset();
-  }
-
-  public onRowEditInit(table: Table, user: User, index: number): void {
-    this.clonedLevels[index] = { ...user };
-  }
-
-  public onRowEditSave(table: Table, newLevel: Level, index: number): void {
-    // const oldUser = this.clonedUsers[index];
-    // delete this.clonedUsers[index];
-
-    // if (JSON.stringify(oldUser) === JSON.stringify(newUser) && !this.isEditingNew) {
-    //   console.log(1, oldUser, newUser, JSON.stringify(oldUser) === JSON.stringify(newUser), !this.isEditingNew);
-    //   return;
-    // }
-
-    if (this.isEditingNew && JSON.stringify(newLevel) === JSON.stringify(this.newLevelTemplate)) {
-      this.isEditingNew = false;
-      this.levels.splice(index, 1);
-      return;
+    public constructor(
+        private authService: AuthService,
+        private spinner: SpinnerService,
+        private toastService: ToastService,
+        private confirmDialog: ConfirmationDialogService,
+        private fb: FormBuilder,
+        private translate: TranslateService,
+        private data: DataService,
+        private sidebar: SidebarService,
+        private route: ActivatedRoute
+    ) {
+        super("level", ["id", "name", "color", "min_xp", "permissions"]);
     }
 
-    if (!newLevel.id && !this.isEditingNew || !newLevel.minXp && !newLevel?.name && !newLevel?.permissions) {
-      return;
-    }
-
-    if (this.isEditingNew) {
-      this.spinner.showSpinner();
-      this.data.mutation<LevelMutationResult>(Mutations.createLevel, {
-          name: newLevel.name,
-          color: newLevel.color,
-          minXp: newLevel.minXp,
-          permissions: newLevel.permissions,
-          serverId: this.server.id
-        }
-      ).pipe(catchError(err => {
-        this.isEditingNew = false;
-        this.spinner.hideSpinner();
-        return throwError(err);
-      })).subscribe(result => {
-        this.isEditingNew = false;
-        this.spinner.hideSpinner();
-        this.toastService.success(this.translate.instant("view.server.levels.message.level_create"), this.translate.instant("view.server.levels.message.level_create_d", { name: result.level.createLevel?.name }));
-        this.loadNextPage();
-      });
-      return;
-    }
-
-    this.spinner.showSpinner();
-    this.data.mutation<UpdateUserMutationResult>(Mutations.updateLevel, {
-        id: newLevel.id,
-        name: newLevel.name,
-        color: newLevel.color,
-        minXp: newLevel.minXp,
-        permissions: newLevel.permissions
-      }
-    ).pipe(catchError(err => {
-      this.spinner.hideSpinner();
-      return throwError(err);
-    })).subscribe(_ => {
-      this.spinner.hideSpinner();
-      this.toastService.success(this.translate.instant("view.server.levels.message.level_update"), this.translate.instant("view.server.levels.message.level_update_d", { name: newLevel.name }));
-      this.loadNextPage();
-    });
-
-  }
-
-  public onRowEditCancel(index: number): void {
-    if (this.isEditingNew) {
-      this.levels.splice(index, 1);
-      delete this.clonedLevels[index];
-      this.isEditingNew = false;
-      return;
-    }
-
-    this.levels[index] = this.clonedLevels[index];
-    delete this.clonedLevels[index];
-  }
-
-  public deleteLevel(level: Level): void {
-    this.confirmDialog.confirmDialog(
-      this.translate.instant("view.server.levels.message.level_delete"), this.translate.instant("view.server.levels.message.level_delete_q", { name: level.name }),
-      () => {
-        this.spinner.showSpinner();
-        this.data.mutation<LevelMutationResult>(Mutations.deleteLevel, {
-            id: level.id
-          }
-        ).pipe(catchError(err => {
-          this.spinner.hideSpinner();
-          return throwError(err);
-        })).subscribe(l => {
-          this.spinner.hideSpinner();
-          this.toastService.success(this.translate.instant("view.server.levels.message.level_deleted"), this.translate.instant("view.server.levels.message.level_deleted_d", { name: level.name }));
-          this.loadNextPage();
+    public ngOnInit(): void {
+        this.setFilterForm();
+        this.data.getServerFromRoute(this.route).then(async server => {
+            this.server = server;
+            this.loadNextPage();
+            let authUser = await this.authService.getLoggedInUser();
+            this.user = authUser?.users?.find(u => u.server == this.server.id) ?? null;
         });
-      });
-  }
+    }
 
-  public addLevel(table: Table): void {
-    const newLevel = JSON.parse(JSON.stringify(this.newLevelTemplate));
+    public ngOnDestroy(): void {
+        this.unsubscriber.next();
+        this.unsubscriber.complete();
+    }
 
-    this.levels = [newLevel, ...this.levels];
+    public loadNextPage(): void {
+        this.loading = true;
+        this.data.query<LevelListQuery>(Queries.levelQuery, {
+                serverId: this.server.id, filter: this.filter, page: this.page, sort: this.sort
+            },
+            (data: Query) => {
+                return data.servers[0];
+            }
+        ).subscribe(data => {
+            this.totalRecords = data.levelCount;
+            this.levels = data.levels;
+            this.spinner.hideSpinner();
+            this.loading = false;
+        });
+    }
 
-    table.initRowEdit(newLevel);
+    public setFilterForm(): void {
+        this.filterForm = this.fb.group({
+            id: new FormControl<number | null>(null),
+            name: new FormControl<string | null>(null),
+            color: new FormControl<string | null>(null),
+            min_xp: new FormControl<number | null>(null),
+            permissions: new FormControl<string | null>(null)
+        });
 
-    const index = this.levels.findIndex(l => l.id == newLevel.id);
-    this.onRowEditInit(table, newLevel, index);
+        this.filterForm.valueChanges.pipe(
+            takeUntil(this.unsubscriber),
+            debounceTime(600)
+        ).subscribe(changes => {
+            if (changes.id) {
+                this.filter.id = changes.id;
+            } else {
+                this.filter.id = undefined;
+            }
 
-    this.isEditingNew = true;
-  }
+            if (changes.name) {
+                this.filter.name = changes.name;
+            } else {
+                this.filter.name = undefined;
+            }
+
+            if (this.page.pageSize)
+                this.page.pageSize = 10;
+
+            if (this.page.pageIndex)
+                this.page.pageIndex = 0;
+
+            this.loadNextPage();
+        });
+    }
+
+    public newLevelTemplate: Level = {
+        createdAt: "",
+        modifiedAt: ""
+    };
+
+    public nextPage(event: LazyLoadEvent): void {
+        this.page.pageSize = event.rows ?? 0;
+        if (event.first != null && event.rows != null)
+            this.page.pageIndex = event.first / event.rows;
+        this.sort.sortColumn = event.sortField ?? undefined;
+        this.sort.sortDirection = event.sortOrder === 1 ? SortDirection.ASC : event.sortOrder === -1 ? SortDirection.DESC : SortDirection.ASC;
+
+        this.loadNextPage();
+    }
+
+    public resetFilters(): void {
+        this.filterForm.reset();
+    }
+
+    public onRowEditInit(table: Table, user: User, index: number): void {
+        this.clonedLevels[index] = { ...user };
+    }
+
+    public override onRowEditSave(newLevel: Level, index: number): void {
+        if (this.isEditingNew && JSON.stringify(newLevel) === JSON.stringify(this.newLevelTemplate)) {
+            this.isEditingNew = false;
+            this.levels.splice(index, 1);
+            return;
+        }
+
+        if (!newLevel.id && !this.isEditingNew || !newLevel.minXp && !newLevel?.name && !newLevel?.permissions) {
+            return;
+        }
+
+        if (this.isEditingNew) {
+            this.spinner.showSpinner();
+            this.data.mutation<LevelMutationResult>(Mutations.createLevel, {
+                    name: newLevel.name,
+                    color: newLevel.color,
+                    minXp: newLevel.minXp,
+                    permissions: newLevel.permissions,
+                    serverId: this.server.id
+                }
+            ).pipe(catchError(err => {
+                this.isEditingNew = false;
+                this.spinner.hideSpinner();
+                return throwError(err);
+            })).subscribe(result => {
+                this.isEditingNew = false;
+                this.spinner.hideSpinner();
+                this.toastService.success(this.translate.instant("view.server.levels.message.level_create"), this.translate.instant("view.server.levels.message.level_create_d", { name: result.level.createLevel?.name }));
+                this.loadNextPage();
+            });
+            return;
+        }
+
+        this.spinner.showSpinner();
+        this.data.mutation<UpdateUserMutationResult>(Mutations.updateLevel, {
+                id: newLevel.id,
+                name: newLevel.name,
+                color: newLevel.color,
+                minXp: newLevel.minXp,
+                permissions: newLevel.permissions
+            }
+        ).pipe(catchError(err => {
+            this.spinner.hideSpinner();
+            return throwError(err);
+        })).subscribe(_ => {
+            this.spinner.hideSpinner();
+            this.toastService.success(this.translate.instant("view.server.levels.message.level_update"), this.translate.instant("view.server.levels.message.level_update_d", { name: newLevel.name }));
+            this.loadNextPage();
+        });
+
+    }
+
+    public onRowEditCancel(index: number): void {
+        if (this.isEditingNew) {
+            this.levels.splice(index, 1);
+            delete this.clonedLevels[index];
+            this.isEditingNew = false;
+            return;
+        }
+
+        this.levels[index] = this.clonedLevels[index];
+        delete this.clonedLevels[index];
+    }
+
+    public deleteLevel(level: Level): void {
+        this.confirmDialog.confirmDialog(
+            this.translate.instant("view.server.levels.message.level_delete"), this.translate.instant("view.server.levels.message.level_delete_q", { name: level.name }),
+            () => {
+                this.spinner.showSpinner();
+                this.data.mutation<LevelMutationResult>(Mutations.deleteLevel, {
+                        id: level.id
+                    }
+                ).pipe(catchError(err => {
+                    this.spinner.hideSpinner();
+                    return throwError(err);
+                })).subscribe(l => {
+                    this.spinner.hideSpinner();
+                    this.toastService.success(this.translate.instant("view.server.levels.message.level_deleted"), this.translate.instant("view.server.levels.message.level_deleted_d", { name: level.name }));
+                    this.loadNextPage();
+                });
+            });
+    }
+
+    public addLevel(table: Table): void {
+        const newLevel = JSON.parse(JSON.stringify(this.newLevelTemplate));
+
+        this.levels = [newLevel, ...this.levels];
+
+        table.initRowEdit(newLevel);
+
+        const index = this.levels.findIndex(l => l.id == newLevel.id);
+        this.onRowEditInit(table, newLevel, index);
+
+        this.isEditingNew = true;
+    }
 
 }
diff --git a/web/src/app/modules/view/server/members/members.component.html b/web/src/app/modules/view/server/members/members.component.html
index ba4baabd..a5b465b2 100644
--- a/web/src/app/modules/view/server/members/members.component.html
+++ b/web/src/app/modules/view/server/members/members.component.html
@@ -242,7 +242,7 @@
                       [routerLink]="member.id"></button>
 
               <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
-                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, member, ri)"></button>
+                      icon="pi pi-check-circle" (click)="onRowEditSave(member, ri)"></button>
               <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
                       icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"></button>
             </div>
diff --git a/web/src/app/modules/view/server/members/members.component.ts b/web/src/app/modules/view/server/members/members.component.ts
index bfb65b75..980de0ca 100644
--- a/web/src/app/modules/view/server/members/members.component.ts
+++ b/web/src/app/modules/view/server/members/members.component.ts
@@ -213,15 +213,7 @@ export class MembersComponent extends ComponentWithTable implements OnInit, OnDe
     this.clonedUsers[index] = { ...user };
   }
 
-  onRowEditSave(table: Table, newUser: User, index: number) {
-    // const oldUser = this.clonedUsers[index];
-    // delete this.clonedUsers[index];
-
-    // if (JSON.stringify(oldUser) === JSON.stringify(newUser) && !this.isEditingNew) {
-    //   console.log(1, oldUser, newUser, JSON.stringify(oldUser) === JSON.stringify(newUser), !this.isEditingNew);
-    //   return;
-    // }
-
+  public override onRowEditSave(newUser: User, index: number) {
     if (this.isEditingNew && JSON.stringify(newUser) === JSON.stringify(this.newUserTemplate)) {
       this.isEditingNew = false;
       this.members.splice(index, 1);
diff --git a/web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.html b/web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.html
index 0cbc7ead..bb312ecf 100644
--- a/web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.html
+++ b/web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.html
@@ -27,6 +27,8 @@
             <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
                     class="icon-btn btn" (click)="resetFilters()">
             </button>
+            <app-data-import-and-export name="achievements" [(data)]="shortRoleNames"
+                                        [callback]="callback"></app-data-import-and-export>
           </div>
         </div>
       </ng-template>
@@ -192,7 +194,7 @@
                       (click)="deleteShortRoleName(shortRoleName)"></button>
 
               <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
-                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, shortRoleName, ri)"></button>
+                      icon="pi pi-check-circle" (click)="onRowEditSave(shortRoleName, ri)"></button>
               <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
                       icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"></button>
             </div>
diff --git a/web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.ts b/web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.ts
index cd254446..49665c6a 100644
--- a/web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.ts
+++ b/web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.ts
@@ -199,7 +199,7 @@ export class ShortRoleNamesComponent extends ComponentWithTable implements OnIni
     this.clonedShortRoleNames[index] = { ...user };
   }
 
-  public onRowEditSave(table: Table, newShortRoleName: ShortRoleName, index: number): void {
+  public override onRowEditSave(newShortRoleName: ShortRoleName, index: number): void {
     if (this.isEditingNew && JSON.stringify(newShortRoleName) === JSON.stringify(this.newShortRoleNameTemplate)) {
       this.isEditingNew = false;
       this.shortRoleNames.splice(index, 1);
diff --git a/web/src/assets/i18n/de.json b/web/src/assets/i18n/de.json
index ade9226c..3cb071ed 100644
--- a/web/src/assets/i18n/de.json
+++ b/web/src/assets/i18n/de.json
@@ -144,6 +144,9 @@
     "emoji": "Emoji",
     "error": "Fehler",
     "feature_flags": "Funktionen",
+    "file": {
+      "uploaded": "Daten wurden erfolgreich importiert."
+    },
     "first_name": "Vorname",
     "hidden_columns": "Ausgeblendete Spalten",
     "history": {
diff --git a/web/src/assets/i18n/en.json b/web/src/assets/i18n/en.json
index 36d7f324..b1a37671 100644
--- a/web/src/assets/i18n/en.json
+++ b/web/src/assets/i18n/en.json
@@ -144,6 +144,9 @@
     "emoji": "Emoji",
     "error": "Error",
     "feature_flags": "Features",
+    "file": {
+      "uploaded": "Data was imported successfully."
+    },
     "first_name": "First name",
     "hidden_columns": "Hidden columns",
     "history": {
diff --git a/web/src/assets/version.json b/web/src/assets/version.json
index 3ae731e3..c2737cb6 100644
--- a/web/src/assets/version.json
+++ b/web/src/assets/version.json
@@ -2,6 +2,6 @@
     "WebVersion": {
         "Major": "1",
         "Minor": "2",
-        "Micro": "0"
+        "Micro": "dev407"
     }
 }
\ No newline at end of file