diff --git a/frontend/__tests__/unit/components/IssuesTable.test.tsx b/frontend/__tests__/unit/components/IssuesTable.test.tsx
new file mode 100644
index 0000000000..4b19dbed63
--- /dev/null
+++ b/frontend/__tests__/unit/components/IssuesTable.test.tsx
@@ -0,0 +1,400 @@
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import IssuesTable, { type IssueRow } from 'components/IssuesTable'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+  }),
+}))
+
+jest.mock('next/image', () => {
+  return function MockImage({
+    src,
+    alt,
+    style,
+    fill,
+  }: {
+    src: string
+    alt: string
+    style?: React.CSSProperties
+    fill?: boolean
+  }) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={src} alt={alt} style={style} data-testid="sponsor-image" data-fill={fill} />
+  }
+})
+
+jest.mock('@heroui/tooltip', () => ({
+  Tooltip: ({
+    children,
+    content,
+    isDisabled,
+  }: {
+    children: React.ReactNode
+    content: string
+    isDisabled?: boolean
+  }) => {
+    if (isDisabled) {
+      return <>{children}</>
+    }
+    return (
+      <div data-testid="tooltip" data-content={content}>
+        {children}
+      </div>
+    )
+  },
+}))
+
+const mockIssues: IssueRow[] = [
+  {
+    objectID: '1',
+    number: 123,
+    title: 'Test Issue 1',
+    state: 'open',
+    isMerged: false,
+    labels: ['bug', 'enhancement'],
+    assignees: [
+      {
+        avatarUrl: 'https://example.com/avatar1.jpg',
+        login: 'user1',
+        name: 'User One',
+      },
+    ],
+    url: 'https://github.com/test/repo/issues/123',
+  },
+  {
+    objectID: '2',
+    number: 124,
+    title: 'Test Issue 2',
+    state: 'closed',
+    isMerged: false,
+    labels: ['documentation'],
+    assignees: [],
+    url: 'https://github.com/test/repo/issues/124',
+  },
+  {
+    objectID: '3',
+    number: 125,
+    title: 'Test Issue 3',
+    state: 'closed',
+    isMerged: true,
+    labels: [],
+    assignees: [
+      {
+        avatarUrl: 'https://example.com/avatar2.jpg',
+        login: 'user2',
+        name: 'User Two',
+      },
+      {
+        avatarUrl: 'https://example.com/avatar3.jpg',
+        login: 'user3',
+        name: 'User Three',
+      },
+    ],
+    url: 'https://github.com/test/repo/issues/125',
+  },
+]
+
+describe('<IssuesTable />', () => {
+  const defaultProps = {
+    issues: mockIssues,
+  }
+
+  describe('Rendering', () => {
+    it('renders table view', () => {
+      render(<IssuesTable {...defaultProps} />)
+      const table = screen.getByRole('table')
+      expect(table).toBeInTheDocument()
+    })
+
+    it('renders all issue rows', () => {
+      render(<IssuesTable {...defaultProps} />)
+      const issue1Buttons = screen.getAllByRole('button', { name: /Test Issue 1/i })
+      const issue2Buttons = screen.getAllByRole('button', { name: /Test Issue 2/i })
+      const issue3Buttons = screen.getAllByRole('button', { name: /Test Issue 3/i })
+      expect(issue1Buttons.length).toBeGreaterThan(0)
+      expect(issue2Buttons.length).toBeGreaterThan(0)
+      expect(issue3Buttons.length).toBeGreaterThan(0)
+    })
+
+    it('renders table headers correctly', () => {
+      render(<IssuesTable {...defaultProps} />)
+      expect(screen.getByText('Title')).toBeInTheDocument()
+      expect(screen.getByText('Status')).toBeInTheDocument()
+      expect(screen.getByText('Labels')).toBeInTheDocument()
+      expect(screen.getByText('Assignee')).toBeInTheDocument()
+    })
+  })
+
+  describe('Status Badge', () => {
+    it('renders Open status badge correctly', () => {
+      render(<IssuesTable issues={[mockIssues[0]]} />)
+      const openBadges = screen.getAllByText('Open')
+      expect(openBadges.length).toBeGreaterThan(0)
+    })
+
+    it('renders Closed status badge correctly', () => {
+      render(<IssuesTable issues={[mockIssues[1]]} />)
+      const closedBadges = screen.getAllByText('Closed')
+      expect(closedBadges.length).toBeGreaterThan(0)
+    })
+
+    it('renders Merged status badge when isMerged is true', () => {
+      render(<IssuesTable issues={[mockIssues[2]]} />)
+      const mergedBadges = screen.getAllByText('Merged')
+      expect(mergedBadges.length).toBeGreaterThan(0)
+    })
+
+    it('defaults to Closed status for unknown states', () => {
+      const unknownIssue: IssueRow = {
+        objectID: '4',
+        number: 126,
+        title: 'Unknown State Issue',
+        state: 'unknown',
+        labels: [],
+      }
+      render(<IssuesTable issues={[unknownIssue]} />)
+      const closedBadges = screen.getAllByText('Closed')
+      expect(closedBadges.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Labels', () => {
+    it('renders labels correctly', () => {
+      render(<IssuesTable issues={[mockIssues[0]]} />)
+      const bugLabels = screen.getAllByText('bug')
+      const enhancementLabels = screen.getAllByText('enhancement')
+      expect(bugLabels.length).toBeGreaterThan(0)
+      expect(enhancementLabels.length).toBeGreaterThan(0)
+    })
+
+    it('renders "+X more" when labels exceed maxVisibleLabels', () => {
+      const manyLabelsIssue: IssueRow = {
+        objectID: '5',
+        number: 127,
+        title: 'Many Labels Issue',
+        state: 'open',
+        labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6', 'label7'],
+      }
+      render(<IssuesTable issues={[manyLabelsIssue]} maxVisibleLabels={5} />)
+      expect(screen.getByText('+2 more')).toBeInTheDocument()
+    })
+
+    it('does not render labels section when labels array is empty', () => {
+      render(<IssuesTable issues={[mockIssues[2]]} />)
+      const issueTitles = screen.getAllByText('Test Issue 3')
+      const labelsCell = issueTitles[0].closest('tr')?.querySelector('td:nth-child(3)')
+      expect(labelsCell?.textContent).toBe('')
+    })
+
+    it('respects maxVisibleLabels prop', () => {
+      const manyLabelsIssue: IssueRow = {
+        objectID: '6',
+        number: 128,
+        title: 'Many Labels Issue',
+        state: 'open',
+        labels: ['label1', 'label2', 'label3', 'label4', 'label5'],
+      }
+      render(<IssuesTable issues={[manyLabelsIssue]} maxVisibleLabels={3} />)
+      expect(screen.getByText('+2 more')).toBeInTheDocument()
+    })
+  })
+
+  describe('Assignee Column', () => {
+    it('renders assignee column when showAssignee is true (default)', () => {
+      render(<IssuesTable {...defaultProps} />)
+      expect(screen.getByText('Assignee')).toBeInTheDocument()
+    })
+
+    it('hides assignee column when showAssignee is false', () => {
+      render(<IssuesTable {...defaultProps} showAssignee={false} />)
+      expect(screen.queryByText('Assignee')).not.toBeInTheDocument()
+    })
+
+    it('renders assignee avatar and name', () => {
+      render(<IssuesTable issues={[mockIssues[0]]} />)
+      const assigneeImages = screen.getAllByAltText('user1')
+      const user1Texts = screen.getAllByText('user1')
+      expect(assigneeImages.length).toBeGreaterThan(0)
+      expect(user1Texts.length).toBeGreaterThan(0)
+    })
+
+    it('shows "+X" indicator when multiple assignees', () => {
+      render(<IssuesTable issues={[mockIssues[2]]} />)
+      const plusOneElements = screen.getAllByText(/\+1/)
+      expect(plusOneElements.length).toBeGreaterThan(0)
+    })
+
+    it('does not render assignee section when no assignees', () => {
+      render(<IssuesTable issues={[mockIssues[1]]} />)
+      const issueTitles = screen.getAllByText('Test Issue 2')
+      const assigneeCell = issueTitles[0].closest('tr')?.querySelector('td:nth-child(4)')
+      expect(assigneeCell?.textContent).toBe('')
+    })
+
+    it('uses login when name is not available', () => {
+      const issueWithoutName: IssueRow = {
+        objectID: '7',
+        number: 129,
+        title: 'Issue Without Name',
+        state: 'open',
+        labels: [],
+        assignees: [
+          {
+            avatarUrl: 'https://example.com/avatar4.jpg',
+            login: 'user4',
+            name: '',
+          },
+        ],
+      }
+      render(<IssuesTable issues={[issueWithoutName]} />)
+      const user4Texts = screen.getAllByText('user4')
+      expect(user4Texts.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Click Handlers', () => {
+    it('calls onIssueClick when provided', () => {
+      const onIssueClick = jest.fn()
+      render(<IssuesTable {...defaultProps} onIssueClick={onIssueClick} />)
+      const issueButtons = screen.getAllByRole('button', { name: /Test Issue 1/i })
+      expect(issueButtons.length).toBeGreaterThan(0)
+      fireEvent.click(issueButtons[0])
+      expect(onIssueClick).toHaveBeenCalledWith(123)
+    })
+  })
+
+  describe('Empty State', () => {
+    it('renders empty message when no issues', () => {
+      render(<IssuesTable issues={[]} />)
+      const emptyMessages = screen.getAllByText('No issues found.')
+      expect(emptyMessages.length).toBeGreaterThan(0)
+    })
+
+    it('renders custom empty message', () => {
+      const customMessage = 'No issues found for the selected filter.'
+      render(<IssuesTable issues={[]} emptyMessage={customMessage} />)
+      const customMessages = screen.getAllByText(customMessage)
+      expect(customMessages.length).toBeGreaterThan(0)
+    })
+
+    it('renders empty state in desktop table', () => {
+      render(<IssuesTable issues={[]} />)
+      const table = screen.getByRole('table')
+      const emptyRow = within(table).getByText('No issues found.')
+      expect(emptyRow).toBeInTheDocument()
+    })
+
+    it('renders empty state in mobile view', () => {
+      render(<IssuesTable issues={[]} />)
+      const emptyMessages = screen.getAllByText('No issues found.')
+      expect(emptyMessages.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Tooltip', () => {
+    it('shows tooltip for long titles', () => {
+      const longTitleIssue: IssueRow = {
+        objectID: '8',
+        number: 130,
+        title: 'This is a very long issue title that exceeds fifty characters in length',
+        state: 'open',
+        labels: [],
+      }
+      render(<IssuesTable issues={[longTitleIssue]} />)
+      const tooltips = screen.getAllByTestId('tooltip')
+      const longTitleTooltip = tooltips.find(
+        (tooltip) => tooltip.dataset.content === longTitleIssue.title
+      )
+      expect(longTitleTooltip).toBeInTheDocument()
+      expect(longTitleTooltip?.dataset.content).toBe(longTitleIssue.title)
+    })
+
+    it('disables tooltip for short titles', () => {
+      render(<IssuesTable issues={[mockIssues[0]]} />)
+      const buttons = screen.getAllByRole('button', { name: /Test Issue 1/i })
+      expect(buttons.length).toBeGreaterThan(0)
+      const tooltips = screen.queryAllByTestId('tooltip')
+      const shortTitleTooltip = tooltips.find(
+        (tooltip) => tooltip.dataset.content === mockIssues[0].title
+      )
+      expect(shortTitleTooltip).toBeUndefined()
+    })
+  })
+
+  describe('Mobile View', () => {
+    it('renders status badge in mobile view', () => {
+      render(<IssuesTable issues={[mockIssues[0]]} />)
+      const openBadges = screen.getAllByText('Open')
+      expect(openBadges.length).toBeGreaterThan(0)
+    })
+
+    it('renders labels in mobile view (limited to 3)', () => {
+      const manyLabelsIssue: IssueRow = {
+        objectID: '9',
+        number: 131,
+        title: 'Many Labels Issue',
+        state: 'open',
+        labels: ['label1', 'label2', 'label3', 'label4', 'label5'],
+      }
+      render(<IssuesTable issues={[manyLabelsIssue]} />)
+      const label1Elements = screen.getAllByText('label1')
+      expect(label1Elements.length).toBeGreaterThan(0)
+    })
+
+    it('renders assignee in mobile view when showAssignee is true', () => {
+      render(<IssuesTable issues={[mockIssues[0]]} />)
+      const user1Elements = screen.getAllByText('user1')
+      expect(user1Elements.length).toBeGreaterThan(0)
+    })
+
+    it('does not render assignee in mobile view when showAssignee is false', () => {
+      render(<IssuesTable issues={[mockIssues[0]]} showAssignee={false} />)
+      const assigneeImages = screen.queryAllByAltText('user1')
+      expect(assigneeImages.length).toBe(0)
+    })
+  })
+
+  describe('Column Count', () => {
+    it('calculates correct column count with assignee column', () => {
+      render(<IssuesTable issues={[]} showAssignee={true} />)
+      const table = screen.getByRole('table')
+      const headers = within(table).getAllByRole('columnheader')
+      expect(headers).toHaveLength(4)
+    })
+
+    it('calculates correct column count without assignee column', () => {
+      render(<IssuesTable issues={[]} showAssignee={false} />)
+      const table = screen.getByRole('table')
+      const headers = within(table).getAllByRole('columnheader')
+      expect(headers).toHaveLength(3)
+    })
+  })
+
+  describe('Default Props', () => {
+    it('uses default showAssignee value (true)', () => {
+      render(<IssuesTable issues={mockIssues} />)
+      expect(screen.getByText('Assignee')).toBeInTheDocument()
+    })
+
+    it('uses default emptyMessage', () => {
+      render(<IssuesTable issues={[]} />)
+      const emptyMessages = screen.getAllByText('No issues found.')
+      expect(emptyMessages.length).toBeGreaterThan(0)
+    })
+
+    it('uses default maxVisibleLabels (5)', () => {
+      const manyLabelsIssue: IssueRow = {
+        objectID: '10',
+        number: 132,
+        title: 'Many Labels Issue',
+        state: 'open',
+        labels: ['label1', 'label2', 'label3', 'label4', 'label5', 'label6'],
+      }
+      render(<IssuesTable issues={[manyLabelsIssue]} />)
+      expect(screen.getByText('+1 more')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/frontend/__tests__/unit/pages/IssuesPage.test.tsx b/frontend/__tests__/unit/pages/IssuesPage.test.tsx
index b310b6d245..16d097b9d7 100644
--- a/frontend/__tests__/unit/pages/IssuesPage.test.tsx
+++ b/frontend/__tests__/unit/pages/IssuesPage.test.tsx
@@ -89,7 +89,7 @@ describe('IssuesPage', () => {
       error: undefined,
     })
     render(<IssuesPage />)
-    expect(screen.getAllByText('No issues found for the selected filter.')).toHaveLength(2)
+    expect(screen.getAllByText('No issues found for the selected filter.')).toHaveLength(1)
   })
 
   it('renders the list of issues successfully', () => {
@@ -258,6 +258,7 @@ describe('IssuesPage', () => {
       error: undefined,
     })
     render(<IssuesPage />)
-    expect(screen.getByText('+1')).toBeInTheDocument()
+    const plusOneElements = screen.getAllByText(/\+1/)
+    expect(plusOneElements.length).toBeGreaterThan(0)
   })
 })
diff --git a/frontend/__tests__/unit/pages/MenteeProfilePage.test.tsx b/frontend/__tests__/unit/pages/MenteeProfilePage.test.tsx
index 7d54a96067..95c7256f9d 100644
--- a/frontend/__tests__/unit/pages/MenteeProfilePage.test.tsx
+++ b/frontend/__tests__/unit/pages/MenteeProfilePage.test.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from '@apollo/client/react'
 import { render, screen, fireEvent, within } from '@testing-library/react'
 import { useParams } from 'next/navigation'
+import React from 'react'
 import { handleAppError } from 'app/global-error'
 import MenteeProfilePage from 'app/my/mentorship/programs/[programKey]/modules/[moduleKey]/mentees/[menteeKey]/page'
 
@@ -12,6 +13,9 @@ jest.mock('@apollo/client/react', () => ({
 
 jest.mock('next/navigation', () => ({
   useParams: jest.fn(),
+  useRouter: () => ({
+    push: jest.fn(),
+  }),
 }))
 
 jest.mock('app/global-error', () => ({
@@ -34,6 +38,106 @@ jest.mock('next/image', () => ({
   },
 }))
 
+jest.mock('@heroui/tooltip', () => ({
+  Tooltip: ({
+    children,
+    content,
+    isDisabled,
+  }: {
+    children: React.ReactNode
+    content: string
+    isDisabled?: boolean
+  }) => {
+    if (isDisabled) {
+      return <>{children}</>
+    }
+    return (
+      <div data-testid="tooltip" data-content={content}>
+        {children}
+      </div>
+    )
+  },
+}))
+
+jest.mock('@heroui/select', () => {
+  return {
+    Select: ({
+      children,
+      selectedKeys,
+      onSelectionChange,
+      'aria-label': ariaLabel,
+      classNames: _classNames,
+      size: _size,
+      ...props
+    }: {
+      children: React.ReactNode
+      selectedKeys: Set<string>
+      onSelectionChange?: (keys: Set<string>) => void
+      'aria-label'?: string
+      classNames?: Record<string, string>
+      size?: string
+    }) => {
+      const [isOpen, setIsOpen] = React.useState(false)
+      const selectedKey = Array.from(selectedKeys)[0] || 'all'
+
+      const handleItemClick = (key: string) => {
+        if (onSelectionChange) {
+          onSelectionChange(new Set([key]))
+        }
+        setIsOpen(false)
+      }
+
+      return (
+        <div data-testid="select-wrapper" {...props}>
+          <button
+            type="button"
+            aria-label={ariaLabel}
+            aria-expanded={isOpen}
+            aria-controls="select-popover"
+            onClick={() => setIsOpen(!isOpen)}
+            data-testid="select-trigger"
+          >
+            {selectedKey}
+          </button>
+          {isOpen && (
+            <div id="select-popover" data-testid="select-popover" aria-label="Options">
+              {React.Children.map(children, (child: React.ReactElement) => {
+                const itemKey = String(child.key ?? '')
+                return React.cloneElement(child, {
+                  'data-key': itemKey,
+                  onClick: () => handleItemClick(itemKey),
+                } as Partial<unknown>)
+              })}
+            </div>
+          )}
+        </div>
+      )
+    },
+    SelectItem: ({
+      children,
+      onClick,
+      'data-key': dataKey,
+      classNames: _classNames,
+      ...props
+    }: {
+      children: React.ReactNode
+      onClick?: () => void
+      'data-key'?: string
+      classNames?: Record<string, string>
+    }) => (
+      <button
+        type="button"
+        data-testid="select-item"
+        data-key={dataKey}
+        onClick={onClick}
+        {...props}
+      >
+        {children}
+      </button>
+    ),
+  }
+})
+
 const mockUseQuery = useQuery as unknown as jest.Mock
 const mockUseParams = useParams as jest.Mock
 const mockHandleAppError = handleAppError as jest.Mock
@@ -118,50 +222,54 @@ describe('MenteeProfilePage', () => {
     expect(screen.getByText('@test-mentee')).toBeInTheDocument()
     expect(screen.getByText('A test bio.')).toBeInTheDocument()
 
-    // Check stats
-    expect(screen.getByText('Total Issues')).toBeInTheDocument()
-    expect(screen.getByText('3')).toBeInTheDocument()
-    expect(screen.getByText('Open Issues')).toBeInTheDocument()
-    expect(screen.getByText('2')).toBeInTheDocument()
-    expect(screen.getByText('Closed Issues')).toBeInTheDocument()
-    expect(screen.getByText('1')).toBeInTheDocument()
-
     // Check domains and skills
     const domainsHeading = screen.getByRole('heading', { name: /Domains/i })
     const domainsContainer = domainsHeading.parentElement
-    expect(domainsContainer).not.toBeNull()
-    expect(within(domainsContainer as HTMLElement).getByTestId('label-list')).toHaveTextContent(
+    if (!domainsContainer) {
+      throw new Error('Domains container not found')
+    }
+    expect(within(domainsContainer).getByTestId('label-list')).toHaveTextContent(
       'frontend, backend'
     )
 
     const skillsHeading = screen.getByRole('heading', { name: /Skills & Technologies/i })
     const skillsContainer = skillsHeading.parentElement
-    expect(skillsContainer).not.toBeNull()
-    expect(within(skillsContainer as HTMLElement).getByTestId('label-list')).toHaveTextContent(
-      'react, nodejs'
-    )
+    if (!skillsContainer) {
+      throw new Error('Skills container not found')
+    }
+    expect(within(skillsContainer).getByTestId('label-list')).toHaveTextContent('react, nodejs')
 
-    // Check issues
-    expect(screen.getByText('Open Issue 1')).toBeInTheDocument()
-    expect(screen.getByText('Closed Issue 1')).toBeInTheDocument()
-    expect(screen.getByText('Open Issue 2')).toBeInTheDocument()
+    // Check issues (appear in both desktop and mobile views)
+    const openIssue1Elements = screen.getAllByText('Open Issue 1')
+    const closedIssue1Elements = screen.getAllByText('Closed Issue 1')
+    const openIssue2Elements = screen.getAllByText('Open Issue 2')
+    expect(openIssue1Elements.length).toBeGreaterThan(0)
+    expect(closedIssue1Elements.length).toBeGreaterThan(0)
+    expect(openIssue2Elements.length).toBeGreaterThan(0)
   })
 
   it('filters issues correctly when the dropdown is used', () => {
     mockUseQuery.mockReturnValue({ data: mockMenteeData, loading: false, error: undefined })
     render(<MenteeProfilePage />)
 
-    const filterSelect = screen.getByRole('combobox')
+    const filterSelect = screen.getByTestId('select-trigger')
 
     // Filter for open issues
-    fireEvent.change(filterSelect, { target: { value: 'open' } })
-    expect(screen.getByText('Open Issue 1')).toBeInTheDocument()
-    expect(screen.getByText('Open Issue 2')).toBeInTheDocument()
+    fireEvent.click(filterSelect)
+    const openOption = screen.getByText('Open (2)')
+    fireEvent.click(openOption)
+    const openIssue1Elements = screen.getAllByText('Open Issue 1')
+    const openIssue2Elements = screen.getAllByText('Open Issue 2')
+    expect(openIssue1Elements.length).toBeGreaterThan(0)
+    expect(openIssue2Elements.length).toBeGreaterThan(0)
     expect(screen.queryByText('Closed Issue 1')).not.toBeInTheDocument()
 
     // Filter for closed issues
-    fireEvent.change(filterSelect, { target: { value: 'closed' } })
-    expect(screen.getByText('Closed Issue 1')).toBeInTheDocument()
+    fireEvent.click(filterSelect)
+    const closedOption = screen.getByText('Closed (1)')
+    fireEvent.click(closedOption)
+    const closedIssue1Elements = screen.getAllByText('Closed Issue 1')
+    expect(closedIssue1Elements.length).toBeGreaterThan(0)
     expect(screen.queryByText('Open Issue 1')).not.toBeInTheDocument()
     expect(screen.queryByText('Open Issue 2')).not.toBeInTheDocument()
   })
@@ -173,6 +281,7 @@ describe('MenteeProfilePage', () => {
     }
     mockUseQuery.mockReturnValue({ data: noIssuesData, loading: false, error: undefined })
     render(<MenteeProfilePage />)
-    expect(screen.getByText('No issues assigned to this mentee in this module')).toBeInTheDocument()
+    const emptyMessages = screen.getAllByText('No issues found for the selected filter.')
+    expect(emptyMessages.length).toBeGreaterThan(0)
   })
 })
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 d5583561f3..21934208c5 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
@@ -2,18 +2,16 @@
 
 import { useQuery } from '@apollo/client/react'
 import { Select, SelectItem } from '@heroui/select'
-import { Tooltip } from '@heroui/tooltip'
-import Image from 'next/image'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
 import { GetModuleIssuesDocument } from 'types/__generated__/moduleQueries.generated'
+import IssuesTable, { type IssueRow } from 'components/IssuesTable'
 import LoadingSpinner from 'components/LoadingSpinner'
 import Pagination from 'components/Pagination'
 
 const ITEMS_PER_PAGE = 20
 const LABEL_ALL = 'all'
-const MAX_VISIBLE_LABELS = 5
 
 const IssuesPage = () => {
   const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>()
@@ -39,17 +37,8 @@ const IssuesPage = () => {
   }, [error])
 
   const moduleData = data?.getModule
-  type ModuleIssueRow = {
-    objectID: string
-    number: number
-    title: string
-    state: string
-    isMerged: boolean
-    labels: string[]
-    assignees: Array<{ avatarUrl: string; login: string; name: string }>
-  }
 
-  const moduleIssues: ModuleIssueRow[] = useMemo(() => {
+  const moduleIssues: IssueRow[] = useMemo(() => {
     return (moduleData?.issues || []).map((i) => ({
       objectID: i.id,
       number: i.number,
@@ -92,9 +81,14 @@ const IssuesPage = () => {
     setCurrentPage(page)
   }
 
-  const handleIssueClick = (issueNumber: number) => {
-    router.push(`/my/mentorship/programs/${programKey}/modules/${moduleKey}/issues/${issueNumber}`)
-  }
+  const handleIssueClick = useCallback(
+    (issueNumber: number) => {
+      router.push(
+        `/my/mentorship/programs/${programKey}/modules/${moduleKey}/issues/${issueNumber}`
+      )
+    },
+    [router, programKey, moduleKey]
+  )
 
   if (loading) return <LoadingSpinner />
   if (!moduleData)
@@ -137,210 +131,12 @@ const IssuesPage = () => {
           </div>
         </div>
 
-        {/* Desktop Table - unchanged */}
-        <div className="hidden overflow-hidden rounded-lg border border-gray-200 lg:block dark:border-gray-700">
-          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-            <thead className="bg-gray-50 dark:bg-[#2a2e33]">
-              <tr>
-                <th
-                  scope="col"
-                  className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400"
-                >
-                  Title
-                </th>
-                <th
-                  scope="col"
-                  className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400"
-                >
-                  Status
-                </th>
-                <th
-                  scope="col"
-                  className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400"
-                >
-                  Labels
-                </th>
-                <th
-                  scope="col"
-                  className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400"
-                >
-                  Assignee
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-[#1f2327]">
-              {moduleIssues.map((issue) => (
-                <tr key={issue.objectID} className="hover:bg-gray-50 dark:hover:bg-[#2a2e33]">
-                  <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-blue-600 dark:text-blue-400">
-                    <Tooltip
-                      closeDelay={100}
-                      delay={100}
-                      showArrow
-                      content={issue.title}
-                      placement="bottom"
-                      isDisabled={issue.title.length > 50 ? false : true}
-                    >
-                      <button
-                        type="button"
-                        onClick={() => handleIssueClick(Number(issue.number))}
-                        className="block max-w-md cursor-pointer truncate text-left hover:underline"
-                      >
-                        {issue.title}
-                      </button>
-                    </Tooltip>
-                  </td>
-                  <td className="px-6 py-4 text-center text-sm whitespace-nowrap">
-                    <div className="flex justify-center">
-                      <span
-                        className={`inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-medium ${
-                          issue.state === 'open'
-                            ? 'bg-[#238636] text-white'
-                            : issue.isMerged
-                              ? 'bg-[#8657E5] text-white'
-                              : 'bg-[#DA3633] text-white'
-                        }`}
-                      >
-                        {issue.state === 'open' ? 'Open' : issue.isMerged ? 'Merged' : 'Closed'}
-                      </span>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4">
-                    <div className="flex flex-wrap gap-2">
-                      {(() => {
-                        const labels = issue.labels || []
-                        const visible = labels.slice(0, MAX_VISIBLE_LABELS)
-                        const remaining = labels.length - visible.length
-                        return (
-                          <>
-                            {visible.map((label) => (
-                              <span
-                                key={label}
-                                className="rounded-lg border border-gray-400 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-200 dark:border-gray-300 dark:text-gray-300 dark:hover:bg-gray-700"
-                              >
-                                {label}
-                              </span>
-                            ))}
-                            {remaining > 0 && (
-                              <span className="rounded-lg border border-gray-400 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-200 dark:border-gray-300 dark:text-gray-300 dark:hover:bg-gray-700">
-                                +{remaining} more
-                              </span>
-                            )}
-                          </>
-                        )
-                      })()}
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-700 dark:text-gray-300">
-                    {issue.assignees?.length ? (
-                      <div className="flex items-center gap-2">
-                        <div className="flex items-center gap-2">
-                          <Image
-                            height={24}
-                            width={24}
-                            src={issue.assignees[0].avatarUrl}
-                            alt={issue.assignees[0].login}
-                            className="rounded-full"
-                          />
-                          <span className="max-w-[80px] truncate sm:max-w-[100px] md:max-w-[120px] lg:max-w-[150px]">
-                            {issue.assignees[0].login || issue.assignees[0].name}
-                          </span>
-                        </div>
-                        {issue.assignees.length > 1 && (
-                          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
-                            +{issue.assignees.length - 1}
-                          </div>
-                        )}
-                      </div>
-                    ) : null}
-                  </td>
-                </tr>
-              ))}
-              {moduleIssues.length === 0 && (
-                <tr>
-                  <td
-                    colSpan={4}
-                    className="px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400"
-                  >
-                    No issues found for the selected filter.
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-
-        {/* Mobile & Tablet Cards */}
-        <div className="space-y-6 lg:hidden">
-          {moduleIssues.map((issue) => (
-            <div
-              key={issue.objectID}
-              className="mt-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-[#1f2327]"
-            >
-              <div className="mb-3 flex items-start justify-between gap-3">
-                <button
-                  type="button"
-                  onClick={() => handleIssueClick(Number(issue.number))}
-                  className="flex-1 text-left text-sm font-medium text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
-                >
-                  {issue.title}
-                </button>
-                <span
-                  className={`inline-flex flex-shrink-0 items-center rounded-full px-2 py-1 text-xs font-medium ${
-                    issue.state === 'open'
-                      ? 'bg-[#238636] text-white'
-                      : issue.isMerged
-                        ? 'bg-[#8657E5] text-white'
-                        : 'bg-[#DA3633] text-white'
-                  }`}
-                >
-                  {issue.state === 'open' ? 'Open' : issue.isMerged ? 'Merged' : 'Closed'}
-                </span>
-              </div>
-
-              {issue.labels?.length > 0 && (
-                <div className="mb-3 flex flex-wrap gap-1">
-                  {issue.labels.slice(0, 3).map((label) => (
-                    <span
-                      key={label}
-                      className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-800 dark:text-gray-300"
-                    >
-                      {label}
-                    </span>
-                  ))}
-                  {issue.labels.length > 3 && (
-                    <span className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400">
-                      +{issue.labels.length - 3}
-                    </span>
-                  )}
-                </div>
-              )}
-
-              {issue.assignees?.length > 0 && (
-                <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
-                  <Image
-                    height={18}
-                    width={18}
-                    src={issue.assignees[0].avatarUrl}
-                    alt={issue.assignees[0].login}
-                    className="rounded-full"
-                  />
-                  <span className="truncate">
-                    {issue.assignees[0].login || issue.assignees[0].name}
-                    {issue.assignees.length > 1 && ` +${issue.assignees.length - 1}`}
-                  </span>
-                </div>
-              )}
-            </div>
-          ))}
-
-          {moduleIssues.length === 0 && (
-            <div className="rounded-lg border border-gray-200 bg-white p-6 text-center dark:border-gray-700 dark:bg-[#1f2327]">
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                No issues found for the selected filter.
-              </p>
-            </div>
-          )}
-        </div>
+        <IssuesTable
+          issues={moduleIssues}
+          showAssignee={true}
+          onIssueClick={handleIssueClick}
+          emptyMessage="No issues found for the selected filter."
+        />
 
         {/* Pagination Controls */}
         <Pagination
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 5a8864ea97..a111ab1e57 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
@@ -1,17 +1,24 @@
 'use client'
 
 import { useQuery } from '@apollo/client/react'
+import { Select, SelectItem } from '@heroui/select'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useMemo, useEffect, useState } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
-import { GetModuleMenteeDetailsDocument } from 'types/__generated__/menteeQueries.generated'
-import { Issue } from 'types/issue'
+import {
+  GetModuleMenteeDetailsDocument,
+  type GetModuleMenteeDetailsQuery,
+} from 'types/__generated__/menteeQueries.generated'
 import { MenteeDetails } from 'types/mentorship'
+import IssuesTable, { type IssueRow } from 'components/IssuesTable'
 import { LabelList } from 'components/LabelList'
 import LoadingSpinner from 'components/LoadingSpinner'
+import Pagination from 'components/Pagination'
 import SecondaryCard from 'components/SecondaryCard'
 
+const ITEMS_PER_PAGE = 20
+
 const MenteeProfilePage = () => {
   const { programKey, moduleKey, menteeKey } = useParams<{
     programKey: string
@@ -20,10 +27,13 @@ const MenteeProfilePage = () => {
   }>()
 
   const [menteeDetails, setMenteeDetails] = useState<MenteeDetails | null>(null)
-  const [menteeIssues, setMenteeIssues] = useState<Issue[]>([])
+  const [menteeIssuesData, setMenteeIssuesData] = useState<
+    GetModuleMenteeDetailsQuery['getMenteeModuleIssues']
+  >([])
 
   const [isLoading, setIsLoading] = useState(true)
   const [statusFilter, setStatusFilter] = useState<string>('all')
+  const [currentPage, setCurrentPage] = useState(1)
 
   const { data, error } = useQuery(GetModuleMenteeDetailsDocument, {
     variables: {
@@ -38,7 +48,7 @@ const MenteeProfilePage = () => {
   useEffect(() => {
     if (data) {
       setMenteeDetails(data.getMenteeDetails ?? null)
-      setMenteeIssues(data.getMenteeModuleIssues ?? [])
+      setMenteeIssuesData(data.getMenteeModuleIssues ?? [])
     }
     if (error) {
       handleAppError(error)
@@ -48,6 +58,19 @@ const MenteeProfilePage = () => {
     }
   }, [data, error])
 
+  const menteeIssues: IssueRow[] = useMemo(() => {
+    return menteeIssuesData.map((issue) => ({
+      objectID: issue.id,
+      number: issue.number,
+      title: issue.title,
+      state: issue.state,
+      isMerged: issue.isMerged,
+      labels: issue.labels || [],
+      assignees: issue.assignees || [],
+      url: issue.url,
+    }))
+  }, [menteeIssuesData])
+
   if (isLoading) return <LoadingSpinner />
 
   if (!menteeDetails) {
@@ -63,12 +86,31 @@ const MenteeProfilePage = () => {
   const openIssues = menteeIssues.filter((issue) => issue.state.toLowerCase() === 'open')
   const closedIssues = menteeIssues.filter((issue) => issue.state.toLowerCase() === 'closed')
 
-  const issueMap: Record<string, Issue[]> = {
+  const issueMap: Record<string, IssueRow[]> = {
     all: menteeIssues,
     open: openIssues,
     closed: closedIssues,
   }
-  const filteredIssues = issueMap[statusFilter] || closedIssues
+  const filteredIssues = issueMap[statusFilter] || menteeIssues
+
+  const totalPages = Math.ceil(filteredIssues.length / ITEMS_PER_PAGE)
+  const paginatedIssues = filteredIssues.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  )
+
+  const statusFilterOptions = [
+    { key: 'all', label: 'All', count: menteeIssues.length },
+    { key: 'open', label: 'Open', count: openIssues.length },
+    { key: 'closed', label: 'Closed', count: closedIssues.length },
+  ]
+
+  const handleIssueClick = (issueNumber: number) => {
+    const issue = menteeIssues.find((i) => i.number === issueNumber)
+    if (issue?.url) {
+      window.open(issue.url, '_blank', 'noopener,noreferrer')
+    }
+  }
 
   return (
     <div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
@@ -95,33 +137,6 @@ const MenteeProfilePage = () => {
           </div>
         </SecondaryCard>
 
-        {/* Stats */}
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-          <SecondaryCard title="Total Issues">
-            <div className="text-center">
-              <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
-                {menteeIssues.length}
-              </div>
-            </div>
-          </SecondaryCard>
-
-          <SecondaryCard title="Open Issues">
-            <div className="text-center">
-              <div className="text-3xl font-bold text-green-600 dark:text-green-400">
-                {openIssues.length}
-              </div>
-            </div>
-          </SecondaryCard>
-
-          <SecondaryCard title="Closed Issues">
-            <div className="text-center">
-              <div className="text-3xl font-bold text-gray-600 dark:text-gray-400">
-                {closedIssues.length}
-              </div>
-            </div>
-          </SecondaryCard>
-        </div>
-
         {/* Mentee Information */}
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
           <SecondaryCard title="Completed Levels">
@@ -154,54 +169,59 @@ const MenteeProfilePage = () => {
           </div>
         )}
 
-        {/* Issues - moved to the end */}
-        <SecondaryCard title="Issues Assigned">
-          {menteeIssues.length === 0 ? (
-            <p className="py-8 text-center text-gray-500 italic dark:text-gray-400">
-              No issues assigned to this mentee in this module
-            </p>
-          ) : (
-            <div>
-              {/* Filter Dropdown */}
-              <div className="mb-4">
-                <select
-                  value={statusFilter}
-                  onChange={(e) => setStatusFilter(e.target.value)}
-                  className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                >
-                  <option value="all">All Issues ({menteeIssues.length})</option>
-                  <option value="open">Open Issues ({openIssues.length})</option>
-                  <option value="closed">Closed Issues ({closedIssues.length})</option>
-                </select>
-              </div>
-
-              <div className="space-y-4">
-                {filteredIssues.map((issue) => (
-                  <div
-                    key={issue.number}
-                    className="rounded-lg border border-gray-200 p-4 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
+        {/* Issues */}
+        <SecondaryCard>
+          <div className="w-full">
+            <div className="flex justify-between">
+              <h1 className="text-3xl font-bold">Assigned Issues</h1>
+              <div className="mb-4 flex justify-end">
+                <div className="inline-flex h-12 items-center rounded-lg bg-gray-200 dark:bg-[#323232]">
+                  <Select
+                    size="md"
+                    aria-label="Filter by status"
+                    selectedKeys={new Set([statusFilter])}
+                    onSelectionChange={(keys) => {
+                      const [key] = Array.from(keys as Set<string>)
+                      if (key) {
+                        setStatusFilter(key)
+                        setCurrentPage(1)
+                      }
+                    }}
+                    classNames={{
+                      trigger: 'bg-gray-200 dark:bg-[#323232] pl-4 text-nowrap w-32',
+                      popoverContent: 'text-md min-w-32 dark:bg-[#323232] rounded-none p-0',
+                    }}
                   >
-                    <div className="flex items-center pb-4">
-                      <a
-                        href={issue.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="font-medium text-gray-900 transition-colors hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
+                    {statusFilterOptions.map((option) => (
+                      <SelectItem
+                        key={option.key}
+                        classNames={{
+                          base: 'text-sm hover:bg-[#D1DBE6] dark:hover:bg-[#454545] rounded-none px-3 py-0.5',
+                        }}
                       >
-                        {issue.title}
-                      </a>
-                    </div>
-
-                    {issue.labels && issue.labels.length > 0 && (
-                      <div className="mb-2">
-                        <LabelList labels={issue.labels} maxVisible={3} />
-                      </div>
-                    )}
-                  </div>
-                ))}
+                        {option.key === 'all' ? option.label : `${option.label} (${option.count})`}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </div>
               </div>
             </div>
-          )}
+
+            <IssuesTable
+              issues={paginatedIssues}
+              showAssignee={false}
+              onIssueClick={handleIssueClick}
+              emptyMessage="No issues found for the selected filter."
+            />
+
+            {/* Pagination Controls */}
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+              isLoaded={!isLoading}
+            />
+          </div>
         </SecondaryCard>
       </div>
     </div>
diff --git a/frontend/src/components/IssuesTable.tsx b/frontend/src/components/IssuesTable.tsx
new file mode 100644
index 0000000000..bc114c6321
--- /dev/null
+++ b/frontend/src/components/IssuesTable.tsx
@@ -0,0 +1,201 @@
+'use client'
+
+import { Tooltip } from '@heroui/tooltip'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import type React from 'react'
+
+export type IssueRow = {
+  objectID: string
+  number: number
+  title: string
+  state: string
+  isMerged?: boolean
+  labels: string[]
+  assignees?: Array<{ avatarUrl: string; login: string; name: string }>
+  url?: string
+  deadline?: string | null
+}
+
+interface IssuesTableProps {
+  issues: IssueRow[]
+  showAssignee?: boolean
+  onIssueClick?: (issueNumber: number) => void
+  issueUrl?: (issueNumber: number) => string
+  maxVisibleLabels?: number
+  emptyMessage?: string
+}
+
+const MAX_VISIBLE_LABELS = 5
+
+const IssuesTable: React.FC<IssuesTableProps> = ({
+  issues,
+  showAssignee = true,
+  onIssueClick,
+  issueUrl,
+  maxVisibleLabels = MAX_VISIBLE_LABELS,
+  emptyMessage = 'No issues found.',
+}) => {
+  const router = useRouter()
+
+  const handleIssueClick = (issueNumber: number) => {
+    if (onIssueClick) {
+      onIssueClick(issueNumber)
+    } else if (issueUrl) {
+      router.push(issueUrl(issueNumber))
+    }
+  }
+
+  const getStatusBadge = (state: string, isMerged?: boolean) => {
+    const statusMap: Record<string, { text: string; class: string }> = {
+      open: { text: 'Open', class: 'bg-[#238636]' },
+      merged: { text: 'Merged', class: 'bg-[#8657E5]' },
+      closed: { text: 'Closed', class: 'bg-[#DA3633]' },
+    }
+
+    const statusKey = isMerged ? 'merged' : state.toLowerCase()
+    const status = statusMap[statusKey] || statusMap.closed
+
+    return (
+      <span
+        className={`inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-medium text-white ${status.class}`}
+      >
+        {status.text}
+      </span>
+    )
+  }
+
+  const getColumnCount = () => {
+    let count = 3
+    if (showAssignee) count++
+    return count
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead className="hidden bg-gray-50 lg:table-header-group dark:bg-[#2a2e33]">
+          <tr>
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400"
+            >
+              Title
+            </th>
+            <th
+              scope="col"
+              className="hidden px-6 py-3 text-center text-xs font-medium tracking-wider text-gray-500 uppercase lg:table-cell dark:text-gray-400"
+            >
+              Status
+            </th>
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400"
+            >
+              Labels
+            </th>
+            {showAssignee && (
+              <th
+                scope="col"
+                className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400"
+              >
+                Assignee
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-[#1f2327]">
+          {issues.map((issue) => (
+            <tr
+              key={issue.objectID}
+              className="relative block border-b border-gray-200 p-4 transition-colors hover:bg-gray-50 lg:table-row lg:border-b lg:p-0 dark:border-gray-700 dark:hover:bg-[#2a2e33]"
+            >
+              {/* Title */}
+              <td className="block pb-3 lg:table-cell lg:px-6 lg:py-4">
+                <div className="flex items-start justify-between gap-3 lg:block">
+                  <Tooltip
+                    closeDelay={100}
+                    delay={100}
+                    showArrow
+                    content={issue.title}
+                    placement="bottom"
+                    isDisabled={issue.title.length <= 50}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => handleIssueClick(issue.number)}
+                      className="flex-1 cursor-pointer truncate text-left text-sm font-medium text-blue-600 hover:underline lg:block lg:max-w-md dark:text-blue-400"
+                    >
+                      {issue.title}
+                    </button>
+                  </Tooltip>
+                </div>
+              </td>
+
+              {/* Status */}
+              <td className="absolute top-4 right-4 block lg:relative lg:top-auto lg:right-auto lg:table-cell lg:px-6 lg:py-4 lg:text-center lg:text-sm lg:whitespace-nowrap">
+                <div className="flex justify-center">
+                  {getStatusBadge(issue.state, issue.isMerged)}
+                </div>
+              </td>
+
+              {/* Labels */}
+              <td className="block pb-3 lg:table-cell lg:px-6 lg:py-4">
+                {issue.labels && issue.labels.length > 0 ? (
+                  <div className="flex flex-wrap gap-1 lg:gap-2">
+                    {issue.labels.slice(0, maxVisibleLabels).map((label) => (
+                      <span
+                        key={label}
+                        className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-700 lg:rounded-lg lg:border lg:border-gray-400 lg:bg-transparent lg:hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:lg:border-gray-300 dark:lg:hover:bg-gray-700"
+                      >
+                        {label}
+                      </span>
+                    ))}
+                    {issue.labels.length > maxVisibleLabels && (
+                      <span className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-500 lg:rounded-lg lg:border lg:border-gray-400 lg:bg-transparent lg:text-gray-700 lg:hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:lg:border-gray-300 dark:lg:text-gray-300 dark:lg:hover:bg-gray-700">
+                        +{issue.labels.length - maxVisibleLabels} more
+                      </span>
+                    )}
+                  </div>
+                ) : null}
+              </td>
+
+              {/* Assignee */}
+              {showAssignee && (
+                <td className="block pb-0 text-xs text-gray-600 lg:table-cell lg:px-6 lg:py-4 lg:text-sm lg:text-gray-700 dark:text-gray-400 dark:lg:text-gray-300">
+                  {issue.assignees && issue.assignees.length > 0 ? (
+                    <div className="flex items-center gap-2">
+                      <Image
+                        height={18}
+                        width={18}
+                        src={issue.assignees[0].avatarUrl}
+                        alt={issue.assignees[0].login}
+                        className="rounded-full lg:h-6 lg:w-6"
+                      />
+                      <span className="max-w-[80px] truncate sm:max-w-[100px] md:max-w-[120px] lg:max-w-[150px]">
+                        {issue.assignees[0].login || issue.assignees[0].name}
+                        {issue.assignees.length > 1 && ` +${issue.assignees.length - 1}`}
+                      </span>
+                    </div>
+                  ) : null}
+                </td>
+              )}
+            </tr>
+          ))}
+          {issues.length === 0 && (
+            <tr>
+              <td
+                colSpan={getColumnCount()}
+                className="block p-6 text-center text-sm text-gray-500 lg:table-cell lg:px-6 lg:py-8 dark:text-gray-400"
+              >
+                {emptyMessage}
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default IssuesTable
diff --git a/frontend/src/server/queries/menteeQueries.ts b/frontend/src/server/queries/menteeQueries.ts
index 53db7fc7a7..87da93eb4f 100644
--- a/frontend/src/server/queries/menteeQueries.ts
+++ b/frontend/src/server/queries/menteeQueries.ts
@@ -22,6 +22,7 @@ export const GET_MODULE_MENTEE_DETAILS = gql`
       number
       title
       state
+      isMerged
       labels
       assignees {
         login
diff --git a/frontend/src/types/__generated__/menteeQueries.generated.ts b/frontend/src/types/__generated__/menteeQueries.generated.ts
index 07555d6be5..9f8dfb0c99 100644
--- a/frontend/src/types/__generated__/menteeQueries.generated.ts
+++ b/frontend/src/types/__generated__/menteeQueries.generated.ts
@@ -8,7 +8,7 @@ export type GetModuleMenteeDetailsQueryVariables = Types.Exact<{
 }>;
 
 
-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 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, isMerged: boolean, 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":"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
+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":"isMerged"}},{"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