diff --git a/docs/.vitepress/crowdin/en-US/pages/resource.json b/docs/.vitepress/crowdin/en-US/pages/resource.json
new file mode 100644
index 0000000000..50a43b4282
--- /dev/null
+++ b/docs/.vitepress/crowdin/en-US/pages/resource.json
@@ -0,0 +1,11 @@
+{
+  "title": "Resources",
+  "lineOne": "More resources are still in development...",
+  "download": "Download",
+  "axure": "Axure Components",
+  "axureIntro": "By importing Element Plus in Axure, you can easily apply all the components we provide during interaction design.",
+  "sketch": "Sketch Template",
+  "sketchIntro": "Apply components from Element Plus template, so you can improve design efficiency while keeping a unified visual style.",
+  "figma": "Figma Template",
+  "figmaIntro": "Newly designed Figma component library for 2022 with new features such as Auto-layout and Variants."
+}
diff --git a/docs/.vitepress/vitepress/components/globals/resource.vue b/docs/.vitepress/vitepress/components/globals/resource.vue
index f8e2db1407..a19eb62655 100644
--- a/docs/.vitepress/vitepress/components/globals/resource.vue
+++ b/docs/.vitepress/vitepress/components/globals/resource.vue
@@ -1,46 +1,51 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useLang } from '../../composables/lang'
+import resourceLocale from '../../../i18n/pages/resource.json'
+const lang = useLang()
+const resourceLang = computed(() => resourceLocale[lang.value])
+</script>
+
 <template>
   <div class="page-resource">
-    <h1>Resources</h1>
-    <p>More resources are still in development...</p>
+    <h1>{{ resourceLang.title }}</h1>
+    <p>{{ resourceLang.lineOne }}</p>
     <el-space :size="20" alignment="start">
       <el-card class="card" shadow="hover">
         <img src="/images/Axure-Components.svg" alt="axure" />
-        <h3>Axure Components</h3>
+        <h3>{{ resourceLang.axure }}</h3>
         <p>
-          By importing Element UI in Axure, you can easily apply all the
-          components we provide during interaction design.
+          {{ resourceLang.axureIntro }}
         </p>
         <a
           href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.1.0.rplib"
         >
-          <el-button type="primary">Download</el-button>
+          <el-button type="primary">{{ resourceLang.download }}</el-button>
         </a>
       </el-card>
       <el-card class="card" shadow="hover">
         <img src="/images/Sketch-Template.svg" alt="Sketch" />
-        <h3>Sketch Template</h3>
+        <h3>{{ resourceLang.sketch }}</h3>
         <p>
-          Apply components from Element template, so you can improve design
-          efficiency while keeping a unified visual style.
+          {{ resourceLang.sketchIntro }}
         </p>
         <a
           href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"
         >
-          <el-button type="primary">Download</el-button>
+          <el-button type="primary">{{ resourceLang.download }}</el-button>
         </a>
       </el-card>
       <el-card class="card" shadow="hover">
         <img src="/images/figma.png" alt="Figma" />
-        <h3>Figma Template</h3>
+        <h3>{{ resourceLang.figma }}</h3>
         <p>
-          Newly designed Figma component library for 2022 with new features such
-          as Auto-layout and Variants.
+          {{ resourceLang.figmaIntro }}
         </p>
         <a
           href="https://www.figma.com/community/file/1021254029764378306"
           target="_blank"
         >
-          <el-button type="primary">Download</el-button>
+          <el-button type="primary">{{ resourceLang.download }}</el-button>
         </a>
       </el-card>
     </el-space>