diff --git a/awx/ui/client/features/credentials/_index.less b/awx/ui/client/features/credentials/_index.less
index e69de29bb2..4f4f37cd91 100644
--- a/awx/ui/client/features/credentials/_index.less
+++ b/awx/ui/client/features/credentials/_index.less
@@ -0,0 +1,3 @@
+.at-CredentialsPermissions {
+    margin-top: 20px;
+}
diff --git a/awx/ui/client/features/credentials/add-credentials.controller.js b/awx/ui/client/features/credentials/add-credentials.controller.js
index 50daf0b9ca..7b0a2460f6 100644
--- a/awx/ui/client/features/credentials/add-credentials.controller.js
+++ b/awx/ui/client/features/credentials/add-credentials.controller.js
@@ -7,6 +7,15 @@ function AddCredentialsController (models, $state) {
 
     vm.panelTitle = 'New Credential';
 
+    vm.tab = {
+        details: {  
+            _active: true
+        },
+        permissions:{
+            _disabled: true
+        }
+    };
+
     vm.form = credential.createFormSchema('post', {
         omit: ['user', 'team', 'inputs']
     });
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 b2839da6b5..977e5da1d6 100644
--- a/awx/ui/client/features/credentials/add-edit-credentials.view.html
+++ b/awx/ui/client/features/credentials/add-edit-credentials.view.html
@@ -1,10 +1,9 @@
-<div ui-view="permissions"></div>
-<at-panel>
+<at-panel ng-if="$state.current.name === 'credentials.add' || $state.current.name === 'credentials.edit'">
     <at-panel-heading>{{ vm.panelTitle }}</at-panel-heading>
 
     <at-tab-group>
-        <at-tab to="details">Details</at-tab>
-        <at-tab to="permissions">Permissions</at-tab>
+        <at-tab state="vm.tab.details">Details</at-tab>
+        <at-tab state="vm.tab.permissions">Permissions</at-tab>
     </at-tab-group>
 
     <at-panel-body>
@@ -28,3 +27,15 @@
         </at-form>
     </at-panel-body>
 </at-panel>
+
+<at-panel ng-if="$state.current.name === 'credentials.edit.permissions' ||
+                 $state.current.name === 'credentials.edit.permissions.add'">
+    <at-panel-heading>Credentials Permissions</at-panel-heading>
+
+    <at-panel-body>
+        <div class="at-CredentialsPermissions" ui-view="related"></div>
+    </at-panel-body>
+</at-panel>
+
+<div ng-if="$state.current.name === 'credentials.edit.permissions.add'" ui-view="modal"></div>
+
diff --git a/awx/ui/client/features/credentials/edit-credentials.controller.js b/awx/ui/client/features/credentials/edit-credentials.controller.js
index 4f2ee0c122..7e31f84b7e 100644
--- a/awx/ui/client/features/credentials/edit-credentials.controller.js
+++ b/awx/ui/client/features/credentials/edit-credentials.controller.js
@@ -1,10 +1,23 @@
-function EditCredentialsController (models, $state) {
+function EditCredentialsController (models, $state, $scope) {
     let vm = this || {};
 
     let me = models.me;
     let credential = models.credential;
     let credentialType = models.credentialType;
 
+    vm.tab = {
+        details: {  
+            _active: true
+        },
+        permissions:{
+            _go: 'credentials.edit.permissions',
+            _params: { credential_id: credential.get('id') }
+        }
+    };
+
+    // Only exists for permissions compatibility
+    $scope.credential_obj = credential.get();
+
     vm.panelTitle = credential.get('name');
 
     vm.form = credential.createFormSchema('put', {
@@ -47,7 +60,8 @@ function EditCredentialsController (models, $state) {
 
 EditCredentialsController.$inject = [
     'resolvedModels',
-    '$state'
+    '$state',
+    '$scope'
 ];
 
 export default EditCredentialsController;
diff --git a/awx/ui/client/features/credentials/index.js b/awx/ui/client/features/credentials/index.js
index 1b936ccd97..525ec6c00e 100644
--- a/awx/ui/client/features/credentials/index.js
+++ b/awx/ui/client/features/credentials/index.js
@@ -4,7 +4,7 @@ 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';
+import { N_ } from '../../src/i18n';
 
 function CredentialsResolve ($q, $stateParams, Me, Credential, CredentialType) {
     let id = $stateParams.credential_id;
@@ -109,40 +109,73 @@ function CredentialsConfig ($stateProvider, $stateExtenderProvider, stateDefinit
         name: "credentials.edit.permissions",
         url: "/permissions?{permission_search:queryset}",
         resolve: {
-            ListDefinition: ['CredentialList', CredentialList => CredentialList],
-            Dataset: [
-                'CredentialList',
-                'QuerySet',
-                '$stateParams',
-                'GetBasePath',
-                '$interpolate',
-                '$rootScope',
-                '$state',
-                (list, qs, $stateParams, GetBasePath, $interpolate, $rootScope, $state) => {
-                    list.basePath = 'api/v2/credentials/2/access_list/';
-                    // allow related list definitions to use interpolated $rootScope / $stateParams in basePath field
-                    let path, interpolator;
-                    if (GetBasePath(list.basePath)) {
-                        path = GetBasePath(list.basePath);
-                    } else {
-                        interpolator = $interpolate(list.basePath);
-                        path = interpolator({ $rootScope: $rootScope, $stateParams: $stateParams });
+            ListDefinition: () => {
+                return {
+                    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.id}}/access_list/',
+                    search: {
+                        order_by: 'username'
+                    },
+                    type: 'collection',
+                    title: N_('Permissions'),
+                    iterator: 'permission',
+                    index: false,
+                    open: false,
+                    actions: {
+                        add: {
+                            ngClick: "$state.go('.add')",
+                            label: 'Add',
+                            awToolTip: N_('Add a permission'),
+                            actionClass: 'btn List-buttonSubmit',
+                            buttonContent: '&#43; ' + N_('ADD'),
+                            ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
+                        }
+                    },
+                    fields: {
+                        username: {
+                            key: true,
+                            label: N_('User'),
+                            linkBase: 'users',
+                            class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+                        },
+                        role: {
+                            label: N_('Role'),
+                            type: 'role',
+                            nosort: true,
+                            class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4'
+                        },
+                        team_roles: {
+                            label: N_('Team Roles'),
+                            type: 'team_roles',
+                            nosort: true,
+                            class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4'
+                        }
                     }
+                };
+            },
+            Dataset: ['QuerySet', '$stateParams', (qs, $stateParams) => {
+                    let id = $stateParams.credential_id;
+                    let path = `api/v2/credentials/${id}/access_list/`;
 
-                    $stateParams[`${list.iterator}_search`].order_by = 'username';
-                    return qs.search(path, $stateParams[`${list.iterator}_search`]);
-
+                    return qs.search(path, $stateParams[`permission_search`]);
                 }
             ]
         },
         params: {
             permission_search: {
                 value: {
-                    page_size: 20,
-                    order_by: 'username'
+                    page_size: "20",
+                    order_by: "username"
                 },
-                dynamic: true,
-                squash: ""
+                dynamic:true,
+                squash:""
             }
         },
         ncyBreadcrumb: {
@@ -150,20 +183,87 @@ function CredentialsConfig ($stateProvider, $stateExtenderProvider, stateDefinit
             label: "PERMISSIONS"
         },
         views: {
-            'permissions': {
-                controller: PermissionsList,
-                templateProvider: function(CredentialForm, CredentialList, GenerateForm) {
-                    let form = CredentialForm;
-                    let list = CredentialList;
-
+            'related': {
+                templateProvider: function(CredentialForm, GenerateForm) {
                     let html = GenerateForm.buildCollection({
                         mode: 'edit',
-                        related: 'permissions',
-                        form: typeof(form) === 'function' ?  form() : form
+                        related: `permissions`,
+                        form: typeof(CredentialForm) === 'function' ?
+                            CredentialForm() : CredentialForm
                     });
-
                     return html;
+                },
+                controller: 'PermissionsList'
+            }
+        }
+    });
+
+    stateExtender.addState({
+        name: 'credentials.edit.permissions.add',
+        url: '/add-permissions',
+        resolve: {
+            usersDataset: [
+                'addPermissionsUsersList',
+                'QuerySet',
+                '$stateParams',
+                'GetBasePath',
+                (list, qs, $stateParams, GetBasePath) => {
+                    let path = GetBasePath(list.basePath) || GetBasePath(list.name);
+                    return qs.search(path, $stateParams.user_search);
+
                 }
+            ],
+            teamsDataset: [
+                'addPermissionsTeamsList',
+                'QuerySet',
+                '$stateParams',
+                'GetBasePath',
+                (list, qs, $stateParams, GetBasePath) => {
+                    let path = GetBasePath(list.basePath) || GetBasePath(list.name);
+                    return qs.search(path, $stateParams.team_search);
+                }
+            ],
+            resourceData: ['CredentialModel', '$stateParams', (Credential, $stateParams) => {
+                return new Credential('get', $stateParams.credential_id)
+                    .then(credential => ({ data: credential.get() }));
+            }],
+        },
+        params: {
+            user_search: {
+                value: {
+                    order_by: 'username',
+                    page_size: 5
+                },
+                dynamic: true
+            },
+            team_search: {
+                value: {
+                    order_by: 'name',
+                    page_size: 5
+                },
+                dynamic: true
+            }
+        },
+        ncyBreadcrumb: {
+            skip: true
+        },
+        views: {
+            'modal@credentials.edit': {
+                template: `
+                    <add-rbac-resource
+                        users-dataset="$resolve.usersDataset"
+                        teams-dataset="$resolve.teamsDataset"
+                        selected="allSelected"
+                        resource-data="$resolve.resourceData"
+                        title="Add Users / Teams">
+                    </add-rbac-resource>`
+            }
+        },
+        onExit: $state => {
+            if ($state.transition) {
+                $('#add-permissions-modal').modal('hide');
+                $('.modal-backdrop').remove();
+                $('body').removeClass('modal-open');
             }
         }
     });
diff --git a/awx/ui/client/features/credentials/index.view.html b/awx/ui/client/features/credentials/index.view.html
index 6bde9bf7ba..31993f35b5 100644
--- a/awx/ui/client/features/credentials/index.view.html
+++ b/awx/ui/client/features/credentials/index.view.html
@@ -1,4 +1,3 @@
-<div ui-view="permissions"></div>
 <div ui-view="edit"></div>
 <div ui-view="add"></div>
 
diff --git a/awx/ui/client/lib/components/tabs/group.directive.js b/awx/ui/client/lib/components/tabs/group.directive.js
index 412d9dd5ed..a78da714cf 100644
--- a/awx/ui/client/lib/components/tabs/group.directive.js
+++ b/awx/ui/client/lib/components/tabs/group.directive.js
@@ -44,7 +44,9 @@ function atTabGroup (pathService, _$animate_) {
         controller: AtTabGroupController,
         controllerAs: 'vm',
         link: atTabGroupLink,
-        scope: true
+        scope: {
+            state: '='
+        }
     };
 }
 
diff --git a/awx/ui/client/lib/components/tabs/tab.directive.js b/awx/ui/client/lib/components/tabs/tab.directive.js
index 9ef05ecfb2..99e181dfca 100644
--- a/awx/ui/client/lib/components/tabs/tab.directive.js
+++ b/awx/ui/client/lib/components/tabs/tab.directive.js
@@ -21,8 +21,11 @@ function AtTabController ($state) {
     };
 
     vm.go = () => {
-        console.log('test');
-        $state.go('credentials.edit.permissions', { credential_id: 2 });
+        if (scope.state._disabled || scope.state._active) {
+            return;
+        }
+
+        $state.go(scope.state._go, scope.state._params, { reload: true });
     };
 }
 
@@ -38,7 +41,9 @@ function atTab (pathService, _$animate_) {
         controller: AtTabController,
         controllerAs: 'vm',
         link: atTabLink,
-        scope: true
+        scope: {
+            state: '='
+        }
     };
 }
 
diff --git a/awx/ui/client/lib/components/tabs/tab.partial.html b/awx/ui/client/lib/components/tabs/tab.partial.html
index 35fff5729e..eb8ea75f11 100644
--- a/awx/ui/client/lib/components/tabs/tab.partial.html
+++ b/awx/ui/client/lib/components/tabs/tab.partial.html
@@ -1,6 +1,6 @@
 <button class="btn at-ButtonHollow--white at-Tab"
-        ng-attr-disabled="{{ disabled || undefined }}"
-        ng-class="{ 'at-Tab--active': active, 'at-Tab--disabled': disabled }"
+        ng-attr-disabled="{{ state._disabled || undefined }}"
+        ng-class="{ 'at-Tab--active': state._active, 'at-Tab--disabled': state._disabled }"
         ng-click="vm.go()">
     <ng-transclude></ng-transclude>
 </button>