diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
index edaf01c16..59317a60c 100644
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@@ -243,6 +243,57 @@ ul.dropdown-items {
   margin-bottom: 0;
 }
 
+// Apply custom styles to DSFR fr-translate component
+.fr-translate__btn.fr-btn.help-btn::before {
+  content: none;
+}
+
+.help-content.fr-menu ul.fr-menu__list {
+  --text-decoration: underline;
+  text-align: left;
+  font-size: 1rem;
+
+  @media (min-width: 62em) {
+    font-size: 0.875rem;
+    padding: 0;
+    width: 360px;
+  }
+}
+
+.help-content.fr-menu ul.fr-menu__list li {
+  padding: 0.75rem 1rem;
+
+  @media (min-width: 62em) {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+}
+
+.help-content.fr-menu ul.fr-menu__list li:not(:last-child) {
+  @media (min-width: 62em) {
+    border-bottom: 1px solid $border-grey;
+  }
+}
+
+.help-content.fr-menu ul.fr-menu__list {
+  h1,
+  p {
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  dd {
+    word-break: break-all;
+  }
+}
+
+.help-content a[href]:hover,
+.help-content a[href]:active {
+  @media (hover: hover) and (pointer: fine) {
+    --text-decoration: none;
+  }
+}
+
 .dropdown-items {
   li {
     display: flex;
diff --git a/app/assets/stylesheets/help_dropdown.scss b/app/assets/stylesheets/help_dropdown.scss
index f20b13a02..7246675b4 100644
--- a/app/assets/stylesheets/help_dropdown.scss
+++ b/app/assets/stylesheets/help_dropdown.scss
@@ -7,10 +7,6 @@
   }
 }
 
-.help-dropdown-title {
-  font-weight: bold;
-}
-
 .dropdown-items li.help-dropdown-service {
   cursor: default;
 
@@ -23,14 +19,3 @@
     color: $blue-france-500;
   }
 }
-
-.help-dropdown-service-action {
-  margin-top: $default-padding;
-  margin-bottom: $default-spacer;
-}
-
-.help-dropdown-service-item {
-  margin-top: $default-spacer;
-  line-height: 18px;
-}
-
diff --git a/app/views/shared/help/_help_dropdown_dossier.html.haml b/app/views/shared/help/_help_dropdown_dossier.html.haml
index f14542c8a..acf2d247a 100644
--- a/app/views/shared/help/_help_dropdown_dossier.html.haml
+++ b/app/views/shared/help/_help_dropdown_dossier.html.haml
@@ -1,17 +1,20 @@
-= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
-  - menu.with_button_inner_html do
-    = t('help')
+.fr-translate.fr-nav
+  .fr-nav__item
+    %button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" }
+      = t('help')
 
-  - title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
+    #help-menu.help-content.fr-collapse.fr-menu
+      - title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
+      %ul.fr-menu__list
 
-  - if dossier.messagerie_available?
-    - menu.with_item do
-      = render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
+        - if dossier.messagerie_available?
+          %li.flex
+            = render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
 
-  - elsif dossier.procedure.service.present?
-    - menu.with_item do
-      = render partial: 'shared/help/dropdown_items/service_item',
-        locals: { service: dossier.procedure.service, title: title }
+        - elsif dossier.procedure.service.present?
+          %li.flex
+            = render partial: 'shared/help/dropdown_items/service_item',
+              locals: { service: dossier.procedure.service, title: title }
 
-  - menu.with_item do
-    = render partial: 'shared/help/dropdown_items/faq_item'
+        %li.flex
+          = render partial: 'shared/help/dropdown_items/faq_item'
diff --git a/app/views/shared/help/_help_dropdown_instructeur.html.haml b/app/views/shared/help/_help_dropdown_instructeur.html.haml
index 329b80e50..62ade998f 100644
--- a/app/views/shared/help/_help_dropdown_instructeur.html.haml
+++ b/app/views/shared/help/_help_dropdown_instructeur.html.haml
@@ -1,8 +1,11 @@
-= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
-  - menu.with_button_inner_html do
-    = t('help')
+.fr-translate.fr-nav
+  .fr-nav__item
+    %button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" }
+      = t('help')
 
-  - menu.with_item do
-    = render partial: 'shared/help/dropdown_items/faq_item'
-  - menu.with_item do
-    = render partial: 'shared/help/dropdown_items/email_item'
+    #help-menu.help-content.fr-collapse.fr-menu
+      %ul.fr-menu__list
+        %li.flex
+          = render partial: 'shared/help/dropdown_items/faq_item'
+        %li
+          = render partial: 'shared/help/dropdown_items/email_item'
diff --git a/app/views/shared/help/_help_dropdown_procedure.html.haml b/app/views/shared/help/_help_dropdown_procedure.html.haml
index dc4ddc14e..8718d1ea0 100644
--- a/app/views/shared/help/_help_dropdown_procedure.html.haml
+++ b/app/views/shared/help/_help_dropdown_procedure.html.haml
@@ -1,9 +1,12 @@
-= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
-  - menu.with_button_inner_html do
-    = t('help')
+.fr-translate.fr-nav
+  .fr-nav__item
+    %button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" }
+      = t('help')
 
-  - if procedure.service.present?
-    - menu.with_item do
-      = render partial: 'shared/help/dropdown_items/service_item', locals: { service: procedure.service, title: t('help_dropdown.procedure_title') }
-  - menu.with_item do
-    = render partial: 'shared/help/dropdown_items/faq_item'
+    #help-menu.help-content.fr-collapse.fr-menu
+      %ul.fr-menu__list
+        - if procedure.service.present?
+          %li.flex
+            = render partial: 'shared/help/dropdown_items/service_item', locals: { service: procedure.service, title: t('help_dropdown.procedure_title') }
+        %li.flex
+          = render partial: 'shared/help/dropdown_items/faq_item'
diff --git a/app/views/shared/help/dropdown_items/_email_item.html.haml b/app/views/shared/help/dropdown_items/_email_item.html.haml
index dae504d16..029ffa4ed 100644
--- a/app/views/shared/help/dropdown_items/_email_item.html.haml
+++ b/app/views/shared/help/dropdown_items/_email_item.html.haml
@@ -1,5 +1,5 @@
-= mail_to CONTACT_EMAIL, role: 'menuitem' do
+= mail_to CONTACT_EMAIL, class: 'flex' do
   %span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
-  .dropdown-description.fr-text--sm
-    %span.help-dropdown-title= t('help_dropdown.technical_contact_title')
-    %p.fr-text--sm= t('help_dropdown.technical_contact_description', contact_email: CONTACT_EMAIL)
+  .fr-pl-1w
+    %h1= t('help_dropdown.technical_contact_title')
+    %p= t('help_dropdown.technical_contact_description', contact_email: CONTACT_EMAIL)
diff --git a/app/views/shared/help/dropdown_items/_faq_item.html.haml b/app/views/shared/help/dropdown_items/_faq_item.html.haml
index e4a4e60ef..264d303e4 100644
--- a/app/views/shared/help/dropdown_items/_faq_item.html.haml
+++ b/app/views/shared/help/dropdown_items/_faq_item.html.haml
@@ -1,6 +1,4 @@
-= link_to t("links.common.faq.url"), title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes, role: 'menuitem' do
-  %span.fr-icon-question-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
-  .dropdown-description.fr-text--sm
-    %span.help-dropdown-title
-      = t('help_dropdown.problem_title')
-    %p.fr-text--sm= t('help_dropdown.problem_description')
+%span.fr-icon-question-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
+.fr-pl-1w
+  %h1= t('help_dropdown.problem_title')
+  = link_to t('help_dropdown.problem_description'), t("links.common.faq.url"), title: new_tab_suffix(t('help_dropdown.problem_description')), **external_link_attributes
diff --git a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml
index 0316831bc..d0684ffee 100644
--- a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml
+++ b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml
@@ -1,5 +1,4 @@
-= link_to messagerie_dossier_path(dossier), role: 'menuitem' do
-  %span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
-  .dropdown-description.fr-text--sm
-    %span.help-dropdown-title= title
-    %p.fr-text--sm= t('help_dropdown.contact_instructeur')
+%span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
+.fr-pl-1w
+  %h1= title
+  = link_to t('help_dropdown.contact_instructeur'), messagerie_dossier_path(dossier)
diff --git a/app/views/shared/help/dropdown_items/_service_item.html.haml b/app/views/shared/help/dropdown_items/_service_item.html.haml
index 208601f51..4774799a2 100644
--- a/app/views/shared/help/dropdown_items/_service_item.html.haml
+++ b/app/views/shared/help/dropdown_items/_service_item.html.haml
@@ -1,14 +1,23 @@
 %span.fr-icon-user-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
-.dropdown-description.fr-text--sm
-  %span.help-dropdown-title= title
-  .help-dropdown-service-action
-    %p.fr-text--sm= t('help_dropdown.contact_administration')
-    %p.fr-text--sm.help-dropdown-service-item
-      %span.fr-icon-mail-fill.fr-icon--sm{ "aria-hidden": "true" }
-      = link_to service.email, "mailto:#{service.email}", role: 'menuitem'
-    %p.fr-text--sm
-      %span.fr-icon-phone-fill.fr-icon--sm{ "aria-hidden": "true" }
-      = link_to service.telephone, service.telephone_url, role: 'menuitem'
-    %p.fr-text--sm
-      %span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" }
-      = service.horaires
+.fr-pl-1w
+  %h1= title
+  %p.fr-mb-1w= t('help_dropdown.contact_administration')
+  %dl
+    .flex.fr-mb-1v
+      %dt.fr-mr-1v
+        %span.fr-icon-mail-fill.fr-icon--sm{ "aria-hidden": "true" }
+        %span.visually-hidden= t('layouts.mailers.service_footer.by_email')
+      %dd
+        = link_to service.email, "mailto:#{service.email}"
+    .flex.fr-mb-1v
+      %dt.fr-mr-1v
+        %span.fr-icon-phone-fill.fr-icon--sm{ "aria-hidden": "true" }
+        %span.visually-hidden= t('layouts.mailers.service_footer.by_phone')
+      %dd
+        = link_to service.telephone, service.telephone_url
+    .flex
+      %dt.fr-mr-1v
+        %span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" }
+        %span.visually-hidden= t('layouts.mailers.service_footer.schedule')
+      %dd
+        = service.horaires
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 7ff258eb5..825eecee3 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -34,9 +34,8 @@ en:
     sentence_for_humans: 'If you are a human, ignore this field'
   help: 'Help'
   help_dropdown:
-    general_title: "Online help"
     procedure_title: "Do you have a question about this procedure?"
-    problem_title: A problem with the website ?
+    problem_title: A problem with the website?
     problem_description: Find your answer in the online help.
     technical_contact_title: Technical contact
     technical_contact_description: Send us a message to %{contact_email}.
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 5e1b235ea..397254c61 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -24,7 +24,6 @@ fr:
     sentence_for_humans: 'Si vous êtes un humain, laissez ce champ vide'
   help: 'Aide'
   help_dropdown:
-    general_title: "Aide en ligne"
     procedure_title: "Une question sur cette démarche ?"
     problem_title: Un problème avec le site ?
     problem_description: Trouvez votre réponse dans l’aide en ligne.
diff --git a/spec/system/accessibilite/wcag_usager_spec.rb b/spec/system/accessibilite/wcag_usager_spec.rb
index ebacdd80e..13748e5d9 100644
--- a/spec/system/accessibilite/wcag_usager_spec.rb
+++ b/spec/system/accessibilite/wcag_usager_spec.rb
@@ -103,7 +103,7 @@ describe 'wcag rules for usager', js: true do
     scenario 'commencer page, help dropdown' do
       visit commencer_path(path: procedure.reload.path)
 
-      page.find("#help-menu_button").click
+      page.find(".fr-header__body .help-btn").click
       test_expect_axe_clean_without_main_navigation
     end
   end
diff --git a/spec/system/help_spec.rb b/spec/system/help_spec.rb
index 196b90cb0..cf94cca2a 100644
--- a/spec/system/help_spec.rb
+++ b/spec/system/help_spec.rb
@@ -18,7 +18,7 @@ describe 'Getting help:' do
         expect(page).to have_help_menu
       end
 
-      within('.help-dropdown') do
+      within('.help-content') do
         expect(page).to have_content(procedure.service.email)
         expect(page).to have_content(procedure.service.telephone)
         expect(page).to have_link(nil, href: I18n.t("links.common.faq.url"))
@@ -51,7 +51,7 @@ describe 'Getting help:' do
           expect(page).to have_help_menu
         end
 
-        within('.help-dropdown') do
+        within('.help-content') do
           expect(page).to have_content(dossier.procedure.service.email)
           expect(page).to have_content(dossier.procedure.service.telephone)
           expect(page).to have_link(nil, href: I18n.t("links.common.faq.url"))
@@ -69,7 +69,7 @@ describe 'Getting help:' do
           expect(page).to have_help_menu
         end
 
-        within('.help-dropdown') do
+        within('.help-content') do
           expect(page).to have_link(nil, href: messagerie_dossier_path(dossier))
           expect(page).to have_link(nil, href: I18n.t("links.common.faq.url"))
         end
@@ -97,6 +97,6 @@ describe 'Getting help:' do
   end
 
   def have_help_menu
-    have_selector('.help-dropdown')
+    have_selector("#help-menu")
   end
 end
diff --git a/spec/views/layouts/_header_spec.rb b/spec/views/layouts/_header_spec.rb
index d398a6cb0..eaa64f2e9 100644
--- a/spec/views/layouts/_header_spec.rb
+++ b/spec/views/layouts/_header_spec.rb
@@ -38,7 +38,7 @@ describe 'layouts/_header', type: :view do
       end
 
       it 'displays the Help dropdown menu' do
-        expect(subject).to have_css(".help-dropdown")
+        expect(subject).to have_selector("#help-menu")
       end
     end
   end
@@ -67,7 +67,7 @@ describe 'layouts/_header', type: :view do
     it { is_expected.to have_selector(:button, user.email, class: "account-btn") }
 
     it 'displays the Help dropdown menu' do
-      expect(subject).to have_css(".help-dropdown")
+      expect(subject).to have_selector("#help-menu")
     end
   end
 end