diff --git a/ui/src/api/roles.ts b/ui/src/api/roles.ts
index c128dbf..6ee1660 100644
--- a/ui/src/api/roles.ts
+++ b/ui/src/api/roles.ts
@@ -10,7 +10,9 @@ export type Role = {
 const addr = import.meta.env.VITE_APIHOST;
 
 export async function getRoles(): Promise<Role[]> {
-    const res = await fetch(`${addr}/roles`)
+    const res = await fetch(`${addr}/roles`, {
+        credentials: 'include',
+    })
 
     if (res.ok) {
         return res.json() as Promise<Role[]>;
@@ -26,11 +28,12 @@ export async function createRole(name: string, color: string, description: strin
         headers: {
             "Content-Type": "application/json"
         },
+        credentials: 'include',
         body: JSON.stringify({
             name,
             color,
             description
-        })
+        }),
     });
 
     if (res.ok) {
@@ -47,6 +50,7 @@ export async function addMemberToRole(member_id: number, role_id: number): Promi
         headers: {
             "Content-Type": "application/json"
         },
+        credentials: 'include',
         body: JSON.stringify({
             member_id,
             role_id
@@ -83,7 +87,8 @@ export async function removeMemberFromRole(member_id: number, role_id: number):
 
 export async function deleteRole(role_id: number): Promise<boolean> {
     const res = await fetch(`${addr}/roles/${role_id}`, {
-        method: "DELETE"
+        method: "DELETE",
+        credentials: 'include',
     });
 
     if (res.ok) {
diff --git a/ui/src/pages/ManageRoles.vue b/ui/src/pages/ManageRoles.vue
index fa3a0aa..cf437ff 100644
--- a/ui/src/pages/ManageRoles.vue
+++ b/ui/src/pages/ManageRoles.vue
@@ -34,7 +34,8 @@ import { Plus, X } from 'lucide-vue-next';
 import Separator from '@/components/ui/separator/Separator.vue';
 import Input from '@/components/ui/input/Input.vue';
 import Label from '@/components/ui/label/Label.vue';
-import { getMembers, Member } from '@/api/member';
+import { getMembers } from '@/api/member';
+import { Member } from '@shared/types/member';
 
 const roles = ref<Role[]>([])
 const activeRole = ref<Role | null>(null)
@@ -116,16 +117,18 @@ async function handleCreateGroup() {
     }
 }
 
-function handleAddMember() {
+async function handleAddMember() {
     //guard
     if (memberToAdd.value == null)
         return;
 
-    addMemberToRole(memberToAdd.value.member_id, activeRole.value.id);
+    await addMemberToRole(memberToAdd.value.member_id, activeRole.value.id);
+    roles.value = await getRoles();
 }
 
-function handleRemoveMember(memberId: number) {
+async function handleRemoveMember(memberId: number) {
     removeMemberFromRole(memberId, activeRole.value.id);
+    roles.value = await getRoles();
 }
 
 async function handleDeleteRole() {
@@ -193,7 +196,7 @@ onMounted(async () => {
                     </ul>
                 </div>
                 <DialogFooter>
-                    <Button @click="handleDeleteRole">Delete Group</Button>
+                    <!-- <Button @click="handleDeleteRole">Delete Group</Button> -->
                 </DialogFooter>
             </DialogContent>
         </Dialog>
@@ -232,7 +235,7 @@ onMounted(async () => {
         <div class="max-w-5xl mx-auto">
             <div class="flex items-center justify-between my-4">
                 <p>Groups</p>
-                <Button @click="showCreateGroupDialog = true">+ Add New Group</Button>
+                <!-- <Button @click="showCreateGroupDialog = true">+ Add New Group</Button> -->
             </div>
             <div class="grid grid-cols-3 gap-5">
                 <Card v-for="value in roles" :key="value.id" @click="activeRole = value; showDialog = true"