diff --git a/messages/en.json b/messages/en.json
index 4f783b0..f8ffc5e 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -13,5 +13,48 @@
     "pDescription": "A browser interface for OpenAI Sora, generate text-to-video simply.There is currently no available interface, and all videos are examples from the OpenAI official website.",
     "soraVideoExample": "Example video generated by Sora",
     "prompt": "Prompt"
+  },
+  "privacyPolicy": {
+    "title": "Privacy Policy ｜ Sora Webui",
+    "mainDescription": "A browser interface for OpenAI Sora, generate text-to-video simply.",
+    "h1": "Privacy Policy",
+    "date": "Last updated: February 19, 2024",
+    "desc": "Thank you for choosing SoraWebui! This Privacy Policy outlines how we collect, use, and protect your information when you use our website located at ",
+    "h4_1": "1、Information We Collect:",
+    "h4_1_pa": "a. Personal Data: When you use SoraWebui, we may collect your name, email address, and payment information for order processing purposes.",
+    "h4_1_pb": "b. Non-Personal Data: We may also collect non-personal data through web cookies to enhance your browsing experience.",
+    "h4_2": "2、Purpose of Data Collection:",
+    "h4_2_p": "We collect your personal data solely for order processing purposes.",
+    "h4_3": "3、Data Sharing:",
+    "h4_3_p": "We do not share your personal data with any third parties.",
+    "h4_4": "4、Children's Privacy:",
+    "h4_4_p": "SoraWebui does not knowingly collect any personal data from children.",
+    "h4_5": "5、Updates to the Privacy Policy:",
+    "h4_5_p": "We will notify users of any updates to this Privacy Policy via email.",
+    "h4_6": "6、Contact Information:",
+    "h4_6_p": "If you have any questions or concerns regarding our Privacy Policy, please contact us at"
+  },
+  "termsOfService": {
+    "title": "Terms of Service ｜ Sora Webui",
+    "mainDescription": "A browser interface for OpenAI Sora, generate text-to-video simply.",
+    "h1": "Terms of Service",
+    "date": "Last updated: February 19, 2024",
+    "desc": "These Terms of Service (\"Terms\") govern your access to and use of SoraWebui (the \"Service\"), provided by SoraWebui (\"we\" or \"us\"). By accessing or using the Service, you agree to be bound by these Terms.",
+    "h4_1": "1、Description of Service: ",
+    "h4_1_p": "SoraWebui provides a browser interface for OpenAI Sora, allowing users to generate text-to-video easily.",
+    "h4_2": "2、Ownership: ",
+    "h4_2_p": "The ownership of the video generated from the text belongs to the original user.",
+    "h4_3": "3、User Data:",
+    "h4_3_p": "We collect and store user data including name, email, and payment information. We handle this data in accordance with our Privacy Policy.",
+    "h4_4": "4、Non-Personal Data Collection: ",
+    "h4_4_p": "We use web cookies to collect non-personal data. For more information, please refer to our Privacy Policy.",
+    "h4_5": "5、Privacy Policy:",
+    "h4_5_p": "Our Privacy Policy explains how we collect, use, and disclose information about you. By using our Service, you agree to our Privacy Policy, which can be found at ",
+    "h4_6": "6、Governing Law: ",
+    "h4_6_p": "These Terms are governed by the laws of the United States of America.",
+    "h4_7": "7、Updates to Terms: ",
+    "h4_7_p": "We may update these Terms from time to time. We will notify users of any material changes via email.",
+    "h4_8": "8、Contact Information:",
+    "h4_8_p": "If you have any questions or concerns regarding our Privacy Policy, please contact us at "
   }
 }
diff --git a/messages/zh.json b/messages/zh.json
index 1cc9b7b..51f9101 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -13,5 +13,48 @@
     "pDescription": "OpenAI Sora 的浏览器界面，可轻松生成文本到视频。暂无可使用接口，所有视频均为OpenAI官网示例。",
     "soraVideoExample": "Sora 生成的示例视频",
     "prompt": "提示词"
+  },
+  "privacyPolicy": {
+    "title": "隐私政策 ｜ Sora Webui",
+    "mainDescription": "OpenAI Sora 的浏览器界面，简单生成文本到视频。",
+    "h1": "隐私政策",
+    "date": "最后更新日期：2024年2月19日",
+    "desc": "感谢您选择 SoraWebui！本隐私政策概述了您在使用我们位于的网站时我们如何收集、使用和保护您的信息",
+    "h4_1": "1、我们收集的信息:",
+    "h4_1_pa": "a. 个人数据: 当您使用 SoraWebui 时，我们可能会收集您的姓名、电子邮件地址和支付信息，以便进行订单处理。",
+    "h4_1_pb": "b. 非个人数据: 我们还可能通过网络 Cookie 收集非个人数据，以增强您的浏览体验。",
+    "h4_2": "2、数据收集目的:",
+    "h4_2_p": "我们仅收集您的个人数据以进行订单处理。",
+    "h4_3": "3、数据共享:",
+    "h4_3_p": "我们不会与任何第三方共享您的个人数据。",
+    "h4_4": "4、儿童隐私:",
+    "h4_4_p": "SoraWebui 不会故意收集儿童的任何个人数据。",
+    "h4_5": "5、隐私政策更新:",
+    "h4_5_p": "我们将通过电子邮件通知用户有关本隐私政策的任何更新。",
+    "h4_6": "6、联系信息:",
+    "h4_6_p": "如果您对我们的隐私政策有任何疑问或顾虑，请通过以下方式与我们联系："
+  },
+  "termsOfService": {
+    "title": "服务条款｜ Sora Webui",
+    "mainDescription": "OpenAI Sora 的浏览器界面，简单生成文本到视频。",
+    "h1": "服务条款",
+    "date": "最后更新日期：2024年2月19日",
+    "desc": "这些服务条款（“条款”）管辖您对 SoraWebui（“服务”）的访问和使用，由 SoraWebui（“我们”或“我们”）提供。通过访问或使用服务，您同意受这些条款的约束。",
+    "h4_1": "1、服务描述：",
+    "h4_1_p": "SoraWebui 提供了一个 OpenAI Sora 的浏览器界面，允许用户轻松生成文本到视频。",
+    "h4_2": "2、所有权：",
+    "h4_2_p": "从文本生成的视频的所有权属于原始用户。",
+    "h4_3": "3、用户数据：",
+    "h4_3_p": "我们收集和存储用户数据，包括姓名、电子邮件和付款信息。我们根据我们的隐私政策处理这些数据。",
+    "h4_4": "4、非个人数据收集：",
+    "h4_4_p": "我们使用网络cookie来收集非个人数据。有关更多信息，请参阅我们的隐私政策。",
+    "h4_5": "5、隐私政策：",
+    "h4_5_p": "我们的隐私政策解释了我们如何收集、使用和披露关于您的信息。通过使用我们的服务，您同意我们的隐私政策，该政策可在以下网址找到 ",
+    "h4_6": "6、适用法律：",
+    "h4_6_p": "这些条款受美国法律管辖。",
+    "h4_7": "7、条款更新：",
+    "h4_7_p": "我们可能会不时更新这些条款。我们将通过电子邮件通知用户任何重大变更。",
+    "h4_8": "8、联系信息：",
+    "h4_8_p": "如果您对我们的隐私政策有任何疑问或关注，请联系我们："
   }
 }
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 9fc8d53..13ff938 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -44,7 +44,7 @@ export default async function LocaleLayout({
     {/*    }}*/}
     {/*  />*/}
     {/*</head>*/}
-    <body suppressHydrationWarning={true} className={clsx(inter.className, 'flex h-full flex-col')}>
+    <body suppressHydrationWarning={true} className={clsx(inter.className, 'flex h-full flex-col bg-[#020d24]')}>
     <CommonProvider>
       {children}
     </CommonProvider>
diff --git a/src/app/[locale]/privacy-policy/PageComponent.tsx b/src/app/[locale]/privacy-policy/PageComponent.tsx
new file mode 100644
index 0000000..c32fd20
--- /dev/null
+++ b/src/app/[locale]/privacy-policy/PageComponent.tsx
@@ -0,0 +1,55 @@
+import Header from '~/components/Header';
+import Footer from '~/components/Footer';
+import HeadInfo from "~/components/HeadInfo";
+
+const PageComponent = ({
+                          locale='',
+                          data,
+                          dataIndex,
+                       }) => {
+
+  return (
+    <>
+      <HeadInfo
+        title={data('title')}
+        description={data('mainDescription')}
+        locale={locale}
+        page={"/privacy-policy"}
+      />
+      <Header
+        locale={locale}
+        page={'privacy-policy'}
+      />
+      <main className="w-[95%] md:w-[65%] lg:w-[55%] 2xl:w-[45%] mx-auto h-full my-8">
+        <div className="p-6 prose mx-auto text-gray-300">
+          <h1 className="text-3xl font-extrabold pb-6 text-white">
+            {data('h1')}
+          </h1>
+          <p>{data('date')}</p>
+          <p>{data('desc')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_1')}</h4>
+          <p>{data('h4_1_pa')}</p>
+          <p>{data('h4_1_pb')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_2')}</h4>
+          <p>{data('h4_2_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_3')}</h4>
+          <p>{data('h4_3_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_4')}</h4>
+          <p>{data('h4_4_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_5')}</h4>
+          <p>{data('h4_5_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_6')}</h4>
+          <p>
+            {data('h4_6_p')}{" "}<a href="mailto:hello@sorawebui.com" className={"text-white"}>hello@sorawebui.com</a>.
+          </p>
+        </div>
+      </main>
+      <Footer
+        locale={locale}
+        description={dataIndex('description')}
+      />
+    </>
+  )
+}
+
+export default PageComponent
diff --git a/src/app/[locale]/privacy-policy/page.tsx b/src/app/[locale]/privacy-policy/page.tsx
new file mode 100644
index 0000000..b608388
--- /dev/null
+++ b/src/app/[locale]/privacy-policy/page.tsx
@@ -0,0 +1,20 @@
+import {getTranslations, unstable_setRequestLocale} from 'next-intl/server';
+
+import PageComponent from './PageComponent';
+
+export default async function PageContent({params: {locale=''}}) {
+  // Enable static rendering
+  unstable_setRequestLocale(locale);
+
+  const t = await getTranslations('privacyPolicy');
+  const tIndex = await getTranslations('IndexPage');
+
+  return (
+    <PageComponent
+      locale={locale}
+      data={t}
+      dataIndex={tIndex}
+    >
+    </PageComponent>
+  )
+}
diff --git a/src/app/[locale]/terms-of-service/PageComponent.tsx b/src/app/[locale]/terms-of-service/PageComponent.tsx
new file mode 100644
index 0000000..7ac0a2b
--- /dev/null
+++ b/src/app/[locale]/terms-of-service/PageComponent.tsx
@@ -0,0 +1,63 @@
+import Header from '~/components/Header';
+import Footer from '~/components/Footer';
+import HeadInfo from "~/components/HeadInfo";
+
+const PageComponent = ({
+                         locale = '',
+                         data,
+                         dataIndex
+                       }) => {
+
+  return (
+    <>
+      <HeadInfo
+        title={data('title')}
+        description={data('mainDescription')}
+        locale={locale}
+        page={"/terms-of-service"}
+      />
+      <Header
+        locale={locale}
+        page={'terms-of-service'}
+      />
+      <main className="w-[95%] md:w-[65%] lg:w-[55%] 2xl:w-[45%] mx-auto h-full my-8">
+        <div className="p-6 prose mx-auto my-auto text-gray-300">
+          <h1 className="text-3xl font-extrabold pb-6 text-white">
+            {data('h1')}
+          </h1>
+          <p>{data('date')}</p>
+          <p>{data('desc')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_1')}</h4>
+          <p>{data('h4_1_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_2')}</h4>
+          <p>{data('h4_2_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_3')}</h4>
+          <p>{data('h4_3_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_4')}</h4>
+          <p>{data('h4_4_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_5')}</h4>
+          <p>
+            {data('h4_5_p')}<a
+            href={`https://whooper.ai/${locale}/privacy-policy`}
+            className={"text-white"}>https://sorawebui.com/privacy-policy</a>
+          </p>
+          <h4 className={"text-white font-bold"}>{data('h4_6')}</h4>
+          <p>{data('h4_6_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_7')}</h4>
+          <p>{data('h4_7_p')}</p>
+          <h4 className={"text-white font-bold"}>{data('h4_8')}</h4>
+          <p>
+            {data('h4_8_p')}<a href="mailto:hello@sorawebui.com" className={"text-white"}>hello@sorawebui.com</a>.
+          </p>
+        </div>
+      </main>
+      <Footer
+        locale={locale}
+        description={dataIndex('description')}
+      />
+    </>
+  )
+
+}
+
+export default PageComponent
diff --git a/src/app/[locale]/terms-of-service/page.tsx b/src/app/[locale]/terms-of-service/page.tsx
new file mode 100644
index 0000000..d6749ed
--- /dev/null
+++ b/src/app/[locale]/terms-of-service/page.tsx
@@ -0,0 +1,22 @@
+import {getTranslations, unstable_setRequestLocale} from 'next-intl/server';
+
+import PageComponent from './PageComponent';
+
+export default async function PageContent({params: {locale=''}}) {
+  // Enable static rendering
+  unstable_setRequestLocale(locale);
+
+  const t = await getTranslations('termsOfService');
+  const tIndex = await getTranslations('IndexPage');
+
+
+  return (
+    <PageComponent
+      locale={locale}
+      data={t}
+      dataIndex={tIndex}
+    >
+    </PageComponent>
+  )
+
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d67accf..1934382 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,21 +3,20 @@ import Link from "next/link";
 
 const navigation = {
   product: [
-    {name: 'SoraWebui', href: 'https://sorawebui.com'},
-    {name: 'Whooper', href: 'https://whooper.ai'},
+    {name: 'SoraWebui', href: 'https://sorawebui.com'}
   ],
   legal: [
-    {name: 'Privacy Policy', href: '#'},
-    {name: 'Terms & Conditions', href: '#'},
+    {name: 'Privacy Policy', href: '/privacy-policy'},
+    {name: 'Terms & Conditions', href: '/terms-of-service'},
   ],
   social: [
     {
       name: 'Official',
       href: 'https://sorawebui.com',
       icon: () => (
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"
              className="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round"
+          <path strokeLinecap="round" strokeLinejoin="round"
                 d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0 0 12 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75Z"/>
         </svg>
       ),
diff --git a/src/components/HeadInfo.tsx b/src/components/HeadInfo.tsx
new file mode 100644
index 0000000..281c9d9
--- /dev/null
+++ b/src/components/HeadInfo.tsx
@@ -0,0 +1,44 @@
+import {languageList} from "~/configs/supportLanguage";
+
+const HeadInfo = ({
+                    title= "",
+                    description= "",
+                    page="",
+                    locale = "en"
+                  }) => {
+  return (
+    <>
+      <title>{title}</title>
+      <meta name="description" content={description}/>
+      {
+        languageList.map((item) => {
+          const currentPage = page;
+          let hrefLang = item.code;
+          if (item.lang == 'en') {
+            hrefLang = 'x-default';
+          }
+          let href = `${process.env.NEXT_PUBLIC_SITE_URL}/${item.lang}${currentPage}`;
+          if (item.lang == 'en') {
+            href = `${process.env.NEXT_PUBLIC_SITE_URL}${currentPage}`;
+          }
+          return <link key={href} rel="alternate" hrefLang={hrefLang} href={href}/>
+        })
+      }
+      {
+        languageList.map((item) => {
+          const currentPage = page;
+          let hrefLang = item.code;
+          let href = `${process.env.NEXT_PUBLIC_SITE_URL}/${item.lang}${currentPage}`;
+          if (item.lang == 'en') {
+            href = `${process.env.NEXT_PUBLIC_SITE_URL}${currentPage}`;
+          }
+          if (locale == item.lang) {
+            return <link key={href + 'canonical'} rel="canonical" hrefLang={hrefLang} href={href}/>
+          }
+        })
+      }
+    </>
+  )
+}
+
+export default HeadInfo
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ff9da70..1f1cbc7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -84,6 +84,9 @@ export default function Header({
                   {
                     languages.map((item) => {
                       let hrefValue = `/${item.lang}`;
+                      if (page) {
+                        hrefValue = `/${item.lang}/${page}`;
+                      }
                       return (
                         <Menu.Item key={item.lang}>
                           <Link href={hrefValue} onClick={() => checkLocalAndLoading(item.lang)}>
diff --git a/src/configs/supportLanguage.ts b/src/configs/supportLanguage.ts
new file mode 100644
index 0000000..3734f06
--- /dev/null
+++ b/src/configs/supportLanguage.ts
@@ -0,0 +1,21 @@
+
+export const languageList = [
+  {
+    code: "en-US",
+    lang: "en",
+    language: "English",
+  },
+  {
+    code: "zh-CN",
+    lang: "zh",
+    language: "简体中文",
+  }
+]
+
+export const getLanguageByLang = (lang) => {
+  for (let i = 0; i < languageList.length; i++) {
+    if (lang == languageList[i].lang) {
+      return  languageList[i];
+    }
+  }
+}