diff --git a/apps/website/components/card-blog/card-blog.module.scss b/apps/website/components/card-blog/card-blog.module.scss
index 45c2aa4..5a23236 100644
--- a/apps/website/components/card-blog/card-blog.module.scss
+++ b/apps/website/components/card-blog/card-blog.module.scss
@@ -5,3 +5,6 @@
  * .container {
  * }
 */
+.card-blog-container {
+  margin-bottom: 10px;
+}
diff --git a/apps/website/components/card-blog/card-blog.tsx b/apps/website/components/card-blog/card-blog.tsx
index d3aa0a9..088a009 100644
--- a/apps/website/components/card-blog/card-blog.tsx
+++ b/apps/website/components/card-blog/card-blog.tsx
@@ -11,7 +11,7 @@ export interface CardBlogProps {
 
 export function CardBlog({item}: CardBlogProps) {
   return (
-    <div className={styles['container'] + " bg-white rounded-l overflow-hidden shadow-sm"}>
+    <div className={styles['card-blog-container'] + " bg-white rounded-l overflow-hidden shadow-sm"}>
       <div className="md:flex">
         <div className="md:shrink-0">
           <img className="h-48 w-full object-cover md:h-full md:w-48"
diff --git a/apps/website/components/header/header.tsx b/apps/website/components/header/header.tsx
index 17406cd..2f58270 100644
--- a/apps/website/components/header/header.tsx
+++ b/apps/website/components/header/header.tsx
@@ -172,7 +172,7 @@ export function Header({items = []}) {
 
   return (
     <nav
-      className="bg-white fixed border-gray-200 rounded dark:bg-gray-800 w-full z-10 border-b-2 border-b-gray-50 dark:border-b-gray-700">
+      className="bg-white fixed border-gray-200 dark:bg-gray-800 w-full z-10 border-b-gray-50 dark:border-b-gray-700">
       <div className="flex mx-auto">
         <main className="w-full">
           <section
diff --git a/apps/website/components/home-section-blog/home-section-blog.module.scss b/apps/website/components/home-section-blog/home-section-blog.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/components/home-section-blog/home-section-blog.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/components/home-section-blog/home-section-blog.spec.tsx b/apps/website/components/home-section-blog/home-section-blog.spec.tsx
new file mode 100644
index 0000000..779d076
--- /dev/null
+++ b/apps/website/components/home-section-blog/home-section-blog.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionBlog from './home-section-blog';
+
+describe('HomeSectionBlog', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionBlog />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/apps/website/components/home-section-blog/home-section-blog.tsx b/apps/website/components/home-section-blog/home-section-blog.tsx
new file mode 100644
index 0000000..0b19c29
--- /dev/null
+++ b/apps/website/components/home-section-blog/home-section-blog.tsx
@@ -0,0 +1,17 @@
+import styles from './home-section-blog.module.scss';
+
+/* eslint-disable-next-line */
+export interface HomeSectionBlogProps {}
+
+export function HomeSectionBlog(props: HomeSectionBlogProps) {
+  return (
+    <>
+      <section className="container max-w-6xl relative mx-auto relative flex row mb-10 h-auto">
+        <div className="md:w-6/12">a</div>
+        <div className="md:w-6/12">b</div>
+      </section>
+    </>
+  );
+}
+
+export default HomeSectionBlog;
diff --git a/apps/website/components/home-section-cards-header/home-section-cards-header.module.scss b/apps/website/components/home-section-cards-header/home-section-cards-header.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/components/home-section-cards-header/home-section-cards-header.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/components/home-section-cards-header/home-section-cards-header.spec.tsx b/apps/website/components/home-section-cards-header/home-section-cards-header.spec.tsx
new file mode 100644
index 0000000..658f944
--- /dev/null
+++ b/apps/website/components/home-section-cards-header/home-section-cards-header.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionCardsHeader from './home-section-cards-header';
+
+describe('HomeSectionCardsHeader', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionCardsHeader />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/apps/website/components/home-section-cards-header/home-section-cards-header.tsx b/apps/website/components/home-section-cards-header/home-section-cards-header.tsx
new file mode 100644
index 0000000..b13c9a1
--- /dev/null
+++ b/apps/website/components/home-section-cards-header/home-section-cards-header.tsx
@@ -0,0 +1,82 @@
+import styles from './home-section-cards-header.module.scss';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+  faChalkboardUser,
+  faGraduationCap, faGuitar,
+  faLinesLeaning, faScrewdriverWrench,
+  faTabletScreenButton
+} from "@fortawesome/free-solid-svg-icons";
+
+/* eslint-disable-next-line */
+export interface HomeSectionCardsHeaderProps {}
+
+export function HomeSectionCardsHeader(props: HomeSectionCardsHeaderProps) {
+  return (
+    <>
+      <main className="container relative max-w-screen-xl mx-auto relative flex flex-col mb-10">
+        <section className="relative max-w-6xl w-full mx-auto lg:h-[200px] sm:grid sm:grid-cols-3 sm:gap-4 sm:-top-10">
+          <div className="block p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
+          bg-white border-gray-200
+          hover:bg-gray-100
+          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">a
+          </div>
+          <div className="block p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
+          bg-white border-gray-200
+          hover:bg-gray-100
+          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">b
+          </div>
+          <div className="blocks p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
+          bg-white border-gray-200
+          hover:bg-gray-100
+          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">c
+          </div>
+        </section>
+
+        <section className="relative w-full">
+          <h2 className="font-bold w-full text-center my-5 text-2xl mx-auto text-teal-800">MeCP fournit tout les outils nécessaire pour un apprentissage de qualité</h2>
+
+          <div className="grid grid-cols-3 gap-2 md:gap-4 max-w-4xl mx-auto px-2 md:px-0">
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-lime-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faTabletScreenButton} /></span>
+              <span className="text-lg">Des formats adaptés</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-violet-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faGraduationCap} /></span>
+              <span className="text-lg">Une organisation pédagogique</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-yellow-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faChalkboardUser} /></span>
+              <span className="text-lg ">Un espace dédié à l'apprentissage</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-orange-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faLinesLeaning} /></span>
+              <span className="text-lg">Des contenus adaptés et motivants</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-teal-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faGuitar} /></span>
+              <span className="text-lg">Une méthode révolutionnaire</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-pink-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faScrewdriverWrench} /></span>
+              <span className="text-lg">Des outils interactifs</span>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
+
+export default HomeSectionCardsHeader;
diff --git a/apps/website/components/home-section-comments/home-section-comments.module.scss b/apps/website/components/home-section-comments/home-section-comments.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/components/home-section-comments/home-section-comments.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/components/home-section-comments/home-section-comments.spec.tsx b/apps/website/components/home-section-comments/home-section-comments.spec.tsx
new file mode 100644
index 0000000..2f87956
--- /dev/null
+++ b/apps/website/components/home-section-comments/home-section-comments.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionComments from './home-section-comments';
+
+describe('HomeSectionComments', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionComments />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/apps/website/components/home-section-comments/home-section-comments.tsx b/apps/website/components/home-section-comments/home-section-comments.tsx
new file mode 100644
index 0000000..e663880
--- /dev/null
+++ b/apps/website/components/home-section-comments/home-section-comments.tsx
@@ -0,0 +1,178 @@
+/* eslint-disable-next-line */
+export interface HomeSectionCommentsProps {
+}
+
+export function HomeSectionComments(props: HomeSectionCommentsProps) {
+  return (
+    <>
+      <section className="w-full bg-white py-10 my-10">
+        <div className="container max-w-6xl relative mx-auto relative flex-col mb-10 h-auto">
+          <h3 className="w-full mb-10 text-xl text-center font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl dark:text-white">
+            Ce que nos étudiants en pense
+          </h3>
+
+          <div className="w-full grid md:grid-cols-3 gap-5">
+            <div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0">
+              <header>
+                <div className="flex items-center">
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>First star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Second star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Third star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fourth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-gray-300 dark:text-gray-500"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fifth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                </div>
+              </header>
+              <section className="pt-3">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sodales nisi. Donec pretium varius purus quis porttitor. In et tempus massa, accumsan egestas orci. Aenean eros purus, consequat eget.</p>
+              </section>
+              <hr className="my-5" />
+              <footer className="flex items-center">
+                <img
+                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
+                  alt="avatar"
+                  className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
+              </footer>
+            </div>
+            <div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0">
+              <header>
+                <div className="flex items-center">
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>First star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Second star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Third star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fourth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-gray-300 dark:text-gray-500"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fifth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                </div>
+              </header>
+              <section className="pt-3">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sodales nisi. Donec pretium varius purus quis porttitor. In et tempus massa, accumsan egestas orci. Aenean eros purus, consequat eget.</p>
+              </section>
+              <hr className="my-5" />
+              <footer className="flex items-center">
+                <img
+                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
+                  alt="avatar"
+                  className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
+              </footer>
+            </div>
+            <div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0">
+              <header>
+                <div className="flex items-center">
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>First star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Second star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Third star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fourth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-gray-300 dark:text-gray-500"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fifth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                </div>
+              </header>
+              <section className="pt-3">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sodales nisi. Donec pretium varius purus quis porttitor. In et tempus massa, accumsan egestas orci. Aenean eros purus, consequat eget.</p>
+              </section>
+              <hr className="my-5" />
+              <footer className="flex items-center">
+                <img
+                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
+                  alt="avatar"
+                  className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
+              </footer>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default HomeSectionComments;
diff --git a/apps/website/components/home-section-grid/home-section-grid.module.scss b/apps/website/components/home-section-grid/home-section-grid.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/components/home-section-grid/home-section-grid.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/components/home-section-grid/home-section-grid.spec.tsx b/apps/website/components/home-section-grid/home-section-grid.spec.tsx
new file mode 100644
index 0000000..f8a226f
--- /dev/null
+++ b/apps/website/components/home-section-grid/home-section-grid.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionGrid from './home-section-grid';
+
+describe('HomeSectionGrid', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionGrid />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/apps/website/components/home-section-grid/home-section-grid.tsx b/apps/website/components/home-section-grid/home-section-grid.tsx
new file mode 100644
index 0000000..9137fc0
--- /dev/null
+++ b/apps/website/components/home-section-grid/home-section-grid.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable-next-line */
+export interface HomeSectionGridProps {
+}
+
+export function HomeSectionGrid(props: HomeSectionGridProps) {
+  return (
+    <>
+      <section className="w-full bg-white p-5 sm:p-10 lg:pt-0 lg:py-10 lg:my-10">
+        <div className="container max-w-6xl relative mx-auto relative flex row lg:mb-10 h-auto">
+          <div className="place-self-center lg:col-span-7 md:px-5 md:px-0 md:pr-10">
+            <h3 className="lg:max-w-2xl mb-4 text-xl font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl dark:text-white">
+              Méthode révolutionnaire pour apprendre à jouer
+            </h3>
+            <p className="lg:max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg dark:text-gray-400">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat nulla lorem, at consectetur ligula pulvinar nec. Fusce dictum aliquet tellus id aliquam. Praesent feugiat tincidunt ante. Aliquam non lectus est. Suspendisse porta, dolor vel aliquet pharetra, ipsum diam laoreet ante, a feugiat nisi justo eu est. </p>
+            <p className="lg:max-w-2xl font-light text-gray-500 lg:mb-8 md:text-lg dark:text-gray-400">Suspendisse in eros nisl. Vivamus eu convallis massa. Phasellus sit amet felis ut velit semper sagittis eget vitae arcu. Nunc leo est, vulputate sed libero non, efficitur lobortis odio. Proin fermentum massa non metus bibendum imperdiet.</p>
+          </div>
+          <div className="hidden relative md:mt-10 lg:col-span-5 lg:flex grow justify-around">
+            <div className="md:w-2/5 relative bg-gray-200 rounded-lg h-[350px]"></div>
+            <div className="md:w-2/5 relative bg-gray-200 rounded-lg h-[350px] top-10"></div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default HomeSectionGrid;
diff --git a/apps/website/components/home-section-video/home-section-video.module.scss b/apps/website/components/home-section-video/home-section-video.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/components/home-section-video/home-section-video.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/components/home-section-video/home-section-video.spec.tsx b/apps/website/components/home-section-video/home-section-video.spec.tsx
new file mode 100644
index 0000000..e258de8
--- /dev/null
+++ b/apps/website/components/home-section-video/home-section-video.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionVideo from './home-section-video';
+
+describe('HomeSectionVideo', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionVideo />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/apps/website/components/home-section-video/home-section-video.tsx b/apps/website/components/home-section-video/home-section-video.tsx
new file mode 100644
index 0000000..3aae091
--- /dev/null
+++ b/apps/website/components/home-section-video/home-section-video.tsx
@@ -0,0 +1,27 @@
+import styles from './home-section-video.module.scss';
+
+/* eslint-disable-next-line */
+export interface HomeSectionVideoProps {}
+
+export function HomeSectionVideo(props: HomeSectionVideoProps) {
+  return (
+    <>
+      <section className="container relative max-w-screen-xl mx-auto relative flex flex-col justify-center mb-10">
+        <h2 className="font-bold w-full text-center mt-5 text-2xl mx-auto text-blue-800">
+          Démonstration en vidéo
+        </h2>
+        <p className="text-lg text-gray-500 mb-10 text-center">Rien ne vaut une démonstration pour convaincre !</p>
+
+        <iframe src="https://embed.api.video/vod/vi2JpEFEClejM7A4hhn6i7fU"
+                width="90%"
+                frameBorder="0"
+                scrolling="no"
+                className="mx-auto"
+                allowFullScreen={true}></iframe>
+
+      </section>
+    </>
+  );
+}
+
+export default HomeSectionVideo;
diff --git a/apps/website/components/home/home.module.scss b/apps/website/components/home/home.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/components/home/home.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/components/home/home.spec.tsx b/apps/website/components/home/home.spec.tsx
new file mode 100644
index 0000000..d72bc5d
--- /dev/null
+++ b/apps/website/components/home/home.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Home from './home';
+
+describe('Home', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Home />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/apps/website/components/home/home.tsx b/apps/website/components/home/home.tsx
new file mode 100644
index 0000000..d2173a6
--- /dev/null
+++ b/apps/website/components/home/home.tsx
@@ -0,0 +1,25 @@
+import styles from './home.module.scss';
+import HomeSectionGrid from "../home-section-grid/home-section-grid";
+import HomeSectionCardsHeader from "../home-section-cards-header/home-section-cards-header";
+import HomeSectionVideo from "../home-section-video/home-section-video";
+import HomeSectionComments from "../home-section-comments/home-section-comments";
+import HomeSectionBlog from "../home-section-blog/home-section-blog";
+
+/* eslint-disable-next-line */
+export interface HomeProps {
+}
+
+export function HomeContent(props: HomeProps) {
+  return (
+    <div className={styles['container']}>
+      <header className="w-full min-h-[75vh] bg-gray-500"></header>
+      <HomeSectionCardsHeader />
+      <HomeSectionGrid />
+      <HomeSectionVideo />
+      <HomeSectionComments />
+      <HomeSectionBlog />
+    </div>
+  );
+}
+
+export default HomeContent;
diff --git a/apps/website/components/layout/layout.module.scss b/apps/website/components/layout/layout.module.scss
index 76fd24c..04a2115 100644
--- a/apps/website/components/layout/layout.module.scss
+++ b/apps/website/components/layout/layout.module.scss
@@ -64,7 +64,7 @@
 @media (min-width: 1024px) {
   .app-container:not(.without-footer) {
     .app-content {
-      padding-top: 135px;
+      padding-top: 131px;
       min-height: calc(100vh - 181px);
     }
   }
diff --git a/apps/website/components/seo-config/seo-config.tsx b/apps/website/components/seo-config/seo-config.tsx
index 7a90880..b259a9e 100644
--- a/apps/website/components/seo-config/seo-config.tsx
+++ b/apps/website/components/seo-config/seo-config.tsx
@@ -53,6 +53,7 @@ export const SeoConfig = ({metaDescription = null, lang = null, meta = [], metaT
   return (
     <Head>
       <title>{title}</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta name="description"
             content={description}/>
       <meta property="og:title"
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index 2aef0ef..0f41953 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/pages/_app.tsx
@@ -2,7 +2,13 @@ import App, {AppProps} from 'next/app';
 import {SessionProvider} from "next-auth/react";
 import {config, library} from "@fortawesome/fontawesome-svg-core";
 import '@fortawesome/fontawesome-svg-core/styles.css';
-import {faBagShopping, faRightToBracket, faUserPlus} from "@fortawesome/free-solid-svg-icons";
+import {
+  faBagShopping, faChalkboardUser,
+  faGraduationCap, faGuitar, faLinesLeaning,
+  faRightToBracket, faScrewdriverWrench,
+  faTabletScreenButton,
+  faUserPlus
+} from "@fortawesome/free-solid-svg-icons";
 import axios from "axios";
 import delve from 'dlv';
 import {wrapper} from "../store/store";
@@ -15,6 +21,12 @@ config.autoAddCss = false;
 library.add(faRightToBracket);
 library.add(faUserPlus);
 library.add(faBagShopping);
+library.add(faTabletScreenButton);
+library.add(faGraduationCap);
+library.add(faChalkboardUser);
+library.add(faLinesLeaning);
+library.add(faGuitar);
+library.add(faScrewdriverWrench);
 
 interface CustomAppProps extends AppProps {
   menuHeader: object[],
diff --git a/apps/website/pages/blog/index.tsx b/apps/website/pages/blog/index.tsx
index 1a5c703..756b585 100644
--- a/apps/website/pages/blog/index.tsx
+++ b/apps/website/pages/blog/index.tsx
@@ -9,19 +9,28 @@ import styles from "./index.module.scss";
 import BlogSearch from "../../components/blog-search/blog-search";
 import {environment} from "../../environments/environment";
 import CardBlog from "../../components/card-blog/card-blog";
+import BlogPagination from "../../components/blog-pagination/blog-pagination";
 
 export async function getServerSideProps(context) {
-  const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`)
-  const posts = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC`)
+  const {query} = context;
+
+  let postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC`;
+  if (query && query.page) {
+    postsUrl += `$pagination[page]=${query.page}`;
+  }
+
+  const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`);
+  const posts = await axios.get(postsUrl);
   return {
     props: {
       categories: delve(categories, 'data.data', []),
       lastPublished: delve(posts, 'data.data', []),
+      paginator: delve(posts, 'data.meta', []),
     }
   }
 }
 
-export function Blog({menuHeader, menuFooter, seo, categories, lastPublished}) {
+export function Blog({menuHeader, menuFooter, seo, categories, lastPublished, paginator}) {
   return (
     <>
       <SeoConfig {...seo}/>
@@ -32,6 +41,10 @@ export function Blog({menuHeader, menuFooter, seo, categories, lastPublished}) {
               {lastPublished.map((post, index: number) => (
                 <CardBlog key={'card-blog-' + post.id + index} item={post}/>))
               }
+
+              {lastPublished.length > 0 && (<footer className="mt-10">
+                <BlogPagination paginator={paginator}/>
+              </footer>)}
             </section>
             <aside className="grow lg:basis-2/6">
               <BlogSearch/>
diff --git a/apps/website/pages/home/index.tsx b/apps/website/pages/home/index.tsx
index c813c79..e99aa97 100644
--- a/apps/website/pages/home/index.tsx
+++ b/apps/website/pages/home/index.tsx
@@ -1,16 +1,17 @@
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
+import HomeContent from "../../components/home/home";
+
 import styles from "../blog/index.module.scss";
 
 export function Home({menuHeader, menuFooter, seo}) {
   return (
     <>
-      <SeoConfig {...seo}/>
-      <Layout menuHeader={menuHeader} menuFooter={menuFooter}>
-        <main className={styles['blog-container'] + " w-full lg:my-10"}>
-          <section className="container max-w-screen-xl mx-auto relative flex">
-            <p>Page d&apos;accueil</p>
-          </section>
+      <SeoConfig {...seo} />
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <HomeContent />
         </main>
       </Layout>
     </>
diff --git a/apps/website/pages/index.tsx b/apps/website/pages/index.tsx
index 3966f48..17eb57b 100644
--- a/apps/website/pages/index.tsx
+++ b/apps/website/pages/index.tsx
@@ -1,13 +1,19 @@
 import SeoConfig from "../components/seo-config/seo-config";
 
 import Layout from "../components/layout/layout";
+import HomeContent from "../components/home/home";
+
+import styles from "./blog/index.module.scss";
 
 export function Index({menuHeader, menuFooter, page, seo}) {
   return (
     <>
-      <SeoConfig {...seo}/>
-      <Layout menuHeader={menuHeader} menuFooter={menuFooter}>
-        <p>Page d&apos;accueil</p>
+      <SeoConfig {...seo} />
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <HomeContent />
+        </main>
       </Layout>
     </>
   );