diff --git a/docs/tools/aelf-playground/index.md b/docs/tools/aelf-playground/index.md
index 08e1232..6a465f5 100644
--- a/docs/tools/aelf-playground/index.md
+++ b/docs/tools/aelf-playground/index.md
@@ -48,79 +48,341 @@ The interaction with the workspace project code inside `src` and `test` folders
 
   ![drag-and-drop-3](/img/playground-7.png)
 
-- Also, you can choose to import the project directly from the github. 
-  1. Click on `enter a GitHub repo url`. 
-  2. Enter the github URL. 
-  3. Choose the required `.csproj` file. 
-  4. Enter the workspace name and click Submit. 
+- Also, you can choose to import the project directly from the github.
+
+  1. Click on `enter a GitHub repo url`.
+  2. Enter the github URL.
+  3. Choose the required `.csproj` file.
+  4. Enter the workspace name and click Submit.
 
   ![drag-and-drop-3](/img/playground-8.png)
 
 ### Features of the aelf-playground
 
 Now as the workspace setup is done and project is setup inside aelf's playground. The user can now edit the smart contract logic according to the user needs. The changes will majorly takes place inside the below files:
+
 - src/Protobuf/contract/`contract_proto_file_name`.proto file
 - src/`ContractName`.cs
 - src/`ContractName`State.cs
 
-Once all the changes are done in the above files and all other required files (whereever nacessary). Then below operations can be performed on the selected workspace project: 
+Once all the changes are done in the above files and all other required files (whereever nacessary). Then below operations can be performed on the selected workspace project:
+
 1. **AI Audit**: Complete the AI audit of the writtwn smart contract. Result similar to below image will be visible once the AI audit completes. The interpretation of the AI audit results will be shown when you hover over the smart contract code once the audit finishes.
-  
-  ![AI-Audit](/img/playground-9.png)
 
-2. **Save Gas Fee**: Optimise the smart contract to save gas fee.  It will suggest to make changes to the smart contract if the smart contract is not optimised. If the smart contract is already optimed then result like below will appear.
+![AI-Audit](/img/playground-9.png)
+
+2. **Save Gas Fee**: Optimise the smart contract to save gas fee. It will suggest to make changes to the smart contract if the smart contract is not optimised. If the smart contract is already optimed then result like below will appear.
 
-  ![Save-Gas-Fee](/img/playground-10.png)
+![Save-Gas-Fee](/img/playground-10.png)
 
 3. **Build**: Build the smart contract code. It will show `building` status when the user clicks the `Build` button and will output below result including whether build was successful or failed once the build process ends.
 
-  ![Build](/img/playground-11.png)
-  
+![Build](/img/playground-11.png)
+
 4. **Test**: Test the smart contract code. It will show `Running Tests` status when the user clicks the `Test` button and will output below result including how many tests have passed and failed once the test process ends.
 
-  ![Test](/img/playground-12.png)
-  
+![Test](/img/playground-12.png)
+
 5. **Deploy**: Deploy the smart contract code on the aelf blockchain. It will show `Deploying` status when the user clicks the `Deploy` button and will output below result including `transactionId`, `proposal status` and `contract address` once the build process ends. You can verify the contract address by visiting [aelf testnet explorer](https://testnet.aelfscan.io/tDVW).
 
-  ![Deploy](/img/playground-13.png)
-  
+![Deploy](/img/playground-13.png)
+
 6. **Export**: Export the project in a local directory. It will open an alert to save the workspace in the local directory. Users can rename the local directory.
 
-  ![Export](/img/playground-14.png)
-  
+![Export](/img/playground-14.png)
+
 7. **Share**: Share the project with a sharable link. It will show `Generating share link` status when the user clicks the `Share` button and will output below result including the sharable link.
 
-  ![Share](/img/playground-15.png)
+![Share](/img/playground-15.png)
 
 8. **Command Line Options**: Command line additionally provides options to check txID and clear terminal including above options. Use the help command to see all the options inside terminal. `check txID` helps in checking the transaction details.
 
-  ![Upload Files](/img/playground-16.png)
-  
+![Upload Files](/img/playground-16.png)
+
 9. **Upload Files**: Upload more files to the project when necessary. It will show a `drag and drop files` section to drop files from the local directory.
 
-  ![Upload Files](/img/playground-17.png)
-  
+![Upload Files](/img/playground-17.png)
+
 10. **Add a New File**: Manually add a new file in the playground project structure. It will allow users to add a new file in the workspace project structure add smart contract code, new proto files, etc.
 
-  ![Add a New File](/img/playground-18.png)
+![Add a New File](/img/playground-18.png)
 
 11. **Rename & Delete File**: `Renames` & `Deletes` the chosen file or folders in the project directory structure.
 
-  ![Add a New File](/img/playground-19.png)
+![Add a New File](/img/playground-19.png)
 
 12. **Tutorials**: Some pre-compiled tutorials are curated under `Tutorials` section of aelf-playground. It provides an option to filter the tutorials based on the difficulty level (`Beginner`, `Intermediate` & `Advanced`) and smart contracts languages (C# & Solidity).
 
-  ![Add a New File](/img/playground-20.png)
-
+![Add a New File](/img/playground-20.png)
 
 13. **Deployments**: `Deployments` section provides a list of all deployed tutorials along with the wallet address used to deploy smart contracts on the aelf blockchain. You can click on the wallet address to view wallet details on the aelf explorer.
 
-  ![Add a New File](/img/playground-21.png)
+![Add a New File](/img/playground-21.png)
 
 14. **Themes**: Users can also choose to toggle between `dark` and `light` themes.
 
-  ![Add a New File](/img/playground-22.png)
-
-
-### Conclusion
-The aelf Playground offers a seamless and accessible platform for developers to build, test, and deploy smart contracts without the need for any local setup. With built-in features like AI audit, gas fee optimization, and GitHub integration, it simplifies the entire smart contract development process. Whether you're writing new code or modifying existing templates, the aelf Playground provides all the essential tools in one place, making it an ideal sandbox for both beginners and experienced developers.
\ No newline at end of file
+![Add a New File](/img/playground-22.png)
+
+## 4. Example
+
+Now it's time to creat a Todo-dApp using playground.
+
+### Setup Todo Smart Contract Project
+
+- Open [aelf Playground](https://playground.aelf.com) in your browser.
+
+- Select the **`Hello World`** Template.
+
+  ![playground-example-img-1](/img/playground-example-img-1.png)
+
+- Enter the **"todo-dapp"** Name of a new workspace and Press the **Submit** button.
+
+  ![playground-example-img-2](/img/playground-example-img-2.png)
+
+- You will be redirect to workspace page with specific folders like **`src`** and **`test`**.
+
+  ![playground-example-img-3](/img/playground-example-img-3.png)
+
+- Rename the proto file name `hello_world_contract.proto` inside folder `src/Protobuf/contract/` to `todo_app.proto`
+
+  ![playground-example-img-4](/img/playground-example-img-4.png)
+  ![playground-example-img-5](/img/playground-example-img-5.png)
+
+### Prepare the Todo Functions
+
+The implementation of `todo_app.proto` file inside folder `src/Protobuf/contract/` is as follows:
+
+```csharp title="todo_app.proto"
+syntax = "proto3";
+import "aelf/options.proto";
+import "google/protobuf/empty.proto";
+import "google/protobuf/wrappers.proto";
+import "Protobuf/reference/acs12.proto";
+// The namespace of this class
+option csharp_namespace = "AElf.Contracts.ToDo";
+service ToDo {
+  // The name of the state class the smart contract is going to use to access blockchain state
+  option (aelf.csharp_state) = "AElf.Contracts.ToDo.ToDoState";
+  option (aelf.base) = "Protobuf/reference/acs12.proto";
+  rpc Initialize (google.protobuf.Empty) returns (google.protobuf.Empty) {
+  }
+  rpc CreateTask (TaskInput) returns (google.protobuf.StringValue) {
+  }
+  rpc UpdateTask (TaskUpdateInput) returns (google.protobuf.Empty) {
+  }
+  rpc DeleteTask (google.protobuf.StringValue) returns (google.protobuf.Empty) {
+  }
+  rpc ListTasks (google.protobuf.StringValue) returns (TaskList) {
+    option (aelf.is_view) = true;
+  }
+  rpc GetTask (google.protobuf.StringValue) returns (Task) {
+    option (aelf.is_view) = true;
+  }
+  rpc GetInitialStatus (google.protobuf.Empty) returns (google.protobuf.BoolValue) {
+    option (aelf.is_view) = true;
+  }
+}
+// A message to represent a task
+message Task {
+  string task_id = 1;
+  string name = 2;
+  string description = 3;
+  string category = 4;
+  string status = 5;
+  string owner = 6;
+  int64 created_at = 7;
+  int64 updated_at = 8;
+}
+// Input for creating a task
+message TaskInput {
+  string name = 1;
+  string description = 2;
+  string category = 3;
+}
+// Input for updating a task
+message TaskUpdateInput {
+  string task_id = 1;
+  string name = 2;
+  string description = 3;
+  string category = 4;
+  string status = 5;
+}
+// List of tasks
+message TaskList {
+  repeated Task tasks = 1;
+}
+```
+
+- `rpc` methods define the callable functions within the contract, allowing external systems to interact with the contract's logic.
+- `message` represent the structured data exchanged between the contract and external systems.
+
+#### Define Contract States
+
+The implementation of the ToDo app state inside file `src/todo-dappState.cs` is as follows:
+
+```csharp title="src/todo-dappState.cs"
+using AElf.Sdk.CSharp.State;
+using AElf.Types;
+
+namespace AElf.Contracts.ToDo
+{
+    public class ToDoState : ContractState
+    {
+        public BoolState Initialized { get; set; }
+        public SingletonState<Address> Owner { get; set; }
+        public MappedState<string, Task> Tasks { get; set; } // Mapping of task ID to Task
+        public MappedState<string, bool> TaskExistence { get; set; } // Mapping to track task existence
+        public StringState TaskIds { get; set; } // Concatenated string of task IDs
+        public Int32State TaskCounter { get; set; } // Counter for generating unique IDs
+    }
+}
+```
+
+- The `State.cs` file in an aelf blockchain smart contract holds the variables that store the contract's data, making sure this data is saved and accessible whenever the contract needs it.
+
+#### Implement ToDo Smart Contract
+
+The implementation of the ToDo App smart contract inside file `src/todo-dapp.cs` is as follows:
+
+```csharp title="src/todo-dapp.cs"
+using Google.Protobuf.WellKnownTypes;
+using System.Collections.Generic;
+namespace AElf.Contracts.ToDo
+{
+    public class ToDo : ToDoContainer.ToDoBase
+    {
+        public override Empty Initialize(Empty input)
+        {
+            if (State.Initialized.Value)
+            {
+                return new Empty();
+            }
+            State.Initialized.Value = true;
+            State.Owner.Value = Context.Sender;
+            State.TaskIds.Value = "";
+            State.TaskCounter.Value = 0;
+            return new Empty();
+        }
+        public override StringValue CreateTask(TaskInput input)
+        {
+            if (!State.Initialized.Value)
+            {
+                return new StringValue { Value = "Contract not initialized." };
+            }
+            var taskId = (State.TaskCounter.Value + 1).ToString();
+            State.TaskCounter.Value++;
+            var timestamp = Context.CurrentBlockTime.Seconds;
+            // Create task dictionary entry directly in ToDo class
+            State.Tasks[taskId] = new Task
+            {
+                TaskId = taskId,
+                Name = input.Name,
+                Description = input.Description,
+                Category = input.Category,
+                Status = "pending",
+                CreatedAt = timestamp,
+                UpdatedAt = timestamp,
+                Owner = Context.Sender.ToString().Trim('"'),
+            };
+            State.TaskExistence[taskId] = true;
+            // Append task ID to the list of IDs
+            var existingTaskIds = State.TaskIds.Value;
+            existingTaskIds += string.IsNullOrEmpty(existingTaskIds) ? taskId : $",{taskId}";
+            State.TaskIds.Value = existingTaskIds;
+            return new StringValue { Value = taskId };
+        }
+        public override Empty UpdateTask(TaskUpdateInput input)
+        {
+            var task = State.Tasks[input.TaskId];
+            if (task == null)
+            {
+                return new Empty(); // Handle case if task doesn't exist
+            }
+            task.Name = input.Name ?? task.Name;
+            task.Description = input.Description ?? task.Description;
+            task.Category = input.Category ?? task.Category;
+            task.Status = input.Status ?? task.Status;
+            task.UpdatedAt = Context.CurrentBlockTime.Seconds;
+            State.Tasks[input.TaskId] = task;
+            return new Empty();
+        }
+        public override Empty DeleteTask(StringValue input)
+        {
+            State.Tasks.Remove(input.Value);
+            State.TaskExistence.Remove(input.Value);
+            // Remove task ID from the list of IDs
+            var existingTaskIds = State.TaskIds.Value.Split(',');
+            var newTaskIds = new List<string>(existingTaskIds.Length);
+            foreach (var taskId in existingTaskIds)
+            {
+                if (taskId != input.Value)
+                {
+                    newTaskIds.Add(taskId);
+                }
+            }
+            State.TaskIds.Value = string.Join(",", newTaskIds);
+            return new Empty();
+        }
+        public override TaskList ListTasks(StringValue input)
+        {
+            var owner = input.Value; // Get the owner value from the input
+            var taskList = new TaskList();
+            var taskIds = State.TaskIds.Value.Split(',');
+            foreach (var taskId in taskIds)
+            {
+                var task = State.Tasks[taskId];
+                if (task != null && task.Owner == owner) // Filter tasks by owner
+                {
+                    taskList.Tasks.Add(task);
+                }
+            }
+            return taskList;
+        }
+        public override Task GetTask(StringValue input)
+        {
+            var task = State.Tasks[input.Value];
+            if (task == null)
+            {
+                return new Task { TaskId = input.Value, Name = "Task not found." };
+            }
+            return task;
+        }
+        public override BoolValue GetInitialStatus(Empty input)
+        {
+            return new BoolValue { Value = State.Initialized.Value };
+        }
+    }
+}
+```
+
+### Save Gas Fee
+
+- Click on Save Gas Fee Button and It will suggest to make changes if contract need to be optimised otherwise it shows result like below.
+
+  ![gas-fees-example-playground](/img/gas-fees-example-playground.png)
+
+### Building Smart Contract
+
+- Click on Build Icon for generate the build.
+
+  ![playground-example-img-6](/img/playground-example-img-6.png)
+
+- Once Build create successfully, You will get **Build successful** message in terminal.
+
+  ![playground-example-img-7](/img/playground-example-img-7.png)
+
+### Deploy Smart Contract
+
+- Click on Deploy Icon for deploy the smart contract.
+
+  ![playground-example-img-8](/img/playground-example-img-8.png)
+
+- Once your smart contract deploy successfully, You will get **Contract Address** in terminal.
+
+  ![playground-example-img-9](/img/playground-example-img-9.png)
+
+🎉 Congratulations, We got the contract address after successful deployment of todo-dapp smart contract using playground.
+
+## Conclusion
+
+The aelf Playground offers a seamless and accessible platform for developers to build, test, and deploy smart contracts without the need for any local setup. With built-in features like AI audit, gas fee optimization, and GitHub integration, it simplifies the entire smart contract development process. Whether you're writing new code or modifying existing templates, the aelf Playground provides all the essential tools in one place, making it an ideal sandbox for both beginners and experienced developers.
diff --git a/docs/tools/aelf-studio-extention/index.md b/docs/tools/aelf-studio-extention/index.md
new file mode 100644
index 0000000..f9661bb
--- /dev/null
+++ b/docs/tools/aelf-studio-extention/index.md
@@ -0,0 +1,173 @@
+---
+sidebar_position: 2
+title: aelf-Studio
+description: A tool to simplify building, testing, and deploying smart contracts on aelf blockchain.
+---
+
+# aelf-Studio
+
+## 1. Introduction
+
+**aelf Studio** is a VS code IDE extension to minimise the efforts required in developing and deploying aelf blockchain's smart contract. aelf-Studio helps developers in buiding, testing and deploying smart contracts on the aelf blockchain. It also has other features like Ai audit, check transaction status, get testnet tokens, etc. This guide will help you in understanding the usage of the aelf-Studio.
+
+## 2. aelf-Studio Features
+
+| Feature Name              | Description                                                                                   | Command Option                                    |
+|---------------------------|-----------------------------------------------------------------------------------------------|--------------------------------------------------|
+| Build Smart Contracts     | Compile aelf smart contracts within VS Code.                                                  | `Build aelf smart contract`                |
+| Test Smart Contracts      | Run tests to validate contract functionality before deployment.                               | `Test aelf smart contract`                 |
+| Get Testnet Tokens        | Claim testnet ELF tokens for testing directly in the development environment.                 | `Get testnet tokens from faucet`           |
+| Deploy Smart Contracts    | Deploy smart contracts to the aelf testnet.                                                   | `Deploy aelf smart contract`               |
+| Check Transaction Status  | Track deployment and blockchain transaction statuses directly from the extension.             | `Check status of transaction`              |
+| AI Audits                 | Use AI tools to audit smart contracts for vulnerabilities and potential issues.               | `Audit aelf smart contract`                |
+| Deploy from Local         | Deploy locally built smart contracts to the aelf blockchain.                                  | `Deploy aelf smart contract from a local dll` |
+
+## 3. Setting Up aelf-Studio
+
+- **VS Code**: Make sure you have VS Code installed. You can download it from [here](https://code.visualstudio.com/).
+- **.NET SDK**: You also need the .NET SDK to write smart contracts. Download it from [here](https://dotnet.microsoft.com/en-us/download).
+
+### Steps to install aelf-Studio:
+
+- **Open VS Code:**
+   - Start the visual studio code program.
+
+   ![vs-code-aelf-studio](/img/vs-code-aelf-studio.png)
+
+- **Install the aelf-Studio Extension:**
+   - On the left side of VS Code, click the `Extensions` icon.
+
+   ![click-extention-aelf-studio](/img/click-extention-aelf-studio.png)
+
+
+   - In the search box, type **“aelf-studio”**.
+
+   ![search-extention-aelf-studio](/img/search-extention-aelf-studio.png)
+
+
+   - Find the extension and click **Install**.
+
+   ![click-install-aelf-studio](/img/click-install-aelf-studio.png)
+
+
+   - If VS code asks to reload, click reload.
+
+- **Check if it’s installed**:
+
+   - `aelf` icon will be visible at the bottom right corner of the screen after successful installation.
+
+   ![bottom-icon-aelf-studio](/img/bottom-icon-aelf-studio.png)
+
+## 4. How to Use aelf Studio
+
+### Create a new project:
+
+
+- **Make a new folder:**
+  - Open the terminal in VS Code (Click **Terminal** at the top and choose **New Terminal**). 
+  - Type `mkdir hello-world` and press enter. This makes a new folder called "hello-world".
+  
+    ![mk-dir-aelf-studio](/img/mk-dir-aelf-studio.png)
+
+  - Type `cd hello-world` and press enter. This will change the directory to "hello-world" folder.
+
+    ![cd-aelf-studio](/img/cd-aelf-studio.png)
+
+- **Create a new smart contract:**
+  - In the terminal, type `dotnet new aelf -n HelloWorld` and press enter. This will create a `HelloWorld` smart contract template project.
+
+    ![create-hello-world-aelf-studio](/img/create-hello-world-aelf-studio.png)
+
+### Build the contract:
+
+  - Go to the "src" folder by typing `cd src`.
+  - Click the **aelf icon** in the bottom right corner.
+  - Select **Build Smart Contract** from the menu to build (compile) the smart contract
+
+    ![create-build-aelf-studio](/img/create-build-aelf-studio.png)
+  
+  - Notification will appear with preferance question. Click on **"No"** option.
+
+    ![create-build-ask-notification-aelf-studio](/img/create-build-ask-notification-aelf-studio.png)
+
+  - You will again get one more select menu option. Please select respective file for Build the project.
+
+    ![select-file-create-build-aelf-studio](/img/select-file-create-build-aelf-studio.png)
+
+  - You will see the success message below after the build is created successfully.
+
+    ![build-success-aelf-studio](/img/build-success-aelf-studio.png)
+
+### Test Smart Contract:
+
+  - Click the **aelf icon** in the bottom right corner.
+  - Select **Test Smart Contract** from the menu.
+    
+    ![test-build-aelf-studio](/img/test-build-aelf-studio.png)
+
+  - You will again get one more select menu option. Please select respective test file for Testing the contract.
+
+    ![text-build-select-file-aelf-studio](/img/text-build-select-file-aelf-studio.png)
+
+  - Once test is completed, you will get below result in output tab.
+
+    ![test-build-success-report-aelf-studio](/img/test-build-success-report-aelf-studio.png)
+
+### Get testnet tokens:
+
+  - Click the **aelf icon** in the bottom right corner.
+  - Select **Get Testnet Tokens** from the menu.
+    
+    ![get-token-menu-aelf-studio](/img/get-token-menu-aelf-studio.png)
+
+  - Follow the steps on the screen to get some ELF tokens for testing.
+
+### Generate AI Audit Report:
+
+  - Click the **aelf icon** in the bottom right corner.
+  - Select **AI Audit** from the menu.
+    
+    ![select-ai-audit-aelf-studio](/img/select-ai-audit-aelf-studio.png)
+
+  - Please select respective file to generate the audit report. Testnet token might be required to perform the audit. Claim the testnet tokens by selecting **Get Testnet Tokens** menu option if the tokens are not claimed already.
+
+    ![select-file-ai-audit-aelf-studio](/img/select-file-ai-audit-aelf-studio.png)
+
+  - When the audit report is ready, a notification will appear on the bottom right of the screen with option to click **Check Audit Report** button.
+
+    ![check-ai-audit-report-aelf-studio](/img/check-ai-audit-report-aelf-studio.png)
+
+  - It's advised to wait for sometime and click on **Check Audit Report** button to see the audit report.
+
+
+### Deploy the smart contract:
+
+  - Click the **aelf icon** again in the bottom right corner.
+  - Select **Deploy from Local** or **Deploy Smart Contract** from the menu.
+
+    ![deploy-from-local-aelf-studio](/img/deploy-from-local-aelf-studio.png)
+
+  - Follow the instructions to deploy the smart contract. Blockchains take sometime to deploy the smart contract.
+
+### Check Transaction Status:
+
+  - After deploying the smart contract, wait for sometime and click the **aelf icon** in the bottom right corner.
+  - Select **Check Transaction Status** from the menu.
+    
+    ![select-check-transaction-aelf-studio](/img/select-check-transaction-aelf-studio.png)
+
+  - Click on **Check proposal status** button from the notification in the bottom right of the screen.
+
+    ![check-proposal-status-aelf-studio](/img/check-proposal-status-aelf-studio.png)
+  
+  - Then click on **View on aelf Scan** button from the notification.
+
+    ![view-aelf-scan-aelf-studio](/img/view-aelf-scan-aelf-studio.png)
+
+  - It will redirect you to aelf blockchain explorer for the deployment transaction. The explorer page will reflect the details of the deployment transaction.
+
+    ![aelf-sacn-result-aelf-studio](/img/aelf-sacn-result-aelf-studio.png)
+
+### Conclusion
+
+aelf-Studio simplifies the process of developing, testing, and deploying smart contracts on the aelf blockchain, offering an intuitive in-IDE experience. With features like AI audits, transaction tracking, and testnet token retrieval, it ensures developers can efficiently manage the entire smart contract lifecycle without leaving VS Code.
\ No newline at end of file
diff --git a/sidebars.ts b/sidebars.ts
index 1f6874b..9d90856 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -59,6 +59,7 @@ const sidebars: SidebarsConfig = {
       },
       items: [
         { type: "doc", id: "tools/aelf-playground/index" },
+        { type: "doc", id: "tools/aelf-studio-extention/index" },
         {
           type: "link",
           label: "Wallet",
diff --git a/static/img/aelf-sacn-result-aelf-studio.png b/static/img/aelf-sacn-result-aelf-studio.png
new file mode 100644
index 0000000..7baa4f6
Binary files /dev/null and b/static/img/aelf-sacn-result-aelf-studio.png differ
diff --git a/static/img/bottom-icon-aelf-studio.png b/static/img/bottom-icon-aelf-studio.png
new file mode 100644
index 0000000..e245ce4
Binary files /dev/null and b/static/img/bottom-icon-aelf-studio.png differ
diff --git a/static/img/build-success-aelf-studio.png b/static/img/build-success-aelf-studio.png
new file mode 100644
index 0000000..f6407b0
Binary files /dev/null and b/static/img/build-success-aelf-studio.png differ
diff --git a/static/img/cd-aelf-studio.png b/static/img/cd-aelf-studio.png
new file mode 100644
index 0000000..9694918
Binary files /dev/null and b/static/img/cd-aelf-studio.png differ
diff --git a/static/img/check-ai-audit-report-aelf-studio.png b/static/img/check-ai-audit-report-aelf-studio.png
new file mode 100644
index 0000000..021bdb0
Binary files /dev/null and b/static/img/check-ai-audit-report-aelf-studio.png differ
diff --git a/static/img/check-proposal-status-aelf-studio.png b/static/img/check-proposal-status-aelf-studio.png
new file mode 100644
index 0000000..858e43e
Binary files /dev/null and b/static/img/check-proposal-status-aelf-studio.png differ
diff --git a/static/img/click-extention-aelf-studio.png b/static/img/click-extention-aelf-studio.png
new file mode 100644
index 0000000..1ab0063
Binary files /dev/null and b/static/img/click-extention-aelf-studio.png differ
diff --git a/static/img/click-install-aelf-studio.png b/static/img/click-install-aelf-studio.png
new file mode 100644
index 0000000..dd19b34
Binary files /dev/null and b/static/img/click-install-aelf-studio.png differ
diff --git a/static/img/code-aelf-studio.png b/static/img/code-aelf-studio.png
new file mode 100644
index 0000000..7c71edd
Binary files /dev/null and b/static/img/code-aelf-studio.png differ
diff --git a/static/img/create-build-aelf-studio.png b/static/img/create-build-aelf-studio.png
new file mode 100644
index 0000000..f7abce7
Binary files /dev/null and b/static/img/create-build-aelf-studio.png differ
diff --git a/static/img/create-build-ask-notification-aelf-studio.png b/static/img/create-build-ask-notification-aelf-studio.png
new file mode 100644
index 0000000..8fc16af
Binary files /dev/null and b/static/img/create-build-ask-notification-aelf-studio.png differ
diff --git a/static/img/create-hello-world-aelf-studio.png b/static/img/create-hello-world-aelf-studio.png
new file mode 100644
index 0000000..9786a8d
Binary files /dev/null and b/static/img/create-hello-world-aelf-studio.png differ
diff --git a/static/img/deploy-from-local-aelf-studio.png b/static/img/deploy-from-local-aelf-studio.png
new file mode 100644
index 0000000..96c9da4
Binary files /dev/null and b/static/img/deploy-from-local-aelf-studio.png differ
diff --git a/static/img/gas-fees-example-playground.png b/static/img/gas-fees-example-playground.png
new file mode 100644
index 0000000..a4e9684
Binary files /dev/null and b/static/img/gas-fees-example-playground.png differ
diff --git a/static/img/get-token-menu-aelf-studio.png b/static/img/get-token-menu-aelf-studio.png
new file mode 100644
index 0000000..e98c5c8
Binary files /dev/null and b/static/img/get-token-menu-aelf-studio.png differ
diff --git a/static/img/mk-dir-aelf-studio.png b/static/img/mk-dir-aelf-studio.png
new file mode 100644
index 0000000..570b8cd
Binary files /dev/null and b/static/img/mk-dir-aelf-studio.png differ
diff --git a/static/img/playground-example-img-1.png b/static/img/playground-example-img-1.png
new file mode 100644
index 0000000..4edea18
Binary files /dev/null and b/static/img/playground-example-img-1.png differ
diff --git a/static/img/playground-example-img-2.png b/static/img/playground-example-img-2.png
new file mode 100644
index 0000000..658c7fd
Binary files /dev/null and b/static/img/playground-example-img-2.png differ
diff --git a/static/img/playground-example-img-3.png b/static/img/playground-example-img-3.png
new file mode 100644
index 0000000..9ec5857
Binary files /dev/null and b/static/img/playground-example-img-3.png differ
diff --git a/static/img/playground-example-img-4.png b/static/img/playground-example-img-4.png
new file mode 100644
index 0000000..9271fcd
Binary files /dev/null and b/static/img/playground-example-img-4.png differ
diff --git a/static/img/playground-example-img-5.png b/static/img/playground-example-img-5.png
new file mode 100644
index 0000000..45a2840
Binary files /dev/null and b/static/img/playground-example-img-5.png differ
diff --git a/static/img/playground-example-img-6.png b/static/img/playground-example-img-6.png
new file mode 100644
index 0000000..ed770ad
Binary files /dev/null and b/static/img/playground-example-img-6.png differ
diff --git a/static/img/playground-example-img-7.png b/static/img/playground-example-img-7.png
new file mode 100644
index 0000000..d257971
Binary files /dev/null and b/static/img/playground-example-img-7.png differ
diff --git a/static/img/playground-example-img-8.png b/static/img/playground-example-img-8.png
new file mode 100644
index 0000000..73c7d51
Binary files /dev/null and b/static/img/playground-example-img-8.png differ
diff --git a/static/img/playground-example-img-9.png b/static/img/playground-example-img-9.png
new file mode 100644
index 0000000..91572c2
Binary files /dev/null and b/static/img/playground-example-img-9.png differ
diff --git a/static/img/search-extention-aelf-studio.png b/static/img/search-extention-aelf-studio.png
new file mode 100644
index 0000000..8fae6d4
Binary files /dev/null and b/static/img/search-extention-aelf-studio.png differ
diff --git a/static/img/select-ai-audit-aelf-studio.png b/static/img/select-ai-audit-aelf-studio.png
new file mode 100644
index 0000000..a727c93
Binary files /dev/null and b/static/img/select-ai-audit-aelf-studio.png differ
diff --git a/static/img/select-check-transaction-aelf-studio.png b/static/img/select-check-transaction-aelf-studio.png
new file mode 100644
index 0000000..f7ca76f
Binary files /dev/null and b/static/img/select-check-transaction-aelf-studio.png differ
diff --git a/static/img/select-file-ai-audit-aelf-studio.png b/static/img/select-file-ai-audit-aelf-studio.png
new file mode 100644
index 0000000..9fedb62
Binary files /dev/null and b/static/img/select-file-ai-audit-aelf-studio.png differ
diff --git a/static/img/select-file-create-build-aelf-studio.png b/static/img/select-file-create-build-aelf-studio.png
new file mode 100644
index 0000000..b8d321f
Binary files /dev/null and b/static/img/select-file-create-build-aelf-studio.png differ
diff --git a/static/img/test-build-aelf-studio.png b/static/img/test-build-aelf-studio.png
new file mode 100644
index 0000000..9843f3d
Binary files /dev/null and b/static/img/test-build-aelf-studio.png differ
diff --git a/static/img/test-build-success-report-aelf-studio.png b/static/img/test-build-success-report-aelf-studio.png
new file mode 100644
index 0000000..9667284
Binary files /dev/null and b/static/img/test-build-success-report-aelf-studio.png differ
diff --git a/static/img/text-build-select-file-aelf-studio.png b/static/img/text-build-select-file-aelf-studio.png
new file mode 100644
index 0000000..e60419c
Binary files /dev/null and b/static/img/text-build-select-file-aelf-studio.png differ
diff --git a/static/img/view-aelf-scan-aelf-studio.png b/static/img/view-aelf-scan-aelf-studio.png
new file mode 100644
index 0000000..71078c3
Binary files /dev/null and b/static/img/view-aelf-scan-aelf-studio.png differ
diff --git a/static/img/vs-code-aelf-studio.png b/static/img/vs-code-aelf-studio.png
new file mode 100644
index 0000000..1e9f187
Binary files /dev/null and b/static/img/vs-code-aelf-studio.png differ