diff --git a/components/BrandedButton/EditButton.vue b/components/BrandedButton/EditButton.vue
index de8f6d1c..768ee22e 100644
--- a/components/BrandedButton/EditButton.vue
+++ b/components/BrandedButton/EditButton.vue
@@ -14,7 +14,7 @@ import { BrandedButton } from '@datagouv/components-next'
 import { RiEdit2Line } from '@remixicon/vue'
 
 const props = defineProps<{
-  type: 'organizations' | 'posts'
+  type: 'organizations' | 'posts' | 'reuses'
   id: string
 }>()
 
@@ -26,6 +26,7 @@ const link = computed(() => {
     case 'organizations':
       return `${base}profile`
     case 'posts':
+    case 'reuses':
       return base
     default:
       return throwOnNever(props.type as never, t('No other type defined'))
diff --git a/components/Breadcrumb/Breadcrumb.vue b/components/Breadcrumb/Breadcrumb.vue
index d18ccb63..994f9797 100644
--- a/components/Breadcrumb/Breadcrumb.vue
+++ b/components/Breadcrumb/Breadcrumb.vue
@@ -2,7 +2,7 @@
   <nav
     rol="navigation"
     :aria-label="$t(`You're here:`)"
-    class="fr-breadcrumb !mb-5"
+    class="fr-breadcrumb mb-5"
   >
     <ol class="fr-breadcrumb__list">
       <slot />
diff --git a/components/Datasets/DatasetsMetrics.vue b/components/Datasets/DatasetsMetrics.vue
index 8fc73f3a..05b6d727 100644
--- a/components/Datasets/DatasetsMetrics.vue
+++ b/components/Datasets/DatasetsMetrics.vue
@@ -82,7 +82,7 @@
 <script setup lang="ts">
 import { BrandedButton } from '@datagouv/components-next'
 import { StatBox, type Organization } from '@datagouv/components-next'
-import { RiDownloadLine, RiTestTubeLine } from '@remixicon/vue'
+import { RiDownloadLine } from '@remixicon/vue'
 
 const props = defineProps<{
   organization: Organization
diff --git a/components/Divider.vue b/components/Divider.vue
index 1d9dc788..043bcf35 100644
--- a/components/Divider.vue
+++ b/components/Divider.vue
@@ -4,10 +4,21 @@
       class="absolute inset-0 flex items-center"
       aria-hidden="true"
     >
-      <div class="w-full border-t border-gray-300" />
+      <div
+        class="w-full border-t"
+        :class="color"
+      />
     </div>
     <div class="relative flex justify-center">
       <span class="bg-white px-3 text-sm text-mention-grey"><slot /></span>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  color?: string
+}>(), {
+  color: 'border-gray-300',
+})
+</script>
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
new file mode 100644
index 00000000..2640a0e9
--- /dev/null
+++ b/components/FollowButton.vue
@@ -0,0 +1,59 @@
+<template>
+  <button
+    type="button"
+    class="fr-btn fr-btn--sm fr-btn--secondary fr-btn--secondary-grey-500 follow-button"
+    :disabled="readOnlyEnabled"
+    @click.prevent="toggleFollow"
+  >
+    <span>
+      <RiStarFill
+        v-if="following"
+        :class="{ 'animate-ping': animating }"
+        class="size-4"
+      />
+      <RiStarLine
+        v-else
+        :class="{ 'animate-ping': animating }"
+        class="size-4"
+      />
+    </span>
+    <span class="fr-ml-1w">
+      <template v-if="following">{{ $t("Remove from favourites") }}</template>
+      <template v-else>{{ $t("Add to favourites") }}</template>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { RiStarFill, RiStarLine } from '@remixicon/vue'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  url: string
+  following?: boolean
+}>()
+
+const config = useRuntimeConfig()
+const { $api } = useNuxtApp()
+
+const animating = ref(false)
+const following = ref(props.following)
+const readOnlyEnabled = config.public.readOnlyMode
+
+async function toggleFollow() {
+  const me = useMaybeMe()
+  if (!me.value) {
+    const localePath = useLocalePath()
+    return navigateTo(localePath('/login'), { external: true })
+  }
+
+  await $api(props.url, {
+    method: following.value ? 'DELETE' : 'POST',
+  })
+  following.value = !following.value
+  if (following.value) {
+    animating.value = true
+    setTimeout(() => (animating.value = false), 1300)
+  }
+}
+</script>
diff --git a/components/Organization/ListPage.vue b/components/Organization/ListPage.vue
index 94057319..16ccc225 100644
--- a/components/Organization/ListPage.vue
+++ b/components/Organization/ListPage.vue
@@ -127,11 +127,7 @@ const qDebounced = debouncedRef(q, config.public.searchAutocompleteDebounce)
 const sort = ref(props.sort ?? '')
 const sortParam = computed(() => sort.value ? sort.value : undefined)
 
-watch([sort, qDebounced], async ([_newSort, newQ], [_oldSort, oldQ]) => {
-  if (newQ !== oldQ) {
-    sort.value = ''
-  }
-
+watch([sort, qDebounced], async ([_newSort, newQ]) => {
   emit('change', newQ, sortParam.value, 1)
 
   document.children[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
diff --git a/components/Reuses/ListPage.vue b/components/Reuses/ListPage.vue
new file mode 100644
index 00000000..7cffe4fe
--- /dev/null
+++ b/components/Reuses/ListPage.vue
@@ -0,0 +1,178 @@
+<template>
+  <h1 class="!mb-2">
+    {{ $t('Reuses') }}
+  </h1>
+  <label
+    :for="inputId"
+    class="block mb-3"
+  >
+    {{ $t('Search among {count} reuses on {site}', {
+      count: totalReuses,
+      site: config.public.title,
+    }) }}
+  </label>
+  <div class="w-full flex mb-5">
+    <input
+      :id="inputId"
+      v-model.trim="q"
+      class="flex-1 px-4 py-2 bg-gray-lower rounded-tl-sm shadow-input-blue"
+      type="search"
+      :placeholder="$t('Search...')"
+    >
+    <BrandedButton
+      class="rounded-none rounded-tr"
+      :icon="RiSearch2Line"
+      size="lg"
+    >
+      {{ $t('Search') }}
+    </BrandedButton>
+  </div>
+  <div class="fr-grid-row fr-mb-1v fr-displayed-lg">
+    <ul class="fr-tags-group">
+      <li>
+        <button
+          type="button"
+          class="fr-tag"
+          :aria-pressed="!topic"
+          @click="topic = undefined"
+        >
+          {{ $t('All') }}
+        </button>
+      </li>
+      <li
+        v-for="currentTopic in topics"
+        :key="currentTopic.id"
+      >
+        <button
+          class="fr-tag"
+          :aria-pressed="currentTopic.id === topic"
+          @click="topic = currentTopic.id"
+        >
+          {{ currentTopic.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
+  <div class="flex justify-between items-center mb-6">
+    <p class="mb-0">
+      {{ $t('{count} results', { count: reuses.total }) }}
+    </p>
+    <div class="flex items-center gap-1">
+      <label
+        :for="selectId"
+        class="flex-none text-sm"
+      >{{ $t('Sort by:') }}</label>
+      <select
+        :id="selectId"
+        v-model="sort"
+        class="fr-select !shadow-input-blue"
+      >
+        <option value="">
+          {{ $t('Relevance') }}
+        </option>
+        <option value="-created">
+          {{ $t('Newest') }}
+        </option>
+        <option value="created">
+          {{ $t('Oldest') }}
+        </option>
+        <option value="-followers">
+          {{ $t('Followers') }}
+        </option>
+        <option value="-reuses">
+          {{ $t('Reuses') }}
+        </option>
+      </select>
+    </div>
+  </div>
+  <LoadingBlock :status>
+    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3 mb-16">
+      <ReuseCard
+        v-for="reuse in reuses.data"
+        :key="reuse.id"
+        class="col-span-1"
+        :reuse
+      />
+    </div>
+  </LoadingBlock>
+  <Pagination
+    :page="reuses.page"
+    :page-size="reuses.page_size"
+    :total-results="reuses.total"
+    :link="link"
+    @change="(p: number) => $emit('change', q, topic, sortParam, p)"
+  />
+</template>
+
+<script setup lang="ts">
+import { BrandedButton, Pagination } from '@datagouv/components-next'
+import type { Reuse, ReuseTopic } from '@datagouv/components-next'
+import { RiSearch2Line } from '@remixicon/vue'
+import { debouncedRef } from '@vueuse/core'
+import ReuseCard from '~/components/Reuses/ReuseCard.vue'
+import type { PaginatedArray, RequestStatus } from '~/types/types'
+
+const props = defineProps<{
+  /**
+   * Customize the links used
+   */
+  link?: (page: number) => string
+
+  /**
+   * List of reuses to show
+   */
+  reuses: PaginatedArray<Reuse>
+
+  /**
+   * The starting q
+   */
+  q: string
+
+  /**
+   * The starting sort
+   */
+  sort: string | undefined
+
+  /**
+   * The API request status
+   */
+  status: RequestStatus
+
+  /**
+   * The starting sort
+   */
+  topic: string | undefined
+
+  /**
+   * Reuse topics from API
+   */
+  topics: Array<ReuseTopic>
+
+  /**
+   * Number of reuses for this site or organization
+   */
+  totalReuses: number
+}>()
+
+const emit = defineEmits<{
+  change: [q: string, topic: string | undefined, sort: string | undefined, page: number]
+}>()
+
+const config = useRuntimeConfig()
+
+const inputId = useId()
+const selectId = useId()
+
+const q = ref(props.q ?? '')
+
+const qDebounced = debouncedRef(q, config.public.searchAutocompleteDebounce)
+const sort = ref(props.sort ?? '')
+const sortParam = computed(() => sort.value ? sort.value : undefined)
+const topic = ref(props.topic)
+
+watch([sort, topic, qDebounced], async ([_newSort, newTopic, newQ]) => {
+  emit('change', newQ, newTopic, sortParam.value, 1)
+
+  document.children[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
+})
+</script>
diff --git a/datagouv-components/assets/main.css b/datagouv-components/assets/main.css
index 00c0e720..dd9f15f0 100644
--- a/datagouv-components/assets/main.css
+++ b/datagouv-components/assets/main.css
@@ -22,6 +22,7 @@
   --color-mention-grey: #666; /* Copy from --text-mention-grey */
   --color-gray-title: #161616;
   --color-gray-medium: #666666;
+  --color-gray-low: #929292;
   --color-gray-lower-hover: #d2d2d2;
   --color-gray-lower-active: #c1c1c1;
   --color-gray-lower: #eeeeee;
@@ -102,3 +103,34 @@
     border-color: var(--color-gray-200, currentColor);
   }
 }
+
+@layer components {
+  meter.quality-score {
+    background: none;
+    border: 1px solid var(--color-gray-default);
+    border-radius: 8px;
+    height: 10px;
+    vertical-align: baseline;
+  }
+  meter.quality-score::-webkit-meter-bar {
+    height: 10px;
+    background: whiteSmoke;
+    border-radius: 8px;
+  }
+  meter.quality-score::-moz-meter-bar {
+    background: whiteSmoke;
+    border-radius: 8px;
+  }
+  meter.quality-score::-webkit-meter-suboptimum-value {
+    background-color: var(--color-gray-low);
+  }
+  meter.quality-score:-moz-meter-sub-optimum::-moz-meter-bar {
+    background-color: var(--color-gray-low);
+  }
+  meter.quality-score::-webkit-meter-optimum-value {
+    background-color: #27A658;
+  }
+  meter.quality-score:-moz-meter-optimum::-moz-meter-bar {
+    background-color: #27A658;
+  }
+}
diff --git a/datagouv-components/src/components/DatasetCard.vue b/datagouv-components/src/components/DatasetCard.vue
index a655f702..b83b99a0 100644
--- a/datagouv-components/src/components/DatasetCard.vue
+++ b/datagouv-components/src/components/DatasetCard.vue
@@ -48,7 +48,7 @@
         </div>
       </div>
       <div class="fr-col-12 fr-col-sm">
-        <h4 class="fr-text--md fr-mb-0 fr-grid-row">
+        <h4 class="fr-text--md mb-0 fr-grid-row">
           <slot
             name="datasetUrl"
             :dataset="dataset"
@@ -76,13 +76,13 @@
         </h4>
         <div
           v-if="dataset.organization || dataset.owner"
-          class="fr-text--sm fr-m-0 flex"
+          class="text-sm m-0 flex truncate"
         >
           <template v-if="dataset.organization">
-            <div class="fr-mr-1v">
+            <div class="-mr-1 flex-initial">
               <AppLink
                 v-if="organizationUrl"
-                class="fr-link fr-text--sm flex items-center relative z-20"
+                class="link text-sm flex items-center relative z-[2]"
                 :to="organizationUrl"
               >
                 <OrganizationNameWithCertificate :organization="dataset.organization" />
@@ -95,7 +95,7 @@
           </template>
           <div
             v-else
-            class="fr-mr-1v truncate"
+            class="mr-1 truncate"
           >
             {{ ownerName }}
           </div>
diff --git a/datagouv-components/src/components/OrganizationNameWithCertificate.vue b/datagouv-components/src/components/OrganizationNameWithCertificate.vue
index 209e55dd..821527de 100644
--- a/datagouv-components/src/components/OrganizationNameWithCertificate.vue
+++ b/datagouv-components/src/components/OrganizationNameWithCertificate.vue
@@ -5,7 +5,7 @@
       :type="getOrganizationType(organization)"
     />
     <div
-      class="mb-0 truncate"
+      class="mb-0 truncate flex-initial"
       :class="{ 'text-sm': size === 'sm' }"
     >
       {{ organization.name }}
diff --git a/datagouv-components/src/components/OwnerTypeIcon.vue b/datagouv-components/src/components/OwnerTypeIcon.vue
index 35583e32..51aad7e3 100644
--- a/datagouv-components/src/components/OwnerTypeIcon.vue
+++ b/datagouv-components/src/components/OwnerTypeIcon.vue
@@ -2,7 +2,7 @@
   <component
     :is="icon"
     v-if="icon"
-    class="size-3.5"
+    class="size-3.5 flex-none"
   />
 </template>
 
diff --git a/datagouv-components/src/components/ReuseCard.vue b/datagouv-components/src/components/ReuseCard.vue
index 5c6633ef..4bd1001e 100644
--- a/datagouv-components/src/components/ReuseCard.vue
+++ b/datagouv-components/src/components/ReuseCard.vue
@@ -14,7 +14,7 @@
           <p class="text-sm mb-0 flex items-center">
             <span
               v-if="reuse.organization"
-              class="relative block truncate z-[2] flex-1"
+              class="relative block truncate break-all z-[2] flex-initial"
             >
               <AppLink
                 v-if="organizationUrl"
@@ -34,36 +34,10 @@
               v-else-if="ownerName"
               class="mr-1 truncate"
             >{{ ownerName }}</span>
-            <RiSubtractLine class="size-4 fill-gray-medium" />
-            <span>{{ t('published {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
+            <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
+            <span class="block flex-none">{{ t('published {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
           </p>
-          <div class="flex flex-wrap items-center gap-0.5">
-            <p class="text-sm mb-0">
-              {{ reuseType }}
-            </p>
-            <RiSubtractLine
-              aria-hidden="true"
-              class="size-4 fill-gray-medium"
-            />
-            <p
-              class="text-sm mb-0 flex items-center gap-0.5"
-              :aria-label="t('{n} views', reuse.metrics.views)"
-            >
-              <RiEyeLine
-                aria-hidden="true"
-                class="size-3.5"
-              />{{ summarize(reuse.metrics.views) }}
-            </p>
-            <p
-              class="text-sm mb-0 flex items-center gap-0.5"
-              :aria-label="t('{n} followers', reuse.metrics.followers)"
-            >
-              <RiStarLine
-                aria-hidden="true"
-                class="size-3.5"
-              />{{ summarize(reuse.metrics.followers) }}
-            </p>
-          </div>
+          <ReuseDetails :reuse />
         </div>
       </div>
     </div>
@@ -99,17 +73,16 @@
 </template>
 
 <script setup lang="ts">
-import { RiEyeLine, RiLockLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
+import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
-import useReuseType from '../composables/useReuseType'
 import { formatRelativeIfRecentDate } from '../functions/dates'
-import { summarize } from '../functions/helpers'
 import { getOwnerName } from '../functions/owned'
 import type { Reuse } from '../types/reuses'
 import AppLink from './AppLink.vue'
 import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
+import ReuseDetails from './ReuseDetails.vue'
 
 const props = defineProps<{
   reuse: Reuse
@@ -130,5 +103,4 @@ const props = defineProps<{
 const { t } = useI18n()
 
 const ownerName = computed(() => getOwnerName(props.reuse))
-const { label: reuseType } = useReuseType(() => props.reuse.type)
 </script>
diff --git a/datagouv-components/src/components/ReuseDetails.vue b/datagouv-components/src/components/ReuseDetails.vue
new file mode 100644
index 00000000..1db8266d
--- /dev/null
+++ b/datagouv-components/src/components/ReuseDetails.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-wrap items-center gap-0.5">
+    <p class="text-sm mb-0">
+      {{ reuseType }}
+    </p>
+    <RiSubtractLine
+      aria-hidden="true"
+      class="size-4 fill-gray-medium"
+    />
+    <p
+      class="text-sm mb-0 flex items-center gap-0.5"
+      :aria-label="t('{n} views', reuse.metrics.views)"
+    >
+      <RiEyeLine
+        aria-hidden="true"
+        class="size-3.5"
+      />{{ summarize(reuse.metrics.views) }}
+    </p>
+    <p
+      class="text-sm mb-0 flex items-center gap-0.5"
+      :aria-label="t('{n} followers', reuse.metrics.followers)"
+    >
+      <RiStarLine
+        aria-hidden="true"
+        class="size-3.5"
+      />{{ summarize(reuse.metrics.followers) }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiEyeLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
+import { useI18n } from 'vue-i18n'
+import { useReuseType } from '../composables/useReuseType'
+import { summarize } from '../functions/helpers'
+import type { Reuse } from '../types/reuses'
+
+const props = defineProps<{
+  reuse: Reuse
+}>()
+
+const { t } = useI18n()
+
+const { label: reuseType } = useReuseType(() => props.reuse.type)
+</script>
diff --git a/datagouv-components/src/composables/useReuseType.ts b/datagouv-components/src/composables/useReuseType.ts
index a0891e7d..4275810d 100644
--- a/datagouv-components/src/composables/useReuseType.ts
+++ b/datagouv-components/src/composables/useReuseType.ts
@@ -2,7 +2,7 @@ import { computedAsync } from '@vueuse/core'
 import { toValue, type MaybeRefOrGetter } from 'vue'
 import { fetchReuseTypes, getType } from '../functions/reuses'
 
-export default function useReuseType(id: MaybeRefOrGetter<string>) {
+export function useReuseType(id: MaybeRefOrGetter<string>) {
   const label = computedAsync(async () => {
     const idValue = toValue(id)
     const types = await fetchReuseTypes()
diff --git a/datagouv-components/src/functions/reuses.ts b/datagouv-components/src/functions/reuses.ts
index 3f04ce1a..22481acd 100644
--- a/datagouv-components/src/functions/reuses.ts
+++ b/datagouv-components/src/functions/reuses.ts
@@ -1,21 +1,28 @@
 import { ofetch } from 'ofetch'
+import { useI18n } from 'vue-i18n'
 import { useComponentsConfig } from '../config'
-import type { ReuseType } from '../types/reuses'
+import type { ReuseTopic, ReuseType } from '../types/reuses'
 
-let reuseTypesRequest: Array<ReuseType> | null = null
+let reuseTypesRequest: Promise<Array<ReuseType>> | null = null
 
 export async function fetchReuseTypes() {
-  if (reuseTypesRequest) {
-    return reuseTypesRequest
+  if (!reuseTypesRequest) {
+    const config = useComponentsConfig()
+    const { locale } = useI18n()
+    reuseTypesRequest = ofetch<Array<ReuseType>>('api/1/reuses/types/', {
+      baseURL: config.apiBase,
+      query: { lang: locale.value },
+    })
   }
-  const config = useComponentsConfig()
-  reuseTypesRequest = await ofetch<Array<ReuseType>>('api/1/reuses/types/', {
-    baseURL: config.apiBase,
-  })
-  return reuseTypesRequest
+  return await reuseTypesRequest
 }
 
 export function getType(types: Array<ReuseType>, id: string): string {
   const type = types.find(t => t.id === id)
   return type ? type.label : ''
 }
+
+export function getTopic(topics: Array<ReuseTopic>, id: string): string {
+  const topic = topics.find(t => t.id === id)
+  return topic ? topic.label : ''
+}
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 619e16b6..ac85674e 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -8,7 +8,7 @@ import type { Harvest } from './types/harvest'
 import type { License } from './types/licenses'
 import type { Member, MemberRole, NewOrganization, Organization } from './types/organizations'
 import type { Owned, OwnedWithId } from './types/owned'
-import type { NewReuse, Reuse, ReuseType } from './types/reuses'
+import type { NewReuse, Reuse, ReuseTopic, ReuseType } from './types/reuses'
 import type { TopicV2 } from './types/topics'
 import type { CommunityResource, FileResourceFileType, RemoteResourceFileType, ResourceFileType, ResourceType, Resource } from './types/resources'
 import type { Site } from './types/site'
@@ -43,6 +43,8 @@ import StatBox from './components/StatBox.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
+export * from './composables/useReuseType'
+
 export * from './functions/dates'
 export * from './functions/organizations'
 export * from './functions/resources'
@@ -85,6 +87,7 @@ export type {
   ResourceFileType,
   ResourceType,
   Reuse,
+  ReuseTopic,
   ReuseType,
   Site,
   TopicV2,
diff --git a/datagouv-components/src/types/reuses.ts b/datagouv-components/src/types/reuses.ts
index 41bac645..86398e13 100644
--- a/datagouv-components/src/types/reuses.ts
+++ b/datagouv-components/src/types/reuses.ts
@@ -1,44 +1,49 @@
-import type { Owned, OwnedWithId } from "./owned";
-import type { Dataset } from "./datasets";
-import { Badges } from "./badges";
+import type { Owned, OwnedWithId } from './owned'
+import type { Dataset } from './datasets'
+import type { Badges } from './badges'
 
 export type BaseReuse = Owned & {
-  title: string;
-  description: string;
-  tags: Array<string> | null;
-  datasets: Array<Dataset | string>;
-  topic: string;
-  type: string;
-  url: string;
-  private: boolean;
-};
+  title: string
+  description: string
+  tags: Array<string> | null
+  datasets: Array<Dataset | string>
+  topic: string
+  type: string
+  url: string
+  private: boolean
+}
 
-export type NewReuse = Omit<BaseReuse, keyof OwnedWithId> & OwnedWithId;
+export type NewReuse = Omit<BaseReuse, keyof OwnedWithId> & OwnedWithId
 
 export type Reuse = BaseReuse & {
-  badges: Badges;
-  created_at: string;
-  datasets: Array<Dataset>;
-  archived: string | null;
-  deleted: string | null;
-  extras: Record<string, any>;
-  featured: boolean;
-  id: string;
-  image: string | null;
-  image_thumbnail: string | null;
-  last_modified: string;
+  badges: Badges
+  created_at: string
+  datasets: Array<Dataset>
+  archived: string | null
+  deleted: string | null
+  extras: Record<string, any>
+  featured: boolean
+  id: string
+  image: string | null
+  image_thumbnail: string | null
+  last_modified: string
   metrics: {
-    datasets: number;
-    discussions: number;
-    followers: number;
-    views: number;
-  };
-  slug: string;
-  page: string;
-  uri: string;
-};
+    datasets: number
+    discussions: number
+    followers: number
+    views: number
+  }
+  slug: string
+  page: string
+  uri: string
+}
 
 export type ReuseType = {
-  id: string,
-  label: string,
-};
+  id: string
+  label: string
+}
+
+export type ReuseTopic = {
+  id: string
+  label: string
+}
diff --git a/i18n/locales/en-US.json b/i18n/locales/en-US.json
index c1353042..32193bf4 100644
--- a/i18n/locales/en-US.json
+++ b/i18n/locales/en-US.json
@@ -1040,5 +1040,14 @@
   "No results": "No results",
   "Error 404": "Error 404",
   "The page you're looking for cannot be found.": "The page you're looking for cannot be found.",
-  "Support": "Support"
+  "Search among {count} reuses on {site}": "Search among {count} reuses on {site}",
+  "All": "All",
+  "Support": "Support",
+  "{n}%": "{n}%",
+  "{n} associated datasets": "no associated datasets | {n} associated dataset | {n} associated datasets",
+  "{n} reuses from the same creator": "{n} reuses from the same creator | {n} reuse from the same creator | {n} reuses from the same creator",
+  "Download the statistics as CSV": "Download the statistics as CSV",
+  "Topic": "Topic",
+  "No tags set": "No tags set",
+  "There are no other reuses from this creator.": "There are no other reuses from this creator."
 }
diff --git a/i18n/locales/es-ES.json b/i18n/locales/es-ES.json
index ef41c10d..16ec3f1d 100644
--- a/i18n/locales/es-ES.json
+++ b/i18n/locales/es-ES.json
@@ -1039,5 +1039,14 @@
   "No results": "No results",
   "Error 404": "Error 404",
   "The page you're looking for cannot be found.": "The page you're looking for cannot be found.",
-  "Support": "Support"
+  "Search among {count} reuses on {site}": "Search among {count} reuses on {site}",
+  "All": "All",
+  "Support": "Support",
+  "{n}%": "{n}%",
+  "{n} associated datasets": "no associated datasets | {n} associated dataset | {n} associated datasets",
+  "{n} reuses from the same creator": "{n} reuses from the same creator | {n} reuse from the same creator | {n} reuses from the same creator",
+  "Download the statistics as CSV": "Download the statistics as CSV",
+  "Topic": "Topic",
+  "No tags set": "No tags set",
+  "There are no other reuses from this creator.": "There are no other reuses from this creator."
 }
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index e294919f..105503c6 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -1067,5 +1067,13 @@
   "Filter by status": "Filtrer par statut",
   "No results": "Pas de résultats",
   "Support": "Support",
-  "Search among {count} dataservices on {site}": "Rechercher parmi les {count} API sur {site}"
+  "Search among {count} reuses on {site}": "Rechercher parmi les {count} réutilisations sur {site}",
+  "All": "Tout",
+  "{n}%": "{n}%",
+  "{n} associated datasets": "aucun jeu de données associé | {n} jeu de données associé | {n} jeux de données associés",
+  "{n} reuses from the same creator": "{n} réutilisations du même créateur | {n} réutilisation du même créateur | {n} réutilisations du même créateur",
+  "Download the statistics as CSV": "Télécharger les statistiques au format CSV",
+  "Topic": "Thématique",
+  "No tags set": "Aucun mot clé",
+  "There are no other reuses from this creator.": "Il n'y a pas d'autres réutilisations du même créateur."
 }
diff --git a/pages/reuses/[rid].vue b/pages/reuses/[rid].vue
new file mode 100644
index 00000000..a7e5fed1
--- /dev/null
+++ b/pages/reuses/[rid].vue
@@ -0,0 +1,161 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div>
+    <div class="container">
+      <div
+        v-if="reuse"
+        class="flex flex-wrap items-center justify-between"
+      >
+        <Breadcrumb>
+          <BreadcrumbItem
+            to="/"
+            :external="true"
+          >
+            {{ $t('Home') }}
+          </BreadcrumbItem>
+          <BreadcrumbItem to="/reuses">
+            {{ $t('Reuses') }}
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            {{ reuse.title }}
+          </BreadcrumbItem>
+        </Breadcrumb>
+        <div class="flex flex-wrap gap-2.5 md:max-w-6/12">
+          <LoadingBlock :status="followStatus">
+            <FollowButton
+              v-if="reuse"
+              :following="follower.total > 0"
+              :url="`api/1/reuses/${reuse.id}/followers/`"
+            />
+          </LoadingBlock>
+          <BrandedButton
+            :href="reuse.url"
+            :new-tab="true"
+            size="xs"
+          >
+            {{ $t('See the reuse') }}
+          </BrandedButton>
+          <EditButton
+            v-if="isAdmin(me)"
+            :id="reuse.id"
+            type="reuses"
+          />
+        </div>
+      </div>
+    </div>
+    <LoadingBlock
+      v-if="reuse"
+      :status
+    >
+      <div class="container pt-10 min-h-32">
+        <div class="flex flex-wrap">
+          <div class="w-full md:w-5/12 flex flex-col justify-center">
+            <p
+              v-if="reuse.deleted"
+              class="fr-badge mb-2 flex gap-1 items-center"
+            >
+              <RiDeleteBinLine class="size-3.5" />
+              {{ $t('Deleted') }}
+            </p>
+            <div
+              v-if="reuse.organization"
+              class="flex gap-2 items-center"
+            >
+              <Placeholder
+                :src="reuse.organization.logo_thumbnail"
+                type="organization"
+                alt=""
+                :size="32"
+                class="bg-white p-1 rounded-xs border border-gray-default object-contain"
+              />
+              <NuxtLinkLocale
+                class="link block"
+                :to="`/organizations/${reuse.organization.slug}/`"
+              >
+                <OrganizationNameWithCertificate
+                  :organization="reuse.organization"
+                />
+              </NuxtLinkLocale>
+            </div>
+            <h1 class="!text-2xl !font-extrabold !mb-1">
+              {{ reuse.title }}
+            </h1>
+            <ReuseDetails
+              :reuse
+              class="mt-1 mb-0"
+            />
+            <div class="mt-6">
+              <BrandedButton
+                size="xs"
+                :href="reuse.url"
+                :new-tab="true"
+              >
+                {{ $t('See reuse') }}
+              </BrandedButton>
+            </div>
+          </div>
+          <div class="w-7/12">
+            <NuxtImg
+              class="w-full object-contain max-h-[400px]"
+              :src="reuse.image ?? undefined"
+            />
+          </div>
+        </div>
+        <Divider
+          class="my-5"
+          color="border-gray-default"
+        />
+      </div>
+      <FullPageTabs
+        :links="[
+          { label: $t('Description'), href: `/reuses/${route.params.rid}/` },
+          { label: $t('Discussions'), href: `/reuses/${route.params.rid}/discussions/`, count: reuse.metrics.discussions ?? 0 },
+        ]"
+      />
+      <div
+        id="page"
+        class="bg-white pt-5 pb-8"
+      >
+        <NuxtPage
+          v-if="reuse"
+          class="container"
+          :reuse
+        />
+      </div>
+    </LoadingBlock>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BrandedButton, OrganizationNameWithCertificate, type Reuse } from '@datagouv/components-next'
+import { RiDeleteBinLine } from '@remixicon/vue'
+import EditButton from '~/components/BrandedButton/EditButton.vue'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+import ReuseDetails from '~/datagouv-components/src/components/ReuseDetails.vue'
+import type { PaginatedArray } from '~/types/types'
+
+const route = useRoute()
+const me = useMaybeMe()
+
+const url = computed(() => `/api/1/reuses/${route.params.rid}/`)
+const { data: reuse, status } = await useAPI<Reuse>(url)
+
+const followUrl = computed(() => `/api/1/reuses/${reuse.value.id}/followers/`)
+const { data: follower, status: followStatus } = await useAPI<PaginatedArray<{
+  id: string
+  follower: string
+  since: string
+}>>(followUrl, {
+  query: {
+    user: me.value?.id ?? undefined,
+  },
+})
+
+const title = computed(() => reuse.value?.title)
+const robots = computed(() => reuse.value && !reuse.value.metrics.datasets && !reuse.value.metrics.datasets ? 'noindex, nofollow' : 'all')
+
+useSeoMeta({
+  title,
+  robots,
+})
+</script>
diff --git a/pages/reuses/[rid]/discussions.vue b/pages/reuses/[rid]/discussions.vue
new file mode 100644
index 00000000..0be6b5fc
--- /dev/null
+++ b/pages/reuses/[rid]/discussions.vue
@@ -0,0 +1,14 @@
+<template>
+  <DiscussionsList
+    type="Reuse"
+    :subject="reuse"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Reuse } from '@datagouv/components-next'
+
+defineProps<{
+  reuse: Reuse
+}>()
+</script>
diff --git a/pages/reuses/[rid]/index.vue b/pages/reuses/[rid]/index.vue
new file mode 100644
index 00000000..61de857e
--- /dev/null
+++ b/pages/reuses/[rid]/index.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="divide-y divide-gray-default *:py-5">
+    <section>
+      <h2 class="uppercase text-sm mb-2.5">
+        {{ $t('Description') }}
+      </h2>
+      <div class="flex flex-wrap">
+        <MarkdownViewer
+          class="w-full md:w-9/12"
+          :content="reuse.description"
+          :min-heading="3"
+        />
+        <div class="w-full md:w-3/12">
+          <dl class="p-0 space-y-5">
+            <div>
+              <dt class="font-bold text-sm pb-1">
+                {{ $t('Topic') }}
+              </dt>
+              <dd class="p-0 text-sm text-mention-grey">
+                {{ topic }}
+              </dd>
+            </div>
+            <div>
+              <dt class="font-bold text-sm pb-1">
+                {{ $t('Type') }}
+              </dt>
+              <dd class="p-0 text-sm text-mention-grey">
+                {{ label }}
+              </dd>
+            </div>
+            <div>
+              <dt class="font-bold text-sm pb-1">
+                {{ $t('Tags') }}
+              </dt>
+              <dd class="flex flex-wrap gap-0.5 p-0 text-sm">
+                <span
+                  v-for="tag in reuse.tags"
+                  :key="tag"
+                  class="text-xs px-2 py-1 rounded-xl bg-gray-default"
+                >
+                  {{ tag }}
+                </span>
+                <span
+                  v-if="!reuse.tags?.length"
+                  class="text-mention-grey"
+                >
+                  {{ $t('No tags set') }}
+                </span>
+              </dd>
+            </div>
+            <div>
+              <dt class="font-bold text-sm pb-1">
+                {{ $t('Last update') }}
+              </dt>
+              <dd class="p-0 text-sm text-mention-grey">
+                {{ formatDate(reuse.last_modified) }}
+              </dd>
+            </div>
+            <div>
+              <dt class="font-bold text-sm pb-1">
+                {{ $t('Creation date') }}
+              </dt>
+              <dd class="p-0 text-sm text-mention-grey">
+                {{ formatDate(reuse.created_at) }}
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </section>
+    <section>
+      <h2 class="uppercase text-sm mb-2.5">
+        {{ $t('{n} associated datasets', { n: reuse.metrics.datasets }) }}
+      </h2>
+      <div class="grid md:grid-cols-2 gap-5">
+        <DatasetCardLg
+          v-for="dataset in reuse.datasets"
+          :key="dataset.id"
+          :dataset="dataset"
+          :show-description="false"
+          class="m-0"
+        />
+      </div>
+    </section>
+    <section>
+      <div class="flex flex-wrap gap-4 justify-between items-center mb-6">
+        <div>
+          <h2 class="uppercase text-sm mb-0">
+            {{ $t('Statistics for the last 12 months') }}
+          </h2>
+          <div class="text-gray-medium font-normal text-sm/6">
+            <span v-if="new Date().getHours() > 7 - 1">{{ $t('Updated this morning') }}</span>
+            <span v-else>{{ $t('Updated yesterday') }}</span>
+          </div>
+        </div>
+        <div>
+          <BrandedButton
+            :disabled="!downloadStatsUrl"
+            :href="downloadStatsUrl || ''"
+            rel="ugc nofollow noopener"
+            download="stats.csv"
+            :icon="RiDownloadLine"
+            color="secondary"
+            size="xs"
+            class="relative z-2"
+          >
+            {{ $t('Download the statistics as CSV') }}
+          </BrandedButton>
+        </div>
+      </div>
+      <div class="grid md:grid-cols-3">
+        <StatBox
+          :title="$t('Views')"
+          :data="metricsViews"
+          type="line"
+          :summary="metricsViewsTotal"
+          class="mb-8 md:mb-0"
+        />
+      </div>
+    </section>
+    <section>
+      <LoadingBlock
+        :status
+        class="min-h-32"
+      >
+        <h2 class="uppercase text-sm mb-2.5">
+          {{ $t('{n} reuses from the same creator', { n: relatedReuses.length }) }}
+        </h2>
+        <div
+          v-if="relatedReuses.length"
+          class="grid gap-4 md:grid-cols-2 lg:grid-cols-3"
+        >
+          <ReuseCard
+            v-for="related in relatedReuses"
+            :key="related.id"
+            :reuse="related"
+          />
+        </div>
+        <div
+          v-else
+          class="flex flex-col items-center"
+        >
+          <NuxtImg
+            src="/illustrations/reuse.svg"
+            width="137"
+            height="104"
+          />
+          <p class="mt-4 mb-5 font-bold text-lg">
+            {{ $t('There are no other reuses from this creator.') }}
+          </p>
+        </div>
+      </LoadingBlock>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useReuseType, BrandedButton, StatBox, type Reuse, type ReuseTopic } from '@datagouv/components-next'
+import { RiDownloadLine } from '@remixicon/vue'
+import ReuseCard from '~/components/Reuses/ReuseCard.vue'
+import { getTopic } from '~/datagouv-components/src/functions/reuses'
+import type { PaginatedArray } from '~/types/types'
+
+const props = defineProps<{
+  reuse: Reuse
+}>()
+
+const { label } = useReuseType(props.reuse.type)
+
+const { data: topics } = await useAPI<Array<ReuseTopic>>('/api/1/reuses/topics/')
+
+const topic = computed(() => getTopic(topics.value, props.reuse.topic))
+
+const { data: reuses, status } = await useAPI<PaginatedArray<Reuse>>(`/api/2/reuses/search/`, {
+  headers: {
+    'X-Fields': reusesXFields,
+  },
+  params: {
+    page: 1,
+    page_size: 4,
+    organization: props.reuse.organization?.id,
+    owner: props.reuse.owner?.id,
+  },
+})
+
+// We want 3 reuses, but we don't want the one from the current page
+const relatedReuses = computed(() => reuses.value.data.filter(r => props.reuse.id != r.id).slice(0, 3))
+
+const metricsViews = ref<null | Record<string, number>>(null)
+const metricsViewsTotal = ref<null | number>(null)
+
+watchEffect(async () => {
+  if (!props.reuse.id) return
+  const metrics = await getReuseMetrics(props.reuse.id)
+  metricsViews.value = metrics.reuseViews
+  metricsViewsTotal.value = metrics.reuseViewsTotal
+})
+
+const downloadStatsUrl = computed(() => {
+  if (!metricsViews.value) {
+    return null
+  }
+
+  return createReuseMetricsUrl(metricsViews.value)
+})
+</script>
diff --git a/pages/reuses/index.vue b/pages/reuses/index.vue
new file mode 100644
index 00000000..c27fabc5
--- /dev/null
+++ b/pages/reuses/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="container mb-16">
+    <Breadcrumb>
+      <BreadcrumbItem
+        to="/"
+        :external="true"
+      >
+        {{ $t('Home') }}
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        {{ $t('Reuses') }}
+      </BreadcrumbItem>
+    </Breadcrumb>
+    <ListPage
+      v-if="reuses"
+      :link="getLink"
+      :reuses
+      :q="(q as string)"
+      :sort
+      :status
+      :topic
+      :topics
+      :total-reuses="site.metrics.reuses"
+      @change="change"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Reuse, ReuseTopic, Site } from '@datagouv/components-next'
+import type { LocationQueryValue } from 'vue-router'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+import ListPage from '~/components/Reuses/ListPage.vue'
+import type { PaginatedArray } from '~/types/types'
+
+const { t } = useI18n()
+
+useSeoMeta({
+  title: t('Reuses'),
+})
+
+const route = useRoute()
+const q = ref(route.query.q ?? '')
+const sort = ref((route.query.sort as string | null) || undefined)
+const topic = ref((route.query.topic as string | null) || undefined)
+const page = ref(parseInt(route.query.page as LocationQueryValue ?? '1', 10))
+const pageSize = 21
+
+function change(newQs: string, newTopic: string | undefined, newSort: string | undefined, newPage: number) {
+  q.value = newQs
+  sort.value = newSort
+  page.value = newPage
+  topic.value = newTopic
+  return navigateTo({
+    ...route,
+    query: {
+      ...route.query,
+      q: q.value,
+      page: page.value,
+      sort: sort.value,
+      topic: topic.value,
+    },
+  })
+}
+
+const { data: site } = await useAPI<Site>('/api/1/site')
+
+const { data: topics } = await useAPI<Array<ReuseTopic>>('/api/1/reuses/topics/')
+
+const { data: reuses, status } = await useAPI<PaginatedArray<Reuse>>(`/api/2/reuses/search/`, {
+  headers: {
+    'X-Fields': reusesXFields,
+  },
+  params: {
+    q,
+    page,
+    page_size: pageSize,
+    sort,
+    topic,
+  },
+})
+</script>
diff --git a/types/types.d.ts b/types/types.d.ts
index ea840366..e500c4ac 100644
--- a/types/types.d.ts
+++ b/types/types.d.ts
@@ -183,11 +183,6 @@ export type NewReuseForApi = {
   tags: Array<string>
 }
 
-export type ReuseTopic = {
-  id: string
-  label: string
-}
-
 export type DataserviceForm = {
   owned: Owned | null
   title: string
diff --git a/utils/reuses.ts b/utils/reuses.ts
index aff16dea..2742efd8 100644
--- a/utils/reuses.ts
+++ b/utils/reuses.ts
@@ -1,6 +1,8 @@
 import type { Dataset, DatasetV2, Reuse, ReuseType } from '@datagouv/components-next'
 import type { DatasetSuggest, NewReuseForApi, ReuseForm, ReuseTopic } from '~/types/types'
 
+export const reusesXFields = 'data{archived,deleted,featured,id,owner,organization,metrics,created_at,last_modified,title,slug,page,description,type,url,image,image_thumbnail},page,page_size,total'
+
 export function getReuseAdminUrl(reuse: Reuse): string {
   return `/beta/admin/reuses/${reuse.id}`
 }
@@ -33,3 +35,37 @@ export function toApi(form: ReuseForm, overrides: { datasets?: Array<Dataset | D
     tags: form.tags.map(t => t.text),
   }
 }
+
+export async function getReuseMetrics(rid: string) {
+  // Fetching last 12 months
+  const response = await fetch(`https://metric-api.data.gouv.fr/api/reuses/data/?reuse_id__exact=${rid}&metric_month__sort=desc&page_size=12`)
+  const page = await response.json()
+
+  const reuseViews: Record<string, number> = {}
+
+  for (const { metric_month, monthly_visit } of page.data) {
+    reuseViews[metric_month] = monthly_visit
+  }
+  // Fetching totals
+  const totalResponse = await fetch(`https://metric-api.data.gouv.fr/api/reuses_total/data/?reuse_id__exact=${rid}`)
+  const totalPage = await totalResponse.json()
+
+  let reuseViewsTotal = 0
+  if (page.data[0]) {
+    reuseViewsTotal = totalPage.data[0].visit
+  }
+  return {
+    reuseViews,
+    reuseViewsTotal,
+  }
+}
+
+export function createReuseMetricsUrl(reuseViews: Record<string, number>) {
+  let data = 'month,visit\n'
+
+  for (const month in reuseViews) {
+    data += `${month},${reuseViews[month]}\n`
+  }
+
+  return URL.createObjectURL(new Blob([data], { type: 'text/csv' }))
+}