diff --git a/.env.development b/.env.development
index 499dd49..4c7cae9 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,7 @@
 NUXT_PUBLIC_APP_URL=http://localhost:3001/
 NUXT_PUBLIC_SITE_URL=https://menthor.io/
-NUXT_PUBLIC_API_URL=http://localhost:3000/dev
+#NUXT_PUBLIC_API_URL=http://localhost:3000/dev
+NUXT_PUBLIC_API_URL=https://2vzfiy8py1.execute-api.sa-east-1.amazonaws.com/dev
 NUXT_PUBLIC_UMAMI_HOST="https://analytics.umami.is/script.js"
 NUXT_PUBLIC_UMAMI_ID="3ff16063-e916-4083-ad5e-66dcec525c16"
 NUXT_PUBLIC_APP_UMAMI_ID="8746ccb0-1a39-489a-8c8f-a394e4e2ee3b"
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..d72dbdb
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: [menthorlabs]
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3b16f7a..bb27f02 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,5 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.language": "en,pt,pt-BR",
   "cSpell.enabledLanguageIds": ["javascript", "typescript"],
-  "cSpell.words": ["nuxt", "menthor", "ofetch", "menthorlabs", "sakura", "pinia"],
+  "cSpell.words": ["nuxt", "menthor", "ofetch", "menthorlabs", "sakura", "pinia", "colorthief"],
 }
diff --git a/apps/app/components/atoms/CreatorsImageCard.vue b/apps/app/components/atoms/CreatorsImageCard.vue
new file mode 100644
index 0000000..f70bfef
--- /dev/null
+++ b/apps/app/components/atoms/CreatorsImageCard.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useClipboard } from "@vueuse/core";
+const { fileUrl = "" } = defineProps<{
+  fileUrl: string;
+}>();
+
+const source = ref(fileUrl);
+const { copy, copied } = useClipboard({ source });
+</script>
+
+<template>
+  <div
+    v-if="fileUrl === 'loading'"
+    class="flex items-center justify-center w-full aspect-video bg-zinc-100 animate-pulse"
+  >
+    <svg
+      class="w-10 h-10 text-zinc-200"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+    >
+      <path
+        d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"
+      />
+    </svg>
+  </div>
+  <div v-else class="relative group">
+    <div
+      class="absolute top-2 right-2 z-20 hidden group-hover:flex items-center gap-1"
+    >
+      <nuxt-link external target="_blank" :to="fileUrl">
+        <MIconButton icon="external-link-alt" class="!text-white" />
+      </nuxt-link>
+      <MIconButton icon="times" class="!text-white" />
+    </div>
+
+    <div
+      class="absolute z-10 top-0 left-0 w-full h-full items-center justify-center bg-black/50 cursor-pointer hidden group-hover:flex"
+      @click="copy()"
+    >
+      <span class="font-semibold text-sm text-white">
+        {{ copied ? "Copiado!" : "Copiar url" }}
+      </span>
+    </div>
+    <div class="aspect-video w-full overflow-hidden bg-zinc-100">
+      <nuxt-img
+        :src="fileUrl"
+        :quality="85"
+        format="webp"
+        width="250"
+        height="140"
+        alt="Roadmap"
+        class="h-full w-full object-cover object-center transition-all group-hover:scale-110"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/app/components/molecules/LeftMenuCreators.vue b/apps/app/components/molecules/LeftMenuCreators.vue
new file mode 100644
index 0000000..4637cc2
--- /dev/null
+++ b/apps/app/components/molecules/LeftMenuCreators.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="w-full flex-1 p-3">
+    <div class="text-zinc-700 font-medium pl-4 py-[10px] text-sm">
+      Criação de conteúdo
+    </div>
+    <nuxt-link
+      to="/creators/images"
+      class="group"
+      exact-active-class="is-active"
+    >
+      <LeftMenuItem
+        icon="image"
+        text="Imagens"
+        class="group-[.is-active]:text-zinc-950 group-[.is-active]:bg-zinc-100"
+      />
+    </nuxt-link>
+  </div>
+</template>
diff --git a/apps/app/components/molecules/TaskModal.vue b/apps/app/components/molecules/TaskModal.vue
index 2a2a98b..cb23cab 100644
--- a/apps/app/components/molecules/TaskModal.vue
+++ b/apps/app/components/molecules/TaskModal.vue
@@ -40,6 +40,7 @@ async function sendSubmission(status: "Pending" | "Draft") {
     if (!currentLesson) return;
 
     const payload: typeof submissionsStore.submission = {
+      Filename: submissionsStore.submission?.Filename || "",
       Content: submissionsStore.submission?.Content || "",
       SubmissionType: currentLesson.submissionContent,
       SubmissionStatus: status,
@@ -62,9 +63,11 @@ async function sendSubmission(status: "Pending" | "Draft") {
       submissionsStore.submission?.SubmissionType === "Image" &&
       uploadedFile.value
     ) {
-      await submissionsStore.requestUrl(uploadedFile.value.type);
-      await submissionsStore.uploadFileOnUrl(uploadedFile.value);
-      submissionsStore.submission.Content = `https://menthor-lessons.s3.sa-east-1.amazonaws.com/${submissionsStore.uploadUrl?.fileName}`;
+      const response = await submissionsStore.requestUrl(
+        uploadedFile.value.type
+      );
+      await submissionsStore.uploadFileOnUrl(uploadedFile.value, response.url);
+      submissionsStore.submission.Filename = response.fileName;
       await submissionsStore.updateSubmission();
     }
     coursesStore.updateCourseLessons(currentLesson._id);
@@ -90,7 +93,7 @@ async function uploadFile(file: File) {
 
   if (!submissionsStore.submission) return;
   uploadedFile.value = file;
-  submissionsStore.submission.Content = URL.createObjectURL(file);
+  submissionsStore.submission.Filename = URL.createObjectURL(file);
 }
 </script>
 
@@ -119,9 +122,13 @@ async function uploadFile(file: File) {
               class="mb-4"
             />
             <nuxt-img
-              v-if="submissionsStore.submission.Content"
+              v-if="submissionsStore.submission.Filename"
               class="rounded overflow-hidden"
-              :src="submissionsStore.submission.Content"
+              :src="
+                submissionsStore.submission.Filename.includes('blob')
+                  ? submissionsStore.submission.Filename
+                  : `https://menthor-lessons.s3.sa-east-1.amazonaws.com/${submissionsStore.submission.Filename}`
+              "
               alt="Submission Image"
             />
           </template>
diff --git a/apps/app/components/molecules/TopBar.vue b/apps/app/components/molecules/TopBar.vue
index 0ed2ff7..9950add 100644
--- a/apps/app/components/molecules/TopBar.vue
+++ b/apps/app/components/molecules/TopBar.vue
@@ -15,6 +15,7 @@ const shadowGenerator = (color: Array<Color>): string => {
 <template>
   <div
     class="absolute left-0 top-0 flex h-[90px] w-full justify-center overflow-hidden pointer-events-none"
+    v-if="shadowStore.primaryColors && shadowStore.secondaryColors"
   >
     <div class="relative h-full w-full max-w-[1017px]">
       <div
@@ -66,6 +67,12 @@ const shadowGenerator = (color: Array<Color>): string => {
               <NuxtLink to="/profile">
                 <DropdownItem icon="circle-user" name="Perfil" />
               </NuxtLink>
+              <NuxtLink
+                to="/creators/images"
+                v-if="userStore.user?.publicMetadata?.isCreator"
+              >
+                <DropdownItem icon="star" name="Creators" />
+              </NuxtLink>
               <NuxtLink to="/sign-out">
                 <DropdownItem icon="arrow-right-from-bracket" name="Sair" />
               </NuxtLink>
diff --git a/apps/app/components/organisms/DefaultAside.vue b/apps/app/components/organisms/DefaultAside.vue
index b35e080..2c01eeb 100644
--- a/apps/app/components/organisms/DefaultAside.vue
+++ b/apps/app/components/organisms/DefaultAside.vue
@@ -19,6 +19,10 @@ const isLesson = computed(() => {
   return !!route.meta?.lesson;
 });
 
+const isCreators = computed(() => {
+  return route.path.includes("/creators");
+});
+
 watch(isLesson, async () => {
   refresh();
 });
@@ -66,7 +70,12 @@ watch(isLesson, async () => {
         </div>
       </Transition>
       <Transition name="slide-fade-reverse">
-        <div v-if="!isLesson">
+        <div v-if="!isLesson && isCreators">
+          <LeftMenuCreators />
+        </div>
+      </Transition>
+      <Transition name="slide-fade-reverse">
+        <div v-if="!isLesson && !isCreators">
           <LeftMenuDefault />
         </div>
       </Transition>
diff --git a/apps/app/pages/creators/images.vue b/apps/app/pages/creators/images.vue
new file mode 100644
index 0000000..bde30ed
--- /dev/null
+++ b/apps/app/pages/creators/images.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+const creatorsStore = useCreatorsStore();
+const uploadStore = useUploadStore();
+const loading = ref(true);
+
+onMounted(async () => {
+  await creatorsStore.getImages();
+  loading.value = false;
+});
+
+function getSizePercentage(bytes: number) {
+  const tenGigabytes = 10737418240;
+
+  return Number((bytes * 100) / tenGigabytes).toFixed(2);
+}
+
+function onInput(event: Event) {
+  const allFiles = (event.target as HTMLInputElement).files;
+
+  if (!allFiles) return;
+
+  for (let i = 0; i < allFiles.length; ++i) {
+    const file = allFiles[i];
+    uploadFile(file);
+  }
+}
+
+async function uploadFile(file: File) {
+  loading.value = true;
+  const response = await creatorsStore.signUrl(file.type);
+  await uploadStore.uploadFileOnUrl(file, response.signedUrl.url);
+  await creatorsStore.addImage(response.signedUrl.fileName);
+  loading.value = false;
+}
+</script>
+
+<template>
+  <div
+    class="container pt-4"
+    :class="{ 'overflow-hidden h-[calc(100%_-_56px)]': loading }"
+  >
+    <h1 class="text-4xl font-extrabold mb-4">Suas imagens</h1>
+    <div class="flex items-center gap-4 mb-8">
+      <MButton
+        variant="outline"
+        text="Fazer upload"
+        icon-left="cloud-arrow-up"
+        @click="($refs['creators_image'] as HTMLInputElement).click()"
+      />
+      <input
+        ref="creators_image"
+        id="creators_image"
+        name="creators_image"
+        type="file"
+        accept="image/*"
+        multiple
+        class="hidden"
+        @input="onInput"
+      />
+
+      <div class="space-y-[4px] w-full max-w-[240px] pt-2">
+        <div class="rounded-full bg-zinc-200 h-[4px]">
+          <div
+            class="w-full h-full rounded-full bg-emerald-500"
+            :style="`max-width: ${getSizePercentage(
+              creatorsStore.filesSize
+            )}%;`"
+          ></div>
+        </div>
+        <div class="flex text-zinc-500 text-sm">
+          <div class="flex-1">
+            Usado:
+            <span class="text-zinc-950 font-medium">{{
+              $filters.bytesToSize(creatorsStore.filesSize)
+            }}</span>
+            de 10 GB
+          </div>
+          <div>{{ getSizePercentage(creatorsStore.filesSize) }} %</div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grid grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-1 relative"
+      v-if="loading"
+    >
+      <CreatorsImageCard v-for="i in 30" :key="i" fileUrl="loading" />
+      <div
+        class="absolute top-0 left-0 w-full h-full bg-[linear-gradient(180deg,_rgba(255,_255,_255,_0.00)_0%,_#FFF_100%)] z-10"
+      ></div>
+    </div>
+    <div
+      class="grid grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-1"
+      v-else
+    >
+      <CreatorsImageCard
+        v-for="fileName in creatorsStore.images.reverse()"
+        :key="fileName"
+        :fileUrl="`https://menthor-content.s3.sa-east-1.amazonaws.com/${fileName}`"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/app/pages/index.vue b/apps/app/pages/index.vue
index d7f50be..e0ccc8c 100644
--- a/apps/app/pages/index.vue
+++ b/apps/app/pages/index.vue
@@ -46,7 +46,7 @@ useSeoMeta({
     </div>
     <h2 class="mb-4 text-lg font-bold">Recomendados para você</h2> -->
     <div
-      class="mb-6 grid grid-cols-[repeat(auto-fill,_minmax(160px,_1fr))] sm:grid-cols-[repeat(auto-fill,_minmax(180px,_1fr))]"
+      class="mb-6 grid grid-cols-[repeat(auto-fill,_minmax(160px,_1fr))] sm:grid-cols-[repeat(auto-fill,_minmax(180px,_1fr))] gap-4 sm:gap-0"
     >
       <ContentNavigation v-slot="{ navigation }">
         <NuxtLink
diff --git a/apps/app/plugins/filters.ts b/apps/app/plugins/filters.ts
index e227058..a4f3106 100644
--- a/apps/app/plugins/filters.ts
+++ b/apps/app/plugins/filters.ts
@@ -12,6 +12,16 @@ export default defineNuxtPlugin((nuxtApp) => {
       };
       return levels[value];
     },
+    bytesToSize(bytes: number): string {
+      const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+      if (bytes === 0) return "n/a";
+      const i = Math.min(
+        Math.floor(Math.log(bytes) / Math.log(1024)),
+        sizes.length - 1
+      );
+      if (i === 0) return `${bytes} ${sizes[i]}`;
+      return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
+    },
   };
 
   app.config.globalProperties.$filters = filters;
diff --git a/apps/app/plugins/icons.ts b/apps/app/plugins/icons.ts
index 8812bb6..461cd41 100644
--- a/apps/app/plugins/icons.ts
+++ b/apps/app/plugins/icons.ts
@@ -10,12 +10,14 @@ import {
   faCheck,
   faTerminal,
   faCircleInfo,
+  faExternalLinkAlt,
   faMoon,
   faSun,
   faEdit,
   faHashtag,
   faStar,
   faLock,
+  faImage,
   faClipboard,
   faArrowRightFromBracket,
   faArrowUp,
@@ -48,12 +50,14 @@ library.add(
   faCheck,
   faTerminal,
   faCircleInfo,
+  faExternalLinkAlt,
   faMoon,
   faSun,
   faEdit,
   faHashtag,
   faStar,
   faLock,
+  faImage,
   faClipboard,
   faArrowRightFromBracket,
   faArrowUp,
diff --git a/apps/app/stores/api/creators.ts b/apps/app/stores/api/creators.ts
new file mode 100644
index 0000000..ec8acd7
--- /dev/null
+++ b/apps/app/stores/api/creators.ts
@@ -0,0 +1,63 @@
+import { defineStore } from "pinia";
+
+export const useCreatorsStore = defineStore("creators", {
+  state: (): {
+    images: string[];
+    filesSize: number;
+  } => ({
+    images: [],
+    filesSize: 0,
+  }),
+  actions: {
+    async getImages() {
+      try {
+        const response = await this.$api(`/creators/images`);
+        this.images = response.images;
+        this.filesSize = response.filesSize;
+        return response;
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+    async signUrl(fileType: string) {
+      try {
+        const response = await this.$api(`/creators/images/sign-url`, {
+          method: "POST",
+          body: {
+            fileType,
+          },
+        });
+
+        return response;
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+    async deleteImage(fileName: string) {
+      try {
+        await this.$api(`/creators/${fileName}`, {
+          method: "DELETE",
+        });
+
+        if (this.images.length <= 0) return;
+        this.images = this.images.filter((e) => e != fileName);
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+    async addImage(fileName: string) {
+      try {
+        await this.$api(`/creators/images`, {
+          method: "POST",
+          body: {
+            url: fileName,
+          },
+        });
+
+        this.images.push(fileName);
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+  },
+});
diff --git a/apps/app/stores/api/submissions.ts b/apps/app/stores/api/submissions.ts
index a8aae11..39706f3 100644
--- a/apps/app/stores/api/submissions.ts
+++ b/apps/app/stores/api/submissions.ts
@@ -9,6 +9,7 @@ export type SubmissionStatus =
 
 export type SubmissionParams = {
   Content: string;
+  Filename: string;
   SubmissionType: "Content" | "Image";
   SubmissionStatus: SubmissionStatus;
   LessonUrl: string;
@@ -20,11 +21,9 @@ export const useSubmissionsStore = defineStore("submissions", {
   state: (): {
     submission: SubmissionParams | null;
     submissions: SubmissionParams[] | null;
-    uploadUrl: { fileName: string; url: string } | null;
   } => ({
     submission: null,
     submissions: null,
-    uploadUrl: null,
   }),
   getters: {
     hasSubmission(state) {
@@ -75,16 +74,18 @@ export const useSubmissionsStore = defineStore("submissions", {
           }
         );
 
-        this.uploadUrl = response.url;
+        console.log(response);
+
+        return response;
       } catch (e) {
         throw new Error((e as Error).message);
       }
     },
-    async uploadFileOnUrl(file: File) {
-      if (!this.uploadUrl?.url) return;
+    async uploadFileOnUrl(file: File, url: string) {
+      console.log({ file, url });
 
       try {
-        const response = await $fetch(this.uploadUrl.url, {
+        const response = await $fetch(url, {
           method: "PUT",
           body: file,
           headers: {
@@ -92,6 +93,8 @@ export const useSubmissionsStore = defineStore("submissions", {
           },
         });
 
+        console.log(response);
+
         return response;
       } catch (e) {
         throw new Error((e as Error).message);
diff --git a/apps/app/stores/api/upload.ts b/apps/app/stores/api/upload.ts
new file mode 100644
index 0000000..cae9fbb
--- /dev/null
+++ b/apps/app/stores/api/upload.ts
@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+
+export const useUploadStore = defineStore("upload", {
+  actions: {
+    async uploadFileOnUrl(file: File, url: string) {
+      try {
+        const response = await $fetch(url, {
+          method: "PUT",
+          body: file,
+          headers: {
+            "Content-Type": file.type,
+          },
+        });
+
+        return response;
+      } catch (e) {
+        throw new Error((e as Error).message);
+      }
+    },
+  },
+});
diff --git a/apps/app/stores/clerk/user.ts b/apps/app/stores/clerk/user.ts
index 6e8b2b7..c5fb4aa 100644
--- a/apps/app/stores/clerk/user.ts
+++ b/apps/app/stores/clerk/user.ts
@@ -11,7 +11,10 @@ export type user = {
   firstName: string;
   lastName: string;
   username: string;
-  publicMetadata: Record<"badges", any>;
+  publicMetadata: {
+    badges: string;
+    isCreator: boolean;
+  };
 };
 
 export const useUserStore = defineStore("user", {
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
index efa9f61..8717943 100644
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@@ -20,6 +20,7 @@ declare module "vue" {
     $clerk: Clerk;
     $filters: {
       level: Function;
+      bytesToSize: Function;
     };
   }
 }
diff --git a/apps/www/components/atoms/Header.vue b/apps/www/components/atoms/Header.vue
new file mode 100644
index 0000000..8d7a297
--- /dev/null
+++ b/apps/www/components/atoms/Header.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { useScroll } from "@vueuse/core";
+
+interface Item {
+  stargazers_count: number;
+  forks_count: number;
+}
+
+interface GitHubRepository {
+  items: Item[];
+}
+const { data: gitHub } = await useFetch<GitHubRepository>(
+  "https://api.github.com/search/repositories?q=menthorlabs/menthor"
+);
+
+const route = useRoute();
+
+const menuOpened = defineModel();
+
+watch(
+  () => route.fullPath,
+  () => {
+    menuOpened.value = false;
+  }
+);
+
+const arrivedState = ref({ top: true });
+
+onMounted(() => {
+  const scroll = useScroll(document);
+  arrivedState.value = scroll.arrivedState;
+});
+</script>
+
+<template>
+  <header
+    class="top-0 z-10 blur-performance w-full"
+    :class="{
+      'fixed h-screen bg-white md:sticky md:h-fit md:bg-inherit md:backdrop-blur-none':
+        menuOpened,
+      sticky: !menuOpened,
+      'border-b border-zinc-100 bg-white': !arrivedState.top,
+    }"
+  >
+    <div
+      class="md:container flex w-full flex-col items-center justify-between md:flex-row md:py-[11.5px]"
+    >
+      <div
+        class="relative flex w-full justify-between px-4 py-[16px] md:w-fit md:px-0 md:py-0"
+      >
+        <nuxt-link to="/">
+          <nuxt-img
+            loading="lazy"
+            class="h-[28px] w-auto"
+            src="/brand/menthor-logo-dark.svg"
+            alt="Menthor logo"
+            height="28"
+            width="155"
+          />
+        </nuxt-link>
+        <div
+          class="absolute right-0 top-0 flex h-full w-[60px] cursor-pointer items-center justify-center md:hidden"
+          @click="menuOpened = !menuOpened"
+        >
+          <font-awesome-icon v-show="!menuOpened" icon="bars" class="text-xl" />
+          <font-awesome-icon v-show="menuOpened" icon="times" class="text-xl" />
+        </div>
+      </div>
+      <div
+        class="w-full flex-1 gap-6 space-y-4 p-4 md:flex md:h-fit md:items-center md:justify-end md:space-y-0 md:p-0"
+        :class="{ block: menuOpened, hidden: !menuOpened }"
+      >
+        <div
+          class="border-t border-b border-zinc-300 py-2 md:py-0 md:!border-none md:flex items-center gap-1"
+        >
+          <nuxt-link to="/creators">
+            <AtomsHeaderLink title="Escreva cursos" />
+          </nuxt-link>
+
+          <!-- <AtomsHeaderLink title="Documentação" /> -->
+
+          <VDropdown :distance="6" placement="bottom">
+            <AtomsHeaderLink title="Comunidade" chevron />
+            <template #popper="{ hide }">
+              <div @click="hide()" class="py-2">
+                <nuxt-link
+                  external
+                  target="_blank"
+                  to="https://discord.gg/8BCByyXxq8"
+                >
+                  <AtomsHeaderCardLink
+                    icon="fab fa-discord"
+                    title="Discord"
+                    description="Junte-se a mais de 2000 alunos."
+                  />
+                </nuxt-link>
+                <nuxt-link
+                  external
+                  target="_blank"
+                  to="https://github.com/menthorlabs/menthor"
+                >
+                  <AtomsHeaderCardLink
+                    icon="fab fa-github"
+                    title="GitHub"
+                    description="Deixe uma estrela e apoie-nos."
+                  />
+                </nuxt-link>
+                <nuxt-link
+                  external
+                  target="_blank"
+                  to="https://pixmeacoffee.vercel.app/menthor"
+                >
+                  <AtomsHeaderCardLink
+                    icon="hand-holding-dollar"
+                    title="Doação"
+                    description="Seja um doador e divulgue sua marca."
+                  />
+                </nuxt-link>
+              </div>
+            </template>
+          </VDropdown>
+        </div>
+
+        <nuxt-link
+          to="https://github.com/menthorlabs/menthor"
+          target="_blank"
+          external
+          class="group flex w-full h-[37px] p-2 cursor-pointer items-center justify-center gap-2 text-zinc-700 no-underline hover:text-zinc-900 md:w-fit"
+        >
+          <font-awesome-icon :icon="['fab', 'github']" class="text-xl" />
+          <span class="text-sm font-medium">{{
+            gitHub?.items[0].stargazers_count
+          }}</span>
+        </nuxt-link>
+        <nuxt-link
+          class="block"
+          :to="`${$config.public.appUrl}sign-in?utm_source=landing_page`"
+        >
+          <MButton
+            icon-right="arrow-right"
+            text="Acesse agora"
+            variant="secondary"
+            size="sm"
+            class="w-full md:w-fit"
+          />
+        </nuxt-link>
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/apps/www/components/atoms/HeaderCardLink.vue b/apps/www/components/atoms/HeaderCardLink.vue
new file mode 100644
index 0000000..d1c573c
--- /dev/null
+++ b/apps/www/components/atoms/HeaderCardLink.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description: string;
+  icon: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="group flex items-center py-2 px-4 gap-4 rounded-lg hover:bg-zinc-50 cursor-pointer"
+  >
+    <div
+      class="w-[44px] h-[44px] rounded bg-zinc-100 group-hover:text-zinc-950 flex items-center justify-center text-lg text-zinc-700"
+    >
+      <font-awesome-icon :icon="icon" />
+    </div>
+    <div class="flex-1">
+      <h3 class="text-sm font-medium text-zinc-950">{{ title }}</h3>
+      <p class="text-sm text-zinc-700 group-hover:text-zinc-950">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/components/atoms/HeaderLink.vue b/apps/www/components/atoms/HeaderLink.vue
new file mode 100644
index 0000000..3a68f72
--- /dev/null
+++ b/apps/www/components/atoms/HeaderLink.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  active?: boolean;
+  chevron?: boolean;
+}>();
+</script>
+
+<template>
+  <div
+    class="group md:h-[32px] p-4 text-base md:py-[6px] md:px-4 font-medium md:text-sm text-zinc-700 flex justify-center gap-1 items-center md:rounded-full hover:bg-zinc-100 hover:text-zinc-950 cursor-pointer"
+    :class="{ '!text-zinc-950 is-active': active }"
+  >
+    <span>{{ title }}</span>
+    <font-awesome-icon
+      v-if="chevron"
+      icon="chevron-down"
+      class="group-[.is-active]:rotate-180 text-xs"
+    />
+  </div>
+</template>
diff --git a/apps/www/components/atoms/InfoCard.vue b/apps/www/components/atoms/InfoCard.vue
new file mode 100644
index 0000000..a07eaae
--- /dev/null
+++ b/apps/www/components/atoms/InfoCard.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string;
+  title: string;
+  description: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="relative min-w-[80%] overflow-hidden rounded-lg border border-solid border-zinc-200 bg-white px-6 pb-8 pt-20 first:ml-4 last:mr-4 md:min-w-0 md:first:ml-0 md:last:mr-0"
+  >
+    <div
+      class="pointer-events-none absolute -right-[836px] -top-[448px] flex h-[651px] w-[1314px] justify-center"
+    >
+      <div class="mask-radial h-full w-full bg-pattern" />
+    </div>
+    <div class="relative">
+      <div
+        class="mb-4 flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-zinc-300 text-sm text-zinc-700"
+      >
+        <font-awesome-icon :icon="icon" />
+      </div>
+      <h3 class="text-lg font-medium">{{ title }}</h3>
+      <p class="text-base font-normal text-zinc-600">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/components/creators/Action.vue b/apps/www/components/creators/Action.vue
new file mode 100644
index 0000000..6592fae
--- /dev/null
+++ b/apps/www/components/creators/Action.vue
@@ -0,0 +1,50 @@
+<template>
+  <section id="action" class="my-10">
+    <div class="container">
+      <div
+        class="group w-full relative inline-flex items-center justify-center rounded-lg bg-gradient-to-br from-blue-400 to-pink-400 p-0.5 text-sm font-medium text-gray-900"
+      >
+        <div
+          class="py-5 lg:py-20 w-full relative rounded-md bg-white bg-gradient-to-br from-blue-400/20 to-pink-400/20 px-5 lg:px-14 flex lg:block flex-col-reverse"
+        >
+          <div class="lg:pt-0 lg:w-[58%] lg:max-w-[582px]">
+            <h2 class="text-4xl font-bold mb-6">
+              Ganhe uma conquista exclusiva
+            </h2>
+            <p class="text-lg font-normal text-zinc-700 mb-10">
+              Os 20 primeiros
+              <span class="text-zinc-950 font-semibold">creators</span> que
+              escreverem um curso para a menthor terão uma conquista exclusiva
+              dentro da plataforma.
+            </p>
+            <nuxt-link
+              to="https://nge5la4zlyy.typeform.com/to/nI55iu4u"
+              external
+              target="_blank"
+              class="w-full md:w-fit"
+            >
+              <MButton
+                variant="secondary"
+                text="Inscreva-se agora"
+                icon-right="arrow-right"
+                size="lg"
+              />
+            </nuxt-link>
+          </div>
+          <div
+            class="mx-auto lg:w-[508px] lg:h-[508px] lg:absolute lg:-right-[40px] lg:-top-[69px] aspect-square"
+          >
+            <nuxt-img
+              loading="lazy"
+              src="/midjourney/achievements/owl.png"
+              class="w-full h-full block object-contain object-center"
+              alt="Menthor - Coruja do conhecimento"
+              width="508"
+              height="508"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/www/components/creators/Hero.vue b/apps/www/components/creators/Hero.vue
new file mode 100644
index 0000000..79b03c3
--- /dev/null
+++ b/apps/www/components/creators/Hero.vue
@@ -0,0 +1,64 @@
+<template>
+  <section
+    id="creators_hero"
+    class="max-w-[1440px] mx-auto relative min-h-[664px]"
+  >
+    <div class="absolute left-0 top-0 flex h-full w-full justify-center">
+      <div class="mask-radial h-full max-w-[1110px] w-full">
+        <nuxt-img
+          src="/patterns/tech-stacks.svg"
+          width="1110"
+          height="790"
+          class="block h-full w-full object-cover object-center"
+        />
+      </div>
+      <div class="absolute left-0 top-0 flex justify-center w-full h-full">
+        <nuxt-img
+          loading="lazy"
+          src="/blobs/creators.svg"
+          class="block h-full max-h-[651px] w-full max-w-[1314px] object-contain object-center"
+          alt="Menthor hero blobs"
+          width="1314"
+          height="651"
+        />
+      </div>
+      <div class="absolute top-0 left-0 flex justify-center w-full h-full">
+        <div
+          class="w-full h-full max-w-[983px] max-h-[485px] rounded-[983px] bg-[radial-gradient(50%_50%_at_50%_50%,_rgba(255,_255,_255,_0.70)_68.75%,_rgba(255,_255,_255,_0.00)_100%)] mt-[31px]"
+        ></div>
+      </div>
+    </div>
+    <div class="container relative pt-24">
+      <h1
+        class="mx-auto mb-6 max-w-[844px] text-4xl font-extrabold md:text-center md:text-5xl"
+      >
+        Escreva cursos para a comunidade e ganhe recompensas
+      </h1>
+      <p
+        class="mx-auto mb-16 max-w-[844px] text-lg text-zinc-700 md:mb-10 md:text-center"
+      >
+        Torne-se um <span class="font-semibold text-zinc-950">creator</span> e
+        divulgue seu conhecimento para mais de 2000 alunos. Os lucros
+        provenientes da plataforma serão distribuído para todos os creators.
+      </p>
+      <div
+        class="mb-4 flex flex-wrap items-center gap-4 justify-center md:mb-10"
+      >
+        <nuxt-link
+          to="https://nge5la4zlyy.typeform.com/to/nI55iu4u"
+          external
+          target="_blank"
+          class="w-full md:w-fit"
+        >
+          <MButton
+            text="Torne-se um creator"
+            icon-left="star"
+            class="w-full md:w-fit"
+            variant="secondary"
+            size="lg"
+          />
+        </nuxt-link>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/www/components/creators/HowItWorks.vue b/apps/www/components/creators/HowItWorks.vue
new file mode 100644
index 0000000..6ff8584
--- /dev/null
+++ b/apps/www/components/creators/HowItWorks.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+interface card {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+const cards: card[] = [
+  {
+    icon: "keyboard",
+    title: "Aulas em markdown",
+    description: "Utilize seu próprio editor de texto para escrever as aulas.",
+  },
+  {
+    icon: "spell-check",
+    title: "Controle de qualidade",
+    description:
+      "Siga os padrões da menthor e escreva cursos de alta qualidade.",
+  },
+  {
+    icon: "lightbulb",
+    title: "Foco na criação",
+    description:
+      "Preocupe-se em escrever cursos, as dúvidas dos alunos a gente resolve.",
+  },
+];
+</script>
+
+<template>
+  <section id="how_it_works" class="my-10">
+    <div class="container">
+      <h2
+        class="mx-auto mb-6 max-w-[664px] text-3xl font-bold md:text-center md:text-4xl"
+      >
+        Como funciona a criação de cursos?
+      </h2>
+      <p
+        class="mx-auto mb-10 max-w-[664px] text-zinc-700 md:text-center md:text-lg"
+      >
+        A menthor é uma plataforma totalmente gratuita e open-source, todos os
+        nossos cursos estão
+        <nuxt-link
+          to="https://github.com/menthorlabs/courses"
+          external
+          target="_blank_"
+          class="link"
+          >disponíveis no GitHub</nuxt-link
+        >
+        com a licensa MIT.
+      </p>
+      <div
+        class="-ml-4 mb-12 flex w-[calc(100%_+_2rem)] flex-nowrap gap-4 overflow-x-auto md:grid md:w-full md:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] md:gap-6 md:overflow-x-hidden"
+      >
+        <AtomsInfoCard
+          v-for="card in cards"
+          :key="card.title"
+          :title="card.title"
+          :description="card.description"
+          :icon="card.icon"
+        />
+      </div>
+      <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-6">
+        <nuxt-link
+          to="https://discord.gg/8BCByyXxq8"
+          target="_blank"
+          external
+          class="block w-full sm:w-fit"
+        >
+          <MButton
+            variant="outline"
+            text="Acessar comunidade"
+            :icon-left="['fab', 'discord']"
+            size="lg"
+            class="w-full"
+          />
+        </nuxt-link>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/www/components/creators/RevenueShare.vue b/apps/www/components/creators/RevenueShare.vue
new file mode 100644
index 0000000..046ba5c
--- /dev/null
+++ b/apps/www/components/creators/RevenueShare.vue
@@ -0,0 +1,34 @@
+<template>
+  <section id="revenue_share" class="my-10">
+    <div class="container">
+      <div class="min-h-[757px] max-w-[757px] mx-auto relative">
+        <div
+          class="absolute top-0 left-0 w-full h-full pointer-events-none mask-radial opacity-30"
+        >
+          <nuxt-img
+            src="/patterns/circuit.svg"
+            width="752"
+            height="752"
+            class="block h-full w-full object-cover object-center"
+          />
+        </div>
+        <div class="text-center pt-[197px] relative">
+          <div
+            class="font-extrabold text-transparent text-[180px] leading-[180px] mb-9 bg-clip-text bg-[linear-gradient(180deg,_rgba(113,_113,_122,_0.40)_0%,_#71717A_100%)]"
+          >
+            70%
+          </div>
+          <h2 class="text-4xl font-bold text-zinc-950 mb-6">
+            De todo o lucro será distribuído
+          </h2>
+          <p class="text-lg text-zinc-700">
+            O dinheiro proveniente de doações, parcerias e outros canais serão
+            utilizados para pagar os custos e boa parte do lucro será
+            distribuído entre os
+            <strong class="font-semibold text-zinc-950">creators</strong>.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/www/components/home/HowItWorks.vue b/apps/www/components/home/HowItWorks.vue
index e25527e..2454b3b 100644
--- a/apps/www/components/home/HowItWorks.vue
+++ b/apps/www/components/home/HowItWorks.vue
@@ -45,28 +45,13 @@ const cards: card[] = [
       <div
         class="-ml-4 mb-12 flex w-[calc(100%_+_2rem)] flex-nowrap gap-4 overflow-x-auto md:grid md:w-full md:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] md:gap-6 md:overflow-x-hidden"
       >
-        <div
+        <AtomsInfoCard
           v-for="card in cards"
           :key="card.title"
-          class="relative min-w-[80%] overflow-hidden rounded-lg border border-solid border-zinc-200 bg-white px-6 pb-8 pt-20 first:ml-4 last:mr-4 md:min-w-0 md:first:ml-0 md:last:mr-0"
-        >
-          <div
-            class="pointer-events-none absolute -right-[836px] -top-[448px] flex h-[651px] w-[1314px] justify-center"
-          >
-            <div class="mask-radial h-full w-full bg-pattern" />
-          </div>
-          <div class="relative">
-            <div
-              class="mb-4 flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-zinc-300 text-sm text-zinc-700"
-            >
-              <font-awesome-icon :icon="card.icon" />
-            </div>
-            <h3 class="text-lg font-medium">{{ card.title }}</h3>
-            <p class="text-base font-normal text-zinc-600">
-              {{ card.description }}
-            </p>
-          </div>
-        </div>
+          :title="card.title"
+          :description="card.description"
+          :icon="card.icon"
+        />
       </div>
       <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-6">
         <nuxt-link
diff --git a/apps/www/layouts/default.vue b/apps/www/layouts/default.vue
index a776f8d..0c9ac7a 100644
--- a/apps/www/layouts/default.vue
+++ b/apps/www/layouts/default.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useScroll } from "@vueuse/core";
 const route = useRoute();
 useSchemaOrg([
   defineOrganization({
@@ -53,134 +52,12 @@ useSeoMeta({
   twitterSite: "@publisher_handle",
 });
 
-interface Item {
-  stargazers_count: number;
-  forks_count: number;
-}
-
-interface GitHubRepository {
-  items: Item[];
-}
-const { data: gitHub } = await useFetch<GitHubRepository>(
-  "https://api.github.com/search/repositories?q=menthorlabs/menthor"
-);
-
-const menuOpened = ref<boolean>(false);
-
-const arrivedState = ref({ top: true });
-
-onMounted(() => {
-  const scroll = useScroll(document);
-  arrivedState.value = scroll.arrivedState;
-});
+const menuOpened = ref(false);
 </script>
 
 <template>
   <main class="font-sans" :class="{ 'mt-[60px] md:mt-0': menuOpened }">
-    <header
-      class="top-0 z-10 blur-performance w-full"
-      :class="{
-        'fixed h-screen bg-zinc-300/40 backdrop-blur-sm md:sticky md:h-fit md:bg-inherit md:backdrop-blur-none':
-          menuOpened,
-        sticky: !menuOpened,
-        'backdrop-blur-sm border-b border-zinc-100/50 bg-zinc-100/40':
-          !arrivedState.top,
-      }"
-    >
-      <div
-        class="md:container flex w-full flex-col items-center justify-between md:flex-row md:py-[11.5px]"
-      >
-        <div
-          class="relative flex w-full justify-between px-4 py-[16px] md:w-fit md:px-0 md:py-0"
-        >
-          <nuxt-img
-            loading="lazy"
-            class="h-[28px] w-auto"
-            src="/brand/menthor-logo-dark.svg"
-            alt="Menthor logo"
-            height="28"
-            width="155"
-          />
-          <div
-            class="absolute right-0 top-0 flex h-full w-[60px] cursor-pointer items-center justify-center md:hidden"
-            @click="menuOpened = !menuOpened"
-          >
-            <font-awesome-icon
-              v-show="!menuOpened"
-              icon="bars"
-              class="text-xl"
-            />
-            <font-awesome-icon
-              v-show="menuOpened"
-              icon="times"
-              class="text-xl"
-            />
-          </div>
-        </div>
-        <div
-          class="w-full flex-1 gap-6 space-y-4 p-4 md:flex md:h-fit md:items-center md:justify-end md:space-y-0 md:p-0"
-          :class="{ block: menuOpened, hidden: !menuOpened }"
-        >
-          <nuxt-link
-            to="https://github.com/menthorlabs/menthor"
-            target="_blank"
-            external
-            class="group flex w-full cursor-pointer items-center justify-center gap-2 text-zinc-700 no-underline hover:text-zinc-900 md:w-fit"
-          >
-            <font-awesome-icon :icon="['fab', 'github']" class="text-xl" />
-            <div>
-              <div class="text-[13px]">menthorlabs/menthor</div>
-              <div class="flex items-center gap-2">
-                <div class="flex items-center gap-1 text-xs">
-                  <font-awesome-icon icon="star" />
-                  <span>{{ gitHub?.items[0].stargazers_count }}</span>
-                </div>
-                <div
-                  class="flex items-center gap-1 text-xs text-zinc-600 group-hover:text-zinc-800"
-                >
-                  <font-awesome-icon icon="code-fork" />
-                  <span>{{ gitHub?.items[0].forks_count }}</span>
-                </div>
-              </div>
-            </div>
-          </nuxt-link>
-          <nuxt-link
-            class="hidden md:block"
-            to="https://discord.gg/8BCByyXxq8"
-            target="_blank"
-            external
-          >
-            <MIconButton icon="fa-brands fa-discord" />
-          </nuxt-link>
-          <nuxt-link
-            class="block md:hidden"
-            to="https://discord.gg/8BCByyXxq8"
-            target="_blank"
-            external
-          >
-            <MButton
-              icon-left="fa-brands fa-discord"
-              text="Entre no discord"
-              variant="outline"
-              size="sm"
-              class="w-full md:w-fit"
-            />
-          </nuxt-link>
-          <nuxt-link
-            class="block"
-            :to="`${$config.public.appUrl}sign-in?utm_source=landing_page`"
-          >
-            <MButton
-              icon-right="arrow-right"
-              text="Acessar plataforma"
-              variant="secondary"
-              size="sm"
-              class="w-full md:w-fit"
-            />
-          </nuxt-link>
-        </div>
-      </div>
-    </header>
+    <AtomsHeader v-model="menuOpened" />
     <slot />
     <footer class="container border-t border-solid border-zinc-200 py-10">
       <nuxt-img
diff --git a/apps/www/package.json b/apps/www/package.json
index d5c38dd..3fefa63 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -28,6 +28,7 @@
     "@vueuse/nuxt": "^10.3.0",
     "eslint-config-custom": "workspace:*",
     "humps": "^2.0.1",
+    "floating-vue": "2.0.0-beta.24",
     "nuxt-umami": "^2.5.2",
     "tailwind-config": "workspace:*"
   }
diff --git a/apps/www/pages/creators.vue b/apps/www/pages/creators.vue
new file mode 100644
index 0000000..34d84ce
--- /dev/null
+++ b/apps/www/pages/creators.vue
@@ -0,0 +1,6 @@
+<template>
+  <CreatorsHero class="mb-32" />
+  <CreatorsHowItWorks />
+  <CreatorsRevenueShare />
+  <CreatorsAction class="mb-[140px]" />
+</template>
diff --git a/apps/www/plugins/floating.ts b/apps/www/plugins/floating.ts
new file mode 100644
index 0000000..ade74da
--- /dev/null
+++ b/apps/www/plugins/floating.ts
@@ -0,0 +1,10 @@
+import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css";
+
+// FloatingVue.options.themes.tooltip.delay.hide = 999999;
+
+FloatingVue.options.themes.tooltip.delay.show = 0;
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.use(FloatingVue);
+});
diff --git a/apps/www/plugins/icons.ts b/apps/www/plugins/icons.ts
index ef4c4eb..2658890 100644
--- a/apps/www/plugins/icons.ts
+++ b/apps/www/plugins/icons.ts
@@ -6,7 +6,13 @@ import {
   faEarthAmericas,
   faArrowRight,
   faBars,
+  faBook,
+  faLightbulb,
+  faChevronDown,
+  faHandHoldingDollar,
+  faKeyboard,
   faTimes,
+  faSpellCheck,
   faMagnifyingGlass,
   faStar,
   faCodeFork,
@@ -26,7 +32,13 @@ library.add(
   faEarthAmericas,
   faArrowRight,
   faBars,
+  faBook,
+  faLightbulb,
+  faChevronDown,
+  faHandHoldingDollar,
+  faKeyboard,
   faTimes,
+  faSpellCheck,
   faMagnifyingGlass,
   faStar,
   faCodeFork,
diff --git a/apps/www/public/blobs/creators.svg b/apps/www/public/blobs/creators.svg
new file mode 100644
index 0000000..f1d1915
--- /dev/null
+++ b/apps/www/public/blobs/creators.svg
@@ -0,0 +1,22 @@
+<svg width="873" height="739" viewBox="0 0 873 739" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.1">
+<g filter="url(#filter0_f_992_1578)">
+<path d="M512.472 198.537C586.313 320.053 899.133 308.764 804.656 366.175C710.178 423.586 493.879 410.125 420.038 288.609C346.197 167.093 90.9331 191.949 185.411 134.538C279.888 77.1271 438.631 77.0217 512.472 198.537Z" fill="#22C55E"/>
+</g>
+<g filter="url(#filter1_f_992_1578)">
+<path d="M398.263 343.448C472.104 464.964 784.924 453.675 690.447 511.086C595.969 568.497 379.67 555.036 305.829 433.52C231.988 312.005 -23.2759 336.86 71.2017 279.449C165.679 222.038 324.422 221.933 398.263 343.448Z" fill="#3B82F6"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_992_1578" x="114.704" y="47.2531" width="757.568" height="401.657" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_992_1578"/>
+</filter>
+<filter id="filter1_f_992_1578" x="0.495117" y="192.164" width="757.568" height="401.657" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_992_1578"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/www/public/midjourney/achievements/owl.png b/apps/www/public/midjourney/achievements/owl.png
new file mode 100644
index 0000000..94e019b
Binary files /dev/null and b/apps/www/public/midjourney/achievements/owl.png differ
diff --git a/apps/www/public/patterns/circuit.svg b/apps/www/public/patterns/circuit.svg
new file mode 100644
index 0000000..754aadb
--- /dev/null
+++ b/apps/www/public/patterns/circuit.svg
@@ -0,0 +1,123 @@
+<svg width="757" height="758" viewBox="0 0 757 758" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:multiply">
+<path d="M16.0904 393.586C23.9673 393.586 30.3528 387.199 30.3528 379.32C30.3528 371.441 23.9673 365.054 16.0904 365.054C8.21358 365.054 1.82812 371.441 1.82812 379.32C1.82812 387.199 8.21358 393.586 16.0904 393.586Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M21.5758 456.504C29.4527 456.504 35.8381 450.117 35.8381 442.238C35.8381 434.359 29.4527 427.971 21.5758 427.971C13.6989 427.971 7.31348 434.359 7.31348 442.238C7.31348 450.117 13.6989 456.504 21.5758 456.504Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M182.85 456.504C190.727 456.504 197.113 450.117 197.113 442.238C197.113 434.359 190.727 427.971 182.85 427.971C174.973 427.971 168.588 434.359 168.588 442.238C168.588 450.117 174.973 456.504 182.85 456.504Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M132.749 456.504C140.625 456.504 147.011 450.117 147.011 442.238C147.011 434.359 140.625 427.971 132.749 427.971C124.872 427.971 118.486 434.359 118.486 442.238C118.486 450.117 124.872 456.504 132.749 456.504Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M38.0328 517.592C45.9097 517.592 52.2951 511.205 52.2951 503.326C52.2951 495.447 45.9097 489.06 38.0328 489.06C30.156 489.06 23.7705 495.447 23.7705 503.326C23.7705 511.205 30.156 517.592 38.0328 517.592Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M64.7281 574.657C72.605 574.657 78.9905 568.269 78.9905 560.391C78.9905 552.512 72.605 546.124 64.7281 546.124C56.8513 546.124 50.4658 552.512 50.4658 560.391C50.4658 568.269 56.8513 574.657 64.7281 574.657Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M197.112 574.657C204.989 574.657 211.374 568.269 211.374 560.391C211.374 552.512 204.989 546.124 197.112 546.124C189.235 546.124 182.85 552.512 182.85 560.391C182.85 568.269 189.235 574.657 197.112 574.657Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M337.542 574.657C345.418 574.657 351.804 568.269 351.804 560.391C351.804 552.512 345.418 546.124 337.542 546.124C329.665 546.124 323.279 552.512 323.279 560.391C323.279 568.269 329.665 574.657 337.542 574.657Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M145.548 574.657C153.425 574.657 159.811 568.269 159.811 560.391C159.811 552.512 153.425 546.124 145.548 546.124C137.672 546.124 131.286 552.512 131.286 560.391C131.286 568.269 137.672 574.657 145.548 574.657Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M100.933 626.6C108.81 626.6 115.196 620.213 115.196 612.334C115.196 604.455 108.81 598.068 100.933 598.068C93.0564 598.068 86.6709 604.455 86.6709 612.334C86.6709 620.213 93.0564 626.6 100.933 626.6Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M145.548 671.227C153.425 671.227 159.811 664.84 159.811 656.961C159.811 649.082 153.425 642.695 145.548 642.695C137.672 642.695 131.286 649.082 131.286 656.961C131.286 664.84 137.672 671.227 145.548 671.227Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M197.112 707.441C204.989 707.441 211.374 701.054 211.374 693.175C211.374 685.296 204.989 678.909 197.112 678.909C189.235 678.909 182.85 685.296 182.85 693.175C182.85 701.054 189.235 707.441 197.112 707.441Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M254.527 734.145C262.404 734.145 268.789 727.758 268.789 719.879C268.789 712 262.404 705.612 254.527 705.612C246.65 705.612 240.265 712 240.265 719.879C240.265 727.758 246.65 734.145 254.527 734.145Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M254.527 671.227C262.404 671.227 268.789 664.84 268.789 656.961C268.789 649.082 262.404 642.695 254.527 642.695C246.65 642.695 240.265 649.082 240.265 656.961C240.265 664.84 246.65 671.227 254.527 671.227Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M315.599 750.606C323.476 750.606 329.862 744.219 329.862 736.34C329.862 728.461 323.476 722.073 315.599 722.073C307.722 722.073 301.337 728.461 301.337 736.34C301.337 744.219 307.722 750.606 315.599 750.606Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M400.076 710.734C407.953 710.734 414.338 704.347 414.338 696.468C414.338 688.589 407.953 682.201 400.076 682.201C392.199 682.201 385.813 688.589 385.813 696.468C385.813 704.347 392.199 710.734 400.076 710.734Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M378.5 756.093C386.376 756.093 392.762 749.706 392.762 741.827C392.762 733.948 386.376 727.56 378.5 727.56C370.623 727.56 364.237 733.948 364.237 741.827C364.237 749.706 370.623 756.093 378.5 756.093Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M365.335 671.227C373.211 671.227 379.597 664.84 379.597 656.961C379.597 649.082 373.211 642.695 365.335 642.695C357.458 642.695 351.072 649.082 351.072 656.961C351.072 664.84 357.458 671.227 365.335 671.227Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M378.5 626.6C386.376 626.6 392.762 620.213 392.762 612.334C392.762 604.455 386.376 598.068 378.5 598.068C370.623 598.068 364.237 604.455 364.237 612.334C364.237 620.213 370.623 626.6 378.5 626.6Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M441.4 750.606C449.277 750.606 455.662 744.219 455.662 736.34C455.662 728.461 449.277 722.073 441.4 722.073C433.523 722.073 427.138 728.461 427.138 736.34C427.138 744.219 433.523 750.606 441.4 750.606Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M441.4 519.055C449.277 519.055 455.662 512.668 455.662 504.789C455.662 496.91 449.277 490.523 441.4 490.523C433.523 490.523 427.138 496.91 427.138 504.789C427.138 512.668 433.523 519.055 441.4 519.055Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M421.652 582.338C429.529 582.338 435.914 575.951 435.914 568.072C435.914 560.193 429.529 553.806 421.652 553.806C413.775 553.806 407.39 560.193 407.39 568.072C407.39 575.951 413.775 582.338 421.652 582.338Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M315.599 456.504C323.476 456.504 329.862 450.117 329.862 442.238C329.862 434.359 323.476 427.971 315.599 427.971C307.722 427.971 301.337 434.359 301.337 442.238C301.337 450.117 307.722 456.504 315.599 456.504Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M243.556 401.268C251.433 401.268 257.819 394.881 257.819 387.002C257.819 379.123 251.433 372.736 243.556 372.736C235.679 372.736 229.294 379.123 229.294 387.002C229.294 394.881 235.679 401.268 243.556 401.268Z" stroke="#D4D4D8" stroke-miterlimit="10"/>
+<path d="M502.472 734.145C510.349 734.145 516.735 727.758 516.735 719.879C516.735 712 510.349 705.612 502.472 705.612C494.595 705.612 488.21 712 488.21 719.879C488.21 727.758 494.595 734.145 502.472 734.145Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M502.472 643.061C510.349 643.061 516.735 636.674 516.735 628.795C516.735 620.916 510.349 614.529 502.472 614.529C494.595 614.529 488.21 620.916 488.21 628.795C488.21 636.674 494.595 643.061 502.472 643.061Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M502.472 574.657C510.349 574.657 516.735 568.269 516.735 560.391C516.735 552.512 510.349 546.124 502.472 546.124C494.595 546.124 488.21 552.512 488.21 560.391C488.21 568.269 494.595 574.657 502.472 574.657Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M502.472 517.592C510.349 517.592 516.735 511.205 516.735 503.326C516.735 495.447 510.349 489.06 502.472 489.06C494.595 489.06 488.21 495.447 488.21 503.326C488.21 511.205 494.595 517.592 502.472 517.592Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M559.521 707.441C567.398 707.441 573.783 701.054 573.783 693.175C573.783 685.296 567.398 678.909 559.521 678.909C551.644 678.909 545.259 685.296 545.259 693.175C545.259 701.054 551.644 707.441 559.521 707.441Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M611.451 671.227C619.328 671.227 625.713 664.84 625.713 656.961C625.713 649.082 619.328 642.695 611.451 642.695C603.574 642.695 597.188 649.082 597.188 656.961C597.188 664.84 603.574 671.227 611.451 671.227Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M611.451 574.657C619.328 574.657 625.713 568.269 625.713 560.391C625.713 552.512 619.328 546.124 611.451 546.124C603.574 546.124 597.188 552.512 597.188 560.391C597.188 568.269 603.574 574.657 611.451 574.657Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M656.066 626.6C663.943 626.6 670.328 620.213 670.328 612.334C670.328 604.455 663.943 598.068 656.066 598.068C648.189 598.068 641.804 604.455 641.804 612.334C641.804 620.213 648.189 626.6 656.066 626.6Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M692.27 574.657C700.147 574.657 706.532 568.269 706.532 560.391C706.532 552.512 700.147 546.124 692.27 546.124C684.393 546.124 678.008 552.512 678.008 560.391C678.008 568.269 684.393 574.657 692.27 574.657Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M718.966 517.592C726.843 517.592 733.229 511.205 733.229 503.326C733.229 495.447 726.843 489.06 718.966 489.06C711.09 489.06 704.704 495.447 704.704 503.326C704.704 511.205 711.09 517.592 718.966 517.592Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M735.423 456.504C743.3 456.504 749.686 450.117 749.686 442.238C749.686 434.359 743.3 427.971 735.423 427.971C727.547 427.971 721.161 434.359 721.161 442.238C721.161 450.117 727.547 456.504 735.423 456.504Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M740.909 393.586C748.786 393.586 755.171 387.199 755.171 379.32C755.171 371.441 748.786 365.054 740.909 365.054C733.032 365.054 726.646 371.441 726.646 379.32C726.646 387.199 733.032 393.586 740.909 393.586Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M735.423 330.669C743.3 330.669 749.686 324.282 749.686 316.403C749.686 308.524 743.3 302.137 735.423 302.137C727.547 302.137 721.161 308.524 721.161 316.403C721.161 324.282 727.547 330.669 735.423 330.669Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M718.966 269.581C726.843 269.581 733.229 263.194 733.229 255.315C733.229 247.436 726.843 241.048 718.966 241.048C711.09 241.048 704.704 247.436 704.704 255.315C704.704 263.194 711.09 269.581 718.966 269.581Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M692.27 212.15C700.147 212.15 706.532 205.763 706.532 197.884C706.532 190.005 700.147 183.618 692.27 183.618C684.393 183.618 678.008 190.005 678.008 197.884C678.008 205.763 684.393 212.15 692.27 212.15Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M656.066 160.573C663.943 160.573 670.328 154.186 670.328 146.307C670.328 138.428 663.943 132.041 656.066 132.041C648.189 132.041 641.804 138.428 641.804 146.307C641.804 154.186 648.189 160.573 656.066 160.573Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M611.451 115.945C619.328 115.945 625.713 109.558 625.713 101.679C625.713 93.8003 619.328 87.4131 611.451 87.4131C603.574 87.4131 597.188 93.8003 597.188 101.679C597.188 109.558 603.574 115.945 611.451 115.945Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M621.69 330.669C629.567 330.669 635.952 324.282 635.952 316.403C635.952 308.524 629.567 302.137 621.69 302.137C613.813 302.137 607.428 308.524 607.428 316.403C607.428 324.282 613.813 330.669 621.69 330.669Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M494.793 321.524C502.669 321.524 509.055 315.137 509.055 307.258C509.055 299.379 502.669 292.992 494.793 292.992C486.916 292.992 480.53 299.379 480.53 307.258C480.53 315.137 486.916 321.524 494.793 321.524Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M442.863 321.524C450.74 321.524 457.125 315.137 457.125 307.258C457.125 299.379 450.74 292.992 442.863 292.992C434.986 292.992 428.601 299.379 428.601 307.258C428.601 315.137 434.986 321.524 442.863 321.524Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M394.225 321.524C402.102 321.524 408.488 315.137 408.488 307.258C408.488 299.379 402.102 292.992 394.225 292.992C386.348 292.992 379.963 299.379 379.963 307.258C379.963 315.137 386.348 321.524 394.225 321.524Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M556.962 330.669C564.838 330.669 571.224 324.282 571.224 316.403C571.224 308.524 564.838 302.137 556.962 302.137C549.085 302.137 542.699 308.524 542.699 316.403C542.699 324.282 549.085 330.669 556.962 330.669Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M618.399 269.581C626.276 269.581 632.661 263.194 632.661 255.315C632.661 247.436 626.276 241.048 618.399 241.048C610.522 241.048 604.137 247.436 604.137 255.315C604.137 263.194 610.522 269.581 618.399 269.581Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M559.521 79.7313C567.398 79.7313 573.783 73.3442 573.783 65.4652C573.783 57.5862 567.398 51.1991 559.521 51.1991C551.644 51.1991 545.259 57.5862 545.259 65.4652C545.259 73.3442 551.644 79.7313 559.521 79.7313Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M559.521 146.307C567.398 146.307 573.783 139.919 573.783 132.041C573.783 124.162 567.398 117.774 559.521 117.774C551.644 117.774 545.259 124.162 545.259 132.041C545.259 139.919 551.644 146.307 559.521 146.307Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M481.261 212.15C489.138 212.15 495.524 205.763 495.524 197.884C495.524 190.005 489.138 183.618 481.261 183.618C473.385 183.618 466.999 190.005 466.999 197.884C466.999 205.763 473.385 212.15 481.261 212.15Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M548.55 206.663C556.427 206.663 562.813 200.276 562.813 192.397C562.813 184.518 556.427 178.131 548.55 178.131C540.674 178.131 534.288 184.518 534.288 192.397C534.288 200.276 540.674 206.663 548.55 206.663Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M502.472 53.028C510.349 53.028 516.735 46.6409 516.735 38.7619C516.735 30.8829 510.349 24.4958 502.472 24.4958C494.595 24.4958 488.21 30.8829 488.21 38.7619C488.21 46.6409 494.595 53.028 502.472 53.028Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M428.6 168.255C436.477 168.255 442.863 161.867 442.863 153.988C442.863 146.109 436.477 139.722 428.6 139.722C420.723 139.722 414.338 146.109 414.338 153.988C414.338 161.867 420.723 168.255 428.6 168.255Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M441.4 36.5671C449.277 36.5671 455.662 30.1799 455.662 22.301C455.662 14.422 449.277 8.03484 441.4 8.03484C433.523 8.03484 427.138 14.422 427.138 22.301C427.138 30.1799 433.523 36.5671 441.4 36.5671Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M378.5 31.0801C386.376 31.0801 392.762 24.693 392.762 16.814C392.762 8.93502 386.376 2.54785 378.5 2.54785C370.623 2.54785 364.237 8.93502 364.237 16.814C364.237 24.693 370.623 31.0801 378.5 31.0801Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M315.599 36.5671C323.476 36.5671 329.862 30.1799 329.862 22.301C329.862 14.422 323.476 8.03484 315.599 8.03484C307.722 8.03484 301.337 14.422 301.337 22.301C301.337 30.1799 307.722 36.5671 315.599 36.5671Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M291.829 163.499C299.706 163.499 306.091 157.112 306.091 149.233C306.091 141.354 299.706 134.967 291.829 134.967C283.952 134.967 277.566 141.354 277.566 149.233C277.566 157.112 283.952 163.499 291.829 163.499Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M315.599 113.019C323.476 113.019 329.862 106.632 329.862 98.7528C329.862 90.8739 323.476 84.4867 315.599 84.4867C307.722 84.4867 301.337 90.8739 301.337 98.7528C301.337 106.632 307.722 113.019 315.599 113.019Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M254.527 53.028C262.404 53.028 268.789 46.6409 268.789 38.7619C268.789 30.8829 262.404 24.4958 254.527 24.4958C246.65 24.4958 240.265 30.8829 240.265 38.7619C240.265 46.6409 246.65 53.028 254.527 53.028Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M197.112 79.7313C204.989 79.7313 211.374 73.3442 211.374 65.4652C211.374 57.5862 204.989 51.1991 197.112 51.1991C189.235 51.1991 182.85 57.5862 182.85 65.4652C182.85 73.3442 189.235 79.7313 197.112 79.7313Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M219.054 172.278C226.931 172.278 233.317 165.891 233.317 158.012C233.317 150.133 226.931 143.746 219.054 143.746C211.177 143.746 204.792 150.133 204.792 158.012C204.792 165.891 211.177 172.278 219.054 172.278Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M145.548 115.945C153.425 115.945 159.811 109.558 159.811 101.679C159.811 93.8003 153.425 87.4131 145.548 87.4131C137.672 87.4131 131.286 93.8003 131.286 101.679C131.286 109.558 137.672 115.945 145.548 115.945Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M100.933 160.573C108.81 160.573 115.196 154.186 115.196 146.307C115.196 138.428 108.81 132.041 100.933 132.041C93.0564 132.041 86.6709 138.428 86.6709 146.307C86.6709 154.186 93.0564 160.573 100.933 160.573Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M177.73 209.224C185.607 209.224 191.992 202.837 191.992 194.958C191.992 187.079 185.607 180.692 177.73 180.692C169.853 180.692 163.468 187.079 163.468 194.958C163.468 202.837 169.853 209.224 177.73 209.224Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M64.7281 212.15C72.605 212.15 78.9905 205.763 78.9905 197.884C78.9905 190.005 72.605 183.618 64.7281 183.618C56.8513 183.618 50.4658 190.005 50.4658 197.884C50.4658 205.763 56.8513 212.15 64.7281 212.15Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M38.0328 269.581C45.9097 269.581 52.2951 263.194 52.2951 255.315C52.2951 247.436 45.9097 241.048 38.0328 241.048C30.156 241.048 23.7705 247.436 23.7705 255.315C23.7705 263.194 30.156 269.581 38.0328 269.581Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M378.5 406.024C386.376 406.024 392.762 399.636 392.762 391.757C392.762 383.878 386.376 377.491 378.5 377.491C370.623 377.491 364.237 383.878 364.237 391.757C364.237 399.636 370.623 406.024 378.5 406.024Z" stroke="#D4D4D8" stroke-miterlimit="10"/>
+<path d="M441.4 416.632C449.277 416.632 455.662 410.245 455.662 402.366C455.662 394.487 449.277 388.099 441.4 388.099C433.523 388.099 427.138 394.487 427.138 402.366C427.138 410.245 433.523 416.632 441.4 416.632Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M593.166 476.257C601.042 476.257 607.428 469.87 607.428 461.991C607.428 454.112 601.042 447.725 593.166 447.725C585.289 447.725 578.903 454.112 578.903 461.991C578.903 469.87 585.289 476.257 593.166 476.257Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M477.604 367.981C485.481 367.981 491.866 361.593 491.866 353.714C491.866 345.835 485.481 339.448 477.604 339.448C469.727 339.448 463.342 345.835 463.342 353.714C463.342 361.593 469.727 367.981 477.604 367.981Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M21.5758 330.669C29.4527 330.669 35.8381 324.282 35.8381 316.403C35.8381 308.524 29.4527 302.137 21.5758 302.137C13.6989 302.137 7.31348 308.524 7.31348 316.403C7.31348 324.282 13.6989 330.669 21.5758 330.669Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M74.9684 330.669C82.8452 330.669 89.2307 324.282 89.2307 316.403C89.2307 308.524 82.8452 302.137 74.9684 302.137C67.0915 302.137 60.7061 308.524 60.7061 316.403C60.7061 324.282 67.0915 330.669 74.9684 330.669Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M152.497 344.935C160.374 344.935 166.759 338.548 166.759 330.669C166.759 322.79 160.374 316.403 152.497 316.403C144.62 316.403 138.234 322.79 138.234 330.669C138.234 338.548 144.62 344.935 152.497 344.935Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M197.112 266.289C204.989 266.289 211.374 259.901 211.374 252.022C211.374 244.143 204.989 237.756 197.112 237.756C189.235 237.756 182.85 244.143 182.85 252.022C182.85 259.901 189.235 266.289 197.112 266.289Z" stroke="#D4D4D8" stroke-miterlimit="10"/>
+<path d="M260.744 266.289C268.621 266.289 275.006 259.901 275.006 252.022C275.006 244.143 268.621 237.756 260.744 237.756C252.867 237.756 246.481 244.143 246.481 252.022C246.481 259.901 252.867 266.289 260.744 266.289Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M197.112 316.403C204.989 316.403 211.374 310.016 211.374 302.137C211.374 294.258 204.989 287.871 197.112 287.871C189.235 287.871 182.85 294.258 182.85 302.137C182.85 310.016 189.235 316.403 197.112 316.403Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M315.599 266.289C323.476 266.289 329.862 259.901 329.862 252.022C329.862 244.143 323.476 237.756 315.599 237.756C307.722 237.756 301.337 244.143 301.337 252.022C301.337 259.901 307.722 266.289 315.599 266.289Z" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M30.3525 379.32H182.484L260.744 300.674V266.289" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M378.5 406.024V442.238L316.331 504.058H121.046L74.6025 550.514" stroke="#D4D4D8" stroke-miterlimit="10"/>
+<path d="M211.374 560.391H323.278" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M60.7055 316.403H35.8379" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M559.521 117.774V79.7313" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M512.346 513.203L559.521 560.391V678.909" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M611.451 642.695V574.657" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M641.804 612.334H611.451" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M502.472 705.612V643.061" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M492.233 570.633L441.4 621.479V722.073" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M142.623 320.427L77.5283 255.315H52.2949" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M631.93 306.161L682.762 255.315H704.704" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M721.161 316.403H683.859L620.959 379.32H566.469L504.666 317.5" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M253.796 376.76L374.111 256.412H545.991L645.827 156.183" stroke="#D4D4D8" stroke-miterlimit="10"/>
+<path d="M368.26 731.584L314.136 677.446V612.334H115.195" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M145.549 574.657V612.334" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M254.527 705.613V671.227" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M726.646 379.32H607.428" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M708.727 493.084L636.684 421.021L543.43 420.29L525.145 402.366H455.662" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M197.112 442.969H254.527L343.758 353.714H463.342" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M197.112 678.909V656.961H159.811" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M379.597 656.961H441.4" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M431.526 557.83L441.4 548.319V519.055" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M678.008 197.884H604.137" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M608.525 265.191L567.201 306.526" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M47.9062 493.084L99.1043 442.238" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M408.487 307.258H428.601" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M682.031 550.514L635.587 504.058H564.275L502.838 442.969H438.109L378.134 502.96V598.068" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M305.36 452.114L255.259 502.594" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M441.4 36.5671V65.4652L311.942 194.592H255.625L207.718 242.512" stroke="#D4D4D8" stroke-miterlimit="10"/>
+<path d="M325.473 242.146L369.722 197.884H467.364" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M721.161 442.238H657.895" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M78.9912 197.884H106.419L145.183 159.11V115.945" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M97.2764 275.434L167.857 204.834" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M438.475 143.746L502.472 80.0971V53.028" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M538.311 182.155L469.193 113.385" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M197.112 79.7313V113.019H254.527" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M378.5 31.0801V128.383" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M281.589 139.356L254.527 111.922V53.028" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M255.624 194.592L228.928 167.889" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M315.6 36.5671V84.4867" stroke="#A1A1AA" stroke-miterlimit="10"/>
+<path d="M35.8379 442.238H118.486" stroke="#A1A1AA" stroke-miterlimit="10"/>
+</g>
+</svg>
diff --git a/apps/www/public/patterns/tech-stacks.svg b/apps/www/public/patterns/tech-stacks.svg
new file mode 100644
index 0000000..aa62586
--- /dev/null
+++ b/apps/www/public/patterns/tech-stacks.svg
@@ -0,0 +1,74 @@
+<svg width="1110" height="655" viewBox="0 0 1110 655" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9479 722.156V-67ZM61.2812 722.156V-67ZM110.615 722.156V-67ZM159.948 722.156V-67ZM209.281 722.156V-67ZM258.615 722.156V-67ZM307.948 722.156V-67ZM357.281 722.156V-67ZM406.615 722.156V-67ZM455.948 722.156V-67ZM505.281 722.156V-67ZM554.615 722.156V-67ZM603.948 722.156V-67ZM653.281 722.156V-67ZM702.615 722.156V-67ZM751.948 722.156V-67ZM801.281 722.156V-67ZM850.615 722.156V-67ZM899.948 722.156V-67ZM949.281 722.156V-67ZM998.615 722.156V-67ZM1047.95 722.156V-67ZM1097.28 722.156V-67ZM0 -42.7242H1110ZM0 6.59806H1110ZM0 55.9203H1110ZM0 105.243H1110ZM0 154.565H1110ZM0 203.887H1110ZM0 253.209H1110ZM0 302.532H1110ZM0 351.854H1110ZM0 401.176H1110ZM0 450.498H1110ZM0 499.821H1110ZM0 549.143H1110ZM0 598.465H1110ZM0 647.787H1110ZM0 697.11H1110Z" fill="black"/>
+<path d="M11.9479 722.156V-67M61.2812 722.156V-67M110.615 722.156V-67M159.948 722.156V-67M209.281 722.156V-67M258.615 722.156V-67M307.948 722.156V-67M357.281 722.156V-67M406.615 722.156V-67M455.948 722.156V-67M505.281 722.156V-67M554.615 722.156V-67M603.948 722.156V-67M653.281 722.156V-67M702.615 722.156V-67M751.948 722.156V-67M801.281 722.156V-67M850.615 722.156V-67M899.948 722.156V-67M949.281 722.156V-67M998.615 722.156V-67M1047.95 722.156V-67M1097.28 722.156V-67M0 -42.7242H1110M0 6.59806H1110M0 55.9203H1110M0 105.243H1110M0 154.565H1110M0 203.887H1110M0 253.209H1110M0 302.532H1110M0 351.854H1110M0 401.176H1110M0 450.498H1110M0 499.821H1110M0 549.143H1110M0 598.465H1110M0 647.787H1110M0 697.11H1110" stroke="#E4E4E7"/>
+<path d="M209.667 56.3057H258.229V104.857H209.667V56.3057Z" fill="#FAFAFA"/>
+<path d="M900.333 549.528H948.896V598.08H900.333V549.528Z" fill="#FAFAFA"/>
+<path d="M407 6.9834H455.563V55.535H407V6.9834Z" fill="#FAFAFA"/>
+<path d="M851 56.3057H899.563V104.857H851V56.3057Z" fill="#FAFAFA"/>
+<path d="M949.667 204.272H998.229V252.824H949.667V204.272Z" fill="#FAFAFA"/>
+<path d="M801.667 450.884H850.229V499.435H801.667V450.884Z" fill="#FAFAFA"/>
+<path d="M821.229 476.851C820.184 477.147 819.498 477.668 819.046 478.187C819.479 477.809 820.059 477.461 820.84 477.24C821.64 477.013 822.322 477.015 822.886 477.123L822.886 476.683C822.405 476.639 821.854 476.674 821.229 476.851ZM818.999 473.146L815.117 474.168C815.117 474.168 815.188 474.268 815.319 474.402L818.61 473.534C818.61 473.534 818.563 474.135 818.158 474.673C818.924 474.093 818.999 473.146 818.999 473.146ZM822.248 482.268C816.785 483.74 813.895 477.409 813.02 474.123C812.616 472.606 812.439 471.458 812.392 470.716C812.387 470.639 812.39 470.575 812.395 470.515C812.112 470.532 811.976 470.68 812.004 471.105C812.051 471.846 812.227 472.995 812.631 474.512C813.506 477.797 816.396 484.128 821.859 482.657C823.048 482.336 823.941 481.753 824.612 481.008C823.994 481.566 823.22 482.006 822.248 482.268ZM823.274 469.271L823.274 469.66L825.417 469.66C825.373 469.522 825.329 469.398 825.285 469.271L823.274 469.271Z" fill="#E4E4E7"/>
+<path d="M825.895 472.473C826.858 472.747 827.368 473.422 827.637 474.02L828.712 474.325C828.712 474.325 828.565 472.233 826.673 471.695C824.902 471.192 823.812 472.679 823.68 472.871C824.195 472.504 824.947 472.204 825.895 472.473ZM834.447 474.03C832.675 473.524 831.586 475.014 831.455 475.204C831.971 474.837 832.723 474.537 833.67 474.807C834.632 475.081 835.141 475.756 835.411 476.354L836.487 476.661C836.487 476.661 836.338 474.568 834.447 474.03ZM833.38 479.547L824.442 477.048C824.442 477.048 824.539 477.539 824.91 478.174L832.435 480.278C833.055 479.919 833.38 479.547 833.38 479.547ZM827.183 484.925C820.106 483.028 820.962 474.011 822.107 469.738C822.579 467.977 823.063 466.668 823.465 465.791C823.225 465.741 823.027 465.868 822.83 466.267C822.404 467.133 821.858 468.542 821.33 470.515C820.185 474.788 819.329 483.805 826.406 485.702C829.742 486.596 832.34 485.238 834.277 483.105C832.438 484.77 830.091 485.704 827.183 484.925Z" fill="#E4E4E7"/>
+<path d="M823.274 480.155L823.274 478.336L818.218 479.769C818.218 479.769 818.592 477.599 821.229 476.851C822.028 476.624 822.71 476.626 823.274 476.735L823.274 469.271L825.805 469.271C825.53 468.419 825.263 467.764 825.039 467.308C824.669 466.554 824.289 467.054 823.427 467.775C822.82 468.282 821.285 469.364 818.976 469.987C816.666 470.609 814.799 470.444 814.02 470.309C812.916 470.119 812.338 469.876 812.392 470.716C812.439 471.457 812.616 472.606 813.02 474.123C813.895 477.409 816.785 483.739 822.248 482.268C823.675 481.883 824.682 481.124 825.38 480.155L823.274 480.155L823.274 480.155ZM815.116 474.168L818.998 473.146C818.998 473.146 818.885 474.639 817.43 475.023C815.974 475.406 815.116 474.168 815.116 474.168Z" fill="#E4E4E7"/>
+<path d="M837.884 469.357C836.875 469.534 834.454 469.755 831.462 468.953C828.47 468.151 826.484 466.75 825.697 466.091C824.582 465.157 824.092 464.507 823.609 465.489C823.182 466.355 822.636 467.765 822.108 469.738C820.963 474.011 820.108 483.028 827.184 484.925C834.259 486.821 838.026 478.584 839.171 474.311C839.699 472.338 839.931 470.844 839.994 469.881C840.067 468.79 839.318 469.106 837.884 469.357ZM823.666 472.893C823.666 472.893 824.782 471.158 826.673 471.696C828.566 472.233 828.712 474.326 828.712 474.326L823.666 472.893ZM828.283 480.676C824.956 479.701 824.443 477.048 824.443 477.048L833.381 479.547C833.381 479.547 831.577 481.638 828.283 480.676ZM831.443 475.224C831.443 475.224 832.557 473.49 834.448 474.029C836.339 474.568 836.488 476.66 836.488 476.66L831.443 475.224Z" fill="#D4D4D8"/>
+<path d="M821.508 478.837L818.219 479.769C818.219 479.769 818.576 477.734 820.999 476.927L819.136 469.938L818.976 469.987C816.666 470.61 814.799 470.444 814.02 470.31C812.916 470.119 812.338 469.877 812.392 470.717C812.439 471.457 812.616 472.606 813.02 474.123C813.895 477.409 816.785 483.739 822.248 482.268L822.409 482.218L821.508 478.837ZM815.116 474.168L818.998 473.146C818.998 473.146 818.885 474.639 817.43 475.023C815.974 475.406 815.116 474.168 815.116 474.168Z" fill="#D4D4D8"/>
+<path d="M828.434 480.712L828.283 480.676C824.956 479.701 824.443 477.048 824.443 477.048L829.052 478.336L831.492 468.961L831.462 468.953C828.469 468.151 826.484 466.75 825.697 466.091C824.582 465.157 824.091 464.507 823.608 465.489C823.182 466.355 822.636 467.765 822.108 469.738C820.963 474.011 820.108 483.028 827.184 484.925L827.329 484.958L828.434 480.712ZM823.666 472.893C823.666 472.893 824.782 471.158 826.673 471.696C828.566 472.233 828.712 474.326 828.712 474.326L823.666 472.893Z" fill="#A1A1AA"/>
+<path d="M821.676 478.789L820.794 479.039C821.002 480.214 821.369 481.341 821.946 482.337C822.046 482.315 822.146 482.296 822.248 482.268C822.516 482.196 822.764 482.106 823.003 482.009C822.359 481.053 821.933 479.952 821.676 478.789ZM821.331 470.515C820.878 472.207 820.473 474.642 820.584 477.084C820.784 476.998 820.995 476.917 821.229 476.85L821.393 476.814C821.194 474.205 821.624 471.547 822.109 469.738C822.232 469.28 822.355 468.855 822.478 468.458C822.28 468.584 822.067 468.713 821.824 468.846C821.661 469.351 821.495 469.903 821.331 470.515Z" fill="#A1A1AA"/>
+<path d="M555 451H603.563V499.552H555V451Z" fill="#FAFAFA"/>
+<g clip-path="url(#clip0_1000_1725)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M578.967 465C572.903 465 568 469.939 568 476.049C568 480.933 571.141 485.067 575.499 486.53C576.044 486.64 576.243 486.292 576.243 486C576.243 485.744 576.226 484.866 576.226 483.951C573.175 484.61 572.539 482.634 572.539 482.634C572.049 481.353 571.323 481.024 571.323 481.024C570.324 480.347 571.395 480.347 571.395 480.347C572.503 480.421 573.084 481.482 573.084 481.482C574.065 483.164 575.644 482.689 576.28 482.396C576.371 481.683 576.661 481.189 576.97 480.915C574.537 480.658 571.977 479.707 571.977 475.463C571.977 474.256 572.412 473.268 573.102 472.5C572.993 472.226 572.612 471.091 573.211 469.573C573.211 469.573 574.137 469.28 576.225 470.707C577.119 470.465 578.041 470.342 578.967 470.341C579.893 470.341 580.837 470.469 581.709 470.707C583.797 469.28 584.723 469.573 584.723 469.573C585.323 471.091 584.941 472.226 584.832 472.5C585.54 473.268 585.958 474.256 585.958 475.463C585.958 479.707 583.398 480.64 580.946 480.915C581.346 481.262 581.691 481.92 581.691 482.963C581.691 484.445 581.673 485.634 581.673 486C581.673 486.292 581.873 486.64 582.417 486.53C586.775 485.067 589.916 480.933 589.916 476.049C589.934 469.939 585.014 465 578.967 465Z" fill="#A1A1AA"/>
+</g>
+<path d="M653.602 549.6H702.164V598.151H653.602V549.6Z" fill="#FAFAFA"/>
+<path d="M678 564L689 583.053L667 583.053L678 564Z" fill="#A1A1AA"/>
+<path d="M259 302.917H307.563V351.469H259V302.917Z" fill="#FAFAFA"/>
+<g clip-path="url(#clip1_1000_1725)">
+<path d="M286.155 317L283.5 321.85L280.844 317L272 317L283.5 338L294.999 317L286.155 317Z" fill="#A1A1AA"/>
+<path d="M286.154 317L283.498 321.85L280.843 317L276.599 317L283.498 329.6L290.398 317L286.154 317Z" fill="#D4D4D8"/>
+</g>
+<path d="M160.333 549.528H208.896V598.08H160.333V549.528Z" fill="#FAFAFA"/>
+<path d="M357.667 500.206H406.229V548.758H357.667V500.206Z" fill="#FAFAFA"/>
+<g clip-path="url(#clip2_1000_1725)">
+<path d="M383.531 535.423C382.924 536.188 381.692 535.769 381.678 534.792L381.464 520.509L391.068 520.509C392.808 520.509 393.778 522.518 392.696 523.88L383.531 535.423Z" fill="url(#paint0_linear_1000_1725)"/>
+<path d="M383.531 535.423C382.924 536.188 381.692 535.769 381.678 534.792L381.464 520.509L391.068 520.509C392.808 520.509 393.778 522.518 392.696 523.88L383.531 535.423Z" fill="url(#paint1_linear_1000_1725)" fill-opacity="0.2"/>
+<path d="M379.624 512.44C380.232 511.675 381.463 512.094 381.478 513.071L381.572 527.354L372.088 527.354C370.348 527.354 369.378 525.345 370.46 523.982L379.624 512.44Z" fill="#AAAAB2"/>
+</g>
+<path d="M259 105.628H307.563V154.18H259V105.628Z" fill="#FAFAFA"/>
+<path d="M752.333 154.18H800.896V202.731H752.333V154.18Z" fill="#FAFAFA"/>
+<path d="M555 598.851H603.563V647.402H555V598.851Z" fill="#FAFAFA"/>
+<path d="M949.667 302.917H998.229V351.469H949.667V302.917Z" fill="#FAFAFA"/>
+<g clip-path="url(#clip3_1000_1725)">
+<path d="M985.818 327.002C985.818 325.491 983.925 324.058 981.022 323.17C981.692 320.212 981.395 317.859 980.083 317.105C979.781 316.928 979.427 316.845 979.041 316.845V317.882C979.255 317.882 979.427 317.924 979.571 318.003C980.204 318.365 980.478 319.747 980.264 321.523C980.213 321.961 980.129 322.421 980.027 322.891C979.116 322.668 978.12 322.496 977.074 322.384C976.446 321.523 975.795 320.742 975.139 320.058C976.655 318.649 978.078 317.877 979.046 317.877V316.84C977.767 316.84 976.092 317.752 974.399 319.333C972.707 317.761 971.032 316.859 969.753 316.859V317.896C970.716 317.896 972.144 318.663 973.66 320.063C973.009 320.747 972.358 321.523 971.739 322.384C970.688 322.496 969.693 322.668 968.781 322.896C968.674 322.43 968.595 321.979 968.539 321.547C968.321 319.77 968.59 318.389 969.218 318.021C969.358 317.938 969.539 317.9 969.753 317.9V316.863C969.363 316.863 969.009 316.947 968.702 317.124C967.395 317.877 967.102 320.226 967.777 323.175C964.884 324.068 963 325.495 963 327.002C963 328.514 964.893 329.946 967.795 330.835C967.125 333.793 967.423 336.146 968.735 336.9C969.037 337.076 969.39 337.16 969.781 337.16C971.06 337.16 972.734 336.248 974.427 334.667C976.12 336.239 977.795 337.141 979.074 337.141C979.464 337.141 979.818 337.058 980.125 336.881C981.432 336.127 981.725 333.779 981.05 330.83C983.934 329.942 985.818 328.509 985.818 327.002ZM979.762 323.9C979.59 324.5 979.376 325.119 979.134 325.737C978.943 325.365 978.743 324.993 978.525 324.621C978.311 324.249 978.083 323.886 977.855 323.533C978.516 323.63 979.153 323.751 979.762 323.9ZM977.632 328.853C977.269 329.481 976.897 330.077 976.511 330.63C975.818 330.691 975.116 330.723 974.409 330.723C973.707 330.723 973.004 330.691 972.316 330.635C971.93 330.081 971.553 329.491 971.19 328.867C970.837 328.258 970.516 327.639 970.223 327.016C970.511 326.393 970.837 325.77 971.186 325.161C971.548 324.533 971.921 323.937 972.307 323.384C973 323.323 973.702 323.291 974.409 323.291C975.111 323.291 975.813 323.323 976.502 323.379C976.888 323.933 977.264 324.523 977.627 325.147C977.981 325.756 978.302 326.374 978.595 326.998C978.302 327.621 977.981 328.244 977.632 328.853ZM979.134 328.249C979.385 328.872 979.599 329.495 979.776 330.1C979.167 330.249 978.525 330.374 977.86 330.472C978.088 330.114 978.316 329.746 978.53 329.37C978.743 328.998 978.943 328.621 979.134 328.249ZM974.418 333.211C973.986 332.765 973.553 332.267 973.125 331.723C973.544 331.742 973.972 331.756 974.404 331.756C974.841 331.756 975.274 331.746 975.697 331.723C975.279 332.267 974.846 332.765 974.418 333.211ZM970.958 330.472C970.297 330.374 969.66 330.253 969.051 330.104C969.223 329.505 969.437 328.886 969.679 328.267C969.869 328.639 970.069 329.012 970.288 329.384C970.507 329.756 970.73 330.118 970.958 330.472ZM974.395 320.793C974.827 321.24 975.26 321.737 975.688 322.282C975.269 322.263 974.841 322.249 974.409 322.249C973.972 322.249 973.539 322.258 973.116 322.282C973.534 321.737 973.967 321.24 974.395 320.793ZM970.953 323.533C970.725 323.891 970.497 324.258 970.283 324.635C970.069 325.007 969.869 325.379 969.679 325.751C969.428 325.128 969.214 324.505 969.037 323.9C969.646 323.756 970.288 323.63 970.953 323.533ZM966.744 329.356C965.098 328.653 964.033 327.733 964.033 327.002C964.033 326.272 965.098 325.347 966.744 324.649C967.144 324.477 967.581 324.323 968.032 324.179C968.297 325.091 968.646 326.04 969.079 327.012C968.651 327.979 968.307 328.923 968.046 329.83C967.586 329.686 967.149 329.528 966.744 329.356ZM969.246 336.002C968.614 335.639 968.339 334.258 968.553 332.481C968.604 332.044 968.688 331.584 968.79 331.114C969.702 331.337 970.697 331.509 971.744 331.621C972.372 332.481 973.023 333.262 973.679 333.946C972.162 335.355 970.739 336.127 969.772 336.127C969.563 336.123 969.386 336.081 969.246 336.002ZM980.278 332.458C980.497 334.235 980.227 335.616 979.599 335.983C979.46 336.067 979.278 336.104 979.064 336.104C978.102 336.104 976.674 335.337 975.158 333.937C975.809 333.253 976.46 332.476 977.078 331.616C978.13 331.504 979.125 331.332 980.036 331.104C980.143 331.574 980.227 332.025 980.278 332.458ZM982.069 329.356C981.669 329.528 981.232 329.681 980.781 329.825C980.516 328.914 980.167 327.965 979.734 326.993C980.162 326.026 980.506 325.081 980.767 324.175C981.227 324.319 981.664 324.477 982.074 324.649C983.72 325.351 984.785 326.272 984.785 327.002C984.78 327.733 983.715 328.658 982.069 329.356Z" fill="#A1A1AA"/>
+<path d="M974.404 329.128C975.578 329.128 976.529 328.176 976.529 327.002C976.529 325.828 975.578 324.877 974.404 324.877C973.23 324.877 972.278 325.828 972.278 327.002C972.278 328.176 973.23 329.128 974.404 329.128Z" fill="#A1A1AA"/>
+</g>
+<path d="M900.333 352.239H948.896V400.791H900.333V352.239Z" fill="#FAFAFA"/>
+<path d="M604.333 105.628H652.896V154.18H604.333V105.628Z" fill="#FAFAFA"/>
+<path d="M160.333 204.272H208.896V252.824H160.333V204.272Z" fill="#FAFAFA"/>
+<path d="M209.667 401.562H258.229V450.113H209.667V401.562Z" fill="#FAFAFA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234 419C230.8 419 228.8 420.591 228 423.772C229.2 422.181 230.6 421.585 232.2 421.982C233.113 422.209 233.766 422.867 234.487 423.596C235.664 424.783 237.026 426.157 240 426.157C243.2 426.157 245.2 424.566 246 421.386C244.8 422.976 243.4 423.573 241.8 423.175C240.887 422.948 240.234 422.29 239.512 421.561C238.336 420.373 236.974 419 234 419ZM228 426.157C224.8 426.157 222.8 427.747 222 430.928C223.2 429.338 224.6 428.741 226.2 429.139C227.113 429.366 227.766 430.024 228.488 430.753C229.664 431.94 231.026 433.314 234 433.314C237.2 433.314 239.2 431.724 240 428.543C238.8 430.133 237.4 430.729 235.8 430.332C234.887 430.105 234.234 429.446 233.513 428.718C232.336 427.531 230.974 426.157 228 426.157Z" fill="#A1A1AA"/>
+<path d="M111 302.917H159.563V351.469H111V302.917Z" fill="#FAFAFA"/>
+<path d="M653.667 -42.3389H702.229V6.21273H653.667V-42.3389Z" fill="#FAFAFA"/>
+<path d="M407 204.272H455.563V252.824H407V204.272Z" fill="#FAFAFA"/>
+<path d="M703 302.917H751.563V351.469H703V302.917Z" fill="#FAFAFA"/>
+<defs>
+<linearGradient id="paint0_linear_1000_1725" x1="381.464" y1="523.676" x2="390" y2="527.256" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AAAAB2"/>
+<stop offset="1" stop-color="#E6E6E6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1000_1725" x1="377.68" y1="518.494" x2="381.572" y2="525.822" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_1000_1725">
+<rect width="22" height="21.551" fill="white" transform="translate(568 465)"/>
+</clipPath>
+<clipPath id="clip1_1000_1725">
+<rect width="23" height="21" fill="white" transform="translate(272 317)"/>
+</clipPath>
+<clipPath id="clip2_1000_1725">
+<rect width="23.1504" height="24" fill="white" transform="translate(370 512)"/>
+</clipPath>
+<clipPath id="clip3_1000_1725">
+<rect width="22.8176" height="26" fill="white" transform="translate(963 314)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/assets/styles/main.css b/packages/assets/styles/main.css
index ca11b1b..9ffd6ce 100644
--- a/packages/assets/styles/main.css
+++ b/packages/assets/styles/main.css
@@ -36,6 +36,12 @@
   }
 }
 
+@layer base {
+  .link {
+    @apply font-bold text-zinc-950 border-b border-pink-500 hover:border-b-[2px];
+  }
+}
+
 
 
 body {
diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
index cc8246c..a03f32c 100644
--- a/packages/ui/.eslintrc.js
+++ b/packages/ui/.eslintrc.js
@@ -1,8 +1,4 @@
 module.exports = {
   root: true,
-  extends: [
-    "../../apps/app/.nuxt/.eslint.globals.json",
-    "../../apps/www/.nuxt/.eslint.globals.json",
-    "custom",
-  ],
+  extends: ["custom", "../../apps/app/.eslintrc.js"],
 };
diff --git a/packages/ui/src/atoms/MButton.vue b/packages/ui/src/atoms/MButton.vue
index 8ec3d10..485c62a 100644
--- a/packages/ui/src/atoms/MButton.vue
+++ b/packages/ui/src/atoms/MButton.vue
@@ -31,7 +31,7 @@ const variants: Record<Variant, string> = {
 const sizes: Record<Size, string> = {
   sm: "px-3 py-[8px] text-sm leading-[19px]",
   base: "px-5 py-[9.5px] text-sm leading-[19px]",
-  lg: "px-5 py-[13.5px] text-base leading-[23px]",
+  lg: "px-5 py-[11.5px] text-base leading-[23px]",
 };
 </script>
 
diff --git a/packages/ui/src/atoms/MDropzone.vue b/packages/ui/src/atoms/MDropzone.vue
index a526439..47b10be 100644
--- a/packages/ui/src/atoms/MDropzone.vue
+++ b/packages/ui/src/atoms/MDropzone.vue
@@ -20,7 +20,10 @@ const isDragging = ref(false);
 type dropzoneFile = File & { loading: boolean; accepted: boolean };
 
 function onInput(event: Event) {
-  onChange((event.target as HTMLInputElement).files);
+  const allFiles = (event.target as HTMLInputElement).files as FileList;
+
+  const files: File[] = Array.from(allFiles);
+  onChange(files as dropzoneFile[]);
 }
 
 function onChange(files: dropzoneFile[]) {
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index d86e5b4..a9b3000 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,4 +1,16 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": ["../../apps/app/.nuxt/tsconfig.json"],
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "jsx": "preserve",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "typeRoots": ["types"]
+  },
+  "vueCompilerOptions": {
+    "target": 3.3
+  }
 }
\ No newline at end of file
diff --git a/packages/ui/types/vue.d.ts b/packages/ui/types/vue.d.ts
new file mode 100644
index 0000000..ec7a72d
--- /dev/null
+++ b/packages/ui/types/vue.d.ts
@@ -0,0 +1,89 @@
+/* eslint-disable no-unused-vars */
+
+export {};
+
+declare global {
+  const withCtx: typeof import("vue")["withCtx"];
+  const withDirectives: typeof import("vue")["withDirectives"];
+  const withKeys: typeof import("vue")["withKeys"];
+  const withMemo: typeof import("vue")["withMemo"];
+  const withModifiers: typeof import("vue")["withModifiers"];
+  const withScopeId: typeof import("vue")["withScopeId"];
+  const onActivated: typeof import("vue")["onActivated"];
+  const onBeforeMount: typeof import("vue")["onBeforeMount"];
+  const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"];
+  const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"];
+  const onDeactivated: typeof import("vue")["onDeactivated"];
+  const onErrorCaptured: typeof import("vue")["onErrorCaptured"];
+  const onMounted: typeof import("vue")["onMounted"];
+  const onRenderTracked: typeof import("vue")["onRenderTracked"];
+  const onRenderTriggered: typeof import("vue")["onRenderTriggered"];
+  const onServerPrefetch: typeof import("vue")["onServerPrefetch"];
+  const onUnmounted: typeof import("vue")["onUnmounted"];
+  const onUpdated: typeof import("vue")["onUpdated"];
+  const computed: typeof import("vue")["computed"];
+  const customRef: typeof import("vue")["customRef"];
+  const isProxy: typeof import("vue")["isProxy"];
+  const isReactive: typeof import("vue")["isReactive"];
+  const isReadonly: typeof import("vue")["isReadonly"];
+  const isRef: typeof import("vue")["isRef"];
+  const markRaw: typeof import("vue")["markRaw"];
+  const proxyRefs: typeof import("vue")["proxyRefs"];
+  const reactive: typeof import("vue")["reactive"];
+  const readonly: typeof import("vue")["readonly"];
+  const ref: typeof import("vue")["ref"];
+  const shallowReactive: typeof import("vue")["shallowReactive"];
+  const shallowReadonly: typeof import("vue")["shallowReadonly"];
+  const shallowRef: typeof import("vue")["shallowRef"];
+  const toRaw: typeof import("vue")["toRaw"];
+  const toRef: typeof import("vue")["toRef"];
+  const toRefs: typeof import("vue")["toRefs"];
+  const triggerRef: typeof import("vue")["triggerRef"];
+  const unref: typeof import("vue")["unref"];
+  const watch: typeof import("vue")["watch"];
+  const watchEffect: typeof import("vue")["watchEffect"];
+  const watchPostEffect: typeof import("vue")["watchPostEffect"];
+  const watchSyncEffect: typeof import("vue")["watchSyncEffect"];
+  const isShallow: typeof import("vue")["isShallow"];
+  const effect: typeof import("vue")["effect"];
+  const effectScope: typeof import("vue")["effectScope"];
+  const getCurrentScope: typeof import("vue")["getCurrentScope"];
+  const onScopeDispose: typeof import("vue")["onScopeDispose"];
+  const defineComponent: typeof import("vue")["defineComponent"];
+  const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"];
+  const resolveComponent: typeof import("vue")["resolveComponent"];
+  const getCurrentInstance: typeof import("vue")["getCurrentInstance"];
+  const h: typeof import("vue")["h"];
+  const inject: typeof import("vue")["inject"];
+  const hasInjectionContext: typeof import("vue")["hasInjectionContext"];
+  const nextTick: typeof import("vue")["nextTick"];
+  const provide: typeof import("vue")["provide"];
+  // const defineModel: typeof import('vue')['defineModel']
+  // const defineOptions: typeof import('vue')['defineOptions']
+  // const defineSlots: typeof import('vue')['defineSlots']
+  const toValue: typeof import("vue")["toValue"];
+  const useModel: typeof import("vue")["useModel"];
+  const useAttrs: typeof import("vue")["useAttrs"];
+  const useCssModule: typeof import("vue")["useCssModule"];
+  const useCssVars: typeof import("vue")["useCssVars"];
+  const useSlots: typeof import("vue")["useSlots"];
+  const useTransitionState: typeof import("vue")["useTransitionState"];
+}
+
+// @ts-ignore
+declare global {
+  // @ts-ignore
+  export type {
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    ExtractPropTypes,
+    ExtractPublicPropTypes,
+    InjectionKey,
+    PropType,
+    Ref,
+    MaybeRef,
+    MaybeRefOrGetter,
+    VNode,
+  } from "../../../node_modules/vue";
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 046b291..fb24b88 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,6 +154,9 @@ importers:
       eslint-config-custom:
         specifier: workspace:*
         version: link:../../packages/eslint-config-custom
+      floating-vue:
+        specifier: 2.0.0-beta.24
+        version: 2.0.0-beta.24(vue@3.3.4)
       humps:
         specifier: ^2.0.1
         version: 2.0.1