diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/ApplyOpportunityModal.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/ApplyOpportunityModal.tsx
index ed355f305..27acf2830 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/ApplyOpportunityModal.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/ApplyOpportunityModal.tsx
@@ -44,8 +44,8 @@ const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
             size='lg'
             title={
                 success
-                    ? `Your Application for ${props.projectName} Has Been Received!`
-                    : `Confirm Your Copilot Application for ${props.projectName}`
+                    ? 'Your Application Has Been Received!'
+                    : 'Confirm Your Copilot Application'
             }
             buttons={
                 !success ? (
@@ -62,21 +62,21 @@ const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
                 <div className={styles.info}>
                     {
                         success
-                            ? `We appreciate the time and effort you've taken to apply 
-                            for this exciting opportunity. Our team is committed 
-                            to providing a seamless and efficient process to ensure a 
-                            great experience for all copilots. We will review your application 
-                            within short time.`
+                            ? `Thank you for taking the time to apply for this exciting opportunity. 
+                                We truly value your interest and effort. 
+                                Your application will be reviewed promptly.`
                             : `We're excited to see your interest in joining our team as a copilot 
-                            for the ${props.projectName} project! Before we proceed, we want to 
+                            for the "${props.projectName}" project! Before we proceed, we want to 
                             ensure that you have carefully reviewed the project requirements and 
-                            are committed to meeting them.`
+                            are committed to meeting them. Please write below the reason(s) 
+                            why you believe you're a good fit for this project 
+                            (e.g., previous experience, availability, etc.).`
                     }
                 </div>
                 {
                     !success && (
                         <InputTextarea
-                            name='Notes'
+                            name='Reason'
                             onChange={onChange}
                             value={notes}
                             error={error}
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
index 48bf0bd3e..538feb3a8 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
@@ -12,6 +12,7 @@ import {
 } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { mutate } from 'swr'
+import { toast } from 'react-toastify'
 import moment from 'moment'
 
 import {
@@ -28,6 +29,7 @@ import { textFormatDateLocaleShortString } from '~/libs/shared'
 
 import { CopilotApplication } from '../../models/CopilotApplication'
 import {
+    cancelCopilotOpportunity,
     copilotBaseUrl,
     CopilotOpportunityResponse,
     useCopilotApplications,
@@ -104,7 +106,7 @@ const CopilotOpportunityDetails: FC<{}> = () => {
 
     const onApplied: () => void = useCallback(() => {
         mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
-        mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}`)
+        mutate(`${copilotBaseUrl}/copilot/opportunity/${opportunityId}`)
     }, [])
 
     const onCloseApplyModal: () => void = useCallback(() => {
@@ -120,11 +122,26 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         )
     }
 
+    async function cancelCopilotOpportunityHandler(): Promise<void> {
+        if (opportunityId) {
+            await cancelCopilotOpportunity(opportunityId)
+            mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+            mutate(`${copilotBaseUrl}/copilot/opportunity/${opportunityId}`)
+            toast.success('Canceled copilot opportunity successfully')
+        }
+
+    }
+
     const applyCopilotOpportunityButton: ButtonProps = {
         label: 'Apply as Copilot',
         onClick: () => setShowApplyOpportunityModal(true),
     }
 
+    const cancelCopilotOpportunityButton: ButtonProps = {
+        label: 'Cancel opportunity',
+        onClick: cancelCopilotOpportunityHandler,
+    }
+
     const application = copilotApplications && copilotApplications[0]
 
     const getOpportunityType = (type: string): ProjectType => {
@@ -152,6 +169,10 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                 && opportunity?.status === 'active'
                 && opportunity?.canApplyAsCopilot ? applyCopilotOpportunityButton : undefined
             }
+            secondaryButtonConfig={
+                opportunity?.status === 'active'
+                && isAdminOrPM ? cancelCopilotOpportunityButton : undefined
+            }
             infoComponent={(isCopilot && !(copilotApplications
                 && copilotApplications.length === 0
             ) && opportunity?.status === 'active' && !!application) && (
@@ -171,98 +192,101 @@ const CopilotOpportunityDetails: FC<{}> = () => {
             {isValidating && !showNotFound && (
                 <LoadingSpinner />
             ) }
-            <h1 className={styles.header}>
-                {opportunity?.projectName}
-            </h1>
-            <div className={styles.infoRow}>
-                <div className={styles.infoColumn}>
-                    <IconOutline.ClipboardCheckIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Status</span>
-                        <span className={styles.infoValue}>{opportunity?.status}</span>
+            <div className={styles.wrapper}>
+                <h1 className={styles.header}>
+                    {opportunity?.projectName}
+                </h1>
+                <div className={styles.infoRow}>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.ClipboardCheckIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Status</span>
+                            <span className={styles.infoValue}>{opportunity?.status}</span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.PlayIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Start Date</span>
-                        <span className={styles.infoValue}>
-                            {moment(opportunity?.startDate)
-                                .format('MMM D, YYYY')}
+                    <div className={styles.infoColumn}>
+                        <IconOutline.PlayIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Start Date</span>
+                            <span className={styles.infoValue}>
+                                {moment(opportunity?.startDate)
+                                    .format('MMM D, YYYY')}
 
-                        </span>
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.CalendarIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Duration</span>
-                        <span className={styles.infoValue}>
-                            {opportunity?.numWeeks}
-                            {' '}
-                            weeks
-                        </span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.CalendarIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Duration</span>
+                            <span className={styles.infoValue}>
+                                {opportunity?.numWeeks}
+                                {' '}
+                                weeks
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.ClockIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Hours</span>
-                        <span className={styles.infoValue}>
-                            {opportunity?.numHoursPerWeek}
-                            {' '}
-                            hours/week
-                        </span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.ClockIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Hours</span>
+                            <span className={styles.infoValue}>
+                                {opportunity?.numHoursPerWeek}
+                                {' '}
+                                hours/week
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.CogIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Type</span>
-                        <span
-                            className={styles.infoValue}
-                        >
-                            {opportunity?.type && getOpportunityType(opportunity?.type)}
-                        </span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.CogIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Type</span>
+                            <span
+                                className={styles.infoValue}
+                            >
+                                {opportunity?.type && getOpportunityType(opportunity?.type)}
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div className={styles.infoColumn}>
-                    <IconOutline.GlobeAltIcon className={styles.icon} />
-                    <div className={styles.infoText}>
-                        <span className={styles.infoHeading}>Working Hours</span>
-                        <span className={styles.infoValue}>{opportunity?.tzRestrictions}</span>
+                    <div className={styles.infoColumn}>
+                        <IconOutline.GlobeAltIcon className={styles.icon} />
+                        <div className={styles.infoText}>
+                            <span className={styles.infoHeading}>Working Hours</span>
+                            <span className={styles.infoValue}>{opportunity?.tzRestrictions}</span>
+                        </div>
                     </div>
                 </div>
-            </div>
-            {
-                initialized && (
-                    <TabsNavbar
-                        defaultActive={activeTab}
-                        onChange={handleTabChange}
-                        tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
+                {
+                    initialized && (
+                        <TabsNavbar
+                            defaultActive={activeTab}
+                            onChange={handleTabChange}
+                            tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
+                        />
+                    )
+                }
+                {activeTab === CopilotDetailsTabViews.details && <OpportunityDetails opportunity={opportunity} />}
+                {activeTab === CopilotDetailsTabViews.applications && isAdminOrPM && opportunity && (
+                    <CopilotApplications
+                        copilotApplications={copilotApplications}
+                        opportunity={opportunity}
+                        members={members}
                     />
-                )
-            }
-            {activeTab === CopilotDetailsTabViews.details && <OpportunityDetails opportunity={opportunity} />}
-            {activeTab === CopilotDetailsTabViews.applications && isAdminOrPM && opportunity && (
-                <CopilotApplications
-                    copilotApplications={copilotApplications}
-                    opportunity={opportunity}
-                    members={members}
-                />
-            )}
+                )}
+
+                {
+                    showApplyOpportunityModal
+                    && opportunity && (
+                        <ApplyOpportunityModal
+                            copilotOpportunityId={opportunity?.id}
+                            onClose={onCloseApplyModal}
+                            projectName={opportunity?.projectName}
+                            onApplied={onApplied}
+                        />
+                    )
+                }
+            </div>
 
-            {
-                showApplyOpportunityModal
-                && opportunity && (
-                    <ApplyOpportunityModal
-                        copilotOpportunityId={opportunity?.id}
-                        onClose={onCloseApplyModal}
-                        projectName={opportunity?.projectName}
-                        onApplied={onApplied}
-                    />
-                )
-            }
         </ContentLayout>
     )
 }
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss b/src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss
index 8bb4b5162..9844231ae 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss
@@ -1,5 +1,9 @@
 @import '@libs/ui/styles/includes';
 
+.wrapper {
+    min-height: 800px;
+}
+
 .header {
     display: flex;
     align-items: center;
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplicationAction.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplicationAction.tsx
index 836678036..bcf228fc5 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplicationAction.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplicationAction.tsx
@@ -15,7 +15,8 @@ const CopilotApplicationAction = (
 ): JSX.Element => {
     const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
     const isInvited = useMemo(
-        () => allCopilotApplications.findIndex(item => item.status === CopilotApplicationStatus.INVITED) > -1,
+        () => allCopilotApplications
+            && allCopilotApplications.findIndex(item => item.status === CopilotApplicationStatus.INVITED) > -1,
         [allCopilotApplications],
     )
     const onClick = useCallback(async () => {
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx
index 847dbc6c9..8cd3afd44 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx
@@ -11,11 +11,8 @@ const OpportunityDetails: FC<{
         <div>
             <h2 className={styles.subHeading}> Required skills </h2>
             <div className={styles.skillsContainer}>
-                {props.opportunity?.skills.map((skill: any) => (
-                    <div key={skill.id} className={styles.skillPill}>
-                        {skill.name}
-                    </div>
-                ))}
+                {props.opportunity?.skills.map(item => item.name)
+                    .join(',')}
             </div>
             <h2 className={styles.subHeading}> Description </h2>
             <p>
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-list/index.tsx b/src/apps/copilots/src/pages/copilot-opportunity-list/index.tsx
index 21f703b84..8e37b687a 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-list/index.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-list/index.tsx
@@ -84,6 +84,11 @@ const tableColumns: TableColumn<CopilotOpportunity>[] = [
         propertyName: 'startDate',
         type: 'date',
     },
+    {
+        label: 'Duration(Weeks)',
+        propertyName: 'numWeeks',
+        type: 'text',
+    },
     {
         label: 'Complexity',
         propertyName: 'complexity',
diff --git a/src/apps/copilots/src/pages/copilot-request-form/index.tsx b/src/apps/copilots/src/pages/copilot-request-form/index.tsx
index 79aa395ee..8fec31503 100644
--- a/src/apps/copilots/src/pages/copilot-request-form/index.tsx
+++ b/src/apps/copilots/src/pages/copilot-request-form/index.tsx
@@ -20,7 +20,6 @@ const CopilotRequestForm: FC<{}> = () => {
     const [formValues, setFormValues] = useState<any>({})
     const [isFormChanged, setIsFormChanged] = useState(false)
     const [formErrors, setFormErrors] = useState<any>({})
-    const [existingCopilot, setExistingCopilot] = useState<string>('')
     const [paymentType, setPaymentType] = useState<string>('')
 
     const projectTypes = ProjectTypes ? ProjectTypes.map(project => ({
@@ -29,16 +28,6 @@ const CopilotRequestForm: FC<{}> = () => {
     }))
         : []
 
-    function exisitingCopilotToggle(t: 'yes'|'no'): void {
-        setExistingCopilot(t)
-        setFormErrors((prevFormErrors: any) => {
-            const updatedErrors = { ...prevFormErrors }
-            delete updatedErrors.existingCopilot
-            return updatedErrors
-        })
-        setIsFormChanged(true)
-    }
-
     function togglePaymentType(t: 'standard'|'other'): void {
         setFormValues((prevFormValues: any) => ({
             ...prevFormValues,
@@ -141,12 +130,6 @@ const CopilotRequestForm: FC<{}> = () => {
 
         const fieldValidations: { condition: boolean; key: string; message: string }[] = [
             { condition: !formValues.projectId, key: 'projectId', message: 'Project is required' },
-            { condition: !existingCopilot, key: 'existingCopilot', message: 'Selection is required' },
-            {
-                condition: existingCopilot === 'yes' && !formValues.copilotUsername,
-                key: 'copilotUsername',
-                message: 'Username is required',
-            },
             { condition: !formValues.complexity, key: 'complexity', message: 'Selection is required' },
             {
                 condition: !formValues.requiresCommunication,
@@ -220,7 +203,6 @@ const CopilotRequestForm: FC<{}> = () => {
                     toast.success('Copilot request sent successfully')
                     setFormValues({
                         complexity: '',
-                        copilotUsername: '',
                         numHoursPerWeek: '',
                         numWeeks: '',
                         otherPaymentType: '',
@@ -234,7 +216,6 @@ const CopilotRequestForm: FC<{}> = () => {
                     })
                     setIsFormChanged(false)
                     setFormErrors({})
-                    setExistingCopilot('')
                     setPaymentType('')
                 })
                 .catch(e => {
@@ -288,63 +269,6 @@ const CopilotRequestForm: FC<{}> = () => {
                         dirty
                         error={formErrors.projectId}
                     />
-                    <p className={styles.formRow}>
-                        Are you already working with a copilot that you&apos;d love to work with on this project
-                        as well?
-                    </p>
-
-                    <div className={styles.formRadioBtn}>
-                        <InputRadio
-                            label='Yes'
-                            name='existingCopilot'
-                            id='yes'
-                            value='Yes'
-                            checked={existingCopilot === 'yes'}
-                            onChange={function t() { exisitingCopilotToggle('yes') }}
-                        />
-                        <InputRadio
-                            label='No'
-                            name='existingCopilot'
-                            id='no'
-                            value='No'
-                            checked={existingCopilot === 'no'}
-                            onChange={function t() { exisitingCopilotToggle('no') }}
-                        />
-                    </div>
-                    {
-                        existingCopilot === 'yes'
-                        && (
-                            <div className={styles.formRow}>
-                                <p className={styles.formRow}>
-                                    Great! What is the username of the copilot you&apos;d like to work with again?
-                                </p>
-
-                                <InputText
-                                    name='copilot name'
-                                    label='Copilot username'
-                                    placeholder='Type the copilot username here...'
-                                    dirty
-                                    tabIndex={0}
-                                    type='text'
-                                    onChange={bind(handleFormValueChange, this, 'copilotUsername')}
-                                    value={formValues.copilotUsername}
-                                    error={formErrors.copilotUsername}
-                                />
-                            </div>
-                        )
-                    }
-                    {formErrors.existingCopilot && (
-                        <p className={styles.error}>
-                            <IconSolid.ExclamationIcon />
-                            {formErrors.existingCopilot}
-                        </p>
-                    )}
-                    {formValues.existingCopilot === 'yes' && !formValues.copilotUsername && (
-                        <p className={styles.error}>
-                            <IconSolid.ExclamationIcon />
-                            {formErrors.existingCopilot}
-                        </p>
-                    )}
 
                     <p className={styles.formRow}>What type of project are you working on?</p>
                     <InputSelect
diff --git a/src/apps/copilots/src/services/copilot-opportunities.ts b/src/apps/copilots/src/services/copilot-opportunities.ts
index 771a16cb6..61cebb6d7 100644
--- a/src/apps/copilots/src/services/copilot-opportunities.ts
+++ b/src/apps/copilots/src/services/copilot-opportunities.ts
@@ -2,7 +2,7 @@ import useSWR, { SWRResponse } from 'swr'
 import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite'
 
 import { EnvironmentConfig } from '~/config'
-import { xhrGetAsync, xhrPostAsync } from '~/libs/core'
+import { xhrDeleteAsync, xhrGetAsync, xhrPostAsync } from '~/libs/core'
 import { buildUrl } from '~/libs/shared/lib/utils/url'
 
 import { CopilotOpportunity } from '../models/CopilotOpportunity'
@@ -120,6 +120,19 @@ export const assignCopilotOpportunity = async (
     return xhrPostAsync(url, { applicationId: applicationId.toString() }, {})
 }
 
+/**
+ * cancel copilot opportunity
+ * @param opportunityId
+ * @returns
+ */
+export const cancelCopilotOpportunity = async (
+    opportunityId: string,
+): Promise<{applicationId: number}> => {
+    const url = `${copilotBaseUrl}/copilots/opportunity/${opportunityId}/cancel`
+
+    return xhrDeleteAsync(url)
+}
+
 /**
  * Custom hook to fetch copilot applications by opportunity id.
  *