From 55d88143db5d37f75e2a2e6a09f36229523b415f Mon Sep 17 00:00:00 2001
From: Kate <kate@kgthreads.com>
Date: Tue, 25 Nov 2025 17:36:22 -0800
Subject: [PATCH 1/6] Added minor UI\UX updates for Mentorship portal

---
 .../api/internal/queries/mentorship.py        |  14 ++-
 .../unit/components/ProgramActions.test.tsx   | 102 ------------------
 .../unit/components/ProgramCard.test.tsx      |  60 ++++-------
 .../unit/pages/CreateModule.test.tsx          |   2 +-
 .../unit/pages/CreateProgram.test.tsx         |   8 +-
 .../__tests__/unit/pages/EditModule.test.tsx  |   4 +-
 .../__tests__/unit/pages/EditProgram.test.tsx |   2 +-
 .../__tests__/unit/pages/Program.test.tsx     |  10 +-
 .../[programKey]/modules/[moduleKey]/page.tsx |   5 +-
 .../mentorship/programs/[programKey]/page.tsx |   2 +-
 frontend/src/app/mentorship/programs/page.tsx |   4 +-
 .../programs/[programKey]/edit/page.tsx       |   2 +-
 .../modules/[moduleKey]/edit/page.tsx         |   2 +-
 .../[moduleKey]/issues/[issueId]/page.tsx     |   4 +-
 .../modules/[moduleKey]/issues/page.tsx       |   2 +-
 .../{[menteeHandle] => [menteeKey]}/page.tsx  |  10 +-
 .../[programKey]/modules/[moduleKey]/page.tsx |   2 +-
 .../[programKey]/modules/create/page.tsx      |   2 +-
 .../mentorship/programs/[programKey]/page.tsx |   2 +-
 frontend/src/components/CardDetailsPage.tsx   |  88 +++++++--------
 .../{ProgramActions.tsx => EntityActions.tsx} |  77 ++++++++-----
 frontend/src/components/ModuleCard.tsx        |  19 ++--
 frontend/src/components/ModuleForm.tsx        |  11 +-
 frontend/src/components/ProgramCard.tsx       |  34 +++---
 frontend/src/components/ProgramForm.tsx       |  11 +-
 frontend/src/components/SingleModuleCard.tsx  |  82 ++------------
 frontend/src/server/queries/menteeQueries.ts  |   6 +-
 frontend/src/types/__generated__/graphql.ts   |   4 +-
 .../__generated__/menteeQueries.generated.ts  |   4 +-
 29 files changed, 188 insertions(+), 387 deletions(-)
 delete mode 100644 frontend/__tests__/unit/components/ProgramActions.test.tsx
 rename frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/{[menteeHandle] => [menteeKey]}/page.tsx (97%)
 rename frontend/src/components/{ProgramActions.tsx => EntityActions.tsx} (52%)

diff --git a/backend/apps/mentorship/api/internal/queries/mentorship.py b/backend/apps/mentorship/api/internal/queries/mentorship.py
index 5f96abb035..cab13ed8d5 100644
--- a/backend/apps/mentorship/api/internal/queries/mentorship.py
+++ b/backend/apps/mentorship/api/internal/queries/mentorship.py
@@ -48,15 +48,13 @@ def is_mentor(self, login: str) -> bool:
         return Mentor.objects.filter(github_user=github_user).exists()
 
     @strawberry.field
-    def get_mentee_details(
-        self, program_key: str, module_key: str, mentee_handle: str
-    ) -> MenteeNode:
+    def get_mentee_details(self, program_key: str, module_key: str, mentee_key: str) -> MenteeNode:
         """Get detailed information about a mentee in a specific module."""
         try:
             module = Module.objects.only("id").get(key=module_key, program__key=program_key)
 
             github_user = GithubUser.objects.only("login", "name", "avatar_url", "bio").get(
-                login=mentee_handle
+                login=mentee_key
             )
 
             mentee = Mentee.objects.only("id", "experience_level", "domains", "tags").get(
@@ -65,7 +63,7 @@ def get_mentee_details(
             is_enrolled = MenteeModule.objects.filter(mentee=mentee, module=module).exists()
 
             if not is_enrolled:
-                message = f"Mentee {mentee_handle} is not enrolled in module {module_key}"
+                message = f"Mentee {mentee_key} is not enrolled in module {module_key}"
                 raise ObjectDoesNotExist(message)
 
             return MenteeNode(
@@ -88,7 +86,7 @@ def get_mentee_module_issues(
         self,
         program_key: str,
         module_key: str,
-        mentee_handle: str,
+        mentee_key: str,
         limit: int = 20,
         offset: int = 0,
     ) -> list[IssueNode]:
@@ -96,13 +94,13 @@ def get_mentee_module_issues(
         try:
             module = Module.objects.only("id").get(key=module_key, program__key=program_key)
 
-            github_user = GithubUser.objects.only("id").get(login=mentee_handle)
+            github_user = GithubUser.objects.only("id").get(login=mentee_key)
 
             mentee = Mentee.objects.only("id").get(github_user=github_user)
             is_enrolled = MenteeModule.objects.filter(mentee=mentee, module=module).exists()
 
             if not is_enrolled:
-                message = f"Mentee {mentee_handle} is not enrolled in module {module_key}"
+                message = f"Mentee {mentee_key} is not enrolled in module {module_key}"
                 raise ObjectDoesNotExist(message)
 
             issues_qs = (
diff --git a/frontend/__tests__/unit/components/ProgramActions.test.tsx b/frontend/__tests__/unit/components/ProgramActions.test.tsx
deleted file mode 100644
index 043b9d401d..0000000000
--- a/frontend/__tests__/unit/components/ProgramActions.test.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { useSession as mockUseSession } from 'next-auth/react'
-import { render } from 'wrappers/testUtil'
-import { ProgramStatusEnum } from 'types/__generated__/graphql'
-import ProgramActions from 'components/ProgramActions'
-
-const mockPush = jest.fn()
-jest.mock('next/navigation', () => ({
-  ...jest.requireActual('next/navigation'),
-  useRouter: () => ({ push: mockPush }),
-}))
-
-jest.mock('next-auth/react', () => {
-  const actual = jest.requireActual('next-auth/react')
-  return {
-    ...actual,
-    useSession: jest.fn(),
-  }
-})
-
-describe('ProgramActions', () => {
-  let setStatus: jest.Mock
-  beforeEach(() => {
-    setStatus = jest.fn()
-    mockPush.mockClear()
-  })
-
-  beforeAll(async () => {
-    ;(mockUseSession as jest.Mock).mockReturnValue({
-      data: {
-        user: {
-          name: 'Test User',
-          email: 'test@example.com',
-          login: 'testuser',
-          isLeader: true,
-        },
-        expires: '2099-01-01T00:00:00.000Z',
-      },
-      status: 'authenticated',
-      loading: false,
-    })
-  })
-
-  test('renders and toggles dropdown', () => {
-    render(<ProgramActions programKey="test-program" status="DRAFT" setStatus={setStatus} />)
-    const button = screen.getByTestId('program-actions-button')
-    fireEvent.click(button)
-    expect(screen.getByText('Add Module')).toBeInTheDocument()
-    expect(screen.getByText('Publish Program')).toBeInTheDocument()
-    fireEvent.click(button)
-    expect(screen.queryByText('Add Module')).not.toBeInTheDocument()
-  })
-
-  test('handles Add Module action', () => {
-    render(<ProgramActions programKey="test-program" status="DRAFT" setStatus={setStatus} />)
-    const button = screen.getByTestId('program-actions-button')
-    fireEvent.click(button)
-    fireEvent.click(screen.getByRole('menuitem', { name: /add module/i }))
-    expect(mockPush).toHaveBeenCalled()
-    expect(setStatus).not.toHaveBeenCalled()
-  })
-
-  test('handles Publish action', () => {
-    render(<ProgramActions programKey="test-program" status="DRAFT" setStatus={setStatus} />)
-    const button = screen.getByTestId('program-actions-button')
-    fireEvent.click(button)
-    fireEvent.click(screen.getByRole('menuitem', { name: /publish program/i }))
-    expect(setStatus).toHaveBeenCalledWith(ProgramStatusEnum.Published)
-    expect(mockPush).not.toHaveBeenCalled()
-  })
-
-  test('handles Move to Draft action', () => {
-    render(<ProgramActions programKey="test-program" status="PUBLISHED" setStatus={setStatus} />)
-    const button = screen.getByTestId('program-actions-button')
-    fireEvent.click(button)
-    fireEvent.click(screen.getByRole('menuitem', { name: /move to draft/i }))
-    expect(setStatus).toHaveBeenCalledWith(ProgramStatusEnum.Draft)
-  })
-
-  test('handles Mark as Completed action', () => {
-    render(<ProgramActions programKey="test-program" status="PUBLISHED" setStatus={setStatus} />)
-    const button = screen.getByTestId('program-actions-button')
-    fireEvent.click(button)
-    fireEvent.click(screen.getByRole('menuitem', { name: /mark as completed/i }))
-    expect(setStatus).toHaveBeenCalledWith(ProgramStatusEnum.Completed)
-  })
-
-  test('dropdown closes on outside click', () => {
-    render(
-      <div>
-        <ProgramActions programKey="test-program" status="DRAFT" setStatus={setStatus} />
-        <button data-testid="outside">Outside</button>
-      </div>
-    )
-    const button = screen.getByTestId('program-actions-button')
-    fireEvent.click(button)
-    expect(screen.getByText('Add Module')).toBeInTheDocument()
-    fireEvent.mouseDown(screen.getByTestId('outside'))
-    expect(screen.queryByText('Add Module')).not.toBeInTheDocument()
-  })
-})
diff --git a/frontend/__tests__/unit/components/ProgramCard.test.tsx b/frontend/__tests__/unit/components/ProgramCard.test.tsx
index 288f0074ef..0381faf3d8 100644
--- a/frontend/__tests__/unit/components/ProgramCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramCard.test.tsx
@@ -106,8 +106,8 @@ describe('ProgramCard', () => {
       expect(screen.getByText('admin')).toBeInTheDocument()
     })
 
-    it('calls onView when Preview button is clicked', () => {
-      render(
+    it('calls onView when card is clicked', () => {
+      const { container } = render(
         <ProgramCard
           program={baseMockProgram}
           onView={mockOnView}
@@ -116,13 +116,13 @@ describe('ProgramCard', () => {
         />
       )
 
-      const previewButton = screen.getByText('Preview').closest('button')
-      fireEvent.click(previewButton!)
+      const card = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement
+      fireEvent.click(card)
 
       expect(mockOnView).toHaveBeenCalledWith('test-program')
     })
 
-    it('navigates to edit page when Edit Program is clicked', () => {
+    it('navigates to edit page when Edit is clicked', () => {
       const router = useRouter()
 
       render(
@@ -135,7 +135,7 @@ describe('ProgramCard', () => {
       )
 
       fireEvent.click(screen.getByTestId('program-actions-button'))
-      fireEvent.click(screen.getByText('Edit Program'))
+      fireEvent.click(screen.getByText('Edit'))
 
       expect(router.push).toHaveBeenCalledWith('/my/mentorship/programs/test-program/edit')
     })
@@ -165,13 +165,15 @@ describe('ProgramCard', () => {
         />
       )
 
-      expect(screen.getByText('View Details')).toBeInTheDocument()
+      const card = document.querySelector('[role="button"][tabindex="0"]')
+      expect(card).toBeInTheDocument()
       expect(screen.queryByText('Preview')).not.toBeInTheDocument()
       expect(screen.queryByText('Edit')).not.toBeInTheDocument()
+      expect(screen.queryByText('View Details')).not.toBeInTheDocument()
     })
 
-    it('calls onView when View Details button is clicked', () => {
-      render(
+    it('calls onView when card is clicked', () => {
+      const { container } = render(
         <ProgramCard
           isAdmin={false}
           program={baseMockProgram}
@@ -180,8 +182,8 @@ describe('ProgramCard', () => {
         />
       )
 
-      const viewButton = screen.getByText('View Details').closest('button')
-      fireEvent.click(viewButton!)
+      const card = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement
+      fireEvent.click(card)
 
       expect(mockOnView).toHaveBeenCalledWith('test-program')
     })
@@ -250,7 +252,7 @@ describe('ProgramCard', () => {
   })
 
   describe('Description Handling', () => {
-    it('renders long descriptions with line-clamp-6 CSS class', () => {
+    it('renders long descriptions with line-clamp-8 CSS class', () => {
       const longDescription = 'A'.repeat(300) // Long enough to trigger line clamping
       const longDescProgram = { ...baseMockProgram, description: longDescription }
 
@@ -266,7 +268,7 @@ describe('ProgramCard', () => {
       expect(screen.getByText(longDescription)).toBeInTheDocument()
       expect(screen.getByText(longDescription)).toBeInTheDocument()
       const descriptionElement = screen.getByText(longDescription)
-      expect(descriptionElement).toHaveClass('line-clamp-6')
+      expect(descriptionElement).toHaveClass('line-clamp-8')
     })
 
     it('shows full description when short', () => {
@@ -285,7 +287,7 @@ describe('ProgramCard', () => {
       expect(screen.getByText('Short description')).toBeInTheDocument()
 
       const descriptionElement = screen.getByText('Short description')
-      expect(descriptionElement).toHaveClass('line-clamp-6')
+      expect(descriptionElement).toHaveClass('line-clamp-8')
     })
 
     it('shows fallback text when description is empty', () => {
@@ -382,19 +384,6 @@ describe('ProgramCard', () => {
   })
 
   describe('Icons', () => {
-    it('renders eye icon for Preview button', () => {
-      render(
-        <ProgramCard
-          program={baseMockProgram}
-          isAdmin={true}
-          onView={mockOnView}
-          accessLevel="admin"
-        />
-      )
-
-      expect(screen.getByTestId('icon-eye')).toBeInTheDocument()
-    })
-
     it('renders actions button for admin menu', () => {
       render(
         <ProgramCard
@@ -407,23 +396,10 @@ describe('ProgramCard', () => {
 
       expect(screen.getByTestId('program-actions-button')).toBeInTheDocument()
     })
-
-    it('renders eye icon for View Details button', () => {
-      render(
-        <ProgramCard
-          isAdmin={false}
-          program={baseMockProgram}
-          onView={mockOnView}
-          accessLevel="user"
-        />
-      )
-
-      expect(screen.getByTestId('icon-eye')).toBeInTheDocument()
-    })
   })
 
   describe('Edge Cases', () => {
-    it('shows Edit Program in actions menu for admin access', () => {
+    it('shows Edit in actions menu for admin access', () => {
       render(
         <ProgramCard
           isAdmin={true}
@@ -434,7 +410,7 @@ describe('ProgramCard', () => {
       )
 
       fireEvent.click(screen.getByTestId('program-actions-button'))
-      expect(screen.getByText('Edit Program')).toBeInTheDocument()
+      expect(screen.getByText('Edit')).toBeInTheDocument()
     })
 
     it('handles program with minimal data', () => {
diff --git a/frontend/__tests__/unit/pages/CreateModule.test.tsx b/frontend/__tests__/unit/pages/CreateModule.test.tsx
index 6368b8645e..a334de0790 100644
--- a/frontend/__tests__/unit/pages/CreateModule.test.tsx
+++ b/frontend/__tests__/unit/pages/CreateModule.test.tsx
@@ -66,7 +66,7 @@ describe('CreateModulePage', () => {
     render(<CreateModulePage />)
 
     // Fill all inputs
-    fireEvent.change(screen.getByLabelText(/Module Name/i), {
+    fireEvent.change(screen.getByLabelText('Name *'), {
       target: { value: 'My Test Module' },
     })
     fireEvent.change(screen.getByLabelText(/Description/i), {
diff --git a/frontend/__tests__/unit/pages/CreateProgram.test.tsx b/frontend/__tests__/unit/pages/CreateProgram.test.tsx
index b32394cec8..80ae5db284 100644
--- a/frontend/__tests__/unit/pages/CreateProgram.test.tsx
+++ b/frontend/__tests__/unit/pages/CreateProgram.test.tsx
@@ -60,7 +60,7 @@ describe('CreateProgramPage (comprehensive tests)', () => {
 
     render(<CreateProgramPage />)
 
-    expect(screen.queryByLabelText('Program Name *')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('Name *')).not.toBeInTheDocument()
   })
 
   test('redirects with toast if not a project leader', async () => {
@@ -103,7 +103,7 @@ describe('CreateProgramPage (comprehensive tests)', () => {
 
     render(<CreateProgramPage />)
 
-    expect(await screen.findByLabelText('Program Name *')).toBeInTheDocument()
+    expect(await screen.findByLabelText('Name *')).toBeInTheDocument()
   })
 
   test('submits form and redirects on success', async () => {
@@ -127,7 +127,7 @@ describe('CreateProgramPage (comprehensive tests)', () => {
 
     render(<CreateProgramPage />)
 
-    fireEvent.change(screen.getByLabelText('Program Name *'), {
+    fireEvent.change(screen.getByLabelText('Name *'), {
       target: { value: 'Test Program' },
     })
     fireEvent.change(screen.getByLabelText('Description *'), {
@@ -186,7 +186,7 @@ describe('CreateProgramPage (comprehensive tests)', () => {
 
     render(<CreateProgramPage />)
 
-    fireEvent.change(screen.getByLabelText('Program Name *'), {
+    fireEvent.change(screen.getByLabelText('Name *'), {
       target: { value: 'Test Program' },
     })
     fireEvent.change(screen.getByLabelText('Description *'), {
diff --git a/frontend/__tests__/unit/pages/EditModule.test.tsx b/frontend/__tests__/unit/pages/EditModule.test.tsx
index b535b00259..e93e30bdd7 100644
--- a/frontend/__tests__/unit/pages/EditModule.test.tsx
+++ b/frontend/__tests__/unit/pages/EditModule.test.tsx
@@ -86,8 +86,8 @@ describe('EditModulePage', () => {
     expect(await screen.findByDisplayValue('Existing Module')).toBeInTheDocument()
 
     // Modify values
-    fireEvent.change(screen.getByLabelText(/Module Name/i), {
-      target: { value: 'Updated Module Name' },
+    fireEvent.change(screen.getByLabelText('Name *'), {
+      target: { value: 'Updated Name' },
     })
     fireEvent.change(screen.getByLabelText(/Description/i), {
       target: { value: 'Updated description' },
diff --git a/frontend/__tests__/unit/pages/EditProgram.test.tsx b/frontend/__tests__/unit/pages/EditProgram.test.tsx
index a82e7a7bf6..ff4cc020ab 100644
--- a/frontend/__tests__/unit/pages/EditProgram.test.tsx
+++ b/frontend/__tests__/unit/pages/EditProgram.test.tsx
@@ -88,7 +88,7 @@ describe('EditProgramPage', () => {
 
     render(<EditProgramPage />)
 
-    expect(await screen.findByLabelText('Program Name *')).toBeInTheDocument()
+    expect(await screen.findByLabelText('Name *')).toBeInTheDocument()
     expect(screen.getByDisplayValue('Test')).toBeInTheDocument()
   })
 })
diff --git a/frontend/__tests__/unit/pages/Program.test.tsx b/frontend/__tests__/unit/pages/Program.test.tsx
index 68aef54469..dff2dcbd27 100644
--- a/frontend/__tests__/unit/pages/Program.test.tsx
+++ b/frontend/__tests__/unit/pages/Program.test.tsx
@@ -61,7 +61,7 @@ describe('ProgramsPage Component', () => {
     })
 
     expect(screen.getByText('This is a summary of Program 1.')).toBeInTheDocument()
-    expect(screen.getByText('View Details')).toBeInTheDocument()
+    // Card is now clickable, no separate "View Details" button
   })
 
   test('shows empty message when no programs found', async () => {
@@ -91,14 +91,16 @@ describe('ProgramsPage Component', () => {
     })
   })
 
-  test('navigates to program detail page on View Details click', async () => {
+  test('navigates to program detail page on card click', async () => {
     render(<ProgramsPage />)
 
     await waitFor(() => {
-      const viewButton = screen.getByText('View Details')
-      fireEvent.click(viewButton)
+      expect(screen.getByText('Program 1')).toBeInTheDocument()
     })
 
+    const card = screen.getAllByRole('button')[0] // First program card
+    fireEvent.click(card)
+
     expect(mockRouter.push).toHaveBeenCalledWith('/mentorship/programs/program_1')
   })
 })
diff --git a/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx b/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
index c986ddf5ce..c6a7ad7b00 100644
--- a/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
+++ b/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useQuery } from '@apollo/client/react'
-import upperFirst from 'lodash/upperFirst'
+import capitalize from 'lodash/capitalize'
 import { useParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
@@ -49,7 +49,7 @@ const ModuleDetailsPage = () => {
   }
 
   const moduleDetails = [
-    { label: 'Experience Level', value: upperFirst(module.experienceLevel) },
+    { label: 'Experience Level', value: capitalize(module.experienceLevel) },
     { label: 'Start Date', value: formatDate(module.startedAt) },
     { label: 'End Date', value: formatDate(module.endedAt) },
     {
@@ -63,7 +63,6 @@ const ModuleDetailsPage = () => {
       admins={admins}
       details={moduleDetails}
       domains={module.domains}
-      labels={module.labels}
       mentors={module.mentors}
       summary={module.description}
       tags={module.tags}
diff --git a/frontend/src/app/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/mentorship/programs/[programKey]/page.tsx
index a80f54e179..23f25d0451 100644
--- a/frontend/src/app/mentorship/programs/[programKey]/page.tsx
+++ b/frontend/src/app/mentorship/programs/[programKey]/page.tsx
@@ -13,7 +13,7 @@ import DetailsCard from 'components/CardDetailsPage'
 import LoadingSpinner from 'components/LoadingSpinner'
 
 const ProgramDetailsPage = () => {
-  const { programKey } = useParams() as { programKey: string }
+  const { programKey } = useParams<{ programKey: string }>()
   const searchParams = useSearchParams()
   const router = useRouter()
   const shouldRefresh = searchParams.get('refresh') === 'true'
diff --git a/frontend/src/app/mentorship/programs/page.tsx b/frontend/src/app/mentorship/programs/page.tsx
index d02205b9b3..90524eac4f 100644
--- a/frontend/src/app/mentorship/programs/page.tsx
+++ b/frontend/src/app/mentorship/programs/page.tsx
@@ -54,7 +54,9 @@ const ProgramsPage = () => {
     >
       <div className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
         {programs &&
-          programs.filter((p) => p.status === ProgramStatusEnum.Published).map(renderProgramCard)}
+          programs
+            .filter((p) => p.status?.toUpperCase() === ProgramStatusEnum.Published)
+            .map(renderProgramCard)}
       </div>
     </SearchPageLayout>
   )
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx
index d4d0b8bc0b..d323bb943b 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx
@@ -17,7 +17,7 @@ import LoadingSpinner from 'components/LoadingSpinner'
 import ProgramForm from 'components/ProgramForm'
 const EditProgramPage = () => {
   const router = useRouter()
-  const { programKey } = useParams() as { programKey: string }
+  const { programKey } = useParams<{ programKey: string }>()
   const { data: session, status: sessionStatus } = useSession()
   const [updateProgram, { loading: mutationLoading }] = useMutation(UpdateProgramDocument)
   const {
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx
index 18d30c86c3..d1b294d107 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx
@@ -16,7 +16,7 @@ import LoadingSpinner from 'components/LoadingSpinner'
 import ModuleForm from 'components/ModuleForm'
 
 const EditModulePage = () => {
-  const { programKey, moduleKey } = useParams() as { programKey: string; moduleKey: string }
+  const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>()
   const router = useRouter()
   const { data: sessionData, status: sessionStatus } = useSession()
 
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
index cb406b4704..0af0bafed2 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
@@ -24,7 +24,7 @@ import SecondaryCard from 'components/SecondaryCard'
 import { TruncatedText } from 'components/TruncatedText'
 
 const ModuleIssueDetailsPage = () => {
-  const params = useParams() as { programKey: string; moduleKey: string; issueId: string }
+  const params = useParams<{ programKey: string; moduleKey: string; issueId: string }>()
   const { programKey, moduleKey, issueId } = params
 
   const formatDeadline = (deadline: string | null) => {
@@ -266,7 +266,7 @@ const ModuleIssueDetailsPage = () => {
                   className="flex items-center justify-between gap-2 rounded-lg bg-gray-200 p-3 dark:bg-gray-700"
                 >
                   <Link
-                    href={`/members/${a.login}`}
+                    href={`/mentees/${a.login}`}
                     className="inline-flex items-center gap-2 text-blue-600 hover:underline dark:text-blue-400"
                   >
                     {a.avatarUrl ? (
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx
index d24ea54c66..d5583561f3 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx
@@ -16,7 +16,7 @@ const LABEL_ALL = 'all'
 const MAX_VISIBLE_LABELS = 5
 
 const IssuesPage = () => {
-  const { programKey, moduleKey } = useParams() as { programKey: string; moduleKey: string }
+  const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>()
   const router = useRouter()
   const searchParams = useSearchParams()
   const [selectedLabel, setSelectedLabel] = useState<string>(searchParams.get('label') || LABEL_ALL)
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeHandle]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeKey]/page.tsx
similarity index 97%
rename from frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeHandle]/page.tsx
rename to frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeKey]/page.tsx
index 50eb297b0d..9c5e23d670 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeHandle]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeKey]/page.tsx
@@ -13,11 +13,11 @@ import LoadingSpinner from 'components/LoadingSpinner'
 import SecondaryCard from 'components/SecondaryCard'
 
 const MenteeProfilePage = () => {
-  const { programKey, moduleKey, menteeHandle } = useParams() as {
+  const { programKey, moduleKey, menteeKey } = useParams<{
     programKey: string
     moduleKey: string
-    menteeHandle: string
-  }
+    menteeKey: string
+  }>()
 
   const [menteeDetails, setMenteeDetails] = useState<MenteeDetails | null>(null)
   const [menteeIssues, setMenteeIssues] = useState<Issue[]>([])
@@ -29,9 +29,9 @@ const MenteeProfilePage = () => {
     variables: {
       programKey,
       moduleKey,
-      menteeHandle,
+      menteeKey,
     },
-    skip: !programKey || !moduleKey || !menteeHandle,
+    skip: !programKey || !moduleKey || !menteeKey,
     fetchPolicy: 'cache-and-network',
   })
 
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
index 957aba1023..989c30deae 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
@@ -12,7 +12,7 @@ import LoadingSpinner from 'components/LoadingSpinner'
 import { getSimpleDuration } from 'components/ModuleCard'
 
 const ModuleDetailsPage = () => {
-  const { programKey, moduleKey } = useParams() as { programKey: string; moduleKey: string }
+  const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>()
   const [module, setModule] = useState<Module | null>(null)
   const [admins, setAdmins] = useState(null)
   const [isLoading, setIsLoading] = useState(true)
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx
index 57b385b09e..a0666f8603 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx
@@ -18,7 +18,7 @@ import ModuleForm from 'components/ModuleForm'
 
 const CreateModulePage = () => {
   const router = useRouter()
-  const { programKey } = useParams() as { programKey: string }
+  const { programKey } = useParams<{ programKey: string }>()
   const { data: sessionData, status: sessionStatus } = useSession()
 
   const [createModule, { loading: mutationLoading }] = useMutation(CreateModuleDocument)
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
index a605c27597..e25859a092 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
@@ -17,7 +17,7 @@ import DetailsCard from 'components/CardDetailsPage'
 import LoadingSpinner from 'components/LoadingSpinner'
 
 const ProgramDetailsPage = () => {
-  const { programKey } = useParams() as { programKey: string }
+  const { programKey } = useParams<{ programKey: string }>()
 
   const { data: session } = useSession()
   const username = (session as ExtendedSession)?.user?.login
diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx
index 811c6b0f16..ab5d4a2314 100644
--- a/frontend/src/components/CardDetailsPage.tsx
+++ b/frontend/src/components/CardDetailsPage.tsx
@@ -9,7 +9,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import upperFirst from 'lodash/upperFirst'
-import { useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import type { ExtendedSession } from 'types/auth'
 import type { DetailsCardProps } from 'types/card'
@@ -18,6 +17,7 @@ import { scrollToAnchor } from 'utils/scrollToAnchor'
 import { getSocialIcon } from 'utils/urlIconMappings'
 import AnchorTitle from 'components/AnchorTitle'
 import ChapterMapWrapper from 'components/ChapterMapWrapper'
+import EntityActions from 'components/EntityActions'
 import HealthMetrics from 'components/HealthMetrics'
 import InfoBlock from 'components/InfoBlock'
 import Leaders from 'components/Leaders'
@@ -26,7 +26,6 @@ import MenteeContributorsList from 'components/MenteeContributorsList'
 import MetricsScoreCircle from 'components/MetricsScoreCircle'
 import Milestones from 'components/Milestones'
 import ModuleCard from 'components/ModuleCard'
-import ProgramActions from 'components/ProgramActions'
 import RecentIssues from 'components/RecentIssues'
 import RecentPullRequests from 'components/RecentPullRequests'
 import RecentReleases from 'components/RecentReleases'
@@ -76,7 +75,6 @@ const DetailsCard = ({
   userSummary,
 }: DetailsCardProps) => {
   const { data } = useSession()
-  const router = useRouter()
 
   // compute styles based on type prop
   const secondaryCardStyles = (() => {
@@ -94,36 +92,20 @@ const DetailsCard = ({
         <div className="mt-4 flex flex-row items-center">
           <div className="flex w-full items-center justify-between">
             <h1 className="text-4xl font-bold">{title}</h1>
-            {type === 'program' && accessLevel === 'admin' && canUpdateStatus && (
-              <ProgramActions programKey={programKey} status={status} setStatus={setStatus} />
-            )}
-            {type === 'module' &&
-              accessLevel === 'admin' &&
-              admins?.some(
-                (admin) => admin.login === ((data as ExtendedSession)?.user?.login as string)
-              ) && (
-                <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    className="flex items-center justify-center gap-2 rounded-md border border-[#1D7BD7] bg-transparent px-2 py-2 text-nowrap text-[#1D7BD7] hover:bg-[#1D7BD7] hover:text-white dark:hover:text-white"
-                    onClick={() => {
-                      router.push(`${globalThis.location.pathname}/issues`)
-                    }}
-                  >
-                    View Issues
-                  </button>
-                  <button
-                    type="button"
-                    className="flex items-center justify-center gap-2 rounded-md border border-[#1D7BD7] bg-transparent px-2 py-2 text-nowrap text-[#1D7BD7] hover:bg-[#1D7BD7] hover:text-white dark:hover:text-white"
-                    onClick={() => {
-                      router.push(`${globalThis.location.pathname}/edit`)
-                    }}
-                  >
-                    Edit Module
-                  </button>
-                </div>
-              )}
             <div className="flex items-center gap-3">
+              {type === 'program' && accessLevel === 'admin' && canUpdateStatus && (
+                <EntityActions
+                  type="program"
+                  programKey={programKey}
+                  status={status}
+                  setStatus={setStatus}
+                />
+              )}
+              {type === 'module' &&
+                accessLevel === 'admin' &&
+                admins?.some(
+                  (admin) => admin.login === ((data as ExtendedSession)?.user?.login as string)
+                ) && <EntityActions type="module" programKey={programKey} moduleKey={entityKey} />}
               {!isActive && <StatusBadge status="inactive" size="md" />}
               {isArchived && type === 'repository' && <StatusBadge status="archived" size="md" />}
               {IS_PROJECT_HEALTH_ENABLED && type === 'project' && healthMetricsData.length > 0 && (
@@ -223,26 +205,28 @@ const DetailsCard = ({
         )}
         {(type === 'program' || type === 'module') && (
           <>
-            <div
-              className={`mb-8 grid grid-cols-1 gap-6 ${(tags?.length || 0) === 0 || (domains?.length || 0) === 0 ? 'md:col-span-1' : 'md:grid-cols-2'}`}
-            >
-              {tags?.length > 0 && (
-                <ToggleableList
-                  items={tags}
-                  icon={faTags}
-                  label={<AnchorTitle title="Tags" />}
-                  isDisabled={true}
-                />
-              )}
-              {domains?.length > 0 && (
-                <ToggleableList
-                  items={domains}
-                  icon={faChartPie}
-                  label={<AnchorTitle title="Domains" />}
-                  isDisabled={true}
-                />
-              )}
-            </div>
+            {((tags?.length || 0) > 0 || (domains?.length || 0) > 0) && (
+              <div
+                className={`mb-8 grid grid-cols-1 gap-6 ${(tags?.length || 0) === 0 || (domains?.length || 0) === 0 ? 'md:col-span-1' : 'md:grid-cols-2'}`}
+              >
+                {tags?.length > 0 && (
+                  <ToggleableList
+                    items={tags}
+                    icon={faTags}
+                    label={<AnchorTitle title="Tags" />}
+                    isDisabled={true}
+                  />
+                )}
+                {domains?.length > 0 && (
+                  <ToggleableList
+                    items={domains}
+                    icon={faChartPie}
+                    label={<AnchorTitle title="Domains" />}
+                    isDisabled={true}
+                  />
+                )}
+              </div>
+            )}
             {labels?.length > 0 && (
               <div className="mb-8">
                 <ToggleableList
diff --git a/frontend/src/components/ProgramActions.tsx b/frontend/src/components/EntityActions.tsx
similarity index 52%
rename from frontend/src/components/ProgramActions.tsx
rename to frontend/src/components/EntityActions.tsx
index 881d846c91..69123ffc78 100644
--- a/frontend/src/components/ProgramActions.tsx
+++ b/frontend/src/components/EntityActions.tsx
@@ -7,49 +7,73 @@ import type React from 'react'
 import { useState, useRef, useEffect } from 'react'
 import { ProgramStatusEnum } from 'types/__generated__/graphql'
 
-interface ProgramActionsProps {
+interface EntityActionsProps {
+  type: 'program' | 'module'
   programKey: string
-  status: string
-  setStatus: (newStatus: string) => void
+  moduleKey?: string
+  status?: string
+  setStatus?: (newStatus: string) => void
 }
 
-const ProgramActions: React.FC<ProgramActionsProps> = ({ programKey, status, setStatus }) => {
+const EntityActions: React.FC<EntityActionsProps> = ({
+  type,
+  programKey,
+  moduleKey,
+  status,
+  setStatus,
+}) => {
   const router = useRouter()
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
 
   const handleAction = (actionKey: string) => {
     switch (actionKey) {
-      case 'edit Program':
+      case 'edit_program':
         router.push(`/my/mentorship/programs/${programKey}/edit`)
         break
       case 'create_module':
         router.push(`/my/mentorship/programs/${programKey}/modules/create`)
         break
+      case 'edit_module':
+        if (moduleKey) {
+          router.push(`/my/mentorship/programs/${programKey}/modules/${moduleKey}/edit`)
+        }
+        break
+      case 'view_issues':
+        if (moduleKey) {
+          router.push(`/my/mentorship/programs/${programKey}/modules/${moduleKey}/issues`)
+        }
+        break
       case 'publish':
-        setStatus(ProgramStatusEnum.Published)
+        setStatus?.(ProgramStatusEnum.Published)
         break
       case 'draft':
-        setStatus(ProgramStatusEnum.Draft)
+        setStatus?.(ProgramStatusEnum.Draft)
         break
       case 'completed':
-        setStatus(ProgramStatusEnum.Completed)
+        setStatus?.(ProgramStatusEnum.Completed)
         break
     }
     setDropdownOpen(false)
   }
 
-  const options = [
-    { key: 'edit Program', label: 'Edit Program' },
-    { key: 'create_module', label: 'Add Module' },
-    ...(status === ProgramStatusEnum.Draft ? [{ key: 'publish', label: 'Publish Program' }] : []),
-    ...(status === ProgramStatusEnum.Published || status === ProgramStatusEnum.Completed
-      ? [{ key: 'draft', label: 'Move to Draft' }]
-      : []),
-    ...(status === ProgramStatusEnum.Published
-      ? [{ key: 'completed', label: 'Mark as Completed' }]
-      : []),
-  ]
+  const options =
+    type === 'program'
+      ? [
+          { key: 'edit_program', label: 'Edit' },
+          { key: 'create_module', label: 'Add Module' },
+          ...(status === ProgramStatusEnum.Draft ? [{ key: 'publish', label: 'Publish' }] : []),
+          ...(status === ProgramStatusEnum.Published || status === ProgramStatusEnum.Completed
+            ? [{ key: 'draft', label: 'Unpublish' }]
+            : []),
+          ...(status === ProgramStatusEnum.Published
+            ? [{ key: 'completed', label: 'Mark as Completed' }]
+            : []),
+        ]
+      : [
+          { key: 'edit_module', label: 'Edit' },
+          { key: 'view_issues', label: 'View Issues' },
+        ]
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -67,11 +91,14 @@ const ProgramActions: React.FC<ProgramActionsProps> = ({ programKey, status, set
   return (
     <div className="relative" ref={dropdownRef}>
       <button
-        data-testid="program-actions-button"
+        data-testid={`${type}-actions-button`}
         type="button"
-        onClick={() => setDropdownOpen((prev) => !prev)}
-        className="rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
-        aria-label="Program actions menu"
+        onClick={(e) => {
+          e.stopPropagation()
+          setDropdownOpen((prev) => !prev)
+        }}
+        className="cursor-pointer rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
+        aria-label={`${type === 'program' ? 'Program' : 'Module'} actions menu`}
         aria-expanded={dropdownOpen}
         aria-haspopup="true"
       >
@@ -88,7 +115,7 @@ const ProgramActions: React.FC<ProgramActionsProps> = ({ programKey, status, set
               type="button"
               role="menuitem"
               onClick={() => handleAction(option.key)}
-              className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+              className="block w-full cursor-pointer px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
             >
               {option.label}
             </button>
@@ -99,4 +126,4 @@ const ProgramActions: React.FC<ProgramActionsProps> = ({ programKey, status, set
   )
 }
 
-export default ProgramActions
+export default EntityActions
diff --git a/frontend/src/components/ModuleCard.tsx b/frontend/src/components/ModuleCard.tsx
index 66c71f8d54..58cf05bc74 100644
--- a/frontend/src/components/ModuleCard.tsx
+++ b/frontend/src/components/ModuleCard.tsx
@@ -38,12 +38,13 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {
   }
 
   const displayedModule = showAllModule ? modules : modules.slice(0, 4)
+  const isAdmin = accessLevel === 'admin'
 
   return (
     <div>
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {displayedModule.map((module) => {
-          return <ModuleItem key={module.key || module.id} details={module} />
+          return <ModuleItem key={module.key || module.id} module={module} isAdmin={isAdmin} />
         })}
       </div>
       {modules.length > 4 && (
@@ -69,26 +70,26 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {
   )
 }
 
-const ModuleItem = ({ details }: { details: Module }) => {
+const ModuleItem = ({ module, isAdmin }: { module: Module; isAdmin: boolean }) => {
   const pathname = usePathname()
   return (
     <div className="flex h-46 w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
       <Link
-        href={`${pathname}/modules/${details.key}`}
+        href={`${pathname}/modules/${module.key}`}
         className="text-start font-semibold text-blue-400 hover:underline"
       >
-        <TruncatedText text={details?.name} />
+        <TruncatedText text={module?.name} />
       </Link>
-      <TextInfoItem icon={faLevelUpAlt} label="Level" value={upperFirst(details.experienceLevel)} />
-      <TextInfoItem icon={faCalendarAlt} label="Start" value={formatDate(details.startedAt)} />
+      <TextInfoItem icon={faLevelUpAlt} label="Level" value={upperFirst(module.experienceLevel)} />
+      <TextInfoItem icon={faCalendarAlt} label="Start" value={formatDate(module.startedAt)} />
       <TextInfoItem
         icon={faHourglassHalf}
         label="Duration"
-        value={getSimpleDuration(details.startedAt, details.endedAt)}
+        value={getSimpleDuration(module.startedAt, module.endedAt)}
       />
-      {details.labels && details.labels.length > 0 && (
+      {isAdmin && module.labels && module.labels.length > 0 && (
         <div className="mt-2">
-          <LabelList labels={details.labels} maxVisible={3} />
+          <LabelList labels={module.labels} maxVisible={3} />
         </div>
       )}
     </div>
diff --git a/frontend/src/components/ModuleForm.tsx b/frontend/src/components/ModuleForm.tsx
index ace8d99723..0768291a4e 100644
--- a/frontend/src/components/ModuleForm.tsx
+++ b/frontend/src/components/ModuleForm.tsx
@@ -63,13 +63,10 @@ const ModuleForm = ({
         <form onSubmit={onSubmit}>
           <div className="flex flex-col gap-8 p-8">
             <section className="flex flex-col gap-6">
-              <h2 className="mb-6 text-2xl font-semibold text-gray-600 dark:text-gray-300">
-                Module Information
-              </h2>
               <div className="grid grid-cols-1 gap-6 text-gray-600 lg:grid-cols-2 dark:text-gray-300">
                 <div className="lg:col-span-2">
                   <label htmlFor="module-name" className="mb-2 block text-sm font-semibold">
-                    Module Name *
+                    Name *
                   </label>
                   <input
                     id="module-name"
@@ -100,9 +97,6 @@ const ModuleForm = ({
             </section>
 
             <section className="flex flex-col gap-6">
-              <h2 className="mb-6 text-2xl font-semibold text-gray-600 dark:text-gray-300">
-                Module Configuration
-              </h2>
               <div className="grid grid-cols-1 gap-6 text-gray-600 md:grid-cols-2 lg:grid-cols-3 dark:text-gray-300">
                 <div>
                   <label htmlFor="startedAt" className="mb-2 block text-sm font-semibold">
@@ -154,9 +148,6 @@ const ModuleForm = ({
             </section>
 
             <section className="flex flex-col gap-6">
-              <h2 className="mb-6 text-2xl font-semibold text-gray-600 dark:text-gray-300">
-                Additional Details
-              </h2>
               <div className="grid grid-cols-1 gap-6 text-gray-600 lg:grid-cols-2 dark:text-gray-300">
                 <div>
                   <label htmlFor="domains" className="mb-2 block text-sm font-semibold">
diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
index 4721f80074..e870c591f9 100644
--- a/frontend/src/components/ProgramCard.tsx
+++ b/frontend/src/components/ProgramCard.tsx
@@ -1,12 +1,9 @@
-import { faEye } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import { useUpdateProgramStatus } from 'hooks/useUpdateProgramStatus'
 import type React from 'react'
 import { GetProgramAndModulesDocument } from 'types/__generated__/programsQueries.generated'
 import { Program } from 'types/mentorship'
-import ActionButton from 'components/ActionButton'
-import ProgramActions from 'components/ProgramActions'
+import EntityActions from 'components/EntityActions'
 
 interface ProgramCardProps {
   program: Program
@@ -56,9 +53,20 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
   })()
 
   return (
-    <div className="h-72 w-72 rounded-lg border border-gray-400 bg-white p-6 text-left transition-transform duration-300 hover:scale-[1.02] hover:brightness-105 md:h-80 md:w-80 lg:h-80 lg:w-96 dark:border-gray-600 dark:bg-gray-800">
+    <div
+      onClick={() => onView(program.key)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onView(program.key)
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      className="group h-72 w-72 cursor-pointer rounded-lg border border-gray-400 bg-white p-6 text-left transition-transform duration-300 hover:scale-[1.02] hover:brightness-105 md:h-80 md:w-80 lg:h-80 lg:w-96 dark:border-gray-600 dark:bg-gray-800"
+    >
       <div className="flex h-full flex-col">
-        <div className="flex flex-1 flex-col pb-8">
+        <div className="flex flex-1 flex-col">
           <div className="mb-2 flex items-start justify-between">
             <Tooltip
               closeDelay={100}
@@ -73,7 +81,8 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
               </h3>
             </Tooltip>
             {accessLevel === 'admin' && isAdmin && (
-              <ProgramActions
+              <EntityActions
+                type="program"
                 programKey={program.key}
                 status={program.status}
                 setStatus={updateProgramStatus}
@@ -92,16 +101,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
               </span>
             )}
           </div>
-          <p className="mb-4 line-clamp-6 text-sm text-gray-700 dark:text-gray-300">
-            {description}
-          </p>
-        </div>
-
-        <div className="flex gap-2">
-          <ActionButton onClick={() => onView(program.key)}>
-            <FontAwesomeIcon icon={faEye} className="mr-1" />
-            {accessLevel === 'admin' ? 'Preview' : 'View Details'}
-          </ActionButton>
+          <p className="line-clamp-8 text-sm text-gray-700 dark:text-gray-300">{description}</p>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/ProgramForm.tsx b/frontend/src/components/ProgramForm.tsx
index f1b877eda2..fed1560821 100644
--- a/frontend/src/components/ProgramForm.tsx
+++ b/frontend/src/components/ProgramForm.tsx
@@ -61,13 +61,10 @@ const ProgramForm = ({
           <div className="flex flex-col gap-8 p-8">
             {/* Basic Information */}
             <section className="flex flex-col gap-6">
-              <h2 className="mb-6 text-2xl font-semibold text-gray-600 dark:text-gray-300">
-                Basic Information
-              </h2>
               <div className="grid grid-cols-1 gap-6 text-gray-600 lg:grid-cols-2 dark:text-gray-300">
                 <div className="lg:col-span-2">
                   <label htmlFor="program-name" className="mb-2 block text-sm font-semibold">
-                    Program Name *
+                    Name *
                   </label>
                   <input
                     id="program-name"
@@ -99,9 +96,6 @@ const ProgramForm = ({
 
             {/* Configuration */}
             <section className="flex flex-col gap-6 text-gray-600 dark:text-gray-300">
-              <h2 className="mb-6 text-2xl font-semibold text-gray-600 dark:text-gray-300">
-                Program Configuration
-              </h2>
               <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                 <div>
                   <label htmlFor="program-start-date" className="mb-2 block text-sm font-semibold">
@@ -151,9 +145,6 @@ const ProgramForm = ({
 
             {/* Additional Details */}
             <section className="flex flex-col gap-6">
-              <h2 className="mb-6 text-2xl font-semibold text-gray-600 dark:text-gray-300">
-                Additional Details
-              </h2>
               <div className="grid grid-cols-1 gap-6 text-gray-600 lg:grid-cols-2 dark:text-gray-300">
                 <div>
                   <label htmlFor="program-tags" className="mb-2 block text-sm font-semibold">
diff --git a/frontend/src/components/SingleModuleCard.tsx b/frontend/src/components/SingleModuleCard.tsx
index f41783e415..34ddbb2d8f 100644
--- a/frontend/src/components/SingleModuleCard.tsx
+++ b/frontend/src/components/SingleModuleCard.tsx
@@ -1,13 +1,13 @@
-import { faUsers, faEllipsisV } from '@fortawesome/free-solid-svg-icons'
+import { faUsers } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { capitalize } from 'lodash'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
-import React, { useState, useRef, useEffect } from 'react'
+import React from 'react'
 import { ExtendedSession } from 'types/auth'
 import type { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
+import EntityActions from 'components/EntityActions'
 import { getSimpleDuration } from 'components/ModuleCard'
 import TopContributorsList from 'components/TopContributorsList'
 
@@ -20,35 +20,15 @@ interface SingleModuleCardProps {
   }[]
 }
 
-const SingleModuleCard: React.FC<SingleModuleCardProps> = ({
-  module,
-  showEdit,
-  accessLevel,
-  admins,
-}) => {
-  const router = useRouter()
+const SingleModuleCard: React.FC<SingleModuleCardProps> = ({ module, accessLevel, admins }) => {
   const { data } = useSession()
-  const [dropdownOpen, setDropdownOpen] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
 
   const isAdmin =
     accessLevel === 'admin' &&
     admins?.some((admin) => admin.login === ((data as ExtendedSession)?.user?.login as string))
 
-  const handleEdit = () => {
-    setDropdownOpen(false)
-    router.push(`${globalThis.location.pathname}/modules/${module.key}/edit`)
-  }
-
-  const handleCreate = () => {
-    setDropdownOpen(false)
-    router.push(`${globalThis.location.pathname}/modules/create`)
-  }
-
-  const handleIssue = () => {
-    setDropdownOpen(false)
-    router.push(`${globalThis.location.pathname}/modules/${module.key}/issues`)
-  }
+  // Extract programKey from pathname (e.g., /my/mentorship/programs/[programKey])
+  const programKey = globalThis.location?.pathname.split('/programs/')[1]?.split('/')[0] || ''
 
   const moduleDetails = [
     { label: 'Experience Level', value: capitalize(module.experienceLevel) },
@@ -57,16 +37,6 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({
     { label: 'Duration', value: getSimpleDuration(module.startedAt, module.endedAt) },
   ]
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setDropdownOpen(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
-
   return (
     <div className="flex flex-col gap-4 rounded-xl border border-gray-200 p-5 shadow-md dark:border-gray-700">
       <div className="flex items-center justify-between">
@@ -89,45 +59,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({
           </Link>
         </div>
 
-        {isAdmin && (
-          <div className="relative" ref={dropdownRef}>
-            <button
-              onClick={() => setDropdownOpen((prev) => !prev)}
-              className="rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
-            >
-              <FontAwesomeIcon icon={faEllipsisV} />
-            </button>
-
-            {dropdownOpen && (
-              <div className="absolute right-0 z-20 mt-2 w-40 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
-                {showEdit && isAdmin && (
-                  <button
-                    onClick={handleEdit}
-                    className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
-                  >
-                    Edit Module
-                  </button>
-                )}
-                {isAdmin && (
-                  <button
-                    onClick={handleCreate}
-                    className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
-                  >
-                    Create Module
-                  </button>
-                )}
-                {isAdmin && (
-                  <button
-                    onClick={handleIssue}
-                    className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
-                  >
-                    View Issues
-                  </button>
-                )}
-              </div>
-            )}
-          </div>
-        )}
+        {isAdmin && <EntityActions type="module" programKey={programKey} moduleKey={module.key} />}
       </div>
 
       {/* Description */}
diff --git a/frontend/src/server/queries/menteeQueries.ts b/frontend/src/server/queries/menteeQueries.ts
index e87c81db31..53db7fc7a7 100644
--- a/frontend/src/server/queries/menteeQueries.ts
+++ b/frontend/src/server/queries/menteeQueries.ts
@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client'
 
 export const GET_MODULE_MENTEE_DETAILS = gql`
-  query GetModuleMenteeDetails($programKey: String!, $moduleKey: String!, $menteeHandle: String!) {
-    getMenteeDetails(programKey: $programKey, moduleKey: $moduleKey, menteeHandle: $menteeHandle) {
+  query GetModuleMenteeDetails($programKey: String!, $moduleKey: String!, $menteeKey: String!) {
+    getMenteeDetails(programKey: $programKey, moduleKey: $moduleKey, menteeKey: $menteeKey) {
       id
       login
       name
@@ -15,7 +15,7 @@ export const GET_MODULE_MENTEE_DETAILS = gql`
     getMenteeModuleIssues(
       programKey: $programKey
       moduleKey: $moduleKey
-      menteeHandle: $menteeHandle
+      menteeKey: $menteeKey
       limit: 50
     ) {
       id
diff --git a/frontend/src/types/__generated__/graphql.ts b/frontend/src/types/__generated__/graphql.ts
index 651887d182..7a879917c3 100644
--- a/frontend/src/types/__generated__/graphql.ts
+++ b/frontend/src/types/__generated__/graphql.ts
@@ -725,7 +725,7 @@ export type QueryCommitteeArgs = {
 
 
 export type QueryGetMenteeDetailsArgs = {
-  menteeHandle: Scalars['String']['input'];
+  menteeKey: Scalars['String']['input'];
   moduleKey: Scalars['String']['input'];
   programKey: Scalars['String']['input'];
 };
@@ -733,7 +733,7 @@ export type QueryGetMenteeDetailsArgs = {
 
 export type QueryGetMenteeModuleIssuesArgs = {
   limit?: Scalars['Int']['input'];
-  menteeHandle: Scalars['String']['input'];
+  menteeKey: Scalars['String']['input'];
   moduleKey: Scalars['String']['input'];
   offset?: Scalars['Int']['input'];
   programKey: Scalars['String']['input'];
diff --git a/frontend/src/types/__generated__/menteeQueries.generated.ts b/frontend/src/types/__generated__/menteeQueries.generated.ts
index cc41e54a5d..07555d6be5 100644
--- a/frontend/src/types/__generated__/menteeQueries.generated.ts
+++ b/frontend/src/types/__generated__/menteeQueries.generated.ts
@@ -4,11 +4,11 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
 export type GetModuleMenteeDetailsQueryVariables = Types.Exact<{
   programKey: Types.Scalars['String']['input'];
   moduleKey: Types.Scalars['String']['input'];
-  menteeHandle: Types.Scalars['String']['input'];
+  menteeKey: Types.Scalars['String']['input'];
 }>;
 
 
 export type GetModuleMenteeDetailsQuery = { getMenteeDetails: { __typename: 'MenteeNode', id: string, login: string, name: string, avatarUrl: string, bio: string | null, experienceLevel: string, domains: Array<string> | null, tags: Array<string> | null }, getMenteeModuleIssues: Array<{ __typename: 'IssueNode', id: string, number: number, title: string, state: string, labels: Array<string>, createdAt: any, url: string, assignees: Array<{ __typename: 'UserNode', login: string, name: string, avatarUrl: string }> }> };
 
 
-export const GetModuleMenteeDetailsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetModuleMenteeDetails"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"programKey"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"moduleKey"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"menteeHandle"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getMenteeDetails"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"programKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"programKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"moduleKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"moduleKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"menteeHandle"},"value":{"kind":"Variable","name":{"kind":"Name","value":"menteeHandle"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"Field","name":{"kind":"Name","value":"experienceLevel"}},{"kind":"Field","name":{"kind":"Name","value":"domains"}},{"kind":"Field","name":{"kind":"Name","value":"tags"}}]}},{"kind":"Field","name":{"kind":"Name","value":"getMenteeModuleIssues"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"programKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"programKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"moduleKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"moduleKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"menteeHandle"},"value":{"kind":"Variable","name":{"kind":"Name","value":"menteeHandle"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"50"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"labels"}},{"kind":"Field","name":{"kind":"Name","value":"assignees"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]} as unknown as DocumentNode<GetModuleMenteeDetailsQuery, GetModuleMenteeDetailsQueryVariables>;
\ No newline at end of file
+export const GetModuleMenteeDetailsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetModuleMenteeDetails"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"programKey"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"moduleKey"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"menteeKey"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getMenteeDetails"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"programKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"programKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"moduleKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"moduleKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"menteeKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"menteeKey"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"Field","name":{"kind":"Name","value":"experienceLevel"}},{"kind":"Field","name":{"kind":"Name","value":"domains"}},{"kind":"Field","name":{"kind":"Name","value":"tags"}}]}},{"kind":"Field","name":{"kind":"Name","value":"getMenteeModuleIssues"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"programKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"programKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"moduleKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"moduleKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"menteeKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"menteeKey"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"50"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"labels"}},{"kind":"Field","name":{"kind":"Name","value":"assignees"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]} as unknown as DocumentNode<GetModuleMenteeDetailsQuery, GetModuleMenteeDetailsQueryVariables>;
\ No newline at end of file

From 5eacc1eedf034b96e71bb0bd4ae242f9116c4fad Mon Sep 17 00:00:00 2001
From: Kate <kate@kgthreads.com>
Date: Tue, 25 Nov 2025 19:17:14 -0800
Subject: [PATCH 2/6] Address comments

---
 .../unit/components/ProgramCard.test.tsx      |  59 ++++++---
 .../unit/components/SingleModuleCard.test.tsx |  31 +++--
 .../[moduleKey]/issues/[issueId]/page.tsx     |   2 +-
 .../[moduleKey]/mentees/[menteeKey]/page.tsx  |   8 +-
 frontend/src/components/EntityActions.tsx     | 116 +++++++++++++-----
 frontend/src/components/ModuleCard.tsx        |   9 +-
 frontend/src/components/ProgramCard.tsx       |  14 +--
 frontend/src/components/SingleModuleCard.tsx  |   9 +-
 8 files changed, 165 insertions(+), 83 deletions(-)

diff --git a/frontend/__tests__/unit/components/ProgramCard.test.tsx b/frontend/__tests__/unit/components/ProgramCard.test.tsx
index 0381faf3d8..2cf1d4fef0 100644
--- a/frontend/__tests__/unit/components/ProgramCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramCard.test.tsx
@@ -1,12 +1,16 @@
 import { faEye } from '@fortawesome/free-regular-svg-icons'
 import { faEdit } from '@fortawesome/free-solid-svg-icons'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { useRouter } from 'next/navigation'
 import React from 'react'
 import { ProgramStatusEnum } from 'types/__generated__/graphql'
 import type { Program } from 'types/mentorship'
 import ProgramCard from 'components/ProgramCard'
 
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+}))
+
 jest.mock('@fortawesome/react-fontawesome', () => ({
   FontAwesomeIcon: ({ icon, className }: { icon: unknown; className?: string }) => {
     let iconName = 'unknown'
@@ -46,8 +50,23 @@ jest.mock('@heroui/tooltip', () => ({
   ),
 }))
 
+jest.mock('components/EntityActions', () => jest.requireActual('components/EntityActions'))
+
 describe('ProgramCard', () => {
   const mockOnView = jest.fn()
+  const mockPush = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    ;(useRouter as jest.Mock).mockReturnValue({
+      push: mockPush,
+      back: jest.fn(),
+      forward: jest.fn(),
+      refresh: jest.fn(),
+      replace: jest.fn(),
+      prefetch: jest.fn(),
+    })
+  })
 
   const baseMockProgram: Program = {
     id: '1',
@@ -60,10 +79,6 @@ describe('ProgramCard', () => {
     userRole: 'admin',
   }
 
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
   describe('Basic Rendering', () => {
     it('renders program name correctly', () => {
       render(
@@ -116,15 +131,13 @@ describe('ProgramCard', () => {
         />
       )
 
-      const card = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement
+      const card = container.querySelector('button[type="button"]') as HTMLElement
       fireEvent.click(card)
 
       expect(mockOnView).toHaveBeenCalledWith('test-program')
     })
 
-    it('navigates to edit page when Edit is clicked', () => {
-      const router = useRouter()
-
+    it('navigates to edit page when Edit is clicked', async () => {
       render(
         <ProgramCard
           program={baseMockProgram}
@@ -134,10 +147,21 @@ describe('ProgramCard', () => {
         />
       )
 
-      fireEvent.click(screen.getByTestId('program-actions-button'))
-      fireEvent.click(screen.getByText('Edit'))
+      const actionsButton = screen.getByTestId('program-actions-button')
 
-      expect(router.push).toHaveBeenCalledWith('/my/mentorship/programs/test-program/edit')
+      await act(async () => {
+        fireEvent.click(actionsButton)
+      })
+
+      const editButton = await waitFor(() => {
+        return screen.getByText('Edit')
+      })
+
+      await act(async () => {
+        fireEvent.click(editButton)
+      })
+
+      expect(mockPush).toHaveBeenCalledWith('/my/mentorship/programs/test-program/edit')
     })
   })
 
@@ -155,7 +179,7 @@ describe('ProgramCard', () => {
       expect(screen.queryByText('admin')).not.toBeInTheDocument()
     })
 
-    it('shows only View Details button for user access', () => {
+    it('shows clickable card for user access', () => {
       render(
         <ProgramCard
           isAdmin={false}
@@ -165,7 +189,7 @@ describe('ProgramCard', () => {
         />
       )
 
-      const card = document.querySelector('[role="button"][tabindex="0"]')
+      const card = document.querySelector('button[type="button"]')
       expect(card).toBeInTheDocument()
       expect(screen.queryByText('Preview')).not.toBeInTheDocument()
       expect(screen.queryByText('Edit')).not.toBeInTheDocument()
@@ -182,7 +206,7 @@ describe('ProgramCard', () => {
         />
       )
 
-      const card = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement
+      const card = container.querySelector('button[type="button"]') as HTMLElement
       fireEvent.click(card)
 
       expect(mockOnView).toHaveBeenCalledWith('test-program')
@@ -399,7 +423,7 @@ describe('ProgramCard', () => {
   })
 
   describe('Edge Cases', () => {
-    it('shows Edit in actions menu for admin access', () => {
+    it('shows actions button for admin access', () => {
       render(
         <ProgramCard
           isAdmin={true}
@@ -409,8 +433,7 @@ describe('ProgramCard', () => {
         />
       )
 
-      fireEvent.click(screen.getByTestId('program-actions-button'))
-      expect(screen.getByText('Edit')).toBeInTheDocument()
+      expect(screen.getByTestId('program-actions-button')).toBeInTheDocument()
     })
 
     it('handles program with minimal data', () => {
diff --git a/frontend/__tests__/unit/components/SingleModuleCard.test.tsx b/frontend/__tests__/unit/components/SingleModuleCard.test.tsx
index d56a026ca6..92fdd0e6f7 100644
--- a/frontend/__tests__/unit/components/SingleModuleCard.test.tsx
+++ b/frontend/__tests__/unit/components/SingleModuleCard.test.tsx
@@ -1,6 +1,6 @@
 import { faUsers } from '@fortawesome/free-solid-svg-icons'
 import { screen } from '@testing-library/react'
-import { useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import React from 'react'
 import { render } from 'wrappers/testUtil'
@@ -11,6 +11,7 @@ import SingleModuleCard from 'components/SingleModuleCard'
 // Mock dependencies
 jest.mock('next/navigation', () => ({
   useRouter: jest.fn(),
+  usePathname: jest.fn(),
 }))
 
 jest.mock('next-auth/react', () => ({
@@ -80,6 +81,7 @@ jest.mock('components/TopContributorsList', () => ({
 
 const mockPush = jest.fn()
 const mockUseRouter = useRouter as jest.MockedFunction<typeof useRouter>
+const mockUsePathname = usePathname as jest.MockedFunction<typeof usePathname>
 const mockUseSession = useSession as jest.MockedFunction<typeof useSession>
 
 // Test data
@@ -122,6 +124,7 @@ describe('SingleModuleCard', () => {
       replace: jest.fn(),
       prefetch: jest.fn(),
     })
+    mockUsePathname.mockReturnValue('/my/mentorship/programs/test-program')
     mockUseSession.mockReturnValue({
       data: null,
       status: 'unauthenticated',
@@ -166,7 +169,10 @@ describe('SingleModuleCard', () => {
       render(<SingleModuleCard module={mockModule} />)
 
       const moduleLink = screen.getByTestId('module-link')
-      expect(moduleLink).toHaveAttribute('href', '//modules/test-module')
+      expect(moduleLink).toHaveAttribute(
+        'href',
+        '/my/mentorship/programs/test-program/modules/test-module'
+      )
       expect(moduleLink).toHaveAttribute('target', '_blank')
       expect(moduleLink).toHaveAttribute('rel', 'noopener noreferrer')
     })
@@ -183,7 +189,10 @@ describe('SingleModuleCard', () => {
 
       // Should have clickable title for navigation
       const moduleLink = screen.getByTestId('module-link')
-      expect(moduleLink).toHaveAttribute('href', '//modules/test-module')
+      expect(moduleLink).toHaveAttribute(
+        'href',
+        '/my/mentorship/programs/test-program/modules/test-module'
+      )
     })
   })
 
@@ -197,14 +206,7 @@ describe('SingleModuleCard', () => {
 
     it('ignores admin-related props since menu is removed', () => {
       // These props are now ignored but should not cause errors
-      render(
-        <SingleModuleCard
-          module={mockModule}
-          showEdit={true}
-          accessLevel="admin"
-          admins={mockAdmins}
-        />
-      )
+      render(<SingleModuleCard module={mockModule} accessLevel="admin" admins={mockAdmins} />)
 
       expect(screen.getByText('Test Module')).toBeInTheDocument()
     })
@@ -225,7 +227,7 @@ describe('SingleModuleCard', () => {
     })
 
     it('handles undefined admins array gracefully', () => {
-      render(<SingleModuleCard module={mockModule} showEdit={true} accessLevel="admin" />)
+      render(<SingleModuleCard module={mockModule} accessLevel="admin" />)
 
       // Should render without errors even with admin props
       expect(screen.getByText('Test Module')).toBeInTheDocument()
@@ -238,7 +240,10 @@ describe('SingleModuleCard', () => {
 
       const moduleLink = screen.getByTestId('module-link')
       expect(moduleLink).toBeInTheDocument()
-      expect(moduleLink).toHaveAttribute('href', '//modules/test-module')
+      expect(moduleLink).toHaveAttribute(
+        'href',
+        '/my/mentorship/programs/test-program/modules/test-module'
+      )
       expect(moduleLink).toHaveAttribute('target', '_blank')
       expect(moduleLink).toHaveAttribute('rel', 'noopener noreferrer')
     })
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
index 0af0bafed2..322ef9f27b 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
@@ -266,7 +266,7 @@ const ModuleIssueDetailsPage = () => {
                   className="flex items-center justify-between gap-2 rounded-lg bg-gray-200 p-3 dark:bg-gray-700"
                 >
                   <Link
-                    href={`/mentees/${a.login}`}
+                    href={`/my/mentorship/programs/${programKey}/modules/${moduleKey}/mentees/${a.login}`}
                     className="inline-flex items-center gap-2 text-blue-600 hover:underline dark:text-blue-400"
                   >
                     {a.avatarUrl ? (
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeKey]/page.tsx
index 9c5e23d670..5a8864ea97 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeKey]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeKey]/page.tsx
@@ -63,8 +63,12 @@ const MenteeProfilePage = () => {
   const openIssues = menteeIssues.filter((issue) => issue.state.toLowerCase() === 'open')
   const closedIssues = menteeIssues.filter((issue) => issue.state.toLowerCase() === 'closed')
 
-  const filteredIssues =
-    statusFilter === 'all' ? menteeIssues : statusFilter === 'open' ? openIssues : closedIssues
+  const issueMap: Record<string, Issue[]> = {
+    all: menteeIssues,
+    open: openIssues,
+    closed: closedIssues,
+  }
+  const filteredIssues = issueMap[statusFilter] || closedIssues
 
   return (
     <div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
diff --git a/frontend/src/components/EntityActions.tsx b/frontend/src/components/EntityActions.tsx
index 69123ffc78..0dc53aa73a 100644
--- a/frontend/src/components/EntityActions.tsx
+++ b/frontend/src/components/EntityActions.tsx
@@ -13,6 +13,7 @@ interface EntityActionsProps {
   moduleKey?: string
   status?: string
   setStatus?: (newStatus: string) => void
+  insideButton?: boolean // When true, uses div instead of button to avoid nested buttons
 }
 
 const EntityActions: React.FC<EntityActionsProps> = ({
@@ -21,6 +22,7 @@ const EntityActions: React.FC<EntityActionsProps> = ({
   moduleKey,
   status,
   setStatus,
+  insideButton = false,
 }) => {
   const router = useRouter()
   const [dropdownOpen, setDropdownOpen] = useState(false)
@@ -88,38 +90,96 @@ const EntityActions: React.FC<EntityActionsProps> = ({
     }
   }, [])
 
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setDropdownOpen((prev) => !prev)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      e.stopPropagation()
+      setDropdownOpen((prev) => !prev)
+    }
+  }
+
   return (
     <div className="relative" ref={dropdownRef}>
-      <button
-        data-testid={`${type}-actions-button`}
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation()
-          setDropdownOpen((prev) => !prev)
-        }}
-        className="cursor-pointer rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
-        aria-label={`${type === 'program' ? 'Program' : 'Module'} actions menu`}
-        aria-expanded={dropdownOpen}
-        aria-haspopup="true"
-      >
-        <FontAwesomeIcon
-          className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200"
-          icon={faEllipsisV}
-        />
-      </button>
+      {insideButton ? (
+        <div
+          data-testid={`${type}-actions-button`}
+          role="button"
+          tabIndex={0}
+          onKeyDown={handleKeyDown}
+          onClick={handleToggle}
+          className="cursor-pointer rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
+          aria-label={`${type === 'program' ? 'Program' : 'Module'} actions menu`}
+          aria-expanded={dropdownOpen}
+          aria-haspopup="true"
+        >
+          <FontAwesomeIcon
+            className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200"
+            icon={faEllipsisV}
+          />
+        </div>
+      ) : (
+        <button
+          data-testid={`${type}-actions-button`}
+          type="button"
+          onClick={handleToggle}
+          className="cursor-pointer rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
+          aria-label={`${type === 'program' ? 'Program' : 'Module'} actions menu`}
+          aria-expanded={dropdownOpen}
+          aria-haspopup="true"
+        >
+          <FontAwesomeIcon
+            className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200"
+            icon={faEllipsisV}
+          />
+        </button>
+      )}
       {dropdownOpen && (
         <div className="absolute right-0 z-20 mt-2 w-40 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
-          {options.map((option) => (
-            <button
-              key={option.key}
-              type="button"
-              role="menuitem"
-              onClick={() => handleAction(option.key)}
-              className="block w-full cursor-pointer px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
-            >
-              {option.label}
-            </button>
-          ))}
+          {options.map((option) => {
+            const handleMenuItemClick = (e: React.MouseEvent) => {
+              e.stopPropagation()
+              handleAction(option.key)
+            }
+            const handleMenuItemKeyDown = (e: React.KeyboardEvent) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                e.stopPropagation()
+                handleAction(option.key)
+              }
+            }
+
+            if (insideButton) {
+              return (
+                <div
+                  key={option.key}
+                  role="menuitem"
+                  tabIndex={0}
+                  onClick={handleMenuItemClick}
+                  onKeyDown={handleMenuItemKeyDown}
+                  className="block w-full cursor-pointer px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                >
+                  {option.label}
+                </div>
+              )
+            }
+
+            return (
+              <button
+                key={option.key}
+                type="button"
+                role="menuitem"
+                onClick={handleMenuItemClick}
+                className="block w-full cursor-pointer px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+              >
+                {option.label}
+              </button>
+            )
+          })}
         </div>
       )}
     </div>
diff --git a/frontend/src/components/ModuleCard.tsx b/frontend/src/components/ModuleCard.tsx
index 58cf05bc74..75669f283d 100644
--- a/frontend/src/components/ModuleCard.tsx
+++ b/frontend/src/components/ModuleCard.tsx
@@ -27,14 +27,7 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {
   const [showAllModule, setShowAllModule] = useState(false)
 
   if (modules.length === 1) {
-    return (
-      <SingleModuleCard
-        module={modules[0]}
-        showEdit={!!accessLevel && accessLevel === 'admin'}
-        accessLevel={accessLevel}
-        admins={admins}
-      />
-    )
+    return <SingleModuleCard module={modules[0]} accessLevel={accessLevel} admins={admins} />
   }
 
   const displayedModule = showAllModule ? modules : modules.slice(0, 4)
diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
index e870c591f9..6545ef7d56 100644
--- a/frontend/src/components/ProgramCard.tsx
+++ b/frontend/src/components/ProgramCard.tsx
@@ -53,16 +53,9 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
   })()
 
   return (
-    <div
+    <button
+      type="button"
       onClick={() => onView(program.key)}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault()
-          onView(program.key)
-        }
-      }}
-      role="button"
-      tabIndex={0}
       className="group h-72 w-72 cursor-pointer rounded-lg border border-gray-400 bg-white p-6 text-left transition-transform duration-300 hover:scale-[1.02] hover:brightness-105 md:h-80 md:w-80 lg:h-80 lg:w-96 dark:border-gray-600 dark:bg-gray-800"
     >
       <div className="flex h-full flex-col">
@@ -86,6 +79,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
                 programKey={program.key}
                 status={program.status}
                 setStatus={updateProgramStatus}
+                insideButton
               />
             )}
           </div>
@@ -104,7 +98,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
           <p className="line-clamp-8 text-sm text-gray-700 dark:text-gray-300">{description}</p>
         </div>
       </div>
-    </div>
+    </button>
   )
 }
 
diff --git a/frontend/src/components/SingleModuleCard.tsx b/frontend/src/components/SingleModuleCard.tsx
index 34ddbb2d8f..9f6a3a4a80 100644
--- a/frontend/src/components/SingleModuleCard.tsx
+++ b/frontend/src/components/SingleModuleCard.tsx
@@ -1,7 +1,10 @@
+'use client'
+
 import { faUsers } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { capitalize } from 'lodash'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import React from 'react'
 import { ExtendedSession } from 'types/auth'
@@ -13,7 +16,6 @@ import TopContributorsList from 'components/TopContributorsList'
 
 interface SingleModuleCardProps {
   module: Module
-  showEdit?: boolean
   accessLevel?: string
   admins?: {
     login: string
@@ -22,13 +24,14 @@ interface SingleModuleCardProps {
 
 const SingleModuleCard: React.FC<SingleModuleCardProps> = ({ module, accessLevel, admins }) => {
   const { data } = useSession()
+  const pathname = usePathname()
 
   const isAdmin =
     accessLevel === 'admin' &&
     admins?.some((admin) => admin.login === ((data as ExtendedSession)?.user?.login as string))
 
   // Extract programKey from pathname (e.g., /my/mentorship/programs/[programKey])
-  const programKey = globalThis.location?.pathname.split('/programs/')[1]?.split('/')[0] || ''
+  const programKey = pathname?.split('/programs/')[1]?.split('/')[0] || ''
 
   const moduleDetails = [
     { label: 'Experience Level', value: capitalize(module.experienceLevel) },
@@ -43,7 +46,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({ module, accessLevel
         <div className="flex cursor-pointer items-center gap-2">
           <FontAwesomeIcon icon={faUsers} className="text-gray-500 dark:text-gray-300" />
           <Link
-            href={`${globalThis.location.pathname}/modules/${module.key}`}
+            href={`${pathname}/modules/${module.key}`}
             target="_blank"
             rel="noopener noreferrer"
             className="flex-1"

From bf083f99efef04d89e1623e5a9d28f84e91a25ba Mon Sep 17 00:00:00 2001
From: Kate <kate@kgthreads.com>
Date: Tue, 25 Nov 2025 19:17:50 -0800
Subject: [PATCH 3/6] Add more files

---
 .../unit/components/ProgramCard.test.tsx      | 16 ++++++------
 frontend/src/components/EntityActions.tsx     | 26 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/__tests__/unit/components/ProgramCard.test.tsx b/frontend/__tests__/unit/components/ProgramCard.test.tsx
index 2cf1d4fef0..d8b5893deb 100644
--- a/frontend/__tests__/unit/components/ProgramCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramCard.test.tsx
@@ -58,14 +58,14 @@ describe('ProgramCard', () => {
 
   beforeEach(() => {
     jest.clearAllMocks()
-    ;(useRouter as jest.Mock).mockReturnValue({
-      push: mockPush,
-      back: jest.fn(),
-      forward: jest.fn(),
-      refresh: jest.fn(),
-      replace: jest.fn(),
-      prefetch: jest.fn(),
-    })
+      ; (useRouter as jest.Mock).mockReturnValue({
+        push: mockPush,
+        back: jest.fn(),
+        forward: jest.fn(),
+        refresh: jest.fn(),
+        replace: jest.fn(),
+        prefetch: jest.fn(),
+      })
   })
 
   const baseMockProgram: Program = {
diff --git a/frontend/src/components/EntityActions.tsx b/frontend/src/components/EntityActions.tsx
index 0dc53aa73a..0ffeea34fd 100644
--- a/frontend/src/components/EntityActions.tsx
+++ b/frontend/src/components/EntityActions.tsx
@@ -62,20 +62,20 @@ const EntityActions: React.FC<EntityActionsProps> = ({
   const options =
     type === 'program'
       ? [
-          { key: 'edit_program', label: 'Edit' },
-          { key: 'create_module', label: 'Add Module' },
-          ...(status === ProgramStatusEnum.Draft ? [{ key: 'publish', label: 'Publish' }] : []),
-          ...(status === ProgramStatusEnum.Published || status === ProgramStatusEnum.Completed
-            ? [{ key: 'draft', label: 'Unpublish' }]
-            : []),
-          ...(status === ProgramStatusEnum.Published
-            ? [{ key: 'completed', label: 'Mark as Completed' }]
-            : []),
-        ]
+        { key: 'edit_program', label: 'Edit' },
+        { key: 'create_module', label: 'Add Module' },
+        ...(status === ProgramStatusEnum.Draft ? [{ key: 'publish', label: 'Publish' }] : []),
+        ...(status === ProgramStatusEnum.Published || status === ProgramStatusEnum.Completed
+          ? [{ key: 'draft', label: 'Unpublish' }]
+          : []),
+        ...(status === ProgramStatusEnum.Published
+          ? [{ key: 'completed', label: 'Mark as Completed' }]
+          : []),
+      ]
       : [
-          { key: 'edit_module', label: 'Edit' },
-          { key: 'view_issues', label: 'View Issues' },
-        ]
+        { key: 'edit_module', label: 'Edit' },
+        { key: 'view_issues', label: 'View Issues' },
+      ]
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {

From 5597f0800ec70fbe00b24953d9a13c8b0e262ed1 Mon Sep 17 00:00:00 2001
From: Kate <kate@kgthreads.com>
Date: Tue, 25 Nov 2025 19:46:55 -0800
Subject: [PATCH 4/6] Update program card to use link

---
 .../unit/components/ProgramCard.test.tsx      | 109 ++++++++----------
 .../__tests__/unit/pages/Program.test.tsx     |   6 +-
 frontend/src/app/mentorship/programs/page.tsx |   9 +-
 frontend/src/app/my/mentorship/page.tsx       |   3 +-
 frontend/src/components/EntityActions.tsx     | 109 +++++-------------
 frontend/src/components/ProgramCard.tsx       |  29 ++---
 6 files changed, 94 insertions(+), 171 deletions(-)

diff --git a/frontend/__tests__/unit/components/ProgramCard.test.tsx b/frontend/__tests__/unit/components/ProgramCard.test.tsx
index d8b5893deb..3dfc2177d1 100644
--- a/frontend/__tests__/unit/components/ProgramCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramCard.test.tsx
@@ -52,20 +52,25 @@ jest.mock('@heroui/tooltip', () => ({
 
 jest.mock('components/EntityActions', () => jest.requireActual('components/EntityActions'))
 
+jest.mock('next/link', () => {
+  return ({ children, href }: { children: React.ReactNode; href: string }) => {
+    return <a href={href}>{children}</a>
+  }
+})
+
 describe('ProgramCard', () => {
-  const mockOnView = jest.fn()
   const mockPush = jest.fn()
 
   beforeEach(() => {
     jest.clearAllMocks()
-      ; (useRouter as jest.Mock).mockReturnValue({
-        push: mockPush,
-        back: jest.fn(),
-        forward: jest.fn(),
-        refresh: jest.fn(),
-        replace: jest.fn(),
-        prefetch: jest.fn(),
-      })
+    ;(useRouter as jest.Mock).mockReturnValue({
+      push: mockPush,
+      back: jest.fn(),
+      forward: jest.fn(),
+      refresh: jest.fn(),
+      replace: jest.fn(),
+      prefetch: jest.fn(),
+    })
   })
 
   const baseMockProgram: Program = {
@@ -85,7 +90,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -98,7 +103,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -112,7 +117,7 @@ describe('ProgramCard', () => {
       render(
         <ProgramCard
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/test/path"
           isAdmin={true}
           accessLevel="admin"
         />
@@ -121,27 +126,25 @@ describe('ProgramCard', () => {
       expect(screen.getByText('admin')).toBeInTheDocument()
     })
 
-    it('calls onView when card is clicked', () => {
+    it('renders Link with correct href', () => {
       const { container } = render(
         <ProgramCard
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/my/mentorship/programs/test-program"
           isAdmin={true}
           accessLevel="admin"
         />
       )
 
-      const card = container.querySelector('button[type="button"]') as HTMLElement
-      fireEvent.click(card)
-
-      expect(mockOnView).toHaveBeenCalledWith('test-program')
+      const link = container.querySelector('a[href="/my/mentorship/programs/test-program"]')
+      expect(link).toBeInTheDocument()
     })
 
     it('navigates to edit page when Edit is clicked', async () => {
       render(
         <ProgramCard
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/my/mentorship/programs/test-program"
           isAdmin={true}
           accessLevel="admin"
         />
@@ -171,7 +174,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -184,32 +187,30 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
 
-      const card = document.querySelector('button[type="button"]')
-      expect(card).toBeInTheDocument()
+      const link = document.querySelector('a[href="/test/path"]')
+      expect(link).toBeInTheDocument()
       expect(screen.queryByText('Preview')).not.toBeInTheDocument()
       expect(screen.queryByText('Edit')).not.toBeInTheDocument()
       expect(screen.queryByText('View Details')).not.toBeInTheDocument()
     })
 
-    it('calls onView when card is clicked', () => {
+    it('renders Link with correct href', () => {
       const { container } = render(
         <ProgramCard
           isAdmin={false}
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/mentorship/programs/test-program"
           accessLevel="user"
         />
       )
 
-      const card = container.querySelector('button[type="button"]') as HTMLElement
-      fireEvent.click(card)
-
-      expect(mockOnView).toHaveBeenCalledWith('test-program')
+      const link = container.querySelector('a[href="/mentorship/programs/test-program"]')
+      expect(link).toBeInTheDocument()
     })
   })
 
@@ -217,12 +218,7 @@ describe('ProgramCard', () => {
     it('applies admin role styling', () => {
       const adminProgram = { ...baseMockProgram, userRole: 'admin' }
       render(
-        <ProgramCard
-          isAdmin={true}
-          program={adminProgram}
-          onView={mockOnView}
-          accessLevel="admin"
-        />
+        <ProgramCard isAdmin={true} program={adminProgram} href="/test/path" accessLevel="admin" />
       )
 
       const badge = screen.getByText('admin')
@@ -232,12 +228,7 @@ describe('ProgramCard', () => {
     it('applies mentor role styling', () => {
       const mentorProgram = { ...baseMockProgram, userRole: 'mentor' }
       render(
-        <ProgramCard
-          isAdmin={true}
-          program={mentorProgram}
-          onView={mockOnView}
-          accessLevel="admin"
-        />
+        <ProgramCard isAdmin={true} program={mentorProgram} href="/test/path" accessLevel="admin" />
       )
 
       const badge = screen.getByText('mentor')
@@ -250,7 +241,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={true}
           program={unknownRoleProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="admin"
         />
       )
@@ -262,12 +253,7 @@ describe('ProgramCard', () => {
     it('applies default styling when userRole is undefined', () => {
       const noRoleProgram = { ...baseMockProgram, userRole: undefined }
       render(
-        <ProgramCard
-          isAdmin={true}
-          program={noRoleProgram}
-          onView={mockOnView}
-          accessLevel="admin"
-        />
+        <ProgramCard isAdmin={true} program={noRoleProgram} href="/test/path" accessLevel="admin" />
       )
 
       // Should not render badge when userRole is undefined
@@ -284,7 +270,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={longDescProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -303,7 +289,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={shortDescProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -321,7 +307,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={emptyDescProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -334,12 +320,7 @@ describe('ProgramCard', () => {
       const noDescProgram = { ...baseMockProgram, description: undefined as any }
 
       render(
-        <ProgramCard
-          isAdmin={false}
-          program={noDescProgram}
-          onView={mockOnView}
-          accessLevel="user"
-        />
+        <ProgramCard isAdmin={false} program={noDescProgram} href="/test/path" accessLevel="user" />
       )
 
       expect(screen.getByText('No description available.')).toBeInTheDocument()
@@ -352,7 +333,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -368,7 +349,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={startOnlyProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -383,7 +364,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={noDatesProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -398,7 +379,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={endOnlyProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
@@ -413,7 +394,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           program={baseMockProgram}
           isAdmin={true}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="admin"
         />
       )
@@ -428,7 +409,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={true}
           program={baseMockProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="admin"
         />
       )
@@ -451,7 +432,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           isAdmin={false}
           program={minimalProgram}
-          onView={mockOnView}
+          href="/test/path"
           accessLevel="user"
         />
       )
diff --git a/frontend/__tests__/unit/pages/Program.test.tsx b/frontend/__tests__/unit/pages/Program.test.tsx
index dff2dcbd27..f46b6107ab 100644
--- a/frontend/__tests__/unit/pages/Program.test.tsx
+++ b/frontend/__tests__/unit/pages/Program.test.tsx
@@ -98,9 +98,7 @@ describe('ProgramsPage Component', () => {
       expect(screen.getByText('Program 1')).toBeInTheDocument()
     })
 
-    const card = screen.getAllByRole('button')[0] // First program card
-    fireEvent.click(card)
-
-    expect(mockRouter.push).toHaveBeenCalledWith('/mentorship/programs/program_1')
+    const card = screen.getByRole('link', { name: /Program 1/i })
+    expect(card).toHaveAttribute('href', '/mentorship/programs/program_1')
   })
 })
diff --git a/frontend/src/app/mentorship/programs/page.tsx b/frontend/src/app/mentorship/programs/page.tsx
index 90524eac4f..56ac5c4cd5 100644
--- a/frontend/src/app/mentorship/programs/page.tsx
+++ b/frontend/src/app/mentorship/programs/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useSearchPage } from 'hooks/useSearchPage'
-import { useRouter } from 'next/navigation'
 import { ProgramStatusEnum } from 'types/__generated__/graphql'
 import { Program } from 'types/mentorship'
 import ProgramCard from 'components/ProgramCard'
@@ -22,19 +21,13 @@ const ProgramsPage = () => {
     hitsPerPage: 24,
   })
 
-  const router = useRouter()
-
   const renderProgramCard = (program: Program) => {
-    const handleButtonClick = () => {
-      router.push(`/mentorship/programs/${program.key}`)
-    }
-
     return (
       <ProgramCard
         accessLevel="user"
         isAdmin={false}
         key={program.key}
-        onView={handleButtonClick}
+        href={`/mentorship/programs/${program.key}`}
         program={program}
       />
     )
diff --git a/frontend/src/app/my/mentorship/page.tsx b/frontend/src/app/my/mentorship/page.tsx
index 8a93993fa7..04bb8a0093 100644
--- a/frontend/src/app/my/mentorship/page.tsx
+++ b/frontend/src/app/my/mentorship/page.tsx
@@ -81,7 +81,6 @@ const MyMentorshipPage: React.FC = () => {
   }, [error])
 
   const handleCreate = () => router.push('/my/mentorship/programs/create')
-  const handleView = (key: string) => router.push(`/my/mentorship/programs/${key}`)
 
   if (!username) {
     return <LoadingSpinner />
@@ -139,7 +138,7 @@ const MyMentorshipPage: React.FC = () => {
                 accessLevel="admin"
                 isAdmin={p?.userRole === 'admin'}
                 key={p.id}
-                onView={handleView}
+                href={`/my/mentorship/programs/${p.key}`}
                 program={p}
               />
             ))
diff --git a/frontend/src/components/EntityActions.tsx b/frontend/src/components/EntityActions.tsx
index 0ffeea34fd..2af5205da3 100644
--- a/frontend/src/components/EntityActions.tsx
+++ b/frontend/src/components/EntityActions.tsx
@@ -13,7 +13,6 @@ interface EntityActionsProps {
   moduleKey?: string
   status?: string
   setStatus?: (newStatus: string) => void
-  insideButton?: boolean // When true, uses div instead of button to avoid nested buttons
 }
 
 const EntityActions: React.FC<EntityActionsProps> = ({
@@ -22,7 +21,6 @@ const EntityActions: React.FC<EntityActionsProps> = ({
   moduleKey,
   status,
   setStatus,
-  insideButton = false,
 }) => {
   const router = useRouter()
   const [dropdownOpen, setDropdownOpen] = useState(false)
@@ -62,20 +60,20 @@ const EntityActions: React.FC<EntityActionsProps> = ({
   const options =
     type === 'program'
       ? [
-        { key: 'edit_program', label: 'Edit' },
-        { key: 'create_module', label: 'Add Module' },
-        ...(status === ProgramStatusEnum.Draft ? [{ key: 'publish', label: 'Publish' }] : []),
-        ...(status === ProgramStatusEnum.Published || status === ProgramStatusEnum.Completed
-          ? [{ key: 'draft', label: 'Unpublish' }]
-          : []),
-        ...(status === ProgramStatusEnum.Published
-          ? [{ key: 'completed', label: 'Mark as Completed' }]
-          : []),
-      ]
+          { key: 'edit_program', label: 'Edit' },
+          { key: 'create_module', label: 'Add Module' },
+          ...(status === ProgramStatusEnum.Draft ? [{ key: 'publish', label: 'Publish' }] : []),
+          ...(status === ProgramStatusEnum.Published || status === ProgramStatusEnum.Completed
+            ? [{ key: 'draft', label: 'Unpublish' }]
+            : []),
+          ...(status === ProgramStatusEnum.Published
+            ? [{ key: 'completed', label: 'Mark as Completed' }]
+            : []),
+        ]
       : [
-        { key: 'edit_module', label: 'Edit' },
-        { key: 'view_issues', label: 'View Issues' },
-      ]
+          { key: 'edit_module', label: 'Edit' },
+          { key: 'view_issues', label: 'View Issues' },
+        ]
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -91,82 +89,35 @@ const EntityActions: React.FC<EntityActionsProps> = ({
   }, [])
 
   const handleToggle = (e: React.MouseEvent) => {
+    e.preventDefault()
     e.stopPropagation()
     setDropdownOpen((prev) => !prev)
   }
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault()
-      e.stopPropagation()
-      setDropdownOpen((prev) => !prev)
-    }
-  }
-
   return (
     <div className="relative" ref={dropdownRef}>
-      {insideButton ? (
-        <div
-          data-testid={`${type}-actions-button`}
-          role="button"
-          tabIndex={0}
-          onKeyDown={handleKeyDown}
-          onClick={handleToggle}
-          className="cursor-pointer rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
-          aria-label={`${type === 'program' ? 'Program' : 'Module'} actions menu`}
-          aria-expanded={dropdownOpen}
-          aria-haspopup="true"
-        >
-          <FontAwesomeIcon
-            className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200"
-            icon={faEllipsisV}
-          />
-        </div>
-      ) : (
-        <button
-          data-testid={`${type}-actions-button`}
-          type="button"
-          onClick={handleToggle}
-          className="cursor-pointer rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
-          aria-label={`${type === 'program' ? 'Program' : 'Module'} actions menu`}
-          aria-expanded={dropdownOpen}
-          aria-haspopup="true"
-        >
-          <FontAwesomeIcon
-            className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200"
-            icon={faEllipsisV}
-          />
-        </button>
-      )}
+      <button
+        data-testid={`${type}-actions-button`}
+        type="button"
+        onClick={handleToggle}
+        className="cursor-pointer rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
+        aria-label={`${type === 'program' ? 'Program' : 'Module'} actions menu`}
+        aria-expanded={dropdownOpen}
+        aria-haspopup="true"
+      >
+        <FontAwesomeIcon
+          className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200"
+          icon={faEllipsisV}
+        />
+      </button>
       {dropdownOpen && (
         <div className="absolute right-0 z-20 mt-2 w-40 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
           {options.map((option) => {
             const handleMenuItemClick = (e: React.MouseEvent) => {
+              e.preventDefault()
               e.stopPropagation()
               handleAction(option.key)
             }
-            const handleMenuItemKeyDown = (e: React.KeyboardEvent) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                e.stopPropagation()
-                handleAction(option.key)
-              }
-            }
-
-            if (insideButton) {
-              return (
-                <div
-                  key={option.key}
-                  role="menuitem"
-                  tabIndex={0}
-                  onClick={handleMenuItemClick}
-                  onKeyDown={handleMenuItemKeyDown}
-                  className="block w-full cursor-pointer px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
-                >
-                  {option.label}
-                </div>
-              )
-            }
 
             return (
               <button
@@ -174,7 +125,7 @@ const EntityActions: React.FC<EntityActionsProps> = ({
                 type="button"
                 role="menuitem"
                 onClick={handleMenuItemClick}
-                className="block w-full cursor-pointer px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                className="block w-full cursor-pointer px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
               >
                 {option.label}
               </button>
diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
index 6545ef7d56..16b72a4243 100644
--- a/frontend/src/components/ProgramCard.tsx
+++ b/frontend/src/components/ProgramCard.tsx
@@ -1,5 +1,6 @@
 import { Tooltip } from '@heroui/tooltip'
 import { useUpdateProgramStatus } from 'hooks/useUpdateProgramStatus'
+import Link from 'next/link'
 import type React from 'react'
 import { GetProgramAndModulesDocument } from 'types/__generated__/programsQueries.generated'
 import { Program } from 'types/mentorship'
@@ -7,12 +8,12 @@ import EntityActions from 'components/EntityActions'
 
 interface ProgramCardProps {
   program: Program
-  onView: (key: string) => void
+  href: string
   accessLevel: 'admin' | 'user'
   isAdmin: boolean
 }
 
-const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel, isAdmin }) => {
+const ProgramCard: React.FC<ProgramCardProps> = ({ program, href, accessLevel, isAdmin }) => {
   const formatDate = (d: string | number) => {
     const date = typeof d === 'number' ? new Date(d * 1000) : new Date(d)
     return date.toLocaleDateString('en-US', {
@@ -53,10 +54,9 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
   })()
 
   return (
-    <button
-      type="button"
-      onClick={() => onView(program.key)}
-      className="group h-72 w-72 cursor-pointer rounded-lg border border-gray-400 bg-white p-6 text-left transition-transform duration-300 hover:scale-[1.02] hover:brightness-105 md:h-80 md:w-80 lg:h-80 lg:w-96 dark:border-gray-600 dark:bg-gray-800"
+    <Link
+      href={href}
+      className="group block h-72 w-72 rounded-lg border border-gray-400 bg-white p-6 text-left transition-transform duration-300 hover:scale-[1.02] hover:brightness-105 md:h-80 md:w-80 lg:h-80 lg:w-96 dark:border-gray-600 dark:bg-gray-800"
     >
       <div className="flex h-full flex-col">
         <div className="flex flex-1 flex-col">
@@ -74,13 +74,14 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
               </h3>
             </Tooltip>
             {accessLevel === 'admin' && isAdmin && (
-              <EntityActions
-                type="program"
-                programKey={program.key}
-                status={program.status}
-                setStatus={updateProgramStatus}
-                insideButton
-              />
+              <div role="presentation" onMouseDown={(e) => e.stopPropagation()}>
+                <EntityActions
+                  type="program"
+                  programKey={program.key}
+                  status={program.status}
+                  setStatus={updateProgramStatus}
+                />
+              </div>
             )}
           </div>
           <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
@@ -98,7 +99,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel,
           <p className="line-clamp-8 text-sm text-gray-700 dark:text-gray-300">{description}</p>
         </div>
       </div>
-    </button>
+    </Link>
   )
 }
 

From 0be935ea7e4966dff9425387419ec0271e3dd5e4 Mon Sep 17 00:00:00 2001
From: Kate <kate@kgthreads.com>
Date: Tue, 25 Nov 2025 19:56:34 -0800
Subject: [PATCH 5/6] update role

---
 frontend/src/components/ProgramCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
index 16b72a4243..112227f6db 100644
--- a/frontend/src/components/ProgramCard.tsx
+++ b/frontend/src/components/ProgramCard.tsx
@@ -74,7 +74,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, href, accessLevel, i
               </h3>
             </Tooltip>
             {accessLevel === 'admin' && isAdmin && (
-              <div role="presentation" onMouseDown={(e) => e.stopPropagation()}>
+              <div role="button" tabIndex={0} onMouseDown={(e) => e.stopPropagation()}>
                 <EntityActions
                   type="program"
                   programKey={program.key}

From 6a88ea33cc881da4b0baa3a2179521635d007c92 Mon Sep 17 00:00:00 2001
From: Kate <kate@kgthreads.com>
Date: Tue, 25 Nov 2025 20:06:23 -0800
Subject: [PATCH 6/6] Update role

---
 frontend/src/components/ProgramCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
index 112227f6db..d4e11ab50c 100644
--- a/frontend/src/components/ProgramCard.tsx
+++ b/frontend/src/components/ProgramCard.tsx
@@ -74,7 +74,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, href, accessLevel, i
               </h3>
             </Tooltip>
             {accessLevel === 'admin' && isAdmin && (
-              <div role="button" tabIndex={0} onMouseDown={(e) => e.stopPropagation()}>
+              <div role="none" onMouseDown={(e) => e.stopPropagation()}>
                 <EntityActions
                   type="program"
                   programKey={program.key}