diff --git a/src/lib/apis/groups/index.ts b/src/lib/apis/groups/index.ts
new file mode 100644
index 000000000..a846fc46f
--- /dev/null
+++ b/src/lib/apis/groups/index.ts
@@ -0,0 +1,163 @@
+import { WEBUI_API_BASE_URL } from '$lib/constants';
+
+export const createNewGroup = async (token: string, group: object) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/groups/create`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			...group
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getGroups = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/groups/`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+
+export const getGroupById = async (token: string, id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/groups/id/${id}`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const updateGroupById = async (token: string, id: string, group: object) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/groups/id/${id}/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			...group
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const deleteGroupById = async (token: string, id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/groups/id/${id}/delete`, {
+		method: 'DELETE',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index 099517b50..7e3977755 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -22,6 +22,7 @@
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import GroupItem from './Groups/GroupItem.svelte';
 	import AddGroupModal from './Groups/AddGroupModal.svelte';
+	import { createNewGroup, getGroups } from '$lib/apis/groups';
 
 	const i18n = getContext('i18n');
 
@@ -51,56 +52,58 @@
 		if ($user?.role !== 'admin') {
 			await goto('/');
 		} else {
-			groups = [
-				{
-					id: '1',
-					name: 'Group A',
-					description: 'Group A description',
-					permissions: {
-						model: {
-							enable_filter: false, // boolean
-							ids: [], // array of strings
-							default_id: null // null or string
-						},
-						workspace: {
-							models: false, // boolean
-							knowledge: false, // boolean
-							prompts: false // boolean
-						},
-						chat: {
-							delete: true, // boolean
-							edit: true, // boolean
-							temporary: true // boolean
-						}
-					},
-					user_ids: ['1', '2', '3'], // array of strings
-					admin_ids: ['1'] // array of strings
-				},
-				{
-					id: '2',
-					name: 'Moderators',
-					description: 'Moderators description',
-					permissions: {
-						model: {
-							enable_filter: false, // boolean
-							ids: [], // array of strings
-							default_id: null // null or string
-						},
-						workspace: {
-							models: false, // boolean
-							knowledge: false, // boolean
-							prompts: false // boolean
-						},
-						chat: {
-							delete: true, // boolean
-							edit: true, // boolean
-							temporary: true // boolean
-						}
-					},
-					user_ids: ['1', '5', '6'], // array of strings
-					admin_ids: ['1'] // array of strings
-				}
-			];
+			groups = await getGroups(localStorage.token);
+
+			// [
+			// {
+			// 	id: '1',
+			// 	name: 'Group A',
+			// 	description: 'Group A description',
+			// 	permissions: {
+			// 		model: {
+			// 			enable_filter: false, // boolean
+			// 			ids: [], // array of strings
+			// 			default_id: null // null or string
+			// 		},
+			// 		workspace: {
+			// 			models: false, // boolean
+			// 			knowledge: false, // boolean
+			// 			prompts: false // boolean
+			// 		},
+			// 		chat: {
+			// 			delete: true, // boolean
+			// 			edit: true, // boolean
+			// 			temporary: true // boolean
+			// 		}
+			// 	},
+			// 	user_ids: ['1', '2', '3'], // array of strings
+			// 	admin_ids: ['1'] // array of strings
+			// },
+			// {
+			// 	id: '2',
+			// 	name: 'Moderators',
+			// 	description: 'Moderators description',
+			// 	permissions: {
+			// 		model: {
+			// 			enable_filter: false, // boolean
+			// 			ids: [], // array of strings
+			// 			default_id: null // null or string
+			// 		},
+			// 		workspace: {
+			// 			models: false, // boolean
+			// 			knowledge: false, // boolean
+			// 			prompts: false // boolean
+			// 		},
+			// 		chat: {
+			// 			delete: true, // boolean
+			// 			edit: true, // boolean
+			// 			temporary: true // boolean
+			// 		}
+			// 	},
+			// 	user_ids: ['1', '5', '6'], // array of strings
+			// 	admin_ids: ['1'] // array of strings
+			// }
+			// ];
 		}
 		loaded = true;
 	});
diff --git a/src/lib/components/admin/Users/Groups/AddGroupModal.svelte b/src/lib/components/admin/Users/Groups/AddGroupModal.svelte
index b2c202bf2..4001d218b 100644
--- a/src/lib/components/admin/Users/Groups/AddGroupModal.svelte
+++ b/src/lib/components/admin/Users/Groups/AddGroupModal.svelte
@@ -19,8 +19,7 @@
 
 		const group = {
 			name,
-			description,
-			user_ids: userIds
+			description
 		};
 
 		await onSubmit(group);