diff --git a/test/e2e/hydration.spec.ts b/test/e2e/hydration.spec.ts
index b75f9e4f1f..047489fe46 100644
--- a/test/e2e/hydration.spec.ts
+++ b/test/e2e/hydration.spec.ts
@@ -9,6 +9,7 @@ const PAGES = [
   '/compare',
   '/search',
   '/package/nuxt',
+  '/package-code/empathic/v/2.0.0',
   '/search?q=vue',
 ] as const
 
diff --git a/test/e2e/package-code.spec.ts b/test/e2e/package-code.spec.ts
new file mode 100644
index 0000000000..f98718e551
--- /dev/null
+++ b/test/e2e/package-code.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from './test-utils'
+
+test.describe('Package Code Viewer', () => {
+  test('/package-code/empathic/v/2.0.0 loads correctly', async ({ page, goto }) => {
+    await goto('/package-code/empathic/v/2.0.0', { waitUntil: 'domcontentloaded' })
+
+    // Verify page heading or package name container
+    await expect(page.locator('h1')).toContainText('empathic')
+
+    // Verify the specific version is rendered
+    await expect(
+      page.locator('[data-testid="version-selector-button"]').locator('text=2.0.0'),
+    ).toBeVisible()
+
+    const codePage = page.locator('#code-page-container')
+
+    await expect(
+      codePage.locator('aside').getByRole('link', { name: 'package.json', exact: true }),
+    ).toBeVisible()
+
+    const directoryListing = codePage.getByRole('table')
+    await expect(directoryListing).toBeVisible()
+
+    await expect(
+      directoryListing.locator('a[href="/package-code/empathic/v/2.0.0/package.json"]'),
+    ).toBeVisible()
+  })
+})