diff --git a/docs/ff-concepts/adding-customization/custom-code.md b/docs/ff-concepts/adding-customization/custom-code.md
index fbc299e1..e20d8acc 100644
--- a/docs/ff-concepts/adding-customization/custom-code.md
+++ b/docs/ff-concepts/adding-customization/custom-code.md
@@ -45,7 +45,9 @@ You can use the In-App Code Editor to view and edit custom code directly in the
 ![custom-code-common.png](imgs/custom-code-common.png)
 
 :::tip
-To leverage the capabilities that go beyond our in-app code editor, you can click on the icon to open and edit your custom code directly in VS Code using the FlutterFlow [**VSCode extension**](vscode-extension.md).
+To leverage the capabilities that go beyond our in-app code editor, you can click on the **VS Code icon** to open and edit your custom code directly in VS Code using the FlutterFlow [**VSCode extension**](vscode-extension.md).
+
+![open-in-vscode](imgs/open-in-vscode.avif)
 :::
 
 :::warning[Using the In-App Code Editor on Desktop]
diff --git a/docs/ff-concepts/adding-customization/imgs/open-in-vscode.avif b/docs/ff-concepts/adding-customization/imgs/open-in-vscode.avif
new file mode 100644
index 00000000..e55ecb61
Binary files /dev/null and b/docs/ff-concepts/adding-customization/imgs/open-in-vscode.avif differ