diff --git a/package-lock.json b/package-lock.json
index a3f4f520a..7d33716bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@datagouv/components": "^1.3.0",
         "@datagouv/select-a11y": "^3.6.1",
         "@gouvfr/dsfr": "~1.11.2",
+        "@vueuse/router": "^11.0.3",
         "leaflet": "^1.9.4"
       },
       "devDependencies": {
@@ -8610,6 +8611,60 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/router": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@vueuse/router/-/router-11.0.3.tgz",
+      "integrity": "sha512-Sa8wNATd4DoAWkO5NgV+sfTU9dOtC8pi+GEbtzOdC7/99fWK8k5/dfbfkt+OWcpwXoToNidBqnAZafknlYb2ig==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/shared": "11.0.3",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue-router": ">=4.0.0-rc.1"
+      }
+    },
+    "node_modules/@vueuse/router/node_modules/@vueuse/shared": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.0.3.tgz",
+      "integrity": "sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/router/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vueuse/shared": {
       "version": "10.5.0",
       "dev": true,
@@ -28188,6 +28243,31 @@
       "version": "10.5.0",
       "dev": true
     },
+    "@vueuse/router": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@vueuse/router/-/router-11.0.3.tgz",
+      "integrity": "sha512-Sa8wNATd4DoAWkO5NgV+sfTU9dOtC8pi+GEbtzOdC7/99fWK8k5/dfbfkt+OWcpwXoToNidBqnAZafknlYb2ig==",
+      "requires": {
+        "@vueuse/shared": "11.0.3",
+        "vue-demi": ">=0.14.10"
+      },
+      "dependencies": {
+        "@vueuse/shared": {
+          "version": "11.0.3",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.0.3.tgz",
+          "integrity": "sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==",
+          "requires": {
+            "vue-demi": ">=0.14.10"
+          }
+        },
+        "vue-demi": {
+          "version": "0.14.10",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+          "requires": {}
+        }
+      }
+    },
     "@vueuse/shared": {
       "version": "10.5.0",
       "dev": true,
diff --git a/package.json b/package.json
index 4ff82eb71..9dfdacfff 100644
--- a/package.json
+++ b/package.json
@@ -108,6 +108,7 @@
     "@datagouv/components": "^1.3.0",
     "@datagouv/select-a11y": "^3.6.1",
     "@gouvfr/dsfr": "~1.11.2",
+    "@vueuse/router": "^11.0.3",
     "leaflet": "^1.9.4"
   },
   "msw": {
diff --git a/udata_front/theme/gouvfr/assets/js/api/types.ts b/udata_front/theme/gouvfr/assets/js/api/types.ts
new file mode 100644
index 000000000..fc92d66c7
--- /dev/null
+++ b/udata_front/theme/gouvfr/assets/js/api/types.ts
@@ -0,0 +1,8 @@
+export type PaginatedArray<T> = {
+    data: Array<T>;
+    next_page: string | null;
+    page: number;
+    page_size: number;
+    previous_page: string | null;
+    total: number;
+};
\ No newline at end of file
diff --git a/udata_front/theme/gouvfr/assets/js/components/DataservicesSearch/DataservicesSearch.stories.ts b/udata_front/theme/gouvfr/assets/js/components/DataservicesSearch/DataservicesSearch.stories.ts
new file mode 100644
index 000000000..f7be5624c
--- /dev/null
+++ b/udata_front/theme/gouvfr/assets/js/components/DataservicesSearch/DataservicesSearch.stories.ts
@@ -0,0 +1,23 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import DataservicesSearch from './DataservicesSearch.vue';
+
+const meta = {
+  title: 'Components/DataservicesSearch',
+  component: DataservicesSearch,
+  decorators: [withActions],
+  args: {},
+} satisfies Meta<typeof DataservicesSearch>;
+
+export default meta;
+
+export const DataservicesSearchExample: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { DataservicesSearch },
+    setup() {
+      return { args };
+    },
+    template: '<DataservicesSearch v-bind="args"/>',
+  }),
+  args: {},
+};
diff --git a/udata_front/theme/gouvfr/assets/js/components/DataservicesSearch/DataservicesSearch.vue b/udata_front/theme/gouvfr/assets/js/components/DataservicesSearch/DataservicesSearch.vue
new file mode 100644
index 000000000..a105aa8fd
--- /dev/null
+++ b/udata_front/theme/gouvfr/assets/js/components/DataservicesSearch/DataservicesSearch.vue
@@ -0,0 +1,493 @@
+<template>
+  <form class="fr-pt-3v" @submit.prevent="search">
+    <div class="fr-grid-row fr-grid-row--middle justify-between" ref="searchRef" data-cy="search">
+      <section class="fr-search-bar fr-search-bar--lg w-100">
+        <label class="fr-label" :for="searchId">
+          {{ $t("Search") }}
+        </label>
+        <input
+          :id="searchId"
+          type="search"
+          v-model="searchQuery"
+          ref="searchInput"
+          class="fr-input"
+          :aria-label="t('Search...')"
+          :placeholder="t('Search...')"
+          data-cy="search-input"
+          data-testid="search-input"
+        />
+        <button class="fr-btn" type="submit">
+          {{ $t('Search') }}
+        </button>
+      </section>
+    </div>
+    <div class="fr-grid-row fr-mt-1w fr-mt-md-5v">
+      <div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
+        <nav class="fr-sidemenu" aria-labelledby="fr-sidemenu-title">
+          <div class="fr-sidemenu__inner">
+            <button
+              class="fr-sidemenu__btn fr-mt-1w"
+              hidden
+              aria-controls="fr-sidemenu-wrapper"
+              aria-expanded="false"
+            >
+              {{ t('Filter results') }}
+            </button>
+            <div class="fr-collapse" id="fr-sidemenu-wrapper">
+              <div class="fr-sidemenu__title fr-mb-3v" id="fr-sidemenu-title">{{ t('Filters') }}</div>
+              <div class="fr-grid-row fr-grid-row--gutters">
+                <div class="fr-col-12">
+                  <MultiSelect
+                    :placeholder="t('Organizations')"
+                    :searchPlaceholder="t('Search an organization...')"
+                    :allOption="t('All organizations')"
+                    listUrl="/organizations/?sort=-followers"
+                    suggestUrl="/organizations/suggest/"
+                    entityUrl="/organizations/"
+                    :values="organization"
+                    @change="(value: string) => organization = value"
+                    :isBlue="true"
+                  />
+                </div>
+                <div class="fr-col-12 fr-mb-3w text-align-center" v-if="hasFilters">
+                  <button
+                    class="fr-btn fr-btn--secondary fr-icon-close-circle-line fr-btn--icon-left justify-center w-100"
+                    @click="resetFilters"
+                  >
+                    {{ t('Reset filters') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+      <section class="fr-col-12 fr-col-md-8 fr-col-lg-9 fr-mt-2w fr-mt-md-0 search-results">
+        <div v-if="dataservices === null">
+          <Loader />
+        </div>
+        <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle justify-between fr-pb-1w" v-if="dataservices !== null">
+          <p class="fr-col-auto fr-my-0" role="status">
+            {{ t("{count} results", dataservices.total) }}
+          </p>
+          <!-- <div class="fr-col-auto fr-grid-row fr-grid-row--middle">
+            <label for="sort-search" class="fr-col-auto fr-text--sm fr-m-0 fr-mr-1w">
+                {{ t('Sort by:') }}
+            </label>
+            <div class="fr-col">
+                <select
+                  id="sort-search"
+                  class="fr-select fr-select--blue"
+                  name="sort"
+                  v-model="searchSort"
+                  @change="handleSortChange"
+                >
+                  <option value="">
+                    {{ t('Relevance') }}
+                  </option>
+                  <option v-for="{value, label} in sortOptions" :value='value'>
+                    {{ label }}
+                  </option>
+                </select>
+            </div>
+          </div> -->
+        </div>
+        <div v-if="dataservices !== null && dataservices.data.length">
+          <ul class="fr-mt-1w border-default-grey border-top relative z-2">
+            <li v-for="dataservice in dataservices.data" :key="dataservice.id">
+              <DataserviceCard :dataservice dataserviceUrl="" />
+            </li>
+          </ul>
+          <Pagination
+              v-if="dataservices !== null && dataservices.total > dataservices.page_size"
+              :page="dataservices.page"
+              :pageSize="dataservices.page_size"
+              :totalResults="dataservices.total"
+              @change="changePage"
+              class="fr-mt-2w"
+            />
+        </div>
+        <div v-if="dataservices !== null && dataservices.data.length === 0" class="fr-mt-2w">
+          <ActionCard
+          :title="t('No result found for your search')"
+          :icon="franceWithMagnifyingGlassIcon"
+          type="primary"
+          >
+            <p class="fr-mt-1v fr-mb-3v">
+              {{ t("Try to reset filters to widen your search.") }}<br/>
+              {{ t("You can also give us more details with our feedback form.") }}
+            </p>
+            <template v-slot:actions>
+              <button @click="resetFilters" class="fr-btn fr-btn--secondary">
+                {{ t("Reset filters") }}
+              </button>
+              <a :href="data_search_feedback_form_url" class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-lightbulb-line fr-ml-1w">
+                {{ t("Tell us what you are looking for") }}
+              </a>
+            </template>
+          </ActionCard>
+        </div>
+      </section>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { Dataservice, DataserviceCard, Pagination, type Dataset } from "@datagouv/components";
+import { ref, onMounted, computed, useId, useTemplateRef, watchEffect } from "vue";
+import { useI18n } from 'vue-i18n';
+import Loader from "../dataset/loader.vue";
+import MultiSelect from "../MultiSelect/MultiSelect.vue";
+import ActionCard from "../Form/ActionCard/ActionCard.vue";
+import { data_search_feedback_form_url } from "../../config";
+import { api } from "../../plugins/api";
+import franceWithMagnifyingGlassIcon from "../../../../templates/svg/illustrations/france_with_magnifying_glass.svg";
+import { PaginatedArray } from "../../api/types";
+
+const { t } = useI18n();
+
+const organization = ref('');
+
+const hasFilters = computed(() => {
+  return organization.value
+});
+const resetFilters = () => {
+  organization.value = '';
+}
+
+const searchId = useId();
+const searchQuery = ref('');
+const searchInput = useTemplateRef('searchInput');
+
+const url = computed(() => {
+  const filters: { organization?: string, q?: string } = {}
+  if (organization.value) {
+    filters.organization = organization.value;
+  }
+  if (searchQuery.value) {
+    filters.q = searchQuery.value;
+  }
+
+  const params = new URLSearchParams(filters);
+  console.log(`/dataservices?${params}`)
+  return `/dataservices?${params}`
+})
+
+const dataservices = ref<null | PaginatedArray<Dataservice>>(null);
+
+const search = async () => {
+  dataservices.value = null
+  const response = await api.get(url.value);
+  dataservices.value = response.data;
+};
+
+watchEffect(() => {
+  search()
+})
+
+const changePage = (value) => {
+  console.log(value)
+};
+
+
+// onMounted(() => {
+//   search()
+// })
+
+// type Props = {
+//   downloadLink?: string,
+//   disableFirstSearch?: boolean,
+//   organization?: string,
+//   sorts?: Array<{label: string, order: string, value: string}>,
+// };
+
+// defineOptions({
+//   inheritAttrs: false,
+// });
+
+// const props = withDefaults(defineProps<Props>(), {
+//   downloadLink: "",
+//   disableFirstSearch: false,
+//   organization: "",
+//   sorts: () => ([]),
+// });
+
+// type Facets = {
+//   organization?: string;
+//   tag?: string;
+//   license?: string;
+//   format?: string;
+//   geozone?: string;
+//   granularity?: string;
+//   schema?: string;
+// };
+
+// const { toast } = useToast();
+// /**
+//  * Update search params from URL on page load for deep linking
+//  */
+// const url = new URL(window.location.href);
+// const params = new URLSearchParams(url.search);
+
+// const allowedExtensionsUrl = getAllowedExtensionsUrl();
+// const licensesUrl = getLicensesUrl();
+
+// /**
+//  * Search query
+//  */
+// const queryString = ref('');
+
+// /**
+//  * Reuse url of the query
+//  */
+// const {reuseUrl} = useSearchUrl(queryString);
+
+// /**
+//  * Query sort
+//  */
+// const searchSort = ref('');
+
+// /**
+//  * Search results
+//  */
+// const results = ref<Array<Dataset>>([]);
+
+// const zIndex = (key: number) => {
+//   return {zIndex: results.value.length - key}
+// };
+
+// /**
+//  * Count of search results
+//  */
+// const totalResults = ref(0);
+
+// /**
+//  * Current page of results
+//  */
+// const currentPage = ref(1);
+
+// /**
+//  * Search page size
+//  */
+// const pageSize = 20;
+
+// /**
+//  * All other params are kept here as facets
+//  */
+// const facets = ref<Facets>({organization: props.organization});
+
+// /**
+//  * Search loading state
+//  */
+// const loading = ref(false);
+
+// /**
+//  * Current request if any to be cancelled if a new one comes
+//  */
+// const currentRequest = ref<CancelTokenSource | null>(null);
+
+// /**
+//  * Vue ref to results HTML
+//  */
+// const resultsRef = ref<HTMLElement | null>(null);
+
+// /**
+//  * Vue ref to results HTML
+//  */
+// const searchRef = ref<HTMLElement | null>(null);
+
+// const SAVE_TO_HISTORY = true;
+// const DONT_SAVE_TO_HISTORY = false;
+
+// const updateUrl = (save = SAVE_TO_HISTORY) => {
+//   // Update URL to match current search params value for deep linking
+//   let url = new URL(window.location.href);
+//   const urlParams = { ...searchParameters.value };
+//   if(props.organization) {
+//     delete urlParams.organization;
+//   }
+//   url.search = new URLSearchParams(urlParams).toString();
+//   if (save) {
+//     window.history.pushState(null, "", url);
+//   }
+//   let linksWithQuery = document.querySelectorAll('[data-q]') as NodeListOf<HTMLAnchorElement>;
+//   for (let link of linksWithQuery) {
+//     link.href = reuseUrl.value;
+//   }
+// };
+
+// /**
+//  * Search new dataset results
+//  */
+// const search = debounce((saveToHistory = SAVE_TO_HISTORY) => {
+//   loading.value = true;
+//   if (currentRequest.value) currentRequest.value.cancel();
+//   currentRequest.value = generateCancelToken();
+//   apiv2
+//     .get("/datasets/search/", {
+//       cancelToken: currentRequest.value.token,
+//       params: {
+//         ...searchParameters.value,
+//         page_size: pageSize,
+//       },
+//     })
+//     .then((res) => res.data)
+//     .then((result) => {
+//       results.value = result.data;
+//       totalResults.value = result.total;
+//       loading.value = false;
+//       updateUrl(saveToHistory);
+//     })
+//     .catch((error) => {
+//       if (!axios.isCancel(error)) {
+//         toast.error(t("Error getting search results."));
+//         loading.value = false;
+//       }
+//     });
+// }, search_autocomplete_debounce);
+
+// /**
+//  * Called when user type in search field
+//  */
+// const handleSearchChange = (input: string) => {
+//   queryString.value = input;
+//   currentPage.value = 1;
+//   search();
+// };
+
+// /**
+//  * Called on every facet selector change, updates the `facets.xxx` object then searches with new values
+//  */
+// const handleFacetChange = (facet: keyof Facets, values: string) => {
+//   if(values) {
+//     facets.value[facet] = values;
+//   } else {
+//     facets.value[facet] = undefined;
+//   }
+//   if (props.organization) {
+//     facets.value.organization = props.organization;
+//   }
+//   currentPage.value = 1;
+//   search();
+// };
+
+// /**
+//  * Called when user change sort
+//  */
+// const handleSortChange = () => {
+//   currentPage.value = 1;
+//   search();
+// }
+
+// /**
+//  * Change current page
+//  */
+// const changePage = (page: number) => {
+//   currentPage.value = page;
+//   search();
+//   scrollToTop();
+// };
+
+// const scrollToTop = () => {
+//   if (searchRef.value) {
+//     searchRef.value.scrollIntoView({ behavior: "smooth" });
+//   }
+// };
+
+// const reloadFilters = ({page = 1, sort = '', ...params}, saveToHistory = SAVE_TO_HISTORY) => {
+//   facets.value = {...params, organization: props.organization || params.organization};
+//   currentPage.value = page;
+//   searchSort.value = sort;
+//   search(saveToHistory);
+// };
+
+// const resetFilters = () => {
+//   reloadFilters({});
+// };
+
+// const resetForm = () => {
+//   reloadForm();
+// };
+
+// const reloadForm = ({q = '', ...params} = {}, saveToHistory = SAVE_TO_HISTORY) => {
+//   queryString.value = q;
+//   reloadFilters(params, saveToHistory);
+// };
+
+// /**
+//  * Is any filter active ?
+//  * We don't count scoped search as being filtered
+//  */
+// const isFiltered = computed(() => {
+//   const keys = Object.keys(facets.value) as Array<keyof Facets>;
+//   return keys.some(
+//     (key) => facets.value[key]?.length && (props.organization ? key !== "organization" : true)
+//   );
+// });
+
+// const sortOptions = computed(() => props.sorts.map(sort => ({
+//   value: sort.order == 'asc' ? sort.value : '-' + sort.value,
+//   label: sort.label,
+// })));
+
+// const searchParameters = computed(() => {
+//   let params: Record<string, string> = {};
+//   let key: keyof Facets;
+//   for (key in facets.value) {
+//     const facet = facets.value[key];
+//     if(facet) {
+//       params[key] = facet;
+//     }
+//   }
+//   if (currentPage.value > 1) params.page = currentPage.value.toString();
+//   if (queryString.value) params.q = queryString.value;
+//   if(searchSort.value) params.sort = searchSort.value;
+//   return params;
+// });
+
+// const q = params.get('q');
+// if (q) {
+//   queryString.value = q;
+//   params.delete('q');
+// }
+// const page = params.get('page');
+// if (page) {
+//   currentPage.value = parseInt(page);
+//   params.delete('page');
+// }
+// const sort = params.get('sort');
+// if(sort) {
+//   searchSort.value = sort;
+//   params.delete('sort');
+// }
+
+// facets.value = {...Object.fromEntries(params), organization: props.organization || params.get("organization") || ""};
+// if (props.disableFirstSearch) {
+//   loading.value = true;
+// } else {
+//   search();
+// }
+
+// onMounted(() => {
+//   if (props.disableFirstSearch && resultsRef.value) {
+//     let total = resultsRef.value.dataset.totalResults;
+//     if (total && parseInt(total) > 0) {
+//       let datasetResults = resultsRef.value.dataset.results;
+//       if(datasetResults) {
+//         results.value = JSON.parse(datasetResults);
+//       }
+//       totalResults.value = JSON.parse(total);
+//     }
+//     loading.value = false;
+//   }
+//   addEventListener('popstate', () => {
+//     // Update URL to match current search params value for deep linking
+//     const url = new URL(window.location.href);
+//     const params: Record<string, string> = {};
+//     for (const [key, value] of url.searchParams) {
+//       params[key] = value;
+//     }
+//     reloadForm(params, DONT_SAVE_TO_HISTORY);
+//   });
+// });
+</script>
diff --git a/udata_front/theme/gouvfr/assets/js/components/Form/ActionCard/ActionCard.vue b/udata_front/theme/gouvfr/assets/js/components/Form/ActionCard/ActionCard.vue
index 3ea144c2b..528bf27aa 100644
--- a/udata_front/theme/gouvfr/assets/js/components/Form/ActionCard/ActionCard.vue
+++ b/udata_front/theme/gouvfr/assets/js/components/Form/ActionCard/ActionCard.vue
@@ -55,7 +55,6 @@ export default defineComponent({
     },
     content: {
       type: String,
-      required: true,
     },
     type: {
       type: String,
diff --git a/udata_front/theme/gouvfr/assets/js/index.ts b/udata_front/theme/gouvfr/assets/js/index.ts
index 45638ecc5..98accf406 100644
--- a/udata_front/theme/gouvfr/assets/js/index.ts
+++ b/udata_front/theme/gouvfr/assets/js/index.ts
@@ -36,6 +36,7 @@ import EventBus from "./plugins/eventbus.ts";
 import Auth from "./plugins/auth.ts";
 import InitSentry from "./sentry.ts";
 import ReportModalButton from "./components/Report/ReportModalButton.vue";
+import DataservicesSearch from "./components/DataservicesSearch/DataservicesSearch.vue";
 
 setupComponents({
   admin_root,
@@ -82,6 +83,7 @@ const configAndMountApp = (el: HTMLElement) => {
   app.component("owner-type-icon", OwnerTypeIcon);
   app.component("publishing-form", PublishingForm);
   app.component("search", Search);
+  app.component("dataservices-search", DataservicesSearch);
   app.component("toggletip", Toggletip);
   app.component("user-dataset-list", UserDatasetList);
   app.component("user-reuse-list", UserReuseList);
diff --git a/udata_front/theme/gouvfr/templates/dataservice/list.html b/udata_front/theme/gouvfr/templates/dataservice/list.html
new file mode 100644
index 000000000..c61fd4028
--- /dev/null
+++ b/udata_front/theme/gouvfr/templates/dataservice/list.html
@@ -0,0 +1,82 @@
+{% extends theme("layouts/1-column.html") %}
+{% from theme('macros/paginator.html') import paginator with context %}
+{% from theme('macros/sort_search.html') import sort_search %}
+
+{% block breadcrumb %}
+<li>
+    <a class="fr-breadcrumb__link" aria-current="page">
+        {{ _('Datasets') }}
+    </a>
+</li>
+{% endblock %}
+
+{% set meta = {
+    'title': _('Datasets'),
+    'description': _("%(site)s dataset search", site=config['SITE_TITLE']),
+    'keywords': [_('search'), _('datasets')],
+    'robots': 'noindex',
+} %}
+
+{% set bundle = 'search' %}
+
+{% set sorts = [
+    {"label": _('Creation date'),"value": "created", "order": "desc"},
+    {"label": _('Last update'),"value": "last_update", "order": "desc"},
+    {"label": _('Number of followers'),"value": "followers", "order": "desc"},
+    {"label": _('Number of reuses'), "value": "reuses", "order": "desc"}
+] %}
+
+{% block main_content %}
+<section
+    class="fr-container fr-container--search vuejs fr-mb-4w"
+>
+    <h1 class="fr-mb-1w">{{_('Datasets')}}</h1>
+    <div class="fr-grid-row fr-grid-row--middle justify-between">
+        <div>{{_('Search among %(count)s datasets on %(site)s',count=current_site.metrics['datasets']|format_number, site=current_site.title)}}</div>
+        <a
+            href="{{ url_for('reuses.list', q=datasets.query._query) }}"
+            data-q
+            class="fr-link fr-text--sm fr-m-0"
+        >
+            {{ _('Search reuses') }}
+        </a>
+    </div>
+    <Search
+        :disable-first-search="true"
+        data-total-results="{{datasets.total}}"
+        data-results="{{datasets|to_api_format|to_json}}"
+        :sorts="{{sorts|to_json}}"
+    >
+    </Search>
+    <noscript>
+        <div class="fr-pt-3v">
+            <form method="GET" class="fr-grid-row">
+                <div class="fr-search-bar w-100" role="search" aria-label="{{  _('Search for dataset') }}">
+                    <label class="fr-label" for="search-datasets">
+                        {{ _('Search...') }}
+                    </label>
+                    <input
+                        name="q"
+                        class="fr-input"
+                        placeholder="{{ _('Search...') }}"
+                        type="search"
+                        id="search-datasets"
+                        value="{{datasets.query._query}}"
+                    />
+                    <button class="fr-btn" type="submit">
+                        {{ _('Search') }}
+                    </button>
+                </div>
+                <div class="w-100 fr-grid-row fr-grid-row--middle fr-pt-5v justify-between">
+                    <p class="fr-col-auto fr-my-0" role="status">{{ _('%(result)s results', result=datasets.total) }}</p>
+                    {{sort_search(datasets, sorts)}}
+                </div>
+            </form>
+        </div>
+        {% if datasets %}
+        {% include theme('dataset/search-results.html') %}
+        {{ paginator(datasets) }}
+        {% endif %}
+    </noscript>
+</section>
+{% endblock %}