diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index cc88df0e..2b159881 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,2 +1,9 @@
+<script lang="ts">
+	import PageMeta from '$lib/components/PageMeta.svelte'
+	import * as m from '$lib/paraglide/messages'
+</script>
+
+<PageMeta title={m.page_title_home()} description={m.page_desc_home()} />
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
diff --git a/src/routes/(app)/about/+page.svelte b/src/routes/(app)/about/+page.svelte
index ba6ecd61..4ab36ace 100644
--- a/src/routes/(app)/about/+page.svelte
+++ b/src/routes/(app)/about/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { m } from '$lib/paraglide/messages'
-	export let data: { status: unknown; seo: string }
+	import PageMeta from '$lib/components/PageMeta.svelte'
+	import * as m from '$lib/paraglide/messages'
 </script>
 
-<svelte:head>{@html data.seo}</svelte:head>
+<PageMeta title={m.page_title_about()} description={m.page_desc_about()} />
 
-<h1>{m.hello_world({ name: 'World' })}</h1>
-<pre>{JSON.stringify(data, null, 2)}</pre>
+<h1>About</h1>
+<p>About granblue.team</p>
diff --git a/src/routes/(app)/collection/+page.svelte b/src/routes/(app)/collection/+page.svelte
index 6a629bc0..de59f90b 100644
--- a/src/routes/(app)/collection/+page.svelte
+++ b/src/routes/(app)/collection/+page.svelte
@@ -2,11 +2,11 @@
 
 <script lang="ts">
 	import { page } from '$app/stores'
+	import PageMeta from '$lib/components/PageMeta.svelte'
+	import * as m from '$lib/paraglide/messages'
 </script>
 
-<svelte:head>
-	<title>Collection</title>
-</svelte:head>
+<PageMeta title={m.page_title_collection()} description={m.page_desc_collection()} />
 
 <div class="container">
 	<h1>Collection</h1>
diff --git a/src/routes/(app)/me/+page.svelte b/src/routes/(app)/me/+page.svelte
index b1ecd5e7..231d6917 100644
--- a/src/routes/(app)/me/+page.svelte
+++ b/src/routes/(app)/me/+page.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
 	import type { AccountCookie } from '$lib/types/AccountCookie'
 	import type { UserCookie } from '$lib/types/UserCookie'
+	import PageMeta from '$lib/components/PageMeta.svelte'
+	import * as m from '$lib/paraglide/messages'
 
 	export let data: { account: AccountCookie; user: UserCookie }
 </script>
 
+<PageMeta title={m.page_title_settings()} description={m.page_desc_home()} />
+
 <h1>Welcome, {data.account.username}!</h1>
 
 <section>
diff --git a/src/routes/(app)/teams/explore/+page.svelte b/src/routes/(app)/teams/explore/+page.svelte
index 31cd93fe..ca866078 100644
--- a/src/routes/(app)/teams/explore/+page.svelte
+++ b/src/routes/(app)/teams/explore/+page.svelte
@@ -6,6 +6,8 @@
   import { IsInViewport } from 'runed'
   import Icon from '$lib/components/Icon.svelte'
   import Button from '$lib/components/ui/Button.svelte'
+  import PageMeta from '$lib/components/PageMeta.svelte'
+  import * as m from '$lib/paraglide/messages'
 
   const { data } = $props() as { data: PageData }
 
@@ -53,6 +55,8 @@
   })
 </script>
 
+<PageMeta title={m.page_title_teams()} description={m.page_desc_teams()} />
+
 <section class="explore">
   <header>
     <h1>Explore Teams</h1>
diff --git a/src/routes/(app)/teams/new/+page.svelte b/src/routes/(app)/teams/new/+page.svelte
index e2ba441c..7ac0ad5c 100644
--- a/src/routes/(app)/teams/new/+page.svelte
+++ b/src/routes/(app)/teams/new/+page.svelte
@@ -2,6 +2,8 @@
 
 <script lang="ts">
 	import type { PageData } from './$types'
+	import PageMeta from '$lib/components/PageMeta.svelte'
+	import * as m from '$lib/paraglide/messages'
 	import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte'
 	import SummonGrid from '$lib/components/grids/SummonGrid.svelte'
 	import CharacterGrid from '$lib/components/grids/CharacterGrid.svelte'
@@ -615,6 +617,8 @@
 	})
 </script>
 
+<PageMeta title={m.page_title_new()} description={m.page_desc_home()} />
+
 <main>
 	<div class="page-container">
 		<section class="party-content">
diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
index d89ac4e9..28947876 100644
--- a/src/routes/auth/login/+page.svelte
+++ b/src/routes/auth/login/+page.svelte
@@ -3,6 +3,7 @@
 	import AuthCard from '$lib/components/auth/AuthCard.svelte'
 	import Input from '$lib/components/ui/Input.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
+	import PageMeta from '$lib/components/PageMeta.svelte'
 	import * as m from '$lib/paraglide/messages'
 
 	interface Props {
@@ -19,9 +20,7 @@
 	const randomPlaceholder = placeholders[Math.floor(Math.random() * placeholders.length)]
 </script>
 
-<svelte:head>
-	<title>{m.auth_login_title()}</title>
-</svelte:head>
+<PageMeta title={m.page_title_login()} description={m.page_desc_home()} />
 
 <AuthCard title={m.auth_login_title()}>
 	<form
diff --git a/src/routes/auth/register/+page.svelte b/src/routes/auth/register/+page.svelte
index d9251508..8a50a649 100644
--- a/src/routes/auth/register/+page.svelte
+++ b/src/routes/auth/register/+page.svelte
@@ -3,6 +3,7 @@
 	import AuthCard from '$lib/components/auth/AuthCard.svelte'
 	import Input from '$lib/components/ui/Input.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
+	import PageMeta from '$lib/components/PageMeta.svelte'
 	import { userAdapter } from '$lib/api/adapters/user.adapter'
 	import * as m from '$lib/paraglide/messages'
 
@@ -224,9 +225,7 @@
 	)
 </script>
 
-<svelte:head>
-	<title>{m.auth_register_title()}</title>
-</svelte:head>
+<PageMeta title={m.page_title_register()} description={m.page_desc_home()} />
 
 <AuthCard title={m.auth_register_title()}>
 	<form