diff --git a/backend/internal/service/test_service.go b/backend/internal/service/test_service.go
index 4e43a9c..a57da12 100644
--- a/backend/internal/service/test_service.go
+++ b/backend/internal/service/test_service.go
@@ -56,6 +56,30 @@ func (s *TestService) SeedDatabase() error {
 			}
 		}
 
+		userGroups := []model.UserGroup{
+			{
+				Base: model.Base{
+					ID: "4110f814-56f1-4b28-8998-752b69bc97c0e",
+				},
+				Name:         "developers",
+				FriendlyName: "Developers",
+				Users:        []model.User{users[0], users[1]},
+			},
+			{
+				Base: model.Base{
+					ID: "adab18bf-f89d-4087-9ee1-70ff15b48211",
+				},
+				Name:         "designers",
+				FriendlyName: "Designers",
+				Users:        []model.User{users[0]},
+			},
+		}
+		for _, group := range userGroups {
+			if err := tx.Create(&group).Error; err != nil {
+				return err
+			}
+		}
+
 		oidcClients := []model.OidcClient{
 			{
 				Base: model.Base{
diff --git a/frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte b/frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte
index ddbf9b7..0d4fb4e 100644
--- a/frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte
+++ b/frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte
@@ -23,7 +23,7 @@
 		let success = true;
 		await userGroupService
 			.update(userGroup.id, updatedUserGroup)
-			.then(() => toast.success('User Group updated successfully'))
+			.then(() => toast.success('User group updated successfully'))
 			.catch((e) => {
 				axiosErrorToast(e);
 				success = false;
diff --git a/frontend/tests/data.ts b/frontend/tests/data.ts
index ba78262..16ccc6e 100644
--- a/frontend/tests/data.ts
+++ b/frontend/tests/data.ts
@@ -38,3 +38,20 @@ export const oidcClients = {
 		secondCallbackUrl: 'http://pingvin.share/auth/callback2'
 	}
 };
+
+export const userGroups = {
+	developers: {
+		id: '4110f814-56f1-4b28-8998-752b69bc97c0e',
+		friendlyName: 'Developers',
+		name: 'developers'
+	},
+	designers: {
+		id: 'adab18bf-f89d-4087-9ee1-70ff15b48211',
+		friendlyName: 'Designers',
+		name: 'designers'
+	},
+	humanResources: {
+		friendlyName: 'Human Resources',
+		name: 'human_resources'
+	}
+};
diff --git a/frontend/tests/user-group.spec.ts b/frontend/tests/user-group.spec.ts
new file mode 100644
index 0000000..98406b0
--- /dev/null
+++ b/frontend/tests/user-group.spec.ts
@@ -0,0 +1,74 @@
+import test, { expect } from '@playwright/test';
+import { userGroups, users } from './data';
+import { cleanupBackend } from './utils/cleanup.util';
+
+test.beforeEach(cleanupBackend);
+
+test('Create user group', async ({ page }) => {
+	await page.goto('/settings/admin/user-groups');
+	const group = userGroups.humanResources;
+
+	await page.getByRole('button', { name: 'Add Group' }).click();
+	await page.getByLabel('Friendly Name').fill(group.friendlyName);
+
+	await page.getByRole('button', { name: 'Save' }).click();
+
+	await expect(page.getByRole('status')).toHaveText('User group created successfully');
+	expect(page.url()).toMatch(/\/settings\/admin\/user-groups\/[a-f0-9-]+/);
+
+	await expect(page.getByLabel('Friendly Name')).toHaveValue(group.friendlyName);
+	await expect(page.getByLabel('Name', { exact: true })).toHaveValue(group.name);
+});
+
+test('Edit user group', async ({ page }) => {
+	await page.goto('/settings/admin/user-groups');
+	const group = userGroups.developers;
+
+	await page.getByRole('row', { name: group.name }).getByRole('button').click();
+	await page.getByRole('menuitem', { name: 'Edit' }).click();
+
+	await page.getByLabel('Friendly Name').fill('Developers updated');
+
+	await expect(page.getByLabel('Name', { exact: true })).toHaveValue(group.name);
+
+	await page.getByLabel('Name', { exact: true }).fill('developers_updated');
+
+	await page.getByRole('button', { name: 'Save' }).nth(0).click();
+
+	await expect(page.getByRole('status')).toHaveText('User group updated successfully');
+	await expect(page.getByLabel('Friendly Name')).toHaveValue('Developers updated');
+	await expect(page.getByLabel('Name', { exact: true })).toHaveValue('developers_updated');
+});
+
+test('Update user group users', async ({ page }) => {
+	const group = userGroups.designers;
+	await page.goto(`/settings/admin/user-groups/${group.id}`);
+
+	await page.getByRole('row', { name: users.tim.email }).getByRole('checkbox').click();
+	await page.getByRole('row', { name: users.craig.email }).getByRole('checkbox').click();
+
+	await page.getByRole('button', { name: 'Save' }).nth(1).click();
+
+	await expect(page.getByRole('status')).toHaveText('Users updated successfully');
+
+	await page.reload();
+
+	await expect(
+		page.getByRole('row', { name: users.tim.email }).getByRole('checkbox')
+	).toHaveAttribute('data-state', 'unchecked');
+	await expect(
+		page.getByRole('row', { name: users.craig.email }).getByRole('checkbox')
+	).toHaveAttribute('data-state', 'checked');
+});
+
+test('Delete user group', async ({ page }) => {
+	const group = userGroups.developers;
+	await page.goto('/settings/admin/user-groups');
+
+	await page.getByRole('row', { name: group.name }).getByRole('button').click();
+	await page.getByRole('menuitem', { name: 'Delete' }).click();
+	await page.getByRole('button', { name: 'Delete' }).click();
+
+	await expect(page.getByRole('status')).toHaveText('User group deleted successfully');
+	await expect(page.getByRole('row', { name: group.name })).not.toBeVisible();
+});