diff --git a/src/apps/calendar/src/lib/components/Calendar/Calendar.module.scss b/src/apps/calendar/src/lib/components/Calendar/Calendar.module.scss
index 29891004a..134c333e4 100644
--- a/src/apps/calendar/src/lib/components/Calendar/Calendar.module.scss
+++ b/src/apps/calendar/src/lib/components/Calendar/Calendar.module.scss
@@ -111,6 +111,7 @@
     }
 
     .cell {
-        min-height: 72px;
+        min-height: 60px;
+        padding: 6px;
     }
 }
diff --git a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss
index d0ff3d3b8..58ba914d7 100644
--- a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss
+++ b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss
@@ -80,7 +80,6 @@
 }
 
 .userItem {
-    width: 100%;
     border-radius: 8px;
     padding: 8px 10px;
     font-weight: 700;
@@ -129,16 +128,16 @@
 
 @media (max-width: 768px) {
     .teamCalendar {
-        padding: 12px;
+        padding: 5px;
     }
 
     .grid {
-        gap: 8px;
+        gap: 6px;
     }
 
     .cell {
-        min-height: 96px;
-        padding: 10px;
+        min-height: 60px;
+        padding: 6px;
     }
 
     .userItem {
@@ -148,4 +147,89 @@
     .dateNumber {
         font-size: 15px;
     }
+
+    .cellButton {
+        cursor: pointer;
+    }
+}
+
+.cellButton {
+  all: unset;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 8px;
+  cursor: default;
+}
+
+
+.countBadge {
+  align-self: center;
+  font-size: 12px;
+  font-weight: 800;
+  padding: 4px 6px;
+  border-radius: 999px;
+  background: #acaeb3;
+  color: #ffffff;
+  line-height: 1;
+}
+
+.modalRoot {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--text-secondary);
+}
+
+.popover {
+  position: relative;
+  z-index: 1;
+
+  width: calc(100vw - 32px);
+  max-width: 420px;
+  max-height: 70vh;
+  overflow-y: auto;
+
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  box-shadow: 0 24px 64px $tc-black;
+}
+
+.popoverHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.popoverTitle {
+  font-weight: 800;
+  color: #111827;
+}
+
+.closeBtn {
+  all: unset;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  padding: 6px 8px;
+  border-radius: 8px;
+}
+
+.popoverBody {
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
diff --git a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx
index 6ce6f8f9d..7aa3bf2b4 100644
--- a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx
+++ b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx
@@ -1,8 +1,9 @@
-import { isWeekend } from 'date-fns'
-import { FC, useMemo } from 'react'
+import { format, isWeekend } from 'date-fns'
+import { FC, useCallback, useMemo, useState } from 'react'
 import classNames from 'classnames'
 
 import { LoadingSpinner } from '~/libs/ui'
+import { useCheckIsMobile } from '~/libs/shared'
 
 import { LeaveStatus, TeamLeaveDate } from '../../models'
 import { getDateKey, getMonthDates } from '../../utils'
@@ -60,6 +61,25 @@ export const TeamCalendar: FC<TeamCalendarProps> = (props: TeamCalendarProps) =>
     const currentDate = props.currentDate
     const isLoading = props.isLoading
     const teamLeaveDates = props.teamLeaveDates
+    const [openDateKey, setOpenDateKey] = useState<string | undefined>(undefined)
+
+    const isMobile: boolean = useCheckIsMobile()
+
+    const closePopover = useCallback(() => {
+        setOpenDateKey(undefined)
+    }, [])
+
+    const handleCellClick = useCallback(
+        (e: React.MouseEvent<HTMLButtonElement>) => {
+            if (!isMobile) return
+
+            const dateKey = e.currentTarget.dataset.dateKey
+            if (!dateKey) return
+
+            setOpenDateKey(prev => (prev === dateKey ? undefined : dateKey))
+        },
+        [isMobile],
+    )
 
     const monthDates = useMemo(
         () => getMonthDates(currentDate.getFullYear(), currentDate.getMonth()),
@@ -116,44 +136,126 @@ export const TeamCalendar: FC<TeamCalendarProps> = (props: TeamCalendarProps) =>
                     const overflowCount = sortedUsers.length - displayedUsers.length
                     const weekendClass = isWeekend(date) ? styles.weekend : undefined
 
+                    // Mobile popover open/close
+                    const isOpen = openDateKey === dateKey
+                    const leaveCount = sortedUsers.length
+
                     return (
                         <div
                             key={dateKey}
                             className={classNames(styles.cell, weekendClass, {
                                 [styles.loading]: isLoading,
+                                [styles.hasLeave]: leaveCount > 0,
                             })}
                         >
-                            <span className={styles.dateNumber}>{date.getDate()}</span>
-                            <div className={styles.userList}>
-                                {displayedUsers.length > 0
-                                    && displayedUsers.map((user, userIndex) => {
-                                        const isHolidayStatus = user.status === LeaveStatus.WIPRO_HOLIDAY
-                                            || user.status === LeaveStatus.HOLIDAY
+                            {/* Whole cell tappable on mobile */}
+                            <button
+                                type='button'
+                                className={styles.cellButton}
+                                disabled={isLoading}
+                                onClick={handleCellClick}
+                                data-date-key={dateKey}
+                                aria-haspopup='dialog'
+                                aria-expanded={isMobile ? isOpen : undefined}
+                                aria-label={`Open leave list for ${dateKey}`}
+                            >
+                                <span className={styles.dateNumber}>{date.getDate()}</span>
+
+                                {/* MOBILE: only show count badge */}
+                                {isMobile && leaveCount > 0 && (
+                                    <span className={styles.countBadge}>{leaveCount}</span>
+                                )}
+
+                                {/* DESKTOP: show list in the cell (your existing UI) */}
+                                {!isMobile && (
+                                    <div className={styles.userList}>
+                                        {displayedUsers.length > 0
+                                        && displayedUsers.map((user, userIndex) => {
+                                            const isHolidayStatus
+                                        = user.status === LeaveStatus.WIPRO_HOLIDAY
+                                        || user.status === LeaveStatus.HOLIDAY
+
+                                            return (
+                                                <div
+                                                    key={`${dateKey}-${user.userId}-${userIndex.toString()}`}
+                                                    className={classNames(
+                                                        styles.userItem,
+                                                        isHolidayStatus
+                                                            ? styles.userHoliday
+                                                            : styles.userLeave,
+                                                    )}
+                                                >
+                                                    {getUserDisplayName(user)}
+                                                </div>
+                                            )
+                                        })}
+                                        {overflowCount > 0 && (
+                                            <div className={styles.overflowIndicator}>
+                                                {`+${overflowCount} more`}
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                            </button>
+                        </div>
+                    )
+                })}
+            </div>
+
+            {isMobile && openDateKey && (() => {
+                const selectedDate = paddedDates.find(d => d && getDateKey(d) === openDateKey)
+                if (!selectedDate) return undefined
+
+                const selectedEntry = teamLeaveDates.find(item => item.date === openDateKey)
+                const selectedUsers = [...(selectedEntry?.usersOnLeave ?? [])].sort(compareUsersByName)
+
+                return (
+                    <div className={styles.modalRoot}>
+                        <div className={styles.backdrop} onClick={closePopover} />
+
+                        <div className={styles.popover} role='dialog' aria-label='Users on leave'>
+                            <div className={styles.popoverHeader}>
+                                <div className={styles.popoverTitle}>
+                                    {format(selectedDate, 'EEE, dd MMM yyyy')}
+                                </div>
+
+                                <button
+                                    type='button'
+                                    className={styles.closeBtn}
+                                    onClick={closePopover}
+                                    aria-label='Close'
+                                >
+                                    ✕
+                                </button>
+                            </div>
+
+                            <div className={styles.popoverBody}>
+                                {selectedUsers.length === 0 ? (
+                                    <div className={styles.emptyState}>No leave</div>
+                                ) : (
+                                    selectedUsers.map((user, idx) => {
+                                        const isHolidayStatus
+                                    = user.status === LeaveStatus.WIPRO_HOLIDAY
+                                    || user.status === LeaveStatus.HOLIDAY
 
                                         return (
                                             <div
-                                                key={`${dateKey}-${user.userId}-${userIndex.toString()}`}
+                                                key={`${openDateKey}-${user.userId}-${idx.toString()}`}
                                                 className={classNames(
                                                     styles.userItem,
-                                                    isHolidayStatus
-                                                        ? styles.userHoliday
-                                                        : styles.userLeave,
+                                                    isHolidayStatus ? styles.userHoliday : styles.userLeave,
                                                 )}
                                             >
                                                 {getUserDisplayName(user)}
                                             </div>
                                         )
-                                    })}
-                                {overflowCount > 0 && (
-                                    <div className={styles.overflowIndicator}>
-                                        {`+${overflowCount} more`}
-                                    </div>
+                                    })
                                 )}
                             </div>
                         </div>
-                    )
-                })}
-            </div>
+                    </div>
+                )
+            })()}
 
             {isLoading && (
                 <div className={styles.loadingOverlay}>
@@ -162,6 +264,7 @@ export const TeamCalendar: FC<TeamCalendarProps> = (props: TeamCalendarProps) =>
             )}
         </div>
     )
+
 }
 
 export default TeamCalendar
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 87f9f0c0a..5ca6cb9cf 100644
--- a/src/apps/copilots/src/pages/copilot-request-form/index.tsx
+++ b/src/apps/copilots/src/pages/copilot-request-form/index.tsx
@@ -1,5 +1,5 @@
 import { FC, useContext, useEffect, useMemo, useState } from 'react'
-import { bind, debounce, isEmpty } from 'lodash'
+import { bind, debounce, isEmpty, pick } from 'lodash'
 import { toast } from 'react-toastify'
 import { Params, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import classNames from 'classnames'
@@ -7,7 +7,7 @@ import classNames from 'classnames'
 import { profileContext, ProfileContextData } from '~/libs/core'
 import { Button, IconSolid, InputDatePicker, InputMultiselectOption,
     InputRadio, InputSelect, InputSelectReact, InputText, InputTextarea } from '~/libs/ui'
-import { InputSkillSelector } from '~/libs/shared'
+import { extractSkillsFromText, InputSkillSelector } from '~/libs/shared'
 
 import { getProject, getProjects, ProjectsResponse, useProjects } from '../../services/projects'
 import { ProjectTypes, ProjectTypeValues } from '../../constants'
@@ -17,6 +17,8 @@ import { rootRoute } from '../../copilots.routes'
 
 import styles from './styles.module.scss'
 
+const MIN_OVERVIEW_LENGTH = 50
+
 const editableFields = [
     'projectId',
     'opportunityTitle',
@@ -46,6 +48,8 @@ const CopilotRequestForm: FC<{}> = () => {
     const [formErrors, setFormErrors] = useState<any>({})
     const [paymentType, setPaymentType] = useState<string>('')
     const [projectFromQuery, setProjectFromQuery] = useState<Project>()
+    const [isGeneratingSkills, setIsGeneratingSkills] = useState(false)
+    const [aiGenerationError, setAiGenerationError] = useState<string>()
     const activeProjectStatuses = ['active', 'approved', 'draft', 'new']
 
     const { data: copilotRequestData }: CopilotRequestResponse = useCopilotRequest(routeParams.requestId)
@@ -209,6 +213,63 @@ const CopilotRequestForm: FC<{}> = () => {
         setIsFormChanged(true)
     }
 
+    async function handleGenerateSkillsWithAI(): Promise<void> {
+        setIsGeneratingSkills(true)
+        setAiGenerationError(undefined)
+
+        try {
+            const result = await extractSkillsFromText(formValues.overview)
+
+            if (!result.matches || result.matches.length === 0) {
+                setAiGenerationError('No skills were extracted. Try providing more details in the project overview.')
+                toast.warning(
+                    'No skills found for the provided project overview. Please add more details about the project.',
+                )
+                return
+            }
+
+            // Add extracted skills to existing skills (avoid duplicates)
+            const existingSkillIds = new Set((formValues.skills || []).map((s: any) => s.id))
+            const newSkills = result.matches
+                .filter(skill => !existingSkillIds.has(skill.id))
+                .map(skill => pick(skill, ['id', 'name']))
+
+            if (newSkills.length === 0) {
+                toast.info('All extracted skills are already in the list.')
+                return
+            }
+
+            setFormValues((prevFormValues: any) => ({
+                ...prevFormValues,
+                skills: [...(prevFormValues.skills || []), ...newSkills],
+            }))
+
+            setFormErrors((prevFormErrors: any) => {
+                const updatedErrors = { ...prevFormErrors }
+                delete updatedErrors.skills
+                return updatedErrors
+            })
+            setIsFormChanged(true)
+
+            toast.success(
+                `Successfully added ${newSkills.length} skill${newSkills.length > 1 ? 's' : ''} from AI analysis!`,
+            )
+        } catch (error) {
+            const errorMessage = (error as Error).message
+            setAiGenerationError(errorMessage)
+            console.error('AI skills generation failed:', error)
+            toast.error(`Failed to generate skills: ${errorMessage}`)
+        } finally {
+            setIsGeneratingSkills(false)
+        }
+    }
+
+    // Check if overview has enough content for AI processing
+    const canGenerateSkills = useMemo(() => {
+        const overview = formValues.overview?.trim() || ''
+        return overview.length >= MIN_OVERVIEW_LENGTH && !isGeneratingSkills
+    }, [formValues.overview, isGeneratingSkills])
+
     function handleFormAction(): void {
         const updatedFormErrors: { [key: string]: string } = {}
 
@@ -478,8 +539,39 @@ const CopilotRequestForm: FC<{}> = () => {
                         error={formErrors.overview}
                         dirty
                     />
-                    <p className={styles.formRow}>Any specific skills or technology requirements that come to mind?</p>
-                    <div className={formErrors.skills ? styles.skillsError : styles.skillsWrapper}>
+                    <div className={styles.skillsSection}>
+                        <div className={styles.skillsHeader}>
+                            <p className={styles.formRowNoMargin}>
+                                Any specific skills or technology requirements that come to mind?
+                            </p>
+                            <Button
+                                secondary
+                                size='sm'
+                                label={isGeneratingSkills ? 'Generating...' : '✨ Generate with AI'}
+                                onClick={handleGenerateSkillsWithAI}
+                                disabled={!canGenerateSkills}
+                                className={styles.aiButton}
+                            />
+                        </div>
+                        {!canGenerateSkills
+                            && formValues.overview
+                            && formValues.overview.trim().length < MIN_OVERVIEW_LENGTH
+                            && (
+                                <p className={styles.helperText}>
+                                    Add at least
+                                    {' '}
+                                    {MIN_OVERVIEW_LENGTH}
+                                    {' '}
+                                    characters to the project overview to use AI generation
+                                </p>
+                            )}
+                    </div>
+                    <div className={classNames({
+                        [styles.skillsError]: formErrors.skills,
+                        [styles.skillsWrapper]: !formErrors.skills,
+                        [styles.disabled]: isGeneratingSkills,
+                    })}
+                    >
                         <InputSkillSelector
                             placeholder='Enter skills you are searching for...'
                             useWrapper={false}
@@ -488,12 +580,23 @@ const CopilotRequestForm: FC<{}> = () => {
                             onChange={handleSkillsChange}
                         />
                     </div>
+                    {isGeneratingSkills && (
+                        <p className={styles.loadingText}>
+                            🤖 AI is analyzing your project overview to extract relevant skills...
+                        </p>
+                    )}
                     {formErrors.skills && (
                         <p className={styles.error}>
                             <IconSolid.ExclamationIcon />
                             {formErrors.skills}
                         </p>
                     )}
+                    {aiGenerationError && (
+                        <p className={styles.warning}>
+                            <IconSolid.ExclamationIcon />
+                            {aiGenerationError}
+                        </p>
+                    )}
                     <p className={styles.formRow}>What&apos;s the planned start date for the copilot?</p>
                     <InputDatePicker
                         label='Copilot Start Date'
diff --git a/src/apps/copilots/src/pages/copilot-request-form/styles.module.scss b/src/apps/copilots/src/pages/copilot-request-form/styles.module.scss
index 04c3b7b1c..5eeef5331 100644
--- a/src/apps/copilots/src/pages/copilot-request-form/styles.module.scss
+++ b/src/apps/copilots/src/pages/copilot-request-form/styles.module.scss
@@ -10,17 +10,17 @@ $gradient: linear-gradient(
     display: flex;
     justify-content: center;
     align-items: center;
-    background: $gradient; 
+    background: $gradient;
     padding: 20px;
 }
 
 .form {
-    background: white;  
-    padding: 30px;  
-    border-radius: 10px;  
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
+    background: white;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     width: 100%;
-    max-width: 1000px;  
+    max-width: 1000px;
     box-sizing: border-box;
 
     .heading {
@@ -73,16 +73,104 @@ $gradient: linear-gradient(
 
     .skillsWrapper {
         border: 1px solid #aaaaaa;
-        border-radius: 0.375rem;  
+        border-radius: 0.375rem;
+        transition: opacity 0.2s ease, border-color 0.2s ease;
+
+        &.disabled {
+            opacity: 0.6;
+            pointer-events: none;
+            background-color: #f5f5f5;
+        }
     }
 
     .skillsWrapper:hover {
-            border-color: #137D60;
+        border-color: #137D60;
+    }
+
+    .skillsWrapper.disabled:hover {
+        border-color: #aaaaaa;
     }
 
     .skillsError {
         border: 2px solid $red-100;
-        border-radius: 0.375rem; 
+        border-radius: 0.375rem;
+    }
+
+    .skillsSection {
+        margin-top: 2rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .skillsHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 0.5rem;
+        flex-wrap: wrap;
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+    }
+
+    .formRowNoMargin {
+        margin: 0;
+    }
+
+    .aiButton {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        svg {
+            @include icon-sm;
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+
+    .helperText {
+        font-size: 0.875rem;
+        color: #666;
+        margin: 0 0 0.5rem 0;
+        font-style: italic;
+    }
+
+    .loadingText {
+        font-size: 0.875rem;
+        color: #137D60;
+        margin: 0.5rem 0;
+        font-weight: 500;
+        animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.6;
+        }
+    }
+
+    .warning {
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+        color: #ff9800;
+        margin-top: 0.5rem;
+
+        svg {
+            @include icon-md;
+            fill: #ff9800;
+            margin-right: $sp-1;
+        }
     }
 
     .error {
@@ -101,4 +189,4 @@ $gradient: linear-gradient(
     .datepicker input{
         color: black;
     }
-}
\ No newline at end of file
+}
diff --git a/src/apps/engagements/src/pages/engagement-detail/EngagementDetailPage.module.scss b/src/apps/engagements/src/pages/engagement-detail/EngagementDetailPage.module.scss
index 6b24588e8..07a6d9440 100644
--- a/src/apps/engagements/src/pages/engagement-detail/EngagementDetailPage.module.scss
+++ b/src/apps/engagements/src/pages/engagement-detail/EngagementDetailPage.module.scss
@@ -483,3 +483,25 @@
     color: $red-120;
     font-size: 0.9rem;
 }
+
+.applyMessage {
+  display: flex;
+  flex-direction: column;
+  gap: $sp-3;
+  padding: $sp-4;
+  border-radius: 8px;
+}
+
+.signInLink {
+  display: inline-block;
+  width: fit-content;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--tc-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
diff --git a/src/apps/engagements/src/pages/engagement-detail/EngagementDetailPage.tsx b/src/apps/engagements/src/pages/engagement-detail/EngagementDetailPage.tsx
index 6f2ca7ae4..318893cee 100644
--- a/src/apps/engagements/src/pages/engagement-detail/EngagementDetailPage.tsx
+++ b/src/apps/engagements/src/pages/engagement-detail/EngagementDetailPage.tsx
@@ -6,7 +6,7 @@ import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 
 import { EnvironmentConfig } from '~/config'
-import { authUrlLogin, useProfileContext } from '~/libs/core'
+import { authUrlLogin, useProfileCompleteness, useProfileContext } from '~/libs/core'
 import { BaseModal, Button, ContentLayout, IconOutline, IconSolid, LoadingSpinner } from '~/libs/ui'
 
 import type { Application, Engagement, TermDetails } from '../../lib/models'
@@ -496,6 +496,8 @@ const EngagementDetailPage: FC = () => {
     const isProfileReady = profileContext.initialized
     const isLoggedIn = profileContext.isLoggedIn
     const userId = profileContext.profile?.userId
+    const profileHandle = profileContext.profile?.handle
+    const profileCompleteness = useProfileCompleteness(profileHandle)
 
     const [engagement, setEngagement] = useState<Engagement | undefined>(undefined)
     const [loading, setLoading] = useState<boolean>(true)
@@ -528,6 +530,8 @@ const EngagementDetailPage: FC = () => {
         normalizedUserEmail,
         normalizedUserId,
     })
+    const [profileGateError, setProfileGateError] = useState<string | undefined>()
+
     const isPrivateEngagement = Boolean(engagement?.isPrivate)
 
     const fetchEngagement = useCallback(async (): Promise<void> => {
@@ -652,8 +656,25 @@ const EngagementDetailPage: FC = () => {
     }, [fetchPendingTerm, navigateToApply])
 
     const handleApplyClick = useCallback(() => {
+        setProfileGateError(undefined)
+
+        if (profileCompleteness?.isLoading) {
+            return
+        }
+
+        if (
+            profileCompleteness
+    && typeof profileCompleteness.percent === 'number'
+    && profileCompleteness.percent < 100
+        ) {
+            setProfileGateError(
+                'Your profile must be 100% complete before applying.',
+            )
+            return
+        }
+
         openNextPendingTerm()
-    }, [openNextPendingTerm])
+    }, [openNextPendingTerm, profileCompleteness])
 
     const handleBackClick = useCallback(() => navigate(rootRoute || '/'), [navigate])
 
@@ -933,6 +954,22 @@ const EngagementDetailPage: FC = () => {
             return termsGate
         }
 
+        if (profileGateError) {
+            return (
+                <div className={styles.applyMessage}>
+                    <span className={styles.termsError}>
+                        {profileGateError}
+                    </span>
+                    <a
+                        className={styles.signInLink}
+                        href={`${EnvironmentConfig.URLS.USER_PROFILE}/${profileHandle}`}
+                    >
+                        Please update your profile here.
+                    </a>
+                </div>
+            )
+        }
+
         return (
             <div className={styles.applyActions}>
                 <Button label='Apply Now' onClick={handleApplyClick} primary />
diff --git a/src/apps/profiles/src/member-profile/phones/PhoneCard/PhoneCard.tsx b/src/apps/profiles/src/member-profile/phones/PhoneCard/PhoneCard.tsx
index b48e3e53d..e8ae19f33 100644
--- a/src/apps/profiles/src/member-profile/phones/PhoneCard/PhoneCard.tsx
+++ b/src/apps/profiles/src/member-profile/phones/PhoneCard/PhoneCard.tsx
@@ -27,7 +27,7 @@ const PhoneCard: FC<PhoneCardProps> = (props: PhoneCardProps) => {
                 <div
                     className={classNames(
                         styles.phoneCardLeft,
-                        props.phoneIndex !== 0 ? styles.phoneCardNotFirst : '',
+                        !props.isModalView && props.phoneIndex !== 0 ? styles.phoneCardNotFirst : '',
                     )}
                 >
                     {
diff --git a/src/apps/review/src/lib/contexts/ChallengeDetailContextProvider.tsx b/src/apps/review/src/lib/contexts/ChallengeDetailContextProvider.tsx
index 479f92a5b..98080c350 100644
--- a/src/apps/review/src/lib/contexts/ChallengeDetailContextProvider.tsx
+++ b/src/apps/review/src/lib/contexts/ChallengeDetailContextProvider.tsx
@@ -18,6 +18,7 @@ import {
     useFetchChallengeSubmissions,
     useFetchChallengeSubmissionsProps,
 } from '../hooks'
+import type { ChallengeVisibilityFlags } from '../hooks/useFetchChallengeSubmissions'
 
 import { ChallengeDetailContext } from './ChallengeDetailContext'
 import { ReviewAppContext } from './ReviewAppContext'
@@ -51,12 +52,43 @@ export const ChallengeDetailContextProvider: FC<PropsWithChildren> = props => {
         }),
         [loginUserInfo?.roles, loginUserInfo?.userId, myRoles],
     )
+    const challengeVisibility = useMemo<ChallengeVisibilityFlags | undefined>(
+        () => {
+            if (!challengeInfo) {
+                return undefined
+            }
+
+            const trackName = (challengeInfo.track?.name ?? '')
+                .toString()
+                .toLowerCase()
+            const status = (challengeInfo.status ?? '')
+                .toString()
+                .toLowerCase()
+            const isDesign = trackName === 'design'
+            const isCompleted = status === 'completed'
+            const submissionsViewable = Boolean(
+                challengeInfo.metadata?.some(
+                    m => m.name === 'submissionsViewable'
+                        && String(m.value)
+                            .toLowerCase() === 'true',
+                ),
+            )
+
+            return { isCompleted, isDesign, submissionsViewable }
+        },
+        [
+            challengeInfo?.track?.name,
+            challengeInfo?.status,
+            challengeInfo?.metadata,
+        ],
+    )
     const {
         challengeSubmissions,
         isLoading: isLoadingChallengeSubmissions,
     }: useFetchChallengeSubmissionsProps = useFetchChallengeSubmissions(
         challengeId,
         submissionViewer,
+        challengeVisibility,
     )
 
     const submissionInfos = useMemo<SubmissionInfo[]>(
diff --git a/src/apps/review/src/lib/hooks/useFetchChallengeSubmissions.ts b/src/apps/review/src/lib/hooks/useFetchChallengeSubmissions.ts
index b7b40b620..172f199f0 100644
--- a/src/apps/review/src/lib/hooks/useFetchChallengeSubmissions.ts
+++ b/src/apps/review/src/lib/hooks/useFetchChallengeSubmissions.ts
@@ -29,14 +29,23 @@ export interface ChallengeSubmissionsViewer {
     userId?: string | number | null
 }
 
+export interface ChallengeVisibilityFlags {
+    isDesign: boolean
+    isCompleted: boolean
+    submissionsViewable: boolean
+}
+
 /**
  * Fetch challenge submissions
  * @param challengeId challenge id
+ * @param viewer viewer roles and userId for filtering
+ * @param challengeVisibility when set and Design + completed + submissionsViewable, submitters see all submissions
  * @returns challenge submissions
  */
 export function useFetchChallengeSubmissions(
     challengeId?: string,
     viewer?: ChallengeSubmissionsViewer,
+    challengeVisibility?: ChallengeVisibilityFlags,
 ): useFetchChallengeSubmissionsProps {
     // Use swr hooks for submissions fetching
     const {
@@ -140,6 +149,20 @@ export function useFetchChallengeSubmissions(
         [viewer?.userId],
     )
 
+    const allowViewAllSubmissionsForDesign = useMemo<boolean>(
+        () => Boolean(
+            challengeVisibility
+            && challengeVisibility.isDesign
+            && challengeVisibility.isCompleted
+            && challengeVisibility.submissionsViewable,
+        ),
+        [
+            challengeVisibility?.isDesign,
+            challengeVisibility?.isCompleted,
+            challengeVisibility?.submissionsViewable,
+        ],
+    )
+
     // Show backend error when fetching data fail
     useEffect(() => {
         if (error) {
@@ -165,7 +188,8 @@ export function useFetchChallengeSubmissions(
         const activeSubmissions: BackendSubmission[] = []
         const shouldRestrictToCurrentMember = Boolean(
             hasSubmitterRole
-            && !canViewAllSubmissions,
+            && !canViewAllSubmissions
+            && !allowViewAllSubmissionsForDesign,
         )
 
         const normalizeStatus = (status: unknown): string => {
@@ -219,6 +243,7 @@ export function useFetchChallengeSubmissions(
         canViewAllSubmissions,
         hasSubmitterRole,
         viewerMemberId,
+        allowViewAllSubmissionsForDesign,
     ])
 
     return {
diff --git a/src/config/environments/default.env.ts b/src/config/environments/default.env.ts
index 5659f59b3..7511c4921 100644
--- a/src/config/environments/default.env.ts
+++ b/src/config/environments/default.env.ts
@@ -56,6 +56,7 @@ export const API = {
 
 export const STANDARDIZED_SKILLS_API = `${API.V5}/standardized-skills`
 export const TC_FINANCE_API = `${API.V6}/finance`
+export const TC_AI_API = `${API.V6}/ai`
 
 export const AUTH = {
     ACCOUNTS_APP_CONNECTOR: `https://accounts-auth0.${TC_DOMAIN}`,
@@ -146,6 +147,11 @@ export const TROLLEY_WIDGET_ORIGIN = getReactEnv<string>(
     'https://widget.trolley.com',
 )
 
+export const SKILLS_EXTRACTION_WORKFLOW_ID = getReactEnv<string>(
+    'AI_SKILLS_EXTRACTION_WORKFLOW_ID',
+    'skillExtractionWorkflow',
+)
+
 export const ADMIN = {
     AGREE_ELECTRONICALLY: '5b2798b2-ae82-4210-9b4d-5d6428125ccb',
     AGREE_FOR_DOCUSIGN_TEMPLATE: '999a26ad-b334-453c-8425-165d4cf496d7',
diff --git a/src/config/environments/global-config.model.ts b/src/config/environments/global-config.model.ts
index b7812dce8..f56462ad4 100644
--- a/src/config/environments/global-config.model.ts
+++ b/src/config/environments/global-config.model.ts
@@ -25,6 +25,7 @@ export interface GlobalConfig {
     },
     STANDARDIZED_SKILLS_API: string,
     TC_FINANCE_API: string,
+    TC_AI_API: string,
     AUTH: {
         ACCOUNTS_APP_CONNECTOR: string
     }
@@ -98,6 +99,7 @@ export interface GlobalConfig {
         TIMEOUT: number
         PROGRESS_INTERVAL: number
     },
+    SKILLS_EXTRACTION_WORKFLOW_ID: string
     ADMIN_SSO_LOGIN_PROVIDERS: SSOLoginProviderConfig[]
     LOCAL_SERVICE_OVERRIDES?: LocalServiceOverride[]
     TROLLEY_WIDGET_ORIGIN: string
diff --git a/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.module.scss b/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.module.scss
index cf99fb2b9..d28975eae 100644
--- a/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.module.scss
+++ b/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.module.scss
@@ -53,10 +53,18 @@
                 }
             }
 
-            ul,
+            ul {
+                margin: $sp-2 0;
+                padding-left: $sp-6;
+                list-style-type: revert;
+                list-style-position: outside;
+            }
+
             ol {
                 margin: $sp-2 0;
                 padding-left: $sp-6;
+                list-style-type: revert;
+                list-style-position: outside;
             }
 
             li {
diff --git a/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.tsx b/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.tsx
index 48962bc38..8b3433cf1 100644
--- a/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.tsx
+++ b/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.tsx
@@ -98,7 +98,7 @@ const WorkExperienceCard: FC<WorkExperienceCardProps> = (props: WorkExperienceCa
                                 ALLOWED_ATTR: [
                                     'href', 'target', 'rel', 'style', 'align',
                                     'border', 'cellpadding', 'cellspacing', 'colspan',
-                                    'rowspan', 'width', 'height', 'class',
+                                    'rowspan', 'width', 'height', 'class', 'type',
                                 ],
                                 ALLOWED_STYLES: {
                                     '*': {
@@ -106,6 +106,8 @@ const WorkExperienceCard: FC<WorkExperienceCardProps> = (props: WorkExperienceCa
                                         color: true,
                                         'font-style': true,
                                         'font-weight': true,
+                                        'list-style-position': true,
+                                        'list-style-type': true,
                                         'text-align': true,
                                         'text-decoration': true,
                                     },
diff --git a/src/libs/shared/lib/services/ai-workflows.tsx b/src/libs/shared/lib/services/ai-workflows.tsx
new file mode 100644
index 000000000..9977ea983
--- /dev/null
+++ b/src/libs/shared/lib/services/ai-workflows.tsx
@@ -0,0 +1,186 @@
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync, xhrPostAsync } from '~/libs/core'
+
+// AI Workflow Configuration
+const AI_WORKFLOW_POLL_INTERVAL = 2000 // 2 seconds
+const AI_WORKFLOW_POLL_TIMEOUT = 120000 // 2 minutes
+const API_BASE_URL = EnvironmentConfig.TC_AI_API || `${EnvironmentConfig.API.V6}/ai`
+
+interface WorkflowRunResponse {
+    runId: string
+}
+
+interface WorkflowInputData {
+    inputData: { jobDescription: string }
+}
+
+const sleep = (ms: number): Promise<void> => new Promise<void>(resolve => {
+    setTimeout(() => resolve(), ms)
+})
+
+/**
+ * Start an AI workflow run
+ *
+ * @param workflowId - The ID of the workflow to run
+ * @param input - The input data for the workflow
+ * @returns The run ID
+ */
+async function startWorkflowRun(workflowId: string, input: string): Promise<string> {
+    try {
+
+        // Step 1: Create the run
+        const runResponse = await xhrPostAsync<{}, WorkflowRunResponse>(
+            `${API_BASE_URL}/workflows/${workflowId}/create-run`,
+            {},
+        )
+        const runId = runResponse.runId
+
+        if (!runId) {
+            throw new Error('No runId returned from workflow creation')
+        }
+
+        // Step 2: Start the run with input
+        await xhrPostAsync<WorkflowInputData, void>(
+            `${API_BASE_URL}/workflows/${workflowId}/start?runId=${runId}`,
+            { inputData: { jobDescription: input } },
+        )
+
+        return runId
+    } catch (error) {
+        console.error('Failed to start workflow run:', (error as Error).message)
+        throw error
+    }
+}
+
+interface WorkflowRunResult {
+    status: 'success' | 'failed' | 'running' | 'pending'
+    result?: any
+    error?: { message: string }
+}
+
+/**
+ * Poll for workflow run status
+ *
+ * @param workflowId - The ID of the workflow
+ * @param runId - The ID of the run to check
+ * @param maxAttempts - Maximum polling attempts
+ * @returns The final run result
+ */
+async function pollWorkflowRunStatus(
+    workflowId: string,
+    runId: string,
+    _maxAttempts?: number,
+): Promise<WorkflowRunResult> {
+    const pollInterval = AI_WORKFLOW_POLL_INTERVAL
+    const pollTimeout = AI_WORKFLOW_POLL_TIMEOUT
+    let maxAttempts = _maxAttempts
+
+    // Calculate max attempts based on timeout if not provided
+    if (maxAttempts === undefined) {
+        maxAttempts = Math.ceil(pollTimeout / pollInterval)
+    }
+
+    let attempt = 0
+    const startTime = Date.now()
+
+    while (attempt < maxAttempts) {
+        try {
+            // eslint-disable-next-line no-await-in-loop
+            const result = await xhrGetAsync<WorkflowRunResult>(
+                `${API_BASE_URL}/workflows/${workflowId}/runs/${runId}`,
+            )
+
+            const status = result?.status
+
+            if (status === 'success') {
+                return result
+            }
+
+            if (status === 'failed') {
+                const errorMsg = result?.error?.message || 'Workflow execution failed'
+                throw new Error(`Workflow failed: ${errorMsg}`)
+            }
+
+            const elapsed = Date.now() - startTime
+            if (elapsed > pollTimeout) {
+                throw new Error(`Workflow polling timeout after ${elapsed}ms`)
+            }
+
+            // Wait before next poll
+            // eslint-disable-next-line no-await-in-loop
+            await sleep(pollInterval)
+            attempt += 1
+        } catch (error) {
+            const errorMessage = (error as Error).message
+            // If it's a network error or timeout, try again
+            if (errorMessage.includes('timeout') || (error as any).code === 'ECONNABORTED') {
+                const elapsed = Date.now() - startTime
+                if (elapsed > pollTimeout) {
+                    throw new Error(`Workflow polling timeout after ${elapsed}ms`)
+                }
+
+                // eslint-disable-next-line no-await-in-loop
+                await sleep(pollInterval)
+                attempt += 1
+            } else {
+                // For other errors, re-throw immediately
+                console.error('Error polling workflow status:', errorMessage)
+                throw error
+            }
+        }
+    }
+
+    throw new Error(`Workflow polling exceeded maximum attempts (${maxAttempts})`)
+}
+
+export interface SkillMatch {
+    id: string
+    name: string
+}
+
+export interface SkillsExtractionResult {
+    matches?: SkillMatch[]
+}
+
+/**
+ * Extract skills from text using AI workflow
+ *
+ * @example
+ * try {
+ *   const result = await extractSkillsFromText('I have experience with JavaScript, React, and Node.js')
+ *   console.log('Extracted skills:', result.matches) // {id: string; name: string}[]
+ * } catch (error) {
+ *   console.error('Skills extraction failed:', error.message)
+ * }
+ */
+export async function extractSkillsFromText(
+    description: string,
+    workflowId?: string,
+): Promise<SkillsExtractionResult> {
+    if (!description || typeof description !== 'string') {
+        throw new Error('Description must be a non-empty string')
+    }
+
+    const workflowIdToUse = workflowId || EnvironmentConfig.SKILLS_EXTRACTION_WORKFLOW_ID
+
+    if (!workflowIdToUse) {
+        throw new Error('AI Skills Extraction Workflow ID is not configured')
+    }
+
+    try {
+        // Step 1: Start the workflow run
+        console.log(`Starting workflow run for: ${workflowIdToUse}`)
+        const runId = await startWorkflowRun(workflowIdToUse, description)
+        console.log(`Workflow started with runId: ${runId}`)
+
+        // Step 2: Poll for completion
+        console.log('Polling for workflow completion...')
+        const result = await pollWorkflowRunStatus(workflowIdToUse, runId)
+        console.log('Workflow completed successfully')
+
+        return (result.result as SkillsExtractionResult) || {}
+    } catch (error) {
+        console.error('Skills extraction workflow failed:', (error as Error).message)
+        throw error
+    }
+}
diff --git a/src/libs/shared/lib/services/index.ts b/src/libs/shared/lib/services/index.ts
index b7999a344..7bb353d7c 100644
--- a/src/libs/shared/lib/services/index.ts
+++ b/src/libs/shared/lib/services/index.ts
@@ -1 +1,2 @@
+export * from './ai-workflows'
 export * from './standard-skills'