diff --git a/public/documentation-bal/book.png b/public/documentation-bal/book.png
new file mode 100644
index 000000000..2094ca987
Binary files /dev/null and b/public/documentation-bal/book.png differ
diff --git a/public/documentation-bal/community.png b/public/documentation-bal/community.png
new file mode 100644
index 000000000..249bf2e4c
Binary files /dev/null and b/public/documentation-bal/community.png differ
diff --git a/public/documentation-bal/document-download.png b/public/documentation-bal/document-download.png
new file mode 100644
index 000000000..9ff4b41b1
Binary files /dev/null and b/public/documentation-bal/document-download.png differ
diff --git a/public/documentation-bal/guide-bonnes-pratiques-v4.1.pdf b/public/documentation-bal/guide-bonnes-pratiques-v4.1.pdf
new file mode 100644
index 000000000..f641f0c05
Binary files /dev/null and b/public/documentation-bal/guide-bonnes-pratiques-v4.1.pdf differ
diff --git a/public/documentation-bal/guide-bonnes-pratiques.png b/public/documentation-bal/guide-bonnes-pratiques.png
new file mode 100644
index 000000000..6fec77b31
Binary files /dev/null and b/public/documentation-bal/guide-bonnes-pratiques.png differ
diff --git a/public/documentation-bal/guide-mes-adresses-v8.2.pdf b/public/documentation-bal/guide-mes-adresses-v8.2.pdf
new file mode 100644
index 000000000..fd38e0020
Binary files /dev/null and b/public/documentation-bal/guide-mes-adresses-v8.2.pdf differ
diff --git a/public/documentation-bal/guide-mes-adresses.png b/public/documentation-bal/guide-mes-adresses.png
new file mode 100644
index 000000000..12acdd8e3
Binary files /dev/null and b/public/documentation-bal/guide-mes-adresses.png differ
diff --git a/public/documentation-bal/logo-bal.png b/public/documentation-bal/logo-bal.png
new file mode 100644
index 000000000..604f8882f
Binary files /dev/null and b/public/documentation-bal/logo-bal.png differ
diff --git a/public/documentation-bal/logo-ban.png b/public/documentation-bal/logo-ban.png
new file mode 100644
index 000000000..2336aaab9
Binary files /dev/null and b/public/documentation-bal/logo-ban.png differ
diff --git a/public/documentation-bal/questions.png b/public/documentation-bal/questions.png
new file mode 100644
index 000000000..29240e436
Binary files /dev/null and b/public/documentation-bal/questions.png differ
diff --git a/public/documentation-bal/ressources.png b/public/documentation-bal/ressources.png
new file mode 100644
index 000000000..49f4a0229
Binary files /dev/null and b/public/documentation-bal/ressources.png differ
diff --git a/src/app/documentation-bal/page.styles.ts b/src/app/documentation-bal/page.styles.ts
new file mode 100644
index 000000000..f488d1e0d
--- /dev/null
+++ b/src/app/documentation-bal/page.styles.ts
@@ -0,0 +1,161 @@
+'use client'
+
+import styled from 'styled-components'
+
+export const StyledPage = styled.div`
+.on-this-page {
+    display: flex;
+    align-items: center;
+    > div {
+        flex: 1;
+         padding: 2rem;
+
+    }
+    .text-wrapper {
+        ul {
+            margin: 2rem 0;
+            padding: 2rem 0;
+            border: 1px solid ${({ theme }) => theme.colors.grey.border};
+            border-left: none;
+            border-right: none;
+        }
+
+        .logo-wrapper {
+            display: flex;
+            justify-content: space-around ;
+
+            > .ban-logo {
+                max-width: 180px;
+                max-height: 80px;
+            }
+            > .bal-logo {
+                max-width: 140px;
+                max-height: 80px;
+            }
+        }
+    }
+}
+
+.stay-tuned {
+    padding-bottom: 0 !important;
+    > div {
+        display: flex;
+
+        > .text-wrapper {
+            text-align: right;
+            margin-right: 4rem;
+
+            > i::before {
+                height: 2.5rem;
+                width: 2.5rem;
+                margin-bottom: 1rem;
+            }
+        }
+
+        > .illustration-wrapper {
+            height: 310px;
+            width: 470px;
+            flex-shrink: 0;
+            position: relative;
+
+            > img {
+                position: absolute;
+                bottom: -38px;
+            }
+        }
+    }
+
+}
+
+.guide-section {
+    > div {
+        display: flex;
+        align-items: center;
+
+        > .text-wrapper {
+            flex-basis: 60%;
+
+            > button {
+                margin: 2rem 0;
+            }
+            > div {
+                margin-bottom: 2rem;
+                > h2 {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.1rem;
+                }
+                > legend {
+                    font-size: 0.8rem;
+                    color: ${({ theme }) => theme.colors.grey.main};
+
+                }
+            }
+            > .buttons-wrapper {
+                display: flex;
+                align-items: center;
+                > a {
+                    margin-right: 1rem;
+                }
+            }
+        }
+
+        > .illustration-wrapper {
+            padding: 2rem;
+            flex-basis: 40%;
+            display: flex;
+            justify-content: center;
+        }
+    }
+}
+
+@media screen and (max-width: ${props => props.theme.breakpoints.md}) {
+    .illustration-wrapper {
+        display: none;
+    }
+
+    .on-this-page {
+        .text-wrapper {
+            padding: 0;
+
+            .logo-wrapper {
+                > .ban-logo {
+                    max-width: 90px;
+                    max-height: 40px;
+                }
+                > .bal-logo {
+                    max-width: 70px;
+                    max-height: 40px;
+                }
+            }
+        }
+    }
+
+    .stay-tuned {
+        padding-bottom: 1.5rem !important;
+        > div {
+            display: flex;
+
+            > .text-wrapper {
+                text-align: initial;
+                margin-right: 0;
+            }
+        }
+    }
+
+    .guide-section {
+        > div {
+            flex-direction: column;
+
+            > .text-wrapper {
+                flex-basis: 100%;
+                order: 1;
+            }
+
+            > .illustration-wrapper {
+                flex-basis: 100%;
+                order: 2;
+            }
+        }
+    }
+}
+`
diff --git a/src/app/documentation-bal/page.tsx b/src/app/documentation-bal/page.tsx
new file mode 100644
index 000000000..27a13937c
--- /dev/null
+++ b/src/app/documentation-bal/page.tsx
@@ -0,0 +1,156 @@
+'use client'
+
+import ResponsiveImage from '@/components/ResponsiveImage'
+import Section from '@/components/Section'
+import { StyledPage } from './page.styles'
+import SectionTilesList from '@/components/SectionTilesList'
+import Button from '@codegouvfr/react-dsfr/Button'
+import { useContext } from 'react'
+import BALWidgetContext from '@/contexts/BALWidget.context'
+import DownloadGuideCard from '@/components/DownloadGuideCard'
+
+const ressourcesData = [
+  {
+    title: 'La documentation',
+    description: 'Cette documentation vous fournit les informations relatives à la Base Adresse Nationale, au format Base Adresse Locale, ainsi que des FAQ et conseils pratiques.',
+    picto: '/documentation-bal/book.png',
+    link: {
+      href: 'https://doc.adresse.data.gouv.fr/',
+      target: '_self',
+    },
+  },
+  {
+    title: 'Les guides',
+    description: 'Pour vous accompagner dans la gestion des adresses de votre commune, vous trouverez sur cette page des guides régulièrement mis à jour.',
+    picto: '/documentation-bal/document-download.png',
+    link: {
+      href: '#guide-mes-adresses',
+    },
+  },
+  {
+    title: 'La FAQ',
+    description: 'La F.A.Q répond aux questions les plus courantes, posées lors des webinaires par les acteurs de la commune.',
+    picto: '/documentation-bal/community.png',
+    link: {
+      href: 'https://adresse-data-gouv-fr.gitbook.io/faq',
+      target: '_self',
+    },
+  },
+]
+
+export default function RessourcesPage() {
+  const { open, navigate } = useContext(BALWidgetContext)
+
+  const handleOpenContactForm = () => {
+    navigate('/commune/contact')
+    open()
+  }
+
+  return (
+    <StyledPage>
+      <Section pageTitle="Documentation Base Adresse Locale">
+        <div className="on-this-page">
+          <div className="illustration-wrapper">
+            <ResponsiveImage src="/documentation-bal/ressources.png" alt="Illustration ressources et documentations" />
+          </div>
+          <div className="text-wrapper">
+            <div>
+              <b>Pour vous accompagner dans la gestion des adresses de votre commune,</b> vous trouverez sur cette page:
+            </div>
+            <ul>
+              <li>
+                <b>Des guides</b>
+                <div>Régulièrement mis à jour.</div>
+              </li>
+              <li>
+                <b>La documentation</b>
+                <div>Présentant la Base Adresse Nationale, les formats d’adresse ainsi que les services et outils accessibles sur le site.</div>
+              </li>
+              <li>
+                <b>Une FAQ</b>
+                <div>Répondant aux questions les plus courantes.</div>
+              </li>
+            </ul>
+            <div className="logo-wrapper">
+              <ResponsiveImage src="/documentation-bal/logo-ban.png" alt="Logo BAN" className="ban-logo" />
+              <ResponsiveImage src="/documentation-bal/logo-bal.png" alt="Logo BAL" className="bal-logo" />
+            </div>
+          </div>
+        </div>
+      </Section>
+      <SectionTilesList
+        data={ressourcesData}
+        id="ressources-adressage"
+        theme="primary"
+      />
+      <Section className="stay-tuned">
+        <div>
+          <div className="text-wrapper">
+            <i className="ri-information-line" />
+            <h2>Restez informés </h2>
+            <p>
+              Pour être tenu informé des mises à jour ou suggérer des évolutions, n’hésitez-pas à nous contacter.
+            </p>
+            <Button onClick={handleOpenContactForm}>
+              Contactez nous
+            </Button>
+          </div>
+          <div className="illustration-wrapper">
+            <ResponsiveImage src="/documentation-bal/questions.png" alt="Illustration restez informés" style={{ width: 470 }} />
+          </div>
+        </div>
+      </Section>
+      <Section theme="primary" id="guide-mes-adresses" className="guide-section">
+        <div>
+          <div className="text-wrapper">
+            <div>
+              <h2>
+                Le guide de &quot;Mes Adresses&quot;
+              </h2>
+              <legend>
+                Version 8.2 - 01/06/2023
+              </legend>
+            </div>
+            <p>
+              &quot;Mes Adresses&quot; est un outil en ligne qui vous permet de gérer simplement vos adresses, de la constitution d’une Base Adresse Locale à sa mise à jour. Il est accessible sans compétences techniques et dispose d’un tutoriel embarqué.
+            </p>
+            <div className="buttons-wrapper">
+              <Button linkProps={{ href: 'https://guide.mes-adresses.data.gouv.fr/' }}>Consulter en ligne</Button>
+              <Button iconId="fr-icon-download-line" iconPosition="right" onClick={() => window.open('/documentation-bal/guide-mes-adresses-v8.2.pdf', '_blank')}>Télécharger le guide</Button>
+            </div>
+          </div>
+          <div className="illustration-wrapper">
+            <DownloadGuideCard imgProps={{ src: '/documentation-bal/guide-mes-adresses.png', alt: 'Illustration guide Mes Adresses', style: { width: 220, height: 300 } }} downloadlink="/documentation-bal/guide-bonnes-pratiques-v4.1.pdf" />
+          </div>
+        </div>
+      </Section>
+      <Section className="guide-section">
+        <div>
+          <div className="illustration-wrapper">
+            <DownloadGuideCard imgProps={{ src: '/documentation-bal/guide-bonnes-pratiques.png', alt: 'Illustration guide bonnes pratiques', style: { width: 220, height: 300 } }} downloadlink="/documentation-bal/guide-mes-adresses-v8.2.pdf" />
+          </div>
+          <div className="text-wrapper">
+            <div>
+              <h2>
+                Le guide des bonnes pratiques
+              </h2>
+              <b>à l’usage des communes et de leurs partenaires</b>
+              <legend>
+                Version 4.1 - 08/09/2023
+              </legend>
+            </div>
+            <p>
+              Les communes sont responsables de leurs adresses. Ce guide passe en revue les bonnes pratiques pour nommer, numéroter les voies et diffuser l’information en parfaite conformité avec les obligations légales et rien que les obligations légales.
+            </p>
+            <div className="buttons-wrapper">
+              <Button linkProps={{ href: 'https://guide-bonnes-pratiques.adresse.data.gouv.fr' }}>Consulter en ligne</Button>
+              <Button iconId="fr-icon-download-line" iconPosition="right" onClick={() => window.open('/documentation-bal/guide-bonnes-pratiques-v4.1.pdf', '_blank')}>
+                Télécharger le guide
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Section>
+    </StyledPage>
+  )
+}
diff --git a/src/components/DownloadGuideCard/index.tsx b/src/components/DownloadGuideCard/index.tsx
new file mode 100644
index 000000000..4d8d5d2d7
--- /dev/null
+++ b/src/components/DownloadGuideCard/index.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { useState } from 'react'
+import styled from 'styled-components'
+import ResponsiveImage, { ResponsiveImageProps } from '../ResponsiveImage'
+
+export interface DownloadGuideCardProps {
+  imgProps: ResponsiveImageProps
+  downloadlink: string
+  onDownloadStart?: () => void
+}
+
+const StyledWrapper = styled.div`
+    position: relative;
+    display: flex;
+    cursor: pointer;
+
+    > .hover-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: white;
+        font-size: 2rem;
+    }
+`
+
+export default function DownloadGuideCard({
+  imgProps,
+  downloadlink,
+  onDownloadStart,
+}: DownloadGuideCardProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const handleClick = () => {
+    if (onDownloadStart) {
+      onDownloadStart()
+    }
+    window.open(downloadlink, '_blank')
+  }
+
+  return (
+    <StyledWrapper onClick={handleClick} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => { setIsHovered(false) }}>
+      {isHovered && <div className="hover-background"><span className="fr-icon-download-line" /></div>}
+      <ResponsiveImage {...imgProps} />
+    </StyledWrapper>
+  )
+}
diff --git a/src/components/ResponsiveImage/index.tsx b/src/components/ResponsiveImage/index.tsx
index 1196d6072..c85cd7699 100644
--- a/src/components/ResponsiveImage/index.tsx
+++ b/src/components/ResponsiveImage/index.tsx
@@ -4,15 +4,17 @@ export interface ResponsiveImageProps {
   src: string
   alt: string
   style?: React.CSSProperties
+  className?: string
 }
 
-export default function ResponsiveImage({ src, alt, style }: ResponsiveImageProps) {
+export default function ResponsiveImage({ src, alt, style, className }: ResponsiveImageProps) {
   return (
     <Image
       src={src}
       alt={alt}
       width={0}
       height={0}
+      className={className}
       sizes="100vw"
       style={{ width: '100%', height: 'auto', ...style }}
     />
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index b0c85944c..c820abc08 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -63,6 +63,10 @@ export const navEntries: MainNavigationProps.Item[] = [
         text: 'Consulter la page d’une commune',
         linkProps: { href: '/commune' },
       },
+      {
+        text: 'Documentation Base Adresse Locale',
+        linkProps: { href: '/documentation-bal' },
+      },
       {
         text: 'Application Mes adresses',
         linkProps: {