diff --git a/About/index.md b/About/index.md
deleted file mode 100644
index 7599e01..0000000
--- a/About/index.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# About LangGraph-GUI
-
-[LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI) is a user-friendly interface designed for editing Node-Edge workflow graphs using LangGraph. This tool supports creating, editing, and running workflows with local language models such Ollama. It can be easily deployed using Docker Compose.
-
-![LangGraph-GUI](/cover.webp)
-
-## Docker Compose
-To run LangGraph-GUI using Docker Compose, refer to the detailed instructions available in the [LangGraph-GUI Docker Compose Setup](https://github.com/LangGraph-GUI/LangGraph-GUI?tab=readme-ov-file#getting-started).
-
-## Components
-
-LangGraph-GUI comprises the following main components:
-
-- **Frontend**: The default frontend is built with ReactFlow, providing an intuitive interface for graph editing.
-  - for more info, please view [Frontend](/Frontend)
-- **Backend**: The backend is implemented using Flask, offering a robust and scalable server-side solution.
-  - for more info, please view [Backend](/Backend)
-- AI-end
-  - For running local language models with Ollama AI service, we recommend using NVIDIA Docker. 
-
-## Electron wrapper
-
-For those who prefer a desktop application, we also provide an [Electron wrapper](https://github.com/LangGraph-GUI/LangGraph-GUI?tab=readme-ov-file#electron-wrapper).
-
-
-We hope you find LangGraph-GUI useful for your workflow management needs. For more information, visit our [GitHub Discussions](https://github.com/LangGraph-GUI/LangGraph-GUI/discussions) page to leave any questions or feedback.
diff --git a/Backend/index.md b/Backend/index.md
index d5d41b5..a853d01 100644
--- a/Backend/index.md
+++ b/Backend/index.md
@@ -6,37 +6,43 @@ The core file that convert json to LangGraph is [/src/WorkFlow.py](https://githu
 
 ## Json Format
 
-json node format like this:
-you can extend ext to put your data, this is elastic design.
-for example, the ext.info is a ext and able to parse in our backend.
+It will be subgraphs.
+
+for each subgraph, contain graph_name, graph_nodes, graph_serial_number
+
+you can put anything at ext
+
 ```
-{
-  "nodes": [
-    {
-      "uniq_id": "1",
-      "nexts": [
-        "2"
-      ],
-      "type": "START",
-      "name": "Node 1",
-      "description": "",
-      "tool": "",
-      "true_next": null,
-      "false_next": null,
-      "ext": {
-        "pos_x": 126,
-        "pos_y": 146,
-        "width": 200,
-        "height": 200,
-        "info": ""
+[
+  {
+    "name": "root",
+    "nodes": [
+      {
+        "uniq_id": "1",
+        "type": "STEP",
+        "name": "Node 1",
+        "description": "",
+        "tool": "",
+        "nexts": [],
+        "true_next": null,
+        "false_next": null,
+        "ext": {
+          "pos_x": 420,
+          "pos_y": 60,
+          "width": 150,
+          "height": 200,
+          "info": null
+        }
       }
-    },
+    ],
+  }
+]
 ```
 
 
 This use FastAPI server to communicate with frontend.
 
-Current implementation only runs graph.json.
+Current implementation only runs workflow.json.
 
 ## multi user support
 if you use [nginx.conf](https://github.com/LangGraph-GUI/LangGraph-GUI/blob/main/nginx/nginx.conf)
diff --git a/Frontend/Graph.md b/Frontend/Graph.md
index 934e66a..8805276 100644
--- a/Frontend/Graph.md
+++ b/Frontend/Graph.md
@@ -10,24 +10,24 @@ layout: frontend
 #### Start Node
 A graph(json) only have one start node, this will mapping to LangGraph START
 
-![](images/start.webp)
+![](images/node_start.webp)
 
 #### Step Node
 Step Node will mapping to LangGraph add_node, you can drag edge from left node(right port) to right node(left port)
 
-![](images/step.webp)
+![](images/node_step.webp)
 
 if you drag two node toward to each other, can create cycle.
 
 #### Step Node with tool
 Step node fill tool will call function, the tool definition need a tool node
 
-![](images/use_tool.webp)
+![](images/node_use_tool.webp)
 
 #### Tool Node
 Tool node need write real python function code, and need `@tool` decorator like LangChain Custom Tools
 
-![](images/tool.webp)
+![](images/node_tool.webp)
 
 #### Contition Node
 CONDITION node will mapping to LangGraph conditional_edge
@@ -35,12 +35,20 @@ CONDITION node will mapping to LangGraph conditional_edge
 * green edge is true case path
 * red edge is false case path
 
-![](images/condition.webp)
-
-## Other Resource
-*If you want to learn more about LangGraph, we have LangGraph for dummy : [LangGraph-learn](https://github.com/LangGraph-GUI/LangGraph-learn)*
+![](images/node_condition.webp)
 
 #### Information Node
-INFO node do nothing, just append info to previous stage output
+INFO node just append info to previous stage output
+
+![](images/node_info.webp)
+
+
+#### Subgraph Node
+SUBGRAPH node will run another graph (need have same subgraph name )
 
-![](images/info.webp)
\ No newline at end of file
+![](images/node_subgraph.webp)
+
+
+
+## Other Resource
+*If you want to learn more about LangGraph, we have LangGraph for dummy : [LangGraph-learn](https://github.com/LangGraph-GUI/LangGraph-learn)*
\ No newline at end of file
diff --git a/Frontend/Run.md b/Frontend/Run.md
index 94a7e00..e12f90a 100644
--- a/Frontend/Run.md
+++ b/Frontend/Run.md
@@ -4,17 +4,17 @@ layout: frontend
 ---
 
 # Run Graph
-This will Run graph.json on server.
+This will Run workflow.json on server.
 That is, you need upload graph.json first.
 
 ![](./images/run_window.webp)
 
 ## Run
-Execute graph.json into LangGraph with LLM.
+Execute workflow.json into LangGraph with LLM.
 After Run, recommand get files from server.
 
 ## Leave
 Leave run menu
 
 ## Text Space
-Show infomation when server running
\ No newline at end of file
+Show infomation when server running
diff --git a/Frontend/UI2.md b/Frontend/UI2.md
index da8ffd6..65efa2f 100644
--- a/Frontend/UI2.md
+++ b/Frontend/UI2.md
@@ -19,7 +19,7 @@ showing current id (need nginx support)
 
 
 ## Run Graph
-Run graph.json on server, for more info, see [Run](./Run)
+Run workflow.json on server, for more info, see [Run](./Run)
 
 
 ## Upload Files to Server
diff --git a/Frontend/images/condition.webp b/Frontend/images/node_condition.webp
similarity index 100%
rename from Frontend/images/condition.webp
rename to Frontend/images/node_condition.webp
diff --git a/Frontend/images/info.webp b/Frontend/images/node_info.webp
similarity index 100%
rename from Frontend/images/info.webp
rename to Frontend/images/node_info.webp
diff --git a/Frontend/images/start.webp b/Frontend/images/node_start.webp
similarity index 100%
rename from Frontend/images/start.webp
rename to Frontend/images/node_start.webp
diff --git a/Frontend/images/step.webp b/Frontend/images/node_step.webp
similarity index 100%
rename from Frontend/images/step.webp
rename to Frontend/images/node_step.webp
diff --git a/Frontend/images/node_subgraph.webp b/Frontend/images/node_subgraph.webp
new file mode 100644
index 0000000..79788d4
Binary files /dev/null and b/Frontend/images/node_subgraph.webp differ
diff --git a/Frontend/images/tool.webp b/Frontend/images/node_tool.webp
similarity index 100%
rename from Frontend/images/tool.webp
rename to Frontend/images/node_tool.webp
diff --git a/Frontend/images/use_tool.webp b/Frontend/images/node_use_tool.webp
similarity index 100%
rename from Frontend/images/use_tool.webp
rename to Frontend/images/node_use_tool.webp
diff --git a/Frontend/index.md b/Frontend/index.md
index cc1da9e..0d84617 100644
--- a/Frontend/index.md
+++ b/Frontend/index.md
@@ -10,5 +10,5 @@ This is node-edge based gui will export to json as saved graph.
 
 ![](/cover.webp)
 
-*This is LangGraph-GUI ReactFlow frontend, If you want to run in docker compose, see [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI)*
+*This is LangGraph-GUI SvelteFlow frontend, If you want to run in docker compose, see [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI)*
 
diff --git a/Others/index.md b/Others/index.md
index 230efaf..4ade77b 100644
--- a/Others/index.md
+++ b/Others/index.md
@@ -4,6 +4,8 @@ If you want to learn more about LangGraph, we also have [learning LangGraph for
 
 ## deprecated projects
 
-* old Qt version of [CrewAI-GUI](https://github.com/LangGraph-GUI/CrewAI-GUI)
-* old Qt version: [LangGraph-GUI-Qt](https://github.com/LangGraph-GUI/LangGraph-GUI-backend/tree/GUI-Qt)
-* old ver [Flask backend](https://github.com/LangGraph-GUI/LangGraph-GUI-backend/tree/flask)
\ No newline at end of file
+* old react ts ver: [LangGraph-GUI-reactflow](https://github.com/LangGraph-GUI/LangGraph-GUI-reactflow)
+* old react js frontend: [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI/tree/0.6.1)
+* old flask backend:[backend](https://github.com/LangGraph-GUI/LangGraph-GUI-backend/tree/flask)
+* old Qt GUI frontend: [LangGraph-GUI-Qt](https://github.com/LangGraph-GUI/LangGraph-GUI-backend/tree/GUI-Qt)
+* old Qt version for CrewAI: [CrewAI-GUI](https://github.com/LangGraph-GUI/CrewAI-GUI)
\ No newline at end of file
diff --git a/Others/Windows.md b/Setup/Windows.md
similarity index 87%
rename from Others/Windows.md
rename to Setup/Windows.md
index 8523979..c9cc252 100644
--- a/Others/Windows.md
+++ b/Setup/Windows.md
@@ -1,19 +1,44 @@
+---
+layout: page/note/basic
+---
+
 # LangGraph GUI Setup on Windows 
 
 This guide will help you set up and run the LangGraph-GUI, both backend and frontend, on a Windows environment, using environment variables for backend port and Ollama URL.
 
-## Prerequisites
+### Prerequisites
 
 Before you begin, ensure you have the following installed on your system:
 
+- **Codebase**
 - **Python or Conda**
 - **npm**
 - **Ollama**
 
+## Download repos
+    ```bash
+    git clone --recursive https://github.com/LangGraph-GUI/LangGraph-GUI
+    ```
+
+## Ollama Setup
+
+1. Download Ollama from official
+
+    https://ollama.com/download
+
+2. **Open Another PowerShell Terminal**  
+    Open another PowerShell terminal window.
+
+3. **Start Ollama**  
+    Run the Ollama service:
+    ```bash
+       ollama serve
+    ```
+
 ## Backend Setup
 
 1. **Open a PowerShell Terminal**
-    Open a PowerShell terminal window to start the setup process.
+    Open another PowerShell terminal window to start the setup process.
 
 2. **Create a Conda Environment (Optional)**
     Create a new Conda environment for the LangGraph backend:
@@ -73,7 +98,7 @@ Before you begin, ensure you have the following installed on your system:
     **frontend need dep**
     Clone the LangGraph frontend repository from GitHub:
     ```bash
-        git clone --recursive https://github.com/LangGraph-GUI/LangGraph-GUI-frontend
+        -frontend
     ```
 
 3. **Navigate to the Frontend Directory**  
@@ -94,16 +119,6 @@ Before you begin, ensure you have the following installed on your system:
     npm start
     ```
 
-## Ollama Setup
-
-1. **Open Another PowerShell Terminal**  
-    Open another PowerShell terminal window.
-
-2. **Start Ollama**  
-    Run the Ollama service:
-    ```bash
-       ollama serve
-    ```
 
 ## Conclusion
 
diff --git a/Setup/index.md b/Setup/index.md
new file mode 100644
index 0000000..c2858df
--- /dev/null
+++ b/Setup/index.md
@@ -0,0 +1,13 @@
+# Setup
+
+## Windows
+
+see [Windows Setup](./Windows.md)
+
+## Linux - Docker Compose
+
+see [Docker Compose Setup](https://github.com/LangGraph-GUI/LangGraph-GUI?tab=readme-ov-file#getting-started)
+
+## Linux - K8s
+
+see [K8S Setup](https://github.com/LangGraph-GUI/LangGraph-GUI/tree/main/k8s#readme)
\ No newline at end of file
diff --git a/_includes b/_includes
index 80a1e93..e93a7d6 160000
--- a/_includes
+++ b/_includes
@@ -1 +1 @@
-Subproject commit 80a1e9318c01068fa4784dea58ea8a599a495c30
+Subproject commit e93a7d668e3148d4a0550c669ed46e211e91e345
diff --git a/_layouts/base.html b/_layouts/base.html
index ada3a9a..024c1d9 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -34,11 +34,10 @@
       </div>
     </main>
     
-    {%- assign slogan = "The future is already here — it's just not very evenly distributed." -%}
+    {%- assign slogan = "LangGraph-GUI is mentaind by HomunMage" -%}
 
     {%- include footer.html -%}
 
-    <script src="https://posetmage.com/cdn/js/EmailEncoder.js"></script>
     <script src="https://posetmage.com/cdn/js/SearchSite.js"></script>
     <script src="https://posetmage.com/cdn/js/PageTrigger.js"></script>
 
diff --git a/_layouts/frontend.html b/_layouts/frontend.html
index b1def51..c531e3c 100644
--- a/_layouts/frontend.html
+++ b/_layouts/frontend.html
@@ -2,7 +2,54 @@
 layout: base
 ---
 
-{% include sidebar.html%}
+<head>
+  <style>
+    .page-container {
+      display: flex;
+      flex-wrap: wrap; /* Allow items to wrap as needed */
+      word-wrap: break-word;
+    }
+
+    .sidebar p {
+      margin: 0;
+      padding: 0;
+      line-height: 1.2em;
+    }
+        
+    .sidebar {
+      position: fixed;
+      flex: 0 0 12em; /* Fixed width for the sidebar */
+      width: 130px;
+    }
+
+    .page-content {
+      flex-grow: 1; /* Consumes the rest of the space */
+      margin-left: 200px;
+      margin-right: 200px;          
+      max-width: calc(100% - 150px);
+    }
+
+  </style>
+</head>
+
+</style>  
+
+<div class="page-container">
+  <aside class="sidebar" id="outline">
+    <!-- Sidebar content will be loaded here -->
+  </aside>
+
+  <main class="page-content">
+    <article class="post">
+      {% seo %}
+      <div class="post-content">
+        {{ content }}
+      </div>
+      <div id="randomPostsContainer"></div>
+    </article>
+  </main>
+
+</div>
 
 <script>
   document.addEventListener('DOMContentLoaded', function() {
@@ -12,6 +59,4 @@
         document.getElementById('outline').innerHTML = data;
       });
   });
-</script>
-
-
+</script>
\ No newline at end of file
diff --git a/_layouts/page b/_layouts/page
index 970e325..2a2ff6c 160000
--- a/_layouts/page
+++ b/_layouts/page
@@ -1 +1 @@
-Subproject commit 970e32570c3360a4a247e8577872829e1d0253c9
+Subproject commit 2a2ff6cf6c34a846b16be02bf8407e3e68c15482
diff --git a/index.md b/index.md
index 58e1b45..6dbcb8a 100644
--- a/index.md
+++ b/index.md
@@ -1,27 +1,33 @@
 ---
 layout: base
-
+title: LangGraph-GUI
 ---
 
-# [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI/)
+[LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI) is a self-host, user-friendly interface designed for editing Node-Edge workflow graphs using LangGraph. This tool supports creating, editing, and running workflows with local language models such Ollama. It can be easily deployed using Docker Compose or K8s(Kubernetes).
+
+![LangGraph-GUI](/cover.webp)
+
+## Components
+
+LangGraph-GUI comprises the following main components:
 
-Welcome to the [LangGraph-GUI](https://github.com/LangGraph-GUI/LangGraph-GUI/) documentation!
+- **[Frontend](/Frontend)**: The default frontend is built with SvelteFlow, providing an intuitive interface for graph editing.
+- **[Backend](/Backend)**: The backend is implemented using Flask, offering a robust and scalable server-side solution.
+- AI-end
+  - For running local language models with Ollama AI service, we recommend using NVIDIA Docker. 
+- [selfhost](/Setup)
+  - For Linux user, just see github repo
+  - For Windows OS user, see [Windows](/Setup/Windows)
 
-- To understand more about this project, visit the [About](/About) page.
-- For steps on using the GUI frontend, check out the [Frontend](/Frontend) documentation.
-- To explore backend details, see the [Backend](/Backend) documentation.
-- For Windows OS user, see [Windows](/Others/Windows)
 - For additional resources and related side projects, visit the [Others](/Others) page.
 
-If you have any questions or would like to leave a message, please use our [GitHub Discussions](https://github.com/LangGraph-GUI/LangGraph-GUI/discussions) page.
 
-![LangGraph-GUI](/cover.webp)
+*If you want to learn more about LangGraph, we also have [learning LangGraph for dummy](https://github.com/LangGraph-GUI/LangGraph-learn)*
 
+## Others
 
-## Update log and future works:
-* [update log](https://github.com/LangGraph-GUI/LangGraph-GUI/blob/main/CHANGELOG.md)
-* [task manager](https://github.com/orgs/LangGraph-GUI/projects)
+- If you have any questions or would like to leave a message, please use our [GitHub Discussions](https://github.com/LangGraph-GUI/LangGraph-GUI/discussions) page, or just open issue.
 
+- [update log](https://github.com/LangGraph-GUI/LangGraph-GUI/blob/main/CHANGELOG.md)
 
-## _
-We hope you find the information you need. If you have any questions, feel free to reach out!
\ No newline at end of file
+- We hope you find the information you need. If you have any questions, feel free to reach out!
\ No newline at end of file
diff --git a/social-media-list.html b/social-media-list.html
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/social-media-list.html
@@ -0,0 +1 @@
+
diff --git a/trigger.html b/trigger.html
index ed9d90f..b81c344 100644
--- a/trigger.html
+++ b/trigger.html
@@ -1,4 +1,4 @@
-<a class="page-link" href="/About/">About</a>
+<a class="page-link" href="/Setup/">Setup</a>
 <a class="page-link" href="/Frontend/">Frontend</a>
 <a class="page-link" href="/Backend/">Backend</a>
 <a class="page-link" href="/Others/">Others</a>
\ No newline at end of file