diff --git a/src/frontend/app/administration/administration-routing.module.ts b/src/frontend/app/administration/administration-routing.module.ts
index f7fe4eea4a5065a3870dcd9f02d6967a5a2dad8c..65735358691213fa8287b20af74d6e801a6b1bc7 100755
--- a/src/frontend/app/administration/administration-routing.module.ts
+++ b/src/frontend/app/administration/administration-routing.module.ts
@@ -39,6 +39,7 @@ import { ShippingsAdministrationComponent }             from './shipping/shippin
 import { ShippingAdministrationComponent }              from './shipping/shipping-administration.component';
 import { CustomFieldsAdministrationComponent }          from './customField/custom-fields-administration.component';
 import { AppGuard }                                     from '../../service/app.guard';
+import { IndexingModelAdministrationComponent }        from './indexingModel/indexing-model-administration.component';
 import { IndexingModelsAdministrationComponent }        from './indexingModel/indexing-models-administration.component';
 
 @NgModule({
@@ -93,9 +94,9 @@ import { IndexingModelsAdministrationComponent }        from './indexingModel/in
             { path: 'administration/shippings/new', canActivate: [AppGuard], component: ShippingAdministrationComponent },
             { path: 'administration/shippings/:id', canActivate: [AppGuard], component: ShippingAdministrationComponent },
             { path: 'administration/customFields', canActivate: [AppGuard], component: CustomFieldsAdministrationComponent },
-            /*{ path: 'administration/indexingModels', canActivate: [AppGuard], component: IndexingModelsAdministrationComponent },*/
-            { path: 'administration/indexingModels/new', canActivate: [AppGuard], component: IndexingModelsAdministrationComponent },
-            { path: 'administration/indexingModels/:id', canActivate: [AppGuard], component: IndexingModelsAdministrationComponent },
+            { path: 'administration/indexingModels', canActivate: [AppGuard], component: IndexingModelsAdministrationComponent },
+            { path: 'administration/indexingModels/new', canActivate: [AppGuard], component: IndexingModelAdministrationComponent },
+            { path: 'administration/indexingModels/:id', canActivate: [AppGuard], component: IndexingModelAdministrationComponent },
         ]),
     ],
     exports: [
diff --git a/src/frontend/app/administration/administration.module.ts b/src/frontend/app/administration/administration.module.ts
index 8a82938fdfb23353d1da20aee0ad8ac5f863d5b9..cb5182c6b2e72c78d54e6add24dabaeaee11f117 100755
--- a/src/frontend/app/administration/administration.module.ts
+++ b/src/frontend/app/administration/administration.module.ts
@@ -50,6 +50,7 @@ import { ListAdministrationComponent }                  from './basket/list/list
 import { ShippingsAdministrationComponent }              from './shipping/shippings-administration.component';
 import { ShippingAdministrationComponent }              from './shipping/shipping-administration.component';
 import { CustomFieldsAdministrationComponent }              from './customField/custom-fields-administration.component';
+import { IndexingModelAdministrationComponent }              from './indexingModel/indexing-model-administration.component';
 import { IndexingModelsAdministrationComponent }              from './indexingModel/indexing-models-administration.component';
 
 @NgModule({
@@ -111,6 +112,7 @@ import { IndexingModelsAdministrationComponent }              from './indexingMo
         ShippingAdministrationComponent,
         AccountLinkComponent,
         CustomFieldsAdministrationComponent,
+        IndexingModelAdministrationComponent,
         IndexingModelsAdministrationComponent
     ],
     entryComponents: [
diff --git a/src/frontend/app/administration/indexingModel/indexing-model-administration.component.html b/src/frontend/app/administration/indexingModel/indexing-model-administration.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..52e73c305c452eeb5946392ab7d0554b9679bc14
--- /dev/null
+++ b/src/frontend/app/administration/indexingModel/indexing-model-administration.component.html
@@ -0,0 +1,50 @@
+<div class="admin-container" [class.admin-is-mobile]="appService.getViewMode()">
+    <mat-sidenav-container autosize class="admin-sidenav-container">
+        <mat-sidenav #snav [mode]="appService.getViewMode() ? 'over' : 'side'"
+            [fixedInViewport]="appService.getViewMode()" fixedTopGap="56"
+            [opened]="appService.getViewMode() ? false : true">
+            <menu-shortcut></menu-shortcut>
+            <menu-nav></menu-nav>
+        </mat-sidenav>
+        <mat-sidenav-content>
+            <div *ngIf="loading" style="display:flex;height:100%;">
+                <mat-spinner style="margin:auto;"></mat-spinner>
+            </div>
+            <mat-card *ngIf="!loading" class="card-app-content">
+                <div style="display: flex;">
+                    <div style="flex:1;">
+                        <mat-form-field class="indexingModelLabel" appearance="outline">
+                            <mat-label>{{lang.modelName}}</mat-label>
+                            <input matInput name="label" [(ngModel)]="indexingModel.label">
+                        </mat-form-field>
+                    </div>
+                    <div class="defaultModel">
+                        <mat-slide-toggle color="primary" name="default" [(ngModel)]="indexingModel.default">{{lang.defaultModel}}
+                        </mat-slide-toggle>
+                    </div>
+                </div>
+                <mat-tab-group>
+                    <mat-tab [label]="lang.indexingForm">
+                        <app-indexing-form #indexingForm [indexingFormId]="this.indexingModel.id"></app-indexing-form>
+                        <div class="col-md-12 text-center">
+                            <button mat-raised-button color="primary" (click)="onSubmit()"
+                                [disabled]="(!indexingForm.isModified() && !isModified()) || indexingModel.label === ''">{{creationMode ? lang.save : lang.update}}</button>
+                        </div>
+                    </mat-tab>
+                </mat-tab-group>
+            </mat-card>
+        </mat-sidenav-content>
+        <mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'"
+            [fixedInViewport]="appService.getViewMode()" fixedTopGap="56" position='end' opened
+            class="col-md-4 col-sm-12">
+            <mat-tab-group>
+                <mat-tab [label]="lang.availableCustomFields">
+                    <app-field-list *ngIf="indexingForm !== undefined" [dataCustomFields]="indexingForm.getAvailableCustomFields()"></app-field-list>
+                </mat-tab>
+                <mat-tab [label]="lang.availableFields">
+                    <app-field-list *ngIf="indexingForm !== undefined" [dataFields]="indexingForm.getAvailableFields()"></app-field-list>
+                </mat-tab>
+            </mat-tab-group>
+        </mat-sidenav>
+    </mat-sidenav-container>
+</div>
\ No newline at end of file
diff --git a/src/frontend/app/administration/indexingModel/indexing-model-administration.component.scss b/src/frontend/app/administration/indexingModel/indexing-model-administration.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f1485c1bb404488a5525a4b10a04fcb400e34616
--- /dev/null
+++ b/src/frontend/app/administration/indexingModel/indexing-model-administration.component.scss
@@ -0,0 +1,14 @@
+@import '../../../css/vars.scss';
+
+.indexingModelLabel {
+    ::ng-deep.mat-form-field-wrapper {
+        padding: 0px;
+    }
+}
+
+.defaultModel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 10px;
+}
\ No newline at end of file
diff --git a/src/frontend/app/administration/indexingModel/indexing-model-administration.component.ts b/src/frontend/app/administration/indexingModel/indexing-model-administration.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e62e5eab314f4619d040478f84b5a66e9d5bb8ff
--- /dev/null
+++ b/src/frontend/app/administration/indexingModel/indexing-model-administration.component.ts
@@ -0,0 +1,185 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LANG } from '../../translate.component';
+import { NotificationService } from '../../notification.service';
+import { HeaderService } from '../../../service/header.service';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSidenav } from '@angular/material/sidenav';
+import { AppService } from '../../../service/app.service';
+import { tap, catchError, finalize } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { SortPipe } from '../../../plugins/sorting.pipe';
+import { IndexingFormComponent } from '../../indexation/indexing-form/indexing-form.component';
+import { ActivatedRoute, Router } from '@angular/router';
+
+declare function $j(selector: any): any;
+
+@Component({
+    templateUrl: "indexing-model-administration.component.html",
+    styleUrls: [
+        'indexing-model-administration.component.scss',
+        '../../indexation/indexing-form/indexing-form.component.scss'
+    ],
+    providers: [NotificationService, AppService, SortPipe]
+})
+
+export class IndexingModelAdministrationComponent implements OnInit {
+
+    @ViewChild('snav', { static: true }) public sidenavLeft: MatSidenav;
+    @ViewChild('snav2', { static: true }) public sidenavRight: MatSidenav;
+
+    @ViewChild('indexingForm', { static: false }) indexingForm: IndexingFormComponent;
+
+    lang: any = LANG;
+
+    loading: boolean = false;
+
+    indexingModel: any = {
+        id: 0,
+        label: '',
+        default: false,
+        owner: 0,
+        private: false
+    };
+
+    indexingModelClone: any;
+
+    indexingModelsCustomFields: any[] = [];
+
+    creationMode: boolean = true;
+
+    availableFields: any[] = [
+        {
+            identifier: 'priority',
+            label: this.lang.priority,
+            type: 'select',
+            values: []
+        },
+        {
+            identifier: 'confidential',
+            label: this.lang.confidential,
+            type: 'radio',
+            values: ['yes', 'no']
+        },
+        {
+            identifier: 'initiator',
+            label: this.lang.initiator,
+            type: 'select',
+            values: []
+        },
+        {
+            identifier: 'processLimitDate',
+            label: this.lang.processLimitDate,
+            type: 'date',
+            values: []
+        },
+        {
+            identifier: 'arrivalDate',
+            label: this.lang.arrivalDate,
+            type: 'date',
+            values: []
+        }
+    ];
+
+    availableCustomFields: any[] = []
+
+    constructor(
+        public http: HttpClient,
+        private route: ActivatedRoute,
+        private router: Router,
+        private notify: NotificationService,
+        public dialog: MatDialog,
+        private headerService: HeaderService,
+        public appService: AppService,
+    ) {
+
+    }
+
+    ngOnInit(): void {
+        window['MainHeaderComponent'].setSnav(this.sidenavLeft);
+        window['MainHeaderComponent'].setSnavRight(this.sidenavRight);
+
+        this.route.params.subscribe((params) => {
+            if (typeof params['id'] == "undefined") {
+                this.headerService.setHeader(this.lang.indexingModelCreation);
+
+                this.indexingModelClone = JSON.parse(JSON.stringify(this.indexingModel));
+                this.creationMode = true;
+                this.loading = false;
+
+            } else {
+                this.creationMode = false;
+
+                this.http.get("../../rest/indexingModels/" + params['id']).pipe(
+                    tap((data: any) => {
+                        this.indexingModel = data.indexingModel;
+
+                        this.headerService.setHeader(this.lang.indexingModelModification, this.indexingModel.label);
+
+                        this.indexingModelClone = JSON.parse(JSON.stringify(this.indexingModel));
+
+                    }),
+                    finalize(() => this.loading = false),
+                    catchError((err: any) => {
+                        this.notify.handleErrors(err);
+                        return of(false);
+                    })
+                ).subscribe();
+            }
+        });
+
+
+    }
+
+    onSubmit() {
+        this.indexingModel.fields = this.indexingForm.getDatas();
+
+        if (this.creationMode) {
+            this.http.post("../../rest/indexingModels", this.indexingModel).pipe(
+                tap((data: any) => {
+                    this.indexingForm.setModification();
+                    this.setModification();
+                    this.router.navigate(['/administration/indexingModels']);
+                    this.notify.success(this.lang.indexingModelAdded);
+                }),
+                finalize(() => this.loading = false),
+                catchError((err: any) => {
+                    this.notify.handleErrors(err);
+                    return of(false);
+                })
+            ).subscribe();
+        } else {
+            this.http.put("../../rest/indexingModels/" + this.indexingModel.id, this.indexingModel).pipe(
+                tap((data: any) => {
+                    this.indexingForm.setModification();
+                    this.setModification();
+                    this.notify.success(this.lang.indexingModelUpdated);
+                }),
+                finalize(() => this.loading = false),
+                catchError((err: any) => {
+                    this.notify.handleErrors(err);
+                    return of(false);
+                })
+            ).subscribe();
+        }
+
+    }
+
+    isModified() {
+        let compare: string = '';
+        let compareClone: string = '';
+
+        compare = JSON.stringify(this.indexingModel);
+        compareClone = JSON.stringify(this.indexingModelClone);
+
+        if (compare !== compareClone) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    setModification() {
+        this.indexingModelClone = JSON.parse(JSON.stringify(this.indexingModel));
+    }
+}
\ No newline at end of file
diff --git a/src/frontend/app/administration/indexingModel/indexing-models-administration.component.html b/src/frontend/app/administration/indexingModel/indexing-models-administration.component.html
index df16f04f342b1870cd209d94aaeec7a881187cdb..b1fdc0d6ebdb54df8677c9d57cd6468df1eb34bb 100644
--- a/src/frontend/app/administration/indexingModel/indexing-models-administration.component.html
+++ b/src/frontend/app/administration/indexingModel/indexing-models-administration.component.html
@@ -5,46 +5,72 @@
             [opened]="appService.getViewMode() ? false : true">
             <menu-shortcut></menu-shortcut>
             <menu-nav></menu-nav>
+            <mat-nav-list>
+                <h3 mat-subheader>{{lang.actions}}</h3>
+                <a mat-list-item routerLink="/administration/indexingModels/new">
+                    <mat-icon color="primary" mat-list-icon class="fa fa-plus"></mat-icon>
+                    <p mat-line>
+                        {{lang.add}}
+                    </p>
+                </a>
+            </mat-nav-list>
+            <mat-divider></mat-divider>
         </mat-sidenav>
         <mat-sidenav-content>
             <div *ngIf="loading" style="display:flex;height:100%;">
                 <mat-spinner style="margin:auto;"></mat-spinner>
             </div>
             <mat-card *ngIf="!loading" class="card-app-content">
-                <div style="display: flex;">
-                    <div style="flex:1;">
-                        <mat-form-field class="indexingModelLabel" appearance="outline">
-                            <mat-label>{{lang.modelName}}</mat-label>
-                            <input matInput name="label" [(ngModel)]="indexingModel.label">
+                <div class="row">
+                    <div class="col-md-6 col-xs-6">
+                        <mat-form-field>
+                            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{lang.filterBy}}">
                         </mat-form-field>
                     </div>
-                    <div class="defaultModel">
-                        <mat-slide-toggle color="primary" name="default" [(ngModel)]="indexingModel.default">{{lang.defaultModel}}
-                        </mat-slide-toggle>
+                    <div class="col-md-6 col-xs-6">
+                        <mat-paginator #paginator [length]="100" [pageSize]="10">
+                        </mat-paginator>
                     </div>
                 </div>
-                <mat-tab-group>
-                    <mat-tab [label]="lang.indexingForm">
-                        <app-indexing-form #indexingForm></app-indexing-form>
-                        <div class="col-md-12 text-center">
-                            <button mat-raised-button color="primary" (click)="onSubmit()"
-                                [disabled]="!indexingForm.isModified() && !isModified()">{{lang.update}}</button>
-                        </div>
-                    </mat-tab>
-                </mat-tab-group>
+                <mat-table #table [dataSource]="dataSource" matSort matSortActive="label" matSortDirection="asc">
+                    <ng-container matColumnDef="label">
+                        <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.label}}</mat-header-cell>
+                        <mat-cell *matCellDef="let element"> {{element.label}} </mat-cell>
+                    </ng-container>
+                    <ng-container matColumnDef="private">
+                        <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.perimeter}}</mat-header-cell>
+                        <mat-cell *matCellDef="let element">
+                            <span [ngClass]="{'dataLabelWarn': element.private, 'dataLabelPrimary': !element.private}" class="label">{{element.private ? lang.private : lang.public}}</span>
+                        </mat-cell>
+                    </ng-container>
+                    <ng-container matColumnDef="default">
+                        <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.default}}</mat-header-cell>
+                        <mat-cell *matCellDef="let element">
+                                <span [ngClass]="{'dataLabelWarn': !element.default, 'dataLabelPrimary': element.default}" class="label">{{element.default ? lang.yes : lang.no}}</span>
+                        </mat-cell>
+                    </ng-container>
+                    <ng-container matColumnDef="actions">
+                        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+                        <mat-cell *matCellDef="let element" style="justify-content: flex-end;">
+                            <button mat-icon-button color="warn" [disabled]="element.is_system == 'Y'"
+                                matTooltip="{{lang.delete}}" (click)="$event.stopPropagation();delete(element)">
+                                <mat-icon class="fa fa-trash-alt fa-2x" aria-hidden="true"></mat-icon>
+                            </button>
+                        </mat-cell>
+                    </ng-container>
+                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                    <mat-row *matRowDef="let row; columns: displayedColumns;"
+                        routerLink="/administration/indexingModels/{{row.id}}" style="cursor:pointer;"
+                        matTooltip="{{lang.view}}"></mat-row>
+                </mat-table>
+                <div class="mat-paginator"
+                    style="min-height:48px;min-height: 48px;display: flex;justify-content: end;align-items: center;padding-right: 20px;">
+                    {{indexingModels.length}} {{lang.indexingModels}}</div>
             </mat-card>
         </mat-sidenav-content>
         <mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'"
-            [fixedInViewport]="appService.getViewMode()" fixedTopGap="56" position='end' opened
-            class="col-md-4 col-sm-12">
-            <mat-tab-group>
-                <mat-tab [label]="lang.availableCustomFields">
-                    <app-field-list *ngIf="indexingForm !== undefined" [dataCustomFields]="indexingForm.getAvailableCustomFields()"></app-field-list>
-                </mat-tab>
-                <mat-tab [label]="lang.availableFields">
-                    <app-field-list *ngIf="indexingForm !== undefined" [dataFields]="indexingForm.getAvailableFields()"></app-field-list>
-                </mat-tab>
-            </mat-tab-group>
+            [fixedInViewport]="appService.getViewMode()" fixedTopGap="56" position='end'
+            [opened]="appService.getViewMode() ? false : false">
         </mat-sidenav>
     </mat-sidenav-container>
 </div>
\ No newline at end of file
diff --git a/src/frontend/app/administration/indexingModel/indexing-models-administration.component.scss b/src/frontend/app/administration/indexingModel/indexing-models-administration.component.scss
index f1485c1bb404488a5525a4b10a04fcb400e34616..59561d48e4654d993cabc617f8bc570fe5f5063b 100644
--- a/src/frontend/app/administration/indexingModel/indexing-models-administration.component.scss
+++ b/src/frontend/app/administration/indexingModel/indexing-models-administration.component.scss
@@ -1,14 +1,9 @@
 @import '../../../css/vars.scss';
 
-.indexingModelLabel {
-    ::ng-deep.mat-form-field-wrapper {
-        padding: 0px;
-    }
+.dataLabelWarn {
+    color : $warn;
 }
 
-.defaultModel {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-left: 10px;
+.dataLabelPrimary {
+    color : $primary;
 }
\ No newline at end of file
diff --git a/src/frontend/app/administration/indexingModel/indexing-models-administration.component.ts b/src/frontend/app/administration/indexingModel/indexing-models-administration.component.ts
index d239c038e22c4bd03e128159250c61799f2959db..7c711c9f8aba8d8c0e990a6b0806f071f1298779 100644
--- a/src/frontend/app/administration/indexingModel/indexing-models-administration.component.ts
+++ b/src/frontend/app/administration/indexingModel/indexing-models-administration.component.ts
@@ -1,26 +1,24 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { LANG } from '../../translate.component';
 import { NotificationService } from '../../notification.service';
-import { HeaderService } from '../../../service/header.service';
-import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
 import { MatSidenav } from '@angular/material/sidenav';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { HeaderService } from '../../../service/header.service';
 import { AppService } from '../../../service/app.service';
-import { tap, catchError, finalize } from 'rxjs/operators';
+import { tap, finalize, catchError, filter, exhaustMap } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { SortPipe } from '../../../plugins/sorting.pipe';
-import { IndexingFormComponent } from '../../indexation/indexing-form/indexing-form.component';
-import { ActivatedRoute } from '@angular/router';
+import { ConfirmComponent } from '../../../plugins/modal/confirm.component';
+import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 
 declare function $j(selector: any): any;
 
 @Component({
     templateUrl: "indexing-models-administration.component.html",
-    styleUrls: [
-        'indexing-models-administration.component.scss',
-        '../../indexation/indexing-form/indexing-form.component.scss'
-    ],
-    providers: [NotificationService, AppService, SortPipe]
+    styleUrls: ['indexing-models-administration.component.scss'],
+    providers: [NotificationService, AppService]
 })
 
 export class IndexingModelsAdministrationComponent implements OnInit {
@@ -28,114 +26,51 @@ export class IndexingModelsAdministrationComponent implements OnInit {
     @ViewChild('snav', { static: true }) public sidenavLeft: MatSidenav;
     @ViewChild('snav2', { static: true }) public sidenavRight: MatSidenav;
 
-    @ViewChild('indexingForm', { static: false }) indexingForm: IndexingFormComponent;
-
     lang: any = LANG;
+    search: string = null;
+
+    indexingModels: any[] = [];
 
     loading: boolean = false;
 
-    indexingModel: any = {
-        id: 0,
-        label: '',
-        default: false,
-        owner: 0,
-        private: false
-    };
-
-    indexingModelClone: any;
-
-    indexingModelsCustomFields: any[] = [];
-
-    creationMode: boolean = true;
-
-    availableFields: any[] = [
-        {
-            identifier: 'priority',
-            label: this.lang.priority,
-            type: 'select',
-            values: []
-        },
-        {
-            identifier: 'confidential',
-            label: this.lang.confidential,
-            type: 'radio',
-            values: ['yes', 'no']
-        },
-        {
-            identifier: 'initiator',
-            label: this.lang.initiator,
-            type: 'select',
-            values: []
-        },
-        {
-            identifier: 'processLimitDate',
-            label: this.lang.processLimitDate,
-            type: 'date',
-            values: []
-        },
-        {
-            identifier: 'arrivalDate',
-            label: this.lang.arrivalDate,
-            type: 'date',
-            values: []
-        }
-    ];
-
-    availableCustomFields: any[] = []
+    displayedColumns = ['label', 'private', 'default', 'actions'];
+
+    dataSource = new MatTableDataSource(this.indexingModels);
+
+    @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+    @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+    dialogRef: MatDialogRef<any>;
+
+    applyFilter(filterValue: string) {
+        filterValue = filterValue.trim(); // Remove whitespace
+        filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+        this.dataSource.filter = filterValue;
+    }
 
     constructor(
         public http: HttpClient,
-        private route: ActivatedRoute,
         private notify: NotificationService,
-        public dialog: MatDialog,
         private headerService: HeaderService,
         public appService: AppService,
-    ) {
-
-    }
+        private dialog: MatDialog,
+    ) { }
 
     ngOnInit(): void {
         window['MainHeaderComponent'].setSnav(this.sidenavLeft);
-        window['MainHeaderComponent'].setSnavRight(this.sidenavRight);
-
-        this.route.params.subscribe((params) => {
-            if (typeof params['id'] == "undefined") {
-                this.headerService.setHeader(this.lang.administration);
-                this.creationMode = true;
-                this.loading = false;
-
-            } else {
-                this.creationMode = false;
-
-                this.http.get("../../rest/indexingModels/" + params['id']).pipe(
-                    tap((data: any) => {
-                        this.indexingModel = data.indexingModel;
-                        
-                        this.headerService.setHeader(this.lang.indexingModelModification, this.indexingModel.label);
+        window['MainHeaderComponent'].setSnavRight(null);
 
-                        this.indexingModelClone = JSON.parse(JSON.stringify(this.indexingModel));
+        this.loading = true;
 
-                    }),
-                    finalize(() => this.loading = false),
-                    catchError((err: any) => {
-                        this.notify.handleErrors(err);
-                        return of(false);
-                    })
-                ).subscribe();
-            }
-        });
-
-
-    }
-
-    onSubmit() {
-        this.indexingModel.fields = this.indexingForm.getDatas();
-
-        this.http.put("../../rest/indexingModels/" + this.indexingModel.id, this.indexingModel).pipe(
+        this.http.get("../../rest/indexingModels").pipe(
             tap((data: any) => {
-                this.indexingForm.setModification();
-                this.setModification();
-                this.notify.success('sucess!');
+                this.indexingModels = data.indexingModels;
+                this.headerService.setHeader(this.lang.administration + ' ' + this.lang.indexingModels);
+                setTimeout(() => {
+                    this.dataSource = new MatTableDataSource(this.indexingModels);
+                    this.dataSource.paginator = this.paginator;
+                    this.dataSource.sort = this.sort;
+                }, 0);
             }),
             finalize(() => this.loading = false),
             catchError((err: any) => {
@@ -145,21 +80,25 @@ export class IndexingModelsAdministrationComponent implements OnInit {
         ).subscribe();
     }
 
-    isModified() {
-        let compare: string = '';
-        let compareClone: string = '';
+    delete(indexingModel: any) {
 
-        compare = JSON.stringify(this.indexingModel);
-        compareClone = JSON.stringify(this.indexingModelClone);
+        this.dialogRef = this.dialog.open(ConfirmComponent, { autoFocus: false, disableClose: true, data: { title: this.lang.delete, msg: this.lang.confirmAction } });
 
-        if(compare !== compareClone) {
-            return true;
-        } else {
-            return false;
-        }
-    }
+        this.dialogRef.afterClosed().pipe(
+            filter((data: string) => data === 'ok'),
+            exhaustMap(() => this.http.delete('../../rest/indexingModels' + indexingModel.id)),
+            tap((data: any) => {
+                this.indexingModels = data.indexingModels;
+                this.dataSource = new MatTableDataSource(this.indexingModels);
+                this.dataSource.paginator = this.paginator;
+                this.dataSource.sort = this.sort;
+                this.notify.success(this.lang.indexingModelDeleted);
+            }),
+            catchError((err: any) => {
+                this.notify.handleErrors(err);
+                return of(false);
+            })
+        ).subscribe();
 
-    setModification() {
-        this.indexingModelClone = JSON.parse(JSON.stringify(this.indexingModel));
     }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/app/indexation/indexing-form/indexing-form.component.ts b/src/frontend/app/indexation/indexing-form/indexing-form.component.ts
index 421a8f07bb6fed6a48cbd6c8d544e114ae0fe67e..78614fcd5d173d369c84773a7a11e20b0edcae10 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.ts
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { LANG } from '../../translate.component';
 import { NotificationService } from '../../notification.service';
@@ -23,6 +23,8 @@ export class IndexingFormComponent implements OnInit {
 
     loading: boolean = false;
 
+    @Input('indexingFormId') indexingFormId: number;
+
     fieldCategories: any[] = ['mail', 'contact', 'process', 'classement'];
 
     indexingModelsCore: any[] = [
@@ -171,7 +173,7 @@ export class IndexingFormComponent implements OnInit {
                     return info;
                 });
             }),
-            exhaustMap((data) => this.http.get("../../rest/indexingModels/1")),
+            exhaustMap((data) => this.http.get("../../rest/indexingModels/" + this.indexingFormId)),
             tap((data: any) => {
                 let fieldExist: boolean;
                 if (data.indexingModel.fields.length === 0) {
diff --git a/src/frontend/lang/lang-en.ts b/src/frontend/lang/lang-en.ts
index 66c28d9e3d38f446e6fc403a2b800c23d6d2076a..9b6f7180b4492cb9947c98ca6bc2311679518605 100755
--- a/src/frontend/lang/lang-en.ts
+++ b/src/frontend/lang/lang-en.ts
@@ -1111,4 +1111,10 @@ export const LANG_EN = {
     "indexingModelModification" : "Indexing model modification",
     "mandatoryField" : "Mandatory field",
     "optionalField" : "Optional field",
+    "indexingModels" : "Indexing model(s)",
+    "perimeter" : "Perimeter",
+    "indexingModelDeleted" : "Indexing model deleted",
+    "indexingModelAdded" : "Indexing model added",
+    "indexingModelUpdated" : "Indexing model updated",
+    "indexingModelCreation" : "Indexing model creation",
 };
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index e430fd3cd83dd474ee5a095e5cd81ce46ccca6c8..5aeaca3aab06428794f4e5749b34c236589bab1f 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1148,4 +1148,11 @@ export const LANG_FR = {
     "indexingModelModification" : "Modification du modèle d'enregistrement",
     "mandatoryField" : "Champ obligatoire",
     "optionalField" : "Champ optionnel",
+    "indexingModels" : "Modèle(s) d'enregistrement(s)",
+    "perimeter" : "Périmètre",
+    "indexingModelDeleted" : "Modèle d'enregistrement supprimé",
+    "indexingModelAdded" : "Modèle d'enregistrement ajouté",
+    "indexingModelUpdated" : "Modèle d'enregistrement modifié",
+    "indexingModelCreation" : "Création d'un modèle d'enregistrement",
+    
 };
diff --git a/src/frontend/lang/lang-nl.ts b/src/frontend/lang/lang-nl.ts
index 16e39b44ef64568a3c6534505abda8715ed6c371..41409637d1a2267860c40467103cab74d457fe2c 100755
--- a/src/frontend/lang/lang-nl.ts
+++ b/src/frontend/lang/lang-nl.ts
@@ -1137,4 +1137,10 @@ export const LANG_NL = {
     "indexingModelModification" : "Indexing model modification", //_TO_TRANSLATE
     "mandatoryField" : "Mandatory field", //_TO_TRANSLATE
     "optionalField" : "Optional field", //_TO_TRANSLATE
+    "indexingModels" : "Indexing model(s)", //_TO_TRANSLATE
+    "perimeter" : "Perimeter", //_TO_TRANSLATE
+    "indexingModelDeleted" : "Indexing model deleted", //_TO_TRANSLATE
+    "indexingModelAdded" : "Indexing model added", //_TO_TRANSLATE
+    "indexingModelUpdated" : "Indexing model updated", //_TO_TRANSLATE
+    "indexingModelCreation" : "Indexing model creation", //_TO_TRANSLATE
 };