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 3e035ddab5..73d2159fac 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-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.controller.js b/awx/ui/client/src/standard-out/standard-out.controller.js
index 152d2a8a5d..83345d7132 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();
 
@@ -36,6 +36,9 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
         // timestamp as well as the run time.
     });
 
+    // Set the parse type so that CodeMirror knows how to display extra params YAML/JSON
+    $scope.parseType = 'yaml';
+
     // Go out and get the job details based on the job type.  jobType gets defined
     // in the data block of the route declaration for each of the different types
     // of stdout jobs.
@@ -132,6 +135,11 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
                 });
             }
 
+            if (!Empty(data.extra_vars)) {
+                $scope.variables = ParseVariableString(data.extra_vars);
+                ParseTypeChange({ scope: $scope, field_id: 'pre-formatted-variables' });
+            }
+
             // If the job isn't running we want to clear out the interval that goes out and checks for stdout updates.
             // This interval is defined in the standard out log directive controller.
             if (data.status === 'successful' || data.status === 'failed' || data.status === 'error' || data.status === 'canceled') {
@@ -158,4 +166,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'];