diff --git a/frontend/__tests__/e2e/pages/ChapterDetails.spec.ts b/frontend/__tests__/e2e/pages/ChapterDetails.spec.ts
new file mode 100644
index 0000000000..c9f019dbc7
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/ChapterDetails.spec.ts
@@ -0,0 +1,51 @@
+import { test, expect } from '@playwright/test'
+import { mockChapterDetailsData } from '@unit/data/mockChapterDetailsData'
+
+test.describe('Chapter Details Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/graphql/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        json: { data: { chapter: mockChapterDetailsData } },
+      })
+    })
+    await page.goto('/chapters/test-chapter')
+  })
+
+  test('should have a heading and summary', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'OWASP Test Chapter' })).toBeVisible()
+    await expect(page.getByText('This is a test chapter summary.')).toBeVisible()
+  })
+
+  test('should have chapter details block', async ({ page }) => {
+    await expect(page.getByText('Location: Test City, Test')).toBeVisible()
+    await expect(page.getByText('Region: Test Region')).toBeVisible()
+    await expect(page.getByRole('link', { name: 'https://owasp.org/test-chapter' })).toBeVisible()
+  })
+
+  test('should have map with geolocation', async ({ page }) => {
+    await expect(page.locator('#chapter-map')).toBeVisible()
+    await expect(page.locator('#chapter-map').locator('img').nth(1)).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Zoom in' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Zoom out' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Marker' })).toBeVisible()
+  })
+
+  test('should have top contributors', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
+    await expect(page.getByText('Contributor 1')).toBeVisible()
+    await expect(page.getByText('10 Contributions')).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Contributor 2' })).toBeVisible()
+    await expect(page.getByText('Contributor 2')).toBeVisible()
+    await expect(page.getByText('8 Contributions')).toBeVisible()
+  })
+
+  test('toggle top contributors', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'Show more' })).toBeVisible()
+    await page.getByRole('button', { name: 'Show more' }).click()
+    await expect(page.getByRole('button', { name: 'Show less' })).toBeVisible()
+    await page.getByRole('button', { name: 'Show less' }).click()
+    await expect(page.getByRole('button', { name: 'Show more' })).toBeVisible()
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/Chapters.spec.tsx b/frontend/__tests__/e2e/pages/Chapters.spec.tsx
new file mode 100644
index 0000000000..afd1374ba9
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/Chapters.spec.tsx
@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test'
+import { mockChapterData } from '@unit/data/mockChapterData'
+
+test.describe('Chapters Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          hits: mockChapterData.chapters,
+          nbPages: 2,
+        }),
+      })
+    })
+    await page.goto('/chapters')
+  })
+
+  test('renders chapter data correctly', async ({ page }) => {
+    await expect(page.getByRole('link', { name: 'Chapter 1' })).toBeVisible()
+    await expect(page.getByText('This is a summary of Chapter')).toBeVisible()
+    await expect(page.getByRole('link', { name: "Isanori Sakanashi's avatar" })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'View Details' })).toBeVisible()
+  })
+
+  test('displays "No chapters found" when there are no chapters', async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({ hits: [], nbPages: 0 }),
+      })
+    })
+    await page.goto('/chapters')
+    await expect(page.getByText('No chapters found')).toBeVisible()
+  })
+
+  test('handles page change correctly', async ({ page }) => {
+    const nextPageButton = await page.getByRole('button', { name: '2' })
+    await nextPageButton.click()
+    expect(await page.url()).toContain('page=2')
+  })
+
+  test('opens window on View Details button click', async ({ page }) => {
+    const contributeButton = await page.getByRole('button', { name: 'View Details' })
+    await contributeButton.click()
+    expect(await page.url()).toContain('chapters/chapter_1')
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/CommitteeDetails.spec.ts b/frontend/__tests__/e2e/pages/CommitteeDetails.spec.ts
new file mode 100644
index 0000000000..369f07789d
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/CommitteeDetails.spec.ts
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test'
+import { mockCommitteeDetailsData } from '@unit/data/mockCommitteeDetailsData'
+
+test.describe('Committee Details Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/graphql/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        json: { data: mockCommitteeDetailsData },
+      })
+    })
+    await page.goto('/committees/test-committee')
+  })
+
+  test('should have a heading and summary', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Test Committee' })).toBeVisible()
+    await expect(page.getByText('This is a test committee')).toBeVisible()
+  })
+
+  test('should have committee details block', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Committee Details' })).toBeVisible()
+    await expect(page.getByText('Last Updated: Dec 13, 2024')).toBeVisible()
+    await expect(page.getByText('Leaders: Leader 1, Leader 2')).toBeVisible()
+    await expect(page.getByRole('link', { name: 'https://owasp.org/test-committee' })).toBeVisible()
+  })
+
+  test('should have top contributors', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
+    await expect(page.getByText('Contributor 1')).toBeVisible()
+    await expect(page.getByText('2157 Contributions')).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Contributor 2' })).toBeVisible()
+    await expect(page.getByText('Contributor 2')).toBeVisible()
+    await expect(page.getByText('309 Contributions')).toBeVisible()
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/Committees.spec.ts b/frontend/__tests__/e2e/pages/Committees.spec.ts
new file mode 100644
index 0000000000..4de4ed6cd2
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/Committees.spec.ts
@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test'
+import { mockCommitteeData } from '@unit/data/mockCommitteeData'
+
+test.describe('Committees Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          hits: mockCommitteeData.committees,
+          nbPages: 2,
+        }),
+      })
+    })
+    await page.goto('/committees')
+  })
+
+  test('renders committee data correctly', async ({ page }) => {
+    await expect(page.getByRole('link', { name: 'Committee 1' })).toBeVisible()
+    await expect(page.getByText('This is a summary of Committee 1')).toBeVisible()
+    await expect(page.getByRole('link', { name: "Sam Stepanyan's avatar" })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Learn more about Committee' })).toBeVisible()
+  })
+
+  test('displays "No committees found" when there are no committees', async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({ hits: [], nbPages: 0 }),
+      })
+    })
+    await page.goto('/committees')
+    await expect(page.getByText('No committees found')).toBeVisible()
+  })
+
+  test('handles page change correctly', async ({ page }) => {
+    const nextPageButton = await page.getByRole('button', { name: '2' })
+    await nextPageButton.click()
+    expect(await page.url()).toContain('page=2')
+  })
+
+  test('opens window on View Details button click', async ({ page }) => {
+    const contributeButton = await page.getByRole('button', { name: 'Learn more about Committee' })
+    await contributeButton.click()
+    expect(await page.url()).toContain('committees/committee_1')
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/Contribute.spec.ts b/frontend/__tests__/e2e/pages/Contribute.spec.ts
new file mode 100644
index 0000000000..6ed0e604d7
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/Contribute.spec.ts
@@ -0,0 +1,69 @@
+import { test, expect } from '@playwright/test'
+import { mockContributeData } from '@unit/data/mockContributeData'
+
+test.describe('Contribute Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          hits: mockContributeData.issues,
+          nbPages: 2,
+        }),
+      })
+    })
+    await page.goto('/projects/contribute')
+  })
+
+  test('renders issue data correctly', async ({ page }) => {
+    await expect(page.getByRole('link', { name: 'Contribution 1' })).toBeVisible()
+    await expect(page.getByText('2 months ago')).toBeVisible()
+    await expect(page.getByRole('link', { name: 'Owasp Nest' })).toBeVisible()
+    await expect(page.getByText('This is a summary of Contribution 1')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Read More' })).toBeVisible()
+  })
+
+  test('displays "No Issues found" when there are no issues', async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({ hits: [], totalPages: 0 }),
+      })
+    })
+    await page.goto('/projects/contribute')
+    await expect(page.getByText('No issues found')).toBeVisible()
+  })
+
+  test('handles page change correctly', async ({ page }) => {
+    const nextPageButton = await page.getByRole('button', { name: '2' })
+    await nextPageButton.click()
+    expect(await page.url()).toContain('page=2')
+  })
+
+  test('opens dialog on View Details button click', async ({ page }) => {
+    const contributeButton = await page.getByRole('button', { name: 'Read More' })
+    await expect(contributeButton).toBeVisible()
+    await contributeButton.click()
+    await expect(
+      page
+        .locator('[id="dialog\\:\\:r3\\:\\:positioner"]')
+        .getByText('Contribution 1', { exact: true })
+    ).toBeVisible()
+    await expect(
+      page.getByText(
+        'The issue summary and the recommended steps to address it have been generated by AI'
+      )
+    ).toBeVisible()
+    await expect(page.getByRole('link', { name: 'View Issue' })).toBeVisible()
+  })
+
+  test('closes dialog on close button click', async ({ page }) => {
+    const contributeButton = await page.getByRole('button', { name: 'Read More' })
+    await expect(contributeButton).toBeVisible()
+    await contributeButton.click()
+    const CloseButton = await page.getByRole('button', { name: 'close-modal' })
+    await expect(CloseButton).toBeVisible()
+    await CloseButton.click()
+    await expect(contributeButton).toBeVisible()
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/home.spec.ts b/frontend/__tests__/e2e/pages/Home.spec.ts
similarity index 100%
rename from frontend/__tests__/e2e/pages/home.spec.ts
rename to frontend/__tests__/e2e/pages/Home.spec.ts
diff --git a/frontend/__tests__/e2e/pages/ProjectDetails.spec.ts b/frontend/__tests__/e2e/pages/ProjectDetails.spec.ts
new file mode 100644
index 0000000000..3a1d2b07cd
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/ProjectDetails.spec.ts
@@ -0,0 +1,103 @@
+import { test, expect } from '@playwright/test'
+import { mockProjectDetailsData } from '@unit/data/mockProjectDetailsData'
+
+test.describe('Project Details Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/graphql/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        json: { data: mockProjectDetailsData },
+      })
+    })
+    await page.goto('/projects/test-project')
+  })
+
+  test('should have a heading and summary', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Test Project' })).toBeVisible()
+    await expect(
+      page.getByText('An example project showcasing GraphQL and Django integration.')
+    ).toBeVisible()
+  })
+
+  test('should have project details block', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Project Details' })).toBeVisible()
+    await expect(page.getByText('Last Updated: Feb 7, 2025')).toBeVisible()
+    await expect(page.getByText('Level: Lab')).toBeVisible()
+    await expect(page.getByText('Project Leaders: alice, bob')).toBeVisible()
+    await expect(page.getByText('URL: https://github.com/')).toBeVisible()
+  })
+
+  test('should have project statics block', async ({ page }) => {
+    await expect(page.getByText('2.2K Stars')).toBeVisible()
+    await expect(page.getByText('10 Forks')).toBeVisible()
+    await expect(page.getByText('1.2K Contributors')).toBeVisible()
+    await expect(page.getByText('10 Issues')).toBeVisible()
+    await expect(page.getByText('3 Repositories')).toBeVisible()
+  })
+
+  test('should have project topics', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Topics' })).toBeVisible()
+    await expect(page.getByText('graphql', { exact: true })).toBeVisible()
+    await expect(page.getByText('django', { exact: true })).toBeVisible()
+    await expect(page.getByText('backend')).toBeVisible()
+  })
+
+  test('should have project languages', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Languages' })).toBeVisible()
+    await expect(page.getByText('Python', { exact: true })).toBeVisible()
+    await expect(page.getByText('GraphQL', { exact: true })).toBeVisible()
+    await expect(page.getByText('JavaScript', { exact: true })).toBeVisible()
+  })
+
+  test('should have top contributors', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
+    await expect(page.getByText('Contributor 1')).toBeVisible()
+    await expect(page.getByText('30 Contributions')).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Contributor 2' })).toBeVisible()
+    await expect(page.getByText('Contributor 2')).toBeVisible()
+    await expect(page.getByText('29 Contributions')).toBeVisible()
+  })
+
+  test('toggle top contributors', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'Show more' })).toBeVisible()
+    await page.getByRole('button', { name: 'Show more' }).click()
+    await expect(page.getByRole('button', { name: 'Show less' })).toBeVisible()
+    await page.getByRole('button', { name: 'Show less' }).click()
+    await expect(page.getByRole('button', { name: 'Show more' })).toBeVisible()
+  })
+
+  test('should have project recent issues', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Fix authentication bug' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Dave Debugger' })).toBeVisible()
+    await expect(page.getByText('Dave Debugger')).toBeVisible()
+    await expect(page.getByText('Feb 5, 2025')).toBeVisible()
+    await expect(page.getByText('5 comments')).toBeVisible()
+  })
+
+  test('should have project recent releases', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Recent Releases' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'V1.2.0' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Charlie Dev' })).toBeVisible()
+    await expect(page.getByText('Charlie Dev')).toBeVisible()
+    await expect(page.getByText('Jan 20, 2025')).toBeVisible()
+  })
+
+  test('should have project repositories', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Repositories' })).toBeVisible()
+    await expect(page.getByText('Repo One')).toBeVisible()
+    await expect(page.getByText('Stars95')).toBeVisible()
+    await expect(page.getByText('Forks12')).toBeVisible()
+    await expect(page.getByText('Contributors40')).toBeVisible()
+    await expect(page.getByText('Issues6')).toBeVisible()
+    await expect(page.getByText('Repo Two')).toBeVisible()
+    await expect(page.getByText('Stars60')).toBeVisible()
+    await expect(page.getByText('Forks8')).toBeVisible()
+    await expect(page.getByText('Contributors30')).toBeVisible()
+    await expect(page.getByText('Issues3', { exact: true })).toBeVisible()
+
+    await page.getByText('Repo One').click()
+    expect(page.url()).toContain('repositories/repo-1')
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/Projects.spec.ts b/frontend/__tests__/e2e/pages/Projects.spec.ts
new file mode 100644
index 0000000000..2baba783ef
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/Projects.spec.ts
@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test'
+import mockProjectData from '@unit/data/mockProjectData'
+
+test.describe('Projects Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          hits: mockProjectData.projects,
+          nbPages: 2,
+        }),
+      })
+    })
+    await page.goto('/projects')
+  })
+
+  test('renders project data correctly', async ({ page }) => {
+    await expect(page.getByRole('link', { name: 'Project 1' })).toBeVisible()
+    await expect(page.getByText('This is a summary of Project 1')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'View Details' })).toBeVisible()
+  })
+
+  test('displays "No Projects found" when there are no projects', async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({ hits: [], nbPages: 0 }),
+      })
+    })
+    await page.goto('/projects')
+    await expect(page.getByText('No projects found')).toBeVisible()
+  })
+
+  test('handles page change correctly', async ({ page }) => {
+    const nextPageButton = await page.getByRole('button', { name: '2' })
+    await nextPageButton.click()
+    expect(await page.url()).toContain('page=2')
+  })
+
+  test('opens window on View Details button click', async ({ page }) => {
+    const contributeButton = await page.getByRole('button', { name: 'View Details' })
+    await contributeButton.click()
+    expect(await page.url()).toContain('projects/project_1')
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/RepositoryDetails.spec.ts b/frontend/__tests__/e2e/pages/RepositoryDetails.spec.ts
new file mode 100644
index 0000000000..216822fa1d
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/RepositoryDetails.spec.ts
@@ -0,0 +1,81 @@
+import { test, expect } from '@playwright/test'
+import { mockRepositoryData } from '@unit/data/mockRepositoryData'
+
+test.describe('Repository Details Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/graphql/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        json: { data: mockRepositoryData },
+      })
+    })
+    await page.goto('/projects/test-project/repositories/test-repository')
+  })
+
+  test('should have a heading and summary', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Test Repo' })).toBeVisible()
+    await expect(page.getByText('A sample test repository')).toBeVisible()
+  })
+
+  test('should have repository details block', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Repository Details' })).toBeVisible()
+    await expect(page.getByText('Last Updated: Jan 1, 2024')).toBeVisible()
+    await expect(page.getByText('License: MIT')).toBeVisible()
+    await expect(page.getByText('Size: 1200 KB')).toBeVisible()
+    await expect(page.getByRole('link', { name: 'https://github.com/test-repo' })).toBeVisible()
+  })
+
+  test('should have statics block', async ({ page }) => {
+    await expect(page.getByText('50K Stars')).toBeVisible()
+    await expect(page.getByText('3K Forks')).toBeVisible()
+    await expect(page.getByText('5 Contributors')).toBeVisible()
+    await expect(page.getByText('2 Issues')).toBeVisible()
+    await expect(page.getByText('10 Commits')).toBeVisible()
+  })
+
+  test('should have topics', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Topics' })).toBeVisible()
+    await expect(page.getByText('JavaScript', { exact: true })).toBeVisible()
+    await expect(page.getByText('TypeScript', { exact: true })).toBeVisible()
+  })
+
+  test('should have languages', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Languages' })).toBeVisible()
+    await expect(page.getByText('web', { exact: true })).toBeVisible()
+    await expect(page.getByText('security', { exact: true })).toBeVisible()
+  })
+  test('should have top contributors', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
+    await expect(page.getByText('Contributor 1')).toBeVisible()
+    await expect(page.getByText('30 Contributions')).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Contributor 2' })).toBeVisible()
+    await expect(page.getByText('Contributor 2')).toBeVisible()
+    await expect(page.getByText('29 Contributions')).toBeVisible()
+  })
+
+  test('toggle top contributors', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'Show more' })).toBeVisible()
+    await page.getByRole('button', { name: 'Show more' }).click()
+    await expect(page.getByRole('button', { name: 'Show less' })).toBeVisible()
+    await page.getByRole('button', { name: 'Show less' }).click()
+    await expect(page.getByRole('button', { name: 'Show more' })).toBeVisible()
+  })
+
+  test('should have recent issues', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Bug fix required' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Test User 1' })).toBeVisible()
+    await expect(page.getByText('Test User 2')).toBeVisible()
+    await expect(page.getByText('Jan 2, 2024')).toBeVisible()
+    await expect(page.getByText('4 comments')).toBeVisible()
+  })
+
+  test('should have recent releases', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Recent Releases' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'v1.0.0' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Test User 2' })).toBeVisible()
+    await expect(page.getByText('Test User 2')).toBeVisible()
+    await expect(page.getByText('Jan 1, 2024', { exact: true })).toBeVisible()
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/UserDetails.spec.ts b/frontend/__tests__/e2e/pages/UserDetails.spec.ts
new file mode 100644
index 0000000000..9efd7aedf0
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/UserDetails.spec.ts
@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+import { mockUserDetailsData } from '@unit/data/mockUserDetails'
+
+test.describe('User Details Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/graphql/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        json: { data: mockUserDetailsData },
+      })
+    })
+    await page.goto('community/users/test-user')
+  })
+
+  test('should have a user name and avatar', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Test User' })).toBeVisible()
+    await expect(page.getByRole('link', { name: '@testuser' })).toBeVisible()
+    await expect(page.getByRole('img', { name: 'Test User' })).toBeVisible()
+  })
+
+  test('should have user details', async ({ page }) => {
+    await expect(page.getByText('Test Company')).toBeVisible()
+    await expect(page.getByText('Test Location')).toBeVisible()
+    await expect(page.getByRole('link', { name: 'testuser@example.com' })).toBeVisible()
+  })
+
+  test('should have recent issues', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
+    await expect(page.getByRole('link', { name: 'Test Issue' })).toBeVisible()
+    await expect(page.getByText('8/7/2024').first()).toBeVisible()
+  })
+
+  test('should have recent releases', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Recent Releases' })).toBeVisible()
+    await expect(page.getByRole('link', { name: 'v1.0.0' })).toBeVisible()
+    await expect(page.getByRole('link', { name: 'testuser/test-repo' }).nth(1)).toBeVisible()
+    await expect(page.getByText('8/7/2024').first()).toBeVisible()
+  })
+})
diff --git a/frontend/__tests__/e2e/pages/Users.spec.tsx b/frontend/__tests__/e2e/pages/Users.spec.tsx
new file mode 100644
index 0000000000..3870f7da6d
--- /dev/null
+++ b/frontend/__tests__/e2e/pages/Users.spec.tsx
@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test'
+import { mockUserData } from '@unit/data/mockUserData'
+
+test.describe('Users Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          hits: mockUserData.users,
+          nbPages: 2,
+        }),
+      })
+    })
+    await page.goto('/community/users')
+  })
+
+  test('renders user data correctly', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'John Doe John Doe OWASP View' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Jane Smith Jane Smith' })).toBeVisible()
+  })
+
+  test('displays "No user found" when there are no users', async ({ page }) => {
+    await page.route('**/idx/', async (route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({ hits: [], nbPages: 0 }),
+      })
+    })
+    await page.goto('/community/users')
+    await expect(page.getByText('No Users Found')).toBeVisible()
+  })
+
+  test('handles page change correctly', async ({ page }) => {
+    const nextPageButton = await page.getByRole('button', { name: '2' })
+    await nextPageButton.click()
+    expect(await page.url()).toContain('page=2')
+  })
+
+  test('opens window on button click', async ({ page }) => {
+    const userButton = await page.getByRole('button', {
+      name: 'John Doe John Doe OWASP View',
+    })
+    await userButton.click()
+    expect(await page.url()).toContain('community/users/user_1')
+  })
+})