diff --git a/__tests__/components/ab-testing/give-access-to-resources.test.js b/__tests__/components/ab-testing/give-access-to-resources.test.js
deleted file mode 100644
index 184f9263..00000000
--- a/__tests__/components/ab-testing/give-access-to-resources.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react"
-import { GiveAccessToResources } from "../../../src/components/ab-testing/resources/GiveAccessToResources"
-import { STORAGE_TEST_ABC } from "../../../src/constants/constants"
-import * as AbTestingUtils from "../../../src/utils/ab-testing/ab-testing.utils"
-
-describe("UI de GiveAccessToResources", () => {
-  describe("TEST A/B/C/D", () => {
-    const mailBtnText = "Je souhaite recevoir les ressources par mail"
-
-    test("Should return modal with email when test is A", async () => {
-      localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.A)
-      render(<GiveAccessToResources />)
-
-      const button = screen.getByRole("button", { name: mailBtnText })
-      expect(button).toBeInTheDocument()
-
-      fireEvent.click(button)
-      expect(await screen.queryByText("Fermer")).toBeInTheDocument()
-    })
-
-    test("Should return modal with email when test is B", async () => {
-      localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.B)
-      render(<GiveAccessToResources />)
-
-      const button = screen.getByRole("button", { name: mailBtnText })
-      expect(button).toBeInTheDocument()
-
-      fireEvent.click(button)
-      expect(await screen.queryByText("Fermer")).toBeInTheDocument()
-    })
-  })
-})
diff --git a/__tests__/pages/contact/to-be-contacted.test.js b/__tests__/pages/contact/to-be-contacted.test.js
index 738cea80..bad1d5d0 100644
--- a/__tests__/pages/contact/to-be-contacted.test.js
+++ b/__tests__/pages/contact/to-be-contacted.test.js
@@ -6,11 +6,6 @@ import { RequestContact } from "../../../src/constants/constants"
 
 describe("Demande de contact", () => {
   describe("Validité des choix seléctionnés", () => {
-    test("Sélection du type Chat => choix valide", () => {
-      const result = isValidButtonEnabled(RequestContact.type.chat, undefined)
-      expect(result).toEqual(true)
-    })
-
     test("Sélection du type RDV => choix valide", () => {
       const result = isValidButtonEnabled(
         RequestContact.type.rendezvous,
@@ -19,11 +14,6 @@ describe("Demande de contact", () => {
       expect(result).toEqual(true)
     })
 
-    test("Sélection du type Email => choix valide", () => {
-      const result = isValidButtonEnabled(RequestContact.type.email, undefined)
-      expect(result).toEqual(true)
-    })
-
     test("Sélection du type SMS sans horaire => choix invalide", () => {
       const result = isValidButtonEnabled(RequestContact.type.sms, undefined)
       expect(result).toEqual(false)
diff --git a/__tests__/utils/contact.utils.test.js b/__tests__/utils/contact.utils.test.js
index 4e4d772b..d8c1f53f 100644
--- a/__tests__/utils/contact.utils.test.js
+++ b/__tests__/utils/contact.utils.test.js
@@ -7,24 +7,10 @@ import * as TrackerUtils from "../../src/utils/tracker.utils"
  * @param {*} label
  */
 const sendTrackerContactConfirmed = (contactType) => {
-  if (contactType === "chat") {
-    TrackerUtils.trackerForContact(`Ouverture ${contactType}`)
-  } else {
-    TrackerUtils.trackerForContact(`Confirmation ${contactType}`)
-  }
+  TrackerUtils.trackerForContact(`Confirmation ${contactType}`)
 }
 
 describe("Contact Utils", () => {
-  describe("trackerContactName", () => {
-    test("Should return confirmation mail if email type is selected", () => {
-      expect(ContactUtils.trackerContactName("email")).toEqual(
-        "Confirmation email"
-      )
-    })
-    test("Should return confirmation mail if chat type is selected", () => {
-      expect(ContactUtils.trackerContactName("chat")).toEqual("Ouverture chat")
-    })
-  })
   describe("sendTrackerContactConfirmed", () => {
     let trackerSpy
     localStorage.setItem(STORAGE_SOURCE, "1000-premiers-jours")
@@ -36,21 +22,10 @@ describe("Contact Utils", () => {
       jest.restoreAllMocks()
     })
 
-    test("Should send tracker with email confirmation", () => {
-      sendTrackerContactConfirmed(RequestContact.type.email)
-      expect(trackerSpy).toHaveBeenCalledWith("Confirmation email")
-    })
-
     test("Should send tracker with sms confirmation", () => {
       sendTrackerContactConfirmed(RequestContact.type.sms)
       expect(trackerSpy).toHaveBeenCalledWith(`Confirmation sms`)
     })
-
-    test("Should send tracker with chat opening", () => {
-      sendTrackerContactConfirmed(RequestContact.type.chat)
-      expect(trackerSpy).toHaveBeenCalled()
-      expect(trackerSpy).toHaveBeenCalledWith("Ouverture chat")
-    })
   })
 
   describe("isMamanBluesAvailableHours", () => {
diff --git a/apollo-client.js b/apollo-client.js
index 1bb1cdfa..5426a428 100644
--- a/apollo-client.js
+++ b/apollo-client.js
@@ -9,6 +9,36 @@ export const client = new ApolloClient({
   link: new HttpLink({ uri: `${API_URL}/graphql?nocache`, fetch }),
 })
 
+export const GET_INFORMATION_PRO_SANTE = gql`
+  query annuaire1000JBlues {
+    annuaire1000JBlues {
+      type
+      prenom
+      nom
+      profession
+      telephone1
+      telephone2
+      adresse
+      ville
+      code_postal
+      region
+      departement
+      longitude
+      latitude
+      tarif
+      conventionne_securite_sociale
+    }
+  }
+`
+
+export const GET_ACTIVATION_TILE_STATUS = gql`
+  query activationTile {
+    activationTile {
+      activation_tile
+    }
+  }
+`
+
 export const EPDS_ADD_SURVEY_RESULTS = gql`
   mutation (
     $genre: ENUM_REPONSESEPDS_GENRE!
@@ -78,18 +108,6 @@ export const EPDS_CONTACT_INFORMATION = gql`
   }
 `
 
-export const GET_ACTIVATION_CHAT_STATUS = gql`
-  query activationChat {
-    activationChat {
-      activation_chat
-      matin_de
-      matin_a
-      apres_midi_de
-      apres_midi_a
-    }
-  }
-`
-
 export const GET_TEMOIGNAGES_CHIFFRES = gql`
   query temoignages {
     temoignages {
diff --git a/next.config.js b/next.config.js
index 4f8a687e..1e45d980 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1,8 @@
-module.exports = {
+const withTM = require("next-transpile-modules")(["@codegouvfr/react-dsfr"])
+
+module.exports = withTM({
   reactStrictMode: true,
+  swcMinify: true,
   i18n: {
     locales: ["fr-FR"],
     defaultLocale: "fr-FR",
@@ -21,4 +24,5 @@ module.exports = {
 
     return config
   },
-}
+  transpilePackages: ["@codegouvfr/react-dsfr"],
+})
diff --git a/package.json b/package.json
index 3f7e49bd..ad5ef4c5 100644
--- a/package.json
+++ b/package.json
@@ -10,24 +10,28 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.7",
+    "@codegouvfr/react-dsfr": "^0.46.4",
     "@dataesr/react-dsfr": "^3.3.5",
-    "@gouvfr/dsfr": "^1.8.1",
     "@socialgouv/matomo-next": "^1.4.0",
     "@socialgouv/nos1000jours-lib": "^1.7.0",
     "bootstrap": "^5.1.3",
     "crisp-sdk-web": "^1.0.5",
     "cross-fetch": "^3.1.4",
+    "framer-motion": "^10.11.4",
     "graphql": "^16.2.0",
     "html-react-parser": "^3.0.4",
     "jspdf": "^2.5.1",
     "moment": "^2.29.1",
     "next": "12.2.6",
+    "next-transpile-modules": "^10.0.0",
     "papaparse": "^5.3.2",
     "react": "17.0.2",
     "react-bootstrap": "^2.1.0",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendly": "^4.1.1",
     "react-dom": "17.0.2",
+    "react-router-dom": "^6.10.0",
+    "remixicon": "^3.2.0",
     "sass": "^1.48.0",
     "swr": "^1.3.0"
   },
diff --git a/pages/_app.js b/pages/_app.js
index f438f0a7..49f332d1 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,6 @@
 import "bootstrap/dist/css/bootstrap.css"
 import "../styles/index.scss"
+import "remixicon/fonts/remixicon.css"
 import "@gouvfr/dsfr/dist/dsfr/dsfr.min.css"
 
 import { init } from "@socialgouv/matomo-next"
diff --git a/pages/article-dpp.js b/pages/article-dpp.js
new file mode 100644
index 00000000..d3c0fecf
--- /dev/null
+++ b/pages/article-dpp.js
@@ -0,0 +1,218 @@
+import { ContentLayout } from "../src/components/Layout"
+import { WidgetHeader } from "../src/components/WidgetHeader"
+import { BeBetter } from "../src/components/results/BeBetter"
+import { STORAGE_SCORE } from "../src/constants/constants"
+import { Icon, MediaVideo } from "@dataesr/react-dsfr"
+import * as StorageUtils from "../src/utils/storage.utils"
+
+const Callout = ({ title, description, theme }) => {
+  return (
+    <div className={`fr-callout ${theme}`}>
+      <div className="logo-with-title ">
+        <Icon className="userIcon" name="ri-information-line" size="xl" />
+        <h6 className="my-font">{title}</h6>
+      </div>
+      <p className="fr-callout__text my-font">{description}</p>
+    </div>
+  )
+}
+
+export default function ArticleDpp() {
+  const localeSelected = StorageUtils.getLocaleInLocalStorage()
+  const scoreValue = StorageUtils.getInLocalStorage(STORAGE_SCORE)
+  const score = parseInt(scoreValue)
+
+  return (
+    <ContentLayout>
+      <WidgetHeader
+        title="Le baby blues et la dépression post-partum"
+        locale={localeSelected}
+      />
+      <p className="text-bold">
+        L’arrivée d’un bébé est un grand bouleversement dans la vie des parents,
+        pour la mère et aussi pour le père. <br /> Parfois les émotions
+        négatives prennent le dessus : fatigue, déprime, tristesse, voire
+        anxiété, culpabilité… Il est important de mieux connaitre le baby blues
+        et la dépression post-partum, pour savoir comment réagir.
+      </p>
+      <MediaVideo size="sm" onTranscriptionClick={function noRefCheck() {}}>
+        <iframe
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          className="fr-responsive-vid__player"
+          frameBorder="0"
+          src="/videos/EX2_AGIR_POUR_BEBE_LA_DEPRESSION_POST_PARTUM_DEF_MIX_STT_SD.mp4"
+          title="La dépression post-partum"
+        />
+      </MediaVideo>
+      <h5 className="text-color">Qu’est-ce que le baby-blues ?</h5>
+      <p>
+        Quelques jours après l’accouchement, la majorité des mamans traverse une
+        période de déprime qu’on appelle " baby blues ".{" "}
+        <span className="text-bold">
+          C’est une réaction causée par tous les changements physiques,
+          hormonaux et psychologiques liés à l’accouchement.
+        </span>
+        <br />
+        <br />
+        La maman peut alors :
+      </p>
+      <div className="container-list">
+        <ul>
+          <li>
+            se mettre à pleurer "pour un rien", avoir des crises de larmes,
+          </li>
+          <li>
+            avoir des sautes d'humeur, comme être tout d'un coup irritable,
+          </li>
+          <li>se sentir dépassée par les événements,</li>
+          <li>perdre ses repères, sa confiance en elle.</li>
+        </ul>
+      </div>
+      <p>
+        Le baby blues peut durer quelques heures ou quelques jours. En général,
+        les symptômes disparaissent tous seuls. Pour autant, le conjoint ou
+        l’entourage peuvent apporter soutien et réconfort.{" "}
+        <span className="text-bold">
+          Si les symptômes durent plus de deux semaines, il faut en parler à un
+          professionnel de santé,
+        </span>{" "}
+        comme son médecin ou sa sage-femme. C’est peut-être une dépression
+        post-partum.
+      </p>
+      <div className="my-font">
+        <Callout
+          title="C'EST VOUS QUI LE DITES"
+          description="« Après la naissance de Mia, ma femme a traversé quelques jours
+        difficiles... C’était dur d’être impuissant face à toutes ses émotions.
+        Alors en attendant que cela passe, j’ai tout fait pour la réconforter et
+        la soulager en m’occupant de la maison et de la petite. » (Paul, 36 ans)"
+          theme="fr-callout--brown-caramel"
+        />
+        <Callout
+          title="FOCUS & BIEN-ÊTRE"
+          description="Les promenades en extérieur, sortir prendre l’air, c’est bon pour se sentir mieux ! Cela détend et favorise le sommeil : ça peut faire du bien en cas de baby-blues aussi. Si on n’a pas envie de sortir, on peut trouver autre chose qui nous fait du bien !"
+          theme="fr-callout--green-emeraude"
+        />
+      </div>
+      <h5 className="text-color">Qu’est-ce que la dépression post-partum ?</h5>
+      <p>
+        <span className="text-bold">
+          {" "}
+          La dépression post-partum est une maladie
+        </span>{" "}
+        qui peut apparaître pendant les semaines et les mois suivant
+        l’accouchement. Elle se manifeste en général progressivement avec un ou
+        plusieurs symptômes comme :
+      </p>
+      <div className="container-list">
+        <ul>
+          <li>Une sensation de manque d’énergie.</li>
+          <li>Des difficultés à s’occuper de son bébé.</li>
+          <li>Une incapacité à réaliser les tâches du quotidien.</li>
+          <li>Une perte de plaisir, parfois même dans sa vie sociale.</li>
+          <li>Une profonde tristesse sans raisons apparente, des larmes.</li>
+          <li>
+            Des pensées négatives, comme de la culpabilité, ou un sentiment
+            d’incompétence.
+          </li>
+          <li>
+            Des difficultés à dormir, souvent à cause de l’anxiété ou du stress.
+          </li>
+          <li>Un changement d’appétit.</li>
+        </ul>
+      </div>
+      <p>
+        La dépression post-partum, qu’on appelle aussi dépression{" "}
+        <span className="text-bold">post-natale</span> ou périnatale, peut durer
+        des mois, et parfois même se prolonger au-delà d’un an.
+      </p>
+      <p>
+        <span className="text-bold">
+          Près d’une mère sur cinq est touchée par une dépression post-partum
+          dans les 4 semaines qui suivent l’accouchement.
+        </span>{" "}
+        Cette maladie peut toucher tout le monde. Il ne faut pas avoir honte de
+        souffrir d’une dépression.
+      </p>
+      <Callout
+        title="LE SAVIEZ-VOUS ?"
+        description="Beaucoup de dépressions post-partum ne sont pas identifiées et les personnes touchées ne reçoivent pas de soins. Si on a des doutes pour un proche, on n’hésite pas à lui en parler.        "
+        theme="fr-callout--beige-gris-galet"
+      />
+      <h5 className="text-color">
+        Est-ce que les pères peuvent aussi faire une dépression post-partum ?
+      </h5>
+      <p className="container-list">
+        <span className="text-bold">
+          Près d’un père sur dix traverse une dépression pendant la grossesse ou
+          peu après la naissance de son bébé.
+        </span>{" "}
+        C’est une période de changements qui peut être bouleversante pour les
+        papas aussi. Les symptômes de la dépression post-partum chez les pères
+        peuvent être :
+      </p>
+      <div className="container-list">
+        <ul>
+          <li>Des doutes.</li>
+          <li>De la perte de confiance en soi.</li>
+          <li>Une absence d’envie de s’occuper ou s’intéresser au bébé.</li>
+          <li>Une envie de s’absenter du domicile.</li>
+          <li>La peur d’être jugé.</li>
+          <li>Un sentiment de ne pas trouver sa place.</li>
+        </ul>
+      </div>
+      <Callout
+        title="ON EN PARLE"
+        description="La dépression post-partum chez les pères peut s’accompagner d’anxiété, de consommation de drogues/d’alcool, de troubles du sommeil, de conflits conjugaux…"
+        theme="fr-callout--orange-terre-battue"
+      />
+      <h5 className="text-color">
+        Que faire quand on présente des symptômes de dépression ?
+      </h5>
+      <p className="container-list">
+        La dépression post-partum est une maladie qui se soigne.{" "}
+        <span className="text-bold">
+          Et comme pour la plupart des maladies, on ne la soigne pas seul.
+        </span>{" "}
+        Alors si on reconnaît un ou plusieurs symptômes, mieux vaut en parler
+        rapidement à un professionnel de santé. On peut se tourner vers :
+      </p>
+      <div className="container-list">
+        <ul>
+          <li>sa sage-femme,</li>
+          <li>son médecin traitant,</li>
+          <li>le centre de PMI,</li>
+          <li>un psychologue,</li>
+          <li>
+            voire l’hôpital dans une consultation de pédopsychiatrie périnatale.
+          </li>
+        </ul>
+      </div>
+      <p>
+        On pourra recevoir une aide, du soutien, des soins. Un traitement sera
+        probablement nécessaire. Plus la dépression du post-partum est soignée
+        tôt, plus les conséquences pourront être évitées. On peut aussi avoir
+        envie d’en parler avec d’autres parents, par exemple dans un lieu
+        d’accueil parent-enfant ou un groupe de parents.
+      </p>
+      <Callout
+        title="C'EST VOUS QUI LE DITES"
+        description="« Ma cousine n’avait pas envie de s’occuper de son bébé, et son homme ne comprenait pas, il était exaspéré. Je lui ai dit qu’elle devait faire une dépression et qu’il fallait qu’il la soutienne sans la juger. A nous deux on a réussi à la convaincre de se faire aider et maintenant c’est une vraie mère-poule. » (Léa, 29 ans)"
+        theme="fr-callout--brown-caramel"
+      />
+      <h5 className="text-color">
+        Pourquoi est-ce important de se faire aider en cas de dépression
+        post-partum ?
+      </h5>
+      <p>
+        La dépression post-partum a évidemment un impact sur la qualité de vie
+        de la personne qui en souffre, et souvent sur sa relation de couple.
+        Elle peut même parfois amener à une perte de goût à la vie, et dans les
+        cas les plus extrêmes, à des pensées suicidaires. Quand on soigne une
+        dépression post-partum, le parent va mieux, et ainsi a moins de
+        difficultés à prendre soin de son enfant.
+      </p>
+      <BeBetter score={score} linkActive={false} />
+    </ContentLayout>
+  )
+}
diff --git a/pages/contact/contact-form.js b/pages/contact/contact-form.js
index f4daa9af..2cd2bc89 100644
--- a/pages/contact/contact-form.js
+++ b/pages/contact/contact-form.js
@@ -30,7 +30,6 @@ import { WidgetHeader } from "../../src/components/WidgetHeader"
 import { Form } from "../../src/constants/specificLabels"
 import * as ContactUtils from "../../src/utils/contact.utils"
 import * as TrackerUtils from "../../src/utils/tracker.utils"
-import * as AbTestingUtils from "../../src/utils/ab-testing/ab-testing.utils"
 
 export default function ContactForm() {
   const router = useRouter()
@@ -168,8 +167,6 @@ export default function ContactForm() {
     if (typeContact) {
       TrackerUtils.trackerForContact(TrackerUtils.ACTION.confirmation)
       TrackerUtils.trackerForContact(ContactUtils.trackerContactName(typeContact))
-      AbTestingUtils.trackerForAbTesting(TrackerUtils.ACTION.confirmation)
-      AbTestingUtils.trackerForAbTesting(ContactUtils.trackerContactName(typeContact))
     }
   }
 
diff --git a/pages/contact/contact-urgence.js b/pages/contact/contact-urgence.js
new file mode 100644
index 00000000..5648b3f7
--- /dev/null
+++ b/pages/contact/contact-urgence.js
@@ -0,0 +1,28 @@
+import { ContentLayout } from "../../src/components/Layout"
+import { WidgetHeader } from "../../src/components/WidgetHeader"
+import { EmergencyCard } from "../../src/components/contact/EmergencyCard"
+import * as StorageUtils from "../../src/utils/storage.utils"
+import { ACTION } from "../../src/utils/tracker.utils"
+
+export default function ContactUrgence() {
+  const localeSelected = StorageUtils.getLocaleInLocalStorage()
+  return (
+    <ContentLayout>
+      <WidgetHeader title="Numéro d'urgence" locale={localeSelected} />
+
+      <EmergencyCard
+        emergencyText="Allô, Parents en crise"
+        emergencyPhone={"0805382300"}
+        isSOS={true}
+        action={ACTION.number_sos}
+      />
+      <EmergencyCard
+        emergencyText="Numéro national de prévention du suicide."
+        emergencyPhone={3114}
+        schedule="Disponible 24/7"
+        isSOS={false}
+        action={ACTION.number_suicide}
+      />
+    </ContentLayout>
+  )
+}
diff --git a/pages/contact/to-be-contacted.js b/pages/contact/to-be-contacted.js
index ca1890c6..a2f7dc3a 100644
--- a/pages/contact/to-be-contacted.js
+++ b/pages/contact/to-be-contacted.js
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react"
 import {} from "@dataesr/react-dsfr"
 import { useRouter } from "next/router"
-import { Crisp } from "crisp-sdk-web"
-import { useMutation, useQuery } from "@apollo/client"
 import {
   ButtonGroup,
   Col,
@@ -13,50 +11,30 @@ import {
 
 import { ContentLayout } from "../../src/components/Layout"
 import {
-  CRISP_CHAT_ID,
   OPEN_CONTACT_FROM_EMAIL,
   RequestContact,
   STORAGE_CONTACT_HOURS,
   STORAGE_CONTACT_TYPE,
   STORAGE_SOURCE,
-  STORAGE_TEST_ABC,
-  URL_CHAT_WHATSAPP,
 } from "../../src/constants/constants"
 import { WidgetHeader } from "../../src/components/WidgetHeader"
 import {
   readSourceInUrl,
   updateRadioButtonSelectedInList,
 } from "../../src/utils/main.utils"
-import {
-  client,
-  SAVE_DEMANDE_DE_CONTACT,
-  GET_ACTIVATION_CHAT_STATUS,
-} from "../../apollo-client"
 import * as StorageUtils from "../../src/utils/storage.utils"
-import * as ContactUtils from "../../src/utils/contact.utils"
 import * as TrackerUtils from "../../src/utils/tracker.utils"
-import * as AbTestingUtils from "../../src/utils/ab-testing/ab-testing.utils"
-
-const CHAT_TYPE = {
-  whatsapp: "Whats App",
-  crisp: "Crisp",
-}
-
-// A modifier lorsque l'on veut modifier le chat utilisé (crisp, whats app)
-const chatNameUsed = CHAT_TYPE.crisp
 
 export default function ToBeContacted() {
   const router = useRouter()
 
   const localeSelected = StorageUtils.getLocaleInLocalStorage()
-  const test = StorageUtils.getInLocalStorage(STORAGE_TEST_ABC)
 
   const [contactHours, setContactHours] = useState(defaultContactHours)
   const [itemValueType, setItemValueType] = useState()
   const [isSmsSelected, setSmsSelected] = useState(false)
 
   const [websiteSource, setWebsiteSource] = useState(false)
-  const [actualDate, setActualDate] = useState(new Date())
 
   useEffect(() => {
     const source = readSourceInUrl()
@@ -64,49 +42,16 @@ export default function ToBeContacted() {
       localStorage.setItem(STORAGE_SOURCE, source)
       setWebsiteSource(source)
     }
-    setActualDate(new Date())
-    initChat()
   }, [])
 
   useEffect(() => {
     setSmsSelected(itemValueType == RequestContact.type.sms)
-
-    if (itemValueType == RequestContact.type.email)
-      setContactHours(defaultContactHours)
   }, [itemValueType])
 
   const cancel = () => {
-    TrackerUtils.trackerForResults(TrackerUtils.ACTION.abandon)
+    TrackerUtils.trackerForContact(TrackerUtils.ACTION.abandon)
     router.back()
   }
-  const [sendContactQuery] = useMutation(SAVE_DEMANDE_DE_CONTACT, {
-    client: client,
-    onError: (err) => {
-      console.error(err)
-    },
-  })
-
-  const initChat = () => {
-    if (chatNameUsed === CHAT_TYPE.crisp) {
-      Crisp.configure(CRISP_CHAT_ID)
-      Crisp.chat.hide()
-    }
-  }
-
-  const activateChat = () => {
-    if (chatNameUsed === CHAT_TYPE.whatsapp) openWhatsapp()
-    if (chatNameUsed === CHAT_TYPE.crisp) openCrisp()
-  }
-
-  const openWhatsapp = async () => {
-    ContactUtils.saveContactRequest(RequestContact.type.chat, sendContactQuery)
-    window.open(URL_CHAT_WHATSAPP, "_blank")
-  }
-
-  const openCrisp = () => {
-    Crisp.chat.show()
-    Crisp.chat.open()
-  }
 
   const goToContactForm = () => {
     localStorage.setItem(STORAGE_CONTACT_TYPE, itemValueType)
@@ -124,12 +69,8 @@ export default function ToBeContacted() {
     if (itemValueType) {
       TrackerUtils.trackerForContact(`Choix effectué`)
       TrackerUtils.trackerForContact(`Choix ${itemValueType}`)
-      AbTestingUtils.trackerForAbTesting(`Choix effectué`)
-      AbTestingUtils.trackerForAbTesting(`Choix ${itemValueType}`)
     }
-
-    if (itemValueType == RequestContact.type.chat) activateChat()
-    else goToContactForm()
+    goToContactForm()
   }
 
   const CustomToggleButton = (type) => (
@@ -154,49 +95,7 @@ export default function ToBeContacted() {
     </ToggleButton>
   )
 
-  const ChatComponent = () => {
-    const { loading, error, data } = useQuery(GET_ACTIVATION_CHAT_STATUS, {
-      client: client,
-    })
-
-    if (loading) return <></>
-    if (error) return <p>Error</p>
-    const isChatActive = data.activationChat.activation_chat
-    let isChatEnabled
-    const chatMorningFrom = data.activationChat.matin_de
-    const chatMorningTo = data.activationChat.matin_a
-    const chatAfternoonFrom = data.activationChat.apres_midi_de
-    const chatAfternoonTo = data.activationChat.apres_midi_a
-    if (isChatActive) {
-      if (
-        (actualDate.toLocaleTimeString() >= chatMorningFrom.split(".")[0] &&
-          actualDate.toLocaleTimeString() <= chatMorningTo.split(".")[0]) ||
-        (actualDate.toLocaleTimeString() >= chatAfternoonFrom.split(".")[0] &&
-          actualDate.toLocaleTimeString() <= chatAfternoonTo.split(".")[0])
-      ) {
-        isChatEnabled = true
-      } else {
-        isChatEnabled = false
-      }
-    }
-    return (
-      <>
-        {isChatEnabled && isChatActive && (
-          <>
-            Maintenant par :
-            <Row>
-              {defaultContactTypes.byNow.map((type) => (
-                <Col key={type.id}>{CustomToggleButton(type)}</Col>
-              ))}
-            </Row>
-            <br />
-          </>
-        )}
-      </>
-    )
-  }
-
-  const MailAndSmsComponent = () => (
+  const SmsComponent = () => (
     <fieldset>
       <Row>
         {defaultContactTypes.byAvailabilities.map((type) => (
@@ -220,27 +119,11 @@ export default function ToBeContacted() {
 
   const ButtonGroupType = () => (
     <ButtonGroup className="be-contacted-button-group">
-      {test === "A" && (
-        <Col>
-          <ChatComponent />
-          <legend>Selon mes disponibilités, par :</legend>
-          <MailAndSmsComponent />
-        </Col>
-      )}
-      {test === "B" && (
-        <Col>
-          <legend>Selon mes disponibilités, par :</legend>
-          <CalendlyComponent />
-          <ChatComponent />
-        </Col>
-      )}
-      {test === "C" && (
-        <Col>
-          <legend>Selon mes disponibilités, par :</legend>
-          <CalendlyComponent />
-          <MailAndSmsComponent />
-        </Col>
-      )}
+      <Col>
+        <legend>Selon mes disponibilités, par :</legend>
+        <CalendlyComponent />
+        <SmsComponent />
+      </Col>
     </ButtonGroup>
   )
 
@@ -314,15 +197,6 @@ export default function ToBeContacted() {
 }
 
 const defaultContactTypes = {
-  byNow: [
-    {
-      icon: "../img/contact/chat.svg",
-      iconSelected: "../img/contact/chat-selected.svg",
-      id: RequestContact.type.chat,
-      isChecked: false,
-      text: `Chat`,
-    },
-  ],
   byAvailabilities: [
     {
       icon: "../img/contact/sms.svg",
@@ -331,13 +205,6 @@ const defaultContactTypes = {
       isChecked: false,
       text: "SMS",
     },
-    {
-      icon: "../img/contact/email-contact.svg",
-      iconSelected: "../img/contact/email-contact-selected.svg",
-      id: RequestContact.type.email,
-      isChecked: false,
-      text: "Email",
-    },
   ],
   byAppointment: [
     {
@@ -388,7 +255,7 @@ export const convertHoursListInString = (hours) =>
   )
 
 /**
- * @param {RequestContact.type} itemValueType Type du mode de contact sélectionné (Email/ SMS)
+ * @param {RequestContact.type} itemValueType Type du mode de contact sélectionné (RDV/ SMS)
  * @param {Array} contactHours Tableau des heures
  * @returns boolean de la validité des choix seléctionnés
  */
@@ -397,8 +264,6 @@ export const isValidButtonEnabled = (itemValueType, contactHours) => {
     contactHours?.find((item) => item.isChecked) != undefined
 
   return (
-    itemValueType == RequestContact.type.email ||
-    itemValueType == RequestContact.type.chat ||
     itemValueType == RequestContact.type.rendezvous ||
     (itemValueType == RequestContact.type.sms && isHoursSelected)
   )
diff --git a/pages/results.js b/pages/results.js
index cdffcc98..8e0bf306 100644
--- a/pages/results.js
+++ b/pages/results.js
@@ -1,109 +1,43 @@
 import React from "react"
-import { Row } from "react-bootstrap"
 import { WidgetHeader } from "../src/components/WidgetHeader"
 import { ContentLayout } from "../src/components/Layout"
-import { ContactMamanBlues } from "../src/components/results/ContactMamanBlues"
-import { ResultsMood } from "../src/components/results/ResultsMood"
 import {
   STORAGE_SCORE,
-  STORAGE_SCORE_LEVEL_MACARON,
-  STORAGE_SCORE_LEVEL_MOOD,
-  STORAGE_SCORE_LEVEL_TEXTS,
+  moderateTestimonyList,
+  highTestimonyList,
+  veryHighTestimonyList,
 } from "../src/constants/constants"
 import { EpdsResultsComments, Labels } from "../src/constants/specificLabels"
 import * as StorageUtils from "../src/utils/storage.utils"
-import {
-  SCORE_LEVEL_BAD,
-  SCORE_LEVEL_MEDIUM,
-} from "../src/utils/score-level.utils"
-import * as TrackerUtils from "../src/utils/tracker.utils"
-import * as MainUtils from "../src/utils/main.utils"
-import { Intentions } from "../src/components/results/Intentions"
 import { DownloadApp } from "../src/components/results/DownloadApp"
-import { RecruitParents } from "../src/components/results/RecruitParents"
-import { GiveAccessToResources } from "../src/components/ab-testing/resources/GiveAccessToResources"
+import { ResultMood } from "../src/components/results/ResultMood"
+import { BeBetter } from "../src/components/results/BeBetter"
 
 export default function Results() {
-  const SCORE_TO_SHOW_CONTACT_BLOC = 9
-  const OPINION_GOUV_URL =
-    "https://jedonnemonavis.numerique.gouv.fr/Demarches/3483?&view-mode=formulaire-avis&nd_source=button&key=9a76fb7d40d8cf4bb6036779de4d92c9"
-  const OPINION_GOUV_IMG =
-    "https://jedonnemonavis.numerique.gouv.fr/static/bouton-bleu.svg"
-
-  const randomForParentsFeedback = MainUtils.getRandomInt(2)
-
   const scoreValue = StorageUtils.getInLocalStorage(STORAGE_SCORE)
   const localeSelected = StorageUtils.getLocaleInLocalStorage()
-  const scoreLevelForMood = parseInt(
-    StorageUtils.getInLocalStorage(STORAGE_SCORE_LEVEL_MOOD)
-  )
-  const scoreLevelForTexts = parseInt(
-    StorageUtils.getInLocalStorage(STORAGE_SCORE_LEVEL_TEXTS)
-  )
-  const scoreLevelForMacaron = parseInt(
-    StorageUtils.getInLocalStorage(STORAGE_SCORE_LEVEL_MACARON)
-  )
-
-  const DescriptionAndConclusion = () => (
-    <Row>
-      <div className="margin-bottom-8">
-        <b>Oser en parler, c’est déjà prendre soin de soi et de son enfant !</b>
-      </div>
-      <div className="margin-bottom-8">
-        {descriptionByScoreLevel(scoreLevelForTexts)}
-      </div>
-      <div className="margin-bottom-8">
-        <b>{conclusionByScoreLevel(scoreLevelForTexts)}</b>
-      </div>
-    </Row>
-  )
-
-  const GiveOpinion = () => {
-    return (
-      <div className="give-opinion">
-        <div className="content">
-          <div>
-            Aidez-nous à améliorer cette démarche ! Donnez-nous votre avis, cela
-            ne prend que 2 minutes.
-          </div>
-          <a
-            target="_blank"
-            rel="noreferrer"
-            href={OPINION_GOUV_URL}
-            onClick={() => {
-              TrackerUtils.trackerForIntentions(TrackerUtils.ACTION.opinion)
-            }}
-          >
-            <img
-              className="participate-btn"
-              src={OPINION_GOUV_IMG}
-              alt="Je donne mon avis"
-            />
-          </a>
-        </div>
-      </div>
-    )
-  }
+  const score = parseInt(scoreValue)
 
   return (
     <ContentLayout>
       <WidgetHeader title={Labels.titleDPP} locale={localeSelected} />
-      <ResultsMood scoreLevel={scoreLevelForMood} />
-
-      {scoreValue < SCORE_TO_SHOW_CONTACT_BLOC ? (
-        <DownloadApp />
-      ) : (
-        <ContactMamanBlues scoreLevel={scoreLevelForMacaron} />
+      {scoreValue < 9 && <DownloadApp />}
+      {score >= 9 && score <= 11 && (
+        <ResultMood
+          scoreText="moyennement élevé"
+          testimonyList={moderateTestimonyList}
+        />
       )}
-
-      <DescriptionAndConclusion />
-      <GiveAccessToResources />
-      {scoreLevelForMacaron == SCORE_LEVEL_MEDIUM ||
-      scoreLevelForMacaron == SCORE_LEVEL_BAD ? (
-        <Intentions />
-      ) : null}
-
-      {randomForParentsFeedback == 0 ? <GiveOpinion /> : <RecruitParents />}
+      {score > 11 && score <= 15 && (
+        <ResultMood scoreText="élevé" testimonyList={highTestimonyList} />
+      )}
+      {score > 15 && (
+        <ResultMood
+          scoreText="très élevé"
+          testimonyList={veryHighTestimonyList}
+        />
+      )}
+      <BeBetter score={score} linkActive={true} />
     </ContentLayout>
   )
 }
diff --git a/pages/survey/epds-survey.js b/pages/survey/epds-survey.js
index 14cfc003..95b2c731 100644
--- a/pages/survey/epds-survey.js
+++ b/pages/survey/epds-survey.js
@@ -283,7 +283,7 @@ export default function EpdsSurvey() {
 
   return (
     <ContentLayout>
-      <WidgetHeader title={Labels.titleDPP} locale={localeSelected} />
+      <WidgetHeader title={Labels.titleSurvey} locale={localeSelected} />
 
       <Consigne />
       <div className="epds-survey">
diff --git a/public/img/icone-calendrier.png b/public/img/icone-calendrier.png
new file mode 100644
index 00000000..3a9ce628
Binary files /dev/null and b/public/img/icone-calendrier.png differ
diff --git a/public/img/icone-score.svg b/public/img/icone-score.svg
new file mode 100644
index 00000000..dbfe12d3
--- /dev/null
+++ b/public/img/icone-score.svg
@@ -0,0 +1,16 @@
+<svg width="80" height="70" viewBox="0 0 80 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3969_21498)">
+<path d="M47.4743 11.6559C36.5167 5.2889 25.7184 5.65781 20.0992 13.4872C5.30622 33.3603 22.8214 47.1854 33.428 51.6138C40.2533 52.9154 41.4099 46.2636 47.9113 48.3253C59.2217 56.4784 70.3629 49.4415 69.1925 38.5846C67.1505 29.4133 63.4952 20.965 47.4743 11.6559Z" fill="#EBF6F8"/>
+<path d="M44.4307 54.0314C44.4307 52.7015 43.1602 40.4761 42.0513 31.2625C41.9112 30.0992 40.334 30.1163 40.2048 31.2808L37.6807 54.0314C37.6806 58.1397 44.4307 58.1397 44.4307 54.0314Z" stroke="#5770BE" stroke-width="2"/>
+<path d="M40.0329 33.0772C23.1471 34.1736 19.6295 47.5878 19.6295 54.1602H12.1807C12.1807 44.7114 18.9818 26.8094 40.6807 26.1287C60.7602 25.4988 69.1807 43.4515 69.1807 54.1602C68.1443 54.1602 63.7829 54.1602 61.7318 54.1602C62.0492 47.0601 58.0133 33.8938 42.264 33.0772" stroke="#5770BE" stroke-width="3"/>
+<mask id="path-4-inside-1_3969_21498" fill="white">
+<ellipse cx="41.0557" cy="53.4221" rx="1.875" ry="2.21428"/>
+</mask>
+<path d="M40.9307 53.422C40.9307 53.5814 40.8752 53.6717 40.8552 53.6953C40.8468 53.7053 40.8554 53.6913 40.8918 53.6731C40.9314 53.6533 40.9895 53.6363 41.0557 53.6363V57.6363C43.4947 57.6363 44.9307 55.4248 44.9307 53.422H40.9307ZM41.0557 53.6363C41.1219 53.6363 41.1799 53.6533 41.2195 53.6731C41.256 53.6913 41.2646 53.7053 41.2561 53.6953C41.2361 53.6717 41.1807 53.5814 41.1807 53.422H37.1807C37.1807 55.4248 38.6167 57.6363 41.0557 57.6363V53.6363ZM41.1807 53.422C41.1807 53.2627 41.2361 53.1724 41.2561 53.1487C41.2646 53.1388 41.256 53.1528 41.2195 53.171C41.1799 53.1908 41.1219 53.2078 41.0557 53.2078V49.2078C38.6167 49.2078 37.1807 51.4193 37.1807 53.422H41.1807ZM41.0557 53.2078C40.9895 53.2078 40.9314 53.1908 40.8918 53.171C40.8554 53.1528 40.8468 53.1388 40.8552 53.1487C40.8752 53.1724 40.9307 53.2627 40.9307 53.422H44.9307C44.9307 51.4193 43.4947 49.2078 41.0557 49.2078V53.2078Z" fill="#5770BE" mask="url(#path-4-inside-1_3969_21498)"/>
+</g>
+<defs>
+<clipPath id="clip0_3969_21498">
+<rect width="80" height="70" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/img/image-wanda.png b/public/img/image-wanda.png
new file mode 100644
index 00000000..f5a01e8c
Binary files /dev/null and b/public/img/image-wanda.png differ
diff --git a/public/videos/EX2_AGIR_POUR_BEBE_LA_DEPRESSION_POST_PARTUM_DEF_MIX_STT_SD.mp4 b/public/videos/EX2_AGIR_POUR_BEBE_LA_DEPRESSION_POST_PARTUM_DEF_MIX_STT_SD.mp4
new file mode 100644
index 00000000..cb084860
Binary files /dev/null and b/public/videos/EX2_AGIR_POUR_BEBE_LA_DEPRESSION_POST_PARTUM_DEF_MIX_STT_SD.mp4 differ
diff --git a/src/components/ab-testing/resources/GiveAccessToResources.js b/src/components/ab-testing/resources/GiveAccessToResources.js
index 2e3834c7..4308707f 100644
--- a/src/components/ab-testing/resources/GiveAccessToResources.js
+++ b/src/components/ab-testing/resources/GiveAccessToResources.js
@@ -44,7 +44,7 @@ export const GiveAccessToResources = () => {
     return (
       <div>
         <Button
-          className="fr-btn--secondary"
+          className="fr-btn--secondary button-ressource"
           onClick={() => {
             openModal()
           }}
diff --git a/src/components/contact/EmergencyCard.js b/src/components/contact/EmergencyCard.js
new file mode 100644
index 00000000..b89dec68
--- /dev/null
+++ b/src/components/contact/EmergencyCard.js
@@ -0,0 +1,55 @@
+import React from "react"
+import { Icon } from "@dataesr/react-dsfr"
+import { Col } from "react-bootstrap"
+import { trackerForEmergency } from "../../utils/tracker.utils"
+
+export function EmergencyCard({
+  emergencyText,
+  emergencyPhone,
+  schedule,
+  isSOS,
+  action,
+}) {
+  return (
+    <div className="demographic-data">
+      <Col className="be-contacted-bottom-buttons">
+        <div className="button-validation">
+          <div className="box">
+            <div className="personnalInfo">
+              <Icon className="userIcon" name="ri-phone-fill" size="2x" />
+              <div>
+                <span>{emergencyText.toUpperCase()}</span>
+              </div>
+            </div>
+            {schedule && !isSOS && (
+              <div className="logo-appel-margin">
+                <Icon name="ri-time-line" size="xl" />
+                <span>{schedule}</span>
+              </div>
+            )}
+            {isSOS && (
+              <div className="logo-appel-margin">
+                <Icon name="ri-time-line" size="xl" />
+                <span>En semaine de 10h à 13h et de 14h à 20h</span>
+                <br />
+                <span>Le samedi de 10h à 13h</span>
+              </div>
+            )}
+
+            <div className="horizontalSeparator" />
+            <button
+              className="fr-btn"
+              onClick={() => {
+                window.location.href = `tel:${emergencyPhone}`
+                trackerForEmergency(action)
+              }}
+            >
+              <Icon name="ri-phone-fill" size="xl" />
+              {`Appeler le ${emergencyPhone}`}
+            </button>
+          </div>
+        </div>
+      </Col>
+    </div>
+  )
+}
diff --git a/src/components/contact/HealthProList.js b/src/components/contact/HealthProList.js
new file mode 100644
index 00000000..8f48f2b3
--- /dev/null
+++ b/src/components/contact/HealthProList.js
@@ -0,0 +1,114 @@
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { Icon, Pagination } from "@dataesr/react-dsfr"
+import { Spinner } from "react-bootstrap"
+import { ACTION, trackerForProfessional } from "../../utils/tracker.utils"
+
+export function HealthProList({
+  proList,
+  page,
+  setPage,
+  geoLoading,
+  activatePagination,
+}) {
+  const table = useRef(null)
+  const [surrendingPages, setSurrendingPages] = useState(0)
+
+  const pagedProfessional = useMemo(() => {
+    const start = (page - 1) * 10
+    return proList.slice(start, start + 10)
+  }, [proList, page])
+  const pageCount = Math.ceil(proList.length / 10)
+  const currentPage = Math.min(page, pageCount)
+
+  const updateSurrendingPages = () => {
+    if (table.current) {
+      const { width } = table.current.getBoundingClientRect()
+      if (width > 700) {
+        setSurrendingPages(3)
+      } else if (width > 550) {
+        setSurrendingPages(2)
+      } else if (width > 500) {
+        setSurrendingPages(1)
+      } else {
+        setSurrendingPages(0)
+      }
+    }
+  }
+
+  useEffect(() => {
+    updateSurrendingPages()
+  }, [table])
+
+  useEffect(() => {
+    window.addEventListener("resize", updateSurrendingPages)
+    return () => window.removeEventListener("resize", updateSurrendingPages)
+  }, [])
+
+  return (
+    <div ref={table}>
+      {geoLoading && pagedProfessional.length > 0 && (
+        <div className="tables" data-test-id="psy-table">
+          {pagedProfessional.map((psychologist, index) => (
+            <div className="box" key={index} data-test-id="psy-row">
+              <div className="personnalInfo">
+                <Icon className="userIcon" name="ri-user-line" size="2x" />
+                <div>
+                  <h6>
+                    {psychologist.nom.toUpperCase()} {psychologist.prenom}
+                  </h6>
+                  <div className="addressInfo">
+                    <div>
+                      <Icon
+                        className="fr-mr-1w"
+                        name="ri-map-pin-2-fill"
+                        size="lg"
+                      />
+                      {psychologist.adresse && psychologist.code_postal && (
+                        <span>
+                          {psychologist.adresse}
+                          <br />
+                          {psychologist.ville} • {psychologist.code_postal}
+                        </span>
+                      )}
+                      {(!psychologist.adresse || !psychologist.code_postal) && (
+                        <span>{psychologist.ville}</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="horizontalSeparator" />
+              <div className="contactInfo">
+                {psychologist.profession && (
+                  <span>{psychologist.profession}</span>
+                )}
+                <div className="bigSeparator" />
+                <button
+                  className="fr-btn"
+                  onClick={() => {
+                    trackerForProfessional(ACTION.call_pro)
+                    window.location.href = `tel:${psychologist.telephone1}`
+                  }}
+                >
+                  <Icon name="ri-phone-fill" size="xl" />
+                  Appeler
+                </button>
+              </div>
+            </div>
+          ))}
+          {activatePagination && (
+            <div className="pagination-size">
+              <Pagination
+                currentPage={currentPage}
+                surrendingPages={surrendingPages}
+                pageCount={pageCount}
+                onClick={setPage}
+              />
+            </div>
+          )}
+        </div>
+      )}
+      {!geoLoading && <Spinner animation="border" />}
+    </div>
+  )
+}
diff --git a/src/components/contact/NoResultsPro.js b/src/components/contact/NoResultsPro.js
new file mode 100644
index 00000000..2212f5e0
--- /dev/null
+++ b/src/components/contact/NoResultsPro.js
@@ -0,0 +1,17 @@
+import React from "react"
+import { Icon } from "@dataesr/react-dsfr"
+import classNames from "classnames"
+
+export const NoResultPsyTable = () => (
+  <div className={classNames("columnBox", "fr-my-2w")}>
+    <div className="personnalInfo">
+      <Icon className="userIcon" name="ri-search-line" size="2x" />
+      <div>
+        <h6>
+          Aucun résultats trouvés, vous pouvez élargir votre champ de recherche
+          en recherchant autour de vous.
+        </h6>
+      </div>
+    </div>
+  </div>
+)
diff --git a/src/components/results/AlertTile.js b/src/components/results/AlertTile.js
new file mode 100644
index 00000000..70741cec
--- /dev/null
+++ b/src/components/results/AlertTile.js
@@ -0,0 +1,48 @@
+import React from "react"
+import {
+  ACTION,
+  trackerForResults,
+  trackerForArticle,
+} from "../../utils/tracker.utils"
+import { Icon } from "@dataesr/react-dsfr"
+
+export function AlertTile({ isArticle }) {
+  return (
+    <div
+      className="fr-tile fr-tile--horizontal fr-tile--vertical-md"
+      style={{
+        backgroundColor: "#e6e6e6",
+        marginBottom: "2rem",
+      }}
+    >
+      <a
+        href="/contact/contact-urgence"
+        style={{
+          display: "contents",
+        }}
+        onClick={() => {
+          if (isArticle) trackerForResults(ACTION.emergency)
+          else trackerForArticle(ACTION.emergency)
+        }}
+      >
+        <div className="fr-tile__body" style={{ alignItems: "start" }}>
+          <h4 className="fr-tile__title">J'ai besoin d'aide en urgence</h4>
+          <p className="fr-tile__desc text-black-color">
+            Je suis en situation de crise et{" "}
+            <span className="text-alert-color">
+              j'ai besoin d'assistance immédiatement.
+            </span>
+          </p>
+        </div>
+        <div
+          className="icone-arrow"
+          style={{
+            marginBottom: "1.5rem",
+          }}
+        >
+          <Icon className="selected" name="ri-arrow-right-line" size="2x" />
+        </div>
+      </a>
+    </div>
+  )
+}
diff --git a/src/components/results/BeBetter.js b/src/components/results/BeBetter.js
new file mode 100644
index 00000000..9b2abed2
--- /dev/null
+++ b/src/components/results/BeBetter.js
@@ -0,0 +1,49 @@
+import React from "react"
+import { trackerForResults, ACTION } from "../../utils/tracker.utils"
+import { AlertTile } from "./AlertTile"
+import { ContactTile } from "./ContactTile"
+
+export function BeBetter({ score, linkActive }) {
+  return (
+    <>
+      <h5 className="padding-top-h5">Je ne suis pas seul.e</h5>
+      <p>
+        Chaque situation est différente et pourtant il existe une seule même
+        maladie,{" "}
+        {linkActive && (
+          <a
+            className="text-color text-underline"
+            href="/article-dpp"
+            onClick={() => {
+              trackerForResults(ACTION.article)
+            }}
+          >
+            la dépression post-partum
+          </a>
+        )}
+        {!linkActive && <>la dépression post-partum</>}
+        . C'est une maladie qu'il est facile de guérir tant que l'on sait la
+        détecter. Parler de ma situation m'aidera à m'en sortir.
+        <br />
+        <br />
+        <span className="text-bold">
+          Je veux être aidé.e dans ma démarche en tout anonymat et
+          confidentialité des échanges :
+        </span>
+      </p>
+      {score > 11 && (
+        <>
+          <AlertTile isArticle={linkActive} />
+          <ContactTile isArticle={linkActive} />
+        </>
+      )}
+
+      {score <= 11 && (
+        <>
+          <ContactTile isArticle={linkActive} />
+          <AlertTile isArticle={linkActive} />
+        </>
+      )}
+    </>
+  )
+}
diff --git a/src/components/results/ContactMamanBlues.js b/src/components/results/ContactMamanBlues.js
index 110958d5..1f153fb7 100644
--- a/src/components/results/ContactMamanBlues.js
+++ b/src/components/results/ContactMamanBlues.js
@@ -3,7 +3,6 @@ import { Row } from "react-bootstrap"
 import {} from "@dataesr/react-dsfr"
 import { useRouter } from "next/router"
 import * as TrackerUtils from "../../utils/tracker.utils"
-import * as AbTestingUtils from "../../utils/ab-testing/ab-testing.utils"
 
 export const buttonLabel = "Je veux être accompagné.e"
 
@@ -27,7 +26,6 @@ export function ContactMamanBlues({ scoreLevel }) {
 
   const goToBeContacted = async (event) => {
     TrackerUtils.trackerForResults(TrackerUtils.ACTION.be_contacted)
-    AbTestingUtils.trackerForAbTesting(TrackerUtils.ACTION.be_contacted)
     router.push({
       pathname: "/contact/to-be-contacted",
     })
diff --git a/src/components/results/ContactTile.js b/src/components/results/ContactTile.js
new file mode 100644
index 00000000..57694638
--- /dev/null
+++ b/src/components/results/ContactTile.js
@@ -0,0 +1,76 @@
+import React from "react"
+import {
+  ACTION,
+  trackerForArticle,
+  trackerForResults,
+} from "../../utils/tracker.utils"
+import { client, GET_ACTIVATION_TILE_STATUS } from "../../../apollo-client"
+import { Icon } from "@dataesr/react-dsfr"
+import { useQuery } from "@apollo/client"
+
+const Tile = ({ title, desc, imageUrl, link, isBeContacted, isArticle }) => {
+  return (
+    <div className="fr-tile fr-enlarge-link fr-tile--horizontal fr-tile--vertical-md card-text card-space card-bottom">
+      <div className="fr-tile__img tile-image">
+        <img src={imageUrl} className="fr-responsive-img" alt="" />
+      </div>
+      <div>
+        <h4 className="fr-tile__title">
+          <a
+            className="fr-tile__link card-text tile-text-title"
+            href={link}
+            onClick={() => {
+              if (isBeContacted) {
+                if (isArticle) trackerForResults(ACTION.be_contacted)
+                else trackerForArticle(ACTION.be_contacted)
+              }
+              if (!isBeContacted) {
+                if (isArticle) trackerForResults(ACTION.find_pro)
+                else trackerForArticle(ACTION.find_pro)
+              }
+            }}
+          >
+            {title}
+          </a>
+        </h4>
+        <p className="fr-tile__desc tile-text-desc">{desc}</p>
+      </div>
+      <div className="icone-arrow">
+        <Icon className="selected" name="ri-arrow-right-line" size="2x" />
+      </div>
+    </div>
+  )
+}
+
+export function ContactTile({ isArticle }) {
+  const { loading, error, data } = useQuery(GET_ACTIVATION_TILE_STATUS, {
+    client: client,
+  })
+
+  if (loading) return <></>
+  if (error) return <p>Error</p>
+  const isTileContactActive = data.activationTile.activation_tile
+
+  return (
+    <>
+      {isTileContactActive && (
+        <Tile
+          title="Je veux être accompagné.e"
+          desc="Je choisis un créneau qui me convient avec Wanda, infirmière spécialisée en périnatalité, et ensemble nous trouvons une aide adaptée à ma situation."
+          imageUrl="/img/image-wanda.png"
+          link="/contact/to-be-contacted"
+          isBeContacted={true}
+          isArticle={isArticle}
+        />
+      )}
+      {/* <Tile
+        title="Je prends rendez-vous avec un professionnel de santé."
+        desc="Spécialisés dans la dépression post-partum, ces professionnels peuvent m'aider."
+        imageUrl="/img/icone-calendrier.png"
+        link="/contact/pro-list"
+        isBeContacted={false}
+        isArticle={isArticle}
+      /> */}
+    </>
+  )
+}
diff --git a/src/components/results/Intentions.js b/src/components/results/Intentions.js
deleted file mode 100644
index 2a510bba..00000000
--- a/src/components/results/Intentions.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useRouter } from "next/router"
-import React, { useEffect, useState } from "react"
-import { ButtonGroup, ToggleButton } from "react-bootstrap"
-import * as TrackerUtils from "../../utils/tracker.utils"
-import * as PdfUtils from "../../utils/pdf.utils"
-
-/**
- * @param {number} moodLevel
- * @returns Bloc des intentions
- */
-export const Intentions = () => {
-  const router = useRouter()
-
-  const [radioValue, setRadioValue] = useState()
-  const [itemSelected, setItemSelected] = useState(false)
-
-  const questionAboutScore = {
-    question: "À qui allez-vous parler de votre score ?",
-    responses: [
-      { name: "À un membre de l'équipe 1000 jours blues", id: 1 },
-      { name: "Mon entourage", id: 2 },
-      { name: "Mon professionnel de santé", id: 3 },
-      { name: "Je le garde pour moi", id: 4 },
-    ],
-  }
-  const DISPLAY_IMAGE_FOR_RESPONSE_ID = 1
-
-  useEffect(() => {
-    const itemToElise = questionAboutScore.responses.find(
-      (item) => item.id == DISPLAY_IMAGE_FOR_RESPONSE_ID
-    )
-    if (itemToElise.name === radioValue)
-      router.push({ pathname: "/contact/to-be-contacted" })
-  }, [radioValue])
-
-  const onToggleButon = (value) => {
-    setRadioValue(value)
-    setItemSelected(true)
-    TrackerUtils.trackerForIntentions(value)
-  }
-
-  const questionBlock = (question) => {
-    return (
-      <div className="buttons-block">
-        <div>
-          <b>{question.question}</b>
-        </div>
-        <ButtonGroup>
-          {question.responses.map((radio) => (
-            <ToggleButton
-              className="intentions-button fr-btn--tertiary"
-              key={radio.id}
-              id={`radio-${radio.id}`}
-              type="radio"
-              name="radio"
-              value={radio.name}
-              checked={radioValue === radio.name}
-              onChange={(event) => onToggleButon(event.currentTarget.value)}
-              disabled={itemSelected}
-            >
-              {radio.name}
-              {radio.id == 1 && (
-                <div className="portrait">
-                  <img alt="" src="../img/portrait.png" />
-                </div>
-              )}
-            </ToggleButton>
-          ))}
-        </ButtonGroup>
-        <div>{itemSelected && "Merci pour votre réponse"}</div>
-      </div>
-    )
-  }
-
-  const DownloadEpdsResponsesBtn = () => {
-    return (
-      <div
-        className="fr-download intention-download"
-        onClick={downloadEpdsResponses}
-      >
-        <span className="fr-download__link">
-          <u>Télécharger mes réponses au questionnaire EPDS</u>
-        </span>
-        <span className="fr-download__detail">PDF</span>
-      </div>
-    )
-  }
-
-  const downloadEpdsResponses = () => {
-    PdfUtils.generateEpdsResultsPdf()
-    TrackerUtils.trackerForIntentions(TrackerUtils.ACTION.download)
-  }
-
-  return (
-    <div className="intentions">
-      <div className="intentions-card">
-        {questionBlock(questionAboutScore)}
-        <DownloadEpdsResponsesBtn />
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/results/RecruitParents.js b/src/components/results/RecruitParents.js
deleted file mode 100644
index 7a80f387..00000000
--- a/src/components/results/RecruitParents.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Button } from "@dataesr/react-dsfr"
-import * as TrackerUtils from "../../utils/tracker.utils"
-import * as MainUtils from "../../utils/main.utils"
-
-export function RecruitParents() {
-  const INDIVIDUAL_URL = "https://calendly.com/1000-jours-blues/30min"
-
-  const onClickParticipate = (url) => {
-    MainUtils.openUrl(url)
-    TrackerUtils.trackerForIntentions(TrackerUtils.ACTION.recruit)
-  }
-
-  return (
-    <div className="recruit-parents">
-      <div className="content">
-        <div>
-          Aidez-nous à améliorer ce service public ! Choisissez un créneau dans
-          notre calendrier pour échanger avec un membre de notre équipe.
-        </div>
-
-        <Button
-          className="participate-btn"
-          onClick={() => onClickParticipate(INDIVIDUAL_URL)}
-        >
-          Choisir mon créneau
-        </Button>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/results/ResultMood.js b/src/components/results/ResultMood.js
new file mode 100644
index 00000000..88dffbcd
--- /dev/null
+++ b/src/components/results/ResultMood.js
@@ -0,0 +1,38 @@
+import React from "react"
+
+export function ResultMood({ scoreText, testimonyList }) {
+  return (
+    <>
+      <div
+        className="fr-tile fr-tile--horizontal remove-box-shadow"
+        style={{
+          backgroundColor: "#E3E3FD",
+          marginBottom: "5%",
+        }}
+      >
+        <div className="fr-tile__body text-color text-margin">
+          <p className="fr-tile__desc text-bold">{`Mon score est ${scoreText}`}</p>
+        </div>
+        <div className="fr-tile__img image-score">
+          <img
+            src="/img/icone-score.svg"
+            className="fr-responsive-img"
+            alt="icone-score"
+          />
+        </div>
+      </div>
+      <div className="margin-bottom-8">
+        <h5>Ce que disent les parents ayant obtenu le même score que moi</h5>
+        <figure className="fr-quote height-tile horizontal-line-testimony">
+          <blockquote>
+            {testimonyList.map((testimony, index) => (
+              <p key={index} className="size-font">
+                {testimony}
+              </p>
+            ))}
+          </blockquote>
+        </figure>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/results/ResultsMood.js b/src/components/results/ResultsMood.js
deleted file mode 100644
index 7b2d4df5..00000000
--- a/src/components/results/ResultsMood.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { useEffect, useState } from "react"
-import { getColorIconAndTextByMood } from "../../utils/main.utils"
-
-export function ResultsMood({ scoreLevel }) {
-  const [moodInfos, setMoodInfos] = useState()
-
-  useEffect(() => {
-    if (moodInfos == undefined)
-      setMoodInfos(getColorIconAndTextByMood(scoreLevel))
-  }, [])
-
-  return (
-    <div className="results-mood">
-      <img alt="" src={`../img/${moodInfos?.moodIcon}`} />
-      <div
-        className={`${moodInfos?.moodColor}`}
-        aria-label={`Résultat : ${moodInfos?.moodText}`}
-      >
-        {moodInfos?.moodText}
-      </div>
-    </div>
-  )
-}
diff --git a/src/constants/constants.js b/src/constants/constants.js
index 2fa75450..e9474b25 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -27,14 +27,9 @@ export const OPEN_CONTACT_FROM_EMAIL = "fromEmail"
 
 export const PATTERN_EMAIL = "[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.[a-zA-Z.]{2,15}"
 
-export const URL_CHAT_WHATSAPP = "https://wa.me/message/ZMCTRIQWA7OKD1"
-export const CRISP_CHAT_ID = "d35734d1-93ce-4f6e-8f27-7c1557803b7e"
-
 export const RequestContact = {
   type: {
     sms: "sms",
-    email: "email",
-    chat: "chat",
     rendezvous: "rendezvous",
   },
   hours: {
@@ -62,3 +57,21 @@ export const EpdsGender = {
     strapiLibelle: "Inconnu",
   },
 }
+
+export const moderateTestimonyList = [
+  "« J’ai peur de ne pas bien faire les choses, de ne pas être à la hauteur. » (Héléne, 32 ans)",
+  "« J’accumule beaucoup de fatigue. » (Ludivine, 30 ans)",
+  "« Je ne sais pas vraiment ce qu’il se passe. » (Ali, 28 ans)",
+]
+
+export const highTestimonyList = [
+  "« J’ai du mal à dormir. » (David, 29 ans)",
+  "« Je me sens très seule. » (Véronique, 26 ans)",
+  "« Je n’arrive pas à contrôler mes émotions. Je pleure souvent et/ou m’énerve très facilement. » (Sarah, 33 ans)",
+]
+
+export const veryHighTestimonyList = [
+  "« Je me sens très mal. » (Aurélie, 28 ans)",
+  "« J'ai l'impression de ne plus sentir d'émotions. » (Pierre, 33 ans)",
+  "« J’ai peur qu’il arrive quelque chose à mon enfant. » (Clara, 27 ans)",
+]
diff --git a/src/constants/specificLabels.js b/src/constants/specificLabels.js
index 3c8d5d17..59ac611d 100644
--- a/src/constants/specificLabels.js
+++ b/src/constants/specificLabels.js
@@ -1,5 +1,6 @@
 export const Labels = {
-  titleDPP: "Et si c'était la dépression post-partum ?",
+  titleDPP: "Mon résultat",
+  titleSurvey: "Comment ça va cette semaine ?",
   surveyExplanations:
     "Veuillez cocher la réponse qui vous semble décrire le mieux comment vous vous êtes senti(e) au cours des 7 derniers jours et pas seulement aujourd’hui.",
   mood: {
diff --git a/src/utils/contact.utils.js b/src/utils/contact.utils.js
index 417fb959..568526c3 100644
--- a/src/utils/contact.utils.js
+++ b/src/utils/contact.utils.js
@@ -12,12 +12,8 @@ import {
  */
 export const trackerContactName = (typeContact) => {
   switch (typeContact) {
-    case RequestContact.type.email:
-      return TrackerUtils.CONTACT_SENT.mail
     case RequestContact.type.sms:
       return TrackerUtils.CONTACT_SENT.sms
-    case RequestContact.type.chat:
-      return TrackerUtils.CONTACT_SENT.chat
     case RequestContact.type.rendezvous:
       return TrackerUtils.CONTACT_SENT.rendezvous
   }
@@ -55,3 +51,9 @@ export const isMamanBluesAvailableHours = () => {
   else if (date.getHours() == 17 && date.getMinutes() <= 30) return true
   else return false
 }
+
+const cleanValue = (value) =>
+  value.replace(/é/g, "e").replace(/ç/g, "c").trim().toLowerCase()
+
+export const matchFilter = (value, filter) =>
+  value && cleanValue(value).includes(cleanValue(filter))
diff --git a/src/utils/distance.utils.js b/src/utils/distance.utils.js
new file mode 100644
index 00000000..7ced58d2
--- /dev/null
+++ b/src/utils/distance.utils.js
@@ -0,0 +1,27 @@
+const MAX_DISTANCE_KM = 2000
+
+// Inspired from https://www.geodatasource.com/developers/javascript
+export const distanceKm = (lat1, lon1, lat2, lon2) => {
+  if (!lat1 || !lon1 || !lat2 || !lon2) {
+    return MAX_DISTANCE_KM
+  }
+
+  if (lat1 === lat2 && lon1 === lon2) {
+    return 0
+  }
+
+  const radlat1 = (Math.PI * lat1) / 180
+  const radlat2 = (Math.PI * lat2) / 180
+  const theta = lon1 - lon2
+  const radtheta = (Math.PI * theta) / 180
+  let dist =
+    Math.sin(radlat1) * Math.sin(radlat2) +
+    Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta)
+  if (dist > 1) {
+    dist = 1
+  }
+  dist = Math.acos(dist)
+  dist = (dist * 180) / Math.PI
+  dist = dist * 60 * 1.1515
+  return dist * 1.609344
+}
diff --git a/src/utils/tracker.utils.js b/src/utils/tracker.utils.js
index bd58cfdb..c351797d 100644
--- a/src/utils/tracker.utils.js
+++ b/src/utils/tracker.utils.js
@@ -11,6 +11,9 @@ export const CATEG = {
   intentions: "Intentions",
   contact: "Contact",
   test: "Test",
+  emergency: "Urgence",
+  find_pro: "Trouver un pro",
+  article: "Article",
 }
 
 export const ACTION = {
@@ -29,12 +32,16 @@ export const ACTION = {
   recruit: "Faire un entretien utilisateur",
 
   confirmation: "Confirmation effectuée",
+  emergency: "Urgence",
+  number_suicide: "Appeler 3114",
+  number_sos: "Appeler SOS",
+  find_pro: "Trouver un pro",
+  around_me: "Autour de moi",
+  call_pro: "Appeler un pro",
+  article: "Article",
 }
 
 export const CONTACT_SENT = {
-  chat: "Ouverture chat",
-  no_chat: "Chat non disponible",
-  mail: "Confirmation email",
   sms: "Confirmation sms",
   rendezvous: "Confirmation rendezvous",
 }
@@ -78,3 +85,15 @@ export const trackerForIntentions = (action) => {
 export const trackerForContact = (action) => {
   track(CATEG.contact, action)
 }
+
+export const trackerForEmergency = (action) => {
+  track(CATEG.emergency, action)
+}
+
+export const trackerForProfessional = (action) => {
+  track(CATEG.find_pro, action)
+}
+
+export const trackerForArticle = (action) => {
+  track(CATEG.article, action)
+}
diff --git a/styles/article.scss b/styles/article.scss
new file mode 100644
index 00000000..5e9324d7
--- /dev/null
+++ b/styles/article.scss
@@ -0,0 +1,22 @@
+@import "sizes.scss";
+
+.text-bold {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.my-font {
+  font-family: Marianne,arial,sans-serif !important;
+  font-size: 16px !important;
+}
+
+.container-list {
+  ul {
+    padding-left: 2rem;
+  }
+}
+
+.logo-with-title {
+  display: flex;
+}
\ No newline at end of file
diff --git a/styles/beContacted.scss b/styles/beContacted.scss
index da4f49e3..0fcd3d28 100644
--- a/styles/beContacted.scss
+++ b/styles/beContacted.scss
@@ -119,4 +119,140 @@
 
 .card-center-img {
   justify-content: center;
+}
+
+.card-text {
+  color: var(--bleuFranceSun);
+  h3 {
+    color: var(--bleuFranceSun);
+  }
+}
+
+.card-space {
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
+
+.card-bottom {
+  margin-bottom: 2em !important;
+}
+
+.card-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5%;
+  padding-top: 5%;
+}
+
+.fr-tile--horizontal .fr-tile__img {
+  width: 5rem !important;
+  height: 5rem !important;
+}
+
+.arrow-flex {
+  display: flex;
+  align-items: center;
+}
+
+@media screen and (min-width: 700px) {
+  .logo-appel-margin {
+    margin-top: 1rem;
+  }
+  .tile-image {
+    margin: 2rem !important
+  }
+  .tile-text-title {
+    text-align: start;
+    margin: 1rem 0rem 1rem 0rem !important
+  }
+  .tile-text-desc {
+    text-align: start;
+    margin-bottom: 1rem !important
+  }
+
+  .tile .selected {
+    flex-direction: row;
+    align-self: center;
+    margin-bottom: 1rem;
+  }
+  .fr-tile--vertical-md {
+    align-items: normal;
+    flex-direction: row !important;
+    width: 100%;    
+  }
+  .icone-arrow {
+    display: flex !important;
+    min-width: 8rem;
+    justify-content: flex-end;
+    align-items: flex-end;
+    align-content: flex-end;
+    flex-wrap: wrap;
+    margin-bottom: 2rem;
+  }  
+}
+
+@media screen and (max-width: 430px) {
+  .logo-appel-margin {
+    margin-top: 1rem;
+  }
+  .tile-image {
+    margin: 6.5rem 1.5rem 1.5rem 1.5rem !important
+  }
+  .tile-text-title {
+    text-align: start;
+    margin: 1.5rem 0rem 0rem 0rem !important
+  }
+  .tile-text-desc {
+    text-align: start;
+    margin: 0rem 1rem 1.5rem 0rem !important
+  }
+  .tile .selected {
+    align-self: flex-end;
+    margin-bottom: 1rem;
+  }
+  .fr-tile--vertical-md {
+    align-items: normal !important;
+    flex-direction: row !important;
+    width: 100% !important;
+  }
+  .icone-arrow:last-of-type {
+    margin-top: auto;
+    margin-left: auto;
+    margin-bottom: 2rem;
+  }
+}
+
+@media screen and (min-width: 431px) {
+  .logo-appel-margin {
+    margin-top: 0rem;
+  }
+  .tile-image {
+    margin: 2.5rem 1.5rem 1.5rem 1.5rem !important
+  }
+  .tile-text-title {
+    text-align: start;
+    margin-top: 2rem !important
+  }
+  .tile-text-desc {
+    text-align: start;
+    margin-bottom: 2rem !important
+  }
+  .tile .selected {
+    display: flex !important;
+    align-self: flex-end;
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+  }
+  .fr-tile--vertical-md {
+    align-items: normal;
+    flex-direction: row !important;
+    width: 100%;    
+  }
+
+}
+
+.icone-arrow:last-of-type {
+  margin-top: auto;
+  margin-left: auto;
 }
\ No newline at end of file
diff --git a/styles/components/proTable.scss b/styles/components/proTable.scss
new file mode 100644
index 00000000..710ff9a7
--- /dev/null
+++ b/styles/components/proTable.scss
@@ -0,0 +1,120 @@
+.tables {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  margin: 32px 0 16px 0;
+}
+
+.pagination-size {
+  display: flex;
+  justify-content: center;
+  min-width: 24rem;
+
+}
+
+.around-me-button {
+  margin-left: 1rem;
+}
+
+.gap-filter {
+  margin-bottom: 6%;
+}
+
+.columnBox,
+.box {
+  width: 100%;
+  padding: 32px;
+  border: solid 1px #bfbcbc;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0 16px;
+}
+
+.userIcon {
+  color: #929292;
+}
+
+.name {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.contactInfo,
+.personnalInfo,
+.addressInfo {
+  display: flex;
+}
+
+.addressInfo {
+  flex-direction: column;
+  gap: 16px 0;
+}
+
+.contactInfo {
+  gap: 16px;
+  color: var(--bleuFranceSun);
+  align-items: center;
+}
+
+.horizontalSeparator {
+  border-top: solid 1px #bfbcbc;
+  width: 100%;
+  margin: 32px 0;
+}
+
+.bigSeparator,
+.optionalSeparator,
+.separator {
+  border-right: solid 1px #bfbcbc;
+}
+
+.optionalSeparator,
+.separator {
+  margin: 0 8px;
+}
+
+.optionalSeparator {
+  display: none;
+}
+
+.bigSeparator {
+  height: 56px;
+}
+
+.badge {
+  flex-shrink: 0;
+}
+
+@media (min-width: 769px) {
+  .box {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .horizontalSeparator {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .personnalInfo {
+    align-items: center;
+  }  
+
+  .addressInfo {
+    flex-direction: row;
+  }
+
+  .optionalSeparator {
+    display: block;
+  }
+}
+
+.loader-spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
\ No newline at end of file
diff --git a/styles/globals.scss b/styles/globals.scss
index e10507fa..2714416c 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -177,6 +177,10 @@ a {
   color: var(--grey425) !important;
 }
 
+.button-ressource {
+  margin-bottom: 40px;
+}
+
 .widget-header {
   align-items: center;
   margin-block: $xl;
diff --git a/styles/index.scss b/styles/index.scss
index 78ff66e0..e9482c46 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -4,6 +4,8 @@
 @import "survey.scss";
 @import "results.scss";
 @import "beContacted.scss";
+@import "article.scss";
 
 @import "ab-testing/demographic-data.scss";
-@import "components/auto-complete-zipcode.scss";
\ No newline at end of file
+@import "components/auto-complete-zipcode.scss";
+@import "components/proTable.scss";
\ No newline at end of file
diff --git a/styles/results.scss b/styles/results.scss
index 4d52dfc1..95b9e58d 100644
--- a/styles/results.scss
+++ b/styles/results.scss
@@ -12,6 +12,94 @@
   color: var(--primaryRedDark);
 }
 
+.background-color-h6 {
+  background-color: var(--bleuFrance935);
+  padding-bottom: 3%;
+}
+
+.horizontal-line-testimony {
+  padding: 0 0.5rem 0.5rem !important;
+}
+
+.text-color {
+  color: #000091 !important
+}
+
+.text-underline {
+  text-decoration: underline;
+}
+
+.text-alert-color {
+  color: #c61010 !important;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.text-margin {
+  margin: 0.5rem !important;
+}
+
+.image-score {
+  margin: 1.5rem 0 1.5rem 1rem !important
+}
+
+.text-black-color {
+  color: #000000 !important
+}
+
+.remove-box-shadow {
+  box-shadow: none !important
+}
+
+.height-tile {
+  min-height: 13rem;
+}
+
+.padding-top-h5 {
+  padding-top: 1rem;
+}
+
+.size-font {
+  font-size: 1rem !important
+}
+
+.center-button {
+  display: flex;
+  justify-content: center;
+  padding-top: 5%;
+}
+
+.button-be-better {
+  min-width: 40%;
+  border-color: transparent;
+  border-radius: $xl;
+  text-transform: uppercase;
+  justify-content: center;
+  margin-top: $xxxxxxs;
+  margin-bottom: $xxxxxs;
+}
+
+
+.score-progressbar {
+  .progress {
+    background-color: var(--bleuFrance935);
+    margin-top: $sm;
+    margin-bottom: $xxxs;
+    height: 30px;
+    border-radius: 20px;
+  }
+
+  .progress-bar {
+    background-color: var(--bleuFranceSun);
+  }
+
+  .progress-number {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+
 .contact-mamanblues {
   margin-block: $sm;
 
diff --git a/yarn.lock b/yarn.lock
index d942e2d7..7f9ca9a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -35,6 +35,13 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
+  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.18.8", "@babel/compat-data@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.0.tgz#2a592fd89bacb1fcde68de31bee4f2f2dacb0e86"
@@ -92,7 +99,17 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.18.6":
+"@babel/generator@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.4.tgz#64a94b7448989f421f919d5239ef553b37bb26bc"
+  integrity sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==
+  dependencies:
+    "@babel/types" "^7.21.4"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
   integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
@@ -184,6 +201,14 @@
     "@babel/template" "^7.18.10"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -198,6 +223,13 @@
   dependencies:
     "@babel/types" "^7.18.9"
 
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
+  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
+  dependencies:
+    "@babel/types" "^7.21.4"
+
 "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
@@ -283,11 +315,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
   integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
 
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
+"@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -326,6 +368,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.0.tgz#497fcafb1d5b61376959c1c338745ef0577aa02c"
   integrity sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==
 
+"@babel/parser@^7.20.7", "@babel/parser@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
+  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -1127,6 +1174,15 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
+"@babel/template@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
+  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
 "@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.18.9", "@babel/traverse@^7.19.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.0.tgz#eb9c561c7360005c592cc645abafe0c3c4548eed"
@@ -1143,6 +1199,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.4.5":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.4.tgz#a836aca7b116634e97a6ed99976236b3282c9d36"
+  integrity sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==
+  dependencies:
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.4"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.21.4"
+    "@babel/types" "^7.21.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.0.tgz#75f21d73d73dc0351f3368d28db73465f4814600"
@@ -1152,6 +1224,15 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4"
+  integrity sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -1162,6 +1243,13 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@codegouvfr/react-dsfr@^0.46.4":
+  version "0.46.4"
+  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-0.46.4.tgz#0c6b18485a6ecbd5d9e809fc8073ac1baf3fed21"
+  integrity sha512-HLMQZdQ79bAFLVtPdmZmKvA1a6nkZUf5+DF6qcEQu/Xt7i8bem7jVjfH+5X6v5jtLCMBTZV9ACHqJKQLurQCHw==
+  dependencies:
+    tsafe "^1.6.0"
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -1184,6 +1272,40 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.5.tgz#33f1b838dbf1f923bfa517e008362b78ddbbf318"
@@ -1209,11 +1331,6 @@
   resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.7.2.tgz#c522fce21a14989a10e30583160118c39c9c05d1"
   integrity sha512-hPNtz+gHcc8m7ZPANxSOFMz4Ap+M9FHOudqoMR/+Kjl5FCOqwA6u/aoYnMJ8KqedS1k5XThFMp7jiktr53qXYw==
 
-"@gouvfr/dsfr@^1.8.1":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.8.5.tgz#e99d095e99debcce0c41db18989637290d588b78"
-  integrity sha512-29L+THvWmYJXztPa0Os5TS9yD2WQbrH7VnCKxkyUXQZQ+6lsGebtz0GdCnLexOWDfCn1y53Mh7+/ihxI/z0Vjw==
-
 "@graphql-typed-document-node/core@^3.0.0":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
@@ -1435,7 +1552,7 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/resolve-uri@^3.0.3":
+"@jridgewell/resolve-uri@3.1.0", "@jridgewell/resolve-uri@^3.0.3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
@@ -1453,7 +1570,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
@@ -1466,6 +1583,14 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@@ -1650,6 +1775,11 @@
   dependencies:
     "@babel/runtime" "^7.6.2"
 
+"@remix-run/router@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.5.0.tgz#57618e57942a5f0131374a9fdb0167e25a117fdc"
+  integrity sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==
+
 "@restart/hooks@^0.4.0", "@restart/hooks@^0.4.5":
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.5.tgz#e7acbea237bfc9e479970500cf87538b41a1ed02"
@@ -3640,6 +3770,22 @@ babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz#cd977cc0ff8410d5cbfdd142e42576e9c8794b87"
+  integrity sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.21"
+    picomatch "^2.3.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -4087,6 +4233,11 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001370:
   version "1.0.30001390"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz#158a43011e7068ef7fc73590e9fd91a7cece5e7f"
@@ -4626,6 +4777,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
 css-line-break@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
@@ -4663,6 +4819,15 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-to-react-native@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
+  integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-what@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -6040,6 +6205,15 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^10.11.4:
+  version "10.11.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.11.4.tgz#7e4a3ffeea05129425b6ff8674a21dd9a4f607b2"
+  integrity sha512-G69oXNILHETM95lI7UNORG8T7lVN9GnwAf6V8OV7asdWLo7cLVsCFXgPQveWb4fSIDC0FnQQhFnx6blVdmdl3A==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -6527,7 +6701,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -8421,6 +8595,13 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
   resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz#26c8a3cee6cc05fbcf1e333cd2fc3e003326c0b5"
   integrity sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==
 
+next-transpile-modules@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/next-transpile-modules/-/next-transpile-modules-10.0.0.tgz#7152880048835acb64d05fc7aa34910cbe7994da"
+  integrity sha512-FyeJ++Lm2Fq31gbThiRCrJlYpIY9QaI7A3TjuhQLzOix8ChQrvn5ny4MhfIthS5cy6+uK1AhDRvxVdW17y3Xdw==
+  dependencies:
+    enhanced-resolve "^5.10.0"
+
 next@12.2.6:
   version "12.2.6"
   resolved "https://registry.yarnpkg.com/next/-/next-12.2.6.tgz#105383333c8de542a8c28db9246bd9f2d62f73d3"
@@ -9183,7 +9364,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -9574,6 +9755,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f"
+  integrity sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==
+  dependencies:
+    "@remix-run/router" "1.5.0"
+    react-router "6.10.0"
+
+react-router@6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971"
+  integrity sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==
+  dependencies:
+    "@remix-run/router" "1.5.0"
+
 react-transition-group@^4.4.1:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -9810,6 +10006,11 @@ remark-squeeze-paragraphs@4.0.0:
   dependencies:
     mdast-squeeze-paragraphs "^4.0.0"
 
+remixicon@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-3.2.0.tgz#7c3f4c0a073bc4d1f9e8e9941f37a2961de5b561"
+  integrity sha512-ADh4EQE4UGtm9GHqD+TIfVp1b0zeWso6efaMAnejdB6/7Z1W02Ka5K8khQaz+LNgIqC6dSZxCvXMWNalYWHiNQ==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -10158,6 +10359,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -10578,12 +10784,28 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+styled-components@^5.3.9:
+  version "5.3.9"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.9.tgz#641af2a8bb89904de708c71b439caa9633e8f0ba"
+  integrity sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 styled-jsx@5.0.4:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.4.tgz#5b1bd0b9ab44caae3dd1361295559706e044aa53"
   integrity sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -10907,6 +11129,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+tsafe@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.6.0.tgz#48a9bd0a4c43df43d289bdfc1d89f0d7fffbd612"
+  integrity sha512-wlUeRBnyN3EN2chXznpLm7vBEvJLEOziDU+MN6NRlD99AkwmXgtChNQhp+V97VyRa3Bp05IaL4Cocsc7JlyEUg==
+
 tsconfig-paths@^3.12.0, tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"