diff --git a/docs/content/2.guide/4.vscode-extension.md b/docs/content/2.guide/4.vscode-extension.md
new file mode 100644
index 000000000..65cb9c245
--- /dev/null
+++ b/docs/content/2.guide/4.vscode-extension.md
@@ -0,0 +1,32 @@
+---
+title: VS Code Extension
+description: The npmx VS Code extension brings npmx.dev insights into your editor.
+navigation:
+  icon: i-simple-icons-visualstudiocode
+---
+
+## Installation
+
+Install from the <a href="https://marketplace.visualstudio.com/items?itemName=npmx-dev.vscode-npmx" target="_blank" rel="noopener noreferrer">VS Code Marketplace</a>, the <a href="https://open-vsx.org/extension/npmx-dev/vscode-npmx" target="_blank" rel="noopener noreferrer">Open VSX Registry</a> or run:
+
+```bash
+code --install-extension npmx-dev.vscode-npmx
+```
+
+## Features
+
+- **Hover Information** - Quick links to <a href="https://npmx.dev" target="_blank" rel="noopener noreferrer">npmx.dev</a> for package info and documentation, with provenance verification status
+- **Version Completion** - Autocomplete package versions with provenance filtering support
+- **Diagnostics**
+  - Deprecated package warnings
+  - Package replacement suggestions (via <a href="https://github.com/es-tooling/module-replacements" target="_blank" rel="noopener noreferrer">module-replacements</a>)
+  - Vulnerability detection
+
+## Supported Files
+
+- `package.json`
+- `pnpm-workspace.yaml`
+
+## Configuration
+
+For full configuration options and detailed usage, take a look at the <a href="https://github.com/npmx-dev/vscode-npmx#readme" target="_blank" rel="noopener noreferrer">GitHub repository</a>.