diff --git a/apps/website/components/blog-search/blog-search.tsx b/apps/website/components/blog-search/blog-search.tsx
index d3b2b03..4e259c0 100644
--- a/apps/website/components/blog-search/blog-search.tsx
+++ b/apps/website/components/blog-search/blog-search.tsx
@@ -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.tsx b/apps/website/components/card-blog-details/card-blog-details.tsx
index 6d849c1..732da5d 100644
--- a/apps/website/components/card-blog-details/card-blog-details.tsx
+++ b/apps/website/components/card-blog-details/card-blog-details.tsx
@@ -13,9 +13,8 @@ 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 {
@@ -23,70 +22,78 @@ export interface CardBlogDetailsProps {
 }
 
 export function CardBlogDetails({item}: CardBlogDetailsProps) {
-  const {alternativeText, width, height} = item.image.data.attributes;
-  const {slug} = item.category.data.attributes;
+  const {width, height} = 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.tsx b/apps/website/components/card-blog/card-blog.tsx
index 51b33fc..14c4fb6 100644
--- a/apps/website/components/card-blog/card-blog.tsx
+++ b/apps/website/components/card-blog/card-blog.tsx
@@ -1,9 +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} from "../../libs/utils";
+import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
 
 /* eslint-disable-next-line */
 export interface CardBlogProps {
@@ -12,38 +11,53 @@ export interface CardBlogProps {
 
 export function CardBlog({item}: CardBlogProps) {
   return (
-    <div className={styles['card-blog-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>
+              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 bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
+               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={getPostUrl(item)}
-              className="text-xl text-gray-700 font-bold hover:underline">
+              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={getPostUrl(item)} 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/header/header.tsx b/apps/website/components/header/header.tsx
index 56b83fc..d4850eb 100644
--- a/apps/website/components/header/header.tsx
+++ b/apps/website/components/header/header.tsx
@@ -176,7 +176,7 @@ export function Header({items = []}) {
       <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">
@@ -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.tsx b/apps/website/components/home-section-blog/home-section-blog.tsx
index 037618a..1ece372 100644
--- a/apps/website/components/home-section-blog/home-section-blog.tsx
+++ b/apps/website/components/home-section-blog/home-section-blog.tsx
@@ -13,7 +13,6 @@ export interface HomeSectionBlogProps {
 export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
   const firstArticle = posts.length > 0 ? posts.slice(0, 1) : [];
   const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : [];
-  console.log(firstArticle, otherArticles);
   const [width, height] = getStrapiImageSize(firstArticle[0]);
   return (
     <>
@@ -21,11 +20,10 @@ export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
         <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
-          hover:bg-gray-100
-          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+          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>
+              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])}
@@ -46,21 +44,30 @@ export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
             <main className="p-5">
               <div className="mt-2">
                 <a
-                  href={'/blog/' + delve(firstArticle[0], 'attributes.category.data.attributes.slug', '') + '/' + delve(firstArticle[0], 'attributes.slug', '')}
-                  className="text-xl text-gray-700 font-bold hover:underline">
+                  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">{delve(firstArticle[0], 'attributes.description', 'N/A')}</p>
+                <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>
+                <a href={getPostUrl(firstArticle[0])}
+                   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>
@@ -68,7 +75,8 @@ export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
           </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} />))}
+          {otherArticles.map((item: object, index: number) => (<CardBlog key={"home-card-blog-" + index}
+                                                                         item={item} />))}
         </div>
       </section>
     </>
diff --git a/apps/website/components/home-section-comments/home-section-comments.tsx b/apps/website/components/home-section-comments/home-section-comments.tsx
index 7fa7e3d..434005e 100644
--- a/apps/website/components/home-section-comments/home-section-comments.tsx
+++ b/apps/website/components/home-section-comments/home-section-comments.tsx
@@ -5,14 +5,18 @@ export interface HomeSectionCommentsProps {
 export function HomeSectionComments(props: HomeSectionCommentsProps) {
   return (
     <>
-      <section className="w-full bg-white py-10 my-10">
+      <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="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0">
+            <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"
@@ -64,7 +68,9 @@ export function HomeSectionComments(props: HomeSectionCommentsProps) {
                 <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">
+            <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"
@@ -116,7 +122,9 @@ export function HomeSectionComments(props: HomeSectionCommentsProps) {
                 <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">
+            <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"
diff --git a/apps/website/components/home-section-grid/home-section-grid.tsx b/apps/website/components/home-section-grid/home-section-grid.tsx
index 9137fc0..d74a55b 100644
--- a/apps/website/components/home-section-grid/home-section-grid.tsx
+++ b/apps/website/components/home-section-grid/home-section-grid.tsx
@@ -5,15 +5,23 @@ 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">
+      <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 text-xl font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl dark:text-white">
+            <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>
+            <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>
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/libs/utils.ts b/apps/website/libs/utils.ts
index 106727a..83ffe36 100644
--- a/apps/website/libs/utils.ts
+++ b/apps/website/libs/utils.ts
@@ -5,14 +5,18 @@ import {environment} from "../environments/environment";
 export type ImageFormatType = "default" | "thumbnail" | "medium" | "small";
 
 export const getCategoryUrl = (item): string => {
-  return '/blog/' + delve(item, 'attributes.category.data.attributes.slug', '');
+  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 => {
-  return '/blog/' + getCategoryUrl(item) + '/' + delve(item, 'attributes.slug', '');
+  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.image.data.attributes', {});
+  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");
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index 0f41953..c087e69 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/pages/_app.tsx
@@ -3,14 +3,20 @@ import {SessionProvider} from "next-auth/react";
 import {config, library} from "@fortawesome/fontawesome-svg-core";
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import {
-  faBagShopping, faChalkboardUser,
-  faGraduationCap, faGuitar, faLinesLeaning,
-  faRightToBracket, faScrewdriverWrench,
+  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";
@@ -49,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/index.tsx b/apps/website/pages/index.tsx
index 17eb57b..569edc2 100644
--- a/apps/website/pages/index.tsx
+++ b/apps/website/pages/index.tsx
@@ -1,18 +1,32 @@
-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 function Index({menuHeader, menuFooter, page, 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 Index({menuHeader, menuFooter, posts, seo}) {
   return (
     <>
       <SeoConfig {...seo} />
       <Layout menuHeader={menuHeader}
               menuFooter={menuFooter}>
         <main className={styles['blog-container'] + " w-full"}>
-          <HomeContent />
+          <HomeContent posts={posts} />
         </main>
       </Layout>
     </>
diff --git a/package-lock.json b/package-lock.json
index 5ccb424..2a560fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10124,6 +10124,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",
diff --git a/package.json b/package.json
index b4e35d8..70ddf1a 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",