diff --git a/integration/src/browser/join-community.spec.ts b/integration/src/browser/join-community.spec.ts
new file mode 100644
index 00000000..dfbb8581
--- /dev/null
+++ b/integration/src/browser/join-community.spec.ts
@@ -0,0 +1,50 @@
+import { expect, test } from './test';
+import { screenshot } from './utils';
+
+test.asALoggedInUser('can join a community', async ({ community, page }) => {
+  await page.goto(`/communities/${community.slug}`);
+
+  const joinButton = page.locator('button:has-text("Join community")');
+
+  await expect(joinButton).toBeVisible();
+  expect(await screenshot(page, joinButton)).toMatchSnapshot('join-button.png');
+
+  page.on('dialog', async (dialog) => await dialog.dismiss());
+  const [joinDialog] = await Promise.all([
+    page.waitForEvent('dialog'),
+    joinButton.click(),
+  ]);
+
+  await expect(joinDialog.message()).toContain(
+    `Thanks for your request to join ${community.name}`,
+  );
+});
+
+test.asAReturningUser(
+  'have to log in with ORCID',
+  async ({ community, page }) => {
+    await page.goto(`/communities/${community.slug}`);
+
+    await page.click('button:has-text("Join community")');
+
+    const dialog = page.locator('[role="dialog"]');
+
+    await expect(dialog).toContainText('You must be logged in');
+    expect(await screenshot(dialog)).toMatchSnapshot('log-in.png');
+  },
+);
+
+test.asACommunityMember(
+  'cannot join a community',
+  async ({ community, page }, { fixme }) => {
+    await page.goto(`/communities/${community.slug}`);
+
+    const joinButton = page.locator('button:has-text("Join community")');
+
+    await expect(page.locator('body')).toContainText(community.name);
+
+    fixme(true, '"Join community" button is still shown to members');
+
+    await expect(joinButton).not.toBeVisible();
+  },
+);
diff --git a/integration/src/browser/join-community.spec.ts-snapshots/join-button-Desktop-Chrome-linux.png b/integration/src/browser/join-community.spec.ts-snapshots/join-button-Desktop-Chrome-linux.png
new file mode 100644
index 00000000..fb298054
--- /dev/null
+++ b/integration/src/browser/join-community.spec.ts-snapshots/join-button-Desktop-Chrome-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:18aa02f60b61c2ff56bf6699840a7c50b1fc111a7b284c089fe4cad18ebc30c6
+size 167166
diff --git a/integration/src/browser/join-community.spec.ts-snapshots/join-button-iPhone-11-linux.png b/integration/src/browser/join-community.spec.ts-snapshots/join-button-iPhone-11-linux.png
new file mode 100644
index 00000000..97cef4b3
--- /dev/null
+++ b/integration/src/browser/join-community.spec.ts-snapshots/join-button-iPhone-11-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d02af85a68c5239b3fdb01bd67461f08750f61573d11be77fe7d4404b4d503a9
+size 297070
diff --git a/integration/src/browser/join-community.spec.ts-snapshots/log-in-Desktop-Chrome-linux.png b/integration/src/browser/join-community.spec.ts-snapshots/log-in-Desktop-Chrome-linux.png
new file mode 100644
index 00000000..0a11c132
--- /dev/null
+++ b/integration/src/browser/join-community.spec.ts-snapshots/log-in-Desktop-Chrome-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2979a7d645a3f5dfdbb2d4567d114e074a6b1f659962f15bd3d25bec763387a8
+size 41745
diff --git a/integration/src/browser/join-community.spec.ts-snapshots/log-in-iPhone-11-linux.png b/integration/src/browser/join-community.spec.ts-snapshots/log-in-iPhone-11-linux.png
new file mode 100644
index 00000000..d246243e
--- /dev/null
+++ b/integration/src/browser/join-community.spec.ts-snapshots/log-in-iPhone-11-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1732cc04b55d889af334d2397096034d1c24d0695b5edebc0e83093b741baac4
+size 132463