diff --git a/apps/website/components/blog-pagination/blog-pagination.spec.tsx b/apps/website/components/blog-pagination/blog-pagination.spec.tsx
index f4cca7b..3ed60b3 100644
--- a/apps/website/components/blog-pagination/blog-pagination.spec.tsx
+++ b/apps/website/components/blog-pagination/blog-pagination.spec.tsx
@@ -1,10 +1,20 @@
-import { render } from '@testing-library/react';
+import {render} from '@testing-library/react';
 
 import BlogPagination from './blog-pagination';
 
+jest.mock("next/router", () => ({
+  useRouter() {
+    return {
+      route: "/",
+      pathname: "",
+      query: "",
+      asPath: "",
+    };
+  },
+}));
 describe('BlogPagination', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<BlogPagination />);
+    const {baseElement} = render(<BlogPagination paginator={{pagination: {}}} />);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/apps/website/components/blog-pagination/blog-pagination.tsx b/apps/website/components/blog-pagination/blog-pagination.tsx
index 0593cd1..07f97a1 100644
--- a/apps/website/components/blog-pagination/blog-pagination.tsx
+++ b/apps/website/components/blog-pagination/blog-pagination.tsx
@@ -6,7 +6,7 @@ export interface BlogPaginationProps {
   paginator: any;
 }
 
-export function BlogPagination({paginator}: BlogPaginationProps) {
+export function BlogPagination({paginator = {pagination: {}}}: BlogPaginationProps) {
   const router = useRouter();
   const {total, pageCount, page} = paginator.pagination;
   const isOnlyOne = pageCount > 0 && pageCount === 1;
@@ -41,7 +41,10 @@ export function BlogPagination({paginator}: BlogPaginationProps) {
             hover:bg-gray-900
             disabled:bg-gray-500 disabled:hover:bg-gray-500
             dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-            <svg aria-hidden="true" className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20"
+            <svg aria-hidden="true"
+                 className="w-5 h-5 mr-2"
+                 fill="currentColor"
+                 viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg">
               <path fillRule="evenodd"
                     d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
@@ -58,7 +61,10 @@ export function BlogPagination({paginator}: BlogPaginationProps) {
             disabled:bg-gray-500 disabled:hover:bg-gray-500
             dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
             Next
-            <svg aria-hidden="true" className="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20"
+            <svg aria-hidden="true"
+                 className="w-5 h-5 ml-2"
+                 fill="currentColor"
+                 viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg">
               <path fillRule="evenodd"
                     d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
diff --git a/apps/website/components/blog-search/blog-search.spec.tsx b/apps/website/components/blog-search/blog-search.spec.tsx
index 3f665ab..6554aba 100644
--- a/apps/website/components/blog-search/blog-search.spec.tsx
+++ b/apps/website/components/blog-search/blog-search.spec.tsx
@@ -1,10 +1,31 @@
-import { render } from '@testing-library/react';
+import {render} from '@testing-library/react';
+import configureStore from "redux-mock-store";
 
 import BlogSearch from './blog-search';
+import {Provider} from "react-redux";
+
+jest.mock("next/router", () => ({
+  useRouter() {
+    return {
+      route: "/",
+      pathname: "",
+      query: "",
+      asPath: "",
+    };
+  },
+}));
 
 describe('BlogSearch', () => {
+  const initialState = {results: []};
+  const mockStore = configureStore();
+  let store;
+
   it('should render successfully', () => {
-    const { baseElement } = render(<BlogSearch />);
+    store = mockStore(initialState);
+    const {baseElement} = render(
+      <Provider store={store}>
+        <BlogSearch />
+      </Provider>);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/apps/website/components/blog-search/blog-search.tsx b/apps/website/components/blog-search/blog-search.tsx
index d3b2b03..4d248bc 100644
--- a/apps/website/components/blog-search/blog-search.tsx
+++ b/apps/website/components/blog-search/blog-search.tsx
@@ -24,8 +24,8 @@ export function BlogSearch(props: BlogSearchProps) {
     if (subject === null) {
       const sub = new BehaviorSubject('');
       const client = new MeiliSearch({
-        host: 'http://127.0.0.1:7700',
-        apiKey: environment.meiliMasterKey
+        host: environment.meiliUrl,
+        apiKey: environment.meiliApiKey
       })
       setSubject(sub);
       setClient(client);
@@ -55,7 +55,9 @@ export function BlogSearch(props: BlogSearchProps) {
   const onSearchChange = (e) => subject.next(e.target.value);
 
   return (
-    <div className={styles['container'] + " bg-white rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm"}>
+    <div className={styles['container'] + " rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
+      " bg-white" +
+      " dark:bg-gray-800"}>
       <form>
         <label htmlFor="default-search"
                className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
diff --git a/apps/website/components/card-blog-details/card-blog-details.spec.tsx b/apps/website/components/card-blog-details/card-blog-details.spec.tsx
index 75c020e..d4b20ea 100644
--- a/apps/website/components/card-blog-details/card-blog-details.spec.tsx
+++ b/apps/website/components/card-blog-details/card-blog-details.spec.tsx
@@ -1,10 +1,10 @@
-import { render } from '@testing-library/react';
+import {render} from '@testing-library/react';
 
 import CardBlogDetails from './card-blog-details';
 
 describe('CardBlogDetails', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<CardBlogDetails />);
+    const {baseElement} = render(<CardBlogDetails item={{}} />);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/apps/website/components/card-blog-details/card-blog-details.tsx b/apps/website/components/card-blog-details/card-blog-details.tsx
index 6d849c1..ccb92e6 100644
--- a/apps/website/components/card-blog-details/card-blog-details.tsx
+++ b/apps/website/components/card-blog-details/card-blog-details.tsx
@@ -13,80 +13,87 @@ import {
   WhatsappShareButton
 } from "react-share";
 
-import {environment} from "../../environments/environment";
-
 import styles from './card-blog-details.module.scss';
+import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
 
 /* eslint-disable-next-line */
 export interface CardBlogDetailsProps {
   item: any;
 }
 
-export function CardBlogDetails({item}: CardBlogDetailsProps) {
-  const {alternativeText, width, height} = item.image.data.attributes;
-  const {slug} = item.category.data.attributes;
+export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
+  const {width = 0, height = 0} = delve(item, 'image.data.attributes', {});
   const {title} = item;
-  const shareUrl = `${environment.appUrl}/blog/${slug}/${item.slug}`;
+  const shareUrl = getPostUrl(item);
   return (
-    <div className={styles['container'] + " bg-white rounded-l p-8 overflow-hidden shadow-sm"}>
+    <div className={styles['container'] + " rounded-l p-8 overflow-hidden shadow-sm" +
+      " bg-white" +
+      " dark:bg-gray-800"}>
       <header className="md:flex flex-col">
         <h2 className="text-3xl mb-5 text-bold">
           {delve(item, 'title', 'N/A')}
         </h2>
         <section className="flex items-center justify-between">
           <div className="flex">
-            <a href="#" className="flex items-center">
+            <a href="#"
+               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"/>
+                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>
             </a>
           </div>
           <div className="flex flex-col">
-            <a href={'/blog/' + delve(item, 'category.data.attributes.slug', '')}
+            <a href={getCategoryUrl(item)}
                className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
               {delve(item, 'category.data.attributes.name', 'N/A')}
             </a>
           </div>
         </section>
       </header>
-      <hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto"/>
+      <hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto" />
       <main>
         <section>
-          <div className="whitespace-pre-wrap text-lg font-bold text-slate-500"
-               dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}}/>
+          <div className="whitespace-pre-wrap text-lg font-bold text-slate-500
+            text-gray-600
+            dark:text-gray-300"
+               dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}} />
           <NextImage
             layout="responsive"
             width={width}
             height={height}
             objectFit="contain"
             className="rounded-lg my-5"
-            src={environment.strapiUrl + delve(item, 'image.data.attributes.url', '')}
-            alt={delve(item, 'title', 'N/A')}/>
+            src={getStrapiImage(item, "default")}
+            alt={delve(item, 'title', 'N/A')} />
         </section>
         <section className="whitespace-pre-wrap text-lg text-slate-400"
-                 dangerouslySetInnerHTML={{__html: delve(item, 'content', 'N/A')}}/>
-        <hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto"/>
+                 dangerouslySetInnerHTML={{__html: delve(item, 'content', 'N/A')}} />
+        <hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto" />
         <section className="flex justify-between">
           <div>
             <h4 className="font-bold text-lg text-gray-400 mb-2">Partager cet article</h4>
             <div className="grid grid-cols-5 gap-2">
               <FacebookShareButton url={shareUrl}>
-                <FacebookIcon size={32} round/>
+                <FacebookIcon size={32}
+                              round />
               </FacebookShareButton>
               <FacebookMessengerShareButton
                 url={shareUrl}
                 appId="521270401588372"
                 className="Demo__some-network__share-button"
               >
-                <FacebookMessengerIcon size={32} round/>
+                <FacebookMessengerIcon size={32}
+                                       round />
               </FacebookMessengerShareButton>
               <TwitterShareButton
                 url={shareUrl}
                 title={title}
                 className="Demo__some-network__share-button"
               >
-                <TwitterIcon size={32} round/>
+                <TwitterIcon size={32}
+                             round />
               </TwitterShareButton>
               <WhatsappShareButton
                 url={shareUrl}
@@ -94,10 +101,13 @@ export function CardBlogDetails({item}: CardBlogDetailsProps) {
                 separator=":: "
                 className="Demo__some-network__share-button"
               >
-                <WhatsappIcon size={32} round/>
+                <WhatsappIcon size={32}
+                              round />
               </WhatsappShareButton>
-              <LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button">
-                <LinkedinIcon size={32} round/>
+              <LinkedinShareButton url={shareUrl}
+                                   className="Demo__some-network__share-button">
+                <LinkedinIcon size={32}
+                              round />
               </LinkedinShareButton>
             </div>
           </div>
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..14c4fb6 100644
--- a/apps/website/components/card-blog/card-blog.tsx
+++ b/apps/website/components/card-blog/card-blog.tsx
@@ -1,8 +1,8 @@
 import delve from 'dlv';
-import { format } from 'date-fns';
-import {environment} from '../../environments/environment';
+import {format} from 'date-fns';
 
 import styles from './card-blog.module.scss';
+import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
 
 /* eslint-disable-next-line */
 export interface CardBlogProps {
@@ -11,38 +11,53 @@ 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'] + " rounded-l overflow-hidden shadow-sm" +
+      " bg-white" +
+      " dark:bg-gray-800"}>
       <div className="md:flex">
         <div className="md:shrink-0">
           <img className="h-48 w-full object-cover md:h-full md:w-48"
-               src={environment.strapiUrl + delve(item, 'attributes.image.data.attributes.formats.medium.url', '')}
-               alt="Modern building architecture"/>
+               src={getStrapiImage(item, 'medium')}
+               alt="Modern building architecture" />
         </div>
         <div className="p-8 w-full">
           <div className="flex justify-between items-center">
             <span
-              className="font-light text-gray-600 text-sm">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')),'dd/MM/yyyy')}</span>
-            <a href={'/blog/' + delve(item, 'attributes.category.data.attributes.slug', '')}
-               className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
+              className="font-light text-sm
+              text-gray-600
+              dark:text-gray-300">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
+            <a href={getCategoryUrl(item)}
+               className="px-2 py-1 text-sm font-bold rounded
+               bg-gray-600 text-gray-100
+               hover:bg-gray-500">
               {delve(item, 'attributes.category.data.attributes.name', 'N/A')}
             </a>
           </div>
           <div className="mt-2">
             <a
-              href={'/blog/' + delve(item, 'attributes.category.data.attributes.slug', '') + '/' + delve(item, 'attributes.slug', '')}
-              className="text-xl text-gray-700 font-bold hover:underline">
+              href={getPostUrl(item)}
+              className="text-xl font-bold hover:underline
+              text-gray-700
+              dark:text-gray-200">
               {delve(item, 'attributes.title', 'N/A')}
             </a>
-            <p className="mt-2 font-light text-sm text-gray-600">{delve(item, 'attributes.description', 'N/A')}</p>
+            <p className="mt-2 font-light text-sm
+            text-gray-600
+            dark:text-gray-300">{delve(item, 'attributes.description', 'N/A')}</p>
           </div>
           <div className="flex justify-between items-center mt-4">
-            <a href="#" className="text-blue-500 text-sm hover:underline">Lire l'article</a>
+            <a href={getPostUrl(item)}
+               className="text-blue-500 text-sm hover:underline">Lire l'article</a>
             <div>
-              <a href="#" className="flex items-center">
+              <a href="#"
+                 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="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block"/>
-                <h3 className="text-gray-700 text-normal font-bold hover:underline">Alex John</h3>
+                  alt="avatar"
+                  className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                <h3 className="text-normal font-bold hover:underline
+                text-gray-700
+                dark:text-gray-300">Alex John</h3>
               </a>
             </div>
           </div>
diff --git a/apps/website/components/categories/categories.tsx b/apps/website/components/categories/categories.tsx
index e31cdce..1189a35 100644
--- a/apps/website/components/categories/categories.tsx
+++ b/apps/website/components/categories/categories.tsx
@@ -15,7 +15,9 @@ export interface CategoriesProps {
 export function Categories({items = []}: CategoriesProps) {
   return (
     <div
-      className={styles['container'] + " bg-white rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm"}>
+      className={styles['container'] + " rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
+        " bg-white" +
+        " dark:bg-gray-800"}>
       <div className="flex items-center justify-between mb-4">
         <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">Catégories</h5>
       </div>
diff --git a/apps/website/components/footer/footer.tsx b/apps/website/components/footer/footer.tsx
index dd74c44..4bb00e7 100644
--- a/apps/website/components/footer/footer.tsx
+++ b/apps/website/components/footer/footer.tsx
@@ -19,7 +19,7 @@ export function Footer({items = []}) {
       <div className="sm:flex sm:items-center sm:justify-between">
         <a href="/" className="flex items-center mb-4 sm:mb-0">
           <img src="https://flowbite.com/docs/images/logo.svg" className="h-8 mr-3" alt="Flowbite Logo"/>
-          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
+          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">MeCP</span>
         </a>
         <ul className="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
           {items.map((item, index: number) => generateItem(item, index))}
diff --git a/apps/website/components/header/header.tsx b/apps/website/components/header/header.tsx
index 17406cd..d4850eb 100644
--- a/apps/website/components/header/header.tsx
+++ b/apps/website/components/header/header.tsx
@@ -172,16 +172,16 @@ 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
-            className="bg-white dark:bg-gray-900 w-full md:w-auto p-2 md:p-4"
+            className="bg-white dark:bg-gray-800 w-full md:w-auto p-2 md:p-4"
             id="navbar-default">
             <div className="container max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
               <a href="/" className="flex items-center">
                 <img src="https://flowbite.com/docs/images/logo.svg" className="h-6 mr-3 sm:h-9" alt="Flowbite Logo"/>
-                <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
+                <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">MeCP</span>
               </a>
               <div className="flex items-center">
                 <button
@@ -207,7 +207,7 @@ export function Header({items = []}) {
               </div>
             </div>
           </section>
-          <hr className="border-gray-100 sm:mx-auto dark:border-gray-700 container mx-auto"/>
+          <hr className="border-gray-100 dark:border-gray-700 container max-w-screen-xl mx-auto"/>
           <section className="hidden w-full md:block md:w-auto" id="navbar-dropdown">
             <div className="container max-w-screen-xl mx-auto">
               <ul className="flex flex-col md:p-4 font-medium md:flex-row md:space-x-8 md:mt-0">
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..58ef6c9
--- /dev/null
+++ b/apps/website/components/home-section-blog/home-section-blog.tsx
@@ -0,0 +1,86 @@
+/* eslint-disable-next-line */
+import NextImage from "next/image";
+import delve from 'dlv';
+
+import {getCategoryUrl, getPostUrl, getStrapiImage, getStrapiImageSize} from "../../libs/utils";
+import CardBlog from "../card-blog/card-blog";
+import {format} from "date-fns";
+
+export interface HomeSectionBlogProps {
+  posts: object[];
+}
+
+export function HomeSectionBlog({posts = []}: HomeSectionBlogProps) {
+  const firstArticle = posts.length > 0 ? posts.slice(0, 1) : [];
+  const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : [];
+  const [width, height] = getStrapiImageSize(firstArticle[0]);
+  return (
+    <>
+      <section className="container max-w-6xl relative mx-auto relative flex flex-col md:flex-row mb-10 h-auto">
+        <div className="w-12/12 md:w-6/12 px-4 mb-4 md:mb-0 md:px-0 md:pr-2">
+          <div className="block border rounded-lg shadow-sm h-full my-2 mx-2 sm:my-0 sm:mx-0 relative
+          bg-white border-gray-200
+          dark:bg-gray-800 dark:border-gray-800 dark:hover:bg-gray-800">
+            <div className="flex justify-between items-center absolute left-5 top-5">
+            <span
+              className="font-bold shadow text-white text-sm">{format(new Date(delve(firstArticle[0], 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
+            </div>
+            <div className="flex justify-between items-center absolute right-5 top-5">
+              <a href={getCategoryUrl(firstArticle[0])}
+                 className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
+                {delve(firstArticle[0], 'attributes.category.data.attributes.name', 'N/A')}
+              </a>
+            </div>
+
+            <NextImage
+              layout="responsive"
+              width={width}
+              height={height}
+              objectFit="contain"
+              className="rounded-t"
+              src={getStrapiImage(firstArticle[0])}
+              alt={delve(firstArticle, '0.title', 'N/A')} />
+
+            <main className="p-5">
+              <div className="mt-2">
+                <a
+                  href={getPostUrl(firstArticle[0])}
+                  className="text-xl font-bold hover:underline
+                  text-gray-700
+                  dark:text-gray-200">
+                  {delve(firstArticle[0], 'attributes.title', 'N/A')}
+                </a>
+                <p className="mt-2 font-light text-sm
+                text-gray-600
+                dark:text-gray-300">{delve(firstArticle[0], 'attributes.description', 'N/A')}</p>
+              </div>
+
+              <div className="flex justify-between items-center mt-4">
+                <a href={getPostUrl(firstArticle[0])}
+                   className="text-blue-500 text-sm hover:underline">Lire l'article</a>
+                <div>
+                  <a href="#"
+                     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="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                    <h3 className="text-normal font-bold hover:underline
+                    text-gray-700
+                    dark:text-gray-300">Alex John</h3>
+                  </a>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+        <div className="w-12/12 md:w-6/12 px-4 md:px-0 md:pl-2">
+          {otherArticles.map((item: object, index: number) => (<CardBlog key={"home-card-blog-" + index}
+                                                                         item={item} />))}
+        </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..8855699
--- /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 sm:px-4 xl:px-0">
+          <div className="block p-6 border rounded-lg shadow-sm 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-sm 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-sm 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..434005e
--- /dev/null
+++ b/apps/website/components/home-section-comments/home-section-comments.tsx
@@ -0,0 +1,186 @@
+/* eslint-disable-next-line */
+export interface HomeSectionCommentsProps {
+}
+
+export function HomeSectionComments(props: HomeSectionCommentsProps) {
+  return (
+    <>
+      <section className="w-full py-10 my-10
+      bg-white
+      dark:bg-gray-800">
+        <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 md:px-4 xl:px-0 gap-5">
+            <div className="rounded-lg p-7 mx-5 md:mx-0
+            bg-gray-100
+            dark:bg-gray-700">
+              <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="rounded-lg p-7 mx-5 md:mx-0
+            bg-gray-100
+            dark:bg-gray-700">
+              <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="rounded-lg p-7 mx-5 md:mx-0
+            bg-gray-100
+            dark:bg-gray-700">
+              <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..d74a55b
--- /dev/null
+++ b/apps/website/components/home-section-grid/home-section-grid.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable-next-line */
+export interface HomeSectionGridProps {
+}
+
+export function HomeSectionGrid(props: HomeSectionGridProps) {
+  return (
+    <>
+      <section className="w-full p-5 sm:p-10 lg:pt-0 lg:py-10 lg:my-10
+      bg-white
+      dark:bg-gray-800">
+        <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 lg:my-10 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..d45cc4a
--- /dev/null
+++ b/apps/website/components/home/home.tsx
@@ -0,0 +1,26 @@
+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 {
+  posts: object[];
+}
+
+export function HomeContent({posts}: HomeProps) {
+  return (
+    <div className={styles['container']}>
+      <header className="w-full hidden sm:block min-h-[40vh] md:min-h-[50vh] lg:min-h-[75vh] bg-gray-500 bg-cover bg-no-repeat" style={{backgroundImage: 'url(/images/home.jpeg)'}}></header>
+      <HomeSectionCardsHeader />
+      <HomeSectionGrid />
+      <HomeSectionVideo />
+      <HomeSectionComments />
+      <HomeSectionBlog posts={posts} />
+    </div>
+  );
+}
+
+export default HomeContent;
diff --git a/apps/website/components/last-articles/last-articles.tsx b/apps/website/components/last-articles/last-articles.tsx
index c32eb86..8d5de4e 100644
--- a/apps/website/components/last-articles/last-articles.tsx
+++ b/apps/website/components/last-articles/last-articles.tsx
@@ -12,7 +12,9 @@ export interface LastArticlesProps {
 export function LastArticles({items = []}: LastArticlesProps) {
   return (
     <div
-      className={styles['container'] + " bg-white rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm"}>
+      className={styles['container'] + "rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
+        " bg-white" +
+        " dark:bg-gray-800"}>
       <div className="flex items-center justify-between mb-4">
         <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">Derniers articles publiés</h5>
       </div>
diff --git a/apps/website/components/layout/layout.module.scss b/apps/website/components/layout/layout.module.scss
index 76fd24c..69603f2 100644
--- a/apps/website/components/layout/layout.module.scss
+++ b/apps/website/components/layout/layout.module.scss
@@ -11,7 +11,7 @@
 
   .app-content {
     position: relative;
-    padding-top: 75.5px;
+    padding-top: 58px;
     min-height: calc(100vh - 189px);
   }
 }
@@ -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/environments/environment.development.ts b/apps/website/environments/environment.development.ts
index f8ed65b..c4b1e9a 100644
--- a/apps/website/environments/environment.development.ts
+++ b/apps/website/environments/environment.development.ts
@@ -1,8 +1,8 @@
 export const environment = {
   appUrl: 'http://localhost:4200',
-  strapiUrl: 'http://127.0.0.1:1337',
-  strapiApiUrl: 'http://127.0.0.1:1337/api',
+  strapiUrl: 'http://localhost:1337',
+  strapiApiUrl: 'http://localhost:1337/api',
   nextAuthSecret: "yBNW1wrb9CgOvEfbX6EQCvCDqiMkRBZP",
-  meiliApiKey: "0e9a9d027b9e6b2d98c9670e5030a8d1aa72cab911fd768d4ad02636ae673690",
-  meiliMasterKey: "f2e963e883cbacf6d4f63e792dc276491b8a866fb837f3fda37b8b78889a6851"
+  meiliUrl: "http://127.0.0.1:7700",
+  meiliApiKey: "f2e963e883cbacf6d4f63e792dc276491b8a866fb837f3fda37b8b78889a6851",
 }
diff --git a/apps/website/environments/environment.prod.ts b/apps/website/environments/environment.prod.ts
index 3382f3f..84758a1 100644
--- a/apps/website/environments/environment.prod.ts
+++ b/apps/website/environments/environment.prod.ts
@@ -3,6 +3,6 @@ export const environment = {
   strapiUrl: 'https://admin.mecp.nasercloud.fr',
   strapiApiUrl: 'https://admin.mecp.nasercloud.fr/api',
   nextAuthSecret: "yBNW1wrb9CgOvEfbX6EQCvCDqiMkRBZP",
+  meiliUrl: "https://ms-b6dafcb0b382-1943.fra.meilisearch.io",
   meiliApiKey: "0e9a9d027b9e6b2d98c9670e5030a8d1aa72cab911fd768d4ad02636ae673690",
-  meiliMasterKey: "f2e963e883cbacf6d4f63e792dc276491b8a866fb837f3fda37b8b78889a6851"
 }
diff --git a/apps/website/environments/environment.staging.ts b/apps/website/environments/environment.staging.ts
index 3382f3f..1f0f314 100644
--- a/apps/website/environments/environment.staging.ts
+++ b/apps/website/environments/environment.staging.ts
@@ -3,6 +3,6 @@ export const environment = {
   strapiUrl: 'https://admin.mecp.nasercloud.fr',
   strapiApiUrl: 'https://admin.mecp.nasercloud.fr/api',
   nextAuthSecret: "yBNW1wrb9CgOvEfbX6EQCvCDqiMkRBZP",
-  meiliApiKey: "0e9a9d027b9e6b2d98c9670e5030a8d1aa72cab911fd768d4ad02636ae673690",
-  meiliMasterKey: "f2e963e883cbacf6d4f63e792dc276491b8a866fb837f3fda37b8b78889a6851"
+  meiliUrl: "https://ms-b6dafcb0b382-1943.fra.meilisearch.io",
+  meiliApiKey: "dda9e4a354839db9ae18c3722ae75422515c06525b3a841010928b5256f54e72",
 }
diff --git a/apps/website/environments/environment.ts b/apps/website/environments/environment.ts
index f8ed65b..520e2bd 100644
--- a/apps/website/environments/environment.ts
+++ b/apps/website/environments/environment.ts
@@ -1,8 +1,8 @@
 export const environment = {
   appUrl: 'http://localhost:4200',
-  strapiUrl: 'http://127.0.0.1:1337',
-  strapiApiUrl: 'http://127.0.0.1:1337/api',
+  strapiUrl: 'http://localhost:1337',
+  strapiApiUrl: 'http://localhost:1337/api',
   nextAuthSecret: "yBNW1wrb9CgOvEfbX6EQCvCDqiMkRBZP",
-  meiliApiKey: "0e9a9d027b9e6b2d98c9670e5030a8d1aa72cab911fd768d4ad02636ae673690",
-  meiliMasterKey: "f2e963e883cbacf6d4f63e792dc276491b8a866fb837f3fda37b8b78889a6851"
+  meiliUrl: "http://127.0.0.1:7700",
+  meiliApiKey: "dda9e4a354839db9ae18c3722ae75422515c06525b3a841010928b5256f54e72",
 }
diff --git a/apps/website/libs/utils.ts b/apps/website/libs/utils.ts
new file mode 100644
index 0000000..83ffe36
--- /dev/null
+++ b/apps/website/libs/utils.ts
@@ -0,0 +1,47 @@
+import delve from 'dlv';
+
+import {environment} from "../environments/environment";
+
+export type ImageFormatType = "default" | "thumbnail" | "medium" | "small";
+
+export const getCategoryUrl = (item): string => {
+  const categorySlug = !delve(item, 'attributes', null) ? delve(item, 'category.data.attributes.slug', '') : delve(item, 'attributes.category.data.attributes.slug', '');
+  return '/blog/' + categorySlug;
+}
+export const getPostUrl = (item): string => {
+  const categorySlug = !delve(item, 'attributes', null) ? delve(item, 'category.data.attributes.slug', '') : delve(item, 'attributes.category.data.attributes.slug', '');
+  const postSlug = !delve(item, 'attributes', null) ? delve(item, 'slug', '') : delve(item, 'attributes.slug', '');
+  return '/blog/' + categorySlug + '/' + postSlug;
+}
+
+export const getStrapiImage = (item, format: ImageFormatType = 'default') => {
+  const image = !delve(item, 'attributes', null) ? delve(item, 'image.data.attributes', {}) : delve(item, 'attributes.image.data.attributes', {});
+  console.log(item, image);
+  switch (format) {
+    case "default":
+      return environment.strapiUrl + delve(image, "url", "/images/default.png");
+    case "medium":
+      return environment.strapiUrl + delve(image, "formats.medium.url", "/images/default.png");
+    case "small":
+      return environment.strapiUrl + delve(image, "formats.small.url", "/images/default.png");
+    case "thumbnail":
+      return environment.strapiUrl + delve(image, "formats.thumbnail.url", "/images/default.png");
+    default:
+      return environment.strapiUrl + delve(image, "url", "/images/default.png");
+  }
+}
+export const getStrapiImageSize = (item, format: ImageFormatType = 'default'): [number, number] => {
+  const image = delve(item, 'attributes.image.data.attributes', {});
+  switch (format) {
+    case "default":
+      return [delve(image, "width", 100), delve(image, "height", 100)];
+    case "medium":
+      return [delve(image, "formats.medium.width", 100), delve(image, "formats.medium.height", 100)];
+    case "small":
+      return [delve(image, "formats.small.width", 100), delve(image, "formats.small.height", 100)];
+    case "thumbnail":
+      return [delve(image, "formats.thumbnail.width", 100), delve(image, "formats.thumbnail.height", 100)];
+    default:
+      return [delve(image, "width", 100), delve(image, "height", 100)];
+  }
+}
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index 2aef0ef..c087e69 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/pages/_app.tsx
@@ -2,9 +2,21 @@ 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 {ThemeProvider} from "next-themes";
+
 import {wrapper} from "../store/store";
 
 import {environment} from "../environments/environment";
@@ -15,6 +27,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[],
@@ -37,7 +55,10 @@ const CustomApp = ({Component, pageProps: {session, ...pageProps}, menuFooter, m
   pageProps = {...pageProps, menuFooter, menuHeader, seo};
   return (
     <SessionProvider session={session}>
-      <Component {...pageProps} />
+      <ThemeProvider enableSystem={true}
+                     attribute="class">
+        <Component {...pageProps} />
+      </ThemeProvider>
     </SessionProvider>
   );
 }
diff --git a/apps/website/pages/blog/[category_slug]/[post_slug].tsx b/apps/website/pages/blog/[category_slug]/[post_slug].tsx
index 14c01b9..3c83dba 100644
--- a/apps/website/pages/blog/[category_slug]/[post_slug].tsx
+++ b/apps/website/pages/blog/[category_slug]/[post_slug].tsx
@@ -12,7 +12,7 @@ import CardBlogDetails from "../../../components/card-blog-details/card-blog-det
 
 export async function getServerSideProps(context) {
   const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`);
-  const lastPublished = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC`);
+  const lastPublished = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC`);
   const post = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&filters[slug]=${context.params.post_slug}`);
 
   if (!delve(post, "data.data.0.attributes", null)) {
diff --git a/apps/website/pages/blog/[category_slug]/index.tsx b/apps/website/pages/blog/[category_slug]/index.tsx
index df716ac..3f25420 100644
--- a/apps/website/pages/blog/[category_slug]/index.tsx
+++ b/apps/website/pages/blog/[category_slug]/index.tsx
@@ -16,8 +16,8 @@ export async function getServerSideProps(context) {
   const {query} = context;
   const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`);
   const category = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep&filters[slug]=${context.params.category_slug}`);
-  const lastPublished = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC`);
-  let postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC&filters[category][slug][$contains]=${context.params.category_slug}`;
+  const lastPublished = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC&sort=publishedAt:DESC`);
+  let postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC&filters[category][slug][$contains]=${context.params.category_slug}`;
   if (query && query.page) {
     postsUrl += `$pagination[page]=${query.page}`;
   }
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..8e780ab 100644
--- a/apps/website/pages/home/index.tsx
+++ b/apps/website/pages/home/index.tsx
@@ -1,16 +1,32 @@
+import axios from "axios";
+import delve from "dlv";
+
+import {environment} from "../../environments/environment";
+
 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}) {
+export async function getServerSideProps(context) {
+  const postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC&pagination[limit]=3`;
+  const posts = await axios.get(postsUrl);
+  return {
+    props: {
+      posts: delve(posts, 'data.data', []),
+    }
+  }
+}
+
+export function Home({menuHeader, menuFooter, seo, posts}) {
   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 posts={posts} />
         </main>
       </Layout>
     </>
diff --git a/apps/website/pages/index.tsx b/apps/website/pages/index.tsx
index 3966f48..569edc2 100644
--- a/apps/website/pages/index.tsx
+++ b/apps/website/pages/index.tsx
@@ -1,13 +1,33 @@
-import SeoConfig from "../components/seo-config/seo-config";
+import axios from "axios";
+import delve from 'dlv';
+
+import {environment} from "../environments/environment";
 
+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 async function getServerSideProps(context) {
+  const postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC&pagination[limit]=3`;
+  const posts = await axios.get(postsUrl);
+  return {
+    props: {
+      posts: delve(posts, 'data.data', []),
+    }
+  }
+}
 
-export function Index({menuHeader, menuFooter, page, seo}) {
+export function Index({menuHeader, menuFooter, posts, 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 posts={posts} />
+        </main>
       </Layout>
     </>
   );
diff --git a/apps/website/public/images/home.jpeg b/apps/website/public/images/home.jpeg
new file mode 100644
index 0000000..11032a1
Binary files /dev/null and b/apps/website/public/images/home.jpeg differ
diff --git a/package-lock.json b/package-lock.json
index 5ccb424..248a53c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9748,6 +9748,12 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -10124,6 +10130,11 @@
       "resolved": "https://registry.npmjs.org/next-redux-wrapper/-/next-redux-wrapper-8.1.0.tgz",
       "integrity": "sha512-2hIau0hcI6uQszOtrvAFqgc0NkZegKYhBB7ZAKiG3jk7zfuQb4E7OV9jfxViqqojh3SEHdnFfPkN9KErttUKuw=="
     },
+    "next-themes": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
+      "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A=="
+    },
     "node-abort-controller": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
@@ -11435,6 +11446,15 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "redux-mock-store": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/redux-mock-store/-/redux-mock-store-1.5.4.tgz",
+      "integrity": "sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==",
+      "dev": true,
+      "requires": {
+        "lodash.isplainobject": "^4.0.6"
+      }
+    },
     "redux-thunk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
diff --git a/package.json b/package.json
index b4e35d8..cf6d120 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "next": "13.1.1",
     "next-auth": "4.18.8",
     "next-redux-wrapper": "^8.1.0",
+    "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet": "6.0.0",
@@ -70,6 +71,7 @@
     "postcss": "8.4.19",
     "prettier": "2.6.2",
     "react-test-renderer": "18.2.0",
+    "redux-mock-store": "^1.5.4",
     "sass": "1.55.0",
     "ts-jest": "28.0.5",
     "ts-node": "10.9.1",