diff --git a/8-code-editor/1-using-a-code-editor/README.md b/8-code-editor/1-using-a-code-editor/README.md
index bac7f1e4..da061cc5 100644
--- a/8-code-editor/1-using-a-code-editor/README.md
+++ b/8-code-editor/1-using-a-code-editor/README.md
@@ -142,6 +142,10 @@ You can either click the _blue install button_ on the expanded activity bar to i
 
 ![Install extensions](../images/install-extension.gif)
 
+For our resume-site project, we will install the codeswing extension to create a swing for your project/ visualize the resume website on the code area. Immediately after installing the extension, observe your code area to see the changes to your project 😃
+
+![Codeswing extension in action](../images/after-codeswing-extension-pb.png)
+
 ### 2. Customize Extensions
 After installing the extension, you may need to modify its behaviour and customize it based on your preferences. To do this, select the Extensions icon, and this time, your extension will appear in the _Installed folder_, click on the _**Gear icon**_ and navigate to _Extensions Setting_
 
diff --git a/8-code-editor/images/after-codeswing-extension-pb.png b/8-code-editor/images/after-codeswing-extension-pb.png
new file mode 100644
index 00000000..563a9ca7
Binary files /dev/null and b/8-code-editor/images/after-codeswing-extension-pb.png differ