diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1730c9fadbd3c6c136d68c3053a8d4233149eb7b..e1a7452124a4cad22aecce1e5085ab73c4029cf6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatInputModule } from '@angular/material/input';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 
 import { RepositoryComponent } from './repository/repository.component';
 import { AccessapiComponent } from './accessapi/accessapi.component';
@@ -18,7 +19,7 @@ import { SettingsmartapiComponent } from './settingsmartapi/settingsmartapi.comp
 import { UserComponent } from './user/user.component';
 
 import { ReactiveFormsModule } from '@angular/forms';
-import {FormsModule} from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 import { RepositoryinfoComponent } from './repositoryinfo/repositoryinfo.component';
 
@@ -29,7 +30,7 @@ import { PublishApiComponent } from './publishapi/publishapi.component';
 import { SearchComponent } from './search/search.component'
 import { ParseXmlService } from './services/parse-xml.service';
 import { AuthenticationModule } from './authentication/authentication.module';
-import { SearchModule} from './search/search.module';
+import { SearchModule } from './search/search.module';
 import { StatsComponent } from './stats/stats.component';
 import { MappingComponent } from './mapping/mapping.component';
 import { NebularModule } from './nebular.module';
@@ -61,8 +62,7 @@ import { NbDialogModule } from '@nebular/theme';
     DashboardComponent,
     MappingComponent,
     DatasetsDialogComponent,
-    
-    ],
+  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
@@ -72,6 +72,7 @@ import { NbDialogModule } from '@nebular/theme';
     MatInputModule,
     MatDialogModule,
     MatProgressSpinnerModule,
+    MatSelectModule,
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
@@ -79,7 +80,7 @@ import { NbDialogModule } from '@nebular/theme';
     SearchModule,
     AppRoutingModule,
     AuthenticationModule,
-    NebularModule,    
+    NebularModule,
     BrowserAnimationsModule,
     NbThemeModule.forRoot({ name: 'default' }),
     NbLayoutModule,
@@ -91,21 +92,22 @@ import { NbDialogModule } from '@nebular/theme';
     NbListModule,
     NbAccordionModule,
     NbToastrModule.forRoot(),
-    NbDialogModule.forRoot()
+    NbDialogModule.forRoot(),
   ],
 
   providers: [
     AppConfiguration,
     ParseXmlService,
     {
-        provide: APP_INITIALIZER,
-        useFactory: AppConfigurationFactory,
-        deps: [AppConfiguration, HttpClient], multi: true },
+      provide: APP_INITIALIZER,
+      useFactory: AppConfigurationFactory,
+      deps: [AppConfiguration, HttpClient], multi: true
+    },
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
 
 export function AppConfigurationFactory(appConfig: AppConfiguration) {
-    return () => appConfig.ensureInit();
-  }
+  return () => appConfig.ensureInit();
+}
diff --git a/src/app/datasets/datasets-dialog/datasets-dialog.component.html b/src/app/datasets/datasets-dialog/datasets-dialog.component.html
index df8cf6e987dd0f3f9796ce0f54f4be86d254050f..3adf474ed50b184e6402a4b006c38ec5c976101a 100644
--- a/src/app/datasets/datasets-dialog/datasets-dialog.component.html
+++ b/src/app/datasets/datasets-dialog/datasets-dialog.component.html
@@ -1,13 +1,13 @@
-<nb-card nbSpinnerSize="giant">
-    <nb-card-header>Select dataset id</nb-card-header>
-    <nb-card-body>
-        <nb-select multiple [(selected)]="datasetIdSelected">
-            <nb-option *ngFor="let id of datasetId" [value]="id">{{id}}</nb-option>
-        </nb-select>
+<h1 mat-dialog-title>Select dataset id</h1>
+<div mat-dialog-content>
+    <mat-form-field appearance="fill">
+        <mat-select multiple [(ngModel)]="datasetIdSelected">
+            <mat-option *ngFor="let id of data.datasetId" [value]="id">{{id}}</mat-option>
+        </mat-select>
+    </mat-form-field>
 
-        <div>
-            <button nbButton status="danger" (click)="closeDialog()">Prev</button>
-            <button nbButton (click)="onClickNext()" [disabled]="datasetIdSelected.length === 0">Next</button>
-        </div>
-    </nb-card-body>
-</nb-card>
\ No newline at end of file
+    <div>
+        <button nbButton status="danger" (click)="closeDialog()">Prev</button>
+        <button nbButton (click)="onClickNext()" [disabled]="datasetIdSelected.length === 0">Next</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/datasets/datasets-dialog/datasets-dialog.component.scss b/src/app/datasets/datasets-dialog/datasets-dialog.component.scss
index f0de5e5bd3a2adf7d60c616c2a754ec970c08316..4fb7f779608c4e0a0ca4a365f29bc14746015ab6 100644
--- a/src/app/datasets/datasets-dialog/datasets-dialog.component.scss
+++ b/src/app/datasets/datasets-dialog/datasets-dialog.component.scss
@@ -2,3 +2,11 @@ button {
   margin-right: 5px;
   margin-top: 5px;
 }
+
+mat-form-field {
+  width: 100%;
+}
+
+h1 {
+  font-size: 25px;
+}
\ No newline at end of file
diff --git a/src/app/datasets/datasets-dialog/datasets-dialog.component.ts b/src/app/datasets/datasets-dialog/datasets-dialog.component.ts
index ab1ee55dea347746f2b61548a22b3423ba7d657f..1de59498e9dc45e11b5db47014bf96fc3ee9017c 100644
--- a/src/app/datasets/datasets-dialog/datasets-dialog.component.ts
+++ b/src/app/datasets/datasets-dialog/datasets-dialog.component.ts
@@ -1,5 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-import { NbDialogRef } from '@nebular/theme';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+interface DialogData {
+  datasetId: number[];
+}
 
 @Component({
   selector: 'app-datasets-dialog',
@@ -8,23 +12,23 @@ import { NbDialogRef } from '@nebular/theme';
 })
 export class DatasetsDialogComponent implements OnInit {
 
-  datasetId: number[];
   datasetIdSelected: number[] = [];
 
   constructor(
-    private dialog: NbDialogRef<DatasetsDialogComponent>
+    public dialogRef: MatDialogRef<DatasetsDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
   ) { }
 
   ngOnInit() {
-    this.datasetIdSelected = [...this.datasetId];
+    this.datasetIdSelected = [...this.data.datasetId];
   }
 
   onClickNext() {
-    this.dialog.close(this.datasetIdSelected);
+    this.dialogRef.close(this.datasetIdSelected);
   }
 
   closeDialog() {
-    this.dialog.close([]);
+    this.dialogRef.close([]);
   }
 
 }
diff --git a/src/app/datasets/datasets.component.html b/src/app/datasets/datasets.component.html
index 932de6059a34248ecdb63497f8eb4c21d831fc0d..6a790148a033cb2feced2cdde114fe7e4f14537b 100644
--- a/src/app/datasets/datasets.component.html
+++ b/src/app/datasets/datasets.component.html
@@ -1,41 +1,42 @@
-<div [nbSpinner]="loading" nbSpinnerSize="giant">
-  <h6><strong>Repository : </strong>{{urlRepo}}
-  </h6>
+<h6><strong>Repository : </strong>{{urlRepo}}
+</h6>
 
-  <nb-card *ngFor="let path of openApi.paths">
-    <nb-card-header>{{path.pathName}}</nb-card-header>
-    <nb-accordion>
-      <nb-accordion-item *ngFor="let request of path.requests">
-        <nb-accordion-item-header>{{request.summary}}</nb-accordion-item-header>
-        <nb-accordion-item-body>
-          <strong>Parameters</strong>
-          <nb-list>
-            <nb-list-item *ngFor="let parameter of request.parameters">
-              <label>{{parameter.name}}</label><input nbInput
-                *ngIf="values.has(path.pathName) && values.get(path.pathName).has(request.httpmethod) && values.get(path.pathName).get(request.httpmethod).has(parameter.name)"
-                [ngModel]="values.get(path.pathName).get(request.httpmethod).get(parameter.name).value"
-                (ngModelChange)="values.get(path.pathName).get(request.httpmethod).get(parameter.name).value = $event" />
-            </nb-list-item>
-          </nb-list>
-          <button class="launch-button" (click)="launchRequest(path.pathName, request.httpmethod, true)">Launch</button>
-          <div class="preview" [nbSpinner]="spinners.get(path.pathName)">
-            <ng-container *ngIf="spinners.get(path.pathName); else preview"></ng-container>
-            <ng-template #preview>
-              <ng-container *ngIf="request.tags != null && request.tags.length > 0">
-                <pre *ngIf="request.tags[0] === tagEnum.dataset">{{ previews.get(path.pathName)|json}}</pre>
-                <ul *ngIf="request.tags[0] === tagEnum.search">
-                  <li *ngFor="let datasetId of previews.get(path.pathName)">{{datasetId}}</li>
-                </ul>
-              </ng-container>
-            </ng-template>
-          </div>
-        </nb-accordion-item-body>
-      </nb-accordion-item>
-    </nb-accordion>
-  </nb-card>
+<nb-card *ngFor="let path of openApi.paths">
+  <nb-card-header>{{path.pathName}}</nb-card-header>
+  <nb-accordion>
+    <nb-accordion-item *ngFor="let request of path.requests">
+      <nb-accordion-item-header>{{request.summary}}</nb-accordion-item-header>
+      <nb-accordion-item-body>
+        <strong>Parameters</strong>
+        <nb-list>
+          <nb-list-item *ngFor="let parameter of request.parameters">
+            <label>{{parameter.name}}</label><input nbInput
+              *ngIf="values.has(path.pathName) && values.get(path.pathName).has(request.httpmethod) && values.get(path.pathName).get(request.httpmethod).has(parameter.name)"
+              [ngModel]="values.get(path.pathName).get(request.httpmethod).get(parameter.name).value"
+              (ngModelChange)="values.get(path.pathName).get(request.httpmethod).get(parameter.name).value = $event" />
+          </nb-list-item>
+        </nb-list>
+        <button class="launch-button" (click)="launchRequest(path.pathName, request.httpmethod, true)">Launch</button>
+        <div class="preview" [nbSpinner]="spinners.get(path.pathName)">
+          <ng-container *ngIf="spinners.get(path.pathName); else preview"></ng-container>
+          <ng-template #preview>
+            <ng-container *ngIf="request.tags != null && request.tags.length > 0">
+              <pre *ngIf="request.tags[0] === tagEnum.dataset">{{ previews.get(path.pathName)|json}}</pre>
+              <ul *ngIf="request.tags[0] === tagEnum.search">
+                <li *ngFor="let datasetId of previews.get(path.pathName)">{{datasetId}}</li>
+              </ul>
+            </ng-container>
+          </ng-template>
+        </div>
+      </nb-accordion-item-body>
+    </nb-accordion-item>
+  </nb-accordion>
+</nb-card>
+<div *ngIf="loading" class="overlay">
+  <mat-spinner class="spinner">
+  </mat-spinner>
 </div>
 
-
 <!--
 <form>
   <div>
diff --git a/src/app/datasets/datasets.component.scss b/src/app/datasets/datasets.component.scss
index 02ce6f8b9c40b9c129fb8e041d97ac9f29e57c89..37bfe02d69da11212264d1be6e3950a9f0b65d29 100644
--- a/src/app/datasets/datasets.component.scss
+++ b/src/app/datasets/datasets.component.scss
@@ -13,4 +13,21 @@ label {
   margin-top: 5px;
   max-height: 500px;
   min-height: 30px;
-}
\ No newline at end of file
+}
+
+.overlay {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+}
+
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/src/app/datasets/datasets.component.ts b/src/app/datasets/datasets.component.ts
index ed22817a8e37cfa43af213dbc05f2a77313413ab..f80db3dc76d9ea9eb84f546c6fb3d98a77aefcaf 100644
--- a/src/app/datasets/datasets.component.ts
+++ b/src/app/datasets/datasets.component.ts
@@ -4,8 +4,9 @@ import { OpenApi } from '../publishapi/class/openapi';
 import { ParameterType } from '../publishapi/class/openapi-enum';
 import { OpenApiTag } from '../publishapi/class/openapi-dto';
 import { environment } from 'src/environments/environment.prod';
-import { NbDialogService, NbStepperComponent } from '@nebular/theme';
+import { NbStepperComponent } from '@nebular/theme';
 import { DatasetsDialogComponent } from './datasets-dialog/datasets-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 interface RequestInfo {
   value?: string;
@@ -47,7 +48,7 @@ export class DatasetsComponent implements OnInit, OnChanges {
 
   constructor(
     private dataSetService: DatasetCrudService,
-    private dialogService: NbDialogService
+    public dialog: MatDialog
   ) { }
 
   get urlRepo() {
@@ -289,23 +290,20 @@ export class DatasetsComponent implements OnInit, OnChanges {
   }
 
   private getListFromDialog(searchRequestPathName: string, searchRequestHttpMethod: string,
-    datasetRequestPathName: string, datasetRequestHttpMethod: string) {
+                            datasetRequestPathName: string, datasetRequestHttpMethod: string) {
     this.launchRequest(searchRequestPathName, searchRequestHttpMethod, false).then((response) => {
-      this.dialogService.open(DatasetsDialogComponent, {
-        context: {
+      this.dialog.open(DatasetsDialogComponent, {
+        data: {
           datasetId: response
         },
-        closeOnBackdropClick: false,
-        closeOnEsc: false,
-        autoFocus: true,
-      }).onClose.subscribe({
+      }).afterClosed().subscribe({
         next: (datasetId) => this.onCloseDatasetDialog(datasetRequestPathName, datasetRequestHttpMethod, datasetId)
       });
     }).finally(() => this.loading = false);
   }
 
   private onCloseDatasetDialog(datasetRequestPathName: string, datasetRequestHttpMethod: string, datasetId: number[]) {
-    if (datasetId.length === 0) {
+    if (datasetId == null || datasetId.length === 0) {
       this.ready = false;
       return;
     }
diff --git a/src/app/repository/repository.component.html b/src/app/repository/repository.component.html
index c2581dd218b46d695eda5049e0944baa4a8e6016..a864d608ec004ff05ac816e59b2fad4884c330c3 100644
--- a/src/app/repository/repository.component.html
+++ b/src/app/repository/repository.component.html
@@ -42,7 +42,7 @@
   </div>
   <div>
     <br>
-    <button type="submit"  (click)="publishCatalog()" class="btn btn-success">Publish catalog description in FDP</button>
+    <button type="submit"  (click)="publishCatalog()" class="btn btn-success" [disabled]="!Form.valid">Publish catalog description in FDP</button>
   </div>
 </form>