diff --git a/confiture-web-app/.eslintrc b/confiture-web-app/.eslintrc
index 52745e466..1c1d68717 100644
--- a/confiture-web-app/.eslintrc
+++ b/confiture-web-app/.eslintrc
@@ -17,6 +17,18 @@
   },
   "rules": {
     "vue/multi-word-component-names": "off",
+    "no-irregular-whitespace": "off",
+    "vue/no-irregular-whitespace": [
+      "error",
+      {
+        "skipStrings": true,
+        "skipComments": true,
+        "skipRegExps": true,
+        "skipTemplates": true,
+        "skipHTMLAttributeValues": true,
+        "skipHTMLTextContents": true
+      }
+    ],
     "vue/no-v-html": "off",
     "no-duplicate-imports": "error",
     "@typescript-eslint/no-explicit-any": "off",
diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue
index 45711da3b..36d7daa89 100644
--- a/confiture-web-app/src/components/audit/AraTabs.vue
+++ b/confiture-web-app/src/components/audit/AraTabs.vue
@@ -1,61 +1,164 @@
 <!--
-  This component is only used to replicate DSFR tabs with sticky functionality.
-  For tabs that have no sticky needs, please use `fr-tabs` instead of this component.
+  This component is used to replicate DSFR tabs with:
+	- sticky functionality
+	- routing behaviour, one nested route per tab
+  For "regular" tabs, please use `fr-tabs` instead of this component.
   https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/onglet
  -->
 
-<script setup lang="ts" generic="T">
-import { ref, watch } from "vue";
+<script setup lang="ts">
+import { computed, onMounted, ref, watchEffect } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
+import { useResizeObserver } from "../../composables/useResizeObserver";
 import { useUniqueId } from "../../composables/useUniqueId";
 import LayoutIcon from "../icons/LayoutIcon.vue";
+import { AraTabsTabData } from "./AraTabsTabData";
 
-const props = defineProps<{
-  tabs: { label: string; data: T }[];
-  stickyTop: string;
-}>();
+/** Types */
+export interface TabsRouteParams {
+  name: string;
+  params: {
+    uniqueId: string;
+  };
+}
 
-defineSlots<{
-  panel(props: { i: number; data: T }): void;
-}>();
+/**
+ * Props
+ * - tabs: array of tab data objects
+ * - route: route parameters common to all tabs
+ * - stickyTop: CSS top value (e.g. "0", "4px" or "1rem"). Default is "0";
+ * - panelScrollBehavior:
+ * 		- "sameCriteria" tries to scroll page to the same
+ * 			criteria as previous tab (e.g. for Audit)
+ *    - "tabsTop" always scrolls to push the tabs panel at the top
+ *      of the screen (e.g. for Report)
+ */
+const props = withDefaults(
+  defineProps<{
+    tabs: AraTabsTabData[];
+    route: TabsRouteParams;
+    stickyTop?: string;
+    panelScrollBehavior?: "tabsTop" | "sameCriteria";
+  }>(),
+  {
+    stickyTop: "0",
+    panelScrollBehavior: "tabsTop"
+  }
+);
+
+/** Refs */
+const selectedTabIndex = ref();
+const selectedTabSlug = ref();
+const stickyTop = ref(props.stickyTop);
+const tabButtonsRef = ref<HTMLButtonElement[]>();
+const panelBottomMarkerRef = ref<HTMLDivElement>();
+const panelMinHeight = ref<string>("0");
+
+/** Composables */
+const uniqueId = useUniqueId();
+
+/** Routing */
+const router = useRouter();
+const routerRoute = useRoute();
 
+/** Event: "selectedTabChange" */
 const emit = defineEmits<{
-  (e: "change", currentTab: number): void;
+  (e: "selectedTabChange", selectedTabIndex: number): void;
 }>();
 
-const uniqueId = useUniqueId();
-const tabId = (i: number) => "tab-" + uniqueId.value + "-" + i;
-const panelId = (i: number) => "panel-" + uniqueId.value + "-" + i;
-
-const currentTab = ref(0);
-const tabControlRefs = ref<HTMLButtonElement[]>();
-
-const selectNextTab = () => {
-  currentTab.value = (currentTab.value + 1) % props.tabs.length;
-  tabControlRefs.value?.at(currentTab.value)?.focus();
-};
-
-const selectPreviousTab = () => {
-  if (currentTab.value === 0) {
-    currentTab.value = props.tabs.length - 1;
-  } else {
-    currentTab.value -= 1;
+/** Computed properties */
+const selectedTab = computed(() => {
+  return props.tabs[selectedTabIndex.value];
+});
+
+/** Functions */
+
+function tabId(i: number) {
+  return "tab-" + uniqueId.value + "-" + i;
+}
+
+function panelId(i: number) {
+  return "panel-" + uniqueId.value + "-" + i;
+}
+
+/**
+ * Selects the tab at index i
+ *
+ * Note: `selectedTabIndex` ref is not updated here,
+ *       it will be updated **after route update**
+ *       See watchEffect
+ *
+ * @param {number} i New index to focus
+ */
+function selectTab(i: number) {
+  if (i === selectedTabIndex.value) {
+    return;
   }
-  tabControlRefs.value?.at(currentTab.value)?.focus();
-};
 
-const selectFirstTab = () => {
-  currentTab.value = 0;
-  tabControlRefs.value?.at(currentTab.value)?.focus();
-};
+  // Focus the new tab element
+  tabButtonsRef.value?.at(i)?.focus();
 
-const selectLastTab = () => {
-  currentTab.value = props.tabs.length - 1;
-  tabControlRefs.value?.at(currentTab.value)?.focus();
-};
+  // Change route
+  router.push({
+    ...props.route,
+    params: {
+      ...props.route.params,
+      tabSlug: props.tabs[i].slug
+    }
+  });
+}
+
+function selectNextTab() {
+  selectTab((selectedTabIndex.value + 1) % props.tabs.length);
+}
+
+function selectPreviousTab() {
+  const len = props.tabs.length;
+  selectTab((selectedTabIndex.value - 1 + len) % len);
+}
+
+function selectFirstTab() {
+  selectTab(0);
+}
+
+function selectLastTab() {
+  selectTab(props.tabs.length - 1);
+}
+
+/** Lifecycle hooks */
+
+onMounted(() => {
+  // Dynamic panel minimum height.
+  // Allows tabs to stick to the top of the screen
+  // even if content is not high enough
+  const tabsEl = document.getElementsByClassName(
+    "tabs-wrapper"
+  )[0] as HTMLElement;
+  const bodyEl = document.getElementsByTagName("body")[0] as HTMLElement;
+  useResizeObserver(bodyEl, () => {
+    panelMinHeight.value = `calc( 100vh - (${stickyTop.value}) - ${
+      tabsEl.clientHeight +
+      (bodyEl.getBoundingClientRect().bottom -
+        panelBottomMarkerRef.value!.getBoundingClientRect().top)
+    }px )`;
+  });
+});
 
-watch(currentTab, (currentTab) => {
-  emit("change", currentTab);
+/** Watchers */
+watchEffect(() => {
+  // stickyTop can change on window resize
+  stickyTop.value = props.stickyTop;
+
+  // tabSlug changes on route change
+  selectedTabSlug.value = routerRoute.params.tabSlug as string;
+
+  selectedTabIndex.value = props.tabs.findIndex(
+    (tabData) => tabData.slug === selectedTabSlug.value
+  );
+
+  // other components may be interested by the current selected tab index
+  emit("selectedTabChange", selectedTabIndex.value);
 });
 </script>
 
@@ -65,17 +168,21 @@ watch(currentTab, (currentTab) => {
 -->
 
 <template>
-  <div class="tabs-wrapper" :style="{ '--tabs-top-offset': stickyTop }">
+  <div
+    class="tabs-wrapper"
+    :data-panel-scroll-behavior="panelScrollBehavior"
+    :style="{ '--tabs-top-offset': stickyTop }"
+  >
     <ul role="tablist" class="tabs">
       <li v-for="(tab, i) in tabs" :key="i" role="presentation">
         <button
           :id="tabId(i)"
-          ref="tabControlRefs"
+          ref="tabButtonsRef"
           role="tab"
           :aria-controls="panelId(i)"
-          :aria-selected="i === currentTab ? 'true' : 'false'"
-          :tabindex="i === currentTab ? undefined : '-1'"
-          @click="currentTab = i"
+          :aria-selected="i === selectedTabIndex ? 'true' : 'false'"
+          :tabindex="i === selectedTabIndex ? undefined : '-1'"
+          @click="selectTab(i)"
           @keydown.right.down.prevent="selectNextTab"
           @keydown.left.up.prevent="selectPreviousTab"
           @keydown.home.prevent="selectFirstTab"
@@ -86,19 +193,24 @@ watch(currentTab, (currentTab) => {
       </li>
     </ul>
   </div>
-  <div class="panel-container">
-    <template v-for="(tab, i) in tabs" :key="i">
-      <div
-        :id="panelId(i)"
-        :aria-labelledby="tabId(i)"
-        :class="{ visible: i === currentTab }"
-        role="tabpanel"
-        tabindex="0"
+  <div class="panel-container" :style="{ '--min-height': panelMinHeight }">
+    <RouterView v-slot="{ Component }">
+      <!-- Component should be AraTabsPanel (see router) -->
+      <component
+        :is="Component"
+        :panel-id="panelId(selectedTabIndex)"
+        :labelled-by="tabId(selectedTabIndex)"
+        :component-params="selectedTab.componentParams"
       >
-        <slot v-if="i === currentTab" name="panel" :data="tab.data" :i="i" />
-      </div>
-    </template>
+        <component
+          :is="selectedTab.component"
+          v-bind="selectedTab.componentParams"
+        >
+        </component>
+      </component>
+    </RouterView>
   </div>
+  <div ref="panelBottomMarkerRef"></div>
 </template>
 
 <style scoped>
@@ -211,5 +323,10 @@ li {
   border: 1px solid var(--border-default-grey);
   border-top: none;
   padding: 2rem;
+  /**
+	 * Allow tabs to stick to the top of the screen
+	 * even if content is not high enough:
+	 */
+  min-height: var(--min-height);
 }
 </style>
diff --git a/confiture-web-app/src/components/audit/AraTabsPanel.vue b/confiture-web-app/src/components/audit/AraTabsPanel.vue
new file mode 100644
index 000000000..29fe3c1c8
--- /dev/null
+++ b/confiture-web-app/src/components/audit/AraTabsPanel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/** Types */
+interface AraTabsPanelSlots {
+  default: () => void;
+}
+
+/** Slots */
+defineSlots<AraTabsPanelSlots>();
+
+/** Props */
+const { panelId, labelledBy } = defineProps<{
+  panelId: string;
+  labelledBy: string;
+}>();
+</script>
+
+<template>
+  <div
+    :id="panelId"
+    :aria-labelledby="labelledBy"
+    role="tabpanel"
+    tabindex="0"
+    class="visible"
+  >
+    <slot name="default"></slot>
+  </div>
+</template>
diff --git a/confiture-web-app/src/components/audit/AraTabsTabData.ts b/confiture-web-app/src/components/audit/AraTabsTabData.ts
new file mode 100644
index 000000000..856482fd9
--- /dev/null
+++ b/confiture-web-app/src/components/audit/AraTabsTabData.ts
@@ -0,0 +1,32 @@
+import { type Component } from "vue";
+
+import LayoutIcon from "../../components/icons/LayoutIcon.vue";
+import { slugify } from "../../utils";
+
+export class AraTabsTabData {
+  label: string;
+  #slug: string; // do not allow slug to be defined from outside
+  icon: typeof LayoutIcon | undefined;
+  component: Component;
+  componentParams: object | undefined;
+
+  constructor(data: {
+    label: string;
+    icon?: typeof LayoutIcon;
+    component: Component;
+    componentParams?: object;
+  }) {
+    const label = data.label;
+    this.label = label;
+    this.#slug = slugify(label);
+    this.icon = data.icon;
+    this.component = data.component;
+    this.componentParams = data.componentParams;
+  }
+
+  // TODO: check how to expose "slug" to DevTools
+  // Currently it is not exposed because #slug is private
+  public get slug(): string {
+    return this.#slug;
+  }
+}
diff --git a/confiture-web-app/src/components/audit/AuditGenerationFilters.vue b/confiture-web-app/src/components/audit/AuditGenerationFilters.vue
index 36edec1ab..da7315985 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationFilters.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationFilters.vue
@@ -259,8 +259,8 @@ const notApplicableCount = computed(
             class="topic-filter-item"
             :style="{ '--topic-filter-value': topic.value + '%' }"
           >
-            <a
-              :href="`#${topic.number}`"
+            <RouterLink
+              :to="{ hash: `#${topic.number}` }"
               class="fr-py-1w fr-px-1w fr-mb-2v topic-filter-anchor"
             >
               <span>{{ topic.number }}.</span>
@@ -269,7 +269,7 @@ const notApplicableCount = computed(
                 >{{ topic.value }}%</span
               >
               <div class="topic-filter-progress" />
-            </a>
+            </RouterLink>
           </li>
         </ol>
       </nav>
diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
index 90608224f..377019af8 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
@@ -289,7 +289,7 @@ onMounted(() => {
 
     <div class="fr-col-12 fr-col-sm-7 fr-col-md-9 sub-header">
       <SaveIndicator
-        v-if="route.name === 'audit-generation'"
+        v-if="route.name === 'audit-generation-full'"
         class="audit-main-indicator"
       />
       <ul class="top-actions fr-my-0 fr-p-0" role="list">
diff --git a/confiture-web-app/src/components/audit/AuditSettingsForm.vue b/confiture-web-app/src/components/audit/AuditSettingsForm.vue
index be36ed496..e84ed72b2 100644
--- a/confiture-web-app/src/components/audit/AuditSettingsForm.vue
+++ b/confiture-web-app/src/components/audit/AuditSettingsForm.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, nextTick, ref, toRaw, watch } from "vue";
-import { useRoute } from "vue-router";
 
 import { usePreviousRoute } from "../../composables/usePreviousRoute";
+import router from "../../router";
 import { useAccountStore } from "../../store/account";
 import { AuditPage, AuditType, CreateAuditRequestData } from "../../types";
 import { formatEmail } from "../../utils";
@@ -58,7 +58,6 @@ const audits = [
   }
 ];
 
-const route = useRoute();
 const previousRoute = usePreviousRoute();
 const accountStore = useAccountStore();
 
@@ -112,7 +111,7 @@ const backLinkLabel = computed(() => {
     :label="backLinkLabel"
     :to="{
       name: previousRoute.route?.name || 'audit-overview',
-      params: { uniqueId: route.params.uniqueId }
+      params: previousRoute.route?.params
     }"
   />
 
@@ -189,15 +188,12 @@ const backLinkLabel = computed(() => {
         Enregistrer les modifications
       </button>
 
-      <RouterLink
+      <button
         class="fr-btn fr-btn--tertiary-no-outline fr-ml-2w"
-        :to="{
-          name: 'audit-generation',
-          params: { uniqueId: route.params.uniqueId }
-        }"
+        @click="router.back()"
       >
         Annuler
-      </RouterLink>
+      </button>
     </div>
 
     <div class="top-link">
diff --git a/confiture-web-app/src/components/layout/SiteHeader.vue b/confiture-web-app/src/components/layout/SiteHeader.vue
index e6183fe14..bdc26bdd6 100644
--- a/confiture-web-app/src/components/layout/SiteHeader.vue
+++ b/confiture-web-app/src/components/layout/SiteHeader.vue
@@ -16,7 +16,7 @@ const route = useRoute();
  * - if the user is connected
  */
 const headerComponent = computed(() => {
-  if (route.name === "report" || route.name === "a11y-statement") {
+  if (route.name === "report-full" || route.name === "a11y-statement") {
     return DeliverableHeader;
   }
 
diff --git a/confiture-web-app/src/components/report/ReportCriteria.vue b/confiture-web-app/src/components/report/ReportCriteria.vue
index 6192030a3..05afaa3a5 100644
--- a/confiture-web-app/src/components/report/ReportCriteria.vue
+++ b/confiture-web-app/src/components/report/ReportCriteria.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useRoute } from "vue-router";
 
+import { StaticTabLabel, TabSlug } from "../../enums";
 import type { ReportError } from "./getReportErrors";
 import { ReportImprovement } from "./getReportImprovements";
 
 defineProps<{
   count: string;
   pagesData: ReportError[] | ReportImprovement[];
-  tabSlug: string;
   transverseData: ReportError | ReportImprovement;
   showFilters?: boolean;
   topNotice?: string;
@@ -16,6 +16,7 @@ defineProps<{
 // Set active side menu link
 const route = useRoute();
 
+/** Functions */
 function isActive(id: string) {
   return route.hash && route.hash === id;
 }
@@ -23,18 +24,18 @@ function isActive(id: string) {
 
 <template>
   <div class="main">
-    <div class="sidebar">
+    <div class="sidebar filters-wrapper">
       <nav class="fr-sidemenu fr-mb-3w" aria-label="Liste des pages">
         <div class="fr-sidemenu__inner">
           <button
             class="fr-sidemenu__btn"
             hidden
-            :aria-controls="`report-${tabSlug}_sidemenu-wrapper`"
+            :aria-controls="`report_sidemenu-wrapper`"
             aria-expanded="false"
           >
             Pages
           </button>
-          <div :id="`report-${tabSlug}_sidemenu-wrapper`" class="fr-collapse">
+          <div :id="`report_sidemenu-wrapper`" class="fr-collapse">
             <div class="fr-sidemenu__title fr-mb-2w">Pages</div>
             <ul class="fr-sidemenu__list">
               <li
@@ -43,21 +44,24 @@ function isActive(id: string) {
                   'fr-sidemenu__item',
                   {
                     'fr-sidemenu__item--active':
-                      !route.hash || isActive('#elements-transverses')
+                      !route.hash ||
+                      isActive(`#${TabSlug.AUDIT_COMMON_ELEMENTS_SLUG}`)
                   }
                 ]"
               >
-                <a
+                <RouterLink
+                  :to="{ hash: `#${TabSlug.AUDIT_COMMON_ELEMENTS_SLUG}` }"
                   class="fr-sidemenu__link"
-                  :href="`#${tabSlug}_elements-transverses`"
                   :aria-current="
                     route.hash
-                      ? isActive(`#${tabSlug}_elements-transverses`)
+                      ? isActive(`#${TabSlug.AUDIT_COMMON_ELEMENTS_SLUG}`)
                         ? 'true'
                         : undefined
-                      : 'true'
+                      : undefined
                   "
-                  >Éléments transverses</a
+                  >{{
+                    StaticTabLabel.AUDIT_COMMON_ELEMENTS_TAB_LABEL
+                  }}</RouterLink
                 >
               </li>
               <li
@@ -65,28 +69,23 @@ function isActive(id: string) {
                 :key="page.name"
                 class="fr-sidemenu__item"
                 :class="{
-                  'fr-sidemenu__item--active': isActive(
-                    `#${tabSlug}_${page.id}`
-                  )
+                  'fr-sidemenu__item--active': isActive(`#${page.id}`)
                 }"
               >
-                <a
+                <RouterLink
                   class="fr-sidemenu__link"
-                  :href="`#${tabSlug}_${page.id}`"
-                  :aria-current="
-                    isActive(`#${tabSlug}_${page.id}`) ? 'true' : undefined
-                  "
+                  :to="{ hash: `#${page.id}` }"
+                  :aria-current="isActive(`#${page.id}`) ? 'true' : undefined"
                 >
                   {{ page.name }}
-                </a>
+                </RouterLink>
               </li>
             </ul>
           </div>
         </div>
       </nav>
-      <slot name="filter" />
+      <slot name="filter"></slot>
     </div>
-
     <div>
       <div class="fr-mb-5w">
         <p v-if="topNotice" class="fr-text--sm fr-mb-3w improvements-notice">
@@ -108,6 +107,7 @@ function isActive(id: string) {
 </template>
 
 <style scoped>
+@import "../../styles/filters.css";
 .main {
   display: grid;
   grid-template-columns: 20rem minmax(0, 1fr);
@@ -118,8 +118,9 @@ function isActive(id: string) {
   box-shadow: inset -1px 0 0 0 var(--border-default-grey);
 }
 
-.page-title {
+:deep(.page-title) {
   color: var(--text-active-blue-france);
+  scroll-margin: 4rem;
 }
 
 .fr-sidemenu__inner {
@@ -140,4 +141,8 @@ function isActive(id: string) {
 .improvements-notice {
   color: var(--text-mention-grey);
 }
+
+.filters-wrapper {
+  --filters-top-offset: 4.5rem;
+}
 </style>
diff --git a/confiture-web-app/src/components/report/ReportErrors.vue b/confiture-web-app/src/components/report/ReportErrors.vue
index 3d6bc57de..573d1dba3 100644
--- a/confiture-web-app/src/components/report/ReportErrors.vue
+++ b/confiture-web-app/src/components/report/ReportErrors.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
+import { StaticTabLabel, TabSlug } from "../../enums";
 import { useReportStore } from "../../store";
 import {
   CriterionResultUserImpact,
@@ -12,6 +13,7 @@ import { getReportErrors } from "./getReportErrors";
 import ReportCriteria from "./ReportCriteria.vue";
 import ReportErrorCriterium from "./ReportErrorCriterium.vue";
 
+/** Store */
 const report = useReportStore();
 
 // Filters
@@ -109,7 +111,6 @@ function resetFilters() {
     :pages-data="pagesErrors"
     :transverse-data="transverseErrors"
     :show-filters="true"
-    tab-slug="errors"
   >
     <template #filter>
       <div class="fr-text--bold fr-text--xl fr-mb-2w filter-title">Filtres</div>
@@ -203,8 +204,11 @@ function resetFilters() {
     <template v-if="transverseErrors.topics.length" #transverse-data>
       <h2 class="fr-sr-only">Détails des non-conformités</h2>
       <section class="fr-mb-8w">
-        <h3 id="errors_elements-transverses" class="fr-h3 fr-mb-2w page-title">
-          Éléments transverses
+        <h3
+          :id="`${TabSlug.AUDIT_COMMON_ELEMENTS_SLUG}`"
+          class="fr-h3 fr-mb-2w page-title"
+        >
+          {{ StaticTabLabel.AUDIT_COMMON_ELEMENTS_TAB_LABEL }}
         </h3>
 
         <div v-for="(topic, i) in transverseErrors.topics" :key="topic.topic">
@@ -228,7 +232,7 @@ function resetFilters() {
         :key="page.id"
         :class="{ 'fr-mb-8w': i !== pagesErrors.length - 1 }"
       >
-        <h3 :id="`errors_${page.id}`" class="fr-h3 fr-mb-2w page-title">
+        <h3 :id="`${page.id}`" class="fr-h3 fr-mb-2w page-title">
           {{ page.name }}
         </h3>
         <a
@@ -263,9 +267,3 @@ function resetFilters() {
     </template>
   </ReportCriteria>
 </template>
-
-<style>
-.page-title {
-  color: var(--text-active-blue-france);
-}
-</style>
diff --git a/confiture-web-app/src/components/report/ReportImprovements.vue b/confiture-web-app/src/components/report/ReportImprovements.vue
index d51eba50e..1b62c1d4a 100644
--- a/confiture-web-app/src/components/report/ReportImprovements.vue
+++ b/confiture-web-app/src/components/report/ReportImprovements.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { StaticTabLabel, TabSlug } from "../../enums";
 import { useReportStore } from "../../store";
 import { pluralize } from "../../utils";
 import { getReportImprovements } from "./getReportImprovements";
 import ReportCriteria from "./ReportCriteria.vue";
 import ReportImprovementCriterium from "./ReportImprovementCriterium.vue";
 
+/** Store */
 const report = useReportStore();
 
 const transverseImprovements = computed(() => {
@@ -36,17 +38,18 @@ const improvementsCount = computed(() => {
       improvementsCount
     )}`"
     :pages-data="pagesImprovements"
-    tab-slug="improvements"
     :transverse-data="transverseImprovements"
   >
     <template #transverse-data>
-      <h2 class="fr-sr-only">Points d’amélioration</h2>
+      <h2 class="fr-sr-only">
+        {{ StaticTabLabel.REPORT_IMPROVEMENTS_TAB_LABEL }}
+      </h2>
       <section v-if="transverseImprovements.topics.length > 0" class="fr-mb-8w">
         <h3
-          id="improvements_elements-transverses"
+          :id="`${TabSlug.AUDIT_COMMON_ELEMENTS_SLUG}`"
           class="fr-h3 fr-mb-2w page-title"
         >
-          Éléments transverses
+          {{ StaticTabLabel.AUDIT_COMMON_ELEMENTS_TAB_LABEL }}
         </h3>
 
         <div
@@ -79,7 +82,7 @@ const improvementsCount = computed(() => {
         :key="page.id"
         :class="{ 'fr-mb-8w': i !== pagesImprovements.length - 1 }"
       >
-        <h3 :id="`improvements_${page.id}`" class="fr-h3 fr-mb-2w page-title">
+        <h3 :id="`${page.id}`" class="fr-h3 fr-mb-2w page-title">
           {{ page.name }}
         </h3>
         <a
@@ -117,9 +120,3 @@ const improvementsCount = computed(() => {
     </template>
   </ReportCriteria>
 </template>
-
-<style>
-.page-title {
-  color: var(--text-active-blue-france);
-}
-</style>
diff --git a/confiture-web-app/src/components/report/ReportResults.vue b/confiture-web-app/src/components/report/ReportResults.vue
index 56d358587..4bab6133b 100644
--- a/confiture-web-app/src/components/report/ReportResults.vue
+++ b/confiture-web-app/src/components/report/ReportResults.vue
@@ -2,16 +2,13 @@
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 
+import { TabSlug } from "../../enums";
 import { useReportStore } from "../../store";
 import { AuditStatus, AuditType } from "../../types";
 import { getAuditStatus, pluralize, slugify } from "../../utils";
 import { StatDonutTheme } from "../StatDonut.vue";
 import SummaryCard from "../SummaryCard.vue";
 
-defineEmits<{
-  (e: "toTab", payload: string): void;
-}>();
-
 const route = useRoute();
 const uniqueId = route.params.uniqueId as string;
 
@@ -209,14 +206,16 @@ const transverseNotCompliantCount = computed(() => {
           concernent des éléments transverses à toutes les pages de
           l’échantillon.
         </p>
-        <!-- FIXME: make this link work -->
         <RouterLink
           :to="{
-            name: 'report',
-            params: { uniqueId, tab: slugify('Détails des non-conformités') }
+            name: 'report-full',
+            params: {
+              uniqueId,
+              tabSlug: TabSlug.REPORT_ERRORS_SLUG
+            },
+            hash: `#${TabSlug.AUDIT_COMMON_ELEMENTS_SLUG}`
           }"
           class="fr-link fr-link--sm"
-          @click="$emit('toTab', 'Détails des non-conformités')"
           >Voir
           {{
             pluralize(
diff --git a/confiture-web-app/src/composables/useMounted.ts b/confiture-web-app/src/composables/useMounted.ts
new file mode 100644
index 000000000..b144d3bbc
--- /dev/null
+++ b/confiture-web-app/src/composables/useMounted.ts
@@ -0,0 +1,24 @@
+import {
+  getCurrentInstance,
+  // eslint-disable-next-line no-restricted-imports
+  onMounted,
+  shallowRef
+} from "vue";
+
+/**
+ * Mounted state in ref.
+ *
+ * @see https://vueuse.org/useMounted
+ */
+export function useMounted() {
+  const isMounted = shallowRef(false);
+
+  const instance = getCurrentInstance();
+  if (instance) {
+    onMounted(() => {
+      isMounted.value = true;
+    }, instance);
+  }
+
+  return isMounted;
+}
diff --git a/confiture-web-app/src/composables/useResizeObserver.ts b/confiture-web-app/src/composables/useResizeObserver.ts
new file mode 100644
index 000000000..4885fc083
--- /dev/null
+++ b/confiture-web-app/src/composables/useResizeObserver.ts
@@ -0,0 +1,168 @@
+import {
+  ComponentPublicInstance,
+  computed,
+  getCurrentScope,
+  MaybeRef,
+  MaybeRefOrGetter,
+  onScopeDispose,
+  toValue,
+  watch
+} from "vue";
+
+import { useSupported } from "./useSupported";
+
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElementRef<T extends MaybeElement = MaybeElement> =
+  MaybeRef<T>;
+export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> =
+  MaybeRefOrGetter<T>;
+export type MaybeElement =
+  | HTMLElement
+  | SVGElement
+  | VueInstance
+  | undefined
+  | null;
+
+export interface ResizeObserverSize {
+  readonly inlineSize: number;
+  readonly blockSize: number;
+}
+
+export interface ResizeObserverEntry {
+  readonly target: Element;
+  readonly contentRect: DOMRectReadOnly;
+  readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
+  readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
+  readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
+}
+
+export type ResizeObserverCallback = (
+  entries: ReadonlyArray<ResizeObserverEntry>,
+  observer: ResizeObserver
+) => void;
+
+export interface UseResizeObserverOptions extends ConfigurableWindow {
+  /**
+   * Sets which box model the observer will observe changes to. Possible values
+   * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
+   *
+   * @default 'content-box'
+   */
+  box?: ResizeObserverBoxOptions;
+}
+
+declare class ResizeObserver {
+  constructor(callback: ResizeObserverCallback);
+  disconnect(): void;
+  observe(target: Element, options?: UseResizeObserverOptions): void;
+  unobserve(target: Element): void;
+}
+
+/**
+ * Reports changes to the dimensions of an Element's content or the border-box
+ *
+ * @see https://vueuse.org/useResizeObserver
+ * @param target
+ * @param callback
+ * @param options
+ */
+export function useResizeObserver(
+  target:
+    | MaybeComputedElementRef
+    | MaybeComputedElementRef[]
+    | MaybeRefOrGetter<MaybeElement[]>,
+  callback: ResizeObserverCallback,
+  options: UseResizeObserverOptions = {}
+) {
+  const { window = defaultWindow, ...observerOptions } = options;
+  let observer: ResizeObserver | undefined;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  const targets = computed(() => {
+    const _targets = toValue(target);
+    return Array.isArray(_targets)
+      ? _targets.map((el) => unrefElement(el))
+      : [unrefElement(_targets)];
+  });
+
+  const stopWatch = watch(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els) {
+          if (_el) observer!.observe(_el, observerOptions);
+        }
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    stop
+  };
+}
+
+export type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>;
+
+//=============================================================================
+
+interface ConfigurableWindow {
+  /*
+   * Specify a custom `window` instance, e.g. working with iframes or in testing environments.
+   */
+  window?: Window;
+}
+
+/**
+ * Void function
+ */
+type Fn = () => void;
+
+const isClient =
+  typeof window !== "undefined" && typeof document !== "undefined";
+const defaultWindow = /* #__PURE__ */ isClient ? window : undefined;
+
+/**
+ * Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing
+ *
+ * @param fn
+ */
+function tryOnScopeDispose(fn: Fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
+  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined;
+
+/**
+ * Get the dom element of a ref of element or Vue component instance
+ *
+ * @param elRef
+ */
+function unrefElement<T extends MaybeElement>(
+  elRef: MaybeComputedElementRef<T>
+): UnRefElementReturn<T> {
+  const plain = toValue(elRef);
+  return (plain as VueInstance)?.$el ?? plain;
+}
diff --git a/confiture-web-app/src/composables/useSupported.ts b/confiture-web-app/src/composables/useSupported.ts
new file mode 100644
index 000000000..a523dcebc
--- /dev/null
+++ b/confiture-web-app/src/composables/useSupported.ts
@@ -0,0 +1,15 @@
+import { computed } from "vue";
+
+import { useMounted } from "./useMounted";
+
+export function useSupported(callback: () => unknown) {
+  const isMounted = useMounted();
+
+  return computed(() => {
+    // to trigger the ref
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+
+export type UseSupportedReturn = ReturnType<typeof useSupported>;
diff --git a/confiture-web-app/src/enums.ts b/confiture-web-app/src/enums.ts
index 9a3d856c2..2c7508ad2 100644
--- a/confiture-web-app/src/enums.ts
+++ b/confiture-web-app/src/enums.ts
@@ -1,3 +1,5 @@
+import { slugify } from "./utils";
+
 export enum Platform {
   DESKTOP = "Ordinateur",
   MOBILE = "Mobile"
@@ -32,3 +34,28 @@ export enum FileErrorMessage {
   UPLOAD_UNKNOWN = "Une erreur inconnue empêche le téléchargement du fichier. Veuillez réessayer.",
   DELETE_UNKNOWN = "Une erreur inconnue empêche la suppression du fichier. Veuillez réessayer."
 }
+
+export enum StaticTabLabel {
+  AUDIT_COMMON_ELEMENTS_TAB_LABEL = "Éléments transverses",
+  REPORT_RESULTS_TAB_LABEL = "Résultats",
+  REPORT_NOTES_TAB_LABEL = "Notes",
+  REPORT_ERRORS_TAB_LABEL = "Détails des non-conformités",
+  REPORT_IMPROVEMENTS_TAB_LABEL = "Points d’amélioration"
+}
+
+export const TabSlug = {
+  AUDIT_COMMON_ELEMENTS_SLUG: slugify(
+    StaticTabLabel.AUDIT_COMMON_ELEMENTS_TAB_LABEL
+  ),
+  REPORT_RESULTS_SLUG: slugify(StaticTabLabel.REPORT_RESULTS_TAB_LABEL),
+  REPORT_NOTES_SLUG: slugify(StaticTabLabel.REPORT_NOTES_TAB_LABEL),
+  REPORT_ERRORS_SLUG: slugify(StaticTabLabel.REPORT_ERRORS_TAB_LABEL),
+  REPORT_IMPROVEMENTS_SLUG: slugify(
+    StaticTabLabel.REPORT_IMPROVEMENTS_TAB_LABEL
+  )
+};
+
+export const FirstTab = {
+  AUDIT_SLUG: slugify(StaticTabLabel.AUDIT_COMMON_ELEMENTS_TAB_LABEL),
+  REPORT_SLUG: slugify(StaticTabLabel.REPORT_RESULTS_TAB_LABEL)
+};
diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
index df3353806..293f97a29 100644
--- a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
+++ b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -1,37 +1,57 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from "vue";
-import { onBeforeRouteLeave, useRoute } from "vue-router";
+import { computed, ref, toRef, watch } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
 
 import AraTabs from "../../components/audit/AraTabs.vue";
+import { AraTabsTabData } from "../../components/audit/AraTabsTabData";
 import AuditGenerationFilters from "../../components/audit/AuditGenerationFilters.vue";
 import AuditGenerationHeader from "../../components/audit/AuditGenerationHeader.vue";
 import AuditGenerationPageCriteria from "../../components/audit/AuditGenerationPageCriteria.vue";
+import LayoutIcon from "../../components/icons/LayoutIcon.vue";
 import PageMeta from "../../components/PageMeta";
 import { StatDonutTheme } from "../../components/StatDonut.vue";
 import BackLink from "../../components/ui/BackLink.vue";
 import { useAuditStats } from "../../composables/useAuditStats";
+import { useResizeObserver } from "../../composables/useResizeObserver";
 import { useWrappedFetch } from "../../composables/useWrappedFetch";
 import rgaa from "../../criteres.json";
 import { CRITERIA_BY_AUDIT_TYPE } from "../../criteria";
+import { StaticTabLabel } from "../../enums";
 import { useAuditStore, useFiltersStore, useResultsStore } from "../../store";
-import { AuditPage, AuditType, CriteriumResultStatus } from "../../types";
+import { AuditType, CriteriumResultStatus } from "../../types";
 import { pluralize } from "../../utils";
 
-const route = useRoute();
+/** Props */
+const props = defineProps<{
+  uniqueId: string;
+}>();
 
-const uniqueId = computed(() => route.params.uniqueId as string);
-const auditStore = useAuditStore();
+/** Refs */
 
-useWrappedFetch(async () => {
-  resultsStore.$reset();
-  await auditStore.fetchAuditIfNeeded(uniqueId.value);
-  await resultsStore.fetchResults(uniqueId.value);
-  await auditStore.updateCurrentPageId(
-    auditStore.currentAudit?.transverseElementsPage.id || null
-  );
-}, true);
+const showFilters = ref(true);
 
+// Observe the height of the sticky indicator and sync the `top` CSS property with it.
+const auditGenerationHeaderRef = ref<InstanceType<
+  typeof AuditGenerationHeader
+> | null>(null);
+
+const stickyTop = ref("0px");
+
+/** Stores */
+const auditStore = useAuditStore();
 const resultsStore = useResultsStore();
+const filterStore = useFiltersStore();
+
+/** Composables */
+const {
+  complianceLevel,
+  compliantCriteriaCount,
+  applicableCriteriaCount,
+  notCompliantCriteriaCount,
+  blockingCriteriaCount
+} = useAuditStats();
+
+/** Computed properties */
 
 /** Available topic filters and their global progression. */
 const topics = computed(() => {
@@ -77,24 +97,6 @@ const topics = computed(() => {
 
 const auditIsInProgress = computed(() => resultsStore.auditProgress < 1);
 
-function updateCurrentPageId(i: number) {
-  auditStore.updateCurrentPageId(
-    i === 0
-      ? auditStore.currentAudit?.transverseElementsPage.id ?? null
-      : auditStore.currentAudit?.pages
-        ? auditStore.currentAudit?.pages.at(i - 1)?.id ?? null
-        : null
-  );
-}
-
-const {
-  complianceLevel,
-  compliantCriteriaCount,
-  applicableCriteriaCount,
-  notCompliantCriteriaCount,
-  blockingCriteriaCount
-} = useAuditStats();
-
 const headerInfos = computed(() => [
   ...(auditStore.currentAudit?.auditType === AuditType.FULL
     ? [
@@ -132,66 +134,22 @@ const headerInfos = computed(() => [
   }
 ]);
 
-onBeforeRouteLeave(() => {
-  auditStore.showAuditEmailAlert = false;
-});
-
-const showFilters = ref(true);
-
-function toggleFilters(value: boolean) {
-  showFilters.value = value;
-}
-
-const filterStore = useFiltersStore();
 const filterResultsCount = computed(() =>
   filterStore.filteredTopics
     .map((t) => t.criteria.length)
     .reduce((total, length) => (total += length), 0)
 );
 
-watch(
-  () => auditStore.currentAudit?.pages,
-  (curr, prev) => {
-    if (curr && !prev) {
-      auditStore.currentPageId = auditStore.currentAudit!.pages[0].id;
-    }
-  }
-);
-
-// Observe the height of the sticky indicator and sync the `top` CSS property with it.
-const auditGenerationHeader = ref<InstanceType<
-  typeof AuditGenerationHeader
-> | null>(null);
-
-const stickyTop = ref<string>("0");
-let resizeObserver: ResizeObserver | null = null;
-
-// Because auditGenerationHeader ref is inside a "v-if",
-// Vue will not instantiate the ref immediately.
-// We need to watch it before observing nested stickyIndicator
-watch(auditGenerationHeader, async () => {
-  const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
-  resizeObserver = new ResizeObserver((entries) => {
-    stickyTop.value = entries[0].target.clientHeight + "px";
-  });
-  stickyIndicator && resizeObserver.observe(stickyIndicator);
-});
-
-onBeforeUnmount(() => {
-  const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
-  stickyIndicator && resizeObserver?.unobserve(stickyIndicator);
-});
-
 const pageTitle = computed(() => {
-  // [audit name] - Page en cours « XXX » - X résultats pour « XXX »
+  // [audit name] - Page en cours « XXX » - X résultats pour « XXX »
   if (auditStore.currentAudit) {
     let title = auditStore.currentAudit.procedureName;
 
-    const tabName = ` - Page en cours « ${
+    const tabName = ` - Page en cours « ${
       auditStore.currentAudit.pages.find(
         (p) => p.id === auditStore.currentPageId
-      )?.name ?? "Éléments transverses"
-    } »`;
+      )?.name ?? StaticTabLabel.AUDIT_COMMON_ELEMENTS_TAB_LABEL
+    } »`;
 
     title += tabName;
 
@@ -200,7 +158,7 @@ const pageTitle = computed(() => {
         "résultat",
         "résultats",
         filterResultsCount.value
-      )} pour « ${filterStore.search} »`;
+      )} pour « ${filterStore.search} »`;
 
       title += results;
     }
@@ -211,20 +169,96 @@ const pageTitle = computed(() => {
   return "";
 });
 
-type TabData = { label: string; data: AuditPage };
-
-const tabsData = computed((): TabData[] => {
+const tabsData = computed((): AraTabsTabData[] => {
   const transversePage = auditStore.currentAudit?.transverseElementsPage;
   return [
     ...(transversePage
-      ? [{ label: transversePage?.name, data: transversePage }]
+      ? [
+          new AraTabsTabData({
+            label: transversePage?.name,
+            icon: LayoutIcon,
+            component: AuditGenerationPageCriteria,
+            componentParams: {
+              page: transversePage,
+              auditUniqueId: "uniqueId"
+            }
+          })
+        ]
       : []),
-    ...(auditStore.currentAudit?.pages.map((p) => ({
-      label: p.name,
-      data: p
-    })) ?? [])
+    ...(auditStore.currentAudit?.pages.map(
+      (p) =>
+        new AraTabsTabData({
+          label: p.name,
+          component: AuditGenerationPageCriteria,
+          componentParams: {
+            page: p,
+            auditUniqueId: "uniqueId"
+          }
+        })
+    ) ?? [])
   ];
 });
+
+/** Functions */
+
+/**
+ * Updates audit store `currentPageId` given a tab index.
+ * Usefull for synchronising filters with current page (on tab change)
+ *
+ * @param {number} tabIndex
+ */
+function onSelectedTabChange(tabIndex: number) {
+  auditStore.updateCurrentPageId(
+    tabIndex === 0
+      ? auditStore.currentAudit?.transverseElementsPage.id ?? null
+      : auditStore.currentAudit?.pages
+        ? auditStore.currentAudit?.pages.at(tabIndex - 1)?.id ?? null
+        : null
+  );
+}
+
+/**
+ * Toggles filters
+ *
+ * @param {boolean} doShow if true, shows filters, otherwise hides them
+ */
+function toggleFilters(doShow: boolean) {
+  showFilters.value = doShow;
+}
+
+/** Lifecycle hooks */
+
+/** Note: here useWrappedFetch uses onMounted callback */
+useWrappedFetch(async () => {
+  resultsStore.$reset();
+  await auditStore.fetchAuditIfNeeded(props.uniqueId);
+  await resultsStore.fetchResults(props.uniqueId);
+  const stickyIndicator = toRef(
+    auditGenerationHeaderRef.value!.stickyIndicator
+  );
+
+  useResizeObserver(stickyIndicator, () => {
+    stickyTop.value = `calc(${getComputedStyle(stickyIndicator.value!).top} + ${
+      stickyIndicator.value!.clientHeight
+    }px)`;
+  });
+}, false);
+
+/** Navigation guards */
+onBeforeRouteLeave(() => {
+  auditStore.showAuditEmailAlert = false;
+});
+
+/** Watchers */
+
+watch(
+  () => auditStore.currentAudit?.pages,
+  (curr, prev) => {
+    if (curr && !prev) {
+      auditStore.currentPageId = auditStore.currentAudit!.pages[0].id;
+    }
+  }
+);
 </script>
 
 <template>
@@ -241,7 +275,7 @@ const tabsData = computed((): TabData[] => {
     />
 
     <AuditGenerationHeader
-      ref="auditGenerationHeader"
+      ref="auditGenerationHeaderRef"
       :audit-name="auditStore.currentAudit.procedureName"
       :key-infos="headerInfos"
       :audit-publication-date="auditStore.currentAudit.publicationDate"
@@ -272,16 +306,12 @@ const tabsData = computed((): TabData[] => {
         :class="`fr-col-12 fr-col-md-${showFilters ? '9' : '11'}`"
       >
         <AraTabs
-          :tabs="tabsData"
+          panel-scroll-behavior="sameCriteria"
+          :route="{ name: 'audit-generation-full', params: { uniqueId } }"
           :sticky-top="stickyTop"
-          @change="updateCurrentPageId"
+          :tabs="tabsData"
+          @selected-tab-change="onSelectedTabChange"
         >
-          <template #panel="{ data }">
-            <AuditGenerationPageCriteria
-              :page="data"
-              :audit-unique-id="uniqueId"
-            />
-          </template>
         </AraTabs>
       </div>
     </div>
diff --git a/confiture-web-app/src/pages/report/ReportPage.vue b/confiture-web-app/src/pages/report/ReportPage.vue
index a2c631e06..30c295141 100644
--- a/confiture-web-app/src/pages/report/ReportPage.vue
+++ b/confiture-web-app/src/pages/report/ReportPage.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 
+import AraTabs from "../../components/audit/AraTabs.vue";
+import { AraTabsTabData } from "../../components/audit/AraTabsTabData";
 import PageMeta from "../../components/PageMeta";
 import OnboardingModal from "../../components/report/OnboardingModal.vue";
 import ReportErrors from "../../components/report/ReportErrors.vue";
@@ -11,16 +13,31 @@ import ReportResults from "../../components/report/ReportResults.vue";
 import Dropdown from "../../components/ui/Dropdown.vue";
 import TopLink from "../../components/ui/TopLink.vue";
 import { useWrappedFetch } from "../../composables/useWrappedFetch";
+import { StaticTabLabel } from "../../enums";
 import { useReportStore } from "../../store";
 import { AuditStatus, CriteriumResultStatus } from "../../types";
 import { formatBytes, formatDate, getAuditStatus, slugify } from "../../utils";
 
+/** Props */
+const props = defineProps<{
+  tabSlug: string; // given by router (props: true). TODO check why needed here and not on AuditGenerationPage
+  uniqueId: string;
+}>();
+
+/** Variables */
+const uniqueId = props.uniqueId;
+
+/** Stores */
 const report = useReportStore();
 
-const route = useRoute();
-const uniqueId = route.params.uniqueId as string;
+/** Routing */
+const router = useRouter();
+
+/** Refs */
+const showCopyAlert = ref(false);
+const onboardingModalRef = ref<InstanceType<typeof OnboardingModal>>();
 
-useWrappedFetch(() => report.fetchReport(uniqueId));
+/** Computed properties */
 
 const hasNotes = computed(() => {
   return !!report.data?.notes || report.data?.notesFiles.length;
@@ -36,76 +53,47 @@ const hasCompliantOrNotApplicableComments = computed(() => {
   });
 });
 
-const tabs = computed(() => [
-  { title: "Résultats", component: ReportResults },
-  ...(hasNotes.value ? [{ title: "Notes", component: ReportNotes }] : []),
-  { title: "Détails des non-conformités", component: ReportErrors },
-  ...(hasCompliantOrNotApplicableComments.value
-    ? [{ title: "Points d’amélioration", component: ReportImprovements }]
-    : [])
-]);
+const tabsData = computed((): AraTabsTabData[] => {
+  const tabs: AraTabsTabData[] = [];
 
-const showCopyAlert = ref(false);
-
-async function copyReportUrl() {
-  const url =
-    window.location.origin +
-    router.resolve({ name: "report", params: { uniqueId } }).fullPath;
-
-  navigator.clipboard.writeText(url).then(() => {
-    showCopyAlert.value = true;
-  });
-}
-
-function hideReportAlert() {
-  showCopyAlert.value = false;
-}
-
-const onboardingModalRef = ref<InstanceType<typeof OnboardingModal>>();
+  // Results
+  tabs.push(
+    new AraTabsTabData({
+      label: StaticTabLabel.REPORT_RESULTS_TAB_LABEL,
+      component: ReportResults
+    })
+  );
 
-watch(
-  () => report.data,
-  (report) => {
-    if (report) {
-      if (
-        getAuditStatus(report) !== AuditStatus.IN_PROGRESS &&
-        localStorage.getItem("confiture:seen-onboarding") !== "true"
-      ) {
-        onboardingModalRef.value?.show();
-      }
-    }
+  // Notes
+  if (hasNotes.value) {
+    tabs.push(
+      new AraTabsTabData({
+        label: StaticTabLabel.REPORT_NOTES_TAB_LABEL,
+        component: ReportNotes
+      })
+    );
   }
-);
 
-function onOnboardingClose() {
-  localStorage.setItem("confiture:seen-onboarding", "true");
-}
-
-const targetTab = ref(route.params.tab as string | undefined);
-const targetTabIndex = computed(() => {
-  let index = tabs.value.findIndex(
-    (t) => slugify(t.title).toLowerCase() === targetTab.value?.toLowerCase()
+  // Errors
+  tabs.push(
+    new AraTabsTabData({
+      label: StaticTabLabel.REPORT_ERRORS_TAB_LABEL,
+      component: ReportErrors
+    })
   );
-  return index === -1 ? 0 : index;
-});
-const router = useRouter();
 
-function handleTabChange(tabTitle: string) {
-  // change the URL in the browser adress bar without triggering vue-router navigation
-  history.pushState(
-    {},
-    "null",
-    router.resolve({
-      name: "report",
-      params: {
-        uniqueId,
-        tab: slugify(tabTitle)
-      }
-    }).fullPath
-  );
+  // Improvements
+  if (hasCompliantOrNotApplicableComments.value) {
+    tabs.push(
+      new AraTabsTabData({
+        label: StaticTabLabel.REPORT_IMPROVEMENTS_TAB_LABEL,
+        component: ReportImprovements
+      })
+    );
+  }
 
-  targetTab.value = slugify(tabTitle);
-}
+  return tabs;
+});
 
 const csvExportUrl = computed(() => `/api/reports/${uniqueId}/exports/csv`);
 
@@ -130,6 +118,46 @@ const siteUrl = computed(() => {
 
   return null;
 });
+
+/** Functions */
+async function copyReportUrl() {
+  const url =
+    window.location.origin +
+    router.resolve({ name: "report", params: { uniqueId } }).fullPath;
+
+  navigator.clipboard.writeText(url).then(() => {
+    showCopyAlert.value = true;
+  });
+}
+
+function hideReportAlert() {
+  showCopyAlert.value = false;
+}
+
+function onOnboardingClose() {
+  localStorage.setItem("confiture:seen-onboarding", "true");
+}
+
+/** Lifecycle hooks */
+
+/** Note: here useWrappedFetch uses onMounted callback */
+useWrappedFetch(() => report.fetchReport(uniqueId), false);
+
+/** Watchers */
+
+watch(
+  () => report.data,
+  (report) => {
+    if (report) {
+      if (
+        getAuditStatus(report) !== AuditStatus.IN_PROGRESS &&
+        localStorage.getItem("confiture:seen-onboarding") !== "true"
+      ) {
+        onboardingModalRef.value?.show();
+      }
+    }
+  }
+);
 </script>
 
 <template>
@@ -137,7 +165,7 @@ const siteUrl = computed(() => {
     v-if="
       report.data && getAuditStatus(report.data) === AuditStatus.IN_PROGRESS
     "
-    class="fr-pt-1w in-progress-alert"
+    class="fr-pt-1w"
   >
     <div class="fr-alert fr-alert--warning fr-mb-6w">
       <p class="fr-alert__title">Audit en cours</p>
@@ -257,39 +285,14 @@ const siteUrl = computed(() => {
       </p>
     </div>
 
-    <div class="fr-tabs">
-      <ul class="fr-tabs__list" role="tablist" aria-label="Sections du rapport">
-        <li v-for="(tab, i) in tabs" :key="tab.title" role="presentation">
-          <button
-            :id="`tabpanel-${slugify(tab.title)}`"
-            class="fr-tabs__tab"
-            tabindex="0"
-            role="tab"
-            :aria-selected="i === targetTabIndex"
-            :aria-controls="`tabpanel-${slugify(tab.title)}-panel`"
-          >
-            {{ tab.title }}
-            <span v-if="i === targetTabIndex" class="fr-sr-only"
-              >&nbsp;Actif</span
-            >
-          </button>
-        </li>
-      </ul>
-      <div
-        v-for="(tab, i) in tabs"
-        :id="`tabpanel-${slugify(tab.title)}-panel`"
-        :key="tab.title"
-        class="fr-tabs__panel"
-        :class="{ 'fr-tabs__panel--selected': i === targetTabIndex }"
-        role="tabpanel"
-        :aria-labelledby="`tabpanel-${slugify(tab.title)}`"
-        tabindex="0"
-        v-on="{ 'dsfr.disclose': () => handleTabChange(tab.title) }"
-      >
-        <ReportResults v-if="i === 0" @to-tab="handleTabChange" />
-        <component :is="tab.component" v-else />
-      </div>
-    </div>
+    <!-- sticky-top="-0.1px" to prevent "one line background flickering"
+			when scrolling the page -->
+    <AraTabs
+      :route="{ name: 'report-full', params: { uniqueId } }"
+      sticky-top="-0.1px"
+      :tabs="tabsData"
+    >
+    </AraTabs>
   </template>
 
   <TopLink />
@@ -312,11 +315,4 @@ const siteUrl = computed(() => {
 .dates {
   color: var(--text-mention-grey);
 }
-
-.in-progress-alert {
-  position: sticky;
-  top: 0;
-  background-color: var(--background-default-grey);
-  z-index: 3;
-}
 </style>
diff --git a/confiture-web-app/src/router.ts b/confiture-web-app/src/router.ts
index a75683dfa..1d93d02e7 100644
--- a/confiture-web-app/src/router.ts
+++ b/confiture-web-app/src/router.ts
@@ -1,5 +1,12 @@
-import { createRouter, createWebHistory } from "vue-router";
+import {
+  createRouter,
+  createWebHistory,
+  RouteLocationNormalized
+} from "vue-router";
 
+import AraTabsPanel from "./components/audit/AraTabsPanel.vue";
+import { useResizeObserver } from "./composables/useResizeObserver";
+import { FirstTab } from "./enums";
 import AccountDashboardPage from "./pages/account/AccountDashboardPage.vue";
 import AccountDeletionFeedback from "./pages/account/AccountDeletionFeedback.vue";
 import AccountSettingsPage from "./pages/account/AccountSettingsPage.vue";
@@ -28,6 +35,7 @@ import ReportPage from "./pages/report/ReportPage.vue";
 import RoadmapPage from "./pages/RoadmapPage.vue";
 import StatementPage from "./pages/StatementPage.vue";
 import { useAccountStore, useAuditStore } from "./store";
+import { ScrollPosition } from "./types";
 
 declare module "vue-router" {
   interface RouteMeta {
@@ -210,10 +218,27 @@ const router = createRouter({
     {
       path: "/audits/:uniqueId/generation",
       name: "audit-generation",
+      redirect: (to: any) => {
+        return {
+          name: "audit-generation-full",
+          params: {
+            uniqueId: to.params.uniqueId,
+            tabSlug: FirstTab.AUDIT_SLUG
+          }
+        };
+      },
       component: AuditGenerationPage,
+      children: [
+        {
+          path: ":tabSlug",
+          name: "audit-generation-full",
+          component: AraTabsPanel
+        }
+      ],
       meta: {
         name: "Mon audit"
-      }
+      },
+      props: true
     },
     {
       path: "/audits/:uniqueId/declaration",
@@ -242,22 +267,39 @@ const router = createRouter({
     },
     // Report pages
     {
-      path: "/rapport/:uniqueId/:tab?",
+      path: "/rapport/:uniqueId/",
       name: "report",
+      redirect: (to: any) => {
+        return {
+          name: "report-full",
+          params: {
+            uniqueId: to.params.uniqueId,
+            tabSlug: FirstTab.REPORT_SLUG
+          }
+        };
+      },
       component: ReportPage,
+      children: [
+        {
+          path: ":tabSlug",
+          name: "report-full",
+          component: AraTabsPanel
+        }
+      ],
       meta: {
         name: "Rapport d’audit",
         hideHomeLink: true
-      }
+      },
+      props: true
     },
     // TODO: remove this redirect in few months (17/04/2024)
-    {
-      path: "/rapports/:uniqueId/:tab?",
-      name: "report-old",
-      redirect: () => {
-        return { name: "report" };
-      }
-    },
+    // {
+    //   path: "/rapports/:uniqueId/:tabSlug?",
+    //   name: "report-old",
+    //   redirect: () => {
+    //     return { name: "report" };
+    //   }
+    // },
     // a11y statement
     {
       path: "/declaration/:uniqueId",
@@ -319,10 +361,36 @@ const router = createRouter({
     }
   ],
   history,
-  scrollBehavior(to) {
-    if (!to.hash) {
-      return { top: 0 };
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return scrollToSavedPosition(savedPosition);
     }
+
+    if (to.hash) {
+      return scrollToHash(to.hash);
+    }
+
+    // When navigating between tabs, scroll to display tabs
+    // at the top of the screen
+    if (isTabNavigation(to, from)) {
+      const tabs = document.querySelector(".tabs-wrapper") as HTMLElement;
+      if (!tabs) {
+        console.warn(
+          'When navigating between tabs with the "tabSlug" route parameter, \
+					there should be an Element with class "tabs-wrapper"'
+        );
+      } else {
+        const behavior = tabs.dataset.panelScrollBehavior;
+        if (behavior === "tabsTop") {
+          return scrollToTabPanelTop(tabs);
+        } else {
+          // behavior === "sameCriteria"
+          return scrollToElement(tabs);
+        }
+      }
+    }
+
+    return scrollToTop();
   }
 });
 
@@ -359,10 +427,120 @@ router.afterEach(async (to, from) => {
       }, 2000);
     }
 
-    document.body.setAttribute("tabindex", "-1");
-    document.body.focus();
-    document.body.removeAttribute("tabindex");
+    if (!to.hash && !isTabNavigation(to, from)) {
+      document.body.setAttribute("tabindex", "-1");
+      document.body.focus();
+      document.body.removeAttribute("tabindex");
+    }
   }
 });
 
+/** Functions */
+
+function isTabNavigation(
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized
+) {
+  return (
+    to.name === from.name &&
+    to.params.tabSlug !== undefined &&
+    to.params.tabSlug !== from.params.tabSlug
+  );
+}
+
+function scrollToTop() {
+  console.info(`⬆ scroll to top`);
+  return { top: 0 };
+}
+
+function scrollToHash(hash: string) {
+  console.info(`⇣ scroll to hash(${hash})`);
+  return new Promise((resolve) => {
+    const { stop } = useResizeObserver(document.body, () => {
+      const hashEl = document.querySelector(
+        "#" + CSS.escape(hash.substring(1))
+      ) as HTMLElement;
+      if (hashEl) {
+        // Force hash focus: usefull when hash element is not n the DOM on page load
+        hashEl.focus();
+        const scrollMargin = parseFloat(
+          window.getComputedStyle(hashEl).scrollMargin
+        );
+        resolve({ el: hashEl, top: scrollMargin });
+        stop();
+      }
+    });
+  }) as Promise<ScrollPosition>;
+}
+
+async function scrollToSavedPosition(savedPosition: ScrollPosition) {
+  const { left, top } = savedPosition;
+
+  return new Promise((resolve) => {
+    const { stop } = useResizeObserver(document.body, async () => {
+      const htmlEl = document.getElementsByTagName("html")[0];
+      if (htmlEl.scrollHeight > htmlEl.clientHeight) {
+        console.info(`⇣ scroll to savedPosition {left: ${left}, top: ${top}}`);
+        resolve(savedPosition);
+        stop();
+      }
+    });
+  }) as Promise<ScrollPosition>;
+}
+
+function scrollToTabPanelTop(tabs: HTMLElement) {
+  console.info(`⬆ scroll to tabs panel top`);
+
+  const panel = tabs.nextElementSibling as HTMLElement;
+  const tabComputedStyle = window.getComputedStyle(tabs);
+
+  const behavior =
+    tabs.getBoundingClientRect().top > 0 ? getScrollBehavior() : "instant";
+
+  return new Promise((resolve) => {
+    const { stop } = useResizeObserver(document.body, async (entries) => {
+      const scrollMargin =
+        parseFloat(tabComputedStyle.top) + parseFloat(tabComputedStyle.height);
+      if (entries[0].target.clientHeight >= scrollMargin + screen.height) {
+        const scrollPosition = {
+          el: panel,
+          top: scrollMargin,
+          behavior
+        };
+        resolve(scrollPosition);
+        stop();
+      }
+    });
+  }) as Promise<ScrollPosition>;
+}
+
+/**
+ * @todo TODO: scroll to a smart position (same criteria as previous tabSlug?)
+ */
+async function scrollToElement(el: HTMLElement) {
+  console.info(`⇣ scroll to element ${el.className || el.id}`);
+
+  return new Promise((resolve) => {
+    const { stop } = useResizeObserver(document.body, async (entries) => {
+      const scrollMargin = parseFloat(window.getComputedStyle(el).top);
+      if (entries[0].target.clientHeight >= scrollMargin + screen.height) {
+        const scrollPosition = {
+          el,
+          top: scrollMargin,
+          behavior: getScrollBehavior()
+        };
+        resolve(scrollPosition);
+        stop();
+      }
+    });
+  }) as Promise<ScrollPosition>;
+}
+
+function getScrollBehavior(): ScrollBehavior {
+  // Use smooth scrolling only if user does not dislike animations
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ? "instant"
+    : "smooth";
+}
+
 export default router;
diff --git a/confiture-web-app/src/styles/filters.css b/confiture-web-app/src/styles/filters.css
new file mode 100644
index 000000000..d57a7ed89
--- /dev/null
+++ b/confiture-web-app/src/styles/filters.css
@@ -0,0 +1,16 @@
+.filters-wrapper {
+  position: sticky;
+  top: var(--filters-top-offset, 0);
+  max-height: calc(100vh - var(--filters-top-offset, 0));
+  max-height: calc(100dvh - var(--filters-top-offset, 0));
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+@media (width < 48rem) {
+  .filters-wrapper {
+    position: static;
+    max-height: none;
+    overflow-y: initial;
+  }
+}
diff --git a/confiture-web-app/src/types/types.ts b/confiture-web-app/src/types/types.ts
index 3601ce9d2..faeb9d00d 100644
--- a/confiture-web-app/src/types/types.ts
+++ b/confiture-web-app/src/types/types.ts
@@ -118,3 +118,35 @@ export enum StoreName {
   AUDIT_STORE = "AUDIT_STORE",
   RESULTS_STORE = "RESULTS_STORE"
 }
+
+// Routing
+export declare type ScrollPosition =
+  | ScrollPositionCoordinates
+  | ScrollPositionElement;
+
+/**
+ * Scroll position similar to
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions | `ScrollToOptions`}.
+ * Note that not all browsers support `behavior`.
+ */
+declare type ScrollPositionCoordinates = {
+  behavior?: ScrollOptions["behavior"];
+  left?: number;
+  top?: number;
+};
+
+declare interface ScrollPositionElement extends ScrollToOptions {
+  /**
+   * A valid CSS selector. Note some characters must be escaped in id selectors (https://mathiasbynens.be/notes/css-escapes).
+   * @example
+   * Here are a few examples:
+   *
+   * - `.title`
+   * - `.content:first-child`
+   * - `#marker`
+   * - `#marker\~with\~symbols`
+   * - `#marker.with.dot`: selects `class="with dot" id="marker"`, not `id="marker.with.dot"`
+   *
+   */
+  el: string | Element;
+}