diff --git a/src/components/header/NavBar.vue b/src/components/header/NavBar.vue
index 1fdd646..c984817 100644
--- a/src/components/header/NavBar.vue
+++ b/src/components/header/NavBar.vue
@@ -10,11 +10,6 @@ const items = [
     label: 'Bookmarks',
     to: '/bookmarks',
     icon: 'i-ph-bookmark-simple-bold',
-  },
-  {
-    label: 'Ask Me',
-    to: '/ama',
-    icon: 'i-octicon-comment-discussion-16',
   }],
 ]
 </script>
diff --git a/src/composables/useTalents.ts b/src/composables/useTalents.ts
new file mode 100644
index 0000000..6b84ea4
--- /dev/null
+++ b/src/composables/useTalents.ts
@@ -0,0 +1,14 @@
+export async function useTalents() {
+  const { $trpc } = useNuxtApp()
+
+  const getTalents = async (category: string, favorite: boolean) => await $trpc.talents.getTalents.query({ favorite, category })
+
+  const {
+    data: getCategories,
+  } = await $trpc.talents.getCategories.useQuery()
+
+  return {
+    getTalents,
+    getCategories,
+  }
+}
diff --git a/src/content/educations/baccalaureat.md b/src/content/educations/baccalaureat.md
index 6be8c8c..3d7dcb1 100644
--- a/src/content/educations/baccalaureat.md
+++ b/src/content/educations/baccalaureat.md
@@ -1,6 +1,6 @@
 ---
 title: Baccalaureate
-description: Specializations Mathematics and Physics-CHemistry, Final Grade +15/20 (French grading system)
+description: Specializations Mathematics and Physics-Chemistry, Final Grade +15/20 (French grading system)
 location: La Salle Passy-Buzenval High School, Rueil-Malmaison (France)
 startDate: September 2020
 endDate: July 2021
diff --git a/src/content/projects/artdanj-api.md b/src/content/projects/artdanj-api.md
new file mode 100644
index 0000000..8dbc751
--- /dev/null
+++ b/src/content/projects/artdanj-api.md
@@ -0,0 +1,7 @@
+---
+name: artdanj-api
+description: My personal API connected to my instances and my services
+link: https://api.arthurdanjou.fr
+tags: [API]
+icon: i-ph-gear-six-bold
+---
diff --git a/src/content/projects/artdanj-shortener.md b/src/content/projects/artdanj-shortener.md
new file mode 100644
index 0000000..6588ad1
--- /dev/null
+++ b/src/content/projects/artdanj-shortener.md
@@ -0,0 +1,7 @@
+---
+name: artdanj-shortener
+description: URL Shortener for Developers
+link: https://go.arthurdanjou.fr
+tags: [Software, OpenSource]
+icon: i-mdi-toolbox-outline
+---
diff --git a/src/content/projects/artdanj-website.md b/src/content/projects/artdanj-website.md
new file mode 100644
index 0000000..84617c1
--- /dev/null
+++ b/src/content/projects/artdanj-website.md
@@ -0,0 +1,7 @@
+---
+name: artdanj-website
+description: My personal website, my portfolio, and my blog.
+link: https://arthurdanjou.fr
+tags: [Web]
+icon: i-heroicons-globe-europe-africa-solid
+---
diff --git a/src/content/projects/erisium.md b/src/content/projects/erisium.md
new file mode 100644
index 0000000..5b48311
--- /dev/null
+++ b/src/content/projects/erisium.md
@@ -0,0 +1,7 @@
+---
+name: Erisium
+description: Junior Developer at Erisium, a French speaking minecraft server
+link: https://erisium.com
+tags: [MineCraft]
+icon: i-mdi-cube
+---
diff --git a/src/content/projects/make-my-server.md b/src/content/projects/make-my-server.md
new file mode 100644
index 0000000..93851c5
--- /dev/null
+++ b/src/content/projects/make-my-server.md
@@ -0,0 +1,7 @@
+---
+name: make-my-server
+description: Deploy many services present on my infrastructure from files for Kubernetes
+link: https://github.com/ArthurDanjou/make-my-server
+tags: [DevOps, Servers]
+icon: i-tabler-server-2
+---
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 63de9e8..a61b99c 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -9,51 +9,58 @@ const { data: experiences } = await useWorkExperiences()
 </script>
 
 <template>
-  <section>
-    <div class="w-container lg:my-32 mt-16">
-      <div class="max-w-2xl space-y-8 mb-16">
-        <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
-          I'm Arthur, I live and study in France where I learn new things.
-        </h1>
-        <p class="leading-relaxed text-subtitle">
-          As a software engineer with a passion for AI and the cloud, I have a deep understanding of emerging technologies that are transforming the way businesses and organizations operate. I am at the heart of an ever-changing and rapidly growing field. My background in mathematics also gives me an edge in understanding the mathematical concepts and theories behind these technologies as well as how to design them.
-        </p>
-        <p class="leading-relaxed text-subtitle">
-          I enjoy sharing my knowledge and learning new theorems and technologies. I am a curious person and eager to continue learning and growing throughout your life. My passion and commitment to these subjects are admirable qualities and will help me succeed in my career and education.
-        </p>
+  <section class="w-container lg:my-24 my-16">
+    <div class="max-w-2xl space-y-8 mb-16">
+      <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
+        I'm Arthur, I live and study in France where I learn new things.
+      </h1>
+      <p class="leading-relaxed text-subtitle">
+        As a software engineer with a passion for AI and the cloud, I have a deep understanding of emerging technologies that are transforming the way businesses and organizations operate. I am at the heart of an ever-changing and rapidly growing field. My background in mathematics also gives me an edge in understanding the mathematical concepts and theories behind these technologies as well as how to design them.
+      </p>
+      <p class="leading-relaxed text-subtitle">
+        I enjoy sharing my knowledge and learning new theorems and technologies. I am a curious person and eager to continue learning and growing throughout your life. My passion and commitment to these subjects are admirable qualities and will help me succeed in my career and education.
+      </p>
+    </div>
+    <GridSection title="Interests">
+      <GridSlot title="Development">
+        Development is the passion that appeared the earliest in my life. I started developing on Minecraft and then I migrated to the broad field of the web.
+      </GridSlot>
+      <GridSlot title="Mathematics">
+        During my studies, I loved mathematics very quickly. That's why today I continue my studies in this fabulous field.
+      </GridSlot>
+      <GridSlot title="Artificial Intelligence">
+        We hear more and more about artificial intelligence with the evolution of our society. So I quickly got interested by doing my own research and I quickly discovered that this field is closely related to mathematics, hence my interest.
+      </GridSlot>
+      <GridSlot title="Cloud and infrastructure">
+        When you're doing development and deploying projects online, you discover and are forced to touch the cloud, infrastructure, and network. It's a totally different field than the others but just as interesting.
+      </GridSlot>
+      <GridSlot title="Fitness">
+        In addition to my studies and programming, I go to the gym every day to relax and stay in shape. Sport allows me to recharge my batteries and move on to other things.
+      </GridSlot>
+    </GridSection>
+    <GridSection v-if="skills" title="Skills">
+      <div class="grid grid-cols-3 md:grid-cols-4 gap-2">
+        <Skill
+          v-for="skill in skills.body"
+          :key="skill.name"
+          :skill="skill"
+        />
       </div>
-      <GridSection title="Interests">
-        <GridSlot title="Development">
-          Development is the passion that appeared the earliest in my life. I started developing on Minecraft and then I migrated to the broad field of the web.
-        </GridSlot>
-        <GridSlot title="Mathematics">
-          During my studies, I loved mathematics very quickly. That's why today I continue my studies in this fabulous field.
-        </GridSlot>
-        <GridSlot title="Artificial Intelligence">
-          We hear more and more about artificial intelligence with the evolution of our society. So I quickly got interested by doing my own research and I quickly discovered that this field is closely related to mathematics, hence my interest.
-        </GridSlot>
-        <GridSlot title="Cloud and infrastructure">
-          When you're doing development and deploying projects online, you discover and are forced to touch the cloud, infrastructure, and network. It's a totally different field than the others but just as interesting.
-        </GridSlot>
-        <GridSlot title="Fitness">
-          In addition to my studies and programming, I go to the gym every day to relax and stay in shape. Sport allows me to recharge my batteries and move on to other things.
-        </GridSlot>
-      </GridSection>
-      <GridSection v-if="skills" title="Skills">
-        <div class="grid grid-cols-3 md:grid-cols-4 gap-2">
-          <Skill
-            v-for="skill in skills.body"
-            :key="skill.name"
-            :skill="skill"
-          />
-        </div>
-      </GridSection>
-      <GridSection v-if="experiences" title="Work Experiences">
-        <Experience v-for="experience in experiences" :key="experience.title" :experience="experience" />
-      </GridSection>
-      <GridSection v-if="educations" title="Educations">
-        <Education v-for="education in educations" :key="education.title" :education="education" />
-      </GridSection>
+    </GridSection>
+    <GridSection v-if="experiences" title="Work Experiences">
+      <Experience v-for="experience in experiences" :key="experience.title" :experience="experience" />
+    </GridSection>
+    <GridSection v-if="educations" title="Educations">
+      <Education v-for="education in educations" :key="education.title" :education="education" />
+    </GridSection>
+    <div class="flex justify-center">
+      <UButton
+        label="Download my CV"
+        icon="i-material-symbols-lab-profile-outline-rounded"
+        color="primary"
+        variant="outline"
+        size="xl"
+      />
     </div>
   </section>
 </template>
diff --git a/src/pages/talents.vue b/src/pages/talents.vue
new file mode 100644
index 0000000..0e8411b
--- /dev/null
+++ b/src/pages/talents.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { Talent } from '@prisma/client'
+
+useHead({
+  title: 'Discover new talents • Arthur Danjou',
+})
+
+const talents = ref<Talent[]>()
+
+const currentFavorite = ref<boolean>(false)
+const currentCategory = ref('all')
+const { getCategories, getTalents } = await useTalents()
+
+talents.value = await getTalents(currentCategory.value, currentFavorite.value)
+
+watch(currentFavorite, async () => {
+  talents.value = await getTalents(currentCategory.value, currentFavorite.value)
+})
+
+watch(currentCategory, async () => {
+  talents.value = await getTalents(currentCategory.value, currentFavorite.value)
+})
+
+const setCategory = (category: string) => currentCategory.value = category
+
+function isCategory(category: string) {
+  return currentCategory.value === category
+}
+
+const appConfig = useAppConfig()
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
+</script>
+
+<template>
+  <section class="w-container lg:my-24 my-16">
+    <div class="max-w-2xl space-y-8 mb-16">
+      <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
+        Showcasing here, I aim to share and introduce inspiring talents.
+      </h1>
+      <p class="leading-relaxed text-subtitle">
+        You will find a selection of some of the most inspiring web talents I have discovered through my research and work experience. These talents are creative designers, talented web developers, passionate open-source contributors, and much more.
+      </p>
+    </div>
+    <div class="my-12 flex flex-col rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
+      <div class="mb-6">
+        <div class="mb-2 flex items-center gap-2">
+          <UIcon name="i-ph-circle-wavy-question-bold" class="text-subtitle text-xl" />
+          <h1 class="text-lg font-bold">
+            Want to be here ?
+          </h1>
+        </div>
+        <p class="text-subtitle text-ellipsis">
+          Are you a web talent? Do you want to promote your project? Do you want to launch your career or gain visibility?
+        </p>
+      </div>
+      <NuxtLink href="mailto:arthurdanjou@outlook.fr?subject=Join your talents' list">
+        <UButton label="Join the talent's list" color="primary" />
+      </NuxtLink>
+    </div>
+    <div v-if="getCategories" class="flex gap-2 justify-between border-b border-zinc-100 dark:border-zinc-700/40 mb-4">
+      <div class="flex gap-4 overflow-x-scroll sm:overflow-x-hidden">
+        <div
+          class="category"
+          :class="{ 'current-category': isCategory('all') }"
+          @click.prevent="setCategory('all')"
+        >
+          All
+        </div>
+        <div
+          v-for="category in getCategories"
+          :key="category.slug"
+          class="category"
+          :class="{ 'current-category': isCategory(category.slug) }"
+          @click.prevent="setCategory(category.slug)"
+        >
+          <p class="w-full">
+            {{ category.name }}
+          </p>
+        </div>
+      </div>
+      <UPopover>
+        <UButton
+          :icon="currentFavorite ? 'i-mdi-filter-variant-remove' : 'i-mdi-filter-variant'"
+          color="primary"
+          variant="ghost"
+        />
+        <template #panel>
+          <div
+            class="flex p-2 gap-2 items-center cursor-pointer select-none text-subtitle"
+            @click.prevent="currentFavorite = !currentFavorite"
+          >
+            <UIcon v-if="currentFavorite" name="i-material-symbols-check-box-outline-rounded" />
+            <UIcon v-else name="i-material-symbols-check-box-outline-blank" />
+            <p>Show favorites only</p>
+          </div>
+        </template>
+      </UPopover>
+    </div>
+    <div class="mt-16 md:mt-20">
+      <div v-if="talents && getCategories" class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="talent in talents"
+          :key="talent.name.toLowerCase().trim()"
+          class="group relative flex flex-col justify-between"
+        >
+          <div class="flex gap-6 items-center">
+            <img :src="talent.logo" class="h-8 w-8 rounded-md">
+            <div>
+              <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
+                <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
+                <NuxtLink :to="talent.website" target="_blank">
+                  <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+                  <div class="flex gap-2 items-center">
+                    <h1 class="relative z-10">
+                      {{ talent.name }}
+                    </h1>
+                    <UTooltip v-if="talent.favorite" text="You can set the filter to only show favorites.">
+                      <UIcon name="i-ic-round-star" class="z-20 text-amber-500 text-xl font-bold" />
+                    </UTooltip>
+                  </div>
+                </NuxtLink>
+              </h2>
+              <p class="relative z-10 my-2 text-sm text-zinc-600 dark:text-zinc-400">
+                {{ talent.work }}
+              </p>
+            </div>
+          </div>
+          <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
+            <UIcon name="i-ph-link-bold" />
+            <span class="ml-2">{{ talent.website.replace('https://', '') }}</span>
+          </p>
+        </div>
+      </div>
+      <p v-else class="my-16 text-subtitle">
+        The talents are loading...
+      </p>
+    </div>
+  </section>
+</template>
+
+<style lang="scss">
+.category {
+  @apply min-w-fit cursor-pointer py-2 text-gray-500 dark:text-gray-400 duration-300 transition-colors hover:text-black dark:hover:text-white
+}
+.current-category {
+  @apply text-black dark:text-white border-b-2 border-black dark:border-white
+}
+</style>
diff --git a/src/pages/uses.vue b/src/pages/uses.vue
index 4c01671..4fbafc8 100644
--- a/src/pages/uses.vue
+++ b/src/pages/uses.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 useHead({
-  title: 'My Uses — Arthur Danjou',
+  title: 'My Uses • Arthur Danjou',
 })
 </script>
 
 <template>
-  <div class="w-container lg:my-24 my-16">
+  <section class="w-container lg:my-24 my-16">
     <div class="max-w-2xl space-y-8">
       <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
         Software I use, Hardware I own, and my favorite stack
@@ -23,5 +23,5 @@ useHead({
         </template>
       </ClientOnly>
     </div>
-  </div>
+  </section>
 </template>
diff --git a/src/pages/work.vue b/src/pages/work.vue
new file mode 100644
index 0000000..eee9d58
--- /dev/null
+++ b/src/pages/work.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+const appConfig = useAppConfig()
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
+
+useHead({
+  title: 'My work • Arthur Danjou',
+})
+
+const { data: projects } = await useProjects()
+</script>
+
+<template>
+  <section class="w-container lg:my-24 my-16">
+    <div class="max-w-3xl space-y-8">
+      <div>
+        <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
+          All my projects can be found on GitHub and by scrolling down.
+        </h1>
+        <p class="leading-relaxed text-subtitle">
+          I’ve worked on tons of little projects over the years but these are the ones that I’m most proud of. Many of them are open-source, so if you see something that piques your interest, check out the code and contribute if you have ideas for how it can be improved.
+        </p>
+      </div>
+    </div>
+    <div class="mt-16 md:mt-20">
+      <div class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="project in projects"
+          :key="project.name"
+          class="group relative flex flex-col justify-between"
+        >
+          <div class="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
+            <Icon :name="project.icon" size="24" />
+          </div>
+          <h2 class="mt-6 text-base font-semibold text-zinc-800 dark:text-zinc-100">
+            <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
+            <NuxtLink :to="project.link" target="_blank">
+              <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+              <span class="relative z-10">{{ project.title }}</span>
+            </NuxtLink>
+          </h2>
+          <p class="relative z-10 my-2 text-sm text-zinc-600 dark:text-zinc-400">
+            {{ project.description }}
+          </p>
+          <div class="flex gap-2 z-10">
+            <span
+              v-for="tag in project.tags"
+              :key="tag"
+              class="text-xs p-0.5 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
+            >{{ tag }}</span>
+          </div>
+          <p class="relative z-10 mt-6 flex text-sm font-medium items-center" :class="getColor()">
+            <UIcon name="i-ph-link-bold" />
+            <span class="ml-2">{{ project.link.replace('https://', '') }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/pages/writing/[slug].vue b/src/pages/writing/[slug].vue
index afc497e..5c88873 100644
--- a/src/pages/writing/[slug].vue
+++ b/src/pages/writing/[slug].vue
@@ -15,7 +15,7 @@ const { post, view, like, likes, views } = await usePost(route.params.slug.toStr
 view()
 
 useHead({
-  title: `${postContent.value?.title} — Arthur Danjou's shelf`,
+  title: `${postContent.value?.title} • Arthur Danjou's shelf`,
 })
 
 function top() {
@@ -46,111 +46,109 @@ async function handleLike() {
 </script>
 
 <template>
-  <section v-if="postContent && post">
-    <div class="w-container lg:mt-24 mt-16">
-      <div class="lg:relative">
-        <div class="max-w-3xl space-y-8 mx-auto">
-          <div class="mx-auto max-w-2xl">
-            <UButton
-              icon="i-ph-arrow-circle-left-bold"
-              variant="soft"
-              size="lg"
-              :ui="{ rounded: 'rounded-full' }"
-              class="lg:absolute left-0 mb-8"
-              @click.prevent="useRouter().back()"
-            />
-            <article>
-              <header class="flex flex-col space-y-6">
-                <time class="flex items-center text-base text-zinc-400 dark:text-zinc-500">
-                  <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
-                  <div class="ml-3 flex gap-3">
-                    <div>
-                      {{ postContent.publishedAt }}
-                    </div>
-                    <span>•</span>
-                    <div>{{ postContent.readingMins }} min</div>
-                    <span>•</span>
-                    <div>{{ views }} {{ views > 1 ? 'views' : 'view' }}</div>
+  <section v-if="postContent && post" class="w-container lg:mt-24 mt-16">
+    <div class="lg:relative">
+      <div class="max-w-3xl space-y-8 mx-auto">
+        <div class="mx-auto max-w-2xl">
+          <UButton
+            icon="i-ph-arrow-circle-left-bold"
+            variant="soft"
+            size="lg"
+            :ui="{ rounded: 'rounded-full' }"
+            class="lg:absolute left-0 mb-8"
+            @click.prevent="useRouter().back()"
+          />
+          <article>
+            <header class="flex flex-col space-y-6">
+              <time class="flex items-center text-base text-zinc-400 dark:text-zinc-500">
+                <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+                <div class="ml-3 flex gap-3">
+                  <div>
+                    {{ postContent.publishedAt }}
                   </div>
-                </time>
-                <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
-                  {{ postContent.title }}
-                </h1>
-                <p class="text-subtitle">
-                  {{ postContent.description }}
-                </p>
-              </header>
-              <div class="w-full rounded-md my-8">
-                {{ postContent.cover }}
-              </div>
-              <ClientOnly>
-                <ContentRenderer
-                  class="mt-12 prose leading-6 prose-table:w-full md:prose-table:w-3/4 lg:prose-table:w-2/5 max-w-none
-                 dark:prose dark:prose-invert dark:leading-6 dark:max-w-none dark:prose-table:w-full dark:md:prose-table:w-3/4 dark:lg:prose-table:w-2/5"
-                  :value="postContent"
-                />
-                <template #fallback>
-                  <p class="my-16 text-subtitle">
-                    The content of the page is loading...
-                  </p>
-                </template>
-              </ClientOnly>
-              <footer class="my-8 space-y-8">
-                <p class="text-subtitle">
-                  Thanks for reading this post! If you liked it, please consider sharing it with your friends. <strong>Don't forget to leave a like!</strong>
-                </p>
-                {{ likeCookie }}
-                <div class="flex gap-4 flex-wrap">
-                  <UButton
-                    v-if="isLiked"
-                    :label="`${likes} ${likes > 1 ? 'likes' : 'like'}`"
-                    icon="i-ph-heart-bold"
-                    size="lg"
-                    variant="solid"
-                  />
-                  <UButton
-                    v-else
-                    :label="`${likes} ${likes > 1 ? 'likes' : 'like'}`"
-                    icon="i-ph-heart-bold"
-                    size="lg"
-                    variant="soft"
-                    @click.prevent="handleLike()"
-                  />
-                  <UButton
-                    label="Go to top"
-                    icon="i-ph-arrow-up-bold"
-                    size="lg"
-                    variant="soft"
-                    @click.prevent="top()"
-                  />
-                  <UButton
-                    label="Share on Twitter"
-                    icon="i-ph-twitter-logo-bold"
-                    size="lg"
-                    variant="soft"
-                    @click.prevent="copy()"
-                  />
-                  <UButton
-                    v-if="copied"
-                    label="Link copied"
-                    icon="i-lucide-clipboard-check"
-                    color="green"
-                    size="lg"
-                    variant="soft"
-                    @click.prevent="copy()"
-                  />
-                  <UButton
-                    v-else
-                    label="Copy link"
-                    icon="i-lucide-clipboard"
-                    size="lg"
-                    variant="soft"
-                    @click.prevent="copy()"
-                  />
+                  <span>•</span>
+                  <div>{{ postContent.readingMins }} min</div>
+                  <span>•</span>
+                  <div>{{ views }} {{ views > 1 ? 'views' : 'view' }}</div>
                 </div>
-              </footer>
-            </article>
-          </div>
+              </time>
+              <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+                {{ postContent.title }}
+              </h1>
+              <p class="text-subtitle">
+                {{ postContent.description }}
+              </p>
+            </header>
+            <div class="w-full rounded-md my-8">
+              {{ postContent.cover }}
+            </div>
+            <ClientOnly>
+              <ContentRenderer
+                class="mt-12 prose leading-6 prose-table:w-full md:prose-table:w-3/4 lg:prose-table:w-2/5 max-w-none
+                 dark:prose dark:prose-invert dark:leading-6 dark:max-w-none dark:prose-table:w-full dark:md:prose-table:w-3/4 dark:lg:prose-table:w-2/5"
+                :value="postContent"
+              />
+              <template #fallback>
+                <p class="my-16 text-subtitle">
+                  The content of the page is loading...
+                </p>
+              </template>
+            </ClientOnly>
+            <footer class="my-8 space-y-8">
+              <p class="text-subtitle">
+                Thanks for reading this post! If you liked it, please consider sharing it with your friends. <strong>Don't forget to leave a like!</strong>
+              </p>
+              {{ likeCookie }}
+              <div class="flex gap-4 flex-wrap">
+                <UButton
+                  v-if="isLiked"
+                  :label="`${likes} ${likes > 1 ? 'likes' : 'like'}`"
+                  icon="i-ph-heart-bold"
+                  size="lg"
+                  variant="solid"
+                />
+                <UButton
+                  v-else
+                  :label="`${likes} ${likes > 1 ? 'likes' : 'like'}`"
+                  icon="i-ph-heart-bold"
+                  size="lg"
+                  variant="soft"
+                  @click.prevent="handleLike()"
+                />
+                <UButton
+                  label="Go to top"
+                  icon="i-ph-arrow-up-bold"
+                  size="lg"
+                  variant="soft"
+                  @click.prevent="top()"
+                />
+                <UButton
+                  label="Share on Twitter"
+                  icon="i-ph-twitter-logo-bold"
+                  size="lg"
+                  variant="soft"
+                  @click.prevent="copy()"
+                />
+                <UButton
+                  v-if="copied"
+                  label="Link copied"
+                  icon="i-lucide-clipboard-check"
+                  color="green"
+                  size="lg"
+                  variant="soft"
+                  @click.prevent="copy()"
+                />
+                <UButton
+                  v-else
+                  label="Copy link"
+                  icon="i-lucide-clipboard"
+                  size="lg"
+                  variant="soft"
+                  @click.prevent="copy()"
+                />
+              </div>
+            </footer>
+          </article>
         </div>
       </div>
     </div>
diff --git a/src/pages/writing/index.vue b/src/pages/writing/index.vue
index 61988d2..c7b98a2 100644
--- a/src/pages/writing/index.vue
+++ b/src/pages/writing/index.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
-
 function getColor() {
   return `text-${appConfig.ui.primary}-500`
 }
 
 useHead({
-  title: 'My Shelf — Arthur Danjou',
+  title: 'My Shelf • Arthur Danjou',
 })
 
 const { data: posts } = await usePosts()
 </script>
 
 <template>
-  <div class="w-container lg:my-24 my-16">
+  <section class="w-container lg:my-24 my-16">
     <div class="max-w-3xl space-y-8">
       <div>
         <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
@@ -60,5 +59,5 @@ const { data: posts } = await usePosts()
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>