diff --git a/public/fonts/MapleMono-Bold.ttf.woff2 b/public/fonts/MapleMono-Bold.ttf.woff2
new file mode 100644
index 0000000..964c256
Binary files /dev/null and b/public/fonts/MapleMono-Bold.ttf.woff2 differ
diff --git a/public/fonts/MapleMono-Regular.ttf.woff2 b/public/fonts/MapleMono-Regular.ttf.woff2
new file mode 100644
index 0000000..f6d6453
Binary files /dev/null and b/public/fonts/MapleMono-Regular.ttf.woff2 differ
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 4a13a56..65b5d81 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -5,6 +5,7 @@ import ThemeIcon from "./ThemeIcon.astro";
 
 <header>
     <nav>
+        <h1>SanYeCao Blog</h1>
         <div>
             <ThemeIcon />
         </div>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 1e61fda..d4c6281 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,8 +1,13 @@
 ---
+import { getLangFromUrl, useTranslations } from "@/i18n";
+
+const langParam = Astro.url.searchParams.get("lang");
+const lang = langParam === "en" ? "en" : "zh";
+const t = useTranslations(lang);
+---
 
----
-
-<a href="/">Home</a>
-<a href="/about/">About</a>
-<!-- <a href="/blog/">Blog</a> -->
-<a href="/tags/">Tags</a>
+<nav>
+    <a href={`/?lang=${lang}`}>{t("nav.home")}</a>
+    <a href={`/about?lang=${lang}`}>{t("nav.about")}</a>
+    <a href={`/tags?lang=${lang}`}>{t("nav.tags")}</a>
+</nav>
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
new file mode 100644
index 0000000..442a9f5
--- /dev/null
+++ b/src/i18n/en.ts
@@ -0,0 +1,16 @@
+export default {
+    nav: {
+        home: "Home",
+        posts: "Posts",
+        tags: "Tags",
+        about: "About",
+    },
+    post: {
+        writtenBy: "Written by",
+        comments: "Comments",
+        publishedOn: "Published on",
+    },
+    theme: {
+        toggle: "Toggle theme",
+    },
+};
\ No newline at end of file
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..d6ec186
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,28 @@
+import zh from "./zh.ts";
+import en from "./en.ts";
+
+export const languages = {
+  zh,
+  en,
+};
+
+export type Lang = keyof typeof languages;
+
+export function getLangFromUrl(url: URL): Lang {
+  const lang = url.pathname.split("/")[1];
+  if (lang === "en") return "en";
+  return "zh";
+}
+
+export function useTranslations(lang: Lang) {
+  return function t(path: string) {
+    const keys = path.split(".");
+    let current: any = languages[lang];
+
+    for (const key of keys) {
+      current = current?.[key];
+    }
+
+    return current ?? path;
+  };
+}
\ No newline at end of file
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
new file mode 100644
index 0000000..8080101
--- /dev/null
+++ b/src/i18n/zh.ts
@@ -0,0 +1,16 @@
+export default {
+    nav: {
+        home: "首页",
+        posts: "文章",
+        tags: "标签",
+        about: "关于",
+    },
+    post: {
+        writtenBy: "作者",
+        comments: "评论",
+        publishedOn: "发布于",
+    },
+    theme: {
+        toggle: "切换主题",
+    },
+};
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 51ecd43..8b21b7a 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,7 +1,11 @@
 ---
 import Footer from "../components/Footer.astro";
 import Header from "@/components/Header.astro";
+import { getLangFromUrl, useTranslations } from "@/i18n";
+
 const { pageTitle } = Astro.props;
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 ---
 
 <!doctype html>
diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
index 20ef854..0e03c3a 100644
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
@@ -1,11 +1,9 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
-const allPosts = Object.values(
-    import.meta.glob("@/pages/posts/*.md", { eager: true }),
-);
-const tags = [
-    ...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat()),
-];
+import { getCollection } from "astro:content";
+import "@/styles/global.css";
+const allPosts = await getCollection("blog");
+const tags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())];
 const pageTitle = "Tag Index";
 ---
 
diff --git a/src/styles/global.css b/src/styles/global.css
index c621a7f..1abc1e0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,22 @@
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/MapleMono-Regular.ttf.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Maple Mono";
+  src: url("/fonts/MapleMono-Bold.ttf.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
 html {
   /* background-color: #f1f5f9; */
-  /* font-family: sans-serif; */
+  font-family: "Maple Mono", monospace;
 }
 
 body {
