diff --git a/src/apps/copilots/src/models/CopilotApplication.ts b/src/apps/copilots/src/models/CopilotApplication.ts
new file mode 100644
index 000000000..d9ab68ed5
--- /dev/null
+++ b/src/apps/copilots/src/models/CopilotApplication.ts
@@ -0,0 +1,6 @@
+export interface CopilotApplication {
+    id: number,
+    notes?: string,
+    createdAt: Date,
+    opportunityId: string,
+}
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
new file mode 100644
index 000000000..48fd2f364
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/ApplyOpportunityModal.tsx
@@ -0,0 +1,88 @@
+/* eslint-disable react/jsx-no-bind */
+import { FC, useCallback, useState } from 'react'
+
+import { BaseModal, Button, InputTextarea } from '~/libs/ui'
+
+import { applyCopilotOpportunity } from '../../../services/copilot-opportunities'
+
+import styles from './styles.module.scss'
+
+interface ApplyOpportunityModalProps {
+    onClose: () => void
+    copilotOpportunityId: number
+    projectName: string
+    onApplied: () => void
+}
+
+const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
+    const [notes, setNotes] = useState('')
+    const [success, setSuccess] = useState(false)
+
+    const onApply = useCallback(async () => {
+        try {
+            await applyCopilotOpportunity(props.copilotOpportunityId, {
+                notes,
+            })
+
+            props.onApplied()
+            setSuccess(true)
+        } catch (e) {
+            setSuccess(true)
+        }
+    }, [props.copilotOpportunityId, notes])
+
+    const onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void = useCallback(e => {
+        setNotes(e.target.value)
+    }, [setNotes])
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='lg'
+            title={
+                success
+                    ? `Your Application for ${props.projectName} Has Been Received!`
+                    : `Confirm Your Copilot Application for ${props.projectName}`
+            }
+            buttons={
+                !success ? (
+                    <>
+                        <Button primary onClick={onApply} label='Apply' />
+                        <Button secondary onClick={props.onClose} label='Cancel' />
+                    </>
+                ) : (
+                    <Button primary onClick={props.onClose} label='Close' />
+                )
+            }
+        >
+            <div className={styles.applyCopilotModal}>
+                <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.`
+                            : `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 
+                            ensure that you have carefully reviewed the project requirements and 
+                            are committed to meeting them.`
+                    }
+                </div>
+                {
+                    !success && (
+                        <InputTextarea
+                            name='Notes'
+                            onChange={onChange}
+                            value={notes}
+                        />
+                    )
+                }
+            </div>
+        </BaseModal>
+    )
+}
+
+export default ApplyOpportunityModal
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/index.ts b/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/index.ts
new file mode 100644
index 000000000..e58259825
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/index.ts
@@ -0,0 +1 @@
+export { default as ApplyOpportunityModal } from './ApplyOpportunityModal'
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/styles.module.scss b/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/styles.module.scss
new file mode 100644
index 000000000..897a31420
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/styles.module.scss
@@ -0,0 +1,7 @@
+@import '@libs/ui/styles/includes';
+
+.applyCopilotModal {
+  .info {
+    margin-bottom: 12px;
+  }
+}
\ No newline at end of file
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 9d1fd8b21..ea88a5a2f 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
@@ -1,23 +1,48 @@
-import { FC, useEffect, useState } from 'react'
+/* eslint-disable react/jsx-no-bind */
+import {
+    FC,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
+import { mutate } from 'swr'
 import moment from 'moment'
 
 import {
+    ButtonProps,
     ContentLayout,
     IconOutline,
     LoadingSpinner,
     PageTitle,
 } from '~/libs/ui'
+import { profileContext, ProfileContextData, UserRole } from '~/libs/core'
 
-import { CopilotOpportunityResponse, useCopilotOpportunity } from '../../services/copilot-opportunities'
+import { CopilotApplication } from '../../models/CopilotApplication'
+import {
+    copilotBaseUrl,
+    CopilotOpportunityResponse,
+    useCopilotApplications,
+    useCopilotOpportunity,
+} from '../../services/copilot-opportunities'
 import { copilotRoutesMap } from '../../copilots.routes'
 
+import { ApplyOpportunityModal } from './apply-opportunity-modal'
 import styles from './styles.module.scss'
 
 const CopilotOpportunityDetails: FC<{}> = () => {
     const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
     const navigate = useNavigate()
     const [showNotFound, setShowNotFound] = useState(false)
+    const [showApplyOpportunityModal, setShowApplyOpportunityModal] = useState(false)
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const isCopilot: boolean = useMemo(
+        () => !!profile?.roles?.some(role => role === UserRole.copilot),
+        [profile],
+    )
+    const { data: copilotApplications }: { data?: CopilotApplication[] } = useCopilotApplications(opportunityId)
 
     if (!opportunityId) {
         navigate(copilotRoutesMap.CopilotOpportunityList)
@@ -35,6 +60,14 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         return () => clearTimeout(timer) // Cleanup on unmount
     }, [opportunity])
 
+    const onApplied: () => void = useCallback(() => {
+        mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+    }, [])
+
+    const onCloseApplyModal: () => void = useCallback(() => {
+        setShowApplyOpportunityModal(false)
+    }, [setShowApplyOpportunityModal])
+
     if (!opportunity && showNotFound) {
         return (
             <ContentLayout title='Copilot Opportunity Details'>
@@ -44,8 +77,20 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         )
     }
 
+    const applyCopilotOpportunityButton: ButtonProps = {
+        label: 'Apply as Copilot',
+        onClick: () => setShowApplyOpportunityModal(true),
+    }
+
     return (
-        <ContentLayout title='Copilot Opportunity'>
+        <ContentLayout
+            title='Copilot Opportunity'
+            buttonConfig={
+                isCopilot
+                && copilotApplications
+                && copilotApplications.length === 0 ? applyCopilotOpportunityButton : undefined
+            }
+        >
             <PageTitle>Copilot Opportunity</PageTitle>
             {isValidating && !showNotFound && (
                 <LoadingSpinner />
@@ -132,6 +177,17 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                     <span className={styles.textCaps}>{opportunity?.requiresCommunication}</span>
                 </div>
             </div>
+            {
+                showApplyOpportunityModal
+                && opportunity && (
+                    <ApplyOpportunityModal
+                        copilotOpportunityId={opportunity?.id}
+                        onClose={onCloseApplyModal}
+                        projectName={opportunity?.projectName}
+                        onApplied={onApplied}
+                    />
+                )
+            }
         </ContentLayout>
     )
 }
diff --git a/src/apps/copilots/src/services/copilot-opportunities.ts b/src/apps/copilots/src/services/copilot-opportunities.ts
index 22bc19e96..76589f443 100644
--- a/src/apps/copilots/src/services/copilot-opportunities.ts
+++ b/src/apps/copilots/src/services/copilot-opportunities.ts
@@ -2,12 +2,13 @@ import useSWR, { SWRResponse } from 'swr'
 import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite'
 
 import { EnvironmentConfig } from '~/config'
-import { xhrGetAsync } from '~/libs/core'
+import { xhrGetAsync, xhrPostAsync } from '~/libs/core'
 import { buildUrl } from '~/libs/shared/lib/utils/url'
 
 import { CopilotOpportunity } from '../models/CopilotOpportunity'
+import { CopilotApplication } from '../models/CopilotApplication'
 
-const baseUrl = `${EnvironmentConfig.API.V5}/projects`
+export const copilotBaseUrl = `${EnvironmentConfig.API.V5}/projects`
 
 const PAGE_SIZE = 20
 
@@ -42,7 +43,9 @@ export interface CopilotOpportunitiesResponse {
 export const useCopilotOpportunities = (): CopilotOpportunitiesResponse => {
     const getKey = (pageIndex: number, previousPageData: CopilotOpportunity[]): string | undefined => {
         if (previousPageData && previousPageData.length < PAGE_SIZE) return undefined
-        return `${baseUrl}/copilots/opportunities?page=${pageIndex + 1}&pageSize=${PAGE_SIZE}&sort=createdAt desc`
+        return `
+            ${copilotBaseUrl}/copilots/opportunities?page=${pageIndex + 1}&pageSize=${PAGE_SIZE}&sort=createdAt desc
+        `
     }
 
     const fetcher = (url: string): Promise<CopilotOpportunity[]> => xhrGetAsync<CopilotOpportunity[]>(url)
@@ -68,6 +71,8 @@ export const useCopilotOpportunities = (): CopilotOpportunitiesResponse => {
 
 export type CopilotOpportunityResponse = SWRResponse<CopilotOpportunity, CopilotOpportunity>
 
+export type CopilotApplicationResponse = SWRResponse<CopilotApplication[], CopilotApplication[]>
+
 /**
  * Custom hook to fetch copilot opportunity by id.
  *
@@ -75,7 +80,7 @@ export type CopilotOpportunityResponse = SWRResponse<CopilotOpportunity, Copilot
  * @returns {CopilotOpportunityResponse} - The response containing the copilot request data.
  */
 export const useCopilotOpportunity = (opportunityId?: string): CopilotOpportunityResponse => {
-    const url = opportunityId ? buildUrl(`${baseUrl}/copilot/opportunity/${opportunityId}`) : undefined
+    const url = opportunityId ? buildUrl(`${copilotBaseUrl}/copilot/opportunity/${opportunityId}`) : undefined
 
     const fetcher = (urlp: string): Promise<CopilotOpportunity> => xhrGetAsync<CopilotOpportunity>(urlp)
         .then(copilotOpportunityFactory)
@@ -85,3 +90,35 @@ export const useCopilotOpportunity = (opportunityId?: string): CopilotOpportunit
         revalidateOnFocus: false,
     })
 }
+
+/**
+ * apply copilot opportunity
+ * @param opportunityId
+ * @param request
+ * @returns
+ */
+export const applyCopilotOpportunity = async (opportunityId: number, request: {
+    notes?: string;
+}): Promise<CopilotApplication> => {
+    const url = `${copilotBaseUrl}/copilots/opportunity/${opportunityId}/apply`
+
+    return xhrPostAsync(url, request, {})
+}
+
+/**
+ * Custom hook to fetch copilot applications by opportunity id.
+ *
+ * @param {string} opportunityId - The unique identifier of the copilot request.
+ * @returns {CopilotApplicationResponse} - The response containing the copilot application data.
+ */
+export const useCopilotApplications = (opportunityId?: string): CopilotApplicationResponse => {
+    const url = opportunityId
+        ? buildUrl(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+        : undefined
+
+    const fetcher = (urlp: string): Promise<CopilotApplication[]> => xhrGetAsync<CopilotApplication[]>(urlp)
+        .then(data => data)
+        .catch(() => [])
+
+    return useSWR(url, fetcher)
+}
diff --git a/src/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum.ts b/src/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum.ts
index 02d703ef5..321da1828 100644
--- a/src/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum.ts
+++ b/src/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum.ts
@@ -11,5 +11,6 @@ export enum UserRole {
     paymentProviderViewer = 'PaymentProvider Viewer',
     projectManager = 'Project Manager',
     taxFormAdmin = 'TaxForm Admin',
-    taxFormViewer = 'TaxForm Viewer'
+    taxFormViewer = 'TaxForm Viewer',
+    copilot = 'copilot'
 }