diff --git a/flake.nix b/flake.nix
index 8a993b6..b96faf8 100644
--- a/flake.nix
+++ b/flake.nix
@@ -190,7 +190,7 @@
 
           # When modifying npm dependencies, replace the hash with pkgs.lib.fakeSha256
           # then run `nix build .#frontend`. Use the hash in the error to replace the value.
-          npmDepsHash = "sha256-bEtkS+1YhC66d1iBX0w+5a2Sots7lyoDYDnSpl28iVI=";
+          npmDepsHash = "sha256-dVEKDZa/Bk1vUXzlH49Vaok5L01T9DRo64mOuTIiyks=";
 
           installPhase = ''
             runHook preInstall
diff --git a/frontend/assets/main.css b/frontend/assets/main.css
index 878e488..fde3789 100644
--- a/frontend/assets/main.css
+++ b/frontend/assets/main.css
@@ -40,3 +40,15 @@ body,
 .coco-text {
   color: #ffffff;
 }
+
+/*
+remove the arrow set in p-popover::before
+can be removed once the issue is fixed in primevue
+*/
+.p-popover::before,
+.p-popover::after,
+.p-confirmpopup::before,
+.p-confirmpopup::after {
+  content: none;
+  display: none;
+}
\ No newline at end of file
diff --git a/frontend/assets/richtext.css b/frontend/assets/richtext.css
new file mode 100644
index 0000000..55bb2a7
--- /dev/null
+++ b/frontend/assets/richtext.css
@@ -0,0 +1,64 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    .rich-text-content h1 {
+        @apply text-3xl font-bold mb-2;
+    }
+
+    .rich-text-content h2 {
+        @apply text-2xl font-bold mb-2;
+    }
+
+    .rich-text-content h3 {
+        @apply text-xl font-bold mb-2;
+    }
+
+    .rich-text-content h4 {
+        @apply text-lg font-bold mb-2;
+    }
+
+    .rich-text-content h5 {
+        @apply text-base font-bold mb-2;
+    }
+
+    .rich-text-content h6 {
+        @apply text-sm font-bold mb-1;
+    }
+
+    .rich-text-content p {
+        @apply mb-4 leading-tight;
+    }
+
+    .rich-text-content ul {
+        @apply list-disc pl-5 mb-4;
+    }
+
+    .rich-text-content a {
+        @apply underline text-blue-600 hover:text-blue-800;
+    }
+
+    .rich-text-content em,
+    .rich-text-content i {
+        @apply italic;
+    }
+
+    .rich-text-content strong,
+    .rich-text-content b {
+        @apply font-bold;
+    }
+
+    .rich-text-content u {
+        @apply underline;
+    }
+
+    .rich-text-content s {
+        @apply line-through;
+    }
+
+    .rich-text-content q,
+    .rich-text-content blockquote {
+        @apply border-l-4 border-gray-300 pl-2 italic;
+    }
+}
\ No newline at end of file
diff --git a/frontend/components/CommentsDisplayer.vue b/frontend/components/CommentsDisplayer.vue
index 9972a08..77964d8 100644
--- a/frontend/components/CommentsDisplayer.vue
+++ b/frontend/components/CommentsDisplayer.vue
@@ -1,11 +1,12 @@
 <template>
-  <Accordion :active-index="0">
-    <AccordionTab
+  <Accordion :value="sortedComments[0].id">
+    <AccordionPanel
       v-for="comment in sortedComments"
       :key="comment.id"
+      :value="comment.id"
     >
-      <template #header>
-        <span class="flex align-items-center gap-2 w-full">
+      <AccordionHeader>
+        <span class="flex items-center gap-2 w-full">
           {{ comment.author }} - {{ new Date(comment.created_at).toLocaleDateString() }}
           <Tag
             v-if="!public && (comment as AdminComment).moderated"
@@ -22,18 +23,22 @@
             @delete="(id, name, onDeleteDone) => emit('delete', id, name, onDeleteDone)"
           />
         </span>
-      </template>
+      </AccordionHeader>
+
       <!-- eslint-disable vue/no-v-html -->
-      <p
-        style="white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;"
-        v-html="purify_strict(comment.text)"
-      />
+      <AccordionContent>
+        <p
+          style="white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;"
+          class="rich-text-content"
+          v-html="purify_strict(comment.text)"
+        />
 
-      <ViewerCommonFormFields
-        :fields="props.commentFormFields"
-        :data="comment.data"
-      />
-    </AccordionTab>
+        <ViewerCommonFormFields
+          :fields="props.commentFormFields"
+          :data="comment.data"
+        />
+      </AccordionContent>
+    </AccordionPanel>
   </Accordion>
 </template>
 
diff --git a/frontend/components/NominatimPicker.vue b/frontend/components/NominatimPicker.vue
index a6da8e7..bddeab6 100644
--- a/frontend/components/NominatimPicker.vue
+++ b/frontend/components/NominatimPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <form @submit.prevent="searchNominatim">
-      <InputGroup class="mb-4 mt-2">
+      <InputGroup class="mb-6 mt-2">
         <InputText
           v-model="locationInput"
           placeholder="Rechercher une adresse"
@@ -25,7 +25,7 @@
     </div>
     <div
       v-else-if="locationSelected && resultsSearched"
-      class="h-20rem"
+      class="h-80"
     >
       <SingleEntityMap
         :coordinates="transformedCoordinates"
diff --git a/frontend/components/StartPopup.vue b/frontend/components/StartPopup.vue
index f6093ea..9cf5c95 100644
--- a/frontend/components/StartPopup.vue
+++ b/frontend/components/StartPopup.vue
@@ -10,11 +10,14 @@
     :style="{ width: '50rem' }"
     :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
   >
-    <div v-html="popupData.sanitizedContent" />
+    <div
+      class="rich-text-content"
+      v-html="popupData.sanitizedContent"
+    />
 
     <div v-if="popupData?.sanitizedCheckbox">
-      <span class="flex align-items-center gap-2">
-        <InputSwitch
+      <span class="flex items-center gap-2">
+        <ToggleSwitch
           v-model="validationCheckbox"
           input-id="validated_popup"
           class="flex-shrink-0"
diff --git a/frontend/components/admin/EditDeleteButtons.vue b/frontend/components/admin/EditDeleteButtons.vue
index a60775b..1bb6bce 100644
--- a/frontend/components/admin/EditDeleteButtons.vue
+++ b/frontend/components/admin/EditDeleteButtons.vue
@@ -4,7 +4,7 @@
     outlined
     rounded
     class="mx-2"
-    severity="warning"
+    severity="warn"
     @click="() => emit('edit', props.id)"
   >
     <template #icon>
@@ -36,7 +36,7 @@
     :header="`Suppression ${props.modelName} ${props.name}`"
     :style="{ width: '25rem' }"
   >
-    <span class="p-text-secondary block mb-3 -mt-2">
+    <span class="p-text-secondary block mb-4 -mt-2">
       <p>La suppression {{ props.modelName }} {{ props.name }}
         entraînera <b>la suppression définitive de {{ props.secureDeleteEntityCount }} entités</b>.</p>
       <p>Cette action ne pourra pas être annulée. Pour confirmer, veuillez entrer le nom {{ props.modelName }} ci-dessous :</p>
@@ -44,10 +44,10 @@
     <InputText
       id="repeatName"
       v-model="repeatName"
-      class="mb-4"
+      class="mb-6"
       autocomplete="off"
     />
-    <div class="flex justify-content-end gap-2">
+    <div class="flex justify-end gap-2">
       <Button
         type="button"
         label="Annuler"
@@ -58,7 +58,11 @@
         :disabled="repeatName.toUpperCase() != props.name.toUpperCase()"
         type="button"
         label="Confirmer"
-        @click="() => { secureDeleteDialogVisible = false, loading = true, emit('delete', props.id, props.name, onDeleteDone) }"
+        @click="() => {
+          secureDeleteDialogVisible = false,
+          loading = true,
+          emit('delete', props.id, props.name, onDeleteDone)
+        }"
       />
     </div>
   </Dialog>
diff --git a/frontend/components/admin/EntityKinshipTable.vue b/frontend/components/admin/EntityKinshipTable.vue
index 176ad64..944555f 100644
--- a/frontend/components/admin/EntityKinshipTable.vue
+++ b/frontend/components/admin/EntityKinshipTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column gap-2">
+  <div class="flex flex-col gap-2">
     <span class="flex gap-2">
       <Button
         v-if="!hasChildren"
@@ -48,7 +48,7 @@
       <Column
         field="display_name"
         header="Nom de l'entité"
-        class="max-w-25rem"
+        class="max-w-[25rem]"
         sortable
       />
 
diff --git a/frontend/components/admin/Navbar.vue b/frontend/components/admin/Navbar.vue
index 3de8fb7..ad7055b 100644
--- a/frontend/components/admin/Navbar.vue
+++ b/frontend/components/admin/Navbar.vue
@@ -4,12 +4,12 @@
     class="admin-navbar mb-2 coco-text top-0 left-0 fixed w-full"
   >
     <template #start>
-      <div class="flex align-items-center">
+      <div class="flex items-center">
         <Button
           outlined
           severity="secondary"
           small
-          class="p-1 mr-2"
+          class="!p-1 !mr-2"
           style="color: white; border-color: white;"
           @click="() => { emit('toggleSidebar') }"
         >
@@ -21,21 +21,24 @@
           </template>
         </Button>
 
-        <NuxtLink to="/admin">
+        <NuxtLink
+          to="/admin"
+          class="ml-3"
+        >
           <img
-            height="40"
-            width="40"
+            height="46"
+            width="46"
             alt="icon"
             :src="safehaven_logo"
           >
         </NuxtLink>
-        <div class="pl-3">
-          <h3 class="my-0">
+        <div class="navbar-text pl-4">
+          <div class="my-0 font-extrabold">
             SafeHaven
-          </h3>
-          <span class="text-xs font-italic">
+          </div>
+          <div class="text-xs italic">
             {{ state.options.general.title }}
-          </span>
+          </div>
         </div>
       </div>
     </template>
@@ -44,7 +47,6 @@
 
     <template #end>
       <Button
-        text
         rounded
         severity="secondary"
         class="p-0 mx-2"
@@ -55,7 +57,7 @@
         <template #default>
           <AdminUserAvatar
             :username="state.username!"
-            size="large"
+            size="normal"
           />
         </template>
       </Button>
@@ -77,7 +79,7 @@ import safehaven_logo from '~/assets/logo_square_white.svg'
 
 const emit = defineEmits(['toggleSidebar'])
 
-const accountMenu = ref<Menu | null>(null)
+const accountMenu = ref<typeof Menu | null>(null)
 
 const navbarRef: Ref<HTMLElement | null> = ref(null)
 
@@ -111,11 +113,15 @@ function toggleAccountMenu(event: Event) {
 
 <style>
 .admin-navbar {
-  background-color: #E86BA7;
-  border-radius: 0;
-  border-left-width: 0;
-  border-right-width: 0;
-  border-top-width: 0;
-  z-index: 1000;
+  background-color: #E86BA7 !important;
+  border-radius: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important;
+  border-top-width: 0 !important;
+  z-index: 1000 !important;
+}
+
+.navbar-text {
+  color: white;
 }
 </style>
diff --git a/frontend/components/admin/Sidebar.vue b/frontend/components/admin/Sidebar.vue
index f1ad1de..dee3dbc 100644
--- a/frontend/components/admin/Sidebar.vue
+++ b/frontend/components/admin/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <PanelMenu
     :model="getMenuItems()"
-    class="navigation-tree mt-4"
+    class="navigation-tree mt-6"
     style="width: 17rem;"
   >
     <template #item="{ item }">
@@ -27,7 +27,7 @@
             severity="danger"
           />
           <span
-            class="flex-grow-1 text-link"
+            class="grow text-link"
           >{{ item.label }}</span>
         </a>
       </NuxtLink>
@@ -49,7 +49,7 @@
           severity="danger"
         />
         <span
-          class="flex-grow-1 text-link"
+          class="grow text-link"
         >
           {{ item.label }}
         </span>
@@ -81,7 +81,7 @@ function getMenuItems() {
 }
 
 function classForLink(active: boolean) {
-  const classes = ['flex', 'align-items-center', 'cursor-pointer', 'text-color', 'px-3', 'py-2', 'gap-2']
+  const classes = ['flex', 'items-center', 'cursor-pointer', 'text-color', 'px-4', 'py-2', 'gap-2']
 
   if (active) {
     classes.push('active-link')
@@ -182,35 +182,36 @@ const nodes = computed(() => [
 }
 
 .p-panelmenu-panel {
-  border-width: 0;
+  border-width: 0 !important;
+  background: transparent !important;
 }
 
 .p-panelmenu-header-content {
-  cursor: pointer;
-  background-color: transparent;
+  cursor: pointer !important;
+  background-color: transparent !important;
 }
 
 .p-panelmenu-content {
-  background-color: transparent;
+  background-color: transparent !important;
 }
 
 .arrow-icon {
-  transform: rotate(0deg);
-  transition: all 0.2s ease-in-out;
+  transform: rotate(0deg) !important;
+  transition: all 0.2s ease-in-out !important;
 
 }
 
 div[aria-expanded="true"] .arrow-icon,
 li[aria-expanded="true"] .arrow-icon {
-  transform: rotate(-180deg);
-  transition: all 0.2s ease-in-out;
+  transform: rotate(-180deg) !important;
+  transition: all 0.2s ease-in-out !important;
 }
 
 a {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 
 .navigation-tree {
-  background-color: transparent;
+  background-color: transparent !important;
 }
 </style>
diff --git a/frontend/components/admin/families/EditForm.vue b/frontend/components/admin/families/EditForm.vue
index 668688f..fec642d 100644
--- a/frontend/components/admin/families/EditForm.vue
+++ b/frontend/components/admin/families/EditForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <form
-      class="flex flex-column gap-3 mx-4"
+      class="flex flex-col gap-4 mx-6 my-2"
       style="width:68rem;"
       @submit.prevent="onSave"
     >
@@ -13,10 +13,10 @@
         style="background-color: #FAF8FF;"
         :pt="{
           legend: {
-            class: 'border-1 surface-border',
+            class: '!border !border-surface',
           },
           content: {
-            class: 'flex flex-column align-items-stretch',
+            class: '!flex !flex-col justify-center items-stretch',
           },
         }"
         @dragover.prevent
@@ -26,16 +26,16 @@
           v-for="(field, index) in getFieldsForPage(page)"
           :key="field.key"
           :draggable="true"
-          class="draggable-item mb-2"
+          class="draggable-item !my-2"
           :legend="field.display_name"
           :toggleable="true"
           style="background-color: #FAEFFF;"
           :pt="{
             legend: {
-              class: 'border-1 surface-border',
+              class: '!border !border-surface !flex !items-center !justify-between !pl-3',
             },
             content: {
-              class: 'flex flex-column gap-3 ml-1 ',
+              class: '!flex !flex-col !justify-center !gap-4 !ml-1',
             },
           }"
           @dragstart="onDragStart($event, field)"
@@ -50,6 +50,7 @@
               text
               class="m-0 p-0 ml-2"
               severity="primary"
+              size="small"
               @click=" (event: Event) => confirm.require({
                 target: event.currentTarget as HTMLElement,
                 group: 'delete',
@@ -71,12 +72,13 @@
               </template>
             </Button>
           </template>
-          <span class="flex gap-5">
+
+          <span class="flex gap-8 my-2">
             <div
-              class="flex flex-column gap-3 mr-5"
+              class="flex flex-col gap-4 mr-8"
               style="min-width: 50%;"
             >
-              <span class="flex align-items-center gap-2 flex-grow-1">
+              <span class="flex items-center gap-2 grow">
 
                 <label :for="'display_name_' + index">Titre :</label>
                 <InputText
@@ -84,7 +86,7 @@
                   v-model="field.display_name"
                   :variant="hasFieldAttributeBeenEdited(index, 'display_name') ? 'filled': 'outlined'"
                   :invalid="!field.display_name"
-                  class="mr-4 flex-grow-1"
+                  class="mr-6 grow"
                 />
                 <Button
                   label="Modifier la clé"
@@ -97,9 +99,9 @@
                 />
               </span>
 
-              <span class="flex align-items-center gap-2">
+              <span class="flex items-center gap-2">
                 <label :for="'field_type_' + index"> Type : </label>
-                <Dropdown
+                <Select
                   :id="'field_type_' + index"
                   v-model="field.field_type"
                   :options="fieldTypeOptions"
@@ -108,7 +110,7 @@
                   @update:model-value="() => onFieldTypeChange(field)"
                 />
 
-                <Dropdown
+                <Select
                   v-if="['SingleLineText'].includes(field.field_type)"
                   :id="'field_type_' + index"
                   v-model="(field.field_type_metadata as StringFieldTypeMetadata).format"
@@ -121,7 +123,7 @@
                   :id="'field_type_metadata_' + index"
                   v-model="field.field_type_metadata"
                   label="Options"
-                  class="border-1 border-black-alpha-10"
+                  class="border border-black/10"
                   severity="secondary"
                   @click="() => {
                     editOptionsField = field
@@ -134,7 +136,7 @@
                   :id="'field_type_metadata_' + index"
                   v-model="field.field_type_metadata"
                   label="Évènements"
-                  class="border-1 border-black-alpha-10"
+                  class="border border-black/10"
                   severity="secondary"
                   @click="() => {
                     editEventsField = field
@@ -149,20 +151,19 @@
               </span>
             </div>
 
-            <div class="flex flex-column gap-3">
-              <span class="flex align-items-center gap-2">
+            <div class="flex flex-col gap-4">
+              <span class="flex items-center gap-2">
                 <label :for="'display_weight_' + index"> Ordre d'affichage : </label>
-                <Dropdown
+                <Select
                   :id="'display_weight_' + index"
                   :model-value="display_indexes[field.key]"
                   option-label="label"
                   option-value="value"
-                  :options="[{ value: 'notDisplayed',
-                               label: 'Non-affiché publiquement' }, ...Array.from({ length: max_display_index }, (_, i) => ({ value: i + 1, label: i + 1 }))]"
+                  :options="[{ value: 'notDisplayed', label: 'Non-affiché publiquement' }, ...Array.from({ length: max_display_index }, (_, i) => ({ value: i + 1, label: i + 1 }))]"
                   @update:model-value="(new_index : 'notDisplayed' | number) => onDisplayIndexChange(field.key, new_index) "
                 /> <!--  field.user_facing -->
               </span>
-              <span class="flex align-items-center gap-5">
+              <span class="flex items-center gap-8">
                 <AdminInputSwitchField
                   :id="'mandatory_' + index"
                   v-model="field.mandatory"
@@ -181,17 +182,17 @@
 
           </span>
 
-          <span class="flex align-items-center gap-2 mr-3">
+          <span class="flex items-center gap-2 mr-4">
             <label :for="'help_' + index">Texte d'aide :</label>
             <InputText
               :id="'help_' + index"
               v-model="field.help"
-              class="flex flex-grow-1"
+              class="flex grow"
               :variant="hasFieldAttributeBeenEdited(index, 'help') ? 'filled': 'outlined'"
             />
           </span>
         </Fieldset>
-        <div class="flex justify-content-center">
+        <div class="flex justify-center">
           <Button
             outlined
             rounded
@@ -214,7 +215,7 @@
         </div>
       </Fieldset>
 
-      <span class="flex gap-1 justify-content-end">
+      <span class="flex gap-1 justify-end">
         <NuxtLink to="/admin/families">
           <Button
             label="Annuler"
@@ -240,11 +241,11 @@
       :closable="false"
       :header="`Édition des options du champ ${editOptionsField!.display_name}`"
     >
-      <div class="flex flex-column gap-3">
+      <div class="flex flex-col gap-4">
         <div
           v-for="(option, index) in editOptionsOptions"
           :key="index"
-          class="flex align-items-center gap-2"
+          class="flex items-center gap-2"
         >
           <label :for="'option_label_' + index">Label :</label>
           <InputText
@@ -256,7 +257,7 @@
             v-tooltip.bottom="`Si activé, ce champ ne sera pas affiché dans les résultats lorsque cette option est sélectionnée`"
             :for="'option_hidden_' + index"
           >Cachée :</label>
-          <InputSwitch
+          <ToggleSwitch
             :id="'option_hidden_' + index"
             v-model="option.hidden"
           />
@@ -287,7 +288,7 @@
             </template>
           </Button>
         </div>
-        <span class="flex justify-content-center">
+        <span class="flex justify-center">
           <Button
             type="button"
             label="Ajouter une option"
@@ -295,7 +296,7 @@
           />
         </span>
 
-        <div class="flex justify-content-end gap-2">
+        <div class="flex justify-end gap-2">
           <Button
             type="button"
             label="Annuler"
@@ -322,11 +323,11 @@
       :closable="false"
       :header="`Édition des évènements du champ ${editEventsField!.display_name}`"
     >
-      <div class="flex flex-column gap-3">
+      <div class="flex flex-col gap-4">
         <div
           v-for="(event, index) in editEventsEvents"
           :key="index"
-          class="flex align-items-center gap-2"
+          class="flex items-center gap-2"
         >
           <label :for="'event_label_' + index">Label :</label>
           <InputText
@@ -371,7 +372,7 @@
             </template>
           </Button>
         </div>
-        <span class="flex justify-content-center">
+        <span class="flex justify-center">
           <Button
             type="button"
             label="Ajouter un évènement"
@@ -379,7 +380,7 @@
           />
         </span>
 
-        <div class="flex justify-content-end gap-2">
+        <div class="flex justify-end gap-2">
           <Button
             type="button"
             label="Annuler"
@@ -407,9 +408,9 @@
       :header="`Édition de la clé du champ ${editKeyField!.display_name}`"
     >
       <div
-        class="flex flex-column gap-3"
+        class="flex flex-col gap-4"
       >
-        <span class="flex align-items-center gap-2">
+        <span class="flex items-center gap-2">
           <label for="display_name_add">Titre :</label>
           <InputText
             id="display_name_add"
@@ -418,7 +419,7 @@
             placeholder="Adresse du coiffeur"
           />
         </span>
-        <span class="flex align-items-center gap-2 ml-2">
+        <span class="flex items-center gap-2 ml-2">
           <label for="key_add">Clé :</label>
           <InputText
             id="key_add"
@@ -433,7 +434,7 @@
             value="!"
           />
         </span>
-        <div class="flex justify-content-end gap-2">
+        <div class="flex justify-end gap-2">
           <Button
             type="button"
             label="Annuler"
@@ -458,9 +459,9 @@
       header="Ajout d'un nouveau champ"
     >
       <div
-        class="flex flex-column gap-3"
+        class="flex flex-col gap-4"
       >
-        <span class="flex align-items-center gap-2">
+        <span class="flex items-center gap-2">
           <label for="display_name_add">Titre :</label>
           <InputText
             id="display_name_add"
@@ -469,7 +470,7 @@
             placeholder="Adresse du coiffeur"
           />
         </span>
-        <span class="flex align-items-center gap-2 ml-2">
+        <span class="flex items-center gap-2 ml-2">
           <label for="key_add">Clé :</label>
           <InputText
             id="key_add"
@@ -484,7 +485,7 @@
             value="!"
           />
         </span>
-        <div class="flex justify-content-end gap-2">
+        <div class="flex justify-end gap-2">
           <Button
             type="button"
             label="Annuler"
@@ -794,9 +795,10 @@ const fieldStringTypeOptions = [
 
 <style scoped>
 .draggable-item {
-cursor: grab;
+  cursor: grab;
 }
+
 .draggable-item:active {
-cursor: grabbing;
+  cursor: grabbing;
 }
 </style>
diff --git a/frontend/components/admin/input/ColorField.vue b/frontend/components/admin/input/ColorField.vue
index 81cca8d..27f0e87 100644
--- a/frontend/components/admin/input/ColorField.vue
+++ b/frontend/components/admin/input/ColorField.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-column gap-2">
-    <span class="flex align-items-center gap-2">
+  <div class="flex flex-col gap-2">
+    <span class="flex items-center gap-2">
       <InputText
         :id="props.id"
         :model-value="props.modelValue"
diff --git a/frontend/components/admin/input/EntitySelect.vue b/frontend/components/admin/input/EntitySelect.vue
index 9b7575f..5d7af52 100644
--- a/frontend/components/admin/input/EntitySelect.vue
+++ b/frontend/components/admin/input/EntitySelect.vue
@@ -7,8 +7,8 @@
     dismissable-mask
     :closable="false"
     :header="props.title"
-    class="flex flex-column gap-2 mt-5"
-    @update:visible="value => emit('update:visible', value)"
+    class="flex flex-col gap-2 mt-8"
+    @update:visible="(value: any) => emit('update:visible', value)"
   >
     <form @submit.prevent="refreshSearch">
       <InputGroup
@@ -21,7 +21,7 @@
 
         <Button
           type="button"
-          severity="warning"
+          severity="warn"
           label="Filtres"
           @click="(event: Event) => filters_overlay?.toggle(event)"
         >
@@ -67,7 +67,7 @@
       </div>
     </div>
     <Divider type="dotted" />
-    <div class="flex justify-content-end gap-2">
+    <div class="flex justify-end gap-2">
       <Button
         type="button"
         label="Annuler"
@@ -85,18 +85,18 @@
       />
     </div>
 
-    <OverlayPanel ref="filters_overlay">
+    <Popover ref="filters_overlay">
       <ViewerFilterConfig
         v-model:filteringTags="tagFilteringList"
         v-model:filteringCategories="categoryFilteringList"
         @filters-changed="refreshSearch"
       />
-    </OverlayPanel>
+    </Popover>
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import type OverlayPanel from 'primevue/overlaypanel'
+import type Popover from 'primevue/popover'
 import type { AdminCachedEntity, AdminPaginatedCachedEntities, Category, Tag } from '~/lib'
 import state from '~/lib/admin-state'
 
@@ -111,7 +111,7 @@ const props = withDefaults(defineProps<{
   title: 'Choix d\'une entité',
 })
 
-const filters_overlay = ref<OverlayPanel>()
+const filters_overlay = ref<typeof Popover>()
 
 const search_query = ref('')
 const categoryFilteringList = ref<(Category & { active: boolean })[]>([])
diff --git a/frontend/components/admin/input/IconUpload.vue b/frontend/components/admin/input/IconUpload.vue
index 2ee5ae9..7b7dc28 100644
--- a/frontend/components/admin/input/IconUpload.vue
+++ b/frontend/components/admin/input/IconUpload.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="flex gap-2 align-items-center"
+    class="flex gap-2 items-center"
   >
     <Button
       label="Modifier l'icône"
@@ -12,10 +12,10 @@
     v-model:visible="visible"
     modal
     header="Modifier l'icône"
-    class="w-30rem"
+    class="w-[30rem]"
   >
-    <span class="flex gap-2 align-items-center">
-      <div class="flex flex-column gap-1 align-items-center">
+    <span class="flex gap-2 items-center">
+      <div class="flex flex-col gap-1 items-center">
         <FileUpload
           mode="basic"
           name="file"
@@ -37,7 +37,7 @@
       >
         <b>OU</b>
       </Divider>
-      <div class="flex flex-column gap-1 align-items-center">
+      <div class="flex flex-col gap-1 items-center">
         <InputText
           v-model="downloadFromUrl"
           placeholder="http://url.com/icon.svg"
diff --git a/frontend/components/admin/input/NumberField.vue b/frontend/components/admin/input/NumberField.vue
index 6362fc9..434f74c 100644
--- a/frontend/components/admin/input/NumberField.vue
+++ b/frontend/components/admin/input/NumberField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column gap-2">
+  <div class="flex flex-col gap-2">
     <label :for="id">{{ label }} <RequiredIndicator v-if="!props.optional" /></label>
     <InputNumber
       :id="props.id"
diff --git a/frontend/components/admin/input/PolicyPermissionField.vue b/frontend/components/admin/input/PolicyPermissionField.vue
index ef92552..6ccce79 100644
--- a/frontend/components/admin/input/PolicyPermissionField.vue
+++ b/frontend/components/admin/input/PolicyPermissionField.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-column gap-3">
-    <span class="flex align-items-center gap-2">
-      <InputSwitch
+  <div class="flex flex-col gap-4">
+    <span class="flex items-center gap-2">
+      <ToggleSwitch
         :model-value="props.modelValue.allow_all"
         :input-id="`${props.label}.allow_all`"
         @update:model-value="(value:boolean) => emit('update:model-value', { ...props.modelValue, allow_all: value })"
@@ -10,7 +10,7 @@
     </span>
     <div
       v-if="props.modelValue.allow_all"
-      class="flex flex-column gap-2"
+      class="flex flex-col gap-2"
     >
       <label :for="`${props.label}.force_exclude`">Sélectionner les {{ props.label }} à exclure (le cas échéant)</label>
       <MultiSelect
@@ -24,7 +24,7 @@
     </div>
     <div
       v-if="!props.modelValue.allow_all"
-      class="flex flex-column gap-2"
+      class="flex flex-col gap-2"
     >
       <label :for="`${props.label}.allow_list`">Sélectionner les {{ props.label }} à inclure</label>
       <MultiSelect
diff --git a/frontend/components/admin/input/SwitchField.vue b/frontend/components/admin/input/SwitchField.vue
index 4316f86..cd90f27 100644
--- a/frontend/components/admin/input/SwitchField.vue
+++ b/frontend/components/admin/input/SwitchField.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-column gap-2">
-    <span class="flex align-items-center gap-2">
-      <InputSwitch
+  <div class="flex flex-col gap-2">
+    <span class="flex items-center gap-2">
+      <ToggleSwitch
         :model-value="props.modelValue"
         :input-id="props.id"
         :disabled="props.disabled"
diff --git a/frontend/components/admin/input/TextField.vue b/frontend/components/admin/input/TextField.vue
index 8c2f3b8..6fa18de 100644
--- a/frontend/components/admin/input/TextField.vue
+++ b/frontend/components/admin/input/TextField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column gap-2">
+  <div class="flex flex-col gap-2">
     <label :for="id">{{ label }} <RequiredIndicator v-if="!props.optional" /></label>
     <InputText
       v-if="textLength==undefined || textLength=='short'"
diff --git a/frontend/components/form/Adresses.vue b/frontend/components/form/Adresses.vue
index a91aa51..0f668a0 100644
--- a/frontend/components/form/Adresses.vue
+++ b/frontend/components/form/Adresses.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex align-items-center gap-2">
-    <label>Adresses <RequiredIndicator /></label>
+  <div class="flex items-center gap-2">
+    <label>Adresses</label>
     <Button
       size="small"
       outlined
@@ -18,11 +18,11 @@
     />
     <Column>
       <template #body="slotProps">
-        <div class="flex justify-content-end">
+        <div class="flex justify-end">
           <Button
             outlined
             rounded
-            severity="warning"
+            severity="warn"
             class="mr-1"
             @click="() => editAddress(slotProps.index)"
           >
diff --git a/frontend/components/form/CategorySelect.vue b/frontend/components/form/CategorySelect.vue
index c2339b8..33f1580 100644
--- a/frontend/components/form/CategorySelect.vue
+++ b/frontend/components/form/CategorySelect.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-column gap-2">
+  <div class="flex flex-col gap-2">
     <label for="category_id">Catégorie <RequiredIndicator /></label>
-    <Dropdown
+    <Select
       id="category_id"
       :model-value="props.modelValue"
       :options="categories"
@@ -20,7 +20,7 @@
       <template #option="slotProps">
         <CategoryTag :category="slotProps.option" />
       </template>
-    </Dropdown>
+    </Select>
     <small v-if="props.helperText">{{ props.helperText }}</small>
   </div>
 </template>
diff --git a/frontend/components/form/DynamicField.vue b/frontend/components/form/DynamicField.vue
index 38ac5fc..9639ac7 100644
--- a/frontend/components/form/DynamicField.vue
+++ b/frontend/components/form/DynamicField.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="props.formField.field_type=='Boolean'"
-    class="flex flex-column gap-2"
+    class="flex flex-col gap-2"
   >
-    <span class="flex gap-2 align-items-center">
-      <InputSwitch
+    <span class="flex gap-2 items-center">
+      <ToggleSwitch
         :id="props.formField.key"
         :model-value="(props.fieldContent as (boolean | undefined))"
         @update:model-value="updateField"
@@ -15,7 +15,7 @@
   </div>
   <div
     v-else
-    class="flex flex-column gap-2"
+    class="flex flex-col gap-2"
   >
     <label :for="props.formField.key">{{ props.formField.display_name }} <RequiredIndicator v-if="props.formField.mandatory" /></label>
     <InputText
@@ -61,7 +61,7 @@
       option-label="label"
       @update:model-value="updateField"
     />
-    <Calendar
+    <DatePicker
       v-if="props.formField.field_type=='Date'"
       :id="props.formField.key"
       :model-value="props.fieldContent as (Date | undefined)"
@@ -73,7 +73,7 @@
       show-button-bar
       @update:model-value="(value: Date | Date[] | (Date | null)[] | null | undefined) => updateField(value as (Date | undefined))"
     />
-    <Dropdown
+    <Select
       v-if="props.formField.field_type=='EnumSingleOption'"
       :id="props.formField.key"
       :model-value="(props.fieldContent as (string | undefined))"
@@ -94,26 +94,26 @@
     <div
       v-if="props.formField.field_type=='EventList'"
       :id="props.formField.key"
-      class="flex flex-column gap-1 border-1 p-2 surface-border border-round"
+      class="flex flex-col gap-1 border p-2 border-surface rounded-border"
     >
       <div
         v-for="(event, ev_index) in (props.fieldContent as EntityOrCommentEvent[])"
         :key="ev_index"
-        class="flex flex-column gap-2"
+        class="flex flex-col gap-2"
       >
-        <span class="flex flex-wrap align-items-center gap-3">
-          <Dropdown
+        <span class="flex flex-wrap items-center gap-4">
+          <Select
             v-model="event.type"
             placeholder="type d'évènement"
-            class="flex-grow-1"
+            class="grow"
             :options="props.formField.field_type_metadata?.event_types"
             option-value="value"
             option-label="label"
           />
           <!-- @update:model-value="new_type => (props.fieldContent as EntityOrCommentEvent[])[ev_index] = { type: new_type, date: event.date, details: event.details }" -->
-          <Calendar
+          <DatePicker
             v-model="event.date"
-            class="w-10rem"
+            class="w-40"
             placeholder="jj/mm/aaaa"
             date-format="dd/mm/yy"
             show-icon
@@ -137,7 +137,7 @@
           </Button>
         </span>
 
-        <span class="flex align-items-center gap-2">
+        <span class="flex items-center gap-2">
           <label for="">Détails (optionels): </label>
           <Textarea
             v-model="event.details"
@@ -148,7 +148,7 @@
           type="dashed"
         />
       </div>
-      <span class="flex justify-content-center">
+      <span class="flex justify-center">
         <Button
           rounded
           size="small"
@@ -171,7 +171,7 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
-import Calendar from 'primevue/calendar'
+import DatePicker from 'primevue/datepicker'
 import type { EntityOrCommentEvent, FieldContentMap, FormField } from '~/lib'
 
 type FormProps<T extends FormField> = {
diff --git a/frontend/components/form/TagSelect.vue b/frontend/components/form/TagSelect.vue
index 8525793..6d8ba8c 100644
--- a/frontend/components/form/TagSelect.vue
+++ b/frontend/components/form/TagSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column gap-2">
+  <div class="flex flex-col gap-2">
     <label for="tag_id">Tags</label>
     <div class="flex flex-wrap gap-1">
       <DisplayedTag
diff --git a/frontend/components/viewer/CommentAddForm.vue b/frontend/components/viewer/CommentAddForm.vue
index d5f6995..c7770f1 100644
--- a/frontend/components/viewer/CommentAddForm.vue
+++ b/frontend/components/viewer/CommentAddForm.vue
@@ -20,13 +20,13 @@
     v-model:visible="formVisible"
     modal
     closable
-    class="w-full max-w-30rem"
+    class="w-full max-w-md"
     :header="props.family.comment_form.title"
     :content-props="{ onClick: (event: Event) => { event.stopPropagation() } }"
   >
     <form
       v-if="curr_page == 0"
-      class="flex flex-grow-1 flex-column gap-3"
+      class="flex grow flex-col gap-4"
       @submit.prevent="curr_page+=1"
     >
       <AdminInputTextField
@@ -44,7 +44,7 @@
         />
       </div>
 
-      <span class="flex gap-1 justify-content-end">
+      <span class="flex gap-1 justify-end">
         <Button
           label="Suivant"
           type="submit"
@@ -56,12 +56,12 @@
     <form
       v-for="page in Array.from({ length: page_count }, (_, i) => i+1)"
       :key="`Page ${page}`"
-      class="flex flex-grow-1 flex-column gap-3 w-30rem"
+      class="flex grow flex-col gap-4 w-[30rem]"
       @submit.prevent="() => page == page_count ? onSave() : curr_page+=1"
     >
       <div
         v-if="curr_page == page"
-        class="flex flex-grow-1 flex-column gap-3 max-w-30rem"
+        class="flex grow flex-col gap-4 max-w-[30rem]"
       >
         <FormDynamicField
           v-for="field in props.family.comment_form.fields.toSorted((field_a, field_b) => field_a.form_weight - field_b.form_weight)"
@@ -71,7 +71,7 @@
         />
 
         <span
-          class="flex gap-1 justify-content-end"
+          class="flex gap-1 justify-end"
         >
           <Button
             label="Précédent"
diff --git a/frontend/components/viewer/EntityAddForm.vue b/frontend/components/viewer/EntityAddForm.vue
index 055a8d4..0a9e841 100644
--- a/frontend/components/viewer/EntityAddForm.vue
+++ b/frontend/components/viewer/EntityAddForm.vue
@@ -16,7 +16,7 @@
     v-model:visible="formVisible"
     modal
     closable
-    class="w-full max-w-30rem"
+    class="w-full max-w-md"
     :header="props.family.entity_form.title"
     :content-props="{ onClick: (event: Event) => { event.stopPropagation() } }"
   >
@@ -24,12 +24,12 @@
     <form
       v-for="page in Array.from({ length: entityPageCount+1 }, (_, i) => i)"
       :key="`EntityPage${page}`"
-      class="flex flex-grow-1 flex-column gap-3"
+      class="flex grow flex-col gap-4"
       @submit.prevent="curr_page += 1"
     >
       <div
         v-if="curr_page == page"
-        class="flex flex-grow-1 flex-column gap-3"
+        class="flex grow flex-col gap-4"
       >
         <template v-if="page == 0">
           <AdminInputTextField
@@ -56,7 +56,7 @@
           />
         </template>
 
-        <span class="flex gap-1 justify-content-end">
+        <span class="flex gap-1 justify-end">
           <Button
             v-if="page > 0"
             label="Précédent"
@@ -77,12 +77,12 @@
     <form
       v-for="page in Array.from({ length: commentPageCount+1 }, (_, i) => i)"
       :key="`CommentPage${page}`"
-      class="flex flex-grow-1 flex-column gap-3 max-w-30rem"
+      class="flex grow flex-col gap-4 max-w-[30rem]"
       @submit.prevent="curr_page < (entityPageCount + commentPageCount + 1) ? curr_page += 1 : onSave()"
     >
       <div
         v-if="curr_page == entityPageCount + 1 + page"
-        class="flex flex-grow-1 flex-column gap-3"
+        class="flex grow flex-col gap-4"
       >
         <template v-if="page == 0">
           <AdminInputTextField
@@ -107,7 +107,7 @@
           />
         </template>
 
-        <span class="flex gap-1 justify-content-end">
+        <span class="flex gap-1 justify-end">
           <Button
             label="Précédent"
             outlined
diff --git a/frontend/components/viewer/FamilySwitcher.vue b/frontend/components/viewer/FamilySwitcher.vue
index e413d2e..0417e33 100644
--- a/frontend/components/viewer/FamilySwitcher.vue
+++ b/frontend/components/viewer/FamilySwitcher.vue
@@ -6,7 +6,7 @@
     aria-labelledby="custom"
   >
     <template #option="slotProps">
-      <div class="button-content flex align-items-center justify-between">
+      <div class="button-content flex items-center justify-between">
         <AppIcon
           :icon-name="slotProps.option.icon_hash"
           dynamic
diff --git a/frontend/components/viewer/FilterConfig.vue b/frontend/components/viewer/FilterConfig.vue
index 44fb3fd..25eef30 100644
--- a/frontend/components/viewer/FilterConfig.vue
+++ b/frontend/components/viewer/FilterConfig.vue
@@ -1,166 +1,174 @@
 <template>
-  <TabView>
-    <TabPanel header="Général">
-      <div>
-        <span class="font-medium text-900 block mb-2">Catégories</span>
+  <Tabs value="0">
+    <TabList>
+      <Tab value="0">
+        Général
+      </Tab>
+      <Tab value="1">
+        Avancé
+      </Tab>
+    </TabList>
 
-        <div
-          :style="{
-            maxHeight: props.maximumHeight,
-            overflowY: 'auto',
-          }"
-        >
+    <TabPanels>
+      <TabPanel value="0">
+        <div>
+          <span class="font-medium text-surface-900 block mb-2">Catégories</span>
           <div
-            v-for="category in props.filteringCategories"
-            :key="category.id"
-            class="flex align-items-center justify-between mb-2"
+            :style="{
+              maxHeight: props.maximumHeight,
+              overflowY: 'auto',
+            }"
           >
-            <InputSwitch
-              v-model="category.active"
-              @update:model-value="(value:boolean) => categoryFiltersChanged()"
-            />
             <div
-              class="round ml-2 mr-2"
-              :style="{
-                backgroundColor: category.fill_color,
-                borderColor: category.border_color,
-              }"
+              v-for="category in props.filteringCategories"
+              :key="category.id"
+              class="flex items-center mb-2"
             >
-              <AppIcon
-                size="16px"
-                dynamic
-                :icon-name="category.icon_hash!"
+              <ToggleSwitch
+                v-model="category.active"
+                @update:model-value="() => categoryFiltersChanged()"
               />
+              <div
+                class="round ml-2 mr-2"
+                :style="{
+                  backgroundColor: category.fill_color,
+                  borderColor: category.border_color,
+                }"
+              >
+                <AppIcon
+                  size="16px"
+                  dynamic
+                  :icon-name="category.icon_hash!"
+                />
+              </div>
+              {{ category.title }}
             </div>
-            {{ category.title }}
           </div>
+          <Button
+            outlined
+            size="small"
+            class="m-1"
+            @click="invertFilteringCategories"
+          >
+            Inverser
+          </Button>
+          <Button
+            outlined
+            size="small"
+            class="m-1"
+            @click="resetFilteringCategories"
+          >
+            Réinitialiser
+          </Button>
+          <Button
+            outlined
+            size="small"
+            class="m-1"
+            @click="selectAllFilteringCategories"
+          >
+            Tout sélectionner
+          </Button>
         </div>
-        <Button
-          outlined
-          size="small"
-          class="m-1"
-          @click="invertFilteringCategories"
-        >
-          Inverser
-        </Button>
-        <Button
-          outlined
-          size="small"
-          class="m-1"
-          @click="resetFilteringCategories"
-        >
-          Réinitialiser
-        </Button>
-        <Button
-          outlined
-          size="small"
-          class="m-1"
-          @click="selectAllFilteringCategories"
-        >
-          Tout sélectionner
-        </Button>
-      </div>
-      <div
-        class="filter-settings mt-2"
-      >
-        <span class="font-medium text-900 block mb-2">Filtres</span>
         <div
-          v-for="tag in props.filteringTags.filter(t => t.is_filter)"
-          :key="tag.id"
-          class="mb-2 p-1"
+          class="filter-settings mt-2"
         >
-          <div class="text-800 mb-1">
-            {{ tag.filter_description }}
+          <span class="font-medium text-surface-900 block mb-2">Filtres</span>
+          <div
+            v-for="tag in props.filteringTags.filter(t => t.is_filter)"
+            :key="tag.id"
+            class="mb-2 p-1"
+          >
+            <div class="text-surface-800 mb-1">
+              {{ tag.filter_description }}
+            </div>
+
+            <SelectButton
+              v-model="tag.active"
+              :options="[true, null, false]"
+              option-label="title"
+              aria-labelledby="custom"
+              @change="tagFiltersChanged"
+            >
+              <template #option="slotProps">
+                <div class="button-content">
+                  <span>{{
+                    slotProps.option === false ? 'Caché'
+                    : slotProps.option === null
+                      ? 'Affiché' : 'Requis'
+                  }}</span>
+                </div>
+              </template>
+            </SelectButton>
           </div>
+        </div>
+      </TabPanel>
 
-          <SelectButton
-            v-model="tag.active"
-            :options="[true, null, false]"
-            option-label="title"
-            aria-labelledby="custom"
-            @change="tagFiltersChanged"
+      <TabPanel value="1">
+        <span class="font-medium text-surface-900 block mb-2">Tags</span>
+        <InputGroup
+          class="mb-6 mt-2"
+        >
+          <InputText
+            v-model="tagSearch"
+            placeholder="Rechercher un tag"
+          />
+          <Button
+            v-tooltip.bottom="'Retirer la recherche'"
+            severity="warn"
+            @click="tagSearch = ''"
           >
-            <template #option="slotProps">
-              <div class="button-content">
-                <span>{{
-                  slotProps.option === false ? 'Caché'
-                  : slotProps.option === null
-                    ? 'Affiché' : 'Requis'
-                }}</span>
-              </div>
+            <template #icon>
+              <AppIcon icon-name="clear" />
             </template>
-          </SelectButton>
-        </div>
-      </div>
-    </TabPanel>
-
-    <TabPanel
-      header="Avancé"
-    >
-      <span class="font-medium text-900 block mb-2">Tags</span>
-      <InputGroup
-        class="mb-4 mt-2"
-      >
-        <InputText
-          v-model="tagSearch"
-          placeholder="Rechercher un tag"
-        />
-        <Button
-          v-tooltip.bottom="'Retirer la recherche'"
-          severity="warning"
-          @click="tagSearch = ''"
-        >
-          <template #icon>
-            <AppIcon icon-name="clear" />
-          </template>
-        </Button>
-        <Button
-          v-tooltip.bottom="'Retirer tous les filtres'"
-          severity="danger"
-          @click="resetFilters()"
-        >
-          <template #icon>
-            <AppIcon icon-name="filterOff" />
-          </template>
-        </Button>
-      </InputGroup>
-      <div
-        class="filter-settings"
-        :style="{
-          maxHeight: props.maximumHeight,
-          overflowY: 'auto',
-        }"
-      >
+          </Button>
+          <Button
+            v-tooltip.bottom="'Retirer tous les filtres'"
+            severity="danger"
+            @click="resetFilters()"
+          >
+            <template #icon>
+              <AppIcon icon-name="filterOff" />
+            </template>
+          </Button>
+        </InputGroup>
         <div
-          v-for="tag in shownAdvancedTags()"
-          :key="tag.id"
-          class="mb-2 p-1"
+          class="filter-settings"
+          :style="{
+            maxHeight: props.maximumHeight,
+            overflowY: 'auto',
+          }"
         >
-          <div class="mb-1">
-            <DisplayedTag :tag="tag" />
-          </div>
-
-          <SelectButton
-            v-model="tag.active"
-            :options="[true, null, false]"
-            option-label="title"
-            aria-labelledby="custom"
-            @change="() => tagFiltersChanged()"
+          <div
+            v-for="tag in shownAdvancedTags()"
+            :key="tag.id"
+            class="mb-2 p-1"
           >
-            <template #option="slotProps">
-              <div class="button-content">
-                <span>{{
-                  slotProps.option === false ? 'Caché'
-                  : slotProps.option === null
-                    ? 'Affiché' : 'Requis'
-                }}</span>
-              </div>
-            </template>
-          </SelectButton>
+            <div class="mb-1">
+              <DisplayedTag :tag="tag" />
+            </div>
+
+            <SelectButton
+              v-model="tag.active"
+              :options="[true, null, false]"
+              option-label="title"
+              aria-labelledby="custom"
+              @change="() => tagFiltersChanged()"
+            >
+              <template #option="slotProps">
+                <div class="button-content">
+                  <span>{{
+                    slotProps.option === false ? 'Caché'
+                    : slotProps.option === null
+                      ? 'Affiché' : 'Requis'
+                  }}</span>
+                </div>
+              </template>
+            </SelectButton>
+          </div>
         </div>
-      </div>
-    </TabPanel>
-  </TabView>
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/components/viewer/FullResult.vue b/frontend/components/viewer/FullResult.vue
index 43fd409..a3c6e79 100644
--- a/frontend/components/viewer/FullResult.vue
+++ b/frontend/components/viewer/FullResult.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="col-12">
+    <div class="col-span-12">
       <div
-        class="flex flex-column sm:flex-row sm:align-items-stretch p-4 gap-3"
+        class="flex flex-col sm:flex-row sm:items-stretch p-6 gap-4"
       >
         <div
-          class="md:w-10rem flex flex-column"
+          class="md:w-40 flex flex-col"
         >
           <SingleEntityMap
             v-if="props.entity.web_mercator_x && props.entity.web_mercator_y"
@@ -24,30 +24,30 @@
           </div>
         </div>
 
-        <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-          <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+        <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+          <div class="flex flex-row md:flex-col justify-between items-start gap-2">
             <div>
               <CategoryTag
                 :category="state.getCategory(props.entity.category_id)"
                 :size="2"
               />
-              <div class="text-lg font-medium text-900 mt-2">
+              <div class="text-lg font-medium text-surface-900 mt-2">
                 {{ props.entity.display_name }}
               </div>
             </div>
             <div
-              class="surface-100 p-1"
+              class="bg-surface-100 p-1"
               style="border-radius: 30px"
             >
               {{ props.entity.plain_text_location }}
             </div>
           </div>
 
-          <div class="flex flex-column md:align-items-end gap-5">
+          <div class="flex flex-col md:items-end gap-8">
             <div class="flex flex-row-reverse md:flex-row gap-2">
               <Button
                 label="Voir en détail"
-                class="flex-auto md:flex-initial white-space-nowrap"
+                class="flex-auto md:flex-initial whitespace-nowrap"
                 @click="changeActiveEntity(props.entity)"
               >
                 <template #icon>
diff --git a/frontend/components/viewer/Information.vue b/frontend/components/viewer/Information.vue
index 70a9139..b529418 100644
--- a/frontend/components/viewer/Information.vue
+++ b/frontend/components/viewer/Information.vue
@@ -1,40 +1,56 @@
+<!-- eslint-disable vue/no-v-html -->
+
 <template>
-  <TabView>
-    <TabPanel
-      :header="state.title"
-    >
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <div v-html="siteInfo" />
-    </TabPanel>
-    <TabPanel header="SafeHaven">
-      <div class="flex align-items-center justify-content-center">
-        <div class="logo hot-pink-bg p-3 flex align-items-center justify-content-center">
-          <img
-            src="assets/logo_secondary.svg"
-            alt="SafeHaven"
-          >
+  <Tabs value="0">
+    <TabList>
+      <Tab value="0">
+        {{ state.title }}
+      </Tab>
+      <Tab value="1">
+        SafeHaven
+      </Tab>
+    </TabList>
+
+    <TabPanels>
+      <TabPanel value="0">
+        <div
+          class="rich-text-content"
+          v-html="siteInfo"
+        />
+      </TabPanel>
+
+      <TabPanel value="1">
+        <div class="flex items-center justify-center">
+          <div class="logo hot-pink-bg p-4 flex items-center justify-center">
+            <img
+              src="assets/logo_secondary.svg"
+              alt="SafeHaven"
+            >
+          </div>
         </div>
-      </div>
-      <p class="text-center">
-        SafeHaven est une solution opensource de création de carte collaborative.<br>Vous pouvez facilement créer votre carte !
-      </p>
-      <p class="text-center">
-        <a
-          :href="safeHavenRepoUrl"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button
-            label="Découvrir sur GitHub"
+
+        <p class="text-center !m-4">
+          SafeHaven est une solution opensource de création de carte collaborative.<br>Vous pouvez facilement créer votre carte !
+        </p>
+
+        <p class="text-center !m-4">
+          <a
+            :href="safeHavenRepoUrl"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            <template #icon>
-              <AppIcon icon-name="github" />
-            </template>
-          </Button>
-        </a>
-      </p>
-    </TabPanel>
-  </TabView>
+            <Button
+              label="Découvrir sur GitHub"
+            >
+              <template #icon>
+                <AppIcon icon-name="github" />
+              </template>
+            </Button>
+          </a>
+        </p>
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/components/viewer/Navbar.vue b/frontend/components/viewer/Navbar.vue
index 4cc36f3..18ad122 100644
--- a/frontend/components/viewer/Navbar.vue
+++ b/frontend/components/viewer/Navbar.vue
@@ -1,55 +1,57 @@
 <template>
   <Toolbar>
     <template #start>
-      <div class="flex align-items-center">
+      <div class="flex items-center">
         <img
           height="40"
           width="40"
           alt="icon"
           :src="state.logo ?? defaultLogo"
         >
-        <div class="pl-3">
-          <h3 class="my-0">
+        <div class="pl-4">
+          <div class="my-0 font-extrabold">
             {{ state.title }}
-          </h3>
-          <span class="text-xs font-italic">
+          </div>
+          <div class="text-xs italic">
             {{ state.subtitle }}
-          </span>
+          </div>
         </div>
       </div>
     </template>
 
     <template #center>
-      <ViewerFamilySwitcher
-        v-if="props.showFamilySwitcher"
-        class="hidden xl:block"
-      />
+      <div class="hidden lg:block">
+        <ViewerFamilySwitcher
+          v-if="props.showFamilySwitcher"
+        />
+      </div>
     </template>
 
     <template #end>
-      <div class="align-items-center">
-        <Button
-          outlined
-          severity="primary"
-          small
-          class="p-1 mr-2 block xl:hidden"
-          @click="openOverflowPanel"
-        >
-          <template #default>
-            <AppIcon
-              icon-name="menu"
-              size="24px"
-            />
-          </template>
-        </Button>
+      <div class="items-center">
+        <div class="block lg:hidden">
+          <Button
+            outlined
+            severity="primary"
+            small
+            @click="openOverflowPanel"
+          >
+            <template #default>
+              <AppIcon
+                icon-name="menu"
+                size="24px"
+              />
+            </template>
+          </Button>
+        </div>
 
-        <OverlayPanel ref="overflowPanel">
-          <div class="flex flex-column gap-3">
+        <Popover ref="overflowPanel">
+          <div class="flex flex-col gap-4">
             <ViewerFamilySwitcher
               v-if="props.showFamilySwitcher"
             />
 
-            <div class="flex flex-column gap-2">
+            <div class="flex flex-col gap-2">
               <Button
                 label="Info"
                 outlined
@@ -92,10 +94,10 @@
               </Button>
             </div>
           </div>
-        </OverlayPanel>
+        </Popover>
 
         <div
-          class="hidden xl:flex justify-content-end align-items-center gap-2"
+          class="hidden lg:flex justify-end items-center gap-2"
         >
           <Button
             label="Informations"
@@ -140,14 +142,14 @@
     </template>
   </Toolbar>
 
-  <OverlayPanel ref="filterOp">
+  <Popover ref="filterOp">
     <ViewerFilterConfig
       v-model:filteringTags="state.filteringTags"
       v-model:filteringCategories="state.filteringCategories"
-      class="w-25rem"
+      class="w-[25rem]"
       @filters-changed="filtersChanged"
     />
-  </OverlayPanel>
+  </Popover>
 
   <Dialog
     v-model:visible="filterPopupVisible"
@@ -160,99 +162,115 @@
       @filters-changed="filtersChanged"
     />
   </Dialog>
-
-  <OverlayPanel ref="searchOp">
-    <div class="flex flex-column gap-3 w-25rem">
-      <TabView>
-        <TabPanel header="Chercher un point">
-          <form @submit.prevent="searchEntity">
-            <label for="placeSearch">
-              Recherche d'un point sur la carte
-            </label>
-
-            <InputGroup>
-              <InputText
-                v-model="entitySearch"
-              />
-              <Button type="submit">
-                <template #icon>
-                  <AppIcon icon-name="search" />
-                </template>
-              </Button>
-            </InputGroup>
-          </form>
-
-          <div v-if="currentSearchEntities().length > 0">
-            <Divider type="dotted" />
-
-            <div style="max-height: 500px; overflow-y: auto;">
-              <div
-                v-for="result in currentSearchEntities()"
-                :key="result.id"
-                class="result mb-2 p-2"
-                @click="entityChosen(result)"
-              >
-                <div>{{ result.display_name }}</div>
-
+  <Popover ref="searchOp">
+    <div class="flex flex-col gap-4 w-[25rem]">
+      <Tabs value="0">
+        <TabList>
+          <Tab value="0">
+            Chercher un point
+          </Tab>
+          <Tab value="1">
+            Chercher un lieu
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel value="0">
+            <form @submit.prevent="searchEntity">
+              <label for="placeSearch">
+                Recherche d'un point sur la carte
+              </label>
+              <InputGroup>
+                <InputText
+                  v-model="entitySearch"
+                />
+                <Button type="submit">
+                  <template #icon>
+                    <AppIcon icon-name="search" />
+                  </template>
+                </Button>
+              </InputGroup>
+            </form>
+
+            <div v-if="currentSearchEntities().length > 0">
+              <Divider type="dotted" />
+
+              <div style="max-height: 500px; overflow-y: auto;">
                 <div
-                  v-if="result.parent_display_name"
-                  class="text-xs"
+                  v-for="result in currentSearchEntities()"
+                  :key="result.id"
+                  class="result mb-2 p-2"
+                  @click="entityChosen(result)"
                 >
-                  {{ result.parent_display_name }}
+                  <div>{{ result.display_name }}</div>
+
+                  <div
+                    v-if="result.parent_display_name"
+                    class="text-xs"
+                  >
+                    {{ result.parent_display_name }}
+                  </div>
+
+                  <div class="mt-1">
+                    <CategoryTag :category="state.getCategory(result.category_id)" />
+                  </div>
                 </div>
-
-                <div class="mt-1">
-                  <CategoryTag :category="state.getCategory(result.category_id)" />
+              </div>
+            </div>
+          </TabPanel>
+
+          <TabPanel value="1">
+            <form @submit.prevent="searchLocation">
+              <label for="placeSearch">
+                Recherche d'une ville, d'un lieu, d'une adresse
+              </label>
+
+              <InputGroup>
+                <InputText
+                  v-model="placeSearch"
+                  placeholder="Tours, France"
+                />
+                <Button type="submit">
+                  <template #icon>
+                    <AppIcon icon-name="search" />
+                  </template>
+                </Button>
+              </InputGroup>
+            </form>
+
+            <div v-if="oneSearchMade && currentLocationsResults.length > 0">
+              <Divider type="dotted" />
+
+              <div style="max-height: 500px; overflow-y: auto;">
+                <div
+                  v-for="result in currentLocationsResults"
+                  :key="result.id"
+                  class="result mb-2 p-2"
+                  @click="locationChosen(result)"
+                >
+                  <span>{{ result.title }}</span><br>
+                  <span class="text-xs text-surface-800">{{ result.subtitle }}</span>
                 </div>
               </div>
             </div>
-          </div>
-        </TabPanel>
-
-        <TabPanel header="Chercher un lieu">
-          <form @submit.prevent="searchLocation">
-            <label for="placeSearch">
-              Recherche d'une ville, d'un lieu, d'une adresse
-            </label>
-
-            <InputGroup>
-              <InputText
-                v-model="placeSearch"
-                placeholder="Tours, France"
-              />
-              <Button type="submit">
-                <template #icon>
-                  <AppIcon icon-name="search" />
-                </template>
-              </Button>
-            </InputGroup>
-          </form>
+            <div
+              v-else-if="oneSearchMade && currentLocationsResults.length == 0"
+              class="my-2"
+            >
+              <Message severity="error">
+                Aucun résultat trouvé
+              </Message>
+            </div>
 
-          <div v-if="currentLocationsResults.length > 0">
             <Divider type="dotted" />
 
-            <div style="max-height: 500px; overflow-y: auto;">
-              <div
-                v-for="result in currentLocationsResults"
-                :key="result.id"
-                class="result mb-2 p-2"
-                @click="locationChosen(result)"
-              >
-                <span>{{ result.title }}</span><br>
-                <span class="text-xs text-800">{{ result.subtitle }}</span>
-              </div>
+            <div class="text-xs text-surface-800">
+              Recherche avec Nominatim © OpenStreetMap Contributor
             </div>
-          </div>
-
-          <Divider type="dotted" />
-
-          <div class="text-xs text-800">
-            Recherche avec Nominatim © OpenStreetMap Contributor
-          </div>
-        </TabPanel>
-      </TabView>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
     </div>
-  </OverlayPanel>
+  </Popover>
 
   <Dialog
     v-model:visible="showInformation"
@@ -267,7 +285,7 @@
 </template>
 
 <script setup lang="ts">
-import type OverlayPanel from 'primevue/overlaypanel'
+import type Popover from 'primevue/popover'
 import type { Coordinate } from 'ol/coordinate'
 import state from '~/lib/viewer-state'
 import defaultLogo from '~/assets/logo_square.svg'
@@ -275,6 +293,8 @@ import type { Result as NominatimResult } from '~/lib/nominatim'
 import { freeFormSearch } from '~/lib/nominatim'
 import type { ViewerCachedEntity, ViewerPaginatedCachedEntitiesWithLocation } from '~/lib'
 
+const oneSearchMade = ref(false)
+
 export interface Props {
   showCategorySwitcher?: boolean
   showSearch?: boolean
@@ -293,9 +313,9 @@ const emit = defineEmits<{
   entityChosen: [ViewerCachedEntity]
 }>()
 
-const filterOp = ref<OverlayPanel>()
-const searchOp = ref<OverlayPanel>()
-const overflowPanel = ref<OverlayPanel>()
+const filterOp = ref<typeof Popover>()
+const searchOp = ref<typeof Popover>()
+const overflowPanel = ref<typeof Popover>()
 
 const placeSearch: Ref<string> = ref('')
 const entitySearch: Ref<string> = ref('')
@@ -324,6 +344,7 @@ function openOverflowPanel(event: Event) {
 
 async function searchLocation() {
   currentLocationsResults.value = await freeFormSearch(placeSearch.value)
+  oneSearchMade.value = true
 }
 
 async function searchEntity() {
diff --git a/frontend/components/viewer/common/EntityDisplayer.vue b/frontend/components/viewer/common/EntityDisplayer.vue
index 4ecdb4a..9e16b0f 100644
--- a/frontend/components/viewer/common/EntityDisplayer.vue
+++ b/frontend/components/viewer/common/EntityDisplayer.vue
@@ -1,148 +1,173 @@
 <template>
   <div>
-    <TabView
-      v-model:activeIndex="active"
-    >
-      <TabPanel
-        v-if="hasChildren()"
-        header="Rattachés"
-      >
-        <Card
-          v-for="child in props.entity?.children"
-          :key="child.id"
-          class="mb-1"
+    <Tabs v-model:value="tabValue">
+      <TabList>
+        <Tab
+          v-if="hasChildren()"
+          value="0"
         >
-          <template #title>
-            {{ child.display_name }}
-          </template>
-
-          <template #content>
-            <p class="m-0">
-              <CategoryTag :category="getCategory(child.category_id)" />
-            </p>
-          </template>
-
-          <template #footer>
-            <div
-              class="flex justify-content-end align-items-end"
-            >
-              <Button
-                severity="secondary"
-                @click="newEntitySelected(child.id)"
+          Rattachés
+        </Tab>
+        <Tab value="1">
+          Informations
+        </Tab>
+        <Tab
+          v-if="hasParent()"
+          value="2"
+        >
+          Rattachements
+        </Tab>
+        <Tab
+          v-if="hasComments()"
+          value="3"
+        >
+          Commentaires
+        </Tab>
+      </TabList>
+
+      <TabPanels>
+        <TabPanel
+          v-if="hasChildren()"
+          value="0"
+        >
+          <Card
+            v-for="child in props.entity?.children"
+            :key="child.id"
+            class="mb-1"
+          >
+            <template #title>
+              {{ child.display_name }}
+            </template>
+
+            <template #content>
+              <p class="m-0">
+                <CategoryTag :category="getCategory(child.category_id)" />
+              </p>
+            </template>
+
+            <template #footer>
+              <div
+                class="flex justify-end items-end"
               >
-                Voir
-              </Button>
-            </div>
-          </template>
-        </Card>
-      </TabPanel>
-
-      <TabPanel
-        header="Informations"
-      >
-        <div
-          v-if="(props.entity?.tags.length ?? 0) > 0"
-          class="mt-1 flex flex-wrap gap-1"
+                <Button
+                  severity="secondary"
+                  @click="newEntitySelected(child.id)"
+                >
+                  Voir
+                </Button>
+              </div>
+            </template>
+          </Card>
+        </TabPanel>
+
+        <TabPanel
+          value="1"
         >
-          <Divider type="dotted" />
+          <div
+            v-if="(props.entity?.tags.length ?? 0) > 0"
+            class="mt-1 flex flex-wrap gap-1"
+          >
+            <Divider type="dotted" />
 
-          <DisplayedTag
-            v-for="tag in props.entity?.tags"
-            :key="tag.id"
-            :tag="tag"
-          />
+            <DisplayedTag
+              v-for="tag in props.entity?.tags"
+              :key="tag.id"
+              :tag="tag"
+            />
 
-          <Divider type="dotted" />
-        </div>
-
-        <div>
-          <h3>
-            {{ props.entity?.entity.locations.length > 1 ? 'Adresses' : 'Adresse' }}
-          </h3>
-          <ul>
-            <li
-              v-for="location in props.entity?.entity.locations"
-              :key="location.plain_text"
-            >
-              {{ location.plain_text }}
-            </li>
-          </ul>
-        </div>
+            <Divider type="dotted" />
+          </div>
+
+          <div>
+            <h3>
+              {{ props.entity?.entity.locations.length > 1 ? 'Adresses' : 'Adresse' }}
+            </h3>
+            <ul>
+              <li
+                v-for="location in props.entity?.entity.locations"
+                :key="location.plain_text"
+              >
+                {{ location.plain_text }}
+              </li>
+            </ul>
+          </div>
 
-        <!--
+          <!--
           We display the DiscreteScore fields first, as they give context on the entity.
         -->
-        <Fieldset
-          v-if="hasScores()"
-          legend="Notes"
-        >
-          <div
-            v-for="score in discreteScoreAveragesOnComments().filter(score => !isNaN(score.average))"
-            :key="score.key"
-            class="m-0"
+          <Fieldset
+            v-if="hasScores()"
+            legend="Notes"
           >
-            <h4 class="m-0">
-              {{ score.display_name }}
-            </h4>
-            <ViewerCommonScoreJauge :score="score.average" />
-          </div>
-        </Fieldset>
-
-        <ViewerCommonFormFields
-          :fields="props.entity?.family.entity_form.fields"
-          :data="props.entity?.entity.data"
-        />
-      </TabPanel>
-
-      <TabPanel
-        v-if="hasParent()"
-        header="Rattachements"
-      >
-        <Card
-          v-for="parent in props.entity?.parents"
-          :key="parent.id"
-          class="mb-1"
-        >
-          <template #title>
-            {{ parent.display_name }}
-          </template>
-
-          <template #content>
-            <p class="m-0">
-              <CategoryTag :category="getCategory(parent.category_id)" />
-            </p>
-          </template>
-
-          <template #footer>
             <div
-              class="flex justify-content-end align-items-end"
+              v-for="score in discreteScoreAveragesOnComments().filter(score => !isNaN(score.average))"
+              :key="score.key"
+              class="m-0"
             >
-              <Button
-                severity="secondary"
-                @click="newEntitySelected(parent.id)"
-              >
-                Voir
-              </Button>
+              <h4 class="m-0">
+                {{ score.display_name }}
+              </h4>
+              <ViewerCommonScoreJauge :score="score.average" />
             </div>
-          </template>
-        </Card>
-      </TabPanel>
-
-      <TabPanel
-        v-if="hasComments()"
-        header="Commentaires"
-      >
-        <CommentsDisplayer
-          public
-          :comments="props.entity.comments"
-          :comment-form-fields="props.entity!.family.comment_form.fields"
-        />
-      </TabPanel>
-    </TabView>
+          </Fieldset>
+
+          <ViewerCommonFormFields
+            :fields="props.entity?.family.entity_form.fields"
+            :data="props.entity?.entity.data"
+          />
+        </TabPanel>
+
+        <TabPanel
+          v-if="hasParent()"
+          value="2"
+        >
+          <Card
+            v-for="parent in props.entity?.parents"
+            :key="parent.id"
+            class="mb-1"
+          >
+            <template #title>
+              {{ parent.display_name }}
+            </template>
+
+            <template #content>
+              <p class="m-0">
+                <CategoryTag :category="getCategory(parent.category_id)" />
+              </p>
+            </template>
+
+            <template #footer>
+              <div
+                class="flex justify-end items-end"
+              >
+                <Button
+                  severity="secondary"
+                  @click="newEntitySelected(parent.id)"
+                >
+                  Voir
+                </Button>
+              </div>
+            </template>
+          </Card>
+        </TabPanel>
+
+        <TabPanel
+          v-if="hasComments()"
+          value="3"
+        >
+          <CommentsDisplayer
+            public
+            :comments="props.entity.comments"
+            :comment-form-fields="props.entity!.family.comment_form.fields"
+          />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
   </div>
 </template>
 
 <script setup lang="ts">
+import Tabs from 'primevue/tabs'
 import type { Category, ResolvedFetchedEntity } from '~/lib'
 
 const props = defineProps<{
@@ -154,7 +179,7 @@ const emits = defineEmits<{
   entitySelected: [string]
 }>()
 
-const active = ref(0)
+const tabValue = ref(hasChildren() ? '0' : '1')
 
 function getCategory(id: string) {
   return props.categories.find(c => c.id === id)!
@@ -197,7 +222,7 @@ function newEntitySelected(id: string) {
 watch(
   () => props.entity,
   (__, _) => {
-    active.value = 0
+    tabValue.value = hasChildren() ? '0' : '1'
   },
 )
 </script>
diff --git a/frontend/components/viewer/common/FormFields.vue b/frontend/components/viewer/common/FormFields.vue
index 03053e8..134dee3 100644
--- a/frontend/components/viewer/common/FormFields.vue
+++ b/frontend/components/viewer/common/FormFields.vue
@@ -24,6 +24,7 @@
 
     <div v-else-if="field.field_type == 'RichText'">
       <p
+        class="rich-text-content"
         v-html="getDataAsEscapedString(field.key)"
       />
     </div>
@@ -69,28 +70,30 @@
     </div>
 
     <div v-else-if="field.field_type == 'EventList'">
-      <Accordion :active-index="0">
-        <AccordionTab
+      <Accordion :value="0">
+        <AccordionPanel
           v-for="event in getSortedEventList(field.key)"
           :key="event"
         >
-          <template #header>
+          <AccordionHeader>
             <Tag
               :severity="event.severity"
               :value="event.title"
             />
-          </template>
-
-          <p>
-            <strong>Date :</strong> {{ event.date.toLocaleDateString() }}
-          </p>
-
-          <p v-if="event.comment && event.comment.length > 0">
-            <strong>Commentaire :</strong>
-            <br>
-            {{ event.comment }}
-          </p>
-        </AccordionTab>
+          </AccordionHeader>
+
+          <AccordionContent>
+            <p>
+              <strong>Date :</strong> {{ event.date.toLocaleDateString() }}
+            </p>
+
+            <p v-if="event.comment && event.comment.length > 0">
+              <strong>Commentaire :</strong>
+              <br>
+              {{ event.comment }}
+            </p>
+          </AccordionContent>
+        </AccordionPanel>
       </Accordion>
     </div>
   </Fieldset>
diff --git a/frontend/layouts/admin-ui.vue b/frontend/layouts/admin-ui.vue
index 46004ff..15fcf77 100644
--- a/frontend/layouts/admin-ui.vue
+++ b/frontend/layouts/admin-ui.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-column h-full w-full logoized">
+  <div class="flex flex-col h-full w-full logoized">
     <AdminNavbar
-      @toggle-sidebar="() => { sidebarCollapsed = !sidebarCollapsed; }"
+      @toggle-sidebar="toggleSidebar"
     />
 
     <div
       ref="contentContainerRef"
-      class="flex w-full flex-grow-1 content-container"
+      class="flex w-full grow content-container"
     >
       <div
         ref="sidebarRef"
@@ -20,13 +20,13 @@
       </div>
 
       <div
-        class="flex flex-column w-full main-content"
+        class="flex flex-col w-full main-content"
         :class="{ collapsed: sidebarCollapsed }"
       >
         <Breadcrumb
           :home="{ label: '', url: '' }"
           :model="currentBreadcrumbs"
-          class="breadcrumb p-1"
+          class="breadcrumb !p-2"
         >
           <template #item="{ item, props }">
             <NuxtLink
@@ -46,9 +46,9 @@
           </template>
         </Breadcrumb>
 
-        <Card class="m-3 ml-0 mt-1 flex-grow-1 w-full scroll-container">
+        <Card class="m-4 ml-0 mt-1 grow w-full scroll-container">
           <template #title>
-            <div class="flex align-items-end">
+            <div class="flex items-center">
               <AppIcon
                 :icon-name="cardIconName"
                 class="mr-2"
@@ -83,7 +83,7 @@
 
     <ConfirmPopup group="delete">
       <template #message="slotProps">
-        <div class="flex flex-row align-items-center w-full gap-2 p-3 mb-2 pb-0">
+        <div class="flex flex-row items-center w-full gap-2 p-4 mb-2 pb-0">
           <AppIcon :icon-name="slotProps.message.icon!" />
           <span>{{ slotProps.message.message }} <b>{{ (slotProps.message as ExtendedConfirmationOptions).objectId }}</b></span>
         </div>
@@ -140,6 +140,13 @@ function initAdminLayout(
   currentBreadcrumbs.value = breadcrumb
 }
 
+let hasBeenChangedManually = false
+
+function toggleSidebar() {
+  sidebarCollapsed.value = !sidebarCollapsed.value
+  hasBeenChangedManually = true
+}
+
 provide('initAdminLayout', initAdminLayout)
 
 function resizeEverything() {
@@ -147,13 +154,16 @@ function resizeEverything() {
   const sidebar = sidebarRef.value
   const mainContent = contentContainerRef.value
 
+  // If the sidebar has been changed manually, we don't want to change it automatically
+  if (!hasBeenChangedManually) {
   // If the sidebar is not collapsed but we go under the breaking point, we collapse it
-  if (window.innerWidth < adminBreakingPoint && !sidebarCollapsed.value) {
-    sidebarCollapsed.value = true
-  }
-  // Else, if the sidebar is collapsed but we go over the breaking point, we expand it
-  else if (window.innerWidth >= adminBreakingPoint && sidebarCollapsed.value) {
-    sidebarCollapsed.value = false
+    if (window.innerWidth < adminBreakingPoint && !sidebarCollapsed.value) {
+      sidebarCollapsed.value = true
+    }
+    // Else, if the sidebar is collapsed but we go over the breaking point, we expand it
+    else if (window.innerWidth >= adminBreakingPoint && sidebarCollapsed.value) {
+      sidebarCollapsed.value = false
+    }
   }
 
   if (navbar && sidebar && mainContent) {
@@ -163,75 +173,76 @@ function resizeEverything() {
 }
 
 onMounted(() => {
-  resizeEverything()
   window.addEventListener('resize', resizeEverything)
+  nextTick(resizeEverything)
 })
 </script>
 
 <style>
 html, body {
-  background-color: #f7f7f7;
-  margin: 0;
-  padding: 0;
-  height: 100%;
+  background-color: #f7f7f7 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 100% !important;
 }
 
 .admin-navbar {
-  background-color: #E86BA7;
-  border-radius: 0;
-  border-left-width: 0;
-  border-right-width: 0;
-  border-top-width: 0;
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
+  background-color: #E86BA7 !important;
+  border-radius: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important;
+  border-top-width: 0 !important;
+  z-index: 1000 !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
 }
 
 .content-container {
-  display: flex;
+  display: flex !important;
 }
 
 .sidebar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 17.7rem;
-  background-color: #f7f7f7;
-  z-index: 1001;
-  transition: transform 0.3s ease-in-out;
-  transform: translateX(0);
-  padding: 1rem;
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  top: 74px;
+  width: 17.7rem !important;
+  background-color: #f7f7f7 !important;
+  z-index: 1001 !important;
+  transition: transform 0.3s ease-in-out !important;
+  transform: translateX(0) !important;
+  padding: 1rem !important;
 }
 
 .sidebar.collapsed {
-  transform: translateX(-100%);
+  transform: translateX(-100%) !important;
 }
 
 .sidebar-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: rgb(51, 65, 85);
+  font-size: 1.25rem !important;
+  font-weight: 600 !important;
+  color: rgb(51, 65, 85) !important;
 }
 
 .main-content {
-  margin-left: 18rem;
-  transition: margin-left 0.3s ease-in-out;
-  width: calc(100% - 18rem);
+  margin-left: 18rem !important;
+  transition: margin-left 0.3s ease-in-out !important;
+  width: calc(100% - 18rem) !important;
 }
 
 .main-content.collapsed {
-  margin-left: 0;
-  width: 100%;
+  margin-left: 0 !important;
+  width: 100% !important;
 }
 
 .scroll-container {
-  overflow-x: auto;
-  height: 100%;
+  overflow-x: auto !important;
+  height: 100% !important;
 }
 
 .breadcrumb {
-  background-color: transparent;
+  background-color: transparent !important;
 }
 </style>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 75a405f..a5dbd9f 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -1,15 +1,32 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import theme from './theme.mjs'
+
 export default defineNuxtConfig({
-  modules: ['nuxt-primevue', '@nuxt/eslint'],
+  modules: [
+    '@primevue/nuxt-module',
+    '@nuxt/eslint',
+    '@nuxtjs/tailwindcss',
+  ],
   ssr: false,
   devtools: { enabled: true },
   typescript: {
     typeCheck: true,
     strict: true,
   },
+  primevue: {
+    options: {
+      theme: {
+        preset: theme,
+        options: {
+          darkModeSelector: 'system',
+        },
+      },
+    },
+  },
   css: [
     '~/assets/main.css',
-    'primeflex/primeflex.css',
-    'primevue/resources/themes/aura-light-pink/theme.css',
+    '~/assets/richtext.css',
   ],
   eslint: {
     config: {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c18f1a1..ddabe0d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,22 +9,23 @@
       "dependencies": {
         "@mdi/js": "^7.4.47",
         "@nuxt/eslint": "^0.3.10",
+        "@nuxtjs/tailwindcss": "^6.12.0",
+        "@primevue/nuxt-module": "4.0.0-rc.2",
+        "@primevue/themes": "^4.0.0-beta.5",
         "@types/dompurify": "^3.0.5",
-        "@types/validator": "^13.11.10",
+        "@types/validator": "^13.12.0",
         "chart.js": "^4.4.3",
         "dompurify": "^3.1.4",
         "jdenticon": "^3.3.0",
-        "nuxt": "^3.11.2",
-        "nuxt-primevue": "^3.0.0",
+        "nuxt": "^3.12.2",
         "ol": "^9.1.0",
         "ol-contextmenu": "^5.4.0",
         "ol-ext": "^4.0.17",
         "openapi-fetch": "^0.9.3",
         "openapi-typescript": "^6.7.5",
-        "primeflex": "^3.3.1",
-        "primevue": "^3.50.0",
+        "primevue": "4.0.0-rc.2",
         "quill": "^1.3.7",
-        "sass": "^1.72.0",
+        "tailwindcss-primeui": "^0.3.1",
         "typescript": "^5.4.3",
         "validator": "^13.12.0",
         "vue": "^3.4.21",
@@ -33,6 +34,17 @@
         "vue3-openlayers": "^10.0.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -901,6 +913,48 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@csstools/selector-resolve-nested": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz",
+      "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz",
+      "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
     "node_modules/@es-joy/jsdoccomment": {
       "version": "0.43.1",
       "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.43.1.tgz",
@@ -1696,6 +1750,21 @@
       "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
       "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg=="
     },
+    "node_modules/@koa/router": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@koa/router/-/router-12.0.1.tgz",
+      "integrity": "sha512-ribfPYfHb+Uw3b27Eiw6NPqjhIhTpVFzEWLwyc/1Xp+DCdwRRyIlAUODX+9bPARF6aQtUu1+/PHzdNvRzcs/+Q==",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "http-errors": "^2.0.0",
+        "koa-compose": "^4.1.0",
+        "methods": "^1.1.2",
+        "path-to-regexp": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/@kurkle/color": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
@@ -2229,12 +2298,12 @@
       }
     },
     "node_modules/@nuxt/kit": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.12.1.tgz",
-      "integrity": "sha512-PHONuNCMqi3FYp0abgkhF3iH1j6CznJLMLpa8qxDGH532ALDcR1ThxbxytTA3fPiYulG2KenK8jloDfNdXOfCA==",
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.12.2.tgz",
+      "integrity": "sha512-5kOqEzfc3FsAncjK2je7vuq4/QsR5ypViTnop52mlFLf0Ku1NMCrWCSWYowAh4P0yqTACMAZYa+HdRZHscU84g==",
       "dependencies": {
-        "@nuxt/schema": "3.12.1",
-        "c12": "^1.10.0",
+        "@nuxt/schema": "3.12.2",
+        "c12": "^1.11.1",
         "consola": "^3.2.3",
         "defu": "^6.1.4",
         "destr": "^2.0.3",
@@ -2259,11 +2328,11 @@
       }
     },
     "node_modules/@nuxt/schema": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.12.1.tgz",
-      "integrity": "sha512-yPgZVczd0vKhG73E7N61+EZHZTjtCvh2LKVhvT7c69zLBnPPqJNK1oJfqsKUCOOHSm1o1rTG8Xaibp91q2I49w==",
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.12.2.tgz",
+      "integrity": "sha512-IRBuOEPOIe1CANKnO2OUiqZ1Hp/0htPkLaigK7WT6ef/SdIFZUd68Tqqejqy2AFrbgU9G80k3U7eg2XUdaiQlQ==",
       "dependencies": {
-        "compatx": "^0.1.3",
+        "compatx": "^0.1.8",
         "consola": "^3.2.3",
         "defu": "^6.1.4",
         "hookable": "^5.5.3",
@@ -2308,11 +2377,11 @@
       }
     },
     "node_modules/@nuxt/vite-builder": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.12.1.tgz",
-      "integrity": "sha512-Op6m/jm0MMWgpD+evKZR7L5zATa2gQhWrP0uZJjZc8yuo3TutkUyfTR5GzbH/ujJgk0TnqED6vYhmjLsT6n8pA==",
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.12.2.tgz",
+      "integrity": "sha512-gE7bKxbnd3OdlCHdZKgnbs2oOdcLHvEQ92LGnDCs9rCdsXazhQ7gcfow+FsKMp9MMu785O55gd4CiIgnn7N0BA==",
       "dependencies": {
-        "@nuxt/kit": "3.12.1",
+        "@nuxt/kit": "3.12.2",
         "@rollup/plugin-replace": "^5.0.7",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vitejs/plugin-vue-jsx": "^4.0.0",
@@ -2342,7 +2411,7 @@
         "ufo": "^1.5.3",
         "unenv": "^1.9.0",
         "unplugin": "^1.10.1",
-        "vite": "^5.2.13",
+        "vite": "^5.3.1",
         "vite-node": "^1.6.0",
         "vite-plugin-checker": "^0.6.4",
         "vue-bundle-renderer": "^2.1.0"
@@ -2365,6 +2434,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@nuxtjs/tailwindcss": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-6.12.0.tgz",
+      "integrity": "sha512-vXvEq8z177TQcx0tc10mw3O6T9WeN0iTL8hIKGDfidmr+HKReexJU01aPgHefFrCu4LJB70egYFYnywzB9lMyQ==",
+      "dependencies": {
+        "@nuxt/kit": "^3.11.2",
+        "autoprefixer": "^10.4.19",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "h3": "^1.11.1",
+        "pathe": "^1.1.2",
+        "postcss": "^8.4.38",
+        "postcss-nesting": "^12.1.1",
+        "tailwind-config-viewer": "^2.0.1",
+        "tailwindcss": "~3.4.3",
+        "ufo": "^1.5.3",
+        "unctx": "^2.3.1"
+      }
+    },
     "node_modules/@opentelemetry/api": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.8.0.tgz",
@@ -2930,6 +3018,69 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.1.tgz",
+      "integrity": "sha512-0psCSZr3906UwC4mTl2ol4aDoLvdbM0ekJFLKvCvC2oQ9z2YZhmUOVZQNNxBW34mChDzZYcAcRWXADQz3z5lBg==",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.0-rc.2.tgz",
+      "integrity": "sha512-S0RGGdW/M/ogIKeif6JwkJrPLC8pyuBYy2zZlloXXj6Fpvk416sMpO308sx89fqvba2d5poT9a+AbkGob4TDtQ==",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.0-rc.2.tgz",
+      "integrity": "sha512-VZFETBtmpAduGxXhxcYoqiuGriidyz4XR/4NcrR87CQpUWmT13PXfRoqZ1hLXwNZp1XferT1F5GtY1mHcYxJdw==",
+      "dependencies": {
+        "@primevue/core": "4.0.0-rc.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/metadata": {
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.0.0-rc.2.tgz",
+      "integrity": "sha512-m0y4IvoaxuIQr8e9v4JB0J9KxThHK73EK7HjO0213XDGkSPged3mynNn35j+8MPHbrSb7UZbun5YvS2sbil04w==",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/nuxt-module": {
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@primevue/nuxt-module/-/nuxt-module-4.0.0-rc.2.tgz",
+      "integrity": "sha512-5QSbsb4DfXAZDaCupPSqk6W0mme+07m7LDoA1F8jEiUhO1aeg09ME8vtuGGU/1+AJj5vFw86La8abb+7+chJqQ==",
+      "dependencies": {
+        "@nuxt/kit": "^3.7.3",
+        "@primevue/metadata": "4.0.0-rc.2",
+        "pathe": "^1.1.2",
+        "primevue": "4.0.0-rc.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/themes": {
+      "version": "4.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.0-beta.5.tgz",
+      "integrity": "sha512-ok7N6dXR/o3Jhd56rNY+eaGKne1gSOe3T8COP/EiBLzqdGzk+NGWNj6J9IuCEX6M8qhfPbulei5tEMQPxYDJeQ==",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rollup/plugin-alias": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz",
@@ -3674,9 +3825,9 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
     "node_modules/@types/validator": {
-      "version": "13.11.10",
-      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.10.tgz",
-      "integrity": "sha512-e2PNXoXLr6Z+dbfx5zSh9TRlXJrELycxiaXznp4S5+D2M3b9bqJEitNHA5923jhnB2zzFiZHa2f0SI1HoIahpg=="
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-nH45Lk7oPIJ1RVOF6JgFI6Dy0QpHEzq4QecZhvguxYPDwT8c93prCMqAtiIttm39voZ+DDR+qkNnMpJmMBRqag=="
     },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
@@ -5024,6 +5175,18 @@
         "node": ">=6.5"
       }
     },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
@@ -5144,6 +5307,11 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -5272,6 +5440,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -5332,6 +5505,14 @@
       "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
       "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg=="
     },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -5677,6 +5858,18 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/cache-content-type": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-content-type/-/cache-content-type-1.0.1.tgz",
+      "integrity": "sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==",
+      "dependencies": {
+        "mime-types": "^2.1.18",
+        "ylru": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -5714,6 +5907,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5988,6 +6189,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6133,6 +6343,25 @@
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
     },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -6143,6 +6372,18 @@
       "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-1.1.0.tgz",
       "integrity": "sha512-L2rLOcK0wzWSfSDA33YR+PUHDG10a8px7rUHKWbGLP4YfbsMed2KFUw5fczvDPbT98DDe3LEzviswl810apTEw=="
     },
+    "node_modules/cookies": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.9.1.tgz",
+      "integrity": "sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "keygrip": "~1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.37.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
@@ -6628,6 +6869,11 @@
       "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
       "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA=="
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
     "node_modules/diff": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
@@ -6655,6 +6901,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -8243,6 +8494,54 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/http-assert": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
+      "integrity": "sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==",
+      "dependencies": {
+        "deep-equal": "~1.0.1",
+        "http-errors": "~1.8.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-assert/node_modules/deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw=="
+    },
+    "node_modules/http-assert/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/http-assert/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/http-assert/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@@ -8378,7 +8677,9 @@
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
-      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -8577,6 +8878,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -8912,6 +9227,17 @@
       "integrity": "sha512-FgbqnEPiv5Vdtwt6Mxl7XSylttCC03cqP5ldNT2z+Kj0nLxPHJH4+1Cyf5Jasxhw93Rl4Oo11qRoUV72fmya2Q==",
       "optional": true
     },
+    "node_modules/keygrip": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
+      "integrity": "sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==",
+      "dependencies": {
+        "tsscmp": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -8942,60 +9268,205 @@
       "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.1.0.tgz",
       "integrity": "sha512-oHnmiBUVHz1V+URE77PNot2lv3QiYU2zQf1JjOVkMt3YDKGbu8NAFr+c4mcNOhdsGrB/VpVbRwPwhiXrPhxQbw=="
     },
-    "node_modules/kolorist": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
-      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="
+    "node_modules/koa": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/koa/-/koa-2.15.3.tgz",
+      "integrity": "sha512-j/8tY9j5t+GVMLeioLaxweJiKUayFhlGqNTzf2ZGwL0ZCQijd2RLHK0SLW5Tsko8YyyqCZC2cojIb0/s62qTAg==",
+      "dependencies": {
+        "accepts": "^1.3.5",
+        "cache-content-type": "^1.0.0",
+        "content-disposition": "~0.5.2",
+        "content-type": "^1.0.4",
+        "cookies": "~0.9.0",
+        "debug": "^4.3.2",
+        "delegates": "^1.0.0",
+        "depd": "^2.0.0",
+        "destroy": "^1.0.4",
+        "encodeurl": "^1.0.2",
+        "escape-html": "^1.0.3",
+        "fresh": "~0.5.2",
+        "http-assert": "^1.3.0",
+        "http-errors": "^1.6.3",
+        "is-generator-function": "^1.0.7",
+        "koa-compose": "^4.1.0",
+        "koa-convert": "^2.0.0",
+        "on-finished": "^2.3.0",
+        "only": "~0.0.2",
+        "parseurl": "^1.3.2",
+        "statuses": "^1.5.0",
+        "type-is": "^1.6.16",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": "^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4"
+      }
+    },
+    "node_modules/koa-compose": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz",
+      "integrity": "sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw=="
     },
-    "node_modules/launch-editor": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.1.tgz",
-      "integrity": "sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==",
+    "node_modules/koa-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/koa-convert/-/koa-convert-2.0.0.tgz",
+      "integrity": "sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==",
       "dependencies": {
-        "picocolors": "^1.0.0",
-        "shell-quote": "^1.8.1"
+        "co": "^4.6.0",
+        "koa-compose": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/lazystream": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
-      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+    "node_modules/koa-send": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/koa-send/-/koa-send-5.0.1.tgz",
+      "integrity": "sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==",
       "dependencies": {
-        "readable-stream": "^2.0.5"
+        "debug": "^4.1.1",
+        "http-errors": "^1.7.3",
+        "resolve-path": "^1.4.0"
       },
       "engines": {
-        "node": ">= 0.6.3"
+        "node": ">= 8"
       }
     },
-    "node_modules/lazystream/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+    "node_modules/koa-send/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa-send/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
       "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/lazystream/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    "node_modules/koa-send/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
     },
-    "node_modules/lazystream/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+    "node_modules/koa-static": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/koa-static/-/koa-static-5.0.0.tgz",
+      "integrity": "sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==",
       "dependencies": {
-        "safe-buffer": "~5.1.0"
+        "debug": "^3.1.0",
+        "koa-send": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 7.6.0"
       }
     },
-    "node_modules/lerc": {
-      "version": "3.0.0",
+    "node_modules/koa-static/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/koa/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa/node_modules/http-errors/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="
+    },
+    "node_modules/launch-editor": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.1.tgz",
+      "integrity": "sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "shell-quote": "^1.8.1"
+      }
+    },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/lerc": {
+      "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
       "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
     },
@@ -9215,6 +9686,14 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
     },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -9228,6 +9707,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mgrs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
@@ -9270,6 +9757,25 @@
         "node": ">=16"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -9303,6 +9809,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -9500,6 +10014,16 @@
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
       "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg=="
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
@@ -10371,22 +10895,22 @@
       }
     },
     "node_modules/nuxt": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.12.1.tgz",
-      "integrity": "sha512-J9TO/b0KSTpKn4yzknIPYRhcJ+UwR/uFM2j0G2FPHAWKxo513ty7Y2unHejWfkuQBL6Ergw6o0E7XsIT059VQw==",
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.12.2.tgz",
+      "integrity": "sha512-DkQvGbILEUwvXJ9TG2iTMvyO6D9ABLyA5bJ+ns8ZgWatfSXC7hXnL//PTYF7neYUzyYn0e5fLHcXgRLa/9YoLA==",
       "dependencies": {
         "@nuxt/devalue": "^2.0.2",
         "@nuxt/devtools": "^1.3.3",
-        "@nuxt/kit": "3.12.1",
-        "@nuxt/schema": "3.12.1",
+        "@nuxt/kit": "3.12.2",
+        "@nuxt/schema": "3.12.2",
         "@nuxt/telemetry": "^2.5.4",
-        "@nuxt/vite-builder": "3.12.1",
-        "@unhead/dom": "^1.9.12",
-        "@unhead/ssr": "^1.9.12",
-        "@unhead/vue": "^1.9.12",
-        "@vue/shared": "^3.4.27",
-        "acorn": "8.11.3",
-        "c12": "^1.10.0",
+        "@nuxt/vite-builder": "3.12.2",
+        "@unhead/dom": "^1.9.13",
+        "@unhead/ssr": "^1.9.13",
+        "@unhead/vue": "^1.9.13",
+        "@vue/shared": "^3.4.29",
+        "acorn": "8.12.0",
+        "c12": "^1.11.1",
         "chokidar": "^3.6.0",
         "cookie-es": "^1.1.0",
         "defu": "^6.1.4",
@@ -10428,7 +10952,7 @@
         "unplugin-vue-router": "^0.7.0",
         "unstorage": "^1.10.2",
         "untyped": "^1.4.2",
-        "vue": "^3.4.27",
+        "vue": "^3.4.29",
         "vue-bundle-renderer": "^2.1.0",
         "vue-devtools-stub": "^0.1.0",
         "vue-router": "^4.3.3"
@@ -10453,27 +10977,6 @@
         }
       }
     },
-    "node_modules/nuxt-primevue": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/nuxt-primevue/-/nuxt-primevue-3.0.0.tgz",
-      "integrity": "sha512-MC3ubLTF0hzUEsQ2gYzzlzaW1gXN9/wrpbWnS9xwK47TWw1gcfim8idu5mcOx+l66CPAtTLOR1QJahkDc4m9XA==",
-      "dependencies": {
-        "@nuxt/kit": "^3.7.3",
-        "pathe": "^1.1.2",
-        "primevue": "^3.51.0"
-      }
-    },
-    "node_modules/nuxt/node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/nuxt/node_modules/escape-string-regexp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
@@ -10563,6 +11066,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-is": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
@@ -10674,6 +11185,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/only": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/only/-/only-0.0.2.tgz",
+      "integrity": "sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ=="
+    },
     "node_modules/open": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
@@ -10982,6 +11498,11 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/path-to-regexp": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
+      "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw=="
+    },
     "node_modules/path-type": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
@@ -11037,6 +11558,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz",
@@ -11055,6 +11592,46 @@
         "node": ">=4"
       }
     },
+    "node_modules/portfinder": {
+      "version": "1.0.32",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+      "dependencies": {
+        "async": "^2.6.4",
+        "debug": "^3.2.7",
+        "mkdirp": "^0.5.6"
+      },
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/portfinder/node_modules/async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dependencies": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "node_modules/portfinder/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/portfinder/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@@ -11173,6 +11750,74 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss-merge-longhand": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.1.tgz",
@@ -11265,6 +11910,50 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nesting": {
+      "version": "12.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.5.tgz",
+      "integrity": "sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/selector-resolve-nested": "^1.1.0",
+        "@csstools/selector-specificity": "^3.1.1",
+        "postcss-selector-parser": "^6.1.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/postcss-normalize-charset": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.0.tgz",
@@ -11516,17 +12205,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/primeflex": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz",
-      "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ=="
-    },
     "node_modules/primevue": {
-      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.52.0.tgz",
-      "integrity": "sha512-HLOVP5YI0ArFKUhIyfZsWmTNMaBYNCBWC/3DYvdd/Po4LY5/WXf7yIYvArE2q/3OuwSXJXvjlR8UNQeJYRSQog==",
-      "peerDependencies": {
-        "vue": "^3.0.0"
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.0-rc.2.tgz",
+      "integrity": "sha512-1SICPga4FA5sx27h5FBnMHWidPJRn58mPZj0LNlJygp+9P5ksrtRRNdfDPzmRB+fWcmhvbIxk46meyHeMw1wTQ==",
+      "dependencies": {
+        "@primevue/core": "4.0.0-rc.2",
+        "@primevue/icons": "4.0.0-rc.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
       }
     },
     "node_modules/proc-log": {
@@ -11719,6 +12407,14 @@
         "destr": "^2.0.3"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -11992,6 +12688,62 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/replace-in-file": {
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-6.3.5.tgz",
+      "integrity": "sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "glob": "^7.2.0",
+        "yargs": "^17.2.1"
+      },
+      "bin": {
+        "replace-in-file": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -12024,6 +12776,58 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-path": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/resolve-path/-/resolve-path-1.4.0.tgz",
+      "integrity": "sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==",
+      "dependencies": {
+        "http-errors": "~1.6.2",
+        "path-is-absolute": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/resolve-path/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/resolve-path/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/resolve-path/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "node_modules/resolve-path/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "node_modules/resolve-path/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/resolve-pkg-maps": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
@@ -12307,6 +13111,8 @@
       "version": "1.77.5",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.5.tgz",
       "integrity": "sha512-oDfX1mukIlxacPdQqNb6mV2tVCrnE+P3nVYioy72V5tlk56CPNcO4TCuFcaCRKKfJ1M3lH95CleRS+dVKL2qMg==",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -12884,6 +13690,56 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
+      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12960,6 +13816,156 @@
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
+    "node_modules/tailwind-config-viewer": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tailwind-config-viewer/-/tailwind-config-viewer-2.0.3.tgz",
+      "integrity": "sha512-UxeBz6Q0XLCmVcJ2IiYqM1vuxjIkGTf0idxpwb7LkCb/FEebEmUGqwE7XSGPrD8uL7bmCfWskyPGiwNtzMmrJw==",
+      "dependencies": {
+        "@koa/router": "^12.0.1",
+        "commander": "^6.0.0",
+        "fs-extra": "^9.0.1",
+        "koa": "^2.14.2",
+        "koa-static": "^5.0.0",
+        "open": "^7.0.4",
+        "portfinder": "^1.0.26",
+        "replace-in-file": "^6.1.0"
+      },
+      "bin": {
+        "tailwind-config-viewer": "cli/index.js",
+        "tailwindcss-config-viewer": "cli/index.js"
+      },
+      "engines": {
+        "node": ">=13"
+      },
+      "peerDependencies": {
+        "tailwindcss": "1 || 2 || 2.0.1-compat || 3"
+      }
+    },
+    "node_modules/tailwind-config-viewer/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwind-config-viewer/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tailwind-config-viewer/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/tailwind-config-viewer/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tailwind-config-viewer/node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-primeui": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.3.1.tgz",
+      "integrity": "sha512-A+uLHqdFo1jmn7qSBBDko5BXResXWfy4wKFzR/7p9P0ZENRS1xJCxKnf0E8oFRN9Joq5yjLRtMgFXfMcuPH1hg==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.1.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -13074,6 +14080,25 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "peer": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
@@ -13135,11 +14160,24 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "node_modules/tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
       "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
+    "node_modules/tsscmp": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
+      "integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==",
+      "engines": {
+        "node": ">=0.6.x"
+      }
+    },
     "node_modules/tuf-js": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-2.2.1.tgz",
@@ -13181,6 +14219,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
@@ -13676,6 +14726,14 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/vite": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
@@ -14338,6 +15396,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/ylru": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ylru/-/ylru-1.4.0.tgz",
+      "integrity": "sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 3b49f17..9e08211 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,22 +13,23 @@
   "dependencies": {
     "@mdi/js": "^7.4.47",
     "@nuxt/eslint": "^0.3.10",
+    "@nuxtjs/tailwindcss": "^6.12.0",
+    "@primevue/nuxt-module": "4.0.0-rc.2",
+    "@primevue/themes": "^4.0.0-beta.5",
     "@types/dompurify": "^3.0.5",
-    "@types/validator": "^13.11.10",
+    "@types/validator": "^13.12.0",
     "chart.js": "^4.4.3",
     "dompurify": "^3.1.4",
     "jdenticon": "^3.3.0",
-    "nuxt": "^3.11.2",
-    "nuxt-primevue": "^3.0.0",
+    "nuxt": "^3.12.2",
     "ol": "^9.1.0",
     "ol-contextmenu": "^5.4.0",
     "ol-ext": "^4.0.17",
     "openapi-fetch": "^0.9.3",
     "openapi-typescript": "^6.7.5",
-    "primeflex": "^3.3.1",
-    "primevue": "^3.50.0",
+    "primevue": "4.0.0-rc.2",
     "quill": "^1.3.7",
-    "sass": "^1.72.0",
+    "tailwindcss-primeui": "^0.3.1",
     "typescript": "^5.4.3",
     "validator": "^13.12.0",
     "vue": "^3.4.21",
diff --git a/frontend/pages/admin/[familyId]/categories/[id].vue b/frontend/pages/admin/[familyId]/categories/[id].vue
index 2fc1ed9..e11ab0f 100644
--- a/frontend/pages/admin/[familyId]/categories/[id].vue
+++ b/frontend/pages/admin/[familyId]/categories/[id].vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
     @submit.prevent="onSave"
   >
     <AdminInputTextField
@@ -38,7 +38,7 @@
       :object-id="categoryId"
       object-type="categories"
     />
-    <span class="flex gap-1 justify-content-end">
+    <span class="flex gap-1 justify-end">
       <NuxtLink :to="`/admin/${familyId}/categories`">
         <Button
           label="Annuler"
diff --git a/frontend/pages/admin/[familyId]/categories/index.vue b/frontend/pages/admin/[familyId]/categories/index.vue
index 898c309..0e0429f 100644
--- a/frontend/pages/admin/[familyId]/categories/index.vue
+++ b/frontend/pages/admin/[familyId]/categories/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="flex gap-3">
+    <span class="flex gap-4">
       <IconField icon-position="left">
         <InputIcon>
           <AppIcon
@@ -18,7 +18,7 @@
         :options="optionalColumns"
         display="chip"
         placeholder="Sélectionner des colonnes"
-        class="w-full md:w-20rem"
+        class="w-full md:w-80"
       />
     </span>
     <DataTable
@@ -77,7 +77,6 @@
 </template>
 
 <script setup lang="ts">
-import { FilterMatchMode } from 'primevue/api'
 import type { DataTableFilterMetaData } from 'primevue/datatable'
 import type { InitAdminLayout } from '~/layouts/admin-ui.vue'
 import type { Category } from '~/lib'
@@ -111,7 +110,7 @@ if (!(table_key in state.tablesSelectedColumns)) {
 }
 if (!(table_key in state.tablesFilters)) {
   state.tablesFilters[table_key] = {
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    global: { value: null, matchMode: 'contains' },
   }
 }
 
diff --git a/frontend/pages/admin/[familyId]/categories/new-icon-[id].vue b/frontend/pages/admin/[familyId]/categories/new-icon-[id].vue
index 6aed4a5..d936174 100644
--- a/frontend/pages/admin/[familyId]/categories/new-icon-[id].vue
+++ b/frontend/pages/admin/[familyId]/categories/new-icon-[id].vue
@@ -1,12 +1,12 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
   >
     <AdminInputIconUpload
       :object-id="categoryId"
       object-type="categories"
     />
-    <span class="flex gap-1 justify-content-end">
+    <span class="flex gap-1 justify-end">
       <NuxtLink :to="`/admin/${familyId}/categories`">
         <Button
           label="Retour à la liste"
diff --git a/frontend/pages/admin/[familyId]/comments/[id].vue b/frontend/pages/admin/[familyId]/comments/[id].vue
index ed21b68..3537e92 100644
--- a/frontend/pages/admin/[familyId]/comments/[id].vue
+++ b/frontend/pages/admin/[familyId]/comments/[id].vue
@@ -1,9 +1,9 @@
 <template>
   <form
-    class="flex flex-wrap gap-5 mx-4"
+    class="flex flex-wrap gap-8 mx-6"
     @submit.prevent="onSave"
   >
-    <div class="flex flex-grow-1 flex-column gap-3 max-w-30rem">
+    <div class="flex grow flex-col gap-4 max-w-[30rem]">
       <AdminInputTextField
         id="author"
         v-model="editedComment.author"
@@ -28,7 +28,7 @@
       />
     </div>
 
-    <div class="flex flex-column flex-grow-1 gap-3 max-w-30rem">
+    <div class="flex flex-col grow gap-4 max-w-[30rem]">
       <span v-if="!isNew">Commentaire créé le
         {{ Intl.DateTimeFormat('fr-FR', {
           dateStyle: 'long',
@@ -71,7 +71,7 @@
         label="Modérée"
         helper-text="Si activé, cette entité quittera la liste des entités en attente et sera rendue publique."
       />
-      <span class="flex gap-1 justify-content-end">
+      <span class="flex gap-1 justify-end">
         <NuxtLink :to="returnUrl">
           <Button
             label="Annuler"
diff --git a/frontend/pages/admin/[familyId]/comments/pending.vue b/frontend/pages/admin/[familyId]/comments/pending.vue
index 973ea89..e35eb9c 100644
--- a/frontend/pages/admin/[familyId]/comments/pending.vue
+++ b/frontend/pages/admin/[familyId]/comments/pending.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="flex gap-3">
+    <span class="flex gap-4">
       <IconField icon-position="left">
         <InputIcon>
           <AppIcon
@@ -18,7 +18,7 @@
         :options="optionalColumns"
         display="chip"
         placeholder="Sélectionner des colonnes"
-        class="w-full md:w-20rem"
+        class="w-full md:w-80"
       />
     </span>
     <DataTable
@@ -38,13 +38,13 @@
       <Column
         field="author"
         header="Auteur"
-        class="max-w-25rem"
+        class="max-w-[25rem]"
         sortable
       />
       <Column
         field="entity_display_name"
         header="Nom de l'entité"
-        class="max-w-25rem"
+        class="max-w-[25rem]"
         sortable
       />
 
@@ -95,7 +95,6 @@
 </template>
 
 <script setup lang="ts">
-import { FilterMatchMode } from 'primevue/api'
 import type { DataTableFilterMetaData } from 'primevue/datatable'
 import type { InitAdminLayout } from '~/layouts/admin-ui.vue'
 import type { AdminListedComment } from '~/lib'
@@ -125,7 +124,7 @@ if (!(table_key in state.tablesSelectedColumns)) {
 }
 if (!(table_key in state.tablesFilters)) {
   state.tablesFilters[table_key] = {
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    global: { value: null, matchMode: 'contains' },
   }
 }
 
diff --git a/frontend/pages/admin/[familyId]/entities/[id].vue b/frontend/pages/admin/[familyId]/entities/[id].vue
index baf07fe..e781165 100644
--- a/frontend/pages/admin/[familyId]/entities/[id].vue
+++ b/frontend/pages/admin/[familyId]/entities/[id].vue
@@ -1,133 +1,159 @@
 <template>
   <div
-    class="mx-4"
+    class="mx-6"
   >
-    <TabView>
-      <TabPanel header="Contenu et modération">
-        <form
-          class="flex flex-wrap gap-5"
-          @submit.prevent="onSave"
+    <Tabs value="0">
+      <TabList>
+        <Tab
+          value="0"
         >
-          <div class="flex flex-grow-1 flex-column gap-3 max-w-30rem">
-            <AdminInputTextField
-              id="display_name"
-              v-model="editedEntity.display_name"
-              label="Nom d'affichage"
-              :variant="hasBeenEdited('display_name')"
-            />
-            <FormCategorySelect
-              v-model="editedEntity.category_id"
-              :categories="categories"
-            />
-
-            <FormDynamicField
-              v-for="field in family.entity_form.fields.toSorted((field_a, field_b) => field_a.form_weight - field_b.form_weight)"
-              :key="field.key"
-              v-model:fieldContent="(editedEntity.data as EntityOrCommentData)[field.key]"
-              :form-field="(field as FormField)"
-            />
-          </div>
-
-          <div class="flex flex-column flex-grow-1 gap-3 max-w-30rem">
-            Entitée crée le
-            {{ Intl.DateTimeFormat('fr-FR', {
-              dateStyle: 'long',
-              timeStyle: 'short',
-            }).format(new Date(fetchedEntity.created_at)) }}, mise à jour pour la dernière fois le
-            {{ Intl.DateTimeFormat('fr-FR', {
-              dateStyle: 'long',
-              timeStyle: 'short',
-            }).format(new Date(fetchedEntity.updated_at)) }}
-
-            <FormTagSelect
-              v-model="editedEntity.tags"
-              :tags="tags"
-            />
-
-            <AdminInputSwitchField
-              id="hidden"
-              v-model="editedEntity.hidden"
-              label="Cachée"
-              helper-text="Si activé, cette entité ne sera pas visible publiquement, même si modérée. Utile pour des entités que vous souhaitez cacher à long terme sans les supprimer."
-            />
-            <AdminInputSwitchField
-              id="moderated"
-              v-model="editedEntity.moderated"
-              label="Modérée"
-              helper-text="Si activé, cette entité quittera la liste des entités en attente et sera rendue publique."
-            />
-
-            <AdminInputTextField
-              id="moderation_notes"
-              v-model="editedEntity.moderation_notes"
-              label="Notes de modération"
-              text-length="long"
-              optional
-            />
-
-            <FormAdresses
-              v-model:locations="editedEntity.locations as UnprocessedLocation[]"
-            />
-
-            <span class="flex gap-1 justify-content-end">
-              <NuxtLink :to="`/admin/${familyId}/entities`">
+          Contenu et modération
+        </Tab>
+        <Tab
+          value="1"
+        >
+          Parenté
+        </Tab>
+        <Tab
+          value="2"
+        >
+          Commentaires
+        </Tab>
+      </TabList>
+
+      <TabPanels>
+        <TabPanel value="0">
+          <form
+            class="flex flex-wrap gap-8"
+            @submit.prevent="onSave"
+          >
+            <div class="flex grow flex-col gap-4 max-w-[30rem]">
+              <AdminInputTextField
+                id="display_name"
+                v-model="editedEntity.display_name"
+                label="Nom d'affichage"
+                :variant="hasBeenEdited('display_name')"
+              />
+              <FormCategorySelect
+                v-model="editedEntity.category_id"
+                :categories="categories"
+              />
+
+              <FormDynamicField
+                v-for="field in family.entity_form.fields.toSorted((field_a, field_b) => field_a.form_weight - field_b.form_weight)"
+                :key="field.key"
+                v-model:fieldContent="(editedEntity.data as EntityOrCommentData)[field.key]"
+                :form-field="(field as FormField)"
+              />
+            </div>
+
+            <div class="flex flex-col grow gap-4 max-w-[30rem]">
+              Entitée crée le
+              {{ Intl.DateTimeFormat('fr-FR', {
+                dateStyle: 'long',
+                timeStyle: 'short',
+              }).format(new Date(fetchedEntity.created_at)) }}, mise à jour pour la dernière fois le
+              {{ Intl.DateTimeFormat('fr-FR', {
+                dateStyle: 'long',
+                timeStyle: 'short',
+              }).format(new Date(fetchedEntity.updated_at)) }}
+
+              <FormTagSelect
+                v-model="editedEntity.tags"
+                :tags="tags"
+              />
+
+              <AdminInputSwitchField
+                id="hidden"
+                v-model="editedEntity.hidden"
+                label="Cachée"
+                helper-text="Si activé, cette entité ne sera pas visible publiquement, même si modérée. Utile pour des entités que vous souhaitez cacher à long terme sans les supprimer."
+              />
+              <AdminInputSwitchField
+                id="moderated"
+                v-model="editedEntity.moderated"
+                label="Modérée"
+                helper-text="Si activé, cette entité quittera la liste des entités en attente et sera rendue publique."
+              />
+
+              <AdminInputTextField
+                id="moderation_notes"
+                v-model="editedEntity.moderation_notes"
+                label="Notes de modération"
+                text-length="long"
+                optional
+              />
+
+              <FormAdresses
+                v-model:locations="editedEntity.locations as UnprocessedLocation[]"
+              />
+
+              <span class="flex gap-1 justify-end">
+                <NuxtLink :to="`/admin/${familyId}/entities`">
+                  <Button
+                    label="Annuler"
+                    severity="secondary"
+                    :loading="processingRequest"
+                    :disabled="processingRequest"
+                  />
+                </NuxtLink>
                 <Button
-                  label="Annuler"
-                  severity="secondary"
+                  label="Sauvegarder"
+                  type="submit"
                   :loading="processingRequest"
-                  :disabled="processingRequest"
+                  :disabled="processingRequest || !editedEntity.display_name || !editedEntity.category_id"
                 />
-              </NuxtLink>
-              <Button
-                label="Sauvegarder"
-                type="submit"
-                :loading="processingRequest"
-                :disabled="processingRequest || !editedEntity.display_name || !editedEntity.category_id"
-              />
-            </span>
-          </div>
-        </form>
-      </TabPanel>
-
-      <TabPanel header="Parenté">
-        <AdminEntityKinshipTable
-          :main-entity="fetchedEntity"
-          :categories="categories"
-          :tags="tags"
-          :family-id="familyId"
-          @update-kinship="async () => fetchedEntity = (await state.client.getEntity(entityId))"
-        />
-      </TabPanel>
-
-      <TabPanel header="Commentaires">
-        <span v-if="entityComments.length == 0">Aucun commentaire pour le moment</span>
-        <CommentsDisplayer
-          style="max-width: 60rem;"
-          :comment-form-fields="family.comment_form.fields"
-          :comments="entityComments"
-          :public="false"
-          @delete="onCommentDelete"
-          @edit="commentId => navigateTo(`/admin/${familyId}/comments/${commentId}?urlEntityId=${entityId}`)"
-        />
-        <Button
-          label="Nouveau commentaire"
-          rounded
-          outlined
-          class="ml-3 mt-3"
-          @click="navigateTo(`/admin/${familyId}/comments/new?urlEntityId=${entityId}`)"
-        >
-          <template #default>
-            <div class="flex align-items-center">
-              <AppIcon
-                class="-ml-1 mr-1"
-                icon-name="commentAdd"
-              />
-              Ajouter un commentaire
+              </span>
             </div>
-          </template>
-        </Button>
-      </TabPanel>
-    </TabView>
+          </form>
+        </TabPanel>
+
+        <TabPanel value="1">
+          <AdminEntityKinshipTable
+            :main-entity="fetchedEntity"
+            :categories="categories"
+            :tags="tags"
+            :family-id="familyId"
+            @update-kinship="async () => fetchedEntity = (await state.client.getEntity(entityId))"
+          />
+        </TabPanel>
+
+        <TabPanel value="2">
+          <Message
+            v-if="entityComments.length == 0"
+            severity="warn"
+          >
+            Aucun commentaire pour le moment
+          </Message>
+          <CommentsDisplayer
+            v-else
+            style="max-width: 60rem;"
+            :comment-form-fields="family.comment_form.fields"
+            :comments="entityComments"
+            :public="false"
+            @delete="onCommentDelete"
+            @edit="commentId => navigateTo(`/admin/${familyId}/comments/${commentId}?urlEntityId=${entityId}`)"
+          />
+          <Button
+            label="Nouveau commentaire"
+            rounded
+            outlined
+            class="ml-3 mt-3"
+            @click="navigateTo(`/admin/${familyId}/comments/new?urlEntityId=${entityId}`)"
+          >
+            <template #default>
+              <div class="flex align-items-center">
+                <AppIcon
+                  class="-ml-1 mr-1"
+                  icon-name="commentAdd"
+                />
+                Ajouter un commentaire
+              </div>
+            </template>
+          </Button>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
   </div>
 </template>
 
diff --git a/frontend/pages/admin/[familyId]/entities/index.vue b/frontend/pages/admin/[familyId]/entities/index.vue
index b9ca5e9..27e94c5 100644
--- a/frontend/pages/admin/[familyId]/entities/index.vue
+++ b/frontend/pages/admin/[familyId]/entities/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="flex gap-4 align-items-end mb-3">
+    <span class="flex gap-6 items-end mb-4">
       <form @submit.prevent="refreshTable">
         <InputGroup
           style="height: 36px; "
@@ -12,7 +12,7 @@
 
           <Button
             type="button"
-            severity="warning"
+            severity="warn"
             label="Filtres"
             @click="(event: Event) => filters_overlay?.toggle(event)"
           >
@@ -36,7 +36,7 @@
         :options="optionalColumns"
         display="chip"
         placeholder="Sélectionner des colonnes"
-        class="w-full md:w-20rem"
+        class="w-full md:w-80"
       />
     </span>
 
@@ -56,7 +56,7 @@
       <Column
         field="display_name"
         header="Nom d'affichage"
-        class="max-w-25rem"
+        class="max-w-[25rem]"
       />
       <Column
         v-if="state.tablesSelectedColumns[table_key].includes('Catégorie')"
@@ -71,7 +71,7 @@
         v-if="state.tablesSelectedColumns[table_key].includes('Tags')"
         field="tags"
         header="Tags"
-        class="max-w-18rem"
+        class="max-w-72"
       >
         <template #body="slotProps">
           <DisplayedTag
@@ -118,7 +118,7 @@
       </Column>
     </DataTable>
 
-    <OverlayPanel
+    <Popover
       ref="tags_tooltip"
     >
       <DisplayedTag
@@ -127,21 +127,21 @@
         :tag="state.tagRecord[tag_id]"
         class="m-1"
       />
-    </OverlayPanel>
+    </Popover>
 
-    <OverlayPanel ref="filters_overlay">
+    <Popover ref="filters_overlay">
       <ViewerFilterConfig
         v-model:filteringTags="state.tablesQueryParams[table_key].tagFilteringList!"
         v-model:filteringCategories="state.tablesQueryParams[table_key].categoryFilteringList!"
-        class="w-25rem"
+        class="w-[25rem]"
         @filters-changed="refreshTable"
       />
-    </OverlayPanel>
+    </Popover>
   </div>
 </template>
 
 <script setup lang="ts">
-import type OverlayPanel from 'primevue/overlaypanel'
+import Popover from 'primevue/popover'
 import type { PageState } from 'primevue/paginator'
 import DisplayedTag from '~/components/DisplayedTag.vue'
 import type { InitAdminLayout } from '~/layouts/admin-ui.vue'
@@ -162,8 +162,8 @@ if (state.tags == null) {
 
 const familyTitle = state.families.filter(family => family.id == familyId)[0].title
 
-const filters_overlay = ref<OverlayPanel>()
-const tags_tooltip = ref<OverlayPanel>()
+const filters_overlay = ref<typeof Popover>()
+const tags_tooltip = ref<typeof Popover>()
 const tooltip_excess_tags: Ref<undefined | string[]> = ref(undefined)
 
 const firstRow = ref(0)
diff --git a/frontend/pages/admin/[familyId]/entities/new.vue b/frontend/pages/admin/[familyId]/entities/new.vue
index c085f37..9bc9efc 100644
--- a/frontend/pages/admin/[familyId]/entities/new.vue
+++ b/frontend/pages/admin/[familyId]/entities/new.vue
@@ -1,10 +1,10 @@
 <template>
   <form
-    class="mx-4"
+    class="mx-6"
     @submit.prevent="onSave"
   >
-    <div class="flex flex-wrap gap-5">
-      <div class="flex flex-grow-1 flex-column gap-3 max-w-30rem ">
+    <div class="flex flex-wrap gap-8">
+      <div class="flex grow flex-col gap-4 max-w-[30rem] ">
         <AdminInputTextField
           id="display_name"
           v-model="editedEntity.display_name"
@@ -23,7 +23,7 @@
         />
       </div>
 
-      <div class="flex flex-column flex-grow-1 gap-3 max-w-30rem ">
+      <div class="flex flex-col grow gap-4 max-w-[30rem] ">
         <FormTagSelect
           v-model="editedEntity.tags"
           :tags="tags"
@@ -51,7 +51,7 @@
           optional
         />
 
-        <div class="flex align-items-center gap-2">
+        <div class="flex items-center gap-2">
           <label>Adresses</label>
           <Button
             size="small"
@@ -73,7 +73,7 @@
               <Button
                 outlined
                 rounded
-                severity="warning"
+                severity="warn"
                 @click="() => editAddress(slotProps.index)"
               >
                 <AppIcon icon-name="edit" />
@@ -114,7 +114,7 @@
           </template>
         </Dialog>
 
-        <span class="flex gap-1 justify-content-end">
+        <span class="flex gap-1 justify-end">
           <NuxtLink :to="`/admin/${familyId}/entities`">
             <Button
               label="Annuler"
diff --git a/frontend/pages/admin/[familyId]/entities/pending.vue b/frontend/pages/admin/[familyId]/entities/pending.vue
index 3ab4458..afb4f22 100644
--- a/frontend/pages/admin/[familyId]/entities/pending.vue
+++ b/frontend/pages/admin/[familyId]/entities/pending.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="flex gap-3">
+    <span class="flex gap-4">
       <IconField icon-position="left">
         <InputIcon>
           <AppIcon
@@ -18,7 +18,7 @@
         :options="optionalColumns"
         display="chip"
         placeholder="Sélectionner des colonnes"
-        class="w-full md:w-20rem"
+        class="w-full md:w-80"
       />
     </span>
     <DataTable
@@ -38,7 +38,7 @@
       <Column
         field="display_name"
         header="Nom d'affichage"
-        class="max-w-25rem"
+        class="max-w-[25rem]"
         sortable
       />
 
@@ -102,7 +102,6 @@
 </template>
 
 <script setup lang="ts">
-import { FilterMatchMode } from 'primevue/api'
 import type { DataTableFilterMetaData } from 'primevue/datatable'
 import type { InitAdminLayout } from '~/layouts/admin-ui.vue'
 import type { AdminListedEntity } from '~/lib'
@@ -132,7 +131,7 @@ if (!(table_key in state.tablesSelectedColumns)) {
 }
 if (!(table_key in state.tablesFilters)) {
   state.tablesFilters[table_key] = {
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    global: { value: null, matchMode: 'contains' },
   }
 }
 
diff --git a/frontend/pages/admin/access-tokens/[id].vue b/frontend/pages/admin/access-tokens/[id].vue
index e24b79c..d3f7d15 100644
--- a/frontend/pages/admin/access-tokens/[id].vue
+++ b/frontend/pages/admin/access-tokens/[id].vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
     @submit.prevent="onSave"
   >
     <AdminInputTextField
@@ -59,7 +59,7 @@
       :options="tags"
     />
 
-    <span class="flex gap-1 justify-content-end">
+    <span class="flex gap-1 justify-end">
       <NuxtLink to="/admin/access-tokens">
         <Button
           label="Annuler"
diff --git a/frontend/pages/admin/access-tokens/details/[id].vue b/frontend/pages/admin/access-tokens/details/[id].vue
index 2fab8a1..7c51333 100644
--- a/frontend/pages/admin/access-tokens/details/[id].vue
+++ b/frontend/pages/admin/access-tokens/details/[id].vue
@@ -18,17 +18,17 @@
       />
     </DataTable>
 
-    <div class="mt-3">
+    <div class="mt-4">
       <h3 class="mt-0">
         Activités des 30 derniers jours
       </h3>
 
-      <div class="relative flex h-full w-full justify-content-center">
+      <div class="relative flex h-full w-full justify-center">
         <Chart
           type="bar"
           :data="chartData"
           :options="chartOptions"
-          class="absolute top-0 left-0 h-full w-full h-13rem xl:h-16rem"
+          class="absolute top-0 left-0 h-full w-full h-52 xl:h-64"
         />
       </div>
     </div>
diff --git a/frontend/pages/admin/access-tokens/index.vue b/frontend/pages/admin/access-tokens/index.vue
index 99f08be..2fb17e1 100644
--- a/frontend/pages/admin/access-tokens/index.vue
+++ b/frontend/pages/admin/access-tokens/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="flex gap-3">
+    <span class="flex gap-4">
       <IconField
         icon-position="left"
       >
@@ -18,7 +18,7 @@
         :options="optionalColumns"
         display="chip"
         placeholder="Sélectionner des colonnes"
-        class="w-full md:w-20rem"
+        class="w-full md:w-80"
       />
     </span>
     <DataTable
@@ -34,6 +34,7 @@
       removable-sort
       :global-filter-fields="['title', 'token']"
       class=" "
+      filter-match-mode="contains"
     >
       <Column
         field="title"
@@ -62,14 +63,14 @@
         v-if="state.tablesSelectedColumns[table_key].includes('Visites')"
         field="last_week_visits"
         header="Visites (7 derniers jours)"
-        class="max-w-8rem "
+        class="max-w-32 "
         sortable
       />
 
       <Column
         v-if="state.tablesSelectedColumns[table_key].includes('Familles')"
         header="Familles"
-        :field="data => all_included(data.permissions.families_policy).toString()"
+        :field="(data: any) => all_included(data.permissions.families_policy).toString()"
         sortable
       >
         <template #body="slotProps">
@@ -83,7 +84,7 @@
       <Column
         v-if="state.tablesSelectedColumns[table_key].includes('Catégories')"
         header="Catégories"
-        :field="data => all_included(data.permissions.categories_policy).toString()"
+        :field="(data: any) => all_included(data.permissions.categories_policy).toString()"
         sortable
       >
         <template #body="slotProps">
@@ -150,7 +151,6 @@
 </template>
 
 <script setup lang="ts">
-import { FilterMatchMode } from 'primevue/api'
 import type { DataTableFilterMetaData } from 'primevue/datatable'
 import type { InitAdminLayout } from '~/layouts/admin-ui.vue'
 import type { AccessToken, PermissionPolicy } from '~/lib'
@@ -164,7 +164,7 @@ if (!(table_key in state.tablesSelectedColumns)) {
 }
 if (!(table_key in state.tablesFilters)) {
   state.tablesFilters[table_key] = {
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    global: { value: null, matchMode: 'contains' },
   }
 }
 
diff --git a/frontend/pages/admin/config.vue b/frontend/pages/admin/config.vue
index 3f9968e..88d3e28 100644
--- a/frontend/pages/admin/config.vue
+++ b/frontend/pages/admin/config.vue
@@ -1,256 +1,269 @@
 <template>
-  <TabView>
-    <TabPanel header="Général">
-      <form
-        class="flex flex-column gap-3 max-w-30rem mx-4"
-        @submit.prevent="onSave('general', editedConfig.general)"
-      >
-        <AdminInputTextField
-          id="title"
-          v-model="editedConfig.general.title"
-          label="Titre"
-          :variant="hasBeenEdited('general', 'title')"
-        />
-
-        <AdminInputTextField
-          id="subtitle"
-          v-model="editedConfig.general.subtitle"
-          label="Sous-titre"
-          :variant="hasBeenEdited('general', 'subtitle')"
-        />
-
-        <AdminInputTextField
-          id="information"
-          v-model="editedConfig.general.information"
-          label="Information"
-          :variant="hasBeenEdited('general', 'information')"
-          text-length="editor"
-        />
-
-        <AdminInputTextField
-          id="logo_url"
-          v-model="editedConfig.general.logo_url"
-          label="URL du Logo"
-          :variant="hasBeenEdited('general', 'logo_url')"
-          :invalid="!editedConfig.general.logo_url || !validator.isURL(editedConfig.general.logo_url)"
-        />
-
-        <AdminInputSwitchField
-          id="popup_enabled"
-          v-model="popupEnabled"
-          label="Afficher un popup au lancement de l'application"
-        />
-
-        <AdminInputTextField
-          v-if="popupEnabled"
-          id="popup"
-          v-model="editedConfig.general.popup"
-          label="Popup d'Accueil"
-          :variant="hasBeenEdited('general', 'popup')"
-          text-length="editor"
-        />
-
-        <AdminInputSwitchField
-          v-if="popupEnabled"
-          id="popup_check_enabled"
-          v-model="popupCheckboxEnabled"
-          label="Mettre une case à cocher dans le popup d'accueil"
-        />
-
-        <AdminInputTextField
-          v-if="popupEnabled && popupCheckboxEnabled"
-          id="popup"
-          v-model="editedConfig.general.popup_check_text"
-          label="Case à Cocher de la Popup d'Accueil"
-          :variant="hasBeenEdited('general', 'popup_check_text')"
-        />
-
-        <AdminInputSwitchField
-          id="redirect_url_enabled"
-          v-model="customRedirection"
-          label="Rediriger les tokens invalides vers une URL personnalisée"
-        />
-
-        <AdminInputTextField
-          v-if="customRedirection"
-          id="redirect_url"
-          v-model="editedConfig.general.redirect_url"
-          label="URL de Redirection"
-          :variant="hasBeenEdited('general', 'redirect_url')"
-          :invalid="!editedConfig.general.redirect_url || !validator.isURL(editedConfig.general.redirect_url)"
-        />
-
-        <span class="flex gap-1 justify-content-end">
-          <Button
-            label="Annuler"
-            severity="secondary"
-            :disabled="processingRequest"
-            @click="onCancel('general')"
+  <Tabs value="0">
+    <TabList>
+      <Tab value="0">
+        General
+      </Tab>
+      <Tab value="1">
+        Carte - Initialisation
+      </Tab>
+      <Tab value="2">
+        Carte - Cluster
+      </Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel value="0">
+        <form
+          class="flex flex-col gap-4 max-w-[30rem] mx-6"
+          @submit.prevent="onSave('general', editedConfig.general)"
+        >
+          <AdminInputTextField
+            id="title"
+            v-model="editedConfig.general.title"
+            label="Titre"
+            :variant="hasBeenEdited('general', 'title')"
           />
-          <Button
-            v-if="state.is_admin"
-            label="Réinitialiser"
-            :disabled="processingRequest"
-            @click="onDelete('general')"
+
+          <AdminInputTextField
+            id="subtitle"
+            v-model="editedConfig.general.subtitle"
+            label="Sous-titre"
+            :variant="hasBeenEdited('general', 'subtitle')"
           />
-          <Button
-            v-if="state.is_admin"
-            label="Sauvegarder"
-            type="submit"
-            :disabled="processingRequest"
+
+          <AdminInputTextField
+            id="information"
+            v-model="editedConfig.general.information"
+            label="Information"
+            :variant="hasBeenEdited('general', 'information')"
+            text-length="editor"
           />
-        </span>
-      </form>
-    </TabPanel>
-
-    <TabPanel header="Cartographie - Initialisation">
-      <form
-        class="flex flex-column gap-3 max-w-30rem mx-4"
-        @submit.prevent="onSave('cartography_init', editedConfig.cartography_init)"
-      >
-        <AdminInputNumberField
-          id="center_lat"
-          v-model="editedConfig.cartography_init.center_lat"
-          label="Latitude du Centre"
-          :variant="hasBeenEdited('cartography_init', 'center_lat')"
-        />
-
-        <AdminInputNumberField
-          id="center_lng"
-          v-model="editedConfig.cartography_init.center_lng"
-          label="Longitude du Centre"
-          :variant="hasBeenEdited('cartography_init', 'center_lng')"
-        />
-
-        <AdminInputNumberField
-          id="zoom"
-          v-model="editedConfig.cartography_init.zoom"
-          label="Niveau de Zoom"
-          :variant="hasBeenEdited('cartography_init', 'zoom')"
-        />
-
-        <span class="flex gap-1 justify-content-end">
-          <Button
-            label="Annuler"
-            severity="secondary"
-            :disabled="processingRequest"
-            @click="onCancel('cartography_init')"
+
+          <AdminInputTextField
+            id="logo_url"
+            v-model="editedConfig.general.logo_url"
+            label="URL du Logo"
+            :variant="hasBeenEdited('general', 'logo_url')"
+            :invalid="!editedConfig.general.logo_url || !validator.isURL(editedConfig.general.logo_url)"
           />
-          <Button
-            v-if="state.is_admin"
-            label="Réinitialiser"
-            :disabled="processingRequest"
-            @click="onDelete('cartography_init')"
+
+          <AdminInputSwitchField
+            id="popup_enabled"
+            v-model="popupEnabled"
+            label="Afficher un popup au lancement de l'application"
           />
-          <Button
-            v-if="state.is_admin"
-            label="Sauvegarder"
-            type="submit"
-            :disabled="processingRequest"
+
+          <AdminInputTextField
+            v-if="popupEnabled"
+            id="popup"
+            v-model="editedConfig.general.popup"
+            label="Popup d'Accueil"
+            :variant="hasBeenEdited('general', 'popup')"
+            text-length="editor"
           />
-        </span>
-      </form>
-    </TabPanel>
-    <TabPanel header="Cartographie - Cluster">
-      <form
-        class="flex flex-column gap-3 max-w-30rem mx-4"
-        @submit.prevent="onSave('cartography_cluster', editedConfig.cartography_cluster)"
-      >
-        <AdminInputNumberField
-          id="characteristic_distance"
-          v-model="editedConfig.cartography_cluster.characteristic_distance"
-          label="Distance Caractéristique"
-          :variant="hasBeenEdited('cartography_cluster', 'characteristic_distance')"
-        />
-
-        <AdminInputNumberField
-          id="declustering_speed"
-          v-model="editedConfig.cartography_cluster.declustering_speed"
-          label="Vitesse de Dégroupement"
-          :variant="hasBeenEdited('cartography_cluster', 'declustering_speed')"
-        />
-
-        <AdminInputNumberField
-          id="minimal_cluster_size"
-          v-model="editedConfig.cartography_cluster.minimal_cluster_size"
-          label="Taille Minimale du Cluster"
-          :variant="hasBeenEdited('cartography_cluster', 'minimal_cluster_size')"
-        />
-
-        <span class="flex gap-1 justify-content-end">
-          <Button
-            label="Annuler"
-            severity="secondary"
-            :disabled="processingRequest"
-            @click="onCancel('cartography_cluster')"
+
+          <AdminInputSwitchField
+            v-if="popupEnabled"
+            id="popup_check_enabled"
+            v-model="popupCheckboxEnabled"
+            label="Mettre une case à cocher dans le popup d'accueil"
+          />
+
+          <AdminInputTextField
+            v-if="popupEnabled && popupCheckboxEnabled"
+            id="popup"
+            v-model="editedConfig.general.popup_check_text"
+            label="Case à Cocher de la Popup d'Accueil"
+            :variant="hasBeenEdited('general', 'popup_check_text')"
           />
-          <Button
-            v-if="state.is_admin"
-            label="Réinitialiser"
-            :disabled="processingRequest"
-            @click="onDelete('cartography_cluster')"
+
+          <AdminInputSwitchField
+            id="redirect_url_enabled"
+            v-model="customRedirection"
+            label="Rediriger les tokens invalides vers une URL personnalisée"
           />
-          <Button
-            v-if="state.is_admin"
-            label="Sauvegarder"
-            type="submit"
-            :disabled="processingRequest"
+
+          <AdminInputTextField
+            v-if="customRedirection"
+            id="redirect_url"
+            v-model="editedConfig.general.redirect_url"
+            label="URL de Redirection"
+            :variant="hasBeenEdited('general', 'redirect_url')"
+            :invalid="!editedConfig.general.redirect_url || !validator.isURL(editedConfig.general.redirect_url)"
+          />
+
+          <span class="flex gap-1 justify-end">
+            <Button
+              label="Annuler"
+              severity="secondary"
+              :disabled="processingRequest"
+              @click="onCancel('general')"
+            />
+            <Button
+              v-if="state.is_admin"
+              label="Réinitialiser"
+              :disabled="processingRequest"
+              @click="onDelete('general')"
+            />
+            <Button
+              v-if="state.is_admin"
+              label="Sauvegarder"
+              type="submit"
+              :disabled="processingRequest"
+            />
+          </span>
+        </form>
+      </TabPanel>
+
+      <TabPanel value="1">
+        <form
+          class="flex flex-col gap-4 max-w-[30rem] mx-6"
+          @submit.prevent="onSave('cartography_init', editedConfig.cartography_init)"
+        >
+          <AdminInputNumberField
+            id="center_lat"
+            v-model="editedConfig.cartography_init.center_lat"
+            label="Latitude du Centre"
+            :variant="hasBeenEdited('cartography_init', 'center_lat')"
           />
-        </span>
-      </form>
-    </TabPanel>
-    <TabPanel
-      v-if="false"
-      header="Mode Sécurisé"
-    >
-      <form
-        class="flex flex-column gap-3 max-w-30rem mx-4"
-        @submit.prevent="onSave('safe_mode', editedConfig.safe_mode)"
+
+          <AdminInputNumberField
+            id="center_lng"
+            v-model="editedConfig.cartography_init.center_lng"
+            label="Longitude du Centre"
+            :variant="hasBeenEdited('cartography_init', 'center_lng')"
+          />
+
+          <AdminInputNumberField
+            id="zoom"
+            v-model="editedConfig.cartography_init.zoom"
+            label="Niveau de Zoom"
+            :variant="hasBeenEdited('cartography_init', 'zoom')"
+          />
+
+          <span class="flex gap-1 justify-end">
+            <Button
+              label="Annuler"
+              severity="secondary"
+              :disabled="processingRequest"
+              @click="onCancel('cartography_init')"
+            />
+            <Button
+              v-if="state.is_admin"
+              label="Réinitialiser"
+              :disabled="processingRequest"
+              @click="onDelete('cartography_init')"
+            />
+            <Button
+              v-if="state.is_admin"
+              label="Sauvegarder"
+              type="submit"
+              :disabled="processingRequest"
+            />
+          </span>
+        </form>
+      </TabPanel>
+      <TabPanel value="2">
+        <form
+          class="flex flex-col gap-4 max-w-[30rem] mx-6"
+          @submit.prevent="onSave('cartography_cluster', editedConfig.cartography_cluster)"
+        >
+          <AdminInputNumberField
+            id="characteristic_distance"
+            v-model="editedConfig.cartography_cluster.characteristic_distance"
+            label="Distance Caractéristique"
+            :variant="hasBeenEdited('cartography_cluster', 'characteristic_distance')"
+          />
+
+          <AdminInputNumberField
+            id="declustering_speed"
+            v-model="editedConfig.cartography_cluster.declustering_speed"
+            label="Vitesse de Dégroupement"
+            :variant="hasBeenEdited('cartography_cluster', 'declustering_speed')"
+          />
+
+          <AdminInputNumberField
+            id="minimal_cluster_size"
+            v-model="editedConfig.cartography_cluster.minimal_cluster_size"
+            label="Taille Minimale du Cluster"
+            :variant="hasBeenEdited('cartography_cluster', 'minimal_cluster_size')"
+          />
+
+          <span class="flex gap-1 justify-end">
+            <Button
+              label="Annuler"
+              severity="secondary"
+              :disabled="processingRequest"
+              @click="onCancel('cartography_cluster')"
+            />
+            <Button
+              v-if="state.is_admin"
+              label="Réinitialiser"
+              :disabled="processingRequest"
+              @click="onDelete('cartography_cluster')"
+            />
+            <Button
+              v-if="state.is_admin"
+              label="Sauvegarder"
+              type="submit"
+              :disabled="processingRequest"
+            />
+          </span>
+        </form>
+      </TabPanel>
+      <TabPanel
+        v-if="false"
+        value="3"
       >
-        <AdminInputTextField
-          id="popup_message"
-          v-model="editedConfig.safe_mode.popup_message"
-          label="Message Pop-up"
-          :variant="hasBeenEdited('safe_mode', 'popup_message')"
-        />
-
-        <AdminInputTextField
-          id="popup_title"
-          v-model="editedConfig.safe_mode.popup_title"
-          label="Titre Pop-up"
-          :variant="hasBeenEdited('safe_mode', 'popup_title')"
-        />
-
-        <AdminInputTextField
-          id="recaptcha_v3_sitekey"
-          v-model="editedConfig.safe_mode.recaptcha_v3_sitekey"
-          label="Clé de Site Recaptcha v3"
-          :variant="hasBeenEdited('safe_mode', 'recaptcha_v3_sitekey')"
-        />
-
-        <span class="flex gap-1 justify-content-end">
-          <Button
-            label="Annuler"
-            severity="secondary"
-            :disabled="processingRequest"
-            @click="onCancel('safe_mode')"
+        <form
+          class="flex flex-col gap-4 max-w-[30rem] mx-6"
+          @submit.prevent="onSave('safe_mode', editedConfig.safe_mode)"
+        >
+          <AdminInputTextField
+            id="popup_message"
+            v-model="editedConfig.safe_mode.popup_message"
+            label="Message Pop-up"
+            :variant="hasBeenEdited('safe_mode', 'popup_message')"
           />
-          <Button
-            v-if="state.is_admin"
-            label="Réinitialiser"
-            :disabled="processingRequest"
-            @click="onDelete('safe_mode')"
+
+          <AdminInputTextField
+            id="popup_title"
+            v-model="editedConfig.safe_mode.popup_title"
+            label="Titre Pop-up"
+            :variant="hasBeenEdited('safe_mode', 'popup_title')"
           />
-          <Button
-            v-if="state.is_admin"
-            label="Sauvegarder"
-            type="submit"
-            :disabled="processingRequest"
+
+          <AdminInputTextField
+            id="recaptcha_v3_sitekey"
+            v-model="editedConfig.safe_mode.recaptcha_v3_sitekey"
+            label="Clé de Site Recaptcha v3"
+            :variant="hasBeenEdited('safe_mode', 'recaptcha_v3_sitekey')"
           />
-        </span>
-      </form>
-    </TabPanel>
-  </TabView>
+
+          <span class="flex gap-1 justify-end">
+            <Button
+              label="Annuler"
+              severity="secondary"
+              :disabled="processingRequest"
+              @click="onCancel('safe_mode')"
+            />
+            <Button
+              v-if="state.is_admin"
+              label="Réinitialiser"
+              :disabled="processingRequest"
+              @click="onDelete('safe_mode')"
+            />
+            <Button
+              v-if="state.is_admin"
+              label="Sauvegarder"
+              type="submit"
+              :disabled="processingRequest"
+            />
+          </span>
+        </form>
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/pages/admin/families/[id]/comments.vue b/frontend/pages/admin/families/[id]/comments.vue
index 5ff1544..647e235 100644
--- a/frontend/pages/admin/families/[id]/comments.vue
+++ b/frontend/pages/admin/families/[id]/comments.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="text-color-secondary">
+    <p class="text-muted-color">
       Une page additionelle est insérée automatiquement au début du formulaire,
       contenant le nom de l'auteur.ice ainsi qu'un champ libre.
     </p>
diff --git a/frontend/pages/admin/families/[id]/entities.vue b/frontend/pages/admin/families/[id]/entities.vue
index 190cbec..695e1e3 100644
--- a/frontend/pages/admin/families/[id]/entities.vue
+++ b/frontend/pages/admin/families/[id]/entities.vue
@@ -1,28 +1,36 @@
 <template>
-  <TabView>
-    <TabPanel
-      header="Éditeur visuel"
-    >
-      <p class="text-color-secondary">
-        Une page additionelle est insérée automatiquement au début du formulaire,
-        contenant le titre de l'entité, sa position lontitude/lagitude et son addresse.
-      </p>
+  <Tabs value="0">
+    <TabList>
+      <Tab value="0">
+        Éditeur visuel
+      </Tab>
+      <Tab value="1">
+        Éditeur avancé
+      </Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel value="0">
+        <p class="text-muted-color">
+          Une page additionelle est insérée automatiquement au début du formulaire,
+          contenant le titre de l'entité, sa position lontitude/lagitude et son addresse.
+        </p>
 
-      <AdminFamiliesEditForm
-        class="-ml-3"
-        :original-form-fields="fetchedFamily.entity_form.fields"
-        :on-save-callback="onSave"
-        kind-name="entité"
-      />
-    </TabPanel>
-    <TabPanel header="Éditeur avancé">
-      <p class="text-color-secondary">
-        Édition directe du formulaire d'ajout en json, utile pour l'import/export.
-        Les changements ne sont pas synchonisés avec ceux de l'édition visuelle en absence de sauvegarde.
-      </p>
+        <AdminFamiliesEditForm
+          class="-ml-4"
+          :original-form-fields="fetchedFamily.entity_form.fields"
+          :on-save-callback="onSave"
+          kind-name="entité"
+        />
+      </TabPanel>
+      <TabPanel value="1">
+        <p class="text-muted-color">
+          Édition directe du formulaire d'ajout en json, utile pour l'import/export.
+          Les changements ne sont pas synchonisés avec ceux de l'édition visuelle en absence de sauvegarde.
+        </p>
       <!-- <AdminFamiliesEditFormJson /> -->
-    </TabPanel>
-  </TabView>
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/pages/admin/families/[id]/general.vue b/frontend/pages/admin/families/[id]/general.vue
index 83fe74a..2ee0b2a 100644
--- a/frontend/pages/admin/families/[id]/general.vue
+++ b/frontend/pages/admin/families/[id]/general.vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
     @submit.prevent="onSave"
   >
     <AdminInputTextField
@@ -24,12 +24,12 @@
       :variant="editedFamily.comment_form.title !== fetchedFamily.comment_form.title"
     />
 
-    <span class="flex align-items-center gap-2">
-      <Dropdown
+    <span class="flex items-center gap-2">
+      <Select
         id="sort_order"
         v-model="editedFamily.sort_order"
         :options="Array.from({ length: state.families.length }, (_, i) => i + 1)"
-        class="w-full md:w-14rem"
+        class="w-full md:w-56"
       />
       <label for="sort_order">Ordre d'affichage parmi les familles</label>
     </span>
@@ -38,7 +38,7 @@
       :object-id="id"
       object-type="families"
     />
-    <span class="flex gap-1 justify-content-end">
+    <span class="flex gap-1 justify-end">
       <NuxtLink to="/admin/families">
         <Button
           label="Annuler"
diff --git a/frontend/pages/admin/families/index.vue b/frontend/pages/admin/families/index.vue
index 3429ad2..7fef1f3 100644
--- a/frontend/pages/admin/families/index.vue
+++ b/frontend/pages/admin/families/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="flex gap-3">
+    <span class="flex gap-4">
       <IconField
         icon-position="left"
       >
@@ -18,7 +18,7 @@
         :options="optionalColumns"
         display="chip"
         placeholder="Sélectionner des colonnes"
-        class="w-full md:w-20rem"
+        class="w-full md:w-80"
       />
     </span>
     <DataTable
@@ -48,11 +48,11 @@
       />
       <Column v-if="state.is_admin">
         <template #body="slotProps">
-          <div class="flex gap-2 justify-content-center">
+          <div class="flex gap-2 justify-center">
             <Button
               outlined
               rounded
-              severity="warning"
+              severity="warn"
               @click="navigateTo(`/admin/families/${slotProps.data.id}/general`)"
             >
               <template #icon>
@@ -62,7 +62,7 @@
             <Button
               outlined
               rounded
-              severity="warning"
+              severity="warn"
               @click="navigateTo(`/admin/families/${slotProps.data.id}/entities`)"
             >
               <template #icon>
@@ -72,7 +72,7 @@
             <Button
               outlined
               rounded
-              severity="warning"
+              severity="warn"
               @click="navigateTo(`/admin/families/${slotProps.data.id}/comments`)"
             >
               <template #icon>
@@ -97,7 +97,6 @@
 </template>
 
 <script setup lang="ts">
-import { FilterMatchMode } from 'primevue/api'
 import type { DataTableFilterMetaData } from 'primevue/datatable'
 import type { InitAdminLayout } from '~/layouts/admin-ui.vue'
 import type { Family } from '~/lib'
@@ -111,7 +110,7 @@ if (!(table_key in state.tablesSelectedColumns)) {
 }
 if (!(table_key in state.tablesFilters)) {
   state.tablesFilters[table_key] = {
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    global: { value: null, matchMode: 'contains' },
   }
 }
 
diff --git a/frontend/pages/admin/families/new-icon-[id].vue b/frontend/pages/admin/families/new-icon-[id].vue
index 272bdae..5e4354c 100644
--- a/frontend/pages/admin/families/new-icon-[id].vue
+++ b/frontend/pages/admin/families/new-icon-[id].vue
@@ -1,12 +1,12 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
   >
     <AdminInputIconUpload
       :object-id="id"
       object-type="families"
     />
-    <span class="flex gap-1 justify-content-end">
+    <span class="flex gap-1 justify-end">
       <NuxtLink :to="`/admin/families`">
         <Button
           label="Retour à la liste"
diff --git a/frontend/pages/admin/families/new.vue b/frontend/pages/admin/families/new.vue
index b50a90d..98b443b 100644
--- a/frontend/pages/admin/families/new.vue
+++ b/frontend/pages/admin/families/new.vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
     @submit.prevent="onSave"
   >
     <AdminInputTextField
@@ -21,17 +21,17 @@
       label="Titre du formulaire d'ajout de commentaire"
     />
 
-    <span class="flex align-items-center gap-2">
-      <Dropdown
+    <span class="flex items-center gap-2">
+      <Select
         id="sort_order"
         v-model="editedFamily.sort_order"
         :options="Array.from({ length: state.families.length + 1 }, (_, i) => i + 1)"
-        class="w-full md:w-14rem"
+        class="w-full md:w-56"
       />
       <label for="sort_order">Ordre d'affichage parmi les familles</label>
     </span>
 
-    <span class="flex gap-1 justify-content-end">
+    <span class="flex gap-1 justify-end">
       <NuxtLink to="/admin/families">
         <Button
           label="Annuler"
diff --git a/frontend/pages/admin/home.vue b/frontend/pages/admin/home.vue
index 784217f..584fb89 100644
--- a/frontend/pages/admin/home.vue
+++ b/frontend/pages/admin/home.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="relative h-full w-full">
-    <div class="grid">
+    <div class="grid grid-cols-12 gap-4">
       <div
         v-for="(card, index) in cards"
         :key="index"
-        class="col-12 md:col-6 xl:col-2 relative"
+        class="col-span-12 md:col-span-6 xl:col-span-2 relative"
       >
         <Card :class="card.class + ' relative'">
           <template #title>
-            <div class="white-space-nowrap text-sm flex">
+            <div class="whitespace-nowrap text-sm flex">
               <AppIcon
                 :icon-name="card.iconName"
                 size="16px"
@@ -26,15 +26,16 @@
       </div>
     </div>
 
-    <div class="relative flex h-full w-full justify-content-center mt-2">
-      <div class="text-xl font-bold mb-3">
+    <div class="relative flex flex-col h-full w-full items-center justify-center">
+      <div class="text-xl font-bold ">
         Activités des 30 derniers jours
       </div>
+
       <Chart
         type="bar"
         :data="chartData"
         :options="chartOptions"
-        class="absolute top-0 left-0 h-full w-full mt-3 xl:mt-6 xl:h-25rem"
+        class="absolute top-0 left-0 h-full w-full max-h-96 xl:mt-12 xl:h-[25rem]"
       />
     </div>
   </div>
@@ -169,31 +170,31 @@ const cards = [
 
 <style>
 .card-green {
-  background-color: #6fac72;
-  color: white;
-  position: relative;
-  overflow: hidden;
+  background-color: #6fac72 !important;
+  color: white !important;
+  position: relative !important;
+  overflow: hidden !important;
 }
 
 .card-orange {
-  background-color: #ef9444;
-  color: white;
-  position: relative;
-  overflow: hidden;
+  background-color: #ef9444 !important;
+  color: white !important;
+  position: relative !important;
+  overflow: hidden !important;
 }
 
 .card-blue {
-  background-color: #E86BA7;
-  color: white;
-  position: relative;
-  overflow: hidden;
+  background-color: #E86BA7 !important;
+  color: white !important;
+  position: relative !important;
+  overflow: hidden !important;
 }
 
 .p-card-body {
-  padding: 0.75rem;
+  padding: 0.75rem !important;
 }
 
 .p-card-content {
-  margin-top: 0.25rem;
+  margin-top: 0.25rem !important;
 }
 </style>
diff --git a/frontend/pages/admin/login.vue b/frontend/pages/admin/login.vue
index 8772caa..f918993 100644
--- a/frontend/pages/admin/login.vue
+++ b/frontend/pages/admin/login.vue
@@ -1,19 +1,19 @@
 <template>
   <form
     method="post"
-    class="flex flex-column justify-content-center align-items-center h-full gap-5 hot-pink-bg"
+    class="flex flex-col justify-center items-center h-full gap-8 hot-pink-bg"
     @submit.prevent="login"
   >
     <img
       src="assets/logo_secondary.svg"
-      class="w-14rem -mt-8 -mb-2"
+      class="w-64 -mt-20 -mb-2"
     >
     <Card>
       <template #title>
         <span>Espace d'administration</span>
       </template>
       <template #content>
-        <div class="flex flex-column gap-3 max-w-17rem">
+        <div class="flex flex-col gap-4 max-w-[17rem]">
           <Message
             v-if="failed_attempt"
             severity="error"
@@ -58,7 +58,7 @@
           <Button
             label="Login"
             type="submit"
-            class="w-full justify-content-center"
+            class="w-full justify-center"
             :disabled="awaiting_auth_response"
           >
             <AppIcon
diff --git a/frontend/pages/admin/tags/[id].vue b/frontend/pages/admin/tags/[id].vue
index bdeead4..b081295 100644
--- a/frontend/pages/admin/tags/[id].vue
+++ b/frontend/pages/admin/tags/[id].vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
     @submit.prevent="onSave"
   >
     <AdminInputTextField
@@ -51,7 +51,7 @@
       :invalid="!validator.isHexColor(editedTag.fill_color)"
     />
 
-    <span class="flex gap-1 justify-content-end">
+    <span class="flex gap-1 justify-end">
       <NuxtLink to="/admin/tags">
         <Button
           label="Annuler"
diff --git a/frontend/pages/admin/tags/index.vue b/frontend/pages/admin/tags/index.vue
index 1669393..786d31d 100644
--- a/frontend/pages/admin/tags/index.vue
+++ b/frontend/pages/admin/tags/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="flex gap-3">
+    <span class="flex gap-4">
       <IconField
         icon-position="left"
       >
@@ -19,7 +19,7 @@
 
         display="chip"
         placeholder="Sélectionner des colonnes"
-        class="w-full md:w-20rem"
+        class="w-full md:w-80"
       />
     </span>
     <DataTable
@@ -95,7 +95,6 @@
 </template>
 
 <script setup lang="ts">
-import { FilterMatchMode } from 'primevue/api'
 import type { DataTableFilterMetaData } from 'primevue/datatable'
 import type { InitAdminLayout } from '~/layouts/admin-ui.vue'
 import type { Tag } from '~/lib'
@@ -108,7 +107,7 @@ if (!(table_key in state.tablesSelectedColumns)) {
 }
 if (!(table_key in state.tablesFilters)) {
   state.tablesFilters[table_key] = {
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    global: { value: null, matchMode: 'contains' },
   }
 }
 
diff --git a/frontend/pages/admin/users/[id].vue b/frontend/pages/admin/users/[id].vue
index 191591a..dd5817c 100644
--- a/frontend/pages/admin/users/[id].vue
+++ b/frontend/pages/admin/users/[id].vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
     @submit.prevent="onSave"
   >
     <AdminInputTextField
@@ -25,7 +25,7 @@
 
     <div
       :hidden="!editPassword && !isNew"
-      class="flex-column gap-3"
+      class="flex-col gap-4"
       :class="{ flex: isNew || editPassword }"
     >
       <label for="password">
@@ -54,7 +54,7 @@
       />
     </div>
 
-    <span class="flex gap-1 justify-content-end   ">
+    <span class="flex gap-1 justify-end   ">
       <NuxtLink
         to="/admin/users"
       >
diff --git a/frontend/pages/admin/users/index.vue b/frontend/pages/admin/users/index.vue
index 0ad19d2..ee4ff9f 100644
--- a/frontend/pages/admin/users/index.vue
+++ b/frontend/pages/admin/users/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="flex gap-3">
+    <span class="flex gap-4">
       <IconField
         icon-position="left"
       >
@@ -32,7 +32,7 @@
         sortable
       >
         <template #body="slotProps">
-          <div class="flex flex align-items-center justify-content-begin gap-2">
+          <div class="flex flex items-center justify-content-begin gap-2">
             <AdminUserAvatar
               :username="slotProps.data.name"
               size="normal"
@@ -80,7 +80,6 @@
 </template>
 
 <script setup lang="ts">
-import { FilterMatchMode } from 'primevue/api'
 import type { DataTableFilterMetaData } from 'primevue/datatable'
 import type { InitAdminLayout } from '~/layouts/admin-ui.vue'
 import type { User } from '~/lib'
@@ -92,7 +91,7 @@ if (!(table_key in state.tablesSelectedColumns)) {
 }
 if (!(table_key in state.tablesFilters)) {
   state.tablesFilters[table_key] = {
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    global: { value: null, matchMode: 'contains' },
   }
 }
 
diff --git a/frontend/pages/admin/users/self.vue b/frontend/pages/admin/users/self.vue
index 3f5839e..011417b 100644
--- a/frontend/pages/admin/users/self.vue
+++ b/frontend/pages/admin/users/self.vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-column gap-3 max-w-30rem mx-4"
+    class="flex flex-col gap-4 max-w-[30rem] mx-6"
     @submit.prevent="onSave"
   >
     <span> Nom d'utilisateur⋅ice: {{ state.username }} </span>
@@ -15,7 +15,7 @@
 
     <div
       :hidden="!editPassword"
-      class="flex-column gap-3"
+      class="flex-col gap-4"
       :class="{ flex: editPassword }"
     >
       <label for="password">
@@ -44,7 +44,7 @@
       />
     </div>
 
-    <span class="flex gap-1 justify-content-end   ">
+    <span class="flex gap-1 justify-end   ">
       <NuxtLink
         to="/admin/"
       >
diff --git a/frontend/pages/map/[token].vue b/frontend/pages/map/[token].vue
index add8632..e22b99d 100644
--- a/frontend/pages/map/[token].vue
+++ b/frontend/pages/map/[token].vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-column">
+  <div class="h-full flex flex-col">
     <ViewerNavbar
       @filters-changed="refreshMap"
       @location-chosen="goToGpsCoordinates"
@@ -20,23 +20,27 @@
       />
     </div>
 
-    <Sidebar
+    <Drawer
       v-model:visible="state.hasActiveEntity"
       :modal="false"
       :dismissable="false"
       :style="fitContainer()"
       position="left"
-      class="w-full md:w-20rem lg:w-30rem"
+      class="!w-full md:!w-[30rem]"
+      :pt="{ mask: '!w-auto' }"
     >
       <template #header>
         <div
           v-if="state.activeEntity"
-          class="flex align-items-center gap-2"
+          class="flex items-center justify-start gap-2"
         >
-          <CategoryTag :category="state.activeEntity!.category" />
-          <h3 class="m-0">
+          <CategoryTag
+            :category="state.activeEntity!.category"
+          />
+          <div class="grow m-0">
             {{ state.activeEntity!.entity.display_name }}
-          </h3>
+          </div>
+          <div class="grow" />
         </div>
       </template>
       <ViewerCommentAddForm
@@ -49,7 +53,7 @@
         :categories="state.categories"
         @entity-selected="displayEntityId"
       />
-    </Sidebar>
+    </Drawer>
 
     <StartPopup />
   </div>
diff --git a/frontend/pages/search/[token].vue b/frontend/pages/search/[token].vue
index 44a2395..8d59ac6 100644
--- a/frontend/pages/search/[token].vue
+++ b/frontend/pages/search/[token].vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="h-full flex flex-column">
+  <div class="h-full flex flex-col">
     <ViewerNavbar
       :show-category-switcher="false"
       :show-search="false"
       :show-family-switcher="false"
     />
 
-    <Card
-      class="m-2 p-2"
-    >
+    <Card class="m-2 p-2">
       <template #header>
         <span class="text-2xl font-bold">
           Recherche
@@ -17,55 +15,102 @@
 
       <template #content>
         <form @submit.prevent="submitSearch">
-          <InputGroup>
-            <InputText
-              v-model="query"
-              placeholder="Tapez votre recherche ici"
-            />
+          <div class="hidden sm:block">
+            <InputGroup>
+              <InputText
+                v-model="query"
+                placeholder="Tapez votre recherche ici"
+              />
+
+              <Button
+                type="button"
+                severity="secondary"
+                :label="state.activeFamily.title"
+                @click="showFamilySwitcher"
+              >
+                <template #icon>
+                  <AppIcon
+                    :icon-name="state.activeFamily.icon_hash!"
+                    dynamic
+                    class="mr-1"
+                    size="20px"
+                  />
+                </template>
+              </Button>
+
+              <Button
+                type="button"
+                severity="warn"
+                label="Filtres"
+                @click="showCriteriasModal()"
+              >
+                <template #icon>
+                  <AppIcon
+                    class="mr-1"
+                    icon-name="filter"
+                  />
+                </template>
+              </Button>
+
+              <Button type="submit">
+                <template #icon>
+                  <AppIcon icon-name="search" />
+                </template>
+              </Button>
+            </InputGroup>
+          </div>
+          <div class="sm:hidden flex flex-col justify-end items-end gap-2">
+            <InputGroup>
+              <InputText
+                v-model="query"
+                placeholder="Tapez votre recherche ici"
+              />
+              <Button type="submit">
+                <template #icon>
+                  <AppIcon icon-name="search" />
+                </template>
+              </Button>
+            </InputGroup>
+
+            <div class="flex gap-2">
+              <Button
+                type="button"
+                severity="secondary"
+                :label="state.activeFamily.title"
+                @click="showFamilySwitcher"
+              >
+                <template #icon>
+                  <AppIcon
+                    :icon-name="state.activeFamily.icon_hash!"
+                    dynamic
+                    class="mr-1"
+                    size="20px"
+                  />
+                </template>
+              </Button>
 
-            <Button
-              type="button"
-              severity="secondary"
-              :label="state.activeFamily.title"
-              @click="showFamilySwitcher"
-            >
-              <template #icon>
-                <AppIcon
-                  :icon-name="state.activeFamily.icon_hash!"
-                  dynamic
-                  class="mr-1"
-                  size="20px"
-                />
-              </template>
-            </Button>
-
-            <Button
-              type="button"
-              severity="warning"
-              label="Filtres"
-              @click="showCriteriasModal()"
-            >
-              <template #icon>
-                <AppIcon
-                  class="mr-1"
-                  icon-name="filter"
-                />
-              </template>
-            </Button>
-
-            <Button type="submit">
-              <template #icon>
-                <AppIcon icon-name="search" />
-              </template>
-            </Button>
-          </InputGroup>
+              <Button
+                type="button"
+                severity="warn"
+                label="Filtres"
+                @click="showCriteriasModal()"
+              >
+                <template #icon>
+                  <AppIcon
+                    class="mr-1"
+                    icon-name="filter"
+                  />
+                </template>
+              </Button>
+            </div>
+          </div>
         </form>
       </template>
     </Card>
 
-    <OverlayPanel ref="familySwitcher">
+    <Popover ref="familySwitcher">
       <ViewerFamilySwitcher />
-    </OverlayPanel>
+    </Popover>
 
     <Card
       v-if="currentEntitiesResults"
@@ -110,7 +155,7 @@
         <div
           v-if="
             state.activeEntity"
-          class="flex align-items-center gap-2"
+          class="flex items-center gap-2"
         >
           <CategoryTag :category="state.activeEntity!.category" />
           <h3 class="m-0">
@@ -151,7 +196,7 @@
 </template>
 
 <script setup lang="ts">
-import type OverlayPanel from 'primevue/overlaypanel'
+import type Popover from 'primevue/popover'
 import type { PageState } from 'primevue/paginator'
 import type { ViewerPaginatedCachedEntities } from '~/lib'
 import state from '~/lib/viewer-state'
@@ -168,7 +213,7 @@ const pageSize = ref(20)
 const showCriterias = ref(false)
 
 const currentEntitiesResults: Ref<ViewerPaginatedCachedEntities | null> = ref(null)
-const familySwitcher = ref<OverlayPanel>()
+const familySwitcher = ref<typeof Popover>()
 
 function resultLabel() {
   const result = currentEntitiesResults!.value?.total_results ?? 0
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..701f027
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('tailwindcss-primeui')],
+}
diff --git a/frontend/theme.mjs b/frontend/theme.mjs
new file mode 100644
index 0000000..9dc3f4a
--- /dev/null
+++ b/frontend/theme.mjs
@@ -0,0 +1,17 @@
+import Aura from '@primevue/themes/aura'
+
+Aura.semantic.primary = {
+  50: '{pink.50}',
+  100: '{pink.100}',
+  200: '{pink.200}',
+  300: '{pink.300}',
+  400: '{pink.400}',
+  500: '{pink.500}',
+  600: '{pink.600}',
+  700: '{pink.700}',
+  800: '{pink.800}',
+  900: '{pink.900}',
+  950: '{pink.950}',
+}
+
+export default Aura
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index b0675ca..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "safehaven",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}