diff --git a/src/app/components/formats/detail/format-detail.component.html b/src/app/components/formats/detail/format-detail.component.html
index 5b979c6ae2423ed464967f896ab6b68b29ead171..064569e10d7d0053978eb236b6998d0667cefdc2 100644
--- a/src/app/components/formats/detail/format-detail.component.html
+++ b/src/app/components/formats/detail/format-detail.component.html
@@ -27,4 +27,4 @@
       </div>
     </div>
   </section>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/components/formats/edit/format-form.component.html b/src/app/components/formats/edit/format-form.component.html
index 767de654e6e0e0bf0f059b5312a9627c431aa551..dc9588a857641d4e0dcaff8b6343ca0fc2d66df4 100644
--- a/src/app/components/formats/edit/format-form.component.html
+++ b/src/app/components/formats/edit/format-form.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="format">
 
-  <app-back-button [route]="'/organizations'" [title]="'Retourner à la liste des formats'"></app-back-button>
+  <app-back-button [route]="'/formats'" [title]="'Retourner à la liste des formats'"></app-back-button>
 
   <h1>{{ title }}</h1>
 
@@ -21,9 +21,15 @@
       </div>
 
       <div class="field">
-        <label class="label" for="mapServerType">Type MapServer</label>
+        <label class="label required" for="mapServerType">Type MapServer</label>
         <div class="control">
-          <input class="input" type="text" [value]="format.mapServerType" formControlName="mapServerType" id="mapServerType">
+          <input class="input" type="text" [value]="format.mapServerType" formControlName="mapServerType"
+            id="mapServerType">
+        </div>
+        <div *ngIf="mapServerType.invalid && (mapServerType.dirty || mapServerType.touched)" class="alert alert-danger">
+          <p *ngIf="mapServerType.errors['required']" class="help is-danger">
+            Le nom du type MapServer est obligatoire.
+          </p>
         </div>
       </div>
 
@@ -32,4 +38,4 @@
       </div>
     </div>
   </form>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/components/resources/detail/resource-detail.component.html b/src/app/components/resources/detail/resource-detail.component.html
index 0c2b050155f08a112305ee8f7dd6b1c731a00926..ef28fb56a7711bb21f218d2385816738255c32df 100644
--- a/src/app/components/resources/detail/resource-detail.component.html
+++ b/src/app/components/resources/detail/resource-detail.component.html
@@ -12,7 +12,6 @@
             </p>
           </header>
           <div class="card-content">
-
             <div class="content">
               <p>
                 <span class="has-text-weight-bold">Id: </span>
@@ -20,67 +19,88 @@
               </p>
               <p>
                 <span class="has-text-weight-bold">Acronyme: </span>
-                <span>{{resource.acronym}}</span>
+                <span *ngIf="resource.acronym; else emptyAcronymWarning">{{resource.acronym}}</span>
+                <ng-template #emptyAcronymWarning>
+                  <span class="empty-property">Non renseigné</span>
+                </ng-template>
               </p>
+
               <p>
                 <span class="has-text-weight-bold">Type: </span>
-                <span>{{resource.type}}</span>
+                <span *ngIf="resource.type; else emptyTypeWarning">{{resource.type}}</span>
+                <ng-template #emptyTypeWarning>
+                  <span class="empty-property">Non renseigné</span>
+                </ng-template>
               </p>
 
               <div *ngIf="resource.description">
-                <p class="has-text-weight-bold">Description:</p>
-                <p>{{resource.description}}</p>
+                <span class="has-text-weight-bold">Description: </span>
+                <span *ngIf="resource.description; else emptyDescriptionWarning">{{resource.description}}</span>
+                <ng-template #emptyDescriptionWarning>
+                  <span class="empty-property">Non renseigné</span>
+                </ng-template>
               </div>
               <br>
 
               <p>
-                <span class="has-text-weight-bold">Requêtable:</span>
-                <span class="icon has-text-success" *ngIf="resource.isQueryable">
-                  <i class="far fa-check-circle"></i>
-                </span>
-                <span class="icon has-text-danger" *ngIf="!resource.isQueryable">
-                  <i class="far fa-times-circle"></i>
+                <span class="has-text-weight-bold">Requêtable: </span>
+                <span class="icon has-text-success"
+                  [ngClass]="{'has-text-success': resource.isQueryable, 'has-text-danger': !resource.isQueryable}">
+                  <i class="far fa-check-circle"
+                    [ngClass]="{'fa-check-circle': resource.isQueryable, 'fa-times-circle': !resource.isQueryable}"></i>
                 </span>
               </p>
 
               <p>
-                <span class="has-text-weight-bold">Téléchargeable:</span>
-                <span class="icon has-text-success" *ngIf="resource.isDownloadable">
-                  <i class="far fa-check-circle"></i>
-                </span>
-                <span class="icon has-text-danger" *ngIf="!resource.isDownloadable">
-                  <i class="far fa-times-circle"></i>
+                <span class="has-text-weight-bold">Téléchargeable: </span>
+                <span class="icon has-text-success"
+                  [ngClass]="{'has-text-success': resource.isDownloadable, 'has-text-danger': !resource.isDownloadable}">
+                  <i class="far fa-check-circle"
+                    [ngClass]="{'fa-check-circle': resource.isDownloadable, 'fa-times-circle': !resource.isDownloadable}"></i>
                 </span>
               </p>
 
               <p>
-                <span class="has-text-weight-bold">Standardisé:</span>
-                <span class="icon has-text-success" *ngIf="resource.isStandard">
-                  <i class="far fa-check-circle"></i>
-                </span>
-                <span class="icon has-text-danger" *ngIf="!resource.isStandard">
-                  <i class="far fa-times-circle"></i>
+                <span class="has-text-weight-bold">Standardisé: </span>
+                <span class="icon has-text-success"
+                  [ngClass]="{'has-text-success': resource.isStandard, 'has-text-danger': !resource.isStandard}">
+                  <i class="far fa-check-circle"
+                    [ngClass]="{'fa-check-circle': resource.isStandard, 'fa-times-circle': !resource.isStandard}"></i>
                 </span>
               </p>
 
-              <div *ngIf="resource.description">
-                <p class="has-text-weight-bold">Parametres URL:</p>
-                <p>{{resource.parametersUrl}}</p>
+              <div *ngIf="resource.parametersUrl">
+                <span class="has-text-weight-bold">Parametres URL: </span>
+                <span *ngIf="resource.parametersUrl; else emptyParameterUrlWarning">{{resource.parametersUrl}}</span>
+                <ng-template #emptyParameterUrlWarning>
+                  <span class="empty-property">Non renseigné</span>
+                </ng-template>
               </div>
               <br>
 
-              <div *ngIf="resource.description">
-                <p class="has-text-weight-bold">Message d'alerte:</p>
-                <p>{{resource.messageWarning}}</p>
+              <div *ngIf="resource.messageWarning">
+                <span class="has-text-weight-bold">Message d'alerte: </span>
+                <span *ngIf="resource.messageWarning; else emptyMessageWarning">{{resource.messageWarning}}</span>
+                <ng-template #emptyMessageWarning>
+                  <span class="empty-property">Non renseigné</span>
+                </ng-template>
               </div>
               <br>
 
-              <!-- <div>
+              <div>
                 <span class="has-text-weight-bold">Formats de sortie: </span>
-                <span *ngFor="let format of resource.outputFormats; let isLast=last">
-                  {{ format }}{{ isLast ? '' : ',' }}
-                </span>
-              </div> -->
+                <ul
+                  *ngIf="resource.resourceFormats && resource.resourceFormats.length > 0; else noResourceFormatTemplate">
+                  <li *ngFor="let resourceFormat of resource.resourceFormats">
+                    {{ resourceFormat.format.name }}<span *ngIf="resourceFormat.isCuttable">, découpable</span><span
+                      *ngIf="resourceFormat.isProjectable">, projectable</span>
+                  </li>
+                </ul>
+                <ng-template #noResourceFormatTemplate>
+                  <span class="empty-property">Non renseigné</span>
+                </ng-template>
+              </div>
+
 
             </div>
           </div>
@@ -92,4 +112,4 @@
 
   </section>
 
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/components/resources/detail/resource-detail.component.scss b/src/app/components/resources/detail/resource-detail.component.scss
index 163f99f474dc5696a1670be5273eef97a2efbd39..05012fa666610636fa011ff7250fcdc78764b468 100644
--- a/src/app/components/resources/detail/resource-detail.component.scss
+++ b/src/app/components/resources/detail/resource-detail.component.scss
@@ -1,3 +1,8 @@
 .card-header-title {
   justify-content: center;
-}
\ No newline at end of file
+}
+
+.empty-property {
+  font-style: italic;
+  color: #818080;
+}
diff --git a/src/app/components/resources/edit/resource-form.component.html b/src/app/components/resources/edit/resource-form.component.html
index 7ecde6470aa1a968ef2be4992fb01051c340d2fd..9e24f8e03eb9db223d6f6fd09aaab963021582af 100644
--- a/src/app/components/resources/edit/resource-form.component.html
+++ b/src/app/components/resources/edit/resource-form.component.html
@@ -103,13 +103,73 @@
         </div>
       </div>
 
-
-      <!-- <div class="field">
-        <label class="label" for="outputFormats">Formats de sortie (Séparer chaque format par une virgule)</label>
-        <div class="control">
-          <input class="input" type="text" formControlName="outputFormats" id="outputFormats">
+      <div class="field links">
+        <div class="columns">
+          <div class="column is-11">
+            <label class="label">Formats</label>
+          </div>
+          <div class="column is-1">
+            <span class="icon" (click)="addResourceFormat()" title="Ajouter un format">
+              <i class="fas fa-plus"></i>
+            </span>
+          </div>
+        </div>
+        <div formArrayName="resourceFormats">
+          <div *ngFor="let resourceFormat of formResourceFormats.controls; let i = index;" [formGroupName]="i"
+            class="columns is-multiline">
+            <div class="field column is-5">
+              <label class="label required" for="format">Format</label>
+              <div class="control">
+                <div class="select">
+                  <select formControlName="formatId">
+                    <option [ngValue]="format.id" *ngFor="let format of formatsList"> {{format.name}}</option>
+                  </select>
+                </div>
+              </div>
+              <div
+                *ngIf="resourceFormat['controls'].formatId.invalid && (resourceFormat['controls'].formatId.dirty || resourceFormat['controls'].formatId.touched)"
+                class="alert alert-danger">
+                <p *ngIf="resourceFormat.hasError('required', 'format')" class="help is-danger">
+                  Le format est requis.
+                </p>
+              </div>
+            </div>
+            <div class="field column is-3">
+              <label class="label required" for="isProjectable">Projectable</label>
+              <div class="control">
+                <label class="radio">
+                  <input type="radio" formControlName="isProjectable" [value]="1">
+                  Oui
+                </label>
+                <label class="radio">
+                  <input type="radio" formControlName="isProjectable" [value]="0">
+                  Non
+                </label>
+              </div>
+            </div>
+            <div class="field column is-3">
+              <label class="label required" for="isCuttable">Découpable</label>
+              <div class="control">
+                <label class="radio">
+                  <input type="radio" formControlName="isCuttable" [value]="1">
+                  Oui
+                </label>
+                <label class="radio">
+                  <input type="radio" formControlName="isCuttable" [value]="0">
+                  Non
+                </label>
+              </div>
+            </div>
+
+            <div class="column is-1">
+              <span class="icon" (click)="removeResourceFormat(i)" title="Supprimer le format">
+                <i class="fas fa-trash"></i>
+              </span>
+            </div>
+          </div>
         </div>
-      </div> -->
+      </div>
+
 
       <br>
       <div class="has-text-right">
@@ -118,4 +178,4 @@
 
     </div>
   </form>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/components/resources/edit/resource-form.component.ts b/src/app/components/resources/edit/resource-form.component.ts
index 2448c74d4f952a4d018b58754d381a14ccd7c022..e4756d8f7e5aa3cf6eea82fce3203cf6d037f8c9 100644
--- a/src/app/components/resources/edit/resource-form.component.ts
+++ b/src/app/components/resources/edit/resource-form.component.ts
@@ -1,9 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { Resource } from 'src/app/models/resource.model';
+import { Resource, IResource } from 'src/app/models/resource.model';
 import { ResourceService } from 'src/app/services/resource.service';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { filter, switchMap } from 'rxjs/operators';
+import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
+import { filter, switchMap, mergeMap, merge, concatMap, map } from 'rxjs/operators';
+import { Format } from 'src/app/models/format.model';
+import { FormatService } from 'src/app/services';
+import { from, forkJoin, Observable, of } from 'rxjs';
 
 @Component({
   selector: 'app-resource-form',
@@ -13,24 +16,30 @@ import { filter, switchMap } from 'rxjs/operators';
 export class ResourceFormComponent implements OnInit {
 
   resource: Resource = new Resource();
+  formatsList: Format[] = [];
   form: FormGroup;
   title: string;
 
   constructor(
-    private resourceService: ResourceService,
-    private route: ActivatedRoute,
-    private router: Router,
+    private _resourceService: ResourceService,
+    private _formatService: FormatService,
+    private _route: ActivatedRoute,
+    private _router: Router,
     private _fb: FormBuilder,
   ) {
   }
 
   ngOnInit() {
-    this.title = this.route.snapshot.data.title;
+    this.title = this._route.snapshot.data.title;
     this.initForm();
 
-    this.route.paramMap.pipe(
+    this._formatService.getAllFormats().subscribe((res) => {
+      this.formatsList = res;
+    });
+
+    this._route.paramMap.pipe(
       filter((paramMap: ParamMap) => (paramMap.get('id') !== null)),
-      switchMap((paramMap: ParamMap) => this.resourceService.findById(paramMap.get('id'))))
+      switchMap((paramMap: ParamMap) => this._resourceService.findById(paramMap.get('id'))))
       .subscribe((resource: Resource) => {
         this.resource = resource;
 
@@ -41,8 +50,19 @@ export class ResourceFormComponent implements OnInit {
   }
 
   initForm() {
+    const resourceFormats = new FormArray([]);
+    this.resource.resourceFormats.forEach((resourceFormat) => {
+      resourceFormats.push(this._fb.group({
+        formatId: [resourceFormat.format.id, Validators.required],
+        isProjectable: resourceFormat.isProjectable,
+        isCuttable: resourceFormat.isCuttable,
+        id: resourceFormat.id,
+      }));
+    });
+
     this.form = this._fb.group(
       {
+        resourceFormats,
         id: [this.resource.id],
         name: [this.resource.name, Validators.required],
         acronym: [this.resource.acronym],
@@ -58,17 +78,45 @@ export class ResourceFormComponent implements OnInit {
 
   onSubmit() {
     if (!this.formInvalid) {
-      this.resource = new Resource(this.form.value);
-      // this.resource.outputFormats = this.form.value.outputFormats.split(',');
-      this.resourceService.replaceOrCreate(this.resource)
-        .subscribe(
-          (resourceCreated) => {
-            this.router.navigate(['/resources', resourceCreated.id]);
-          },
-          (err) => {
-            alert(err.message);
-          },
-        );
+      const resourceFormats = this.form.controls.resourceFormats['controls'].filter(e => e.dirty).map(e => e.value);
+      const newResource = new Resource(this.form.value);
+      let savedResource: Resource;
+      this._resourceService.replaceOrCreate(newResource).pipe(
+        mergeMap((resource) => {
+          savedResource = resource;
+          let actions: Observable<any>[] = [];
+
+          const toAdd = resourceFormats.filter(e => !e.id);
+          const toUpdate = resourceFormats.filter(e => e.id)
+          const toDelete = this.resource.resourceFormats.map(e => e.id).filter((id) => {
+            return !this.form.controls.resourceFormats['controls'].map(e => e.value.id).find(rfId => rfId === id);
+          });
+
+          if (toAdd.length > 0) {
+            actions.push(this._resourceService.createResourceFormats(resource.id, toAdd));
+          }
+
+          if (toUpdate.length > 0) {
+            actions.push(this._resourceService.updateResourceFormats(resource.id, toUpdate));
+          }
+
+          if (toDelete.length > 0) {
+            actions.push(this._resourceService.deleteResourceFormats(resource.id, toDelete));
+          }
+
+          let res;
+          (actions.length > 0) ? res = forkJoin(actions) : res = of(null);
+
+          return res;
+        }),
+        map(() => savedResource.id),
+      ).subscribe(
+        (resourceCreatedId) => {
+          this._router.navigate(['/resources', resourceCreatedId]);
+        },
+        (err) => {
+        },
+      );
     }
   }
 
@@ -80,6 +128,25 @@ export class ResourceFormComponent implements OnInit {
     return val;
   }
 
+  addResourceFormat() {
+    // if (!this.form.controls.links) {
+    //   this.organization.links = [];
+    // }
+    (this.form.controls.resourceFormats as FormArray).push(this._fb.group({
+      formatId: [null, Validators.required],
+      isProjectable: 0,
+      isCuttable: 0,
+    }));
+  }
+
+  removeResourceFormat(index) {
+    (this.form.controls.resourceFormats as FormArray).removeAt(index);
+  }
+
+  compareFormats(format1: Format, format2: Format) {
+    return format1 && format2 ? format1.id === format2.id : false;
+  }
+
   // Getters for each property
   get name() {
     return this.form.controls['name'];
@@ -97,6 +164,10 @@ export class ResourceFormComponent implements OnInit {
     return this.form.controls['description'];
   }
 
+  get formResourceFormats() {
+    return this.form.controls.resourceFormats as FormArray;
+  }
+
   // get outputFormats() {
   //   return this.form.controls['outputFormats'];
   // }
diff --git a/src/app/components/resources/list/resources.component.html b/src/app/components/resources/list/resources.component.html
index 534c762155075494584a8cee050d2585918db5bc..67f84ebc6389a162554ef6300e57f97b2ccc1b1c 100644
--- a/src/app/components/resources/list/resources.component.html
+++ b/src/app/components/resources/list/resources.component.html
@@ -15,7 +15,7 @@
         <div class="header columns is-marginless">
           <div class="column is-2 has-text-centered">
             <span (click)="sortBy('name')" class="is-sortable">
-              <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Name</span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Nom</span>
               <span *ngIf="sortOptions.value  === 'name'" class="has-text-danger">
                 <i class="fas sort-order-icon"
                   [ngClass]="{'fa-arrow-up': sortOptions.order === 'asc', 'fa-arrow-down': sortOptions.order === 'desc'}"></i>
@@ -102,4 +102,4 @@
 
     </div>
   </div>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/models/resource.model.ts b/src/app/models/resource.model.ts
index 17a726e9dde8a617d4264bcef4b1ac984a420899..fe8df0a3601619cca902abe6bc1a3a2f3f975eb9 100644
--- a/src/app/models/resource.model.ts
+++ b/src/app/models/resource.model.ts
@@ -1,5 +1,7 @@
+import { Format } from './format.model';
+
 export class Resource {
-  id?: number;
+  id?: string;
   name: string;
   acronym: string;
   type: string;
@@ -9,8 +11,10 @@ export class Resource {
   isStandard: number;
   parametersUrl: string;
   messageWarning: string;
+  resourceFormats: IResourceFormat[];
 
   constructor(resource?: IResource) {
+
     if (resource) {
       if (resource.id) {
         this.id = resource.id;
@@ -24,6 +28,7 @@ export class Resource {
       this.isStandard = resource.isStandard;
       this.parametersUrl = resource.parametersUrl;
       this.messageWarning = resource.messageWarning;
+      this.resourceFormats = resource.resourceFormats;
     } else {
       this.name = '';
       this.acronym = '';
@@ -34,6 +39,7 @@ export class Resource {
       this.isStandard = 0;
       this.parametersUrl = '';
       this.messageWarning = '';
+      this.resourceFormats = [];
     }
   }
 }
@@ -49,7 +55,7 @@ export class ResourceRO {
 }
 
 export interface IResource {
-  id: number;
+  id: string;
   name: string;
   acronym: string;
   type: string;
@@ -59,11 +65,13 @@ export interface IResource {
   isStandard: number;
   parametersUrl: string;
   messageWarning: string;
+  resourceFormats: IResourceFormat[];
 }
 
-interface ILink {
-  id?: number;
-  name: string;
-  url: string;
-  organizationId: number;
+export interface IResourceFormat {
+  format: Format;
+  formatId: string;
+  isProjectable: number;
+  isCuttable: number;
+  id?: string;
 }
diff --git a/src/app/services/format.service.ts b/src/app/services/format.service.ts
index b6186961049a0818ffee9dd07cc21045c48ce63d..722f25a8a0188f9c85742e343b50e66f59a167c7 100644
--- a/src/app/services/format.service.ts
+++ b/src/app/services/format.service.ts
@@ -26,7 +26,7 @@ export class FormatService {
     this.pageNumber = 1;
   }
 
-  getFormats(options?): Observable<FormatRO> {
+  getFormats(): Observable<FormatRO> {
     let query = '?';
     query += `limit=${(this.limit ? this.limit : 20)}`;
     query += `&offset=${(this.pageNumber ? (this.pageNumber - 1) * this.limit : 0)}`;
@@ -43,6 +43,12 @@ export class FormatService {
       }));
   }
 
+  getAllFormats(): Observable<Format[]> {
+    return this._httpClient.get<IFormat[]>(this.formatServiceUrl).pipe(
+      map(body => body.map(format => new Format(format))),
+    );
+  }
+
   findById(id): Observable<Format> {
     return this._httpClient.get<IFormat>(this.formatServiceUrl + id).pipe(
       map((response) => {
diff --git a/src/app/services/resource.service.ts b/src/app/services/resource.service.ts
index aa1f84743918583023c4ad43acc9ecdb5a80a936..b598eb31653bfe0f7fd8005c2d93a78bb996abf5 100644
--- a/src/app/services/resource.service.ts
+++ b/src/app/services/resource.service.ts
@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, Subject, from } from 'rxjs';
+import { map, concatMap } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
-import { Resource, IResource, ResourceRO } from '../models/resource.model';
+import { Resource, IResource, ResourceRO, IResourceFormat } from '../models/resource.model';
 import { APP_CONFIG } from './app-config.service';
 
 @Injectable()
@@ -26,7 +26,7 @@ export class ResourceService {
     this.pageNumber = 1;
   }
 
-  getResources(options?): Observable<ResourceRO> {
+  getResources(): Observable<ResourceRO> {
     let query = '?';
     query += `limit=${(this.limit ? this.limit : 20)}`;
     query += `&offset=${(this.pageNumber ? (this.pageNumber - 1) * this.limit : 0)}`;
@@ -70,6 +70,30 @@ export class ResourceService {
     );
   }
 
+  createResourceFormats(resourceId: string, resourceFormats: IResourceFormat[]): Observable<IResourceFormat> {
+    return from(resourceFormats).pipe(
+      concatMap((rf) => {
+        return this._httpClient.post<IResourceFormat>(`${this.resourceServiceUrl}${resourceId}/formats`, rf);
+      }),
+    );
+  }
+
+  updateResourceFormats(resourceId: string, resourceFormats: IResourceFormat[]) {
+    return from(resourceFormats).pipe(
+      concatMap((rf) => {
+        return this._httpClient.put<IResourceFormat>(`${this.resourceServiceUrl}${resourceId}/formats/${rf.id}`, rf);
+      }),
+    );
+  }
+
+  deleteResourceFormats(resourceId: string, resourceFormatsId: string[]) {
+    return from(resourceFormatsId).pipe(
+      concatMap((rfId) => {
+        return this._httpClient.delete<IResourceFormat>(`${this.resourceServiceUrl}${resourceId}/formats/${rfId}`);
+      }),
+    );
+  }
+
   /* PAGINATION */
   paginationChanged(limit: number, pageNumber: number) {
     this.limit = limit;