diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 045be83e7bbd0f56c3f29a5805bd5d48fe7b6ed6..9b85e5e1b9a7b32d1d1860bf83368e27910561fc 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -87,6 +87,10 @@ const routes: Routes = [
     component: FormComponent,
     canDeactivate: [DeactivateGuard],
   },
+  {
+    path: 'posts',
+    loadChildren: () => import('./post/post.module').then((m) => m.PostModule),
+  },
   {
     path: '**',
     redirectTo: 'home',
diff --git a/src/app/app.component.html b/src/app/app.component.html
index f4d4b7c94d52798f4b87edb0e1160486c03c25b2..aa331e09ed89df3e4e5049eaa2a392e6d8d06e35 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,8 +1,8 @@
 <div class="app-container">
   <app-header></app-header>
-  <div class="app-body">
+  <div (scroll)="onScrollDown($event)" class="app-body">
     <router-outlet></router-outlet>
     <router-outlet name="print"></router-outlet>
+    <app-footer></app-footer>
   </div>
-  <app-footer></app-footer>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 29e32a153bb71497f6fc87bdc4f1d46be4da47eb..ba93e485c8a2f372dc765459109e4740bb14a29d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -3,17 +3,16 @@
 @import '../assets/scss/layout';
 
 .app-container {
-  height: 100%;
   display: block;
   flex-direction: column;
-  overflow-y: auto;
 }
 
 .app-body {
   flex: 1 1 auto;
-  overflow-y: hidden;
+  overflow-y: auto;
   overflow-x: hidden;
   position: relative;
+  height: calc(var(--vh, 1vh) * 100 - #{$header-height});
 }
 
 .motif {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 78f22a979c697e32b51e602c2d6bb11a1287d416..b2a85d16fd6905ec02a1440ad9b62fc6a52b8812 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { ProfileService } from './profile/services/profile.service';
 import { AuthService } from './services/auth.service';
-import { RouterListenerService } from './services/routerListener.service';
 import { PrintService } from './shared/service/print.service';
+import { WindowScrollService } from './shared/service/windowScroll.service';
 
 @Component({
   selector: 'app-root',
@@ -16,7 +16,7 @@ export class AppComponent {
     public printService: PrintService,
     private authService: AuthService,
     private profilService: ProfileService,
-    private routerListenerService: RouterListenerService
+    private windowScrollService: WindowScrollService
   ) {
     if (this.authService.isLoggedIn()) {
       this.profilService.getProfile();
@@ -31,4 +31,7 @@ export class AppComponent {
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
   }
+  public onScrollDown(event): void {
+    this.windowScrollService.scrollY.next(event);
+  }
 }
diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..1db7cd7e0401d07effddba763f27f28d020eeae5
--- /dev/null
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -0,0 +1,34 @@
+<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px" (click)="showDetails(post)">
+  <div fxLayout="column" fxLayoutGap="4px">
+    <div
+      fxLayout="row"
+      class="tag"
+      fxLayoutAlign=" center"
+      fxLayoutGap="12px"
+      *ngIf="post.tags[0].slug != tagEnum.appels"
+    >
+      <app-svg-icon
+        [iconClass]="'icon-32'"
+        [iconColor]="'inherit'"
+        [type]="'post'"
+        [icon]="post.tags[0].slug"
+      ></app-svg-icon>
+      <span>{{ post.tags[0].name }}</span>
+    </div>
+    <div fxLayout="row" class="imageContainer" *ngIf="post.feature_image">
+      <img class="image" [src]="post.feature_image" />
+    </div>
+    <div fxLayout="row" class="title">
+      {{ post.title }}
+    </div>
+  </div>
+  <div fxLayout="row" class="description">
+    {{ post.excerpt }}
+  </div>
+  <div fxLayout="column" class="informations">
+    <div fxLayout="row">
+      {{ post.published_at | date: 'shortDate' }}
+    </div>
+    <div fxLayout="row">par {{ post.author }}</div>
+  </div>
+</div>
diff --git a/src/app/post/components/post-card/post-card.component.scss b/src/app/post/components/post-card/post-card.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aaf3133afb7c3934b0811019b9fdbb07fbc5a816
--- /dev/null
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -0,0 +1,77 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/breakpoint';
+
+.post {
+  cursor: pointer;
+  padding: 16px 0px;
+  border-bottom: 1px dashed $grey-3;
+  &.bigNew {
+    border: 0;
+    .imageContainer {
+      .image {
+        object-fit: cover;
+        height: 360px;
+        width: 100%;
+        @media #{$large-phone} {
+          height: 147px;
+        }
+      }
+    }
+    .title {
+      @include cn-bold-30;
+    }
+    .description {
+      @include cn-regular-18;
+      color: $grey-1;
+    }
+  }
+  .imageContainer {
+    .image {
+      object-fit: cover;
+      height: 88px;
+      width: 195px;
+      @media #{$large-phone} {
+        height: 70px;
+      }
+    }
+  }
+  .tag {
+    @include cn-bold-16;
+    text-transform: uppercase;
+    color: $secondary-color;
+    fill: $secondary-color;
+    stroke: $secondary-color;
+  }
+  .title {
+    @media #{$large-phone} {
+      @include cn-bold-18;
+    }
+    @include cn-bold-20;
+    color: $grey-1;
+  }
+  .description {
+    @media #{$large-phone} {
+      display: none !important;
+    }
+    @include cn-regular-16;
+    color: $black;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .informations {
+    @include cn-regular-16;
+    color: $grey-3;
+    font-style: italic;
+  }
+}
+.project {
+  text-align: left;
+  .imageContainer,
+  .informations {
+    display: none !important;
+  }
+}
diff --git a/src/app/post/components/post-card/post-card.component.spec.ts b/src/app/post/components/post-card/post-card.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4d019381c7c0b19f28870d734dd304b07335d83
--- /dev/null
+++ b/src/app/post/components/post-card/post-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostCardComponent } from './post-card.component';
+
+describe('PostCardComponent', () => {
+  let component: PostCardComponent;
+  let fixture: ComponentFixture<PostCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PostCardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/post/components/post-card/post-card.component.ts b/src/app/post/components/post-card/post-card.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e97a5fe74994a03a6177ba277cdaa57496c41d95
--- /dev/null
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { TagEnum } from '../../enum/tag.enum';
+import { Post } from '../../models/post.model';
+
+@Component({
+  selector: 'app-post-card',
+  templateUrl: './post-card.component.html',
+  styleUrls: ['./post-card.component.scss'],
+})
+export class PostCardComponent implements OnInit {
+  @Input() post: Post;
+  @Input() class: string;
+  public tagEnum = TagEnum;
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {}
+  public showDetails(post: Post): void {
+    this.router.navigateByUrl('posts/details/' + post.id, { state: { data: post } });
+  }
+}
diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..2e2136a31fe1b742d03da414373b94d6ac6ef80b
--- /dev/null
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -0,0 +1,37 @@
+<div class="postContainer" *ngIf="post" fxLayout="column" fxLayoutGap="16px">
+  <div fxLayout="row">
+    <div class="backLink" fxLayout="row" fxLayoutAlign=" center" (click)="backToPosts()">
+      <svg class="chevronLeft" aria-hidden="true">
+        <use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
+      </svg>
+      <span>Retour à la liste d'acutalités</span>
+    </div>
+  </div>
+  <div fxLayout="column">
+    <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
+      <app-svg-icon
+        [iconClass]="'icon-32'"
+        [iconColor]="'inherit'"
+        [type]="'post'"
+        [icon]="post.tags[0].slug"
+      ></app-svg-icon>
+      <span>{{ post.tags[0].name }}</span>
+    </div>
+    <div fxLayout="row" class="title">
+      {{ post.title }}
+    </div>
+  </div>
+
+  <div fxLayout="column" class="informations" *ngIf="post.tags[0].slug != 'appels'">
+    <div fxLayout="row">
+      {{ post.published_at | date: 'shortDate' }}
+    </div>
+    <div fxLayout="row">par {{ post.author }}</div>
+  </div>
+  <div fxLayout="row" class="imageContainer" *ngIf="post.feature_image">
+    <img class="image" [src]="post.feature_image" />
+  </div>
+  <div fxLayout="row" class="description">
+    <div [innerHtml]="post.safeHtml"></div>
+  </div>
+</div>
diff --git a/src/app/post/components/post-details/post-details.component.scss b/src/app/post/components/post-details/post-details.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4968643522f382caa77aa4b229a281fcb61c2326
--- /dev/null
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -0,0 +1,72 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/layout';
+@import '../../../../assets/scss/breakpoint';
+@import '../../../../assets/scss/hyperlink';
+
+$margin-post: 20px;
+
+.postContainer {
+  max-width: 832px;
+  margin: $margin-post auto;
+  min-height: calc(
+    var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post}* 3
+  );
+  .chevronLeft {
+    height: 24px;
+    width: 24px;
+    stroke: $black;
+    margin-right: 10px;
+  }
+  .backLink {
+    cursor: pointer;
+    color: $grey-2;
+    @include cn-bold-16;
+    &:hover {
+      opacity: 0.4;
+    }
+  }
+}
+.tag {
+  @include cn-bold-16;
+  text-transform: uppercase;
+  color: $secondary-color;
+  fill: $secondary-color;
+  stroke: $secondary-color;
+}
+.title {
+  @include cn-bold-30;
+  color: $grey-1;
+}
+.informations {
+  @include cn-regular-16;
+  color: $grey-3;
+  font-style: italic;
+}
+.imageContainer {
+  .image {
+    object-fit: cover;
+    height: 360px;
+    width: 100%;
+    @media #{$large-phone} {
+      height: 147px;
+    }
+  }
+}
+.description {
+  div {
+    width: 100%;
+  }
+  ::ng-deep figure {
+    margin: 0;
+    img {
+      object-fit: cover;
+      max-width: 100%;
+    }
+  }
+  ::ng-deep a {
+    @include hyperlink;
+    padding: 0;
+    font-size: 18px;
+  }
+}
diff --git a/src/app/post/components/post-details/post-details.component.spec.ts b/src/app/post/components/post-details/post-details.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..90f92b94c0e46f064508801e1d57403a5fb1c26d
--- /dev/null
+++ b/src/app/post/components/post-details/post-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostDetailsComponent } from './post-details.component';
+
+describe('PostDetailsComponent', () => {
+  let component: PostDetailsComponent;
+  let fixture: ComponentFixture<PostDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PostDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..31f7b0f6264140035968c940b6f111293cf409a8
--- /dev/null
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Post } from '../../models/post.model';
+import { PostService } from '../../services/post.service';
+
+@Component({
+  selector: 'app-post-details',
+  templateUrl: './post-details.component.html',
+  styleUrls: ['./post-details.component.scss'],
+})
+export class PostDetailsComponent implements OnInit {
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private postService: PostService,
+    private sanitizer: DomSanitizer
+  ) {}
+  post: Post;
+  ngOnInit(): void {
+    if (history.state.data) {
+      this.post = new Post(history.state.data);
+      this.post.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.post.html);
+    } else {
+      const postId = this.activatedRoute.snapshot.paramMap.get('id');
+      this.postService.getPost(postId).subscribe((post) => {
+        this.post = post.posts[0];
+        this.post.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.post.html);
+      });
+    }
+  }
+
+  public backToPosts(): void {
+    this.router.navigateByUrl('/posts');
+  }
+}
diff --git a/src/app/post/components/post-header/post-header.component.html b/src/app/post/components/post-header/post-header.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..6d9a4faabbac6b5578463cf7364c21fd7670cd5c
--- /dev/null
+++ b/src/app/post/components/post-header/post-header.component.html
@@ -0,0 +1 @@
+<div class="header-container">post-header works!</div>
diff --git a/src/app/post/components/post-header/post-header.component.scss b/src/app/post/components/post-header/post-header.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..526d1120163fd06547a46203cf6394a4c9ca09b5
--- /dev/null
+++ b/src/app/post/components/post-header/post-header.component.scss
@@ -0,0 +1,7 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/layout';
+
+.header-container {
+  height: #{$header-post-height};
+  background: $white;
+}
diff --git a/src/app/post/components/post-header/post-header.component.spec.ts b/src/app/post/components/post-header/post-header.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a2ba8e0b6838fb77e83d1644ca8dd73734b087eb
--- /dev/null
+++ b/src/app/post/components/post-header/post-header.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostHeaderComponent } from './post-header.component';
+
+describe('PostHeaderComponent', () => {
+  let component: PostHeaderComponent;
+  let fixture: ComponentFixture<PostHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PostHeaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/post/components/post-header/post-header.component.ts b/src/app/post/components/post-header/post-header.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4927d262b6ce2a9499bd42389d73b44c654b0f6b
--- /dev/null
+++ b/src/app/post/components/post-header/post-header.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-post-header',
+  templateUrl: './post-header.component.html',
+  styleUrls: ['./post-header.component.scss']
+})
+export class PostHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/post/components/post-list/post-list.component.html b/src/app/post/components/post-list/post-list.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..190d108eb99494d32bf027791b1009d981b05723
--- /dev/null
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -0,0 +1,59 @@
+<div class="section-container" fxLayout="row" fxLayoutGap="32px">
+  <div fxLayout="column" class="list-container" fxLayoutGap="16px">
+    <div fxLayout="column">
+      <div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
+        <h2>à la une</h2>
+        <app-button
+          [type]="'button'"
+          [style]="'buttonWithHash'"
+          [text]="'Publier votre actu'"
+          (action)="publishNews()"
+        ></app-button>
+      </div>
+      <app-post-card [class]="'bigNew'" [post]="bigNews"></app-post-card>
+    </div>
+    <div fxLayout="column" fxLayoutAlign=" center" class="project-container mobile">
+      <div class="background-project-container">
+        <div class="project-content mobile" fxLayout="column">
+          <h2>appels à projets</h2>
+          <app-post-card
+            [post]="news"
+            [class]="'project'"
+            [ngClass]="{ 'last-child': last }"
+            *ngFor="let news of projectsNew; let last = last"
+          ></app-post-card>
+        </div>
+      </div>
+    </div>
+    <div fxLayout="column">
+      <div fxLayout="row" class="row-border otherNews">
+        <h2>autres actualités</h2>
+      </div>
+      <div fxLayout="row" fxLayoutGap="33px">
+        <div fxLayout="column" class="columnPosts">
+          <app-post-card [post]="news" *ngFor="let news of leftColumnPosts"></app-post-card>
+        </div>
+        <div fxLayout="column" class="columnPosts">
+          <app-post-card [post]="news" *ngFor="let news of rightColumnPosts"></app-post-card>
+        </div>
+        <div fxLayout="column" class="columnPostsMobile">
+          <app-post-card [post]="news" *ngFor="let news of postsMobileView"></app-post-card>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div fxLayout="column" fxLayoutAlign=" center" class="project-container desktop">
+    <div class="background-project-container">
+      <div class="project-content" fxLayout="column">
+        <app-svg-icon [iconClass]="'icon-80'" [iconColor]="'inherit'" [type]="'post'" [icon]="'appels'"></app-svg-icon>
+        <h2>appels à projets</h2>
+        <app-post-card
+          [post]="news"
+          [class]="'project'"
+          [ngClass]="{ 'last-child': last }"
+          *ngFor="let news of projectsNew; let last = last"
+        ></app-post-card>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/post/components/post-list/post-list.component.scss b/src/app/post/components/post-list/post-list.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..27a518b912adfc47476fe0f2b56fe55b5685769c
--- /dev/null
+++ b/src/app/post/components/post-list/post-list.component.scss
@@ -0,0 +1,102 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/breakpoint';
+
+.section-container {
+  background: $grey-6;
+  margin-top: 40px;
+  .row-border {
+    border-bottom: 1px dashed $grey-4;
+    padding-bottom: 16px;
+    &.otherNews {
+      padding-top: 24px;
+    }
+  }
+  h2 {
+    font-style: italic !important;
+    text-transform: uppercase;
+  }
+}
+h2 {
+  font-style: italic !important;
+  text-transform: uppercase;
+}
+
+.last-child {
+  ::ng-deep .post {
+    border: 0;
+  }
+}
+.list-container {
+  @media #{$tablet} {
+    width: 100%;
+  }
+  width: 70%;
+  h2 {
+    @media #{$large-phone} {
+      @include cn-bold-22;
+    }
+    @include cn-bold-28;
+    color: $grey-2;
+    margin: 0;
+  }
+  .columnPosts {
+    @media #{$large-phone} {
+      display: none !important;
+    }
+    width: 50%;
+  }
+  .columnPostsMobile {
+    display: none !important;
+    @media #{$large-phone} {
+      display: flex !important;
+    }
+  }
+}
+.project-container {
+  &.desktop {
+    @media #{$tablet} {
+      display: none !important;
+    }
+  }
+  &.mobile {
+    display: none !important;
+    @media #{$tablet} {
+      display: flex !important;
+      width: 100%;
+    }
+  }
+  width: 20%;
+  height: 100%;
+  min-width: 306px;
+  @include background-hash($secondary-color);
+  border: 1px solid $secondary-color;
+  border-radius: 6px;
+  .background-project-container {
+    width: 100%;
+    height: 100%;
+    background: $white;
+    border-radius: 6px;
+    .project-content {
+      @media #{$large-phone} {
+        padding: 38px 32px 14px 36px;
+      }
+      padding: 39px 32px 26px 36px;
+      fill: $secondary-color;
+      stroke: $secondary-color;
+      &.mobile {
+        text-align: left;
+      }
+      text-align: center;
+      h2 {
+        @media #{$large-phone} {
+          @include cn-bold-22;
+        }
+        @include cn-bold-26;
+        color: $secondary-color;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/src/app/post/components/post-list/post-list.component.spec.ts b/src/app/post/components/post-list/post-list.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2d39c24944619ae92c499e826d476de93f005a4c
--- /dev/null
+++ b/src/app/post/components/post-list/post-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostListComponent } from './post-list.component';
+
+describe('PostListComponent', () => {
+  let component: PostListComponent;
+  let fixture: ComponentFixture<PostListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PostListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/post/components/post-list/post-list.component.ts b/src/app/post/components/post-list/post-list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..807c2b9c29415e771c45fef6bf6cacd6559d67a7
--- /dev/null
+++ b/src/app/post/components/post-list/post-list.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { WindowScrollService } from '../../../shared/service/windowScroll.service';
+import { TagEnum } from '../../enum/tag.enum';
+import { Pagination } from '../../models/pagination.model';
+import { Post } from '../../models/post.model';
+import { PostWithMeta } from '../../models/postWithMeta.model';
+import { PostService } from '../../services/post.service';
+
+@Component({
+  selector: 'app-post-list',
+  templateUrl: './post-list.component.html',
+  styleUrls: ['./post-list.component.scss'],
+})
+export class PostListComponent implements OnInit {
+  constructor(private postService: PostService, private windowScrollService: WindowScrollService) {
+    this.windowScrollService.scrollY$.subscribe((evt: any) => {
+      if (evt && evt.target.offsetHeight + evt.target.scrollTop >= evt.target.scrollHeight - 200) {
+        if (!this.isLoading) {
+          this.loadMore();
+        }
+      }
+    });
+  }
+  public postsMobileView: Post[] = [];
+  public leftColumnPosts: Post[] = [];
+  public rightColumnPosts: Post[] = [];
+  public projectsNew: Post[] = [];
+  public bigNews: Post;
+  public pagination: Pagination;
+  public isLoading = false;
+
+  ngOnInit(): void {
+    this.isLoading = true;
+    this.postService.getPosts(1).subscribe((news) => {
+      this.setNews(news);
+    });
+    this.postService.getPosts(1, [TagEnum.aLaUne]).subscribe((news) => {
+      this.bigNews = this.addAuthorToPost(news.posts[0]);
+    });
+    this.postService.getPosts(1, [TagEnum.appels]).subscribe((news) => {
+      let projectNews = news.posts.map((news) => (news = this.addAuthorToPost(news)));
+      this.projectsNew = projectNews;
+    });
+  }
+
+  public publishNews(): void {}
+
+  //Transform excerpt post to have a custom author.
+  private addAuthorToPost(post: Post): Post {
+    post.author = post.excerpt;
+    post.excerpt = post.html.replace(/<[^>]*>/g, '');
+    return post;
+  }
+
+  // Load more news on scroll event.
+  private loadMore(): void {
+    if (this.pagination.page < this.pagination.pages) {
+      this.isLoading = true;
+      this.postService.getPosts(this.pagination.next).subscribe((news) => {
+        this.setNews(news);
+      });
+    }
+  }
+
+  // Split news on two columns on desktop mode or one column in mobile mode.
+  private setNews(news: PostWithMeta): void {
+    this.pagination = news.meta.pagination;
+    const customIndex = this.postsMobileView.length; // For scroll loading, start with previous index.
+    news.posts.forEach((val, index) => {
+      val = this.addAuthorToPost(val);
+      index += customIndex;
+      if (index % 2 == 0) {
+        this.leftColumnPosts.push(val);
+      } else {
+        this.rightColumnPosts.push(val);
+      }
+      this.postsMobileView.push(val);
+    });
+    this.isLoading = false;
+  }
+}
diff --git a/src/app/post/enum/tag.enum.ts b/src/app/post/enum/tag.enum.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b6c049d9c31201ed0765164d4fd649e990c1782
--- /dev/null
+++ b/src/app/post/enum/tag.enum.ts
@@ -0,0 +1,4 @@
+export enum TagEnum {
+  aLaUne = 'a-la-une',
+  appels = 'appels',
+}
diff --git a/src/app/post/models/pagination.model.ts b/src/app/post/models/pagination.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f9ecaaec31d12a488d1ea219500d1fef26da007
--- /dev/null
+++ b/src/app/post/models/pagination.model.ts
@@ -0,0 +1,8 @@
+export class Pagination {
+  limit: number;
+  next: any;
+  page: number;
+  pages: number;
+  prev: any;
+  total: number;
+}
diff --git a/src/app/post/models/post.model.ts b/src/app/post/models/post.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb13ecef2069a06fbd5845c659539a4829c7d1b2
--- /dev/null
+++ b/src/app/post/models/post.model.ts
@@ -0,0 +1,18 @@
+import { SafeHtml } from '@angular/platform-browser';
+import { Tag } from './tag.model';
+
+export class Post {
+  id: number;
+  published_at: Date;
+  title: string;
+  excerpt: string;
+  feature_image: string;
+  html: string;
+  author: string;
+  tags: Tag[];
+  safeHtml: SafeHtml;
+
+  constructor(obj?: any) {
+    Object.assign(this, obj);
+  }
+}
diff --git a/src/app/post/models/postWithMeta.model.ts b/src/app/post/models/postWithMeta.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b8dcb357850a343c8fe624f133f868924ebd33c8
--- /dev/null
+++ b/src/app/post/models/postWithMeta.model.ts
@@ -0,0 +1,11 @@
+import { Pagination } from './pagination.model';
+import { Post } from './post.model';
+
+export class PostWithMeta {
+  posts: Post[];
+  meta: { pagination: Pagination };
+
+  constructor(obj?: any) {
+    Object.assign(this, obj);
+  }
+}
diff --git a/src/app/post/models/tag.model.ts b/src/app/post/models/tag.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..df72a66b1135466ee3ccb13a8117cbce4e40ea32
--- /dev/null
+++ b/src/app/post/models/tag.model.ts
@@ -0,0 +1,4 @@
+export class Tag {
+  name: string;
+  slug: string;
+}
diff --git a/src/app/post/news.component.html b/src/app/post/news.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..ba58f058ba0384781d74c5390e0ff2d9c0634ac3
--- /dev/null
+++ b/src/app/post/news.component.html
@@ -0,0 +1,4 @@
+<app-post-header></app-post-header>
+<div class="section-container">
+  <router-outlet></router-outlet>
+</div>
diff --git a/src/app/post/news.component.scss b/src/app/post/news.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/post/news.component.spec.ts b/src/app/post/news.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ce0f02289a107ba1ded4f4b07debf6b43915fa5
--- /dev/null
+++ b/src/app/post/news.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewsComponent } from './news.component';
+
+describe('PostsComponent', () => {
+  let component: NewsComponent;
+  let fixture: ComponentFixture<NewsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/post/news.component.ts b/src/app/post/news.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce2f45998ad77c03b1b4ab2826f86c82d31e774f
--- /dev/null
+++ b/src/app/post/news.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-news',
+  templateUrl: './news.component.html',
+  styleUrls: ['./news.component.scss'],
+})
+export class NewsComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/post/post-routing.module.ts b/src/app/post/post-routing.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e6f6a3e0098cb96afa1d2ddca401fcfe8e5c1e37
--- /dev/null
+++ b/src/app/post/post-routing.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { PostDetailsComponent } from './components/post-details/post-details.component';
+import { PostListComponent } from './components/post-list/post-list.component';
+import { NewsComponent } from './news.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewsComponent,
+    children: [
+      {
+        path: '',
+        component: PostListComponent,
+      },
+      {
+        path: 'details/:id',
+        component: PostDetailsComponent,
+      },
+    ],
+  },
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PostRoutingModule {}
diff --git a/src/app/post/post.module.ts b/src/app/post/post.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d51f1291cbdef35fa12d1f9dc2d0fdb6c7b4751b
--- /dev/null
+++ b/src/app/post/post.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NewsComponent } from './news.component';
+import { PostRoutingModule } from './post-routing.module';
+import { PostHeaderComponent } from './components/post-header/post-header.component';
+import { PostListComponent } from './components/post-list/post-list.component';
+import { PostDetailsComponent } from './components/post-details/post-details.component';
+import { SharedModule } from '../shared/shared.module';
+import { PostCardComponent } from './components/post-card/post-card.component';
+
+@NgModule({
+  declarations: [NewsComponent, PostHeaderComponent, PostListComponent, PostDetailsComponent, PostCardComponent],
+  imports: [CommonModule, PostRoutingModule, SharedModule],
+})
+export class PostModule {}
diff --git a/src/app/post/services/post.service.spec.ts b/src/app/post/services/post.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..913642b87e73bd219c4d1f0d2c6e6d161662583f
--- /dev/null
+++ b/src/app/post/services/post.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PostService } from './post.service';
+
+describe('PostService', () => {
+  let service: PostService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PostService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/post/services/post.service.ts b/src/app/post/services/post.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d70e18881db9ddd10f11df0a19db6dc2f47bee44
--- /dev/null
+++ b/src/app/post/services/post.service.ts
@@ -0,0 +1,53 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Post } from '../models/post.model';
+import { TagEnum } from '../enum/tag.enum';
+import { PostWithMeta } from '../models/postWithMeta.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PostService {
+  private readonly baseUrl = 'api/posts';
+  constructor(private http: HttpClient) {}
+
+  public getPost(idPost: string): Observable<PostWithMeta> {
+    return this.http.get<PostWithMeta>(`${this.baseUrl}/` + idPost).pipe(
+      map((item: PostWithMeta) => {
+        item.posts.forEach((post) => {
+          post = this.addAuthorToPost(post);
+        });
+        return new PostWithMeta(item);
+      })
+    );
+  }
+
+  public getPosts(page: number, tags?: string[]): Observable<PostWithMeta> {
+    if (!tags) {
+      return this.http
+        .get<PostWithMeta>(
+          `${this.baseUrl}?page=${page}&include=tags,authors&filter=tag:-[${TagEnum.aLaUne},${TagEnum.appels}]`
+        )
+        .pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+    }
+    let tagsString = '';
+    // Transform tab filters to string filters
+    tags.forEach((tag, index) => {
+      tagsString += tag;
+      if (index != tags.length - 1) {
+        tagsString += ',';
+      }
+    });
+    return this.http
+      .get<PostWithMeta>(`${this.baseUrl}?include=tags,authors&filter=tag:[${tagsString}]`)
+      .pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+  }
+
+  private addAuthorToPost(post: Post): Post {
+    post.author = post.excerpt;
+    post.excerpt = post.html.replace(/<[^>]*>/g, '');
+    return post;
+  }
+}
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index e688256ea4c086a50b6e48e39f31194ed42bdfcc..0d40e293ba4dd5ae8d2c04d35678170f5ae2ee7a 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -9,6 +9,10 @@
   &.icon-75 {
     width: 4.688em;
   }
+  &.icon-80 {
+    height: 80px;
+    width: 80px;
+  }
   &.validation {
     height: 100%;
     width: 26px;
diff --git a/src/app/shared/service/windowScroll.service.ts b/src/app/shared/service/windowScroll.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ebdf325b8451d76da2c2750878956c9ad5d15b2d
--- /dev/null
+++ b/src/app/shared/service/windowScroll.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WindowScrollService {
+  scrollY = new BehaviorSubject(null);
+  scrollY$ = this.scrollY.asObservable();
+
+  constructor() {}
+
+  public updateScrollY(value: Event): void {
+    this.scrollY.next(value);
+  }
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index fc3993a6c8bc15a4890c1d40b3682aec7d49b994..99d3963e86d3fa19ae784903415b6b9bf7b11f96 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -196,6 +196,14 @@
           <div *ngFor="let public of structure.publics" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
             <p class="no-margin">{{ getPublicLabel(public) }}</p>
           </div>
+          <div
+            *ngFor="let accompaniment of structure.publicsAccompaniment"
+            fxLayout="row"
+            fxLayoutAlign="none flex-end"
+            fxLayoutGap="8px"
+          >
+            <p class="no-margin">{{ accompaniment }}</p>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/assets/logos/logo_1200.svg b/src/assets/logos/logo_1200.svg
new file mode 100644
index 0000000000000000000000000000000000000000..91b2e0d3fce7350ee13d4af9d9a56d705b88d292
--- /dev/null
+++ b/src/assets/logos/logo_1200.svg
@@ -0,0 +1,5 @@
+<svg width="1200" height="1200" viewBox="0 0 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1200" height="1200" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1081.08 485.317C1088.76 491.865 1095.17 500.125 1100.06 509.914C1104.88 519.765 1107.23 530.889 1107.43 543.279V742.456C1107.43 755.871 1096.57 766.675 1083.24 766.675H1082.8C1069.4 766.675 1058.61 755.803 1058.61 742.456V543.279C1058.48 532.219 1055.18 524.021 1048.51 518.808C1042.17 513.343 1034.23 510.736 1025.35 510.611C1016.46 510.548 1008.84 513.285 1002.24 518.305C995.637 523.325 992.396 531.527 992.464 542.52L992.841 742.334C992.841 755.682 982.049 766.554 968.654 766.554C955.259 766.554 944.467 755.745 944.467 742.334C944.467 722.215 944.521 696.098 944.533 690.574L944.535 689.522L944.153 542.138C944.086 529.302 946.308 517.797 951.07 508.139C955.829 498.413 961.862 490.279 969.731 483.987C977.286 477.69 985.918 472.926 995.821 469.686C1005.73 466.508 1015.38 465.048 1025.28 465.174C1035.18 465.3 1045.08 466.949 1054.8 470.383C1064.51 473.879 1073.14 478.836 1081.08 485.317ZM784.166 503.878C784.166 482.584 766.896 465.3 745.632 465.3C724.368 465.3 707.099 482.584 707.099 503.878V542.452H746.203V542.389C767.22 542.07 784.166 524.979 784.166 503.878ZM857.103 465.3C872.087 465.3 884.212 477.438 884.212 492.436V739.408C884.212 754.41 872.087 766.549 857.103 766.549C842.123 766.549 829.998 754.41 829.998 739.408V492.436C829.998 477.438 842.127 465.3 857.103 465.3Z" fill="#E30613"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M446.65 460.46C452.452 449.493 448.275 435.894 437.321 430.085C426.367 424.276 412.783 428.457 406.981 439.425L406.981 439.425C406.976 439.434 406.887 439.597 406.679 439.92C406.467 440.249 406.171 440.684 405.778 441.22C404.985 442.302 403.912 443.642 402.557 445.183C399.837 448.274 396.282 451.83 392.17 455.353C385.43 461.126 378.253 465.906 371.735 468.791C370.172 469.266 368.626 469.796 367.098 470.383C357.133 473.942 348.626 478.265 340.757 484.62C332.951 491.038 326.536 498.858 321.522 508.835C316.508 518.817 314.411 530.192 314.411 542.327L313.716 689.077V689.522V689.779C313.716 724.223 336.951 753.777 368.562 762.486L369.325 762.869L369.451 762.931C378.151 765.605 386.72 766.747 394.841 766.747C394.978 766.747 395.113 766.729 395.239 766.712C395.349 766.698 395.451 766.684 395.541 766.684C395.576 766.684 395.609 766.685 395.642 766.687C395.685 766.69 395.726 766.694 395.767 766.699C395.808 766.704 395.848 766.71 395.889 766.716C396 766.731 396.111 766.747 396.236 766.747C406.202 766.747 416.167 765.286 425.437 761.727C435.407 758.167 443.909 753.848 451.783 747.489C459.271 741.202 464.985 734.847 469.811 725.184C470.448 723.912 471.081 722.515 471.588 721.117C477.559 705.917 465.623 689.711 449.436 689.711C439.659 689.711 430.582 695.621 427.466 704.902C422.578 719.202 410.332 724.667 395.98 724.667C382.837 724.667 371.601 717.103 366.017 706.173C365.191 704.645 364.558 702.996 363.988 701.279C362.906 697.976 362.21 694.542 362.21 690.916C362.21 690.821 362.227 690.743 362.244 690.664C362.26 690.585 362.277 690.507 362.277 690.412C362.277 690.326 362.27 690.247 362.26 690.17C362.255 690.132 362.249 690.095 362.243 690.058C362.227 689.947 362.21 689.836 362.21 689.711V621.327H395.092C405.569 621.327 415.916 619.358 425.626 615.61C434.833 612.05 444.04 607.794 451.846 601.439C459.72 595.017 466.067 587.202 471.082 577.22C476.096 567.243 478.192 555.868 478.192 543.729V543.028C478.192 542.891 478.173 542.755 478.155 542.629V542.628C478.145 542.558 478.135 542.49 478.13 542.426C478.126 542.392 478.125 542.358 478.125 542.327H478.192C478.192 530.192 476.033 518.817 471.082 508.835C466.067 498.858 459.72 491.038 451.846 484.62C447.062 480.684 441.99 477.3 436.486 474.61C440.777 469.702 444.337 464.833 446.65 460.46ZM277.53 509.981C272.641 500.193 266.226 491.928 258.546 485.384C250.609 478.904 241.981 473.942 232.267 470.45C222.553 467.016 212.65 465.362 202.748 465.237C192.845 465.111 183.198 466.572 173.291 469.749C163.388 472.994 154.756 477.758 147.201 484.05C144.862 485.919 142.686 487.951 140.657 490.138C136.083 486.053 130.913 482.435 125.187 479.34C124.877 479.205 124.505 479.003 124.195 478.8C109.13 471.21 91.3711 482.477 91.03 499.312L91.0031 502.112C90.846 511.262 96.6367 519.069 104.964 522.83C108.968 524.61 112.254 527.257 114.754 530.641C118.392 535.157 120.639 540.387 121.628 546.129L122 689.585L121.998 690.651C121.986 696.204 121.932 722.298 121.932 742.402C121.932 755.808 132.724 766.617 146.124 766.617C159.514 766.617 170.31 755.75 170.31 742.339L169.929 542.524C169.861 531.531 173.102 523.329 179.706 518.309C186.309 513.289 193.927 510.552 202.81 510.615C211.694 510.741 219.631 513.348 225.978 518.813C229.277 521.419 231.823 524.79 233.47 528.853C236.963 537.307 244.581 543.347 253.72 543.473L256.516 543.535C273.337 543.729 285.143 526.314 278.037 510.997C277.844 510.678 277.655 510.296 277.53 509.981ZM419.09 567.881C425.505 562.919 429.055 554.34 429.055 543.661V542.902C429.055 532.223 425.505 523.707 419.09 518.687C411.979 513.667 404.869 510.804 395.603 510.804C386.338 510.804 378.532 513.667 372.117 518.687C365.707 523.644 362.151 532.223 362.151 542.902V575.696H395.603C404.869 575.696 412.675 572.901 419.09 567.881ZM635.244 612.814L583.378 564.96C572.712 555.297 568.654 545.634 568.654 535.468C568.654 519.199 579.823 505.474 597.599 505.474C613.028 505.474 621.979 514.88 627.496 529.877C630.418 537.823 637.717 543.288 646.161 543.288H646.349C659.875 543.288 669.265 530.003 665.014 517.105C655.112 487.043 632.191 465.241 595.566 465.241C549.854 465.241 519.832 491.173 519.832 537.504C519.832 572.074 535.575 591.97 555.887 609.259L606.164 652.476C622.921 666.709 630.032 679.419 630.032 696.201C630.032 715.018 619.366 727.216 600.068 727.216C584.006 727.216 573.278 719.526 566.356 703.953C562.486 695.311 554.294 689.527 544.835 689.527H543.57C526.3 689.527 515.253 707.639 522.745 723.211C535.947 750.604 561.211 767.444 595.494 767.444C643.737 767.444 676.812 742.532 676.812 692.134C676.951 654.566 656.126 632.131 635.244 612.814Z" fill="black"/>
+</svg>
diff --git a/src/assets/post/sprite.svg b/src/assets/post/sprite.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fe3e4e45abe4590b91cafff792b4fec8ab443602
--- /dev/null
+++ b/src/assets/post/sprite.svg
@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<symbol id="appels" viewBox="0 0 80 60" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66016 23.2006C4.67429 23.0597 8.52282 22.3132 12.7892 21.1547C17.5608 19.8591 22.9197 18.0302 28.3314 15.8906C38.369 11.9223 48.6614 6.85659 55.7703 2.08884V2.14843V2.22928V2.31051V2.39211V2.47407V2.5564V2.6391V2.72216V2.80559V2.88938V2.97352V3.05802V3.14288V3.2281V3.31367V3.39959V3.48586V3.57248V3.65944V3.74676V3.83441V3.92241V4.01075V4.09943V4.18845V4.27781V4.3675V4.45752V4.54788V4.63856V4.72958V4.82092V4.91259V5.00458V5.0969V5.18954V5.2825V5.37577V5.46937V5.56327V5.6575V5.75203V5.84688V5.94203V6.03749V6.13326V6.22933V6.32571V6.42239V6.51937V6.61664V6.71422V6.81209V6.91025V7.0087V7.10745V7.20649V7.30581V7.40542V7.50532V7.6055V7.70596V7.8067V7.90772V8.00901V8.11059V8.21243V8.31455V8.41694V8.5196V8.62253V8.72573V8.82918V8.93291V9.03689V9.14114V9.24565V9.35041V9.45543V9.5607V9.66622V9.772V9.87803V9.9843V10.0908V10.1976V10.3046V10.4119V10.5194V10.6271V10.7351V10.8433V10.9517V11.0604V11.1693V11.2784V11.3878V11.4974V11.6072V11.7172V11.8275V11.938V12.0487V12.1596V12.2708V12.3821V12.4937V12.6054V12.7174V12.8296V12.942V13.0546V13.1675V13.2805V13.3937V13.5071V13.6207V13.7345V13.8485V13.9628V14.0771V14.1917V14.3065V14.4215V14.5366V14.6519V14.7674V14.8831V14.999V15.1151V15.2313V15.3477V15.4643V15.581V15.6979V15.815V15.9323V16.0497V16.1673V16.2851V16.403V16.521V16.6393V16.7577V16.8762V16.9949V17.1137V17.2327V17.3519V17.4712V17.5906V17.7102V17.83V17.9498V18.0698V18.19V18.3103V18.4307V18.5513V18.672V18.7928V18.9137V19.0348V19.156V19.2774V19.3988V19.5204V19.6421V19.7639V19.8858V20.0079V20.1301V20.2523V20.3747V20.4972V20.6198V20.7425V20.8654V20.9883V21.1113V21.2344V21.3576V21.481V21.6044V21.7279V21.8515V21.9752V22.099V22.2229V22.3468V22.4709V22.595V22.7192V22.8435V22.9679V23.0923V23.2169V23.3415V23.4661V23.5909V23.7157V23.8406V23.9655V24.0905V24.2156V24.3408V24.466V24.5912V24.7166V24.8419V24.9674V25.0929V25.2184V25.344V25.4696V25.5953V25.7211V25.8468V25.9726V26.0985V26.2244V26.3503V26.4763V26.6023V26.7284V26.8544V26.9806V27.1067V27.2328V27.359V27.4852V27.6115V27.7377V27.864V27.9903V28.1166V28.243V28.3693V28.4956V28.622V28.7484V28.8748V29.0012V29.1275V29.2539V29.3803V29.5067V29.6331V29.7595V29.8859V30.0123V30.1387V30.265V30.3914V30.5177V30.6441V30.7704V30.8967V31.023V31.1492V31.2754V31.4017V31.5279V31.654V31.7802V31.9063V32.0323V32.1584V32.2844V32.4104V32.5363V32.6622V32.7881V32.9139V33.0397V33.1654V33.2911V33.4168V33.5424V33.6679V33.7934V33.9188V34.0442V34.1696V34.2948V34.42V34.5452V34.6703V34.7953V34.9203V35.0452V35.17V35.2947V35.4194V35.544V35.6686V35.793V35.9174V36.0417V36.1659V36.2901V36.4141V36.5381V36.662V36.7858V36.9095V37.0331V37.1566V37.2801V37.4034V37.5266V37.6498V37.7728V37.8957V38.0186V38.1413V38.2639V38.3864V38.5088V38.6311V38.7533V38.8754V38.9973V39.1191V39.2408V39.3624V39.4839V39.6053V39.7265V39.8476V39.9685V40.0894V40.2101V40.3307V40.4511V40.5714V40.6916V40.8116V40.9315V41.0512V41.1708V41.2903V41.4096V41.5288V41.6478V41.7667V41.8854V42.004V42.1224V42.2406V42.3587V42.4766V42.5944V42.712V42.8294V42.9467V43.0638V43.1808V43.2975V43.4141V43.5306V43.6468V43.7629V43.8788V43.9945V44.11V44.2254V44.3406V44.4555V44.5703V44.6849V44.7993V44.9136V45.0276V45.1414V45.2551V45.3685V45.4818V45.5948V45.7076V45.8203V45.9327V46.0449V46.1569V46.2687V46.3803V46.4917V46.6029V46.7138V46.8245V46.9351V47.0453V47.1554V47.2653V47.3749V47.4843V47.5934V47.7024V47.8111V47.9195V48.0278V48.1358V48.2435V48.3511V48.4583V48.5654V48.6722V48.7787V48.885V48.9911V49.0969V49.2024V49.3078V49.4128V49.5176V49.6221V49.7264V49.8304V49.9342V50.0377V50.1409V50.2439V50.3465V50.449V50.5511V50.653V50.7546V50.8559V50.957V51.0578V51.1582V51.2585V51.3584V51.458V51.5574V51.6565V51.7552V51.8537V51.9519V52.0498V52.1474V52.2448V52.3418V52.4385V52.5349V52.631V52.7268V52.8223V52.9175V53.0124V53.1069V53.2012V53.2952V53.3888V53.4821V53.5751V53.6678V53.7601V53.8521V53.9439V54.0352V54.1263V54.217V54.3074V54.3975V54.4872V54.5766V54.5932C48.6675 50.7584 38.3441 46.5962 28.2733 43.3173C18.0609 39.9923 7.95384 37.5244 1.66016 37.2769V23.2006Z" fill="none" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.7703 0.181641C42.7428 10.2013 12.6838 22.2249 0.660156 22.2249V38.2564C3.19182 38.2564 8.06936 39.0833 11.8822 39.8595L6.27117 53.4863C5.78047 56.4517 7.78661 59.2534 10.752 59.7441C13.7174 60.2349 16.5192 58.2287 17.0099 55.2633L19.8979 41.4627L19.6442 39.9086L19.5098 39.51L41.2658 9.45105H45.2737L21.5122 42.2809C34.1261 45.936 48.342 51.4756 56.7703 56.2918V28.5373L42.6898 47.8979H38.682L55.0188 25.106L56.7703 28.386V11.4099L32.9349 43.1831H28.9271L55.4659 7.44562L56.7703 10.1451V0.181641ZM25.4388 18.068H21.4309L12.6838 31.1271V37.1106L25.4388 18.068Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9531 28.002C64.9531 29.1368 65.919 30.0566 67.1105 30.0566L77.178 30.0566C78.3695 30.0566 79.3353 29.1368 79.3353 28.002C79.3353 26.8673 78.3695 25.9474 77.178 25.9474L67.1105 25.9474C65.919 25.9474 64.9531 26.8673 64.9531 28.002Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6036 16.1736C64.0749 17.2789 65.353 17.7927 66.4582 17.3214L75.7969 13.3389C76.9021 12.8675 77.416 11.5895 76.9447 10.4843C76.4734 9.37908 75.1953 8.86521 74.0901 9.33653L64.7514 13.3191C63.6462 13.7904 63.1323 15.0684 63.6036 16.1736Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6036 39.4919C64.0749 38.3867 65.353 37.8728 66.4582 38.3441L75.7969 42.3267C76.9021 42.798 77.416 44.076 76.9447 45.1812C76.4734 46.2864 75.1953 46.8003 74.0901 46.329L64.7514 42.3464C63.6462 41.8751 63.1323 40.5971 63.6036 39.4919Z" stroke="none"/>
+</symbol>
+
+<symbol id="projets" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 7C4 5.34315 5.34315 4 7 4C8.65685 4 10 5.34315 10 7V24C10 25.6569 8.65685 27 7 27C5.34315 27 4 25.6569 4 24V7ZM7 26C8.10457 26 9 25.1046 9 24C9 22.8954 8.10457 22 7 22C5.89543 22 5 22.8954 5 24C5 25.1046 5.89543 26 7 26Z"/>
+</mask>
+<path d="M7 3C4.79086 3 3 4.79086 3 7H5C5 5.89543 5.89543 5 7 5V3ZM11 7C11 4.79086 9.20914 3 7 3V5C8.10457 5 9 5.89543 9 7H11ZM11 24V7H9V24H11ZM7 28C9.20914 28 11 26.2091 11 24H9C9 25.1046 8.10457 26 7 26V28ZM3 24C3 26.2091 4.79086 28 7 28V26C5.89543 26 5 25.1046 5 24H3ZM3 7V24H5V7H3ZM8 24C8 24.5523 7.55228 25 7 25V27C8.65685 27 10 25.6569 10 24H8ZM7 23C7.55228 23 8 23.4477 8 24H10C10 22.3431 8.65685 21 7 21V23ZM6 24C6 23.4477 6.44771 23 7 23V21C5.34315 21 4 22.3431 4 24H6ZM7 25C6.44772 25 6 24.5523 6 24H4C4 25.6569 5.34315 27 7 27V25Z" stroke="none" mask="url(#path-1-inside-1)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 27H10L24 7H25.5L11.5 27H14L27.5 8L28 9.5L15.5 27H18L27.5 14L28 15.5L19.5 27H22L27.5 19.5L28 21L23.5 27H28V21V15.5V9.5V6H9.82929C9.93985 6.31278 10 6.64936 10 7V9L11.5 7H13L10 11.0909V14.4412L15.5 7H17L10 16.5789V21.0909L20 7H21.5L10 23.56V24C10 25.6569 8.65685 27 7 27Z" stroke="none"/>
+<path d="M7 27H28V6.5H9.95852C9.9858 6.6626 10 6.82964 10 7V7.5H27V26H9.23611C8.68679 26.6137 7.8885 27 7 27Z" stroke="none"/>
+<path d="M9 24C9 25.1046 8.10457 26 7 26C5.89543 26 5 25.1046 5 24C5 22.8954 5.89543 22 7 22C8.10457 22 9 22.8954 9 24Z" stroke="none"/>
+</symbol>
+
+<symbol id="ressources" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 25V13.0495C7.32281 13.9728 11.7651 14.5 16.5 14.5C20.828 14.5 24.9112 14.0595 28.5 13.2789V25C28.5 25.2761 28.2761 25.5 28 25.5H4C3.72386 25.5 3.5 25.2761 3.5 25Z" fill="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 6H13V8H20V6ZM13 4C11.8954 4 11 4.89543 11 6V9H22V6C22 4.89543 21.1046 4 20 4H13Z" stroke="none"/>
+<path d="M28.5 13.2602C27.6168 13.4803 26.8068 13.7326 26.0024 13.9831L25.9955 13.9852C24.3831 14.4874 22.7659 14.9905 20.5 15.2722V15C20.5 14.1716 19.8284 13.5 19 13.5H14C13.1716 13.5 12.5 14.1716 12.5 15V15.2709C9.84798 14.949 7.85358 14.3349 5.87723 13.7256L5.87212 13.724C5.09326 13.4839 4.31292 13.2433 3.5 13.0242V9C3.5 8.72386 3.72386 8.5 4 8.5H28C28.2761 8.5 28.5 8.72386 28.5 9V13.2602Z"/>
+<path d="M3 13.4095C3.7817 13.6107 4.59178 13.795 5.42722 13.9611L3 17.4286V13.4095Z" stroke="none"/>
+<path d="M29 13.6541V16L22 26L18.5 26L26.8278 14.1031C27.5713 13.9674 28.296 13.8174 29 13.6541Z" stroke="none"/>
+<path d="M29 18.1429V23.1429L27 26H23.5L29 18.1429Z" stroke="none"/>
+<path d="M28.7003 25.7138C28.788 25.6278 28.8598 25.5259 28.9112 25.4126L28.7003 25.7138Z" stroke="none"/>
+<path d="M21.3318 14.8118C22.6365 14.7087 23.9059 14.5647 25.1318 14.3832L17 26H13.5L19.1037 17.9947C19.6073 17.9428 20 17.5173 20 17V16.7143L21.3318 14.8118Z" stroke="none"/>
+<path d="M17.6 18L12 26H8.50001L14.1 18H17.6Z" stroke="none"/>
+<path d="M13.0602 17.3426L7.00001 26H4C3.84543 26 3.69905 25.9649 3.56839 25.9023L11.35 14.7858C11.8954 14.8318 12.4472 14.8707 13.0047 14.9022C13.0016 14.9344 13 14.967 13 15V17C13 17.1203 13.0213 17.2357 13.0602 17.3426Z" stroke="none"/>
+<path d="M6.75572 14.2061C7.78653 14.3818 8.8514 14.5304 9.94511 14.6498L3 24.5714V19.5714L6.75572 14.2061Z" stroke="none"/>
+<rect x="13.5" y="14.5" width="6" height="3" rx="0.5" fill="none"/>
+</symbol>
+
+<symbol id="infos" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 25.5H9.44949C10.0978 24.8647 10.5 23.9793 10.5 23V5.5H25.5V23C25.5 24.3807 24.3807 25.5 23 25.5Z" fill="none"/>
+<rect x="12" y="16" width="12" height="1" rx="0.5" stroke="none"/>
+<rect x="12" y="19" width="12" height="1" rx="0.5" stroke="none"/>
+<rect x="12" y="22" width="12" height="1" rx="0.5" stroke="none"/>
+<rect x="12" y="8" width="12" height="6" rx="1" stroke="none"/>
+<path d="M11 12V13.5L5.00001 20.5V17.2273L9.60001 12H11Z" stroke="none"/>
+<path d="M5.00001 22.5V22.2273L11 15.4091L11 18.5L6 24.5C5.48214 24.0507 5.00001 23.1722 5.00001 22.5Z" stroke="none"/>
+<path d="M7.06819 24.8771C7.36151 24.9569 7.67471 25 8.00001 25C9.65686 25 11 23.8807 11 22.5V20.4091L7.06819 24.8771Z" stroke="none"/>
+<path d="M8 12H5.00001L5 15.5L8 12Z" stroke="none"/>
+<path d="M5.5 12.5H10.5V23C10.5 24.3807 9.38071 25.5 8 25.5C6.61929 25.5 5.5 24.3807 5.5 23V12.5Z" fill="none"/>
+</symbol>
+
+<symbol id="formations" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 28V24.4C3 22.1088 4.1007 20.0762 5.79995 18.7998C4.80938 17.7598 4.2 16.3513 4.2 14.8C4.2 11.5967 6.79675 9 10 9C13.2033 9 15.8 11.5967 15.8 14.8C15.8 16.3513 15.1906 17.7598 14.2001 18.7998C15.8993 20.0762 17 22.1088 17 24.4V28H3ZM13.4307 19.4769C13.1256 19.2639 12.7998 19.0785 12.4568 18.9244C12.7774 18.7331 13.0738 18.5054 13.3403 18.2471C14.2405 17.3746 14.8 16.1527 14.8 14.8C14.8 12.149 12.651 10 10 10C7.34903 10 5.2 12.149 5.2 14.8C5.2 16.1527 5.75951 17.3746 6.65971 18.2471C6.92623 18.5054 7.2226 18.7331 7.54316 18.9244C7.20024 19.0785 6.87441 19.2639 6.56931 19.4769C5.01609 20.5613 4 22.362 4 24.4V27H16V24.4C16 22.362 14.9839 20.5613 13.4307 19.4769Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6H30V22H16.5777C16.3879 21.4799 16.1381 20.9887 15.8369 20.5348L25.6379 7H24.1379L15.0488 19.5516C14.7868 19.2788 14.503 19.0273 14.2001 18.7998C15.1906 17.7598 15.8 16.3513 15.8 14.8C15.8 14.4589 15.7705 14.1246 15.7141 13.7996L20.6379 7H19.1379L15.2607 12.3543C14.8403 11.4515 14.1943 10.675 13.3952 10.0971L15.6379 7H14.1379L12.3353 9.48933C11.6208 9.17468 10.8308 9 10 9C9.70926 9 9.42352 9.02139 9.14426 9.06269L10.6379 7H9.13793L7.14742 9.74881C5.70291 10.5663 4.64387 11.9856 4.3108 13.666L3 15.4762V17.5476L4.28201 15.7772C4.46929 16.8805 4.96816 17.8775 5.68402 18.6744L5.28319 19.228C4.45784 19.9811 3.81311 20.9293 3.4223 22H2V6ZM29 7.19048V9.2619L20.5 21H19L29 7.19048ZM25.5 21H24L29 14.0952V16.1667L25.5 21ZM5.63793 7L3 10.6429V8.57143L4.13793 7H5.63793Z" stroke="none"/>
+</symbol>
+
+<symbol id="etudes" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.722 26.2329L22.4916 21.0959C24.0154 19.2877 24.9215 16.9452 24.9215 14.4384C24.8803 8.68493 20.2265 4 14.4607 4C8.69498 4 4 8.68493 4 14.4384C4 20.1918 8.69498 24.8767 14.4607 24.8767C16.9318 24.8767 19.2381 24.0137 21.009 22.5753L26.2394 27.7123C26.4453 27.9178 26.6924 28 26.9807 28C27.2278 28 27.5161 27.9178 27.722 27.7123C28.0927 27.3014 28.0927 26.6438 27.722 26.2329ZM6.0592 14.4384C6.0592 9.79452 9.80695 6.05479 14.4607 6.05479C19.1145 6.05479 22.8623 9.79452 22.8623 14.4384C22.8623 19.0822 19.1145 22.8219 14.4607 22.8219C9.80695 22.8219 6.0592 19.0411 6.0592 14.4384Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7457 5.3282C14.0022 5.11446 13.2157 5 12.4015 5C12.2296 5 12.0588 5.00511 11.8895 5.01518L10.4509 6.97689C11.5862 6.37483 12.878 6.02499 14.2521 6.00129L14.7457 5.3282ZM13.0585 7.62894C9.87909 8.24863 7.5 11.0292 7.5 14.3836C7.5 14.6426 7.51448 14.8985 7.5427 15.1504L13.0585 7.62894ZM7.97683 16.8961L14.8566 7.51456C15.8686 7.57953 16.8194 7.85975 17.6638 8.30994L9.59266 19.316C8.89414 18.6378 8.33923 17.8141 7.97683 16.8961ZM6.34942 16.7776C6.12204 16.018 6 15.2141 6 14.3836C6 13.8626 6.04717 13.353 6.13749 12.8588L4.25314 15.4284C4.49144 16.3727 4.89089 17.2551 5.42099 18.0437L6.34942 16.7776ZM6.96335 18.2781C7.41071 19.1257 7.99942 19.8888 8.69862 20.5352L8.49887 20.8076C7.68288 20.3787 6.94656 19.8199 6.31708 19.1594L6.96335 18.2781ZM17.141 6.45253C16.8055 6.22416 16.4523 6.01946 16.084 5.84081L15.874 6.12727C16.3089 6.20341 16.7322 6.31273 17.141 6.45253ZM13.3275 21.1841C12.3621 21.0332 11.464 20.6823 10.6762 20.1762L18.8131 9.08041C19.5054 9.65324 20.0826 10.359 20.5064 11.159C20.5221 11.2167 20.5373 11.2746 20.5518 11.3328L13.3275 21.1841ZM21.157 12.9614C21.2528 13.4201 21.3031 13.8957 21.3031 14.3836C21.3031 17.9947 18.5458 20.9409 15.0011 21.2418L21.157 12.9614ZM9.9145 5.37067C6.48201 6.42403 4 9.60441 4 13.3836L4.00016 13.4357L9.9145 5.37067Z" stroke="none"/>
+</symbol>
+
+<symbol id="dossiers" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 9C2 7.89543 2.89543 7 4 7H8C9.10457 7 10 7.89543 10 9V10H27C27.5523 10 28 10.4477 28 11V13H6.32973C5.84861 13 5.43568 13.3426 5.34691 13.8155L3.28171 24.8155C3.16616 25.431 3.63831 26 4.26454 26H3C2.44772 26 2 25.5523 2 25V9Z" stroke="none"/>
+<path d="M5.72708 13.8721C5.78513 13.6528 5.98357 13.5 6.21044 13.5H29.1416C29.4697 13.5 29.7089 13.8107 29.6249 14.1279L26.7136 25.1279C26.6555 25.3472 26.4571 25.5 26.2302 25.5H3.2991C2.97097 25.5 2.73179 25.1893 2.81574 24.8721L5.72708 13.8721Z" fill="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.2607 17.2341L30.049 14.2559C30.1737 13.7846 29.9418 13.3205 29.5453 13.113L20.8378 26H23.3378L29.2607 17.2341ZM24.8378 26H26.1709C26.6247 26 27.0215 25.6945 27.1376 25.2559L28.2948 20.8837L24.8378 26ZM25.6216 13H28.1216L19.3378 26H16.8378L25.6216 13ZM24.1216 13H21.6216L12.8378 26H15.3378L24.1216 13ZM17.6216 13H20.1216L11.3378 26H8.83784L17.6216 13ZM16.1216 13H13.6216L4.83784 26H7.33784L16.1216 13ZM9.62162 13H12.1216L3.33784 26H3.20521C2.57898 26 2.10683 25.431 2.22239 24.8155L2.44717 23.6182L9.62162 13ZM8.12162 13H5.27041C5.26124 13 5.2521 13.0001 5.24299 13.0004L4.13187 14.6448L3.02434 20.544L8.12162 13Z" stroke="none"/>
+</symbol>
+
+</svg>
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 75dd41e99e0493162e4156be96636a3c079c64a3..7b72d6a99b74d8253d4dd1dd61560951700cd455 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -7,7 +7,7 @@ $grey-1: #333333;
 $grey-2: #4f4f4f;
 $grey-3: #828282;
 $grey-4: #bdbdbd;
-$grey-6: #f2f2f2;
+$grey-6: #f8f8f8;
 /* form colors */
 $green-1: #47c562;
 /* Status colors */
diff --git a/src/assets/scss/_layout.scss b/src/assets/scss/_layout.scss
index 94ebedd43f510c2edad4ae2edb0202c2c49bc8d9..2a4a34f6e6a7f63f32a0113379bd9ccc4c302c31 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -3,3 +3,4 @@ $footer-height: 56px;
 $header-height-phone: 70px;
 $footer-height-phone: 75px;
 $progressBar-height: 50px;
+$header-post-height: 180px;
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index d5f92bac1c01e01d894fd86e494968119698381b..b4067a7947b1711598343a1f9b8a2f991bced8a3 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -11,6 +11,8 @@ $font-size-medium: 1.25em; // 20px
 $font-size-xmedium: 1.375em; // 22px
 
 $font-size-large: 1.625em; // 26px
+$font-size-xlarge: 1.75em; // 28px
+$font-size-xxlarge: 1.875em; // 28px
 
 html,
 body,
@@ -43,6 +45,20 @@ h6,
   font-size: $font-size-small;
 }
 
+@mixin cn-bold-30 {
+  font-family: $title-font;
+  font-style: normal;
+  font-weight: bold;
+  font-size: $font-size-xxlarge;
+}
+
+@mixin cn-bold-28 {
+  font-family: $title-font;
+  font-style: normal;
+  font-weight: bold;
+  font-size: $font-size-xlarge;
+}
+
 @mixin cn-bold-26 {
   font-family: $title-font;
   font-style: normal;
diff --git a/src/index.html b/src/index.html
index 1dfbff37e98e160421dc47c16ab7c8bb99dff3ef..17a60d8dc5ca086b2bc6e590f6f49aa944a87ad5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,6 +5,14 @@
     <title>Réseau des Acteurs de la Médiation</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta property="og:title" content="Réseau des Acteurs de la Médiation" />
+    <meta
+      property="og:description"
+      content="Plateforme à destination des acteurs de l'inclusion numérique de la métropole de Lyon"
+    />
+    <meta property="og:image" content="https://resin.grandlyon.com/assets/logos/logo_1200.svg" />
+    >
+
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css" />
     <link
diff --git a/src/styles.scss b/src/styles.scss
index 3e61ddf25ce08ffc657451fb5d0d6c85baa59b9b..af9bc276813e243bbb1b06f9a424dd65c48d93cd 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -61,7 +61,6 @@ a {
   margin: 0;
   padding-top: 30px;
   width: 100%;
-  height: 100%;
   &.medium-pt {
     padding: 25px 0 30px 0;
   }