diff --git a/assets/scss/base/_forms.scss b/assets/scss/base/_forms.scss
index ca3299b..1c75bcb 100644
--- a/assets/scss/base/_forms.scss
+++ b/assets/scss/base/_forms.scss
@@ -1,10 +1,14 @@
 // Select
-select {
+select.form-select {
   @apply block w-full rounded-md border-0 py-1.5 text-body-txt shadow-sm ring-1 ring-inset ring-polarnight-nord-3
   focus:ring-2 focus:ring-inset focus:ring-accent sm:max-w-xs sm:text-sm sm:leading-6;
 }
 
-input[type="text"] {
+input[type="text"].form-input, .input-text {
   @apply block w-full rounded-md border-0 py-1.5 text-body-txt shadow-sm ring-1 ring-inset ring-polarnight-nord-3
   focus:ring-2 focus:ring-inset focus:ring-accent sm:max-w-xs sm:text-sm sm:leading-6;
 }
+
+input[type="checkbox"] {
+  @apply rounded border-b-polarnight-nord-0 text-body-txt shadow-sm focus:border-accent focus:ring focus:ring-offset-0 focus:ring-accent focus:ring-opacity-50;
+}
diff --git a/components/MultiSelectTag.vue b/components/MultiSelectTag.vue
new file mode 100644
index 0000000..036b480
--- /dev/null
+++ b/components/MultiSelectTag.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/vue';
+
+// Props
+const props = defineProps<{
+  options: { id: string, name: string }[]
+}>();
+
+const selectedOption = defineModel<string[]>({ required: true });
+
+const query = ref('');
+
+const filteredOption = computed(() =>
+  query.value === ''
+    ? props.options
+    : props.options.filter(option =>
+      option.name
+        .toLowerCase()
+        .replace(/\s+/g, '')
+        .includes(query.value.toLowerCase().replace(/\s+/g, '')),
+    ),
+);
+
+function displayValue(options: { id: string }[]) {
+  return options.map(option => option.name).join(', ');
+}
+</script>
+
+<template>
+  <Combobox v-model="selectedOption" multiple nullable by="id">
+    <div class="multi-select form-multiselect">
+      <div
+        class="multi-select__label-container"
+      >
+        <!--        <span v-if="selectedOption.length === 0" class="multi-select__label">Select an option</span> -->
+        <ComboboxInput
+          class="multi-select__label" :display-value="displayValue"
+          placeholder="Select an option"
+          @change="query = $event.target.value"
+        />
+      </div>
+
+      <ComboboxButton
+        class="ml-auto flex items-center"
+      >
+        <span>v</span>
+      </ComboboxButton>
+
+      <ComboboxOptions
+        class="multi-select__options"
+      >
+        <div
+          v-if="filteredOption.length === 0 && query !== ''"
+          class="multi-select__nothing-found"
+        >
+          Nothing found.
+        </div>
+        <ComboboxOption
+          v-for="option in filteredOption" :key="option.id" v-slot="{ active, selected }"
+          :value="option" as="template"
+        >
+          <li
+            class="multi-select__option" :aria-selected="selected" :class="{ active }"
+          >
+            <!--            <span class="block truncate" :class="[selected && 'font-semibold']">
+              {{ option.name }}
+            </span>
+
+            <span
+              v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4"
+              :class="[active ? 'text-white' : 'text-accent']"
+            >
+              ok
+            </span> -->
+            <input class="form-checkbox" type="checkbox" :checked="selected"><span :class="[selected && 'font-semibold']">{{ option.name }}</span>
+          </li>
+        </ComboboxOption>
+      </ComboboxOptions>
+    </div>
+  </Combobox>
+</template>
+
+<style scoped lang="scss">
+.multi-select {
+  @apply w-full relative flex items-center bg-white px-3
+  rounded-md border-0 py-1.5 text-body-txt shadow-sm ring-1 ring-inset ring-polarnight-nord-3
+  focus:ring-2 focus:ring-inset focus:ring-accent sm:max-w-xs sm:text-sm sm:leading-6;
+
+  &__label-container {
+    @apply flex items-center overflow-x-clip;
+  }
+
+  &__label {
+    color: red;
+  }
+
+  &__options {
+    @apply absolute left-0 top-[100%] z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
+  }
+
+  &__option {
+    @apply relative flex items-center gap-2 cursor-default select-none py-2 pl-3 pr-9;
+
+    &.active {
+      @apply bg-accent text-accent-content;
+    }
+
+  }
+
+  &__nothing-found {
+    @apply relative cursor-default select-none px-4 py-2;
+  }
+}
+</style>
diff --git a/components/TestComponent.vue b/components/TestComponent.vue
new file mode 100644
index 0000000..0bab64e
--- /dev/null
+++ b/components/TestComponent.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue';
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from '@headlessui/vue';
+
+const people = [
+  { id: 1, name: 'Durward Reynolds' },
+  { id: 2, name: 'Kenton Towne' },
+  { id: 3, name: 'Therese Wunsch' },
+  { id: 4, name: 'Benedict Kessler' },
+  { id: 5, name: 'Katelyn Rohan' },
+];
+const selectedPeople = ref([people[0], people[1]]);
+</script>
+
+<template>
+  <Combobox v-model="selectedPeople" as="div" multiple>
+    <ul v-if="selectedPeople.length > 0">
+      <li v-for="person in selectedPeople" :key="person.id">
+        {{ person.name }}
+      </li>
+    </ul>
+    <ComboboxInput />
+    <ComboboxOptions>
+      <ComboboxOption v-for="person in people" :key="person.id" :value="person">
+        {{ person.name }}
+      </ComboboxOption>
+    </ComboboxOptions>
+  </Combobox>
+</template>
diff --git a/components/shared/AppLoader.vue b/components/shared/AppLoader.vue
index 3cc2f27..43adbfc 100644
--- a/components/shared/AppLoader.vue
+++ b/components/shared/AppLoader.vue
@@ -9,7 +9,7 @@
 <style scoped>
 .app-loader {
   --uib-size: 1em;
-  --uib-color: black;
+  --uib-color: var(--color-body-text-hex, #000);
   --uib-speed: 2s;
   position: relative;
   width: var(--uib-size);
diff --git a/locales/en.json b/locales/en.json
index 417beca..1816e05 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1,5 +1,6 @@
 {
   "common": {
+    "clearFilters": "Clear filters",
     "go": "Go",
     "goToPage": "Go to page",
     "languages": "Language",
diff --git a/locales/fr.json b/locales/fr.json
index a773ea0..48caa08 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -1,5 +1,6 @@
 {
   "common": {
+    "clearFilters": "Effacer les filtres",
     "go": "Allez",
     "goToPage": "Aller à la page",
     "languages": "Langue",
diff --git a/package.json b/package.json
index 1f885e5..43420fe 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@fontsource/inter": "^5.0.16",
     "@fontsource/rubik": "^5.0.18",
+    "@headlessui/tailwindcss": "^0.2.0",
     "@notionhq/client": "^2.2.14",
     "@studio-freight/lenis": "^1.0.34",
     "@vueuse/components": "^10.7.2",
diff --git a/pages/readings.vue b/pages/readings.vue
index 05204ac..24be6da 100644
--- a/pages/readings.vue
+++ b/pages/readings.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useRouteQuery } from '@vueuse/router';
-import { vIntersectionObserver } from '@vueuse/components';
-import type { SanitizedResponse } from '~/server/api/notion-page-list.post';
+
 import type { IPage } from '~/types/types';
+import type { SanitizedResponse } from '~/server/api/notion-page-list.post';
 
 const config = useRuntimeConfig();
 const { locale: currentLocale, t } = useI18n();
@@ -27,9 +27,24 @@ const status = useRouteQuery('status', '', { transform: String });
 const search = useRouteQuery('search', '', { transform: String });
 const sort = useRouteQuery('sort', 'Created time', { transform: String });
 const isLoadingMore = ref(false);
+const selectedOptions = ref<string[]>([]);
+
+// Fetch database info
+const { data: database } = await useAsyncData('database-info', () =>
+  $fetch('/api/notion-database-info', {
+    params: {
+      database_id: config.public.notionDatabaseId,
+    },
+    method: 'GET',
+  }));
+
+// Computed - Get "tags" multi-select value from dbResponse
+const tags = computed(() => {
+  return database.value?.properties.Tags.multi_select.options || [];
+});
 
 // Fetch page list
-const { data, error, pending, refresh } = await useAsyncData('page-list', () =>
+const { data: pageList, error, pending, refresh } = await useAsyncData('page-list', () =>
   $fetch('/api/notion-page-list', {
     body: {
       database_id: config.public.notionDatabaseId,
@@ -55,46 +70,30 @@ const { data, error, pending, refresh } = await useAsyncData('page-list', () =>
               contains: search.value,
             },
           },
+          {
+            or: selectedOptions.value.map(tag => ({
+              property: 'Tags',
+              multi_select: {
+                contains: tag.name,
+              },
+            })),
+          },
         ],
       },
     },
     method: 'POST',
   }));
 
-/* const imageUrls = reactive({});
-
-// Fetch image url
-async function getImageUrl(pageId: string) {
-  // If client side return
-  if (!process.client)
-    return '';
-  return await $fetch('/api/notion-page-image', {
-    body: {
-      page_id: pageId,
-    },
-    method: 'POST',
-  });
-} */
-
 function loadMore() {
   isLoadingMore.value = true;
-  cursor.value = data.value?.response.next_cursor || null;
+  cursor.value = pageList.value?.response.next_cursor || null;
 }
 
 function clearFilters() {
   cursor.value = null;
   status.value = '';
   search.value = '';
-}
-
-async function onIntersectionObserver([{ isIntersecting, target }]: IntersectionObserverEntry[]) {
-  if (isIntersecting) {
-    const id = (target as HTMLElement).dataset.pageid;
-    /* if (!id)
-      return;
-    if (!imageUrls[id])
-      imageUrls[id] = await getImageUrl(id); */
-  }
+  selectedOptions.value = [];
 }
 
 // Computed - Has any filters
@@ -104,7 +103,7 @@ const hasFilters = computed<boolean>(() => {
 
 // Computed - Has more
 const hasMore = computed<boolean>(() => {
-  return data.value?.response.has_more || false;
+  return pageList.value?.response.has_more || false;
 });
 
 // Computed - Map status color to tailwind color
@@ -117,7 +116,7 @@ const statusColor = computed<Record<string, string>>(() => {
 });
 
 watch(
-  () => data.value,
+  () => pageList.value,
   async (newVal) => {
     if (!newVal)
       return;
@@ -129,13 +128,6 @@ watch(
     else {
       pageListCollection.value = newVal.results as SanitizedResponse[];
     }
-
-    /* if (!process.client)
-      return;
-    // await nextTick();
-    await Promise.all(newVal.results.map(async (item) => {
-      imageUrls.value[item!.id] = await getImageUrl(item!.id);
-    })); */
   },
   { immediate: true },
 );
@@ -198,6 +190,18 @@ watch(
   },
   { immediate: false },
 );
+
+// Watch selectedOptions change
+watch(
+  () => selectedOptions.value,
+  async (newVal) => {
+    if (!newVal)
+      return;
+    cursor.value = null;
+    await refresh();
+  },
+  { immediate: false },
+);
 </script>
 
 <template>
@@ -222,7 +226,8 @@ watch(
     <div class="flow">
       <template v-if="error">
         <p class="font-code">
-          <Icon name="material-symbols:error" class="text-xl text-danger" /> Oups
+          <Icon name="material-symbols:error" class="text-xl text-danger" />
+          Oups
         </p>
         <p>{{ error }}</p>
       </template>
@@ -231,12 +236,15 @@ watch(
 
         <div class="flex flex-col flex-wrap gap-x-6 gap-y-1.5 lg:flex-row lg:items-center">
           <div>
-            <input v-model.lazy="search" autocomplete="search" name="search" type="text" placeholder="Search an article">
+            <input
+              v-model.lazy="search" autocomplete="search" name="search" type="text"
+              placeholder="Search an article" class="form-input"
+            >
           </div>
 
           <div class="items-center gap-2 lg:flex">
             <label class="" for="selectStatus">{{ t('pages.readings.filters.statusLabel') }}</label>
-            <select id="selectStatus" v-model="status">
+            <select id="selectStatus" v-model="status" class="form-select">
               <option value="">
                 {{ t('pages.readings.filters.status.all') }}
               </option>
@@ -257,7 +265,7 @@ watch(
 
           <div class="items-center gap-2 lg:flex">
             <label class="flex-shrink-0" for="selectSort">{{ t('pages.readings.sort.sortLabel') }}</label>
-            <select id="selectSort" v-model="sort">
+            <select id="selectSort" v-model="sort" class="form-select">
               <option value="Created time">
                 {{ t('pages.readings.sort.createdTime') }}
               </option>
@@ -273,9 +281,17 @@ watch(
             </select>
           </div>
 
-          <div v-if="hasFilters">
-            <button @click="clearFilters">
-              Effacer les filtres
+          <div class="">
+            <MultiSelectTag v-model="selectedOptions" :options="tags" />
+          </div>
+          <div class="">
+            <TestComponent />
+          </div>
+
+          <div v-if="hasFilters" class="leading-none">
+            <button class="inline-flex items-center" @click="clearFilters">
+              <Icon class="mr-1.5" name="material-symbols:cancel" />
+              {{ t('common.clearFilters') }}
             </button>
           </div>
           <Transition name="fade">
@@ -289,14 +305,18 @@ watch(
           class="card-layout mt-12"
         >
           <li v-for="item in pageListCollection" :key="item.id as string">
-            <AppCard v-intersection-observer="[onIntersectionObserver, { root: observerRoot }]" :data-pageid="item.id" class="h-full">
+            <AppCard
+              :data-pageid="item.id"
+              class="h-full"
+            >
               <template #image>
                 <img v-if="item.image" loading="lazy" :src="item.image" alt="">
                 <div v-if="item.status" class="absolute right-2 top-1.5">
                   <span
                     class="badge shadow-md"
                     :class="item.status.color ? statusColor[item.status.color] : 'badge--is-neutral'"
-                  >{{ item.status.name
+                  >{{
+                    item.status.name
                   }}</span>
                 </div>
               </template>
@@ -316,7 +336,8 @@ watch(
 
               <template #footer>
                 <p class="truncate">
-                  <Icon name="material-symbols:link" class="text-lg" /> <a :href="item.url" target="_blank">{{ item.url }}</a>
+                  <Icon name="material-symbols:link" class="text-lg" />
+                  <a :href="item.url" target="_blank">{{ item.url }}</a>
                 </p>
               </template>
             </AppCard>
@@ -325,10 +346,11 @@ watch(
         <div class="mt-10 flex flex-col items-center gap-2 lg:flex-row">
           <div v-if="hasMore" class="flex items-center gap-2 leading-none">
             <button :disabled="pending" class="group" @click="loadMore">
-              {{ t('common.loadMore') }}<Icon class="ml-1 block transition-transform group-hover:animate-spin" name="material-symbols:refresh" />
+              {{ t('common.loadMore') }}
+              <Icon class="ml-1 block transition-transform group-hover:animate-spin" name="material-symbols:refresh" />
             </button>
             <Transition name="fade">
-              <AppLoader v-if="isLoadingMore" class="text-base" />
+              <AppLoader v-if="isLoadingMore" class="text-2xl" />
             </Transition>
           </div>
           <div v-if="pageListCollection.length >= DEFAULT_LIMIT" class="flex items-center gap-2 lg:ml-auto">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3265200..9fd5bb9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@fontsource/rubik':
     specifier: ^5.0.18
     version: 5.0.18
+  '@headlessui/tailwindcss':
+    specifier: ^0.2.0
+    version: 0.2.0(tailwindcss@3.4.1)
   '@notionhq/client':
     specifier: ^2.2.14
     version: 2.2.14
@@ -128,7 +131,6 @@ packages:
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
-    dev: true
 
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
@@ -1077,6 +1079,15 @@ packages:
     resolution: {integrity: sha512-AmEsTzBYA6PZCgCbSE/VC7asgtOtuLQrmcca210CcW+Yb+KYJQdut/jKQAEaSl889jDMyLfowmZe8r1GBzSCqQ==}
     dev: false
 
+  /@headlessui/tailwindcss@0.2.0(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      tailwindcss: ^3.0
+    dependencies:
+      tailwindcss: 3.4.1
+    dev: false
+
   /@headlessui/vue@1.7.17(vue@3.4.15):
     resolution: {integrity: sha512-hmJChv8HzKorxd9F70RGnECAwZfkvmmwOqreuKLWY/19d5qbWnSdw+DNbuA/Uo6X5rb4U5B3NrT+qBKPmjhRqw==}
     engines: {node: '>=10'}
@@ -3655,7 +3666,6 @@ packages:
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: true
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -3704,7 +3714,6 @@ packages:
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -3992,7 +4001,6 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /camelcase@6.3.0:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
@@ -4199,7 +4207,6 @@ packages:
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /commander@6.2.1:
     resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
@@ -4570,7 +4577,6 @@ packages:
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /diff@5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
@@ -4585,7 +4591,6 @@ packages:
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -6916,7 +6921,6 @@ packages:
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /lilconfig@3.0.0:
     resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
@@ -6924,7 +6928,6 @@ packages:
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
 
   /listhen@1.6.0:
     resolution: {integrity: sha512-z0RcEXVX5oTpY1bO02SKoTU/kmZSrFSngNNzHRM6KICR17PTq7ANush6AE6ztGJwJD4RLpBrVHd9GnV51J7s3w==}
@@ -7704,7 +7707,6 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: true
 
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
@@ -8249,7 +8251,6 @@ packages:
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@@ -8587,12 +8588,10 @@ packages:
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
@@ -8704,7 +8703,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
-    dev: true
 
   /postcss-js@4.0.1(postcss@8.4.33):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -8714,7 +8712,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.33
-    dev: true
 
   /postcss-load-config@4.0.2(postcss@8.4.33):
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
@@ -8731,7 +8728,6 @@ packages:
       lilconfig: 3.0.0
       postcss: 8.4.33
       yaml: 2.3.4
-    dev: true
 
   /postcss-merge-longhand@6.0.2(postcss@8.4.33):
     resolution: {integrity: sha512-+yfVB7gEM8SrCo9w2lCApKIEzrTKl5yS1F4yGhV3kSim6JzbfLGJyhR1B6X+6vOT0U33Mgx7iv4X9MVWuaSAfw==}
@@ -8803,7 +8799,6 @@ packages:
     dependencies:
       postcss: 8.4.33
       postcss-selector-parser: 6.0.15
-    dev: true
 
   /postcss-nesting@12.0.2(postcss@8.4.33):
     resolution: {integrity: sha512-63PpJHSeNs93S3ZUIyi+7kKx4JqOIEJ6QYtG3x+0qA4J03+4n0iwsyA1GAHyWxsHYljQS4/4ZK1o2sMi70b5wQ==}
@@ -9053,7 +9048,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /read-package-json-fast@3.0.2:
     resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
@@ -9915,7 +9909,6 @@ packages:
       mz: 2.7.0
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
-    dev: true
 
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -10032,7 +10025,6 @@ packages:
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -10098,13 +10090,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: true
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: true
 
   /tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
@@ -10165,7 +10155,6 @@ packages:
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: true
 
   /tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
diff --git a/server/api/notion-database-info.get.ts b/server/api/notion-database-info.get.ts
new file mode 100644
index 0000000..600c004
--- /dev/null
+++ b/server/api/notion-database-info.get.ts
@@ -0,0 +1,24 @@
+import { Client } from '@notionhq/client';
+
+// Get the runtime config
+const config = useRuntimeConfig();
+
+// Initialize Notion Client
+const notion = new Client({ auth: config.notionApiKey });
+
+export default defineEventHandler(async (event) => {
+  // Get Query
+  const query = getQuery(event);
+  console.log('query ---->', query);
+
+  // Get the database id from the query
+  const databaseId = query.database_id;
+
+  // Get the database
+  // return
+  return await notion.databases.retrieve(
+    {
+      database_id: String(databaseId),
+    },
+  );
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index d8047b5..b0fa272 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -84,6 +84,9 @@ module.exports = {
     },
   },
   plugins: [
-    require('@tailwindcss/forms'),
+    require('@tailwindcss/forms')({
+      strategy: 'class', // only generate classes
+    }),
+    require('@headlessui/tailwindcss'),
   ],
 };