diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 84a9e004..25edfc6d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
+import darkThemeSvg from "@/assets/moon.svg";
+import lightThemeSvg from "@gouvfr/dsfr/dist/artwork/light.svg";
+import systemThemeSvg from "@gouvfr/dsfr/dist/artwork/pictograms/system/system.svg";
+
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import { registerSW } from "virtual:pwa-register";
 
-import HeaderMain from "@/components/HeaderMain.vue";
-
 const online = ref(navigator.onLine);
 
 const updateOnlineStatus = () => {
@@ -20,14 +22,86 @@ onBeforeUnmount(() => {
   window.removeEventListener("offline", updateOnlineStatus);
 });
 
+onMounted(useScheme);
+
 registerSW({ immediate: true });
+
+const preferences = reactive<{
+  theme: "dark" | "light" | undefined;
+  scheme: "dark" | "light" | "system" | undefined;
+}>({
+  theme: undefined,
+  scheme: undefined,
+});
+
+onMounted(() => {
+  const { theme, scheme, setScheme } = useScheme() as UseSchemeResult;
+  preferences.theme = theme.value as "dark" | "light";
+  preferences.scheme = scheme.value as "dark" | "light" | "system";
+
+  watchEffect(() => {
+    preferences.scheme = preferences.theme as "dark" | "light";
+  });
+
+  watchEffect(() =>
+    setScheme(preferences.scheme as "dark" | "light" | "system"),
+  );
+});
+
+const isThemeModalOpen = ref(false);
+const options = [
+  {
+    label: "Thème clair",
+    value: "light",
+    svgPath: lightThemeSvg,
+  },
+  {
+    label: "Thème sombre",
+    value: "dark",
+    img: darkThemeSvg,
+  },
+  {
+    label: "Thème système",
+    value: "system",
+    hint: "Utilise les paramètres système",
+    svgPath: systemThemeSvg,
+  },
+];
 </script>
 
 <template>
-  <HeaderMain v-show="online" />
+  <div v-show="online">
+    <AppHeader
+      :class="{ 'marianne-only': !wholeLogo }"
+      v-model="searchQuery"
+      :logo-text="logoText"
+      :quick-links="quickLinks"
+    >
+      <template #after-quick-links>
+        <DsfrButton
+          type="button"
+          icon="ri-sun-line"
+          label="Paramètres d'affichage"
+          @click="isThemeModalOpen = true"
+        />
+      </template>
+    </AppHeader>
+    <DsfrModal
+      :opened="isThemeModalOpen"
+      title="Changer le thème"
+      @close="isThemeModalOpen = false"
+    >
+      <DsfrRadioButtonSet
+        v-model="preferences.scheme"
+        :options="options"
+        name="theme-selector"
+        legend="Choisissez un thème pour personnaliser l’apparence du site."
+      />
+    </DsfrModal>
+  </div>
   <router-view v-if="online" />
   <div v-else id="app">
-    <HeaderMain />
+    <AppHeader />
     <div class="text-center relative top-1/6 m-4">
       <h1>Problème de connexion</h1>
       <p>Vous n'avez pas accès à Internet.</p>
diff --git a/frontend/src/assets/guide-identification/icones/complements.jpg b/frontend/src/assets/guide-identification/icones/complements.jpg
deleted file mode 100644
index bdbee1b4..00000000
Binary files a/frontend/src/assets/guide-identification/icones/complements.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-identification/icones/complements.png b/frontend/src/assets/guide-identification/icones/complements.png
new file mode 100644
index 00000000..d4029e54
Binary files /dev/null and b/frontend/src/assets/guide-identification/icones/complements.png differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite-new.png b/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite-new.png
new file mode 100644
index 00000000..1946a10c
Binary files /dev/null and b/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite-new.png differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite.jpg b/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite.jpg
deleted file mode 100644
index f67d10c3..00000000
Binary files a/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite.png b/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite.png
new file mode 100644
index 00000000..ff370e5f
Binary files /dev/null and b/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite.png differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite_new.jpg b/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite_new.jpg
deleted file mode 100644
index 29c06ccc..00000000
Binary files a/frontend/src/assets/guide-mise-en-securite/icones/consignes-securite_new.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.jpg b/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.jpg
deleted file mode 100644
index 7b22c328..00000000
Binary files a/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.png b/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.png
new file mode 100644
index 00000000..b6fae0ac
Binary files /dev/null and b/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.png differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.jpg b/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.jpg
deleted file mode 100644
index 1d31c909..00000000
Binary files a/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.png b/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.png
new file mode 100644
index 00000000..e99be07f
Binary files /dev/null and b/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.png differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/gants-traces-et-indices.jpg b/frontend/src/assets/guide-mise-en-securite/icones/gants-traces-et-indices.jpg
deleted file mode 100644
index 137442c8..00000000
Binary files a/frontend/src/assets/guide-mise-en-securite/icones/gants-traces-et-indices.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/gants-traces-et-indices.png b/frontend/src/assets/guide-mise-en-securite/icones/gants-traces-et-indices.png
new file mode 100644
index 00000000..85578bd5
Binary files /dev/null and b/frontend/src/assets/guide-mise-en-securite/icones/gants-traces-et-indices.png differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/instructions.jpg b/frontend/src/assets/guide-mise-en-securite/icones/instructions.jpg
deleted file mode 100644
index 46b003e9..00000000
Binary files a/frontend/src/assets/guide-mise-en-securite/icones/instructions.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/instructions.png b/frontend/src/assets/guide-mise-en-securite/icones/instructions.png
new file mode 100644
index 00000000..357f55f1
Binary files /dev/null and b/frontend/src/assets/guide-mise-en-securite/icones/instructions.png differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/preconisations.jpg b/frontend/src/assets/guide-mise-en-securite/icones/preconisations.jpg
deleted file mode 100644
index 2ffc0fcd..00000000
Binary files a/frontend/src/assets/guide-mise-en-securite/icones/preconisations.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/preconisations.png b/frontend/src/assets/guide-mise-en-securite/icones/preconisations.png
new file mode 100644
index 00000000..5e2db487
Binary files /dev/null and b/frontend/src/assets/guide-mise-en-securite/icones/preconisations.png differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/take-care.jpg b/frontend/src/assets/guide-mise-en-securite/icones/take-care.jpg
deleted file mode 100644
index 3730f020..00000000
Binary files a/frontend/src/assets/guide-mise-en-securite/icones/take-care.jpg and /dev/null differ
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/take-care.png b/frontend/src/assets/guide-mise-en-securite/icones/take-care.png
new file mode 100644
index 00000000..3b339075
Binary files /dev/null and b/frontend/src/assets/guide-mise-en-securite/icones/take-care.png differ
diff --git a/frontend/src/assets/moon.svg b/frontend/src/assets/moon.svg
new file mode 100644
index 00000000..24eda392
--- /dev/null
+++ b/frontend/src/assets/moon.svg
@@ -0,0 +1,16 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67 16C66.4486 16 66 15.5514 66 15C66 14.4486 66.4486 14 67 14C67.5514 14 68 14.4486 68 15C68 15.5514 67.5514 16 67 16Z" fill="#CACAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 72C18.4486 72 18 71.5514 18 71C18 70.4486 18.4486 70 19 70C19.5514 70 20 70.4486 20 71C20 71.5514 19.5514 72 19 72Z" fill="#CACAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31 10C30.4486 10 30 9.5514 30 9C30 8.44855 30.4486 8 31 8C31.5514 8 32 8.44855 32 9C32 9.5514 31.5514 10 31 10Z" fill="#CACAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69 60C68.4486 60 68 59.5514 68 59C68 58.4486 68.4486 58 69 58C69.5514 58 70 58.4486 70 59C70 59.5514 69.5514 60 69 60Z" fill="#CACAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45 70C44.4486 70 44 69.5514 44 69C44 68.4486 44.4486 68 45 68C45.5514 68 46 68.4486 46 69C46 69.5514 45.5514 70 45 70Z" fill="#CACAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 32C8.4486 32 8 31.5514 8 31C8 30.4486 8.4486 30 9 30C9.5514 30 10 30.4486 10 31C10 31.5514 9.5514 32 9 32Z" fill="#CACAFB"/>
+<path d="M41 30C40.4477 30 40 30.4477 40 31C40 31.5523 40.4477 32 41 32C41.5523 32 42 31.5523 42 31C42 30.4477 41.5523 30 41 30Z" fill="#E1000F"/>
+<path d="M59 38C58.4477 38 58 38.4477 58 39C58 39.5523 58.4477 40 59 40C59.5523 40 60 39.5523 60 39C60 38.4477 59.5523 38 59 38Z" fill="#E1000F"/>
+<path d="M55 38C55.5523 38 56 38.4477 56 39C56 39.5128 55.614 39.9355 55.1166 39.9933L55 40H53C52.4477 40 52 39.5523 52 39C52 38.4872 52.386 38.0645 52.8834 38.0067L53 38H55Z" fill="#E1000F"/>
+<path d="M48 31C48 30.4477 47.5523 30 47 30H45L44.8834 30.0067C44.386 30.0645 44 30.4872 44 31C44 31.5523 44.4477 32 45 32H47L47.1166 31.9933C47.614 31.9355 48 31.5128 48 31Z" fill="#E1000F"/>
+<path d="M38.2372 27.2197C39.5994 25.797 38.1551 23.4478 36.2759 24.1124C28.94 26.7067 24.0021 33.6813 24.0021 41.5359C24.0021 51.735 32.229 60.0023 42.3772 60.0023C50.4148 60.0023 57.5043 54.7552 59.9067 47.089C60.4975 45.2038 58.1779 43.7538 56.7868 45.1891C54.9171 47.1181 52.5173 48.408 49.894 48.8931C49.3509 48.9936 48.992 49.5152 49.0925 50.0583C49.1929 50.6014 49.7146 50.9602 50.2576 50.8598L50.6517 50.7814C53.2688 50.2237 55.6787 48.9688 57.6462 47.1451L57.843 46.957L57.7742 47.1561C55.4411 53.6273 49.303 58.0023 42.3772 58.0023C33.3358 58.0023 26.0021 50.6326 26.0021 41.5359L26.0058 41.1803C26.1469 34.5562 30.2202 28.6889 36.2854 26.2464L36.485 26.168L36.2583 26.4248C33.9309 29.1273 32.6451 32.5647 32.6451 36.1755C32.6451 43.9891 38.6544 50.4689 46.3843 51.0639C46.9349 51.1063 47.4157 50.6943 47.4581 50.1436C47.5005 49.593 47.0884 49.1122 46.5378 49.0698C39.8492 48.5549 34.6451 42.9434 34.6451 36.1755C34.6451 32.8137 35.9288 29.6307 38.2372 27.2197Z" fill="#000091"/>
+<path d="M15 58C14.4477 58 14 58.4477 14 59C14 59.5523 14.4477 60 15 60C15.5523 60 16 59.5523 16 59C16 58.4477 15.5523 58 15 58Z" fill="#000091"/>
+<path d="M57 26C57.5523 26 58 26.4477 58 27C58 27.5128 57.614 27.9355 57.1166 27.9933L57 28H55C54.4477 28 54 27.5523 54 27C54 26.4872 54.386 26.0645 54.8834 26.0067L55 26H57Z" fill="#000091"/>
+<path d="M24 59C24 58.4477 23.5523 58 23 58H19L18.8834 58.0067C18.386 58.0645 18 58.4872 18 59C18 59.5523 18.4477 60 19 60H23L23.1166 59.9933C23.614 59.9355 24 59.5128 24 59Z" fill="#000091"/>
+</svg>
diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts
index 621db027..b76129a1 100644
--- a/frontend/src/components.d.ts
+++ b/frontend/src/components.d.ts
@@ -1,36 +1,37 @@
 /* eslint-disable */
+/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {};
-
-/* prettier-ignore */
-declare module 'vue' {
+export {}
+declare module "vue" {
   export interface GlobalComponents {
-    AskingExpert: typeof import('./components/AskingExpert.vue')['default']
-    ContactExpert: typeof import('./components/ContactExpert.vue')['default']
-    DsfrAlert: typeof import('@gouvminint/vue-dsfr')['DsfrAlert']
-    DsfrButton: typeof import('@gouvminint/vue-dsfr')['DsfrButton']
-    DsfrCheckbox: typeof import('@gouvminint/vue-dsfr')['DsfrCheckbox']
-    DsfrFileUpload: typeof import('@gouvminint/vue-dsfr')['DsfrFileUpload']
-    DsfrHeader: typeof import('@gouvminint/vue-dsfr')['DsfrHeader']
-    DsfrInput: typeof import('@gouvminint/vue-dsfr')['DsfrInput']
-    DsfrModal: typeof import('@gouvminint/vue-dsfr')['DsfrModal']
-    DsfrPicture: typeof import('@gouvminint/vue-dsfr')['DsfrPicture']
-    DsfrRadioButton: typeof import('@gouvminint/vue-dsfr')['DsfrRadioButton']
-    DsfrSelect: typeof import('@gouvminint/vue-dsfr')['DsfrSelect']
-    DsfrStepper: typeof import('@gouvminint/vue-dsfr')['DsfrStepper']
-    DsfrTable: typeof import('@gouvminint/vue-dsfr')['DsfrTable']
-    DsfrTag: typeof import('@gouvminint/vue-dsfr')['DsfrTag']
-    HeaderMain: typeof import('./components/HeaderMain.vue')['default']
-    MissingCardAlert: typeof import('./components/MissingCardAlert.vue')['default']
-    OnboardingSwiper: typeof import('./components/OnboardingSwiper.vue')['default']
-    PopupVideo: typeof import('./components/PopupVideo.vue')['default']
-    ResultPage: typeof import('./components/ResultPage.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SnackbarAlert: typeof import('./components/SnackbarAlert.vue')['default']
-    StepsGuide: typeof import('./components/StepsGuide.vue')['default']
-    VIcon: typeof import('@gouvminint/vue-dsfr')['VIcon']
+    AppHeader: (typeof import("./components/AppHeader.vue"))["default"];
+    AskingExpert: (typeof import("./components/AskingExpert.vue"))["default"];
+    ContactExpert: (typeof import("./components/ContactExpert.vue"))["default"];
+    DsfrAlert: (typeof import("@gouvminint/vue-dsfr"))["DsfrAlert"];
+    DsfrButton: (typeof import("@gouvminint/vue-dsfr"))["DsfrButton"];
+    DsfrCheckbox: (typeof import("@gouvminint/vue-dsfr"))["DsfrCheckbox"];
+    DsfrFileUpload: (typeof import("@gouvminint/vue-dsfr"))["DsfrFileUpload"];
+    DsfrHeader: (typeof import("@gouvminint/vue-dsfr"))["DsfrHeader"];
+    DsfrInput: (typeof import("@gouvminint/vue-dsfr"))["DsfrInput"];
+    DsfrModal: (typeof import("@gouvminint/vue-dsfr"))["DsfrModal"];
+    DsfrPicture: (typeof import("@gouvminint/vue-dsfr"))["DsfrPicture"];
+    DsfrRadioButton: (typeof import("@gouvminint/vue-dsfr"))["DsfrRadioButton"];
+    DsfrRadioButtonSet: (typeof import("@gouvminint/vue-dsfr"))["DsfrRadioButtonSet"];
+    DsfrSelect: (typeof import("@gouvminint/vue-dsfr"))["DsfrSelect"];
+    DsfrStepper: (typeof import("@gouvminint/vue-dsfr"))["DsfrStepper"];
+    DsfrTable: (typeof import("@gouvminint/vue-dsfr"))["DsfrTable"];
+    DsfrTag: (typeof import("@gouvminint/vue-dsfr"))["DsfrTag"];
+    HeaderMain: (typeof import("./components/HeaderMain.vue"))["default"];
+    MissingCardAlert: (typeof import("./components/MissingCardAlert.vue"))["default"];
+    OnboardingSwiper: (typeof import("./components/OnboardingSwiper.vue"))["default"];
+    PopupVideo: (typeof import("./components/PopupVideo.vue"))["default"];
+    ResultPage: (typeof import("./components/ResultPage.vue"))["default"];
+    RouterLink: (typeof import("vue-router"))["RouterLink"];
+    RouterView: (typeof import("vue-router"))["RouterView"];
+    SnackbarAlert: (typeof import("./components/SnackbarAlert.vue"))["default"];
+    StepsGuide: (typeof import("./components/StepsGuide.vue"))["default"];
+    VIcon: (typeof import("@gouvminint/vue-dsfr"))["VIcon"];
   }
 }
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
new file mode 100644
index 00000000..a34465a6
--- /dev/null
+++ b/frontend/src/components/AppHeader.vue
@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+import { computed, ref, useSlots } from "vue";
+import { useRoute } from "vue-router";
+
+import {
+  DsfrLogo,
+  DsfrSearchBar,
+  DsfrHeaderMenuLinks,
+  type DsfrHeaderProps,
+} from "@gouvminint/vue-dsfr";
+
+const route = useRoute();
+import basegunLogo from "@/assets/basegun.png";
+
+const wholeLogo = computed(() => route.meta.wholeLogo as boolean);
+const isMobile = window.innerWidth <= 640;
+
+const logoText = computed<
+  InstanceType<typeof DsfrHeader>["$props"]["logoText"]
+>(() => (!isMobile || wholeLogo.value ? ["Ministère", "de l’Intérieur"] : []));
+
+const props = withDefaults(defineProps<DsfrHeaderProps>(), {
+  operatorImgAlt: "Logo Basegun",
+  operatorImgSrc: basegunLogo,
+  operatorImgStyle: () => ({ width: "30%" }),
+  quickLinks: () => [
+    {
+      label: "Informations",
+      to: "/",
+      icon: "ri-information-2-line",
+    },
+    {
+      label: "À propos",
+      to: "/a-propos",
+      icon: "ri-question-line",
+    },
+    {
+      label: "Mentions légales",
+      to: "/mentions-legales",
+      icon: "ri-scales-3-line",
+    },
+    {
+      label: "Contact",
+      to: "/contact",
+      icon: "ri-customer-service-2-line",
+    },
+    {
+      label: "Accessibilité : partiellement conforme",
+      to: "/accessibilite",
+      icon: "ri-accessibility-line",
+    },
+  ],
+});
+const menuOpened = ref(false);
+const searchModalOpened = ref(false);
+const modalOpened = ref(false);
+const hideModal = () => {
+  modalOpened.value = false;
+  menuOpened.value = false;
+  searchModalOpened.value = false;
+  document.getElementById("button-menu")?.focus();
+};
+const showMenu = () => {
+  modalOpened.value = true;
+  menuOpened.value = true;
+  searchModalOpened.value = false;
+  document.getElementById("close-button")?.focus();
+};
+const showSearchModal = () => {
+  modalOpened.value = true;
+  menuOpened.value = false;
+  searchModalOpened.value = true;
+};
+const onQuickLinkClick = hideModal;
+const slots = useSlots();
+const isWithSlotOperator = computed(
+  () => Boolean(slots.operator?.().length) || !!props.operatorImgSrc,
+);
+const isWithSlotNav = computed(() => Boolean(slots.mainnav));
+// eslint-disable-next-line func-call-spacing
+defineEmits<{
+  (e: "update:modelValue", payload: string): void;
+  (e: "search", payload: string): void;
+}>();
+</script>
+
+<template>
+  <header role="banner" class="fr-header">
+    <div class="fr-header__body">
+      <div class="fr-container width-inherit">
+        <div class="fr-header__body-row">
+          <div class="fr-header__brand fr-enlarge-link">
+            <div class="fr-header__brand-top">
+              <div class="fr-header__logo">
+                <DsfrLogo :logo-text="logoText" data-testid="header-logo" />
+                <RouterLink :to="{ name: 'StartPage' }" />
+              </div>
+              <div v-if="isWithSlotOperator" class="fr-header__operator">
+                <!-- @slot Slot nommé operator pour le logo opérateur. Sera dans `<div class="fr-header__operator">` -->
+                <slot name="operator">
+                  <img
+                    v-if="operatorImgSrc"
+                    class="fr-responsive-img"
+                    :src="operatorImgSrc"
+                    :alt="operatorImgAlt"
+                    :style="operatorImgStyle"
+                  />
+                </slot>
+              </div>
+              <div
+                v-if="showSearch || isWithSlotNav || quickLinks?.length"
+                class="fr-header__navbar"
+              >
+                <button
+                  v-if="showSearch"
+                  class="fr-btn fr-btn--search"
+                  aria-controls="header-search"
+                  aria-label="Recherche"
+                  title="Recherche"
+                  :data-fr-opened="searchModalOpened"
+                  @click.prevent.stop="showSearchModal()"
+                />
+                <button
+                  v-if="isWithSlotNav || quickLinks?.length"
+                  id="button-menu"
+                  class="fr-btn--menu fr-btn"
+                  :data-fr-opened="showMenu"
+                  aria-controls="header-navigation"
+                  aria-haspopup="menu"
+                  aria-label="Menu"
+                  title="Menu"
+                  data-testid="open-menu-btn"
+                  @click.prevent.stop="showMenu()"
+                />
+              </div>
+            </div>
+            <div v-if="serviceTitle" class="fr-header__service">
+              <RouterLink
+                :to="homeTo"
+                :title="`Accueil - ${serviceTitle}`"
+                v-bind="$attrs"
+              >
+                <p class="fr-header__service-title">
+                  {{ serviceTitle }}
+                  <span
+                    v-if="showBeta"
+                    class="fr-badge fr-badge--sm fr-badge--green-emeraude"
+                  >
+                    BETA
+                  </span>
+                </p>
+              </RouterLink>
+              <p v-if="serviceDescription" class="fr-header__service-tagline">
+                {{ serviceDescription }}
+              </p>
+            </div>
+            <div v-if="!serviceTitle && showBeta" class="fr-header__service">
+              <p class="fr-header__service-title">
+                <span class="fr-badge fr-badge--sm fr-badge--green-emeraude"
+                  >BETA</span
+                >
+              </p>
+            </div>
+          </div>
+          <div class="fr-header__tools">
+            <div v-if="quickLinks?.length" class="fr-header__tools-links">
+              <slot name="before-quick-links" />
+              <nav role="navigation">
+                <DsfrHeaderMenuLinks
+                  v-if="!menuOpened"
+                  :links="quickLinks"
+                  :nav-aria-label="quickLinksAriaLabel"
+                />
+              </nav>
+              <slot name="after-quick-links" />
+            </div>
+            <div v-if="showSearch" class="fr-header__search fr-modal">
+              <DsfrSearchBar
+                :label="searchLabel"
+                :model-value="modelValue"
+                :placeholder="placeholder"
+                style="justify-content: flex-end"
+                @update:model-value="$emit('update:modelValue', $event)"
+                @search="$emit('search', $event)"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="
+            showSearch || isWithSlotNav || (quickLinks && quickLinks.length)
+          "
+          id="header-navigation"
+          class="fr-header__menu fr-modal"
+          :class="{ 'fr-modal--opened': modalOpened }"
+          aria-label="Menu modal"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div class="fr-container">
+            <button
+              id="close-button"
+              class="fr-btn fr-btn--close"
+              aria-controls="header-navigation"
+              data-testid="close-modal-btn"
+              @click.prevent.stop="hideModal()"
+            >
+              Fermer
+            </button>
+            <div class="fr-header__menu-links">
+              <slot name="before-quick-links" />
+              <nav role="navigation">
+                <DsfrHeaderMenuLinks
+                  v-if="menuOpened"
+                  role="navigation"
+                  :links="quickLinks"
+                  :nav-aria-label="quickLinksAriaLabel"
+                  @link-click="onQuickLinkClick"
+                />
+              </nav>
+              <slot name="after-quick-links" />
+            </div>
+            <template v-if="modalOpened">
+              <slot name="mainnav" :hidemodal="hideModal" />
+            </template>
+            <div
+              v-if="searchModalOpened"
+              class="flex justify-center items-center"
+            >
+              <DsfrSearchBar
+                :model-value="modelValue"
+                :placeholder="placeholder"
+                @update:model-value="$emit('update:modelValue', $event)"
+                @search="$emit('search', $event)"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="isWithSlotNav && !modalOpened"
+          class="fr-hidden fr-unhidden-lg"
+        >
+          <!-- @slot Slot nommé mainnav pour le menu de navigation principal -->
+          <slot name="mainnav" :hidemodal="hideModal" />
+        </div>
+        <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<div class="fr-header__body-row">`) -->
+        <slot />
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+:deep(.fr-container) {
+  position: relative;
+}
+
+@screen lt-sm {
+  .marianne-only :deep(.fr-logo::after) {
+    display: none;
+  }
+}
+
+:deep(.fr-header__navbar) {
+  margin-top: 0 !important;
+}
+
+:deep(.fr-header__navbar .fr-btn--menu) {
+  color: var(--text-action-high-blue-france);
+  box-shadow: none;
+}
+
+.marianne-only :deep(.fr-header__logo .fr-logo::before) {
+  background-size: cover;
+  background-position: inherit;
+  height: 1.2rem;
+  margin-bottom: 0.25rem;
+  width: 3rem;
+}
+
+:deep(.fr-badge) {
+  position: absolute;
+  left: 4.25rem;
+  bottom: 1rem;
+}
+</style>
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
deleted file mode 100644
index b7dfa874..00000000
--- a/frontend/src/components/HeaderMain.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import { useRoute } from "vue-router";
-
-import basegunLogo from "@/assets/basegun.png";
-
-const route = useRoute();
-
-const wholeLogo = computed(() => route.meta.wholeLogo as boolean);
-
-const isMobile = window.innerWidth <= 640;
-
-const logoText = computed<
-  InstanceType<typeof DsfrHeader>["$props"]["logoText"]
->(() => (!isMobile || wholeLogo.value ? ["Ministère", "de l’intérieur"] : []));
-
-const quickLinks: InstanceType<typeof DsfrHeader>["$props"]["quickLinks"] = [
-  {
-    label: "Informations",
-    to: "/",
-  },
-  {
-    label: "À propos",
-    to: "/a-propos",
-  },
-  {
-    label: "Mentions légales",
-    to: "/mentions-legales",
-  },
-  {
-    label: "Contact",
-    to: "/contact",
-  },
-  {
-    label: "Accessibilité : partiellement conforme",
-    to: "/accessibilite",
-  },
-];
-
-const operatorImgStyle: InstanceType<
-  typeof DsfrHeader
->["$props"]["operatorImgStyle"] = {
-  width: "30%",
-};
-</script>
-
-<template>
-  <DsfrHeader
-    :class="{ 'marianne-only': !wholeLogo }"
-    :quick-links="quickLinks"
-    :operator-img-src="basegunLogo"
-    :operator-img-style="operatorImgStyle"
-    operator-img-alt="Logo basegun"
-    :show-beta="false"
-    :home-to="{ name: 'StartPage' }"
-    :logo-text="logoText"
-  />
-</template>
-
-<style scoped>
-:deep(.fr-container) {
-  position: relative;
-}
-
-@screen lt-sm {
-  .marianne-only :deep(.fr-logo::after) {
-    display: none;
-  }
-}
-
-:deep(.fr-header__navbar) {
-  margin-top: 0 !important;
-}
-
-:deep(.fr-header__navbar .fr-btn--menu) {
-  color: var(--text-action-high-blue-france);
-  box-shadow: none;
-}
-
-.marianne-only :deep(.fr-header__logo .fr-logo::before) {
-  background-size: cover;
-  background-position: inherit;
-  height: 1.2rem;
-  margin-bottom: 0.25rem;
-  width: 3rem;
-}
-
-:deep(.fr-badge) {
-  position: absolute;
-  left: 4.25rem;
-  bottom: 1rem;
-}
-</style>
diff --git a/frontend/src/components/ResultPage.vue b/frontend/src/components/ResultPage.vue
index f9f6f86f..7609928a 100644
--- a/frontend/src/components/ResultPage.vue
+++ b/frontend/src/components/ResultPage.vue
@@ -237,7 +237,7 @@ async function sendFeedback(isCorrect: boolean) {
         </label>
       </div>
     </div>
-    <div class="big-blank" />
+    <div class="small-blank" />
   </div>
 </template>
 
@@ -247,7 +247,7 @@ async function sendFeedback(isCorrect: boolean) {
   color: var(--blue-france-sun-113-625);
 }
 .result-frame {
-  background-color: #e3e3fd;
+  background-color: var(--blue-france-925-125);
 }
 
 .result-image {
diff --git a/frontend/src/main.css b/frontend/src/main.css
index 0f822647..71add8f0 100644
--- a/frontend/src/main.css
+++ b/frontend/src/main.css
@@ -30,7 +30,7 @@ a {
   top: 100%;
   left: 50%;
   transform: translate(-50%, -100%);
-  background-color: #ffffff;
+  background-color: var(--grey-1000-100);
   box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
   padding: 15px;
   width: 100%;
diff --git a/frontend/src/views/GuideIdentificationFirearm/IdentificationFurtherInformations.vue b/frontend/src/views/GuideIdentificationFirearm/IdentificationFurtherInformations.vue
index 3b46e9da..399b4cec 100644
--- a/frontend/src/views/GuideIdentificationFirearm/IdentificationFurtherInformations.vue
+++ b/frontend/src/views/GuideIdentificationFirearm/IdentificationFurtherInformations.vue
@@ -9,7 +9,7 @@
     </p>
     <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
       <img
-        src="@/assets/guide-identification/icones/complements.jpg"
+        src="@/assets/guide-identification/icones/complements.png"
         alt=""
         class="img-deco"
         aria-hidden="true"
diff --git a/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue b/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue
index 2a072ce8..5b7e7568 100644
--- a/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue
+++ b/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue
@@ -31,7 +31,7 @@ const currentStep = ref(0);
           </p>
           <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
             <img
-              src="@/assets/guide-mise-en-securite/icones/preconisations.jpg"
+              src="@/assets/guide-mise-en-securite/icones/preconisations.png"
               alt=""
               class="img-deco"
               aria-hidden="true"
@@ -54,7 +54,7 @@ const currentStep = ref(0);
           </p>
           <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
             <img
-              src="@/assets/guide-mise-en-securite/icones/take-care.jpg"
+              src="@/assets/guide-mise-en-securite/icones/take-care.png"
               alt=""
               class="w-60 w-fr-mt-n4w"
               aria-hidden="true"
@@ -74,7 +74,7 @@ const currentStep = ref(0);
         </p>
         <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
           <img
-            src="@/assets/guide-mise-en-securite/icones/consignes-securite.jpg"
+            src="@/assets/guide-mise-en-securite/icones/consignes-securite.png"
             alt=""
             class="w-80 fr-mt-2w"
             aria-hidden="true"
@@ -90,7 +90,7 @@ const currentStep = ref(0);
         </p>
         <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
           <img
-            src="@/assets/guide-mise-en-securite/icones/instructions.jpg"
+            src="@/assets/guide-mise-en-securite/icones/instructions.png"
             alt=""
             class="w-100 fr-mt-5w"
             aria-hidden="true"
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
index 2248f7d9..0db8600a 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
@@ -47,7 +47,7 @@ function goToMissingCardPageIfMissing() {
         </p>
         <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
           <img
-            src="@/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.jpg"
+            src="@/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.png"
             alt=""
             class="img-deco"
             aria-hidden="true"
@@ -72,7 +72,7 @@ function goToMissingCardPageIfMissing() {
         </div>
         <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
           <img
-            src="@/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.jpg"
+            src="@/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.png"
             alt=""
             class="img-deco"
             aria-hidden="true"
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue b/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
index bd7c7140..b0de7446 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
@@ -76,6 +76,6 @@ video {
 }
 
 .manipulations {
-  background-color: #e3e3fd;
+  background-color: var(--blue-france-925-125);
 }
 </style>