diff --git a/backend/src/main/java/io/papermc/hangar/service/internal/SitemapService.java b/backend/src/main/java/io/papermc/hangar/service/internal/SitemapService.java
index 4728fa751..a332eff4f 100644
--- a/backend/src/main/java/io/papermc/hangar/service/internal/SitemapService.java
+++ b/backend/src/main/java/io/papermc/hangar/service/internal/SitemapService.java
@@ -48,6 +48,9 @@ public String getSitemap() {
     public String getGlobalSitemap() {
         return SitemapGenerator.of(this.config.getBaseUrl())
             .addPage(WebPage.builder().name("").changeFreq(ChangeFreq.HOURLY).build())
+            .addPage(WebPage.builder().name("paper").changeFreq(ChangeFreq.HOURLY).build())
+            .addPage(WebPage.builder().name("waterfall").changeFreq(ChangeFreq.HOURLY).build())
+            .addPage(WebPage.builder().name("velocity").changeFreq(ChangeFreq.HOURLY).build())
             .addPage(WebPage.builder().name("authors").changeFreq(ChangeFreq.WEEKLY).build())
             .addPage(WebPage.builder().name("staff").changeFreq(ChangeFreq.WEEKLY).build())
             .addPage(WebPage.builder().name("guidelines").changeFreq(ChangeFreq.WEEKLY).build())
diff --git a/frontend/src/components/Homepage.vue b/frontend/src/components/Homepage.vue
new file mode 100644
index 000000000..7a46fc646
--- /dev/null
+++ b/frontend/src/components/Homepage.vue
@@ -0,0 +1,358 @@
+<script lang="ts" setup>
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { Tag } from "~/types/backend";
+import type { Platform, PaginatedResultProject, PlatformVersion } from "~/types/backend";
+
+const props = defineProps<{
+  platform?: Platform;
+  platformName?: string;
+  index?: boolean;
+}>();
+
+const i18n = useI18n();
+const route = useRoute("index");
+const router = useRouter();
+
+const sorters = [
+  { id: "-stars", label: i18n.t("project.sorting.mostStars") },
+  { id: "-recent_downloads", label: i18n.t("project.sorting.recentDownloads") },
+  { id: "-downloads", label: i18n.t("project.sorting.mostDownloads") },
+  { id: "-updated", label: i18n.t("project.sorting.recentlyUpdated") },
+  { id: "-newest", label: i18n.t("project.sorting.newest") },
+];
+
+const toArray = (input: unknown) => (Array.isArray(input) ? input : input ? [input] : []);
+const filters = ref({
+  versions: toArray(route.query.version),
+  categories: toArray(route.query.category),
+  platform: (route.query.platform || undefined) as string | undefined,
+  tags: toArray(route.query.tag),
+});
+
+if (props.platform) {
+  filters.value.platform = props.platform;
+}
+
+const activeSorter = ref<string>((route.query.sort as string) || "-stars");
+const page = ref(route.query.page ? Number(route.query.page) : 0);
+const query = ref<string>((route.query.query as string) || "");
+const projects = ref<PaginatedResultProject | null>();
+
+const requestParams = computed(() => {
+  const limit = 10;
+  const params: Record<string, any> = {
+    limit,
+    offset: page.value * limit,
+    version: filters.value.versions,
+    category: filters.value.categories,
+    platform: filters.value.platform !== null ? [filters.value.platform] : [],
+    tag: filters.value.tags,
+  };
+  if (query.value) {
+    params.query = query.value;
+  }
+  if (activeSorter.value) {
+    params.sort = activeSorter.value;
+  }
+
+  return params;
+});
+const p = await useProjects(requestParams.value);
+if (p && p.value) {
+  projects.value = p.value;
+  await checkOffsetLargerCount();
+}
+
+const projectList = ref();
+function resetPage() {
+  projectList.value.updatePage(0);
+}
+
+watch(filters, resetPage, { deep: true });
+watch(query, resetPage);
+watch(activeSorter, resetPage);
+watchDebounced(
+  requestParams,
+  async () => {
+    // dont want limit in url, its hardcoded in frontend
+    // offset we dont want, we set page instead
+    const { limit, offset, ...paramsWithoutLimit } = requestParams.value;
+    // set the request params
+    await router.replace({ query: { page: page.value, ...paramsWithoutLimit } });
+    // do the update
+    return updateProjects();
+  },
+  { deep: true, debounce: 250 }
+);
+
+async function updateProjects() {
+  projects.value = await useApi<PaginatedResultProject>("projects", "get", requestParams.value);
+  await checkOffsetLargerCount();
+}
+
+// if somebody set page too high, lets reset it back
+async function checkOffsetLargerCount() {
+  if (projects.value && projects.value.pagination?.offset !== 0 && projects.value.pagination?.offset > projects.value.pagination?.count) {
+    page.value = 0;
+    await updateProjects();
+  }
+}
+
+function versions(platform: Platform): PlatformVersion[] {
+  const platformData = useBackendData.platforms?.get(platform);
+  if (!platformData) {
+    return [];
+  }
+
+  return platformData.platformVersions;
+}
+
+function updatePlatform(platform: any) {
+  filters.value.platform = platform;
+
+  const allowedVersion: PlatformVersion[] = versions(platform);
+  filters.value.versions = filters.value.versions.filter((existingVersion) => {
+    return allowedVersion.find((allowedNewVersion) => allowedNewVersion === existingVersion);
+  });
+}
+
+const config = useConfig();
+const pageChangeScrollAnchor = ref<Element>();
+const ssr = import.meta.server;
+
+useHead(
+  useSeo(
+    `Hangar - The best place to download ${!props.index ? props.platformName : "Minecraft"} plugins`,
+    `Hangar allows you to find and download the best ${!props.index ? props.platformName : "Minecraft"} plugins for your Minecraft server`,
+    route,
+    null,
+    [
+      {
+        type: "application/ld+json",
+        children: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "WebSite",
+          url: config.publicHost,
+          potentialAction: {
+            "@type": "SearchAction",
+            target: config.publicHost + "/?q={search_term_string}",
+            "query-input": "required name=search_term_string",
+          },
+        }),
+        key: "website",
+      },
+    ],
+    true
+  )
+);
+</script>
+
+<template>
+  <div>
+    <Container class="flex flex-col items-center gap-4">
+      <template v-if="index">
+        <h1 ref="pageChangeScrollAnchor" class="text-3xl font-bold uppercase text-center mt-4 flex flex-col">
+          <template v-if="ssr">
+            Find your favorite <strong class="highlight bg-gradient-to-r from-primary-500 to-primary-400 text-transparent">Paper</strong> plugins
+          </template>
+          <template v-else>
+            Find your favorite
+            <div class="h-[36px] overflow-hidden relative">
+              <span class="flex flex-col absolute w-full anim">
+                <strong class="highlight bg-gradient-to-r from-primary-500 to-primary-400 text-transparent">Paper</strong>
+                <strong class="highlight bg-gradient-to-r from-primary-500 to-primary-400 text-transparent">Velocity</strong>
+                <strong class="highlight bg-gradient-to-r from-primary-500 to-primary-400 text-transparent">Waterfall</strong>
+              </span>
+            </div>
+            plugins
+          </template>
+        </h1>
+        <div class="text-1xl text-center mb-2">
+          Hangar allows you to find and download the best Paper plugins, Velocity plugins or Waterfall plugins for your Minecraft server
+        </div>
+      </template>
+      <template v-else>
+        <h1 ref="pageChangeScrollAnchor" class="text-3xl font-bold uppercase text-center mt-4">Find your favorite {{ platformName }} plugins</h1>
+        <div class="text-1xl text-center mb-2">Hangar allows you to find and download the best {{ platformName }} plugins for your Minecraft server</div>
+      </template>
+      <div v-if="!index" class="text-center">
+        Looking for more plugins?
+        <div class="flex gap-3 mt-2 mb-2">
+          <Button v-if="platform != 'PAPER'" to="/paper">Download Paper plugins</Button>
+          <Button v-if="platform != 'VELOCITY'" to="/velocity">Download Velocity Plugins</Button>
+          <Button v-if="platform != 'WATERFALL'" to="/waterfall">Download Waterfall plugins</Button>
+        </div>
+      </div>
+      <!-- Search Bar -->
+      <div class="relative rounded-md flex shadow-md w-full max-w-screen-md">
+        <!-- Text Input -->
+        <input
+          v-model="query"
+          name="query"
+          class="rounded-l-md md:rounded-md p-4 basis-full min-w-0 dark:bg-gray-700"
+          type="text"
+          :placeholder="i18n.t('hangar.projectSearch.query', [projects?.pagination.count])"
+        />
+        <div class="md:hidden flex">
+          <Menu>
+            <MenuButton
+              id="sort-button"
+              class="bg-gradient-to-r from-primary-500 to-primary-400 rounded-r-md text-left font-semibold flex items-center gap-2 text-white p-2"
+            >
+              <span class="whitespace-nowrap">{{ i18n.t("hangar.projectSearch.sortBy") }}</span>
+              <icon-mdi-sort-variant class="text-xl pointer-events-none" />
+            </MenuButton>
+            <transition
+              enter-active-class="transition duration-100 ease-out"
+              enter-from-class="transform scale-95 opacity-0"
+              enter-to-class="transform scale-100 opacity-100"
+              leave-active-class="transition duration-75 ease-out"
+              leave-from-class="transform scale-100 opacity-100"
+              leave-to-class="transform scale-95 opacity-0"
+            >
+              <MenuItems
+                class="absolute right-0 top-15 flex flex-col z-10 background-default filter shadow-default drop-shadow-md rounded border-top-primary border-t-3"
+              >
+                <MenuItem v-for="sorter in sorters" :key="sorter.id" v-slot="{ active }">
+                  <button
+                    :class="{
+                      'bg-gray-100 dark:bg-gray-700': active,
+                      'bg-gradient-to-r from-primary-500 to-primary-400 text-white': activeSorter === sorter.id,
+                    }"
+                    class="px-4 py-2 text-left"
+                    @click="activeSorter = sorter.id"
+                  >
+                    {{ sorter.label }}
+                  </button>
+                </MenuItem>
+              </MenuItems>
+            </transition>
+          </Menu>
+        </div>
+      </div>
+      <div class="justify-center inline-flex gap-1 lt-md:hidden">
+        <div v-for="sorter in sorters" :key="sorter.id">
+          <button
+            :class="{ 'bg-gradient-to-r from-primary-500 to-primary-400 text-white': activeSorter === sorter.id }"
+            class="rounded-lg py-2 px-4 hover:(bg-gray-300 dark:bg-gray-700)"
+            @click="activeSorter = sorter.id"
+          >
+            {{ sorter.label }}
+          </button>
+        </div>
+      </div>
+    </Container>
+    <Container lg="flex items-start gap-6">
+      <!-- Projects -->
+      <div v-if="projects" class="w-full min-w-0 mb-5 flex flex-col gap-2 lg:mb-0">
+        <h2 class="font-bold text-2xl mb-2">Projects</h2>
+        <ProjectList ref="projectList" :projects="projects" :reset-anchor="pageChangeScrollAnchor" @update:page="(newPage) => (page = newPage)" />
+      </div>
+      <!-- Sidebar -->
+      <Card accent class="min-w-300px flex flex-col gap-4">
+        <h2 class="font-bold text-xl">Filters</h2>
+        <div v-if="!platform" class="platforms">
+          <h3 class="font-bold mb-1">
+            {{ i18n.t("hangar.projectSearch.platforms") }}
+            <span
+              v-if="filters.platform"
+              class="font-normal text-sm hover:(underline) text-gray-600 dark:text-gray-400"
+              cursor="pointer"
+              @click="filters.platform = undefined"
+            >
+              {{ i18n.t("hangar.projectSearch.clear") }}
+            </span>
+          </h3>
+          <div class="flex flex-col gap-1">
+            <ul>
+              <li v-for="platform in useVisiblePlatforms" :key="platform.enumName" class="inline-flex w-full">
+                <InputRadio :label="platform.name" :model-value="filters.platform" :value="platform.enumName" @update:model-value="updatePlatform">
+                  <PlatformLogo :platform="platform.enumName" :size="24" class="mr-1" />
+                </InputRadio>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div v-if="filters.platform" class="versions">
+          <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.versions." + filters.platform) }}</h3>
+          <div class="max-h-40 overflow-auto">
+            <VersionSelector v-model="filters.versions" :versions="versions(filters.platform)" :open="false" col />
+          </div>
+        </div>
+        <div class="tags">
+          <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.tags") }}</h3>
+          <div class="flex flex-col gap-1">
+            <InputCheckbox v-for="tag in Object.values(Tag)" :key="tag" v-model="filters.tags" :value="tag">
+              <template #label>
+                <IconMdiPuzzleOutline v-if="tag === Tag.ADDON" />
+                <IconMdiBookshelf v-else-if="tag === Tag.LIBRARY" />
+                <IconMdiLeaf v-else-if="tag === Tag.SUPPORTS_FOLIA" />
+                <span class="ml-1">{{ i18n.t("project.settings.tags." + tag + ".title") }}</span>
+              </template>
+            </InputCheckbox>
+          </div>
+        </div>
+        <div class="categories">
+          <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.categories") }}</h3>
+          <div class="flex flex-col gap-1">
+            <InputCheckbox
+              v-for="category in useVisibleCategories"
+              :key="category.apiName"
+              v-model="filters.categories"
+              :value="category.apiName"
+              :label="i18n.t(category.title)"
+            >
+              <CategoryLogo :category="category.apiName" :size="22" class="mr-1" />
+            </InputCheckbox>
+          </div>
+        </div>
+      </Card>
+    </Container>
+    <h2 class="text-2xl font-bold mt-8">Frequently asked Questions about Hangar (FAQ)</h2>
+    <Card class="mt-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
+      <h3 class="text-lg font-bold mb-1" itemprop="name">What is Hangar?</h3>
+      <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+        <div itemprop="text">
+          Hangar is the best place to download {{ platformName }} plugins. Created by the <Link href="https://papermc.io/team">PaperMC Team</Link>, we took
+          great care that you can find the newest and best {{ platformName }} plugins.
+        </div>
+      </div>
+    </Card>
+    <Card class="mt-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
+      <h3 class="text-lg font-bold mb-1" itemprop="name">How do I download {{ platformName }} plugins from Hangar?</h3>
+      <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+        <div itemprop="text">
+          To download {{ platformName }} plugins, simply use the search on this page to find the plugin you are looking for and download the
+          {{ platformName }} plugin from the resource page.
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.anim {
+  animation: anim 5s infinite;
+}
+.highlight {
+  background-clip: text;
+}
+
+@keyframes anim {
+  0%,
+  30% {
+    top: 0;
+  }
+  40%,
+  60% {
+    top: -36px;
+  }
+  70%,
+  90% {
+    top: -72px;
+  }
+  100% {
+    top: 0;
+  }
+}
+</style>
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
index 7e64074fb..c6e5fa89b 100644
--- a/frontend/src/components/layout/Footer.vue
+++ b/frontend/src/components/layout/Footer.vue
@@ -5,7 +5,7 @@ const { t } = useI18n();
 <template>
   <footer class="relative mt-10 py-1 background-default text-light-10">
     <div class="mt-3 mb-3 max-w-screen-xl mx-auto px-4">
-      <div class="flex flex-wrap flex-row-reverse flex-grow-1 gap-4 justify-around items-center text-sm">
+      <div class="flex flex-wrap flex-col gap-4 justify-around items-center text-sm">
         <div class="flex flex-row flex-wrap justify-center">
           <a
             href="https://github.com/HangarMC"
@@ -38,6 +38,11 @@ const { t } = useI18n();
             {{ t("hangar.footer.legalNotice") }}
           </NuxtLink>
         </div>
+        <div class="flex flex-row flex-wrap justify-center gap-2">
+          <Link to="/paper">Download Paper Plugins</Link>
+          <Link to="/velocity">Download Velocity Plugins</Link>
+          <Link to="/waterfall">Download Waterfall Plugins</Link>
+        </div>
         <div class="flex flex-grow-1 lt-md:justify-center">
           <p class="font-bold">© {{ new Date().getFullYear() }} <a href="https://papermc.io/">PaperMC</a></p>
         </div>
diff --git a/frontend/src/components/modals/Modal.vue b/frontend/src/components/modals/Modal.vue
index bb3ecae7c..281784e6b 100644
--- a/frontend/src/components/modals/Modal.vue
+++ b/frontend/src/components/modals/Modal.vue
@@ -60,7 +60,7 @@ defineExpose({
       <button data-close @click="close">
         <IconMdiClose class="cursor-pointer mr-1" />
       </button>
-      <h2 class="font-bold">{{ props.title }}</h2>
+      <div class="font-bold">{{ props.title }}</div>
     </div>
     <slot :on="{ click: close }"></slot>
   </dialog>
diff --git a/frontend/src/components/projects/MemberList.vue b/frontend/src/components/projects/MemberList.vue
index 4ff239732..06d552228 100644
--- a/frontend/src/components/projects/MemberList.vue
+++ b/frontend/src/components/projects/MemberList.vue
@@ -143,7 +143,7 @@ async function doSearch(val?: string) {
   <Card v-if="sortedMembers.length > 0 || canEdit" :class="props.class">
     <template #header>
       <div class="inline-flex w-full flex-cols space-between items-center">
-        <h3>{{ i18n.t("project.members") }}</h3>
+        <h2>{{ i18n.t("project.members") }}</h2>
         <Tooltip v-if="canEdit" class="text-base font-normal">
           <template #content>
             {{ i18n.t("form.memberList.info") }}
diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index d54a8fe4b..659fde5d0 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -24,7 +24,7 @@ defineProps<{
         </div>
         <div class="overflow-clip overflow-hidden min-w-0">
           <div class="inline-flex items-center gap-x-1">
-            <h2>
+            <h3>
               <span class="text-xl font-bold">{{ project.name }}&nbsp;</span>
               <span class="text-sm"> {{ i18n.t("general.by") }}&nbsp;</span>
               <span class="text-sm">
@@ -34,12 +34,12 @@ defineProps<{
                   </Link>
                 </object>
               </span>
-            </h2>
+            </h3>
             <IconMdiCancel v-show="project.visibility === Visibility.SoftDelete" />
             <IconMdiEyeOff v-show="project.visibility !== Visibility.Public" />
           </div>
 
-          <h3 v-if="'description' in project && project.description" class="mb-1">{{ project.description }}</h3>
+          <div v-if="'description' in project && project.description" class="mb-1">{{ project.description }}</div>
           <div class="inline-flex items-center text-gray-500 dark:text-gray-400 lt-sm:hidden">
             <CategoryLogo :category="project.category" :size="16" class="mr-1" />
             {{ i18n.t("project.category." + project.category) }}
diff --git a/frontend/src/components/projects/ProjectInfo.vue b/frontend/src/components/projects/ProjectInfo.vue
index 187d57ee1..e742a539b 100644
--- a/frontend/src/components/projects/ProjectInfo.vue
+++ b/frontend/src/components/projects/ProjectInfo.vue
@@ -11,7 +11,7 @@ const namespace = computed(() => props.project.namespace.owner + "/" + props.pro
 <template>
   <Card>
     <template #header>
-      <h3>{{ i18n.t("project.info.title") }}</h3>
+      <h2>{{ i18n.t("project.info.title") }}</h2>
     </template>
     <template #default>
       <table class="w-full">
diff --git a/frontend/src/components/projects/ProjectPageList.vue b/frontend/src/components/projects/ProjectPageList.vue
index 4cce1e67d..c11fb0a7b 100644
--- a/frontend/src/components/projects/ProjectPageList.vue
+++ b/frontend/src/components/projects/ProjectPageList.vue
@@ -14,7 +14,7 @@ const route = useRoute("user-project");
   <Card>
     <template #header>
       <div class="inline-flex w-full flex-cols space-between">
-        <h3 class="flex-grow">{{ i18n.t("page.plural") }}</h3>
+        <h2 class="flex-grow">{{ i18n.t("page.plural") }}</h2>
         <NewPageModal v-if="hasPerms(NamedPermission.EditPage)" :pages="project.pages" :project-id="project.id" activator-class="mr-2" />
       </div>
     </template>
diff --git a/frontend/src/components/projects/ProjectPageMarkdown.vue b/frontend/src/components/projects/ProjectPageMarkdown.vue
index 274cfcdff..00f20f783 100644
--- a/frontend/src/components/projects/ProjectPageMarkdown.vue
+++ b/frontend/src/components/projects/ProjectPageMarkdown.vue
@@ -12,9 +12,8 @@ const router = useRouter();
 const updateProjectPages = inject<(pages: HangarProjectPage[]) => void>("updateProjectPages");
 
 const { editingPage, changeEditingPage, page, savePage, deletePage } = await useProjectPage(route, router, props.project, props.mainPage);
-if (page) {
-  const title = props.mainPage ? props.project.name : page.value?.name + " | " + props.project.name;
-  useHead(useSeo(title, props.project.description, route, props.project.avatarUrl));
+if (page && !props.mainPage) {
+  useHead(useSeo(page.value?.name + " | " + props.project.name, props.project.description, route, props.project.avatarUrl));
 }
 
 async function deletePageAndUpdateProject() {
diff --git a/frontend/src/composables/useMarked.ts b/frontend/src/composables/useMarked.ts
index 1c42a7ad5..0b2dc3a13 100644
--- a/frontend/src/composables/useMarked.ts
+++ b/frontend/src/composables/useMarked.ts
@@ -32,6 +32,7 @@ const renderer = {
     const id = `${slugger.slug(raw)}`;
     const heading = { level, text, id };
     headings.push(heading);
+    level = level + 1;
 
     return `<h${level} id="${id}">
               ${text}
diff --git a/frontend/src/composables/useSeo.ts b/frontend/src/composables/useSeo.ts
index c75281f5d..e71789958 100644
--- a/frontend/src/composables/useSeo.ts
+++ b/frontend/src/composables/useSeo.ts
@@ -7,14 +7,17 @@ export function useSeo(
   description: string | TranslateResult | null | undefined,
   route: RouteLocationNormalized,
   image: string | null,
-  additionalScripts?: { type: string; children: string; key: string }[]
+  additionalScripts?: { type: string; children: string; key: string }[],
+  manualTitle?: boolean
 ): UseHeadInput {
   description = description || "Plugin repository for Paper, Velocity, Waterfall and Folia.";
   const config = useConfig();
   const canonical = config.publicHost + (route.fullPath.endsWith("/") ? route.fullPath.substring(0, route.fullPath.length - 1) : route.fullPath);
   image = image || "https://docs.papermc.io/img/paper.png";
   image = image.startsWith("http") ? image : config.publicHost + image;
-  title = title ? title + " | Hangar" : "Hangar";
+  if (!manualTitle) {
+    title = title ? title + " | Hangar" : "Hangar";
+  }
 
   useSeoMeta({
     title,
diff --git a/frontend/src/composables/useUrlHelper.ts b/frontend/src/composables/useUrlHelper.ts
index c6faea19d..50b460cf7 100644
--- a/frontend/src/composables/useUrlHelper.ts
+++ b/frontend/src/composables/useUrlHelper.ts
@@ -9,6 +9,9 @@ const isSafeHost = (host: string) => {
 };
 
 const isSafe = (urlString: string) => {
+  if (!urlString) {
+    return false;
+  }
   if (urlString.startsWith("#") || urlString.startsWith("/")) {
     return true;
   }
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 8f4a344b8..254156a57 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -42,7 +42,7 @@
   },
   "hangar": {
     "footer": {
-      "api": "API",
+      "api": "Hangar API",
       "org": "GitHub",
       "terms": "Terms and Conditions",
       "privacypolicy": "Privacy Policy",
@@ -55,8 +55,6 @@
       "sortBy": "Sort by",
       "noProjects": "There are no projects. 😢",
       "noProjectsFound": "Found 0 projects. 😢",
-      "title": "Find your favorite plugins",
-      "subTitle": "Hangar allows you to find the best Paper, Velocity, or Waterfall plugins for your Minecraft server.",
       "categories": "Categories",
       "licenses": "Licenses",
       "versions": {
@@ -535,7 +533,7 @@
       }
     },
     "page": {
-      "subheader": "{0} released this version: {1}",
+      "subheader": "{0} released {2} version {3} on {1}",
       "dependencies": "Dependencies",
       "platforms": "Platforms",
       "required": "(required)",
diff --git a/frontend/src/pages/[user]/[project]/index.vue b/frontend/src/pages/[user]/[project]/index.vue
index 986d8a89a..4eaf2a65e 100644
--- a/frontend/src/pages/[user]/[project]/index.vue
+++ b/frontend/src/pages/[user]/[project]/index.vue
@@ -1,17 +1,20 @@
 <script lang="ts" setup>
 import { type HangarProject, NamedPermission, type PinnedVersion, type User } from "~/types/backend";
+import { upperFirst } from "scule";
 
 const props = defineProps<{
   user: User;
   project: HangarProject;
 }>();
 
+const config = useConfig();
 const i18n = useI18n();
 const route = useRoute("user-project-pages-all");
 const openProjectPages = useOpenProjectPages(route, props.project);
 
 const sponsors = ref(props.project.settings.sponsors);
 const editingSponsors = ref(false);
+
 function saveSponsors(content: string) {
   useInternalApi(`projects/project/${props.project.namespace.slug}/sponsors`, "post", {
     content,
@@ -27,7 +30,36 @@ function createPinnedVersionUrl(version: PinnedVersion): string {
   return `/${props.project.namespace.owner}/${props.project.namespace.slug}/versions/${version.name}`;
 }
 
-// useSeo is in ProjectPageMarkdown
+const platform = computed(() =>
+  upperFirst(Object.keys(props.project.pinnedVersions?.[0]?.platformDependenciesFormatted || { Minecraft: "dum" })?.[0]?.toLowerCase() || "Minecraft")
+);
+useHead(
+  useSeo(
+    props.project.name + ` - ${platform.value} Plugin`,
+    `${props.project.description} - Download the ${platform.value} Plugin ${props.project.name} by ${props.project.namespace.owner} on Hangar`,
+    route,
+    props.project.avatarUrl,
+    [
+      {
+        type: "application/ld+json",
+        children: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "WebContent",
+          author: {
+            "@type": "Person",
+            name: props.project?.namespace.owner,
+            url: config.publicHost + "/" + props.project?.namespace?.owner,
+          },
+          name: props.project?.name,
+          datePublished: props.project?.createdAt,
+          dateCreated: props.project?.createdAt,
+          url: config.publicHost + route.fullPath,
+        }),
+        key: "project",
+      },
+    ]
+  )
+);
 </script>
 
 <template>
@@ -69,9 +101,9 @@ function createPinnedVersionUrl(version: PinnedVersion): string {
           >
             <template #title>
               <div class="inline-flex items-center mt-2 gap-1.5">
-                <h1 class="ml-4 text-2xl">{{ i18n.t("project.sponsors") }}</h1>
+                <h2 class="ml-4 text-2xl">{{ i18n.t("project.sponsors") }}</h2>
                 <Tooltip class="overflow-visible">
-                  <template #content> {{ i18n.t("project.sponsorsTooltip") }} </template>
+                  <template #content> {{ i18n.t("project.sponsorsTooltip") }}</template>
                   <IconMdiInformation class="mt-1 text-xl" />
                 </Tooltip>
               </div>
@@ -92,7 +124,7 @@ function createPinnedVersionUrl(version: PinnedVersion): string {
       <ProjectInfo :project="project" />
       <Card>
         <template #header>
-          <h3>{{ i18n.t("project.pinnedVersions") }}</h3>
+          <h2>{{ i18n.t("project.pinnedVersions") }}</h2>
         </template>
         <ul class="divide-y divide-blue-500/50">
           <li v-for="(version, index) in project.pinnedVersions" :key="`${index}-${version.name}`" class="p-1 py-2">
@@ -129,7 +161,7 @@ function createPinnedVersionUrl(version: PinnedVersion): string {
       <template v-for="section in project.settings.links">
         <Card v-if="section.type === 'sidebar'" :key="section.id">
           <template #header>
-            <h3>{{ section.title }}</h3>
+            <h2>{{ section.title }}</h2>
           </template>
           <div class="flex flex-col">
             <template v-for="link in section.links" :key="link.id">
diff --git a/frontend/src/pages/[user]/[project]/versions/[version]/index.vue b/frontend/src/pages/[user]/[project]/versions/[version]/index.vue
index fcd635034..83c19e6c3 100644
--- a/frontend/src/pages/[user]/[project]/versions/[version]/index.vue
+++ b/frontend/src/pages/[user]/[project]/versions/[version]/index.vue
@@ -2,11 +2,13 @@
 import type { AxiosError } from "axios";
 import { ReviewState, PinnedStatus, NamedPermission, Visibility } from "~/types/backend";
 import type { Platform, HangarProject, HangarVersion, User } from "~/types/backend";
+import { titleCase } from "scule";
 
 const route = useRoute("user-project-versions-version");
 const i18n = useI18n();
 const router = useRouter();
 const notification = useNotificationStore();
+const config = useConfig();
 
 const props = defineProps<{
   version: HangarVersion;
@@ -53,7 +55,50 @@ function sortedDependencies(platform: Platform) {
   return [];
 }
 
-useHead(useSeo(props.project?.name + " " + projectVersion.value?.name, props.project.description, route, props.project.avatarUrl));
+const supportsString = computed(() => {
+  const result = [];
+  for (let platform in projectVersion.value?.platformDependenciesFormatted) {
+    result.push(titleCase(platform.toLowerCase()) + " " + projectVersion.value?.platformDependenciesFormatted[platform]);
+  }
+  return result.join(", ");
+});
+useHead(
+  useSeo(
+    props.project?.name + " " + projectVersion.value?.name,
+    `Download ${props.project?.name} ${projectVersion.value?.name} on Hangar.
+    Supports ${supportsString.value}.
+    Published on ${lastUpdated(new Date(projectVersion.value?.createdAt))}.
+    ${projectVersion.value?.stats?.totalDownloads} downloads.`,
+    route,
+    props.project.avatarUrl,
+    [
+      {
+        type: "application/ld+json",
+        children: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "WebContent",
+          about: {
+            "@type": "WebContent",
+            name: props.project?.name,
+            url: config.publicHost + "/" + props.project?.namespace?.owner + "/" + props.project?.namespace?.slug,
+            description: props.project?.description,
+          },
+          author: {
+            "@type": "Person",
+            name: props.project?.namespace.owner,
+            url: config.publicHost + "/" + props.project?.namespace?.owner,
+          },
+          name: props.project?.name + " " + projectVersion.value?.name,
+          datePublished: projectVersion.value?.createdAt,
+          dateCreated: projectVersion.value?.createdAt,
+          version: projectVersion.value?.name,
+          url: config.publicHost + route.fullPath,
+        }),
+        key: "version",
+      },
+    ]
+  )
+);
 
 async function savePage(content: string) {
   try {
@@ -138,7 +183,9 @@ async function restoreVersion() {
           </h2>
           <h3>
             <span class="inline-flex lt-md:flex-wrap">
-              {{ i18n.t("version.page.subheader", [projectVersion.author, lastUpdated(new Date(projectVersion.createdAt))]) }}
+              {{
+                i18n.t("version.page.subheader", [projectVersion.author, lastUpdated(new Date(projectVersion.createdAt)), project.name, projectVersion.name])
+              }}
             </span>
           </h3>
           <em v-if="hasPerms(NamedPermission.Reviewer) && projectVersion.approvedBy">
@@ -179,7 +226,7 @@ async function restoreVersion() {
     <section class="basis-full lg:basis-4/15 flex-grow space-y-4">
       <Card v-if="hasPerms(NamedPermission.DeleteVersion) || hasPerms(NamedPermission.ViewLogs) || hasPerms(NamedPermission.Reviewer)">
         <template #header>
-          <h3>{{ i18n.t("version.page.manage") }}</h3>
+          <h2>{{ i18n.t("version.page.manage") }}</h2>
         </template>
 
         <span class="inline-flex items-center">
@@ -256,7 +303,7 @@ async function restoreVersion() {
       <Card>
         <template #header>
           <div class="inline-flex w-full">
-            <h3 class="flex-grow">{{ i18n.t("project.info.title") }}</h3>
+            <h2 class="flex-grow">{{ i18n.t("project.info.title") }}</h2>
           </div>
         </template>
 
@@ -271,7 +318,7 @@ async function restoreVersion() {
                 {{ i18n.t(hasPerms(NamedPermission.IsSubjectMember) ? "project.info.totalTotalDownloads" : "project.info.totalDownloads", 0) }}
               </th>
               <td class="text-right">
-                {{ version.stats.totalDownloads.toLocaleString("en-US") }}
+                {{ projectVersion.stats.totalDownloads.toLocaleString("en-US") }}
               </td>
             </tr>
             <!-- Only show per platform downloads to project members, otherwise not too relevant and only adding to height -->
@@ -281,7 +328,7 @@ async function restoreVersion() {
                 {{ i18n.t("project.info.totalDownloads", 0) }}
               </th>
               <td class="text-right">
-                {{ version.stats.platformDownloads[platform].toLocaleString("en-US") }}
+                {{ projectVersion.stats.platformDownloads[platform].toLocaleString("en-US") }}
               </td>
             </tr>
           </tbody>
@@ -291,7 +338,7 @@ async function restoreVersion() {
       <Card>
         <template #header>
           <div class="inline-flex w-full">
-            <h3 class="flex-grow">{{ i18n.t("version.page.platforms") }}</h3>
+            <h2 class="flex-grow">{{ i18n.t("version.page.platforms") }}</h2>
           </div>
         </template>
 
@@ -312,7 +359,7 @@ async function restoreVersion() {
       <Card v-if="hasPerms(NamedPermission.EditVersion) || platformsWithDependencies.length !== 0">
         <template #header>
           <div class="inline-flex w-full">
-            <h3 class="flex-grow">{{ i18n.t("version.page.dependencies") }}</h3>
+            <h2 class="flex-grow">{{ i18n.t("version.page.dependencies") }}</h2>
           </div>
         </template>
 
diff --git a/frontend/src/pages/[user]/[project]/versions/index.vue b/frontend/src/pages/[user]/[project]/versions/index.vue
index b5da2c094..c5d42c758 100644
--- a/frontend/src/pages/[user]/[project]/versions/index.vue
+++ b/frontend/src/pages/[user]/[project]/versions/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { NamedPermission, Visibility, ChannelFlag } from "~/types/backend";
+import { NamedPermission, Visibility, ChannelFlag, type PaginatedResultVersion } from "~/types/backend";
 import type { Platform, HangarProject, Version } from "~/types/backend";
 
 const i18n = useI18n();
@@ -15,7 +15,6 @@ const filter = reactive({
     platforms: true,
   },
 });
-console.log("loaded filters", filter);
 
 const props = defineProps<{
   project: HangarProject;
@@ -39,7 +38,7 @@ const results = await Promise.all([
   useProjectVersions(route.params.project, { ...requestParams.value, includeHiddenChannels: route.query.channel != null }),
 ]);
 const channels = results[0].data;
-const versions = results[1];
+const versions = results[1] as Ref<PaginatedResultVersion>;
 if (!route.query.channel) {
   filter.channels.push(...channels.value.filter((c) => !c.flags.includes(ChannelFlag.HIDE_BY_DEFAULT)).map((c) => c.name));
 }
@@ -47,7 +46,14 @@ if (!route.query.platform) {
   filter.platforms.push(...platforms.value.map((p) => p.enumName));
 }
 
-useHead(useSeo("Versions | " + props.project.name, props.project.description, route, props.project.avatarUrl));
+useHead(
+  useSeo(
+    "Versions | " + props.project.name,
+    `Download ${versions.value.pagination?.count} ${props.project.name} versions. ${props.project.stats.downloads} total downloads. Last updated on ${lastUpdated(new Date(versions.value.result?.[0]?.createdAt || 0))}`,
+    route,
+    props.project.avatarUrl
+  )
+);
 
 const pageChangeScrollAnchor = ref<Element>();
 
@@ -110,6 +116,7 @@ function getVisibilityTitle(visibility: Visibility) {
 <template>
   <div ref="pageChangeScrollAnchor" class="flex flex-wrap md:flex-nowrap gap-4">
     <section class="basis-full md:basis-11/15 flex-grow">
+      <h2 class="font-bold text-2xl mb-4">Versions for {{ project.name }} by {{ project.namespace.owner }}</h2>
       <ul>
         <Alert v-if="!versions || !versions.result || versions.result.length === 0" type="info"> {{ i18n.t("version.page.noVersions") }} </Alert>
         <Pagination
@@ -127,7 +134,7 @@ function getVisibilityTitle(visibility: Visibility) {
                   <div class="flex lt-lg:flex-wrap">
                     <div class="basis-full lg:(basis-6/15 pb-4) truncate">
                       <div class="flex flex-wrap items-center">
-                        <h2 class="lg:basis-full lt-lg:mr-1 text-1.15rem leading-relaxed">{{ item.name }}</h2>
+                        <h3 class="lg:basis-full lt-lg:mr-1 text-1.15rem leading-relaxed">{{ item.name }}</h3>
                         <span class="lg:hidden flex-grow" />
                         <Tag :name="item.channel.name" :color="{ background: item.channel.color }" :tooltip="item.channel.description" />
                         <IconMdiCancel v-if="item.visibility === Visibility.SoftDelete" class="ml-1"></IconMdiCancel>
@@ -181,7 +188,7 @@ function getVisibilityTitle(visibility: Visibility) {
           <template #header>
             <div class="inline-flex w-full flex-cols space-between">
               <InputCheckbox v-model="filter.allChecked.channels" @change="checkAllChannels" />
-              <h3 class="flex-grow">{{ i18n.t("version.channels") }}</h3>
+              <h2 class="flex-grow">{{ i18n.t("version.channels") }}</h2>
               <Link v-if="hasPerms(NamedPermission.EditChannels)" :to="`/${project.namespace.owner}/${project.name}/channels`">
                 <Button size="small" class="ml-2 text-sm"><IconMdiPencil /></Button>
               </Link>
@@ -201,7 +208,7 @@ function getVisibilityTitle(visibility: Visibility) {
           <template #header>
             <div class="inline-flex">
               <InputCheckbox v-model="filter.allChecked.platforms" class="flex-right" @change="checkAllPlatforms" />
-              <h3>{{ i18n.t("version.platforms") }}</h3>
+              <h2>{{ i18n.t("version.platforms") }}</h2>
             </div>
           </template>
 
diff --git a/frontend/src/pages/[user]/index.vue b/frontend/src/pages/[user]/index.vue
index 77ff956fb..d5d899bf0 100644
--- a/frontend/src/pages/[user]/index.vue
+++ b/frontend/src/pages/[user]/index.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
 }>();
 const i18n = useI18n();
 
+const config = useConfig();
 const route = useRoute("user");
 const router = useRouter();
 
@@ -89,8 +90,42 @@ watchDebounced(
   { deep: true, debounce: 250 }
 );
 
-const description = props.user.name + " is an author on Hangar." + (props.user?.tagline ? " " + props.user.tagline : "");
-useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
+const description = (props.user?.tagline ? props.user.tagline + " - " : "") + "Download " + props.user.name + "'s plugins on Hangar.";
+useHead(
+  useSeo(props.user.name, description, route, props.user.avatarUrl, [
+    {
+      type: "application/ld+json",
+      children: JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": "ProfilePage",
+        mainEntity: {
+          "@type": "Person",
+          name: props.user.name,
+          url: config.publicHost + "/" + route.fullPath,
+          description: props.user.tagline,
+          image: props.user.avatarUrl,
+          interactionStatistic: [
+            {
+              "@type": "InteractionCounter",
+              interactionType: "https://schema.org/CreateAction",
+              userInteractionCount: props.user.projectCount,
+            },
+            {
+              "@type": "InteractionCounter",
+              interactionType: "https://schema.org/LikeAction",
+              userInteractionCount: userData.value?.starred?.result?.length || 0,
+            },
+            {
+              "@type": "InteractionCounter",
+              interactionType: "https://schema.org/FollowAction",
+              userInteractionCount: userData.value?.watching?.result?.length || 0,
+            },
+          ],
+        },
+      }),
+    },
+  ])
+);
 </script>
 
 <template>
@@ -108,6 +143,7 @@ useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
           <InputText v-model="query" :label="i18n.t('hangar.projectSearch.query')" />
           <InputSelect v-model="activeSorter" :values="sorters" item-text="label" item-value="id" :label="i18n.t('hangar.projectSearch.sortBy')" />
         </div>
+        <h2 class="font-bold text-xl">{{ user.name }}'s Plugins</h2>
         <ProjectList :projects="projects" @update:page="(newPage) => (page = newPage)" />
       </div>
       <div class="flex-basis-full flex-grow lg:max-w-3/10 lg:min-w-2/10">
@@ -115,7 +151,9 @@ useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
           v-if="buttons.length !== 0 || (organization && hasPerms(NamedPermission.IsSubjectOwner))"
           class="mb-4 border-solid border-top-4 border-top-red-500 dark:border-top-red-500"
         >
-          <template #header>{{ i18n.t("author.management") }}</template>
+          <template #header>
+            <h2>{{ i18n.t("author.management") }}</h2>
+          </template>
           <template v-if="organization && hasPerms(NamedPermission.IsSubjectOwner)">
             <Tooltip :content="i18n.t('author.tooltips.transfer')">
               <OrgTransferModal :organization="user.name" />
@@ -130,7 +168,9 @@ useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
               {{ i18n.t(`author.tooltips.${btn.name}`) }}
             </template>
             <Link v-bind="btn.attr">
-              <Button size="small" class="mr-1 inline-flex"><component :is="btn.icon" /></Button>
+              <Button size="small" class="mr-1 inline-flex">
+                <component :is="btn.icon" />
+              </Button>
             </Link>
           </Tooltip>
 
@@ -139,7 +179,7 @@ useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
         </Card>
 
         <Card v-if="possibleAlts?.length" class="mb-4">
-          <template #header> Shares address with </template>
+          <template #header> Shares address with</template>
           <ul>
             <li v-for="name in possibleAlts" :key="name">
               <Link :to="'/' + name">
@@ -153,7 +193,7 @@ useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
           <Card class="mb-4" accent>
             <template #header>
               <div class="inline-flex w-full">
-                <span class="flex-grow">{{ i18n.t("author.orgs") }}</span>
+                <h2 class="flex-grow">{{ user.name }}'s {{ i18n.t("author.orgs") }}</h2>
                 <OrgVisibilityModal
                   v-if="organizationVisibility && organizations && Object.keys(organizations).length !== 0"
                   v-model="organizationVisibility"
@@ -179,7 +219,9 @@ useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
           </Card>
 
           <Card class="mb-4" accent>
-            <template #header>{{ i18n.t("author.stars") }}</template>
+            <template #header>
+              <h2>{{ i18n.t("author.stars") }}</h2>
+            </template>
 
             <ul v-if="starred?.result?.length">
               <li v-for="star in starred?.result" :key="star.name">
@@ -195,7 +237,9 @@ useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
           </Card>
 
           <Card accent>
-            <template #header>{{ i18n.t("author.watching") }}</template>
+            <template #header>
+              <h2>{{ i18n.t("author.watching") }}</h2>
+            </template>
 
             <ul v-if="watching?.result?.length">
               <li v-for="watched in watching?.result" :key="watched.name">
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 32ee3535b..c8d2dc46f 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -1,261 +1,3 @@
-<script setup lang="ts">
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import { Tag } from "~/types/backend";
-import type { Platform, PaginatedResultProject, PlatformVersion } from "~/types/backend";
-
-const i18n = useI18n();
-const route = useRoute("index");
-const router = useRouter();
-
-const sorters = [
-  { id: "-stars", label: i18n.t("project.sorting.mostStars") },
-  { id: "-recent_downloads", label: i18n.t("project.sorting.recentDownloads") },
-  { id: "-downloads", label: i18n.t("project.sorting.mostDownloads") },
-  { id: "-updated", label: i18n.t("project.sorting.recentlyUpdated") },
-  { id: "-newest", label: i18n.t("project.sorting.newest") },
-];
-
-const toArray = (input: unknown) => (Array.isArray(input) ? input : input ? [input] : []);
-const filters = ref({
-  versions: toArray(route.query.version),
-  categories: toArray(route.query.category),
-  platform: (route.query.platform || undefined) as string | undefined,
-  tags: toArray(route.query.tag),
-});
-
-const activeSorter = ref<string>((route.query.sort as string) || "-stars");
-const page = ref(route.query.page ? Number(route.query.page) : 0);
-const query = ref<string>((route.query.query as string) || "");
-const projects = ref<PaginatedResultProject | null>();
-
-const requestParams = computed(() => {
-  const limit = 10;
-  const params: Record<string, any> = {
-    limit,
-    offset: page.value * limit,
-    version: filters.value.versions,
-    category: filters.value.categories,
-    platform: filters.value.platform !== null ? [filters.value.platform] : [],
-    tag: filters.value.tags,
-  };
-  if (query.value) {
-    params.query = query.value;
-  }
-  if (activeSorter.value) {
-    params.sort = activeSorter.value;
-  }
-
-  return params;
-});
-const p = await useProjects(requestParams.value);
-if (p && p.value) {
-  projects.value = p.value;
-  await checkOffsetLargerCount();
-}
-
-const projectList = ref();
-function resetPage() {
-  projectList.value.updatePage(0);
-}
-
-watch(filters, resetPage, { deep: true });
-watch(query, resetPage);
-watch(activeSorter, resetPage);
-watchDebounced(
-  requestParams,
-  async () => {
-    // dont want limit in url, its hardcoded in frontend
-    // offset we dont want, we set page instead
-    const { limit, offset, ...paramsWithoutLimit } = requestParams.value;
-    // set the request params
-    await router.replace({ query: { page: page.value, ...paramsWithoutLimit } });
-    // do the update
-    return updateProjects();
-  },
-  { deep: true, debounce: 250 }
-);
-
-async function updateProjects() {
-  projects.value = await useApi<PaginatedResultProject>("projects", "get", requestParams.value);
-  await checkOffsetLargerCount();
-}
-
-// if somebody set page too high, lets reset it back
-async function checkOffsetLargerCount() {
-  if (projects.value && projects.value.pagination?.offset !== 0 && projects.value.pagination?.offset > projects.value.pagination?.count) {
-    page.value = 0;
-    await updateProjects();
-  }
-}
-
-function versions(platform: Platform): PlatformVersion[] {
-  const platformData = useBackendData.platforms?.get(platform);
-  if (!platformData) {
-    return [];
-  }
-
-  return platformData.platformVersions;
-}
-
-function updatePlatform(platform: any) {
-  filters.value.platform = platform;
-
-  const allowedVersion: PlatformVersion[] = versions(platform);
-  filters.value.versions = filters.value.versions.filter((existingVersion) => {
-    return allowedVersion.find((allowedNewVersion) => allowedNewVersion === existingVersion);
-  });
-}
-
-const config = useConfig();
-const pageChangeScrollAnchor = ref<Element>();
-
-useHead(
-  useSeo("Home", null, route, null, [
-    {
-      type: "application/ld+json",
-      children: JSON.stringify({
-        "@context": "https://schema.org",
-        "@type": "WebSite",
-        url: config.publicHost,
-        potentialAction: {
-          "@type": "SearchAction",
-          target: config.publicHost + "/?q={search_term_string}",
-          "query-input": "required name=search_term_string",
-        },
-      }),
-      key: "website",
-    },
-  ])
-);
-</script>
-
 <template>
-  <div>
-    <Container class="flex flex-col items-center gap-4">
-      <h1 ref="pageChangeScrollAnchor" class="text-3xl font-bold uppercase text-center mt-4">{{ i18n.t("hangar.projectSearch.title") }}</h1>
-      <h2 class="text-1xl text-center mb-2">{{ i18n.t("hangar.projectSearch.subTitle") }}</h2>
-      <!-- Search Bar -->
-      <div class="relative rounded-md flex shadow-md w-full max-w-screen-md">
-        <!-- Text Input -->
-        <input
-          v-model="query"
-          name="query"
-          class="rounded-l-md md:rounded-md p-4 basis-full min-w-0 dark:bg-gray-700"
-          type="text"
-          :placeholder="i18n.t('hangar.projectSearch.query', [projects?.pagination.count])"
-        />
-        <div class="md:hidden flex">
-          <Menu>
-            <MenuButton
-              id="sort-button"
-              class="bg-gradient-to-r from-primary-500 to-primary-400 rounded-r-md text-left font-semibold flex items-center gap-2 text-white p-2"
-            >
-              <span class="whitespace-nowrap">{{ i18n.t("hangar.projectSearch.sortBy") }}</span>
-              <icon-mdi-sort-variant class="text-xl pointer-events-none" />
-            </MenuButton>
-            <transition
-              enter-active-class="transition duration-100 ease-out"
-              enter-from-class="transform scale-95 opacity-0"
-              enter-to-class="transform scale-100 opacity-100"
-              leave-active-class="transition duration-75 ease-out"
-              leave-from-class="transform scale-100 opacity-100"
-              leave-to-class="transform scale-95 opacity-0"
-            >
-              <MenuItems
-                class="absolute right-0 top-15 flex flex-col z-10 background-default filter shadow-default drop-shadow-md rounded border-top-primary border-t-3"
-              >
-                <MenuItem v-for="sorter in sorters" :key="sorter.id" v-slot="{ active }">
-                  <button
-                    :class="{
-                      'bg-gray-100 dark:bg-gray-700': active,
-                      'bg-gradient-to-r from-primary-500 to-primary-400 text-white': activeSorter === sorter.id,
-                    }"
-                    class="px-4 py-2 text-left"
-                    @click="activeSorter = sorter.id"
-                  >
-                    {{ sorter.label }}
-                  </button>
-                </MenuItem>
-              </MenuItems>
-            </transition>
-          </Menu>
-        </div>
-      </div>
-      <div class="justify-center inline-flex gap-1 lt-md:hidden">
-        <div v-for="sorter in sorters" :key="sorter.id">
-          <button
-            :class="{ 'bg-gradient-to-r from-primary-500 to-primary-400 text-white': activeSorter === sorter.id }"
-            class="rounded-lg py-2 px-4 hover:(bg-gray-300 dark:bg-gray-700)"
-            @click="activeSorter = sorter.id"
-          >
-            {{ sorter.label }}
-          </button>
-        </div>
-      </div>
-    </Container>
-    <Container lg="flex items-start gap-6">
-      <!-- Projects -->
-      <div v-if="projects" class="w-full min-w-0 mb-5 flex flex-col gap-2 lg:mb-0">
-        <ProjectList ref="projectList" :projects="projects" :reset-anchor="pageChangeScrollAnchor" @update:page="(newPage) => (page = newPage)" />
-      </div>
-      <!-- Sidebar -->
-      <Card accent class="min-w-300px flex flex-col gap-4">
-        <div class="platforms">
-          <h4 class="font-bold mb-1">
-            {{ i18n.t("hangar.projectSearch.platforms") }}
-            <span
-              v-if="filters.platform"
-              class="font-normal text-sm hover:(underline) text-gray-600 dark:text-gray-400"
-              cursor="pointer"
-              @click="filters.platform = undefined"
-            >
-              {{ i18n.t("hangar.projectSearch.clear") }}
-            </span>
-          </h4>
-          <div class="flex flex-col gap-1">
-            <ul>
-              <li v-for="platform in useVisiblePlatforms" :key="platform.enumName" class="inline-flex w-full">
-                <InputRadio :label="platform.name" :model-value="filters.platform" :value="platform.enumName" @update:model-value="updatePlatform">
-                  <PlatformLogo :platform="platform.enumName" :size="24" class="mr-1" />
-                </InputRadio>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div v-if="filters.platform" class="versions">
-          <h4 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.versions." + filters.platform) }}</h4>
-          <div class="max-h-40 overflow-auto">
-            <VersionSelector v-model="filters.versions" :versions="versions(filters.platform)" :open="false" col />
-          </div>
-        </div>
-        <div class="tags">
-          <h4 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.tags") }}</h4>
-          <div class="flex flex-col gap-1">
-            <InputCheckbox v-for="tag in Object.values(Tag)" :key="tag" v-model="filters.tags" :value="tag">
-              <template #label>
-                <IconMdiPuzzleOutline v-if="tag === Tag.ADDON" />
-                <IconMdiBookshelf v-else-if="tag === Tag.LIBRARY" />
-                <IconMdiLeaf v-else-if="tag === Tag.SUPPORTS_FOLIA" />
-                <span class="ml-1">{{ i18n.t("project.settings.tags." + tag + ".title") }}</span>
-              </template>
-            </InputCheckbox>
-          </div>
-        </div>
-        <div class="categories">
-          <h4 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.categories") }}</h4>
-          <div class="flex flex-col gap-1">
-            <InputCheckbox
-              v-for="category in useVisibleCategories"
-              :key="category.apiName"
-              v-model="filters.categories"
-              :value="category.apiName"
-              :label="i18n.t(category.title)"
-            >
-              <CategoryLogo :category="category.apiName" :size="22" class="mr-1" />
-            </InputCheckbox>
-          </div>
-        </div>
-      </Card>
-    </Container>
-  </div>
+  <Homepage index />
 </template>
diff --git a/frontend/src/pages/paper.vue b/frontend/src/pages/paper.vue
new file mode 100644
index 000000000..27148065e
--- /dev/null
+++ b/frontend/src/pages/paper.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import Homepage from "~/components/Homepage.vue";
+import { Platform } from "~/types/backend";
+</script>
+
+<template>
+  <Homepage :platform="Platform.PAPER" platformName="Paper" />
+</template>
diff --git a/frontend/src/pages/velocity.vue b/frontend/src/pages/velocity.vue
new file mode 100644
index 000000000..79d18d997
--- /dev/null
+++ b/frontend/src/pages/velocity.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import Homepage from "~/components/Homepage.vue";
+import { Platform } from "~/types/backend";
+</script>
+
+<template>
+  <Homepage :platform="Platform.VELOCITY" platformName="Velocity" />
+</template>
diff --git a/frontend/src/pages/waterfall.vue b/frontend/src/pages/waterfall.vue
new file mode 100644
index 000000000..1e3ee30b4
--- /dev/null
+++ b/frontend/src/pages/waterfall.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import Homepage from "~/components/Homepage.vue";
+import { Platform } from "~/types/backend";
+</script>
+
+<template>
+  <Homepage :platform="Platform.WATERFALL" platformName="Waterfall" />
+</template>