diff --git a/dashboard/src/components/GroupDialog.vue b/dashboard/src/components/GroupDialog.vue
new file mode 100644
index 000000000..cb08d6d2d
--- /dev/null
+++ b/dashboard/src/components/GroupDialog.vue
@@ -0,0 +1,109 @@
+<script setup>
+
+import { ref, useTemplateRef } from 'vue';
+import { Dialog, TextInput, FormGroup, MultiSelect } from 'pankow';
+import UsersModel from '../models/UsersModel.js';
+import GroupsModel from '../models/GroupsModel.js';
+import AppsModel from '../models/AppsModel.js';
+
+const usersModel = UsersModel.create();
+const groupsModel = GroupsModel.create();
+const appsModel = AppsModel.create();
+
+const emit = defineEmits([ 'success' ]);
+
+const dialog = useTemplateRef('dialog');
+
+// also determines if new or edit mode
+const group = ref(null);
+const busy = ref(false);
+const formError = ref('');
+const name = ref('');
+const users = ref([]);
+const allUsers = ref([]);
+const apps = ref([]);
+const allApps = ref([]);
+
+async function onSubmit() {
+  busy.value = true;
+
+  if (group.value) {
+    const [error] = await groupsModel.update(group.value.id, name.value, users.value.map(u => u.id), apps.value.map(u => u.id));
+    if (error) {
+      formError.value = error.body ? error.body.message : 'Internal error';
+      busy.value = false;
+      return console.error(error);
+    }
+  } else {
+    const [error] = await groupsModel.add(name.value, users.value.map(u => u.id), apps.value.map(u => u.id));
+    if (error) {
+      formError.value = error.body ? error.body.message : 'Internal error';
+      busy.value = false;
+      return console.error(error);
+    }
+  }
+
+  emit('success');
+  dialog.value.close();
+  busy.value = false;
+}
+
+defineExpose({
+  async open(g = null) {
+    console.log(g)
+
+    group.value = g;
+    name.value = g ? g.name : '';
+
+    let [error, result] = await usersModel.list();
+    if (error) return console.error(error);
+    result.forEach(u => u.label = (u.username || u.email));
+    allUsers.value = result;
+    users.value = g ? g.userIds.map(id => { return result.find(u => u.id === id); }) : [];
+
+    [error, result] = await appsModel.list();
+    if (error) return console.error(error);
+    result.forEach(a => a.label = (a.label || a.fqdn));
+    allApps.value = result;
+    apps.value = g ? g.appIds.map(id => { return result.find(a => a.id === id); }) : [];
+
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="group ? $t('users.editGroupDialog.title', { name: group.name }) : $t('users.addGroupDialog.title')"
+    :confirm-label="group ? $t('main.dialog.save') : $t('users.group.addGroupAction')"
+    :confirm-busy="busy"
+    :confirm-active="!busy"
+     reject-style="secondary"
+    :reject-label="busy ? null : $t('main.dialog.cancel')"
+    @confirm="onSubmit()"
+  >
+    <p class="text-warning" v-if="group?.source">{{ $t('users.editGroupDialog.externalLdapWarning') }}</p>
+    <form @submit.prevent="onSubmit()">
+      <fieldset :disabled="busy">
+        <input type="submit" style="display: none;" />
+
+        <FormGroup>
+          <label for="">{{ $t('users.group.name') }}</label>
+          <TextInput id="nameInput" v-model="name" />
+        </FormGroup>
+
+        <FormGroup>
+          <label for="usersInput">{{ $t('users.group.users') }}</label>
+          <div v-if="group?.source"><span ng-repeat="user in groupEdit.selectedUsers"> {{ (user.username || user.email) }}</span></div>
+          <MultiSelect v-else v-model="users" :options="allUsers" />
+        </FormGroup>
+
+        <FormGroup>
+          <label for="appsInput">Access to Apps</label>
+          <MultiSelect v-model="apps" :options="allApps" />
+        </FormGroup>
+      </fieldset>
+    </form>
+  </Dialog>
+</template>
diff --git a/dashboard/src/models/GroupsModel.js b/dashboard/src/models/GroupsModel.js
index c59c8e452..2e3afa745 100644
--- a/dashboard/src/models/GroupsModel.js
+++ b/dashboard/src/models/GroupsModel.js
@@ -7,16 +7,89 @@ function create() {
 
   return {
     async list() {
-      let error, result;
+      let result;
       try {
         result = await fetcher.get(`${origin}/api/v1/groups`, { access_token: accessToken });
       } catch (e) {
-        error = e;
+        return [e];
       }
 
-      if (error || result.status !== 200) return [error || result];
+      if (result.status !== 200) return [result];
       return [null, result.body.groups];
     },
+    async add(name, userIds, appIds) {
+      let result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/groups`, { name }, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 201) return [result];
+
+      if (userIds.length) {
+        let resultUserIds;
+        try {
+          resultUserIds = await fetcher.put(`${origin}/api/v1/groups/${result.body.id}/members`, { userIds }, { access_token: accessToken });
+        } catch (e) {
+          return [e];
+        }
+
+        if (resultUserIds.status !== 200) return [resultUserIds];
+      }
+
+      if (appIds.length) {
+        let resultAppIds;
+        try {
+          resultAppIds = await fetcher.put(`${origin}/api/v1/groups/${result.body.id}/apps`, { appIds }, { access_token: accessToken });
+        } catch (e) {
+          return [e];
+        }
+
+        if (resultAppIds.status !== 200) return [resultAppIds];
+      }
+
+      return [null, result.body];
+    },
+    async update(id, name, userIds, appIds) {
+      let result;
+      try {
+        result = await fetcher.put(`${origin}/api/v1/groups/${id}/name`, { name }, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+
+      try {
+        result = await fetcher.put(`${origin}/api/v1/groups/${id}/members`, { userIds }, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+
+      try {
+        result = await fetcher.put(`${origin}/api/v1/groups/${id}/apps`, { appIds }, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+
+      return [null];
+    },
+    async remove(id) {
+      let result;
+      try {
+        result = await fetcher.del(`${origin}/api/v1/groups/${id}`, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 204) return [result];
+      return [null];
+    },
   };
 }
 
diff --git a/dashboard/src/views/UsersView.vue b/dashboard/src/views/UsersView.vue
index 9828cfca1..7d042a608 100644
--- a/dashboard/src/views/UsersView.vue
+++ b/dashboard/src/views/UsersView.vue
@@ -4,10 +4,11 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, computed } from 'vue';
-import { Button, ButtonGroup, TextInput, Dropdown, TableView } from 'pankow';
+import { ref, onMounted, computed, useTemplateRef } from 'vue';
+import { Button, ButtonGroup, TextInput, Dropdown, TableView, InputDialog } from 'pankow';
 import { ROLES } from '../constants.js';
 import Section from '../components/Section.vue';
+import GroupDialog from '../components/GroupDialog.vue';
 import UsersModel from '../models/UsersModel.js';
 import GroupsModel from '../models/GroupsModel.js';
 import ProfileModel from '../models/ProfileModel.js';
@@ -45,6 +46,9 @@ const groups = ref([]);
 const groupsById = ref({});
 const roles = ref([]);
 
+const inputDialog = useTemplateRef('inputDialog');
+const groupDialog = useTemplateRef('groupDialog');
+
 const filteredUsers = computed(() => {
   return users.value.filter(u => {
     return u.username.indexOf(search.value) !== -1 || u.email.indexOf(search.value) !== -1 || u.displayName.indexOf(search.value) !== -1;
@@ -109,6 +113,27 @@ function groupMembers(group) {
   return group.userIds.filter(function (uid) { return !!usersById.value[uid]; }).map(function (uid) { return usersById.value[uid].username || usersById.value[uid].email; }).join(' ');
 }
 
+function onEditOrAddGroup(group = null) {
+  groupDialog.value.open(group);
+}
+
+async function onRemoveGroup(group) {
+  const yes = await inputDialog.value.confirm({
+    title: t('users.deleteGroupDialog.title', { name: group.name }),
+    message: t('users.deleteGroupDialog.description', { memberCount: group.memberCount }),
+    confirmStyle: 'danger',
+    confirmLabel: t('users.deleteGroupDialog.deleteAction'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  if (!yes) return;
+
+  const [error] = await groupsModel.remove(group.id);
+  if (error) console.error(error);
+
+  await refreshGroups();
+}
+
 onMounted(async () => {
   const [error, result] = await profileModel.get();
   if (error) return console.error(error);
@@ -133,6 +158,9 @@ onMounted(async () => {
 </script>
 
 <template>
+  <InputDialog ref="inputDialog" />
+  <GroupDialog ref="groupDialog" @success="refreshGroups()"/>
+
   <div class="content">
     <Section :title="$t('main.navbar.users')">
       <template #header-buttons>
@@ -169,25 +197,28 @@ onMounted(async () => {
           </div>
         </template>
       </TableView>
+      <br/>
       <div>{{ $t('users.users.count', { count: users.length }) }}</div>
     </Section>
 
     <Section :title="$t('users.groups.title')">
       <template #header-buttons>
-        <Button icon="fa-solid fa-plus">{{ $t('users.groups.newGroupAction') }}</Button>
+        <Button icon="fa-solid fa-plus" @click="onEditOrAddGroup()">{{ $t('users.groups.newGroupAction') }}</Button>
       </template>
 
-      <TableView :columns="groupsColumns" :model="groups" :busy="busy" style="max-height: 400px;">
+      <TableView :columns="groupsColumns" :model="groups" :busy="busy" style="max-height: 400px;" @row-click="onEditOrAddGroup">
         <template #name="group">
-          {{ group.name }} &nbsp; <i ng-show="group.source" class="far fa-address-book" uib-tooltip="{{ 'users.groups.externalLdapTooltip' | tr }}"></i>
+          {{ group.name }} &nbsp; <i v-if="group.source" class="far fa-address-book" v-tooltip="$t('users.groups.externalLdapTooltip')"></i>
         </template>
         <template #users="group">
           {{ groupMembers(group) }}
         </template>
         <template #actions="group">
           <div class="table-actions">
-            <Button tool small secondary @click="groupEdit.show(group)" v-tooltip="'Edit Group'" icon="fa fa-pencil-alt" />
-            <Button tool small danger @click="groupRemove.show(group)" v-tooltip="'Remove Group'" icon="far fa-trash-alt" />
+            <ButtonGroup>
+              <Button tool small secondary @click.stop="onEditOrAddGroup(group)" v-tooltip="'Edit Group'" icon="fa fa-pencil-alt" />
+            </ButtonGroup>
+            <Button tool small danger @click.stop="onRemoveGroup(group)" v-tooltip="'Remove Group'" icon="far fa-trash-alt" />
           </div>
         </template>
       </TableView>