diff --git a/awx/ui/client/features/credentials/add-edit-credentials.view.html b/awx/ui/client/features/credentials/add-edit-credentials.view.html
index 44ca1d7025..9214adda59 100644
--- a/awx/ui/client/features/credentials/add-edit-credentials.view.html
+++ b/awx/ui/client/features/credentials/add-edit-credentials.view.html
@@ -10,7 +10,11 @@
         <at-form state="vm.form">
             <at-input-text col="4" tab="1" state="vm.form.name"></at-input-text>
             <at-input-text col="4" tab="2" state="vm.form.description"></at-input-text>
-            <at-input-select col="4" tab="3" state="vm.form.credential_type"></at-input-select>
+            <at-input-lookup col="4" tab="3" state="vm.form.organization"></at-input-lookup>
+
+            <at-divider></at-divider>
+
+            <at-input-select col="4" tab="4" state="vm.form.credential_type"></at-input-select>
 
             <at-input-group col="4" tab="4" state="vm.form.inputs">
                 Type Details
diff --git a/awx/ui/client/features/credentials/index.js b/awx/ui/client/features/credentials/index.js
index 1aa3e683c3..661d3deedc 100644
--- a/awx/ui/client/features/credentials/index.js
+++ b/awx/ui/client/features/credentials/index.js
@@ -1,5 +1,5 @@
-import CredentialList from './credentials.list.js';
-import ListController from './list/credentials-list.controller';
+import CredentialList from '../../src/credentials/credentials.list';
+import ListController from '../../src/credentials/list/credentials-list.controller';
 import AddController from './add-credentials.controller.js';
 import EditController from './edit-credentials.controller.js';
 import { N_ } from '../../src/i18n';
@@ -111,7 +111,5 @@ config.$inject = [
 angular
     .module('at.features.credentials', [])
     .config(config)
-    .factory('CredentialList', CredentialList)
-    .controller('ListController', ListController)
     .controller('AddController', AddController)
     .controller('EditController', EditController);
diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less
index 4a313024b8..d26fbbc11d 100644
--- a/awx/ui/client/lib/components/_index.less
+++ b/awx/ui/client/lib/components/_index.less
@@ -4,3 +4,4 @@
 @import 'modal/_index';
 @import 'popover/_index';
 @import 'tabs/_index';
+@import 'utility/_index';
diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js
index 602ffbdaf3..3f24c7376b 100644
--- a/awx/ui/client/lib/components/index.js
+++ b/awx/ui/client/lib/components/index.js
@@ -1,9 +1,11 @@
 import actionGroup from './action/action-group.directive';
+import divider from './utility/divider.directive';
 import form from './form/form.directive';
 import formAction from './form/action.directive';
 import inputCheckbox from './input/checkbox.directive';
 import inputGroup from './input/group.directive';
 import inputLabel from './input/label.directive';
+import inputLookup from './input/lookup.directive';
 import inputMessage from './input/message.directive';
 import inputNumber from './input/number.directive';
 import inputSelect from './input/select.directive';
@@ -24,11 +26,13 @@ import BaseInputController from './input/base.controller';
 angular
     .module('at.lib.components', [])
     .directive('atActionGroup', actionGroup)
+    .directive('atDivider', divider)
     .directive('atForm', form)
     .directive('atFormAction', formAction)
     .directive('atInputCheckbox', inputCheckbox)
     .directive('atInputGroup', inputGroup)
     .directive('atInputLabel', inputLabel)
+    .directive('atInputLookup', inputLookup)
     .directive('atInputMessage', inputMessage)
     .directive('atInputNumber', inputNumber)
     .directive('atInputSecret', inputSecret)
diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less
index a396776a0d..7e6d191351 100644
--- a/awx/ui/client/lib/components/input/_index.less
+++ b/awx/ui/client/lib/components/input/_index.less
@@ -15,7 +15,7 @@
     }
 }
 
-.at-Checkbox {
+.at-InputCheckbox {
     margin: 0;
     padding: 0;
 
@@ -26,8 +26,8 @@
     }
 }
 
-.at-InputGroup-button {
-    height: 100%;
+.at-InputContainer {
+    margin-top: @at-space-6x;;
 }
 
 .at-Input-button {
@@ -69,7 +69,6 @@
 
 .at-InputGroup {
     padding: 0;
-    margin: 0;
     margin: @at-space-6x 0 0 0;
 }
 
@@ -81,11 +80,13 @@
     left: -@at-inset-width;
 }
 
+.at-InputGroup-button {
+    height: 100%;
+}
+
 .at-InputGroup-title {
     .at-mixin-Heading(@at-font-size-2x);
-    margin-top: 0;
-    margin-left: @at-space-5x;
-    margin-bottom: @at-space-4x;
+    margin: 0 0 0 @at-space-5x;
 }
 
 .at-InputGroup-divider {
@@ -190,6 +191,6 @@
     }
 }
 
-.at-Textarea {
+.at-InputTextarea {
     .at-mixin-FontFixedWidth();
 }
diff --git a/awx/ui/client/lib/components/input/checkbox.partial.html b/awx/ui/client/lib/components/input/checkbox.partial.html
index 86b64994ac..60cc234efd 100644
--- a/awx/ui/client/lib/components/input/checkbox.partial.html
+++ b/awx/ui/client/lib/components/input/checkbox.partial.html
@@ -1,7 +1,7 @@
-<div class="col-sm-{{::col}}">
+<div class="col-sm-{{::col}} at-InputContainer">
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
-            <div class="checkbox at-Checkbox">
+            <div class="checkbox at-InputCheckbox">
                 <input type="checkbox"
                        ng-class="{ 'at-Input--rejected': state.rejected }"
                        ng-model="state._value"
diff --git a/awx/ui/client/lib/components/input/group.directive.js b/awx/ui/client/lib/components/input/group.directive.js
index 7e26d7fe1f..5ffb8029b1 100644
--- a/awx/ui/client/lib/components/input/group.directive.js
+++ b/awx/ui/client/lib/components/input/group.directive.js
@@ -59,7 +59,7 @@ function AtInputGroupController ($scope, $compile) {
             input = Object.assign(input, vm.getComponentType(input));
 
             group.push(Object.assign({
-                _element: vm.createElement(input, i),
+                _element: vm.createComponent(input, i),
                 _key: 'inputs',
                 _group: true,
                 _groupIndex: i
@@ -108,18 +108,6 @@ function AtInputGroupController ($scope, $compile) {
         return config;
     };
 
-    vm.createElement = (input, index) => {
-        let tabindex = Number(scope.tab) + index;
-        let col = input._expand ? 12 : scope.col;
-
-        let element =
-            `<${input._component} col="${col}" tab="${tabindex}"
-                state="${state._reference}._group[${index}]">
-            </${input._component}>`;
-
-        return angular.element(element);
-    };
-
     vm.insert = group => {
         let container = document.createElement('div');
         let col = 1;
@@ -128,13 +116,13 @@ function AtInputGroupController ($scope, $compile) {
 
         group.forEach((input, i) => {
             if (input._expand && !isDivided) {
-                container.appendChild(vm.createInputDivider());
+                container.appendChild(vm.createDivider()[0]);
             }
 
             container.appendChild(input._element[0]);
 
             if ((input._expand || col % colPerRow === 0) && i !== group.length -1) {
-                container.appendChild(vm.createInputDivider());
+                container.appendChild(vm.createDivider()[0]);
                 isDivided = true;
                 col = 0;
             } else {
@@ -147,8 +135,19 @@ function AtInputGroupController ($scope, $compile) {
         element.appendChild(container);
     };
 
-    vm.createInputDivider = () => {
-        return angular.element(`<div class="at-InputGroup-divider"></div>`)[0];
+    vm.createComponent = (input, index) => {
+        let tabindex = Number(scope.tab) + index;
+        let col = input._expand ? 12 : scope.col;
+
+        return angular.element(
+            `<${input._component} col="${col}" tab="${tabindex}"
+                state="${state._reference}._group[${index}]">
+            </${input._component}>`
+        );
+    };
+
+    vm.createDivider = () => {
+        return angular.element('<at-divider></at-divider>');
     };
 
     vm.compile = group => {
diff --git a/awx/ui/client/lib/components/input/lookup.directive.js b/awx/ui/client/lib/components/input/lookup.directive.js
new file mode 100644
index 0000000000..c8316ec8f3
--- /dev/null
+++ b/awx/ui/client/lib/components/input/lookup.directive.js
@@ -0,0 +1,44 @@
+function atInputLookupLink (scope, element, attrs, controllers) {
+    let formController = controllers[0];
+    let inputController = controllers[1];
+
+    if (scope.tab === '1') {
+        element.find('input')[0].focus();
+    }
+
+    inputController.init(scope, element, formController);
+}
+
+function AtInputLookupController (baseInputController) {
+    let vm = this || {};
+
+    vm.init = (scope, element, form) => {
+        baseInputController.call(vm, 'input', scope, element, form);
+
+        vm.check();
+    };
+}
+
+AtInputLookupController.$inject = ['BaseInputController'];
+
+function atInputLookup (pathService) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        require: ['^^atForm', 'atInputLookup'],
+        templateUrl: pathService.getPartialPath('components/input/lookup'),
+        controller: AtInputLookupController,
+        controllerAs: 'vm',
+        link: atInputLookupLink,
+        scope: {
+            state: '=',
+            col: '@',
+            tab: '@'
+        }
+    };
+}
+
+atInputLookup.$inject = ['PathService'];
+
+export default atInputLookup;
diff --git a/awx/ui/client/lib/components/input/lookup.partial.html b/awx/ui/client/lib/components/input/lookup.partial.html
new file mode 100644
index 0000000000..a77505db33
--- /dev/null
+++ b/awx/ui/client/lib/components/input/lookup.partial.html
@@ -0,0 +1,24 @@
+<div class="col-sm-{{::col}} at-InputContainer">
+    <div class="form-group at-u-flat">
+        <at-input-label></at-input-label>
+
+        <div class="input-group">
+            <span class="input-group-btn">
+                <button class="btn at-ButtonHollow--white at-Input-button"
+                        ng-disabled="state._disabled || form.disabled">
+                    <i class="fa fa-search"></i>
+                </button>
+            </span>
+            <input type="text"
+               class="form-control at-Input"
+               ng-class="{ 'at-Input--rejected': state.rejected }"
+               ng-model="state._value"
+               ng-attr-tabindex="{{ tab || undefined }}"
+               ng-attr-placeholder="{{::state._placeholder || undefined }}"
+               ng-change="vm.check()"
+               ng-disabled="state._disabled || form.disabled" />
+        </div>
+
+        <at-input-message></at-input-message>
+    </div>
+</div>
diff --git a/awx/ui/client/lib/components/input/number.partial.html b/awx/ui/client/lib/components/input/number.partial.html
index 90708edd38..57aa355bfa 100644
--- a/awx/ui/client/lib/components/input/number.partial.html
+++ b/awx/ui/client/lib/components/input/number.partial.html
@@ -1,4 +1,4 @@
-<div class="col-sm-{{::col}}">
+<div class="col-sm-{{::col}} at-InputContainer">
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
diff --git a/awx/ui/client/lib/components/input/secret.partial.html b/awx/ui/client/lib/components/input/secret.partial.html
index 2445338d88..b9979f5520 100644
--- a/awx/ui/client/lib/components/input/secret.partial.html
+++ b/awx/ui/client/lib/components/input/secret.partial.html
@@ -1,4 +1,4 @@
-<div class="col-sm-{{::col}}">
+<div class="col-sm-{{::col}} at-InputContainer">
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
diff --git a/awx/ui/client/lib/components/input/select.partial.html b/awx/ui/client/lib/components/input/select.partial.html
index d096c4baef..aaa31bebee 100644
--- a/awx/ui/client/lib/components/input/select.partial.html
+++ b/awx/ui/client/lib/components/input/select.partial.html
@@ -1,4 +1,4 @@
-<div class="col-sm-{{::col}}">
+<div class="col-sm-{{::col}} at-InputContainer">
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
diff --git a/awx/ui/client/lib/components/input/text.partial.html b/awx/ui/client/lib/components/input/text.partial.html
index 676f4f05d6..c5140df834 100644
--- a/awx/ui/client/lib/components/input/text.partial.html
+++ b/awx/ui/client/lib/components/input/text.partial.html
@@ -1,4 +1,4 @@
-<div class="col-sm-{{::col}}">
+<div class="col-sm-{{::col}} at-InputContainer">
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
diff --git a/awx/ui/client/lib/components/input/textarea-secret.partial.html b/awx/ui/client/lib/components/input/textarea-secret.partial.html
index 14c97eaf37..11d1f7a3df 100644
--- a/awx/ui/client/lib/components/input/textarea-secret.partial.html
+++ b/awx/ui/client/lib/components/input/textarea-secret.partial.html
@@ -1,4 +1,4 @@
-<div class="col-sm-{{::col}}">
+<div class="col-sm-{{::col}} at-InputContainer">
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
@@ -15,7 +15,7 @@
                    ng-class="{'at-InputFile--drag': drag }"
                    type="file"
                    name="files" />
-            <textarea class="form-control at-Input at-Textarea"
+            <textarea class="form-control at-Input at-InputTextarea"
                       ng-model="state[state._activeModel]"
                       ng-class="{ 'at-Input--rejected': state._rejected }"
                       ng-attr-maxlength="{{ state.max_length || undefined }}"
diff --git a/awx/ui/client/lib/components/input/textarea.partial.html b/awx/ui/client/lib/components/input/textarea.partial.html
index 2abd85759a..673094668b 100644
--- a/awx/ui/client/lib/components/input/textarea.partial.html
+++ b/awx/ui/client/lib/components/input/textarea.partial.html
@@ -1,8 +1,8 @@
-<div class="col-sm-{{::col}}">
+<div class="col-sm-{{::col}} at-InputContainer">
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
-        <textarea class="form-control at-Input at-Textarea"
+        <textarea class="form-control at-Input at-InputTextarea"
                   ng-model="state._value"
                   ng-class="{ 'at-Input--rejected': state._rejected }"
                   ng-attr-maxlength="{{ state.max_length || undefined }}"
diff --git a/awx/ui/client/lib/components/list/list-item.directive.js b/awx/ui/client/lib/components/list/list-item.directive.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/lib/components/list/list.directive.js b/awx/ui/client/lib/components/list/list.directive.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/lib/components/panel/_index.less b/awx/ui/client/lib/components/panel/_index.less
index 1bf5227be8..603f949a2a 100644
--- a/awx/ui/client/lib/components/panel/_index.less
+++ b/awx/ui/client/lib/components/panel/_index.less
@@ -15,7 +15,7 @@
 }
 
 .at-Panel-body {
-    margin: @at-space-6x 0 0 0;
+    margin: 0;
     padding: 0;
 }
 
diff --git a/awx/ui/client/lib/components/utility/_index.less b/awx/ui/client/lib/components/utility/_index.less
new file mode 100644
index 0000000000..f9851bef2b
--- /dev/null
+++ b/awx/ui/client/lib/components/utility/_index.less
@@ -0,0 +1,5 @@
+.at-Divider {
+    clear: both;
+    margin: 0;
+    padding: 0;
+}
diff --git a/awx/ui/client/lib/components/utility/divider.directive.js b/awx/ui/client/lib/components/utility/divider.directive.js
new file mode 100644
index 0000000000..0ccb906996
--- /dev/null
+++ b/awx/ui/client/lib/components/utility/divider.directive.js
@@ -0,0 +1,12 @@
+function atPanelBody (pathService) {
+    return {
+        restrict: 'E',
+        replace: true,
+        templateUrl: pathService.getPartialPath('components/utility/divider'),
+        scope: false
+    };
+}
+
+atPanelBody.$inject = ['PathService'];
+
+export default atPanelBody;
diff --git a/awx/ui/client/lib/components/utility/divider.partial.html b/awx/ui/client/lib/components/utility/divider.partial.html
new file mode 100644
index 0000000000..514695d55c
--- /dev/null
+++ b/awx/ui/client/lib/components/utility/divider.partial.html
@@ -0,0 +1 @@
+<div class="at-Divider"></div>
diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js
index b17c56f981..e367c4d935 100644
--- a/awx/ui/client/src/app.js
+++ b/awx/ui/client/src/app.js
@@ -41,6 +41,7 @@ import portalMode from './portal-mode/main';
 import systemTracking from './system-tracking/main';
 import inventories from './inventories/main';
 import inventoryScripts from './inventory-scripts/main';
+import credentials from './credentials/main';
 import credentialTypes from './credential-types/main';
 import organizations from './organizations/main';
 import managementJobs from './management-jobs/main';
@@ -105,6 +106,7 @@ var tower = angular.module('Tower', [
     systemTracking.name,
     inventories.name,
     inventoryScripts.name,
+    credentials.name,
     credentialTypes.name,
     organizations.name,
     managementJobs.name,
diff --git a/awx/ui/client/src/credentials/credentials.form.js b/awx/ui/client/src/credentials/credentials.form.js
new file mode 100644
index 0000000000..f8c0440725
--- /dev/null
+++ b/awx/ui/client/src/credentials/credentials.form.js
@@ -0,0 +1,475 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+ /**
+ * @ngdoc function
+ * @name forms.function:Credentials
+ * @description This form is for adding/editing a Credential
+*/
+
+export default ['i18n', function(i18n) {
+        return {
+
+            addTitle: i18n._('CREATE CREDENTIAL'), //Legend in add mode
+            editTitle: '{{ name }}', //Legend in edit mode
+            name: 'credential',
+            // the top-most node of generated state tree
+            stateTree: 'credentials',
+            forceListeners: true,
+            subFormTitles: {
+                credentialSubForm: i18n._('Type Details'),
+            },
+
+            actions: {
+
+            },
+
+            fields: {
+                name: {
+                    label: i18n._('Name'),
+                    type: 'text',
+                    required: true,
+                    autocomplete: false,
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                description: {
+                    label: i18n._('Description'),
+                    type: 'text',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                organization: {
+                    basePath: 'organizations',
+                    ngShow: 'canShareCredential',
+                    label: i18n._('Organization'),
+                    type: 'lookup',
+                    autopopulateLookup: false,
+                    list: 'OrganizationList',
+                    sourceModel: 'organization',
+                    sourceField: 'name',
+                    awPopOver: "<p>" + i18n._("If no organization is given, the credential can only be used by the user that creates the credential.  Organization admins and system administrators can assign an organization so that roles for the credential can be assigned to users and teams in that organization.") + "</p>",
+                    dataTitle: i18n._('Organization') + ' ',
+                    dataPlacement: 'bottom',
+                    dataContainer: "body",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd) || !canEditOrg',
+                    awLookupWhen: '(credential_obj.summary_fields.user_capabilities.edit || canAdd) && canEditOrg'
+                },
+                kind: {
+                    label: i18n._('Type'),
+                    excludeModal: true,
+                    type: 'select',
+                    ngOptions: 'kind.label for kind in credential_kind_options track by kind.value', //  select as label for value in array 'kind.label for kind in credential_kind_options',
+                    ngChange: 'kindChange()',
+                    required: true,
+                    awPopOver: '<dl>\n' +
+                            '<dt>' + i18n._('Machine') + '</dt>\n' +
+                            '<dd>' + i18n._('Authentication for remote machine access. This can include SSH keys, usernames, passwords, ' +
+                            'and sudo information. Machine credentials are used when submitting jobs to run playbooks against ' +
+                            'remote hosts.') + '</dd>' +
+                            '<dt>' + i18n._('Network') + '</dt>\n' +
+                            '<dd>' + i18n._('Authentication for network device access. This can include SSH keys, usernames, passwords, ' +
+                            'and authorize information. Network credentials are used when submitting jobs to run playbooks against ' +
+                            'network devices.') + '</dd>' +
+                            '<dt>' + i18n._('Source Control') + '</dt>\n' +
+                            '<dd>' + i18n._('Used to check out and synchronize playbook repositories with a remote source control ' +
+                            'management system such as Git, Subversion (svn), or Mercurial (hg). These credentials are ' +
+                            'used by Projects.') + '</dd>\n' +
+                            '<dt>' + i18n._('Others (Cloud Providers)') + '</dt>\n' +
+                            '<dd>' + i18n._('Usernames, passwords, and access keys for authenticating to the specified cloud or infrastructure ' +
+                            'provider. These are used for smart inventory sources and for cloud provisioning and deployment ' +
+                            'in playbook runs.') + '</dd>\n' +
+                            '</dl>\n',
+                    dataTitle: i18n._('Type'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    hasSubForm: true,
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                access_key: {
+                    label: i18n._('Access Key'),
+                    type: 'text',
+                    ngShow: "kind.value == 'aws'",
+                    awRequiredWhen: {
+                        reqExpression: "aws_required",
+                        init: false
+                    },
+                    autocomplete: false,
+                    apiField: 'username',
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                secret_key: {
+                    label: i18n._('Secret Key'),
+                    type: 'sensitive',
+                    ngShow: "kind.value == 'aws'",
+                    ngDisabled: "secret_key_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
+                    awRequiredWhen: {
+                        reqExpression: "aws_required",
+                        init: false
+                    },
+                    autocomplete: false,
+                    clear: false,
+                    hasShowInputButton: true,
+                    apiField: 'password',
+                    subForm: 'credentialSubForm'
+                },
+                security_token: {
+                    label: i18n._('STS Token'),
+                    type: 'sensitive',
+                    ngShow: "kind.value == 'aws'",
+                    autocomplete: false,
+                    apiField: 'security_token',
+                    awPopOver: "<div>" + i18n._("Security Token Service (STS) is a web service that enables you to request temporary, limited-privilege credentials for AWS Identity and Access Management (IAM) users.") + "</div><div style='padding-top: 10px'>" +
+                               i18n.sprintf(i18n._("To learn more about the IAM STS Token, refer to the %sAmazon documentation%s."), "<a href='http://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html' target='_blank'>", "</a>") + "</div>",
+                    hasShowInputButton: true,
+                    dataTitle: i18n._('STS Token'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "host": {
+                    labelBind: 'hostLabel',
+                    type: 'text',
+                    ngShow: "kind.value == 'vmware' || kind.value == 'openstack' || kind.value === 'satellite6' || kind.value === 'cloudforms'",
+                    awPopOverWatch: "hostPopOver",
+                    awPopOver: i18n._("set in helpers/credentials"),
+                    dataTitle: i18n._('Host'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    autocomplete: false,
+                    awRequiredWhen: {
+                        reqExpression: 'host_required',
+                        init: false
+                    },
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "subscription": {
+                    label: i18n._("Subscription ID"),
+                    type: 'text',
+                    ngShow: "kind.value == 'azure' || kind.value == 'azure_rm'",
+                    awRequiredWhen: {
+                        reqExpression: 'subscription_required',
+                        init: false
+                    },
+
+
+                    autocomplete: false,
+                    awPopOver: '<p>' + i18n._('Subscription ID is an Azure construct, which is mapped to a username.') + '</p>',
+                    dataTitle: i18n._('Subscription ID'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "username": {
+                    labelBind: 'usernameLabel',
+                    type: 'text',
+                    ngShow: "kind.value && kind.value !== 'aws' && " +
+                            "kind.value !== 'gce' && kind.value!=='azure'",
+                    awRequiredWhen: {
+                        reqExpression: 'username_required',
+                        init: false
+                    },
+                    autocomplete: false,
+                    subForm: "credentialSubForm",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "email_address": {
+                    labelBind: 'usernameLabel',
+                    type: 'email',
+                    ngShow: "kind.value === 'gce'",
+                    awRequiredWhen: {
+                        reqExpression: 'email_required',
+                        init: false
+                    },
+                    autocomplete: false,
+                    awPopOver: '<p>' + i18n.sprintf(i18n._('The email address assigned to the Google Compute Engine %sservice account.'), '<b><i>') + '</b></i></p>',
+                    dataTitle: i18n._('Email'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "api_key": {
+                    label: i18n._('API Key'),
+                    type: 'sensitive',
+                    ngShow: "kind.value == 'rax'",
+                    awRequiredWhen: {
+                        reqExpression: "rackspace_required",
+                        init: false
+                    },
+                    autocomplete: false,
+                    hasShowInputButton: true,
+                    clear: false,
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "password": {
+                    labelBind: 'passwordLabel',
+                    type: 'sensitive',
+                    ngShow: "kind.value == 'scm' || kind.value == 'vmware' || kind.value == 'openstack'|| kind.value == 'satellite6'|| kind.value == 'cloudforms'|| kind.value == 'net' || kind.value == 'azure_rm'",
+                    clear: false,
+                    autocomplete: false,
+                    hasShowInputButton: true,
+                    awRequiredWhen: {
+                        reqExpression: "password_required",
+                        init: false
+                    },
+                    subForm: "credentialSubForm",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "ssh_password": {
+                    label: i18n._('Password'),
+                    type: 'sensitive',
+                    ngShow: "kind.value == 'ssh'",
+                    ngDisabled: "ssh_password_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
+                    subCheckbox: {
+                        variable: 'ssh_password_ask',
+                        text: i18n._('Ask at runtime?'),
+                        ngChange: 'ask(\'ssh_password\', \'undefined\')',
+                        ngDisabled: false,
+                    },
+                    hasShowInputButton: true,
+                    autocomplete: false,
+                    subForm: 'credentialSubForm'
+                },
+                "ssh_key_data": {
+                    labelBind: 'sshKeyDataLabel',
+                    type: 'textarea',
+                    ngShow: "kind.value == 'ssh' || kind.value == 'scm' || " +
+                            "kind.value == 'gce' || kind.value == 'azure' || kind.value == 'net'",
+                    awRequiredWhen: {
+                        reqExpression: 'key_required',
+                        init: true
+                    },
+                    class: 'Form-textAreaLabel Form-formGroup--fullWidth',
+                    elementClass: 'Form-monospace',
+
+
+                    awDropFile: true,
+                    rows: 10,
+                    awPopOver: i18n._("SSH key description"),
+                    awPopOverWatch:   "key_description",
+                    dataTitle: i18n._('Private Key'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    subForm: "credentialSubForm",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "ssh_key_unlock": {
+                    label: i18n._('Private Key Passphrase'),
+                    type: 'sensitive',
+                    ngShow: "kind.value === 'ssh' || kind.value === 'scm' || kind.value === 'net'",
+                    ngDisabled: "keyEntered === false || ssh_key_unlock_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
+                    subCheckbox: {
+                        variable: 'ssh_key_unlock_ask',
+                        ngShow: "kind.value == 'ssh'",
+                        text: i18n._('Ask at runtime?'),
+                        ngChange: 'ask(\'ssh_key_unlock\', \'undefined\')',
+                        ngDisabled: "keyEntered === false"
+                    },
+                    hasShowInputButton: true,
+                    subForm: 'credentialSubForm'
+                },
+                "become_method": {
+                    label: i18n._("Privilege Escalation"),
+                    // hintText: "If your playbooks use privilege escalation (\"sudo: true\", \"su: true\", etc), you can specify the username to become, and the password to use here.",
+                    type: 'select',
+                    ngShow: "kind.value == 'ssh'",
+                    dataTitle: i18n._('Privilege Escalation'),
+                    ngOptions: 'become.label for become in become_options track by become.value',
+                    awPopOver: "<p>" + i18n.sprintf(i18n._("Specify a method for %s operations. " +
+                    "This is equivalent to specifying the %s parameter, where %s could be "+
+                    "%s"), "'become'", "<code>--become-method=BECOME_METHOD</code>", "<code>BECOME_METHOD</code>", "<code>sudo | su | pbrun | pfexec | runas</code>") + " <br>" + i18n.sprintf(i18n._("(defaults to %s)"), "<code>sudo</code>") + "</p>",
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)',
+                    ngChange: 'becomeMethodChange()',
+                },
+                "become_username": {
+                    labelBind: 'becomeUsernameLabel',
+                    type: 'text',
+                    ngShow: "(kind.value == 'ssh' && (become_method && become_method.value)) ",
+
+
+                    autocomplete: false,
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "become_password": {
+                    labelBind: 'becomePasswordLabel',
+                    type: 'sensitive',
+                    ngShow: "(kind.value == 'ssh' && (become_method && become_method.value)) ",
+                    ngDisabled: "become_password_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
+                    subCheckbox: {
+                        variable: 'become_password_ask',
+                        text: i18n._('Ask at runtime?'),
+                        ngChange: 'ask(\'become_password\', \'undefined\')',
+                        ngDisabled: false,
+                    },
+                    hasShowInputButton: true,
+                    autocomplete: false,
+                    subForm: 'credentialSubForm'
+                },
+                client:{
+                    type: 'text',
+                    label: i18n._('Client ID'),
+                    subForm: 'credentialSubForm',
+                    ngShow: "kind.value === 'azure_rm'",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                secret:{
+                    type: 'sensitive',
+                    hasShowInputButton: true,
+                    autocomplete: false,
+                    label: i18n._('Client Secret'),
+                    subForm: 'credentialSubForm',
+                    ngShow: "kind.value === 'azure_rm'",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                tenant: {
+                    type: 'text',
+                    label: i18n._('Tenant ID'),
+                    subForm: 'credentialSubForm',
+                    ngShow: "kind.value === 'azure_rm'",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                authorize: {
+                    label: i18n._('Authorize'),
+                    type: 'checkbox',
+                    ngChange: "toggleCallback('host_config_key')",
+                    subForm: 'credentialSubForm',
+                    ngShow: "kind.value === 'net'",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                authorize_password: {
+                    label: i18n._('Authorize Password'),
+                    type: 'sensitive',
+                    hasShowInputButton: true,
+                    autocomplete: false,
+                    subForm: 'credentialSubForm',
+                    ngShow: "authorize && authorize !== 'false'",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "project": {
+                    labelBind: 'projectLabel',
+                    type: 'text',
+                    ngShow: "kind.value == 'gce' || kind.value == 'openstack'",
+                    awPopOverWatch: "projectPopOver",
+                    awPopOver: i18n._("set in helpers/credentials"),
+                    dataTitle: i18n._('Project Name'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    awRequiredWhen: {
+                        reqExpression: 'project_required',
+                        init: false
+                    },
+                    subForm: 'credentialSubForm',
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                "domain": {
+                    labelBind: 'domainLabel',
+                    type: 'text',
+                    ngShow: "kind.value == 'openstack'",
+                    awPopOver: "<p>" + i18n._("OpenStack domains define administrative " +
+                    "boundaries. It is only needed for Keystone v3 authentication URLs. " +
+                    "Common scenarios include:") + "<ul><li><b>" + i18n.sprintf(i18n._("v2 URLs%s - leave blank"), "</b>") + "</li>" +
+                    "<li><b>" + i18n.sprintf(i18n._("v3 default%s - set to 'default'"), "</b>") + "</br></li>" +
+                    "<li><b>" + i18n.sprintf(i18n._("v3 multi-domain%s - your domain name"), "</b>") + "</p></li></ul></p>",
+                    dataTitle: i18n._('Domain Name'),
+                    dataPlacement: 'right',
+                    dataContainer: "body",
+                    ngDisabled: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)',
+                    subForm: 'credentialSubForm'
+                },
+                "vault_password": {
+                    label: i18n._("Vault Password"),
+                    type: 'sensitive',
+                    ngShow: "kind.value == 'ssh'",
+                    ngDisabled: "vault_password_ask || !(credential_obj.summary_fields.user_capabilities.edit || canAdd)",
+                    subCheckbox: {
+                        variable: 'vault_password_ask',
+                        text: i18n._('Ask at runtime?'),
+                        ngChange: 'ask(\'vault_password\', \'undefined\')',
+                        ngDisabled: false,
+                    },
+                    hasShowInputButton: true,
+                    autocomplete: false,
+                    subForm: 'credentialSubForm'
+                }
+            },
+
+            buttons: {
+                cancel: {
+                    ngClick: 'formCancel()',
+                    ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                close: {
+                    ngClick: 'formCancel()',
+                    ngShow: '!(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                },
+                save: {
+                    label: 'Save',
+                    ngClick: 'formSave()', //$scope.function to call on click, optional
+                    ngDisabled: true,
+                    ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)' //Disable when $pristine or $invalid, optional
+                }
+            },
+
+            related: {
+                permissions: {
+                    name: 'permissions',
+                    disabled: '(organization === undefined ? true : false)',
+                    // Do not transition the state if organization is undefined
+                    ngClick: `(organization === undefined ? true : false)||$state.go('credentials.edit.permissions')`,
+                    awToolTip: '{{permissionsTooltip}}',
+                    dataTipWatch: 'permissionsTooltip',
+                    awToolTipTabEnabledInEditMode: true,
+                    dataPlacement: 'right',
+                    basePath: 'api/v2/credentials/{{$stateParams.credential_id}}/access_list/',
+                    search: {
+                        order_by: 'username'
+                    },
+                    type: 'collection',
+                    title: i18n._('Permissions'),
+                    iterator: 'permission',
+                    index: false,
+                    open: false,
+                    actions: {
+                        add: {
+                            ngClick: "$state.go('.add')",
+                            label: 'Add',
+                            awToolTip: i18n._('Add a permission'),
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                        }
+                    },
+                    fields: {
+                        username: {
+                            key: true,
+                            label: i18n._('User'),
+                            linkBase: 'users',
+                            class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                        },
+                        role: {
+                            label: i18n._('Role'),
+                            type: 'role',
+                            nosort: true,
+                            class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4'
+                        },
+                        team_roles: {
+                            label: i18n._('Team Roles'),
+                            type: 'team_roles',
+                            nosort: true,
+                            class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4'
+                        }
+                    }
+                }
+            }
+        };}];
diff --git a/awx/ui/client/features/credentials/credentials.list.js b/awx/ui/client/src/credentials/credentials.list.js
similarity index 92%
rename from awx/ui/client/features/credentials/credentials.list.js
rename to awx/ui/client/src/credentials/credentials.list.js
index 39afc2e519..74528404bd 100644
--- a/awx/ui/client/features/credentials/credentials.list.js
+++ b/awx/ui/client/src/credentials/credentials.list.js
@@ -30,6 +30,13 @@ export default ['i18n', function(i18n) {
                 awToolTip: '{{credential.description}}',
                 dataPlacement: 'top'
             },
+            kind: {
+                label: i18n._('Type'),
+                ngBind: 'credential.kind_label',
+                excludeModal: true,
+                nosort: true,
+                columnClass: 'col-md-2 hidden-sm hidden-xs'
+            },
             owners: {
                 label: i18n._('Owners'),
                 type: 'owners',
diff --git a/awx/ui/client/features/credentials/factories/become-method-change.factory.js b/awx/ui/client/src/credentials/factories/become-method-change.factory.js
similarity index 100%
rename from awx/ui/client/features/credentials/factories/become-method-change.factory.js
rename to awx/ui/client/src/credentials/factories/become-method-change.factory.js
diff --git a/awx/ui/client/features/credentials/factories/credential-form-save.factory.js b/awx/ui/client/src/credentials/factories/credential-form-save.factory.js
similarity index 100%
rename from awx/ui/client/features/credentials/factories/credential-form-save.factory.js
rename to awx/ui/client/src/credentials/factories/credential-form-save.factory.js
diff --git a/awx/ui/client/features/credentials/factories/kind-change.factory.js b/awx/ui/client/src/credentials/factories/kind-change.factory.js
similarity index 100%
rename from awx/ui/client/features/credentials/factories/kind-change.factory.js
rename to awx/ui/client/src/credentials/factories/kind-change.factory.js
diff --git a/awx/ui/client/features/credentials/factories/owner-change.factory.js b/awx/ui/client/src/credentials/factories/owner-change.factory.js
similarity index 100%
rename from awx/ui/client/features/credentials/factories/owner-change.factory.js
rename to awx/ui/client/src/credentials/factories/owner-change.factory.js
diff --git a/awx/ui/client/features/credentials/list/credentials-list.controller.js b/awx/ui/client/src/credentials/list/credentials-list.controller.js
similarity index 98%
rename from awx/ui/client/features/credentials/list/credentials-list.controller.js
rename to awx/ui/client/src/credentials/list/credentials-list.controller.js
index 096a1202d1..fb0c903b4c 100644
--- a/awx/ui/client/features/credentials/list/credentials-list.controller.js
+++ b/awx/ui/client/src/credentials/list/credentials-list.controller.js
@@ -65,7 +65,7 @@ export default ['$scope', 'Rest', 'CredentialList', 'Prompt', 'ClearScope',
         };
 
         $scope.editCredential = function(id) {
-            $state.go('credentials.edit', { id: id });
+            $state.go('credentials.edit', { credential_id: id });
         };
 
         $scope.deleteCredential = function(id, name) {
diff --git a/awx/ui/client/src/credentials/main.js b/awx/ui/client/src/credentials/main.js
new file mode 100644
index 0000000000..094e7ce568
--- /dev/null
+++ b/awx/ui/client/src/credentials/main.js
@@ -0,0 +1,25 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import ownerList from './ownerList.directive';
+import CredentialsList from './list/credentials-list.controller';
+import BecomeMethodChange from './factories/become-method-change.factory';
+import CredentialFormSave from './factories/credential-form-save.factory';
+import KindChange from './factories/kind-change.factory';
+import OwnerChange from './factories/owner-change.factory';
+import CredentialList from './credentials.list';
+import CredentialForm from './credentials.form';
+
+export default
+    angular.module('credentials', [])
+        .directive('ownerList', ownerList)
+        .factory('BecomeMethodChange', BecomeMethodChange)
+        .factory('CredentialFormSave', CredentialFormSave)
+        .factory('KindChange', KindChange)
+        .factory('OwnerChange', OwnerChange)
+        .controller('CredentialsList', CredentialsList)
+        .factory('CredentialList', CredentialList)
+        .factory('CredentialForm', CredentialForm);
diff --git a/awx/ui/client/features/credentials/ownerList.block.less b/awx/ui/client/src/credentials/ownerList.block.less
similarity index 100%
rename from awx/ui/client/features/credentials/ownerList.block.less
rename to awx/ui/client/src/credentials/ownerList.block.less
diff --git a/awx/ui/client/features/credentials/ownerList.directive.js b/awx/ui/client/src/credentials/ownerList.directive.js
similarity index 100%
rename from awx/ui/client/features/credentials/ownerList.directive.js
rename to awx/ui/client/src/credentials/ownerList.directive.js
diff --git a/awx/ui/client/features/credentials/ownerList.partial.html b/awx/ui/client/src/credentials/ownerList.partial.html
similarity index 100%
rename from awx/ui/client/features/credentials/ownerList.partial.html
rename to awx/ui/client/src/credentials/ownerList.partial.html