diff --git a/app/assets/stylesheets/cnaf.scss b/app/assets/stylesheets/cnaf.scss
new file mode 100644
index 000000000..9cbd7ea36
--- /dev/null
+++ b/app/assets/stylesheets/cnaf.scss
@@ -0,0 +1,30 @@
+@import "constants";
+@import "colors";
+
+table.cnaf {
+  margin: 2 * $default-padding 0 $default-padding $default-padding;
+  width: 100%;
+
+  caption {
+    font-weight: bold;
+    margin-left: - $default-padding;
+    margin-bottom: $default-spacer;
+    text-align: left;
+  }
+
+  th,
+  td {
+    font-weight: normal;
+    padding: $default-spacer;
+  }
+
+  th.text-right {
+    text-align: right;
+  }
+
+  &.horizontal {
+    th {
+      border-bottom: 1px solid $grey;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index a21886db7..717b9b51e 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -356,6 +356,17 @@
     }
   }
 
+  .cnaf-inputs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 700px;
+
+    input {
+      width: inherit;
+    }
+  }
+
   input.aa-input,
   input.aa-hint {
     border-radius: 4px;
diff --git a/app/models/champs/cnaf_champ.rb b/app/models/champs/cnaf_champ.rb
index e1cb86aff..586430877 100644
--- a/app/models/champs/cnaf_champ.rb
+++ b/app/models/champs/cnaf_champ.rb
@@ -25,6 +25,10 @@ class Champs::CnafChamp < Champs::TextChamp
 
   store_accessor :value_json, :numero_allocataire, :code_postal
 
+  def blank?
+    external_id.nil?
+  end
+
   def fetch_external_data?
     true
   end
diff --git a/app/views/shared/champs/cnaf/_adresse.html.haml b/app/views/shared/champs/cnaf/_adresse.html.haml
new file mode 100644
index 000000000..9c3cbdd1e
--- /dev/null
+++ b/app/views/shared/champs/cnaf/_adresse.html.haml
@@ -0,0 +1,10 @@
+%table.cnaf
+  %caption #{t("api_particulier.providers.cnaf.scopes.adresse.libelle")} :
+  - for key in ['identite', 'complementIdentite', 'numeroRue', 'complementIdentiteGeo', 'lieuDit', 'codePostalVille', 'pays'] do
+    - if adresse[key].present?
+      %tr
+        %th= t("api_particulier.providers.cnaf.scopes.adresse.#{key}")
+        %td= adresse[key]
+
+
+
diff --git a/app/views/shared/champs/cnaf/_personnes.html.haml b/app/views/shared/champs/cnaf/_personnes.html.haml
new file mode 100644
index 000000000..d4fa3ee95
--- /dev/null
+++ b/app/views/shared/champs/cnaf/_personnes.html.haml
@@ -0,0 +1,19 @@
+%table.cnaf.horizontal
+  %caption #{t("api_particulier.providers.cnaf.scopes.#{scope}.libelle")} :
+  %thead
+    %tr
+      - for key in ['nomPrenom', 'sexe', 'dateDeNaissance'] do
+        - if personnes.first[key].present?
+          %th{ class: "#{"text-right" if key == 'dateDeNaissance'}" }= t("api_particulier.providers.cnaf.scopes.personne.#{key}")
+  %tbody
+    - personnes.each do |personne|
+      %tr
+      - for key in ['nomPrenom', 'sexe', 'dateDeNaissance'] do
+        - if personne[key].present?
+          - case key
+          - when 'dateDeNaissance'
+            %td.text-right= try_format_datetime(Date.strptime(personne[key], "%d%m%Y"))
+          - when 'sexe'
+            %td= t("api_particulier.providers.cnaf.scopes.personne.#{personne[key]}")
+          - else
+            %td= personne[key]
diff --git a/app/views/shared/champs/cnaf/_quotient_familial.html.haml b/app/views/shared/champs/cnaf/_quotient_familial.html.haml
new file mode 100644
index 000000000..b01d09ee7
--- /dev/null
+++ b/app/views/shared/champs/cnaf/_quotient_familial.html.haml
@@ -0,0 +1,14 @@
+%table.cnaf.horizontal
+  %caption #{t("api_particulier.providers.cnaf.scopes.quotient_familial.libelle")} :
+  %thead
+    %tr
+      - for key in ['quotientFamilial', 'mois', 'annee'] do
+        - if quotient_familial[key].present?
+          %th.text-right= t("api_particulier.providers.cnaf.scopes.quotient_familial.#{key}")
+  %tbody
+    %tr
+      - for key in ['quotientFamilial', 'mois', 'annee'] do
+        - if quotient_familial[key].present?
+          %td.text-right= quotient_familial[key]
+        - else
+          %td
diff --git a/app/views/shared/champs/cnaf/_show.html.haml b/app/views/shared/champs/cnaf/_show.html.haml
new file mode 100644
index 000000000..82a7333c6
--- /dev/null
+++ b/app/views/shared/champs/cnaf/_show.html.haml
@@ -0,0 +1,24 @@
+- if champ.blank?
+  %p= t('.not_filled')
+- elsif champ.data.blank?
+  %p= t('.fetching_data',
+    numero_allocataire: champ.numero_allocataire,
+    code_postal: champ.code_postal)
+- else
+  - if profile == 'usager'
+    %p= t('.data_fetched',
+      sources: champ.procedure.api_particulier_sources['cnaf'].keys.map(&:to_s).join(', '),
+      numero_allocataire: champ.numero_allocataire,
+      code_postal: champ.code_postal)
+
+  - if profile == 'instructeur'
+    %p= t('.data_fetched_title')
+
+    - ['adresse', 'quotient_familial', 'enfants', 'allocataires'].each do |scope|
+      - if champ.data[scope].present?
+        - if scope == 'quotient_familial'
+          = render partial: 'shared/champs/cnaf/quotient_familial', locals: { quotient_familial: champ.data[scope] }
+        - if scope.in? ['enfants', 'allocataires']
+          = render partial: 'shared/champs/cnaf/personnes', locals: { scope: scope, personnes: champ.data[scope] }
+        - elsif scope == 'adresse'
+          = render partial: 'shared/champs/cnaf/adresse', locals: { adresse: champ.data[scope] }
diff --git a/app/views/shared/dossiers/_champ_row.html.haml b/app/views/shared/dossiers/_champ_row.html.haml
index 9f4057894..0264327cf 100644
--- a/app/views/shared/dossiers/_champ_row.html.haml
+++ b/app/views/shared/dossiers/_champ_row.html.haml
@@ -36,6 +36,8 @@
               = render partial: "shared/champs/textarea/show", locals: { champ: c }
             - when TypeDeChamp.type_champs.fetch(:annuaire_education)
               = render partial: "shared/champs/annuaire_education/show", locals: { champ: c }
+            - when TypeDeChamp.type_champs.fetch(:cnaf)
+              = render partial: "shared/champs/cnaf/show", locals: { champ: c, profile: profile }
             - when TypeDeChamp.type_champs.fetch(:address)
               = render partial: "shared/champs/address/show", locals: { champ: c }
             - when TypeDeChamp.type_champs.fetch(:communes)
diff --git a/app/views/shared/dossiers/editable_champs/_cnaf.html.haml b/app/views/shared/dossiers/editable_champs/_cnaf.html.haml
new file mode 100644
index 000000000..1d8d90610
--- /dev/null
+++ b/app/views/shared/dossiers/editable_champs/_cnaf.html.haml
@@ -0,0 +1,16 @@
+.cnaf-inputs
+  %div
+    = form.label :numero_allocataire, t('.numero_allocataire_label')
+    %p.notice= t('.numero_allocataire_notice')
+    = form.text_field :numero_allocataire,
+      required: champ.mandatory?,
+      size: 7,
+      aria: { describedby: describedby_id(champ) }
+
+  %div
+    = form.label :code_postal, t('.code_postal_label')
+    %p.notice= t('.code_postal_notice')
+    = form.text_field :code_postal,
+      size: 5,
+      required: champ.mandatory?,
+      aria: { describedby: describedby_id(champ) }
diff --git a/config/locales/shared.fr.yml b/config/locales/shared.fr.yml
new file mode 100644
index 000000000..a0bf159e1
--- /dev/null
+++ b/config/locales/shared.fr.yml
@@ -0,0 +1,16 @@
+fr:
+  shared:
+    dossiers:
+      editable_champs:
+        cnaf:
+          numero_allocataire_label: Le numéro d’allocataire CAF
+          numero_allocataire_notice: Il est généralement composé de 7 chiffres.
+          code_postal_label: Le code postal
+          code_postal_notice: Il est généralement composé de 5 chiffres.
+    champs:
+      cnaf:
+        show:
+          not_filled: non renseigné
+          fetching_data: "La récupération automatique des données pour l’allocataire Nº %{numero_allocataire} avec le code postal %{code_postal} est en cours."
+          data_fetched: "Des données concernant %{sources} liées au compte Nº %{numero_allocataire} avec le code postal %{code_postal} ont été reçues depuis la CAF."
+          data_fetched_title: "Données obtenues de la Caisse nationale d’allocations familiales"