diff --git a/components/Fields/Field.vue b/components/Fields/Field.vue
index 1d32afe04..349b51dbe 100644
--- a/components/Fields/Field.vue
+++ b/components/Fields/Field.vue
@@ -230,8 +230,8 @@ export default defineNuxtComponent({
         v-else-if="isWebsite"
         :key="`website_${item}`"
       >
-        <ExternalLink :href="item">
-          {{ item }}
+        <ExternalLink :title="item" :href="item">
+          {{ context !== 'label_list' ? item : '' }}
         </ExternalLink>
       </div>
 
@@ -240,8 +240,8 @@ export default defineNuxtComponent({
         v-else-if="field.field === 'email'"
         :key="`email_${item}`"
       >
-        <ExternalLink :href="`mailto:${item}`" icon="envelope">
-          {{ item }}
+        <ExternalLink :title="item" :href="`mailto:${item}`" icon="envelope">
+          {{ context !== 'label_list' ? item : '' }}
         </ExternalLink>
       </div>
 
diff --git a/components/Layout/Header.vue b/components/Layout/Header.vue
index 40ec50333..97729d7e5 100644
--- a/components/Layout/Header.vue
+++ b/components/Layout/Header.vue
@@ -43,6 +43,8 @@ export default defineNuxtComponent({
       :logo-url="theme && theme.logo_url"
     />
 
+    <slot name="search" />
+
     <div class="tw-flex tw-justify-end print:tw-hidden">
       <slot />
       <NavMenu :entries="navMenuEntries" />
diff --git a/components/PoisList/Actions.vue b/components/PoisList/Actions.vue
index a1ba8b3a3..c9e674fa0 100644
--- a/components/PoisList/Actions.vue
+++ b/components/PoisList/Actions.vue
@@ -2,10 +2,11 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { PropType } from 'vue'
 
-import { defineNuxtComponent, useRequestHeaders } from '#app'
+import { defineNuxtComponent } from '#app'
 import IconButton from '~/components/UI/IconButton.vue'
 import IconsBar from '~/components/UI/IconsBar.vue'
 import { getPoiByCategoryIdUrl } from '~/lib/apiPois'
+import { siteStore as useSiteStore } from '~/stores/site'
 
 export default defineNuxtComponent({
   components: {
@@ -13,7 +14,6 @@ export default defineNuxtComponent({
     IconsBar,
     IconButton,
   },
-
   props: {
     categoryId: {
       type: Number,
@@ -42,7 +42,7 @@ export default defineNuxtComponent({
   methods: {
     url(format: 'geojson' | 'csv'): string {
       return getPoiByCategoryIdUrl(
-        this.$vidoConfig(useRequestHeaders()),
+        useSiteStore().config!,
         this.categoryId,
         {
           geometry_as: 'point',
diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue
deleted file mode 100644
index a43f1e20f..000000000
--- a/components/PoisList/PoisList.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { mapState } from 'pinia'
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent, useRequestHeaders } from '#app'
-import PoiLayout from '~/components/Layout/PoiLayout.vue'
-import Actions from '~/components/PoisList/Actions.vue'
-import CategorySelector from '~/components/PoisList/CategorySelector.vue'
-import PoisTable from '~/components/PoisList/PoisTable.vue'
-import type { ContentEntry } from '~/lib/apiContent'
-import type { ApiPois, FieldsListItem } from '~/lib/apiPois'
-import { getPoiByCategoryId } from '~/lib/apiPois'
-import type { Settings } from '~/lib/apiSettings'
-import { menuStore } from '~/stores/menu'
-
-export default defineNuxtComponent({
-  components: {
-    FontAwesomeIcon,
-    Actions,
-    PoiLayout,
-    CategorySelector,
-    PoisTable,
-  },
-
-  props: {
-    settings: {
-      type: Object as PropType<Settings>,
-      required: true,
-    },
-    navMenuEntries: {
-      type: Array as PropType<ContentEntry[]>,
-      required: true,
-    },
-    initialCategoryId: {
-      type: Number,
-      required: true,
-    },
-    initialPois: {
-      type: Object as PropType<ApiPois>,
-      required: true,
-    },
-  },
-
-  data(): {
-    categoryId: number
-    pois: ApiPois | undefined
-  } {
-    return {
-      categoryId: this.initialCategoryId,
-      pois: this.initialPois,
-    }
-  },
-
-  computed: {
-    ...mapState(menuStore, ['menuItems', 'getCurrentCategory']),
-
-    category() {
-      return this.getCurrentCategory(this.categoryId)
-    },
-
-    fields(): FieldsListItem[] {
-      return (
-        (this.pois?.features
-        && this.pois.features[0].properties.editorial?.list_fields) || [
-          { field: 'name' },
-        ]
-      )
-    },
-  },
-
-  watch: {
-    categoryId() {
-      this.pois = undefined
-
-      // Send new categoryId to parent in order to update meta title
-      this.$emit('categoryUpdate', this.categoryId)
-
-      // Change history directly to avoid resetup the page with this.$router.push
-      history.pushState({}, '', `/category/${this.categoryId}`)
-
-      getPoiByCategoryId(
-        this.$vidoConfig(useRequestHeaders()),
-        this.categoryId,
-        {
-          geometry_as: 'point',
-          short_description: true,
-        },
-      ).then(pois => this.pois = pois)
-    },
-  },
-
-  methods: {
-    onMenuChange(newCategoryId: number) {
-      this.categoryId = newCategoryId
-    },
-  },
-})
-</script>
-
-<template>
-  <PoiLayout
-    v-if="category !== undefined"
-    :settings="settings"
-    :nav-menu-entries="navMenuEntries"
-    :name="category.category.name.fr"
-    :icon="category.category.icon"
-    :color-line="category.category.color_line"
-    :color-fill="category.category.color_fill"
-  >
-    <template #actions>
-      <Actions
-        :category-id="categoryId"
-        :color-line="category.category.color_line"
-      />
-    </template>
-    <template #body>
-      <CategorySelector
-        :menu-items="menuItems || {}"
-        :category-id="categoryId"
-        @category-change="onMenuChange"
-      />
-
-      <PoisTable v-if="pois" :fields="fields" :pois="pois" />
-      <FontAwesomeIcon
-        v-else
-        icon="spinner"
-        class="tw-text-zinc-400 tw-animate-spin"
-        size="3x"
-      />
-    </template>
-  </PoiLayout>
-</template>
-
-<style lang="scss" scoped>
-@import '~/assets/details';
-
-h1 {
-  font-size: 2.4rem;
-  text-align: center;
-  margin: 0.6rem 0.3rem 0;
-  text-transform: uppercase;
-}
-</style>
diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index eb2715f83..d4ac6647d 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -1,98 +1,180 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-import { defineNuxtComponent } from '#app'
-import Field from '~/components/Fields/Field.vue'
-import type { ApiPoi, ApiPoiProperties, ApiPois, FieldsListItem } from '~/lib/apiPois'
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
+import type { FieldsListItem } from '~/lib/apiPois'
+import type { ApiMenuCategory } from '~/lib/apiMenu'
+import Field from '~/components/Fields/Field.vue'
+import IconButton from '~/components/UI/IconButton.vue'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
-import type { ContribFields } from '~/composables/useContrib'
-
-export default defineNuxtComponent({
-  components: {
-    ContribFieldGroup,
-    Field,
-  },
-  props: {
-    fields: {
-      type: Array as PropType<FieldsListItem[]>,
-      required: true,
-    },
-    pois: {
-      type: Object as PropType<ApiPois>,
-      required: true,
-    },
-  },
-  data(): {
-    contribMode: boolean
-    isContribEligible: (properties: ApiPoiProperties) => boolean
-    getContributorFields: (feature: ApiPoi) => ContribFields
-  } {
-    const { contribMode, isContribEligible, getContributorFields } = useContrib()
-    return {
-      contribMode,
-      isContribEligible,
-      getContributorFields,
-    }
-  },
-  computed: {
-    headers(): { value: string, text: string }[] {
-      const h = this.fields.map(field => ({
-        value: field.field,
-        text: this.$propertyTranslations.p(
-          field.field,
-          PropertyTranslationsContextEnum.List,
-        ),
-      }))
-      h.push({ value: '', text: '' })
-      if (this.contribMode)
-        h.push({ value: '', text: this.$t('fields.contrib.heading') })
-
-      return h
-    },
-    context(): PropertyTranslationsContextEnum {
-      return PropertyTranslationsContextEnum.List
-    },
-  },
+import Actions from '~/components/PoisList/Actions.vue'
+import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
+import { getPoiByCategoryId } from '~/lib/apiPois'
+import { siteStore as useSiteStore } from '~/stores/site'
+
+interface DataTableHeader {
+  filterable: boolean
+  key: string
+  title: string
+  value?: string | Function
+}
+
+const props = defineProps<{
+  category: ApiMenuCategory
+}>()
+
+const { t } = useI18n()
+const siteStore = useSiteStore()
+const { $propertyTranslations } = useNuxtApp()
+const { contribMode, isContribEligible, getContributorFields } = useContrib()
+const search = ref('')
+const cachedKey = computed(() => `pois-${props.category.id}`)
+
+// Fetch POIs by Cache or API
+const pois = ref()
+const loadingState = ref(false)
+const { data: cachedPois } = useNuxtData(cachedKey.value)
+if (cachedPois.value) {
+  pois.value = cachedPois.value
+}
+else {
+  const { data, pending, error } = await useAsyncData(cachedKey.value, () => getPoiByCategoryId(
+    siteStore.config!,
+    props.category.id,
+    { geometry_as: 'point', short_description: true },
+  ))
+
+  if (error.value || !data.value)
+    throw createError({ statusCode: 404, statusMessage: 'POIs not found.' })
+
+  pois.value = data.value
+  loadingState.value = pending.value
+}
+
+// Handle default config field if not provided by API
+const fields = computed((): FieldsListItem[] => {
+  return (
+    (pois.value?.features[0].properties.editorial?.list_fields)
+    || [{ field: 'name' }]
+  )
 })
+
+// Transform headers data to be compliant with Vuetify's standards
+const headers = computed((): Array<DataTableHeader> => {
+  // Basic Fields
+  const headers: Array<DataTableHeader> = fields.value.map(f => ({
+    filterable: true,
+    key: f.field,
+    title: $propertyTranslations.p(
+      f.field,
+      PropertyTranslationsContextEnum.List,
+    ),
+    value: `properties.${f.field}`,
+  }))
+
+  // Contrib Field
+  if (contribMode) {
+    headers.push({
+      filterable: false,
+      key: 'contrib',
+      title: t('fields.contrib.heading'),
+    })
+  }
+
+  // Details Field
+  headers.push({
+    filterable: false,
+    key: 'details',
+    title: 'Actions',
+  })
+
+  return headers
+})
+
+function customFilter(value: any, query: string): boolean {
+  return query !== null && value !== null && typeof value === 'string' && value.toLowerCase().includes(query.toLowerCase())
+}
+
+function getContext(key: string) {
+  return key === 'opening_hours' ? PropertyTranslationsContextEnum.Card : PropertyTranslationsContextEnum.List
+}
 </script>
 
 <template>
-  <table>
-    <thead>
-      <tr class="tw-bg-gray-100">
-        <th v-for="header in headers" :key="header.value" scope="col">
-          {{ header.text }}
-        </th>
-      </tr>
-    </thead>
-    <tbody v-if="pois.features">
-      <tr v-for="(feature, i) in pois.features" :key="i">
-        <td v-for="field in fields" :key="field.field" class="tw-align-top">
-          <Field
-            :context="context"
-            :recursion-stack="[field.field]"
-            :field="field"
-            :details="$t('poisTable.details')"
-            :properties="feature.properties"
-            :geom="feature.geometry"
-          />
-        </td>
-        <td class="tw-align-top">
-          <NuxtLink :to="`/poi/${feature.properties.metadata.id}/details`">
-            {{ $t('poisTable.details') }}
-          </NuxtLink>
-        </td>
-        <td v-if="contribMode && isContribEligible(feature.properties)" class="tw-align-top">
-          <ContribFieldGroup v-bind="getContributorFields(feature)" />
-        </td>
-      </tr>
-    </tbody>
-    <tbody v-else>
-      <tr class="tw-text-center">
-        <td :colspan="headers.length">
-          {{ $t('poisTable.empty') }}
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <VCard class="mt-8">
+    <VToolbar class="pa-2" flat>
+      <TeritorioIconBadge
+        :color-fill="category.category.color_fill"
+        :picto="category.category.icon"
+        size="xl"
+      />
+      <VToolbarTitle class="d-flex print:tw-pb-4" tag="h1" :text="category.category.name.fr" />
+
+      <VTextField
+        v-model="search"
+        :label="t('poisTable.search')"
+        clearable
+        variant="solo-filled"
+        hide-details="auto"
+      >
+        <template #append-inner>
+          <FontAwesomeIcon class="px-2" icon="search" />
+        </template>
+      </VTextField>
+      <Actions
+        class="ma-0 ml-2 w-auto"
+        :category-id="category.id"
+        :color-line="category.category.color_line"
+      />
+    </VToolbar>
+    <VDataTable
+      :loading="loadingState"
+      :headers="headers"
+      :items="pois?.features"
+      :no-data-text="t('poisTable.empty')"
+      :search="search"
+      :custom-filter="customFilter"
+      items-per-page="20"
+    >
+      <template #item="{ item, columns }">
+        <tr>
+          <td v-for="col in columns" :key="col.key">
+            <ContribFieldGroup
+              v-if="col.key === 'contrib' && isContribEligible(item.raw.properties)"
+              v-bind="getContributorFields(item.raw)"
+            />
+            <IconButton
+              v-else-if="col.key === 'details'"
+              class="tw-h-10"
+              :href="`/poi/${item.raw.properties.metadata.id}/details`"
+              :label="t('poisTable.details')"
+              target="_self"
+            >
+              <FontAwesomeIcon icon="external-link-alt" />
+              {{ t('poisTable.details') }}
+            </IconButton>
+            <Field
+              v-else
+              :context="getContext(col.key)"
+              :recursion-stack="[col.key]"
+              :field="{ field: col.key }"
+              :details="t('poisTable.details')"
+              :properties="item.raw.properties"
+              :geom="item.raw.geometry"
+            />
+          </td>
+        </tr>
+      </template>
+      <template #loading>
+        <VSkeletonLoader type="table-row@10" />
+      </template>
+    </VDataTable>
+  </VCard>
 </template>
+
+<style>
+/* stylelint-disable selector-class-pattern */
+.v-data-table .v-table__wrapper > table tbody > tr:nth-child(even) > td,
+.v-data-table .v-table__wrapper > table > thead > tr th {
+  background: #F3F4F6;
+}
+</style>
diff --git a/components/UI/CookiesConsent.vue b/components/UI/CookiesConsent.vue
index c3c09dd40..96048b02e 100644
--- a/components/UI/CookiesConsent.vue
+++ b/components/UI/CookiesConsent.vue
@@ -5,6 +5,7 @@ import type { VidoConfig } from '~/utils/types-config'
 import { defineNuxtComponent, useRequestHeaders } from '#app'
 import 'vue-cookie-accept-decline/dist/vue-cookie-accept-decline.css'
 import ExternalLink from '~/components/UI/ExternalLink.vue'
+import { siteStore as useSiteStore } from '~/stores/site'
 
 export default defineNuxtComponent({
   components: {
@@ -14,7 +15,7 @@ export default defineNuxtComponent({
 
   computed: {
     vidoConfig(): VidoConfig {
-      return this.$vidoConfig(useRequestHeaders())
+      return useSiteStore().config || this.$vidoConfig(useRequestHeaders())
     },
 
     doNotTrack(): boolean {
diff --git a/cypress/e2e/category/pois-list.cy.ts b/cypress/e2e/category/pois-list.cy.ts
index e67a3f9a4..de52396dd 100644
--- a/cypress/e2e/category/pois-list.cy.ts
+++ b/cypress/e2e/category/pois-list.cy.ts
@@ -10,6 +10,15 @@ const hostnames = {
   'http://127.0.0.1:3000': '/fixtures/teritorio/references/',
 }
 
+const htmlValidateRules = {
+  rules: {
+    'no-dup-class': 0,
+    'wcag/h63': 0,
+    'input-missing-label': 0,
+    'element-permitted-content': 0,
+  },
+}
+
 describe('pois table', () => {
   beforeEach(() => {
     mockSSRAPI(hostnames, teritorioReferenceAPIFixture, {
@@ -30,7 +39,7 @@ describe('pois table', () => {
     cy.get('td')
       .contains(teritorioReferenceAPIFixture.pois.features[0].properties.name as string)
 
-    cy.htmlvalidate()
+    cy.htmlvalidate(htmlValidateRules)
   })
 
   it('should be interative', () => {
@@ -50,6 +59,6 @@ describe('pois table', () => {
     // Unselect the selector before validate
     cy.get('body').click()
 
-    cy.htmlvalidate()
+    cy.htmlvalidate(htmlValidateRules)
   })
 })
diff --git a/eslint.config.js b/eslint.config.js
index 666cddc0c..ceed83de6 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -9,6 +9,7 @@ export default antfu(
     files: ['**/*.vue'],
     rules: {
       'vue/no-unused-refs': 0,
+      'vue/valid-v-slot': 0,
     },
   },
   {
diff --git a/lib/apiMenu.ts b/lib/apiMenu.ts
index b7f21350e..ac11ef687 100644
--- a/lib/apiMenu.ts
+++ b/lib/apiMenu.ts
@@ -114,8 +114,8 @@ export interface MenuGroup extends ApiMenuGroup {
 
 export type MenuItem = MenuGroup | ApiMenuLink | ApiMenuCategory
 
-export function getMenu(vidoConfig: VidoConfig): Promise<MenuItem[]> {
-  return fetch(
+export async function getMenu(vidoConfig: VidoConfig): Promise<MenuItem[]> {
+  return await fetch(
     `${vidoConfig.API_ENDPOINT}/${vidoConfig.API_PROJECT}/${vidoConfig.API_THEME}/menu.json`,
   ).then((data) => {
     if (data.ok) {
diff --git a/lib/apiPois.ts b/lib/apiPois.ts
index 385ee4dfd..fa6c63fd7 100644
--- a/lib/apiPois.ts
+++ b/lib/apiPois.ts
@@ -166,13 +166,13 @@ export function getPoiByCategoryIdUrl(
   )
 }
 
-export function getPoiByCategoryId(
+export async function getPoiByCategoryId(
   vidoConfig: VidoConfig,
   categoryId: number | string,
   options: ApiPoisOptions = {},
 ): Promise<ApiPois> {
   options = Object.assign(defaultOptions, { geometry_as: 'point' }, options)
-  return fetch(getPoiByCategoryIdUrl(vidoConfig, categoryId, options)).then(
+  return await fetch(getPoiByCategoryIdUrl(vidoConfig, categoryId, options)).then(
     (data) => {
       if (data.ok) {
         return data.json() as unknown as ApiPois
diff --git a/lib/apiSettings.ts b/lib/apiSettings.ts
index 23334be8c..8778a1328 100644
--- a/lib/apiSettings.ts
+++ b/lib/apiSettings.ts
@@ -50,8 +50,8 @@ export interface Settings {
   themes: SiteInfosTheme[]
 }
 
-export function getSettings(vidoConfig: VidoConfig): Promise<Settings> {
-  return fetch(
+export async function getSettings(vidoConfig: VidoConfig): Promise<Settings> {
+  return await fetch(
     `${vidoConfig.API_ENDPOINT}/${vidoConfig.API_PROJECT}/${vidoConfig.API_THEME}/settings.json`,
   )
     .then((data) => {
diff --git a/locales/en-GB.ts b/locales/en-GB.ts
index c99fc5b88..875ff7b33 100644
--- a/locales/en-GB.ts
+++ b/locales/en-GB.ts
@@ -138,6 +138,7 @@ export default defineI18nLocale(() => {
       details: 'Details',
       downloadCsv: 'Download in CSV',
       downloadGeojson: 'Download in GeoJSON',
+      search: 'Search into the list',
       showOnMap: 'Show on Map',
     },
     categorySelector: {
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
index 5bee28d1e..d465a04f2 100644
--- a/locales/es-ES.ts
+++ b/locales/es-ES.ts
@@ -138,6 +138,7 @@ export default defineI18nLocale(() => {
       details: 'Detalles',
       downloadCsv: 'Descargar como CSV',
       downloadGeojson: 'Descargar como GeoJSON',
+      search: 'Buscar en la lista',
       showOnMap: 'Mostrar en el mapa',
     },
     categorySelector: {
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
index 2f01b1d70..34215eee9 100644
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -139,6 +139,7 @@ export default defineI18nLocale(() => {
       details: 'Détails',
       downloadCsv: 'Télécharger en CSV',
       downloadGeojson: 'Télécharger en GeoJSON',
+      search: 'Recherchez dans la liste',
       showOnMap: 'Afficher sur la carte',
     },
     categorySelector: {
diff --git a/pages/category/[id].vue b/pages/category/[id].vue
index b4d9894d5..c8428c901 100644
--- a/pages/category/[id].vue
+++ b/pages/category/[id].vue
@@ -1,171 +1,136 @@
-<script lang="ts">
-import { mapState, mapWritableState } from 'pinia'
-import type { Ref } from 'vue'
-
-import { defineNuxtComponent, useHead, useRequestHeaders, useRoute } from '#app'
-import { definePageMeta } from '#imports'
-import PoisList from '~/components/PoisList/PoisList.vue'
+<script setup lang="ts">
 import type { ContentEntry } from '~/lib/apiContent'
 import { getContents } from '~/lib/apiContent'
-import type { ApiMenuCategory, MenuItem } from '~/lib/apiMenu'
 import { getMenu } from '~/lib/apiMenu'
-import type { ApiPois } from '~/lib/apiPois'
-import { getPoiByCategoryId } from '~/lib/apiPois'
-import type {
-  PropertyTranslations,
-} from '~/lib/apiPropertyTranslations'
-import {
-  getPropertyTranslations,
-} from '~/lib/apiPropertyTranslations'
+import type { PropertyTranslations } from '~/lib/apiPropertyTranslations'
+import { getPropertyTranslations } from '~/lib/apiPropertyTranslations'
 import type { Settings } from '~/lib/apiSettings'
 import { getSettings, headerFromSettings } from '~/lib/apiSettings'
-import { getAsyncDataOrThrows } from '~/lib/getAsyncData'
 import { vidoConfig } from '~/plugins/vido-config'
-import { menuStore } from '~/stores/menu'
-import { siteStore } from '~/stores/site'
-import type { VidoConfig } from '~/utils/types-config'
-
-export default defineNuxtComponent({
-  components: {
-    PoisList,
-  },
-
-  async setup(): Promise<{
-    config: VidoConfig
-    settings: Ref<Settings>
-    contents: Ref<ContentEntry[]>
-    propertyTranslations: Ref<PropertyTranslations>
-    id: string
-    menuItems: Ref<MenuItem[]>
-    pois: Ref<ApiPois>
-  }> {
-    definePageMeta({
-      validate({ params }) {
-        return (
-          typeof params.id === 'string' && /^[,-_:a-zA-Z0-9]+$/.test(params.id)
-        )
-      },
-    })
-
-    const params = useRoute().params
-    const configRef = await getAsyncDataOrThrows('configRef', () =>
-      Promise.resolve(siteStore().config || vidoConfig(useRequestHeaders())))
-    const config: VidoConfig = configRef.value
-
-    const fetchSettings = getAsyncDataOrThrows('fetchSettings', () =>
-      siteStore().settings
-        ? Promise.resolve(siteStore().settings as Settings)
-        : getSettings(config))
-
-    const fetchContents = getAsyncDataOrThrows('fetchContents', () =>
-      siteStore().contents
-        ? Promise.resolve(siteStore().contents as ContentEntry[])
-        : getContents(config))
-
-    const fetchPropertyTranslations: Promise<Ref<PropertyTranslations>>
-      = getAsyncDataOrThrows('fetchPropertyTranslations', () =>
-        siteStore().translations
-          ? Promise.resolve(siteStore().translations as PropertyTranslations)
-          : getPropertyTranslations(config))
-
-    const fetchMenuItems = getAsyncDataOrThrows('fetchMenuItems', () =>
-      menuStore().menuItems !== undefined
-        ? Promise.resolve(Object.values(menuStore().menuItems!))
-        : getMenu(config))
-
-    const fetchPoiByCategoryId = getAsyncDataOrThrows(
-      `fetchPoiByCategoryId-${params.id}`,
-      () =>
-        getPoiByCategoryId(config, params.id as string, {
-          geometry_as: 'point',
-          short_description: true,
-        }),
+import { menuStore as useMenuStore } from '~/stores/menu'
+import { siteStore as useSiteStore } from '~/stores/site'
+import Header from '~/components/Layout/Header.vue'
+import Footer from '~/components/Layout/Footer.vue'
+import PoisTable from '~/components/PoisList/PoisTable.vue'
+import CategorySelector from '~/components/PoisList/CategorySelector.vue'
+
+// Query param validation
+definePageMeta({
+  validate({ params }) {
+    return (
+      typeof params.id === 'string' && /^[,-_:a-zA-Z0-9]+$/.test(params.id)
     )
-    const [settings, contents, propertyTranslations, menuItems, pois]
-      = await Promise.all([
-        fetchSettings,
-        fetchContents,
-        fetchPropertyTranslations,
-        fetchMenuItems,
-        fetchPoiByCategoryId,
-      ])
-
-    return {
-      config,
-      settings,
-      contents,
-      propertyTranslations,
-      id: params.id as string,
-      menuItems,
-      pois,
-    }
   },
+})
 
-  computed: {
-    ...mapState(menuStore, ['getCurrentCategory']),
-    ...mapWritableState(siteStore, {
-      locale: 'locale',
-      globalConfig: 'config',
-      globalSettings: 'settings',
-      globalContents: 'contents',
-      globalTranslations: 'translations',
-    }),
-  },
+const router = useRouter()
+const param = useRoute().params
+const id = Number.parseInt(param.id as string)
+const siteStore = useSiteStore()
+const menuStore = useMenuStore()
+const { $vidoConfigSet, $settings, $propertyTranslations, $trackingInit } = useNuxtApp()
 
-  created() {
-    this.globalConfig = this.config
-    if (this.menuItems)
-      menuStore().fetchConfig(this.menuItems)
+// TODO: Get this globally as share it across components / pages
+let config = siteStore.config
 
-    this.globalSettings = this.settings
-    this.globalContents = this.contents
-    this.globalTranslations = this.propertyTranslations
+if (process.server && !config) {
+  config = vidoConfig(useRequestHeaders())
+  $vidoConfigSet(config)
+  siteStore.$patch({ config })
+}
 
-    this.$settings.set(this.settings)
-    this.$propertyTranslations.set(this.propertyTranslations)
-  },
+if (!config)
+  throw createError({ statusCode: 500, statusMessage: 'Wrong config', fatal: true })
 
-  beforeMount() {
-    this.$trackingInit(this.config)
-    this.$vidoConfigSet(this.config)
-  },
+// Fetch common data
+// TODO: Move common data on upper-level (ex: layout)
+const categoryListData = ref<{
+  settings: Settings
+  contents: ContentEntry[]
+  translations: PropertyTranslations
+}>()
+const { data: cachedCategoryListData } = useNuxtData('categoryList')
 
-  mounted() {
-    const { params } = useRoute()
-    this.locale = this.$i18n.locale
-    this.handleCategoryUpdate(Number.parseInt(Array.isArray(params.id) ? params.id[0] : params.id))
-  },
-  methods: {
-    getCategory(categoryId: number): ApiMenuCategory {
-      // Fetching category by ID
-      // TODO: Has to be done in setup() but menuItems is touched in created() hook
-      const category = this.getCurrentCategory(categoryId)
-      if (!category) {
-        throw createError({
-          statusCode: 404,
-          statusMessage: 'Category Not Found',
-        })
-      }
-      return category
-    },
-    handleCategoryUpdate(categoryId: number) {
-      const category = this.getCategory(categoryId)
-      this.settings.themes[0].title = category.category.name
-      useHead(headerFromSettings(this.settings))
-    },
-  },
-})
+if (cachedCategoryListData.value) {
+  categoryListData.value = cachedCategoryListData.value
+}
+else {
+  const { data, error } = await useAsyncData('categoryList', async () => {
+    const [settings, contents, translations] = await Promise.all([
+      getSettings(config!),
+      getContents(config!),
+      getPropertyTranslations(config!),
+    ])
+
+    return { settings, contents, translations }
+  })
+
+  if (error.value || !data.value)
+    throw createError({ statusCode: 500, statusMessage: 'Global config not found.', fatal: true })
+
+  categoryListData.value = data.value
+}
+
+// MenuItems
+const { data: cachedMenuItems } = useNuxtData('menu-items')
+if (cachedMenuItems.value) {
+  menuStore.fetchConfig(cachedMenuItems.value)
+}
+else {
+  const { data, error } = await useAsyncData('menu-items', async () => await getMenu(config!))
+
+  if (error.value || !data.value)
+    throw createError({ statusCode: 404, statusMessage: 'Menu not found', fatal: true })
+
+  menuStore.fetchConfig(data.value)
+}
+
+const { settings, contents, translations } = categoryListData.value!
+const category = menuStore.getCurrentCategory(id)
+
+if (!category) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Category Not Found',
+  })
+}
+
+settings.themes[0].title = category.category.name
+useHead(headerFromSettings(settings))
+
+// Not sure about future usage as we could have data from useNuxtData
+$settings.set(settings)
+$propertyTranslations.set(translations)
+
+if (process.client)
+  $trackingInit(config)
+
+function onCategoryUpdate(categoryId: number) {
+  if (!categoryId)
+    return
+
+  router.push(`/category/${categoryId}`)
+}
 </script>
 
 <template>
-  <PoisList
-    :settings="settings"
-    :nav-menu-entries="contents"
-    :initial-category-id="parseInt(id)"
-    :initial-pois="pois"
-    class="page-index"
-    @category-update="handleCategoryUpdate"
-  />
+  <VContainer fluid>
+    <Header
+      :theme="settings.themes[0]"
+      :nav-menu-entries="contents"
+    >
+      <template #search>
+        <CategorySelector
+          class="w-50"
+          :menu-items="menuStore.menuItems || {}"
+          :category-id="id"
+          @category-change="onCategoryUpdate"
+        />
+      </template>
+    </Header>
+    <PoisTable :category="category" />
+    <Footer :attributions="settings.attributions" />
+  </VContainer>
 </template>
 
 <style lang="scss" scoped>
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
index cbe8b7351..ffbfaf68e 100644
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@@ -1,11 +1,17 @@
 import { createVuetify } from 'vuetify'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
+import { VDataTable } from 'vuetify/labs/VDataTable'
+import { VSkeletonLoader } from 'vuetify/labs/VSkeletonLoader'
 import 'vuetify/styles'
 
 import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
+    components: {
+      VDataTable,
+      VSkeletonLoader,
+    },
     icons: {
       defaultSet: 'mdi',
       aliases,