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 ca4604d..4eaf9b6 100644
--- a/apps/website/components/card-blog-details/card-blog-details.tsx
+++ b/apps/website/components/card-blog-details/card-blog-details.tsx
@@ -35,17 +35,20 @@ export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
         </h2>
         <section className="flex items-center justify-between">
           <div className="flex">
-            <a href="#"
-               className="flex items-center">
+            <span 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"
+                width="auto"
+                height="auto"
                 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>
+            </span>
           </div>
           <div className="flex flex-col">
             <a href={getCategoryUrl(item)}
+               title={"Accédez à la catégorie " + delve(item, 'category.data.attributes.name', 'N/A')}
+               aria-label={"Accédez à la catégorie " + delve(item, 'category.data.attributes.name', 'N/A')}
                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>
@@ -81,8 +84,7 @@ export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
               <FacebookMessengerShareButton
                 url={shareUrl}
                 appId="521270401588372"
-                className="Demo__some-network__share-button"
-              >
+                className="Demo__some-network__share-button">
                 <FacebookMessengerIcon size={32}
                                        round />
               </FacebookMessengerShareButton>
diff --git a/apps/website/components/card-blog/card-blog.tsx b/apps/website/components/card-blog/card-blog.tsx
index cc43aaa..b0aeacc 100644
--- a/apps/website/components/card-blog/card-blog.tsx
+++ b/apps/website/components/card-blog/card-blog.tsx
@@ -27,6 +27,8 @@ export function CardBlog({item}: CardBlogProps) {
               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)}
+               title={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
+               aria-label={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
                className="px-2 py-1 text-sm font-bold rounded
                bg-gray-600 text-gray-100
                hover:bg-gray-500">
@@ -35,6 +37,8 @@ export function CardBlog({item}: CardBlogProps) {
           </div>
           <div className="mt-2">
             <a
+              title={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
+              aria-label={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
               href={getPostUrl(item)}
               className="text-xl font-bold hover:underline
               text-gray-700
@@ -47,18 +51,21 @@ export function CardBlog({item}: CardBlogProps) {
           </div>
           <div className="flex justify-between items-center mt-4">
             <a href={getPostUrl(item)}
+               title={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
+               aria-label={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
                className="text-blue-500 text-sm hover:underline">Lire l'article</a>
             <div>
-              <a href="#"
-                 className="flex items-center">
+              <span 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"
+                  width="auto"
+                  height="auto"
                   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>
+              </span>
             </div>
           </div>
         </div>
diff --git a/apps/website/components/footer/footer.tsx b/apps/website/components/footer/footer.tsx
index 608d02d..43e45b9 100644
--- a/apps/website/components/footer/footer.tsx
+++ b/apps/website/components/footer/footer.tsx
@@ -6,8 +6,13 @@ export function Footer({items = []}) {
     const value = delve(item, 'attributes', {});
 
     return (
-      <li key={value.title + index} className="my-1">
-        <a href={value.url} target={value.target} className="mr-4 hover:underline md:mr-6 ">
+      <li key={value.title + index}
+          className="my-1 h-10 flex align-middle items-center md:h-auto">
+        <a href={value.url}
+           target={value.target}
+           title={"Accédez à la page " + value.title}
+           aria-label={"Accédez à la page " + value.title}
+           className="mr-4 hover:underline md:mr-6 ">
           {value.title}
         </a>
       </li>
@@ -17,17 +22,27 @@ export function Footer({items = []}) {
   return (
     <footer className="p-4 bg-white md:px-6 md:py-8 dark:bg-gray-900">
       <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"/>
+        <a href="/"
+           aria-label="Page d'accueil MeCP"
+           title="Page d'accueil MeCP"
+           className="flex items-center mb-4 sm:mb-0">
+          <img src="https://flowbite.com/docs/images/logo.svg"
+               className="h-8 mr-3"
+               height="auto"
+               width="auto"
+               alt="Flowbite Logo" />
           <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">
+        <ul className="flex flex-wrap items-center justify-end mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
           {items.map((item, index: number) => generateItem(item, index))}
         </ul>
       </div>
-      <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"/>
-      <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 3 <a
-        href="https://flowbite.com/" className="hover:underline">Flowbite™</a>. All Rights Reserved.
+      <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+      <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">©2023
+        <a href="/"
+           aria-label="Page d'accueil MeCP"
+           title="Page d'accueil MeCP"
+           className="hover:underline"> MeCP™</a>. All Rights Reserved.
     </span>
     </footer>
   );
diff --git a/apps/website/components/header/header.tsx b/apps/website/components/header/header.tsx
index d4850eb..2a9d163 100644
--- a/apps/website/components/header/header.tsx
+++ b/apps/website/components/header/header.tsx
@@ -50,6 +50,8 @@ export function Header({items = []}) {
     return (
       <a href={item.url}
          target={item.target}
+         title={"Accédez à la page " + item.title}
+         aria-label={"Accédez à la page " + item.title}
          className={"text-gray-900 hover:text-blue-600 dark:text-gray-400 dark:hover:bg-transparent dark:hover:text-gray-500 " + (isActive ? 'text-blue-600 dark:text-gray-500' : '') + " block py-2 pl-3 pr-4 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:p-0"}
          aria-current="page">{item.title}</a>
     )
@@ -60,6 +62,8 @@ export function Header({items = []}) {
     return (
       <li key={value.title + index}>
         <a href={value.url}
+           title={"Accédez à la page " + value.title}
+           aria-label={"Accédez à la page " + value.title}
            className="text-gray-900 dark:text-gray-400 hover:text-blue-600 dark:hover:text-gray-500">
           {value.title}
         </a>
@@ -86,7 +90,8 @@ export function Header({items = []}) {
         <div id="menu-dropdown"
              className="absolute z-10 grid hidden w-auto text-sm bg-white border border-gray-100 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-700">
           <div className="p-4 pb-0 text-gray-900 md:pb-4 dark:text-white">
-            <ul className="space-y-4" aria-labelledby="mega-menu-dropdown-button">
+            <ul className="space-y-4"
+                aria-labelledby="mega-menu-dropdown-button">
               {item.children.data.map((children, index) => renderRegularDropdownItem(children, index))}
             </ul>
           </div>
@@ -99,17 +104,21 @@ export function Header({items = []}) {
     return (
       <>
         <a href="/sign-in"
+           title="Page de connexion"
+           aria-label="Page de connexion"
            className="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2 md:px-5 md:py-2.5 mr-1 md:mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">
           <span className="hidden lg:block">Connexion</span>
           <span className="block lg:hidden">
-            <FontAwesomeIcon icon={faRightToBracket}/>
+            <FontAwesomeIcon icon={faRightToBracket} />
           </span>
         </a>
         <a href="/sign-up"
+           title="Page d'inscription"
+           aria-label="Page d'inscription"
            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 md:px-5 md:py-2.5 mr-1 md:mr-2 dark:bg-dark-600 dark:hover:bg-dark-500 focus:outline-none dark:focus:ring-blue-800">
           <span className="hidden lg:block">Inscription</span>
           <span className="block lg:hidden">
-            <FontAwesomeIcon icon={faUserPlus}/>
+            <FontAwesomeIcon icon={faUserPlus} />
           </span>
         </a>
       </>
@@ -120,14 +129,16 @@ export function Header({items = []}) {
     return (
       <>
         <button type="button"
+                role="button"
                 className="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
                 id="user-menu-button"
+                aria-label="Options de l'utilisateur"
                 aria-expanded="false"
                 data-dropdown-placement="bottom">
-          <span className="sr-only">Open user menu</span>
+          <span className="sr-only">Options de l'utilisateur</span>
           <img className="w-8 h-8 rounded-full"
                src={hasAvatar((session.user as any)) ? getBackendImg((session.user as any).avatar.formats.thumbnail.url) : siteConfig.defaultUserAvatar}
-               alt="user photo"/>
+               alt="user photo" />
         </button>
         <div
           className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
@@ -137,31 +148,40 @@ export function Header({items = []}) {
             <span
               className="block text-sm font-medium text-gray-500 truncate dark:text-gray-400">{session.user.email}</span>
           </div>
-          <ul className="py-1" aria-labelledby="user-menu-button">
+          <ul className="py-1"
+              aria-labelledby="user-menu-button">
             <li>
               <a href="#"
+                 aria-label="Profile"
+                 title="Profile"
                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
-                Dashboard
+                Profile
               </a>
             </li>
             <li>
               <a href="#"
+                 aria-label="Paramètres"
+                 title="Paramètres"
                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
-                Settings
+                Paramètres
               </a>
             </li>
             <li>
               <a href="#"
+                 aria-label="Mes cours"
+                 title="Mes cours"
                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
-                Earnings
+                Mes cours
               </a>
             </li>
             <li>
               <a href="#"
+                 title="Dconnexion"
+                 aria-label="Dconnexion"
                 // @ts-ignore
                  onClick={signOut}
                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
-                Sign out
+                Déconnexion
               </a>
             </li>
           </ul>
@@ -179,25 +199,42 @@ export function Header({items = []}) {
             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"/>
+              <a href="/"
+                 aria-label="Page d'accueil MeCP"
+                 title="Page d'accueil MeCP"
+                 className="flex items-center">
+                <img src="https://flowbite.com/docs/images/logo.svg"
+                     className="h-6 mr-3 sm:h-9"
+                     height="auto"
+                     width="auto"
+                     alt="Flowbite Logo" />
                 <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">MeCP</span>
               </a>
               <div className="flex items-center">
                 <button
+                  id="shop-panel-button"
+                  name="shop-panel-button"
+                  aria-label="Accéder au panier d'achat"
+                  role="button"
+                  type="button"
                   className="text-gray-700 border border-transparent hover:bg-gray-200 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center mr-2 dark:text-blue-500 dark:hover:text-white dark:focus:ring-blue-800">
-                  <FontAwesomeIcon icon={faBagShopping}/>
+                  <FontAwesomeIcon icon={faBagShopping} />
                 </button>
 
                 {session ? renderConnectedUser() : renderAnonymousUser()}
 
                 <button id="menu-button"
                         type="button"
+                        role="navigation"
                         className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                        aria-label="Déplier le menu"
                         aria-controls="navbar-dropdown"
                         aria-expanded="false">
                   <span className="sr-only">Open main menu</span>
-                  <svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
+                  <svg className="w-6 h-6"
+                       aria-hidden="true"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg">
                     <path fillRule="evenodd"
                           d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
@@ -207,15 +244,16 @@ export function Header({items = []}) {
               </div>
             </div>
           </section>
-          <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">
+          <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">
                 {items.map((item, index: number) => renderGenerateItem(item, index))}
               </ul>
             </div>
           </section>
-          <hr className="border-gray-100 sm:mx-auto dark:border-gray-700"/>
+          <hr className="border-gray-100 sm:mx-auto dark:border-gray-700" />
         </main>
       </div>
     </nav>
diff --git a/apps/website/components/home-section-blog-une/home-section-blog-une.tsx b/apps/website/components/home-section-blog-une/home-section-blog-une.tsx
index 8c42888..7eb7161 100644
--- a/apps/website/components/home-section-blog-une/home-section-blog-une.tsx
+++ b/apps/website/components/home-section-blog-une/home-section-blog-une.tsx
@@ -23,6 +23,8 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
         </div>
         <div className="flex justify-between items-center absolute right-5 top-5">
           <a href={getCategoryUrl(item)}
+             title={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
+             aria-label={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
              className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
             {delve(item, 'attributes.category.data.attributes.name', 'N/A')}
           </a>
@@ -40,6 +42,8 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
           <div className="mt-2">
             <a
               href={getPostUrl(item)}
+              title={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
+              aria-label={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
               className="text-xl font-bold hover:underline
                   text-gray-700
                   dark:text-gray-200">
@@ -52,18 +56,22 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
 
           <div className="flex justify-between items-center mt-4">
             <a href={getPostUrl(item)}
+               title={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
+               aria-label={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
                className="text-blue-500 text-sm hover:underline">Lire l'article</a>
             <div>
-              <a href="#"
+              <span
                  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"
+                  width="auto"
+                  height="auto"
                   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>
+              </span>
             </div>
           </div>
         </main>
diff --git a/apps/website/components/home-section-video/home-section-video.tsx b/apps/website/components/home-section-video/home-section-video.tsx
index b192e1f..515e040 100644
--- a/apps/website/components/home-section-video/home-section-video.tsx
+++ b/apps/website/components/home-section-video/home-section-video.tsx
@@ -1,7 +1,12 @@
-import styles from './home-section-video.module.scss';
+import dynamic from "next/dynamic";
+
+import {environment} from "../../environments/environment";
+
+const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
 
 /* eslint-disable-next-line */
-export interface HomeSectionVideoProps {}
+export interface HomeSectionVideoProps {
+}
 
 export function HomeSectionVideo(props: HomeSectionVideoProps) {
   return (
@@ -12,12 +17,12 @@ export function HomeSectionVideo(props: HomeSectionVideoProps) {
         </h2>
         <p className="text-lg text-gray-500 mb-10 text-center px-4 md:px-0">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>
+        <div className="player-wrapper max-w-[640px] mx-auto">
+          <ReactPlayer width="100%"
+                       height="100%"
+                       controls={true}
+                       url={environment.strapiUrl + "/uploads/record_player_011_c87b14fd49.mp4"} />
+        </div>
 
       </section>
     </>
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index c087e69..8c56f07 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/pages/_app.tsx
@@ -50,6 +50,24 @@ const getPageMetadata = async (path) => {
   }
 }
 
+const getCategoryMetadata = async (categorySlug) => {
+  try {
+    return await axios.get(`${environment.strapiApiUrl}/categories?filters[slug]=${categorySlug}&populate=deep`);
+  } catch (e) {
+    console.error(e);
+    return Promise.resolve({});
+  }
+}
+
+const getPostMetadata = async (postSlug) => {
+  try {
+    return await axios.get(`${environment.strapiApiUrl}/articles?filters[slug]=${postSlug}&populate=deep`);
+  } catch (e) {
+    console.error(e);
+    return Promise.resolve({});
+  }
+}
+
 
 const CustomApp = ({Component, pageProps: {session, ...pageProps}, menuFooter, menuHeader, seo}: CustomAppProps) => {
   pageProps = {...pageProps, menuFooter, menuHeader, seo};
@@ -68,7 +86,18 @@ CustomApp.getInitialProps = async (context) => {
   const path = context.router.pathname;
   const menuHeader = await axios.get(`${environment.strapiApiUrl}/menus/1?nested&populate=deep`);
   const menuFooter = await axios.get(`${environment.strapiApiUrl}/menus/2?nested&populate=deep`);
-  const page = await getPageMetadata(path);
+  let page = null;
+
+  console.log(context.ctx.query);
+  if (context.ctx.query.category_slug && !context.ctx.query.post_slug) {
+    page = await getCategoryMetadata(context.ctx.query.category_slug);
+  } else if (context.ctx.query.category_slug && context.ctx.query.post_slug) {
+    page = await getPostMetadata(context.ctx.query.post_slug);
+  } else if (Object.keys(context.ctx.query).length === 0) {
+    page = await getPageMetadata(path);
+  }
+
+  console.log(page);
 
   return {
     ...appProps,
diff --git a/apps/website/pages/about-us/index.module.scss b/apps/website/pages/about-us/index.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/pages/about-us/index.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/pages/about-us/index.tsx b/apps/website/pages/about-us/index.tsx
new file mode 100644
index 0000000..717c27a
--- /dev/null
+++ b/apps/website/pages/about-us/index.tsx
@@ -0,0 +1,22 @@
+import SeoConfig from "../../components/seo-config/seo-config";
+import Layout from "../../components/layout/layout";
+
+import styles from './index.module.scss';
+
+export function AboutUs({menuHeader, menuFooter, seo}) {
+  return (
+    <>
+      <SeoConfig {...seo} />
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <div className="container max-w-screen-xl px-6 py-4 md:py-12 h-full mx-auto">
+            <p>Contenu a venir</p>
+          </div>
+        </main>
+      </Layout>
+    </>
+  );
+}
+
+export default AboutUs;
diff --git a/apps/website/pages/contact-us/index.module.scss b/apps/website/pages/contact-us/index.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/pages/contact-us/index.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/pages/contact-us/index.tsx b/apps/website/pages/contact-us/index.tsx
new file mode 100644
index 0000000..125a244
--- /dev/null
+++ b/apps/website/pages/contact-us/index.tsx
@@ -0,0 +1,25 @@
+import styles from './index.module.scss';
+import SeoConfig from "../../components/seo-config/seo-config";
+import Layout from "../../components/layout/layout";
+
+/* eslint-disable-next-line */
+export interface ContactUsProps {
+}
+
+export function ContactUs({menuHeader, menuFooter, seo}) {
+  return (
+    <>
+      <SeoConfig {...seo} />
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <div className="container max-w-screen-xl px-6 py-4 md:py-12 h-full mx-auto">
+            <p>Contenu a venir</p>
+          </div>
+        </main>
+      </Layout>
+    </>
+  );
+}
+
+export default ContactUs;
diff --git a/apps/website/pages/pricing/index.module.scss b/apps/website/pages/pricing/index.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/pages/pricing/index.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/pages/pricing/index.tsx b/apps/website/pages/pricing/index.tsx
new file mode 100644
index 0000000..b820b28
--- /dev/null
+++ b/apps/website/pages/pricing/index.tsx
@@ -0,0 +1,21 @@
+import styles from './index.module.scss';
+import SeoConfig from "../../components/seo-config/seo-config";
+import Layout from "../../components/layout/layout";
+
+export function Pricing({menuHeader, menuFooter, seo}) {
+  return (
+    <>
+      <SeoConfig {...seo} />
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <div className="container max-w-screen-xl px-6 py-4 md:py-12 h-full mx-auto">
+            <p>Contenu a venir</p>
+          </div>
+        </main>
+      </Layout>
+    </>
+  );
+}
+
+export default Pricing;
diff --git a/apps/website/pages/school-programm/index.module.scss b/apps/website/pages/school-programm/index.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/pages/school-programm/index.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/pages/school-programm/index.tsx b/apps/website/pages/school-programm/index.tsx
new file mode 100644
index 0000000..9e557ae
--- /dev/null
+++ b/apps/website/pages/school-programm/index.tsx
@@ -0,0 +1,22 @@
+import SeoConfig from "../../components/seo-config/seo-config";
+import Layout from "../../components/layout/layout";
+
+import styles from './index.module.scss';
+
+export function SchoolProgramm({menuHeader, menuFooter, seo}) {
+  return (
+    <>
+      <SeoConfig {...seo} />
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <div className="container max-w-screen-xl px-6 py-4 md:py-12 h-full mx-auto">
+            <p>Contenu a venir</p>
+          </div>
+        </main>
+      </Layout>
+    </>
+  );
+}
+
+export default SchoolProgramm;
diff --git a/apps/website/pages/teachers/index.module.scss b/apps/website/pages/teachers/index.module.scss
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/apps/website/pages/teachers/index.module.scss
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/apps/website/pages/teachers/index.tsx b/apps/website/pages/teachers/index.tsx
new file mode 100644
index 0000000..f9d1fbe
--- /dev/null
+++ b/apps/website/pages/teachers/index.tsx
@@ -0,0 +1,22 @@
+import SeoConfig from "../../components/seo-config/seo-config";
+import Layout from "../../components/layout/layout";
+
+import styles from './index.module.scss';
+
+export function Teachers({menuHeader, menuFooter, seo}) {
+  return (
+    <>
+      <SeoConfig {...seo} />
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <div className="container max-w-screen-xl px-6 py-4 md:py-12 h-full mx-auto">
+            <p>Contenu a venir</p>
+          </div>
+        </main>
+      </Layout>
+    </>
+  );
+}
+
+export default Teachers;
diff --git a/package-lock.json b/package-lock.json
index 248a53c..90236c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9708,6 +9708,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -9907,6 +9912,11 @@
         "fs-monkey": "^1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -11364,6 +11374,25 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "react-player": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.11.2.tgz",
+      "integrity": "sha512-V5bf3g6lIpOjfKPUw18Og+qfizmlv6PQfJojlFiGpkfn/e21w5U4nSXE8vSIrFkfllgCrLM35nNGR1/jYQ8KIw==",
+      "requires": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
+      }
+    },
     "react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
diff --git a/package.json b/package.json
index cf6d120..d4c91ac 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "react-dom": "18.2.0",
     "react-helmet": "6.0.0",
     "react-hook-form": "7.42.1",
+    "react-player": "^2.11.2",
     "react-redux": "^8.0.5",
     "react-share": "^4.4.1",
     "rxjs": "7.8.0",