diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
index 863b0d9..4749c88 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
@@ -28,6 +28,15 @@ export const actions: Actions = {
   addCollaborator: async ({ request, fetch, cookies, params }) => {
     const data = await request.formData();
 
+    const userData = await fetch(`${API_BASE_PREFIX}/user?username=eq.${data.get("username")}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`,
+        Accept: "application/vnd.pgrst.object+json"
+      }
+    });
+
     const res = await fetch(`${API_BASE_PREFIX}/collab`, {
       method: "POST",
       headers: {
@@ -36,7 +45,7 @@ export const actions: Actions = {
       },
       body: JSON.stringify({
         website_id: params.websiteId,
-        user_id: data.get("user-id"),
+        user_id: (await userData.json()).id,
         permission_level: data.get("permission-level")
       })
     });
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
index e83afcf..f8f8a03 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
@@ -35,15 +35,8 @@
         }}
       >
         <label>
-          User id:
-          <input
-            type="text"
-            name="user-id"
-            minlength="36"
-            maxlength="36"
-            placeholder="00000000-0000-0000-0000-000000000000"
-            required
-          />
+          Username:
+          <input type="text" name="username" minlength="3" maxlength="16" required />
         </label>
 
         <label>
diff --git a/web-app/tests/website.spec.ts b/web-app/tests/website.spec.ts
index db23d80..a117ab7 100644
--- a/web-app/tests/website.spec.ts
+++ b/web-app/tests/website.spec.ts
@@ -172,11 +172,32 @@ test.describe("Update website", () => {
   });
 
   test.describe("Collaborators", () => {
-    test("Add collaborator", async ({ authenticatedPage: page }) => {});
+    test("Add collaborator", async ({ authenticatedPage: page }) => {
+      await page.getByRole("link", { name: "Blog" }).click();
+      await page.getByRole("link", { name: "Collaborators" }).click();
+      await page.getByRole("button", { name: "Add collaborator" }).click();
+      await page.getByLabel("Username:").click();
+      await page.getByLabel("Username:").fill(collabUsername);
+      await page.getByRole("button", { name: "Submit" }).click();
+      await expect(page.getByText("Successfully added")).toBeVisible();
+    });
 
-    test("Update collaborator", async ({ authenticatedPage: page }) => {});
+    test("Update collaborator", async ({ authenticatedPage: page }) => {
+      await page.getByRole("link", { name: "Blog" }).click();
+      await page.getByRole("link", { name: "Collaborators" }).click();
+      await page.getByRole("button", { name: "Update" }).click();
+      await page.getByRole("combobox").selectOption("20");
+      await page.getByRole("button", { name: "Update collaborator" }).click();
+      await expect(page.getByText("Successfully updated")).toBeVisible();
+    });
 
-    test("Delete collaborator", async ({ authenticatedPage: page }) => {});
+    test("Remove collaborator", async ({ authenticatedPage: page }) => {
+      await page.getByRole("link", { name: "Blog" }).click();
+      await page.getByRole("link", { name: "Collaborators" }).click();
+      await page.getByRole("button", { name: "Remove" }).click();
+      await page.getByRole("button", { name: "Remove collaborator" }).click();
+      await expect(page.getByText("Successfully removed")).toBeVisible();
+    });
   });
 });