diff --git a/View/Elements/Components/vue-table.ctp b/View/Elements/Components/vue-table.ctp
index 337633b..8978eff 100644
--- a/View/Elements/Components/vue-table.ctp
+++ b/View/Elements/Components/vue-table.ctp
@@ -13,13 +13,13 @@
                 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' ?>
+                    collapsed: <?php echo $config['defaultCollapse'] == 'collapsed' ? 'true' : 'false'; ?>,
+                    optAction: "<?php echo isset($optAction) ? $optAction : 'none'; ?>",
+                    members: <?php echo isset($members) && $members ? 'true' : 'false' ?>,
+                    add: <?php echo isset($addSubscribers) && $addSubscribers ? 'true' : 'false' ?>
                 },
                 owner: <?php echo $treatAsOwner ? 'true' : 'false'; ?>,
-                url: "<?php echo $actionUrl; ?>",
+                url: "<?php echo isset($actionUrl) ? $actionUrl : 'null'; ?>",
             }
         },
         provide: {
@@ -91,7 +91,7 @@
             >
             <template v-slot:actionform="actionform">
                 <?php echo $this->Form->create(false, array(
-                    'url' => array('controller' => 'grouper_groups', 'action' => $optAction),
+                    'url' => array('controller' => 'grouper_groups', 'action' => isset($optAction) ? $optAction : ''),
                     'class' => 'd-flex justify-content-center',
                     'id' => 'group-action'
                 )); ?>
diff --git a/View/GrouperGroups/base.ctp b/View/GrouperGroups/base.ctp
index 7ffa91f..56147b1 100644
--- a/View/GrouperGroups/base.ctp
+++ b/View/GrouperGroups/base.ctp
@@ -21,17 +21,13 @@ 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));
 ?>
 
-
-
 <!-- Load JavaScript -->
 
-
 <div id="grouper-plugin" class="grouper pt-2">
     <div class="d-flex align-items-center mb-4">
         <?php print $this->Html->image('GrouperLite.Grouper.jpg', array('class' => 'img-fluid mr-2', 'style' => 'height: 50px')); ?>
@@ -41,19 +37,3 @@ $this->Html->addCrumb(_txt('pl.grouperlite.crumb.root'), array('controller' => '
     
     <?php echo $this->fetch('content'); ?>
 </div>
-
-<script>
-    $('.grouper-table .collapse-btn').on('click', function(ev) {
-        var btn = $(ev.currentTarget);
-        if (btn.hasClass('collapsed')) {
-            btn.find('em.material-icons').text('arrow_drop_down');
-        } else {
-            btn.find('em.material-icons').text('arrow_right');
-        }
-    });
-
-    $('.collapse-wg-working-group-parent').on('hide.bs.collapse', function(ev) {
-        $(this).siblings('.collapse-wg-working-group').collapse('hide');
-        $(this).parent().find('.collapse-btn .material-icons').text('arrow_right');
-    });
-</script>
\ No newline at end of file
diff --git a/View/GrouperGroups/groupmember.ctp b/View/GrouperGroups/groupmember.ctp
index 3d218f9..5a84eeb 100644
--- a/View/GrouperGroups/groupmember.ctp
+++ b/View/GrouperGroups/groupmember.ctp
@@ -16,7 +16,6 @@
         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'
diff --git a/View/GrouperGroups/groupoptin.ctp b/View/GrouperGroups/groupoptin.ctp
index 8bc5a62..713ac04 100644
--- a/View/GrouperGroups/groupoptin.ctp
+++ b/View/GrouperGroups/groupoptin.ctp
@@ -14,7 +14,6 @@
         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'
diff --git a/View/GrouperGroups/groupowner.ctp b/View/GrouperGroups/groupowner.ctp
index 6751105..8abe4f1 100644
--- a/View/GrouperGroups/groupowner.ctp
+++ b/View/GrouperGroups/groupowner.ctp
@@ -24,11 +24,7 @@ if ($isuserowner !== 'T') {
     )),
     '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'
-    ]),
+    'addSubscribers' => true,
     'members' => true
 )); ?>
 
diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
index f7a161d..bc816c7 100644
--- a/webroot/js/autocomplete.js
+++ b/webroot/js/autocomplete.js
@@ -8,21 +8,7 @@ export default {
     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": ""
-            }]
+            val: ''
         };
     },
     methods: {
@@ -34,12 +20,15 @@ export default {
         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,
+            minLength: 1,
+            maxShowItems: 10,
+            focus: function( event, ui ) {
+                this.search = ui.item.label;
+                return false;
+            },
             select: (event, ui) => {
-                console.log(ui);
-                $("#add-user-input").val(ui.item.value);
+                this.val = ui.item.identifier;
+                this.search = ui.item.label;
                 $("#addUserbutton").prop('disabled', false).focus();
                 return false;
             },
@@ -47,9 +36,10 @@ export default {
     },
     template: /*html*/`
         <div class="input-group">
-            <input id="add-user-input" type="text"  name="addUser" class="form-control" v-model="search" />
+            <input id="add-user-value" type="hidden"  name="addUser" class="form-control" v-model="val" />
+            <input id="add-user-input" type="text"  name="display" 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)">
+                <button id="addUserbutton" class=" btn btn-grouper btn-primary px-4" type="button" @click="addUser(val)">
                     <em class="material-icons lg" aria-hidden="true">add</em>
                     <span class="ml-2">{{ txt.addUser }}</span>
                 </button>
diff --git a/webroot/js/grouper-groups-view.js b/webroot/js/grouper-groups-view.js
index 7920461..15baf5b 100644
--- a/webroot/js/grouper-groups-view.js
+++ b/webroot/js/grouper-groups-view.js
@@ -40,6 +40,13 @@ export default {
     methods: {
         showSubscribers(group) {
             this.$refs.members.show(group);
+        },
+        showOptAction(group) {
+            if (this.config.optAction === 'leavegroup'){
+                return group.optOut;
+            } else {
+                return this.config.hasOwnProperty('optAction') && this.config.optAction !== 'none';
+            }
         }
     },
     template: /*html*/`
@@ -76,7 +83,7 @@ export default {
                         <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 || config.optAction">
+                                <template v-if="showOptAction(group)">
                                     <slot name="actionform"
                                         :groupname="group.name"
                                         :groupdisplayname="group.friendlyName"
diff --git a/webroot/js/members.js b/webroot/js/members.js
index 148ed1e..083a1e9 100644
--- a/webroot/js/members.js
+++ b/webroot/js/members.js
@@ -45,6 +45,14 @@ export default {
             error: null,
         };
     },
+    computed: {
+        canAdd() {
+            if (!this.error) { return this.add; }
+            if (this.error) {
+                return this.error.status !== 403;
+            }
+        }
+    },
     methods: {
         show(group) {
             this.group = group;
@@ -53,6 +61,7 @@ export default {
         },
         async loadGroupSubscribers({ name }) {
             this.loading = true;
+            this.error = null;
             const resp = await fetch(`${this.api.group}?groupname=${encodeURIComponent(name)}`, {
                 headers: {
                     "Accept": "application/json",
@@ -62,7 +71,6 @@ export default {
             });
             if (resp.ok) {
                 this.subscribers = await resp.json();
-                
             } else {
                 this.error = resp;
             }
@@ -90,12 +98,16 @@ export default {
         async addSubscriber(id) {
             this.loading = true;
             const { name } = this.group;
-            const resp = await fetch(`${this.api.add}?group=${encodeURIComponent(name)}&userId=${id}`, {
+            const formData = new FormData();
+            formData.append("userId", id);
+            formData.append("group", name);
+            const resp = await fetch(`${this.api.add}?group=${name}&userId=${id}`, {
                 method: "POST",
                 headers: {
                     "Accept": "application/json",
                     // 'Content-Type': 'application/x-www-form-urlencoded',
-                }
+                },
+                body: formData
             });
             if (resp.ok) {
                 this.loadGroupSubscribers(this.group);
@@ -135,22 +147,19 @@ export default {
                     <p class="sr-only">Loading...</p>
                 </div>
                 <div v-else>
+                    <div v-if="canAdd">
+                        <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>
                     <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">