diff --git a/README.md b/README.md
index 472aa85c..2b892c56 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ You can find some package documentation below:
| Package | Description | Version |
| --- | --- | --- |
-| [@bnb-chain/greenfield-js-sdk](./packages/chain-sdk/README.md) | A client library for Greenfield Chain | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fgreenfield-js-sdk?color=blue)](https://www.npmjs.com/package/@bnb-chain/greenfield-js-sdk) |
+| [@bnb-chain/greenfield-js-sdk](./packages/js-sdk/README.md) | A client library for Greenfield Chain | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fgreenfield-js-sdk?color=blue)](https://www.npmjs.com/package/@bnb-chain/greenfield-js-sdk) |
| [@bnb-chain/greenfiled-file-handle](./packages/file-handle/README.md) | WASM module that handle file, such as `checksums` | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fgreenfiled-file-handle?color=blue)](https://www.npmjs.com/package/@bnb-chain/greenfiled-file-handle) |
| [@bnb-chain/greenfield-zk-crypto](./packages/zk-crypto/README.md) | WASM module about sign crypto | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fgreenfield-zk-crypto?color=blue)](https://www.npmjs.com/package/@bnb-chain/greenfield-zk-crypto) |
| [@bnb-chain/create-gnfd-app](./packages/create-gnfd-app/README.md) | Create Greenfield App Quickly | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fcreate-gnfd-app?color=blue)](https://www.npmjs.com/package/@bnb-chain/create-gnfd-app) |
diff --git a/doc-site/docs/api/_category_.json b/doc-site/docs/api/_category_.json
new file mode 100644
index 00000000..e738d78f
--- /dev/null
+++ b/doc-site/docs/api/_category_.json
@@ -0,0 +1,14 @@
+{
+ "position": 2,
+ "label": "API",
+ "collapsible": true,
+ "collapsed": true,
+ "className": "red",
+ "link": {
+ "type": "generated-index",
+ "title": "API"
+ },
+ "customProps": {
+ "description": ""
+ }
+}
diff --git a/doc-site/docs/api/index.md b/doc-site/docs/api/index.md
deleted file mode 100644
index 394ae9f2..00000000
--- a/doc-site/docs/api/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-id: index
-sidebar_position: 2
-slug: /api
----
-
-# API
-
-Here's an overview for the Greenfield API.
diff --git a/doc-site/docs/api/query-client.md b/doc-site/docs/api/query-client.md
new file mode 100644
index 00000000..9ba6c3c0
--- /dev/null
+++ b/doc-site/docs/api/query-client.md
@@ -0,0 +1,8 @@
+---
+id: query-client
+sidebar_position: 2
+---
+
+# Query Client
+
+
diff --git a/doc-site/docs/api/tx-client.md b/doc-site/docs/api/tx-client.md
new file mode 100644
index 00000000..585bdbaf
--- /dev/null
+++ b/doc-site/docs/api/tx-client.md
@@ -0,0 +1,6 @@
+---
+id: tx-client
+sidebar_position: 1
+---
+
+# Tx Client
diff --git a/doc-site/docs/getting-started/_category_.json b/doc-site/docs/getting-started/_category_.json
new file mode 100644
index 00000000..d74a23bc
--- /dev/null
+++ b/doc-site/docs/getting-started/_category_.json
@@ -0,0 +1,14 @@
+{
+ "position": 1,
+ "label": "Getting Started",
+ "collapsible": false,
+ "collapsed": false,
+ "className": "red",
+ "link": {
+ "type": "generated-index",
+ "title": "Getting Started"
+ },
+ "customProps": {
+ "description": ""
+ }
+}
diff --git a/doc-site/docs/getting-started/client.md b/doc-site/docs/getting-started/client.md
new file mode 100644
index 00000000..c34b1fb0
--- /dev/null
+++ b/doc-site/docs/getting-started/client.md
@@ -0,0 +1,28 @@
+---
+id: create-client
+sidebar_position: 2
+---
+
+# Create Greenfield Client
+
+```js
+import { Client } from '@bnb-chain/greenfield-js-sdk'
+
+// Node.js
+const client = Client.create(GRPC_URL, GREEN_CHAIN_ID);
+
+// Browser
+Client.create(GRPC_URL, String(GREEN_CHAIN_ID), {
+ zkCryptoUrl:
+ 'https://unpkg.com/@bnb-chain/greenfield-zk-crypto@0.0.2-alpha.4/dist/node/zk-crypto.wasm',
+});
+```
+
+> Browser need load wasm manually.
+
+# Usage
+
+The JS SDK consists of two parts:
+
+* Chain: https://docs.bnbchain.org/greenfield-docs/docs/api/blockchain-rest
+* Storage Provider: https://docs.bnbchain.org/greenfield-docs/docs/api/storage-provider-rest
diff --git a/doc-site/docs/getting-started/install.md b/doc-site/docs/getting-started/install.md
new file mode 100644
index 00000000..3f0a46f8
--- /dev/null
+++ b/doc-site/docs/getting-started/install.md
@@ -0,0 +1,24 @@
+---
+id: install
+sidebar_position: 2
+---
+
+# Install
+
+Using npm:
+
+```bash
+> npm install @bnb-chain/greenfield-js-sdk
+```
+
+Using yarn:
+
+```bash
+> yarn add @bnb-chain/greenfield-js-sdk
+```
+
+Using pnpm:
+```bash
+> pnpm add @bnb-chain/greenfield-js-sdk
+```
+
diff --git a/doc-site/docs/Overview.md b/doc-site/docs/getting-started/overview.md
similarity index 75%
rename from doc-site/docs/Overview.md
rename to doc-site/docs/getting-started/overview.md
index f21d3d33..0ff16dde 100644
--- a/doc-site/docs/Overview.md
+++ b/doc-site/docs/getting-started/overview.md
@@ -1,5 +1,7 @@
---
+id: overview
sidebar_position: 1
+slug: /
---
# Overview
@@ -8,7 +10,7 @@ You can find some package documentation below:
| Package | Description | Version |
| --- | --- | --- |
-| [@bnb-chain/greenfield-js-sdk](https://github.com/bnb-chain/greenfield-js-sdk/tree/main/packages/chain-sdk/README.md) | A client library for Greenfield Chain | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fgreenfield-js-sdk?color=blue)](https://www.npmjs.com/package/@bnb-chain/greenfield-js-sdk) |
+| [@bnb-chain/greenfield-js-sdk](https://github.com/bnb-chain/greenfield-js-sdk/tree/main/packages/js-sdk/README.md) | A client library for Greenfield Chain | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fgreenfield-js-sdk?color=blue)](https://www.npmjs.com/package/@bnb-chain/greenfield-js-sdk) |
| [@bnb-chain/greenfiled-file-handle](https://github.com/bnb-chain/greenfield-js-sdk/tree/main/packages/file-handle/README.md) | WASM module that handle file, such as `checksums` | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fgreenfiled-file-handle?color=blue)](https://www.npmjs.com/package/@bnb-chain/greenfiled-file-handle) |
| [@bnb-chain/greenfield-zk-crypto](https://github.com/bnb-chain/greenfield-js-sdk/tree/main/packages/zk-crypto/README.md) | WASM module about sign crypto | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fgreenfield-zk-crypto?color=blue)](https://www.npmjs.com/package/@bnb-chain/greenfield-zk-crypto) |
| [@bnb-chain/create-gnfd-app](https://github.com/bnb-chain/greenfield-js-sdk/tree/main/packages/create-gnfd-app/README.md) | Create Greenfield App Quickly | [![npm](https://img.shields.io/npm/v/%40bnb-chain%2Fcreate-gnfd-app?color=blue)](https://www.npmjs.com/package/@bnb-chain/create-gnfd-app) |
@@ -19,16 +21,6 @@ You can find some package documentation below:
* [Create React App](https://codesandbox.io/p/github/rrr523/greenfield-cra-template/main)
* [Vite](https://codesandbox.io/p/github/rrr523/greenfield-vite-template/main)
-## Quick Start
-
-You can use [`create-gnfd-app`](https://github.com/bnb-chain/greenfield-js-sdk/tree/main/packages/create-gnfd-app) to create a app quickly.
-
-```bash
-> npx @bnb-chain/create-gnfd-app
-```
-
-![](https://github.com/bnb-chain/greenfield-js-sdk/raw/alpha/packages/create-gnfd-app/example.gif)
-
## Supported JS environments
1. Modern browsers (Chromium, Firefox, Safari)
diff --git a/doc-site/docs/getting-started/quick-start.md b/doc-site/docs/getting-started/quick-start.md
new file mode 100644
index 00000000..8f45a206
--- /dev/null
+++ b/doc-site/docs/getting-started/quick-start.md
@@ -0,0 +1,16 @@
+---
+id: quick-start
+sidebar_position: 2
+---
+
+# Quick Start
+
+We provide templates that can run `React` (Next.js, Vite and CRA(Legacy) etc) directly.
+
+You can use [`create-gnfd-app`](https://github.com/bnb-chain/greenfield-js-sdk/tree/main/packages/create-gnfd-app) to create a app quickly:
+
+```bash
+> npx @bnb-chain/create-gnfd-app
+```
+
+![](https://github.com/bnb-chain/greenfield-js-sdk/raw/alpha/packages/create-gnfd-app/example.gif)
diff --git a/doc-site/docs/tutorial-basics/_category_.json b/doc-site/docs/tutorial-basics/_category_.json
deleted file mode 100644
index 40e3530a..00000000
--- a/doc-site/docs/tutorial-basics/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Tutorial - Basics",
- "position": 3,
- "link": {
- "type": "generated-index",
- "description": "5 minutes to learn the most important Docusaurus concepts."
- }
-}
diff --git a/doc-site/docs/tutorial-basics/congratulations.md b/doc-site/docs/tutorial-basics/congratulations.md
deleted file mode 100644
index 04771a00..00000000
--- a/doc-site/docs/tutorial-basics/congratulations.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-sidebar_position: 6
----
-
-# Congratulations!
-
-You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
-
-Docusaurus has **much more to offer**!
-
-Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
-
-Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
-
-## What's next?
-
-- Read the [official documentation](https://docusaurus.io/)
-- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
-- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
-- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
-- Add a [search bar](https://docusaurus.io/docs/search)
-- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
-- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
diff --git a/doc-site/docs/tutorial-basics/create-a-blog-post.md b/doc-site/docs/tutorial-basics/create-a-blog-post.md
deleted file mode 100644
index ea472bba..00000000
--- a/doc-site/docs/tutorial-basics/create-a-blog-post.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-sidebar_position: 3
----
-
-# Create a Blog Post
-
-Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
-
-## Create your first Post
-
-Create a file at `blog/2021-02-28-greetings.md`:
-
-```md title="blog/2021-02-28-greetings.md"
----
-slug: greetings
-title: Greetings!
-authors:
- - name: Joel Marcey
- title: Co-creator of Docusaurus 1
- url: https://github.com/JoelMarcey
- image_url: https://github.com/JoelMarcey.png
- - name: Sébastien Lorber
- title: Docusaurus maintainer
- url: https://sebastienlorber.com
- image_url: https://github.com/slorber.png
-tags: [greetings]
----
-
-Congratulations, you have made your first post!
-
-Feel free to play around and edit this post as much you like.
-```
-
-A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
diff --git a/doc-site/docs/tutorial-basics/create-a-document.md b/doc-site/docs/tutorial-basics/create-a-document.md
deleted file mode 100644
index 03d7f958..00000000
--- a/doc-site/docs/tutorial-basics/create-a-document.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-sidebar_position: 2
----
-
-# Create a Document
-
-Documents are **groups of pages** connected through:
-
-- a **sidebar**
-- **previous/next navigation**
-- **versioning**
-
-## Create your first Doc
-
-Create a Markdown file at `docs/hello.md`:
-
-```md title="docs/hello.md"
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
-
-## Configure the Sidebar
-
-Docusaurus automatically **creates a sidebar** from the `docs` folder.
-
-Add metadata to customize the sidebar label and position:
-
-```md title="docs/hello.md" {1-4}
----
-sidebar_label: 'Hi!'
-sidebar_position: 3
----
-
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-It is also possible to create your sidebar explicitly in `sidebars.js`:
-
-```js title="sidebars.js"
-module.exports = {
- tutorialSidebar: [
- // 'intro',
- // highlight-next-line
- 'hello',
- {
- type: 'category',
- label: 'Tutorial',
- items: ['tutorial-basics/create-a-document'],
- },
- ],
-};
-```
diff --git a/doc-site/docs/tutorial-basics/create-a-page.md b/doc-site/docs/tutorial-basics/create-a-page.md
deleted file mode 100644
index 20e2ac30..00000000
--- a/doc-site/docs/tutorial-basics/create-a-page.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-sidebar_position: 1
----
-
-# Create a Page
-
-Add **Markdown or React** files to `src/pages` to create a **standalone page**:
-
-- `src/pages/index.js` → `localhost:3000/`
-- `src/pages/foo.md` → `localhost:3000/foo`
-- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
-
-## Create your first React Page
-
-Create a file at `src/pages/my-react-page.js`:
-
-```jsx title="src/pages/my-react-page.js"
-import React from 'react';
-import Layout from '@theme/Layout';
-
-export default function MyReactPage() {
- return (
- This is a React pageMy React page
-
{siteConfig.tagline}
-