diff --git a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
index 27864d2ca2..2b1ff2bc00 100644
--- a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
+++ b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
@@ -49,13 +49,12 @@
                         </div>
                     </div>
 
-                    <!-- TODO: figure out how to show the extra vars on different rows like the mockup -->
-
-                    <div class="StandardOut-detailsRow" ng-show="job.extra_vars">
+                    <div class="StandardOut-detailsRow--extraVars" ng-show="job.extra_vars">
                         <div class="StandardOut-detailsLabel">EXTRA VARS</div>
-                        <div class="StandardOut-detailsContent">
-                            {{ job.extra_vars }}
-                        </div>
+                    </div>
+
+                    <div ng-show="job.extra_vars">
+                        <textarea rows="6" ng-model="variables" name="variables" class="StandardOut-extraVars" id="pre-formatted-variables"></textarea>
                     </div>
 
                 </div>
diff --git a/awx/ui/client/src/standard-out/standard-out.block.less b/awx/ui/client/src/standard-out/standard-out.block.less
index ffdb158705..f89811e108 100644
--- a/awx/ui/client/src/standard-out/standard-out.block.less
+++ b/awx/ui/client/src/standard-out/standard-out.block.less
@@ -40,6 +40,10 @@
     margin-top: 20px;
 }
 
+.StandardOut-detailsRow--extraVars {
+    margin-bottom: 10px;
+}
+
 .StandardOut-detailsLabel {
     .OnePlusTwo-left--detailsLabel;
 }
diff --git a/awx/ui/client/src/standard-out/standard-out.controller.js b/awx/ui/client/src/standard-out/standard-out.controller.js
index 9330b567bc..585efe9962 100644
--- a/awx/ui/client/src/standard-out/standard-out.controller.js
+++ b/awx/ui/client/src/standard-out/standard-out.controller.js
@@ -11,7 +11,7 @@
 */
 
 
-export function JobStdoutController ($rootScope, $scope, $state, $stateParams, ClearScope, GetBasePath, Rest, ProcessErrors, Empty, GetChoices, LookUpName) {
+export function JobStdoutController ($rootScope, $scope, $state, $stateParams, ClearScope, GetBasePath, Rest, ProcessErrors, Empty, GetChoices, LookUpName, ParseTypeChange, ParseVariableString) {
 
     ClearScope();
 
@@ -38,6 +38,10 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
         }
     });
 
+    // Set the parse type so that CodeMirror knows how to display extra params YAML/JSON
+    $scope.parseType = 'yaml';
+
+
     function getJobDetails() {
 
         // Go out and get the job details based on the job type.  jobType gets defined
@@ -166,4 +170,4 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
 
 }
 
-JobStdoutController.$inject = [ '$rootScope', '$scope', '$state', '$stateParams', 'ClearScope', 'GetBasePath', 'Rest', 'ProcessErrors', 'Empty', 'GetChoices', 'LookUpName'];
+JobStdoutController.$inject = [ '$rootScope', '$scope', '$state', '$stateParams', 'ClearScope', 'GetBasePath', 'Rest', 'ProcessErrors', 'Empty', 'GetChoices', 'LookUpName', 'ParseTypeChange', 'ParseVariableString'];