diff --git a/codesandbox@3/02-client/02-use-watcher/react-search.en.jsx b/codesandbox@3/02-client/02-use-watcher/react-search.en.jsx
index 5fa87e4ee7..fd5789dd4b 100644
--- a/codesandbox@3/02-client/02-use-watcher/react-search.en.jsx
+++ b/codesandbox@3/02-client/02-use-watcher/react-search.en.jsx
@@ -1,4 +1,4 @@
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { useState } from 'react';
 import { alovaInstance } from './api';
 
diff --git a/codesandbox@3/02-client/02-use-watcher/react-search.zh.jsx b/codesandbox@3/02-client/02-use-watcher/react-search.zh.jsx
index 3b78e2fde5..98e0f66ab6 100644
--- a/codesandbox@3/02-client/02-use-watcher/react-search.zh.jsx
+++ b/codesandbox@3/02-client/02-use-watcher/react-search.zh.jsx
@@ -1,4 +1,4 @@
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { useState } from 'react';
 import { alovaInstance } from './api';
 
diff --git a/codesandbox@3/02-client/02-use-watcher/svelte-search.en.svelte b/codesandbox@3/02-client/02-use-watcher/svelte-search.en.svelte
index 8abd29e142..31072c38f7 100644
--- a/codesandbox@3/02-client/02-use-watcher/svelte-search.en.svelte
+++ b/codesandbox@3/02-client/02-use-watcher/svelte-search.en.svelte
@@ -1,33 +1,34 @@
-<script>
-import { writable } from 'svelte/store';
-
-//Create method instance
-const filterTodoList = userId => {
-  return alovaInstance.Get(`/users/${userId}/todos`);
-};
-const userId = writable(0);
-const { loading, data, error } = useWatcher(
-  // Parameters must be set to functions that return method instances
-  () => filterTodoList($userId),
-
-  // The monitored status array, these status changes will trigger a request
-  [userId]
-);
-</script>
-
-<select bind:value="{$userId}">
-  <option value="{1}">User 1</option>
-  <option value="{2}">User 2</option>
-  <option value="{3}">User 3</option>
-</select>
-
-<!-- Render the filtered todo list -->
-{#if $loading}
-<div>Loading...</div>
-{:else}
-<ul>
-  {#each $data as todo}
-    <li class="todo-title">{{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}</li>
-  {/each}
-</ul>
-{/if}
\ No newline at end of file
+<script>
+import { writable } from 'svelte/store';
+import { useWatcher } from 'alova/client';
+
+//Create method instance
+const filterTodoList = userId => {
+  return alovaInstance.Get(`/users/${userId}/todos`);
+};
+const userId = writable(0);
+const { loading, data, error } = useWatcher(
+  // Parameters must be set to functions that return method instances
+  () => filterTodoList($userId),
+
+  // The monitored status array, these status changes will trigger a request
+  [userId]
+);
+</script>
+
+<select bind:value="{$userId}">
+  <option value="{1}">User 1</option>
+  <option value="{2}">User 2</option>
+  <option value="{3}">User 3</option>
+</select>
+
+<!-- Render the filtered todo list -->
+{#if $loading}
+<div>Loading...</div>
+{:else}
+<ul>
+  {#each $data as todo}
+    <li class="todo-title">{{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}</li>
+  {/each}
+</ul>
+{/if}
diff --git a/codesandbox@3/02-client/02-use-watcher/svelte-search.zh.svelte b/codesandbox@3/02-client/02-use-watcher/svelte-search.zh.svelte
index e2ed7b7f02..84beb80acb 100644
--- a/codesandbox@3/02-client/02-use-watcher/svelte-search.zh.svelte
+++ b/codesandbox@3/02-client/02-use-watcher/svelte-search.zh.svelte
@@ -1,33 +1,34 @@
-<script>
-import { writable } from 'svelte/store';
-
-// 创建method实例
-const filterTodoList = userId => {
-  return alovaInstance.Get(`/users/${userId}/todos`);
-};
-const userId = writable(0);
-const { loading, data, error } = useWatcher(
-  // 参数必须设置为返回method实例的函数
-  () => filterTodoList($userId),
-
-  // 被监听的状态数组，这些状态变化将会触发一次请求
-  [userId]
-);
-</script>
-
-<select bind:value="{$userId}">
-  <option value="{1}">User 1</option>
-  <option value="{2}">User 2</option>
-  <option value="{3}">User 3</option>
-</select>
-
-<!-- 渲染筛选后的todo列表 -->
-{#if $loading}
-<div>Loading...</div>
-{:else}
-<ul>
-  {#each $data as todo}
-    <li class="todo-title">{{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}</li>
-  {/each}
-</ul>
-{/if}
\ No newline at end of file
+<script>
+import { writable } from 'svelte/store';
+import { useWatcher } from 'alova/client';
+
+// 创建method实例
+const filterTodoList = userId => {
+  return alovaInstance.Get(`/users/${userId}/todos`);
+};
+const userId = writable(0);
+const { loading, data, error } = useWatcher(
+  // 参数必须设置为返回method实例的函数
+  () => filterTodoList($userId),
+
+  // 被监听的状态数组，这些状态变化将会触发一次请求
+  [userId]
+);
+</script>
+
+<select bind:value="{$userId}">
+  <option value="{1}">User 1</option>
+  <option value="{2}">User 2</option>
+  <option value="{3}">User 3</option>
+</select>
+
+<!-- 渲染筛选后的todo列表 -->
+{#if $loading}
+<div>Loading...</div>
+{:else}
+<ul>
+  {#each $data as todo}
+    <li class="todo-title">{{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}</li>
+  {/each}
+</ul>
+{/if}
diff --git a/codesandbox@3/02-client/02-use-watcher/vueComposition-search.en.vue b/codesandbox@3/02-client/02-use-watcher/vueComposition-search.en.vue
index 000bd74870..a26b96aef8 100644
--- a/codesandbox@3/02-client/02-use-watcher/vueComposition-search.en.vue
+++ b/codesandbox@3/02-client/02-use-watcher/vueComposition-search.en.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { ref } from 'vue';
 import { alovaInstance } from './api';
 
diff --git a/codesandbox@3/02-client/02-use-watcher/vueComposition-search.zh.vue b/codesandbox@3/02-client/02-use-watcher/vueComposition-search.zh.vue
index b7a3729a95..98da8f67dd 100644
--- a/codesandbox@3/02-client/02-use-watcher/vueComposition-search.zh.vue
+++ b/codesandbox@3/02-client/02-use-watcher/vueComposition-search.zh.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { ref } from 'vue';
 import { alovaInstance } from './api';
 
diff --git a/codesandbox@3/02-client/02-use-watcher/vueOptions-search.en.vue b/codesandbox@3/02-client/02-use-watcher/vueOptions-search.en.vue
index 46f14732ae..c7810c6cda 100644
--- a/codesandbox@3/02-client/02-use-watcher/vueOptions-search.en.vue
+++ b/codesandbox@3/02-client/02-use-watcher/vueOptions-search.en.vue
@@ -18,7 +18,7 @@
 
 <script>
 import { mapAlovaHook } from '@alova/vue-options';
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { alovaInstance } from './api';
 
 // Create method instance
diff --git a/codesandbox@3/02-client/02-use-watcher/vueOptions-search.zh.vue b/codesandbox@3/02-client/02-use-watcher/vueOptions-search.zh.vue
index 562330f19b..98b8ed482a 100644
--- a/codesandbox@3/02-client/02-use-watcher/vueOptions-search.zh.vue
+++ b/codesandbox@3/02-client/02-use-watcher/vueOptions-search.zh.vue
@@ -18,7 +18,7 @@
 
 <script>
 import { mapAlovaHook } from '@alova/vue-options';
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { alovaInstance } from './api';
 
 // 创建method实例
diff --git a/i18n/zh-CN/code.json b/i18n/zh-CN/code.json
index a445ffec9d..fac041d69d 100644
--- a/i18n/zh-CN/code.json
+++ b/i18n/zh-CN/code.json
@@ -272,11 +272,11 @@
   },
 
   "homepage.title": {
-    "message": "轻量级请求策略库",
+    "message": "创新的下一代请求工具",
     "description": "The title of web page"
   },
   "homepage.tagline": {
-    "message": "一行代码完成各种复杂场景的网络请求，别再花时间在请求这件小事上了，交给我们",
+    "message": "极致地提升你的API接入效率，节约大脑，仅需一步",
     "description": "网站tagline"
   },
   "homepage.relationTitle": {
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/02-getting-started/02-quick-start.md b/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/02-getting-started/02-quick-start.md
index 8fffd8fd92..64e56777cd 100644
--- a/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/02-getting-started/02-quick-start.md
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/02-getting-started/02-quick-start.md
@@ -4,7 +4,7 @@ title: 快速开始
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 
 import quickStartGET from '!!raw-loader!@site/codesandbox/01-getting-started/02-first-request/get.js';
 import quickStartPOST from '!!raw-loader!@site/codesandbox/01-getting-started/02-first-request/post.js';
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/03-combine-framework/02-use-request.md b/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/03-combine-framework/02-use-request.md
index 118b0db74d..5c13f89603 100644
--- a/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/03-combine-framework/02-use-request.md
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/03-combine-framework/02-use-request.md
@@ -5,7 +5,7 @@ title: 自动管理请求状态
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 
 import useRequestVue from '!!raw-loader!@site/codesandbox/01-getting-started/03-combine-framework/vueComposition-useRequest.zh.vue';
 import useRequestReact from '!!raw-loader!@site/codesandbox/01-getting-started/03-combine-framework/react-useRequest.zh.jsx';
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md b/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md
index 1c7914d824..d7b319d791 100644
--- a/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md
@@ -4,7 +4,7 @@ title: 监听请求
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 import CodeBlock from '@theme/CodeBlock';
 import useWatcherSearchVue from '!!raw-loader!@site/codesandbox/03-learning/04-use-watcher/vueComposition-search.zh.vue';
 import useWatcherSearchReact from '!!raw-loader!@site/codesandbox/03-learning/04-use-watcher/react-search.zh.jsx';
diff --git a/src/components/EmbedSandpack.tsx b/src/components/EmbedSandpack.tsx
index d530c72779..f793ea99bc 100644
--- a/src/components/EmbedSandpack.tsx
+++ b/src/components/EmbedSandpack.tsx
@@ -1,7 +1,7 @@
-import alovaReact from '!!raw-loader!@site/codesandbox/00-create-alova/react';
-import alovaSvelte from '!!raw-loader!@site/codesandbox/00-create-alova/svelte';
-import alovaVueComposition from '!!raw-loader!@site/codesandbox/00-create-alova/vueComposition';
-import alovaVueOptions from '!!raw-loader!@site/codesandbox/00-create-alova/vueOptions';
+import alovaReact from '!!raw-loader!@site/codesandbox@3/00-create-alova/react';
+import alovaSvelte from '!!raw-loader!@site/codesandbox@3/00-create-alova/svelte';
+import alovaVueComposition from '!!raw-loader!@site/codesandbox@3/00-create-alova/vueComposition';
+import alovaVueOptions from '!!raw-loader!@site/codesandbox@3/00-create-alova/vueOptions';
 import { Sandpack } from '@codesandbox/sandpack-react';
 import { SandpackPredefinedTemplate } from '@codesandbox/sandpack-react/unstyled';
 import { amethyst, monokaiPro } from '@codesandbox/sandpack-themes';
@@ -125,7 +125,7 @@ const EmbedSandpack = ({
   }
 
   const dependencies = {
-    alova: 'beta',
+    alova: 'latest',
     ...(targetEntry.deps || {})
   };
   const { colorMode } = useColorMode();
diff --git a/src/components/EmbedSandpackV2.tsx b/src/components/EmbedSandpackV2.tsx
new file mode 100644
index 0000000000..a43106c5aa
--- /dev/null
+++ b/src/components/EmbedSandpackV2.tsx
@@ -0,0 +1,152 @@
+import alovaReact from '!!raw-loader!@site/codesandbox/00-create-alova/react';
+import alovaSvelte from '!!raw-loader!@site/codesandbox/00-create-alova/svelte';
+import alovaVueComposition from '!!raw-loader!@site/codesandbox/00-create-alova/vueComposition';
+import alovaVueOptions from '!!raw-loader!@site/codesandbox/00-create-alova/vueOptions';
+import { Sandpack } from '@codesandbox/sandpack-react';
+import { SandpackPredefinedTemplate } from '@codesandbox/sandpack-react/unstyled';
+import { amethyst, monokaiPro } from '@codesandbox/sandpack-themes';
+import { useColorMode } from '@docusaurus/theme-common';
+
+const fileEntry = {
+  vue: {
+    root: '/src/App.vue',
+    files: {
+      '/src/api.js': alovaVueComposition
+    }
+  },
+  'vue-options': {
+    root: '/src/App.vue',
+    files: {
+      '/src/api.js': alovaVueOptions
+    },
+    deps: {
+      '@alova/vue-options': '^1'
+    }
+  },
+  react: {
+    root: '/App.js',
+    files: {
+      '/api.js': alovaReact
+    }
+  },
+  svelte: {
+    root: '/App.svelte',
+    files: {
+      '/api.js': alovaSvelte
+    }
+  },
+  static: {
+    root: '/index.html'
+  },
+  vanilla: {
+    root: '/index.js'
+  }
+};
+const customSetup = {
+  svelte: (commonConfig: Record<string, any>) => ({
+    files: {
+      '/index.js': {
+        code: `import App from "./App.svelte";    
+  const app = new App({
+    target: document.body
+  });
+  export default app;
+        `,
+        hidden: true
+      },
+      '/public/index.html': {
+        code: `<!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="utf8" />
+      <meta name="viewport" content="width=device-width" />
+      <title>Svelte app</title>
+      <link rel="stylesheet" href="public/bundle.css" />
+    </head>
+    <body>
+      <script src="bundle.js"></script>
+    </body>
+  </html>`,
+        hidden: true
+      },
+      ...commonConfig.files
+    },
+    customSetup: {
+      entry: '/index.js',
+      dependencies: {
+        svelte: '^3.59.2',
+        ...commonConfig.customSetup.dependencies
+      }
+    },
+    main: '/App.svelte',
+    environment: 'svelte'
+  })
+};
+
+interface Props {
+  template: SandpackPredefinedTemplate;
+  mainFile: string;
+  externalFiles?: Record<string, string>;
+  containBaseURL?: boolean;
+  containResponded?: boolean;
+  editorHeight?: number;
+  style?: 'options';
+}
+const EmbedSandpack = ({
+  template,
+  mainFile,
+  externalFiles = {},
+  containBaseURL = true,
+  containResponded = true,
+  editorHeight,
+  style
+}: Props) => {
+  const themes = {
+    light: amethyst,
+    dark: monokaiPro
+  };
+  const targetEntry = fileEntry[template + (style ? `-${style}` : '')];
+  const files = {
+    [targetEntry.root]: mainFile,
+    ...(targetEntry.files ? targetEntry.files : {}),
+    ...externalFiles
+  };
+
+  const apiFileKey = Object.keys(files).find(file => /api\.js$/.test(file));
+  if (files[apiFileKey]) {
+    // if don't need to contain baseURL, remove it.
+    if (!containBaseURL) {
+      files[apiFileKey] = files[apiFileKey].replace(/baseURL.+?\s{4}/, '');
+    }
+    // if don't need to contain responded, remove it.
+    if (!containResponded) {
+      files[apiFileKey] = files[apiFileKey].replace(/,\s+responded.+json\(\)/, '');
+    }
+  }
+
+  const dependencies = {
+    alova: '^2',
+    ...(targetEntry.deps || {})
+  };
+  const { colorMode } = useColorMode();
+  let config = {
+    files,
+    template,
+    customSetup: {
+      dependencies
+    }
+  };
+  config = customSetup[template] ? customSetup[template](config) : config;
+  return (
+    <Sandpack
+      {...config}
+      theme={themes[colorMode]}
+      options={{
+        editorWidthPercentage: 70,
+        editorHeight
+      }}
+    />
+  );
+};
+
+export default EmbedSandpack;
diff --git a/src/components/Examples.tsx b/src/components/Examples.tsx
index 4c5425e0f7..34d1c1cbcf 100644
--- a/src/components/Examples.tsx
+++ b/src/components/Examples.tsx
@@ -1,7 +1,7 @@
 import Link from '@docusaurus/Link';
 import IconFont from '@site/src/components/IconFont';
 
-const linkPartCommon = '/alovajs/alova/tree/examples/';
+const linkPartCommon = '/alovajs/alova/tree/main/examples/';
 const exampleList = [
   {
     id: 'React',
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1e1b0c9f79..1f3ccabacc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -41,12 +41,11 @@ function HomepageHeader() {
       <div className="container">
         <div className={styles.heroContent}>
           <h1 className="title">
-            <Translate id="homepage.title">Lightweight request strategy library</Translate>
+            <Translate id="homepage.title">Creative Next Generation Request Tool</Translate>
           </h1>
           <p className="tagline">
             <Translate id="homepage.tagline">
-              One line of code completes network requests in various complex scenarios. Don’t
-              spend time on the small matter of requesting. Leave it to us.
+              Extremely improve your API using efficiency and save brainpower Just one step
             </Translate>
           </p>
           <div className={clsx(styles.buttons, 'margin-bottom--md')}>
diff --git a/versioned_docs/version-v2/tutorial/02-getting-started/02-quick-start.md b/versioned_docs/version-v2/tutorial/02-getting-started/02-quick-start.md
index ae2aaf5759..8c5928dfea 100644
--- a/versioned_docs/version-v2/tutorial/02-getting-started/02-quick-start.md
+++ b/versioned_docs/version-v2/tutorial/02-getting-started/02-quick-start.md
@@ -4,7 +4,7 @@ title: Quick Start
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 
 import quickStartGET from '!!raw-loader!@site/codesandbox/01-getting-started/02-first-request/get.js';
 import quickStartPOST from '!!raw-loader!@site/codesandbox/01-getting-started/02-first-request/post.js';
diff --git a/versioned_docs/version-v2/tutorial/03-combine-framework/02-use-request.md b/versioned_docs/version-v2/tutorial/03-combine-framework/02-use-request.md
index 7494c8bee6..f104ae098e 100644
--- a/versioned_docs/version-v2/tutorial/03-combine-framework/02-use-request.md
+++ b/versioned_docs/version-v2/tutorial/03-combine-framework/02-use-request.md
@@ -5,7 +5,7 @@ title: Auto Manage States
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 
 import useRequestVue from '!!raw-loader!@site/codesandbox/01-getting-started/03-combine-framework/vueComposition-useRequest.zh.vue';
 import useRequestReact from '!!raw-loader!@site/codesandbox/01-getting-started/03-combine-framework/react-useRequest.zh.jsx';
diff --git a/versioned_docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md b/versioned_docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md
index 26126a5f4e..21924ebe2f 100644
--- a/versioned_docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md
+++ b/versioned_docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md
@@ -4,7 +4,7 @@ title: Watching Request
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 import CodeBlock from '@theme/CodeBlock';
 import useWatcherSearchVue from '!!raw-loader!@site/codesandbox/03-learning/04-use-watcher/vueComposition-search.en.vue';
 import useWatcherSearchReact from '!!raw-loader!@site/codesandbox/03-learning/04-use-watcher/react-search.en.jsx';