diff --git a/awx/ui/client/src/workflow-results/workflow-results.block.less b/awx/ui/client/src/workflow-results/workflow-results.block.less
index edd5412d2d..0173ed8eb8 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.block.less
+++ b/awx/ui/client/src/workflow-results/workflow-results.block.less
@@ -110,3 +110,27 @@
     text-transform: uppercase;
     margin-left: 20px;
 }
+
+.WorkflowResults-extraVarsHelp {
+    margin-left: 10px;
+    color: @default-icon;
+}
+
+.WorkflowResults .CodeMirror.cm-s-default,
+.WorkflowResults .CodeMirror-line {
+    background-color: #f6f6f6;
+}
+
+.WorkflowResults .CodeMirror-gutter.CodeMirror-lint-markers,
+.WorkflowResults .CodeMirror-gutter.CodeMirror-linenumbers {
+    background-color: #ebebeb;
+    color: @b7grey;
+}
+
+.WorkflowResults .CodeMirror-lines {
+    cursor: default;
+}
+
+.WorkflowResults .CodeMirror-cursors {
+    display: none;
+}
diff --git a/awx/ui/client/src/workflow-results/workflow-results.partial.html b/awx/ui/client/src/workflow-results/workflow-results.partial.html
index ff2cd94a0d..4ff65548c6 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.partial.html
+++ b/awx/ui/client/src/workflow-results/workflow-results.partial.html
@@ -121,6 +121,10 @@
                         <label class="WorkflowResults-resultRowLabel
                             WorkflowResults-resultRowLabel--fullWidth">
                             Extra Variables
+                            <i class="WorkflowResults-extraVarsHelp fa fa-question-circle"
+                                aw-tool-tip="Read only view of extra variables added to the workflow."
+                                data-placement="top">
+                            </i>
                         </label>
                         <textarea
                             rows="6"