diff --git a/docs/editor-plugins/vscode/configuration.mdx b/docs/editor-plugins/vscode/configuration.mdx
index 76a2b1178..a19400d37 100644
--- a/docs/editor-plugins/vscode/configuration.mdx
+++ b/docs/editor-plugins/vscode/configuration.mdx
@@ -31,6 +31,8 @@ The Codeflash extension provides a configuration interface in the sidebar where
From the dropdown menu, click **"Project Config"** to open the configuration interface.
+
+ 
Use the configuration interface to modify your `pyproject.toml` settings. Changes are saved directly to your project's configuration file.
diff --git a/docs/editor-plugins/vscode/features.mdx b/docs/editor-plugins/vscode/features.mdx
index 5b975d505..5f8c76832 100644
--- a/docs/editor-plugins/vscode/features.mdx
+++ b/docs/editor-plugins/vscode/features.mdx
@@ -31,6 +31,7 @@ def process_data(items):
1. Open any Python file in your project
2. The extension analyzes your code automatically
3. Functions that can be optimized show an "optimize" hint above them
+
4. Click the hint to start optimization
@@ -62,6 +63,8 @@ The **Optimization** tab is your main interface for selecting code to optimize.
### File and Function Selection
+
+
At the top of the Optimization tab, you'll find two dropdown selectors:
1. **FILE** — Select a Python file from your workspace
@@ -90,6 +93,7 @@ Below the file/function selectors, you'll find two action cards for common optim
#### Optimize Current File
- **Icon:** Lightning bolt
+
- **Action:** Analyze and optimize all functions in the currently opened file
- **How to use:** Click the card to optimize all functions in the active editor tab
@@ -101,6 +105,7 @@ Below the file/function selectors, you'll find two action cards for common optim
#### Optimize Changed Code
- **Icon:** Git diff symbol (intertwined links)
+
- **Action:** Optimize functions in your Git diff
- **How to use:** Click the card to automatically detect and optimize all modified functions in your current Git changes
@@ -138,6 +143,7 @@ When you haven't started any optimizations yet, the Tasks tab shows:
Once optimizations complete, you'll see a list showing:
+
- **Function Name** — The name of the optimized function
- **Status Badge** — Shows completion status with speedup information:
- "Completed (Xx Faster)" — Displays the performance improvement
@@ -184,6 +190,8 @@ Once you've selected functions to optimize (via any method above), here's what h
After an optimization completes, you can review it in the Tasks tab or via inline comments.
+
+
### In the Tasks Tab
Click **View Optimization** on any completed optimization to see:
diff --git a/docs/images/CodeLens.png b/docs/images/CodeLens.png
new file mode 100644
index 000000000..d1e7ba256
Binary files /dev/null and b/docs/images/CodeLens.png differ
diff --git a/docs/images/Optimize-current-file.png b/docs/images/Optimize-current-file.png
new file mode 100644
index 000000000..69f1afafb
Binary files /dev/null and b/docs/images/Optimize-current-file.png differ
diff --git a/docs/images/Select-Project-Config.png b/docs/images/Select-Project-Config.png
new file mode 100644
index 000000000..7ec2c3d08
Binary files /dev/null and b/docs/images/Select-Project-Config.png differ
diff --git a/docs/images/optimization-details-explaination.png b/docs/images/optimization-details-explaination.png
new file mode 100644
index 000000000..4647a67eb
Binary files /dev/null and b/docs/images/optimization-details-explaination.png differ
diff --git a/docs/images/optimization-tab.png b/docs/images/optimization-tab.png
new file mode 100644
index 000000000..264c8352d
Binary files /dev/null and b/docs/images/optimization-tab.png differ
diff --git a/docs/images/optimize-code-diff.png b/docs/images/optimize-code-diff.png
new file mode 100644
index 000000000..71e45bd08
Binary files /dev/null and b/docs/images/optimize-code-diff.png differ
diff --git a/docs/images/optimized-function-tab-tasks.png b/docs/images/optimized-function-tab-tasks.png
new file mode 100644
index 000000000..e5fdb3c3d
Binary files /dev/null and b/docs/images/optimized-function-tab-tasks.png differ