diff --git a/Controller/GrouperGroupsController.php b/Controller/GrouperGroupsController.php
index 14949aa..7859c04 100644
--- a/Controller/GrouperGroupsController.php
+++ b/Controller/GrouperGroupsController.php
@@ -65,6 +65,8 @@ public function beforeFilter()
   {
     parent::beforeFilter();
 
+    $this->Security->unlockedActions = array('removeSubscriber', 'addSubscriber');
+
     //Need to find which plugin instance choosing, if more than one from cm_co_grouper_lites
     // table being used in COmanage.
     $grouperConnData = $this->Session->read('Plugin.Grouper.Api');
@@ -766,16 +768,16 @@ function isAuthorized()
 
     //TODO - This is needed for my dev enviro since I do not log in via I2 IdP
     // BEGIN ===============================================
-//    if ($this->Session->check('Auth.User.username')) {
-//      $this->userId = $this->Session->read('Auth.User.username');
-//    }
+    if ($this->Session->check('Auth.User.username')) {
+      $this->userId = $this->Session->read('Auth.User.username');
+    }
     // END ===============================================
 
     //TODO - Need to make the following code configurable in getting the user ID. In this case the code is
     // specific to the needs of I2.
     // BEGIN ===============================================
 
-    $uid=$this->Session->read('Auth.User.co_person_id');
+    /*$uid=$this->Session->read('Auth.User.co_person_id');
     $username=$this->Session->read('Auth.User.username');
     error_log("HUBING ================ " . $username);
 
@@ -815,6 +817,7 @@ function isAuthorized()
       $this->Session->write('Plugin.Grouper.UserId', $this->userId);
     }
     // END ===============================================
+    */
 
     // Determine what operations this user can perform
     // Construct the permission set for this user, which will also be passed to the view.
diff --git a/Lib/GrouperApiAccess.php b/Lib/GrouperApiAccess.php
index d6b1d58..b9e2770 100644
--- a/Lib/GrouperApiAccess.php
+++ b/Lib/GrouperApiAccess.php
@@ -403,7 +403,7 @@ private function useMembershipUrl(array $queryData)
   {
     $groupType = $queryData['groupType'];
     $userId = $queryData['userId'];
-
+    
     if ($groupType == 'optins' || $groupType == 'optouts') {
       $subjectId = "GrouperAll";
     } elseif ($groupType == 'admin' || $groupType == 'update' || $groupType == 'stemAdmin') {
diff --git a/Lib/lang.php b/Lib/lang.php
index fb67713..cc33a8d 100644
--- a/Lib/lang.php
+++ b/Lib/lang.php
@@ -159,5 +159,7 @@
   'pl.grouperlite.attributes.zero-state' => 'No Attributes Associated to this Group.',
   'pl.grouperlite.groups.zero-state' => 'No groups found.',
   'pl.grouperlite.working-groups.zero-state' => 'None.',
-  'pl.grouperlite.email-lists.zero-state' => 'No email lists found.'
+  'pl.grouperlite.email-lists.zero-state' => 'No email lists found.',
+  'pl.grouperlite.members.noaccess' => 'You do not have access to view memberships.',
+  'pl.grouperlite.members.empty' => 'This group has no members.'
 );
\ No newline at end of file
diff --git a/View/Elements/Components/subscriberList.ctp b/View/Elements/Components/subscriberList.ctp
index 9ea20b9..100673e 100644
--- a/View/Elements/Components/subscriberList.ctp
+++ b/View/Elements/Components/subscriberList.ctp
@@ -140,20 +140,12 @@
                         $("#addUser").val(ui.item.identifier);
                         // $("#CoGroupMemberCoPersonLabel").val(ui.item.label);
                         $("#addUserbutton").prop('disabled', false).focus();
-                        $("#group-add-member-clear-button").show();
                         return false;
                     },
-                    search: function(event, ui) {
-                        $("#group-add-member-search-container .co-loading-mini").show();
-                    },
                     focus: function(event, ui) {
                         event.preventDefault();
-                        $("#group-add-member-search-container .co-loading-mini").hide();
                         $("#group-add-member").val(ui.item.label + " (" + ui.item.value + ")");
                     },
-                    close: function(event, ui) {
-                        $("#group-add-member-search-container .co-loading-mini").hide();
-                    }
                 }).autocomplete("instance")._renderItem = formatCoPersonAutoselectItem;
             }
 
diff --git a/View/Elements/Components/vue-table.ctp b/View/Elements/Components/vue-table.ctp
new file mode 100644
index 0000000..337633b
--- /dev/null
+++ b/View/Elements/Components/vue-table.ctp
@@ -0,0 +1,118 @@
+<script type="module">
+    <?php if(Configure::read('debug') > 0): ?>
+    import GrouperGroupsView from '<?php print $this->webroot ?>grouper_lite/js/grouper-groups-view.js?time=<?php print time()?>';
+    <?php else: ?>
+    import GrouperGroupsView from '<?php print $this->webroot ?>grouper_lite/js/grouper-groups-view.js';
+    <?php endif; ?>
+
+    const app = Vue.createApp({
+        data() {
+            return {
+                groups: <?php echo $groupData; ?>,
+                columns: <?php echo $columns; ?>,
+                config: {
+                    adhocHeading: "<?php echo $config['adHocHeading'] ? $config['adHocHeading'] : 'Ad-hoc groups' ; ?>",
+                    wgHeading: "<?php echo $config['wgHeading'] ? $config['wgHeading'] : 'Working groups' ; ?>",
+                    collapsed: <?php print $collapsed ? 'true' : 'false'; ?>,
+                    optAction: "<?php echo $optAction; ?>",
+                    members: <?php echo $members ? 'true' : 'false' ?>,
+                    add: <?php echo $addSubscribers ? 'true' : 'false' ?>
+                },
+                owner: <?php echo $treatAsOwner ? 'true' : 'false'; ?>,
+                url: "<?php echo $actionUrl; ?>",
+            }
+        },
+        provide: {
+            txt: {
+                groups: "<?php echo _txt('pl.grouperlite.dashboard.heading.groups'); ?>",
+                leave: "<?php echo _txt('pl.grouperlite.action.leave') ?>",
+                descrZeroState: "<?php echo _txt('pl.grouperlite.value.descr.zerostate') ?>",
+                members: "<?php echo _txt('pl.grouperlite.action.members') ?>",
+                email: "<?php echo _txt('pl.grouperlite.value.email') ?>",
+                close: "<?php echo _txt('pl.grouperlite.action.close') ?>",
+                remove: "<?php echo _txt('pl.grouperlite.action.remove-user') ?>",
+                addUser: "<?php echo _txt('pl.grouperlite.action.add-user') ?>",
+                search: "<?php echo _txt('pl.grouperlite.search.tags.text') ?>",
+                noaccess: "<?php echo _txt('pl.grouperlite.members.noaccess') ?>",
+                empty: "<?php echo _txt('pl.grouperlite.members.empty') ?>",
+                join: "<?php echo _txt('pl.grouperlite.action.join') ?>"
+            },
+            api: {
+                co: 1,
+                mode: "<?php echo PeoplePickerModeEnum::All ?>",
+                base: "<?php echo $this->webroot ?>grouper_lite/grouper_groups",
+                find: "<?php echo $this->Html->url(
+                    array(
+                        'controller' => 'grouper_groups',
+                        'action' => 'findSubscriber'
+                    )
+                ); ?>",
+                remove: "<?php echo $this->webroot ?>grouper_lite/grouper_groups/removeSubscriber",
+                add: "<?php echo $this->webroot ?>grouper_lite/grouper_groups/addSubscriber",
+                group: "<?php echo $this->webroot ?>grouper_lite/grouper_groups/groupSubscribers",
+            },
+        },
+        mounted() {
+            if (!this.owner) {
+                this.columns = this.columns.filter(c => c.value !== 'role');
+            }
+        },
+        components: {
+            GrouperGroupsView
+        }
+    }).mount('#grouper-lite-widget');
+</script>
+
+<style>
+.ui-autocomplete {
+    max-height: 220px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 20px;
+}
+</style>
+
+<div class="grouper-table">
+    <?php print $this->element("pagination", array(
+        'goto' => false,
+        'limit' => false,
+        'numbers' => false,
+        'counter' => true,
+        'class' => 'counter'
+    )); ?>
+    <div id="grouper-lite-widget">
+        <grouper-groups-view
+                :groups="groups"
+                :columns="columns"
+                :config="config"
+                :owner="owner"
+                :action="config.optAction"
+                :url="url"
+            >
+            <template v-slot:actionform="actionform">
+                <?php echo $this->Form->create(false, array(
+                    'url' => array('controller' => 'grouper_groups', 'action' => $optAction),
+                    'class' => 'd-flex justify-content-center',
+                    'id' => 'group-action'
+                )); ?>
+                <input type="hidden" name="data[GroupName]" :value="actionform.groupname" />
+                <input type="hidden" name="data[GroupDisplayName]" :value="actionform.groupdisplayname" />
+                <button
+                    :class="actionform.actiontype"
+                    class="btn btn-sm btn-block text-nowrap m-1 btn-success" type="submit">
+                    {{ actionform.actionlabel }}
+                    &nbsp;
+                    <em class="material-icons mt-0" aria-hidden="true">{{ actionform.actionicon }}</em>
+                </button>
+                <?php echo $this->Form->end(null); ?>
+            </template>
+        </grouper-groups-view>
+    </div>
+        
+    <?php print $this->element("pagination", array(
+        'goto' => false,
+        'limit' => true,
+        'numbers' => true,
+        'counter' => false
+    )); ?>
+</div>
diff --git a/View/GrouperGroups/base.ctp b/View/GrouperGroups/base.ctp
index 3242b27..7ffa91f 100644
--- a/View/GrouperGroups/base.ctp
+++ b/View/GrouperGroups/base.ctp
@@ -1,5 +1,3 @@
-
-
 <?php
 
 echo $this->Html->meta(
@@ -23,7 +21,7 @@ print $this->Html->css('GrouperLite.co-grouper-plugin') . "\n    ";
 print $this->Html->script('vue/vue-3.2.31.global.prod.js');
 
 ?>
-
+<?php echo $this->element('GrouperLite.Components/plugins'); ?>
 
 <?php
 $this->Html->addCrumb(_txt('pl.grouperlite.crumb.root'), array('controller' => 'grouper_groups', 'action' => 'groupmember'), array('prepend' => true));
diff --git a/View/GrouperGroups/groupmember.ctp b/View/GrouperGroups/groupmember.ctp
index ce7f61e..3d218f9 100644
--- a/View/GrouperGroups/groupmember.ctp
+++ b/View/GrouperGroups/groupmember.ctp
@@ -3,119 +3,31 @@
 <?php $this->Html->addCrumb(_txt('pl.grouperlite.nav.memberships')); ?>
 <?php echo $this->element('GrouperLite.Components/navigation-groups', array('active' => 'groupmember')); ?>
 <?php echo $this->element('GrouperLite.Components/search', array('active' => 'groupmember')); ?>
-<?php
 
-$collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
-
-$collapsed = false;
-
-?>
-
-
-<script type="module">
-    <?php if(Configure::read('debug') > 0): ?>
-    import GrouperGroupsView from '<?php print $this->webroot ?>grouper_lite/js/grouper-groups-view.js?time=<?php print time()?>';
-    <?php else: ?>
-    import GrouperGroupsView from '<?php print $this->webroot ?>grouper_lite/js/grouper-groups-view.js';
-    <?php endif; ?>
-
-    const app = Vue.createApp({
-        data() {
-            return {
-                groups: <?php echo json_encode(array(
-                    'adhoc' => $groupmemberships,
-                    'working' => $wgmemberships
-                )) ?>,
-                columns: [
-                    {value: 'name', label: "<?php print _txt('pl.grouperlite.table.name'); ?>"},
-                    {value: 'role', label: "<?php print _txt('pl.grouperlite.table.role'); ?>"},
-                    {value: 'description', label: "<?php print _txt('pl.grouperlite.table.description'); ?>"},
-                    {value: 'action', label: "<?php print _txt('pl.grouperlite.table.action'); ?>"},
-                ],
-                config: {
-                    adhocHeading: "<?php echo $config['adHocHeading'] ? $config['adHocHeading'] : 'Ad-hoc groups' ; ?>",
-                    collapsed: <?php print $collapsed ? 'true' : 'false'; ?>
-                },
-                owner: <?php echo $isuserowner === 'T' ? 'true' : 'false'; ?>,
-                url: "<?php echo $this->Html->url([
-                    'controller' => 'grouper_groups', 'action' => 'leavegroup'
-                ]) ?>",
-                txt: {
-                    groups: "<?php echo _txt('pl.grouperlite.dashboard.heading.groups'); ?>",
-                    leave: "<?php echo _txt('pl.grouperlite.action.leave') ?>",
-                    descrZeroState: "<?php echo _txt('pl.grouperlite.value.descr.zerostate') ?>",
-                    members: "<?php echo _txt('pl.grouperlite.action.members') ?>",
-                    email: "<?php echo _txt('pl.grouperlite.value.email') ?>"
-                }
-            }
-        },
-        mounted() {
-            if (!this.owner) {
-                this.columns = this.columns.filter(c => c.value !== 'role');
-            }
-        },
-        components: {
-            GrouperGroupsView
-        }
-    }).mount('#grouper-lite-widget');
-</script>
-
-<div class="grouper-table">
-    <?php print $this->element("pagination", array(
-        'goto' => false,
-        'limit' => false,
-        'numbers' => false,
-        'counter' => true,
-        'class' => 'counter'
-    )); ?>
-    <div id="grouper-lite-widget">
-        <grouper-groups-view
-            :groups="groups"
-            :columns="columns"
-            :config="config"
-            :owner="owner"
-            action="leavegroup"
-            :url="url"
-            :txt="txt"
-        >
-        <template v-slot:actionform="actionform">
-            <?php echo $this->Form->create(false, array(
-                'url' => array('controller' => 'grouper_groups', 'action' => 'leavegroup'),
-                'class' => 'd-flex justify-content-center',
-                'id' => 'join-group'
-            )); ?>
-            <input type="hidden" name="data[GroupName]" :value="actionform.groupname" />
-            <input type="hidden" name="data[GroupDisplayName]" :value="actionform.groupdisplayname" />
-            <button
-                class="btn btn-sm btn-block text-nowrap m-1 btn-danger" type="submit">
-                {{ txt.leave }}
-                &nbsp;
-                <em class="material-icons mt-0" aria-hidden="true">{{ 'person_off' }}</em>
-            </button>
-            <?php echo $this->Form->end(null); ?>
-        </template>
-    </grouper-groups-view>
-</div>
-        
-    <?php print $this->element("pagination", array(
-        'goto' => false,
-        'limit' => true,
-        'numbers' => true,
-        'counter' => false
-    )); ?>
-    </div>
-<script>
-    $('.grpr-popover-toggle').popover({
-        placement: 'top',
-        trigger: 'hover'
-    });
-</script>
+<?php echo $this->element('GrouperLite.Components/vue-table', array(
+    'groupData' => json_encode(array(
+        'adhoc' => $groupmemberships,
+        'working' => $wgmemberships
+    )),
+    'treatAsOwner' => $isuserowner === 'T' ? 'true' : 'false',
+    'columns' => json_encode(array(
+        array('value' => 'name', 'label' => _txt('pl.grouperlite.table.name')),
+        array('value' => 'role', 'label' => _txt('pl.grouperlite.table.role')),
+        array('value' => 'description', 'label' => _txt('pl.grouperlite.table.description')),
+        array('value' => 'action', 'label' => _txt('pl.grouperlite.table.action')),
+    )),
+    'collapsed' => $config['defaultCollapse'] === 'collapsed' ? true : false,
+    'optAction' => "leavegroup",
+    'actionUrl' => $this->Html->url([
+        'controller' => 'grouper_groups', 'action' => 'leavegroup'
+    ]),
+    'members' => true,
+    'addSubscribers' => true,
+)); ?>
 <?php if (count($groupmemberships) < 1 && count($wgmemberships) < 1) : ?>
     <div class="alert alert-info">
         <p class="lead mb-0 text-center"><?php echo _txt('pl.grouperlite.groups.zero-state'); ?></p>
     </div>
 <?php endif; ?>
 
-<?php echo $this->element('Components/subscriberList', array('addSubscribers' => false)); ?>
-
 <!--/nocache-->
\ No newline at end of file
diff --git a/View/GrouperGroups/groupoptin.ctp b/View/GrouperGroups/groupoptin.ctp
index 3cb1144..8bc5a62 100644
--- a/View/GrouperGroups/groupoptin.ctp
+++ b/View/GrouperGroups/groupoptin.ctp
@@ -3,88 +3,25 @@
 <?php $this->Html->addCrumb(_txt('pl.grouperlite.nav.groups-can-join')); ?>
 <?php echo $this->element('GrouperLite.Components/navigation-groups', array('active' => 'groupoptin')); ?>
 <?php echo $this->element('GrouperLite.Components/search', array('active' => 'groupoptin')); ?>
-<?php
-$columns = [
-  'name' => 'pl.grouperlite.table.name',
-  // 'role' => 'pl.grouperlite.table.role',
-  'description' => 'pl.grouperlite.table.description',
-  'action' => 'pl.grouperlite.table.action'
-];
-
-if ($isuserowner !== 'T') {
-  // array_splice($columns, 1, 1);
-}
-
-$numColumns = count($columns);
-
-$collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
-
-?>
-<?php if (count($groupoptins) > 0) : ?>
-  <div class="grouper-table">
-    <?php print $this->element("pagination", array(
-      'goto' => false,
-      'limit' => false,
-      'numbers' => false,
-      'counter' => true,
-      'class' => 'counter'
-    )); ?>
-    <table class="table w-100 mb-0">
-      <thead>
-        <tr>
-          <?php foreach ($columns as $key => $label) : ?>
-            <th class="group <?php echo $key === 'action' ? $key . ' text-center' : $key; ?>"><?php echo _txt($label); ?></th>
-          <?php endforeach; ?>
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="table-secondary">
-          <td colspan="<?php echo $numColumns; ?>">
-            <button type="button" class="btn btn-link btn-text collapse-btn <?php echo $collapsed ? 'collapsed' : ''; ?> fw-bold m-0" data-toggle="collapse" data-target=".collapse-adhoc-group-parent" role="button" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>">
-              <?php echo $config['adHocHeading'] ?? 'Ad-hoc groups'; ?>
-              <em class="material-icons mt-0" aria-hidden="true"><?php echo $collapsed ? 'arrow_right' : 'arrow_drop_down' ?></em>
-            </button>
-          </td>
-        </tr>
-        <?php foreach ($groupoptins as $key => $group) : ?>
-          <tr class="<?php echo $collapsed ? 'collapse' : 'show'; ?> collapse-adhoc-group-parent">
-            <td class="pl-3">
-              <span class="grpr-popover-toggle" data-container="body" data-toggle="popover" data-placement="top" data-content="<?php echo $group['name']; ?>">
-                <?php echo $group['friendlyName'] ?? "No Name"; ?>
-              </span>
-            </td>
-            <td><?php echo $group['description'] ?? _txt('pl.grouperlite.value.descr.zerostate'); ?></td>
-            <td>
-              <?php echo $this->element('GrouperLite.Components/optAction', array(
-                'member' => false,
-                'action' => 'joingroup',
-                'group' => $group['name'],
-                'groupDisplay' => $group['friendlyName'],
-                'idx' => $key
-              )); ?>
-            </td>
-          </tr>
-        <?php endforeach; ?>
-      </tbody>
-
-    </table>
-    <?php print $this->element("pagination", array(
-      'goto' => false,
-      'limit' => true,
-      'numbers' => true,
-      'counter' => false
-    )); ?>
-  </div>
-  <script>
-    $('.grpr-popover-toggle').popover({
-      placement: 'top',
-      trigger: 'hover'
-    });
-  </script>
-<?php endif; ?>
+<?php echo $this->element('GrouperLite.Components/vue-table', array(
+    'groupData' => json_encode(array(
+        'adhoc' => $groupoptins,
+        'working' => array()
+    )),
+    'treatAsOwner' => false,
+    'columns' => json_encode(array(
+        array('value' => 'name', 'label' => _txt('pl.grouperlite.table.name')),
+        array('value' => 'description', 'label' => _txt('pl.grouperlite.table.description')),
+        array('value' => 'action', 'label' => _txt('pl.grouperlite.table.action')),
+    )),
+    'collapsed' => $config['defaultCollapse'] === 'collapsed' ? true : false,
+    'optAction' => "joingroup",
+    'actionUrl' => $this->Html->url([
+        'controller' => 'grouper_groups', 'action' => 'joingroup'
+    ]),
+)); ?>
 <?php if (count($groupoptins) < 1) : ?>
   <div class="alert alert-info">
     <p class="lead mb-0 text-center"><?php echo _txt('pl.grouperlite.groups.zero-state'); ?></p>
   </div>
-<?php endif; ?>
-<!--/nocache-->
\ No newline at end of file
+<?php endif; ?>
\ No newline at end of file
diff --git a/View/GrouperGroups/groupowner.ctp b/View/GrouperGroups/groupowner.ctp
index 63176bd..6751105 100644
--- a/View/GrouperGroups/groupowner.ctp
+++ b/View/GrouperGroups/groupowner.ctp
@@ -4,117 +4,38 @@
 <?php echo $this->element('Components/navigation-groups', array('active' => 'groupowner')); ?>
 <?php echo $this->element('Components/search', array('active' => 'groupowner')); ?>
 <?php
-$columns = [
-  'name' => 'pl.grouperlite.table.name',
-  'role' => 'pl.grouperlite.table.role',
-  'description' => 'pl.grouperlite.table.description',
-  'status' => 'pl.grouperlite.table.status',
-  'action' => 'pl.grouperlite.table.action'
-];
+$columns = array(
+    array('value' => 'name', 'label' => _txt('pl.grouperlite.table.name')),
+    array('value' => 'role', 'label' => _txt('pl.grouperlite.table.role')),
+    array('value' => 'description', 'label' => _txt('pl.grouperlite.table.description')),
+    array('value' => 'status', 'label' => _txt('pl.grouperlite.table.status')),
+    array('value' => 'action', 'label' => _txt('pl.grouperlite.table.action')),
+);
 
 if ($isuserowner !== 'T') {
   array_splice($columns, 1, 1);
 }
+?>
+
+<?php echo $this->element('GrouperLite.Components/vue-table', array(
+    'groupData' => json_encode(array(
+        'adhoc' => $groupsowners,
+        'working' => array()
+    )),
+    'treatAsOwner' => $isuserowner === 'T' ? 'true' : 'false',
+    'columns' => json_encode($columns),
+    'collapsed' => $config['defaultCollapse'] === 'collapsed' ? true : false,
+    'optAction' => "leavegroup",
+    'actionUrl' => $this->Html->url([
+        'controller' => 'grouper_groups', 'action' => 'leavegroup'
+    ]),
+    'members' => true
+)); ?>
 
-$numColumns = count($columns);
 
-$collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
-?>
-<?php if (count($groupsowners) > 0) : ?>
-  <div class="grouper-table">
-    <?php print $this->element("pagination", array(
-      'goto' => false,
-      'limit' => false,
-      'numbers' => false,
-      'counter' => true,
-      'class' => 'counter'
-    )); ?>
-    <table class="table table-bordered w-100 mb-0">
-      <thead>
-        <tr>
-          <?php foreach ($columns as $key => $label) : ?>
-            <th class="group <?php echo $key === 'action' ? $key . ' text-center' : $key; ?>"><?php echo _txt($label); ?></th>
-          <?php endforeach; ?>
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="table-secondary">
-          <td colspan="<?php echo $numColumns; ?>">
-            <button type="button" class="btn btn-link btn-text collapse-btn <?php echo $collapsed ? 'collapsed' : ''; ?> fw-bold m-0" data-toggle="collapse" data-target=".collapse-adhoc-group-parent" role="button" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>">
-              <?php echo $config['adHocHeading'] ?? 'Ad-hoc groups'; ?>
-              <em class="material-icons mt-0" aria-hidden="true"><?php echo $collapsed ? 'arrow_right' : 'arrow_drop_down' ?></em>
-            </button>
-          </td>
-        </tr>
-        <?php if (count($groupsowners) < 1) : ?>
-          <tr>
-            <td colspan="<?php echo $numColumns; ?>">
-              You are not a manager of any ad-hoc groups.
-            </td>
-          </tr>
-        <?php endif; ?>
-        <?php foreach ($groupsowners as $group) : ?>
-          <tr class="<?php echo $collapsed ? 'collapse' : 'show'; ?> collapse-adhoc-group-parent">
-            <td class="pl-3">
-              <span class="grpr-popover-toggle" data-container="body" data-toggle="popover" data-placement="top" data-content="<?php echo $group['name']; ?>">
-                <?php echo $group['friendlyName'] ?? "No Name"; ?>
-              </span>
-            </td>
-            <?php if ($isuserowner === 'T') { ?>
-              <td>&mdash;</td>
-            <?php } ?>
-            <td><?php echo $group['description'] ?? "No Description"; ?></td>
-            <td><?php echo isset($group['enabled']) && $group['enabled'] === 'T' ? 'Enabled' : 'Disabled'; ?></td>
-            <td class="text-center">
-              <span class="d-flex flex-row justify-content-center align-items-center">
-                <?php echo $group['optOut'] ? $this->element('GrouperLite.Components/optAction', array(
-                  'member' => $group['optOut'],
-                  'action' => 'leavegroup',
-                  'group' => $group['name'],
-                  'groupDisplay' => $group['friendlyName'],
-                  'idx' => $key
-                )) : ''; ?>
-                <button class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn" data-id="<?php echo urlencode($group['name']) ?>" data-name="<?php echo ($group['friendlyName']); ?>">
-                  <?php echo _txt('pl.grouperlite.action.members'); ?> <em class="material-icons mt-0" aria-hidden="true">group</em>
-                </button>
-                <?php if ($isuserowner === 'T' && $isGrouperVisible === 'T') : ?>
-                  <?php
-                  $baseUrl = $grouperbaseurl;
-                  $path = '/grouper/grouperUi/app/UiV2Main.index';
-                  $groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
-                  $groupUrlBase = $baseUrl . $path . $groupOperation;
-                  $attrOperation = '?operation=UiV2AttributeDefName.viewAttributeDefName&attributeDefNameId=';
-                  $attrUrlBase = $baseUrl . $path . $attrOperation;
-                  ?>
-                  <a href="<?php echo $groupUrlBase . $group['uuid']; ?>" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
-                    <?php echo _txt('pl.grouperlite.action.grouper'); ?> &nbsp;
-                    <em class="material-icons mt-0" aria-hidden="true">link</em>
-                  </a>
-                <?php endif ?>
-              </span>
-            </td>
-          </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
-    <?php print $this->element("pagination", array(
-      'goto' => false,
-      'limit' => true,
-      'numbers' => true,
-      'counter' => false
-    )); ?>
-  </div>
-  <script>
-    $('.grpr-popover-toggle').popover({
-      placement: 'top',
-      trigger: 'hover'
-    });
-  </script>
-<?php endif; ?>
 <?php if (count($groupsowners) < 1) : ?>
   <div class="alert alert-info">
     <p class="lead mb-0 text-center"><?php echo _txt('pl.grouperlite.groups.zero-state'); ?></p>
   </div>
 <?php endif; ?>
-<?php echo $this->element('Components/subscriberList', array('addSubscribers' => true)); ?>
 <!--/nocache-->
\ No newline at end of file
diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
new file mode 100644
index 0000000..f7a161d
--- /dev/null
+++ b/webroot/js/autocomplete.js
@@ -0,0 +1,59 @@
+// ns.testeradmin@at.internet2.edu
+
+export default {
+    props: {
+        group: String
+    },
+    inject: ['txt', 'api'],
+    data() {
+        return {
+            search: '',
+            test: [{
+                "value": "8",
+                "label": "Susan S. Singularity",
+                "email": "ssingularity@another.org 1",
+                "emailLabel": "Email (official): ",
+                "identifier": "ssingularity@another.org",
+                "identifierLabel": ""
+            }, {
+                "value": "4",
+                "label": "Susan S. Susanity",
+                "email": "ssusanity@newbie.org 1",
+                "emailLabel": "Email (official): ",
+                "identifier": "ssingularity@another.org",
+                "identifierLabel": ""
+            }]
+        };
+    },
+    methods: {
+        addUser(search) {
+            this.$emit('add', search);
+        }
+    },
+    mounted(el) {
+        const input = $(this.$el).find('#add-user-input');
+        input.autocomplete({
+            source: `${this.api.find}?co=${this.api.co}&mode=${this.api.mode}`,
+            // source: [].concat(this.test, this.test, this.test),
+            minLength: 3,
+            maxShowItems: 5,
+            select: (event, ui) => {
+                console.log(ui);
+                $("#add-user-input").val(ui.item.value);
+                $("#addUserbutton").prop('disabled', false).focus();
+                return false;
+            },
+        });
+    },
+    template: /*html*/`
+        <div class="input-group">
+            <input id="add-user-input" type="text"  name="addUser" class="form-control" v-model="search" />
+            <div class="input-group-append">
+                <button id="addUserbutton" class=" btn btn-grouper btn-primary px-4" type="button" @click="addUser(search)">
+                    <em class="material-icons lg" aria-hidden="true">add</em>
+                    <span class="ml-2">{{ txt.addUser }}</span>
+                </button>
+            </div>
+        </div>
+    `
+}
\ No newline at end of file
diff --git a/webroot/js/grouper-groups-view.js b/webroot/js/grouper-groups-view.js
index 275178e..7920461 100644
--- a/webroot/js/grouper-groups-view.js
+++ b/webroot/js/grouper-groups-view.js
@@ -1,5 +1,6 @@
 import Collapse from './collapse.js';
 import Popover from './popover.js';
+import Members from './members.js';
 
 export default {
     props: {
@@ -12,10 +13,12 @@ export default {
       },
       url: String,
       owner: Boolean,
-      txt: Object,
+      grouper: String,
     },
+    inject: ['txt'],
     components: {
-        Collapse
+        Collapse,
+        Members
     },
     computed: {
         numColumns() {
@@ -23,12 +26,24 @@ export default {
         },
         collapsed() {
             return this.config.collapsed;
+        },
+        role() {
+            return this.columns.some(c => c.value === 'role');
+        },
+        status() {
+            return this.columns.some(c => c.value === 'status');
         }
     },
     directives: {
       Popover
     },
+    methods: {
+        showSubscribers(group) {
+            this.$refs.members.show(group);
+        }
+    },
     template: /*html*/`
+      <members ref="members" :add="config.add"></members>
       <table class="table w-100 mb-0">
             <thead>
                 <tr>
@@ -58,23 +73,36 @@ export default {
                         </td>
                         <td v-if="owner">&mdash;</td>
                         <td>{{ group.description || txt.descrZeroState }}</td>
+                        <td v-if="status">{{ group.enabled && group.enabled === 'T' ? 'Enabled' : 'Disabled' }}</td>
                         <td>
                             <span class="d-flex flex-row justify-content-center align-items-center">
-                                <template v-if="group.optOut">
-                                <slot name="actionform" :groupname="group.name" :groupdisplayname="group.friendlyName"></slot>
+                                <template v-if="group.optOut || config.optAction">
+                                    <slot name="actionform"
+                                        :groupname="group.name"
+                                        :groupdisplayname="group.friendlyName"
+                                        :txt="txt"
+                                        :actionlabel="config.optAction === 'leavegroup' ? txt.leave : txt.join"
+                                        :actionicon="config.optAction === 'leavegroup' ? 'person_off' : 'person'"
+                                        :actiontype="config.optAction === 'leavegroup' ? 'btn-danger' : 'btn-success'"></slot>
                                 </template>
-                                    
-                                <button class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn"
+                                <button 
+                                    v-if="config.members"
+                                    class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn"
+                                    @click="showSubscribers(group)"
                                     :data-id="encodeURIComponent(group.name)"
                                     :data-name="group.friendlyName">{{ txt.members }}<em class="material-icons mt-0" aria-hidden="true">group</em>
                                 </button>
+                                <a v-if="grouper && owner" :href="grouper + group.uuid" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
+                                    {{ txt.grouper }} &nbsp;
+                                    <em class="material-icons mt-0" aria-hidden="true">link</em>
+                                </a>
                             </span>
                         </td>
                     </tr>
                 </template>
             </collapse>
             </tbody>
-            <tbody>
+            <tbody v-if="groups?.working?.length">
             <collapse :default="config.collapsed" v-slot="{toggle, show}">
                 <tr class="table-secondary">
                     <td :colspan="numColumns">
@@ -88,10 +116,10 @@ export default {
                         </button>
                     </td>
                 </tr>
-                <tr v-if="!groups.working.length" :class="collapsed ? 'collapse' : 'show'" class="table-light collapse-wg-working-group-parent">
+                <tr v-if="!groups?.working?.length" :class="collapsed ? 'collapse' : 'show'" class="table-light collapse-wg-working-group-parent">
                     <td :colspan="numColumns" class="text-center">None</td>
                 </tr>
-                <template v-for="wggroup in groups.working" v-if="show">
+                <template v-for="wggroup in groups?.working" v-if="show">
                     <collapse :default="config.collapsed" v-slot="{toggle, show}">
                         <tr class="table-light collapse-wg-working-group-parent">
                             <td :colspan="numColumns - 2">
diff --git a/webroot/js/members.js b/webroot/js/members.js
new file mode 100644
index 0000000..148ed1e
--- /dev/null
+++ b/webroot/js/members.js
@@ -0,0 +1,186 @@
+/**
+ * COmanage Registry GrouperLite Members Widget Component JavaScript - Dialog Box
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          https://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v4.1.1
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+import Autocomplete from './autocomplete.js';
+
+export default {
+    props: {
+        add: Boolean,
+        default: false
+    },
+    inject: ['txt', 'api'],
+    components: {
+        Autocomplete
+    },
+    data () {
+        return {
+            group: null,
+            loading: false,
+            search: '',
+            subscribers: [],
+            disabled: [],
+            error: null,
+        };
+    },
+    methods: {
+        show(group) {
+            this.group = group;
+            jQuery(this.$el).modal('show');
+            this.loadGroupSubscribers(group);
+        },
+        async loadGroupSubscribers({ name }) {
+            this.loading = true;
+            const resp = await fetch(`${this.api.group}?groupname=${encodeURIComponent(name)}`, {
+                headers: {
+                    "Accept": "application/json",
+                    // 'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                method: "GET"
+            });
+            if (resp.ok) {
+                this.subscribers = await resp.json();
+                
+            } else {
+                this.error = resp;
+            }
+            this.loading = false;
+
+        },
+        async removeSubscriber({name}, {id}) {
+            this.loading = true;
+            const resp = await fetch(`${this.api.remove}?group=${encodeURIComponent(name)}&userId=${id}`, {
+                method: "DELETE",
+                headers: {
+                    "Accept": "application/json",
+                    // 'Content-Type': 'application/x-www-form-urlencoded',
+                }
+            });
+            if (resp.ok) {
+                this.subscribers = [];
+                this.loadGroupSubscribers(this.group);
+            } else {
+                this.disabled = [ ...this.disabled, id ];
+            }
+
+            this.loading = false;
+        },
+        async addSubscriber(id) {
+            this.loading = true;
+            const { name } = this.group;
+            const resp = await fetch(`${this.api.add}?group=${encodeURIComponent(name)}&userId=${id}`, {
+                method: "POST",
+                headers: {
+                    "Accept": "application/json",
+                    // 'Content-Type': 'application/x-www-form-urlencoded',
+                }
+            });
+            if (resp.ok) {
+                this.loadGroupSubscribers(this.group);
+            }
+
+            this.loading = false;
+        }
+    },
+    beforeMount() {
+      jQuery(this.$el).modal();
+    },
+    template: /*html*/`
+      <div 
+        className="modal modal-members modal-primary" 
+        id="cm-grouperlite-modal"
+        tabIndex="-1" 
+        role="dialog" 
+        aria-labelledby="cm-grouperlite-modal-title" 
+        aria-hidden="true">
+        <div className="modal-dialog modal-dialog-centered" role="document">
+          <div className="modal-content" v-if="group">
+            <div className="modal-header">
+              <h5 className="modal-title" id="cm-grouperlite-modal-title">
+                  {{ this.txt.members }}: {{ group.friendlyName }}
+              </h5>
+              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div className="modal-body">
+                <div v-if="loading">
+                    <svg id="grouper-loader" class="fade-out-half" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
+                        <circle r="20%" cx="15%" cy="50%" color="#000" />
+                        <circle r="20%" cx="50%" cy="50%" color="#000" />
+                        <circle r="20%" cx="85%" cy="50%" color="#000" />
+                    </svg>
+                    <p class="sr-only">Loading...</p>
+                </div>
+                <div v-else>
+                    <div v-if="error">
+                        <span v-if="error.status === 403">{{ txt.noaccess }}</span>
+                        <span v-else>{{ txt.empty }}</span>
+                    </div>
+                    <div v-else>
+                        <div v-if="add">
+                            <div class="d-flex mb-4">
+                                <form id="add-user-form" class="add-user-form w-100">
+                                    <label class="sr-only" for="addUser">{{ txt.search }}</label>
+                                    <autocomplete :group="encodeURIComponent(this.group.name)" @add="(id) => addSubscriber(id)" />
+                                </form>
+                            </div>
+                            <div v-if="error">
+                                <p class="alert alert-danger error">{{ error }}</p>
+                            </div>
+                        </div>
+                        <table v-if="subscribers.length > 0" class="table table-striped">
+                            <tbody id="sub-body">
+                                <tr v-for="subscriber in subscribers">
+                                    <td>
+                                        {{ subscriber.name }}
+                                    </td>
+                                    <td>
+                                        {{ subscriber.id }}
+                                    </td>
+                                    <td>
+                                        <button :disabled="disabled.indexOf(subscriber.id) > -1" @click="removeSubscriber(group, subscriber)" class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap member-del-btn">
+                                            {{ txt.remove }}
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <span v-else>
+                            {{ txt.empty }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-grouper btn-link" data-dismiss="modal">
+                {{ this.txt.close }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      `
+  }
\ No newline at end of file
diff --git a/webroot/js/search.js b/webroot/js/search.js
new file mode 100644
index 0000000..c74ddc2
--- /dev/null
+++ b/webroot/js/search.js
@@ -0,0 +1,17 @@
+export default {
+    props: {
+      
+    },
+    data() {
+      return {}
+    },
+    methods: {
+      
+    },
+    mounted() {
+      
+    },
+    template: /*html*/`
+      
+    `
+}
\ No newline at end of file