diff --git a/src/content/archives.md b/src/content/archives.md
deleted file mode 100644
index c2a6133..0000000
--- a/src/content/archives.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Archives
-
-Archives live here
diff --git a/src/content/extra/archives.md b/src/content/extra/archives.md
new file mode 100644
index 0000000..1746531
--- /dev/null
+++ b/src/content/extra/archives.md
@@ -0,0 +1,6 @@
+---
+title: Archives Custom Title
+---
+# Archives
+
+Archives live here
diff --git a/src/content/metadata.json b/src/content/metadata.json
index 8c912bd..fe4b596 100644
--- a/src/content/metadata.json
+++ b/src/content/metadata.json
@@ -9,5 +9,8 @@
 		"github": "https://github.com",
 		"email": "email:cirno@gensokyo.jp",
 		"orcid": "https://orcid.org/cirno"
-	}
+	},
+	"extra": [
+		{ "route": "/archives", "name": "Archives" }
+	]
 }
diff --git a/src/lib/sitemap.ts b/src/lib/sitemap.ts
index 3b312b9..5dfcf30 100644
--- a/src/lib/sitemap.ts
+++ b/src/lib/sitemap.ts
@@ -1,7 +1,8 @@
+import siteMetadata from '$content/metadata.json';
+
 export const routes: { route: string, name: string, disabled?: boolean }[] = [
 	{ route: "/", name: "Home" },
 	{ route: "/post", name: "Blog" },
 	{ route: "/tag", name: "Tags" },
 	{ route: "/gallery", name: "Gallery", disabled: true },
-	{ route: "/archives", name: "Archives" },
-];
+].concat(siteMetadata?.extra || []);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7170bf9..8c0ad4f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -103,6 +103,7 @@
 	@media (max-width: 700px) {
 		#layout {
 			flex-direction: column;
+			margin-top: 10px;
 			gap: 20px;
 		}
 	}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ef78f77..80e0129 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -49,13 +49,12 @@
 			class="floater-elem"
 				 style="padding-bottom: {(1 - progress) * 50}vh"
 		>
-			<div class="flex h-5 items-center space-x-4 text-sm">
-				<a class="navbar-link" href="#bio">Bio</a>
-				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
+			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
+				<a href="#bio">Bio</a>
 				{#each routes as item}
 					{#if item.route !== "/"}
-						<a class="navbar-link" href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
+						<a href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
 					{/if}
 				{/each}
 				<a class="icon" href="/rss.xml"><Rss /></a>
@@ -101,8 +100,8 @@
 		background-position: center center;
 		z-index: -10;
 		position: fixed;
-		min-width: 100vw;
-		min-height: 100vh;
+		min-width: 100%;
+		min-height: 100%;
 		overscroll-behaviour: none;
 	}
 	#front {
@@ -119,6 +118,10 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
+	#navbar {
+		display: flex;
+		flex-wrap: wrap;
+	}
 	.floater-elem {
 		margin-left: auto;
 		margin-right: auto;
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index d080ebd..cc0e47c 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -37,8 +37,11 @@
 	}
 	@media (max-width: 700px) {
 		#navbar {
-			flex-direction: row;
-			justify-content: start;
+			display: inline-block;
+			white-space: pre-wrap;
+		}
+		#navbar .nav-link {
+			display: inline-block;
 		}
 	}
 </style>
diff --git a/src/routes/archives/+page.svelte b/src/routes/[slug]/+page.svelte
similarity index 62%
rename from src/routes/archives/+page.svelte
rename to src/routes/[slug]/+page.svelte
index 8b15211..d175188 100644
--- a/src/routes/archives/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	const { Content } = data;
+	const { slug, metadata, Content } = data;
 	import siteMetadata from '$content/metadata.json';
+
+	const title = metadata?.title || (slug[0].toUpperCase() + slug.slice(1));
 </script>
 
 <svelte:head>
-	<title>Archives | {siteMetadata.blogName}</title>
+	<title>{title} | {siteMetadata.blogName}</title>
 </svelte:head>
 
 <hr />
diff --git a/src/routes/[slug]/+page.ts b/src/routes/[slug]/+page.ts
new file mode 100644
index 0000000..dba9665
--- /dev/null
+++ b/src/routes/[slug]/+page.ts
@@ -0,0 +1,12 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const post = await import(`$content/extra/${params.slug}.md`);
+	const Content = post.default;
+
+	return {
+		slug: params.slug,
+		metadata: post.metadata,
+		Content,
+	};
+}
diff --git a/src/routes/archives/+page.ts b/src/routes/archives/+page.ts
deleted file mode 100644
index efeea04..0000000
--- a/src/routes/archives/+page.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async (_) => {
-	const post = await import("$content/archives.md");
-	const Content = post.default;
-
-	return {
-		metadata: post.metadata,
-		Content,
-	};
-}