diff --git a/awx/ui/client/src/job-results/job-results.controller.js b/awx/ui/client/src/job-results/job-results.controller.js
index 881c04037b..e66b2b746a 100644
--- a/awx/ui/client/src/job-results/job-results.controller.js
+++ b/awx/ui/client/src/job-results/job-results.controller.js
@@ -89,6 +89,7 @@ function(jobData, jobDataOptions, jobLabels, jobFinished, count, $scope, ParseTy
         $scope.machine_credential_link = getTowerLink('credential');
         $scope.cloud_credential_link = getTowerLink('cloud_credential');
         $scope.network_credential_link = getTowerLink('network_credential');
+        $scope.vault_credential_link = getTowerLink('vault_credential');
         $scope.schedule_link = getTowerLink('schedule');
     };
 
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 ac5ad64022..ae6b723305 100644
--- a/awx/ui/client/src/job-results/job-results.partial.html
+++ b/awx/ui/client/src/job-results/job-results.partial.html
@@ -323,6 +323,21 @@
                         </div>
                     </div>
 
+                    <!-- VAULT CREDENTAIL DETAIL -->
+                    <div class="JobResults-resultRow"
+                        ng-show="job.summary_fields.vault_credential.name">
+                        <label class="JobResults-resultRowLabel">
+                            Vault Credential
+                        </label>
+                        <div class="JobResults-resultRowText">
+                            <a href="{{ vault_credential_link }}"
+                                aw-tool-tip="Edit the credential"
+                                data-placement="top">
+                                {{ job.summary_fields.vault_credential.name }}
+                            </a>
+                        </div>
+                    </div>
+
                     <!-- FORKS DETAIL -->
                     <div class="JobResults-resultRow"
                         ng-show="job.forks !== undefined">
diff --git a/awx/ui/client/src/job-submission/job-submission.controller.js b/awx/ui/client/src/job-submission/job-submission.controller.js
index d028b25b6b..c60f3a1e7e 100644
--- a/awx/ui/client/src/job-submission/job-submission.controller.js
+++ b/awx/ui/client/src/job-submission/job-submission.controller.js
@@ -176,6 +176,7 @@ export default
                     $scope.password_needed = data.passwords_needed_to_start && data.passwords_needed_to_start.length > 0;
                     $scope.has_default_inventory = data.defaults && data.defaults.inventory && data.defaults.inventory.id;
                     $scope.has_default_credential = data.defaults && data.defaults.credential && data.defaults.credential.id;
+                    $scope.has_default_vault_credential = data.defaults && data.defaults.vault_credential && data.defaults.vault_credential.id;
                     $scope.has_default_extra_credentials = data.defaults && data.defaults.extra_credentials && data.defaults.extra_credentials.length > 0;
 
                     $scope.other_prompt_data = {};
@@ -244,6 +245,10 @@ export default
                         $scope.selected_credentials.machine = angular.copy($scope.defaults.credential);
                     }
 
+                    if($scope.has_default_vault_credential) {
+                        $scope.selected_credentials.vault = angular.copy($scope.defaults.vault_credential);
+                    }
+
                     if($scope.has_default_extra_credentials) {
                         $scope.selected_credentials.extra = angular.copy($scope.defaults.extra_credentials);
                     }
@@ -374,6 +379,12 @@ export default
                 else {
                     $scope.selected_credentials.machine = null;
                 }
+                if($scope.has_default_vault_credential) {
+                    $scope.selected_credentials.vault = angular.copy($scope.defaults.vault_credential);
+                }
+                else {
+                    $scope.selected_credentials.vault = null;
+                }
                 if($scope.has_default_extra_credentials) {
                     $scope.selected_credentials.extra = angular.copy($scope.defaults.extra_credentials);
                 }
diff --git a/awx/ui/client/src/job-submission/job-submission.partial.html b/awx/ui/client/src/job-submission/job-submission.partial.html
index 3908228f5f..9c3be973da 100644
--- a/awx/ui/client/src/job-submission/job-submission.partial.html
+++ b/awx/ui/client/src/job-submission/job-submission.partial.html
@@ -73,6 +73,12 @@
                                             <span><span class="JobSubmission-previewTagLabel">{{credential_types[extraCredential.credential_type].name | uppercase}}</span>:&nbsp;{{extraCredential.name}}</span>
                                         </div>
                                     </div>
+                                    <div class="JobSubmission-previewTagContainer JobSubmission-previewTagContainer--vault" ng-show="selected_credentials.vault">
+                                        <div class="JobSubmission-previewTag JobSubmission-previewTag--vault" ng-class="{'JobSubmission-previewTag--deletable': ask_credential_on_launch}">
+                                            <span>
+                                                <span class="JobSubmission-previewTagLabel">VAULT</span>:&nbsp;{{selected_credentials.vault.name}}</span>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                             <div class="JobSubmission-previewTagRevert" ng-if="ask_credential_on_launch">
@@ -167,7 +173,7 @@
                     </div>
                     <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ask_verbosity_on_launch">
                         <label for="verbosity">
-                            <span class="Form-inputLabel prepend-asterisk"> Verbosity</span>
+                            <span class="Form-inputLabel prepend-asterisk" translate> Verbosity</span>
                         </label>
                         <div>
                             <select
@@ -333,6 +339,10 @@
                         <span class="JobSubmission-previewItemSubTitle">{{credential_types[extraCredential.credential_type].name}}:&nbsp;</span>
                         <span>{{extraCredential.name}}</span>
                     </div>
+                    <div>
+                        <span ng-show="selected_credentials.vault" class="JobSubmission-previewItemSubTitle"><span translate>Vault</span>:&nbsp;</span>
+                        <span ng-show="selected_credentials.vault">{{selected_credentials.vault.name}}</span>
+                    </div>
                 </div>
             </div>
             <div class="JobSubmission-footerButtons">
diff --git a/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js b/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js
index 2d8ad53545..8dcfff6b82 100644
--- a/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js
+++ b/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js
@@ -281,6 +281,14 @@
                     } else {
                         data.credential = null;
                     }
+                    if ($scope.selectedCredentials && $scope.selectedCredentials
+                        .vault && $scope.selectedCredentials
+                            .vault.id) {
+                                data.vault_credential = $scope.selectedCredentials
+                                    .vault.id;
+                    } else {
+                        data.vault_credential = null;
+                    }
 
                     data.extra_vars = ToJSON($scope.parseType,
                         $scope.variables, true);
diff --git a/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js b/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js
index a357ae9c19..5d4002aa55 100644
--- a/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js
+++ b/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js
@@ -487,13 +487,20 @@ export default
                     data.skip_tags = (Array.isArray($scope.skip_tags)) ? $scope.skip_tags.join() : "";
                     if ($scope.selectedCredentials && $scope.selectedCredentials
                         .machine && $scope.selectedCredentials
-                            .machine) {
+                            .machine.id) {
                                 data.credential = $scope.selectedCredentials
                                     .machine.id;
                     } else {
                         data.credential = null;
                     }
-
+                    if ($scope.selectedCredentials && $scope.selectedCredentials
+                        .vault && $scope.selectedCredentials
+                            .vault.id) {
+                                data.vault_credential = $scope.selectedCredentials
+                                    .vault.id;
+                    } else {
+                        data.vault_credential = null;
+                    }
                     data.extra_vars = ToJSON($scope.parseType,
                         $scope.variables, true);
 
diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js
index de26d37d96..96813c5e22 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js
@@ -83,6 +83,21 @@ export default ['templateUrl', 'Rest', 'GetBasePath', 'generateList', '$compile'
                         $scope.credentialTypeOptions);
             };
 
+            let updateVaultCredentialList = function() {
+                $scope.credentials.forEach(cred => {
+                    if (cred.credential_type === 3) {
+                        cred.checked = ($scope.selectedCredentials
+                            .vault !== null &&
+                            cred.id === $scope.selectedCredentials
+                                .vault.id) ? 1 : 0;
+                    }
+                });
+
+                $scope.credTags = MultiCredentialService
+                    .updateCredentialTags($scope.selectedCredentials,
+                        $scope.credentialTypeOptions);
+            };
+
             let uncheckAllCredentials = function() {
                 $scope.credentials.forEach(cred => {
                     cred.checked = 0;
@@ -156,14 +171,29 @@ export default ['templateUrl', 'Rest', 'GetBasePath', 'generateList', '$compile'
                     }
                 });
 
+                $scope.$watch('selectedCredentials.vault', () => {
+                    if($scope.selectedCredentials &&
+                        $scope.selectedCredentials.vault &&
+                        parseInt($scope.credentialKind) === 3) {
+                        updateVaultCredentialList();
+                    } else {
+                        uncheckAllCredentials();
+                    }
+                });
+
                 $scope.$watchGroup(['credentials',
-                    'selectedCredentials.machine'], () => {
+                    'selectedCredentials.machine',
+                    'selectedCredentials.vault'], () => {
                         if($scope.credentials &&
                             $scope.credentials.length > 0) {
                                 if($scope.selectedCredentials &&
                                       $scope.selectedCredentials.machine &&
                                       parseInt($scope.credentialKind) === 1) {
                                           updateMachineCredentialList();
+                                } else if($scope.selectedCredentials &&
+                                      $scope.selectedCredentials.vault &&
+                                      parseInt($scope.credentialKind) === 3) {
+                                          updateVaultCredentialList();
                                 } else if($scope.selectedCredentials &&
                                       $scope.selectedCredentials.extra &&
                                       $scope.selectedCredentials.extra.length > 0 &&
@@ -189,6 +219,14 @@ export default ['templateUrl', 'Rest', 'GetBasePath', 'generateList', '$compile'
                     } else {
                         $scope.selectedCredentials.machine = _.cloneDeep(selectedRow);
                     }
+                }else if(parseInt($scope.credentialKind) === 3) {
+                    if($scope.selectedCredentials &&
+                        $scope.selectedCredentials.vault &&
+                        $scope.selectedCredentials.vault.id === selectedRow.id) {
+                        $scope.selectedCredentials.vault = null;
+                    } else {
+                        $scope.selectedCredentials.vault = _.cloneDeep(selectedRow);
+                    }
                 } else {
                     let rowDeselected = false;
                     for (let i = $scope.selectedCredentials.extra.length - 1; i >= 0; i--) {
@@ -211,6 +249,7 @@ export default ['templateUrl', 'Rest', 'GetBasePath', 'generateList', '$compile'
             $scope.selectedCredentialsDirty = function() {
                 if ($scope.originalSelectedCredentials) {
                     return !($scope.originalSelectedCredentials.machine === null &&
+                        $scope.originalSelectedCredentials.vault === null &&
                         $scope.originalSelectedCredentials.extra.length === 0) &&
                         !_.isEqual($scope.selectedCredentials,
                             $scope.originalSelectedCredentials);
diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js
index 33d5f7ffba..e114b92050 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js
@@ -84,7 +84,7 @@ export default ['Rest', 'ProcessErrors', '$q', 'GetBasePath', function(Rest, Pro
                 data.results.forEach((credentialType => {
                     credential_types[credentialType.id] = credentialType;
                     if(credentialType.kind
-                        .match(/^(machine|cloud|net|ssh)$/)) {
+                        .match(/^(machine|cloud|net|ssh|vault)$/)) {
                             credentialTypeOptions.push({
                                 name: credentialType.name,
                                 value: credentialType.id
@@ -111,6 +111,7 @@ export default ['Rest', 'ProcessErrors', '$q', 'GetBasePath', function(Rest, Pro
     val.updateCredentialTags = (creds, typeOpts) => {
         let machineCred = [];
         let extraCreds = [];
+        let vaultCred = [];
 
         if (creds.machine) {
             let mach = creds.machine;
@@ -118,6 +119,12 @@ export default ['Rest', 'ProcessErrors', '$q', 'GetBasePath', function(Rest, Pro
             machineCred = [mach];
         }
 
+        if (creds.vault) {
+            let vault = creds.vault;
+            vault.postType = "vault";
+            vaultCred = [vault];
+        }
+
         if (creds.extra) {
             extraCreds = creds.extra
                 .map((cred) => {
@@ -127,7 +134,7 @@ export default ['Rest', 'ProcessErrors', '$q', 'GetBasePath', function(Rest, Pro
                 });
         }
 
-        return machineCred.concat(extraCreds).map(cred => ({
+        return machineCred.concat(extraCreds).concat(vaultCred).map(cred => ({
             name: cred.name,
             id: cred.id,
             postType: cred.postType,
@@ -145,6 +152,8 @@ export default ['Rest', 'ProcessErrors', '$q', 'GetBasePath', function(Rest, Pro
             if (credToRemove === cred.id) {
                 if (cred.postType === 'machine') {
                     structuredObj[cred.postType] = null;
+                } else if (cred.postType === 'vault') {
+                    structuredObj[cred.postType] = null;
                 } else {
                     structuredObj[cred.postType] = structuredObj[cred.postType]
                         .filter(cred => cred
@@ -163,6 +172,7 @@ export default ['Rest', 'ProcessErrors', '$q', 'GetBasePath', function(Rest, Pro
     val.loadCredentials = (data) => {
         let selectedCredentials = {
             machine: null,
+            vault: null,
             extra: []
         }, credTypes, credTypeOptions, credTags;
 
@@ -187,6 +197,24 @@ export default ['Rest', 'ProcessErrors', '$q', 'GetBasePath', function(Rest, Pro
                 }));
         }
 
+        if (data.related.vault_credential) {
+            Rest.setUrl(data.related.vault_credential);
+            credDefers.push(Rest.get()
+                .then(({data}) => {
+                    selectedCredentials.vault = data;
+                })
+                .catch(({data, status}) => {
+                    ProcessErrors(
+                        null, data, status, null,
+                        {
+                            hdr: 'Error!',
+                            msg: 'Failed to get machine credential. ' +
+                            'Get returned status: ' +
+                            status
+                        });
+                }));
+        }
+
         // get extra credentials
         if (data.related.extra_credentials) {
             Rest.setUrl(data.related.extra_credentials);
diff --git a/awx/ui/client/src/templates/labels/labelsList.block.less b/awx/ui/client/src/templates/labels/labelsList.block.less
index 4c0a97987a..649f1cd9a4 100644
--- a/awx/ui/client/src/templates/labels/labelsList.block.less
+++ b/awx/ui/client/src/templates/labels/labelsList.block.less
@@ -85,3 +85,11 @@
 .LabelList-deleteContainer:hover > .LabelList-tagDelete, .JobSubmission-previewTagContainerDelete:hover > .JobSubmission-previewTagContainerTagDelete {
     color: @default-bg;
 }
+
+.JobSubmission-previewTagContainer--vault{
+    flex: 1 0 auto;
+}
+
+.JobSubmission-previewTag--vault{
+    border-radius: 5px;
+}