diff --git a/doc-site/docs/client/greenfield.mdx b/doc-site/docs/client/greenfield.mdx
index 3ff0c924..25aab4e4 100644
--- a/doc-site/docs/client/greenfield.mdx
+++ b/doc-site/docs/client/greenfield.mdx
@@ -4,6 +4,9 @@ title: 'Greenfield Client'
 sidebar_position: 1
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Create Greenfield Client
 
 | params         | description         |
@@ -11,19 +14,29 @@ sidebar_position: 1
 | GRPC_URL       | Greenfield grpc url |
 | GREEN_CHAIN_ID | Greenfield chain id |
 
+<Tabs groupId="example">
+<TabItem value="Browser" label="Browser">
+
 ```js
 import { Client } from '@bnb-chain/greenfield-js-sdk';
 
-// Node.js
-const client = Client.create(GRPC_URL, GREEN_CHAIN_ID);
-
-// Browser
 const client = Client.create(GRPC_URL, String(GREEN_CHAIN_ID), {
   zkCryptoUrl:
     'https://unpkg.com/@bnb-chain/greenfield-zk-crypto@0.0.3/dist/node/zk-crypto.wasm',
 });
 ```
 
+</TabItem>
+<TabItem value="Nodejs" label="Nodejs">
+
+```js
+const { Client } = require('@bnb-chain/greenfield-js-sdk');
+const client = Client.create(GRPC_URL, GREEN_CHAIN_ID);
+```
+
+</TabItem>
+</Tabs>
+
 :::tip
 
 The browser needs to load wasm manually.