diff --git a/frontend/__tests__/unit/components/ProgramActions.test.tsx b/frontend/__tests__/unit/components/ProgramActions.test.tsx
index d3d53dfe2d..096acc5bec 100644
--- a/frontend/__tests__/unit/components/ProgramActions.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramActions.test.tsx
@@ -42,7 +42,7 @@ describe('ProgramActions', () => {
   })
 
   test('renders and toggles dropdown', () => {
-    render(<ProgramActions status="DRAFT" setStatus={setStatus} />)
+    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()
@@ -52,7 +52,7 @@ describe('ProgramActions', () => {
   })
 
   test('handles Add Module action', () => {
-    render(<ProgramActions status="DRAFT" setStatus={setStatus} />)
+    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 }))
@@ -61,7 +61,7 @@ describe('ProgramActions', () => {
   })
 
   test('handles Publish action', () => {
-    render(<ProgramActions status="DRAFT" setStatus={setStatus} />)
+    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 }))
@@ -70,7 +70,7 @@ describe('ProgramActions', () => {
   })
 
   test('handles Move to Draft action', () => {
-    render(<ProgramActions status="PUBLISHED" setStatus={setStatus} />)
+    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 }))
@@ -78,7 +78,7 @@ describe('ProgramActions', () => {
   })
 
   test('handles Mark as Completed action', () => {
-    render(<ProgramActions status="PUBLISHED" setStatus={setStatus} />)
+    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 }))
@@ -88,7 +88,7 @@ describe('ProgramActions', () => {
   test('dropdown closes on outside click', () => {
     render(
       <div>
-        <ProgramActions status="DRAFT" setStatus={setStatus} />
+        <ProgramActions programKey="test-program" status="DRAFT" setStatus={setStatus} />
         <button data-testid="outside">Outside</button>
       </div>
     )
diff --git a/frontend/__tests__/unit/components/ProgramCard.test.tsx b/frontend/__tests__/unit/components/ProgramCard.test.tsx
index 10cdde9362..589ce1d7de 100644
--- a/frontend/__tests__/unit/components/ProgramCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramCard.test.tsx
@@ -1,6 +1,7 @@
 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 { useRouter } from 'next/navigation'
 import React from 'react'
 import type { Program } from 'types/mentorship'
 import { ProgramStatusEnum } from 'types/mentorship'
@@ -15,6 +16,10 @@ jest.mock('@fortawesome/react-fontawesome', () => ({
   ),
 }))
 
+jest.mock('hooks/useUpdateProgramStatus', () => ({
+  useUpdateProgramStatus: () => ({ updateProgramStatus: jest.fn() }),
+}))
+
 jest.mock('components/ActionButton', () => ({
   __esModule: true,
   default: ({ children, onClick }: { children: React.ReactNode; onClick: () => void }) => (
@@ -33,7 +38,6 @@ jest.mock('@heroui/tooltip', () => ({
 }))
 
 describe('ProgramCard', () => {
-  const mockOnEdit = jest.fn()
   const mockOnView = jest.fn()
 
   const baseMockProgram: Program = {
@@ -53,44 +57,44 @@ describe('ProgramCard', () => {
 
   describe('Basic Rendering', () => {
     it('renders program name correctly', () => {
-      render(<ProgramCard program={baseMockProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={baseMockProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('Test Program')).toBeInTheDocument()
     })
 
     it('renders program description correctly', () => {
-      render(<ProgramCard program={baseMockProgram} onView={mockOnView} accessLevel="user" />)
-
-      expect(screen.getByText('This is a test program description')).toBeInTheDocument()
-    })
-  })
-
-  describe('Access Level - Admin', () => {
-    it('shows user role badge when accessLevel is admin', () => {
       render(
         <ProgramCard
+          isAdmin={false}
           program={baseMockProgram}
           onView={mockOnView}
-          onEdit={mockOnEdit}
-          accessLevel="admin"
+          accessLevel="user"
         />
       )
 
-      expect(screen.getByText('admin')).toBeInTheDocument()
+      expect(screen.getByText('This is a test program description')).toBeInTheDocument()
     })
+  })
 
-    it('shows Preview and Edit buttons for admin access', () => {
+  describe('Access Level - Admin', () => {
+    it('shows user role badge when accessLevel is admin', () => {
       render(
         <ProgramCard
           program={baseMockProgram}
           onView={mockOnView}
-          onEdit={mockOnEdit}
+          isAdmin={true}
           accessLevel="admin"
         />
       )
 
-      expect(screen.getByText('Preview')).toBeInTheDocument()
-      expect(screen.getByText('Edit')).toBeInTheDocument()
+      expect(screen.getByText('admin')).toBeInTheDocument()
     })
 
     it('calls onView when Preview button is clicked', () => {
@@ -98,7 +102,7 @@ describe('ProgramCard', () => {
         <ProgramCard
           program={baseMockProgram}
           onView={mockOnView}
-          onEdit={mockOnEdit}
+          isAdmin={true}
           accessLevel="admin"
         />
       )
@@ -109,32 +113,48 @@ describe('ProgramCard', () => {
       expect(mockOnView).toHaveBeenCalledWith('test-program')
     })
 
-    it('calls onEdit when Edit button is clicked', () => {
+    it('navigates to edit page when Edit Program is clicked', () => {
+      const router = useRouter()
+
       render(
         <ProgramCard
           program={baseMockProgram}
           onView={mockOnView}
-          onEdit={mockOnEdit}
+          isAdmin={true}
           accessLevel="admin"
         />
       )
 
-      const editButton = screen.getByText('Edit').closest('button')
-      fireEvent.click(editButton!)
+      fireEvent.click(screen.getByTestId('program-actions-button'))
+      fireEvent.click(screen.getByText('Edit Program'))
 
-      expect(mockOnEdit).toHaveBeenCalledWith('test-program')
+      expect(router.push).toHaveBeenCalledWith('/my/mentorship/programs/test-program/edit')
     })
   })
 
   describe('Access Level - User', () => {
     it('does not show user role badge when accessLevel is user', () => {
-      render(<ProgramCard program={baseMockProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={baseMockProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.queryByText('admin')).not.toBeInTheDocument()
     })
 
     it('shows only View Details button for user access', () => {
-      render(<ProgramCard program={baseMockProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={baseMockProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('View Details')).toBeInTheDocument()
       expect(screen.queryByText('Preview')).not.toBeInTheDocument()
@@ -142,7 +162,14 @@ describe('ProgramCard', () => {
     })
 
     it('calls onView when View Details button is clicked', () => {
-      render(<ProgramCard program={baseMockProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={baseMockProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       const viewButton = screen.getByText('View Details').closest('button')
       fireEvent.click(viewButton!)
@@ -154,7 +181,14 @@ describe('ProgramCard', () => {
   describe('User Role Badge Styling', () => {
     it('applies admin role styling', () => {
       const adminProgram = { ...baseMockProgram, userRole: 'admin' }
-      render(<ProgramCard program={adminProgram} onView={mockOnView} accessLevel="admin" />)
+      render(
+        <ProgramCard
+          isAdmin={true}
+          program={adminProgram}
+          onView={mockOnView}
+          accessLevel="admin"
+        />
+      )
 
       const badge = screen.getByText('admin')
       expect(badge).toHaveClass('bg-blue-100', 'text-blue-800')
@@ -162,7 +196,14 @@ describe('ProgramCard', () => {
 
     it('applies mentor role styling', () => {
       const mentorProgram = { ...baseMockProgram, userRole: 'mentor' }
-      render(<ProgramCard program={mentorProgram} onView={mockOnView} accessLevel="admin" />)
+      render(
+        <ProgramCard
+          isAdmin={true}
+          program={mentorProgram}
+          onView={mockOnView}
+          accessLevel="admin"
+        />
+      )
 
       const badge = screen.getByText('mentor')
       expect(badge).toHaveClass('bg-green-100', 'text-green-800')
@@ -170,7 +211,14 @@ describe('ProgramCard', () => {
 
     it('applies default role styling for unknown role', () => {
       const unknownRoleProgram = { ...baseMockProgram, userRole: 'unknown' }
-      render(<ProgramCard program={unknownRoleProgram} onView={mockOnView} accessLevel="admin" />)
+      render(
+        <ProgramCard
+          isAdmin={true}
+          program={unknownRoleProgram}
+          onView={mockOnView}
+          accessLevel="admin"
+        />
+      )
 
       const badge = screen.getByText('unknown')
       expect(badge).toHaveClass('bg-gray-100', 'text-gray-800')
@@ -178,7 +226,14 @@ describe('ProgramCard', () => {
 
     it('applies default styling when userRole is undefined', () => {
       const noRoleProgram = { ...baseMockProgram, userRole: undefined }
-      render(<ProgramCard program={noRoleProgram} onView={mockOnView} accessLevel="admin" />)
+      render(
+        <ProgramCard
+          isAdmin={true}
+          program={noRoleProgram}
+          onView={mockOnView}
+          accessLevel="admin"
+        />
+      )
 
       // Should not render badge when userRole is undefined
       expect(screen.queryByText(/bg-/)).not.toBeInTheDocument()
@@ -190,7 +245,14 @@ describe('ProgramCard', () => {
       const longDescription = 'A'.repeat(300) // Long enough to trigger line clamping
       const longDescProgram = { ...baseMockProgram, description: longDescription }
 
-      render(<ProgramCard program={longDescProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={longDescProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText(longDescription)).toBeInTheDocument()
       expect(screen.getByText(longDescription)).toBeInTheDocument()
@@ -202,7 +264,14 @@ describe('ProgramCard', () => {
       const shortDescription = 'Short description'
       const shortDescProgram = { ...baseMockProgram, description: shortDescription }
 
-      render(<ProgramCard program={shortDescProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={shortDescProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('Short description')).toBeInTheDocument()
 
@@ -213,7 +282,14 @@ describe('ProgramCard', () => {
     it('shows fallback text when description is empty', () => {
       const emptyDescProgram = { ...baseMockProgram, description: '' }
 
-      render(<ProgramCard program={emptyDescProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={emptyDescProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('No description available.')).toBeInTheDocument()
     })
@@ -222,7 +298,14 @@ describe('ProgramCard', () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const noDescProgram = { ...baseMockProgram, description: undefined as any }
 
-      render(<ProgramCard program={noDescProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={noDescProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('No description available.')).toBeInTheDocument()
     })
@@ -230,15 +313,30 @@ describe('ProgramCard', () => {
 
   describe('Date Formatting', () => {
     it('shows date range when both startedAt and endedAt are provided', () => {
-      render(<ProgramCard program={baseMockProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={baseMockProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
-      expect(screen.getByText('Jan 1, 2024 – Dec 31, 2024')).toBeInTheDocument()
+      expect(
+        screen.getByText((t) => t.includes('Jan 1, 2024') && t.includes('Dec 31, 2024'))
+      ).toBeInTheDocument()
     })
 
     it('shows only start date when endedAt is missing', () => {
       const startOnlyProgram = { ...baseMockProgram, endedAt: '' }
-
-      render(<ProgramCard program={startOnlyProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={startOnlyProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('Started: Jan 1, 2024')).toBeInTheDocument()
     })
@@ -246,7 +344,14 @@ describe('ProgramCard', () => {
     it('shows fallback text when both dates are missing', () => {
       const noDatesProgram = { ...baseMockProgram, startedAt: '', endedAt: '' }
 
-      render(<ProgramCard program={noDatesProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={noDatesProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('No dates set')).toBeInTheDocument()
     })
@@ -254,7 +359,14 @@ describe('ProgramCard', () => {
     it('shows fallback text when startedAt is missing but endedAt exists', () => {
       const endOnlyProgram = { ...baseMockProgram, startedAt: '' }
 
-      render(<ProgramCard program={endOnlyProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={endOnlyProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('No dates set')).toBeInTheDocument()
     })
@@ -265,8 +377,8 @@ describe('ProgramCard', () => {
       render(
         <ProgramCard
           program={baseMockProgram}
+          isAdmin={true}
           onView={mockOnView}
-          onEdit={mockOnEdit}
           accessLevel="admin"
         />
       )
@@ -274,32 +386,46 @@ describe('ProgramCard', () => {
       expect(screen.getByTestId('icon-eye')).toBeInTheDocument()
     })
 
-    it('renders edit icon for Edit button', () => {
+    it('renders actions button for admin menu', () => {
       render(
         <ProgramCard
           program={baseMockProgram}
+          isAdmin={true}
           onView={mockOnView}
-          onEdit={mockOnEdit}
           accessLevel="admin"
         />
       )
 
-      expect(screen.getByTestId('icon-edit')).toBeInTheDocument()
+      expect(screen.getByTestId('program-actions-button')).toBeInTheDocument()
     })
 
     it('renders eye icon for View Details button', () => {
-      render(<ProgramCard program={baseMockProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={baseMockProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByTestId('icon-eye')).toBeInTheDocument()
     })
   })
 
   describe('Edge Cases', () => {
-    it('handles missing onEdit prop gracefully for admin access', () => {
-      render(<ProgramCard program={baseMockProgram} onView={mockOnView} accessLevel="admin" />)
+    it('shows Edit Program in actions menu for admin access', () => {
+      render(
+        <ProgramCard
+          isAdmin={true}
+          program={baseMockProgram}
+          onView={mockOnView}
+          accessLevel="admin"
+        />
+      )
 
-      // Should still render Edit button even without onEdit
-      expect(screen.getByText('Edit')).toBeInTheDocument()
+      fireEvent.click(screen.getByTestId('program-actions-button'))
+      expect(screen.getByText('Edit Program')).toBeInTheDocument()
     })
 
     it('handles program with minimal data', () => {
@@ -313,7 +439,14 @@ describe('ProgramCard', () => {
         endedAt: '',
       }
 
-      render(<ProgramCard program={minimalProgram} onView={mockOnView} accessLevel="user" />)
+      render(
+        <ProgramCard
+          isAdmin={false}
+          program={minimalProgram}
+          onView={mockOnView}
+          accessLevel="user"
+        />
+      )
 
       expect(screen.getByText('Minimal Program')).toBeInTheDocument()
       expect(screen.getByText('No description available.')).toBeInTheDocument()
diff --git a/frontend/__tests__/unit/pages/MyMentorship.test.tsx b/frontend/__tests__/unit/pages/MyMentorship.test.tsx
index ca62264445..eefc6e5b80 100644
--- a/frontend/__tests__/unit/pages/MyMentorship.test.tsx
+++ b/frontend/__tests__/unit/pages/MyMentorship.test.tsx
@@ -29,6 +29,9 @@ jest.mock('next-auth/react', () => {
     useSession: jest.fn(),
   }
 })
+jest.mock('hooks/useUpdateProgramStatus', () => ({
+  useUpdateProgramStatus: () => ({ updateProgramStatus: jest.fn() }),
+}))
 
 const mockUseQuery = useQuery as jest.Mock
 const mockPush = jest.fn()
diff --git a/frontend/__tests__/unit/pages/Program.test.tsx b/frontend/__tests__/unit/pages/Program.test.tsx
index 09960da32d..68aef54469 100644
--- a/frontend/__tests__/unit/pages/Program.test.tsx
+++ b/frontend/__tests__/unit/pages/Program.test.tsx
@@ -12,6 +12,9 @@ jest.mock('server/fetchAlgoliaData', () => ({
 const mockRouter = {
   push: jest.fn(),
 }
+jest.mock('hooks/useUpdateProgramStatus', () => ({
+  useUpdateProgramStatus: () => ({ updateProgramStatus: jest.fn() }),
+}))
 jest.mock('next/navigation', () => ({
   ...jest.requireActual('next/navigation'),
   useRouter: jest.fn(() => mockRouter),
diff --git a/frontend/jest.setup.ts b/frontend/jest.setup.ts
index ba7a9617ae..c6b66ccfc2 100644
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -43,6 +43,22 @@ jest.mock('next-auth/react', () => {
   }
 })
 
+jest.mock('next/navigation', () => {
+  const actual = jest.requireActual('next/navigation')
+  const push = jest.fn()
+  const replace = jest.fn()
+  const prefetch = jest.fn()
+  const back = jest.fn()
+  const forward = jest.fn()
+  const mockRouter = { push, replace, prefetch, back, forward }
+  return {
+    ...actual,
+    useRouter: jest.fn(() => mockRouter),
+    useSearchParams: jest.fn(() => new URLSearchParams()),
+    useParams: jest.fn(() => ({})),
+  }
+})
+
 if (!global.structuredClone) {
   global.structuredClone = (val) => JSON.parse(JSON.stringify(val))
 }
diff --git a/frontend/src/app/mentorship/programs/page.tsx b/frontend/src/app/mentorship/programs/page.tsx
index 6fd1a9552d..37ad14fc62 100644
--- a/frontend/src/app/mentorship/programs/page.tsx
+++ b/frontend/src/app/mentorship/programs/page.tsx
@@ -34,6 +34,7 @@ const ProgramsPage = () => {
         program={program}
         accessLevel="user"
         onView={handleButtonClick}
+        isAdmin={false}
       />
     )
   }
diff --git a/frontend/src/app/my/mentorship/page.tsx b/frontend/src/app/my/mentorship/page.tsx
index 2248eb54d9..5db541d7b2 100644
--- a/frontend/src/app/my/mentorship/page.tsx
+++ b/frontend/src/app/my/mentorship/page.tsx
@@ -82,7 +82,6 @@ const MyMentorshipPage: React.FC = () => {
 
   const handleCreate = () => router.push('/my/mentorship/programs/create')
   const handleView = (key: string) => router.push(`/my/mentorship/programs/${key}`)
-  const handleEdit = (key: string) => router.push(`/my/mentorship/programs/${key}/edit`)
 
   if (!username) {
     return <LoadingSpinner />
@@ -140,8 +139,8 @@ const MyMentorshipPage: React.FC = () => {
                 accessLevel="admin"
                 key={p.id}
                 program={p}
-                onEdit={handleEdit}
                 onView={handleView}
+                isAdmin={p?.userRole === 'admin'}
               />
             ))
           )}
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
index a3ece68327..aaadcf23e2 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
@@ -115,6 +115,7 @@ const ProgramDetailsPage = () => {
 
   return (
     <DetailsCard
+      programKey={program.key}
       modules={modules}
       status={program.status}
       setStatus={updateStatus}
diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx
index abd87f136a..2ba935db21 100644
--- a/frontend/src/components/CardDetailsPage.tsx
+++ b/frontend/src/components/CardDetailsPage.tsx
@@ -51,6 +51,7 @@ const DetailsCard = ({
   healthMetricsData,
   isActive = true,
   languages,
+  programKey,
   projectName,
   pullRequests,
   recentIssues,
@@ -76,7 +77,7 @@ const DetailsCard = ({
           <div className="flex w-full items-center justify-between">
             <h1 className="text-4xl font-bold">{title}</h1>
             {type === 'program' && accessLevel === 'admin' && canUpdateStatus && (
-              <ProgramActions status={status} setStatus={setStatus} />
+              <ProgramActions programKey={programKey} status={status} setStatus={setStatus} />
             )}
             {type === 'module' &&
               accessLevel === 'admin' &&
diff --git a/frontend/src/components/ModuleForm.tsx b/frontend/src/components/ModuleForm.tsx
index a673692d10..9635df159b 100644
--- a/frontend/src/components/ModuleForm.tsx
+++ b/frontend/src/components/ModuleForm.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useApolloClient } from '@apollo/client'
-import clsx from 'clsx'
 import debounce from 'lodash/debounce'
 import { useRouter } from 'next/navigation'
 import type React from 'react'
@@ -66,9 +65,9 @@ const ModuleForm = ({
               <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 lg:grid-cols-2">
+              <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-medium">
+                  <label htmlFor="module-name" className="mb-2 block text-sm font-semibold">
                     Module Name *
                   </label>
                   <input
@@ -78,12 +77,12 @@ const ModuleForm = ({
                     value={formData.name}
                     onChange={handleInputChange}
                     required
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
 
                 <div className="lg:col-span-2">
-                  <label htmlFor="module-description" className="mb-2 block text-sm font-medium">
+                  <label htmlFor="module-description" className="mb-2 block text-sm font-semibold">
                     Description *
                   </label>
                   <textarea
@@ -93,7 +92,7 @@ const ModuleForm = ({
                     onChange={handleInputChange}
                     rows={4}
                     required
-                    className="w-full resize-none rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
               </div>
@@ -103,9 +102,9 @@ const ModuleForm = ({
               <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 md:grid-cols-2 lg:grid-cols-3">
+              <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-medium">
+                  <label htmlFor="startedAt" className="mb-2 block text-sm font-semibold">
                     Start Date *
                   </label>
                   <input
@@ -115,11 +114,11 @@ const ModuleForm = ({
                     value={formData.startedAt}
                     onChange={handleInputChange}
                     required
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
                 <div>
-                  <label htmlFor="endedAt" className="mb-2 block text-sm font-medium">
+                  <label htmlFor="endedAt" className="mb-2 block text-sm font-semibold">
                     End Date *
                   </label>
                   <input
@@ -129,11 +128,11 @@ const ModuleForm = ({
                     value={formData.endedAt}
                     onChange={handleInputChange}
                     required
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
                 <div>
-                  <label htmlFor="experienceLevel" className="mb-2 block text-sm font-medium">
+                  <label htmlFor="experienceLevel" className="mb-2 block text-sm font-semibold">
                     Experience Level
                   </label>
                   <select
@@ -141,7 +140,7 @@ const ModuleForm = ({
                     id="experienceLevel"
                     value={formData.experienceLevel}
                     onChange={handleInputChange}
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   >
                     {EXPERIENCE_LEVELS.map((lvl) => (
                       <option key={lvl.key} value={lvl.key}>
@@ -157,9 +156,9 @@ const ModuleForm = ({
               <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 lg:grid-cols-2">
+              <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-medium">
+                  <label htmlFor="domains" className="mb-2 block text-sm font-semibold">
                     Domains
                   </label>
                   <input
@@ -169,11 +168,11 @@ const ModuleForm = ({
                     value={formData.domains}
                     onChange={handleInputChange}
                     placeholder="AI, Web Development"
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
                 <div>
-                  <label htmlFor="tags" className="mb-2 block text-sm font-medium">
+                  <label htmlFor="tags" className="mb-2 block text-sm font-semibold">
                     Tags
                   </label>
                   <input
@@ -183,7 +182,7 @@ const ModuleForm = ({
                     value={formData.tags}
                     onChange={handleInputChange}
                     placeholder="javascript, react"
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
                 <div>
@@ -201,7 +200,7 @@ const ModuleForm = ({
                 </div>
                 {isEdit && (
                   <div className="lg:col-span-2">
-                    <label htmlFor="mentorLogins" className="mb-2 block text-sm font-medium">
+                    <label htmlFor="mentorLogins" className="mb-2 block text-sm font-semibold">
                       Mentor GitHub Usernames
                     </label>
                     <input
@@ -211,7 +210,7 @@ const ModuleForm = ({
                       value={formData.mentorLogins}
                       onChange={handleInputChange}
                       placeholder="johndoe, jane-doe"
-                      className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                      className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                     />
                   </div>
                 )}
@@ -223,7 +222,7 @@ const ModuleForm = ({
                 <button
                   type="button"
                   onClick={() => router.back()}
-                  className="rounded-lg border border-gray-200 px-6 py-3 font-medium text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700"
+                  className="rounded-lg border border-gray-50 px-6 py-3 font-semibold text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700"
                 >
                   Cancel
                 </button>
@@ -342,7 +341,7 @@ export const ProjectSelector = ({ value, defaultName, onProjectChange }: Project
 
   return (
     <div className="relative">
-      <label htmlFor="projectSelector" className="mb-2 block text-sm font-medium">
+      <label htmlFor="projectSelector" className="mb-2 block text-sm font-semibold">
         Project Name *
       </label>
       <input
@@ -353,9 +352,7 @@ export const ProjectSelector = ({ value, defaultName, onProjectChange }: Project
         required
         onChange={handleInputChange}
         onBlur={handleBlur}
-        className={clsx(
-          'w-full max-w-md rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-hidden sm:w-96 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400 dark:focus:ring-blue-400'
-        )}
+        className="w-full max-w-md rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] sm:w-96 dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
       />
 
       {showSuggestions && suggestions.length > 0 && (
diff --git a/frontend/src/components/ProgramActions.tsx b/frontend/src/components/ProgramActions.tsx
index 9ccf34324a..3694ecdc24 100644
--- a/frontend/src/components/ProgramActions.tsx
+++ b/frontend/src/components/ProgramActions.tsx
@@ -7,11 +7,12 @@ import type React from 'react'
 import { useState, useRef, useEffect } from 'react'
 
 interface ProgramActionsProps {
+  programKey: string
   status: string
-  setStatus: (newStatus: 'DRAFT' | 'PUBLISHED' | 'COMPLETED') => void
+  setStatus: (newStatus: string) => void
 }
 
-const ProgramActions: React.FC<ProgramActionsProps> = ({ status, setStatus }) => {
+const ProgramActions: React.FC<ProgramActionsProps> = ({ programKey, status, setStatus }) => {
   const router = useRouter()
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
@@ -19,10 +20,10 @@ const ProgramActions: React.FC<ProgramActionsProps> = ({ status, setStatus }) =>
   const handleAction = (actionKey: string) => {
     switch (actionKey) {
       case 'edit Program':
-        router.push(`${window.location.pathname}/edit`)
+        router.push(`/my/mentorship/programs/${programKey}/edit`)
         break
       case 'create_module':
-        router.push(`${window.location.pathname}/modules/create`)
+        router.push(`/my/mentorship/programs/${programKey}/modules/create`)
         break
       case 'publish':
         setStatus('PUBLISHED')
@@ -66,9 +67,11 @@ const ProgramActions: React.FC<ProgramActionsProps> = ({ status, setStatus }) =>
         data-testid="program-actions-button"
         type="button"
         onClick={() => setDropdownOpen((prev) => !prev)}
-        className="rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
       >
-        <FontAwesomeIcon icon={faEllipsisV} />
+        <FontAwesomeIcon
+          icon={faEllipsisV}
+          className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200"
+        />
       </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">
diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
index 719c83f8aa..01d32c6259 100644
--- a/frontend/src/components/ProgramCard.tsx
+++ b/frontend/src/components/ProgramCard.tsx
@@ -1,25 +1,38 @@
 import { faEye } from '@fortawesome/free-regular-svg-icons'
-import { faEdit } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
+import { useUpdateProgramStatus } from 'hooks/useUpdateProgramStatus'
 import type React from 'react'
+import { GET_PROGRAM_AND_MODULES } from 'server/queries/programsQueries'
 import { Program } from 'types/mentorship'
 import ActionButton from 'components/ActionButton'
+import ProgramActions from 'components/ProgramActions'
 
 interface ProgramCardProps {
   program: Program
-  onEdit?: (key: string) => void
   onView: (key: string) => void
   accessLevel: 'admin' | 'user'
+  isAdmin: boolean
 }
 
-const ProgramCard: React.FC<ProgramCardProps> = ({ program, onEdit, onView, accessLevel }) => {
+const ProgramCard: React.FC<ProgramCardProps> = ({ program, onView, accessLevel, isAdmin }) => {
   const formatDate = (d: string) =>
     new Date(d).toLocaleDateString('en-US', {
       month: 'short',
       day: 'numeric',
       year: 'numeric',
     })
+  const { updateProgramStatus } = useUpdateProgramStatus({
+    programKey: program.key,
+    programName: program.name,
+    isAdmin,
+    refetchQueries: [
+      {
+        query: GET_PROGRAM_AND_MODULES,
+        variables: { programKey: program.key },
+      },
+    ],
+  })
 
   const roleClass = {
     admin: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
@@ -47,21 +60,32 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onEdit, onView, acce
                 {program.name}
               </h3>
             </Tooltip>
+            {accessLevel === 'admin' && isAdmin && (
+              <ProgramActions
+                programKey={program.key}
+                status={program.status}
+                setStatus={updateProgramStatus}
+              />
+            )}
+          </div>
+          <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
+            <span>
+              {program.startedAt && program.endedAt
+                ? `${formatDate(program.startedAt)} – ${formatDate(program.endedAt)}`
+                : program.startedAt
+                  ? `Started: ${formatDate(program.startedAt)}`
+                  : 'No dates set'}
+            </span>
             {accessLevel === 'admin' && (
               <span
-                className={`rounded-full px-2 py-1 text-xs font-medium capitalize ${roleClass[program.userRole] ?? roleClass.default}`}
+                className={`ml-2 rounded-full px-2 py-1 text-xs font-medium capitalize ${
+                  roleClass[program.userRole] ?? roleClass.default
+                }`}
               >
                 {program.userRole}
               </span>
             )}
           </div>
-          <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
-            {program.startedAt && program.endedAt
-              ? `${formatDate(program.startedAt)} – ${formatDate(program.endedAt)}`
-              : program.startedAt
-                ? `Started: ${formatDate(program.startedAt)}`
-                : 'No dates set'}
-          </div>
           <div className="flex flex-1 flex-col justify-start">
             <p className="line-clamp-6 overflow-hidden text-sm text-gray-700 dark:text-gray-300">
               {description}
@@ -70,23 +94,10 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onEdit, onView, acce
         </div>
 
         <div className="flex gap-2">
-          {accessLevel === 'admin' ? (
-            <>
-              <ActionButton onClick={() => onView(program.key)}>
-                <FontAwesomeIcon icon={faEye} className="mr-1" />
-                Preview
-              </ActionButton>
-              <ActionButton onClick={() => onEdit(program.key)}>
-                <FontAwesomeIcon icon={faEdit} className="mr-1" />
-                Edit
-              </ActionButton>
-            </>
-          ) : (
-            <ActionButton onClick={() => onView(program.key)}>
-              <FontAwesomeIcon icon={faEye} className="mr-1" />
-              View Details
-            </ActionButton>
-          )}
+          <ActionButton onClick={() => onView(program.key)}>
+            <FontAwesomeIcon icon={faEye} className="mr-1" />
+            {accessLevel === 'admin' ? 'Preview' : 'View Details'}
+          </ActionButton>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/ProgramForm.tsx b/frontend/src/components/ProgramForm.tsx
index b03d93ee85..f1b877eda2 100644
--- a/frontend/src/components/ProgramForm.tsx
+++ b/frontend/src/components/ProgramForm.tsx
@@ -64,9 +64,9 @@ const ProgramForm = ({
               <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 lg:grid-cols-2">
+              <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-medium">
+                  <label htmlFor="program-name" className="mb-2 block text-sm font-semibold">
                     Program Name *
                   </label>
                   <input
@@ -76,12 +76,12 @@ const ProgramForm = ({
                     value={formData.name}
                     onChange={handleInputChange}
                     required
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
 
                 <div className="lg:col-span-2">
-                  <label htmlFor="program-description" className="mb-2 block text-sm font-medium">
+                  <label htmlFor="program-description" className="mb-2 block text-sm font-semibold">
                     Description *
                   </label>
                   <textarea
@@ -91,20 +91,20 @@ const ProgramForm = ({
                     onChange={handleInputChange}
                     rows={4}
                     required
-                    className="w-full resize-none rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
               </div>
             </section>
 
             {/* Configuration */}
-            <section className="flex flex-col gap-6">
+            <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-medium">
+                  <label htmlFor="program-start-date" className="mb-2 block text-sm font-semibold">
                     Start Date *
                   </label>
                   <input
@@ -114,11 +114,11 @@ const ProgramForm = ({
                     value={formData.startedAt}
                     onChange={handleInputChange}
                     required
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
                 <div>
-                  <label htmlFor="program-end-date" className="mb-2 block text-sm font-medium">
+                  <label htmlFor="program-end-date" className="mb-2 block text-sm font-semibold">
                     End Date *
                   </label>
                   <input
@@ -128,11 +128,11 @@ const ProgramForm = ({
                     value={formData.endedAt}
                     onChange={handleInputChange}
                     required
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
                 <div>
-                  <label htmlFor="mentees-limit" className="mb-2 block text-sm font-medium">
+                  <label htmlFor="mentees-limit" className="mb-2 block text-sm font-semibold">
                     Mentees Limit *
                   </label>
                   <input
@@ -143,7 +143,7 @@ const ProgramForm = ({
                     onChange={handleInputChange}
                     min={1}
                     required
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
               </div>
@@ -154,9 +154,9 @@ const ProgramForm = ({
               <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 lg:grid-cols-2">
+              <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-medium">
+                  <label htmlFor="program-tags" className="mb-2 block text-sm font-semibold">
                     Tags
                   </label>
                   <input
@@ -166,11 +166,11 @@ const ProgramForm = ({
                     value={formData.tags}
                     onChange={handleInputChange}
                     placeholder="javascript, react"
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
-                <div>
-                  <label htmlFor="program-domains" className="mb-2 block text-sm font-medium">
+                <div className="">
+                  <label htmlFor="program-domains" className="mb-2 block text-sm font-semibold">
                     Domains
                   </label>
                   <input
@@ -180,25 +180,25 @@ const ProgramForm = ({
                     value={formData.domains}
                     onChange={handleInputChange}
                     placeholder="AI, Web Development"
-                    className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
                 {isEdit && (
                   <div className="lg:col-span-2">
                     <label
-                      htmlFor="mentor-github-usernames"
-                      className="mb-2 block text-sm font-medium"
+                      htmlFor="admin-github-usernames"
+                      className="mb-2 block text-sm font-semibold"
                     >
                       Admin GitHub Usernames
                     </label>
                     <input
-                      id="mentor-github-usernames"
+                      id="admin-github-usernames"
                       type="text"
                       name="adminLogins"
                       value={formData.adminLogins}
                       onChange={handleInputChange}
                       placeholder="johndoe, jane-doe"
-                      className="w-full rounded-lg border-2 bg-gray-50 px-4 py-3 text-gray-800 focus:outline-hidden dark:bg-gray-800 dark:text-gray-200"
+                      className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                     />
                   </div>
                 )}
@@ -206,12 +206,12 @@ const ProgramForm = ({
             </section>
 
             {/* Submit Buttons */}
-            <div className="border-t-1 border-t-gray-200 pt-8 dark:border-t-gray-700">
+            <div className="border-t border-gray-200 pt-8 text-gray-600 dark:border-gray-700 dark:text-gray-300">
               <div className="flex flex-col justify-end gap-4 sm:flex-row">
                 <button
                   type="button"
                   onClick={() => history.back()}
-                  className="rounded-lg border-1 border-gray-200 px-6 py-3 font-medium text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700"
+                  className="rounded-lg border border-gray-50 px-6 py-3 font-medium text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
                 >
                   Cancel
                 </button>
diff --git a/frontend/src/hooks/useUpdateProgramStatus.ts b/frontend/src/hooks/useUpdateProgramStatus.ts
new file mode 100644
index 0000000000..4f5bc5eab6
--- /dev/null
+++ b/frontend/src/hooks/useUpdateProgramStatus.ts
@@ -0,0 +1,61 @@
+import { DocumentNode, useMutation } from '@apollo/client'
+import { addToast } from '@heroui/toast'
+import upperFirst from 'lodash/upperFirst'
+import { handleAppError } from 'app/global-error'
+import { UPDATE_PROGRAM_STATUS_MUTATION } from 'server/mutations/programsMutations'
+
+interface UseUpdateProgramStatusProps {
+  programKey: string
+  programName: string
+  isAdmin: boolean
+  refetchQueries?: { query: DocumentNode; variables: { programKey: string } }[]
+}
+
+export const useUpdateProgramStatus = ({
+  programKey,
+  programName,
+  isAdmin,
+  refetchQueries = [],
+}: UseUpdateProgramStatusProps) => {
+  const [updateProgramMutation] = useMutation(UPDATE_PROGRAM_STATUS_MUTATION, {
+    onError: handleAppError,
+  })
+
+  const updateProgramStatus = async (newStatus: string) => {
+    if (!isAdmin) {
+      addToast({
+        title: 'Permission Denied',
+        description: 'Only admins can update the program status.',
+        variant: 'solid',
+        color: 'danger',
+        timeout: 3000,
+      })
+      return
+    }
+
+    try {
+      await updateProgramMutation({
+        variables: {
+          inputData: {
+            key: programKey,
+            name: programName,
+            status: newStatus,
+          },
+        },
+        refetchQueries,
+      })
+
+      addToast({
+        title: `Program status updated to ${upperFirst(newStatus)}`,
+        description: 'The status has been successfully updated.',
+        variant: 'solid',
+        color: 'success',
+        timeout: 3000,
+      })
+    } catch (err) {
+      handleAppError(err)
+    }
+  }
+
+  return { updateProgramStatus }
+}
diff --git a/frontend/src/server/queries/programsQueries.ts b/frontend/src/server/queries/programsQueries.ts
index 307cbd7760..a3b722b19e 100644
--- a/frontend/src/server/queries/programsQueries.ts
+++ b/frontend/src/server/queries/programsQueries.ts
@@ -9,6 +9,7 @@ export const GET_MY_PROGRAMS = gql`
         id
         key
         name
+        status
         description
         startedAt
         endedAt
diff --git a/frontend/src/types/card.ts b/frontend/src/types/card.ts
index 9f37a9011e..8382bb0835 100644
--- a/frontend/src/types/card.ts
+++ b/frontend/src/types/card.ts
@@ -56,6 +56,7 @@ export interface DetailsCardProps {
   mentors?: Contributor[]
   admins?: Contributor[]
   projectName?: string
+  programKey?: string
   pullRequests?: PullRequest[]
   recentIssues?: Issue[]
   recentMilestones?: Milestone[]