diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index edcc8d499..f93529e51 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -135,10 +135,13 @@ class UserNameSerializer(WritableNestedModelSerializer):
         fields = ('id', 'username')
 
 
-class GroupSerializer(WritableNestedModelSerializer):
+class GroupSerializer(UniqueFieldsMixin, WritableNestedModelSerializer):
     def create(self, validated_data):
         raise ValidationError('Cannot create using this endpoint')
 
+    def update(self, instance, validated_data):
+        return instance  # cannot update group
+
     class Meta:
         model = Group
         fields = ('id', 'name')
@@ -170,8 +173,9 @@ class SpaceSerializer(serializers.ModelSerializer):
         read_only_fields = ('id', 'created_by', 'created_at', 'message', 'max_recipes', 'max_file_storage_mb', 'max_users', 'allow_sharing', 'demo',)
 
 
-class UserSpaceSerializer(serializers.ModelSerializer):
+class UserSpaceSerializer(WritableNestedModelSerializer):
     user = UserNameSerializer(read_only=True)
+    groups = GroupSerializer(many=True)
 
     def create(self, validated_data):
         raise ValidationError('Cannot create using this endpoint')
diff --git a/cookbook/views/api.py b/cookbook/views/api.py
index 0c21294e8..3fd70f138 100644
--- a/cookbook/views/api.py
+++ b/cookbook/views/api.py
@@ -386,7 +386,7 @@ class UserSpaceViewSet(viewsets.ModelViewSet):
     queryset = UserSpace.objects
     serializer_class = UserSpaceSerializer
     permission_classes = [CustomIsSpaceOwner]
-    http_method_names = ['get', 'patch', 'delete']
+    http_method_names = ['get', 'patch', 'put', 'delete']
 
     def get_queryset(self):
         return self.queryset.filter(space=self.request.space)
diff --git a/vue/src/apps/SpaceManageView/SpaceManageView.vue b/vue/src/apps/SpaceManageView/SpaceManageView.vue
index e365829ee..db60f6a0e 100644
--- a/vue/src/apps/SpaceManageView/SpaceManageView.vue
+++ b/vue/src/apps/SpaceManageView/SpaceManageView.vue
@@ -27,7 +27,7 @@
                             <td>
                                 <generic-multiselect
                                     class="input-group-text m-0 p-0"
-                                    @change="us.groups = $event.val"
+                                    @change="us.groups = $event.val; updateUserSpace(us)"
                                     label="name"
                                     :initial_selection="us.groups"
                                     :model="Models.GROUP"
@@ -37,7 +37,7 @@
                                 />
                             </td>
                             <td>
-                                <button @click="alert('')">{{ $t('Delete') }}</button>
+                                <button class="btn btn-danger" @click="deleteUserSpace(us)">{{ $t('Delete') }}</button>
                             </td>
                         </tr>
                     </table>
@@ -55,7 +55,7 @@ import {BootstrapVue} from "bootstrap-vue"
 
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
-import {ApiMixin, ResolveUrlMixin, ToastMixin} from "@/utils/utils"
+import {ApiMixin, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils"
 
 import {ApiApiFactory} from "@/utils/openapi/api.ts"
 import GenericMultiselect from "@/components/GenericMultiselect";
@@ -83,7 +83,27 @@ export default {
             this.user_spaces = r.data
         })
     },
-    methods: {},
+    methods: {
+        updateUserSpace: function (userSpace) {
+            let apiFactory = new ApiApiFactory()
+            apiFactory.partialUpdateUserSpace(userSpace.id, userSpace).then(r => {
+                StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
+            }).catch(err => {
+                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
+            })
+        },
+        deleteUserSpace: function (userSpace) {
+            if (confirm(this.$t('confirm_delete', {object: this.$t("User")}))) {
+                let apiFactory = new ApiApiFactory()
+                apiFactory.destroyUserSpace(userSpace.id).then(r => {
+                    this.user_spaces = this.user_spaces.filter(u => u !== userSpace)
+                    StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
+                }).catch(err => {
+                    StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
+                })
+            }
+        }
+    },
 }
 </script>