diff --git a/package-lock.json b/package-lock.json
index 94754cd..8de0c32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,9 @@
     "": {
       "name": "learn-languages",
       "version": "0.1.0",
+      "license": "GPL-3.0-only",
       "dependencies": {
+        "clsx": "^2.1.1",
         "edge-tts-universal": "^1.3.2",
         "next": "15.5.3",
         "react": "19.1.0",
@@ -6394,6 +6396,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
diff --git a/package.json b/package.json
index e542bb7..b684ce6 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "edge-tts-universal": "^1.3.2",
     "next": "15.5.3",
     "react": "19.1.0",
diff --git a/public/changelog.txt b/public/changelog.txt
index 5d91c89..c2f52f9 100644
--- a/public/changelog.txt
+++ b/public/changelog.txt
@@ -1,3 +1,4 @@
+2025.10.06 更新了主页面UI
 2025.10.05 新增IPA生成与文本朗读功能
 2025.09.25 优化了主界面UI
 2025.09.19 更新了单词板，单词不再会重叠。
diff --git a/public/fonts/SourceHanSansSC-Bold.otf b/public/fonts/SourceHanSansSC-Bold.otf
new file mode 100644
index 0000000..3b33e77
Binary files /dev/null and b/public/fonts/SourceHanSansSC-Bold.otf differ
diff --git a/public/fonts/SourceHanSansSC-ExtraLight.otf b/public/fonts/SourceHanSansSC-ExtraLight.otf
new file mode 100644
index 0000000..9e51269
Binary files /dev/null and b/public/fonts/SourceHanSansSC-ExtraLight.otf differ
diff --git a/public/fonts/SourceHanSansSC-Heavy.otf b/public/fonts/SourceHanSansSC-Heavy.otf
new file mode 100644
index 0000000..149f6b8
Binary files /dev/null and b/public/fonts/SourceHanSansSC-Heavy.otf differ
diff --git a/public/fonts/SourceHanSansSC-Light.otf b/public/fonts/SourceHanSansSC-Light.otf
new file mode 100644
index 0000000..ebb1728
Binary files /dev/null and b/public/fonts/SourceHanSansSC-Light.otf differ
diff --git a/public/fonts/SourceHanSansSC-Medium.otf b/public/fonts/SourceHanSansSC-Medium.otf
new file mode 100644
index 0000000..304b3e6
Binary files /dev/null and b/public/fonts/SourceHanSansSC-Medium.otf differ
diff --git a/public/fonts/SourceHanSansSC-Normal.otf b/public/fonts/SourceHanSansSC-Normal.otf
new file mode 100644
index 0000000..5e805a0
Binary files /dev/null and b/public/fonts/SourceHanSansSC-Normal.otf differ
diff --git a/public/fonts/SourceHanSansSC-Regular.otf b/public/fonts/SourceHanSansSC-Regular.otf
new file mode 100644
index 0000000..8113ad5
Binary files /dev/null and b/public/fonts/SourceHanSansSC-Regular.otf differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5ce06e2..236618d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import localFont from "next/font/local";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -12,9 +13,45 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+const sourceHanSansSC = localFont({
+  src: [
+    {
+      path: '../../public/fonts/SourceHanSansSC-ExtraLight.otf',
+      weight: '200',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Light.otf',
+      weight: '300',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Regular.otf',
+      weight: '400',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Medium.otf',
+      weight: '500',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Bold.otf',
+      weight: '700',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Heavy.otf',
+      weight: '900',
+      style: 'normal'
+    }
+  ]
+});
+
 export const metadata: Metadata = {
   title: "Learn Languages",
   description: "A Website to Learn Languages",
+  viewport: 'width=device-width, initial-scale=1.0',
 };
 
 export default function RootLayout({
@@ -25,7 +62,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${sourceHanSansSC.className} antialiased`}
       >
         {children}
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5c5f82e..118b46c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,41 +9,95 @@ function MyLink(
   )
 }
 
-function Navbar() {
+function TopArea() {
   return (
-    <div className="flex justify-between items-center w-screen h-[96px] bg-white px-8">
-      <Link href={'/'} className="text-xl flex">
-        <Image
-          src={'/favicon.ico'}
-          alt="logo"
-          width="32"
-          height="32"
-          className="rounded-4xl">
-        </Image>
-        <span>学语言</span>
-      </Link>
-      <div className="flex gap-8 text-xl">
-        <MyLink href="/about" label="关于"></MyLink>
-        <MyLink href="https://github.com/GoddoNebianU/learn-languages" label="源码"></MyLink>
+    <div className="bg-[#35786f] text-white">
+      <div className="flex justify-between items-center w-screen h-16 px-8">
+        <Link href={'/'} className="text-xl flex">
+          <Image
+            src={'/favicon.ico'}
+            alt="logo"
+            width="32"
+            height="32"
+            className="rounded-4xl">
+          </Image>
+          <span className="font-bold">学语言</span>
+        </Link>
+        <div className="flex gap-4 text-xl">
+          <MyLink href="/changelog.txt" label="关于"></MyLink>
+          <MyLink href="https://github.com/GoddoNebianU/learn-languages" label="源码"></MyLink>
+        </div>
       </div>
-      <div></div>
+      <div className="flex justify-center items-center h-[75vh]">
+        <div className="mb-16 mx-64">
+          <h1 className="text-6xl md:text-9xl mb-8">Learn Languages</h1>
+          <p className="text-2xl md:text-5xl">Here is a very useful website to help you learn almost every language in the world, including artificial languages.</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface LinkAreaProps {
+  href: string,
+  name: string,
+  description: string,
+  color: string
+}
+function LinkArea(
+  { href, name, description, color }: LinkAreaProps
+) {
+  return (
+    <Link href={href}
+      style={{ backgroundColor: color }}
+      className={`h-32 md:h-[20vw] flex justify-center items-center`}>
+      <div className="text-white m-8">
+        <h1 className="text-4xl">{name}</h1>
+        <p className="text-xl">{description}</p>
+      </div>
+    </Link>
+  );
+}
+
+function LinkGrid() {
+  return (
+    <div className="grid grid-cols-1 grid-rows-6 md:grid-cols-3">
+
+      <LinkArea
+        href="/ipa-reader"
+        name="IPA朗读器"
+        description="生成任何已知语言的国际音标（IPA），大声朗读"
+        color="#a56068"></LinkArea>
+      <LinkArea
+        href="/word-board"
+        name="词墙"
+        description="将单词固定到一片区域，高效便捷地记忆单词"
+        color="#e9b353"></LinkArea>
+      <LinkArea
+        href="/srt-player"
+        name="逐句视频播放器"
+        description="基于SRT字幕文件，逐句播放视频以模仿母语者的发音"
+        color="#3c988d"></LinkArea>
+      <LinkArea
+        href="#"
+        name="更多功能"
+        description="开发中，敬请期待"
+        color="#578aad"></LinkArea>
     </div>
   )
 }
 
 export default function Home() {
   return (<>
-    <Navbar></Navbar>
-    <div className="bg-gray-50 flex h-screen w-full items-center justify-center">
-      <div className="bg-white m-4 p-4 rounded-2xl shadow-2xl border-gray-400 border-2 flex-col flex items-center">
-        <span className="text-4xl font-bold">Learn Languages</span>
-        <div className="LinkList flex flex-wrap sm:flex-row">
-          <MyLink href="/srt-player" label="srt-player"></MyLink>
-          <MyLink href="/word-board" label="word-board"></MyLink>
-          <MyLink href="/ipa-reader" label="ipa-reader"></MyLink>
-          <MyLink href={'/changelog.txt'} label="changelog"></MyLink>
-        </div>
-      </div>
+    <TopArea></TopArea>
+    <div className="w-screen h-64 flex justify-center font-serif items-center flex-col">
+      <p className="text-3xl">Stay hungry, stay foolish.</p>
+      <cite className="text-[#e9b353] text-xl">—— Steve Jobs</cite>
     </div>
+    <div className="bg-[#bbbbbb] w-screen h-64 flex justify-center items-center flex-col">
+      <span className="text-[100px] text-white">探索网站</span>
+      <div className="w-0 h-0 border-l-[40px] border-r-[40px] border-t-[30px] border-l-transparent border-r-transparent border-t-white"></div>
+    </div>
+    <LinkGrid></LinkGrid>
   </>);
 }