diff --git a/awx/ui/client/src/job-results/job-results.block.less b/awx/ui/client/src/job-results/job-results.block.less
index 2f24e98cbc..ae10b535e7 100644
--- a/awx/ui/client/src/job-results/job-results.block.less
+++ b/awx/ui/client/src/job-results/job-results.block.less
@@ -176,3 +176,27 @@ job-results-standard-out {
     flex: 1;
     display: flex
 }
+
+.JobResults-extraVarsHelp {
+    margin-left: 10px;
+    color: @default-icon;
+}
+
+.JobResults .CodeMirror.cm-s-default,
+.JobResults .CodeMirror-line {
+    background-color: #f6f6f6;
+}
+
+.JobResults .CodeMirror-gutter.CodeMirror-lint-markers,
+.JobResults .CodeMirror-gutter.CodeMirror-linenumbers {
+    background-color: #ebebeb;
+    color: @b7grey;
+}
+
+.JobResults .CodeMirror-lines {
+    cursor: default;
+}
+
+.JobResults .CodeMirror-cursors {
+    display: none;
+}
diff --git a/awx/ui/client/src/job-results/job-results.partial.html b/awx/ui/client/src/job-results/job-results.partial.html
index a763756769..5357c77749 100644
--- a/awx/ui/client/src/job-results/job-results.partial.html
+++ b/awx/ui/client/src/job-results/job-results.partial.html
@@ -353,6 +353,10 @@
                         <label class="JobResults-resultRowLabel
                             JobResults-resultRowLabel--fullWidth">
                             Extra Variables
+                            <i class="JobResults-extraVarsHelp fa fa-question-circle"
+                                aw-tool-tip="Read only view of extra variables added to the job template."
+                                data-placement="top">
+                            </i>
                         </label>
                         <textarea
                             rows="6"