diff --git a/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-edit.png b/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-edit.png
new file mode 100644
index 000000000..2aacc457e
Binary files /dev/null and b/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-edit.png differ
diff --git a/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-pr.gif b/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-pr.gif
new file mode 100644
index 000000000..3078ab6d9
Binary files /dev/null and b/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-pr.gif differ
diff --git a/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-readonly.png b/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-readonly.png
new file mode 100644
index 000000000..cb3c4ffed
Binary files /dev/null and b/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github-readonly.png differ
diff --git a/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github.png b/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github.png
deleted file mode 100644
index 02f9895f8..000000000
Binary files a/serverlessworkflow/modules/ROOT/assets/images/tooling/serverless-workflow-editor/swf-editor-in-github.png and /dev/null differ
diff --git a/serverlessworkflow/modules/ROOT/pages/tooling/serverless-workflow-editor/swf-editor-chrome-extension.adoc b/serverlessworkflow/modules/ROOT/pages/tooling/serverless-workflow-editor/swf-editor-chrome-extension.adoc
index dbc75e7e0..b8a8884f1 100644
--- a/serverlessworkflow/modules/ROOT/pages/tooling/serverless-workflow-editor/swf-editor-chrome-extension.adoc
+++ b/serverlessworkflow/modules/ROOT/pages/tooling/serverless-workflow-editor/swf-editor-chrome-extension.adoc
@@ -53,16 +53,23 @@ For more information, see <<proc-install-chrome-extension-sw-editor, Installing
 . Push the created workflow file to GitHub, or you can go to the GitHub page and click on the workflow file to open in the editor.
 +
 --
-.Serverless Workflow file in GitHub
-image::tooling/serverless-workflow-editor/swf-editor-in-github.png[]
-
-The Serverless Workflow editor opens in read-only mode.
+.Serverless Workflow file in GitHub(read-only mode)
+image::tooling/serverless-workflow-editor/swf-editor-in-github-readonly.png[]
 --
 
 . To change the read-only mode to edit mode, click the pencil icon on the top-right corner of the screen. 
-. You can switch to the full-screen mode. Also, you can hide the editor and view the source code using *See as source* button.
-. Make changes to the source code, add a commit message. 
 +
-You can either commit the changes to a branch directly or create a new branch for pull request.
+--
+.Serverless Workflow file in GitHub(edit mode)
+image::tooling/serverless-workflow-editor/swf-editor-in-github-edit.png[]
+--
++
+. You can switch to the full-screen mode. Also, you can hide the editor and view the source code using the `See as source` button.
+. Make changes to the source code, and add a commit message. You can either commit the changes to a branch directly or create a new branch for pull requests.
+. In a pull request, you can switch between the original and the changes using the buttons provided.
+--
+.Serverless Workflow file in GitHub(pr mode)
+image::tooling/serverless-workflow-editor/swf-editor-in-github-pr.gif[]
+--
 
 include::../../../pages/_common-content/report-issue.adoc[]
\ No newline at end of file