diff --git a/openhands/static/img/app-tab.png b/openhands/static/img/app-tab.png
new file mode 100644
index 00000000..73b7a482
Binary files /dev/null and b/openhands/static/img/app-tab.png differ
diff --git a/openhands/static/img/backend_architecture.png b/openhands/static/img/backend_architecture.png
deleted file mode 100644
index 2cc41a3e..00000000
Binary files a/openhands/static/img/backend_architecture.png and /dev/null differ
diff --git a/openhands/static/img/backend_architecture.puml b/openhands/static/img/backend_architecture.puml
deleted file mode 100644
index c96651ab..00000000
--- a/openhands/static/img/backend_architecture.puml
+++ /dev/null
@@ -1,201 +0,0 @@
-@startuml openhands
-!pragma useIntermediatePackages false
-
-class openhands.action.agent.AgentEchoAction {
- content: str
- runnable: bool
- action: str
-}
-class openhands.action.agent.AgentFinishAction {
- runnable: bool
- action: str
-}
-class openhands.observation.AgentMessageObservation {
- role: str
- observation: str
-}
-class openhands.action.agent.AgentSummarizeAction {
- summary: str
- action: str
-}
-class openhands.action.agent.AgentThinkAction {
- thought: str
- runnable: bool
- action: str
-}
-class openhands.action.base.ExecutableAction {
-}
-class openhands.action.base.NotExecutableAction {
-}
-class openhands.observation.Observation {
- content: str
-}
-class openhands.action.base.Action {
-}
-class openhands.action.base.NullAction {
- action: str
-}
-class openhands.action.bash.CmdRunAction {
- command: str
- action: str
-}
-class openhands.action.browse.BrowseURLAction {
- url: str
- action: str
-}
-class openhands.observation.BrowserOutputObservation {
- url: str
- status_code: int
- error: bool
- observation: str
-}
-class openhands.action.fileop.FileReadAction {
- path: str
- action: str
-}
-class openhands.observation.FileReadObservation {
- path: str
- observation: str
-}
-class openhands.action.fileop.FileWriteAction {
- path: str
- contents: str
- action: str
-}
-class openhands.observation.FileWriteObservation {
- path: str
- observation: str
-}
-class openhands.action.tasks.AddTaskAction {
- parent: str
- goal: str
- subtasks: list
- action: str
-}
-class openhands.action.tasks.ModifyTaskAction {
- id: str
- state: str
- action: str
-}
-abstract class openhands.agent.Agent {
- _registry: Dict[str, Type[Agent]] {static}
- llm: LLM
- _complete: None
-}
-class openhands.llm.llm.LLM {
- model: None
- api_key: None
- base_url: None
- _debug_dir: None
- _debug_idx: None
- _debug_id: None
- _completion: None
-}
-class openhands.controller.agent_controller.AgentController {
- agent: Agent
- max_iterations: int
- workdir: str
- command_manager: CommandManager
- state: State
- plan: Plan
- callbacks: List[Callable]
-}
-class openhands.observation.AgentErrorObservation {
- observation: str
-}
-class openhands.controller.command_manager.CommandManager {
- directory: None
- shell: None
-}
-class openhands.observation.NullObservation {
- observation: str
-}
-class openhands.plan.Plan {
- main_goal: str {static}
- task: Task {static}
- main_goal: str
- task: None
-}
-class openhands.state.State {
- plan: Plan
- iteration: int
- history: List[Tuple[Action, Observation]]
- updated_info: List[Tuple[Action, Observation]]
-}
-class openhands.observation.CmdOutputObservation {
- command: str
- exit_code: int
- observation: str
-}
-class openhands.sandbox.sandbox.DockerInteractive {
- instance_id: None
- instance_id: None
- workspace_dir: None
- workspace_dir: None
- workspace_dir: None
- timeout: int
- base_container_image: None
- container_name: None
-}
-class openhands.observation.UserMessageObservation {
- role: str
- observation: str
-}
-class openhands.plan.Task {
- id: str {static}
- goal: str {static}
- parent: Task | None {static}
- subtasks: List[Task] {static}
- id: None
- id: None
- parent: None
- goal: str
- subtasks: None
-}
-
-class openhands.server.session.Session {
- websocket: None
- controller: Optional[AgentController]
- agent: Optional[Agent]
- agent_task: None
-}
-
-openhands.action.base.ExecutableAction <|-- openhands.action.agent.AgentEchoAction
-openhands.action.base.NotExecutableAction <|-- openhands.action.agent.AgentFinishAction
-openhands.observation.Observation <|-- openhands.observation.AgentMessageObservation
-openhands.action.base.NotExecutableAction <|-- openhands.action.agent.AgentSummarizeAction
-openhands.action.base.NotExecutableAction <|-- openhands.action.agent.AgentThinkAction
-openhands.action.base.Action <|-- openhands.action.base.ExecutableAction
-openhands.action.base.Action <|-- openhands.action.base.NotExecutableAction
-openhands.action.base.NotExecutableAction <|-- openhands.action.base.NullAction
-openhands.action.base.ExecutableAction <|-- openhands.action.bash.CmdRunAction
-openhands.action.base.ExecutableAction <|-- openhands.action.browse.BrowseURLAction
-openhands.observation.Observation <|-- openhands.observation.BrowserOutputObservation
-openhands.action.base.ExecutableAction <|-- openhands.action.fileop.FileReadAction
-openhands.observation.Observation <|-- openhands.observation.FileReadObservation
-openhands.action.base.ExecutableAction <|-- openhands.action.fileop.FileWriteAction
-openhands.observation.Observation <|-- openhands.observation.FileWriteObservation
-openhands.action.base.NotExecutableAction <|-- openhands.action.tasks.AddTaskAction
-openhands.action.base.NotExecutableAction <|-- openhands.action.tasks.ModifyTaskAction
-openhands.agent.Agent *-- openhands.agent.Agent
-openhands.agent.Agent *-- openhands.llm.llm.LLM
-openhands.controller.agent_controller.AgentController *-- openhands.agent.Agent
-openhands.observation.Observation <|-- openhands.observation.AgentErrorObservation
-openhands.observation.Observation <|-- openhands.observation.NullObservation
-openhands.plan.Plan *-- openhands.plan.Task
-openhands.state.State *-- openhands.plan.Plan
-openhands.state.State *-- openhands.observation.CmdOutputObservation
-openhands.state.State *-- openhands.action.base.Action
-openhands.state.State *-- openhands.observation.Observation
-openhands.observation.Observation <|-- openhands.observation.CmdOutputObservation
-openhands.observation.Observation <|-- openhands.observation.UserMessageObservation
-openhands.plan.Task *-- openhands.plan.Task
-openhands.server.session.Session *-- openhands.controller.agent_controller.AgentController
-openhands.server.session.Session *-- openhands.agent.Agent
-openhands.controller.agent_controller.AgentController -> openhands.state.State
-openhands.controller.agent_controller.AgentController -> openhands.plan.Plan
-openhands.controller.agent_controller.AgentController -> openhands.controller.command_manager.CommandManager
-openhands.controller.command_manager.CommandManager -> openhands.sandbox.sandbox.DockerInteractive
-
-footer Based on f3fda42; Generated by //py2puml//
-@enduml
diff --git a/openhands/static/img/backend_architecture.svg b/openhands/static/img/backend_architecture.svg
deleted file mode 100644
index a5fc173d..00000000
--- a/openhands/static/img/backend_architecture.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/openhands/static/img/browser-tab.png b/openhands/static/img/browser-tab.png
new file mode 100644
index 00000000..0e1737b1
Binary files /dev/null and b/openhands/static/img/browser-tab.png differ
diff --git a/openhands/static/img/changes-tab.png b/openhands/static/img/changes-tab.png
new file mode 100644
index 00000000..f03099ec
Binary files /dev/null and b/openhands/static/img/changes-tab.png differ
diff --git a/openhands/static/img/chat-panel.png b/openhands/static/img/chat-panel.png
new file mode 100644
index 00000000..9ba4f356
Binary files /dev/null and b/openhands/static/img/chat-panel.png differ
diff --git a/openhands/static/img/results.png b/openhands/static/img/results.png
deleted file mode 100644
index 48a6275f..00000000
Binary files a/openhands/static/img/results.png and /dev/null differ
diff --git a/openhands/static/img/system_architecture.png b/openhands/static/img/system_architecture.png
deleted file mode 100644
index 42c05b1d..00000000
Binary files a/openhands/static/img/system_architecture.png and /dev/null differ
diff --git a/openhands/static/img/system_architecture.puml b/openhands/static/img/system_architecture.puml
deleted file mode 100644
index b1b9713e..00000000
--- a/openhands/static/img/system_architecture.puml
+++ /dev/null
@@ -1,67 +0,0 @@
-@startuml "System Architecture"
-
-
-node frontend as frontend{
-
- component App
-
- package components{
-
- component Terminal
-
- component ChatInterface
-
- component BannerSettings
-
- }
-
- package services{
- component chatService
-
- component settingsService
-
- chatService -[hidden]u-> settingsService
- }
-
- package socket
-
- App -> Terminal
- App -> ChatInterface
- App -> BannerSettings
- ChatInterface -> chatService
- BannerSettings -> settingsService
- Terminal -> socket
- chatService -d-> socket
- settingsService -d-> socket
- services -[hidden]d-> socket
-
- Terminal -[hidden]u-> ChatInterface
- ChatInterface -[hidden]u-> BannerSettings
-
-
-
- interface "HTTP (:3001)" as HTTP
- HTTP - App
-
-}
-
-node backend{
- package server as serverpackage{
- component Server
-
- 'defined in server/server.py, port is defined at startup with uvicorn
- interface "Client WS\n(:3000/ws)" as client_socket
- client_socket - Server
-
-
- }
- node AgentController{
-
- }
- Server -d-> AgentController
-}
-
-
-socket -d-> client_socket: connects to \n VITE_TERMINAL_WS_URL
-
-@enduml
diff --git a/openhands/static/img/system_architecture.svg b/openhands/static/img/system_architecture.svg
deleted file mode 100644
index d259a4ca..00000000
--- a/openhands/static/img/system_architecture.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/openhands/static/img/system_architecture_overview.png b/openhands/static/img/system_architecture_overview.png
deleted file mode 100644
index a9174fc6..00000000
Binary files a/openhands/static/img/system_architecture_overview.png and /dev/null differ
diff --git a/openhands/static/img/terminal-tab.png b/openhands/static/img/terminal-tab.png
new file mode 100644
index 00000000..a5c46d5f
Binary files /dev/null and b/openhands/static/img/terminal-tab.png differ
diff --git a/openhands/static/img/vs-tab.png b/openhands/static/img/vs-tab.png
new file mode 100644
index 00000000..3e875b25
Binary files /dev/null and b/openhands/static/img/vs-tab.png differ
diff --git a/openhands/usage/key-features.mdx b/openhands/usage/key-features.mdx
index e0bcb8ee..5afdcf3a 100644
--- a/openhands/usage/key-features.mdx
+++ b/openhands/usage/key-features.mdx
@@ -3,30 +3,33 @@ title: Key Features
icon: bars
---
-
-
-### Chat Panel
-- Displays the conversation between the user and OpenHands.
-- OpenHands explains its actions in this panel.
-
-### Changes
-- Shows the file changes performed by OpenHands.
-
-### VS Code
-- Embedded VS Code for browsing and modifying files.
-- Can also be used to upload and download files.
-
-### Terminal
-- A space for OpenHands and users to run terminal commands.
-
-### Jupyter
-- Shows all Python commands that were executed by OpenHands.
-- Particularly handy when using OpenHands to perform data visualization tasks.
-
-### App
-- Displays the web server when OpenHands runs an application.
-- Users can interact with the running application.
-
-### Browser
-- Used by OpenHands to browse websites.
-- The browser is non-interactive.
+
+
+ - Displays the conversation between the user and OpenHands.
+ - OpenHands explains its actions in this panel.
+ 
+
+
+ - Shows the file changes performed by OpenHands.
+ 
+
+
+ - Embedded VS Code for browsing and modifying files.
+ - Can also be used to upload and download files.
+ 
+
+
+ - A space for OpenHands and users to run terminal commands.
+ 
+
+
+ - Displays the web server when OpenHands runs an application.
+ - Users can interact with the running application.
+ 
+
+
+ - Used by OpenHands to browse websites.
+ - The browser is non-interactive.
+ 
+
+