diff --git a/docusaurus.config.js b/docusaurus.config.js
index 06723cc2b9c165ae7372aab8ff363eeab72b3316..3a46cb457e1465857109f49d9e577d92fae2599a 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -3,7 +3,7 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
-  title: "Forggit.fr",
+  title: "Simplifiez-vous le code !",
   tagline: "Froggit aide à booster la coopération des Dev, Ops et autres Techs des entreprises autour du code source, sans gérer une infrastructure complexe !",
   url: "https://new.froggit.fr",
   baseUrl: "/",
@@ -16,7 +16,7 @@ module.exports = {
     navbar: {
       title: "Froggit",
       logo: {
-        alt: "My Site Logo",
+        alt: "Froggit Logo",
         src: "img/logo_froggit.svg",
       },
       items: [      
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 42a0e6c563edb8345b571af3da10fb03b97a3208..4ef112448a43fdaf568508382a9c2c4f6fe03107 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -10,7 +10,7 @@ const FeatureList = [
     Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C&apos;est plus qu&apos;un serveur Git puisque vous pouvez gérer un projet complet dessus. Le Lab est le cœur de Froggit et il sert aussi de base centrale pour l’authentification unique (SSO) des autres services.</p>
+        Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C&apos;est plus qu&apos;un serveur Git puisque vous pouvez gérer un projet complet dessus. Le Lab est le cœur de Froggit et il sert aussi de base centrale pour l’authentification unique (SSO) des autres services.
       </>
     ), 
   },     
@@ -19,7 +19,7 @@ const FeatureList = [
     Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>Fournir un outil de collaboration de code sans Intégration Continue n&apos;était pas pensable pour nous. C&apos;est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.</p>
+        Fournir un outil de collaboration de code sans Intégration Continue n&apos;était pas pensable pour nous. C&apos;est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.
       </>
     ), 
   },
@@ -28,7 +28,7 @@ const FeatureList = [
     Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>Pour collaborer les équipes ont besoin de communiquer. Qu&apos;elles soient physiquement au même endroit ou non une communication asynchrone est importante. C&apos;est pour cela que Froggit inclut un chat avec le service. Vous pourrez même faire remonter vos alertes et messages venant du Lab. L&apos;authentification se fera grâce au Lab, vous n&apos;aurez qu&apos;un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !</p>
+        Pour collaborer les équipes ont besoin de communiquer. Qu&apos;elles soient physiquement au même endroit ou non une communication asynchrone est importante. C&apos;est pour cela que Froggit inclut un chat avec le service. Vous pourrez même faire remonter vos alertes et messages venant du Lab. L&apos;authentification se fera grâce au Lab, vous n&apos;aurez qu&apos;un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !
       </>
     ),
   },
@@ -37,7 +37,7 @@ const FeatureList = [
     Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>Vous avez besoin de créer des sites statiques pour vos documentations. C&apos;est pour cela que nous mettons en place les GitLab pages qui vous permettent d&apos;héberger des sites statiques.</p>
+        Vous avez besoin de créer des sites statiques pour vos documentations. C&apos;est pour cela que nous mettons en place les GitLab pages qui vous permettent d&apos;héberger des sites statiques.
       </>
     ),
   },
diff --git a/src/css/custom.css b/src/css/custom.css
index 48cbe3942d44dfc688fac12b4aa3382ab49b5f2b..b8aac77bd0dadef210768689c27bee1dd836a726 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -20,9 +20,11 @@
   --ifm-color-tonic-three: #805D93;
   --ifm-color-primary-dark: #0c0c0cb0;
   --ifm-color-primary-light: #ffffff;
+  --ifm-button-color: var(--ifm-color-primary);
   --ifm-code-font-size: 95%; 
   --ifm-font-family-base: "Comfortaa", cursive;
-  --ifm-font-family: "Montserrat",  sans-serif; 
+  --ifm-font-family: "Montserrat",  sans-serif;
+  --ifm-navbar-shadow: none; 
 }
 
 .docusaurus-highlight-code-line {
@@ -67,6 +69,20 @@ p {
   font-size: 18px;
 } 
 
+.navbar--fixed-top {
+  position: sticky; 
+  top: 0;
+  z-index: 1; 
+ } 
+
+header {
+  height: 500px;
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 6vw),0 100%)
+}
+
 /************ main elements style***********/
 .sections {
   padding: 4rem 0;
@@ -90,8 +106,12 @@ p {
   font-family: var( --ifm-font-family);
 }
 
+
 /************ sub-footer style ***********/
 .footer__bottom {
   font-family: var(--ifm-font-family); 
   font-weight: 600;
 } 
+
+
+
diff --git a/src/pages/index.js b/src/pages/index.js
index aa1da7c2924bf7e25fd60e089d1b61b586f4db33..094de15e2d9cad9ec44f3c90a187bc9002733add 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,27 +1,33 @@
 import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
+import Layout from "@theme/Layout"; 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
+import Link from "@docusaurus/Link";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header className={styles.heroBanner}>
       <div className="container">
-        <h1 className="hero__subtitle">{siteConfig.tagline}</h1>
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <Link className="button button--warning button--lg" to="https://youtu.be/gOCOai6wX_w">
+              En savoir plus
+        </Link>
+
       </div>
-    </header>
+    </header>      
   );
 }
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (
+    
     <Layout
-      title={`Hello from ${siteConfig.title}`}
+      title={siteConfig.themeConfig.navbar.title}
       description="Description will go into a meta tag in <head />"
     >
       <HomepageHeader />
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 3f2b62a28ce2ba1fe0f6f302b6d75fb5a4655e8d..57121c524c6cf6b2f820245af2f7461d7af6686c 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -9,8 +9,11 @@
   padding: 4rem 0; 
   text-align: center;
   position: relative;
-  overflow: hidden visible;
-  background-color: var(--ifm-color-light-green);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+  background-color: var(--ifm-color-light-green);  
 }
 
  @media screen and (max-width: 966px) {
@@ -19,8 +22,9 @@
   }
 }
 
-.buttons {
+.container {
+  height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
-}
+}