diff --git a/docs/img/webapp_pipeline_step_code.png b/docs/img/webapp_pipeline_step_code.png
index 9781f8c8..aabd67fe 100644
Binary files a/docs/img/webapp_pipeline_step_code.png and b/docs/img/webapp_pipeline_step_code.png differ
diff --git a/docs/img/webapp_pipeline_step_console.png b/docs/img/webapp_pipeline_step_console.png
index f66f52ac..1c82601b 100644
Binary files a/docs/img/webapp_pipeline_step_console.png and b/docs/img/webapp_pipeline_step_console.png differ
diff --git a/docs/webapp/pipelines/webapp_pipeline_viewing.md b/docs/webapp/pipelines/webapp_pipeline_viewing.md
index 971138f7..94f9c4aa 100644
--- a/docs/webapp/pipelines/webapp_pipeline_viewing.md
+++ b/docs/webapp/pipelines/webapp_pipeline_viewing.md
@@ -50,11 +50,13 @@ To return to viewing the run’s information, click the pipeline graph, outside
 Click on **DETAILS** on the top left of the info panel to view a run’s full console log. The log contains everything printed 
 to stdout and stderr.  
 
-![Step console](../../img/webapp_pipeline_step_console.png)
-
 To view a step’s console log, click **DETAILS** and then click on a step. 
 
-You can also view the selected step’s code. On the top right of the console panel, click **Console**, then click **Code** 
-in the menu. 
+![Step console](../../img/webapp_pipeline_step_console.png)
 
-![Step code](../../img/webapp_pipeline_step_code.png)
\ No newline at end of file
+For pipelines steps generated from functions using either [`PipelineController.add_function_step`](../../references/sdk/automation_controller_pipelinecontroller.md#add_function_step)
+or [`PipelineDecorator.component`](../../references/sdk/automation_controller_pipelinecontroller.md##pipelinedecoratorcomponent), 
+you can also view the selected step’s code. On the top center 
+of the console panel, click **Code**. 
+
+![Step code](../../img/webapp_pipeline_step_code.png)