diff --git a/app/components/ImageCard.vue b/app/components/ImageCard.vue
new file mode 100644
index 0000000..0fd2f5a
--- /dev/null
+++ b/app/components/ImageCard.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+  img: string;
+  date?: string;
+}>()
+
+const dateStamp = computed(() => {
+  return props.date ? props.date : "Date not found"
+})
+
+</script>
+
+<template>
+  <div
+    class="flex flex-col bg-white relative w-[280px] px-2 pt-2 pb-10 items-center justify-center -rotate-z-12 gap-10 z-50 right-32">
+    <img :src="props.img" class="size-[280px]">
+    <p>{{ dateStamp }}</p>
+  </div>
+</template>
+
+<style scoped>
+p {
+  color: black
+}
+</style>
diff --git a/app/components/index/Roadmap/RoadmapStack.vue b/app/components/index/Roadmap/RoadmapStack.vue
index 2dd59eb..b6d2ebf 100644
--- a/app/components/index/Roadmap/RoadmapStack.vue
+++ b/app/components/index/Roadmap/RoadmapStack.vue
@@ -2,8 +2,8 @@
 const props = defineProps<{
   isReversed: boolean;
   imgSource: string;
-  header: string;
-  body: string;
+  title: string;
+  description: string;
 }>();
 
 const flexDir = ref(props.isReversed ? "row-reverse" : "row");
@@ -16,8 +16,8 @@ const flexDir = ref(props.isReversed ? "row-reverse" : "row");
   >
     <img :src="props.imgSource" class="flex flex-1 max-w-screen h-[320px] lg:size-[360px] rounded-lg" >
     <div class="flex flex-col justify-center flex-1 lg:w-[360px]">
-      <HeadingGlow :level="3" :text="props.header" class="text-2xl lg:text-4xl text-start" />
-      <p class="text-start">{{ props.body }}</p>
+      <HeadingGlow :level="3" :text="props.title" class="text-2xl lg:text-4xl text-start" />
+      <p class="text-start">{{ props.description }}</p>
     </div>
   </div>
 </template>
diff --git a/app/components/index/RoadmapSection.vue b/app/components/index/RoadmapSection.vue
index e32c8d1..dbd374c 100644
--- a/app/components/index/RoadmapSection.vue
+++ b/app/components/index/RoadmapSection.vue
@@ -1,10 +1,11 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
+import type { MockRoadmap } from "#imports"
 const { userAuth } = useAuthState();
 
-const items = ref([]);
+const items = ref<MockRoadmap | T>([]);
 
 onMounted(async () => {
-  const results = await useFetchRoadmap();
+  const results = await useFetchRoadmapRange("3");
 
   if (!userAuth.value) {
     items.value = getMockRoadmap();
@@ -19,28 +20,28 @@ onMounted(async () => {
     <HeadingGlow :level="2" text="Roadmap" class="text-4xl lg:text-7xl" />
     <p class="text-sm lg:text-lg">Lists of accomplished goals</p>
     <section 
-      v-for="(item, index) in items" 
+      v-for="(item, index) in items"
       :key="index"
       class="px-6 pt-10 lg:px-20 lg:pt-20 mb-10 w-full max-w-screen flex flex-col"
     >
-      <RoadmapStack 
-        v-if="!userAuth" 
-        :is-reversed="evenOrOdd(index)" 
-        :img-source="item.img" 
-        :header="item.header"
-        :body="item.body"
+      <RoadmapStack
+        v-if="!userAuth"
+        :is-reversed="evenOrOdd(index)"
+        :img-source="item.img"
+        :title="item.title"
+        :description="item.description"
       />
       <RoadmapStack
         v-if="userAuth"
-        :is-reversed="evenOrOdd(index)"
+        :is-reversed="evenOrOdd(index)" 
         :img-source="item.images.image_url"
-        :header="item.header" 
-        :body="item.body"
+        :title="item.title"
+        :description="item.description"
       />
     </section>
-    <UButton
+    <UButton 
       label="See More..."
-      trailing-icon="i-lucide-arrow-right" 
+      trailing-icon="i-lucide-arrow-right"
       variant="subtle"
       :block="false"
       @click="navigateTo('/roadmap')"
diff --git a/app/components/roadmap/RoadmapCard.vue b/app/components/roadmap/RoadmapCard.vue
index dd23410..86f08cc 100644
--- a/app/components/roadmap/RoadmapCard.vue
+++ b/app/components/roadmap/RoadmapCard.vue
@@ -1,30 +1,19 @@
-<script setup lang="ts">
-const props = defineProps<{
-  headings: string;
-  description: string;
-  imgUrl?: string;
-}>();
+<script setup lang="ts" generic="T">
+import type { MockRoadmap } from '#imports';
+
+const props = defineProps<MockRoadmap>();
 </script>
 
 <template>
-  <UCard
-    variant="solid"
-    class="max-w-screen w-full lg:w-[1000px] bg-mocha-base flex flex-col items-center text-center"
-  >
-    <NuxtImg
-      v-if="props.imgUrl"
-      v-slot="{ src, isLoaded, imgAttrs }"
-      alt="image"
-      :src="imgUrl"
-      width="400"
-      height="400"
-      :custom="true"
-    >
-      <img v-if="isLoaded" v-bind="imgAttrs" :src="src" >
-
-      <USkeleton v-else class="w-[400px] h-[400px]" alt="skeleton loader"/>
-    </NuxtImg>
-    <h2 class="text-3xl font-bold">{{ props.headings }}</h2>
-    <p class="text-sm lg:text-lg">{{ props.description }}</p>
-  </UCard>
+  <div class="flex flex-row justify-between">
+    <ImageCard :img="props.img" :date="props.date" />
+    <UIcon v-if="props.done" name="i-lucide-paw-print" class="size-[150px] z-10 text-latte-peach left-10 top-24 relative -rotate-z-12"/>
+  </div>
+  <div
+    class="relative max-w-screen w-full lg:w-[1000px] bg-mocha-base flex flex-col items-center text-center p-20 bottom-56">
+    <div class="flex flex-col gap-5 px-32">
+      <h2 class="text-3xl font-bold">{{ props.title }}</h2>
+      <p class="text-sm lg:text-lg">{{ props.description }}</p>
+    </div>
+  </div>
 </template>
diff --git a/app/components/visuals/GeneratedStars.vue b/app/components/visuals/GeneratedStars.vue
index 1571c62..c80961d 100644
--- a/app/components/visuals/GeneratedStars.vue
+++ b/app/components/visuals/GeneratedStars.vue
@@ -1,24 +1,53 @@
-<script setup lang="ts">
+<script setup>
 import * as THREE from "three";
 
-const stars: THREE.Mesh[] = [];
+let scene, camera, light, renderer
 
-const geometry = new THREE.SphereGeometry(0.1, 32, 16);
-const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+onMounted(async () => {
+  init()
+  animate()
+  document.body.onScroll = moveCamera;
+});
 
-for (let i = 0; i < 200; i++) {
-  const star = new THREE.Mesh(geometry, material);
-  const [x, y, z] = Array(3)
-    .fill(0)
-    .map(() => THREE.MathUtils.randFloatSpread(200));
-  star.position.set(x, y, z);
+function init() {
+  scene = new THREE.Scene()
+  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
+  camera.position.set(0, 0, 12)
 
-  stars.push(star);
+  light = new THREE.AmbientLight(0xffffff, 1)
+
+  scene.add(camera, light)
+
+  const canvas = document.querySelector("#bg")
+  renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true })
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(window.innerWidth, window.innerHeight)
+
+  generateStars(scene)
+}
+
+function animate() {
+  requestAnimationFrame(animate)
+
+  renderer.render(scene, camera)
+}
+
+function moveCamera() {
+  const t = document.getBoundingClientRect().top
+
+  camera.position.y = t * 0.017
 }
 </script>
 
 <template>
-  <template v-for="s in stars">
-    <primitive :object="s" />
-  </template>
+  <canvas id="bg" />
 </template>
+
+<style scoped>
+canvas {
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: -9999;
+}
+</style>
diff --git a/app/composables/fetch/useFetchRoadmap.ts b/app/composables/fetch/useFetchRoadmap.ts
index 9f87dbb..ac13e7a 100644
--- a/app/composables/fetch/useFetchRoadmap.ts
+++ b/app/composables/fetch/useFetchRoadmap.ts
@@ -1,10 +1,15 @@
 import type { Database } from "~/types/database.types";
 
+/** 
+ * Use to fetch data via ascending order at roadmap page.
+ *
+ * @returns {any[]} data - Data from the table based on the schema.
+ */
 export async function useFetchRoadmap() {
   const client = useSupabaseClient<Database>();
 
   const { data, error } = await client
-    .from("index_roadmap")
+    .from("roadmap")
     .select(`*, images (id, image_url, unique_id)`)
     .order("index", { ascending: true });
 
@@ -12,3 +17,28 @@ export async function useFetchRoadmap() {
 
   return data;
 }
+
+
+/** 
+ * Use to fetch data in the home page.
+ *  
+ * @param {string} range - Range of items that can be fetched
+ *
+ * @returns {any[]} data - Data from the table based on the schema.
+ *
+ * @example
+ * const foo = useFetchRoadmapRange("4")
+ */
+export async function useFetchRoadmapRange(range: string) {
+  const client = useSupabaseClient<Database>();
+
+  const { data, error } = await client
+    .from("roadmap")
+    .select(`*, images (id, image_url, unique_id)`)
+    .lte("index", range)
+    .order("index", { ascending: true });
+
+  if (error) throw error;
+
+  return data;
+}
diff --git a/app/composables/index.ts b/app/composables/index.ts
index fae8fec..9a63c75 100644
--- a/app/composables/index.ts
+++ b/app/composables/index.ts
@@ -1,6 +1,6 @@
 export { useFetchImage, useFetchImageWithDate } from "./fetch/useFetchImage";
 export { useFetchDimDate } from "./fetch/useFetchDimDate";
-export { useFetchRoadmap } from "./fetch/useFetchRoadmap";
+export { useFetchRoadmap, useFetchRoadmapRange } from "./fetch/useFetchRoadmap";
 export { useFetchMemories } from "./fetch/useFetchMemories";
 
 export { useInsertDatePlan } from "./insert/useInsertDatePlan";
diff --git a/app/layouts/login.vue b/app/layouts/login.vue
index efbf8ff..9566162 100644
--- a/app/layouts/login.vue
+++ b/app/layouts/login.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="w-full bg-mocha-crust pointer-none">
+  <main class="w-full flex items-center justify-center bg-mocha-crust pointer-none h-screen">
     <slot />
   </main>
 </template>
diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index 834c1bd..ff1e905 100644
--- a/app/pages/gallery.vue
+++ b/app/pages/gallery.vue
@@ -6,6 +6,7 @@ definePageMeta({
 
 <template>
   <main class="flex flex-col gap-64">
+    <GeneratedStars/>
     <GalleryHero class="z-10" />
     <section class="flex flex-col gap-2 z-20 pb-24">
       <GalleryImages />
diff --git a/app/pages/roadmap.vue b/app/pages/roadmap.vue
index a7bd7b7..95b259e 100644
--- a/app/pages/roadmap.vue
+++ b/app/pages/roadmap.vue
@@ -1,77 +1,54 @@
-<script setup>
-import * as THREE from "three"
+<script setup lang="ts" generic="T">
+import type { MockRoadmap } from "#imports"
 
 definePageMeta({
   colorMode: "dark"
 })
 
-const items = ref([]);
+const { userAuth } = useAuthState();
 
-let scene, camera, light,  renderer
+const items = ref<MockRoadmap | T>([]);
 
 onMounted(async () => {
-  items.value = getMockRoadmap();
+  const results = await useFetchRoadmap();
 
-  init()
-  animate()
-  document.body.onScroll = moveCamera;
-});
-
-function init() {
-  scene = new THREE.Scene()
-  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
-  camera.position.set(0, 0, 12)
-
-  light = new THREE.AmbientLight(0xffffff, 1)
-
-  scene.add(camera, light)
-
-  const canvas = document.querySelector("#bg")
-  renderer = new THREE.WebGLRenderer({canvas: canvas, alpha: true})
-  renderer.setPixelRatio(window.devicePixelRatio)
-  renderer.setSize(window.innerWidth, window.innerHeight)
-
-  generateStars(scene)
-}
-
-function animate() {
-  requestAnimationFrame(animate)
-
-  renderer.render(scene, camera)
-}
-
-function moveCamera() {
-  const t = document.getBoundingClientRect().top
-
-  camera.position.y = t * 0.017
-}
+  if (!userAuth.value) {
+    items.value = getMockRoadmap();
+  } else {
+    items.value = results
+  }
+})
 </script>
 
 <template>
   <main class="flex flex-col items-center justify-center mt-32 pb-32">
-    <canvas id="bg"/>
-    <section class="text-center mb-10">
+    <GeneratedStars />
+    <section class="text-center gap-5 flex flex-col mb-5">
       <h1 class="text-5xl lg:text-6xl text-latte-primary font-bold">Roadmap</h1>
       <p class="text-sm lg:text-lg">
         A roadmap of our milestones and accomplishments as partner
       </p>
     </section>
-    <section class="px-4">
+    <div v-if="!userAuth">
       <RoadmapCard
         v-for="(item, index) in items"
         :key="index"
-        :headings="item.header"
-        :description="item.body"
-        class="mt-5 lg:mt-10"
+        :img="item.img"
+        :title="item.title"
+        :description="item.description"
+        :done="item.done"
       />
-    </section>
+    </div>
+    <div v-else>
+      <RoadmapCard
+        v-for="(item, index) in items"
+        :key="index"
+        :img="item.images.image_url"
+        :title="item.title"
+        :description="item.description"
+        :done="item.done"
+        :date="item.date"
+      />
+    </div>
   </main>
 </template>
-
-<style scoped>
-canvas {
-  top: 0;
-  left: 0;
-  position: fixed;
-}
-</style>
diff --git a/app/utils/mock/roadmap.ts b/app/utils/mock/roadmap.ts
index 79dad95..94f9cb3 100644
--- a/app/utils/mock/roadmap.ts
+++ b/app/utils/mock/roadmap.ts
@@ -1,40 +1,46 @@
-type MockData = {
-  img: string;
-  header: string;
-  body: string;
-};
-
 export function getMockRoadmap() {
-  const data: MockData[] = [
+  const data: MockRoadmap[] = [
     {
       img: "/images/cat-orange.png",
-      header: "When We First Met",
-      body: "A random introduction at a mutual friend’s BBQ. Just a quick hello—but something lingered in the air.",
+      title: "When We First Met",
+      description: "A random introduction at a mutual friend’s BBQ. Just a quick hello—but something lingered in the air.",
+      date: "05/11/2020",
+      done: true,
     },
     {
       img: "/images/cat-orange.png",
-      header: "First Real Hangout",
-      body: "Grabbed pizza after a long walk in the city. No fancy plans—just conversation, comfort, and a hint of something more.",
+      title: "First Real Hangout",
+      description: "Grabbed pizza after a long walk in the city. No fancy plans—just conversation, comfort, and a hint of something more.",
+      date: "06/19/2020",
+      done: true,
     },
     {
       img: "/images/cat-orange.png",
-      header: "The Night We Talked for Hours",
-      body: "What started as a quick chat turned into a 6-hour call. Everything just flowed—like we’d known each other forever.",
+      title: "The Night We Talked for Hours",
+      description: "What started as a quick chat turned into a 6-hour call. Everything just flowed—like we’d known each other forever.",
+      date: "09/18/2020",
+      done: true,
     },
     {
       img: "/images/cat-orange.png",
-      header: "Our First Adventure",
-      body: "Tried an amusement park together—screams on the roller coaster, laughter in the rain, and matching souvenir shirts.",
+      title: "Our First Adventure",
+      description: "Tried an amusement park together—screams on the roller coaster, laughter in the rain, and matching souvenir shirts.",
+      date: "10/27/2020",
+      done: true,
     },
     {
       img: "/images/cat-orange.png",
-      header: "The Move-In Moonlight",
-      body: "Moved in with just a mattress and a coffee machine. Late-night decorating, pizza on the floor, and endless smiles.",
+      title: "The Move-In Moonlight",
+      description: "Moved in with just a mattress and a coffee machine. Late-night decorating, pizza on the floor, and endless smiles.",
+      date: "12/30/2020",
+      done: true,
     },
     {
       img: "/images/cat-orange.png",
-      header: "When We Wrote Our Vows",
-      body: "Sitting side by side, writing down promises that came from the heart. Every word was a memory in the making.",
+      title: "When We Wrote Our Vows",
+      description: "Sitting side by side, writing down promises that came from the heart. Every word was a memory in the making.",
+      date: "01/01/2021",
+      done: true,
     },
   ];
   return data;
diff --git a/app/utils/types.ts b/app/utils/types.ts
new file mode 100644
index 0000000..a2c42f3
--- /dev/null
+++ b/app/utils/types.ts
@@ -0,0 +1,8 @@
+export type MockRoadmap = {
+  img: string;
+  title: string;
+  description: string;
+  date?: string;
+  done?: boolean;
+};
+
diff --git a/package.json b/package.json
index 9463d15..6b4cdd8 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "@supabase/supabase-js": "^2.54.0",
     "@tailwindcss/vite": "^4.1.11",
     "@tresjs/cientos": "^4.3.1",
-    "@tresjs/core": "^4.3.6",
     "@tresjs/nuxt": "^3.0.8",
     "@tresjs/post-processing": "^2.4.0",
     "@types/three": "^0.175.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f114cd..d075bd1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,9 +44,6 @@ importers:
       '@tresjs/cientos':
         specifier: ^4.3.1
         version: 4.3.1(@tresjs/core@4.3.6(three@0.175.0)(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2)))(@types/three@0.175.0)(three@0.175.0)(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))
-      '@tresjs/core':
-        specifier: ^4.3.6
-        version: 4.3.6(three@0.175.0)(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))
       '@tresjs/nuxt':
         specifier: ^3.0.8
         version: 3.0.8(change-case@5.4.4)(jwt-decode@4.0.0)(magicast@0.3.5)(postcss@8.5.6)(rollup@4.46.2)(three@0.175.0)(valibot@1.1.0(typescript@5.9.2))(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))(webpack@5.98.0(esbuild@0.25.8))(zod@3.25.76)
diff --git a/public/images/paw-stamp.svg b/public/images/paw-stamp.svg
new file mode 100644
index 0000000..4b90054
--- /dev/null
+++ b/public/images/paw-stamp.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="720" height="720">
+<path d="M0 0 C51.81 0 103.62 0 157 0 C157 7.26 157 14.52 157 22 C179.44 22 201.88 22 225 22 C225 29.59 225 37.18 225 45 C232.26 45 239.52 45 247 45 C247 52.26 247 59.52 247 67 C254.59 67 262.18 67 270 67 C270 74.59 270 82.18 270 90 C277.26 90 284.52 90 292 90 C292 97.26 292 104.52 292 112 C299.59 112 307.18 112 315 112 C315 126.85 315 141.7 315 157 C322.26 157 329.52 157 337 157 C337 194.29 337 231.58 337 270 C329.74 270 322.48 270 315 270 C315 284.85 315 299.7 315 315 C307.41 315 299.82 315 292 315 C292 322.26 292 329.52 292 337 C284.74 337 277.48 337 270 337 C270 344.59 270 352.18 270 360 C262.41 360 254.82 360 247 360 C247 367.26 247 374.52 247 382 C239.74 382 232.48 382 225 382 C225 389.59 225 397.18 225 405 C202.56 405 180.12 405 157 405 C157 412.26 157 419.52 157 427 C105.19 427 53.38 427 0 427 C0 419.74 0 412.48 0 405 C-22.44 405 -44.88 405 -68 405 C-68 397.41 -68 389.82 -68 382 C-75.26 382 -82.52 382 -90 382 C-90 374.74 -90 367.48 -90 360 C-97.59 360 -105.18 360 -113 360 C-113 352.41 -113 344.82 -113 337 C-120.26 337 -127.52 337 -135 337 C-135 329.74 -135 322.48 -135 315 C-142.59 315 -150.18 315 -158 315 C-158 300.15 -158 285.3 -158 270 C-165.26 270 -172.52 270 -180 270 C-180 232.71 -180 195.42 -180 157 C-172.74 157 -165.48 157 -158 157 C-158 142.15 -158 127.3 -158 112 C-150.41 112 -142.82 112 -135 112 C-135 104.74 -135 97.48 -135 90 C-127.74 90 -120.48 90 -113 90 C-113 82.41 -113 74.82 -113 67 C-105.41 67 -97.82 67 -90 67 C-90 59.74 -90 52.48 -90 45 C-82.74 45 -75.48 45 -68 45 C-68 37.41 -68 29.82 -68 22 C-45.56 22 -23.12 22 0 22 C0 14.74 0 7.48 0 0 Z " fill="#EA76CB" transform="translate(270,270)"/>
+<path d="M0 0 C29.7 0 59.4 0 90 0 C90 7.26 90 14.52 90 22 C97.59 22 105.18 22 113 22 C113 29.59 113 37.18 113 45 C120.26 45 127.52 45 135 45 C135 74.7 135 104.4 135 135 C127.74 135 120.48 135 113 135 C113 142.26 113 149.52 113 157 C105.41 157 97.82 157 90 157 C90 164.59 90 172.18 90 180 C60.3 180 30.6 180 0 180 C0 172.41 0 164.82 0 157 C-7.26 157 -14.52 157 -22 157 C-22 149.74 -22 142.48 -22 135 C-29.59 135 -37.18 135 -45 135 C-45 105.3 -45 75.6 -45 45 C-37.41 45 -29.82 45 -22 45 C-22 37.41 -22 29.82 -22 22 C-14.74 22 -7.48 22 0 22 C0 14.74 0 7.48 0 0 Z " fill="#EA76CB" transform="translate(562,90)"/>
+<path d="M0 0 C29.7 0 59.4 0 90 0 C90 7.26 90 14.52 90 22 C97.59 22 105.18 22 113 22 C113 29.59 113 37.18 113 45 C120.26 45 127.52 45 135 45 C135 74.7 135 104.4 135 135 C127.74 135 120.48 135 113 135 C113 142.26 113 149.52 113 157 C105.41 157 97.82 157 90 157 C90 164.59 90 172.18 90 180 C60.3 180 30.6 180 0 180 C0 172.41 0 164.82 0 157 C-7.26 157 -14.52 157 -22 157 C-22 149.74 -22 142.48 -22 135 C-29.59 135 -37.18 135 -45 135 C-45 105.3 -45 75.6 -45 45 C-37.41 45 -29.82 45 -22 45 C-22 37.41 -22 29.82 -22 22 C-14.74 22 -7.48 22 0 22 C0 14.74 0 7.48 0 0 Z " fill="#EA76CB" transform="translate(67,90)"/>
+<path d="M0 0 C29.7 0 59.4 0 90 0 C90 7.59 90 15.18 90 23 C97.26 23 104.52 23 112 23 C112 30.26 112 37.52 112 45 C119.59 45 127.18 45 135 45 C135 74.7 135 104.4 135 135 C127.41 135 119.82 135 112 135 C112 142.59 112 150.18 112 158 C104.74 158 97.48 158 90 158 C90 165.26 90 172.52 90 180 C60.3 180 30.6 180 0 180 C0 172.74 0 165.48 0 158 C-7.59 158 -15.18 158 -23 158 C-23 150.41 -23 142.82 -23 135 C-30.26 135 -37.52 135 -45 135 C-45 105.3 -45 75.6 -45 45 C-37.74 45 -30.48 45 -23 45 C-23 37.74 -23 30.48 -23 23 C-15.41 23 -7.82 23 0 23 C0 15.41 0 7.82 0 0 Z " fill="#EA76CB" transform="translate(315,22)"/>
+</svg>
diff --git a/supabase/config.toml b/supabase/config.toml
index 4d24a0e..72ea8ce 100644
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -119,7 +119,7 @@ enabled = true
 # in emails.
 site_url = "http://localhost:3000"
 # A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
-additional_redirect_urls = ["http://localhost:3000/confirm"]
+additional_redirect_urls = ["https://monthsary-website.nuxt.dev/confirm", "http://localhost:3000/confirm"]
 # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
 jwt_expiry = 3600
 # Path to JWT signing key. DO NOT commit your signing keys file to git.
diff --git a/types/database.types.ts b/types/database.types.ts
index acd9dca..ad3f401 100644
--- a/types/database.types.ts
+++ b/types/database.types.ts
@@ -7,7 +7,7 @@ export type Json =
   | Json[]
 
 export type Database = {
-  // Allows to automatically instanciate createClient with right options
+  // Allows to automatically instantiate createClient with right options
   // instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
   __InternalSupabase: {
     PostgrestVersion: "12.2.3 (519615d)"
@@ -126,30 +126,36 @@ export type Database = {
           },
         ]
       }
-      index_roadmap: {
+      roadmap: {
         Row: {
-          body: string | null
           created_at: string
-          header: string | null
+          date: string | null
+          description: string | null
+          done: boolean | null
           id: string
           image_id: string | null
           index: number | null
+          title: string | null
         }
         Insert: {
-          body?: string | null
           created_at?: string
-          header?: string | null
+          date?: string | null
+          description?: string | null
+          done?: boolean | null
           id?: string
           image_id?: string | null
           index?: number | null
+          title?: string | null
         }
         Update: {
-          body?: string | null
           created_at?: string
-          header?: string | null
+          date?: string | null
+          description?: string | null
+          done?: boolean | null
           id?: string
           image_id?: string | null
           index?: number | null
+          title?: string | null
         }
         Relationships: [
           {