diff --git a/View/Elements/actAsPeopleAutocomplete.ctp b/View/Elements/actAsPeopleAutocomplete.ctp
new file mode 100644
index 0000000..49ee1b7
--- /dev/null
+++ b/View/Elements/actAsPeopleAutocomplete.ctp
@@ -0,0 +1,127 @@
+<?php
+
+// Get parameters
+$baseUrl = $vv_config['CoGrouperLiteWidget']['grouper_url'];
+$path = '/grouper/grouperUi/app/UiV2Main.index';
+$groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
+$grouperUrlBase = $baseUrl . $path . $groupOperation;
+$suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
+
+
+?>
+
+<script type="module">
+  import Autocomplete from '<?= $this->webroot ?>grouper_lite_widget/js/autocomplete.js<?= $suffix ?>';
+  import Loader from '<?= $this->webroot ?>grouper_lite_widget/js/loader.js<?= $suffix ?>';
+
+  // XXX Probably move this to comanage.js
+  const provided = {
+    collapsed: <?= $vv_config['CoGrouperLiteWidget']['default_collapse'] == 'collapsed' ? 'true' : 'false' ?>,
+    optAction: "<?= $optAction ?? 'none' ?>",
+    owner: <?= $vv_is_user_owner ? 'true' : 'false' ?>,
+    url: "<?= $actionUrl ?? 'null' ?>",
+    grouperUrl: "<?= $grouperUrlBase ?>",
+    view: "<?= $this->action ?>",
+    txt: {
+      adhocHeading: "<?= $vv_config['CoGrouperLiteWidget']['adhoc_heading'] ?? 'Ad-hoc groups' ?>",
+      wgHeading: "<?= $vv_config['CoGrouperLiteWidget']['wg_heading'] ?? 'Working groups' ?>",
+      search: "<?= _txt('pl.grouperlite.title.search') ?>",
+      searchForGroups: "<?= _txt('pl.grouperlite.action.search') ?>",
+      display: "<?= _txt('fd.page.limit.display') ?>",
+      records: "<?= _txt('fd.page.limit.records') ?>",
+      first: "<?= _txt('op.first') ?>",
+      last: "<?= _txt('op.last') ?>",
+      previous: "<?= _txt('op.previous') ?>",
+      next: "<?= _txt('op.next') ?>",
+      groups: "<?= _txt('pl.grouperlite.dashboard.heading.groups') ?>",
+      grouper: "<?= _txt('pl.grouperlite.action.grouper') ?>",
+      leave: "<?= _txt('pl.grouperlite.action.leave') ?>",
+      zero: {
+        description: "<?= _txt('pl.grouperlite.value.descr.zerostate') ?>",
+        records: "<?= _txt('pl.grouperlite.groups.zero-state') ?>"
+      },
+      members: "<?= _txt('pl.grouperlite.action.members') ?>",
+      email: "<?= _txt('pl.grouperlite.value.email') ?>",
+      close: "<?= _txt('pl.grouperlite.action.close') ?>",
+      remove: "<?= _txt('pl.grouperlite.action.remove-user') ?>",
+      addUser: "<?= _txt('pl.grouperlite.action.add-user') ?>",
+      addSubscriberError: "<?= _txt('pl.grouperlite.message.flash.add-subscriber-failed') ?>",
+      addSubscriberSuccess: "<?= _txt('pl.grouperlite.message.flash.add-subscriber-success') ?>",
+      removeSubscriberError: "<?= _txt('pl.grouperlite.message.flash.remove-subscriber-failed') ?>",
+      removeSubscriberSuccess: "<?= _txt('pl.grouperlite.message.flash.remove-subscriber-success') ?>",
+      getSubscriberError: "<?= _txt('pl.grouperlite.message.flash.group-detail-members-failed') ?>",
+      peoplePickerPlaceHolder: "<?= _txt('op.grm.add.placeholder') ?>",
+      memberships: "<?= _txt('pl.grouperlite.action.memberships') ?>",
+      noaccess: "<?= _txt('pl.grouperlite.members.noaccess') ?>",
+      empty: "<?= _txt('pl.grouperlite.members.empty') ?>",
+      join: "<?= _txt('pl.grouperlite.action.join') ?>",
+      joinSuccess: "<?= _txt('pl.grouperlite.message.flash.join-group-success') ?>",
+      joinFailure: "<?= _txt('pl.grouperlite.message.flash.join-group-failed') ?>",
+      joinError: "<?= _txt('pl.grouperlite.message.flash.join-group-error') ?>",
+      leaveSuccess: "<?= _txt('pl.grouperlite.message.flash.leave-group-success') ?>",
+      leaveFailure: "<?= _txt('pl.grouperlite.message.flash.leave-group-failure') ?>",
+      leaveError: "<?= _txt('pl.grouperlite.message.flash.leave-group-error') ?>",
+      tabs: {
+        memberships: "<?= _txt('pl.grouperlite.nav.memberships') ?>",
+        optin: "<?= _txt('pl.grouperlite.nav.groups-can-join') ?>",
+        owner: "<?= _txt('pl.grouperlite.nav.groups-presided') ?>",
+        manager: "<?= _txt('pl.grouperlite.nav.users-presided') ?>",
+      },
+      columns: <?= json_encode(['name'        => _txt('pl.grouperlite.table.name'),
+                                'role'        => _txt('pl.grouperlite.table.role'),
+                                'description' => _txt('pl.grouperlite.table.description'),
+                                'status'      => _txt('pl.grouperlite.table.status'),
+                                'action'      => _txt('pl.grouperlite.table.action')],
+                               JSON_THROW_ON_ERROR) ?>,
+    },
+    api: {
+      co: <?= $vv_coid ?>,
+      glid: <?= $vv_config['CoGrouperLiteWidget']['id'] ?>,
+      mode: "<?= PeoplePickerModeEnum::All ?>",
+      base: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups",
+      find: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/findSubscriber/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      join: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/joinGroup/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      leave: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/leaveGroup/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      remove: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/removeSubscriber/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      add: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/addSubscriber/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      group: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/groupSubscribers/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      memberships: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/groupmemberapi/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      managing: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/usermanagerapi/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      optin: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/groupoptinapi/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+      owner: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/groupownerapi/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
+    },
+  }
+
+  const app = Vue.createApp({
+    provide: provided,
+    data() {
+      return {
+        loading: false,
+        search: '',
+        subscribers: [],
+        disabled: [],
+        }
+    },
+    components: {
+      Autocomplete,
+      Loader
+    },
+    inject: ['txt', 'api'],
+    methods: {
+      addUser({ name }) {
+        console.log('test add user')
+      },
+    }
+  });
+
+
+  app.config.unwrapInjectedRef = true;
+  // Mount the component and provide a global reference for this app instance.
+  app.mount("#<?= $htmlId ?>-container");
+</script>
+
+<div id="<?= $htmlId ?>-container" class="cm-autocomplete-container">
+  <Autocomplete @callback="(item) => addUser(item)"
+                icon="add"/>
+  <Loader :active="loading"/>
+</div>
diff --git a/View/Elements/empty b/View/Elements/empty
deleted file mode 100644
index e69de29..0000000
diff --git a/View/GrouperGroups/index.ctp b/View/GrouperGroups/index.ctp
index 95e10d6..fe539cd 100644
--- a/View/GrouperGroups/index.ctp
+++ b/View/GrouperGroups/index.ctp
@@ -8,6 +8,14 @@ print $this->Html->script('GrouperLiteWidget.vue-router.js');
 // Add Breadcrumb
 $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
 
+
+$baseUrl = $vv_config['CoGrouperLiteWidget']['grouper_url'];
+$path = '/grouper/grouperUi/app/UiV2Main.index';
+$groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
+$grouperUrlBase = $baseUrl . $path . $groupOperation;
+
+$htmlId = 'act-as-picker';
+$suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
 ?>
 <!--/nocache-->
 <div class="d-flex align-items-center mb-4">
@@ -16,20 +24,12 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
 </div>
 
 <script type="module">
-    <?php $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '' ?>
     import GrouperGroupsView from '<?= $this->webroot ?>grouper_lite_widget/js/grouper-groups-view.js<?= $suffix ?>';
     import GroupMember from '<?= $this->webroot ?>grouper_lite_widget/js/page/GroupMember.js<?= $suffix ?>';
     import GroupOptin from '<?= $this->webroot ?>grouper_lite_widget/js/page/GroupOptin.js<?= $suffix ?>';
     import GroupOwner from '<?= $this->webroot ?>grouper_lite_widget/js/page/GroupOwner.js<?= $suffix ?>';
     import UserManager from '<?= $this->webroot ?>grouper_lite_widget/js/page/UserManager.js<?= $suffix ?>';
 
-    <?php
-    $baseUrl = $vv_config['CoGrouperLiteWidget']['grouper_url'];
-    $path = '/grouper/grouperUi/app/UiV2Main.index';
-    $groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
-    $grouperUrlBase = $baseUrl . $path . $groupOperation;
-    ?>
-
     const { VueRouter } = window;
 
     const routes = [
@@ -61,7 +61,6 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
         history: VueRouter.createWebHistory("<?= $this->webroot ?>grouper_lite_widget/grouper_groups"),
         routes,
     })
-    
 
     const app = Vue.createApp({
         provide: {
@@ -70,7 +69,7 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
             owner: <?= $vv_is_user_owner ? 'true' : 'false' ?>,
             url: "<?= $actionUrl ?? 'null' ?>",
             grouperUrl: "<?= $grouperUrlBase ?>",
-            view: "<?= $this->action; ?>",
+            view: "<?= $this->action ?>",
             txt: {
                 adhocHeading: "<?= $vv_config['CoGrouperLiteWidget']['adhoc_heading'] ?? 'Ad-hoc groups' ?>",
                 wgHeading: "<?= $vv_config['CoGrouperLiteWidget']['wg_heading'] ?? 'Working groups' ?>",
@@ -123,7 +122,6 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
                                           'action'      => _txt('pl.grouperlite.table.action')],
                                          JSON_THROW_ON_ERROR) ?>,
             },
-            
             api: {
                 co: <?= $vv_coid ?>,
                 glid: <?= $vv_config['CoGrouperLiteWidget']['id'] ?>,
@@ -148,13 +146,12 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
 
     app.config.unwrapInjectedRef = true;
     app.use(router);
-
     app.mount('#grouper-lite-widget');
 </script>
 
 <!--https://materializecss.com/icons.html -->
-<div class="grouper-table">
-    <div id="grouper-lite-widget">
+<div id="content" class="with-sidebar">
+    <div id="grouper-lite-widget" class="mb-2 mb-lg-0">
         <router-view></router-view>
     </div>
     <div id="right-sidebar">
@@ -162,14 +159,19 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
         <div class="font-weight-bold d-inline-flex align-items-center w-100">
           <em class="material-icons lg" aria-hidden="true">transfer_within_a_station</em>
           <span class="ml-1">Act As</span>
-          <a href="/registry/history_records/index/copersonid:3054"
-             class="spin ignore-invalid ml-auto order-2">
+          <a data-toggle="collapse"
+             href="#people-picker-container"
+             role="button"
+             aria-expanded="false"
+             aria-controls="people-picker-container"
+             class="ignore-invalid ml-auto order-2">
             <span class="ui-icon ui-icon-search"></span>Find
           </a>
         </div>
-        <p class="text-muted">
-          John Doe
-        </p>
+        <div class="collapse" id="people-picker-container">
+          <div id="auto-complete-form">test</div>
+        </div>
+        <a href="<?= $this->webroot ?>co_people/canvas/3054"  class="spin ignore-invalid">John Doe</a>
         <hr>
       </div>
     </div>
diff --git a/webroot/css/co-grouper-base.css b/webroot/css/co-grouper-base.css
index 84c5a0e..836c05c 100644
--- a/webroot/css/co-grouper-base.css
+++ b/webroot/css/co-grouper-base.css
@@ -14,12 +14,6 @@
     --secondary: var(--darkteal)
 }
 
-.grouper_groups .grouper-table {
-    display: grid;
-    grid-template-columns: auto 20%;
-    grid-gap: 1em;
-}
-
 .text-grouper {
     color: var(--primary);
 }
@@ -148,4 +142,4 @@
     to {
         opacity: 1;
     }
-}
\ No newline at end of file
+}
diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
index 6a4bed2..a60e81d 100644
--- a/webroot/js/autocomplete.js
+++ b/webroot/js/autocomplete.js
@@ -68,7 +68,6 @@ export default {
                     },
                     success: function (data) {
                         $("#grouper-search-container .co-loading-mini").hide();
-                        // If i have more data from before append at the end
                         response( data );
                     },
                     error: function(data) {
diff --git a/webroot/js/page/ActAsUser.js b/webroot/js/page/ActAsUser.js
deleted file mode 100644
index 4f7f276..0000000
--- a/webroot/js/page/ActAsUser.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import PageCount from '../pagecount.js';
-import Pagination from '../pagination.js';
-import GroupsTable from '../groups-table.js';
-import Members from '../members.js';
-import Autocomplete from '../autocomplete.js';
-import Loader from '../loader.js';
-export default {
-  components: {
-    Autocomplete,
-    Loader
-  },
-  data() {
-    return {
-      loading: false,
-      subscribers: [],
-      user: {},
-      rowLoading: false,
-      searched: false
-    }
-  },
-  inject: ['api', 'txt'],
-  computed: {
-    preInfoTxt() {
-      return '<em class="material-icons lg" aria-hidden="true">search</em><span class="ml-1">' + this.txt.search + ':</span>'
-    }
-  },
-  methods: {
-    reset() {
-      this.searched = false
-      // If you are in the middle of a row action we do not want to clear
-      // the results because we are breaking the user experience
-      if(!this.rowLoading) {
-        this.subscribers = []
-      }
-    },
-    async disableActAs() {
-
-    },
-    async findUsersIManage(user) {
-    }
-  },
-  template: /*html*/`
-        <autocomplete @callback="(item) => findGroupsForManagedUser(item)"
-                      icon="search"
-                      action="findGroupsForManagedUser"
-                      :renderBtn="false"
-                      :preInfo="this.preInfoTxt"
-                      />
-        <loader :active="loading"></loader>
-        <div v-if="!loading">
-            <div v-if="error">
-                <span v-if="error.status === 403">{{ txt.noaccess }}</span>
-                <span v-else>{{ txt.empty }}</span>
-            </div>
-            <div v-else>
-                <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 :colspan="remove ? 1 : 2">
-                                {{ subscriber.id }}
-                            </td>
-                            <td v-if="remove">
-                                <button :disabled="disabled.indexOf(subscriber.id) > -1"
-                                        @click=""
-                                        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>
-    `
-}
\ No newline at end of file