diff --git a/frontend/__tests__/unit/global-error.test.tsx b/frontend/__tests__/unit/global-error.test.tsx
index 9783dd9baf..b227e82f56 100644
--- a/frontend/__tests__/unit/global-error.test.tsx
+++ b/frontend/__tests__/unit/global-error.test.tsx
@@ -10,6 +10,7 @@ import GlobalError, {
   ErrorDisplay,
   ErrorWrapper,
   handleAppError,
+  SentryErrorFallback,
 } from 'app/global-error'
 
 // Mocks
@@ -221,3 +222,39 @@ describe('ErrorWrapper component', () => {
     shouldThrowError = false
   })
 })
+
+describe('SentryErrorFallback component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('captures exception and renders default 500 error display', () => {
+    const error = new Error('Boundary caught error')
+    render(<SentryErrorFallback error={error} />)
+
+    expect(Sentry.captureException).toHaveBeenCalledWith(error)
+    expect(screen.getByText('500')).toBeInTheDocument()
+    expect(screen.getByText('Server Error')).toBeInTheDocument()
+  })
+
+  test('uses custom errorConfig when provided', () => {
+    const error = new Error('Custom error')
+    const customConfig = { statusCode: 404, title: 'Custom Not Found', message: 'Custom message' }
+    render(<SentryErrorFallback error={error} errorConfig={customConfig} />)
+
+    expect(Sentry.captureException).toHaveBeenCalledWith(error)
+    expect(screen.getByText('404')).toBeInTheDocument()
+    expect(screen.getByText('Custom Not Found')).toBeInTheDocument()
+    expect(screen.getByText('Custom message')).toBeInTheDocument()
+  })
+
+  test('wraps non-Error value in Error before capturing', () => {
+    const nonError = 'string error'
+    render(<SentryErrorFallback error={nonError} />)
+
+    expect(Sentry.captureException).toHaveBeenCalledTimes(1)
+    const captured = (Sentry.captureException as jest.Mock).mock.calls[0][0]
+    expect(captured).toBeInstanceOf(Error)
+    expect(captured.message).toBe('string error')
+  })
+})
diff --git a/frontend/__tests__/unit/pages/BoardCandidatesPage.test.tsx b/frontend/__tests__/unit/pages/BoardCandidatesPage.test.tsx
new file mode 100644
index 0000000000..cbc9421ee7
--- /dev/null
+++ b/frontend/__tests__/unit/pages/BoardCandidatesPage.test.tsx
@@ -0,0 +1,195 @@
+import { useQuery, useApolloClient } from '@apollo/client/react'
+import { screen, waitFor } from '@testing-library/react'
+import { render } from 'wrappers/testUtil'
+import BoardCandidatesPage from 'app/board/[year]/candidates/page'
+import {
+  GetBoardCandidatesDocument,
+  GetMemberSnapshotDocument,
+} from 'types/__generated__/boardQueries.generated'
+
+jest.mock('@apollo/client/react', () => ({
+  ...jest.requireActual('@apollo/client/react'),
+  useQuery: jest.fn(),
+  useApolloClient: jest.fn(),
+}))
+
+jest.mock('next/navigation', () => ({
+  useParams: jest.fn(() => ({ year: '2025' })),
+}))
+
+jest.mock('app/global-error', () => ({
+  handleAppError: jest.fn(),
+  ErrorDisplay: ({ title, message }: { title: string; message: string }) => (
+    <div data-testid="error-display">
+      <span data-testid="error-title">{title}</span>
+      <span data-testid="error-message">{message}</span>
+    </div>
+  ),
+}))
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  // Mock uses img for simplicity in tests; next/image is not used in test DOM.
+  default: ({ src, alt }: { src: string; alt: string }) => (
+    // eslint-disable-next-line @next/next/no-img-element -- test mock
+    <img src={src} alt={alt} />
+  ),
+}))
+
+jest.mock('components/ContributionHeatmap', () => ({
+  __esModule: true,
+  default: () => <div data-testid="contribution-heatmap" />,
+}))
+
+const mockBoardData = {
+  boardOfDirectors: {
+    id: 'board-1',
+    year: 2025,
+    owaspUrl: 'https://owasp.org',
+    candidates: [
+      {
+        id: 'candidate-1',
+        memberName: 'Alice Smith',
+        memberEmail: 'alice@example.com',
+        description: 'Platform and security experience.',
+        member: {
+          id: 'user-1',
+          login: 'alice',
+          name: 'Alice Smith',
+          avatarUrl: 'https://example.com/avatar.png',
+          bio: 'Security lead.',
+          createdAt: 1609459200,
+          firstOwaspContributionAt: 1609459200,
+          isOwaspBoardMember: false,
+          isFormerOwaspStaff: false,
+          isGsocMentor: false,
+          linkedinPageId: '',
+        },
+      },
+    ],
+  },
+}
+
+const mockUseQuery = useQuery as unknown as jest.Mock
+const mockUseApolloClient = useApolloClient as unknown as jest.Mock
+
+describe('BoardCandidatesPage', () => {
+  beforeEach(() => {
+    mockUseApolloClient.mockReturnValue({
+      query: jest.fn().mockResolvedValue({ data: {} }),
+    })
+    mockUseQuery.mockImplementation(
+      (document: unknown, _options?: { variables?: Record<string, unknown> }) => {
+        if (document === GetBoardCandidatesDocument) {
+          return {
+            data: mockBoardData,
+            loading: false,
+            error: null,
+          }
+        }
+        if (document === GetMemberSnapshotDocument) {
+          return {
+            data: { memberSnapshot: null },
+            loading: false,
+            error: null,
+          }
+        }
+        return { data: null, loading: false, error: null }
+      }
+    )
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('renders loading state when query is loading', () => {
+    mockUseQuery.mockImplementation((document: unknown) => {
+      if (document === GetBoardCandidatesDocument) {
+        return { data: null, loading: true, error: null }
+      }
+      return { data: { memberSnapshot: null }, loading: false, error: null }
+    })
+
+    render(<BoardCandidatesPage />)
+
+    const loadingIndicators = screen.getAllByAltText('Loading indicator')
+    expect(loadingIndicators.length).toBeGreaterThan(0)
+  })
+
+  test('renders 404 when board data is missing', async () => {
+    mockUseQuery.mockImplementation((document: unknown) => {
+      if (document === GetBoardCandidatesDocument) {
+        return { data: null, loading: false, error: null }
+      }
+      return { data: { memberSnapshot: null }, loading: false, error: null }
+    })
+
+    render(<BoardCandidatesPage />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument()
+    })
+    expect(screen.getByTestId('error-title')).toHaveTextContent('Board not found')
+  })
+
+  test('renders page title and year when board exists', async () => {
+    render(<BoardCandidatesPage />)
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+        '2025 Board of Directors Candidates'
+      )
+    })
+  })
+
+  test('renders empty state when no candidates', async () => {
+    mockUseQuery.mockImplementation((document: unknown) => {
+      if (document === GetBoardCandidatesDocument) {
+        return {
+          data: {
+            boardOfDirectors: {
+              ...mockBoardData.boardOfDirectors,
+              candidates: [],
+            },
+          },
+          loading: false,
+          error: null,
+        }
+      }
+      return { data: { memberSnapshot: null }, loading: false, error: null }
+    })
+
+    render(<BoardCandidatesPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText(/No candidates found for 2025/)).toBeInTheDocument()
+    })
+  })
+
+  test('renders candidate cards when candidates exist', async () => {
+    render(<BoardCandidatesPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Alice Smith')).toBeInTheDocument()
+    })
+    expect(screen.getByText(/Platform and security experience/)).toBeInTheDocument()
+  })
+
+  test('calls handleAppError when board query errors', async () => {
+    const { handleAppError } = await import('app/global-error')
+    const graphQLError = new Error('GraphQL error')
+    mockUseQuery.mockImplementation((document: unknown) => {
+      if (document === GetBoardCandidatesDocument) {
+        return { data: null, loading: false, error: graphQLError }
+      }
+      return { data: { memberSnapshot: null }, loading: false, error: null }
+    })
+
+    render(<BoardCandidatesPage />)
+
+    await waitFor(() => {
+      expect(handleAppError).toHaveBeenCalledWith(graphQLError)
+    })
+  })
+})
diff --git a/frontend/__tests__/unit/pages/UserDetails.test.tsx b/frontend/__tests__/unit/pages/UserDetails.test.tsx
index fa5cda726a..d9a512d963 100644
--- a/frontend/__tests__/unit/pages/UserDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/UserDetails.test.tsx
@@ -4,7 +4,7 @@ import { mockUserDetailsData } from '@mockData/mockUserDetails'
 import { screen, waitFor } from '@testing-library/react'
 import { render } from 'wrappers/testUtil'
 import '@testing-library/jest-dom'
-import UserDetailsPage from 'app/members/[memberKey]/page'
+import UserDetailsPage, { UserSummary } from 'app/members/[memberKey]/page'
 
 // Mock Apollo Client
 jest.mock('@apollo/client/react', () => ({
@@ -65,6 +65,104 @@ jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
 
+describe('UserSummary', () => {
+  test('renders user avatar, login link, and formatted bio', () => {
+    const user = {
+      login: 'johndoe',
+      name: 'John Doe',
+      avatarUrl: 'https://example.com/avatar.png',
+      url: 'https://github.com/johndoe',
+    }
+    render(
+      <UserSummary
+        user={user}
+        contributionData={{}}
+        dateRange={{ startDate: '', endDate: '' }}
+        hasContributionData={false}
+        formattedBio={<span>Bio text</span>}
+      />
+    )
+    expect(screen.getByRole('img', { name: 'John Doe' })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: '@johndoe' })).toHaveAttribute(
+      'href',
+      'https://github.com/johndoe'
+    )
+    expect(screen.getByText('Bio text')).toBeInTheDocument()
+  })
+
+  test('renders contribution heatmap when hasContributionData is true', () => {
+    const user = {
+      login: 'jane',
+      name: 'Jane',
+      avatarUrl: '/avatar.png',
+      url: 'https://github.com/jane',
+    }
+    render(
+      <UserSummary
+        user={user}
+        contributionData={{ '2025-01-01': 1 }}
+        dateRange={{ startDate: '2025-01-01', endDate: '2025-01-01' }}
+        hasContributionData={true}
+        formattedBio={null}
+      />
+    )
+    expect(screen.getByTestId('contribution-heatmap')).toBeInTheDocument()
+  })
+
+  test('uses login as avatar alt when user has no name', () => {
+    const user = {
+      login: 'nologin',
+      name: undefined,
+      avatarUrl: '/avatar.png',
+      url: 'https://github.com/nologin',
+    }
+    render(
+      <UserSummary
+        user={user}
+        contributionData={{}}
+        dateRange={{ startDate: '', endDate: '' }}
+        hasContributionData={false}
+        formattedBio={null}
+      />
+    )
+    expect(screen.getByRole('img', { name: 'nologin' })).toBeInTheDocument()
+  })
+
+  test('uses placeholder avatar and fallback alt when user is null', () => {
+    render(
+      <UserSummary
+        user={null}
+        contributionData={{}}
+        dateRange={{ startDate: '', endDate: '' }}
+        hasContributionData={false}
+        formattedBio={null}
+      />
+    )
+    const img = screen.getByRole('img', { name: 'User Avatar' })
+    expect(img).toHaveAttribute('src', expect.stringContaining('placeholder.svg'))
+  })
+
+  test('renders badges when user has badges', () => {
+    const user = {
+      login: 'badged',
+      name: 'Badged User',
+      avatarUrl: '/a.png',
+      url: 'https://github.com/badged',
+      badges: [{ id: 'b1', name: 'Star', cssClass: 'fa-star', description: 'Star', weight: 1 }],
+    }
+    render(
+      <UserSummary
+        user={user}
+        contributionData={{}}
+        dateRange={{ startDate: '', endDate: '' }}
+        hasContributionData={false}
+        formattedBio={null}
+      />
+    )
+    expect(screen.getByTestId('badge-star')).toBeInTheDocument()
+  })
+})
+
 describe('UserDetailsPage', () => {
   beforeEach(() => {
     ;(useQuery as unknown as jest.Mock).mockReturnValue({
diff --git a/frontend/src/app/board/[year]/candidates/page.tsx b/frontend/src/app/board/[year]/candidates/page.tsx
index 2820c5933e..85e4992adf 100644
--- a/frontend/src/app/board/[year]/candidates/page.tsx
+++ b/frontend/src/app/board/[year]/candidates/page.tsx
@@ -24,6 +24,12 @@ import LoadingSpinner from 'components/LoadingSpinner'
 
 dayjs.extend(relativeTime)
 
+const sortByName = <T extends { name: string }>(items: T[]): T[] =>
+  [...items].sort((a, b) => a.name.localeCompare(b.name))
+
+const sortByCount = (entries: Array<[string, number]>): Array<[string, number]> =>
+  [...entries].sort(([, a], [, b]) => b - a)
+
 type Candidate = {
   id: string
   memberName: string
@@ -85,602 +91,581 @@ type CandidateWithSnapshot = Candidate & {
   snapshot?: MemberSnapshot
 }
 
-const BoardCandidatesPage = () => {
-  const { year } = useParams<{ year: string }>()
-  const [candidates, setCandidates] = useState<CandidateWithSnapshot[]>([])
-
-  const {
-    data: graphQLData,
-    error: graphQLRequestError,
-    loading,
-  } = useQuery(GetBoardCandidatesDocument, {
-    variables: { year: Number.parseInt(year) },
-  })
-
-  useEffect(() => {
-    if (graphQLData?.boardOfDirectors) {
-      setCandidates(graphQLData.boardOfDirectors.candidates || [])
-    }
-    if (graphQLRequestError) {
-      handleAppError(graphQLRequestError)
-    }
-  }, [graphQLData, graphQLRequestError])
-
-  const CandidateCard = ({ candidate }: { candidate: CandidateWithSnapshot }) => {
-    const client = useApolloClient()
-    const [snapshot, setSnapshot] = useState<MemberSnapshot | null>(null)
-    const [ledChapters, setLedChapters] = useState<Chapter[]>([])
-    const [ledProjects, setLedProjects] = useState<Project[]>([])
-
-    const sortByName = <T extends { name: string }>(items: T[]): T[] => {
-      return [...items].sort((a, b) => a.name.localeCompare(b.name))
-    }
-
-    const sortByContributionCount = (entries: Array<[string, number]>): Array<[string, number]> => {
-      return [...entries].sort(([, a], [, b]) => b - a)
-    }
+interface CandidateCardProps {
+  candidate: CandidateWithSnapshot
+  year: string
+}
 
-    const sortChannelsByMessageCount = (
-      entries: Array<[string, number]>
-    ): Array<[string, number]> => {
-      return [...entries].sort(([, a], [, b]) => b - a)
-    }
+const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
+  const client = useApolloClient()
+  const [ledChapters, setLedChapters] = useState<Chapter[]>([])
+  const [ledProjects, setLedProjects] = useState<Project[]>([])
+
+  // Render a single channel link item
+  const renderChannelLink = (channelName: string, messageCount: string | number) => (
+    <a
+      key={channelName}
+      href={`https://owasp.slack.com/archives/${channelName}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-700/10 ring-inset hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <span>#{channelName}</span>
+      <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-800/40 dark:text-blue-300">
+        {Number(messageCount)} messages
+      </span>
+    </a>
+  )
 
-    // Render a single repository link item
-    const renderChannelLink = (channelName: string, messageCount: string | number) => (
+  // Render a single repository link item
+  const renderRepositoryLink = (repoName: string, count: number) => {
+    const commitCount = Number(count)
+    return (
       <a
-        key={channelName}
-        href={`https://owasp.slack.com/archives/${channelName}`}
+        key={repoName}
+        href={`https://github.com/${repoName}/commits?author=${candidate.member?.login}`}
         target="_blank"
         rel="noopener noreferrer"
         className="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-700/10 ring-inset hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30"
         onClick={(e) => e.stopPropagation()}
       >
-        <span>#{channelName}</span>
+        <span>{repoName}</span>
         <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-800/40 dark:text-blue-300">
-          {Number(messageCount)} messages
+          {commitCount} commits
         </span>
       </a>
     )
+  }
 
-    // Render a single repository link item
-    const renderRepositoryLink = (repoName: string, count: number) => {
-      const commitCount = Number(count)
-      return (
-        <a
-          key={repoName}
-          href={`https://github.com/${repoName}/commits?author=${candidate.member?.login}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-700/10 ring-inset hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <span>{repoName}</span>
-          <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-800/40 dark:text-blue-300">
-            {commitCount} commits
-          </span>
-        </a>
-      )
-    }
-
-    const renderTopActiveChannels = () => {
-      if (!snapshot) return null
-
-      if (
-        !snapshot.channelCommunications ||
-        Object.keys(snapshot.channelCommunications).length <= 0
-      ) {
-        return (
-          <div className="mt-4 w-full">
-            <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-              Top 5 Active Channels
-            </h4>
-            <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
-              No Engagement
-            </div>
-          </div>
-        )
-      }
-
-      const sortedChannels = sortChannelsByMessageCount(
-        Object.entries(snapshot.channelCommunications)
-      )
-
-      if (sortedChannels.length === 0) return null
-
-      const topChannel = sortedChannels[0]
-      const [topChannelName, topChannelCount] = topChannel
+  const renderTopActiveChannels = () => {
+    if (!snapshot) return null
 
+    if (
+      !snapshot.channelCommunications ||
+      Object.keys(snapshot.channelCommunications).length <= 0
+    ) {
       return (
         <div className="mt-4 w-full">
-          <div className="mb-3">
-            <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-              Top 5 Active Channels
-            </h4>
-            <a
-              href={`https://owasp.slack.com/archives/${topChannelName}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-400/30 dark:hover:bg-green-900/30"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <span>#{topChannelName}</span>
-              <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:bg-green-800/40 dark:text-green-300">
-                {Number(topChannelCount)} messages
-              </span>
-            </a>
+          <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Top 5 Active Channels
+          </h4>
+          <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
+            No Engagement
           </div>
-          {sortedChannels.length > 1 && (
-            <div>
-              <div className="flex flex-wrap gap-2">
-                {sortedChannels
-                  .slice(1)
-                  .map(([channelName, messageCount]) =>
-                    renderChannelLink(channelName, messageCount)
-                  )}
-              </div>
-            </div>
-          )}
         </div>
       )
     }
 
-    const { data: snapshotData } = useQuery(GetMemberSnapshotDocument, {
-      variables: {
-        userLogin: candidate.member?.login || '',
-      },
-      skip: !candidate.member?.login,
-    })
+    const sortedChannels = sortByCount(Object.entries(snapshot.channelCommunications))
 
-    useEffect(() => {
-      if (snapshotData?.memberSnapshot) {
-        setSnapshot(snapshotData.memberSnapshot)
-      }
-    }, [snapshotData])
+    if (sortedChannels.length === 0) return null
 
-    // Fetch chapters based on chapterContributions keys
-    useEffect(() => {
-      const fetchChapters = async () => {
-        if (!snapshot?.chapterContributions) return
+    const topChannel = sortedChannels[0]
+    const [topChannelName, topChannelCount] = topChannel
 
-        const chapterKeys = Object.keys(snapshot.chapterContributions)
-        const chapters: Chapter[] = []
+    return (
+      <div className="mt-4 w-full">
+        <div className="mb-3">
+          <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Top 5 Active Channels
+          </h4>
+          <a
+            href={`https://owasp.slack.com/archives/${topChannelName}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-400/30 dark:hover:bg-green-900/30"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span>#{topChannelName}</span>
+            <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:bg-green-800/40 dark:text-green-300">
+              {Number(topChannelCount)} messages
+            </span>
+          </a>
+        </div>
+        {sortedChannels.length > 1 && (
+          <div>
+            <div className="flex flex-wrap gap-2">
+              {sortedChannels
+                .slice(1)
+                .map(([channelName, messageCount]) => renderChannelLink(channelName, messageCount))}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const { data: snapshotData } = useQuery(GetMemberSnapshotDocument, {
+    variables: {
+      userLogin: candidate.member?.login || '',
+    },
+    skip: !candidate.member?.login,
+  })
+  // Derive snapshot directly from the query result to avoid an extra render
+  const snapshot: MemberSnapshot | null = snapshotData?.memberSnapshot ?? null
 
-        for (const key of chapterKeys) {
-          try {
-            const { data } = await client.query({
-              query: GetChapterByKeyDocument,
-              variables: { key: key.replace('www-chapter-', '') },
-            })
+  // Fetch chapters based on chapterContributions keys
+  useEffect(() => {
+    const fetchChapters = async () => {
+      if (!snapshot?.chapterContributions) return
 
-            if (data?.chapter) {
-              chapters.push(data.chapter)
-            }
-          } catch {
-            // Silently skip chapters that fail to fetch
+      const chapterKeys = Object.keys(snapshot.chapterContributions)
+      const chapters: Chapter[] = []
+
+      for (const key of chapterKeys) {
+        try {
+          const { data } = await client.query({
+            query: GetChapterByKeyDocument,
+            variables: { key: key.replace('www-chapter-', '') },
+          })
+
+          if (data?.chapter) {
+            chapters.push(data.chapter)
           }
+        } catch {
+          // Silently skip chapters that fail to fetch
         }
-
-        setLedChapters(sortByName(chapters))
       }
 
-      fetchChapters()
-    }, [client, snapshot?.chapterContributions])
+      setLedChapters(sortByName(chapters))
+    }
 
-    // Fetch projects based on projectContributions keys
-    useEffect(() => {
-      const fetchProjects = async () => {
-        if (!snapshot?.projectContributions) return
+    fetchChapters()
+  }, [client, snapshot?.chapterContributions])
 
-        const projectKeys = Object.keys(snapshot.projectContributions)
-        const projects: Project[] = []
+  // Fetch projects based on projectContributions keys
+  useEffect(() => {
+    const fetchProjects = async () => {
+      if (!snapshot?.projectContributions) return
 
-        for (const key of projectKeys) {
-          try {
-            const { data } = await client.query({
-              query: GetProjectByKeyDocument,
-              variables: { key: key.replace('www-project-', '') },
-            })
+      const projectKeys = Object.keys(snapshot.projectContributions)
+      const projects: Project[] = []
 
-            if (data?.project) {
-              projects.push(data.project)
-            }
-          } catch {
-            // Silently skip projects that fail to fetch
+      for (const key of projectKeys) {
+        try {
+          const { data } = await client.query({
+            query: GetProjectByKeyDocument,
+            variables: { key: key.replace('www-project-', '') },
+          })
+
+          if (data?.project) {
+            projects.push(data.project)
           }
+        } catch {
+          // Silently skip projects that fail to fetch
         }
-
-        setLedProjects(sortByName(projects))
       }
 
-      fetchProjects()
-    }, [client, snapshot?.projectContributions])
-
-    const handleCardClick = () => {
-      // Convert name to slug format.
-      const nameSlug = candidate.memberName.toLowerCase().replaceAll(/\s+/g, '_')
-      const candidateUrl = `https://owasp.org/www-board-candidates/${year}/${nameSlug}.html`
-      window.open(candidateUrl, '_blank', 'noopener,noreferrer')
+      setLedProjects(sortByName(projects))
     }
 
-    // Check if candidate leads any flagship level projects
-    const leadsFlagshipProject = ledProjects.some((project) => project.level === 'flagship')
+    fetchProjects()
+  }, [client, snapshot?.projectContributions])
 
-    return (
-      <Button
-        onPress={handleCardClick}
-        className="group flex h-full w-full flex-col items-start justify-start rounded-lg bg-white p-6 text-left shadow-lg transition-transform duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-800 dark:shadow-gray-900/30"
-      >
-        <div className="flex w-full items-start gap-4">
-          {candidate.member?.avatarUrl && (
-            <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-full ring-2 ring-gray-100 group-hover:ring-blue-400 dark:ring-gray-700">
-              <Image
-                fill
-                src={`${candidate.member.avatarUrl}&s=160`}
-                alt={candidate.memberName}
-                className="object-cover"
-              />
-            </div>
-          )}
-          <div className="min-w-0 flex-1">
-            <h3 className="flex items-center gap-2 truncate text-xl font-bold text-gray-900 dark:text-white">
-              {candidate.memberName}
-              {candidate.member?.linkedinPageId && (
-                <a
-                  href={`https://linkedin.com/in/${candidate.member.linkedinPageId}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    if (candidate.member?.linkedinPageId) {
-                      window.open(
-                        `https://linkedin.com/in/${candidate.member.linkedinPageId}`,
-                        '_blank',
-                        'noopener,noreferrer'
-                      )
-                    }
-                  }}
-                  className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                  aria-label={`${candidate.memberName}'s LinkedIn profile`}
-                >
-                  <FaLinkedin className="h-5 w-5" />
-                </a>
-              )}
-            </h3>
-            {candidate.member?.login && (
-              <Link
-                href={`https://github.com/${candidate.member.login}`}
+  const handleCardClick = () => {
+    // Convert name to slug format.
+    const nameSlug = candidate.memberName.toLowerCase().replaceAll(/\s+/g, '_')
+    const candidateUrl = `https://owasp.org/www-board-candidates/${year}/${nameSlug}.html`
+    window.open(candidateUrl, '_blank', 'noopener,noreferrer')
+  }
+
+  // Check if candidate leads any flagship level projects
+  const leadsFlagshipProject = ledProjects.some((project) => project.level === 'flagship')
+
+  return (
+    <Button
+      onPress={handleCardClick}
+      className="group flex h-full w-full flex-col items-start justify-start rounded-lg bg-white p-6 text-left shadow-lg transition-transform duration-300 hover:scale-102 hover:shadow-xl dark:bg-gray-800 dark:shadow-gray-900/30"
+    >
+      <div className="flex w-full items-start gap-4">
+        {candidate.member?.avatarUrl && (
+          <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-full ring-2 ring-gray-100 group-hover:ring-blue-400 dark:ring-gray-700">
+            <Image
+              fill
+              src={`${candidate.member.avatarUrl}&s=160`}
+              alt={candidate.memberName}
+              className="object-cover"
+            />
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <h3 className="flex items-center gap-2 truncate text-xl font-bold text-gray-900 dark:text-white">
+            {candidate.memberName}
+            {candidate.member?.linkedinPageId && (
+              <a
+                href={`https://linkedin.com/in/${candidate.member.linkedinPageId}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="truncate text-sm text-blue-400 hover:underline"
-                onClick={(e) => e.stopPropagation()}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  if (candidate.member?.linkedinPageId) {
+                    window.open(
+                      `https://linkedin.com/in/${candidate.member.linkedinPageId}`,
+                      '_blank',
+                      'noopener,noreferrer'
+                    )
+                  }
+                }}
+                className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                aria-label={`${candidate.memberName}'s LinkedIn profile`}
               >
-                @{candidate.member.login}
-              </Link>
+                <FaLinkedin className="h-5 w-5" />
+              </a>
             )}
-            {candidate.member?.createdAt != null && (
-              <p className="mt-1 truncate text-sm text-gray-600 dark:text-gray-400">
-                GitHub account created{' '}
-                <span className="font-semibold text-gray-800 dark:text-gray-300">
-                  {dayjs(
-                    typeof candidate.member.createdAt === 'number'
-                      ? candidate.member.createdAt * 1000
-                      : candidate.member.createdAt
-                  ).fromNow()}
-                </span>{' '}
-                - {formatDate(candidate.member.createdAt)}
-              </p>
-            )}
-            {candidate.member?.firstOwaspContributionAt != null && (
-              <p className="truncate text-sm text-gray-600 dark:text-gray-400">
-                First OWASP contribution made nearly{' '}
-                <span className="font-semibold text-gray-800 dark:text-gray-300">
-                  {dayjs(candidate.member.firstOwaspContributionAt * 1000).fromNow()}
-                </span>{' '}
-                - {formatDate(candidate.member.firstOwaspContributionAt)}
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div className="mt-4" style={{ width: '100%', minWidth: 0, minHeight: '3.75rem' }}>
-          {candidate.member?.bio && (
-            <div
-              style={
-                {
-                  fontSize: '0.875rem',
-                  lineHeight: '1.25rem',
-                  color: 'inherit',
-                  display: '-webkit-box',
-                  // eslint-disable-next-line @typescript-eslint/naming-convention
-                  WebkitLineClamp: 3,
-                  // eslint-disable-next-line @typescript-eslint/naming-convention
-                  WebkitBoxOrient: 'vertical',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  wordWrap: 'break-word',
-                  overflowWrap: 'break-word',
-                  whiteSpace: 'normal',
-                } as const
-              }
-              className="text-gray-700 dark:text-gray-300"
+          </h3>
+          {candidate.member?.login && (
+            <Link
+              href={`https://github.com/${candidate.member.login}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="truncate text-sm text-blue-400 hover:underline"
+              onClick={(e) => e.stopPropagation()}
             >
-              {candidate.member.bio.replaceAll(/\n+/g, ' ').replaceAll(/\s+/g, ' ').trim()}
-            </div>
+              @{candidate.member.login}
+            </Link>
+          )}
+          {candidate.member?.createdAt != null && (
+            <p className="mt-1 truncate text-sm text-gray-600 dark:text-gray-400">
+              GitHub account created{' '}
+              <span className="font-semibold text-gray-800 dark:text-gray-300">
+                {dayjs(
+                  typeof candidate.member.createdAt === 'number'
+                    ? candidate.member.createdAt * 1000
+                    : candidate.member.createdAt
+                ).fromNow()}
+              </span>{' '}
+              - {formatDate(candidate.member.createdAt)}
+            </p>
+          )}
+          {candidate.member?.firstOwaspContributionAt != null && (
+            <p className="truncate text-sm text-gray-600 dark:text-gray-400">
+              First OWASP contribution made nearly{' '}
+              <span className="font-semibold text-gray-800 dark:text-gray-300">
+                {dayjs(candidate.member.firstOwaspContributionAt * 1000).fromNow()}
+              </span>{' '}
+              - {formatDate(candidate.member.firstOwaspContributionAt)}
+            </p>
           )}
         </div>
+      </div>
 
-        {candidate.description && (
-          <p className="mt-4 line-clamp-3 text-sm text-gray-700 dark:text-gray-300">
-            {candidate.description}
-          </p>
+      <div className="mt-4" style={{ width: '100%', minWidth: 0, minHeight: '3.75rem' }}>
+        {candidate.member?.bio && (
+          <div
+            style={
+              {
+                fontSize: '0.875rem',
+                lineHeight: '1.25rem',
+                color: 'inherit',
+                display: '-webkit-box',
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                WebkitLineClamp: 3,
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                wordWrap: 'break-word',
+                overflowWrap: 'break-word',
+                whiteSpace: 'normal',
+              } as const
+            }
+            className="text-gray-700 dark:text-gray-300"
+          >
+            {candidate.member.bio.replaceAll(/\n+/g, ' ').replaceAll(/\s+/g, ' ').trim()}
+          </div>
         )}
+      </div>
 
-        {snapshot && (
-          <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
-            <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
-              <span className="font-semibold">OWASP Ecosystem Contributions</span>
-            </h4>
-            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-              <div className="flex items-center gap-2">
-                <FaCode className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                <div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Commits</p>
-                  <p className="font-semibold text-gray-900 dark:text-white">
-                    {millify(snapshot.commitsCount, { precision: 1 })}
-                  </p>
-                </div>
+      {candidate.description && (
+        <p className="mt-4 line-clamp-3 text-sm text-gray-700 dark:text-gray-300">
+          {candidate.description}
+        </p>
+      )}
+
+      {snapshot && (
+        <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
+          <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
+            <span className="font-semibold">OWASP Ecosystem Contributions</span>
+          </h4>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <div className="flex items-center gap-2">
+              <FaCode className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Commits</p>
+                <p className="font-semibold text-gray-900 dark:text-white">
+                  {millify(snapshot.commitsCount, { precision: 1 })}
+                </p>
               </div>
-              <div className="flex items-center gap-2">
-                <FaCodeBranch className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                <div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">PRs</p>
-                  <p className="font-semibold text-gray-900 dark:text-white">
-                    {millify(snapshot.pullRequestsCount, { precision: 1 })}
-                  </p>
-                </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <FaCodeBranch className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">PRs</p>
+                <p className="font-semibold text-gray-900 dark:text-white">
+                  {millify(snapshot.pullRequestsCount, { precision: 1 })}
+                </p>
               </div>
-              <div className="flex items-center gap-2">
-                <FaExclamationCircle className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                <div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Issues</p>
-                  <p className="font-semibold text-gray-900 dark:text-white">
-                    {millify(snapshot.issuesCount, { precision: 1 })}
-                  </p>
-                </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <FaExclamationCircle className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Issues</p>
+                <p className="font-semibold text-gray-900 dark:text-white">
+                  {millify(snapshot.issuesCount, { precision: 1 })}
+                </p>
               </div>
-              <div className="flex items-center gap-2">
-                <FaCodeMerge className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                <div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Total</p>
-                  <p className="font-semibold text-gray-900 dark:text-white">
-                    {millify(snapshot.totalContributions, { precision: 1 })}
-                  </p>
-                </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <FaCodeMerge className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Total</p>
+                <p className="font-semibold text-gray-900 dark:text-white">
+                  {millify(snapshot.totalContributions, { precision: 1 })}
+                </p>
               </div>
             </div>
-            {snapshot.contributionHeatmapData &&
-              Object.keys(snapshot.contributionHeatmapData).length > 0 && (
-                <div className="mt-3">
-                  <ContributionHeatmap
-                    contributionData={snapshot.contributionHeatmapData}
-                    startDate={snapshot.startAt}
-                    endDate={snapshot.endAt}
-                    variant="compact"
-                  />
-                </div>
+          </div>
+          {snapshot.contributionHeatmapData &&
+            Object.keys(snapshot.contributionHeatmapData).length > 0 && (
+              <div className="mt-3">
+                <ContributionHeatmap
+                  contributionData={snapshot.contributionHeatmapData}
+                  startDate={snapshot.startAt}
+                  endDate={snapshot.endAt}
+                  variant="compact"
+                />
+              </div>
+            )}
+          <div className="mt-4 w-full">
+            <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
+              <span className="font-semibold">Leadership</span>
+              {(ledChapters.length > 0 || ledProjects.length > 0) && (
+                <span className="font-normal">
+                  {' '}
+                  (
+                  {ledChapters.length > 0 && (
+                    <>
+                      {ledChapters.length} chapter{ledChapters.length === 1 ? '' : 's'}
+                    </>
+                  )}
+                  {ledChapters.length > 0 && ledProjects.length > 0 && ', '}
+                  {ledProjects.length > 0 && (
+                    <>
+                      {ledProjects.length} project{ledProjects.length === 1 ? '' : 's'}
+                    </>
+                  )}
+                  )
+                </span>
               )}
-            <div className="mt-4 w-full">
-              <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
-                <span className="font-semibold">Leadership</span>
-                {(ledChapters.length > 0 || ledProjects.length > 0) && (
-                  <span className="font-normal">
-                    {' '}
-                    (
-                    {ledChapters.length > 0 && (
-                      <>
-                        {ledChapters.length} chapter{ledChapters.length === 1 ? '' : 's'}
-                      </>
-                    )}
-                    {ledChapters.length > 0 && ledProjects.length > 0 && ', '}
-                    {ledProjects.length > 0 && (
-                      <>
-                        {ledProjects.length} project{ledProjects.length === 1 ? '' : 's'}
-                      </>
-                    )}
-                    )
-                  </span>
-                )}
-              </h4>
-              {ledChapters.length === 0 && ledProjects.length === 0 ? (
-                <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
-                  No chapters or projects are lead by this candidate
-                </div>
-              ) : (
-                <div className="flex flex-wrap gap-2">
-                  {ledChapters.map((chapter) => {
-                    // Strip prefix if present to get bare key
-                    const bareKey = chapter.key.startsWith('www-chapter-')
-                      ? chapter.key.replace('www-chapter-', '')
-                      : chapter.key
-                    // Check both key formats for compatibility
-                    const directKey = snapshot?.chapterContributions?.[bareKey]
-                    const withPrefix = snapshot?.chapterContributions?.[`www-chapter-${bareKey}`]
-                    const contributionCount = directKey || withPrefix || 0
-
-                    return (
-                      <Link
-                        key={chapter.id}
-                        href={`/chapters/${chapter.key.replace('www-chapter-', '')}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
+            </h4>
+            {ledChapters.length === 0 && ledProjects.length === 0 ? (
+              <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
+                No chapters or projects are led by this candidate
+              </div>
+            ) : (
+              <div className="flex flex-wrap gap-2">
+                {ledChapters.map((chapter) => {
+                  // Strip prefix if present to get bare key
+                  const bareKey = chapter.key.startsWith('www-chapter-')
+                    ? chapter.key.replace('www-chapter-', '')
+                    : chapter.key
+                  // Check both key formats for compatibility
+                  const directKey = snapshot?.chapterContributions?.[bareKey]
+                  const withPrefix = snapshot?.chapterContributions?.[`www-chapter-${bareKey}`]
+                  const contributionCount = directKey || withPrefix || 0
+
+                  return (
+                    <Link
+                      key={chapter.id}
+                      href={`/chapters/${chapter.key.replace('www-chapter-', '')}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
+                        contributionCount === 0
+                          ? 'bg-orange-50 text-orange-700 ring-orange-700/10 hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30 dark:hover:bg-orange-900/30'
+                          : 'bg-blue-50 text-blue-700 ring-blue-700/10 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30'
+                      }`}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <span>{chapter.name}</span>
+                      <span
+                        className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${
                           contributionCount === 0
-                            ? 'bg-orange-50 text-orange-700 ring-orange-700/10 hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30 dark:hover:bg-orange-900/30'
-                            : 'bg-blue-50 text-blue-700 ring-blue-700/10 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30'
+                            ? 'bg-orange-100 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300'
+                            : 'bg-blue-100 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300'
                         }`}
-                        onClick={(e) => e.stopPropagation()}
                       >
-                        <span>{chapter.name}</span>
-                        <span
-                          className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${
-                            contributionCount === 0
-                              ? 'bg-orange-100 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300'
-                              : 'bg-blue-100 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300'
-                          }`}
-                        >
-                          {contributionCount === 0
-                            ? 'no contributions'
-                            : `${contributionCount} contributions`}
-                        </span>
-                      </Link>
-                    )
-                  })}
-                  {ledProjects.map((project) => {
-                    // Strip prefix if present to get bare key
-                    const bareKey = project.key.startsWith('www-project-')
-                      ? project.key.replace('www-project-', '')
-                      : project.key
-                    // Check both key formats for compatibility
-                    const directKey = snapshot?.projectContributions?.[bareKey]
-                    const withPrefix = snapshot?.projectContributions?.[`www-project-${bareKey}`]
-                    const contributionCount = directKey || withPrefix || 0
-                    return (
-                      <Link
-                        key={project.id}
-                        href={`/projects/${project.key.replace('www-project-', '')}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
+                        {contributionCount === 0
+                          ? 'no contributions'
+                          : `${contributionCount} contributions`}
+                      </span>
+                    </Link>
+                  )
+                })}
+                {ledProjects.map((project) => {
+                  // Strip prefix if present to get bare key
+                  const bareKey = project.key.startsWith('www-project-')
+                    ? project.key.replace('www-project-', '')
+                    : project.key
+                  // Check both key formats for compatibility
+                  const directKey = snapshot?.projectContributions?.[bareKey]
+                  const withPrefix = snapshot?.projectContributions?.[`www-project-${bareKey}`]
+                  const contributionCount = directKey || withPrefix || 0
+                  return (
+                    <Link
+                      key={project.id}
+                      href={`/projects/${project.key.replace('www-project-', '')}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
+                        contributionCount === 0
+                          ? 'bg-orange-50 text-orange-700 ring-orange-700/10 hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30 dark:hover:bg-orange-900/30'
+                          : 'bg-blue-50 text-blue-700 ring-blue-700/10 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30'
+                      }`}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <span>{project.name}</span>
+                      <span
+                        className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${
                           contributionCount === 0
-                            ? 'bg-orange-50 text-orange-700 ring-orange-700/10 hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30 dark:hover:bg-orange-900/30'
-                            : 'bg-blue-50 text-blue-700 ring-blue-700/10 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30'
+                            ? 'bg-orange-100 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300'
+                            : 'bg-blue-100 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300'
                         }`}
-                        onClick={(e) => e.stopPropagation()}
                       >
-                        <span>{project.name}</span>
-                        <span
-                          className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${
-                            contributionCount === 0
-                              ? 'bg-orange-100 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300'
-                              : 'bg-blue-100 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300'
-                          }`}
-                        >
-                          {contributionCount === 0
-                            ? 'no contributions'
-                            : `${contributionCount} contributions`}
-                        </span>
-                      </Link>
-                    )
-                  })}
-                </div>
-              )}
-            </div>
-            {snapshot.repositoryContributions &&
-              Object.keys(snapshot.repositoryContributions).length > 0 &&
-              (() => {
-                const sortedRepos = sortByContributionCount(
-                  Object.entries(snapshot.repositoryContributions)
-                )
-                const topRepo = sortedRepos[0]
-                const [topRepoName, topRepoCount] = topRepo
-
-                return (
-                  <div className="mt-4 w-full">
-                    <div className="mb-3">
-                      <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-                        Top 5 Active Repositories
-                      </h4>
-                      <a
-                        href={`https://github.com/${topRepoName}/commits?author=${candidate.member?.login}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-400/30 dark:hover:bg-green-900/30"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <span>{topRepoName}</span>
-                        <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:bg-green-800/40 dark:text-green-300">
-                          {Number(topRepoCount)} commits
-                        </span>
-                      </a>
-                    </div>
-                    {sortedRepos.length > 1 && (
-                      <div>
-                        <div className="flex flex-wrap gap-2">
-                          {sortedRepos
-                            .slice(1)
-                            .map(([repoName, count]) => renderRepositoryLink(repoName, count))}
-                        </div>
-                      </div>
-                    )}
+                        {contributionCount === 0
+                          ? 'no contributions'
+                          : `${contributionCount} contributions`}
+                      </span>
+                    </Link>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+          {snapshot.repositoryContributions &&
+            Object.keys(snapshot.repositoryContributions).length > 0 &&
+            (() => {
+              const sortedRepos = sortByCount(Object.entries(snapshot.repositoryContributions))
+              const topRepo = sortedRepos[0]
+              const [topRepoName, topRepoCount] = topRepo
+
+              return (
+                <div className="mt-4 w-full">
+                  <div className="mb-3">
+                    <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Top 5 Active Repositories
+                    </h4>
+                    <a
+                      href={`https://github.com/${topRepoName}/commits?author=${candidate.member?.login}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-400/30 dark:hover:bg-green-900/30"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <span>{topRepoName}</span>
+                      <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:bg-green-800/40 dark:text-green-300">
+                        {Number(topRepoCount)} commits
+                      </span>
+                    </a>
                   </div>
-                )
-              })()}
+                  {sortedRepos.length > 1 && (
+                    <div>
+                      <div className="flex flex-wrap gap-2">
+                        {sortedRepos
+                          .slice(1, 5)
+                          .map(([repoName, count]) => renderRepositoryLink(repoName, count))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )
+            })()}
+        </div>
+      )}
+
+      {/* Slack Communications Heatmap */}
+      {snapshot?.communicationHeatmapData &&
+        Object.keys(snapshot.communicationHeatmapData).length > 0 && (
+          <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
+            <ContributionHeatmap
+              contributionData={snapshot.communicationHeatmapData}
+              startDate={snapshot.startAt}
+              endDate={snapshot.endAt}
+              title="OWASP Community Engagement"
+              unit="message"
+              variant="compact"
+            />
           </div>
         )}
 
-        {/* Slack Communications Heatmap */}
-        {snapshot?.communicationHeatmapData &&
-          Object.keys(snapshot.communicationHeatmapData).length > 0 && (
-            <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
-              <ContributionHeatmap
-                contributionData={snapshot.communicationHeatmapData}
-                startDate={snapshot.startAt}
-                endDate={snapshot.endAt}
-                title="OWASP Community Engagement"
-                unit="message"
-                variant="compact"
-              />
+      {renderTopActiveChannels()}
+
+      {/* Additional Information */}
+      {(candidate.member?.isOwaspBoardMember ||
+        candidate.member?.isFormerOwaspStaff ||
+        candidate.member?.isGsocMentor ||
+        leadsFlagshipProject) && (
+        <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
+          <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
+            <span className="font-semibold">Additional Information</span>
+          </h4>
+          <div className="flex flex-wrap gap-2">
+            {candidate.member?.isOwaspBoardMember && (
+              <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
+                OWASP Board of Directors Member
+              </span>
+            )}
+            {candidate.member?.isFormerOwaspStaff && (
+              <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
+                Former OWASP Staff Member
+              </span>
+            )}
+            {candidate.member?.isGsocMentor && (
+              <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
+                Google Summer of Code Mentor
+              </span>
+            )}
+          </div>
+          {leadsFlagshipProject && (
+            <div
+              className="mt-3 text-xs text-gray-600 dark:text-gray-400"
+              style={{
+                wordWrap: 'break-word',
+                overflowWrap: 'break-word',
+                whiteSpace: 'normal',
+              }}
+            >
+              This candidate may have additional community engagement in other Slack workspaces
+              based on the flagship level project(s) they are leading.
             </div>
           )}
+        </div>
+      )}
+    </Button>
+  )
+}
+
+const BoardCandidatesPage = () => {
+  const { year } = useParams<{ year: string }>()
+  const {
+    data: graphQLData,
+    error: graphQLRequestError,
+    loading,
+  } = useQuery(GetBoardCandidatesDocument, {
+    variables: { year: Number.parseInt(year) },
+  })
 
-        {renderTopActiveChannels()}
+  // Derive candidates directly from GraphQL data to avoid an extra render
+  const candidates: CandidateWithSnapshot[] = graphQLData?.boardOfDirectors?.candidates ?? []
 
-        {/* Additional Information */}
-        {(candidate.member?.isOwaspBoardMember ||
-          candidate.member?.isFormerOwaspStaff ||
-          candidate.member?.isGsocMentor ||
-          leadsFlagshipProject) && (
-          <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
-            <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
-              <span className="font-semibold">Additional Information</span>
-            </h4>
-            <div className="flex flex-wrap gap-2">
-              {candidate.member?.isOwaspBoardMember && (
-                <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
-                  OWASP Board of Directors Member
-                </span>
-              )}
-              {candidate.member?.isFormerOwaspStaff && (
-                <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
-                  Former OWASP Staff Member
-                </span>
-              )}
-              {candidate.member?.isGsocMentor && (
-                <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
-                  Google Summer of Code Mentor
-                </span>
-              )}
-            </div>
-            {leadsFlagshipProject && (
-              <div
-                className="mt-3 text-xs text-gray-600 dark:text-gray-400"
-                style={{
-                  wordWrap: 'break-word',
-                  overflowWrap: 'break-word',
-                  whiteSpace: 'normal',
-                }}
-              >
-                This candidate may have additional community engagement in other Slack workspaces
-                based on the flagship level project(s) they are leading.
-              </div>
-            )}
-          </div>
-        )}
-      </Button>
-    )
-  }
+  // Keep reporting errors as a side-effect only
+  useEffect(() => {
+    if (graphQLRequestError) {
+      handleAppError(graphQLRequestError)
+    }
+  }, [graphQLRequestError])
 
   if (loading) {
     return <LoadingSpinner />
@@ -752,7 +737,7 @@ const BoardCandidatesPage = () => {
       ) : (
         <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
           {candidates.map((candidate) => (
-            <CandidateCard key={candidate.id} candidate={candidate} />
+            <CandidateCard key={candidate.id} candidate={candidate} year={year} />
           ))}
         </div>
       )}
diff --git a/frontend/src/app/global-error.tsx b/frontend/src/app/global-error.tsx
index 6b0c5442b9..9532023d39 100644
--- a/frontend/src/app/global-error.tsx
+++ b/frontend/src/app/global-error.tsx
@@ -91,19 +91,29 @@ export const handleAppError = (error: unknown) => {
 export const ErrorWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <Sentry.ErrorBoundary
-      fallback={({ error }) => {
-        Sentry.captureException(error)
-        const errorConfig = ERROR_CONFIGS['500']
-        return <ErrorDisplay {...errorConfig} />
-      }}
+      fallback={(props) => <SentryErrorFallback {...props} errorConfig={ERROR_CONFIGS['500']} />}
     >
       {children}
     </Sentry.ErrorBoundary>
   )
 }
 
+export const SentryErrorFallback: React.FC<{
+  error: unknown
+  errorConfig?: ErrorDisplayProps
+}> = ({ error, errorConfig = ERROR_CONFIGS['500'] }) => {
+  React.useEffect(() => {
+    Sentry.captureException(error instanceof Error ? error : new Error(String(error)))
+  }, [error])
+
+  return <ErrorDisplay {...errorConfig} />
+}
+
 export default function GlobalError({ error }: Readonly<{ error: Error }>) {
-  Sentry.captureException(error)
+  React.useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
+
   const errorConfig = ERROR_CONFIGS['500']
   return <ErrorDisplay {...errorConfig} />
 }
diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index 962008aed4..dabcbeca37 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -9,12 +9,76 @@ import { handleAppError, ErrorDisplay } from 'app/global-error'
 
 import { GetUserDataDocument } from 'types/__generated__/userQueries.generated'
 import { Badge } from 'types/badge'
+import { User } from 'types/user'
 import { formatDate } from 'utils/dateFormatter'
 import Badges from 'components/Badges'
 import DetailsCard from 'components/CardDetailsPage'
 import ContributionHeatmap from 'components/ContributionHeatmap'
 import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
 
+type DateRange = { startDate: string; endDate: string }
+
+interface UserSummaryProps {
+  user: User | null
+  contributionData: Record<string, number>
+  dateRange: DateRange
+  hasContributionData: boolean
+  formattedBio: React.ReactNode
+}
+
+export const UserSummary: React.FC<UserSummaryProps> = ({
+  user,
+  contributionData,
+  dateRange,
+  hasContributionData,
+  formattedBio,
+}) => (
+  <div className="mt-4 flex flex-col items-center lg:flex-row">
+    <Image
+      width={200}
+      height={200}
+      className="mr-4 h-[200px] w-[200px] rounded-full border-2 border-white bg-white object-cover shadow-md dark:border-gray-800 dark:bg-gray-600/60"
+      src={user?.avatarUrl || '/placeholder.svg'}
+      alt={user?.name || user?.login || 'User Avatar'}
+    />
+    <div className="w-full overflow-x-auto text-center lg:text-left">
+      <div className="pl-0 lg:pl-4">
+        <div className="flex items-center justify-center gap-3 text-center text-sm text-gray-500 lg:justify-start lg:text-left dark:text-gray-400">
+          <Link href={user?.url || '#'} className="text-xl font-bold text-blue-400 hover:underline">
+            @{user?.login}
+          </Link>
+          {user?.badges && user.badges.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {user.badges.slice().map((badge: Badge) => (
+                <React.Fragment key={badge.id}>
+                  <Badges
+                    name={badge.name}
+                    cssClass={badge.cssClass || 'medal'}
+                    showTooltip={true}
+                  />
+                </React.Fragment>
+              ))}
+            </div>
+          )}
+        </div>
+        <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
+      </div>
+      {hasContributionData && dateRange.startDate && dateRange.endDate && (
+        <div className="w-full lg:block">
+          <div className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800">
+            <ContributionHeatmap
+              contributionData={contributionData}
+              startDate={dateRange.startDate}
+              endDate={dateRange.endDate}
+              variant="medium"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+)
+
 const UserDetailsPage: React.FC = () => {
   const { memberKey } = useParams<{ memberKey: string }>()
 
@@ -129,56 +193,6 @@ const UserDetailsPage: React.FC = () => {
     { icon: FaCodeMerge, value: user?.contributionsCount || 0, unit: 'Contribution' },
   ]
 
-  const UserSummary = () => (
-    <div className="mt-4 flex flex-col items-center lg:flex-row">
-      <Image
-        width={200}
-        height={200}
-        className="mr-4 h-[200px] w-[200px] rounded-full border-2 border-white bg-white object-cover shadow-md dark:border-gray-800 dark:bg-gray-600/60"
-        src={user?.avatarUrl || '/placeholder.svg'}
-        alt={user?.name || user?.login || 'User Avatar'}
-      />
-      <div className="w-full overflow-x-auto text-center lg:text-left">
-        <div className="pl-0 lg:pl-4">
-          <div className="flex items-center justify-center gap-3 text-center text-sm text-gray-500 lg:justify-start lg:text-left dark:text-gray-400">
-            <Link
-              href={user?.url || '#'}
-              className="text-xl font-bold text-blue-400 hover:underline"
-            >
-              @{user?.login}
-            </Link>
-            {user?.badges && user.badges.length > 0 && (
-              <div className="flex flex-wrap gap-2">
-                {user.badges.slice().map((badge: Badge) => (
-                  <React.Fragment key={badge.id}>
-                    <Badges
-                      name={badge.name}
-                      cssClass={badge.cssClass || 'medal'}
-                      showTooltip={true}
-                    />
-                  </React.Fragment>
-                ))}
-              </div>
-            )}
-          </div>
-          <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
-        </div>
-        {hasContributionData && dateRange.startDate && dateRange.endDate && (
-          <div className="w-full lg:block">
-            <div className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800">
-              <ContributionHeatmap
-                contributionData={contributionData}
-                startDate={dateRange.startDate}
-                endDate={dateRange.endDate}
-                variant="medium"
-              />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-
   return (
     <DetailsCard
       details={userDetails}
@@ -191,7 +205,15 @@ const UserDetailsPage: React.FC = () => {
       stats={userStats}
       title={user?.name || user?.login}
       type="user"
-      userSummary={<UserSummary />}
+      userSummary={
+        <UserSummary
+          user={user}
+          contributionData={contributionData}
+          dateRange={dateRange}
+          hasContributionData={hasContributionData}
+          formattedBio={formattedBio}
+        />
+      }
     />
   )
 }
diff --git a/frontend/src/components/SkeletonsBase.tsx b/frontend/src/components/SkeletonsBase.tsx
index 96577819bd..1519b5943f 100644
--- a/frontend/src/components/SkeletonsBase.tsx
+++ b/frontend/src/components/SkeletonsBase.tsx
@@ -1,4 +1,5 @@
 import { Skeleton } from '@heroui/skeleton'
+import type { CardSkeletonProps } from 'types/skeleton'
 import LoadingSpinner from 'components/LoadingSpinner'
 import AboutSkeleton from 'components/skeletons/AboutSkeleton'
 import CardSkeleton from 'components/skeletons/Card'
@@ -6,6 +7,8 @@ import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSke
 import OrganizationDetailsPageSkeleton from 'components/skeletons/OrganizationDetailsPageSkeleton'
 import SnapshotSkeleton from 'components/skeletons/SnapshotSkeleton'
 import UserCardSkeleton from 'components/skeletons/UserCard'
+
+// Use CardSkeleton directly; wrapper removed
 function userCardRender() {
   const cardCount = 12
   return (
@@ -35,31 +38,26 @@ const SkeletonBase = ({
   indexName: string
   loadingImageUrl: string
 }) => {
-  let Component
+  let componentProps: CardSkeletonProps = {}
+
   switch (indexName) {
     case 'chapters':
-      Component = () => <CardSkeleton showLevel={false} showIcons={false} showLink={false} />
+      componentProps = { showLevel: false, showIcons: false, showLink: false }
       break
     case 'issues':
-      Component = () => (
-        <CardSkeleton
-          showLevel={false}
-          showIcons={true}
-          numIcons={2}
-          showContributors={false}
-          showSocial={false}
-        />
-      )
+      componentProps = {
+        showLevel: false,
+        showIcons: true,
+        numIcons: 2,
+        showContributors: false,
+        showSocial: false,
+      }
       break
     case 'projects':
-      Component = () => (
-        <CardSkeleton showLink={false} showSocial={false} showIcons={true} numIcons={3} />
-      )
+      componentProps = { showLink: false, showSocial: false, showIcons: true, numIcons: 3 }
       break
     case 'committees':
-      Component = () => (
-        <CardSkeleton showLink={false} showLevel={false} showIcons={true} numIcons={1} />
-      )
+      componentProps = { showLink: false, showLevel: false, showIcons: true, numIcons: 1 }
       break
     case 'users':
       return userCardRender()
@@ -82,11 +80,11 @@ const SkeletonBase = ({
       {indexName == 'chapters' ? (
         <Skeleton className="mb-2 h-96 w-full max-w-6xl" />
       ) : (
-        <Component />
+        <CardSkeleton {...componentProps} />
       )}
-      <Component />
-      <Component />
-      <Component />
+      <CardSkeleton {...componentProps} />
+      <CardSkeleton {...componentProps} />
+      <CardSkeleton {...componentProps} />
     </div>
   )
 }