diff --git a/src/pages/Home/index.vue b/src/pages/Home/index.vue
index 94221b9..56d7664 100644
--- a/src/pages/Home/index.vue
+++ b/src/pages/Home/index.vue
@@ -132,8 +132,8 @@
           </div>
           <div class="text-center text-[10px] leading-[14px] font-[300] md:ml-[17px] md:text-left">
             <span class="font-[600]">Hi快VPN™</span> &copy; All rights reserved.<br />
-            <a href="#" class="underline">Terms of Service</a>
-            <a href="#" class="ml-2 underline">Privacy Policy</a>
+            <router-link to="/terms-of-service" class="underline">Terms of Service</router-link>
+            <router-link to="/privacy-policy" class="ml-2 underline">Privacy Policy</router-link>
           </div>
         </div>
 
diff --git a/src/pages/PrivacyPolicy/index.vue b/src/pages/PrivacyPolicy/index.vue
new file mode 100644
index 0000000..e83c955
--- /dev/null
+++ b/src/pages/PrivacyPolicy/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
+    <!-- Main Content -->
+    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
+      <!-- Mobile Images -->
+      <div class="md:hidden">
+        <img
+          src="./mobile/row-1-column-1.webp"
+          alt="Terms of Service - Part 1"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-2-column-1.webp"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-3-column-1.webp"
+          alt="Terms of Service - Part 3"
+          class="mb-0 w-full"
+        />
+      </div>
+
+      <!-- Desktop Images (2x) -->
+      <div class="hidden md:block">
+        <img
+          src="./pc/row1.png"
+          alt="Terms of Service - Part 1"
+          class="mb-10 origin-left scale-50"
+        />
+        <img
+          src="./pc/row2.png"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+          style="width: 100%; height: auto"
+        />
+        <img
+          src="./pc/row3.png"
+          alt="Terms of Service - Part 3"
+          class="m-auto mt-[60px] h-[28px] w-[594px]"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this static page
+</script>
+
+<style scoped>
+/* No additional styles needed */
+</style>
diff --git a/src/pages/PrivacyPolicy/mobile/row-1-column-1.webp b/src/pages/PrivacyPolicy/mobile/row-1-column-1.webp
new file mode 100644
index 0000000..57eb22a
Binary files /dev/null and b/src/pages/PrivacyPolicy/mobile/row-1-column-1.webp differ
diff --git a/src/pages/PrivacyPolicy/mobile/row-2-column-1.webp b/src/pages/PrivacyPolicy/mobile/row-2-column-1.webp
new file mode 100644
index 0000000..21d880d
Binary files /dev/null and b/src/pages/PrivacyPolicy/mobile/row-2-column-1.webp differ
diff --git a/src/pages/PrivacyPolicy/mobile/row-3-column-1.webp b/src/pages/PrivacyPolicy/mobile/row-3-column-1.webp
new file mode 100644
index 0000000..f4ba2ab
Binary files /dev/null and b/src/pages/PrivacyPolicy/mobile/row-3-column-1.webp differ
diff --git a/src/pages/PrivacyPolicy/pc/row1.png b/src/pages/PrivacyPolicy/pc/row1.png
new file mode 100644
index 0000000..be103a4
Binary files /dev/null and b/src/pages/PrivacyPolicy/pc/row1.png differ
diff --git a/src/pages/PrivacyPolicy/pc/row2.png b/src/pages/PrivacyPolicy/pc/row2.png
new file mode 100644
index 0000000..7180069
Binary files /dev/null and b/src/pages/PrivacyPolicy/pc/row2.png differ
diff --git a/src/pages/PrivacyPolicy/pc/row3.png b/src/pages/PrivacyPolicy/pc/row3.png
new file mode 100644
index 0000000..667f9fe
Binary files /dev/null and b/src/pages/PrivacyPolicy/pc/row3.png differ
diff --git a/src/pages/TermsOfService/index.vue b/src/pages/TermsOfService/index.vue
new file mode 100644
index 0000000..919d891
--- /dev/null
+++ b/src/pages/TermsOfService/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
+    <!-- Main Content -->
+    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
+      <!-- Mobile Images -->
+      <div class="md:hidden">
+        <img
+          src="./mobile/row-1-column-1.webp"
+          alt="Terms of Service - Part 1"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-2-column-1.webp"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-3-column-1.webp"
+          alt="Terms of Service - Part 3"
+          class="mb-0 w-full"
+        />
+      </div>
+
+      <!-- Desktop Images (2x) -->
+      <div class="hidden md:block">
+        <img src="./pc/row1.png" alt="Terms of Service - Part 1" class="mb-10 h-[18px] w-[206px]" />
+        <img
+          src="./pc/row2.png"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+          style="width: 100%; height: auto"
+        />
+        <img
+          src="./pc/row3.png"
+          alt="Terms of Service - Part 3"
+          class="m-auto mt-[60px] h-[70px] w-[693px]"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this static page
+</script>
+
+<style scoped>
+/* No additional styles needed */
+</style>
diff --git a/src/pages/TermsOfService/mobile/row-1-column-1.webp b/src/pages/TermsOfService/mobile/row-1-column-1.webp
new file mode 100644
index 0000000..bd457d0
Binary files /dev/null and b/src/pages/TermsOfService/mobile/row-1-column-1.webp differ
diff --git a/src/pages/TermsOfService/mobile/row-2-column-1.webp b/src/pages/TermsOfService/mobile/row-2-column-1.webp
new file mode 100644
index 0000000..9aee3a8
Binary files /dev/null and b/src/pages/TermsOfService/mobile/row-2-column-1.webp differ
diff --git a/src/pages/TermsOfService/mobile/row-3-column-1.webp b/src/pages/TermsOfService/mobile/row-3-column-1.webp
new file mode 100644
index 0000000..cf0334f
Binary files /dev/null and b/src/pages/TermsOfService/mobile/row-3-column-1.webp differ
diff --git a/src/pages/TermsOfService/pc/row1.png b/src/pages/TermsOfService/pc/row1.png
new file mode 100644
index 0000000..98041cf
Binary files /dev/null and b/src/pages/TermsOfService/pc/row1.png differ
diff --git a/src/pages/TermsOfService/pc/row2.png b/src/pages/TermsOfService/pc/row2.png
new file mode 100644
index 0000000..d6849d1
Binary files /dev/null and b/src/pages/TermsOfService/pc/row2.png differ
diff --git a/src/pages/TermsOfService/pc/row3.png b/src/pages/TermsOfService/pc/row3.png
new file mode 100644
index 0000000..bd84c97
Binary files /dev/null and b/src/pages/TermsOfService/pc/row3.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index 77e9f6b..6c83b98 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,6 +18,16 @@ const router = createRouter({
       name: 'user-center',
       component: () => import('../pages/UserCenter/index.vue'),
     },
+    {
+      path: '/terms-of-service',
+      name: 'terms-of-service',
+      component: () => import('../pages/TermsOfService/index.vue'),
+    },
+    {
+      path: '/privacy-policy',
+      name: 'privacy-policy',
+      component: () => import('../pages/PrivacyPolicy/index.vue'),
+    },
   ],
 })
 
diff --git a/src/styles/index.css b/src/styles/index.css
index 87ec48a..56513d4 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,3 +1,11 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('/src/styles/roboto.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 @import "tailwindcss";
 @import "tw-animate-css";
 @layer utilities {
diff --git a/src/styles/roboto.woff2 b/src/styles/roboto.woff2
new file mode 100644
index 0000000..0943c6b
Binary files /dev/null and b/src/styles/roboto.woff2 differ