diff --git a/package.json b/package.json
index 6ef81880c..cc134a679 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "1.12.0",
   "scripts": {
+    "prepare": "husky install",
     "start": "lerna run build:type && lerna run --parallel --stream start",
     "start:quick": "lerna run --parallel --stream start",
     "dev": "npm run start",
@@ -10,7 +11,7 @@
     "build": "lerna run build",
     "build:type": "lerna run build:type",
     "lint": "lerna run --parallel --stream lint",
-    "clean": "lerna clean && rm -rf ./node_modules/ && rm -rf ./packages/**/node_modules && rm -rf ./packages/**/package-lock.json",
+    "clean": "lerna clean && rm -rf ./node_modules/ && rm -rf ./packages/**/node_modulesac&& rm -rf ./packages/**/package-lock.json",
     "version": "lerna version --conventional-graduate --yes",
     "publish": "lerna publish from-package --yes",
     "commit": "cz",
@@ -21,11 +22,46 @@
   "devDependencies": {
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-conventional": "8.3.4",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-eslint": "^8.0.1",
+    "@rollup/plugin-image": "^2.0.6",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@types/lodash": "^4.14.165",
+    "@types/node": "^18.15.3",
+    "@types/three": "^0.141.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
     "commitizen": "^4.2.4",
+    "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
-    "husky": "^4.0.3",
+    "esbuild": "^0.11.0",
+    "eslint": "^7.27.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-formatter-pretty": "^4.0.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.3.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-markdown": "^2.0.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^8.0.0",
     "lerna": "^4.0.0",
-    "standard-version": "^9.3.1"
+    "lint-staged": "^10.5.4",
+    "postcss": "^8.4.14",
+    "prettier": "^2.3.2",
+    "pretty-quick": "^3.1.0",
+    "rollup": "^2.43.1",
+    "rollup-plugin-esbuild": "^3.0.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-web-worker-loader": "^1.6.1",
+    "standard-version": "^9.3.1",
+    "typescript": "^4.2.3"
   },
   "husky": {
     "hooks": {
diff --git a/packages/lb-annotation/package.json b/packages/lb-annotation/package.json
index 9a2780bdc..f1558e904 100644
--- a/packages/lb-annotation/package.json
+++ b/packages/lb-annotation/package.json
@@ -50,46 +50,8 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
-    "@commitlint/cli": "8.3.5",
-    "@commitlint/config-conventional": "8.3.4",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-image": "^2.0.6",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@types/jest": "^24.0.19",
     "@types/lodash": "^4.14.165",
-    "@types/three": "^0.141.0",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.11.0",
-    "eslint": "^7.27.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-formatter-pretty": "^4.0.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.3.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-markdown": "^2.0.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-unicorn": "^29.0.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
-    "rollup": "^2.43.1",
-    "rollup-plugin-esbuild": "^3.0.2",
-    "rollup-plugin-svg": "^2.0.0",
-    "rollup-plugin-web-worker-loader": "^1.6.1",
-    "tslib": "^1.10.0",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "^4.2.3"
+    "@types/three": "^0.141.0"
   },
   "dependencies": {
     "@labelbee/lb-utils": "^1.5.0",
diff --git a/packages/lb-components/package.json b/packages/lb-components/package.json
index 0135f1cda..7a476b476 100644
--- a/packages/lb-components/package.json
+++ b/packages/lb-components/package.json
@@ -3,7 +3,7 @@
   "version": "1.8.0",
   "description": "Provide a complete library of annotation components",
   "main": "./dist/index.js",
-  "es": "./es/index.js",
+  "module": "./es/index.js",
   "types": "./dist/types/index.d.ts",
   "files": [
     "dist",
@@ -37,7 +37,7 @@
   "homepage": "https://github.com/open-mmlab/labelbee/tree/main/packages/lb-components",
   "bugs": {
     "url": "https://github.com/open-mmlab/labelbee/issues",
-    "email": "brady_luo.sz@foxmail.com"
+    "email": "ron.f.luo@gmail.com"
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
@@ -59,42 +59,10 @@
     "react": ">=16.9.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.1.0",
-    "@commitlint/config-conventional": "^13.1.0",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-commonjs": "^18.0.0",
-    "@rollup/plugin-eslint": "^8.0.1",
-    "@rollup/plugin-image": "^2.0.6",
-    "@rollup/plugin-node-resolve": "^11.2.1",
     "@types/lodash": "^4.14.168",
     "@types/react": "^16.13.1",
     "@types/react-redux": "^7.1.16",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
     "antd": "^4.15.0",
-    "commitizen": "^4.2.4",
-    "cross-env": "^7.0.3",
-    "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.11.0",
-    "eslint": "7.20.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-alloy": "4.2.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^7.0.1",
-    "postcss": "^8.4.14",
-    "prettier": "^2.3.2",
-    "rollup": "^2.43.1",
-    "rollup-plugin-esbuild": "^3.0.2",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.53.0",
-    "typescript": "^4.2.3"
-  },
-  "config": {
-    "commitizen": {
-      "path": "node_modules/cz-conventional-changelog"
-    }
+    "sass": "^1.53.0"
   }
 }
diff --git a/packages/lb-components/src/index.tsx b/packages/lb-components/src/index.tsx
index 3b9abfc99..0c13e46f5 100644
--- a/packages/lb-components/src/index.tsx
+++ b/packages/lb-components/src/index.tsx
@@ -54,4 +54,6 @@ export default React.forwardRef(OutputApp);
 
 export { AnnotationView, PointCloudAnnotationView, i18n, VideoTagTool };
 
-export * from './constant';
\ No newline at end of file
+export * from './constant';
+
+export * from './utils';
diff --git a/packages/lb-components/src/utils/index.ts b/packages/lb-components/src/utils/index.ts
index 33b347466..8f4f42ded 100644
--- a/packages/lb-components/src/utils/index.ts
+++ b/packages/lb-components/src/utils/index.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import StepUtils from './StepUtils';
 
 export const jsonParser = (content: any, defaultValue: any = {}) => {
   try {
@@ -33,3 +34,5 @@ export const classnames = (className: { [key: string]: boolean } | (string | und
 
   return '';
 };
+
+export { StepUtils };
diff --git a/packages/lb-demo/.gitignore b/packages/lb-demo/.gitignore
index 0cc8376fc..50712d015 100644
--- a/packages/lb-demo/.gitignore
+++ b/packages/lb-demo/.gitignore
@@ -20,3 +20,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
+
+dist
\ No newline at end of file
diff --git a/packages/lb-demo/public/index.html b/packages/lb-demo/index.html
similarity index 50%
rename from packages/lb-demo/public/index.html
rename to packages/lb-demo/index.html
index 50383bb7e..7ab7c4786 100644
--- a/packages/lb-demo/public/index.html
+++ b/packages/lb-demo/index.html
@@ -2,28 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/sensebee.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <title>Label-Bee-Demo</title>
   </head>
   <body>
@@ -40,4 +27,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script type="module" src="/src/index.jsx"></script>
 </html>
diff --git a/packages/lb-demo/package.json b/packages/lb-demo/package.json
index 1362eb5be..f86004c7f 100644
--- a/packages/lb-demo/package.json
+++ b/packages/lb-demo/package.json
@@ -6,9 +6,6 @@
     "@labelbee/lb-annotation": "^1.12.0",
     "@labelbee/lb-components": "^1.8.0",
     "@labelbee/lb-utils": "^1.5.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "@types/three": ">=0.141.0",
     "qs": "^6.10.1",
     "react": "^17.0.2",
@@ -19,11 +16,9 @@
     "web-vitals": "^1.0.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "dev": "npm run start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "dev": "npm start",
+    "build": "vite build"
   },
   "eslintConfig": {
     "extends": [
@@ -44,6 +39,8 @@
     ]
   },
   "devDependencies": {
-    "antd": "^4.16.13"
+    "@vitejs/plugin-react": "^3.1.0",
+    "antd": "^4.16.13",
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/lb-demo/src/App.js b/packages/lb-demo/src/App.jsx
similarity index 97%
rename from packages/lb-demo/src/App.js
rename to packages/lb-demo/src/App.jsx
index 64bf2705c..271645717 100644
--- a/packages/lb-demo/src/App.js
+++ b/packages/lb-demo/src/App.jsx
@@ -5,7 +5,7 @@
  * @LastEditTime: 2022-06-13 19:34:53
  */
 import { AnnotationView, PointCloudAnnotationView } from '@labelbee/lb-components';
-import StepUtils from '@labelbee/lb-components/dist/utils/StepUtils';
+import { StepUtils } from '@labelbee/lb-components';
 import 'antd/dist/antd.css';
 import qs from 'qs';
 import React, { useState } from 'react';
diff --git a/packages/lb-demo/src/index.js b/packages/lb-demo/src/index.jsx
similarity index 100%
rename from packages/lb-demo/src/index.js
rename to packages/lb-demo/src/index.jsx
diff --git a/packages/lb-demo/vite.config.js b/packages/lb-demo/vite.config.js
new file mode 100644
index 000000000..385e037aa
--- /dev/null
+++ b/packages/lb-demo/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  assetsInclude: ["**/*.pcd"]
+})
\ No newline at end of file
diff --git a/packages/lb-utils/package.json b/packages/lb-utils/package.json
index 7dac851b8..3972e3619 100644
--- a/packages/lb-utils/package.json
+++ b/packages/lb-utils/package.json
@@ -28,13 +28,5 @@
   "dependencies": {
     "i18next": "^21.3.3",
     "react-i18next": "^11.12.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
-    "@types/react-i18next": "^8.1.0",
-    "esbuild": "^0.11.0",
-    "rollup": "^2.43.1",
-    "rollup-plugin-esbuild": "^3.0.2",
-    "typescript": "^4.2.3"
   }
 }
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 000000000..0a4bdf70a
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - "packages/*"
+  - "apps/frontend"
\ No newline at end of file