diff --git a/src/app/app.routing.module.ts b/src/app/app.routing.module.ts
index f58c4ca7d2b473f77f8e8f9d00f94bf8bc158155..4071bf86d656a855d4c4c350bada7837b0e26b4b 100644
--- a/src/app/app.routing.module.ts
+++ b/src/app/app.routing.module.ts
@@ -8,6 +8,7 @@ import { ResourceFormComponent } from './components/resources/edit/resource-form
 import { ResourceDetailComponent } from './components/resources/detail/resource-detail.component';
 import { FormatsComponent, FormatDetailComponent, FormatFormComponent } from './components';
 import { AuthenticatedGuard } from './user/guards/authenticated.guard';
+import { ChangelogComponent } from './components/changelog/list/changelog.component';
 
 const appRoutes: Routes = [
   {
@@ -111,6 +112,14 @@ const appRoutes: Routes = [
       title: 'Detail du format',
     },
   },
+  {
+    path: 'changelog',
+    component: ChangelogComponent,
+    canActivate: [AuthenticatedGuard],
+    data: {
+      title: 'Changelog',
+    },
+  },
 ];
 
 @NgModule({
diff --git a/src/app/components/changelog/list/changelog.component.html b/src/app/components/changelog/list/changelog.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..703b91a1838c90781fea9cc394898a65e7daffed
--- /dev/null
+++ b/src/app/components/changelog/list/changelog.component.html
@@ -0,0 +1,68 @@
+<section class="section page-container" *ngIf="changelogs">
+  <app-page-header [pageInfo]="pageHeaderInfo" [hideBackButton]="true"></app-page-header>
+  <div class="add-item-link has-text-right">
+    <a class="button button-gl" [routerLink]="['new']">
+      Ajouter
+    </a>
+  </div>
+  <div class="table entity-list-table">
+    <div class="header columns is-marginless">
+      <div class="column is-2">
+        <span (click)="sortBy('version')" class="is-sortable">
+          <span class="sort-icons">
+            <span class="icon">
+              <i class="fas fa-sort-up"
+                [ngClass]="{'icon-red': sortOptions.value === 'version' && sortOptions.order === 'desc'}"></i>
+            </span>
+            <span class="icon">
+              <i class="fas fa-sort-down"
+                [ngClass]="{'icon-red': sortOptions.value === 'version' && sortOptions.order === 'asc'}"></i>
+            </span>
+          </span>
+          <span class="column-title" [ngClass]="{'active': sortOptions.value === version}">Version</span>
+        </span>
+      </div>
+      <div class="column is-2">
+        <span (click)="sortBy('language')" class="is-sortable">
+          <span class="sort-icons">
+            <span class="icon">
+              <i class="fas fa-sort-up"
+                [ngClass]="{'icon-red': sortOptions.value === 'language' && sortOptions.order === 'desc'}"></i>
+            </span>
+            <span class="icon">
+              <i class="fas fa-sort-down"
+                [ngClass]="{'icon-red': sortOptions.value === 'language' && sortOptions.order === 'asc'}"></i>
+            </span>
+          </span>
+          <span class="column-title" [ngClass]="{'active': sortOptions.value === language}">Langue</span>
+        </span>
+      </div>
+      <div class="column is-offset-7 is-1 has-text-centered">
+        <span class="column-title">Actions</span>
+      </div>
+    </div>
+    <div class="data-list">
+      <div class="data columns is-multiline is-vcentered is-marginless"
+        *ngFor="let changelog of changelogs; let i=index; let odd=odd; let even=even;"
+        [ngClass]="{ odd: odd, even: even }">
+        <div class="column is-2">
+          <span>{{ changelog.version }}</span>
+        </div>
+        <div class="column is-2">
+          <span>{{ changelog.language }}</span>
+        </div>
+        <div class="column is-offset-7 is-1 has-text-centered actions">
+          <!-- <app-crud-buttons [id]="format.id" (delete)="displayDeletePopup($event)"></app-crud-buttons> -->
+        </div>
+      </div>
+    </div>
+    <div class="columns is-marginless paginator">
+      <div class="column">
+        <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit"
+          [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
+          [showFirstLastButtons]="true" (page)="changePagination($event)">
+        </app-paginator>
+      </div>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/src/app/components/changelog/list/changelog.component.scss b/src/app/components/changelog/list/changelog.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/changelog/list/changelog.component.ts b/src/app/components/changelog/list/changelog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..16410673fcde6485ce4948e9cd402fd56996f166
--- /dev/null
+++ b/src/app/components/changelog/list/changelog.component.ts
@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core';
+import { PaginatorOptions } from 'src/app/models/paginator-options.model';
+import { IPageHeaderInfo } from '../../../models/page.model';
+import { Subscription } from 'rxjs';
+import { ChangelogService } from '../../../services';
+import { ChangelogRO, Changelog } from '../../../models/changelog.model';
+
+@Component({
+  selector: 'app-changelog',
+  templateUrl: './changelog.component.html',
+  styleUrls: ['./changelog.component.scss'],
+})
+export class ChangelogComponent implements OnInit {
+
+  pageHeaderInfo: IPageHeaderInfo = {
+    title: '',
+  };
+  changelogs: Changelog[];
+  searchChangeSub: Subscription;
+
+  // Paginator options
+  paginator: PaginatorOptions;
+  pageSize = 10;
+  pageSizeOptions = [5, 10, 25, 100];
+
+  sortValue: string;
+
+  totalElement: number;
+  filters = {
+    name: '',
+  };
+  where = {};
+
+  constructor(
+    private changelogService: ChangelogService,
+  ) {
+    this.paginator = {
+      pageIndex: this.changelogService.pageNumber,
+      length: 0,
+      limit: this.changelogService.limit,
+      pageSizeOptions: [5, 10, 20],
+    };
+  }
+
+  ngOnInit(): void {
+    this.changelogService.sortOptions = {
+      value: 'name',
+      order: 'asc',
+    };
+    this.search();
+
+    this.searchChangeSub = this.changelogService.searchChange$.subscribe(
+      () => {
+        this.search();
+      },
+    );
+  }
+
+  private search() {
+    this.changelogService.getChangelogs()
+      .subscribe((items: ChangelogRO) => {
+        this.changelogs = items.changelogs;
+        this.totalElement = items.totalCount;
+
+        this.pageHeaderInfo.title = `${this.totalElement} formats trouvés`;
+
+        this.paginator.limit = this.changelogService.limit;
+        this.paginator.pageIndex = this.changelogService.pageNumber;
+        this.paginator.length = items.totalCount;
+      });
+  }
+
+  // When pagination is changed by user, we update datasetList with new pagination options
+  changePagination(pageIndex) {
+    this.changelogService.paginationChanged(this.paginator.limit, pageIndex);
+  }
+
+  changePageSize(pageSize) {
+    this.changelogService.paginationChanged(pageSize, 1);
+  }
+
+  sortBy(key: string) {
+    if (this.changelogService.sortOptions.value === key) {
+      this.changelogService.reverseSortOrder();
+    } else {
+      this.changelogService.sortOptions.value = key;
+      this.changelogService.sortOptions.order = 'asc';
+    }
+    this.search();
+  }
+
+  get sortOptions() {
+    return this.changelogService.sortOptions;
+  }
+
+  displayDeletePopup(formatId) {
+    const pop = confirm('Etes vous sûr de vouloir supprimer ce format ?');
+    if (pop) {
+      // this.changelogService.delete(formatId).subscribe(() => {
+      //   this.changelogService.pageNumber = 1;
+      //   this.search();
+      // });
+    }
+  }
+}
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index 90f5e966751673233933f0a7cb01fc0caef66634..c58b8ca926b4ba8fe01d91c182e611ab5b669c96 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -14,6 +14,7 @@ import { FormatFormComponent } from './formats/edit/format-form.component';
 import { ImageUploadComponent } from './image-upload/image-upload.component';
 import { NotificationsComponent } from './notifications/notifications.component';
 import { PageHeaderComponent } from './page-header/page-header.component';
+import { ChangelogComponent } from './changelog/list/changelog.component';
 
 export {
   MenuComponent,
@@ -32,6 +33,7 @@ export {
   ImageUploadComponent,
   NotificationsComponent,
   PageHeaderComponent,
+  ChangelogComponent,
 };
 
 // tslint:disable-next-line:variable-name
@@ -52,4 +54,5 @@ export const AppComponents = [
   ImageUploadComponent,
   NotificationsComponent,
   PageHeaderComponent,
+  ChangelogComponent,
 ];
diff --git a/src/app/components/menu/menu.component.html b/src/app/components/menu/menu.component.html
index f0b484894ad4d17f26478e1cf4342647ca1cfecd..0d5bd17fd8598e9f0cf197bf063eb7555421ad70 100644
--- a/src/app/components/menu/menu.component.html
+++ b/src/app/components/menu/menu.component.html
@@ -27,5 +27,12 @@
         <span class="label-menu">Formats</span>
       </a>
     </li>
+    <li><a [routerLink]="['/', 'changelog']" routerLinkActive="active-link">
+        <span class="icon">
+          <i class="fas fa-clipboard-list"></i>
+        </span>
+        <span class="label-menu">Changelog</span>
+      </a>
+    </li>
   </ul>
 </aside>
\ No newline at end of file
diff --git a/src/app/components/organizations/list/organizations.component.html b/src/app/components/organizations/list/organizations.component.html
index f30fe6a126772c926a0eefc3db29202345127685..bfae60a88a9f1aedbed49fca4ad7f27ba04b819e 100644
--- a/src/app/components/organizations/list/organizations.component.html
+++ b/src/app/components/organizations/list/organizations.component.html
@@ -1,11 +1,11 @@
-<div class="section page-container" *ngIf="organizations">
+<div class="section page-container">
   <app-page-header [pageInfo]="pageHeaderInfo" [hideBackButton]="true"></app-page-header>
   <div class="add-item-link has-text-right">
     <a class="button button-gl" [routerLink]="['new']">
       Ajouter
     </a>
   </div>
-  <div class="table entity-list-table">
+  <div class="table entity-list-table" *ngIf="organizations">
     <div class="header columns is-marginless">
       <div class="column is-2">
         <span (click)="sortBy('name')" class="is-sortable">
diff --git a/src/app/components/organizations/list/organizations.component.ts b/src/app/components/organizations/list/organizations.component.ts
index c2c4551db3b71a1ab7a5903a0b57b62760762ad7..c092bc51fb0e0dca021da3e054c3a5988a1b0d68 100644
--- a/src/app/components/organizations/list/organizations.component.ts
+++ b/src/app/components/organizations/list/organizations.component.ts
@@ -62,7 +62,8 @@ export class OrganizationsComponent implements OnInit {
         this.organizations = items.organizations;
         this.totalElement = items.totalCount;
 
-        this.pageHeaderInfo.title = `${this.totalElement} producteurs de données trouvés`;
+        this.pageHeaderInfo.title = items.totalCount ?
+          `${this.totalElement} producteurs de données trouvés` : '0 producteur de données trouvé';
 
         this.paginator.limit = this.organizationsService.limit;
         this.paginator.pageIndex = this.organizationsService.pageNumber;
diff --git a/src/app/models/changelog.model.ts b/src/app/models/changelog.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..940be357a3ff3cd8451f16f3d389863d2ba4d828
--- /dev/null
+++ b/src/app/models/changelog.model.ts
@@ -0,0 +1,39 @@
+export class ChangelogRO {
+  changelogs: Changelog[];
+  totalCount: number;
+
+  constructor(changelogs, totalCount) {
+    this.changelogs = changelogs;
+    this.totalCount = totalCount;
+  }
+}
+
+export class Changelog {
+  version: string;
+  createDate: string; // bon type ?
+  updateDate: string;
+  language: string;
+  majorImprovements: string[];
+  minorImprovements: string[];
+  bugfixes: string[];
+
+  constructor(changelog?: IChangelog) {
+    this.version = changelog && changelog.version ? changelog.version : null;
+    this.createDate = changelog && changelog.createDate ? changelog.createDate : null;
+    this.updateDate = changelog && changelog.updateDate ? changelog.updateDate : null;
+    this.language = changelog && changelog.language ? changelog.language : null;
+    this.majorImprovements = changelog && changelog.majorImprovements ? changelog.majorImprovements : [];
+    this.minorImprovements = changelog && changelog.minorImprovements ? changelog.minorImprovements : [];
+    this.bugfixes = changelog && changelog.bugfixes ? changelog.bugfixes : [];
+  }
+}
+
+export interface IChangelog {
+  version: string;
+  createDate: string; // bon type ?
+  updateDate: string;
+  language: string;
+  majorImprovements: string[];
+  minorImprovements: string[];
+  bugfixes: string[];
+}
diff --git a/src/app/services/app-config.service.ts b/src/app/services/app-config.service.ts
index c8fb34321e489120210a882aa6c17b576b2fe8ae..ccd0f6690d722534eb1154b7e5c438ed5c161a8d 100644
--- a/src/app/services/app-config.service.ts
+++ b/src/app/services/app-config.service.ts
@@ -16,6 +16,9 @@ export class AppConfig {
   middlewareLegacyAuth: {
     url: string;
   };
+  changelog: {
+    url: string;
+  };
 }
 
 export let APP_CONFIG: AppConfig;
diff --git a/src/app/services/changelog.service.ts b/src/app/services/changelog.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5dfc620b4a0b899d982e45ad80adaba939abb9eb
--- /dev/null
+++ b/src/app/services/changelog.service.ts
@@ -0,0 +1,98 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+import { APP_CONFIG } from './app-config.service';
+import { ChangelogRO, IChangelog, Changelog } from '../models/changelog.model';
+
+@Injectable()
+export class ChangelogService {
+
+  changelogServiceUrl: string;
+  limit: number;
+  pageNumber: number;
+  sortOptions: {
+    value: string,
+    order: string,
+  };
+
+  private _searchChangeSubject: Subject<any>;
+
+  constructor(
+    private _httpClient: HttpClient) {
+    this.changelogServiceUrl = `${APP_CONFIG.changelog.url}changelog`;
+    this._searchChangeSubject = new Subject<any>();
+    this.limit = 10;
+    this.pageNumber = 1;
+  }
+
+  getChangelogs(): Observable<ChangelogRO> {
+    let query = '?';
+    query += `limit=${(this.limit ? this.limit : 20)}`;
+    query += `&offset=${(this.pageNumber ? (this.pageNumber - 1) * this.limit : 0)}`;
+    query += `&sort_by=${this.sortOptions.value}.${this.sortOptions.order}`;
+
+    return this._httpClient.get<IChangelog[]>(this.changelogServiceUrl + query, { observe: 'response' }).pipe(
+      map((response) => {
+        const totalCount = response.headers.get('Content-Range');
+        const changelogs = [];
+        console.log(response.body);
+        response.body.forEach((changelog) => {
+          changelogs.push(new Changelog(changelog));
+        });
+        return new ChangelogRO(changelogs, parseInt(totalCount, 10));
+      }));
+  }
+
+  // getAllFormats(): Observable<Format[]> {
+  //   return this._httpClient.get<IFormat[]>(this.changelogServiceUrl).pipe(
+  //     map(body => body.map(format => new Format(format))),
+  //   );
+  // }
+
+  // findById(id): Observable<Format> {
+  //   return this._httpClient.get<IFormat>(this.changelogServiceUrl + id).pipe(
+  //     map((response) => {
+  //       return new Format(response);
+  //     }),
+  //   );
+  // }
+
+  // delete(id) {
+  //   return this._httpClient.delete(this.changelogServiceUrl + id, { withCredentials: true });
+  // }
+
+  // replaceOrCreate(data): Observable<Format> {
+  //   if (data.id) {
+  //     return this._httpClient.put<IFormat>(this.changelogServiceUrl + data.id, data, { withCredentials: true }).pipe(
+  //       map((response) => {
+  //         return new Format(response);
+  //       }),
+  //     );
+  //   }
+  //   return this._httpClient.post<IFormat>(this.changelogServiceUrl, data, { withCredentials: true }).pipe(
+  //     map((response) => {
+  //       return new Format(response);
+  //     }),
+  //   );
+  // }
+
+  /* PAGINATION */
+  paginationChanged(limit: number, pageNumber: number) {
+    this.limit = limit;
+    this.pageNumber = pageNumber;
+    this._searchChangeSubject.next();
+  }
+
+  reverseSortOrder(): void {
+    if (this.sortOptions.order === 'asc') {
+      this.sortOptions.order = 'desc';
+    } else {
+      this.sortOptions.order = 'asc';
+    }
+  }
+
+  get searchChange$(): Observable<string> {
+    return this._searchChangeSubject.asObservable();
+  }
+}
diff --git a/src/app/services/index.ts b/src/app/services/index.ts
index 22c1f82163fa750ff151a10e41d7464774c781ee..d9eaec27d4df8a0793e02e268671562d92c4cbad 100644
--- a/src/app/services/index.ts
+++ b/src/app/services/index.ts
@@ -4,6 +4,7 @@ import { ResourceService } from './resource.service';
 import { FormatService } from './format.service';
 import { NotificationService } from './notification.service';
 import { NavigationHistoryService } from './navigation-history.service';
+import { ChangelogService } from './changelog.service';
 
 export {
   AppConfigService,
@@ -12,6 +13,7 @@ export {
   FormatService,
   NotificationService,
   NavigationHistoryService,
+  ChangelogService,
 };
 
 // tslint:disable-next-line:variable-name
@@ -22,4 +24,5 @@ export const AppServices = [
   FormatService,
   NotificationService,
   NavigationHistoryService,
+  ChangelogService,
 ];