diff --git a/client/locales.md b/client/locales.md
index 2b1ea805..4af3a6d1 100644
--- a/client/locales.md
+++ b/client/locales.md
@@ -26,3 +26,4 @@
 | /components/websites               |   OK   |  FRED  |       FR,EN |
 | /components/wiki                   |   OK   |  FRED  |       FR,EN |
 | /components/share                  |   OK   |  FRED  |       FR,EN |
+| /layout/*                          |   OK   |  FRED  |       FR,EN |
diff --git a/client/src/components/footer/index.tsx b/client/src/components/footer/index.tsx
index c5071117..02f2cbce 100644
--- a/client/src/components/footer/index.tsx
+++ b/client/src/components/footer/index.tsx
@@ -1,8 +1,6 @@
 import React from "react";
-import cn from "classnames";
-import { Col, Container, Link, Logo, Row, Title } from "@dataesr/dsfr-plus";
-import { IntlProvider, createIntl } from "react-intl";
-import styles from "./styles.module.scss";
+import { Container, Link, Logo } from "@dataesr/dsfr-plus";
+import { IntlProvider } from "react-intl";
 
 const modules = import.meta.glob("./locales/*.json", {
   eager: true,
@@ -16,8 +14,9 @@ const messages = Object.keys(modules).reduce((acc, key) => {
   return acc;
 }, {});
 
-const locale = "fr";
-const intl = createIntl({ locale, messages: messages[locale] });
+export function FooterTop({ children }: { children?: React.ReactNode }) {
+  return <div className="fr-footer__top">{children}</div>;
+}
 
 export function Footer({
   children,
@@ -26,203 +25,9 @@ export function Footer({
   children?: React.ReactNode;
   fluid?: boolean;
 }) {
-  const version = import.meta.env?.VITE_VERSION;
   return (
     <IntlProvider messages={messages} locale="fr" defaultLocale="fr">
       <footer className="fr-footer fr-mt-3w" role="contentinfo" id="footer">
-        <div className="fr-footer__top">
-          <Container>
-            <Row gutters verticalAlign="middle">
-              <Col xs={12} lg={4}>
-                <Row horizontalAlign="left">
-                  <div className={styles["text-left"]}>
-                    <Title
-                      as="h3"
-                      className={cn("fr-footer__top-cat", styles["text-left"])}
-                    >
-                      {intl.formatMessage({
-                        id: "layout.footer.top.about.help",
-                      })}
-                    </Title>
-                    <ul className="fr-footer__top-list">
-                      <li>
-                        <Link className="fr-footer__top-link" href="/about/FAQ">
-                          {intl.formatMessage({
-                            id: "layout.footer.top.about.faq",
-                          })}
-                        </Link>
-                      </li>
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="/about/team"
-                        >
-                          {intl.formatMessage({
-                            id: "layout.footer.top.about.team",
-                          })}
-                        </Link>
-                      </li>
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="/about/resources"
-                        >
-                          {intl.formatMessage({
-                            id: "layout.footer.top.about.resources",
-                          })}
-                        </Link>
-                      </li>
-                      {/* <li>
-                      <Link
-                        className="fr-footer__top-link"
-                        href="/about/tutorial"
-                      >
-                        {intl.formatMessage({
-                          id: "layout.footer.top.about.tutorial",
-                        })}
-                      </Link>
-                    </li> */}
-                      {/* <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="/about/glossary"
-                        >
-                          {intl.formatMessage({
-                            id: "layout.footer.top.about.glossary",
-                          })}
-                        </Link>
-                      </li> */}
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="/about/contact"
-                        >
-                          {intl.formatMessage({
-                            id: "layout.footer.top.about.contact",
-                          })}
-                        </Link>
-                      </li>
-                    </ul>
-                  </div>
-                </Row>
-              </Col>
-              <Col xs={12} lg={4}>
-                <Row horizontalAlign="center">
-                  <div className={styles["text-center"]}>
-                    <Title
-                      as="h3"
-                      className={cn(
-                        "fr-footer__top-cat",
-                        styles["text-center"]
-                      )}
-                    >
-                      {intl.formatMessage({
-                        id: "layout.footer.top.about.follow",
-                      })}
-                    </Title>
-                    <ul className="fr-footer__top-list">
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="https://twitter.com/dataESR"
-                          target="_blank"
-                          icon="twitter-x-fill"
-                          iconPosition="left"
-                        >
-                          X
-                        </Link>
-                      </li>
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="https://www.linkedin.com/company/enseignementsup-recherche/"
-                          target="_blank"
-                          icon="linkedin-box-fill"
-                          iconPosition="left"
-                        >
-                          Linkedin
-                        </Link>
-                      </li>
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="https://www.facebook.com/enseignementsup.recherche"
-                          target="_blank"
-                          iconPosition="left"
-                          icon="facebook-circle-fill"
-                        >
-                          Facebook
-                        </Link>
-                      </li>
-                    </ul>
-                  </div>
-                </Row>
-              </Col>
-              <Col xs={12} lg={4}>
-                <Row horizontalAlign="right">
-                  <div className={styles["text-right"]}>
-                    <Title
-                      as="h3"
-                      className={cn("fr-footer__top-cat", styles["text-right"])}
-                    >
-                      {intl.formatMessage({
-                        id: "layout.footer.top.about.also",
-                      })}
-                    </Title>
-                    <ul className="fr-footer__top-list">
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="https://github.com/dataesr/scanr-next-gen"
-                          target="_blank"
-                        >
-                          GitHub
-                          {version && ` – v${version}`}
-                        </Link>
-                      </li>
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="https://curiexplore.enseignementsup-recherche.gouv.fr/"
-                          target="_blank"
-                        >
-                          CurieXplore
-                        </Link>
-                      </li>
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="https://barometredelascienceouverte.esr.gouv.fr/"
-                          target="_blank"
-                        >
-                          Baromètre de la Science Ouverte
-                        </Link>
-                      </li>
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="https://data.esr.gouv.fr/FR/"
-                          target="_blank"
-                        >
-                          #dataESR
-                        </Link>
-                      </li>
-                      <li>
-                        <Link
-                          className="fr-footer__top-link"
-                          href="https://data.enseignementsup-recherche.gouv.fr/pages/home/"
-                          target="_blank"
-                        >
-                          Plateforme Open Data
-                        </Link>
-                      </li>
-                    </ul>
-                  </div>
-                </Row>
-              </Col>
-            </Row>
-          </Container>
-        </div>
         <Container fluid={fluid}>{children}</Container>
       </footer>
     </IntlProvider>
@@ -238,7 +43,7 @@ export function FooterBottom({
 }) {
   const childs = React.Children.toArray(children);
   return (
-    <div className="fr-footer__bottom">
+    <div className="fr-container fr-footer__bottom">
       <ul className="fr-footer__bottom-list">
         {childs.map((child, i) => (
           <li key={i} className="fr-footer__bottom-item">
@@ -270,7 +75,7 @@ export function FooterBody({
   )?.[0];
 
   return (
-    <div className="fr-footer__body">
+    <div className="fr-container fr-footer__body">
       {logo ? (
         <div className="fr-footer__brand fr-enlarge-link">{logo}</div>
       ) : null}
diff --git a/client/src/components/switch-theme.tsx b/client/src/components/switch-theme.tsx
deleted file mode 100644
index d39c01e6..00000000
--- a/client/src/components/switch-theme.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-export default function SwitchTheme() {
-  return (
-    <dialog id="fr-theme-modal" className="fr-modal" role="dialog" aria-labelledby="fr-theme-modal-title">
-      <div className="fr-container fr-container--fluid fr-container-md">
-        <div className="fr-grid-row fr-grid-row--center">
-          <div className="fr-col-12 fr-col-md-6 fr-col-lg-4">
-            <div className="fr-modal__body">
-              <div className="fr-modal__header">
-                <button className="fr-btn--close fr-btn" aria-controls="fr-theme-modal" id="button-5622" title="Fermer">
-                  Fermer
-                </button>
-              </div>
-              <div className="fr-modal__content">
-                <h1 id="fr-theme-modal-title" className="fr-modal__title">
-                  Paramètres d’affichage
-                </h1>
-                <div id="fr-display" className="fr-display">
-                  <fieldset className="fr-fieldset" id="display-fieldset">
-                    <legend className="fr-fieldset__legend--regular fr-fieldset__legend" id="display-fieldset-legend">
-                      Choisissez un thème pour personnaliser l’apparence du site.
-                    </legend>
-                    <div className="fr-fieldset__element">
-                      <div className="fr-radio-group fr-radio-rich">
-                        <input value="light" type="radio" id="fr-radios-theme-light" name="fr-radios-theme" />
-                        <label className="fr-label" htmlFor="fr-radios-theme-light">
-                          Thème clair
-                        </label>
-                        <div className="fr-radio-rich__img">
-                          <svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
-                            <use className="fr-artwork-decorative" href="/artwork/pictograms/environment/sun.svg#artwork-decorative" />
-                            <use className="fr-artwork-minor" href="/artwork/pictograms/environment/sun.svg#artwork-minor" />
-                            <use className="fr-artwork-major" href="/artwork/pictograms/environment/sun.svg#artwork-major" />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="fr-fieldset__element">
-                      <div className="fr-radio-group fr-radio-rich">
-                        <input value="dark" type="radio" id="fr-radios-theme-dark" name="fr-radios-theme" />
-                        <label className="fr-label" htmlFor="fr-radios-theme-dark">
-                          Thème sombre
-                        </label>
-                        <div className="fr-radio-rich__img">
-                          <svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
-                            <use className="fr-artwork-decorative" href="/artwork/pictograms/environment/moon.svg#artwork-decorative" />
-                            <use className="fr-artwork-minor" href="/artwork/pictograms/environment/moon.svg#artwork-minor" />
-                            <use className="fr-artwork-major" href="/artwork/pictograms/environment/moon.svg#artwork-major" />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="fr-fieldset__element">
-                      <div className="fr-radio-group fr-radio-rich">
-                        <input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme" />
-                        <label className="fr-label" htmlFor="fr-radios-theme-system">
-                          Système
-                          <span className="fr-hint-text">Utilise les paramètres système</span>
-                        </label>
-                        <div className="fr-radio-rich__img">
-                          <svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
-                            <use className="fr-artwork-decorative" href="/artwork/pictograms/system/system.svg#artwork-decorative" />
-                            <use className="fr-artwork-minor" href="/artwork/pictograms/system/system.svg#artwork-minor" />
-                            <use className="fr-artwork-major" href="/artwork/pictograms/system/system.svg#artwork-major" />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </dialog>
-  )
-}
\ No newline at end of file
diff --git a/client/src/layout/Footer.tsx b/client/src/layout/Footer.tsx
deleted file mode 100644
index 99f3bdc9..00000000
--- a/client/src/layout/Footer.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Link, Logo } from "@dataesr/dsfr-plus";
-import { Footer, FooterBody, FooterBottom } from "../components/footer";
-import { useIntl } from "react-intl";
-import SwitchTheme from "../components/switch-theme";
-import useConsent from "../hooks/useConsent";
-
-export default function MainFooter() {
-  const intl = useIntl();
-  const { dialogId } = useConsent();
-  return (
-    <Footer>
-      <FooterBody
-        description={intl.formatMessage({ id: "layout.footer.tagline" })}
-      >
-        <Logo
-          splitCharacter="|"
-          text="Ministère|de l'enseignement|supérieur|et de la recherche"
-        />
-        <Link
-          className="fr-footer__content-link"
-          target="_blank"
-          rel="noreferrer noopener external"
-          title="[À MODIFIER - Intitulé] - nouvelle fenêtre"
-          href="https://legifrance.gouv.fr"
-        >
-          legifrance.gouv.fr
-        </Link>
-        <Link
-          className="fr-footer__content-link"
-          target="_blank"
-          rel="noreferrer noopener external"
-          title="[À MODIFIER - Intitulé] - nouvelle fenêtre"
-          href="https://gouvernement.fr"
-        >
-          gouvernement.fr
-        </Link>
-        <Link
-          className="fr-footer__content-link"
-          target="_blank"
-          rel="noreferrer noopener external"
-          title="[À MODIFIER - Intitulé] - nouvelle fenêtre"
-          href="https://service-public.fr"
-        >
-          service-public.fr
-        </Link>
-        <Link
-          className="fr-footer__content-link"
-          target="_blank"
-          rel="noreferrer noopener external"
-          title="[À MODIFIER - Intitulé] - nouvelle fenêtre"
-          href="https://data.gouv.fr"
-        >
-          data.gouv.fr
-        </Link>
-      </FooterBody>
-      <FooterBottom>
-        <Link className="fr-footer__bottom-link" href="#">
-          {intl.formatMessage({
-            id: "layout.footer.legal-notice",
-          })}
-        </Link>
-        <Link className="fr-footer__bottom-link" href="#">
-          {intl.formatMessage({
-            id: "layout.footer.personal-data",
-          })}
-        </Link>
-        <Link className="fr-footer__bottom-link" href="#">
-          {intl.formatMessage({
-            id: "layout.footer.accessibility",
-          })}
-        </Link>
-        <button
-          className="fr-footer__bottom-link"
-          data-fr-opened="false"
-          aria-controls={dialogId}
-        >
-          {intl.formatMessage({
-            id: "layout.footer.cookies",
-          })}
-        </button>
-        <button
-          className="fr-footer__bottom-link fr-icon-theme-fill fr-btn--icon-left"
-          aria-controls="fr-theme-modal"
-          data-fr-opened="false"
-        >
-          {intl.formatMessage({
-            id: "layout.footer.switch-theme",
-          })}
-        </button>
-      </FooterBottom>
-      <SwitchTheme />
-    </Footer>
-  );
-}
diff --git a/client/src/layout/consent.tsx b/client/src/layout/components/consent/index.tsx
similarity index 73%
rename from client/src/layout/consent.tsx
rename to client/src/layout/components/consent/index.tsx
index 30cdee99..f07ead48 100644
--- a/client/src/layout/consent.tsx
+++ b/client/src/layout/components/consent/index.tsx
@@ -1,14 +1,31 @@
-import useConsent from "../hooks/useConsent";
+import { RawIntlProvider, createIntl } from "react-intl";
+import useConsent from "../../../hooks/useConsent";
+import { useDSFRConfig } from "@dataesr/dsfr-plus";
+
+const modules = import.meta.glob('./locales/*.json', { eager: true, import: 'default' })
+const messages = Object.keys(modules).reduce((acc, key) => {
+  const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1];
+  if (locale) {
+    return { ...acc, [locale]: modules[key] }
+  }
+  return acc;
+}, {});
 
 export default function Consent() {
+  const { locale } = useDSFRConfig();
+  const intl = createIntl({ locale, messages: messages[locale] });
   const { dialogId, consent, setConsent, set } = useConsent({ twitter: 0, matomo: 0, youtube: 0, facebook: 0, linkedin: 0 });
 
   return (
-    <>
+    <RawIntlProvider value={intl}>
       {!set && <div className="fr-consent-banner">
-        <h2 className="fr-h6">À propos des cookies sur scanr.enseignementsup-recherche.gouv.fr</h2>
+        <h2 className="fr-h6">
+          {intl.formatMessage({ id: "layout.consent.title" })}
+        </h2>
         <div className="fr-consent-banner__content">
-          <p className="fr-text--sm">Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site. Pour en savoir plus, visitez la page <a href="">Données personnelles et cookies</a>. Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.</p>
+          <p className="fr-text--sm">
+            {intl.formatMessage({ id: "layout.consent.content" })}
+          </p>
         </div>
         <ul className="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
           <li>
@@ -17,7 +34,7 @@ export default function Consent() {
               title="Autoriser tous les cookies"
               onClick={() => setConsent({ twitter: 1, matomo: 1, youtube: 1, facebook: 1, linkedin: 1 })}
             >
-              Tout accepter
+              {intl.formatMessage({ id: "layout.consent.accept-all" })}
             </button>
           </li>
           <li>
@@ -26,7 +43,7 @@ export default function Consent() {
               title="Refuser tous les cookies"
               onClick={() => setConsent({ twitter: 0, matomo: 0, youtube: 0, facebook: 0, linkedin: 0 })}
             >
-              Tout refuser
+              {intl.formatMessage({ id: "layout.consent.refuse-all" })}
             </button>
           </li>
           <li>
@@ -36,7 +53,7 @@ export default function Consent() {
               aria-controls={dialogId}
               title="Personnaliser les cookies"
             >
-              Personnaliser
+              {intl.formatMessage({ id: "layout.consent.customize" })}
             </button>
           </li>
         </ul>
@@ -49,17 +66,18 @@ export default function Consent() {
               <div className="fr-modal__body">
                 <div className="fr-modal__header">
                   <button className="fr-btn--close fr-btn" aria-controls={dialogId} title="Fermer">
-                    Fermer
+                    {intl.formatMessage({ id: "layout.consent.cookies.close" })}
                   </button>
                 </div>
                 <div className="fr-modal__content">
                   <h1 id="fr-consent-modal-title" className="fr-modal__title">
-                    Panneau de gestion des cookies
+                    {intl.formatMessage({ id: "layout.consent.cookies" })}
                   </h1>
                   <div className="fr-consent-manager">
                     <div className="fr-consent-service fr-consent-manager__header">
                       <fieldset className="fr-fieldset fr-fieldset--inline">
-                        <legend id="finality-legend" className="fr-consent-service__title">Préférences pour tous les services. <a href="">Données personnelles et cookies</a>
+                        <legend id="finality-legend" className="fr-consent-service__title">
+                          {intl.formatMessage({ id: "layout.consent.cookies.preferences" })}
                         </legend>
                         <div className="fr-consent-service__radios">
                           <div className="fr-radio-group">
@@ -77,7 +95,7 @@ export default function Consent() {
                               }}
                             />
                             <label className="fr-label" htmlFor="consent-all-accept">
-                              Tout accepter
+                              {intl.formatMessage({ id: "layout.consent.accept-all" })}
                             </label>
                           </div>
                           <div className="fr-radio-group">
@@ -95,7 +113,7 @@ export default function Consent() {
                               }}
                             />
                             <label className="fr-label" htmlFor="consent-all-refuse">
-                              Tout refuser
+                              {intl.formatMessage({ id: "layout.consent.refuse-all" })}
                             </label>
                           </div>
                         </div>
@@ -103,7 +121,9 @@ export default function Consent() {
                     </div>
                     <div className="fr-consent-service">
                       <fieldset aria-labelledby="finality-1-legend finality-1-desc" role="group" className="fr-fieldset fr-fieldset--inline">
-                        <legend id="finality-1-legend" className="fr-consent-service__title">Statistique</legend>
+                        <legend id="finality-1-legend" className="fr-consent-service__title">
+                          {intl.formatMessage({ id: "layout.consent.cookies.finality.stats" })}
+                        </legend>
                         <div className="fr-consent-service__radios">
                           <div className="fr-radio-group">
                             <input
@@ -114,7 +134,7 @@ export default function Consent() {
                               onChange={() => { consent.matomo = 1 }}
                             />
                             <label className="fr-label" htmlFor="consent-finality-1-accept">
-                              Accepter
+                              {intl.formatMessage({ id: "layout.consent.cookies.accept" })}
                             </label>
                           </div>
                           <div className="fr-radio-group">
@@ -126,18 +146,20 @@ export default function Consent() {
                               onChange={() => { consent.matomo = 0 }}
                             />
                             <label className="fr-label" htmlFor="consent-finality-1-refuse">
-                              Refuser
+                              {intl.formatMessage({ id: "layout.consent.cookies.refuse" })}
                             </label>
                           </div>
                         </div>
                         <p id="finality-1-desc" className="fr-consent-service__desc">
-                          Les cookies statistiques aident, par la collecte d'informations anonymisées, à comprendre comment les visiteurs interagissent avec scanR.
+                          {intl.formatMessage({ id: "layout.consent.cookies.finality.stats.desc" })}
                         </p>
                       </fieldset>
                     </div>
                     <div className="fr-consent-service">
                       <fieldset aria-labelledby="share-legend share-desc" role="group" className="fr-fieldset fr-fieldset--inline">
-                        <legend id="share-legend" className="fr-consent-service__title">Partage</legend>
+                        <legend id="share-legend" className="fr-consent-service__title">
+                          {intl.formatMessage({ id: "layout.consent.cookies.finality.share" })}
+                        </legend>
                         <div className="fr-consent-service__radios">
                           <div className="fr-radio-group">
                             <input
@@ -152,7 +174,7 @@ export default function Consent() {
                               }}
                             />
                             <label className="fr-label" htmlFor="consent-share-accept">
-                              Accepter
+                              {intl.formatMessage({ id: "layout.consent.cookies.accept" })}
                             </label>
                           </div>
                           <div className="fr-radio-group">
@@ -169,20 +191,57 @@ export default function Consent() {
                               }}
                             />
                             <label className="fr-label" htmlFor="consent-share-refuse">
-                              Refuser
+                              {intl.formatMessage({ id: "layout.consent.cookies.refuse" })}
                             </label>
                           </div>
                         </div>
                         <p id="share-desc" className="fr-consent-service__desc">
-                          Afin de pouvoir partager les pages de scanR, il est nécessaire d'accepter les cookies de partage des réseaux sociaux.
+                          {intl.formatMessage({ id: "layout.consent.cookies.finality.share.desc" })}
                         </p>
                         <div className="fr-consent-service__collapse">
-                          <button className="fr-consent-service__collapse-btn" aria-expanded="false" aria-describedby="share-legend" aria-controls="share-collapse"> Voir plus de détails</button>
+                          <button className="fr-consent-service__collapse-btn" aria-expanded="false" aria-describedby="share-legend" aria-controls="share-collapse">
+                            {intl.formatMessage({ id: "layout.consent.cookies.finality.toggle" })}
+                          </button>
                         </div>
                         <div className="fr-consent-services fr-collapse" id="share-collapse">
                           <div className="fr-consent-service">
                             <fieldset className="fr-fieldset fr-fieldset--inline">
-                              <legend id="share-facebook-legend" className="fr-consent-service__title">Facebook</legend>
+                              <legend id="share-youtube-legend" className="fr-consent-service__title">
+                                Youtube
+                              </legend>
+                              <div className="fr-consent-service__radios fr-fieldset--inline">
+                                <div className="fr-radio-group">
+                                  <input
+                                    type="radio"
+                                    id="consent-share-youtube-accept"
+                                    name="consent-share-youtube"
+                                    checked={!!consent.youtube}
+                                    onChange={() => { consent.youtube = 1 }}
+                                  />
+                                  <label className="fr-label" htmlFor="consent-share-youtube-accept">
+                                    {intl.formatMessage({ id: "layout.consent.cookies.accept" })}
+                                  </label>
+                                </div>
+                                <div className="fr-radio-group">
+                                  <input
+                                    type="radio"
+                                    id="consent-share-youtube-refuse"
+                                    name="consent-share-youtube"
+                                    checked={!consent.youtube}
+                                    onChange={() => { consent.youtube = 0 }}
+                                  />
+                                  <label className="fr-label" htmlFor="consent-share-youtube-refuse">
+                                    {intl.formatMessage({ id: "layout.consent.cookies.refuse" })}
+                                  </label>
+                                </div>
+                              </div>
+                            </fieldset>
+                          </div>
+                          <div className="fr-consent-service">
+                            <fieldset className="fr-fieldset fr-fieldset--inline">
+                              <legend id="share-facebook-legend" className="fr-consent-service__title">
+                                Facebook
+                              </legend>
                               <div className="fr-consent-service__radios fr-fieldset--inline">
                                 <div className="fr-radio-group">
                                   <input
@@ -193,7 +252,7 @@ export default function Consent() {
                                     onChange={() => { consent.facebook = 1 }}
                                   />
                                   <label className="fr-label" htmlFor="consent-share-facebook-accept">
-                                    Accepter
+                                    {intl.formatMessage({ id: "layout.consent.cookies.accept" })}
                                   </label>
                                 </div>
                                 <div className="fr-radio-group">
@@ -205,7 +264,7 @@ export default function Consent() {
                                     onChange={() => { consent.facebook = 0 }}
                                   />
                                   <label className="fr-label" htmlFor="consent-share-facebook-refuse">
-                                    Refuser
+                                    {intl.formatMessage({ id: "layout.consent.cookies.refuse" })}
                                   </label>
                                 </div>
                               </div>
@@ -226,7 +285,7 @@ export default function Consent() {
                                     onChange={() => { consent.twitter = 1 }}
                                   />
                                   <label className="fr-label" htmlFor="consent-share-twitter-accept">
-                                    Accepter
+                                    {intl.formatMessage({ id: "layout.consent.cookies.accept" })}
                                   </label>
                                 </div>
                                 <div className="fr-radio-group">
@@ -238,7 +297,7 @@ export default function Consent() {
                                     onChange={() => { consent.twitter = 0 }}
                                   />
                                   <label className="fr-label" htmlFor="consent-share-twitter-refuse">
-                                    Refuser
+                                    {intl.formatMessage({ id: "layout.consent.cookies.refuse" })}
                                   </label>
                                 </div>
                               </div>
@@ -258,7 +317,7 @@ export default function Consent() {
                                     onChange={() => { consent.linkedin = 1 }}
                                   />
                                   <label className="fr-label" htmlFor="consent-share-linkedin-accept">
-                                    Accepter
+                                    {intl.formatMessage({ id: "layout.consent.cookies.accept" })}
                                   </label>
                                 </div>
                                 <div className="fr-radio-group">
@@ -270,7 +329,7 @@ export default function Consent() {
                                     onChange={() => { consent.linkedin = 0 }}
                                   />
                                   <label className="fr-label" htmlFor="consent-share-linkedin-refuse">
-                                    Refuser
+                                    {intl.formatMessage({ id: "layout.consent.cookies.refuse" })}
                                   </label>
                                 </div>
                               </div>
@@ -301,6 +360,6 @@ export default function Consent() {
           </div>
         </div>
       </dialog>
-    </>
+    </RawIntlProvider>
   )
 }
\ No newline at end of file
diff --git a/client/src/layout/components/consent/locales/en.json b/client/src/layout/components/consent/locales/en.json
new file mode 100644
index 00000000..9f8ed995
--- /dev/null
+++ b/client/src/layout/components/consent/locales/en.json
@@ -0,0 +1,19 @@
+{
+  "layout.consent.title": "About cookies on scanr.enseignementsup-recherche.gouv.fr",
+  "layout.consent.content": "Welcome! We use cookies to enhance your experience and the services available on this site. You can have control over the cookies you wish to enable at any time.",
+  "layout.consent.accept-all": "Accept All",
+  "layout.consent.refuse-all": "Refuse All",
+  "layout.consent.customize": "Customize",
+  "layout.consent.confirm": "Confirm My Choices",
+  "layout.consent.cookies.close": "Close",
+  "layout.consent.cookies": "Cookie Management Panel",
+  "layout.consent.cookies.preferences": "Preferences for all services.",
+  "layout.consent.cookies.all.desc": "To learn more, visit the Personal Data and Cookies page.",
+  "layout.consent.cookies.finality.stats": "Statistics",
+  "layout.consent.cookies.finality.stats.desc": "Statistical cookies help understand how visitors interact with scanR by collecting anonymized information.",
+  "layout.consent.cookies.finality.share": "Sharing",
+  "layout.consent.cookies.finality.share.desc": "To be able to share scanR pages, it is necessary to accept social media sharing cookies.",
+  "layout.consent.cookies.accept": "Accept",
+  "layout.consent.cookies.refuse": "Refuse",
+  "layout.consent.cookies.finality.toggle": "See more details"
+}
\ No newline at end of file
diff --git a/client/src/layout/components/consent/locales/fr.json b/client/src/layout/components/consent/locales/fr.json
new file mode 100644
index 00000000..c28ec566
--- /dev/null
+++ b/client/src/layout/components/consent/locales/fr.json
@@ -0,0 +1,19 @@
+{
+  "layout.consent.title": "À propos des cookies sur scanr.enseignementsup-recherche.gouv.fr",
+  "layout.consent.content": "Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site. Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.",
+  "layout.consent.accept-all": "Tout accepter",
+  "layout.consent.refuse-all": "Tout refuser",
+  "layout.consent.customize": "Personnaliser",
+  "layout.consent.confirm": "Confirmer mes choix",
+  "layout.consent.cookies.close": "Fermer",
+  "layout.consent.cookies": "Panneau de gestion des cookies",
+  "layout.consent.cookies.preferences": "Préférences pour tous les services.",
+  "layout.consent.cookies.all.desc": "Pour en savoir plus, visitez la page Données personnelles et cookies.",
+  "layout.consent.cookies.finality.stats": "Statistique",
+  "layout.consent.cookies.finality.stats.desc": "Les cookies statistiques aident, par la collecte d'informations anonymisées, à comprendre comment les visiteurs interagissent avec scanR.",
+  "layout.consent.cookies.finality.share": "Partage",
+  "layout.consent.cookies.finality.share.desc": "Afin de pouvoir partager les pages de scanR, il est nécessaire d'accepter les cookies de partage des réseaux sociaux.",
+  "layout.consent.cookies.accept": "Accepter",
+  "layout.consent.cookies.refuse": "Refuser",
+  "layout.consent.cookies.finality.toggle": "Voir plus de détails"
+}
\ No newline at end of file
diff --git a/client/src/layout/components/footer/index.tsx b/client/src/layout/components/footer/index.tsx
new file mode 100644
index 00000000..4a46835f
--- /dev/null
+++ b/client/src/layout/components/footer/index.tsx
@@ -0,0 +1,302 @@
+import cn from "classnames";
+import { Col, Container, Link, Logo, Row, Title, useDSFRConfig } from "@dataesr/dsfr-plus";
+import { Footer, FooterBody, FooterBottom, FooterTop } from "../../../components/footer";
+import { RawIntlProvider, createIntl } from "react-intl";
+import SwitchTheme from "../switch-theme";
+import useConsent from "../../../hooks/useConsent";
+import { version } from "react";
+import styles from "./styles.module.scss";
+
+const modules = import.meta.glob('./locales/*.json', { eager: true, import: 'default' })
+const messages = Object.keys(modules).reduce((acc, key) => {
+  const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1];
+  if (locale) {
+    return { ...acc, [locale]: modules[key] }
+  }
+  return acc;
+}, {});
+
+export default function MainFooter() {
+  const { locale } = useDSFRConfig();
+  const intl = createIntl({ locale, messages: messages[locale] });
+  const { dialogId } = useConsent();
+  return (
+    <RawIntlProvider value={intl}>
+      <Footer fluid={true}>
+        <FooterTop>
+          <Container>
+            <Row gutters verticalAlign="middle">
+              <Col xs={12} lg={4}>
+                <Row horizontalAlign="left">
+                  <div className={styles["text-left"]}>
+                    <Title
+                      as="h3"
+                      className={cn("fr-footer__top-cat", styles["text-left"])}
+                    >
+                      {intl.formatMessage({
+                        id: "layout.footer.top.about.help",
+                      })}
+                    </Title>
+                    <ul className="fr-footer__top-list">
+                      <li>
+                        <Link className="fr-footer__top-link" href="/about/FAQ">
+                          {intl.formatMessage({
+                            id: "layout.footer.top.about.faq",
+                          })}
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="/about/team"
+                        >
+                          {intl.formatMessage({
+                            id: "layout.footer.top.about.team",
+                          })}
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="/about/resources"
+                        >
+                          {intl.formatMessage({
+                            id: "layout.footer.top.about.resources",
+                          })}
+                        </Link>
+                      </li>
+                      {/* <li>
+                      <Link
+                        className="fr-footer__top-link"
+                        href="/about/tutorial"
+                      >
+                        {intl.formatMessage({
+                          id: "layout.footer.top.about.tutorial",
+                        })}
+                      </Link>
+                    </li> */}
+                      {/* <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="/about/glossary"
+                        >
+                          {intl.formatMessage({
+                            id: "layout.footer.top.about.glossary",
+                          })}
+                        </Link>
+                      </li> */}
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="/about/contact"
+                        >
+                          {intl.formatMessage({
+                            id: "layout.footer.top.about.contact",
+                          })}
+                        </Link>
+                      </li>
+                    </ul>
+                  </div>
+                </Row>
+              </Col>
+              <Col xs={12} lg={4}>
+                <Row horizontalAlign="center">
+                  <div className={styles["text-center"]}>
+                    <Title
+                      as="h3"
+                      className={cn(
+                        "fr-footer__top-cat",
+                        styles["text-center"]
+                      )}
+                    >
+                      {intl.formatMessage({
+                        id: "layout.footer.top.about.follow",
+                      })}
+                    </Title>
+                    <ul className="fr-footer__top-list">
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="https://twitter.com/dataESR"
+                          target="_blank"
+                          icon="twitter-x-fill"
+                          iconPosition="left"
+                        >
+                          X
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="https://www.linkedin.com/company/enseignementsup-recherche/"
+                          target="_blank"
+                          icon="linkedin-box-fill"
+                          iconPosition="left"
+                        >
+                          Linkedin
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="https://www.facebook.com/enseignementsup.recherche"
+                          target="_blank"
+                          iconPosition="left"
+                          icon="facebook-circle-fill"
+                        >
+                          Facebook
+                        </Link>
+                      </li>
+                    </ul>
+                  </div>
+                </Row>
+              </Col>
+              <Col xs={12} lg={4}>
+                <Row horizontalAlign="right">
+                  <div className={styles["text-right"]}>
+                    <Title
+                      as="h3"
+                      className={cn("fr-footer__top-cat", styles["text-right"])}
+                    >
+                      {intl.formatMessage({
+                        id: "layout.footer.top.about.also",
+                      })}
+                    </Title>
+                    <ul className="fr-footer__top-list">
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="https://github.com/dataesr/scanr-next-gen"
+                          target="_blank"
+                        >
+                          GitHub
+                          {version && ` – v${version}`}
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="https://curiexplore.enseignementsup-recherche.gouv.fr/"
+                          target="_blank"
+                        >
+                          CurieXplore
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="https://barometredelascienceouverte.esr.gouv.fr/"
+                          target="_blank"
+                        >
+                          Baromètre de la Science Ouverte
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="https://data.esr.gouv.fr/FR/"
+                          target="_blank"
+                        >
+                          #dataESR
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-footer__top-link"
+                          href="https://data.enseignementsup-recherche.gouv.fr/pages/home/"
+                          target="_blank"
+                        >
+                          Plateforme Open Data
+                        </Link>
+                      </li>
+                    </ul>
+                  </div>
+                </Row>
+              </Col>
+            </Row>
+          </Container>
+        </FooterTop>
+        <FooterBody
+          description={intl.formatMessage({ id: "layout.footer.tagline" })}
+        >
+          <Logo
+            splitCharacter="|"
+            text="Ministère|de l'enseignement|supérieur|et de la recherche"
+          />
+          <Link
+            className="fr-footer__content-link"
+            target="_blank"
+            rel="noreferrer noopener external"
+            title="[À MODIFIER - Intitulé] - nouvelle fenêtre"
+            href="https://legifrance.gouv.fr"
+          >
+            legifrance.gouv.fr
+          </Link>
+          <Link
+            className="fr-footer__content-link"
+            target="_blank"
+            rel="noreferrer noopener external"
+            title="[À MODIFIER - Intitulé] - nouvelle fenêtre"
+            href="https://gouvernement.fr"
+          >
+            gouvernement.fr
+          </Link>
+          <Link
+            className="fr-footer__content-link"
+            target="_blank"
+            rel="noreferrer noopener external"
+            title="[À MODIFIER - Intitulé] - nouvelle fenêtre"
+            href="https://service-public.fr"
+          >
+            service-public.fr
+          </Link>
+          <Link
+            className="fr-footer__content-link"
+            target="_blank"
+            rel="noreferrer noopener external"
+            title="[À MODIFIER - Intitulé] - nouvelle fenêtre"
+            href="https://data.gouv.fr"
+          >
+            data.gouv.fr
+          </Link>
+        </FooterBody>
+        <FooterBottom>
+          <Link className="fr-footer__bottom-link" href="#">
+            {intl.formatMessage({
+              id: "layout.footer.legal-notice",
+            })}
+          </Link>
+          <Link className="fr-footer__bottom-link" href="#">
+            {intl.formatMessage({
+              id: "layout.footer.personal-data",
+            })}
+          </Link>
+          <Link className="fr-footer__bottom-link" href="#">
+            {intl.formatMessage({
+              id: "layout.footer.accessibility",
+            })}
+          </Link>
+          <button
+            className="fr-footer__bottom-link"
+            data-fr-opened="false"
+            aria-controls={dialogId}
+          >
+            {intl.formatMessage({
+              id: "layout.footer.cookies",
+            })}
+          </button>
+          <button
+            className="fr-footer__bottom-link fr-icon-theme-fill fr-btn--icon-left"
+            aria-controls="fr-theme-modal"
+            data-fr-opened="false"
+          >
+            {intl.formatMessage({
+              id: "layout.footer.switch-theme",
+            })}
+          </button>
+        </FooterBottom>
+        <SwitchTheme />
+      </Footer>
+    </RawIntlProvider>
+  );
+}
diff --git a/client/src/layout/components/footer/locales/en.json b/client/src/layout/components/footer/locales/en.json
new file mode 100644
index 00000000..3ed1c1fd
--- /dev/null
+++ b/client/src/layout/components/footer/locales/en.json
@@ -0,0 +1,18 @@
+{
+  "layout.footer.top.about": "About",
+  "layout.footer.top.about.faq": "FAQ",
+  "layout.footer.top.about.team": "Team",
+  "layout.footer.top.about.help": "Help",
+  "layout.footer.top.about.also": "See also",
+  "layout.footer.top.about.follow": "Follow us",
+  "layout.footer.top.about.resources": "Data sources",
+  "layout.footer.top.about.tutorial": "Tutorial",
+  "layout.footer.top.about.glossary": "Glossary",
+  "layout.footer.top.about.contact": "Contact",
+  "layout.footer.tagline": "Explore the world of French Research and Innovation with scanR",
+  "layout.footer.legal-notice": "Legal Notice",
+  "layout.footer.personal-data": "Personal Data",
+  "layout.footer.cookies": "Cookies",
+  "layout.footer.accessibility": "Accessibility",
+  "layout.footer.switch-theme": "Theme"
+}
\ No newline at end of file
diff --git a/client/src/layout/components/footer/locales/fr.json b/client/src/layout/components/footer/locales/fr.json
new file mode 100644
index 00000000..b05681e8
--- /dev/null
+++ b/client/src/layout/components/footer/locales/fr.json
@@ -0,0 +1,18 @@
+{
+  "layout.footer.top.about": "A propos",
+  "layout.footer.top.about.faq": "FAQ",
+  "layout.footer.top.about.team": "L'équipe",
+  "layout.footer.top.about.help": "Aide",
+  "layout.footer.top.about.also": "Voir aussi",
+  "layout.footer.top.about.follow": "Nous suivre",
+  "layout.footer.top.about.resources": "Sources de données",
+  "layout.footer.top.about.tutorial": "Tutoriel",
+  "layout.footer.top.about.glossary": "Glossaire",
+  "layout.footer.top.about.contact": "Contact",
+  "layout.footer.tagline": "Explorez le monde de la Recherche et de l'Innovation française avec scanR",
+  "layout.footer.legal-notice": "Mentions légales",
+  "layout.footer.personal-data": "Données personnelles",
+  "layout.footer.cookies": "Cookies",
+  "layout.footer.accessibility": "Accessibilité",
+  "layout.footer.switch-theme": "Thème"
+}
\ No newline at end of file
diff --git a/client/src/layout/components/footer/styles.module.scss b/client/src/layout/components/footer/styles.module.scss
new file mode 100644
index 00000000..0f01013c
--- /dev/null
+++ b/client/src/layout/components/footer/styles.module.scss
@@ -0,0 +1,11 @@
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/client/src/layout/Header.tsx b/client/src/layout/components/header/index.tsx
similarity index 75%
rename from client/src/layout/Header.tsx
rename to client/src/layout/components/header/index.tsx
index 44f29e57..d0aaca02 100644
--- a/client/src/layout/Header.tsx
+++ b/client/src/layout/components/header/index.tsx
@@ -9,17 +9,28 @@ import {
   Nav,
   FastAccess,
   Button,
+  useDSFRConfig,
   // Autocomplete,
   // AutocompleteItem,
   // useAutocompleteList,
   // useDSFRConfig,
 } from '@dataesr/dsfr-plus';
-import { FormattedMessage, useIntl } from 'react-intl';
-import SwitchLanguage from '../components/switch-language';
+import { createIntl } from 'react-intl';
+import SwitchLanguage from '../../../components/switch-language';
 // import { autocompleteOrganizations } from '../api/organizations/autocomplete';
 // import { LightOrganization } from '../types/organization';
 // import getLangFieldValue from '../utils/lang';
 
+const modules = import.meta.glob('./locales/*.json', { eager: true, import: 'default' })
+const messages = Object.keys(modules).reduce((acc, key) => {
+  const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1];
+  if (locale) {
+    return { ...acc, [locale]: modules[key] }
+  }
+  return acc;
+}, {});
+
+
 const languages = [
   { shortName: 'FR', fullName: 'Français', key: 'fr' },
   { shortName: 'EN', fullName: 'English', key: 'en' },
@@ -29,9 +40,9 @@ const languages = [
 ];
 
 export default function Header() {
-  // const { locale } = useDSFRConfig();
+  const { locale } = useDSFRConfig();
+  const intl = createIntl({ locale, messages: messages[locale] });
   const { pathname } = useLocation();
-  const intl = useIntl();
 
   // const authorsAutocompletedList = useAutocompleteList<LightOrganization>({
   //   async load({ filterText }) {
@@ -49,7 +60,7 @@ export default function Header() {
       <Service name="scanR" tagline={intl.formatMessage({ id: "layout.header.tagline" })} />
       <FastAccess>
         <Button className="fr-btn fr-icon-theme-fill" aria-controls="fr-theme-modal" data-fr-opened="false">
-          {intl.formatMessage({ id: "layout.switch-theme" })}
+          {intl.formatMessage({ id: "layout.header.switch-theme" })}
         </Button>
         <SwitchLanguage languages={languages} />
       </FastAccess>
@@ -77,25 +88,27 @@ export default function Header() {
         )}
       </Autocomplete> */}
       <Nav>
-        <Link current={pathname === "/"} href='/'><FormattedMessage id="layout.header.nav.home" /></Link>
+        <Link current={pathname === "/"} href='/'>
+          {intl.formatMessage({ id: "layout.header.nav.home" })}
+        </Link>
         <NavItem
           current={pathname.split('/').includes('search')}
           title={intl.formatMessage({ id: "layout.header.nav.search" })}
         >
           <Link current={pathname.split('/').includes('organizations')} href="/search/organizations">
-            <FormattedMessage id="layout.header.nav.search.organizations" />
+            {intl.formatMessage({ id: "layout.header.nav.search.organizations" })}
           </Link>
           <Link current={pathname.split('/').includes('authors')} href="/search/authors">
-            <FormattedMessage id="layout.header.nav.search.authors" />
+            {intl.formatMessage({ id: "layout.header.nav.search.authors" })}
           </Link>
           <Link current={pathname.split('/').includes('projects')} href="/search/projects">
-            <FormattedMessage id="layout.header.nav.search.projects" />
+            {intl.formatMessage({ id: "layout.header.nav.search.projects" })}
           </Link>
           <Link current={pathname.split('/').includes('publications')} href="/search/publications">
-            <FormattedMessage id="layout.header.nav.search.publications" />
+            {intl.formatMessage({ id: "layout.header.nav.search.publications" })}
           </Link>
           <Link current={pathname.split('/').includes('patents')} href="/search/patents">
-            <FormattedMessage id="layout.header.nav.search.patents" />
+            {intl.formatMessage({ id: "layout.header.nav.search.patents" })}
           </Link>
         </NavItem>
         <Link current={pathname.startsWith('/networks')} href="/networks">
diff --git a/client/src/layout/components/header/locales/en.json b/client/src/layout/components/header/locales/en.json
new file mode 100644
index 00000000..5b64584c
--- /dev/null
+++ b/client/src/layout/components/header/locales/en.json
@@ -0,0 +1,12 @@
+{
+  "layout.header.nav.home": "Home",
+  "layout.header.tagline": "Explore the world of French Research and Innovation",
+  "layout.header.switch-theme": "Display Settings",
+  "layout.header.nav.search": "Search",
+  "layout.header.nav.search.organizations": "Organizations",
+  "layout.header.nav.search.publications": "Publications",
+  "layout.header.nav.search.projects": "Fundings",
+  "layout.header.nav.search.authors": "Authors",
+  "layout.header.nav.search.patents": "Patents",
+  "layout.header.nav.networks": "Explore Networks"
+}
\ No newline at end of file
diff --git a/client/src/layout/components/header/locales/fr.json b/client/src/layout/components/header/locales/fr.json
new file mode 100644
index 00000000..983d23d9
--- /dev/null
+++ b/client/src/layout/components/header/locales/fr.json
@@ -0,0 +1,12 @@
+{
+  "layout.header.nav.home": "Accueil",
+  "layout.header.tagline": "Explorer le monde de la Recherche et de l'Innovation française",
+  "layout.header.switch-theme": "Paramètres d'affichage",
+  "layout.header.nav.search": "Rechercher",
+  "layout.header.nav.search.organizations": "Structures",
+  "layout.header.nav.search.publications": "Publications",
+  "layout.header.nav.search.projects": "Financements",
+  "layout.header.nav.search.authors": "Auteurs",
+  "layout.header.nav.search.patents": "Brevets",
+  "layout.header.nav.networks": "Explorer les réseaux"
+}
\ No newline at end of file
diff --git a/client/src/layout/components/switch-theme/index.tsx b/client/src/layout/components/switch-theme/index.tsx
new file mode 100644
index 00000000..45828d7d
--- /dev/null
+++ b/client/src/layout/components/switch-theme/index.tsx
@@ -0,0 +1,97 @@
+import { useDSFRConfig } from "@dataesr/dsfr-plus";
+import { RawIntlProvider, createIntl } from "react-intl";
+
+
+const modules = import.meta.glob('./locales/*.json', { eager: true, import: 'default' })
+const messages = Object.keys(modules).reduce((acc, key) => {
+  const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1];
+  if (locale) {
+    return { ...acc, [locale]: modules[key] }
+  }
+  return acc;
+}, {});
+
+export default function SwitchTheme() {
+  const { locale } = useDSFRConfig();
+  const intl = createIntl({ locale, messages: messages[locale] });
+
+  return (
+    <RawIntlProvider value={intl}>
+      <dialog id="fr-theme-modal" className="fr-modal" role="dialog" aria-labelledby="fr-theme-modal-title">
+        <div className="fr-container fr-container--fluid fr-container-md">
+          <div className="fr-grid-row fr-grid-row--center">
+            <div className="fr-col-12 fr-col-md-6 fr-col-lg-4">
+              <div className="fr-modal__body">
+                <div className="fr-modal__header">
+                  <button className="fr-btn--close fr-btn" aria-controls="fr-theme-modal" id="button-5622" title="Fermer">
+                    {intl.formatMessage({ id: "layout.switch-theme.close" })}
+                  </button>
+                </div>
+                <div className="fr-modal__content">
+                  <h1 id="fr-theme-modal-title" className="fr-modal__title">
+                    {intl.formatMessage({ id: "layout.switch-theme.title" })}
+                  </h1>
+                  <div id="fr-display" className="fr-display">
+                    <fieldset className="fr-fieldset" id="display-fieldset">
+                      <legend className="fr-fieldset__legend--regular fr-fieldset__legend" id="display-fieldset-legend">
+                        {intl.formatMessage({ id: "layout.switch-theme.legend" })}
+                      </legend>
+                      <div className="fr-fieldset__element">
+                        <div className="fr-radio-group fr-radio-rich">
+                          <input value="light" type="radio" id="fr-radios-theme-light" name="fr-radios-theme" />
+                          <label className="fr-label" htmlFor="fr-radios-theme-light">
+                            {intl.formatMessage({ id: "layout.switch-theme.light" })}
+                          </label>
+                          <div className="fr-radio-rich__img">
+                            <svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
+                              <use className="fr-artwork-decorative" href="/artwork/pictograms/environment/sun.svg#artwork-decorative" />
+                              <use className="fr-artwork-minor" href="/artwork/pictograms/environment/sun.svg#artwork-minor" />
+                              <use className="fr-artwork-major" href="/artwork/pictograms/environment/sun.svg#artwork-major" />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="fr-fieldset__element">
+                        <div className="fr-radio-group fr-radio-rich">
+                          <input value="dark" type="radio" id="fr-radios-theme-dark" name="fr-radios-theme" />
+                          <label className="fr-label" htmlFor="fr-radios-theme-dark">
+                            {intl.formatMessage({ id: "layout.switch-theme.dark" })}
+                          </label>
+                          <div className="fr-radio-rich__img">
+                            <svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
+                              <use className="fr-artwork-decorative" href="/artwork/pictograms/environment/moon.svg#artwork-decorative" />
+                              <use className="fr-artwork-minor" href="/artwork/pictograms/environment/moon.svg#artwork-minor" />
+                              <use className="fr-artwork-major" href="/artwork/pictograms/environment/moon.svg#artwork-major" />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="fr-fieldset__element">
+                        <div className="fr-radio-group fr-radio-rich">
+                          <input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme" />
+                          <label className="fr-label" htmlFor="fr-radios-theme-system">
+                            {intl.formatMessage({ id: "layout.switch-theme.system" })}
+                            <span className="fr-hint-text">
+                              {intl.formatMessage({ id: "layout.switch-theme.system-hint" })}
+                            </span>
+                          </label>
+                          <div className="fr-radio-rich__img">
+                            <svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
+                              <use className="fr-artwork-decorative" href="/artwork/pictograms/system/system.svg#artwork-decorative" />
+                              <use className="fr-artwork-minor" href="/artwork/pictograms/system/system.svg#artwork-minor" />
+                              <use className="fr-artwork-major" href="/artwork/pictograms/system/system.svg#artwork-major" />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </dialog>
+    </RawIntlProvider>
+  )
+}
\ No newline at end of file
diff --git a/client/src/layout/components/switch-theme/locales/en.json b/client/src/layout/components/switch-theme/locales/en.json
new file mode 100644
index 00000000..09dd4650
--- /dev/null
+++ b/client/src/layout/components/switch-theme/locales/en.json
@@ -0,0 +1,9 @@
+{
+  "layout.switch-theme.light": "Light theme",
+  "layout.switch-theme.dark": "Dark theme",
+  "layout.switch-theme.system": "System",
+  "layout.switch-theme.system-hint": "Use system settings",
+  "layout.switch-theme.title": "Display Settings",
+  "layout.switch-theme.legend": "Choose a theme to customize the appearance of the site.",
+  "layout.switch-theme.close": "Close"
+}
\ No newline at end of file
diff --git a/client/src/layout/components/switch-theme/locales/fr.json b/client/src/layout/components/switch-theme/locales/fr.json
new file mode 100644
index 00000000..385fe373
--- /dev/null
+++ b/client/src/layout/components/switch-theme/locales/fr.json
@@ -0,0 +1,9 @@
+{
+  "layout.switch-theme.light": "Thème clair",
+  "layout.switch-theme.dark": "Thème sombre",
+  "layout.switch-theme.system": "Système",
+  "layout.switch-theme.system-hint": "Utilise les paramètres système",
+  "layout.switch-theme.title": "Paramètres d'affichage",
+  "layout.switch-theme.legend": "Choisissez un thème pour personnaliser l’apparence du site.",
+  "layout.switch-theme.close": "Fermer"
+}
\ No newline at end of file
diff --git a/client/src/layout/index.tsx b/client/src/layout/index.tsx
index 21794e4b..8d7fc411 100644
--- a/client/src/layout/index.tsx
+++ b/client/src/layout/index.tsx
@@ -1,25 +1,14 @@
 import { Outlet } from 'react-router-dom';
-import { Container, useDSFRConfig } from '@dataesr/dsfr-plus';
-import Header from './Header';
-import MainFooter from './Footer';
-import { IntlProvider } from 'react-intl';
-import Consent from './consent';
+import { Container } from '@dataesr/dsfr-plus';
+import Header from './components/header';
+import MainFooter from './components/footer';
+import Consent from './components/consent';
 import ErrorBoundary from '../components/errors/error-boundary';
 import APIDeprecationBanner from '../components/api-deprecation-banner';
 
-const modules = import.meta.glob('./locales/*.json', { eager: true, import: 'default' })
-const messages = Object.keys(modules).reduce((acc, key) => {
-  const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1];
-  if (locale) {
-    return { ...acc, [locale]: modules[key] }
-  }
-  return acc;
-}, {});
-
 export default function Layout() {
-  const { locale } = useDSFRConfig();
   return (
-    <IntlProvider locale={locale} messages={messages[locale]}>
+    <>
       <Consent />
       <Header />
       <APIDeprecationBanner />
@@ -29,6 +18,6 @@ export default function Layout() {
         </ErrorBoundary>
       </Container>
       <MainFooter />
-    </IntlProvider>
+    </>
   );
 }
diff --git a/client/src/layout/locales/fr.json b/client/src/layout/locales/fr.json
deleted file mode 100644
index 987262cf..00000000
--- a/client/src/layout/locales/fr.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "layout.header.nav.home": "Accueil",
-  "layout.header.tagline": "Explorer le monde de la Recherche et de l'Innovation française",
-  "layout.header.nav.search": "Rechercher",
-  "layout.header.nav.search.organizations": "Structures",
-  "layout.header.nav.search.publications": "Publications",
-  "layout.header.nav.search.projects": "Financements",
-  "layout.header.nav.search.authors": "Auteurs",
-  "layout.header.nav.search.patents": "Brevets",
-  "layout.footer.top.about": "A propos",
-  "layout.footer.top.about.faq": "FAQ",
-  "layout.footer.top.about.team": "L'équipe",
-  "layout.switch-theme": "Paramètres d'affichage",
-  "layout.header.nav.networks": "Explorer les réseaux",
-  "layout.footer.tagline": "Explorez le monde de la Recherche et de l'Innovation française avec scanR",
-  "layout.footer.legal-notice": "Mentions légales",
-  "layout.footer.personal-data": "Données personnelles",
-  "layout.footer.cookies": "Cookies",
-  "layout.footer.accessibility": "Accessibilité",
-  "layout.footer.switch-theme": "Thème"
-}
\ No newline at end of file
diff --git a/client/tsconfig.node.json b/client/tsconfig.node.json
index 42872c59..73dbb0b0 100644
--- a/client/tsconfig.node.json
+++ b/client/tsconfig.node.json
@@ -6,5 +6,7 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
-}
+  "include": [
+    "vite.config.ts"
+  ]
+}
\ No newline at end of file