diff --git a/website/docs/example.md b/website/docs/customization/example/example.md
similarity index 100%
rename from website/docs/example.md
rename to website/docs/customization/example/example.md
diff --git a/website/docs/plugin/embedding.md b/website/docs/customization/plugin/embedding.md
similarity index 100%
rename from website/docs/plugin/embedding.md
rename to website/docs/customization/plugin/embedding.md
diff --git a/website/docs/plugin/plugin_intro.md b/website/docs/customization/plugin/plugin_intro.md
similarity index 100%
rename from website/docs/plugin/plugin_intro.md
rename to website/docs/customization/plugin/plugin_intro.md
diff --git a/website/docs/plugin/plugin_selection.md b/website/docs/customization/plugin/plugin_selection.md
similarity index 99%
rename from website/docs/plugin/plugin_selection.md
rename to website/docs/customization/plugin/plugin_selection.md
index 025e1dc1..9d5dda0a 100644
--- a/website/docs/plugin/plugin_selection.md
+++ b/website/docs/customization/plugin/plugin_selection.md
@@ -9,7 +9,7 @@ It targets to solve the following two problems:
 ## Auto Plugin Selection Overview
 
 Below is the overview workflow of the auto plugin selection mechanism.
-![Auto Plugin Selection Overview](../../static/img/APS.png)
+![Auto Plugin Selection Overview](../../../static/img/APS.png)
 
 NOTE: the automatic plugin selection mechanism is only activated during the code generation process in the Code Interpreter and does not affect the planning process of the Planner.
 
diff --git a/website/docs/usage/cmd.md b/website/docs/usage/cmd.md
new file mode 100644
index 00000000..76eb06a2
--- /dev/null
+++ b/website/docs/usage/cmd.md
@@ -0,0 +1,38 @@
+# Terminal
+
+1. Follow the instruction in [Quick Start](../quickstart.md) to clone the repo and make configurations
+
+```bash
+git clone https://github.com/microsoft/TaskWeaver.git
+cd TaskWeaver
+# install the requirements
+pip install -r requirements.txt
+```
+
+```json
+{
+"llm.api_key": "the api key",
+"llm.model": "the model name, e.g., gpt-4"
+}
+```
+
+2. Run the following command in terminal.
+```bash
+# assume you are in the taskweaver folder
+# -p is the path to the project directory
+python -m taskweaver -p ./project/
+```
+This will start the TaskWeaver process and you can interact with it through the command line interface. 
+If everything goes well, you will see the following prompt:
+
+```bash
+=========================================================
+ _____         _     _       __
+|_   _|_ _ ___| | _ | |     / /__  ____ __   _____  _____
+  | |/ _` / __| |/ /| | /| / / _ \/ __ `/ | / / _ \/ ___/
+  | | (_| \__ \   < | |/ |/ /  __/ /_/ /| |/ /  __/ /
+  |_|\__,_|___/_|\_\|__/|__/\___/\__,_/ |___/\___/_/
+=========================================================
+TaskWeaver: I am TaskWeaver, an AI assistant. To get started, could you please enter your request?
+Human: ___
+```
diff --git a/website/docs/taskweaver_as_a_lib.md b/website/docs/usage/library.md
similarity index 98%
rename from website/docs/taskweaver_as_a_lib.md
rename to website/docs/usage/library.md
index 1a202be7..92d44e37 100644
--- a/website/docs/taskweaver_as_a_lib.md
+++ b/website/docs/usage/library.md
@@ -1,4 +1,4 @@
-# Use TaskWeaver as a library
+# Library
 
 If you want to use TaskWeaver as a library, you can refer to the following code example:
 
diff --git a/playground/UI/README.md b/website/docs/usage/webui.md
similarity index 68%
rename from playground/UI/README.md
rename to website/docs/usage/webui.md
index 93927b14..f6656153 100644
--- a/playground/UI/README.md
+++ b/website/docs/usage/webui.md
@@ -1,6 +1,6 @@
-# How to Run UI
+# Web UI
 
-1. Follow the instruction in the repo's [README](../../README.md) to clone the repo and make configurations
+1. Follow the instruction in [Quick Start](../quickstart.md) to clone the repo and make configurations
 
 ```bash
 git clone https://github.com/microsoft/TaskWeaver.git
@@ -28,5 +28,5 @@ chainlit run app.py
 4. Open the browser with http://localhost:8000 and you can start the trial. 
 
 5. Below are some screenshots:
-![TaskWeaver UI Screenshot 1](public/ui_screenshot_1.png)
-![TaskWeaver UI Screenshot 2](public/ui_screenshot_2.png)
\ No newline at end of file
+![TaskWeaver UI Screenshot 1](../../static/img/ui_screenshot_1.png)
+![TaskWeaver UI Screenshot 2](../../static/img/ui_screenshot_2.png)
\ No newline at end of file
diff --git a/website/sidebars.js b/website/sidebars.js
index fe8a21be..13768f02 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -21,6 +21,22 @@ const sidebars = {
   documentSidebar: [
     'overview',
     'quickstart',    
+    {
+      type: 'category',
+      label: 'Usage Options',
+      link: {
+        type: 'generated-index',
+        title: 'Usage Options',
+        description: 'Learn how to run TaskWeaver in different ways',
+        slug: '/usage',
+      },
+      collapsible: true,
+      collapsed: false,
+      items: [
+        'usage/cmd',
+        'usage/webui',
+        'usage/library'],
+    },
     {
       type: 'category',
       label: 'LLMs',
@@ -34,21 +50,33 @@ const sidebars = {
       collapsed: false,
       items: ['llms/openai', 'llms/aoai', 'llms/liteLLM', 'llms/ollama', 'llms/gemini', 'llms/qwen'],
     },
-
     {
       type: 'category',
-      label: 'Plugin',
+      label: 'Customization',
       collapsible: true,
       collapsed: false,
-      items: ['plugin/plugin_intro', 'plugin/plugin_selection', 'plugin/embedding'],
+      items: [{
+        type: 'category',
+        label: 'Plugin',
+        collapsible: true,
+        collapsed: true,
+        items: ['customization/plugin/plugin_intro', 'customization/plugin/plugin_selection', 'customization/plugin/embedding'],
+      },
+      {
+        type: 'category',
+        label: 'Example',
+        collapsible: true,
+        collapsed: true,
+        items: ['customization/example/example'],
+      },
+    ],
     },
-    'example',
+    // 'example',
     'compression',
     'configurations',
     'planner',
     'session',
     'run_pytest',
-    'taskweaver_as_a_lib'
   ],
   
 };
diff --git a/playground/UI/public/ui_screenshot_1.png b/website/static/img/ui_screenshot_1.png
similarity index 100%
rename from playground/UI/public/ui_screenshot_1.png
rename to website/static/img/ui_screenshot_1.png
diff --git a/playground/UI/public/ui_screenshot_2.png b/website/static/img/ui_screenshot_2.png
similarity index 100%
rename from playground/UI/public/ui_screenshot_2.png
rename to website/static/img/ui_screenshot_2.png