diff --git a/src/pages/agreement/complaintGuidelines.tsx b/src/app/agreement/complaintGuidelines/page.tsx
similarity index 100%
rename from src/pages/agreement/complaintGuidelines.tsx
rename to src/app/agreement/complaintGuidelines/page.tsx
diff --git a/src/pages/agreement/intellectualPropertyDescription.tsx b/src/app/agreement/intellectualPropertyDescription/page.tsx
similarity index 100%
rename from src/pages/agreement/intellectualPropertyDescription.tsx
rename to src/app/agreement/intellectualPropertyDescription/page.tsx
diff --git a/src/pages/agreement/privacyPolicy.tsx b/src/app/agreement/privacyPolicy/page.tsx
similarity index 100%
rename from src/pages/agreement/privacyPolicy.tsx
rename to src/app/agreement/privacyPolicy/page.tsx
diff --git a/src/pages/agreement/registrationAgreement.tsx b/src/app/agreement/registrationAgreement/page.tsx
similarity index 100%
rename from src/pages/agreement/registrationAgreement.tsx
rename to src/app/agreement/registrationAgreement/page.tsx
diff --git a/src/app/download/page.tsx b/src/app/download/page.tsx
index db3c51a..8de75e9 100644
--- a/src/app/download/page.tsx
+++ b/src/app/download/page.tsx
@@ -2,6 +2,8 @@
 
 import Image from 'next/image';
 
+import AppLogo from '@/components/AppLogo';
+
 import { download } from '@/utils/download';
 
 import useUA from '@/hooks/useUA';
@@ -36,12 +38,7 @@ export default function Download() {
         </div>
       )}
 
-      <div className="flex flex-col items-center mt-[151px]">
-        <Image className="w-[90px] h-[90px]" width={90} height={90} src="/img/app_icon_white_bg.svg" alt="queyue" />
-        <p className="text-[20px] leading-[24px] font-['Fontquan-XinYiJiXiangSong-Regular'] mt-[20px] tracking-[3px]">
-          独立 不独于世
-        </p>
-      </div>
+      <AppLogo className="mt-[151px]" />
 
       <button
         className="w-[283px] h-[48px] flex items-center justify-center bg-[#B44343] font-medium text-[17px] rounded-full mt-[44px]"
diff --git a/src/app/globals.css b/src/app/globals.css
index 52a553d..70a28ff 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,31 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: 'PingFang SC-Regular';
-  src: url('/fonts/ping-fang-hei-ti-zhun-jian.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'PingFang SC-Medium';
-  src: url('/fonts/pingfang-sc-medium.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'PingFang SC-Semibold';
-  src: url('/fonts/pingfangsc-semibold.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'Abhaya Libre SemiBold-Regular';
-  src: url('/fonts/ping-fang-hei-ti-zhun-jian.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Fontquan-XinYiJiXiangSong-Regular';
-  src: url('/fonts/Fontquan-XinYiJiXiangSong.ttf') format('truetype');
-}
-
 :root {
   --body-bg-color: #1a1a1a;
 }
@@ -39,7 +14,6 @@
 body {
   background: var(--body-bg-color);
   font-family: 'PingFang SC-Regular', Helvetica;
-
   /* padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom); */
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0cc81a4..21ef714 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,37 +1,31 @@
-'use client';
+import LibFlexible from '@/components/LibFlexible';
 
-import { useState, useEffect } from 'react';
+import { RegularFont } from '@/utils/font';
 
-import './globals.css';
+import type { Metadata, Viewport } from 'next';
 
-export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-  const [loaded, setLoaded] = useState(false);
+import './globals.css';
 
-  const setRem = async () => {
-    await import('lib-flexible');
-    setLoaded(true);
-  };
+export const metadata: Metadata = {
+  title: '雀乐',
+  description: '独立 不独于世',
+};
 
-  useEffect(() => {
-    setRem();
-    window.addEventListener('resize', setRem);
-    return () => {
-      window.removeEventListener('resize', setRem);
-    };
-  }, []);
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  minimumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover',
+};
 
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="zn-ch">
-      <head>
-        <meta
-          name="viewport"
-          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
-        />
-        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
-        <title>雀乐</title>
-        <meta name="description" content="独立 不独于世" />
-      </head>
-      <body>{loaded ? children : null}</body>
+    <html lang="zn-ch" className={RegularFont.className}>
+      <body>
+        <LibFlexible>{children}</LibFlexible>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5a2984f..ac2ec0a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,6 +5,8 @@ import { useRef } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import AppLogo from '@/components/AppLogo';
+
 import { download } from '@/utils/download';
 
 import useUA from '@/hooks/useUA';
@@ -36,10 +38,7 @@ export default function Home() {
         {!inWX && <h1 className="text-center text-[17px] h-[44px] leading-[44px]">雀乐</h1>}
 
         {/* App logo */}
-        <div className="flex flex-col items-center absolute top-[25%]">
-          <Image className="w-[90px] h-[90px]" width={90} height={90} src="/img/app_icon_white_bg.svg" alt="queyue" />
-          <p className="text-[20px] font-['Fontquan-XinYiJiXiangSong-Regular'] mt-3 tracking-[3px]">独立 不独于世</p>
-        </div>
+        <AppLogo className="absolute top-[22%]" />
 
         <div className="w-full flex flex-col items-center absolute bottom-0">
           <button
@@ -135,18 +134,18 @@ export default function Home() {
           </p>
 
           {/* <h5 className="text-[#ffffffb2] text-center text-[15px] leading-[21px] mt-[47px] mb-[4px]">贡献者</h5>
-          <p className="text-center text-[20px] font-medium leading-[33.6px] flex items-center justify-center">
-            <span className="relative">
-              加入我们
-              <Image
-                className="w-[24px] h-[24px] absolute top-[50%] right-[-24px] translate-y-[-50%]"
-                width={24}
-                height={24}
-                src="/img/icon.svg"
-                alt="arrow-right"
-              />
-            </span>
-          </p> */}
+            <p className="text-center text-[20px] font-medium leading-[33.6px] flex items-center justify-center">
+              <span className="relative">
+                加入我们
+                <Image
+                  className="w-[24px] h-[24px] absolute top-[50%] right-[-24px] translate-y-[-50%]"
+                  width={24}
+                  height={24}
+                  src="/img/icon.svg"
+                  alt="arrow-right"
+                />
+              </span>
+            </p> */}
 
           <Link
             className="block w-[fit-content] mt-[68px] ml-auto mr-auto"
diff --git a/src/components/AppLogo/index.tsx b/src/components/AppLogo/index.tsx
new file mode 100644
index 0000000..3f5f9a8
--- /dev/null
+++ b/src/components/AppLogo/index.tsx
@@ -0,0 +1,15 @@
+import Image from 'next/image';
+
+import { XinYiJiXiangSongFont } from '@/utils/font';
+
+export default function AppLogo(props: { className?: string }) {
+  const cls = props.className || '';
+  return (
+    <div className={`flex flex-col items-center ${cls}`}>
+      <Image className="w-[90px] h-[90px]" width={90} height={90} src="/img/app_icon_white_bg.svg" alt="queyue" />
+      <p className={`${XinYiJiXiangSongFont.className} text-[20px] leading-[24px] mt-[20px] tracking-[3px]`}>
+        独立 不独于世
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/LibFlexible/index.tsx b/src/components/LibFlexible/index.tsx
new file mode 100644
index 0000000..ebd279d
--- /dev/null
+++ b/src/components/LibFlexible/index.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function LibFlexible({ children }: Readonly<{ children: React.ReactNode }>) {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    const setRem = async () => {
+      await import('lib-flexible');
+      setLoaded(true);
+    };
+    setRem();
+  }, []);
+
+  return loaded ? children : null;
+}
diff --git a/src/utils/font.ts b/src/utils/font.ts
new file mode 100644
index 0000000..4b9fe6a
--- /dev/null
+++ b/src/utils/font.ts
@@ -0,0 +1,31 @@
+import localFont from 'next/font/local';
+
+export const RegularFont = localFont({
+  src: '../../public/fonts/ping-fang-hei-ti-zhun-jian.ttf',
+  display: 'swap',
+});
+
+export const MediumFont = localFont({
+  src: '../../public/fonts/pingfang-sc-medium.otf',
+  display: 'swap',
+});
+
+export const SemiboldFont = localFont({
+  src: '../../public/fonts/pingfangsc-semibold.otf',
+  display: 'swap',
+});
+
+export const AbhayaFont = localFont({
+  src: '../../public/fonts/AlibabaPuHuiTi-3-65-Medium.woff2',
+  display: 'swap',
+});
+
+export const AbhayaSemiboldFont = localFont({
+  src: '../../public/fonts/abhayalibre-semibold.ttf',
+  display: 'swap',
+});
+
+export const XinYiJiXiangSongFont = localFont({
+  src: '../../public/fonts/Fontquan-XinYiJiXiangSong.ttf',
+  display: 'swap',
+});