diff --git a/docs/sdk/guides/03-execute-remote-smart-contract-call.md b/docs/sdk/guides/03-execute-remote-smart-contract-call.md
index 4f747589..e49d891a 100644
--- a/docs/sdk/guides/03-execute-remote-smart-contract-call.md
+++ b/docs/sdk/guides/03-execute-remote-smart-contract-call.md
@@ -8,29 +8,59 @@ This Dapp allows you to call Pangolin Smart Chain's `add(2)` function from Pango
 
 Pangoro Smart Chain is the testnet of Darwinia Smart Chain. [Pangolin Smart Chain](https://docs.crab.network/evm-compatible-crab-smart-chain/get-started/darwinia-pangolin) is the testnet of Crab Smart Chain. 
 
+## Create a hardhat empty project
+
+Follow the [intructions](https://hardhat.org/hardhat-runner/docs/getting-started) to create an empty hardhat project.
+
+Here we name the project `demo`.
+
 ## Install deps
 
 ```bash
+cd demo
 npm install --save-dev @darwinia/contracts-periphery @darwinia/contracts-utils
 ```
 
 ## Prepare your cross-chain endpoints
 
-We need two endpoints here. One is for Pangoro Smart Chain, and the another one is for Pangolin Smart Chain. We can download them here.
+We need two endpoints here. One is for Pangoro Smart Chain, and the another one is for Pangolin Smart Chain. 
+1. For convenience we download them directly. 
+
+    ```bash
+    cd contracts
+    wget https://raw.githubusercontent.com/darwinia-network/darwinia-s2s-template/main/contracts/PangoroToPangolinEndpoint.sol
+    wget https://raw.githubusercontent.com/darwinia-network/darwinia-s2s-template/main/contracts/PangolinToPangoroEndpoint.sol
+    ```
+    If you want to use them in a production environment, you need to add access control to them.
+
+2. Deploy `PangoroToPangolinEndpoint` to Pangoro Smart Chain.
+   ```bash
+   npx hardhat flatten ./PangoroToPangolinEndpoint.sol > ~/PangoroToPangolinEndpoint.sol
+   ```
+   Copy the flattened PangoroToPangolinEndpoint.sol to [Remix](https://remix.ethereum.org/) and deploy it to Pangoro Smart Chain.  
+   > How to use Remix to deploy a contract? here are some useful articles.  
+   [Creating and Deploying a Contract in Remix](https://remix-ide.readthedocs.io/en/latest/create_deploy.html)  
+   [Using Smart Chain with MetaMask](/sdk/guides/using-smart-chain-with-metamask)  
+   [Pangoro Smart Chain Info](/chains/darwinia-smart-chain#for-pangoro-smart-chain)
+
 
-1. Download [ToPangolinEndpoint.sol](https://raw.githubusercontent.com/darwinia-network/darwinia-messages-sol/master/contracts/periphery/contracts/s2s/examples/ToPangolinEndpoint.sol) for Pangoro. Then deploy it to Pangoro Smart Chain.
+3. Deploy `PangolinToPangoroEndpoint` to Pangolin Smart Chain. 
+   ```bash
+   npx hardhat flatten ./PangolinToPangoroEndpoint.sol > ~/PangolinToPangoroEndpoint.sol
+   ```
+   Copy the flattened PangolinToPangoroEndpoint.sol to Remix and deploy it to Pangolin Smart Chain
 
-2. Download [ToPangoroEndpoint.sol](https://raw.githubusercontent.com/darwinia-network/darwinia-messages-sol/master/contracts/periphery/contracts/s2s/examples/ToPangoroEndpoint.sol) for Pangolin. Then deploy it to Pangolin Smart Chain. 
+   > [Pangolin Smart Chain Info](https://docs.crab.network/evm-compatible-crab-smart-chain/crab-faqs-network-rpc#pangolin-test-network-configuration-parameters)
 
-3. Call the `setRemoteEndpoint(_remoteChainId, _remoteEndpoint)` of the two endpoints to point to each other. 
+4. Call the `setRemoteEndpoint(_remoteChainId, _remoteEndpoint)` of the two endpoints to point to each other. 
 
-The chain id of Pangoro Smart Chain is `0x70616772`. The chain id of Pangolin Smart Chain is `0x7061676c`.  
+   The chain id of Pangoro Smart Chain is `0x70616772`. The chain id of Pangolin Smart Chain is `0x7061676c`.  
 
-You can get the full chain id list from [constants](../constants).
+   > You can get the full chain id list from [constants](../constants).
 
-## Create the callee contract on Pangolin
+## Deploy the callee contract on the Pangolin Smart Chain
 
-In your contracts folder, create a file `Callee.sol`.
+In the `demo/contracts` folder, create a file `Callee.sol`.
 
 ```javascript
 // SPDX-License-Identifier: MIT
@@ -46,21 +76,21 @@ contract Callee {
 }
 ```
 
-Deploy it on the Pangolin Smart Chain.
+Copy it to Remix and deploy it to Pangolin Smart Chain.
 
-## Create the caller contract on Pangoro
+## Deploy the caller contract on the Pangoro Smart Chain
 
-In your contracts folder, create a file `ExecuteDemo.sol`.
+In the `demo/contracts` folder, create a file `Caller.sol`.
 
 ```javascript
 // SPDX-License-Identifier: MIT
 
 pragma solidity ^0.8.9;
 
-import "./ToPangolinEndpoint.sol";
+import "./PangoroToPangolinEndpoint.sol";
 
 // Call Pangolin.callee.add(2) from Pangoro
-contract ExecuteDemo {
+contract Caller {
     address public endpoint;
 
     constructor(address _endpoint) {
@@ -80,13 +110,18 @@ contract ExecuteDemo {
 }
 ```
 
-Deploy it on the Pangoro Smart Chain. 
-
-Make sure that the endpoint is correct, it must be the ToPangolinEndpoint's address.
-
 Make sure that the latest spec version of pangolin is correct. You can get it from https://pangolin.subscan.io/runtime.
 
+```bash
+npx hardhat flatten ./Caller.sol > ~/Caller.sol
+```
+Copy the flattened Caller.sol to Remix and deploy it to Pangoro Smart Chain. Make sure that the constructor param `_endpoint` is correct when deploying, it must be the PangoroToPangolinEndpoint's address.
+
 ## Run
 
-1. You can get a estimated fee by calling [the `fee` function](../api-reference#fee) of the ToPangolinEndpoint contract.
-2. Call the `remoteAdd(callee)` with a value as the market fee. The value should greater than or equal to the estimated fee.
\ No newline at end of file
+1. You can get a estimated market fee by calling the [`fee`](../api-reference#fee) function of the PangoroToPangolinEndpoint contract.
+2. Call the `remoteAdd(callee)`. 
+
+   * The param `callee` is the `Callee` contract address.   
+   * The value input should be set to a market fee >= the estimated market fee.  
+   ![Untitled](/img/guide-03-0.png)
\ No newline at end of file
diff --git a/docs/sdk/guides/04-dispatch-remote-substrate-call.md b/docs/sdk/guides/04-dispatch-remote-substrate-call.md
index c017fb41..7431bc72 100644
--- a/docs/sdk/guides/04-dispatch-remote-substrate-call.md
+++ b/docs/sdk/guides/04-dispatch-remote-substrate-call.md
@@ -10,6 +10,12 @@ This guide helps you to build a small Dapp that will dispatch Pangolin's `remark
 
 Pangoro Smart Chain is the testnet of Darwinia Smart Chain. [Pangolin](https://docs.crab.network/evm-compatible-crab-smart-chain/get-started/darwinia-pangolin) is the testnet of Crab Chain. 
 
+## Create a hardhat empty project
+
+Follow the [intructions](https://hardhat.org/hardhat-runner/docs/getting-started) to create an empty hardhat project.
+
+Here we name the project `demo`.
+
 ## Install deps
 
 ```bash
@@ -18,56 +24,14 @@ npm install --save-dev @darwinia/contracts-periphery @darwinia/contracts-utils
 
 ## Prepare your cross-chain endpoint
 
-Extends the `MessageEndpoint` contract to create your own endpoint. In your contracts folder, create a file `ToPangolinEndpoint.sol`.
-
-```javascript
-// SPDX-License-Identifier: MIT
-
-pragma solidity ^0.8.9;
-
-import "@darwinia/contracts-periphery/contracts/s2s/MessageEndpoint.sol";
-
-contract ToPangolinEndpoint is MessageEndpoint {
-    constructor() {
-        outboundLaneId = 0x726f6c69;
-        inboundLaneId = 0x726f6c69;
-        storageAddress = address(1024);
-        dispatchAddress = address(1025);
-        storageKeyForMarketFee = 0x30d35416864cf657db51d3bc8505602f2edb70953213f33a6ef6b8a5e3ffcab2;
-        storageKeyForLatestNonce = 0xd86d7f611f4d004e041fda08f633f10196c246acb9b55077390e3ca723a0ca1f;
-        storageKeyForLastDeliveredNonce = 0xd86d7f611f4d004e041fda08f633f101e5f83cf83f2127eb47afdc35d6e43fab;
-        sendMessageCallIndex = 0x1103;
-        remoteMessageTransactCallIndex = 0x2901;
-        remoteSmartChainId = 43;
-    }
+We need one endpoint here. We can download it here to your contracts folder.
 
-    function _canBeExecuted(address, bytes calldata)
-        internal
-        pure
-        override
-        returns (bool)
-    {
-        return true;
-    }
-
-    function remoteDispatch(
-        uint32 pangolinSpecVersion,
-        bytes memory pangolinCallEncoded,
-        uint64 pangolinCallWeight
-    ) external payable returns (uint256) {
-        return
-            _remoteDispatch(
-                pangolinSpecVersion,
-                pangolinCallEncoded,
-                pangolinCallWeight
-            );
-    }
-}
+```bash
+cd contracts
+wget https://raw.githubusercontent.com/darwinia-network/darwinia-s2s-template/main/contracts/PangoroToPangolinEndpoint.sol
 ```
 
-Deploy it on the Pangoro Smart Chain. The `remoteDispatch` will be used in the next step.
-
-You can download the completed [ToPangolinEndpoint.sol](https://raw.githubusercontent.com/darwinia-network/darwinia-messages-sol/master/contracts/periphery/contracts/s2s/examples/ToPangolinEndpoint.sol), and add your own access controls to it if your want to use it in a production environment.
+Deploy it on the Pangoro Smart Chain. The `remoteDispatch` function will be used in the next step.
 
 ## Create your Dapp contract
 
@@ -78,7 +42,7 @@ In your contracts folder, create a file `RemarkDemo.sol`.
 
 pragma solidity ^0.8.9;
 
-import "./ToPangolinEndpoint.sol";
+import "./PangoroToPangolinEndpoint.sol";
 import "@darwinia/contracts-periphery/contracts/s2s/types/PalletSystem.sol";
 
 contract RemarkDemo {
@@ -102,7 +66,7 @@ contract RemarkDemo {
         uint64 weight = uint64(_remark.length * 2_000);
 
         // 2. Dispatch the call
-        uint256 messageId = ToPangolinEndpoint(endpoint).remoteDispatch{
+        uint256 messageId = PangoroToPangolinEndpoint(endpoint).remoteDispatch{
             value: msg.value
         }(
             28140, // latest spec version of pangolin
@@ -121,5 +85,8 @@ Deploy the Dapp contract on the Pangoro Smart Chain. Inject the endpoint address
 
 ## Run
 
-1. You can get a estimated fee by calling [the `fee` function](../api-reference#fee) of the endpoint contract.
-2. Call the `remoteRemark(_remark)` with a value as the market fee. The value should greater than or equal to the estimated fee.
+1. You can get a estimated market fee by calling the [`fee`](../api-reference#fee) function of the endpoint contract.
+2. Call the `remoteRemark(_remark)`.
+
+   * The param `_remark` is the content you want to remark.  
+   * The value input should be set to a market fee >= the estimated market fee. 
diff --git a/static/img/guide-03-0.png b/static/img/guide-03-0.png
new file mode 100644
index 00000000..20a0c77c
Binary files /dev/null and b/static/img/guide-03-0.png differ