diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2dee758df2b25671d7033362cab678fa556d330c..3c346554556ea67370b117fc815102c599df4510 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,3 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 <app-page-head></app-page-head>
+<app-seminar-cards></app-seminar-cards>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f4e11fe205190ff5e792e6be472a329eb0a47291..4860f007aa6eda797d6e117e1a2dccb8f9c4126b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,13 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { PageHeadComponent } from './components/page-head/page-head.component';
-import { SidebarComponent } from './components/sidebar/sidebar.component';
-import { AdvancedSearchComponent } from './components/advanced-search/advanced-search.component';
+import { PageHeadComponent } from './components/head/page-head/page-head.component';
+import { SeminarCardsComponent } from './components/body/seminar-cards/seminar-cards.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, PageHeadComponent, SidebarComponent, AdvancedSearchComponent],
+  imports: [RouterOutlet, PageHeadComponent, SeminarCardsComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
diff --git a/src/app/components/body/seminar-cards/card-display/card-display.component.html b/src/app/components/body/seminar-cards/card-display/card-display.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..31178ccd513d2de3f31a236b130bae2f97d7741b
--- /dev/null
+++ b/src/app/components/body/seminar-cards/card-display/card-display.component.html
@@ -0,0 +1,12 @@
+<div class="card-display" *ngIf="isCardVisible">
+  <div id="close-btn" (click)="toggleDisplayCard()">
+    <i class="fas fa-times"></i>
+  </div>
+  <div id="displayed">
+    <h2>{{title}}</h2>
+    <h3>{{place}}</h3>
+    <h3>{{date}}</h3>
+    <p onload="recieveData()">{{content}}</p>
+  </div>
+</div>
+<div id="overlay" *ngIf="isCardVisible"></div>
diff --git a/src/app/components/body/seminar-cards/card-display/card-display.component.scss b/src/app/components/body/seminar-cards/card-display/card-display.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3f2075b742cff4fe263f90dbe735ffe0b5abc67d
--- /dev/null
+++ b/src/app/components/body/seminar-cards/card-display/card-display.component.scss
@@ -0,0 +1,28 @@
+.card-display{
+  position: fixed;
+  background-color: white;
+  z-index: 10000;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 50px;
+  width: 70%;
+}
+#close-btn {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  cursor: pointer;
+  background-color: white;
+  font-size: 30px;
+  border: none;
+}
+#overlay{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* fond sombre semi-transparent */
+  z-index: 9999; /* positionne l'overlay au-dessus de tous les autres éléments de la page */
+}
diff --git a/src/app/components/body/seminar-cards/card-display/card-display.component.spec.ts b/src/app/components/body/seminar-cards/card-display/card-display.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5f783d6d266689e14dc4ccd3a74554532d119933
--- /dev/null
+++ b/src/app/components/body/seminar-cards/card-display/card-display.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardDisplayComponent } from './card-display.component';
+
+describe('CardDisplayComponent', () => {
+  let component: CardDisplayComponent;
+  let fixture: ComponentFixture<CardDisplayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardDisplayComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CardDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/body/seminar-cards/card-display/card-display.component.ts b/src/app/components/body/seminar-cards/card-display/card-display.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0e6f7d25408011abac6414e2c6ab3e86238eee4b
--- /dev/null
+++ b/src/app/components/body/seminar-cards/card-display/card-display.component.ts
@@ -0,0 +1,36 @@
+import { Component, Input, OnInit} from '@angular/core';
+import { NgIf, CommonModule} from '@angular/common';
+import { DataService } from '../../../../services/data.service';
+
+@Component({
+  selector: 'app-card-display',
+  standalone: true,
+  imports: [NgIf, CommonModule],
+  templateUrl: './card-display.component.html',
+  styleUrl: './card-display.component.scss'
+})
+export class CardDisplayComponent implements OnInit {
+  title!: String;
+  place!: String;
+  date!: String;
+  content!: String;
+
+  receivedData: String[] = [];
+  isCardVisible: boolean = false;
+  constructor(private dataService: DataService) {}
+  toggleDisplayCard(){
+    this.dataService.toggleDisplayCard();
+  }
+  ngOnInit(): void {
+    this.dataService.isCardOpen$.subscribe(isOpen => {
+      this.isCardVisible = isOpen;
+    });
+    this.dataService.getData().subscribe(data => {
+      this.receivedData = data;
+      this.title = this.receivedData[0];
+      this.place = this.receivedData[1];
+      this.date = this.receivedData[2];
+      this.content = this.receivedData[3];
+    });
+  }
+}
diff --git a/src/app/components/body/seminar-cards/card/card.component.html b/src/app/components/body/seminar-cards/card/card.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..2ebf480c395c1ebdee7b6609384d7fd1e788a6b5
--- /dev/null
+++ b/src/app/components/body/seminar-cards/card/card.component.html
@@ -0,0 +1,10 @@
+<div class="card" (click) = "cardClick()">
+  <div id="card-head">
+    <h2 id="title">{{cardComponent.title}}</h2>
+    <h3 id="place">{{cardComponent.place}}</h3>
+    <h3 id="date">{{cardComponent.date}}</h3>
+  </div>
+  <div id="card-body">
+    <p id="content">{{cardComponent.content}}</p>
+  </div>
+</div>
diff --git a/src/app/components/body/seminar-cards/card/card.component.scss b/src/app/components/body/seminar-cards/card/card.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..49faa6e8bc8b0d40a1a6beff6d3321283dd2541b
--- /dev/null
+++ b/src/app/components/body/seminar-cards/card/card.component.scss
@@ -0,0 +1,31 @@
+.card{
+  border: 1px solid black;
+  padding: 10px;
+  margin: 20px;
+  cursor: pointer;
+}
+h2,h3,p{
+  word-wrap: break-word;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+}
+h2, h3{
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: bold;
+  font-size: x-large;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+h2{
+  text-align: center;
+  border-bottom: 1px solid black;
+  padding-bottom: 5px;
+}
+p{
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
diff --git a/src/app/components/body/seminar-cards/card/card.component.spec.ts b/src/app/components/body/seminar-cards/card/card.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bdc1eded87c591c90ad01b241d4577e7a4942090
--- /dev/null
+++ b/src/app/components/body/seminar-cards/card/card.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/body/seminar-cards/card/card.component.ts b/src/app/components/body/seminar-cards/card/card.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ad5eb594ef511233917f120a179135afa04063a9
--- /dev/null
+++ b/src/app/components/body/seminar-cards/card/card.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, OnInit} from '@angular/core';
+import { DataService } from '../../../../services/data.service';
+import { Card } from '../../../../models/card.model';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  imports: [],
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.scss'
+})
+export class CardComponent implements OnInit{
+  data: String[] = [];
+  @Input() cardComponent!: Card;
+
+  constructor(public dataService:DataService) {
+  }
+  ngOnInit(): void {
+    this.data.push( this.cardComponent.title);
+    this.data.push(this.cardComponent.place);
+    this.data.push(this.cardComponent.date);
+    this.data.push(this.cardComponent.content);
+  }
+
+  cardClick(): void{
+    if(this.data.length != 0){
+      this.dataService.emitData(this.data);
+    }
+    this.dataService.toggleDisplayCard();
+  }
+}
diff --git a/src/app/components/body/seminar-cards/seminar-cards.component.html b/src/app/components/body/seminar-cards/seminar-cards.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..2cccd7c8e3a89a8857620e286debec6734e42311
--- /dev/null
+++ b/src/app/components/body/seminar-cards/seminar-cards.component.html
@@ -0,0 +1,10 @@
+<div class="seminar-cards">
+  <h1>SÉMINAIRES 2024</h1>
+  <div class="cards">
+    <app-card-display ></app-card-display>
+    <app-card [cardComponent]="card1"></app-card>
+    <app-card [cardComponent]="card2"></app-card>
+    <app-card [cardComponent]="card3"></app-card>
+    <app-card [cardComponent]="card4"></app-card>
+  </div>
+</div>
diff --git a/src/app/components/body/seminar-cards/seminar-cards.component.scss b/src/app/components/body/seminar-cards/seminar-cards.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eed8027c4939864ce6434b27b44c28912b014851
--- /dev/null
+++ b/src/app/components/body/seminar-cards/seminar-cards.component.scss
@@ -0,0 +1,20 @@
+.seminar-cards{
+  margin: 40px;
+}
+h1{
+  color: white;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 3.2em;
+  font-weight: bold;
+  padding: 30px;
+  background-color: rgb(25, 100, 200);
+  display: inline-block;
+}
+.cards{
+  margin: 30px;
+  display: flex;
+  flex-wrap: wrap;
+}
+app-card{
+  width: 33%;
+}
diff --git a/src/app/components/body/seminar-cards/seminar-cards.component.spec.ts b/src/app/components/body/seminar-cards/seminar-cards.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b409ab94fddf1fd204b48ec23d203568167a4b9c
--- /dev/null
+++ b/src/app/components/body/seminar-cards/seminar-cards.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SeminarCardComponent } from './seminar-cards.component';
+
+describe('SeminarCardComponent', () => {
+  let component: SeminarCardComponent;
+  let fixture: ComponentFixture<SeminarCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SeminarCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SeminarCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/body/seminar-cards/seminar-cards.component.ts b/src/app/components/body/seminar-cards/seminar-cards.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc741743847169fa60c18da811e6c49492d2ee5f
--- /dev/null
+++ b/src/app/components/body/seminar-cards/seminar-cards.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit} from '@angular/core';
+import { NgIf, CommonModule} from '@angular/common';
+import { CardComponent } from './card/card.component';
+import { CardDisplayComponent } from './card-display/card-display.component';
+import { Card } from '../../../models/card.model';
+import { DataService } from '../../../services/data.service';
+
+@Component({
+  selector: 'app-seminar-cards',
+  standalone: true,
+  imports: [CardComponent, CardDisplayComponent, NgIf, CommonModule],
+  templateUrl: './seminar-cards.component.html',
+  styleUrl: './seminar-cards.component.scss'
+})
+
+export class SeminarCardsComponent implements OnInit{
+  constructor(private dataService: DataService){}
+  card1!:Card;
+  card2!:Card;
+  card3!:Card;
+  card4!:Card;
+  ngOnInit(): void {
+    this.card1 = new Card(
+      "Le meilleur titre",
+      "New York City",
+      "14h00",
+      "the description of the best title ever existed in the planet of the universe calledd EAAARTH"
+    );
+    this.card2 = new Card(
+      "Le meilleur titre 2",
+      "New York City 2",
+      "14h00 2",
+      "the description of the best title ever existed in the planet of the universe calledd EAAARTH 2"
+    );
+    this.card3 = new Card(
+      "Le meilleur titre 3",
+      "New York City 3",
+      "14h00 3",
+      "the description of the best title ever existed in the planet of the universe calledd EAAARTH 3"
+    );
+    this.card4 = new Card(
+      "Le meilleur titre 4",
+      "New York City 4",
+      "14h00 4",
+      "the description of the best title ever existed in the planet of the universe calledd EAAARTH 4"
+    );
+  }
+}
diff --git a/src/app/components/advanced-search/advanced-search.component.html b/src/app/components/head/advanced-search/advanced-search.component.html
similarity index 100%
rename from src/app/components/advanced-search/advanced-search.component.html
rename to src/app/components/head/advanced-search/advanced-search.component.html
diff --git a/src/app/components/advanced-search/advanced-search.component.scss b/src/app/components/head/advanced-search/advanced-search.component.scss
similarity index 100%
rename from src/app/components/advanced-search/advanced-search.component.scss
rename to src/app/components/head/advanced-search/advanced-search.component.scss
diff --git a/src/app/components/advanced-search/advanced-search.component.spec.ts b/src/app/components/head/advanced-search/advanced-search.component.spec.ts
similarity index 100%
rename from src/app/components/advanced-search/advanced-search.component.spec.ts
rename to src/app/components/head/advanced-search/advanced-search.component.spec.ts
diff --git a/src/app/components/advanced-search/advanced-search.component.ts b/src/app/components/head/advanced-search/advanced-search.component.ts
similarity index 88%
rename from src/app/components/advanced-search/advanced-search.component.ts
rename to src/app/components/head/advanced-search/advanced-search.component.ts
index fe779c6a6150ec1bb2073eb0b38125ceab02606b..604d7dc8631193a969e294fe395d74904053060c 100644
--- a/src/app/components/advanced-search/advanced-search.component.ts
+++ b/src/app/components/head/advanced-search/advanced-search.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { AdvancedSearchService } from '../../services/advanced-search.service';
+import { AdvancedSearchService } from '../../../services/advanced-search.service';
 import { NgIf, CommonModule } from '@angular/common';
 
 @Component({
diff --git a/src/app/components/page-head/page-head.component.html b/src/app/components/head/page-head/page-head.component.html
similarity index 82%
rename from src/app/components/page-head/page-head.component.html
rename to src/app/components/head/page-head/page-head.component.html
index 7c4ca776ee1a9ed143925fc77cc4cf2767b2bf4e..fd785cea767da736cb342710cdd1b7832bc56aa2 100644
--- a/src/app/components/page-head/page-head.component.html
+++ b/src/app/components/head/page-head/page-head.component.html
@@ -1,4 +1,3 @@
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 <div id="head-item">
   <button id="slide" (click) = "slideClick()"><i class="fas fa-bars"></i></button>
   <app-sidebar></app-sidebar>
diff --git a/src/app/components/page-head/page-head.component.scss b/src/app/components/head/page-head/page-head.component.scss
similarity index 98%
rename from src/app/components/page-head/page-head.component.scss
rename to src/app/components/head/page-head/page-head.component.scss
index 8ad9ab885b5cb569283c690063fd092940274faa..c08ce75cf3ff92f4a5a357b78cdbfe897f5e90e1 100644
--- a/src/app/components/page-head/page-head.component.scss
+++ b/src/app/components/head/page-head/page-head.component.scss
@@ -1,5 +1,5 @@
 #head-item{
-  position: absolute;
+  position: relative;
   top: 0;
   background-color: #4A8DB7;
   width: 100%;
diff --git a/src/app/components/page-head/page-head.component.spec.ts b/src/app/components/head/page-head/page-head.component.spec.ts
similarity index 100%
rename from src/app/components/page-head/page-head.component.spec.ts
rename to src/app/components/head/page-head/page-head.component.spec.ts
diff --git a/src/app/components/page-head/page-head.component.ts b/src/app/components/head/page-head/page-head.component.ts
similarity index 81%
rename from src/app/components/page-head/page-head.component.ts
rename to src/app/components/head/page-head/page-head.component.ts
index 19c470df08e712cea19677b3bf92535fac52e5e4..317070921631fa1344ec355e652a4212f44ded2e 100644
--- a/src/app/components/page-head/page-head.component.ts
+++ b/src/app/components/head/page-head/page-head.component.ts
@@ -1,9 +1,9 @@
 import { Component, Output, EventEmitter } from '@angular/core';
-import { AppComponent } from '../../app.component';
+import { AppComponent } from '../../../app.component';
 import { SidebarComponent } from '../sidebar/sidebar.component';
-import { SidebarService } from '../../services/sidebar.service';
+import { SidebarService } from '../../../services/sidebar.service';
 import { AdvancedSearchComponent } from '../advanced-search/advanced-search.component';
-import { AdvancedSearchService } from '../../services/advanced-search.service';
+import { AdvancedSearchService } from '../../../services/advanced-search.service';
 
 
 @Component({
diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/head/sidebar/sidebar.component.html
similarity index 100%
rename from src/app/components/sidebar/sidebar.component.html
rename to src/app/components/head/sidebar/sidebar.component.html
diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/head/sidebar/sidebar.component.scss
similarity index 100%
rename from src/app/components/sidebar/sidebar.component.scss
rename to src/app/components/head/sidebar/sidebar.component.scss
diff --git a/src/app/components/sidebar/sidebar.component.spec.ts b/src/app/components/head/sidebar/sidebar.component.spec.ts
similarity index 100%
rename from src/app/components/sidebar/sidebar.component.spec.ts
rename to src/app/components/head/sidebar/sidebar.component.spec.ts
diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/head/sidebar/sidebar.component.ts
similarity index 89%
rename from src/app/components/sidebar/sidebar.component.ts
rename to src/app/components/head/sidebar/sidebar.component.ts
index 205b2b131c0cc9250b55387ab9201003c5b4928a..9a602d0a098e3258916c010d2ff1479518254360 100644
--- a/src/app/components/sidebar/sidebar.component.ts
+++ b/src/app/components/head/sidebar/sidebar.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { SidebarService } from '../../services/sidebar.service';
+import { SidebarService } from '../../../services/sidebar.service';
 import { NgIf, CommonModule } from '@angular/common';
 
 
diff --git a/src/app/models/card.model.ts b/src/app/models/card.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..753b128294fd20301399e0334f9b734cd9e30ad8
--- /dev/null
+++ b/src/app/models/card.model.ts
@@ -0,0 +1,8 @@
+export class Card {
+  constructor (
+    public title:String,
+    public place:String,
+    public date:String,
+    public content:String
+  ){}
+}
diff --git a/src/app/services/data.service.ts b/src/app/services/data.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f3e6f754e6343e424d84f9de2058310ee8fa8474
--- /dev/null
+++ b/src/app/services/data.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+  private dataSubject = new Subject<String[]>();
+  private isCardOpenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public isCardOpen$: Observable<boolean> = this.isCardOpenSubject.asObservable();
+
+  constructor() { }
+
+  toggleDisplayCard(): void {
+    const currentValue = this.isCardOpenSubject.getValue();
+    this.isCardOpenSubject.next(!currentValue);
+  }
+  emitData(data: String[]) {
+    this.dataSubject.next(data);
+  }
+
+  getData() {
+    return this.dataSubject.asObservable();
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 38b32298d083e2223c565a0430aabbc1d602ecc3..8fc38a25e0ed3c7515577279edd22f6e419e7190 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,11 +4,10 @@ html, body{
   font-family: roboto, sans-serif;
   height: 100%;
   background: linear-gradient(
-    45deg,
+    90deg,
     white,
     rgb(184, 184, 244)
   );
 }
 
-html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }