diff --git a/package-lock.json b/package-lock.json
index 58a72b8c1..47714b839 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "ecospheres-front",
       "version": "0.3.0",
       "dependencies": {
+        "@etalab/data.gouv.fr-components": "^1.6.0",
         "@gouvminint/vue-dsfr": "^3.6.0",
         "@vueform/multiselect": "^2.6.2",
         "axios": "^1.6.2",
@@ -583,6 +584,15 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@etalab/data.gouv.fr-components": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@etalab/data.gouv.fr-components/-/data.gouv.fr-components-1.6.0.tgz",
+      "integrity": "sha512-PKFpoS4rdWbQos8AACag1ky7+PDxhdi5lscwdoqS0de87FO07gltpqpmaSaYmo0vq63l2kqUUJ+msaBzb9/NxQ==",
+      "dependencies": {
+        "@gouvfr/dsfr": "~1.9.2",
+        "vue": "^3.3.8"
+      }
+    },
     "node_modules/@gouvfr/dsfr": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.9.4.tgz",
diff --git a/package.json b/package.json
index 5f5377df4..0d2e0d09c 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@etalab/data.gouv.fr-components": "^1.6.0",
     "@gouvminint/vue-dsfr": "^3.6.0",
     "@vueform/multiselect": "^2.6.2",
     "axios": "^1.6.2",
diff --git a/src/main.js b/src/main.js
index c7f95ab03..e9e02e07d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,7 @@
+import { setupI18n } from '@etalab/data.gouv.fr-components'
+import '@etalab/data.gouv.fr-components/dist/style.css'
 import '@gouvfr/dsfr/dist/dsfr.min.css'
+import '@gouvfr/dsfr/dist/utility/utility.min.css'
 import VueDsfr from '@gouvminint/vue-dsfr'
 // Import des styles du DSFR
 import '@gouvminint/vue-dsfr/styles'
@@ -19,10 +22,12 @@ import router from './router'
 
 const app = createApp(App)
 const pinia = createPinia()
+const i18n = setupI18n()
 
 app.use(router)
 app.use(VueDsfr, { icons: Object.values(icons) })
 app.use(pinia)
+app.use(i18n)
 
 app.use(TextClamp)
 app.use(LoadingPlugin)
diff --git a/src/views/datasets/DatasetDetailView.vue b/src/views/datasets/DatasetDetailView.vue
index b6908fb0c..bafaabaf5 100644
--- a/src/views/datasets/DatasetDetailView.vue
+++ b/src/views/datasets/DatasetDetailView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { ResourceAccordion } from '@etalab/data.gouv.fr-components'
 import { filesize } from 'filesize'
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
@@ -146,11 +147,13 @@ watchEffect(async () => {
         tab-id="tab-0"
         :selected="selectedTabIndex === 0"
       >
-        <DsfrFileDownloadList
-          class="fr-mt-4w"
-          :files="files"
-          title="Fichiers du jeu de données"
-        />
+        <div class="datagouv-components" v-if="selectedTabIndex === 0">
+          <ResourceAccordion
+            v-for="resource in dataset.resources"
+            :datasetId="datasetId"
+            :resource="resource"
+          />
+        </div>
       </DsfrTabContent>
 
       <!-- Réutilisations -->
diff --git a/vite.config.ts b/vite.config.ts
index b1ff9adda..0eb679710 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -37,7 +37,8 @@ export default defineConfig(({ mode }) => {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
         '@root': resolve(__dirname, './'),
-        '@siteConfig': fileURLToPath(new URL(configDir, import.meta.url))
+        '@siteConfig': fileURLToPath(new URL(configDir, import.meta.url)),
+        vue: 'vue/dist/vue.esm-bundler.js'
       }
     },
     test: {