diff --git a/awx/ui/client/src/access/add-rbac-user-team/main.js b/awx/ui/client/src/access/add-rbac-user-team/main.js
new file mode 100644
index 0000000000..547815a1d7
--- /dev/null
+++ b/awx/ui/client/src/access/add-rbac-user-team/main.js
@@ -0,0 +1,12 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import addRbacUserTeamDirective from './rbac-user-team.directive';
+import rbacMultiselect from '../rbac-multiselect/main';
+
+export default
+    angular.module('AddRbacUserTeamModule', [rbacMultiselect.name])
+        .directive('addRbacUserTeam', addRbacUserTeamDirective);
diff --git a/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.controller.js b/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.controller.js
new file mode 100644
index 0000000000..981478d6d0
--- /dev/null
+++ b/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.controller.js
@@ -0,0 +1,117 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/**
+ * @ngdoc function
+ * @name controllers.function:Access
+ * @description
+ * Controller for handling permissions adding
+ */
+
+export default ['$rootScope', '$scope', '$state', 'GetBasePath', 'Rest', '$q', 'Wait', 'ProcessErrors', 
+function(rootScope, scope, $state, GetBasePath, Rest, $q, Wait, ProcessErrors) {
+
+    init();
+
+    function init(){
+
+        let resources = ['templates', 'projects', 'inventories', 'credentials'];
+
+        // data model:
+        // selected - keyed by type of resource
+        // selected[type] - keyed by each resource object's id
+        // selected[type][id] === { roles: [ ... ], ... }
+        scope.selected = {};
+        _.each(resources, (resource) => scope.selected[resource] = {});
+
+        scope.keys = {};
+        _.each(resources, (resource) => scope.keys[resource] = {});
+
+        scope.tab = {
+            templates: true,
+            projects: false,
+            inventories: false,
+            credentials: false
+        };
+        scope.showKeyPane = false;
+        scope.owner = scope.resolve.resourceData.data;
+    }
+
+    // aggregate name/descriptions for each available role, based on resource type
+    function aggregateKey(item, type){
+        _.merge(scope.keys[type], item.summary_fields.object_roles);
+    }
+
+    scope.closeModal = function() {
+        $state.go('^', null, {reload: true});
+    };
+
+    scope.currentTab = function(){
+        return _.findKey(scope.tab, (tab) => tab);
+    };
+
+    scope.toggleKeyPane = function() {
+        scope.showKeyPane = !scope.showKeyPane;
+    };
+
+    scope.showSection2Container = function(){
+        return _.any(scope.selected, (type) => Object.keys(type).length > 0);
+    };
+
+    scope.showSection2Tab = function(tab){
+        return Object.keys(scope.selected[tab]).length > 0;
+    };
+
+    scope.removeSelection = function(resource, type){
+        delete scope.selected[type][resource.id];
+        resource.isSelected = false;
+    };
+
+    // handle form tab changes
+    scope.selectTab = function(selected){
+        _.each(scope.tab, (value, key, collection) => {
+           collection[key] = (selected === key);
+        });
+    };
+
+    // pop/push into unified collection of selected users & teams
+    scope.$on("selectedOrDeselected", function(e, value) {
+        let resourceType = scope.currentTab(),
+            item = value.value;
+
+        if (item.isSelected) {
+            scope.selected[resourceType][item.id] = item;
+            scope.selected[resourceType][item.id].roles = [];
+            aggregateKey(item, resourceType);
+        } else {
+            delete scope.selected[resourceType][item.id];
+        }
+    });
+
+    // post roles to api
+    scope.saveForm = function() {
+        Wait('start');
+        // scope.selected => { n: {id: n}, ... } => [ {id: n}, ... ]
+        let requests = _(scope.selected).map((type) => {
+            return _.map(type, (resource) => resource.roles);
+        }).flattenDeep().value();
+        
+        Rest.setUrl(scope.owner.related.roles);
+
+        $q.all( _.map(requests, (entity) => Rest.post({id: entity.id})) )
+            .then( () =>{
+                Wait('stop');
+                scope.closeModal();
+            }, (error) => {
+                scope.closeModal();
+                ProcessErrors(null, error.data, error.status, null, {
+                    hdr: 'Error!',
+                    msg: 'Failed to post role(s): POST returned status' +
+                        error.status
+                });
+            });
+    };
+}];
diff --git a/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.directive.js b/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.directive.js
new file mode 100644
index 0000000000..2b89195820
--- /dev/null
+++ b/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.directive.js
@@ -0,0 +1,25 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+import controller from './rbac-user-team.controller';
+
+/* jshint unused: vars */
+export default ['templateUrl',
+    function(templateUrl) {
+        return {
+            restrict: 'E',
+            scope: {
+                resolve: "="
+            },
+            controller: controller,
+            controllerAs: 'rbac',
+            templateUrl: templateUrl('access/add-rbac-user-team/rbac-user-team'),
+            link: function(scope, element, attrs) {
+                $('#add-permissions-modal').modal('show');
+                window.scrollTo(0, 0);
+            }
+        };
+    }
+];
diff --git a/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.partial.html b/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.partial.html
new file mode 100644
index 0000000000..e6ba2326af
--- /dev/null
+++ b/awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.partial.html
@@ -0,0 +1,175 @@
+<div id="add-permissions-modal" class="AddPermissions modal fade">
+    <div class="AddPermissions-backDrop is-loggedOut"></div>
+    <div class="AddPermissions-dialog">
+        <div class="AddPermissions-content is-loggedOut">
+            <!-- begin header -->
+            <div class="AddPermissions-header">
+                <div class="List-header">
+                    <div class="List-title">
+                        <div class="List-titleText ng-binding">
+                            {{ owner.name }}
+                            <div class="List-titleLockup"></div>
+                            Add Permissions
+                        </div>
+                    </div>
+                    <div class="Form-exitHolder">
+                        <button class="Form-exit" ng-click="closeModal()">
+                            <i class="fa fa-times-circle"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- end header -->
+            <div class="AddPermissions-body">
+                <!-- begin section 1 -->
+                <div class="AddPermissions-directions">
+                    <span class="AddPermissions-directionNumber">
+                        1
+                    </span>
+                    <div>
+                        Please select resources from the lists below.
+                    </div>
+                </div>
+
+                <div class="Form-tabHolder">
+                    <div class="Form-tab"
+                        ng-click="selectTab('templates')"
+                        ng-class="{'is-selected': tab.templates }">
+                        Templates
+                    </div>
+                    <div class="Form-tab"
+                        ng-click="selectTab('projects')"
+                        ng-class="{'is-selected': tab.projects}"
+                    >
+                        Projects
+                    </div>
+                    <div class="Form-tab"
+                        ng-click="selectTab('inventories')"
+                        ng-class="{'is-selected': tab.inventories}"
+                    >
+                        Inventories
+                    </div>
+                    <div class="Form-tab"
+                        ng-click="selectTab('credentials')"
+                        ng-class="{'is-selected': tab.credentials}"
+                    >
+                        Credentials
+                    </div>
+                </div>
+
+                <div id="AddPermissions-users" class="AddPermissions-list" ng-show="tab.templates">
+                    <rbac-multiselect-list view="Templates" all-selected="allSelected" dataset="resolve.templatesDataset"></rbac-multiselect-list>
+                </div>
+                <div id="AddPermissions-projects" class="AddPermissions-list" ng-show="tab.projects">
+                    <rbac-multiselect-list view="Projects" all-selected="allSelected" dataset="resolve.projectsDataset"></rbac-multiselect-list>
+                </div>
+                <div id="AddPermissions-inventories" class="AddPermissions-list" ng-show="tab.inventories">
+                    <rbac-multiselect-list view="Inventories" all-selected="allSelected" dataset="resolve.inventoriesDataset"></rbac-multiselect-list>
+                </div>
+                <div id="AddPermissions-credentials" class="AddPermissions-list" ng-show="tab.credentials">
+                    <rbac-multiselect-list view="Credentials" all-selected="allSelected" dataset="resolve.credentialsDataset"></rbac-multiselect-list>
+                </div> 
+                <!-- end section 1 -->
+   
+                <!-- begin section 2 -->
+                <div ng-show="showSection2Container()">            
+                    <div class="AddPermissions-separator"></div>
+                    <div class="AddPermissions-directions">
+                        <span class="AddPermissions-directionNumber">
+                            2
+                        </span>
+                        Please assign roles to the selected resources
+                        <div class="AddPermissions-keyToggle btn"
+                            ng-class="{'is-active': showKeyPane}"
+                            ng-click="toggleKeyPane()">
+                            Key
+                        </div>
+                    </div>
+                    <div class="Form-tabHolder">
+                        <div class="Form-tab"
+                            ng-click="selectTab('templates')"
+                            ng-class="{'is-selected': tab.templates }"
+                            ng-show="showSection2Tab('templates')">
+                            Templates
+                        </div>
+                        <div class="Form-tab"
+                            ng-click="selectTab('projects')"
+                            ng-class="{'is-selected': tab.projects}"
+                            ng-show="showSection2Tab('projects')"
+                        >
+                            Projects
+                        </div>
+                        <div class="Form-tab"
+                            ng-click="selectTab('inventories')"
+                            ng-class="{'is-selected': tab.inventories}"
+                            ng-show="showSection2Tab('inventories')"
+                        >
+                            Inventories
+                        </div>
+                        <div class="Form-tab"
+                            ng-click="selectTab('credentials')"
+                            ng-class="{'is-selected': tab.credentials}"
+                            ng-show="showSection2Tab('credentials')"
+                        >
+                            Credentials
+                        </div>
+                    </div>
+                    <div class="AddPermissions-keyPane"
+                        ng-show="showKeyPane">
+                        <div class="AddPermissions-keyRow"
+                            ng-repeat="key in keys[currentTab()]">
+                            <div class="AddPermissions-keyName">
+                                {{ key.name }}
+                            </div>
+                            <div class="AddPermissions-keyDescription">
+                                {{ key.description || "No description provided" }}
+                            </div>
+                        </div>
+                    </div>
+                    <form name="multiselectRoles" novalidate>
+                        <!-- type of selected resources -->
+                        <div ng-repeat="(type, list) in selected">
+                            <!-- controllerAs: 'rbac' -->
+                            <div class="AddPermissions-roleRow"
+                                ng-repeat="resource in list"
+                                ng-show="tab[type]">
+                                <div class="AddPermissions-roleName">
+                                    <span class="AddPermissions-roleNameVal">
+                                        {{ resource.name }}
+                                    </span>
+                                    <span class="AddPermissions-roleType">
+                                        {{ resource.type }}
+                                    </span>
+                                </div>
+                                <rbac-multiselect-role class="AddPermissions-roleSelect" roles="resource.summary_fields.object_roles" model="resource.roles">
+                                </rbac-multiselect-role>
+                                <button class="AddPermissions-roleRemove"
+                                    ng-click="removeSelection(resource, type)">
+                                    <i class="fa fa-times"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <!-- end section 2 -->
+            </div>
+            <!-- begin footer -->
+            <div class="AddPermissions-footer">
+                <div class="buttons Form-buttons AddPermissions-buttons">
+                    <button type="button"
+                        class="btn btn-sm Form-cancelButton"
+                        ng-click="closeModal()">
+                        Cancel
+                    </button>
+                    <button type="button"
+                        class="btn btn-sm Form-saveButton"
+                        ng-click="saveForm()"
+                        ng-disabled="multiselectRoles.$invalid || !showSection2Container()">
+                        Save
+                    </button>
+                </div>
+            </div>
+            <!-- end footer -->
+        </div>
+   </div>
+</div>