diff --git a/src/apps/accounts/src/lib/userflow-survey.ts b/src/apps/accounts/src/lib/userflow-survey.ts
index b86e2d62e..3ec728bdb 100644
--- a/src/apps/accounts/src/lib/userflow-survey.ts
+++ b/src/apps/accounts/src/lib/userflow-survey.ts
@@ -1,9 +1,7 @@
-import { TcUniNavFn } from 'universal-navigation'
+import { getTcUniNav } from '~/apps/platform/src/utils'
 
 import { CES_SURVEY_ID } from '../config'
 
-declare let tcUniNav: TcUniNavFn
-
 export function triggerSurvey(): void {
-    tcUniNav('triggerFlow', CES_SURVEY_ID, {})
+    getTcUniNav()?.('triggerFlow', CES_SURVEY_ID, {})
 }
diff --git a/src/apps/platform/src/components/app-footer/AppFooter.tsx b/src/apps/platform/src/components/app-footer/AppFooter.tsx
index 1d5055c8a..dc1020f1d 100644
--- a/src/apps/platform/src/components/app-footer/AppFooter.tsx
+++ b/src/apps/platform/src/components/app-footer/AppFooter.tsx
@@ -1,7 +1,6 @@
 import { FC, MutableRefObject, useEffect, useRef } from 'react'
-import type { TcUniNavFn } from 'universal-navigation'
 
-declare let tcUniNav: TcUniNavFn
+import { getTcUniNav } from '../../utils'
 
 const APP_FOOTER_EL_ID: string = 'footer-nav-el'
 
@@ -22,7 +21,7 @@ const AppFooter: FC<{}> = () => {
             return
         }
 
-        tcUniNav(
+        getTcUniNav()?.(
             'init',
             APP_FOOTER_EL_ID,
             {
diff --git a/src/apps/platform/src/components/app-header/AppHeader.tsx b/src/apps/platform/src/components/app-header/AppHeader.tsx
index 48d81e331..6381cf483 100644
--- a/src/apps/platform/src/components/app-header/AppHeader.tsx
+++ b/src/apps/platform/src/components/app-header/AppHeader.tsx
@@ -11,7 +11,7 @@ import {
     useState,
 } from 'react'
 import { NavigateFunction, useNavigate } from 'react-router-dom'
-import type { AuthUser as NavAuthUser, TcUniNavFn } from 'universal-navigation'
+import type { AuthUser as NavAuthUser } from 'universal-navigation'
 import classNames from 'classnames'
 
 import { EnvironmentConfig, PageSubheaderPortalId } from '~/config'
@@ -25,9 +25,10 @@ import {
 } from '~/libs/core'
 import { ConfigContextValue, useConfigContext } from '~/libs/shared'
 
+import { getTcUniNav } from '../../utils'
+
 import UniNavSnippet from './universal-nav-snippet'
 
-declare let tcUniNav: TcUniNavFn
 UniNavSnippet(EnvironmentConfig.URLS.UNIVERSAL_NAV)
 
 interface NavigationRequest {
@@ -86,7 +87,7 @@ const AppHeader: FC<{}> = () => {
 
         headerInit.current = true
 
-        tcUniNav(
+        getTcUniNav()?.(
             'init',
             navElementId,
             {
@@ -116,7 +117,7 @@ const AppHeader: FC<{}> = () => {
     // update uni-nav's tool details
     useEffect(() => {
 
-        tcUniNav(
+        getTcUniNav()?.(
             'update',
             navElementId,
             {
@@ -139,7 +140,7 @@ const AppHeader: FC<{}> = () => {
             return
         }
 
-        tcUniNav(
+        getTcUniNav()?.(
             'update',
             navElementId,
             {
diff --git a/src/apps/platform/src/utils/index.ts b/src/apps/platform/src/utils/index.ts
new file mode 100644
index 000000000..6710c8dec
--- /dev/null
+++ b/src/apps/platform/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './other'
diff --git a/src/apps/platform/src/utils/other.ts b/src/apps/platform/src/utils/other.ts
new file mode 100644
index 000000000..14abc189c
--- /dev/null
+++ b/src/apps/platform/src/utils/other.ts
@@ -0,0 +1,15 @@
+import { TcUniNavFn } from 'universal-navigation'
+
+declare let tcUniNav: TcUniNavFn
+
+/**
+ * Get tcUniNav
+ * @returns tcUniNav
+ */
+export function getTcUniNav(): TcUniNavFn | undefined {
+    if (typeof tcUniNav === 'undefined') {
+        return undefined
+    }
+
+    return tcUniNav
+}
diff --git a/src/apps/profiles/src/lib/userflow-survey.ts b/src/apps/profiles/src/lib/userflow-survey.ts
index b86e2d62e..3ec728bdb 100644
--- a/src/apps/profiles/src/lib/userflow-survey.ts
+++ b/src/apps/profiles/src/lib/userflow-survey.ts
@@ -1,9 +1,7 @@
-import { TcUniNavFn } from 'universal-navigation'
+import { getTcUniNav } from '~/apps/platform/src/utils'
 
 import { CES_SURVEY_ID } from '../config'
 
-declare let tcUniNav: TcUniNavFn
-
 export function triggerSurvey(): void {
-    tcUniNav('triggerFlow', CES_SURVEY_ID, {})
+    getTcUniNav()?.('triggerFlow', CES_SURVEY_ID, {})
 }
diff --git a/src/apps/review/src/config/index.config.ts b/src/apps/review/src/config/index.config.ts
index f0de083f8..3786f4304 100644
--- a/src/apps/review/src/config/index.config.ts
+++ b/src/apps/review/src/config/index.config.ts
@@ -76,3 +76,5 @@ export const WINNERS = 'Winners'
 export const TAB = 'tab'
 export const FINISHTAB = [WINNERS]
 export const WITHOUT_APPEAL = [DESIGN, FIRST2FINISH]
+
+export const NO_RESOURCE_ID = 'noResource'
diff --git a/src/apps/review/src/lib/components/Appeal/Appeal.tsx b/src/apps/review/src/lib/components/Appeal/Appeal.tsx
index e6472f7dd..bea8d2be5 100644
--- a/src/apps/review/src/lib/components/Appeal/Appeal.tsx
+++ b/src/apps/review/src/lib/components/Appeal/Appeal.tsx
@@ -1,35 +1,51 @@
 /**
  * AppealComment.
  */
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import {
     Controller,
     ControllerRenderProps,
     useForm,
     UseFormReturn,
 } from 'react-hook-form'
-import _, { bind, includes } from 'lodash'
+import { get } from 'lodash'
 import classNames from 'classnames'
 
 import { yupResolver } from '@hookform/resolvers/yup'
 
 import { MarkdownReview } from '../MarkdownReview'
 import { FieldMarkdownEditor } from '../FieldMarkdownEditor'
-import { FormAppealResponse } from '../../models'
-import { formAppealResponseSchema } from '../../utils'
-import { ADMIN, COPILOT, FINISHTAB, ITERATIVE_REVIEW, TAB } from '../../../config/index.config'
+import { AppealInfo, ChallengeDetailContextModel, FormAppealResponse } from '../../models'
+import { formAppealResponseSchema, isAppealsPhase } from '../../utils'
+import { ReviewItemComment } from '../../models/ReviewItemComment.model'
+import { ChallengeDetailContext } from '../../contexts'
 
 import styles from './Appeal.module.scss'
 
 interface Props {
     className?: string
-    role?: string
+    appealInfo?: AppealInfo
+    commentItem: ReviewItemComment
+    isSavingAppeal: boolean
+    addAppeal: (
+        content: string,
+        commentItem: ReviewItemComment,
+        success: () => void,
+    ) => void
+    doDeleteAppeal: (
+        appealInfo: AppealInfo | undefined,
+        success: () => void,
+    ) => void
 }
 
 export const AppealComment: FC<Props> = (props: Props) => {
     const [appealResponse, setAppealResponse] = useState('')
     const [showResponseForm, setShowResponseForm] = useState(false)
-    const [showAppealResponse, setShowAppealResponse] = useState(false)
+
+    const { challengeInfo }: ChallengeDetailContextModel = useContext(
+        ChallengeDetailContext,
+    )
+    const canAddAppeal = useMemo(() => isAppealsPhase(challengeInfo), [challengeInfo])
 
     const {
         handleSubmit,
@@ -44,29 +60,54 @@ export const AppealComment: FC<Props> = (props: Props) => {
     })
 
     const onSubmit = useCallback((data: FormAppealResponse) => {
-        setAppealResponse(data.response)
-        setShowResponseForm(false)
-        setShowAppealResponse(true)
-    }, [])
+        props.addAppeal(data.response, props.commentItem, () => {
+            setAppealResponse(data.response)
+            setShowResponseForm(false)
+        })
+    }, [props.commentItem])
 
-    if (includes(FINISHTAB, sessionStorage.getItem(TAB))) {
-        return <></>
-    }
+    useEffect(() => {
+        if (props.appealInfo) {
+            setAppealResponse(props.appealInfo.content)
+        }
+    }, [props.appealInfo])
 
     return (
         <div className={classNames(styles.container, props.className)}>
-            {showAppealResponse && (
+            {appealResponse && !showResponseForm && (
                 <div className={styles.blockAppealComment}>
                     <span className={styles.textTitle}>Appeal Comment</span>
                     <MarkdownReview value={appealResponse} />
+                    {canAddAppeal && (
+                        <div className={styles.blockBtns}>
+                            <button
+                                onClick={function onClick() {
+                                    setShowResponseForm(true)
+                                }}
+                                className='filledButton'
+                                type='button'
+                                disabled={props.isSavingAppeal}
+                            >
+                                Edit Appeal
+                            </button>
+                            <button
+                                onClick={function onClick() {
+                                    props.doDeleteAppeal(props.appealInfo, () => {
+                                        setAppealResponse('')
+                                    })
+                                }}
+                                type='button'
+                                className='cancelButton'
+                                disabled={props.isSavingAppeal}
+                            >
+                                Delete
+                            </button>
+                        </div>
+                    )}
                 </div>
             )}
 
-            {!showResponseForm
-                && !showAppealResponse
-                && !includes(FINISHTAB, sessionStorage.getItem(TAB))
-                && !includes(sessionStorage.getItem(TAB), ITERATIVE_REVIEW)
-                && !includes([COPILOT, ADMIN], props.role) && (
+            {!appealResponse && !showResponseForm && canAddAppeal && (
                 <button
                     type='button'
                     className='borderButton'
@@ -95,23 +136,31 @@ export const AppealComment: FC<Props> = (props: Props) => {
                         }) {
                             return (
                                 <FieldMarkdownEditor
+                                    initialValue={appealResponse}
                                     className={styles.markdownEditor}
                                     onChange={controlProps.field.onChange}
                                     showBorder
                                     onBlur={controlProps.field.onBlur}
-                                    error={_.get(errors, 'response.message')}
+                                    error={get(errors, 'response.message')}
+                                    disabled={props.isSavingAppeal}
                                 />
                             )
                         }}
                     />
                     <div className={styles.blockBtns}>
-                        <button className='filledButton' type='submit'>
+                        <button
+                            disabled={props.isSavingAppeal}
+                            className='filledButton'
+                            type='submit'
+                        >
                             Submit Appeal
                         </button>
                         <button
                             type='button'
                             className='borderButton'
-                            onClick={bind(setShowResponseForm, undefined, false)}
+                            onClick={function onClick() {
+                                setShowResponseForm(false)
+                            }}
                         >
                             Cancel
                         </button>
diff --git a/src/apps/review/src/lib/components/AppealComment/AppealComment.module.scss b/src/apps/review/src/lib/components/AppealComment/AppealComment.module.scss
index 4633da960..dfbf9fb75 100644
--- a/src/apps/review/src/lib/components/AppealComment/AppealComment.module.scss
+++ b/src/apps/review/src/lib/components/AppealComment/AppealComment.module.scss
@@ -73,3 +73,10 @@
         line-height: 20px;
     }
 }
+
+.blockReaponseAppealHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
\ No newline at end of file
diff --git a/src/apps/review/src/lib/components/AppealComment/AppealComment.tsx b/src/apps/review/src/lib/components/AppealComment/AppealComment.tsx
index ef38d7401..36bf6b17d 100644
--- a/src/apps/review/src/lib/components/AppealComment/AppealComment.tsx
+++ b/src/apps/review/src/lib/components/AppealComment/AppealComment.tsx
@@ -1,36 +1,68 @@
 /**
  * AppealComment.
  */
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useContext, useMemo, useState } from 'react'
 import {
     Controller,
     ControllerRenderProps,
     useForm,
     UseFormReturn,
 } from 'react-hook-form'
-import _, { bind, includes } from 'lodash'
+import { bind, get } from 'lodash'
+import Select, { SingleValue } from 'react-select'
 import classNames from 'classnames'
 
 import { yupResolver } from '@hookform/resolvers/yup'
 
 import { MarkdownReview } from '../MarkdownReview'
 import { FieldMarkdownEditor } from '../FieldMarkdownEditor'
-import { AppealInfo, FormAppealResponse } from '../../models'
-import { formAppealResponseSchema } from '../../utils'
-import { ADMIN, COPILOT, FINISHTAB, TAB } from '../../../config/index.config'
+import {
+    AppealInfo,
+    ChallengeDetailContextModel,
+    FormAppealResponse,
+    ReviewItemInfo,
+    ScorecardQuestion,
+    SelectOption,
+} from '../../models'
+import { formAppealResponseSchema, isAppealsResponsePhase } from '../../utils'
+import {
+    QUESTION_YES_NO_OPTIONS,
+} from '../../../config/index.config'
+import { ChallengeDetailContext } from '../../contexts'
 
 import styles from './AppealComment.module.scss'
 
 interface Props {
     className?: string
     data: AppealInfo
-    role?: string
+    scorecardQuestion: ScorecardQuestion
+    isSavingAppealResponse: boolean
+    reviewItem: ReviewItemInfo
+    appealInfo?: AppealInfo
+    addAppealResponse: (
+        content: string,
+        updatedResponse: string,
+        appeal: AppealInfo,
+        reviewItem: ReviewItemInfo,
+        success: () => void,
+    ) => void
 }
 
 export const AppealComment: FC<Props> = (props: Props) => {
     const [appealResponse, setAppealResponse] = useState('')
     const [showResponseForm, setShowResponseForm] = useState(false)
-    const [showAppealResponse, setShowAppealResponse] = useState(false)
+
+    const { challengeInfo }: ChallengeDetailContextModel = useContext(
+        ChallengeDetailContext,
+    )
+    const canAddAppealResponse = useMemo(() => isAppealsResponsePhase(challengeInfo), [challengeInfo])
+
+    const [updatedResponse, setUpdatedResponse] = useState<
+        SingleValue<{
+            label: string
+            value: string
+        }>
+    >()
 
     const {
         handleSubmit,
@@ -45,10 +77,42 @@ export const AppealComment: FC<Props> = (props: Props) => {
     })
 
     const onSubmit = useCallback((data: FormAppealResponse) => {
-        setAppealResponse(data.response)
-        setShowResponseForm(false)
-        setShowAppealResponse(true)
-    }, [])
+        if (props.appealInfo) {
+            props.addAppealResponse(
+                data.response,
+                updatedResponse?.value ?? '',
+                props.appealInfo,
+                props.reviewItem,
+                () => {
+                    setAppealResponse(data.response)
+                    setShowResponseForm(false)
+                },
+            )
+        }
+    }, [updatedResponse, props.appealInfo, props.addAppealResponse, props.reviewItem])
+
+    const responseOptions = useMemo<SelectOption[]>(() => {
+        if (props.scorecardQuestion.type === 'SCALE') {
+            const length
+                = props.scorecardQuestion.scaleMax
+                - props.scorecardQuestion.scaleMin
+                + 1
+            return Array.from(
+                new Array(length),
+                (x, i) => `${i + props.scorecardQuestion.scaleMin}`,
+            )
+                .map(item => ({
+                    label: item,
+                    value: item,
+                }))
+        }
+
+        if (props.scorecardQuestion.type === 'YES_NO') {
+            return QUESTION_YES_NO_OPTIONS
+        }
+
+        return []
+    }, [props.scorecardQuestion])
 
     return (
         <div className={classNames(styles.container, props.className)}>
@@ -56,17 +120,27 @@ export const AppealComment: FC<Props> = (props: Props) => {
                 <span className={styles.textTitle}>Appeal Comment</span>
                 <MarkdownReview value={props.data.content} />
             </div>
-            {showAppealResponse && (
+            {!showResponseForm && appealResponse && (
                 <div className={styles.blockAppealResponse}>
                     <span className={styles.textTitle}>Appeal Response</span>
                     <MarkdownReview value={appealResponse} />
+                    {canAddAppealResponse && (
+                        <div className={styles.blockBtns}>
+                            <button
+                                onClick={function onClick() {
+                                    setShowResponseForm(true)
+                                }}
+                                className='filledButton'
+                                type='button'
+                            >
+                                Edit Appeal Response
+                            </button>
+                        </div>
+                    )}
                 </div>
             )}
 
-            {!showResponseForm
-                && !showAppealResponse
-                && !includes(FINISHTAB, sessionStorage.getItem(TAB))
-                && !includes([COPILOT, ADMIN], props.role) && (
+            {!showResponseForm && !appealResponse && canAddAppealResponse && (
                 <button
                     type='button'
                     className='borderButton'
@@ -83,7 +157,27 @@ export const AppealComment: FC<Props> = (props: Props) => {
                     className={styles.blockForm}
                     onSubmit={handleSubmit(onSubmit)}
                 >
-                    <label>Respond Appeal</label>
+                    <div className={styles.blockReaponseAppealHeader}>
+                        <label>Respond Appeal</label>
+
+                        <Select
+                            className={classNames('react-select-container')}
+                            classNamePrefix='select'
+                            name='response'
+                            placeholder='Select'
+                            options={responseOptions}
+                            value={updatedResponse}
+                            onChange={function onChange(
+                                option: SingleValue<{
+                                    label: string
+                                    value: string
+                                }>,
+                            ) {
+                                setUpdatedResponse(option)
+                            }}
+                            isDisabled={props.isSavingAppealResponse}
+                        />
+                    </div>
                     <Controller
                         name='response'
                         control={control}
@@ -95,23 +189,33 @@ export const AppealComment: FC<Props> = (props: Props) => {
                         }) {
                             return (
                                 <FieldMarkdownEditor
+                                    initialValue={appealResponse}
                                     className={styles.markdownEditor}
                                     onChange={controlProps.field.onChange}
                                     showBorder
                                     onBlur={controlProps.field.onBlur}
-                                    error={_.get(errors, 'response.message')}
+                                    error={get(errors, 'response.message')}
+                                    disabled={props.isSavingAppealResponse}
                                 />
                             )
                         }}
                     />
                     <div className={styles.blockBtns}>
-                        <button className='filledButton' type='submit'>
+                        <button
+                            className='filledButton'
+                            type='submit'
+                            disabled={props.isSavingAppealResponse}
+                        >
                             Submit Appeal
                         </button>
                         <button
                             type='button'
                             className='borderButton'
-                            onClick={bind(setShowResponseForm, undefined, false)}
+                            onClick={bind(
+                                setShowResponseForm,
+                                undefined,
+                                false,
+                            )}
                         >
                             Cancel
                         </button>
diff --git a/src/apps/review/src/lib/components/BreadCrumb/BreadCrumb.module.scss b/src/apps/review/src/lib/components/BreadCrumb/BreadCrumb.module.scss
index 0f4edded1..af72968a1 100644
--- a/src/apps/review/src/lib/components/BreadCrumb/BreadCrumb.module.scss
+++ b/src/apps/review/src/lib/components/BreadCrumb/BreadCrumb.module.scss
@@ -10,6 +10,7 @@
             font-size: 14px;
             line-height: 20px;
             white-space: nowrap;
+            button,
             a {
                 font-family: "Nunito Sans", sans-serif;
                 color: var(--GrayFontColor);
diff --git a/src/apps/review/src/lib/components/BreadCrumb/BreadCrumb.tsx b/src/apps/review/src/lib/components/BreadCrumb/BreadCrumb.tsx
index 747e3b80c..f5719b159 100644
--- a/src/apps/review/src/lib/components/BreadCrumb/BreadCrumb.tsx
+++ b/src/apps/review/src/lib/components/BreadCrumb/BreadCrumb.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { Link } from 'react-router-dom'
 
 import { BreadCrumbData } from '../../models'
+import { useAppNavigate } from '../../hooks'
 
 import styles from './BreadCrumb.module.scss'
 
@@ -9,20 +10,38 @@ interface Props {
     list: BreadCrumbData[]
 }
 
-export const BreadCrumb: FC<Props> = (props: Props) => (
-    <div className={styles.breadcrumb}>
-        <ul>
-            {props.list.map(item => (
-                <li key={item.index}>
-                    {item.path ? (
-                        <Link to={item.path as string}>{item.label}</Link>
-                    ) : (
-                        <span>{item.label}</span>
-                    )}
-                </li>
-            ))}
-        </ul>
-    </div>
-)
+export const BreadCrumb: FC<Props> = (props: Props) => {
+    const navigate = useAppNavigate()
+    return (
+        <div className={styles.breadcrumb}>
+            <ul>
+                {props.list.map(item => (
+                    <li key={item.index}>
+                        {item.path ? (
+                            item.fallback ? (
+                                <button
+                                    type='button'
+                                    onClick={function onClick() {
+                                        navigate(item.path as number, {
+                                            fallback: item.fallback,
+                                        })
+                                    }}
+                                >
+                                    {item.label}
+                                </button>
+                            ) : (
+                                <Link to={item.path as string}>
+                                    {item.label}
+                                </Link>
+                            )
+                        ) : (
+                            <span>{item.label}</span>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
 
 export default BreadCrumb
diff --git a/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx b/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
index e26bfc300..d6cc4df27 100644
--- a/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
+++ b/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
@@ -5,7 +5,7 @@ import { FC } from 'react'
 
 import { ActionLoading } from '~/apps/admin/src/lib'
 
-import { Screening, SubmissionInfo } from '../../models'
+import { MappingReviewAppeal, Screening, SubmissionInfo } from '../../models'
 import {
     useDownloadSubmission,
     useDownloadSubmissionProps,
@@ -25,6 +25,7 @@ interface Props {
     isLoadingSubmission: boolean
     screening: Screening[]
     review: SubmissionInfo[]
+    mappingReviewAppeal: MappingReviewAppeal // from review id to appeal info
 }
 
 export const ChallengeDetailsContent: FC<Props> = (props: Props) => {
@@ -63,6 +64,7 @@ export const ChallengeDetailsContent: FC<Props> = (props: Props) => {
                     isLoadingReview={props.isLoadingSubmission}
                     isDownloading={isDownloadingSubmission}
                     downloadSubmission={downloadSubmission}
+                    mappingReviewAppeal={props.mappingReviewAppeal}
                 />
             )}
 
diff --git a/src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentReview.tsx b/src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentReview.tsx
index 3de3d3fbc..21f46b1dc 100644
--- a/src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentReview.tsx
+++ b/src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentReview.tsx
@@ -7,7 +7,7 @@ import { maxBy } from 'lodash'
 import { TableLoading } from '~/apps/admin/src/lib'
 import { IsRemovingType } from '~/apps/admin/src/lib/models'
 
-import { SubmissionInfo } from '../../models'
+import { MappingReviewAppeal, SubmissionInfo } from '../../models'
 import { TableNoRecord } from '../TableNoRecord'
 import { TableReviewAppeals } from '../TableReviewAppeals'
 import { useRole, useRoleProps } from '../../hooks'
@@ -23,6 +23,7 @@ interface Props {
     isLoadingReview: boolean
     isDownloading: IsRemovingType
     downloadSubmission: (submissionId: string) => void
+    mappingReviewAppeal: MappingReviewAppeal // from review id to appeal info
 }
 
 export const TabContentReview: FC<Props> = (props: Props) => {
@@ -53,6 +54,7 @@ export const TabContentReview: FC<Props> = (props: Props) => {
             firstSubmissions={firstSubmissions}
             isDownloading={props.isDownloading}
             downloadSubmission={props.downloadSubmission}
+            mappingReviewAppeal={props.mappingReviewAppeal}
         />
     ) : (
         <TableReviewAppealsForSubmitter
@@ -60,6 +62,7 @@ export const TabContentReview: FC<Props> = (props: Props) => {
             firstSubmissions={firstSubmissions}
             isDownloading={props.isDownloading}
             downloadSubmission={props.downloadSubmission}
+            mappingReviewAppeal={props.mappingReviewAppeal}
         />
     )
 }
diff --git a/src/apps/review/src/lib/components/ChallengeLinksForAdmin/ChallengeLinksForAdmin.tsx b/src/apps/review/src/lib/components/ChallengeLinksForAdmin/ChallengeLinksForAdmin.tsx
index 61a950def..947decb04 100644
--- a/src/apps/review/src/lib/components/ChallengeLinksForAdmin/ChallengeLinksForAdmin.tsx
+++ b/src/apps/review/src/lib/components/ChallengeLinksForAdmin/ChallengeLinksForAdmin.tsx
@@ -2,30 +2,56 @@
  * Challenge Links.
  */
 import { FC, useCallback, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
 import { ConfirmModal } from '../ConfirmModal'
+import { useAppNavigate } from '../../hooks'
+import { rootRoute, scorecardRouteId } from '../../../config/routes.config'
+import { FormReviews, ReviewInfo } from '../../models'
 
 import styles from './ChallengeLinksForAdmin.module.scss'
 
 interface Props {
     className?: string
+    scorecardId: string
+    isSavingReview: boolean
+    reviewInfo?: ReviewInfo
+    saveReviewInfo: (
+        updatedReview: FormReviews | undefined,
+        fullReview: FormReviews | undefined,
+        committed: boolean,
+        totalScore: number,
+        success: () => void,
+    ) => void
 }
 
 export const ChallengeLinksForAdmin: FC<Props> = (props: Props) => {
     const [showCloseConfirmation, setShowCloseConfirmation] = useState(false)
-    const navigate = useNavigate()
+    const navigate = useAppNavigate()
     const reopen = useCallback(() => {
         setShowCloseConfirmation(true)
     }, [])
     return (
         <>
             <div className={classNames(styles.container, props.className)}>
-                <button type='button' className='borderButton' onClick={reopen}>
-                    Reopen
-                </button>
-                <button type='button' className='borderButton'>Edit Scorecard</button>
+                {props.reviewInfo?.id && (
+                    <button
+                        disabled={props.isSavingReview}
+                        type='button'
+                        className='borderButton'
+                        onClick={reopen}
+                    >
+                        Reopen
+                    </button>
+                )}
+                <Link
+                    to={`${rootRoute}/${scorecardRouteId}/${props.scorecardId}/edit`}
+                    type='button'
+                    className='borderButton'
+                >
+                    Edit Scorecard
+                </Link>
             </div>
             <ConfirmModal
                 title='Reopen Scorecard Confirmation'
@@ -34,7 +60,17 @@ export const ChallengeLinksForAdmin: FC<Props> = (props: Props) => {
                     setShowCloseConfirmation(false)
                 }}
                 onConfirm={function onConfirm() {
-                    navigate(-1)
+                    props.saveReviewInfo(
+                        undefined,
+                        undefined,
+                        false,
+                        props.reviewInfo?.initialScore ?? 0,
+                        () => {
+                            navigate(-1, {
+                                fallback: './../../../../challenge-details',
+                            })
+                        },
+                    )
                 }}
                 open={showCloseConfirmation}
                 maxWidth='578px'
@@ -42,7 +78,7 @@ export const ChallengeLinksForAdmin: FC<Props> = (props: Props) => {
                 <div>
                     The scorecard will be reopened and the reviewer will be able
                     to edit it before submitting the scorecard again. Are you
-                    sure you wnat to reopen the scorecard?
+                    sure you want to reopen the scorecard?
                 </div>
             </ConfirmModal>
         </>
diff --git a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.module.scss b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.module.scss
index e18eb4ec7..309361ade 100644
--- a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.module.scss
+++ b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.module.scss
@@ -28,6 +28,11 @@ $error-line-height: 14px;
         }
     }
 
+    &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
     :global {
         .EasyMDEContainer {
             height: 100px;
diff --git a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
index 7d54a50b0..e2f23b76a 100644
--- a/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
+++ b/src/apps/review/src/lib/components/FieldMarkdownEditor/FieldMarkdownEditor.tsx
@@ -40,6 +40,7 @@ interface Props {
     onBlur?: () => void
     error?: string
     showBorder?: boolean
+    disabled?: boolean
 }
 const errorMessages = {
     fileTooLarge:
@@ -806,6 +807,7 @@ export const FieldMarkdownEditor: FC<Props> = (props: Props) => {
         <div
             className={classNames(styles.container, props.className, {
                 [styles.isError]: !!props.error,
+                [styles.disabled]: !!props.disabled,
                 [styles.showBorder]: !!props.showBorder,
             })}
         >
diff --git a/src/apps/review/src/lib/components/ManagerComment/ManagerComment.tsx b/src/apps/review/src/lib/components/ManagerComment/ManagerComment.tsx
index 17d6984b2..58c328101 100644
--- a/src/apps/review/src/lib/components/ManagerComment/ManagerComment.tsx
+++ b/src/apps/review/src/lib/components/ManagerComment/ManagerComment.tsx
@@ -1,7 +1,7 @@
 /**
  * AppealComment.
  */
-import { FC, useCallback, useMemo, useState } from 'react'
+import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import {
     Controller,
     ControllerRenderProps,
@@ -16,7 +16,7 @@ import { yupResolver } from '@hookform/resolvers/yup'
 
 import { MarkdownReview } from '../MarkdownReview'
 import { FieldMarkdownEditor } from '../FieldMarkdownEditor'
-import { FormManagerComment, ScorecardQuestion, SelectOption } from '../../models'
+import { FormManagerComment, ReviewItemInfo, ScorecardQuestion, SelectOption } from '../../models'
 import { formManagerCommentSchema } from '../../utils'
 import { QUESTION_YES_NO_OPTIONS } from '../../../config/index.config'
 
@@ -25,13 +25,19 @@ import styles from './ManagerComment.module.scss'
 interface Props {
     className?: string
     scorecardQuestion: ScorecardQuestion
-    updateScorecardQuestion: (value: string) => void
+    reviewItem: ReviewItemInfo
+    isSavingManagerComment: boolean
+    addManagerComment: (
+        content: string,
+        updatedResponse: string,
+        reviewItem: ReviewItemInfo,
+        success: () => void,
+    ) => void
 }
 
 export const ManagerComment: FC<Props> = (props: Props) => {
     const [comment, setComment] = useState('')
     const [showCommentForm, setShowCommentForm] = useState(false)
-    const [showComment, setShowComment] = useState(false)
 
     const {
         handleSubmit,
@@ -47,11 +53,16 @@ export const ManagerComment: FC<Props> = (props: Props) => {
     })
 
     const onSubmit = useCallback((data: FormManagerComment) => {
-        setComment(data.response)
-        props.updateScorecardQuestion(data.finalScore)
-        setShowCommentForm(false)
-        setShowComment(true)
-    }, [props])
+        props.addManagerComment(
+            data.response,
+            data.finalScore,
+            props.reviewItem,
+            () => {
+                setComment(data.response)
+                setShowCommentForm(false)
+            },
+        )
+    }, [props.reviewItem])
 
     const responseOptions = useMemo<SelectOption[]>(() => {
         if (props.scorecardQuestion.type === 'SCALE') {
@@ -76,16 +87,33 @@ export const ManagerComment: FC<Props> = (props: Props) => {
         return []
     }, [props.scorecardQuestion])
 
+    useEffect(() => {
+        if (props.reviewItem.managerComment) {
+            setComment(props.reviewItem.managerComment)
+        }
+    }, [props.reviewItem])
+
     return (
         <div className={classNames(styles.container, props.className)}>
-            {showComment && (
+            {!showCommentForm && comment && (
                 <div className={styles.blockManagerComment}>
                     <span className={styles.textTitle}>Manager Comment</span>
                     <MarkdownReview value={comment} />
+                    <div className={styles.blockBtns}>
+                        <button
+                            onClick={function onClick() {
+                                setShowCommentForm(true)
+                            }}
+                            className='filledButton'
+                            type='button'
+                        >
+                            Edit Manager Comment
+                        </button>
+                    </div>
                 </div>
             )}
 
-            {!showCommentForm && !showComment && (
+            {!showCommentForm && !comment && (
                 <button
                     type='button'
                     className='borderButton'
@@ -152,6 +180,7 @@ export const ManagerComment: FC<Props> = (props: Props) => {
                                                 onBlur={function onBlur() {
                                                     controlProps.field.onBlur()
                                                 }}
+                                                isDisabled={props.isSavingManagerComment}
                                             />
                                         )
                                     }}
@@ -175,17 +204,19 @@ export const ManagerComment: FC<Props> = (props: Props) => {
                         }) {
                             return (
                                 <FieldMarkdownEditor
+                                    initialValue={comment}
                                     className={styles.markdownEditor}
                                     onChange={controlProps.field.onChange}
                                     showBorder
                                     onBlur={controlProps.field.onBlur}
                                     error={_.get(errors, 'response.message')}
+                                    disabled={props.isSavingManagerComment}
                                 />
                             )
                         }}
                     />
                     <div className={styles.blockBtns}>
-                        <button className='filledButton' type='submit'>
+                        <button className='filledButton' type='submit' disabled={props.isSavingManagerComment}>
                             Submit Response
                         </button>
                         <button
diff --git a/src/apps/review/src/lib/components/ScorecardDetails/ScorecardDetails.tsx b/src/apps/review/src/lib/components/ScorecardDetails/ScorecardDetails.tsx
index 5acae01dd..d1a7f473b 100644
--- a/src/apps/review/src/lib/components/ScorecardDetails/ScorecardDetails.tsx
+++ b/src/apps/review/src/lib/components/ScorecardDetails/ScorecardDetails.tsx
@@ -13,20 +13,22 @@ import {
     useState,
 } from 'react'
 import { useForm, UseFormReturn } from 'react-hook-form'
-import { NavLink, useNavigate, useSearchParams } from 'react-router-dom'
-import _, { map } from 'lodash'
+import { NavLink, useSearchParams } from 'react-router-dom'
+import { filter, forEach, isEmpty, reduce } from 'lodash'
 import classNames from 'classnames'
 
 import { yupResolver } from '@hookform/resolvers/yup'
+import { TableLoading } from '~/apps/admin/src/lib'
 
-import { useFetchReviews, useFetchReviewsProps } from '../../hooks'
-import { AppealInfo, FormReviews, ReviewInfo, ReviewItemInfo } from '../../models'
+import { useAppNavigate } from '../../hooks'
+import { AppealInfo, FormReviews, MappingAppeal, ReviewInfo, ReviewItemInfo, ScorecardInfo } from '../../models'
 import { ScorecardDetailsHeader } from '../ScorecardDetailsHeader'
 import { ScorecardQuestionEdit } from '../ScorecardQuestionEdit'
 import { ScorecardQuestionView } from '../ScorecardQuestionView'
 import { formReviewsSchema, roundWith2DecimalPlaces } from '../../utils'
 import { ConfirmModal } from '../ConfirmModal'
 import { IconError } from '../../assets/icons'
+import { ReviewItemComment } from '../../models/ReviewItemComment.model'
 
 import styles from './ScorecardDetails.module.scss'
 
@@ -35,25 +37,55 @@ interface Props {
     isEdit: boolean
     onCancelEdit: () => void
     setIsChanged: Dispatch<SetStateAction<boolean>>
+    scorecardInfo?: ScorecardInfo
+    isLoading: boolean
+    reviewInfo?: ReviewInfo
+    isSavingReview: boolean
+    isSavingAppeal: boolean
+    isSavingAppealResponse: boolean
+    isSavingManagerComment: boolean
+    saveReviewInfo: (
+        updatedReview: FormReviews | undefined,
+        fullReview: FormReviews | undefined,
+        committed: boolean,
+        totalScore: number,
+        success: () => void,
+    ) => void
+    mappingAppeals: MappingAppeal
+    addAppeal: (
+        content: string,
+        commentItem: ReviewItemComment,
+        success: () => void,
+    ) => void
+    doDeleteAppeal: (
+        appealInfo: AppealInfo | undefined,
+        success: () => void,
+    ) => void
+    addAppealResponse: (
+        content: string,
+        updatedResponse: string,
+        appeal: AppealInfo,
+        reviewItem: ReviewItemInfo,
+        success: () => void,
+    ) => void
+    addManagerComment: (
+        content: string,
+        updatedResponse: string,
+        reviewItem: ReviewItemInfo,
+        success: () => void,
+    ) => void
 }
 
 export const ScorecardDetails: FC<Props> = (props: Props) => {
+    const scorecardInfo = props.scorecardInfo
+    const isLoading = props.isLoading
+    const reviewInfo = props.reviewInfo
+    const isSavingReview = props.isSavingReview
     const isEdit = props.isEdit
-    const navigate = useNavigate()
+    const navigate = useAppNavigate()
     const [, setSearchParams] = useSearchParams()
     const [isExpand, setIsExpand] = useState<{ [key: string]: boolean }>({})
     const [isShowSaveAsDraftModal, setIsShowSaveAsDraftModal] = useState(false)
-    const { scorecardInfo, appeals, reviewInfo, setReviewInfo }: useFetchReviewsProps
-        = useFetchReviews(isEdit)
-    const mappingAppeals = useMemo<{
-        [reviewItemCommentId: string]: AppealInfo
-    }>(() => {
-        const result: { [key: string]: AppealInfo } = {}
-        _.forEach(appeals, item => {
-            result[item.reviewItemCommentId] = item
-        })
-        return result
-    }, [appeals])
     const mappingReviewInfo = useMemo<{
         [key: string]: {
             item: ReviewItemInfo
@@ -66,7 +98,7 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                 index: number
             }
         } = {}
-        _.forEach(reviewInfo?.reviewItems ?? [], (item, index) => {
+        forEach(reviewInfo?.reviewItems ?? [], (item, index) => {
             result[item.scorecardQuestionId] = {
                 index,
                 item,
@@ -97,21 +129,21 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
     }, [isDirty, changeHandle])
 
     const errorMessageTop
-        = _.isEmpty(errors) || _.isEmpty(isTouched)
+        = isEmpty(errors) || isEmpty(isTouched)
             ? ''
             : 'There were validation errors. Check below.'
 
     const errorMessageBottom
-        = _.isEmpty(errors) || _.isEmpty(isTouched)
+        = isEmpty(errors) || isEmpty(isTouched)
             ? ''
             : 'There were validation errors. Check above.'
 
     const touchedAllField = useCallback(() => {
         const formData = getValues()
         const isTouchedAll: { [key: string]: boolean } = {}
-        _.forEach(formData.reviews, review => {
+        forEach(formData.reviews, review => {
             isTouchedAll[`reviews.${review.index}.initialAnswer.message`] = true
-            _.forEach(review.comments, comment => {
+            forEach(review.comments, comment => {
                 isTouchedAll[
                     `reviews.${review.index}.comments.${comment.index}.content`
                 ] = true
@@ -125,14 +157,21 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
         [isEdit],
     )
 
-    const onSubmit = useCallback((data: FormReviews) => {
-        reset(data)
-        setSearchParams({ viewMode: 'true' }, { replace: true })
-    }, [reset, setSearchParams])
-
     const [reviewProgress, setReviewProgress] = useState(0)
     const [totalScore, setTotalScore] = useState(0)
 
+    const onSubmit = useCallback((data: FormReviews) => {
+        props.saveReviewInfo(
+            isDirty ? getValues() : undefined,
+            getValues(),
+            true,
+            totalScore,
+            () => {
+                reset(data)
+            },
+        )
+    }, [reset, setSearchParams, totalScore, isDirty])
+
     const recalculateReviewProgress = useCallback(() => {
         const reviewFormDatas = getValues().reviews
         const mapingResult: {
@@ -141,7 +180,7 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
         const newReviewProgress
             = reviewFormDatas.length > 0
                 ? Math.round(
-                    (_.filter(reviewFormDatas, review => {
+                    (filter(reviewFormDatas, review => {
                         mapingResult[review.scorecardQuestionId]
                             = review.initialAnswer
                         return !!review.initialAnswer
@@ -152,15 +191,15 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                 : 0
         setReviewProgress(newReviewProgress)
 
-        const groupsScore = _.reduce(
+        const groupsScore = reduce(
             scorecardInfo?.scorecardGroups ?? [],
             (groupResult, group) => {
                 const groupPoint
-                    = (_.reduce(
+                    = (reduce(
                         group.sections ?? [],
                         (sectionResult, section) => {
                             const sectionPoint
-                                = (_.reduce(
+                                = (reduce(
                                     section.questions ?? [],
                                     (questionResult, question) => {
                                         let questionPoint = 0
@@ -213,7 +252,7 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
 
     useEffect(() => {
         if (reviewInfo) {
-            reset({
+            const newFormData = {
                 reviews: reviewInfo.reviewItems.map(
                     (reviewItem, reviewItemIndex) => ({
                         comments: reviewItem.reviewItemComments.map(
@@ -226,18 +265,19 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                         ),
                         id: reviewItem.id,
                         index: reviewItemIndex,
-                        initialAnswer: reviewItem.initialAnswer,
+                        initialAnswer: reviewItem.finalAnswer || reviewItem.initialAnswer,
                         scorecardQuestionId: reviewItem.scorecardQuestionId,
                     }),
                 ),
-            })
+            }
+            reset(newFormData)
             recalculateReviewProgress()
         }
     }, [reviewInfo, recalculateReviewProgress, reset])
 
     const expandAll = useCallback(() => {
         setIsExpand(
-            _.reduce(
+            reduce(
                 reviewInfo?.reviewItems ?? [],
                 (result, reviewItem) => ({ ...result, [reviewItem.id]: true }),
                 {},
@@ -247,27 +287,16 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
 
     const back = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
         e.preventDefault()
-        navigate(-1)
+        navigate(-1, {
+            fallback: './../../../../challenge-details',
+        })
     }, [navigate])
 
     const closeHandel = useCallback(() => {
         setIsShowSaveAsDraftModal(false)
     }, [])
 
-    const [isUpdated, setIsUpdated] = useState(false)
-    const updateReviewItem = useCallback((item: ReviewItemInfo) => {
-        const result = map(reviewInfo?.reviewItems, review => {
-            if (review.id === item.id) {
-                return item
-            }
-
-            return review
-        })
-        setReviewInfo({ ...reviewInfo, reviewItems: result } as ReviewInfo)
-        setIsUpdated(true)
-    }, [reviewInfo, setReviewInfo])
-
-    return (
+    return isLoading ? (<TableLoading />) : (
         <div className={classNames(styles.container, props.className)}>
             <ScorecardDetailsHeader
                 isEdit={isEdit}
@@ -343,7 +372,7 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                                                             if (
                                                                 !reviewItemInfo
                                                             ) {
-                                                                return <></>
+                                                                return undefined
                                                             }
 
                                                             return isEdit ? (
@@ -393,6 +422,7 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                                                                     setIsTouched={
                                                                         setIsTouched
                                                                     }
+                                                                    disabled={isSavingReview}
                                                                 />
                                                             ) : (
                                                                 <ScorecardQuestionView
@@ -421,10 +451,28 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                                                                         questionIndex
                                                                     }
                                                                     mappingAppeals={
-                                                                        mappingAppeals
+                                                                        props.mappingAppeals
+                                                                    }
+                                                                    isSavingAppeal={
+                                                                        props.isSavingAppeal
+                                                                    }
+                                                                    isSavingAppealResponse={
+                                                                        props.isSavingAppealResponse
+                                                                    }
+                                                                    isSavingManagerComment={
+                                                                        props.isSavingManagerComment
+                                                                    }
+                                                                    addAppeal={
+                                                                        props.addAppeal
                                                                     }
-                                                                    updateReviewItem={
-                                                                        updateReviewItem
+                                                                    doDeleteAppeal={
+                                                                        props.doDeleteAppeal
+                                                                    }
+                                                                    addAppealResponse={
+                                                                        props.addAppealResponse
+                                                                    }
+                                                                    addManagerComment={
+                                                                        props.addManagerComment
                                                                     }
                                                                 />
                                                             )
@@ -464,9 +512,18 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                                     type='button'
                                     className='borderButton'
                                     onClick={function onClick() {
-                                        setIsShowSaveAsDraftModal(true)
-                                        reset(getValues())
+                                        props.saveReviewInfo(
+                                            isDirty ? getValues() : undefined,
+                                            getValues(),
+                                            false,
+                                            totalScore,
+                                            () => {
+                                                setIsShowSaveAsDraftModal(true)
+                                                reset(getValues())
+                                            },
+                                        )
                                     }}
+                                    disabled={isSavingReview}
                                 >
                                     Save as Draft
                                 </button>
@@ -476,6 +533,7 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                                     onClick={function onClick() {
                                         touchedAllField()
                                     }}
+                                    disabled={isSavingReview}
                                 >
                                     Mark as Complete
                                 </button>
@@ -488,23 +546,13 @@ export const ScorecardDetails: FC<Props> = (props: Props) => {
                                 <span>{totalScore}</span>
                             </div>
                             <div className={styles.buttons}>
-                                {isUpdated ? (
-                                    <NavLink
-                                        className='filledButton'
-                                        to=''
-                                        onClick={back}
-                                    >
-                                        Save
-                                    </NavLink>
-                                ) : (
-                                    <NavLink
-                                        className='filledButton'
-                                        to=''
-                                        onClick={back}
-                                    >
-                                        Back to Challenge
-                                    </NavLink>
-                                )}
+                                <NavLink
+                                    className='filledButton'
+                                    to=''
+                                    onClick={back}
+                                >
+                                    Back to Challenge
+                                </NavLink>
                             </div>
                         </div>
                     )}
diff --git a/src/apps/review/src/lib/components/ScorecardQuestionEdit/ScorecardQuestionEdit.tsx b/src/apps/review/src/lib/components/ScorecardQuestionEdit/ScorecardQuestionEdit.tsx
index 216580147..d372287d6 100644
--- a/src/apps/review/src/lib/components/ScorecardQuestionEdit/ScorecardQuestionEdit.tsx
+++ b/src/apps/review/src/lib/components/ScorecardQuestionEdit/ScorecardQuestionEdit.tsx
@@ -42,6 +42,7 @@ interface Props {
     fieldIndex: number
     errors: FieldErrors<FormReviews>
     isTouched: { [key: string]: boolean }
+    disabled?: boolean
     setIsTouched: Dispatch<
         SetStateAction<{
             [key: string]: boolean
@@ -236,6 +237,7 @@ export const ScorecardQuestionEdit: FC<Props> = (props: Props) => {
                                             `reviews.${props.fieldIndex}.initialAnswer`,
                                         )
                                     }}
+                                    isDisabled={props.disabled}
                                 />
                             )
                         }}
@@ -360,6 +362,7 @@ export const ScorecardQuestionEdit: FC<Props> = (props: Props) => {
                                                         onBlur={function onBlur() {
                                                             controlProps.field.onBlur()
                                                         }}
+                                                        isDisabled={props.disabled}
                                                     />
                                                 </div>
                                             )
@@ -404,6 +407,7 @@ export const ScorecardQuestionEdit: FC<Props> = (props: Props) => {
                                                             idx
                                                         ]
                                                     }
+                                                    disabled={props.disabled}
                                                 />
                                             )
                                         }}
@@ -423,6 +427,7 @@ export const ScorecardQuestionEdit: FC<Props> = (props: Props) => {
                                     type: '',
                                 })
                             }}
+                            disabled={props.disabled}
                         >
                             Add Response
                         </button>
diff --git a/src/apps/review/src/lib/components/ScorecardQuestionView/ScorecardQuestionView.tsx b/src/apps/review/src/lib/components/ScorecardQuestionView/ScorecardQuestionView.tsx
index c06586120..c6150d145 100644
--- a/src/apps/review/src/lib/components/ScorecardQuestionView/ScorecardQuestionView.tsx
+++ b/src/apps/review/src/lib/components/ScorecardQuestionView/ScorecardQuestionView.tsx
@@ -1,8 +1,13 @@
 /**
  * Scorecard Question View.
  */
-import { Dispatch, FC, Fragment, SetStateAction, useCallback, useMemo } from 'react'
-import { useParams } from 'react-router-dom'
+import {
+    Dispatch,
+    FC,
+    Fragment,
+    SetStateAction,
+    useMemo,
+} from 'react'
 import { includes } from 'lodash'
 import classNames from 'classnames'
 
@@ -10,13 +15,27 @@ import { useWindowSize, WindowSize } from '~/libs/shared'
 
 import { AppealComment } from '../AppealComment'
 import { MarkdownReview } from '../MarkdownReview'
-import { AppealInfo, ReviewItemInfo, ScorecardQuestion } from '../../models'
+import {
+    AppealInfo,
+    MappingAppeal,
+    ReviewInfo,
+    ReviewItemInfo,
+    ScorecardQuestion,
+} from '../../models'
 import { stringIsNumberic } from '../../utils'
 import { IconChevronDown } from '../../assets/icons'
-import { useFetchMockChallengeInfo, useFetchMockChallengeInfoProps, useRole, useRoleProps } from '../../hooks'
-import { ADMIN, COPILOT, FINISHTAB, REVIEWER, TAB, WITHOUT_APPEAL } from '../../../config/index.config'
+import { useRole, useRoleProps } from '../../hooks'
+import {
+    ADMIN,
+    COPILOT,
+    FINISHTAB,
+    REVIEWER,
+    SUBMITTER,
+    TAB,
+} from '../../../config/index.config'
 import { Appeal } from '../Appeal'
 import { ManagerComment } from '../ManagerComment'
+import { ReviewItemComment } from '../../models/ReviewItemComment.model'
 
 import styles from './ScorecardQuestionView.module.scss'
 
@@ -24,52 +43,59 @@ interface Props {
     className?: string
     scorecardQuestion: ScorecardQuestion
     reviewItem: ReviewItemInfo
+    reviewInfo?: ReviewInfo
     groupIndex: number
     sectionIndex: number
     questionIndex: number
-    mappingAppeals: {
-        [reviewItemCommentId: string]: AppealInfo
-    }
+    mappingAppeals: MappingAppeal
     isExpand: { [key: string]: boolean }
     setIsExpand: Dispatch<
         SetStateAction<{
             [key: string]: boolean
         }>
     >
-    updateReviewItem?: (reviewItem: ReviewItemInfo) => void
+    isSavingAppeal: boolean
+    isSavingAppealResponse: boolean
+    isSavingManagerComment: boolean
+    addAppeal: (
+        content: string,
+        commentItem: ReviewItemComment,
+        success: () => void,
+    ) => void
+    doDeleteAppeal: (
+        appealInfo: AppealInfo | undefined,
+        success: () => void,
+    ) => void
+    addAppealResponse: (
+        content: string,
+        updatedResponse: string,
+        appeal: AppealInfo,
+        reviewItem: ReviewItemInfo,
+        success: () => void,
+    ) => void
+    addManagerComment: (
+        content: string,
+        updatedResponse: string,
+        reviewItem: ReviewItemInfo,
+        success: () => void,
+    ) => void
 }
 
 export const ScorecardQuestionView: FC<Props> = (props: Props) => {
-    const params = useParams()
     const { actionChallengeRole }: useRoleProps = useRole()
     const isExpand = props.isExpand[props.reviewItem.id]
     const { width: screenWidth }: WindowSize = useWindowSize()
     const isMobile = useMemo(() => screenWidth <= 745, [screenWidth])
 
-    const { challengeInfo }: useFetchMockChallengeInfoProps
-        = useFetchMockChallengeInfo(params.challengeId)
-
     const finalAnswer = useMemo(() => {
-        if (stringIsNumberic(props.reviewItem.finalAnswer)) {
-            return `Rating ${props.reviewItem.finalAnswer}`
+        const answer
+            = props.reviewItem.finalAnswer || props.reviewItem.initialAnswer
+        if (stringIsNumberic(answer)) {
+            return `Rating ${answer}`
         }
 
-        return props.reviewItem.finalAnswer
-
-    }, [props.reviewItem.finalAnswer])
-
-    const updateFinalAnswer = useCallback(
-        (value: string) => {
-            if (props.updateReviewItem) {
-                props.updateReviewItem({
-                    ...props.reviewItem,
-                    finalAnswer: value,
-                    initialAnswer: value,
-                })
-            }
-        },
-        [props],
-    )
+        return answer
+    }, [props.reviewItem.finalAnswer, props.reviewItem.initialAnswer])
 
     return (
         <>
@@ -143,9 +169,8 @@ export const ScorecardQuestionView: FC<Props> = (props: Props) => {
                             {
                                 [styles.isLast]:
                                     index
-                                    === props.reviewItem.reviewItemComments
-                                        .length
-                                            - 1,
+                                    === props.reviewItem.reviewItemComments.length
+                                    - 1,
                             },
                         )}
                     >
@@ -169,44 +194,13 @@ export const ScorecardQuestionView: FC<Props> = (props: Props) => {
                             </div>
                         </td>
                     </tr>
-                    {!includes(WITHOUT_APPEAL, challengeInfo?.type)
-                        && !includes(WITHOUT_APPEAL, challengeInfo?.track)
-                        && (includes([REVIEWER, COPILOT, ADMIN], actionChallengeRole) ? (
-                            props.mappingAppeals[commentItem.id] && (
-                                <tr
-                                    key={commentItem.sortOrder}
-                                    className={classNames(
-                                        styles.container,
-                                        props.className,
-                                        styles.blockRowAppealComment,
-                                        {
-                                            [styles.isLast]:
-                                                index
-                                                    === props.reviewItem
-                                                        .reviewItemComments
-                                                        .length
-                                                        - 1
-                                                && !includes(
-                                                    [COPILOT, ADMIN],
-                                                    actionChallengeRole,
-                                                ),
-                                        },
-                                    )}
-                                >
-                                    <td colSpan={3}>
-                                        <AppealComment
-                                            role={actionChallengeRole}
-                                            data={
-                                                props.mappingAppeals[
-                                                    commentItem.id
-                                                ]
-                                            }
-                                        />
-                                    </td>
-                                </tr>
-                            )
-                        ) : (
+                    {includes(
+                        [REVIEWER, COPILOT, ADMIN],
+                        actionChallengeRole,
+                    ) && (
+                        props.mappingAppeals[commentItem.id] && (
                             <tr
+                                key={commentItem.sortOrder}
                                 className={classNames(
                                     styles.container,
                                     props.className,
@@ -215,29 +209,78 @@ export const ScorecardQuestionView: FC<Props> = (props: Props) => {
                                         [styles.isLast]:
                                             index
                                                 === props.reviewItem
-                                                    .reviewItemComments.length
-                                                    - 1,
+                                                    .reviewItemComments
+                                                    .length
+                                                    - 1
+                                                && !includes(
+                                                    [COPILOT, ADMIN],
+                                                    actionChallengeRole,
+                                                ),
                                     },
                                 )}
                             >
-                                <td
-                                    colSpan={3}
-                                    className={classNames(
-                                        includes(
-                                            FINISHTAB,
-                                            sessionStorage.getItem(TAB),
-                                        )
-                                            ? styles.isEmpty
-                                            : '',
-                                    )}
-                                >
-                                    <Appeal role={actionChallengeRole} />
+                                <td colSpan={3}>
+                                    <AppealComment
+                                        data={
+                                            props.mappingAppeals[
+                                                commentItem.id
+                                            ] as AppealInfo
+                                        }
+                                        scorecardQuestion={props.scorecardQuestion}
+                                        isSavingAppealResponse={props.isSavingAppealResponse}
+                                        reviewItem={props.reviewItem}
+                                        appealInfo={props.mappingAppeals[commentItem.id]}
+                                        addAppealResponse={props.addAppealResponse}
+                                    />
                                 </td>
                             </tr>
-                        ))}
+                        )
+                    )}
+
+                    {includes(
+                        [SUBMITTER],
+                        actionChallengeRole,
+                    ) && (
+                        <tr
+                            className={classNames(
+                                styles.container,
+                                props.className,
+                                styles.blockRowAppealComment,
+                                {
+                                    [styles.isLast]:
+                                        index
+                                        === props.reviewItem.reviewItemComments
+                                            .length
+                                            - 1,
+                                },
+                            )}
+                        >
+                            <td
+                                colSpan={3}
+                                className={classNames(
+                                    includes(
+                                        FINISHTAB,
+                                        sessionStorage.getItem(TAB),
+                                    )
+                                        ? styles.isEmpty
+                                        : '',
+                                )}
+                            >
+                                <Appeal
+                                    appealInfo={
+                                        props.mappingAppeals[commentItem.id]
+                                    }
+                                    commentItem={commentItem}
+                                    isSavingAppeal={props.isSavingAppeal}
+                                    addAppeal={props.addAppeal}
+                                    doDeleteAppeal={props.doDeleteAppeal}
+                                />
+                            </td>
+                        </tr>
+                    )}
                 </Fragment>
             ))}
-            {includes([COPILOT, ADMIN], actionChallengeRole) && (
+            {includes([COPILOT, ADMIN], actionChallengeRole) && !props.reviewInfo?.id && (
                 <tr
                     className={classNames(
                         styles.container,
@@ -249,7 +292,9 @@ export const ScorecardQuestionView: FC<Props> = (props: Props) => {
                     <td colSpan={3}>
                         <ManagerComment
                             scorecardQuestion={props.scorecardQuestion}
-                            updateScorecardQuestion={updateFinalAnswer}
+                            reviewItem={props.reviewItem}
+                            isSavingManagerComment={props.isSavingManagerComment}
+                            addManagerComment={props.addManagerComment}
                         />
                     </td>
                 </tr>
diff --git a/src/apps/review/src/lib/components/SubmissionBarInfo/SubmissionBarInfo.tsx b/src/apps/review/src/lib/components/SubmissionBarInfo/SubmissionBarInfo.tsx
index e667696d8..5062086a0 100644
--- a/src/apps/review/src/lib/components/SubmissionBarInfo/SubmissionBarInfo.tsx
+++ b/src/apps/review/src/lib/components/SubmissionBarInfo/SubmissionBarInfo.tsx
@@ -1,57 +1,68 @@
 /**
  * Challenge Phase Info.
  */
-import { FC, useCallback, useMemo } from 'react'
-import { NavLink } from 'react-router-dom'
+import { FC, useContext, useMemo } from 'react'
+import { useParams } from 'react-router-dom'
 import classNames from 'classnames'
 
-import { SubmissionInfo } from '../../models'
+import { BackendSubmission, ChallengeDetailContextModel } from '../../models'
 import { useRole, useRoleProps } from '../../hooks'
+import { ChallengeDetailContext } from '../../contexts'
+import { getHandleUrl } from '../../utils'
 
 import styles from './SubmissionBarInfo.module.scss'
 
 interface Props {
     className?: string
-    submission: SubmissionInfo
+    submission?: BackendSubmission
 }
 
 export const SubmissionBarInfo: FC<Props> = (props: Props) => {
+    // get challenge info from challenge detail context
+    const {
+        resourceMemberIdMapping,
+    }: ChallengeDetailContextModel = useContext(ChallengeDetailContext)
+    const {
+        submissionId = '',
+    }: {
+        submissionId?: string
+    } = useParams<{
+        submissionId: string
+    }>()
+    const useInfo = useMemo(
+        () => resourceMemberIdMapping[props.submission?.memberId ?? ''],
+        [resourceMemberIdMapping, props.submission],
+    )
     const { myChallengeRoles }: useRoleProps = useRole()
-    const uiItems = useMemo(() => {
-        const data = props.submission
-        return [
-            {
-                icon: 'icon-file',
-                title: 'Submission ID',
-                type: 'link',
-                value: data.id,
-            },
-            {
-                icon: 'icon-handle',
-                title: 'My Role',
-                value: (
-                    <div className={styles.blockMyRoles}>
-                        {myChallengeRoles.map(item => (
-                            <span key={item}>{item}</span>
-                        ))}
-                    </div>
-                ),
-            },
-            {
-                icon: 'icon-handle',
-                style: {
-                    color: data.userInfo?.handleColor,
-                },
-                title: 'Handle',
-                type: 'link',
-                value: data.userInfo?.memberHandle,
+    const uiItems = useMemo(() => [
+        {
+            icon: 'icon-file',
+            title: 'Submission ID',
+            type: 'link',
+            value: submissionId,
+        },
+        {
+            icon: 'icon-handle',
+            title: 'My Role',
+            value: (
+                <div className={styles.blockMyRoles}>
+                    {myChallengeRoles.map(item => (
+                        <span key={item}>{item}</span>
+                    ))}
+                </div>
+            ),
+        },
+        {
+            href: getHandleUrl(useInfo),
+            icon: 'icon-handle',
+            style: {
+                color: useInfo?.handleColor,
             },
-        ]
-    }, [props.submission, myChallengeRoles])
-
-    const prevent = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
-        e.preventDefault()
-    }, [])
+            title: 'Handle',
+            type: 'link',
+            value: useInfo?.memberHandle ?? '',
+        },
+    ], [myChallengeRoles, submissionId, useInfo])
 
     return (
         <div className={classNames(styles.container, props.className)}>
@@ -63,13 +74,14 @@ export const SubmissionBarInfo: FC<Props> = (props: Props) => {
                     <div>
                         <span>{item.title}</span>
                         {item.type === 'link' ? (
-                            <NavLink
-                                to='#'
-                                onClick={prevent}
+                            <a
+                                href={item.href}
                                 style={item.style}
+                                target='_blank'
+                                rel='noreferrer'
                             >
                                 {item.value}
-                            </NavLink>
+                            </a>
                         ) : (
                             <strong style={item.style}>{item.value}</strong>
                         )}
diff --git a/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.tsx b/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.tsx
index 28cb9b5f8..f9220973e 100644
--- a/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.tsx
+++ b/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.tsx
@@ -15,7 +15,7 @@ import { Pagination } from '~/apps/admin/src/lib'
 import {
     BackendResourceRole,
     ChallengeInfo,
-    MyRoleInfosMappingType,
+    ChallengeRealtiveInfosMapping,
 } from '../../models'
 import { TableWrapper } from '../TableWrapper'
 import { ProgressBar } from '../ProgressBar'
@@ -28,7 +28,7 @@ interface Props {
     resourceRoleMapping?: {
         [key: string]: BackendResourceRole
     }
-    myRoleInfosMapping: MyRoleInfosMappingType // from challenge id to list of my role
+    challengeRelativeInfosMapping: ChallengeRealtiveInfosMapping // from challenge id to list of my role
     totalPages: number
     page: number
     setPage: Dispatch<SetStateAction<number>>
@@ -46,8 +46,6 @@ export const TableActiveReviews: FC<Props> = (props: Props) => {
         },
         [
             navigate,
-            props.resourceRoleMapping,
-            props.myRoleInfosMapping,
         ],
     )
 
@@ -79,11 +77,11 @@ export const TableActiveReviews: FC<Props> = (props: Props) => {
                 propertyName: 'role',
                 renderer: (data: ChallengeInfo) => {
                     let myRoles = ['']
-                    const myRoleInfos = props.myRoleInfosMapping[data.id]
-                    if (!props.resourceRoleMapping || !myRoleInfos) {
+                    const challengeRelativeInfos = props.challengeRelativeInfosMapping[data.id]
+                    if (!props.resourceRoleMapping || !challengeRelativeInfos) {
                         myRoles = ['loading...']
                     } else {
-                        myRoles = myRoleInfos
+                        myRoles = challengeRelativeInfos.myRoles
                             .map(myRoleInfo => props.resourceRoleMapping?.[myRoleInfo.roleId]?.name)
                             .filter(item => !!item) as string[]
                     }
@@ -146,18 +144,25 @@ export const TableActiveReviews: FC<Props> = (props: Props) => {
                 className: styles.tableCell,
                 label: 'Review Progress',
                 propertyName: 'reviewProgress',
-                renderer: (data: ChallengeInfo) => (data.reviewProgress !== undefined ? (
-                    <div className='last-element'>
-                        <ProgressBar
-                            progress={data.reviewProgress}
-                            progressWidth='80px'
-                        />
-                    </div>
-                ) : undefined),
+                renderer: (data: ChallengeInfo) => {
+                    const challengeRelativeInfos = props.challengeRelativeInfosMapping[data.id]
+                    const reviewProgress = challengeRelativeInfos?.reviewProgress
+
+                    return reviewProgress !== undefined ? (
+                        <div className='last-element'>
+                            {reviewProgress !== null && (
+                                <ProgressBar
+                                    progress={reviewProgress}
+                                    progressWidth='80px'
+                                />
+                            )}
+                        </div>
+                    ) : (<span>loading...</span>)
+                },
                 type: 'element',
             },
         ],
-        [redirect, props.resourceRoleMapping, props.myRoleInfosMapping],
+        [redirect, props.resourceRoleMapping, props.challengeRelativeInfosMapping],
     )
 
     const columnsMobile = useMemo<MobileTableColumn<ChallengeInfo>[][]>(
diff --git a/src/apps/review/src/lib/components/TableReviewAppeals/TableReviewAppeals.tsx b/src/apps/review/src/lib/components/TableReviewAppeals/TableReviewAppeals.tsx
index 0efb9648b..071e41a23 100644
--- a/src/apps/review/src/lib/components/TableReviewAppeals/TableReviewAppeals.tsx
+++ b/src/apps/review/src/lib/components/TableReviewAppeals/TableReviewAppeals.tsx
@@ -13,11 +13,11 @@ import { Table, TableColumn } from '~/libs/ui'
 import { IsRemovingType } from '~/apps/admin/src/lib/models'
 
 import { TableWrapper } from '../TableWrapper'
-import { ChallengeDetailContextModel, SubmissionInfo } from '../../models'
+import { ChallengeDetailContextModel, MappingReviewAppeal, SubmissionInfo } from '../../models'
 import { ProgressBar } from '../ProgressBar'
-import { ADMIN, APPROVAL, COPILOT, WITHOUT_APPEAL } from '../../../config/index.config'
+import { APPROVAL, NO_RESOURCE_ID, REVIEWER, WITHOUT_APPEAL } from '../../../config/index.config'
 import { useRole, useRoleProps } from '../../hooks'
-import { getHandleUrl } from '../../utils'
+import { getHandleUrl, isReviewPhase } from '../../utils'
 import { ChallengeDetailContext } from '../../contexts'
 
 import styles from './TableReviewAppeals.module.scss'
@@ -29,6 +29,7 @@ interface Props {
     firstSubmissions?: SubmissionInfo
     isDownloading: IsRemovingType
     downloadSubmission: (submissionId: string) => void
+    mappingReviewAppeal: MappingReviewAppeal // from review id to appeal info
 }
 
 export const TableReviewAppeals: FC<Props> = (props: Props) => {
@@ -93,6 +94,14 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
                 {
                     label: 'Review Date',
                     renderer: (data: SubmissionInfo) => {
+                        if (!data.review || !data.review.id) {
+                            return (
+                                <span className={styles.notReviewed}>
+                                    Not Reviewed
+                                </span>
+                            )
+                        }
+
                         if (data.review) {
                             return (
                                 <span>
@@ -109,7 +118,7 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
                 {
                     label: 'Score',
                     renderer: (data: SubmissionInfo) => {
-                        if (!data.review) {
+                        if (!data.review || !data.review.id) {
                             return (
                                 <span className={styles.notReviewed}>
                                     Not Reviewed
@@ -133,9 +142,11 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
                             )
                         }
 
+                        const resourceId = data.review?.resourceId || NO_RESOURCE_ID
+
                         return (
                             <Link
-                                to={`./../scorecard-details/${data.id}?viewMode=true`}
+                                to={`./../scorecard-details/${data.id}/review/${resourceId}`}
                                 className={styles.textBlue}
                             >
                                 {data.review.initialScore}
@@ -146,27 +157,37 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
                 },
 
             ]
-            const actionColumns = !includes([COPILOT, ADMIN], actionChallengeRole) ? [
+            const actionColumns = actionChallengeRole === REVIEWER && isReviewPhase(challengeInfo) ? [
                 {
                     className: styles.textBlue,
                     label: 'Action',
-                    renderer: (data: SubmissionInfo) => (
-                        <Link
-                            to={`./../scorecard-details/${data.id}`}
-                            className={classNames(styles.submit, 'last-element')}
-                        >
-                            <i
-                                className={
-                                    data.review?.initialScore !== undefined
-                                        ? 'icon-reopen'
-                                        : 'icon-upload'
-                                }
-                            />
-                            {data.review?.initialScore !== undefined
-                                ? 'Reopen Review'
-                                : 'Submit Review'}
-                        </Link>
-                    ),
+                    renderer: (data: SubmissionInfo) => {
+                        const haveReview
+                            = data.review
+                            && !!data.review.id
+                        const resourceId = data.review?.resourceId || NO_RESOURCE_ID
+
+                        return (
+                            <Link
+                                to={`./../scorecard-details/${data.id}/review/${resourceId}`}
+                                className={classNames(
+                                    styles.submit,
+                                    'last-element',
+                                )}
+                            >
+                                <i
+                                    className={
+                                        haveReview
+                                            ? 'icon-reopen'
+                                            : 'icon-upload'
+                                    }
+                                />
+                                {haveReview
+                                    ? 'Reopen Review'
+                                    : 'Submit Review'}
+                            </Link>
+                        )
+                    },
                     type: 'element',
                 },
             ] : []
@@ -188,23 +209,38 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
             return [...initalColumns, {
                 label: 'Appeals',
                 renderer: (data: SubmissionInfo) => {
-                    if (!data.review) {
-                        return <></>
+                    if (!data.review || !data.review.id) {
+                        return (
+                            <span className={styles.notReviewed}>
+                                Not Reviewed
+                            </span>
+                        )
                     }
 
+                    const appealInfo = props.mappingReviewAppeal[data.review.id]
+                    if (!appealInfo) {
+                        return (
+                            <span className={styles.notReviewed}>
+                                loading...
+                            </span>
+                        )
+                    }
+
+                    const resourceId = data.review?.resourceId || NO_RESOURCE_ID
+
                     return (
                         <>
                             [
                             <Link
-                                to={`./../scorecard-details/${data.id}?viewMode=true`}
+                                to={`./../scorecard-details/${data.id}/review/${resourceId}`}
                                 className={styles.appealsLink}
                             >
-                                <span className={styles.textBlue}>0</span>
+                                <span className={styles.textBlue}>{appealInfo.finishAppeals}</span>
                                 {' '}
                                 /
                                 {' '}
                                 <span className={styles.textBlue}>
-                                    {data.review?.appealResuls.length}
+                                    {appealInfo.totalAppeals}
                                 </span>
                             </Link>
                             ]
@@ -221,6 +257,7 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
             actionChallengeRole,
             props.isDownloading,
             props.downloadSubmission,
+            props.mappingReviewAppeal,
         ],
     )
 
diff --git a/src/apps/review/src/lib/components/TableReviewAppealsForSubmitter/TableReviewAppealsForSubmitter.tsx b/src/apps/review/src/lib/components/TableReviewAppealsForSubmitter/TableReviewAppealsForSubmitter.tsx
index 9fc3259d9..bb461e9b8 100644
--- a/src/apps/review/src/lib/components/TableReviewAppealsForSubmitter/TableReviewAppealsForSubmitter.tsx
+++ b/src/apps/review/src/lib/components/TableReviewAppealsForSubmitter/TableReviewAppealsForSubmitter.tsx
@@ -12,10 +12,10 @@ import { TableMobile } from '~/apps/admin/src/lib/components/common/TableMobile'
 import { Table, TableColumn } from '~/libs/ui'
 import { IsRemovingType } from '~/apps/admin/src/lib/models'
 
-import { ChallengeDetailContextModel, ReviewResult, SubmissionInfo } from '../../models'
+import { ChallengeDetailContextModel, MappingReviewAppeal, ReviewResult, SubmissionInfo } from '../../models'
 import { TableWrapper } from '../TableWrapper'
 import { getFinalScore } from '../../utils'
-import { WITHOUT_APPEAL } from '../../../config/index.config'
+import { NO_RESOURCE_ID, WITHOUT_APPEAL } from '../../../config/index.config'
 import { ChallengeDetailContext } from '../../contexts'
 
 import styles from './TableReviewAppealsForSubmitter.module.scss'
@@ -26,6 +26,7 @@ interface Props {
     firstSubmissions?: SubmissionInfo
     isDownloading: IsRemovingType
     downloadSubmission: (submissionId: string) => void
+    mappingReviewAppeal: MappingReviewAppeal // from review id to appeal info
 }
 
 export const TableReviewAppealsForSubmitter: FC<Props> = (props: Props) => {
@@ -68,7 +69,7 @@ export const TableReviewAppealsForSubmitter: FC<Props> = (props: Props) => {
                 label: 'Review Score',
                 renderer: (data: SubmissionInfo) => (
                     <Link
-                        to={`./../scorecard-details/${data.id}?viewMode=true`}
+                        to={`./../scorecard-details/${data.id}/review/${data.review?.resourceId || NO_RESOURCE_ID}`}
                         className={styles.textBlue}
                     >
                         {finalScore(data.reviews)}
@@ -104,14 +105,17 @@ export const TableReviewAppealsForSubmitter: FC<Props> = (props: Props) => {
                         },
                         {
                             label: 'Score',
-                            renderer: (data: SubmissionInfo) => (
-                                <Link
-                                    to={`./../scorecard-details/${data.id}?viewMode=true`}
-                                    className={styles.textBlue}
-                                >
-                                    {review.score}
-                                </Link>
-                            ),
+                            renderer: (data: SubmissionInfo) => {
+                                const resourceId = data.review?.resourceId || NO_RESOURCE_ID
+                                return (
+                                    <Link
+                                        to={`./../scorecard-details/${data.id}/review/${resourceId}`}
+                                        className={styles.textBlue}
+                                    >
+                                        {review.score}
+                                    </Link>
+                                )
+                            },
                             type: 'element',
                         },
                     ]
@@ -127,29 +131,51 @@ export const TableReviewAppealsForSubmitter: FC<Props> = (props: Props) => {
                         {
                             className: styles.tableCellNoWrap,
                             label: 'Appeals',
-                            renderer: (data: SubmissionInfo) => (
-                                <>
-                                    [
-                                    <Link
-                                        className={classNames(
-                                            styles.appealsLink,
-                                            'last-element',
-                                        )}
-                                        to={`./../scorecard-details/${data.id}?viewMode=true`}
-                                    >
-                                        <span className={styles.textBlue}>
-                                            0
+                            renderer: (data: SubmissionInfo) => {
+                                if (!data.review || !data.review.id) {
+                                    return (
+                                        <span className={styles.notReviewed}>
+                                            Not Reviewed
                                         </span>
-                                        {' '}
-                                        /
-                                        {' '}
-                                        <span className={styles.textBlue}>
-                                            {review.appeals?.length}
+                                    )
+                                }
+
+                                const appealInfo = props.mappingReviewAppeal[data.review.id]
+                                if (!appealInfo) {
+                                    return (
+                                        <span className={styles.notReviewed}>
+                                            loading...
                                         </span>
-                                    </Link>
-                                    ]
-                                </>
-                            ),
+                                    )
+                                }
+
+                                const resourceId = data.review?.resourceId || NO_RESOURCE_ID
+                                return (
+                                    <>
+                                        [
+                                        <Link
+                                            className={classNames(
+                                                styles.appealsLink,
+                                                'last-element',
+                                            )}
+                                            to={
+                                                `./../scorecard-details/${data.id}/review/${resourceId}`
+                                            }
+                                        >
+                                            <span className={styles.textBlue}>
+                                                {appealInfo.finishAppeals}
+                                            </span>
+                                            {' '}
+                                            /
+                                            {' '}
+                                            <span className={styles.textBlue}>
+                                                {appealInfo.totalAppeals}
+                                            </span>
+                                        </Link>
+                                        ]
+                                    </>
+                                )
+                            },
                             type: 'element',
                         },
                     ] as TableColumn<SubmissionInfo>[]
@@ -163,6 +189,7 @@ export const TableReviewAppealsForSubmitter: FC<Props> = (props: Props) => {
             challengeInfo,
             props.isDownloading,
             props.downloadSubmission,
+            props.mappingReviewAppeal,
         ],
     )
 
diff --git a/src/apps/review/src/lib/components/TableWinners/TableWinners.tsx b/src/apps/review/src/lib/components/TableWinners/TableWinners.tsx
index d396b958a..252a4cce1 100644
--- a/src/apps/review/src/lib/components/TableWinners/TableWinners.tsx
+++ b/src/apps/review/src/lib/components/TableWinners/TableWinners.tsx
@@ -91,12 +91,7 @@ export const TableWinners: FC<Props> = (props: Props) => {
             {
                 label: 'Review Score',
                 renderer: (data: ProjectResult) => (
-                    <Link
-                        to={`./../scorecard-details/${data.submissionId}?viewMode=true`}
-                        className={styles.textBlue}
-                    >
-                        {data.finalScore}
-                    </Link>
+                    <span>{data.finalScore}</span>
                 ),
                 type: 'element',
             },
@@ -116,7 +111,7 @@ export const TableWinners: FC<Props> = (props: Props) => {
                             label: 'Score',
                             renderer: (data: ProjectResult) => (
                                 <Link
-                                    to={`./../scorecard-details/${data.submissionId}?viewMode=true`}
+                                    to={`./../scorecard-details/${data.submissionId}/review/${review.resourceId}`}
                                     className={styles.textBlue}
                                 >
                                     {data.reviews[index]?.score}
@@ -143,7 +138,10 @@ export const TableWinners: FC<Props> = (props: Props) => {
                                         [
                                         <Link
                                             className={classNames(styles.appealsLink, 'last-element')}
-                                            to={`./../scorecard-details/${data.submissionId}?viewMode=true`}
+                                            to={
+                                                `./../scorecard-details/${data.submissionId}`
+                                                + `/review/${review.resourceId}`
+                                            }
                                         >
                                             <span className={styles.textBlue}>
                                                 0
diff --git a/src/apps/review/src/lib/contexts/ReviewAppContextProvider.tsx b/src/apps/review/src/lib/contexts/ReviewAppContextProvider.tsx
index 358ce3ed5..500a29ac9 100644
--- a/src/apps/review/src/lib/contexts/ReviewAppContextProvider.tsx
+++ b/src/apps/review/src/lib/contexts/ReviewAppContextProvider.tsx
@@ -15,14 +15,14 @@ import { tokenGetAsync, TokenModel } from '~/libs/core'
 import { useOnComponentDidMount } from '~/apps/admin/src/lib/hooks'
 
 import { ReviewAppContextModel } from '../models'
-import { useFetchResource, useFetchResourceProps } from '../hooks'
+import { useFetchChallengeRelativeDatas, useFetchChallengeRelativeDatasProps } from '../hooks'
 
 export const ReviewAppContext: Context<ReviewAppContextModel>
     = createContext<ReviewAppContextModel>({
-        cancelLoadMyRoleInfos: noop,
-        loadMyRoleInfos: noop,
+        cancelLoadChallengeRelativeInfos: noop,
+        challengeRelativeInfosMapping: {},
+        loadChallengeRelativeInfos: noop,
         loginUserInfo: undefined,
-        myRoleInfosMapping: {},
         resourceRoleMapping: undefined,
     })
 
@@ -30,31 +30,31 @@ export const ReviewAppContextProvider: FC<PropsWithChildren> = props => {
     const [loginUserInfo, setLoginUserInfo] = useState<TokenModel | undefined>(undefined)
     // fetch my resources
     const {
-        cancelLoadMyRoleInfos,
-        loadMyRoleInfos,
-        myRoleInfosMapping,
+        cancelLoadChallengeRelativeInfos,
+        loadChallengeRelativeInfos,
+        challengeRelativeInfosMapping,
         resourceRoleMapping,
         resourceRoleReviewer,
         resourceRoleSubmitter,
-    }: useFetchResourceProps = useFetchResource(loginUserInfo)
+    }: useFetchChallengeRelativeDatasProps = useFetchChallengeRelativeDatas(loginUserInfo)
     const value = useMemo(
         () => ({
-            cancelLoadMyRoleInfos,
-            loadMyRoleInfos,
+            cancelLoadChallengeRelativeInfos,
+            challengeRelativeInfosMapping,
+            loadChallengeRelativeInfos,
             loginUserInfo,
-            myRoleInfosMapping,
             resourceRoleMapping,
             resourceRoleReviewer,
             resourceRoleSubmitter,
         }),
         [
-            cancelLoadMyRoleInfos,
-            loadMyRoleInfos,
+            cancelLoadChallengeRelativeInfos,
+            loadChallengeRelativeInfos,
             loginUserInfo,
             resourceRoleMapping,
             resourceRoleReviewer,
             resourceRoleSubmitter,
-            myRoleInfosMapping,
+            challengeRelativeInfosMapping,
         ],
     )
 
diff --git a/src/apps/review/src/lib/hooks/index.ts b/src/apps/review/src/lib/hooks/index.ts
index 8ce167fb5..0b28252d1 100644
--- a/src/apps/review/src/lib/hooks/index.ts
+++ b/src/apps/review/src/lib/hooks/index.ts
@@ -1,9 +1,7 @@
 export * from './useFetchActiveReviews'
 export * from './useFetchChallengeInfo'
-export * from './useFetchMockChallengeInfo'
-export * from './useFetchReviews'
 export * from './useRole'
-export * from './useFetchResource'
+export * from './useFetchChallengeRelativeDatas'
 export * from './useFetchChallengeTracks'
 export * from './useFetchChallengeTypes'
 export * from './useFetchChallengeResources'
@@ -11,3 +9,6 @@ export * from './useFetchChallengeSubmissions'
 export * from './useFetchScreeningReview'
 export * from './useDownloadSubmission'
 export * from './useFetchScorecards'
+export * from './useFetchSubmissionReviews'
+export * from './useAppNavigate'
+export * from './useFetchAppealQueue'
diff --git a/src/apps/review/src/lib/hooks/useAppNavigate.ts b/src/apps/review/src/lib/hooks/useAppNavigate.ts
new file mode 100644
index 000000000..b53e93a8f
--- /dev/null
+++ b/src/apps/review/src/lib/hooks/useAppNavigate.ts
@@ -0,0 +1,43 @@
+/**
+ * App navigation
+ */
+import { NavigateOptions, To, useLocation, useNavigate } from 'react-router-dom'
+
+interface AppNavigateOptions extends NavigateOptions {
+    fallback?: string
+}
+
+interface AppNavigateFunction {
+    (to: To | number, options?: AppNavigateOptions): void | Promise<void>
+    (delta: number): void | Promise<void>
+}
+
+/**
+ * Navigate with fallback
+ * @returns navigate
+ */
+const useAppNavigate = (): AppNavigateFunction => {
+    const location = useLocation()
+    const navigateBase = useNavigate()
+
+    const navigate: AppNavigateFunction = (
+        to: To | number,
+        options?: AppNavigateOptions,
+    ) => {
+        if (typeof to === 'number') {
+            if (options?.fallback && to < 0 && location.key === 'default') {
+                return navigateBase(options.fallback, {
+                    replace: true,
+                })
+            }
+
+            return navigateBase(to)
+        }
+
+        return navigateBase(to, options)
+    }
+
+    return navigate
+}
+
+export { useAppNavigate }
diff --git a/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts b/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts
index fda7ea85a..a7e44a3bc 100644
--- a/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts
+++ b/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts
@@ -36,13 +36,13 @@ export interface useFetchActiveReviewsProps {
 
 /**
  * Fetch active reviews
- * @param loadMyRoleInfos load my role ids
- * @param cancelLoadMyRoleInfos cancel load my role ids
+ * @param loadChallengeRelativeInfos load my role ids
+ * @param cancelLoadChallengeRelativeInfos cancel load my role ids
  * @returns active reviews
  */
 export function useFetchActiveReviews(
-    loadMyRoleInfos: (challengeId: string) => void,
-    cancelLoadMyRoleInfos: () => void,
+    loadChallengeRelativeInfos: (challengeId: string) => void,
+    cancelLoadChallengeRelativeInfos: () => void,
 ): useFetchActiveReviewsProps {
     const [totalPages, setTotalPages] = useState<number>(1)
     const [isLoading, setIsLoading] = useState(false)
@@ -106,13 +106,13 @@ export function useFetchActiveReviews(
     )
 
     useEffect(() => {
-        forEach(activeReviews, review => {
-            loadMyRoleInfos(review.id)
+        forEach(activeReviews, challengeInfo => {
+            loadChallengeRelativeInfos(challengeInfo.id)
         })
 
         return () => {
             // clear queue of currently loading my role ids after exit ui
-            cancelLoadMyRoleInfos()
+            cancelLoadChallengeRelativeInfos()
         }
     }, [activeReviews])
 
diff --git a/src/apps/review/src/lib/hooks/useFetchAppealQueue.ts b/src/apps/review/src/lib/hooks/useFetchAppealQueue.ts
new file mode 100644
index 000000000..e07cfbaff
--- /dev/null
+++ b/src/apps/review/src/lib/hooks/useFetchAppealQueue.ts
@@ -0,0 +1,110 @@
+/**
+ * Fetch review appeals
+ */
+import { useCallback, useRef, useState } from 'react'
+import { filter } from 'lodash'
+
+import {
+    MappingReviewAppeal,
+} from '../models'
+import { fetchAppealsWithReviewId } from '../services'
+
+export interface useFetchAppealQueueProps {
+    mappingReviewAppeal: MappingReviewAppeal // from review id to appeal info
+    loadResourceAppeal: (
+        reviewId: string,
+    ) => void
+    cancelLoadResourceAppeal: () => void
+}
+
+/**
+ * Fetch review appeals
+ * @returns review appeals
+ */
+export function useFetchAppealQueue(): useFetchAppealQueueProps {
+    const [mappingReviewAppeal, setMappingReviewAppeal]
+        = useState<MappingReviewAppeal>({})
+    const mappingReviewAppealRef = useRef<MappingReviewAppeal>({})
+    const idLoadQueue = useRef<string[]>([])
+    const isLoading = useRef<boolean>(false)
+    /**
+     * Check to fetch datas in queue
+     */
+    const fetchNextDataInQueue = useCallback(() => {
+        if (isLoading.current || !idLoadQueue.current.length) {
+            return
+        }
+
+        const nextId = idLoadQueue.current[0]
+        idLoadQueue.current = idLoadQueue.current.slice(1)
+        if (mappingReviewAppealRef.current[nextId]) {
+            fetchNextDataInQueue()
+            return
+        }
+
+        isLoading.current = true
+        const finish = (): void => {
+            isLoading.current = false
+            fetchNextDataInQueue()
+        }
+
+        const fetchDataFail = (): void => {
+            mappingReviewAppealRef.current[nextId] = {
+                finishAppeals: 0,
+                totalAppeals: 0,
+            }
+            setMappingReviewAppeal({
+                ...mappingReviewAppealRef.current,
+            })
+            finish()
+        }
+
+        // Fetch appeal datas
+        fetchAppealsWithReviewId(1, 100, nextId)
+            .then(res => {
+                mappingReviewAppealRef.current[nextId] = {
+                    finishAppeals: filter(res, item => !!item.appealResponse)
+                        .length,
+                    totalAppeals: res.length,
+                }
+                setMappingReviewAppeal({
+                    ...mappingReviewAppealRef.current,
+                })
+                finish()
+            })
+            .catch(fetchDataFail)
+    }, [])
+
+    /**
+     * Add new resource id to loading queue
+     */
+    const loadResourceAppeal = useCallback(
+        (
+            reviewId: string,
+        ) => {
+            if (
+                reviewId
+                && !mappingReviewAppealRef.current[
+                    reviewId
+                ]
+            ) {
+                idLoadQueue.current.push(reviewId)
+                fetchNextDataInQueue()
+            }
+        },
+        [fetchNextDataInQueue],
+    )
+
+    /**
+     * Cancel load infos queue
+     */
+    const cancelLoadResourceAppeal = useCallback(() => {
+        idLoadQueue.current = []
+    }, [])
+
+    return {
+        cancelLoadResourceAppeal,
+        loadResourceAppeal,
+        mappingReviewAppeal,
+    }
+}
diff --git a/src/apps/review/src/lib/hooks/useFetchChallengeRelativeDatas.ts b/src/apps/review/src/lib/hooks/useFetchChallengeRelativeDatas.ts
new file mode 100644
index 000000000..162b73e4f
--- /dev/null
+++ b/src/apps/review/src/lib/hooks/useFetchChallengeRelativeDatas.ts
@@ -0,0 +1,191 @@
+/**
+ * Fetch resource
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { find, reduce, toString } from 'lodash'
+
+import { TokenModel } from '~/libs/core'
+import { useOnComponentDidMount } from '~/apps/admin/src/lib/hooks'
+import { handleError } from '~/libs/shared'
+
+import {
+    fetchAllResourceRoles,
+    fetchChallengeResouces,
+} from '../services/resources.service'
+import { BackendResourceRole, BackendSubmission, ChallengeRealtiveInfosMapping } from '../models'
+import { fetchSubmissions } from '../services'
+
+export interface useFetchChallengeRelativeDatasProps {
+    challengeRelativeInfosMapping: ChallengeRealtiveInfosMapping // from challenge id to list of my role
+    isLoadingResourceRoles: boolean
+    resourceRoleMapping?: {
+        [key: string]: BackendResourceRole
+    }
+    resourceRoleReviewer?: BackendResourceRole,
+    resourceRoleSubmitter?: BackendResourceRole,
+    loadChallengeRelativeInfos: (challengeId: string) => void
+    cancelLoadChallengeRelativeInfos: () => void
+}
+
+/**
+ * Fetch resources
+ * @returns resources
+ */
+export function useFetchChallengeRelativeDatas(
+    loginUserInfo: TokenModel | undefined,
+): useFetchChallengeRelativeDatasProps {
+    const [challengeRelativeInfosMapping, setChallengeRelativeInfosMapping]
+        = useState<ChallengeRealtiveInfosMapping>({})
+    const [isLoadingResourceRoles, setIsLoadingResourceRoles] = useState(false)
+    const [resourceRoleMapping, setResourceRoleMapping] = useState<{
+        [key: string]: BackendResourceRole
+    }>()
+    const [resourceRoleSubmitter, setResourceRoleSubmitter] = useState<BackendResourceRole>()
+    const [resourceRoleReviewer, setResourceRoleReviewer] = useState<BackendResourceRole>()
+    const challengeRelativeInfosMappingRef = useRef<ChallengeRealtiveInfosMapping>({})
+    const challengeIdLoadQueue = useRef<string[]>([])
+    const isLoadingMyRole = useRef<boolean>(false)
+
+    useOnComponentDidMount(() => {
+        setIsLoadingResourceRoles(true)
+        // fetch all resource roles on init
+        fetchAllResourceRoles()
+            .then(results => {
+                setResourceRoleSubmitter(find(results.data, {
+                    name: 'Submitter',
+                }))
+                setResourceRoleReviewer(find(results.data, {
+                    name: 'Reviewer',
+                }))
+                setResourceRoleMapping(
+                    reduce(
+                        results.data,
+                        (mappingResult, resourceRole: BackendResourceRole) => ({
+                            ...mappingResult,
+                            [resourceRole.id]: resourceRole,
+                        }),
+                        {},
+                    ),
+                )
+                setIsLoadingResourceRoles(false)
+            })
+            .catch(e => {
+                handleError(e)
+                setIsLoadingResourceRoles(false)
+            })
+    })
+
+    /**
+     * Check to fetch my roles infos in queue
+     */
+    const fetchNextMyRoleInfosInQueue = useCallback(() => {
+        if (
+            isLoadingMyRole.current
+            || !challengeIdLoadQueue.current.length
+            || !loginUserInfo
+            || !resourceRoleReviewer
+        ) {
+            return
+        }
+
+        const nextChallengeId = challengeIdLoadQueue.current[0]
+        challengeIdLoadQueue.current = challengeIdLoadQueue.current.slice(1)
+        if (challengeRelativeInfosMappingRef.current[nextChallengeId]) {
+            fetchNextMyRoleInfosInQueue()
+            return
+        }
+
+        isLoadingMyRole.current = true
+        const finish = (): void => {
+            isLoadingMyRole.current = false
+            fetchNextMyRoleInfosInQueue()
+        }
+
+        const fetchDataFail = (): void => {
+            challengeRelativeInfosMappingRef.current[nextChallengeId] = {
+                myRoles: challengeRelativeInfosMappingRef.current[nextChallengeId]?.myRoles ?? [],
+                // eslint-disable-next-line unicorn/no-null
+                reviewProgress: challengeRelativeInfosMappingRef.current[nextChallengeId]?.reviewProgress ?? null,
+            }
+            setChallengeRelativeInfosMapping({
+                ...challengeRelativeInfosMappingRef.current,
+            })
+            finish()
+        }
+
+        // Fetch all member roles for special challenge
+        fetchChallengeResouces(nextChallengeId)
+            .then(res => {
+                const reviewers = res.data.filter(
+                    item => item.roleId === resourceRoleReviewer.id,
+                )
+                const myRoles = res.data.filter(
+                    item => item.memberId === toString(loginUserInfo.userId),
+                )
+                challengeRelativeInfosMappingRef.current[nextChallengeId] = {
+                    myRoles,
+                }
+                setChallengeRelativeInfosMapping({
+                    ...challengeRelativeInfosMappingRef.current,
+                })
+                fetchSubmissions(1, 1000, nextChallengeId)
+                    .then(resSubmissions => {
+                        const totalExpectedReviews = resSubmissions.length * reviewers.length
+                        const totalReviews = reduce(
+                            resSubmissions,
+                            (reviews: number, submission: BackendSubmission) => {
+                                const totalSubmissionReviews = Math.min(submission.review.length, reviewers.length)
+                                return reviews + totalSubmissionReviews
+                            },
+                            0,
+                        )
+                        // progress = (# of submitted review) / (# of submissions * # of reviewers) * 100%
+                        const reviewProgress = totalExpectedReviews ? ((totalReviews / totalExpectedReviews) * 100) : 0
+                        challengeRelativeInfosMappingRef.current[nextChallengeId] = {
+                            myRoles,
+                            reviewProgress,
+                        }
+                        setChallengeRelativeInfosMapping({
+                            ...challengeRelativeInfosMappingRef.current,
+                        })
+                        finish()
+                    })
+                    .catch(fetchDataFail)
+            })
+            .catch(fetchDataFail)
+    }, [loginUserInfo, resourceRoleReviewer])
+
+    /**
+     * Add new challenge id to loading queue
+     */
+    const loadChallengeRelativeInfos = useCallback(
+        (challengeId: string) => {
+            if (challengeId && !challengeRelativeInfosMappingRef.current[challengeId]) {
+                challengeIdLoadQueue.current.push(challengeId)
+                fetchNextMyRoleInfosInQueue()
+            }
+        },
+        [fetchNextMyRoleInfosInQueue],
+    )
+
+    /**
+     * Cancel load my role infos queue
+     */
+    const cancelLoadChallengeRelativeInfos = useCallback(() => {
+        challengeIdLoadQueue.current = []
+    }, [])
+
+    useEffect(() => {
+        fetchNextMyRoleInfosInQueue()
+    }, [loginUserInfo, resourceRoleReviewer])
+
+    return {
+        cancelLoadChallengeRelativeInfos,
+        challengeRelativeInfosMapping,
+        isLoadingResourceRoles,
+        loadChallengeRelativeInfos,
+        resourceRoleMapping,
+        resourceRoleReviewer,
+        resourceRoleSubmitter,
+    }
+}
diff --git a/src/apps/review/src/lib/hooks/useFetchChallengeSubmissions.ts b/src/apps/review/src/lib/hooks/useFetchChallengeSubmissions.ts
index cf4b5b518..da4e7721f 100644
--- a/src/apps/review/src/lib/hooks/useFetchChallengeSubmissions.ts
+++ b/src/apps/review/src/lib/hooks/useFetchChallengeSubmissions.ts
@@ -32,7 +32,7 @@ export function useFetchChallengeSubmissions(
     >(`reviewBaseUrl/submissions/${challengeId}`, {
         fetcher: async () => {
             const results = await fetchSubmissions(1, 50, challengeId ?? '')
-            return results.data
+            return results
         },
         isPaused: () => !challengeId,
     })
diff --git a/src/apps/review/src/lib/hooks/useFetchMockChallengeInfo.ts b/src/apps/review/src/lib/hooks/useFetchMockChallengeInfo.ts
deleted file mode 100644
index 5dd245c89..000000000
--- a/src/apps/review/src/lib/hooks/useFetchMockChallengeInfo.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Fetch mock challenge info
- */
-import { useCallback, useEffect, useState } from 'react'
-
-import {
-    ChallengeInfo,
-    SubmissionInfo,
-} from '../models'
-import {
-    fetchChallengeInfo,
-    fetchMockSubmissions,
-    mockFetchChallengeInfoById,
-} from '../services'
-
-export interface useFetchMockChallengeInfoProps {
-    challengeInfo: ChallengeInfo | undefined
-    submissions: SubmissionInfo[]
-}
-
-/**
- * Fetch mock challenge info
- * @returns challenge info
- */
-export function useFetchMockChallengeInfo(id?: string, role?: string): useFetchMockChallengeInfoProps {
-    const [challengeInfo, setChallengeInfo] = useState<ChallengeInfo>()
-    const [submissions, setSubmissions] = useState<SubmissionInfo[]>([])
-    const loadChallengeInfo = useCallback(() => {
-        if (id) {
-            mockFetchChallengeInfoById(id)
-                .then(result => {
-                    setChallengeInfo(result)
-                })
-        } else {
-            fetchChallengeInfo()
-                .then(result => {
-                    setChallengeInfo(result)
-                })
-        }
-    }, [id])
-
-    const loadSubmissions = useCallback(() => {
-        fetchMockSubmissions(role)
-            .then(results => {
-                setSubmissions(results)
-            })
-    }, [role])
-
-    useEffect(() => {
-        loadChallengeInfo()
-        loadSubmissions()
-    }, [role])
-
-    return {
-        challengeInfo,
-        submissions,
-    }
-}
diff --git a/src/apps/review/src/lib/hooks/useFetchResource.ts b/src/apps/review/src/lib/hooks/useFetchResource.ts
deleted file mode 100644
index 3f85324ce..000000000
--- a/src/apps/review/src/lib/hooks/useFetchResource.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * Fetch resource
- */
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { find, reduce, toString } from 'lodash'
-
-import { TokenModel } from '~/libs/core'
-import { useOnComponentDidMount } from '~/apps/admin/src/lib/hooks'
-import { handleError } from '~/libs/shared'
-
-import {
-    fetchAllMemberRoles,
-    fetchAllResourceRoles,
-} from '../services/resources.service'
-import { BackendResourceRole, MyRoleInfosMappingType } from '../models'
-
-export interface useFetchResourceProps {
-    myRoleInfosMapping: MyRoleInfosMappingType // from challenge id to list of my role
-    isLoadingResourceRoles: boolean
-    resourceRoleMapping?: {
-        [key: string]: BackendResourceRole
-    }
-    resourceRoleReviewer?: BackendResourceRole,
-    resourceRoleSubmitter?: BackendResourceRole,
-    loadMyRoleInfos: (challengeId: string) => void
-    cancelLoadMyRoleInfos: () => void
-}
-
-/**
- * Fetch resources
- * @returns resources
- */
-export function useFetchResource(
-    loginUserInfo: TokenModel | undefined,
-): useFetchResourceProps {
-    const [myRoleInfosMapping, setMyRoleInfosMapping]
-        = useState<MyRoleInfosMappingType>({})
-    const [isLoadingResourceRoles, setIsLoadingResourceRoles] = useState(false)
-    const [resourceRoleMapping, setResourceRoleMapping] = useState<{
-        [key: string]: BackendResourceRole
-    }>()
-    const [resourceRoleSubmitter, setResourceRoleSubmitter] = useState<BackendResourceRole>()
-    const [resourceRoleReviewer, setResourceRoleReviewer] = useState<BackendResourceRole>()
-    const myRoleInfosMappingRef = useRef<MyRoleInfosMappingType>({})
-    const myRoleInfosLoadQueue = useRef<string[]>([])
-    const isLoadingMyRole = useRef<boolean>(false)
-
-    useOnComponentDidMount(() => {
-        setIsLoadingResourceRoles(true)
-        // fetch all resource roles on init
-        fetchAllResourceRoles()
-            .then(results => {
-                setResourceRoleSubmitter(find(results.data, {
-                    name: 'Submitter',
-                }))
-                setResourceRoleReviewer(find(results.data, {
-                    name: 'Reviewer',
-                }))
-                setResourceRoleMapping(
-                    reduce(
-                        results.data,
-                        (mappingResult, resourceRole: BackendResourceRole) => ({
-                            ...mappingResult,
-                            [resourceRole.id]: resourceRole,
-                        }),
-                        {},
-                    ),
-                )
-                setIsLoadingResourceRoles(false)
-            })
-            .catch(e => {
-                handleError(e)
-                setIsLoadingResourceRoles(false)
-            })
-    })
-
-    /**
-     * Check to fetch my roles infos in queue
-     */
-    const fetchNextMyRoleInfosInQueue = useCallback(() => {
-        if (
-            isLoadingMyRole.current
-            || !myRoleInfosLoadQueue.current.length
-            || !loginUserInfo
-        ) {
-            return
-        }
-
-        const nextMyRoleInfosId = myRoleInfosLoadQueue.current[0]
-        myRoleInfosLoadQueue.current = myRoleInfosLoadQueue.current.slice(1)
-        if (myRoleInfosMappingRef.current[nextMyRoleInfosId]) {
-            fetchNextMyRoleInfosInQueue()
-            return
-        }
-
-        isLoadingMyRole.current = true
-        // Fetch all member roles for special challenge
-        fetchAllMemberRoles(nextMyRoleInfosId, toString(loginUserInfo.userId))
-            .then(res => {
-                myRoleInfosMappingRef.current[nextMyRoleInfosId]
-                    = res.data.filter(
-                        item => item.memberId === toString(loginUserInfo.userId),
-                    )
-                setMyRoleInfosMapping({
-                    ...myRoleInfosMappingRef.current,
-                })
-            })
-            .catch(() => {
-                myRoleInfosMappingRef.current[nextMyRoleInfosId] = []
-                setMyRoleInfosMapping({
-                    ...myRoleInfosMappingRef.current,
-                })
-            })
-            .finally(() => {
-                isLoadingMyRole.current = false
-                fetchNextMyRoleInfosInQueue()
-            })
-    }, [loginUserInfo])
-
-    /**
-     * Add new challenge id to loading queue
-     */
-    const loadMyRoleInfos = useCallback(
-        (challengeId: string) => {
-            if (challengeId && !myRoleInfosMappingRef.current[challengeId]) {
-                myRoleInfosLoadQueue.current.push(challengeId)
-                fetchNextMyRoleInfosInQueue()
-            }
-        },
-        [fetchNextMyRoleInfosInQueue, loginUserInfo],
-    )
-
-    /**
-     * Cancel load my role infos queue
-     */
-    const cancelLoadMyRoleInfos = useCallback(() => {
-        myRoleInfosLoadQueue.current = []
-    }, [])
-
-    useEffect(() => {
-        fetchNextMyRoleInfosInQueue()
-    }, [loginUserInfo])
-
-    return {
-        cancelLoadMyRoleInfos,
-        isLoadingResourceRoles,
-        loadMyRoleInfos,
-        myRoleInfosMapping,
-        resourceRoleMapping,
-        resourceRoleReviewer,
-        resourceRoleSubmitter,
-    }
-}
diff --git a/src/apps/review/src/lib/hooks/useFetchReviews.ts b/src/apps/review/src/lib/hooks/useFetchReviews.ts
deleted file mode 100644
index 3b7965db4..000000000
--- a/src/apps/review/src/lib/hooks/useFetchReviews.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Fetch review
- */
-
-import { useCallback, useEffect, useState } from 'react'
-
-import { AppealInfo, ReviewInfo, ScorecardInfo } from '../models'
-import { fetchAppeals, fetchReviewInfo, fetchScorecards } from '../services'
-
-export interface useFetchReviewsProps {
-    scorecardInfo: ScorecardInfo | undefined
-    reviewInfo: ReviewInfo | undefined
-    appeals: AppealInfo[]
-    setReviewInfo: (reviewInfo: ReviewInfo) => void
-}
-
-/**
- * Fetch review info
- * @param isEdit is in edit mode
- * @returns review info
- */
-export function useFetchReviews(isEdit: boolean): useFetchReviewsProps {
-    const [scorecardInfo, setScorecardInfo] = useState<ScorecardInfo>()
-    const [reviewInfo, setReviewInfo] = useState<ReviewInfo>()
-    const [appeals, setAppeals] = useState<AppealInfo[]>([])
-    const loadScorecard = useCallback(() => {
-        fetchScorecards()
-            .then(result => {
-                setScorecardInfo(result)
-            })
-    }, [])
-    const loadAppeals = useCallback(() => {
-        fetchAppeals()
-            .then(results => {
-                setAppeals(results)
-            })
-    }, [])
-    const loadReviewInfo = useCallback(() => {
-        fetchReviewInfo(isEdit)
-            .then(result => {
-                setReviewInfo(result)
-            })
-    }, [isEdit])
-
-    useEffect(() => {
-        loadScorecard()
-        loadAppeals()
-        loadReviewInfo()
-    }, [loadScorecard, loadAppeals, loadReviewInfo])
-
-    return {
-        appeals,
-        reviewInfo,
-        scorecardInfo,
-        setReviewInfo,
-    }
-}
diff --git a/src/apps/review/src/lib/hooks/useFetchScreeningReview.ts b/src/apps/review/src/lib/hooks/useFetchScreeningReview.ts
index 1007deb90..620acf2e7 100644
--- a/src/apps/review/src/lib/hooks/useFetchScreeningReview.ts
+++ b/src/apps/review/src/lib/hooks/useFetchScreeningReview.ts
@@ -1,22 +1,33 @@
-import {
-    useContext,
-    useMemo,
-} from 'react'
-import { every, filter } from 'lodash'
+import { useContext, useEffect, useMemo } from 'react'
+import { every, filter, forEach } from 'lodash'
 
 import {
     BackendResource,
+    BackendSubmission,
     ChallengeDetailContextModel,
     convertBackendSubmissionToScreening,
     convertBackendSubmissionToSubmissionInfo,
+    createEmptyBackendReview,
+    MappingReviewAppeal,
+    ReviewAppContextModel,
     Screening,
     SubmissionInfo,
 } from '../models'
-import { ChallengeDetailContext } from '../contexts'
+import { ChallengeDetailContext, ReviewAppContext } from '../contexts'
+import { REVIEWER } from '../../config/index.config'
 
-import { useFetchChallengeSubmissions, useFetchChallengeSubmissionsProps } from './useFetchChallengeSubmissions'
+import {
+    useFetchChallengeSubmissions,
+    useFetchChallengeSubmissionsProps,
+} from './useFetchChallengeSubmissions'
+import {
+    useFetchAppealQueue,
+    useFetchAppealQueueProps,
+} from './useFetchAppealQueue'
+import { useRole, useRoleProps } from './useRole'
 
 export interface useFetchScreeningReviewProps {
+    mappingReviewAppeal: MappingReviewAppeal // from review id to appeal info
     // screening data
     screening: Screening[]
     // review data
@@ -30,39 +41,112 @@ export interface useFetchScreeningReviewProps {
  * @returns challenge screening and review data
  */
 export function useFetchScreeningReview(): useFetchScreeningReviewProps {
+    const { actionChallengeRole }: useRoleProps = useRole()
+
+    const {
+        loginUserInfo,
+    }: ReviewAppContextModel = useContext(ReviewAppContext)
+
     // get challenge info from challenge detail context
     const {
         challengeId,
         resourceMemberIdMapping,
+        reviewers: challengeReviewers,
     }: ChallengeDetailContextModel = useContext(ChallengeDetailContext)
 
     // fetch challenge submissions
-    const { challengeSubmissions, isLoading }: useFetchChallengeSubmissionsProps
+    const {
+        challengeSubmissions,
+        isLoading,
+    }: useFetchChallengeSubmissionsProps
         = useFetchChallengeSubmissions(challengeId)
 
-    // get screening data from challenge submissions
-    const screening = useMemo(() => challengeSubmissions.map(item => {
-        const result = convertBackendSubmissionToScreening(item)
-        return {
-            ...result,
-            screener: result.screenerId
-                ? resourceMemberIdMapping[result.screenerId]
-                : ({
-                    handleColor: '#2a2a2a',
-                    memberHandle: 'Not assigned',
-                } as BackendResource),
-            userInfo: resourceMemberIdMapping[result.memberId],
+    // Get list of reviewer ids
+    const reviewerIds = useMemo(() => {
+        let results: string[] = []
+
+        if (challengeReviewers && challengeReviewers.length) {
+            results = (
+                actionChallengeRole === REVIEWER
+                    ? filter(
+                        challengeReviewers,
+                        reviewer => reviewer.memberId === `${loginUserInfo?.userId}`,
+                    )
+                    : challengeReviewers
+            ).map(reviewer => reviewer.id)
         }
-    }), [challengeSubmissions, resourceMemberIdMapping])
 
-    // get review data from challenge submissions
-    const review = useMemo(() => challengeSubmissions.map(item => {
-        const result = convertBackendSubmissionToSubmissionInfo(item)
-        return {
-            ...result,
-            userInfo: resourceMemberIdMapping[result.memberId],
+        if (!results.length) {
+            forEach(challengeSubmissions, challengeSubmission => {
+                forEach(challengeSubmission.review, review => {
+                    results.push(review.resourceId)
+                })
+            })
         }
-    }), [challengeSubmissions, resourceMemberIdMapping])
+
+        return results
+
+    }, [challengeReviewers, challengeSubmissions, actionChallengeRole, loginUserInfo])
+
+    // fetch appeal response
+    const {
+        mappingReviewAppeal,
+        loadResourceAppeal,
+        cancelLoadResourceAppeal,
+    }: useFetchAppealQueueProps = useFetchAppealQueue()
+
+    // get screening data from challenge submissions
+    const screening = useMemo(
+        () => challengeSubmissions.map(item => {
+            const result = convertBackendSubmissionToScreening(item)
+            return {
+                ...result,
+                screener: result.screenerId
+                    ? resourceMemberIdMapping[result.screenerId]
+                    : ({
+                        handleColor: '#2a2a2a',
+                        memberHandle: 'Not assigned',
+                    } as BackendResource),
+                userInfo: resourceMemberIdMapping[result.memberId],
+            }
+        }),
+        [challengeSubmissions, resourceMemberIdMapping],
+    )
+
+    // get review data from challenge submissions
+    const review = useMemo(() => {
+        const validReviews: BackendSubmission[] = []
+        forEach(challengeSubmissions, challengeSubmission => {
+            forEach(reviewerIds, reviewerId => {
+                const matchingReview
+                    = challengeSubmission.reviewResourceMapping?.[reviewerId]
+                if (matchingReview) {
+                    validReviews.push({
+                        ...challengeSubmission,
+                        review: [matchingReview],
+                    })
+                    loadResourceAppeal(matchingReview.id)
+                } else {
+                    validReviews.push({
+                        ...challengeSubmission,
+                        review: [
+                            {
+                                ...createEmptyBackendReview(),
+                                resourceId: reviewerId,
+                            },
+                        ],
+                    })
+                }
+            })
+        })
+        return validReviews.map(item => {
+            const result = convertBackendSubmissionToSubmissionInfo(item)
+            return {
+                ...result,
+                userInfo: resourceMemberIdMapping[result.memberId],
+            }
+        })
+    }, [challengeSubmissions, resourceMemberIdMapping, reviewerIds])
 
     // get review progress from challenge review
     const reviewProgress = useMemo(() => {
@@ -83,8 +167,13 @@ export function useFetchScreeningReview(): useFetchScreeningReviewProps {
         )
     }, [review])
 
+    useEffect(() => () => {
+        cancelLoadResourceAppeal()
+    }, [])
+
     return {
         isLoading,
+        mappingReviewAppeal,
         review,
         reviewProgress,
         screening,
diff --git a/src/apps/review/src/lib/hooks/useFetchSubmissionReviews.ts b/src/apps/review/src/lib/hooks/useFetchSubmissionReviews.ts
new file mode 100644
index 000000000..54a20fbd9
--- /dev/null
+++ b/src/apps/review/src/lib/hooks/useFetchSubmissionReviews.ts
@@ -0,0 +1,649 @@
+/**
+ * Fetch reviews of submission
+ */
+
+import {
+    Dispatch,
+    SetStateAction,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import { every, filter, find, forEach, map } from 'lodash'
+import { toast } from 'react-toastify'
+import { useParams } from 'react-router-dom'
+import useSWR, { SWRResponse } from 'swr'
+
+import { handleError } from '~/apps/admin/src/lib/utils'
+
+import {
+    AppealInfo,
+    BackendAppealResponse,
+    BackendReview,
+    BackendReviewItem,
+    BackendSubmission,
+    ChallengeDetailContextModel,
+    convertBackendAppeal,
+    convertBackendReviewToReviewInfo,
+    createEmptyReviewInfoFromScorecard,
+    FormReviews,
+    MappingAppeal,
+    ReviewInfo,
+    ReviewItemInfo,
+    ScorecardInfo,
+    ScorecardQuestion,
+} from '../models'
+import {
+    createAppeal,
+    createAppealResponse,
+    createReview,
+    deleteAppeal,
+    fetchAppeals,
+    fetchReviews,
+    fetchScorecard,
+    fetchSubmission,
+    updateAppeal,
+    updateAppealResponse,
+    updateReview,
+    updateReviewItem,
+} from '../services'
+import { ChallengeDetailContext } from '../contexts'
+import { BackendReviewItemCommentType } from '../models/BackendReviewItemComment.model'
+import { ReviewItemComment } from '../models/ReviewItemComment.model'
+import { SUBMITTER } from '../../config/index.config'
+import { isReviewPhase } from '../utils'
+
+import { useRole, useRoleProps } from './useRole'
+
+export interface useFetchSubmissionReviewsProps {
+    mappingAppeals: MappingAppeal
+    scorecardInfo?: ScorecardInfo
+    submissionInfo?: BackendSubmission
+    scorecardId: string
+    isLoading: boolean
+    reviewInfo?: ReviewInfo
+    setReviewInfo: Dispatch<SetStateAction<ReviewInfo | undefined>>
+    isSavingReview: boolean
+    isSavingAppeal: boolean
+    isSavingAppealResponse: boolean
+    isSavingManagerComment: boolean
+    saveReviewInfo: (
+        updatedReview: FormReviews | undefined,
+        fullReview: FormReviews | undefined,
+        committed: boolean,
+        totalScore: number,
+        success: () => void,
+    ) => void
+    addAppeal: (
+        content: string,
+        commentItem: ReviewItemComment,
+        success: () => void,
+    ) => void
+    doDeleteAppeal: (
+        appealInfo: AppealInfo | undefined,
+        success: () => void,
+    ) => void
+    addAppealResponse: (
+        content: string,
+        updatedResponse: string,
+        appeal: AppealInfo,
+        reviewItem: ReviewItemInfo,
+        success: () => void,
+    ) => void
+    addManagerComment: (
+        content: string,
+        updatedResponse: string,
+        reviewItem: ReviewItemInfo,
+        success: () => void,
+    ) => void
+}
+
+/**
+ * Fetch reviews of submission
+ * @returns reviews info
+ */
+export function useFetchSubmissionReviews(): useFetchSubmissionReviewsProps {
+    const [isSavingReview, setIsSavingReview] = useState(false)
+    const [isSavingAppeal, setIsSavingAppeal] = useState(false)
+    const [isSavingAppealResponse, setIsSavingAppealResponse] = useState(false)
+    const [isSavingManagerComment, setIsSavingManagerComment] = useState(false)
+    const { actionChallengeRole }: useRoleProps = useRole()
+    const {
+        submissionId = '',
+        resourceId = '',
+    }: {
+        submissionId?: string
+        resourceId?: string
+    } = useParams<{
+        submissionId: string
+        resourceId: string
+    }>()
+
+    const { challengeInfo }: ChallengeDetailContextModel = useContext(
+        ChallengeDetailContext,
+    )
+
+    const currentPhase = useMemo(
+        () => challengeInfo?.currentPhaseObject ?? challengeInfo?.phases[0],
+        [challengeInfo],
+    )
+    const [updatedReviewInfo, setUpdatedReviewInfo] = useState<ReviewInfo>()
+
+    // Use swr hooks for reviews info fetching
+    const {
+        data: reviews,
+        error: fetchReviewsError,
+        isValidating: isLoadingReviews,
+    }: SWRResponse<BackendReview[], Error> = useSWR<BackendReview[], Error>(
+        `EnvironmentConfig.API.V6/reviews/challengeId/${challengeInfo?.id}/submissionId/${submissionId}`,
+        {
+            fetcher: () => fetchReviews(1, 100, `${challengeInfo?.id}`, submissionId),
+            isPaused: () => !challengeInfo
+                || !submissionId
+                || (isReviewPhase(challengeInfo)
+                && actionChallengeRole === SUBMITTER),
+        },
+    )
+
+    // Use swr hooks for appeals info fetching
+    const mappingAppealsRef = useRef<MappingAppeal>({})
+    const [mappingAppeals, setMappingAppeals] = useState<MappingAppeal>({})
+    const {
+        data: appeals,
+        error: fetchAppealsError,
+    }: SWRResponse<AppealInfo[], Error> = useSWR<AppealInfo[], Error>(
+        `EnvironmentConfig.API.V6/appeals/resourceId/${resourceId}`,
+        {
+            fetcher: () => fetchAppeals(1, 100, resourceId),
+            isPaused: () => !resourceId,
+        },
+    )
+
+    useEffect(() => {
+        const result: { [key: string]: AppealInfo } = {}
+        forEach(appeals, item => {
+            result[item.reviewItemCommentId] = item
+        })
+        mappingAppealsRef.current = result
+        setMappingAppeals(result)
+    }, [appeals])
+
+    /**
+     * Get scorecard id from reviews and challenge info
+     */
+    const scorecardId = useMemo(() => {
+        if (reviews && reviews[0]) {
+            return reviews[0].scorecardId
+        }
+
+        if (!challengeInfo) {
+            return ''
+        }
+
+        if (challengeInfo.reviewers && challengeInfo.reviewers[0]) {
+            return challengeInfo.reviewers[0].scorecardId
+        }
+
+        const reviewPhase = find(challengeInfo.phases, { name: 'Review' })
+        const scoreCardInfo = find(reviewPhase?.constraints ?? [], {
+            name: 'Scorecard',
+        })
+        return `${scoreCardInfo?.value ?? ''}`
+    }, [challengeInfo, reviews])
+
+    // Use swr hooks for scorecard info fetching
+    const {
+        data: scorecardInfo,
+        error: fetchScorecardError,
+        isValidating: isLoadingScorecard,
+    }: SWRResponse<ScorecardInfo, Error> = useSWR<ScorecardInfo, Error>(
+        `EnvironmentConfig.API.V6/scorecards/${scorecardId}`,
+        {
+            fetcher: () => fetchScorecard(scorecardId),
+            isPaused: () => !scorecardId,
+        },
+    )
+
+    // Use swr hooks for submission info fetching
+    const {
+        data: submissionInfo,
+        error: fetchSubmissionError,
+        isValidating: isLoadingSubmission,
+    }: SWRResponse<BackendSubmission, Error> = useSWR<BackendSubmission, Error>(
+        `EnvironmentConfig.API.V6/submissions/${submissionId}`,
+        {
+            fetcher: () => fetchSubmission(submissionId),
+            isPaused: () => !submissionId,
+        },
+    )
+
+    /**
+     * Get review info from backend and scorecard info
+     */
+    const reviewInfo = useMemo(() => {
+        let backendReview: BackendReview | undefined
+        if (!scorecardInfo) {
+            return undefined
+        }
+
+        const mappingScorecardQuestion: { [questionId: string]: boolean } = {}
+        forEach(scorecardInfo.scorecardGroups, group => {
+            forEach(group.sections, section => {
+                forEach(section.questions, (question: ScorecardQuestion) => {
+                    mappingScorecardQuestion[question.id ?? ''] = true
+                })
+            })
+        })
+
+        if (resourceId && reviews) {
+            backendReview = find(reviews, review => (
+                review.resourceId === resourceId
+                && review.submissionId === submissionId
+                && review.reviewItems
+                && review.reviewItems.length > 0
+                && every(
+                    review.reviewItems,
+                    item => mappingScorecardQuestion[item.scorecardQuestionId],
+                )
+            )) as BackendReview
+        }
+
+        if (backendReview) {
+            return convertBackendReviewToReviewInfo(backendReview)
+        }
+
+        if (resourceId) {
+            return createEmptyReviewInfoFromScorecard(scorecardInfo, resourceId)
+        }
+
+        return undefined
+    }, [reviews, resourceId, submissionId, scorecardInfo])
+
+    useEffect(() => {
+        setUpdatedReviewInfo(reviewInfo)
+    }, [reviewInfo])
+
+    // Show backend error when fetching reviews info
+    useEffect(() => {
+        if (fetchReviewsError) {
+            handleError(fetchReviewsError)
+        }
+    }, [fetchReviewsError])
+
+    // Show backend error when fetching scorecard info
+    useEffect(() => {
+        if (fetchScorecardError) {
+            handleError(fetchScorecardError)
+        }
+    }, [fetchScorecardError])
+
+    // Show backend error when fetching submission info
+    useEffect(() => {
+        if (fetchSubmissionError) {
+            handleError(fetchSubmissionError)
+        }
+    }, [fetchSubmissionError])
+
+    // Show backend error when fetching appeal info
+    useEffect(() => {
+        if (fetchAppealsError) {
+            handleError(fetchAppealsError)
+        }
+    }, [fetchAppealsError])
+
+    /**
+     * Save review info
+     */
+    const saveReviewInfo = useCallback(
+        (
+            updatedReview: FormReviews | undefined,
+            fullReview: FormReviews | undefined,
+            committed: boolean,
+            totalScore: number,
+            success: () => void,
+        ) => {
+            let listRequest: Promise<BackendReview | BackendReviewItem>[] = []
+            if (updatedReviewInfo) {
+                if (updatedReviewInfo.id) {
+                    listRequest.push(
+                        updateReview(updatedReviewInfo.id, {
+                            committed,
+                            finalScore: 0,
+                            initialScore: totalScore,
+                            reviewDate: new Date()
+                                .toISOString(),
+                            status: committed ? 'COMPLETED' : 'DRAFT',
+                        }),
+                    )
+
+                    const updateReviewItemRequests = (
+                        updatedReview?.reviews ?? []
+                    ).map(reviewItem => updateReviewItem(reviewItem.id, {
+                        initialAnswer: reviewItem.initialAnswer || ' ',
+                        reviewItemComments: reviewItem.comments.map(comment => ({
+                            content: comment.content || ' ',
+                            sortOrder: comment.index,
+                            type:
+                                (comment.type as BackendReviewItemCommentType)
+                                || 'COMMENT',
+                        })),
+                        scorecardQuestionId: reviewItem.scorecardQuestionId,
+                    }))
+                    listRequest = [...listRequest, ...updateReviewItemRequests]
+                } else if (fullReview) {
+                    listRequest.push(
+                        new Promise<BackendReview>((resolve, reject) => {
+                            createReview({
+                                committed,
+                                finalScore: 0,
+                                initialScore: totalScore,
+                                phaseId: currentPhase?.id ?? '',
+                                resourceId,
+                                reviewDate: new Date()
+                                    .toISOString(),
+                                reviewItems: (fullReview.reviews ?? []).map(
+                                    reviewItem => ({
+                                        initialAnswer:
+                                            reviewItem.initialAnswer ?? ' ',
+                                        reviewItemComments: filter(
+                                            reviewItem.comments,
+                                            comment => !!comment.content,
+                                        )
+                                            .map(comment => ({
+                                                content: comment.content ?? ' ',
+                                                sortOrder: comment.index,
+                                                type:
+                                                    (comment.type as BackendReviewItemCommentType)
+                                                    ?? 'COMMENT',
+                                            })),
+                                        scorecardQuestionId:
+                                            reviewItem.scorecardQuestionId,
+
+                                    }),
+                                ),
+                                scorecardId,
+                                status: 'DRAFT',
+                                submissionId,
+                                typeId: challengeInfo?.typeId ?? '',
+                            })
+                                .then(rs => {
+                                    setUpdatedReviewInfo(
+                                        convertBackendReviewToReviewInfo(rs),
+                                    )
+                                    resolve(rs)
+                                })
+                                .catch(reject)
+                        }),
+                    )
+                }
+            }
+
+            if (listRequest.length) {
+                setIsSavingReview(true)
+                Promise.all(listRequest)
+
+                    .then(() => {
+                        setIsSavingReview(false)
+                        success()
+                    })
+                    .catch(e => {
+                        setIsSavingReview(false)
+                        handleError(e)
+                    })
+            } else {
+                success()
+            }
+        },
+        [
+            updatedReviewInfo,
+            setUpdatedReviewInfo,
+            reviewInfo,
+            resourceId,
+            submissionId,
+            currentPhase,
+            scorecardId,
+            challengeInfo,
+        ],
+    )
+
+    /**
+     * Add appeal
+     */
+    const addAppeal = useCallback(
+        (
+            content: string,
+            commentItem: ReviewItemComment,
+            success: () => void,
+        ) => {
+            const existingAppeal = mappingAppealsRef.current[commentItem.id]
+            const updateInfo = {
+                content,
+                resourceId,
+                reviewItemCommentId: commentItem.id,
+            }
+            const request = existingAppeal
+                ? updateAppeal(existingAppeal.id, updateInfo)
+                : createAppeal(updateInfo)
+
+            setIsSavingAppeal(true)
+            request
+                .then(rs => {
+                    setIsSavingAppeal(false)
+                    mappingAppealsRef.current = {
+                        ...mappingAppealsRef.current,
+                        [commentItem.id]: convertBackendAppeal(rs),
+                    }
+                    setMappingAppeals(mappingAppealsRef.current)
+
+                    toast.success('Appeal saved successfully!')
+                    success()
+                })
+                .catch(e => {
+                    setIsSavingAppeal(false)
+                    handleError(e)
+                })
+        },
+        [resourceId],
+    )
+
+    /**
+     * Delete appeal
+     */
+    const doDeleteAppeal = useCallback(
+        (appealInfo: AppealInfo | undefined, success: () => void) => {
+            if (appealInfo) {
+                setIsSavingAppeal(true)
+                deleteAppeal(appealInfo.id)
+                    .then(() => {
+                        setIsSavingAppeal(false)
+                        mappingAppealsRef.current = {
+                            ...mappingAppealsRef.current,
+                            [appealInfo.reviewItemCommentId]: undefined,
+                        }
+                        setMappingAppeals(mappingAppealsRef.current)
+
+                        toast.success('Appeal deleted successfully!')
+                        success()
+                    })
+                    .catch(e => {
+                        setIsSavingAppeal(false)
+                        handleError(e)
+                    })
+            }
+        },
+        [],
+    )
+
+    /**
+     * Add appeal response
+     */
+    const addAppealResponse = useCallback(
+        (
+            content: string,
+            updatedResponse: string,
+            appeal: AppealInfo,
+            reviewItem: ReviewItemInfo,
+            success: () => void,
+        ) => {
+            const listRequest: Promise<
+                BackendReviewItem | BackendAppealResponse
+            >[] = []
+            if (updatedResponse) {
+                listRequest.push(
+                    new Promise<BackendReviewItem>((resolve, reject) => {
+                        updateReviewItem(reviewItem.id, {
+                            finalAnswer: updatedResponse,
+                            initialAnswer: reviewItem.initialAnswer ?? '',
+                            scorecardQuestionId: reviewItem.scorecardQuestionId,
+                        })
+                            .then(rs => {
+                                const result = map(
+                                    reviewInfo?.reviewItems ?? [],
+                                    review => {
+                                        if (review.id === reviewItem.id) {
+                                            return {
+                                                ...review,
+                                                finalAnswer: updatedResponse,
+                                            }
+                                        }
+
+                                        return review
+                                    },
+                                )
+                                if (updatedReviewInfo) {
+                                    setUpdatedReviewInfo({
+                                        ...updatedReviewInfo,
+                                        reviewItems: result,
+                                    })
+                                }
+
+                                resolve(rs)
+                            })
+                            .catch(reject)
+                    }),
+                )
+            }
+
+            listRequest.push(
+                new Promise<BackendAppealResponse>((resolve, reject) => {
+                    const updateData = {
+                        appealId: appeal.id,
+                        content,
+                        resourceId,
+                        success: !!updatedResponse,
+                    }
+                    const updateRequest = appeal.appealResponse
+                        ? updateAppealResponse(
+                            appeal.appealResponse.id,
+                            updateData,
+                        )
+                        : createAppealResponse(appeal.id, updateData)
+
+                    updateRequest
+                        .then(rs => {
+                            mappingAppealsRef.current = {
+                                ...mappingAppealsRef.current,
+                                [appeal.reviewItemCommentId]: {
+                                    ...mappingAppealsRef.current[
+                                        appeal.reviewItemCommentId
+                                    ],
+                                    appealResponse: rs,
+                                } as AppealInfo,
+                            }
+                            setMappingAppeals(mappingAppealsRef.current)
+                            resolve(rs)
+                        })
+                        .catch(reject)
+                }),
+            )
+
+            setIsSavingAppealResponse(true)
+            Promise.all(listRequest)
+                .then(() => {
+                    setIsSavingAppealResponse(false)
+                    toast.success('Appeal response saved successfully!')
+                    success()
+                })
+                .catch(e => {
+                    setIsSavingAppealResponse(false)
+                    handleError(e)
+                })
+        },
+        [resourceId, reviewInfo, setUpdatedReviewInfo, updatedReviewInfo],
+    )
+
+    /**
+     * Add manager comment
+     */
+    const addManagerComment = useCallback(
+        (
+            content: string,
+            updatedResponse: string,
+            reviewItem: ReviewItemInfo,
+            success: () => void,
+        ) => {
+            setIsSavingManagerComment(true)
+            updateReviewItem(reviewItem.id, {
+                finalAnswer: updatedResponse,
+                initialAnswer: reviewItem.initialAnswer ?? '',
+                managerComment: content,
+                scorecardQuestionId: reviewItem.scorecardQuestionId,
+            })
+                .then(() => {
+                    const result = map(
+                        reviewInfo?.reviewItems ?? [],
+                        review => {
+                            if (review.id === reviewItem.id) {
+                                return {
+                                    ...review,
+                                    finalAnswer: updatedResponse,
+                                    managerComment: content,
+                                }
+                            }
+
+                            return review
+                        },
+                    )
+                    if (updatedReviewInfo) {
+                        setUpdatedReviewInfo({
+                            ...updatedReviewInfo,
+                            reviewItems: result,
+                        })
+                    }
+
+                    setIsSavingManagerComment(false)
+                    toast.success('Manager comment saved successfully!')
+                    success()
+                })
+                .catch(e => {
+                    setIsSavingManagerComment(false)
+                    handleError(e)
+                })
+        },
+        [reviewInfo, setUpdatedReviewInfo, updatedReviewInfo],
+    )
+
+    return {
+        addAppeal,
+        addAppealResponse,
+        addManagerComment,
+        doDeleteAppeal,
+        isLoading:
+            isLoadingReviews || isLoadingScorecard || isLoadingSubmission,
+        isSavingAppeal,
+        isSavingAppealResponse,
+        isSavingManagerComment,
+        isSavingReview,
+        mappingAppeals,
+        reviewInfo: updatedReviewInfo,
+        saveReviewInfo,
+        scorecardId,
+        scorecardInfo,
+        setReviewInfo: setUpdatedReviewInfo,
+        submissionInfo,
+
+    }
+}
diff --git a/src/apps/review/src/lib/hooks/useIsEditReview.ts b/src/apps/review/src/lib/hooks/useIsEditReview.ts
new file mode 100644
index 000000000..555b7a750
--- /dev/null
+++ b/src/apps/review/src/lib/hooks/useIsEditReview.ts
@@ -0,0 +1,43 @@
+import { useContext, useMemo } from 'react'
+
+import { REVIEWER } from '../../config/index.config'
+import { ChallengeDetailContextModel } from '../models'
+import { ChallengeDetailContext } from '../contexts'
+import { isReviewPhase } from '../utils'
+
+import { useRole, useRoleProps } from './useRole'
+
+/**
+ * Manage readonly/edit mode in review
+ */
+export interface useIsEditReviewProps {
+    isEdit: boolean
+}
+
+/**
+ * Manage readonly/edit mode in review
+ * @returns is edit
+ */
+const useIsEditReview = (): useIsEditReviewProps => {
+    const { challengeInfo }: ChallengeDetailContextModel = useContext(
+        ChallengeDetailContext,
+    )
+    const { actionChallengeRole }: useRoleProps = useRole()
+    const isEdit = useMemo(() => {
+        if (
+            actionChallengeRole === REVIEWER
+            && challengeInfo
+            && isReviewPhase(challengeInfo)
+        ) {
+            return true
+        }
+
+        return false
+    }, [actionChallengeRole, challengeInfo])
+
+    return {
+        isEdit,
+    }
+}
+
+export { useIsEditReview }
diff --git a/src/apps/review/src/lib/models/AppealInfo.model.ts b/src/apps/review/src/lib/models/AppealInfo.model.ts
index 31b6c263a..db6aaf197 100644
--- a/src/apps/review/src/lib/models/AppealInfo.model.ts
+++ b/src/apps/review/src/lib/models/AppealInfo.model.ts
@@ -1,3 +1,5 @@
+import { BackendAppealResponse } from './BackendAppealResponse.model'
+
 /**
  * AppealInfo
  */
@@ -5,4 +7,16 @@ export interface AppealInfo {
     id: string
     reviewItemCommentId: string
     content: string
+    appealResponse?: BackendAppealResponse
+}
+
+export interface MappingAppeal {
+    [reviewItemCommentId: string]: AppealInfo | undefined
+}
+
+export interface MappingReviewAppeal {
+    [reviewId: string]: {
+        totalAppeals: number
+        finishAppeals: number
+    }
 }
diff --git a/src/apps/review/src/lib/models/BackendAppeal.model.ts b/src/apps/review/src/lib/models/BackendAppeal.model.ts
new file mode 100644
index 000000000..395fd83f9
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendAppeal.model.ts
@@ -0,0 +1,35 @@
+import { AppealInfo } from './AppealInfo.model'
+import { BackendAppealResponse } from './BackendAppealResponse.model'
+
+/**
+ * Backend model for appeal
+ */
+export interface BackendAppealBase {
+    resourceId: string
+    reviewItemCommentId: string
+    content: string
+}
+
+export interface BackendAppeal extends BackendAppealBase {
+    id: string
+    appealResponse?: BackendAppealResponse
+    createdAt: string
+    createdBy: string
+    updatedAt: string
+    updatedBy: string
+}
+
+/**
+ * Convert backend review item info to show in ui
+ *
+ * @param data data from backend response
+ * @returns updated data
+ */
+export function convertBackendAppeal(data: BackendAppeal): AppealInfo {
+    return {
+        appealResponse: data.appealResponse,
+        content: data.content,
+        id: data.id,
+        reviewItemCommentId: data.reviewItemCommentId,
+    }
+}
diff --git a/src/apps/review/src/lib/models/BackendAppealResponse.model.ts b/src/apps/review/src/lib/models/BackendAppealResponse.model.ts
new file mode 100644
index 000000000..696f71c75
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendAppealResponse.model.ts
@@ -0,0 +1,17 @@
+/**
+ * Backend model for appeal response
+ */
+export interface BackendAppealResponseBase {
+    appealId: string
+    resourceId: string
+    content: string
+    success: boolean
+}
+
+export interface BackendAppealResponse extends BackendAppealResponseBase {
+    id: string
+    createdAt: string
+    createdBy: string
+    updatedAt: string
+    updatedBy: string
+}
diff --git a/src/apps/review/src/lib/models/BackendChallengeInfo.model.ts b/src/apps/review/src/lib/models/BackendChallengeInfo.model.ts
index b30b632c5..cd2834a04 100644
--- a/src/apps/review/src/lib/models/BackendChallengeInfo.model.ts
+++ b/src/apps/review/src/lib/models/BackendChallengeInfo.model.ts
@@ -98,11 +98,13 @@ export function convertBackendChallengeInfo(
         currentPhase,
         currentPhaseEndDate,
         currentPhaseEndDateString,
+        currentPhaseObject: data.currentPhase,
         discussionsUrl: data.discussions[0]?.url,
         id: data.id,
         index,
         legacyId: data.legacyId,
         name: data.name,
+        phases: data.phases,
         reviewLength: 0,
         // the % = (The number of submission has been reviewed / submitted review) / The total number of submissions.
         // For now, we can skip the review process.
@@ -115,5 +117,6 @@ export function convertBackendChallengeInfo(
         timeLeftStatus: timeLeft.durationStatus,
         track: data.track as ChallengeType,
         type: data.type as ChallengeType,
+        typeId: data.typeId,
     }
 }
diff --git a/src/apps/review/src/lib/models/BackendRequestAppeal.model.ts b/src/apps/review/src/lib/models/BackendRequestAppeal.model.ts
new file mode 100644
index 000000000..ca6ad38cf
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendRequestAppeal.model.ts
@@ -0,0 +1,6 @@
+import { BackendAppealBase } from './BackendAppeal.model'
+
+/**
+ * Backend request to create new appeal
+ */
+export type BackendRequestAppeal = BackendAppealBase
diff --git a/src/apps/review/src/lib/models/BackendRequestAppealResponse.model.ts b/src/apps/review/src/lib/models/BackendRequestAppealResponse.model.ts
new file mode 100644
index 000000000..4b5a940ac
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendRequestAppealResponse.model.ts
@@ -0,0 +1,6 @@
+import { BackendAppealResponseBase } from './BackendAppealResponse.model'
+
+/**
+ * Backend request to create new appeal response
+ */
+export type BackendRequestAppealResponse = BackendAppealResponseBase
diff --git a/src/apps/review/src/lib/models/BackendRequestReview.model.ts b/src/apps/review/src/lib/models/BackendRequestReview.model.ts
new file mode 100644
index 000000000..673d28894
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendRequestReview.model.ts
@@ -0,0 +1,22 @@
+/**
+ * Backend request to create new review
+ */
+
+import { BackendRequestReviewItem } from './BackendRequestReviewItem.model'
+
+export interface BackendRequestReviewBase {
+    resourceId: string
+    phaseId: string
+    submissionId: string
+    scorecardId: string
+    finalScore: number
+    initialScore: number
+    typeId: string
+    status: string
+    reviewDate: string
+    committed?: boolean
+}
+
+export interface BackendRequestReview extends BackendRequestReviewBase {
+    reviewItems: BackendRequestReviewItem[]
+}
diff --git a/src/apps/review/src/lib/models/BackendRequestReviewItem.model.ts b/src/apps/review/src/lib/models/BackendRequestReviewItem.model.ts
new file mode 100644
index 000000000..51e6dc2f2
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendRequestReviewItem.model.ts
@@ -0,0 +1,10 @@
+/**
+ * Backend request for review item
+ */
+
+import { BackendRequestReviewItemComment } from './BackendRequestReviewItemComment.model'
+import { BackendReviewItemBase } from './BackendReviewItem.model'
+
+export interface BackendRequestReviewItem extends BackendReviewItemBase {
+    reviewItemComments?: BackendRequestReviewItemComment[]
+}
diff --git a/src/apps/review/src/lib/models/BackendRequestReviewItemComment.model.ts b/src/apps/review/src/lib/models/BackendRequestReviewItemComment.model.ts
new file mode 100644
index 000000000..1154744e8
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendRequestReviewItemComment.model.ts
@@ -0,0 +1,7 @@
+/**
+ * Backend request for review item comment
+ */
+
+import { BackendReviewItemCommentBase } from './BackendReviewItemComment.model'
+
+export type BackendRequestReviewItemComment = BackendReviewItemCommentBase
diff --git a/src/apps/review/src/lib/models/BackendRequestReviewPatch.model.ts b/src/apps/review/src/lib/models/BackendRequestReviewPatch.model.ts
new file mode 100644
index 000000000..b124647cf
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendRequestReviewPatch.model.ts
@@ -0,0 +1,16 @@
+/**
+ * Backend request to update review
+ */
+
+export interface BackendRequestReviewPatch {
+    resourceId?: string
+    phaseId?: string
+    submissionId?: string
+    scorecardId?: string
+    finalScore?: number
+    initialScore?: number
+    typeId?: string
+    status?: string
+    reviewDate?: string
+    committed?: boolean
+}
diff --git a/src/apps/review/src/lib/models/BackendReview.model.ts b/src/apps/review/src/lib/models/BackendReview.model.ts
index 26f6c8e16..6580cb311 100644
--- a/src/apps/review/src/lib/models/BackendReview.model.ts
+++ b/src/apps/review/src/lib/models/BackendReview.model.ts
@@ -1,3 +1,5 @@
+import { BackendReviewItem } from './BackendReviewItem.model'
+
 /**
  * Backend model for review
  */
@@ -17,7 +19,51 @@ export interface BackendReview {
     status: string | null
     reviewDate: string | null
     createdAt: string
+    createdAtDate?: Date // this field is calculated at frontend
     createdBy: string
     updatedAt: string
     updatedBy: string
+    reviewItems?: BackendReviewItem[]
+}
+
+export function createEmptyBackendReview(): BackendReview {
+    return {
+        committed: false,
+        createdAt: '',
+        createdBy: '',
+        finalScore: 0,
+        id: '',
+        initialScore: 0,
+        legacyId: '',
+        legacySubmissionId: '',
+        metadata: '',
+        phaseId: '',
+        resourceId: '',
+        reviewDate: '',
+        scorecardId: '',
+        status: '',
+        submissionId: '',
+        typeId: '',
+        updatedAt: '',
+        updatedBy: '',
+
+    }
+}
+
+/**
+ * Update submission info to show in ui
+ *
+ * @param data data from backend response
+ * @returns updated data
+ */
+export function adjustBackendReview(data: BackendReview): BackendReview {
+    const createdAt = data.createdAt
+    const createdAtDate: undefined | Date = createdAt
+        ? new Date(createdAt)
+        : undefined
+
+    return {
+        ...data,
+        createdAtDate,
+    }
 }
diff --git a/src/apps/review/src/lib/models/BackendReviewItem.model.ts b/src/apps/review/src/lib/models/BackendReviewItem.model.ts
new file mode 100644
index 000000000..a8715c3b6
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendReviewItem.model.ts
@@ -0,0 +1,54 @@
+import {
+    BackendReviewItemComment,
+    convertBackendReviewItemComment,
+} from './BackendReviewItemComment.model'
+import { adjustReviewItemInfo, ReviewItemInfo } from './ReviewItemInfo.model'
+
+/**
+ * Backend model for review item
+ */
+export interface BackendReviewItemBase {
+    scorecardQuestionId: string
+    initialAnswer: string
+    finalAnswer?: string
+    managerComment?: string
+}
+
+export interface BackendReviewItem extends BackendReviewItemBase {
+    id: string
+    createdAt: string
+    createdBy: string
+    updatedAt: string
+    updatedBy: string
+    reviewItemComments?: BackendReviewItemComment[]
+}
+
+/**
+ * Convert backend review item info to show in ui
+ *
+ * @param data data from backend response
+ * @returns updated data
+ */
+export function convertBackendReviewItem(
+    data: BackendReviewItem,
+): ReviewItemInfo {
+    return adjustReviewItemInfo({
+        createdAt: data.createdAt,
+        finalAnswer: (data.finalAnswer ?? '').trim(),
+        id: data.id,
+        initialAnswer: (data.initialAnswer ?? '').trim(),
+        managerComment: data.managerComment,
+        reviewItemComments:
+            data.reviewItemComments && data.reviewItemComments.length > 0
+                ? data.reviewItemComments.map(convertBackendReviewItemComment)
+                : [
+                    {
+                        content: '',
+                        id: '',
+                        sortOrder: 0,
+                        type: '',
+                    },
+                ],
+        scorecardQuestionId: data.scorecardQuestionId,
+    })
+}
diff --git a/src/apps/review/src/lib/models/BackendReviewItemComment.model.ts b/src/apps/review/src/lib/models/BackendReviewItemComment.model.ts
new file mode 100644
index 000000000..7c1df04c6
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendReviewItemComment.model.ts
@@ -0,0 +1,52 @@
+import {
+    adjustReviewItemComment,
+    ReviewItemComment,
+} from './ReviewItemComment.model'
+
+/**
+ * Backend model for review item comment
+ */
+export type BackendReviewItemCommentType =
+    | 'COMMENT'
+    | 'REQUIRED'
+    | 'RECOMMENDED'
+    | 'AGGREGATION_COMMENT'
+    | 'AGGREGATION_REVIEW_COMMENT'
+    | 'SUBMITTER_COMMENT'
+    | 'FINAL_FIX_COMMENT'
+    | 'FINAL_REVIEW_COMMENT'
+    | 'MANAGER_COMMENT'
+    | 'APPROVAL_REVIEW_COMMENT'
+    | 'APPROVAL_REVIEW_COMMENT_OTHER_FIXES'
+    | 'SPECIFICATION_REVIEW_COMMENT'
+
+export interface BackendReviewItemCommentBase {
+    content: string
+    type: BackendReviewItemCommentType
+    sortOrder: number
+}
+
+export interface BackendReviewItemComment extends BackendReviewItemCommentBase {
+    id: string
+    createdAt: string
+    createdBy: string
+    updatedAt: string
+    updatedBy: string
+}
+
+/**
+ * Convert backend review item info to show in ui
+ *
+ * @param data data from backend response
+ * @returns updated data
+ */
+export function convertBackendReviewItemComment(
+    data: BackendReviewItemComment,
+): ReviewItemComment {
+    return adjustReviewItemComment({
+        content: data.content === ' ' ? '' : data.content,
+        id: data.id,
+        sortOrder: data.sortOrder,
+        type: data.type,
+    })
+}
diff --git a/src/apps/review/src/lib/models/BackendScorecard.model.ts b/src/apps/review/src/lib/models/BackendScorecard.model.ts
new file mode 100644
index 000000000..fec7033b2
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendScorecard.model.ts
@@ -0,0 +1,54 @@
+import {
+    BackendScorecardGroup,
+    convertBackendScorecardGroup,
+} from './BackendScorecardGroup.model'
+import { adjustScorecardInfo, ScorecardInfo } from './ScorecardInfo.model'
+
+/**
+ * Backend model for scorecard
+ */
+export type BackendScorecardStatus = 'ACTIVE' | 'INACTIVE' | 'DELETED'
+export type BackendScorecardType =
+    | 'SCREENING'
+    | 'REVIEW'
+    | 'APPROVAL'
+    | 'POST_MORTEM'
+    | 'SPECIFICATION_REVIEW'
+    | 'CHECKPOINT_SCREENING'
+    | 'CHECKPOINT_REVIEW'
+    | 'ITERATIVE_REVIEW'
+export interface BackendScorecardBase {
+    status: BackendScorecardStatus
+    legacyId: string
+    type: BackendScorecardType
+    challengeTrack: string
+    challengeType: string
+    name: string
+    version: string
+    minScore: number
+    maxScore: number
+    createdAt: string
+    createdBy: string
+    updatedAt: string
+    updatedBy: string
+}
+
+export interface BackendScorecard extends BackendScorecardBase {
+    id: string
+    scorecardGroups: BackendScorecardGroup[]
+}
+
+/**
+ * Convert backend scorecard info to show in ui
+ *
+ * @param data data from backend response
+ * @param index index of data
+ * @returns updated data
+ */
+export function convertBackendScorecard(data: BackendScorecard): ScorecardInfo {
+    return adjustScorecardInfo({
+        id: data.id,
+        name: data.name,
+        scorecardGroups: data.scorecardGroups.map(convertBackendScorecardGroup),
+    })
+}
diff --git a/src/apps/review/src/lib/models/BackendScorecardGroup.model.ts b/src/apps/review/src/lib/models/BackendScorecardGroup.model.ts
new file mode 100644
index 000000000..2fa1b3efd
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendScorecardGroup.model.ts
@@ -0,0 +1,44 @@
+import {
+    BackendScorecardSection,
+    convertBackendScorecardSection,
+} from './BackendScorecardSection.model'
+import { adjustScorecardGroup, ScorecardGroup } from './ScorecardGroup.model'
+
+/**
+ * Backend model for scorecard group
+ */
+export interface BackendScorecardGroupBase {
+    id: string
+    legacyId?: string
+    scorecardId: string
+    name: string
+    weight: number
+    sortOrder: number
+    createdAt: string
+    createdBy: string
+    updatedAt: string
+    updatedBy: string
+}
+
+export interface BackendScorecardGroup extends BackendScorecardGroupBase {
+    sections: BackendScorecardSection[]
+}
+
+/**
+ * Convert backend scorecard group info to show in ui
+ *
+ * @param data data from backend response
+ * @param index index of data
+ * @returns updated data
+ */
+export function convertBackendScorecardGroup(
+    data: BackendScorecardGroup,
+): ScorecardGroup {
+    return adjustScorecardGroup({
+        id: data.id,
+        name: data.name,
+        sections: data.sections.map(convertBackendScorecardSection),
+        sortOrder: data.sortOrder,
+        weight: data.weight,
+    })
+}
diff --git a/src/apps/review/src/lib/models/BackendScorecardQuestion.model.ts b/src/apps/review/src/lib/models/BackendScorecardQuestion.model.ts
new file mode 100644
index 000000000..4b5b23e3f
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendScorecardQuestion.model.ts
@@ -0,0 +1,45 @@
+import { ScorecardQuestion } from './ScorecardQuestion.model'
+
+/**
+ * Backend model for scorecard question
+ */
+export interface BackendScorecardQuestion {
+    id: string
+    legacyId?: string
+    scorecardSectionId: string
+    type: 'SCALE' | 'YES_NO' | 'TEST_CASE'
+    description: string
+    guidelines: string
+    weight: number
+    requiresUpload: boolean
+    sortOrder: number
+    createdAt: string
+    createdBy: string
+    updatedAt: string
+    updatedBy: string
+    scaleMin: number
+    scaleMax: number
+}
+
+/**
+ * Convert backend scorecard question info to show in ui
+ *
+ * @param data data from backend response
+ * @param index index of data
+ * @returns updated data
+ */
+export function convertBackendScorecardQuestion(
+    data: BackendScorecardQuestion,
+): ScorecardQuestion {
+    return {
+        description: data.description,
+        guidelines: data.guidelines,
+        id: data.id,
+        requiresUpload: data.requiresUpload,
+        scaleMax: data.scaleMax,
+        scaleMin: data.scaleMin,
+        sortOrder: data.sortOrder,
+        type: data.type,
+        weight: data.weight,
+    }
+}
diff --git a/src/apps/review/src/lib/models/BackendScorecardSection.model.ts b/src/apps/review/src/lib/models/BackendScorecardSection.model.ts
new file mode 100644
index 000000000..8546537ad
--- /dev/null
+++ b/src/apps/review/src/lib/models/BackendScorecardSection.model.ts
@@ -0,0 +1,44 @@
+import {
+    BackendScorecardQuestion,
+    convertBackendScorecardQuestion,
+} from './BackendScorecardQuestion.model'
+import { ScorecardSection } from './ScorecardSection.model'
+
+/**
+ * Backend model for scorecard section
+ */
+export interface BackendScorecardSectionBase {
+    id: string
+    legacyId?: string
+    scorecardGroupId: string
+    name: string
+    weight: number
+    sortOrder: number
+    createdAt: string
+    createdBy: string
+    updatedAt: string
+    updatedBy: string
+}
+
+export interface BackendScorecardSection extends BackendScorecardSectionBase {
+    questions: BackendScorecardQuestion[]
+}
+
+/**
+ * Convert backend scorecard section info to show in ui
+ *
+ * @param data data from backend response
+ * @param index index of data
+ * @returns updated data
+ */
+export function convertBackendScorecardSection(
+    data: BackendScorecardSection,
+): ScorecardSection {
+    return {
+        id: data.id,
+        name: data.name,
+        questions: data.questions.map(convertBackendScorecardQuestion),
+        sortOrder: data.sortOrder,
+        weight: data.weight,
+    }
+}
diff --git a/src/apps/review/src/lib/models/BackendSubmission.model.ts b/src/apps/review/src/lib/models/BackendSubmission.model.ts
index c1eb5b9f8..18bde23e0 100644
--- a/src/apps/review/src/lib/models/BackendSubmission.model.ts
+++ b/src/apps/review/src/lib/models/BackendSubmission.model.ts
@@ -1,4 +1,6 @@
-import { BackendReview } from './BackendReview.model'
+import { forEach, orderBy } from 'lodash'
+
+import { adjustBackendReview, BackendReview } from './BackendReview.model'
 import { BackendSubmissionStatus } from './BackendSubmissionStatus.enum'
 
 /**
@@ -36,4 +38,31 @@ export interface BackendSubmission {
     uploadId: string
     review: BackendReview[]
     reviewSummation: any[]
+    reviewResourceMapping?: { [resourceId: string]: BackendReview } // this field is calculated at frontend
+}
+
+/**
+ * Update submission info to show in ui
+ *
+ * @param data data from backend response
+ * @returns updated data
+ */
+export function adjustBackendSubmission(
+    data: BackendSubmission,
+): BackendSubmission {
+    const review = orderBy(data.review.map(adjustBackendReview), ['createdAtDate'], ['desc'])
+    const listOfValidReview: BackendReview[] = []
+    const reviewResourceMapping: { [resourceId: string]: BackendReview } = {}
+    forEach(review, reviewItem => {
+        if (!reviewResourceMapping[reviewItem.resourceId]) {
+            reviewResourceMapping[reviewItem.resourceId] = reviewItem
+            listOfValidReview.push(reviewItem)
+        }
+    })
+
+    return {
+        ...data,
+        review: listOfValidReview,
+        reviewResourceMapping,
+    }
 }
diff --git a/src/apps/review/src/lib/models/BreadCrumb.model.ts b/src/apps/review/src/lib/models/BreadCrumb.model.ts
index c8bc78a6b..bde8e47cd 100644
--- a/src/apps/review/src/lib/models/BreadCrumb.model.ts
+++ b/src/apps/review/src/lib/models/BreadCrumb.model.ts
@@ -2,4 +2,5 @@ export interface BreadCrumbData {
     index: number;
     label: string | undefined;
     path?: string | number;
+    fallback?: string;
 }
diff --git a/src/apps/review/src/lib/models/ChallengeInfo.model.ts b/src/apps/review/src/lib/models/ChallengeInfo.model.ts
index d92830a43..1259bcb7e 100644
--- a/src/apps/review/src/lib/models/ChallengeInfo.model.ts
+++ b/src/apps/review/src/lib/models/ChallengeInfo.model.ts
@@ -5,6 +5,7 @@ import { TABLE_DATE_FORMAT } from '../../config/index.config'
 import { formatDurationDate } from '../utils'
 
 import { SubmissionInfo } from './SubmissionInfo.model'
+import { BackendPhase } from './BackendPhase.model'
 
 export type ChallengeType =
         | 'Design'
@@ -33,10 +34,23 @@ export interface ChallengeInfo {
     index?: number // this field is calculated at frontend
     submissions: SubmissionInfo[]
     type: ChallengeType
+    typeId: string
     track: ChallengeType
     reviewLength?: number
     discussionsUrl?: string // this field is calculated at frontend
     legacyId?: number
+    phases: BackendPhase[]
+    reviewers?: {
+        scorecardId: string
+        isMemberReview: boolean
+        memberReviewerCount: number
+        phaseId: string
+        basePayment: number
+        incrementalPayment: number
+        type: string
+        isAIReviewer: boolean
+    }[]
+    currentPhaseObject?: BackendPhase
 }
 
 /**
diff --git a/src/apps/review/src/lib/models/ChallengeRealtiveInfosMapping.type.ts b/src/apps/review/src/lib/models/ChallengeRealtiveInfosMapping.type.ts
new file mode 100644
index 000000000..a2d145921
--- /dev/null
+++ b/src/apps/review/src/lib/models/ChallengeRealtiveInfosMapping.type.ts
@@ -0,0 +1,16 @@
+import { BackendResource } from './BackendResource.model'
+/**
+ * Challenge relative info mapping
+ */
+export interface ChallengeRealtiveInfo {
+    myRoles: BackendResource[]
+    reviewProgress?: number | null
+
+}
+
+/**
+ * My role infos mapping type
+ */
+export type ChallengeRealtiveInfosMapping = {
+    [challengeId: string]: ChallengeRealtiveInfo
+}
diff --git a/src/apps/review/src/lib/models/FormReviews.model.ts b/src/apps/review/src/lib/models/FormReviews.model.ts
index 6da7ed5f6..e755ae6b8 100644
--- a/src/apps/review/src/lib/models/FormReviews.model.ts
+++ b/src/apps/review/src/lib/models/FormReviews.model.ts
@@ -2,7 +2,7 @@
  * Form Reviews
  */
 export interface FormReviewComment {
-    id: string
+    id?: string
     content?: string
     type?: string
     index: number
diff --git a/src/apps/review/src/lib/models/MyRoleInfosMappingType.type.ts b/src/apps/review/src/lib/models/MyRoleInfosMappingType.type.ts
deleted file mode 100644
index 0ecb3f10b..000000000
--- a/src/apps/review/src/lib/models/MyRoleInfosMappingType.type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { BackendResource } from './BackendResource.model'
-
-/**
- * My role infos mapping type
- */
-export type MyRoleInfosMappingType = {
-    [challengeId: string]: BackendResource[]
-}
diff --git a/src/apps/review/src/lib/models/ResponseFetchActiveReviews.model.ts b/src/apps/review/src/lib/models/ResponseFetchActiveReviews.model.ts
new file mode 100644
index 000000000..7faf33e6d
--- /dev/null
+++ b/src/apps/review/src/lib/models/ResponseFetchActiveReviews.model.ts
@@ -0,0 +1,9 @@
+import { ChallengeInfo } from './ChallengeInfo.model'
+
+/**
+ * Response for fetch active review
+ */
+export interface ResponseFetchActiveReviews {
+    data: ChallengeInfo[]
+    totalPages: number
+}
diff --git a/src/apps/review/src/lib/models/ReviewAppContextModel.model.ts b/src/apps/review/src/lib/models/ReviewAppContextModel.model.ts
index d8e1561e9..18cb83a91 100644
--- a/src/apps/review/src/lib/models/ReviewAppContextModel.model.ts
+++ b/src/apps/review/src/lib/models/ReviewAppContextModel.model.ts
@@ -4,12 +4,12 @@
 import { TokenModel } from '~/libs/core'
 
 import { BackendResourceRole } from './BackendResourceRole.model'
-import { MyRoleInfosMappingType } from './MyRoleInfosMappingType.type'
+import { ChallengeRealtiveInfosMapping } from './ChallengeRealtiveInfosMapping.type'
 
 export interface ReviewAppContextModel {
-    myRoleInfosMapping: MyRoleInfosMappingType // from challenge id to list of my role
-    loadMyRoleInfos: (challengeId: string) => void
-    cancelLoadMyRoleInfos: () => void
+    challengeRelativeInfosMapping: ChallengeRealtiveInfosMapping // from challenge id to challenge relative infos
+    loadChallengeRelativeInfos: (challengeId: string) => void
+    cancelLoadChallengeRelativeInfos: () => void
     loginUserInfo: TokenModel | undefined
     resourceRoleMapping?: {
         [key: string]: BackendResourceRole
diff --git a/src/apps/review/src/lib/models/ReviewInfo.model.ts b/src/apps/review/src/lib/models/ReviewInfo.model.ts
index b1bc8745d..b4fd311f2 100644
--- a/src/apps/review/src/lib/models/ReviewInfo.model.ts
+++ b/src/apps/review/src/lib/models/ReviewInfo.model.ts
@@ -1,23 +1,19 @@
-import { filter } from 'lodash'
+import { filter, forEach } from 'lodash'
 import moment from 'moment'
 
 import { TABLE_DATE_FORMAT } from '../../config/index.config'
-import { MockAppealResults, MockReviewEdit } from '../../mock-datas'
 
 import { adjustReviewItemInfo, ReviewItemInfo } from './ReviewItemInfo.model'
-import { AppealResult } from './AppealResult.model'
-import { BackendSubmission } from './BackendSubmission.model'
-import {
-    convertBackendReviewToReviewResult,
-    ReviewResult,
-} from './ReviewResult.model'
 import { BackendReview } from './BackendReview.model'
+import { convertBackendReviewItem } from './BackendReviewItem.model'
+import { ScorecardInfo } from './ScorecardInfo.model'
+import { ScorecardQuestion } from './ScorecardQuestion.model'
 
 /**
  * Review info
  */
 export interface ReviewInfo {
-    id: string
+    id?: string
     createdAt: string | Date
     createdAtString?: string // this field is calculated at frontend
     updatedAt: string | Date
@@ -27,7 +23,8 @@ export interface ReviewInfo {
     reviewItems: ReviewItemInfo[]
     reviewProgress?: number // this field is calculated at frontend
     scorecardId: string
-    appealResuls: AppealResult[]
+    resourceId: string
+    committed: boolean
 }
 
 /**
@@ -75,45 +72,43 @@ export function adjustReviewInfo(data: ReviewInfo): ReviewInfo {
 }
 
 /**
- * Convert backend submission info to show in review table
+ * Convert backend submission info to show in ui
  *
  * @param data data from backend response
  * @returns updated data
  */
 export function convertBackendReviewToReviewInfo(
     data: BackendReview,
-    submission: BackendSubmission,
 ): ReviewInfo {
-    const createdAt = new Date(data.createdAt)
+    const createdAt = data.createdAt ? new Date(data.createdAt) : ''
     const createdAtString = createdAt
         ? moment(createdAt)
             .local()
             .format(TABLE_DATE_FORMAT)
-        : undefined
-    const updatedAt = new Date(data.updatedAt)
+        : ''
+    const updatedAt = data.updatedAt ? new Date(data.updatedAt) : ''
     const updatedAtString = createdAt
         ? moment(updatedAt)
             .local()
             .format(TABLE_DATE_FORMAT)
-        : undefined
+        : ''
 
-    const reviewItems = submission.review.map(
-        convertBackendReviewToReviewResult,
-    ) as ReviewResult[]
+    const reviewItems = data.reviewItems ?? []
     const totalNumberOfQuestions = reviewItems.length
     const numberOfQuestionsHaveBeenFilled = filter(
         reviewItems,
-        item => !!item.score,
+        item => !!item.initialAnswer,
     ).length
 
     return {
-        appealResuls: MockAppealResults, // use mock data
+        committed: data.committed,
         createdAt,
         createdAtString,
         finalScore: data.finalScore,
         id: data.id,
         initialScore: data.initialScore,
-        reviewItems: MockReviewEdit.reviewItems.map(adjustReviewItemInfo),
+        resourceId: data.resourceId,
+        reviewItems: (data.reviewItems ?? []).map(convertBackendReviewItem),
         // Be calculated by the frontend,
         // the percentage = (The number of questions that have been filled / The total number of questions).
         reviewProgress: totalNumberOfQuestions
@@ -127,3 +122,45 @@ export function convertBackendReviewToReviewInfo(
         updatedAtString,
     }
 }
+
+/**
+ * Convert backend submission info to show in ui
+ *
+ * @param data scorecard info
+ * @param resourceId resource id
+ * @returns review info
+ */
+export function createEmptyReviewInfoFromScorecard(
+    data: ScorecardInfo,
+    resourceId: string,
+): ReviewInfo {
+    const reviewItems: ReviewItemInfo[] = []
+    forEach(data.scorecardGroups, group => {
+        forEach(group.sections, section => {
+            forEach(section.questions, (question: ScorecardQuestion) => {
+                reviewItems.push({
+                    createdAt: '',
+                    id: `${reviewItems.length}`,
+                    reviewItemComments: [
+                        {
+                            content: '',
+                            id: '1',
+                            sortOrder: 1,
+                            type: '',
+                        },
+                    ],
+                    scorecardQuestionId: question.id ?? '',
+                })
+            })
+        })
+    })
+
+    return {
+        committed: false,
+        createdAt: '',
+        resourceId,
+        reviewItems,
+        scorecardId: data.id,
+        updatedAt: '',
+    }
+}
diff --git a/src/apps/review/src/lib/models/ReviewItemComment.model.ts b/src/apps/review/src/lib/models/ReviewItemComment.model.ts
index b2d3276e1..8e9818c43 100644
--- a/src/apps/review/src/lib/models/ReviewItemComment.model.ts
+++ b/src/apps/review/src/lib/models/ReviewItemComment.model.ts
@@ -17,12 +17,8 @@ export interface ReviewItemComment {
  * @returns updated data
  */
 export function adjustReviewItemComment(
-    data: ReviewItemComment | undefined,
-): ReviewItemComment | undefined {
-    if (!data) {
-        return data
-    }
-
+    data: ReviewItemComment,
+): ReviewItemComment {
     const typeDisplay
         = QUESTION_RESPONSE_TYPE_MAPPING_DISPLAY[data.type] ?? data.type
 
diff --git a/src/apps/review/src/lib/models/ReviewItemInfo.model.ts b/src/apps/review/src/lib/models/ReviewItemInfo.model.ts
index 5c32cf44e..231072b50 100644
--- a/src/apps/review/src/lib/models/ReviewItemInfo.model.ts
+++ b/src/apps/review/src/lib/models/ReviewItemInfo.model.ts
@@ -19,6 +19,7 @@ export interface ReviewItemInfo {
     finalAnswer?: string
     scorecardQuestionId: string
     reviewItemComments: ReviewItemComment[]
+    managerComment?: string
 }
 
 /**
@@ -29,10 +30,6 @@ export interface ReviewItemInfo {
 export function adjustReviewItemInfo(
     data: ReviewItemInfo,
 ): ReviewItemInfo {
-    if (!data) {
-        return data
-    }
-
     const createdAt = data.createdAt ? new Date(data.createdAt) : data.createdAt
 
     return {
diff --git a/src/apps/review/src/lib/models/ReviewResult.model.ts b/src/apps/review/src/lib/models/ReviewResult.model.ts
index 650f8cf6b..484ca6bee 100644
--- a/src/apps/review/src/lib/models/ReviewResult.model.ts
+++ b/src/apps/review/src/lib/models/ReviewResult.model.ts
@@ -1,7 +1,6 @@
 import moment from 'moment'
 
 import { TABLE_DATE_FORMAT } from '../../config/index.config'
-import { MockAppealResults } from '../../mock-datas'
 
 import { AppealResult } from './AppealResult.model'
 import { BackendReview } from './BackendReview.model'
@@ -16,6 +15,7 @@ export interface ReviewResult {
     reviewerHandleColor: string
     createdAt: string | Date
     createdAtString?: string // this field is calculated at frontend
+    resourceId: string
 }
 
 /**
@@ -60,11 +60,12 @@ export function convertBackendReviewToReviewResult(
         : undefined
 
     return {
-        appeals: MockAppealResults, // use mock data
+        appeals: [],
         createdAt,
         createdAtString,
-        reviewerHandle: 'Ghostar', // use mock data
-        reviewerHandleColor: '#C9AB00', // use mock data
+        resourceId: data.resourceId,
+        reviewerHandle: '',
+        reviewerHandleColor: '#2a2a2a',
         score: data.finalScore,
     }
 }
diff --git a/src/apps/review/src/lib/models/ScorecardGroup.model.ts b/src/apps/review/src/lib/models/ScorecardGroup.model.ts
index 9c1f9b62e..80655a13a 100644
--- a/src/apps/review/src/lib/models/ScorecardGroup.model.ts
+++ b/src/apps/review/src/lib/models/ScorecardGroup.model.ts
@@ -18,13 +18,7 @@ export interface ScorecardGroup {
  * @param data data from backend response
  * @returns updated data
  */
-export function adjustScorecardGroup(
-    data: ScorecardGroup | undefined,
-): ScorecardGroup | undefined {
-    if (!data) {
-        return data
-    }
-
+export function adjustScorecardGroup(data: ScorecardGroup): ScorecardGroup {
     return {
         ...data,
         sections: _.orderBy(data.sections, ['sortOrder'], ['asc']),
diff --git a/src/apps/review/src/lib/models/ScorecardInfo.model.ts b/src/apps/review/src/lib/models/ScorecardInfo.model.ts
index 940d90ad4..57e09a7c4 100644
--- a/src/apps/review/src/lib/models/ScorecardInfo.model.ts
+++ b/src/apps/review/src/lib/models/ScorecardInfo.model.ts
@@ -17,12 +17,8 @@ export interface ScorecardInfo {
  * @returns updated data
  */
 export function adjustScorecardInfo(
-    data: ScorecardInfo | undefined,
-): ScorecardInfo | undefined {
-    if (!data) {
-        return data
-    }
-
+    data: ScorecardInfo,
+): ScorecardInfo {
     return {
         ...data,
         scorecardGroups: _.orderBy(
diff --git a/src/apps/review/src/lib/models/SubmissionInfo.model.ts b/src/apps/review/src/lib/models/SubmissionInfo.model.ts
index 897f3d459..ad611ff6b 100644
--- a/src/apps/review/src/lib/models/SubmissionInfo.model.ts
+++ b/src/apps/review/src/lib/models/SubmissionInfo.model.ts
@@ -53,7 +53,7 @@ export function convertBackendSubmissionToSubmissionInfo(
         memberId: data.memberId,
         review:
             data.review && data.review[0]
-                ? convertBackendReviewToReviewInfo(data.review[0], data)
+                ? convertBackendReviewToReviewInfo(data.review[0])
                 : undefined,
         reviews: data.review.map(convertBackendReviewToReviewResult),
     }
diff --git a/src/apps/review/src/lib/models/index.ts b/src/apps/review/src/lib/models/index.ts
index 0e6f26200..e439832d7 100644
--- a/src/apps/review/src/lib/models/index.ts
+++ b/src/apps/review/src/lib/models/index.ts
@@ -43,7 +43,17 @@ export * from './BackendReview.model'
 export * from './BackendMeta.model'
 export * from './BackendResponseWithMeta.model'
 export * from './BackendProjectResult.model'
-export * from './MyRoleInfosMappingType.type'
+export * from './ChallengeRealtiveInfosMapping.type'
 export * from './ChallengeRole.type'
 export * from './BackendSubmissionStatus.enum'
 export * from './Scorecard.model'
+export * from './ResponseFetchActiveReviews.model'
+export * from './BackendAppeal.model'
+export * from './BackendRequestReview.model'
+export * from './BackendRequestReviewPatch.model'
+export * from './BackendRequestAppeal.model'
+export * from './BackendRequestAppealResponse.model'
+export * from './BackendScorecard.model'
+export * from './BackendReviewItem.model'
+export * from './BackendRequestReviewItem.model'
+export * from './BackendAppealResponse.model'
diff --git a/src/apps/review/src/lib/services/appeals.service.ts b/src/apps/review/src/lib/services/appeals.service.ts
deleted file mode 100644
index ca2719a0b..000000000
--- a/src/apps/review/src/lib/services/appeals.service.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Appeals service
- */
-import { MockAppeals } from '../../mock-datas'
-import { AppealInfo } from '../models'
-
-/**
- * Fetch appeals
- * @returns resolves to the array of appeal
- */
-export const fetchAppeals = async (): Promise<AppealInfo[]> => Promise.resolve(
-    MockAppeals,
-)
diff --git a/src/apps/review/src/lib/services/challenges.service.ts b/src/apps/review/src/lib/services/challenges.service.ts
index 669efb3d2..d906fa2eb 100644
--- a/src/apps/review/src/lib/services/challenges.service.ts
+++ b/src/apps/review/src/lib/services/challenges.service.ts
@@ -8,9 +8,7 @@ import {
 } from '~/libs/core'
 import { EnvironmentConfig } from '~/config'
 
-import { MockChalenges, MockChallengeInfo } from '../../mock-datas'
 import {
-    adjustChallengeInfo,
     BackendChallengeInfo,
     BackendChallengeTrack,
     BackendChallengeType,
@@ -20,14 +18,6 @@ import {
 
 const challengeBaseUrl = `${EnvironmentConfig.API.V6}`
 
-/**
- * Fetch challenge info
- * @returns resolves to the challenge info
- */
-export const fetchChallengeInfo = async (): Promise<ChallengeInfo> => Promise.resolve(
-    adjustChallengeInfo(MockChallengeInfo) as ChallengeInfo,
-)
-
 /**
  * Fetch challenge info by id
  * @param id challenge id
@@ -40,15 +30,6 @@ export const fetchChallengeInfoById = async (id: string): Promise<ChallengeInfo>
     return convertBackendChallengeInfo(result) as ChallengeInfo
 }
 
-/**
- * Fetch mock challenge info by id
- * @param id challenge id
- * @returns resolves to the challenge info
- */
-export const mockFetchChallengeInfoById = async (id: string): Promise<ChallengeInfo> => Promise.resolve(
-    adjustChallengeInfo(MockChalenges.find(c => c.id === id) ?? MockChallengeInfo) as ChallengeInfo,
-)
-
 /**
  * Fetch all challenge type.
  * @returns resolves to the list of challenge type
diff --git a/src/apps/review/src/lib/services/index.ts b/src/apps/review/src/lib/services/index.ts
index 2d7ce397f..8ae17444d 100644
--- a/src/apps/review/src/lib/services/index.ts
+++ b/src/apps/review/src/lib/services/index.ts
@@ -1,6 +1,4 @@
-export * from './appeals.service'
 export * from './reviews.service'
 export * from './challenges.service'
-export * from './submissions.service'
 export * from './scorecards.service'
 export * from './tabs.service'
diff --git a/src/apps/review/src/lib/services/resources.service.ts b/src/apps/review/src/lib/services/resources.service.ts
index 6006260b5..fbbdad7ee 100644
--- a/src/apps/review/src/lib/services/resources.service.ts
+++ b/src/apps/review/src/lib/services/resources.service.ts
@@ -45,15 +45,12 @@ export const fetchResources = async (query: {
 }
 
 /**
- * Fetch all member roles.
+ * Fetch all challenge resources.
  * @param challengeId challenge id
- * @param memberId member id
- * @returns resolves to the list of role
+ * @returns resolves to the list of resource
  */
-export const fetchAllMemberRoles = async (
+export const fetchChallengeResouces = async (
     challengeId: string,
-    memberId: string,
 ): Promise<PaginatedResponse<BackendResource[]>> => fetchResources({
     challengeId,
-    memberId,
 })
diff --git a/src/apps/review/src/lib/services/reviews.service.ts b/src/apps/review/src/lib/services/reviews.service.ts
index b3857c7e8..1244ee869 100644
--- a/src/apps/review/src/lib/services/reviews.service.ts
+++ b/src/apps/review/src/lib/services/reviews.service.ts
@@ -6,27 +6,42 @@ import qs from 'qs'
 
 import { EnvironmentConfig } from '~/config'
 import {
+    xhrDeleteAsync,
     xhrGetAsync,
     xhrGetBlobAsync,
     xhrGetPaginatedAsync,
+    xhrPatchAsync,
     xhrPostAsync,
 } from '~/libs/core'
 
 import {
-    adjustReviewInfo,
+    adjustBackendSubmission,
+    AppealInfo,
+    BackendAppeal,
+    BackendAppealResponse,
     BackendChallengeInfo,
     BackendContactRequest,
     BackendProjectResult,
+    BackendRequestAppeal,
+    BackendRequestAppealResponse,
+    BackendRequestReview,
+    BackendRequestReviewItem,
+    BackendRequestReviewPatch,
     BackendResponseWithMeta,
+    BackendReview,
+    BackendReviewItem,
+    BackendScorecard,
     BackendSubmission,
     ChallengeInfo,
+    convertBackendAppeal,
     convertBackendChallengeInfo,
     convertBackendProjectResultToProjectResult,
+    convertBackendScorecard,
     FormContactManager,
     ProjectResult,
-    ReviewInfo,
+    ResponseFetchActiveReviews,
+    ScorecardInfo,
 } from '../models'
-import { MockReviewEdit, MockReviewFull } from '../../mock-datas'
 
 const challengeBaseUrl = `${EnvironmentConfig.API.V6}`
 
@@ -46,10 +61,7 @@ export const fetchActiveReviews = async (
     challengeTypeId: string,
     challengeTrackId: string,
     memberId: string,
-): Promise<{
-    data: ChallengeInfo[]
-    totalPages: number
-}> => {
+): Promise<ResponseFetchActiveReviews> => {
     const results = await xhrGetPaginatedAsync<BackendChallengeInfo[]>(
         `${challengeBaseUrl}/challenges/?status=ACTIVE&${qs.stringify({
             ...(challengeTypeId ? {
@@ -74,18 +86,6 @@ export const fetchActiveReviews = async (
     }
 }
 
-/**
- * Fetch review info
- *
- * @param isEdit is edit ui
- * @returns resolves to the review info
- */
-export const fetchReviewInfo = async (isEdit: boolean): Promise<ReviewInfo> => Promise.resolve(
-    adjustReviewInfo(
-        isEdit ? MockReviewEdit : MockReviewFull,
-    ) as ReviewInfo,
-)
-
 /**
  * Create contact request
  *
@@ -128,10 +128,7 @@ export const fetchSubmissions = async (
     page: number,
     perPage: number,
     challengeId: string,
-): Promise<{
-    data: BackendSubmission[]
-    totalPages: number
-}> => {
+): Promise<BackendSubmission[]> => {
     const results = await xhrGetAsync<
         BackendResponseWithMeta<BackendSubmission[]>
     >(
@@ -141,10 +138,24 @@ export const fetchSubmissions = async (
             perPage,
         })}`,
     )
-    return {
-        data: results.data,
-        totalPages: results.meta.totalPages,
-    }
+    return results.data.map(item => adjustBackendSubmission(item))
+}
+
+/**
+ * Fetch submission
+ *
+ * @param submissionId submission id
+ * @returns resolves to the submission info
+ */
+export const fetchSubmission = async (
+    submissionId: string,
+): Promise<BackendSubmission> => {
+    const results = await xhrGetAsync<
+        BackendSubmission
+    >(
+        `${EnvironmentConfig.API.V6}/submissions/${submissionId}`,
+    )
+    return adjustBackendSubmission(results)
 }
 
 /**
@@ -208,3 +219,231 @@ export const fetchProjectResults = async (
         totalPages: results.meta.totalPages,
     }
 }
+
+/**
+ * Fetch reviews
+ *
+ * @param page current page
+ * @param perPage number of item per page
+ * @param challengeId challenge id
+ * @param submissionId submission id
+ * @returns resolves to the array of reviews
+ */
+export const fetchReviews = async (
+    page: number,
+    perPage: number,
+    challengeId: string,
+    submissionId: string,
+): Promise<BackendReview[]> => {
+    const results = await xhrGetAsync<
+        BackendResponseWithMeta<BackendReview[]>
+    >(
+        `${EnvironmentConfig.API.V6}/reviews?${qs.stringify({
+            challengeId,
+            page,
+            perPage,
+            submissionId,
+        })}`,
+    )
+    return results.data
+}
+
+/**
+ * Fetch appeals
+ *
+ * @param page current page
+ * @param perPage number of item per page
+ * @param resourceId resource id
+ * @returns resolves to the array of appeals
+ */
+export const fetchAppeals = async (
+    page: number,
+    perPage: number,
+    resourceId: string,
+): Promise<AppealInfo[]> => {
+    const results = await xhrGetAsync<
+        BackendResponseWithMeta<BackendAppeal[]>
+    >(
+        `${EnvironmentConfig.API.V6}/appeals?${qs.stringify({
+            page,
+            perPage,
+            resourceId,
+        })}`,
+    )
+    return results.data.map(convertBackendAppeal)
+}
+
+/**
+ * Fetch appeals with review id
+ *
+ * @param page current page
+ * @param perPage number of item per page
+ * @param reviewId resource id
+ * @returns resolves to the array of appeals
+ */
+export const fetchAppealsWithReviewId = async (
+    page: number,
+    perPage: number,
+    reviewId: string,
+): Promise<AppealInfo[]> => {
+    const results = await xhrGetAsync<
+        BackendResponseWithMeta<BackendAppeal[]>
+    >(
+        `${EnvironmentConfig.API.V6}/appeals?${qs.stringify({
+            page,
+            perPage,
+            reviewId,
+        })}`,
+    )
+    return results.data.map(convertBackendAppeal)
+}
+
+/**
+ * Create review
+ *
+ * @param data review data
+ * @returns resolves to the review info
+ */
+export const createReview = async (
+    data: BackendRequestReview,
+): Promise<BackendReview> => {
+    const result = await xhrPostAsync<
+        BackendRequestReview,
+        BackendReview
+    >(`${EnvironmentConfig.API.V6}/reviews`, data)
+    return result
+}
+
+/**
+ * Update review
+ *
+ * @param reviewId review id
+ * @param data review data
+ * @returns resolves to the review info
+ */
+export const updateReview = async (
+    reviewId: string,
+    data: BackendRequestReviewPatch,
+): Promise<BackendReview> => {
+    const result = await xhrPatchAsync<
+        BackendRequestReviewPatch,
+        BackendReview
+    >(`${EnvironmentConfig.API.V6}/reviews/${reviewId}`, data)
+    return result
+}
+
+/**
+ * Update review item
+ *
+ * @param reviewItemId review item id
+ * @param data review item data
+ * @returns resolves to the review item info
+ */
+export const updateReviewItem = async (
+    reviewItemId: string,
+    data: BackendRequestReviewItem,
+): Promise<BackendReviewItem> => {
+    const result = await xhrPatchAsync<
+        BackendRequestReviewItem,
+        BackendReviewItem
+    >(`${EnvironmentConfig.API.V6}/reviews/items/${reviewItemId}`, data)
+    return result
+}
+
+/**
+ * Create appeal
+ *
+ * @param data appeal data
+ * @returns resolves to the appeal info
+ */
+export const createAppeal = async (
+    data: BackendRequestAppeal,
+): Promise<BackendAppeal> => {
+    const result = await xhrPostAsync<
+        BackendRequestAppeal,
+        BackendAppeal
+    >(`${EnvironmentConfig.API.V6}/appeals`, data)
+    return result
+}
+
+/**
+ * Update appeal
+ *
+ * @param appealId appeal id
+ * @param data appeal data
+ * @returns resolves to the appeal info
+ */
+export const updateAppeal = async (
+    appealId: string,
+    data: BackendRequestAppeal,
+): Promise<BackendAppeal> => {
+    const result = await xhrPatchAsync<
+        BackendRequestAppeal,
+        BackendAppeal
+    >(`${EnvironmentConfig.API.V6}/appeals/${appealId}`, data)
+    return result
+}
+
+/**
+ * Delete appeal
+ *
+ * @param appealId appeal id
+ * @returns resolves to void
+ */
+export const deleteAppeal = async (
+    appealId: string,
+): Promise<void> => {
+    const result = await xhrDeleteAsync<void>(`${EnvironmentConfig.API.V6}/appeals/${appealId}`)
+    return result
+}
+
+/**
+ * Create appeal response
+ *
+ * @param appealId appeal id
+ * @param data appeal response data
+ * @returns resolves to the appeal response info
+ */
+export const createAppealResponse = async (
+    appealId: string,
+    data: BackendRequestAppealResponse,
+): Promise<BackendAppealResponse> => {
+    const result = await xhrPostAsync<
+        BackendRequestAppealResponse,
+        BackendAppealResponse
+    >(`${EnvironmentConfig.API.V6}/appeals/${appealId}/response`, data)
+    return result
+}
+
+/**
+ * Update appeal response
+ *
+ * @param appealResponseId appeal response id
+ * @param data appeal response data
+ * @returns resolves to the appeal response info
+ */
+export const updateAppealResponse = async (
+    appealResponseId: string,
+    data: BackendRequestAppealResponse,
+): Promise<BackendAppealResponse> => {
+    const result = await xhrPostAsync<
+        BackendRequestAppealResponse,
+        BackendAppealResponse
+    >(`${EnvironmentConfig.API.V6}/appeals/response/${appealResponseId}`, data)
+    return result
+}
+
+/**
+ * Fetch scorecard
+ *
+ * @param scorecardId scorecard id
+ * @returns resolves to the scorecard info
+ */
+export const fetchScorecard = async (
+    scorecardId: string,
+): Promise<ScorecardInfo> => {
+    const results = await xhrGetAsync<BackendScorecard>(
+        `${EnvironmentConfig.API.V6}/scorecards/${scorecardId}`,
+    )
+    return convertBackendScorecard(results)
+}
diff --git a/src/apps/review/src/lib/services/scorecards.service.ts b/src/apps/review/src/lib/services/scorecards.service.ts
index 3a82fa889..909527b3d 100644
--- a/src/apps/review/src/lib/services/scorecards.service.ts
+++ b/src/apps/review/src/lib/services/scorecards.service.ts
@@ -4,18 +4,10 @@
 import { xhrPostAsync, xhrPutAsync } from '~/libs/core'
 import { EnvironmentConfig } from '~/config'
 
-import { MockScorecard } from '../../mock-datas'
-import { adjustScorecardInfo, Scorecard, ScorecardInfo } from '../models'
+import { Scorecard } from '../models'
 
 const baseUrl = `${EnvironmentConfig.API.V6}/scorecards`
 
-/**
- * Fetch scorecard
- * @returns resolves to the scorecard info
- */
-export const fetchScorecards
-  = async (): Promise<ScorecardInfo> => Promise.resolve(adjustScorecardInfo(MockScorecard) as ScorecardInfo)
-
 /**
  * Clone scorecard
  * @param scorecard Scorecard to clone
diff --git a/src/apps/review/src/lib/services/submissions.service.ts b/src/apps/review/src/lib/services/submissions.service.ts
deleted file mode 100644
index b4c19e0ec..000000000
--- a/src/apps/review/src/lib/services/submissions.service.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Submissions service
- */
-// Internal imports
-import { SUBMITTER } from '../../config/index.config'
-import { MockSubmissionReviews, MockSubmissions } from '../../mock-datas'
-import {
-    adjustReviewResult,
-    adjustSubmissionInfo,
-    ReviewResult,
-    SubmissionInfo,
-} from '../models'
-
-/**
- * Fetch mock challenge submissions
- * @returns resolves to the challenge submissions
- */
-export const fetchMockSubmissions = async (
-    role?: string,
-): Promise<SubmissionInfo[]> => {
-    if (role === SUBMITTER) {
-        const submission = MockSubmissions.map(
-            adjustSubmissionInfo,
-        ) as SubmissionInfo[]
-
-        submission.forEach(s => {
-            s.reviews = MockSubmissionReviews.map(
-                adjustReviewResult,
-            ) as ReviewResult[]
-        })
-
-        return Promise.resolve(submission)
-    }
-
-    return Promise.resolve(
-        MockSubmissions
-            .map(s => {
-                const results = adjustSubmissionInfo(s)
-                return ({
-                    ...results,
-                    reviews: results?.reviews?.map(adjustReviewResult),
-                })
-            }) as SubmissionInfo[],
-    )
-}
diff --git a/src/apps/review/src/lib/styles/index.scss b/src/apps/review/src/lib/styles/index.scss
index 6bc02cd02..0a6ac129e 100644
--- a/src/apps/review/src/lib/styles/index.scss
+++ b/src/apps/review/src/lib/styles/index.scss
@@ -154,10 +154,16 @@ $icons: review appeal submission warning error event timer upload reopen 1st 2nd
     padding: $sp-2 $sp-6;
     text-decoration: none;
     transition: all 0.3s ease-in-out;
+    background-color: white;
     &:hover {
         background-color: var(--ButtonColor);
         color: var(--invertButtonColor);
     }
+    &:disabled {
+        opacity: 0.5;
+        color: var(--ButtonColor);
+        background-color: white;
+    }
 }
 
 .filledButton {
@@ -168,16 +174,27 @@ $icons: review appeal submission warning error event timer upload reopen 1st 2nd
         border-color: var(--Actived);
         background-color: var(--Actived);
     }
+    &:disabled {
+        opacity: 0.5;
+        color: var(--invertButtonColor);
+        background-color: var(--ButtonColor);
+    }
 }
 
 .cancelButton {
     @extend .borderButton;
     border-color: var(--Red);
     color: var(--Red);
+    background-color: white;
     &:hover {
         background-color: var(--Red);
         color: var(--invertButtonColor);
     }
+    &:disabled {
+        opacity: 0.5;
+        color: var(--Red);
+        background-color: white;
+    }
 }
 
 .errorMessage {
diff --git a/src/apps/review/src/lib/utils/challenge.ts b/src/apps/review/src/lib/utils/challenge.ts
new file mode 100644
index 000000000..142c402cd
--- /dev/null
+++ b/src/apps/review/src/lib/utils/challenge.ts
@@ -0,0 +1,32 @@
+/**
+ * Util for challenge
+ */
+
+import { ChallengeInfo } from '../models'
+
+/**
+ * Check if challenge is in the review phase
+ * @param challengeInfo challenge info
+ * @returns true if challenge is in the review phase
+ */
+export function isReviewPhase(challengeInfo?: ChallengeInfo): boolean {
+    return (challengeInfo?.currentPhase ?? '').indexOf('Review') >= 0
+}
+
+/**
+ * Check if challenge is in the appeals phase
+ * @param challengeInfo challenge info
+ * @returns true if challenge is in the appeals phase
+ */
+export function isAppealsPhase(challengeInfo?: ChallengeInfo): boolean {
+    return challengeInfo?.currentPhase === 'Appeals'
+}
+
+/**
+ * Check if challenge is in the appeals response phase
+ * @param challengeInfo challenge info
+ * @returns true if challenge is in the appeals response phase
+ */
+export function isAppealsResponsePhase(challengeInfo?: ChallengeInfo): boolean {
+    return challengeInfo?.currentPhase === 'Appeals Response'
+}
diff --git a/src/apps/review/src/lib/utils/index.ts b/src/apps/review/src/lib/utils/index.ts
index a865367ae..d1bfaae02 100644
--- a/src/apps/review/src/lib/utils/index.ts
+++ b/src/apps/review/src/lib/utils/index.ts
@@ -4,3 +4,4 @@ export * from './number'
 export * from './string'
 export * from './validation'
 export * from './finalScore'
+export * from './challenge'
diff --git a/src/apps/review/src/lib/utils/validation.ts b/src/apps/review/src/lib/utils/validation.ts
index a96f102e2..e3adca91a 100644
--- a/src/apps/review/src/lib/utils/validation.ts
+++ b/src/apps/review/src/lib/utils/validation.ts
@@ -50,7 +50,7 @@ export const formReviewsSchema: Yup.ObjectSchema<FormReviews> = Yup.object({
                                             },
                                         ),
                                     id: Yup.string()
-                                        .required('Id is mandatory'),
+                                        .optional(),
                                     index: Yup.number()
                                         .required('Index is mandatory'),
                                     type: Yup.string()
diff --git a/src/apps/review/src/mock-datas/MockAppeals.ts b/src/apps/review/src/mock-datas/MockAppeals.ts
deleted file mode 100644
index a9f3eadd8..000000000
--- a/src/apps/review/src/mock-datas/MockAppeals.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Mock data for the appeal info
- */
-
-import { AppealInfo, AppealResult } from '../lib/models'
-
-const mockMarkdown
-    // eslint-disable-next-line max-len
-    = 'I disagree! My **biggest concern** for the *above situation* was to focus not only on lorem ipsum but also on lorem ipsa which is more important in this case.'
-
-export const MockAppeals: AppealInfo[] = [
-    {
-        content: mockMarkdown,
-        id: '1',
-        reviewItemCommentId: '1',
-    },
-    {
-        content: mockMarkdown,
-        id: '2',
-        reviewItemCommentId: '2',
-    },
-]
-
-export const MockAppealResults: AppealResult[] = [
-    {
-        id: '1',
-        success: true,
-    },
-]
diff --git a/src/apps/review/src/mock-datas/MockChallenges.ts b/src/apps/review/src/mock-datas/MockChallenges.ts
deleted file mode 100644
index a3d33d33c..000000000
--- a/src/apps/review/src/mock-datas/MockChallenges.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-/**
- * Mock data for the challenge info
- */
-// External imports
-import moment from 'moment'
-
-// Internal imports
-import { ChallengeInfo } from '../lib/models'
-import {
-    BUG_HUNT,
-    CODE,
-    COPILOT_OPPORTUNITY,
-    DESIGN,
-    FIRST2FINISH,
-    MARATHON_MATCH,
-    OTHER,
-    TEST_SUITE,
-    TRACK_CHALLENGE,
-} from '../config/index.config'
-
-import { MockSubmissions } from './MockSubmissions'
-
-export const MockChallengeInfo: ChallengeInfo = {
-    currentPhase: 'Review',
-    currentPhaseEndDate: moment()
-        .add(50, 'minutes')
-        .toISOString(),
-    id: '1',
-    name: 'Topcoder Admin App - User Management',
-    submissions: MockSubmissions,
-    track: TRACK_CHALLENGE,
-    type: DESIGN,
-}
-
-export const MockChalenges: ChallengeInfo[] = [
-    {
-        currentPhase: 'Review',
-        currentPhaseEndDate: moment()
-            .add(50, 'minutes')
-            .toISOString(),
-        id: '1',
-        name: 'Topcoder Admin App - User Management',
-        submissions: MockSubmissions,
-        track: TRACK_CHALLENGE,
-        type: DESIGN,
-    },
-    {
-        currentPhase: 'Review',
-        currentPhaseEndDate: moment()
-            .subtract(16, 'hours')
-            .toISOString(),
-        id: '2',
-        name: 'Robust automation testing framework for mobile applications',
-        submissions: [MockSubmissions[1], MockSubmissions[2]],
-        track: TRACK_CHALLENGE,
-        type: DESIGN,
-    },
-    {
-        currentPhase: 'Review',
-        currentPhaseEndDate: moment()
-            .add(2, 'days')
-            .toISOString(),
-        id: '3',
-        name: 'Snowflake Submission for Upcoming Opportunities',
-        submissions: [MockSubmissions[1], MockSubmissions[2], MockSubmissions[3]],
-        track: TRACK_CHALLENGE,
-        type: DESIGN,
-    },
-    {
-        currentPhase: 'Appeal',
-        currentPhaseEndDate: moment()
-            .add(2, 'days')
-            .add(4, 'hours')
-            .toISOString(),
-        id: '4',
-        name: 'Work Manager - Assets Library management',
-        submissions: [MockSubmissions[2]],
-        track: TRACK_CHALLENGE,
-        type: DESIGN,
-    },
-    {
-        currentPhase: 'Appeal Response',
-        currentPhaseEndDate: moment()
-            .add(1, 'days')
-            .add(4, 'hours')
-            .toISOString(),
-        id: '5',
-        name: 'Topcoder Admin App - Challenge Management',
-        reviewLength: 5,
-        submissions: [MockSubmissions[2]],
-        track: TRACK_CHALLENGE,
-        type: FIRST2FINISH,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(3, 'days')
-            .add(4, 'hours')
-            .toISOString(),
-        id: '6',
-        name: 'Design Prisma Schema for Topcoder Review API',
-        reviewLength: 2,
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: FIRST2FINISH,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(4, 'days')
-            .add(4, 'hours')
-            .toISOString(),
-        id: '7',
-        name: 'Marathon Match 160',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: FIRST2FINISH,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(5, 'days')
-            .add(4, 'hours')
-            .toISOString(),
-        id: '8',
-        name: 'Review App - UI prototype Reviewer Flow',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: FIRST2FINISH,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(5, 'days')
-            .add(12, 'hours')
-            .toISOString(),
-        id: '9',
-        name: 'Topcoder Online Review - Document uploading failing after upgrade',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: CODE,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(5, 'days')
-            .add(22, 'hours')
-            .toISOString(),
-        id: '10',
-        name: 'RUX - 96HR NEP Platform Design Concept Challenge',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: CODE,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(6, 'days')
-            .add(4, 'hours')
-            .toISOString(),
-        id: '11',
-        name: 'AI Agent for Innovation: From Idea to Live Challenge',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: CODE,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(6, 'days')
-            .add(8, 'hours')
-            .toISOString(),
-        id: '12',
-        name: 'Senior Lead/Analyst/Architect - MS Fabric Expert',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: CODE,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(7, 'days')
-            .add(1, 'hours')
-            .toISOString(),
-        id: '13',
-        name: 'PPT to Video AI Converter Web App',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: BUG_HUNT,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(7, 'days')
-            .add(2, 'hours')
-            .toISOString(),
-        id: '14',
-        name: 'Topcoder Admin App - Roles Management Update',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: TEST_SUITE,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(7, 'days')
-            .add(3, 'hours')
-            .toISOString(),
-        id: '15',
-        name: 'Topcoder Marathon Matches - Identify missing files',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: COPILOT_OPPORTUNITY,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(7, 'days')
-            .add(4, 'hours')
-            .toISOString(),
-        id: '16',
-        name: 'Topcoder Marathon Matches - Identify missing files',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: MARATHON_MATCH,
-    },
-    {
-        currentPhase: 'Submission',
-        currentPhaseEndDate: moment()
-            .add(7, 'days')
-            .add(4, 'hours')
-            .toISOString(),
-        id: '17',
-        name: 'Utility to Parse and Export Challenge API Data',
-        submissions: [],
-        track: TRACK_CHALLENGE,
-        type: OTHER,
-    },
-]
diff --git a/src/apps/review/src/mock-datas/MockReviews.ts b/src/apps/review/src/mock-datas/MockReviews.ts
deleted file mode 100644
index 6a27d149b..000000000
--- a/src/apps/review/src/mock-datas/MockReviews.ts
+++ /dev/null
@@ -1,371 +0,0 @@
-/**
- * Mock data for the review info
- */
-
-import { ReviewInfo } from '../lib/models'
-
-// eslint-disable-next-line max-len
-const mockCommentMarkdown = `We need to figure out the **jobID problem**. That’s likely in the *project API*, but a job ID should be being added when a project is saved. Doesn’t affect the [score](https://google.com.vn/) since it’s external to the changes. Check the screenshot below:
-<img style="margin-top: 11px;" src="https://picsum.photos/568/263" />
-Also please note these issues too:
-* Issue 1: this is very important to consider
-* Issue 2: something nice to have
-`
-
-export const MockReviewFull: ReviewInfo = {
-    appealResuls: [],
-    createdAt: new Date()
-        .toISOString(),
-    finalScore: 96.17,
-    id: '2',
-    reviewItems: [
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: 'No',
-            id: '1',
-            initialAnswer: 'No',
-            reviewItemComments: [
-                {
-                    content: mockCommentMarkdown,
-                    id: '1',
-                    sortOrder: 1,
-                    type: 'COMMENT',
-                },
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '12',
-                    sortOrder: 2,
-                    type: 'REQUIRED',
-                },
-            ],
-            scorecardQuestionId: '4',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: 'Yes',
-            id: '2',
-            initialAnswer: 'Yes',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '2',
-                    sortOrder: 1,
-                    type: 'REQUIRED',
-                },
-            ],
-            scorecardQuestionId: '5',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: '9',
-            id: '3',
-            initialAnswer: '9',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '3',
-                    sortOrder: 1,
-                    type: 'RECOMMENDED',
-                },
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '13',
-                    sortOrder: 2,
-                    type: 'RECOMMENDED',
-                },
-            ],
-            scorecardQuestionId: '6',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: '9',
-            id: '4',
-            initialAnswer: '9',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '4',
-                    sortOrder: 1,
-                    type: 'COMMENT',
-                },
-            ],
-            scorecardQuestionId: '7',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: '9',
-            id: '5',
-            initialAnswer: '9',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '5',
-                    sortOrder: 1,
-                    type: 'REQUIRED',
-                },
-            ],
-            scorecardQuestionId: '9',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: '9',
-            id: '6',
-            initialAnswer: '9',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '6',
-                    sortOrder: 1,
-                    type: 'RECOMMENDED',
-                },
-            ],
-            scorecardQuestionId: '10',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: '9',
-            id: '7',
-            initialAnswer: '9',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '7',
-                    sortOrder: 1,
-                    type: 'COMMENT',
-                },
-            ],
-            scorecardQuestionId: '13',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: '9',
-            id: '8',
-            initialAnswer: '9',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '8',
-                    sortOrder: 1,
-                    type: 'REQUIRED',
-                },
-            ],
-            scorecardQuestionId: '14',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: '9',
-            id: '9',
-            initialAnswer: '9',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '9',
-                    sortOrder: 1,
-                    type: 'RECOMMENDED',
-                },
-            ],
-            scorecardQuestionId: '16',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: '9',
-            id: '10',
-            initialAnswer: '9',
-            reviewItemComments: [
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '10',
-                    sortOrder: 1,
-                    type: 'COMMENT',
-                },
-                {
-                    content:
-                        'Here comes another answer lorem ipsum dolor sit amet.',
-                    id: '11',
-                    sortOrder: 2,
-                    type: 'RECOMMENDED',
-                },
-            ],
-            scorecardQuestionId: '17',
-        },
-    ],
-    scorecardId: '1',
-    updatedAt: new Date()
-        .toISOString(),
-}
-
-export const MockReviewEdit: ReviewInfo = {
-    appealResuls: [],
-    createdAt: new Date()
-        .toISOString(),
-    finalScore: 96.17,
-    id: '2',
-    reviewItems: [
-        {
-            createdAt: new Date()
-                .toISOString(),
-            finalAnswer: 'No',
-            id: '1',
-            initialAnswer: 'Yes',
-            reviewItemComments: [
-                {
-                    content: mockCommentMarkdown,
-                    id: '1',
-                    sortOrder: 1,
-                    type: 'COMMENT',
-                },
-            ],
-            scorecardQuestionId: '4',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '2',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '2',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '5',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '3',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '3',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '6',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '4',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '4',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '7',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '5',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '5',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '9',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '6',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '6',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '10',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '7',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '7',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '13',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '8',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '8',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '14',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '9',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '9',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '16',
-        },
-        {
-            createdAt: new Date()
-                .toISOString(),
-            id: '10',
-            reviewItemComments: [
-                {
-                    content: '',
-                    id: '10',
-                    sortOrder: 1,
-                    type: '',
-                },
-            ],
-            scorecardQuestionId: '17',
-        },
-    ],
-    scorecardId: '1',
-    updatedAt: new Date()
-        .toISOString(),
-}
diff --git a/src/apps/review/src/mock-datas/MockScorecard.ts b/src/apps/review/src/mock-datas/MockScorecard.ts
deleted file mode 100644
index a22f2c7eb..000000000
--- a/src/apps/review/src/mock-datas/MockScorecard.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-/* eslint-disable max-len */
-/**
- * Mock data for the scorecard info
- */
-
-import { ScorecardInfo } from '../lib/models'
-
-const mockGuidelines = `
-The challenge itself has a set of requirements that the submission should fulfill. During evaluation, the reviewer must verify that all requirements are met. This section deals with the major requirements - requirements, which when remain unfulfilled, contribute to the challenge's failure.
-A submission not meeting the challenge requirements does not contribute to the challenge's success and jeopardizes the project deliverables and timelines.
-Grade using a continuous 0 thru 9 scale - range includes:
-* 0-2 - Multiple requirements are missing or were improperly implemented, and most major functionality is missing or does not work.
-* 3-5 - A few important requirements are missing or were improperly implemented. Significant areas of the functionality are missing or do not work.
-* 6-8 - The implementation takes into consideration all requirements, but there are some areas where one or more requirements are not fully addressed and necessary features are missing.
-* 9 - The implementation fully addresses all requirements. All functionality can be used without any issues.
-`
-
-export const MockScorecard: ScorecardInfo = {
-    id: '1',
-    name: 'Generic Post-Mortem Scorecard',
-    scorecardGroups: [
-        {
-            id: '2',
-            name: 'Post-Mortem Comments',
-            sections: [
-                {
-                    id: '3',
-                    // eslint-disable-next-line max-len
-                    name: 'The answers to the questions should try to identify the possible reasons of the contest’s failure.',
-                    questions: [
-                        {
-                            description:
-                                'Was the pricing adequate for the contest?',
-                            guidelines: mockGuidelines,
-                            id: '4',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 0,
-                            type: 'YES_NO',
-                            weight: 25,
-                        },
-                        {
-                            description:
-                                'Was the timeline adequate for the contest?',
-                            guidelines: mockGuidelines,
-                            id: '5',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 1,
-                            type: 'YES_NO',
-                            weight: 25,
-                        },
-                        {
-                            description: 'Were the specifications clear?',
-                            guidelines: mockGuidelines,
-                            id: '6',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 2,
-                            type: 'SCALE',
-                            weight: 25,
-                        },
-                        {
-                            description: 'Here comes another question',
-                            guidelines: mockGuidelines,
-                            id: '7',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 3,
-                            type: 'SCALE',
-                            weight: 25,
-                        },
-                    ],
-                    sortOrder: 1,
-                    weight: 60,
-                },
-                {
-                    id: '8',
-                    name: 'Challenge Specification Requirements',
-                    questions: [
-                        {
-                            description:
-                                'Have all major specification requirements been met?',
-                            guidelines: mockGuidelines,
-                            id: '9',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 0,
-                            type: 'SCALE',
-                            weight: 50,
-                        },
-                        {
-                            description:
-                                'Have all minor specification requirements been met?',
-                            guidelines: mockGuidelines,
-                            id: '10',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 1,
-                            type: 'SCALE',
-                            weight: 50,
-                        },
-                    ],
-                    sortOrder: 2,
-                    weight: 40,
-                },
-            ],
-            sortOrder: 1,
-            weight: 60,
-        },
-        {
-            id: '11',
-            name: 'This is another section',
-            sections: [
-                {
-                    id: '12',
-                    name: 'The answers to the questions should try to identify some other issue.',
-                    questions: [
-                        {
-                            description:
-                                'This is the first question of this section',
-                            guidelines: mockGuidelines,
-                            id: '13',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 0,
-                            type: 'SCALE',
-                            weight: 50,
-                        },
-                        {
-                            description:
-                                'This is the second question of this section',
-                            guidelines: mockGuidelines,
-                            id: '14',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 1,
-                            type: 'SCALE',
-                            weight: 50,
-                        },
-                    ],
-                    sortOrder: 1,
-                    weight: 30,
-                },
-                {
-                    id: '15',
-                    name: 'Testing',
-                    questions: [
-                        {
-                            description:
-                                'Does the code have proper code coverage?',
-                            guidelines: mockGuidelines,
-                            id: '16',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 0,
-                            type: 'SCALE',
-                            weight: 50,
-                        },
-                        {
-                            description:
-                                // eslint-disable-next-line max-len
-                                'Do all test cases provided, pass, given any test data or setup for the current application?',
-                            guidelines: mockGuidelines,
-                            id: '17',
-                            requiresUpload: true,
-                            scaleMax: 9,
-                            scaleMin: 1,
-                            sortOrder: 1,
-                            type: 'SCALE',
-                            weight: 50,
-                        },
-                    ],
-                    sortOrder: 2,
-                    weight: 70,
-                },
-            ],
-            sortOrder: 2,
-            weight: 40,
-        },
-    ],
-}
diff --git a/src/apps/review/src/mock-datas/MockSubmissionReviews.ts b/src/apps/review/src/mock-datas/MockSubmissionReviews.ts
deleted file mode 100644
index 4b4f9a2b2..000000000
--- a/src/apps/review/src/mock-datas/MockSubmissionReviews.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ReviewResult } from '../lib/models'
-
-export const MockSubmissionReviews: ReviewResult[] = [
-    {
-        appeals: [
-            {
-                id: '1',
-                success: true,
-            },
-        ],
-        createdAt: new Date()
-            .toISOString(),
-        reviewerHandle: 'Ghostar',
-        reviewerHandleColor: '#C9AB00',
-        score: 90.67,
-    },
-    {
-        appeals: [
-            {
-                id: '2',
-                success: true,
-            },
-        ],
-        createdAt: new Date()
-            .toISOString(),
-        reviewerHandle: 'vasilica.olariu',
-        reviewerHandleColor: '#EF3A3A',
-        score: 94.5,
-    },
-    {
-        appeals: [
-            {
-                id: '3',
-                success: true,
-            },
-        ],
-        createdAt: new Date()
-            .toISOString(),
-        reviewerHandle: 'TheRichCode',
-        reviewerHandleColor: '#0A0A0A',
-        score: 94.5,
-    },
-]
diff --git a/src/apps/review/src/mock-datas/MockSubmissions.ts b/src/apps/review/src/mock-datas/MockSubmissions.ts
deleted file mode 100644
index 957fd9644..000000000
--- a/src/apps/review/src/mock-datas/MockSubmissions.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-/**
- * Mock data for the submission info
- */
-import { SubmissionInfo } from '../lib/models'
-
-export const MockSubmissions: SubmissionInfo[] = [
-    {
-        id: '736590',
-        memberId: '1234',
-    },
-    {
-        id: '736592',
-        memberId: '1234',
-        review: {
-            appealResuls: [
-                {
-                    id: '1',
-                    success: true,
-                },
-                {
-                    id: '6',
-                    success: true,
-                },
-            ],
-            createdAt: new Date()
-                .toISOString(),
-            id: '1',
-            initialScore: 98.67,
-            reviewItems: [],
-            scorecardId: '1',
-            updatedAt: new Date()
-                .toISOString(),
-        },
-        reviews: [
-            {
-                appeals: [
-                    {
-                        id: '1',
-                        success: true,
-                    },
-                ],
-                createdAt: new Date()
-                    .toISOString(),
-                reviewerHandle: 'Ghostar',
-                reviewerHandleColor: '#C9AB00',
-                score: 100,
-            },
-            {
-                appeals: [
-                    {
-                        id: '2',
-                        success: true,
-                    },
-                ],
-                createdAt: new Date()
-                    .toISOString(),
-                reviewerHandle: 'vasilica.olariu',
-                reviewerHandleColor: '#EF3A3A',
-                score: 98.0,
-            },
-            {
-                appeals: [
-                    {
-                        id: '3',
-                        success: true,
-                    },
-                ],
-                createdAt: new Date()
-                    .toISOString(),
-                reviewerHandle: 'TheRichCode',
-                reviewerHandleColor: '#0A0A0A',
-                score: 98,
-            },
-        ],
-    },
-    {
-        id: '736597',
-        memberId: '1234',
-        review: {
-            appealResuls: [
-                {
-                    id: '1',
-                    success: true,
-                },
-                {
-                    id: '6',
-                    success: true,
-                },
-            ],
-            createdAt: new Date()
-                .toISOString(),
-            finalScore: 96.8,
-            id: '2',
-            initialScore: 96.17,
-            reviewItems: [],
-            scorecardId: '1',
-            updatedAt: new Date()
-                .toISOString(),
-        },
-    },
-    {
-        id: '726598',
-        memberId: '1234',
-        review: {
-            appealResuls: [
-                {
-                    id: '1',
-                    success: true,
-                },
-                {
-                    id: '6',
-                    success: true,
-                },
-            ],
-            createdAt: new Date()
-                .toISOString(),
-            id: '2',
-            reviewItems: [
-                {
-                    createdAt: new Date()
-                        .toISOString(),
-                    finalAnswer: 'No',
-                    id: '1',
-                    initialAnswer: 'Yes',
-                    reviewItemComments: [],
-                    scorecardQuestionId: '4',
-                },
-                {
-                    createdAt: new Date()
-                        .toISOString(),
-                    id: '2',
-                    reviewItemComments: [],
-                    scorecardQuestionId: '5',
-                },
-            ],
-            scorecardId: '1',
-            updatedAt: new Date()
-                .toISOString(),
-        },
-    },
-    {
-        id: '736591',
-        memberId: '1234',
-        review: {
-            appealResuls: [
-                {
-                    id: '1',
-                    success: true,
-                },
-                {
-                    id: '6',
-                    success: true,
-                },
-            ],
-            createdAt: new Date()
-                .toISOString(),
-            id: '2',
-            reviewItems: [
-                {
-                    createdAt: new Date()
-                        .toISOString(),
-                    finalAnswer: 'No',
-                    id: '1',
-                    initialAnswer: 'Yes',
-                    reviewItemComments: [],
-                    scorecardQuestionId: '4',
-                },
-                {
-                    createdAt: new Date()
-                        .toISOString(),
-                    id: '2',
-                    reviewItemComments: [],
-                    scorecardQuestionId: '5',
-                },
-            ],
-            scorecardId: '1',
-            updatedAt: new Date()
-                .toISOString(),
-        },
-    },
-    {
-        id: '726545',
-        memberId: '1234',
-        review: {
-            appealResuls: [
-                {
-                    id: '1',
-                    success: true,
-                },
-                {
-                    id: '6',
-                    success: true,
-                },
-            ],
-            createdAt: new Date()
-                .toISOString(),
-            id: '2',
-            reviewItems: [
-                {
-                    createdAt: new Date()
-                        .toISOString(),
-                    finalAnswer: 'No',
-                    id: '1',
-                    initialAnswer: 'Yes',
-                    reviewItemComments: [],
-                    scorecardQuestionId: '4',
-                },
-                {
-                    createdAt: new Date()
-                        .toISOString(),
-                    id: '2',
-                    reviewItemComments: [],
-                    scorecardQuestionId: '5',
-                },
-            ],
-            scorecardId: '1',
-            updatedAt: new Date()
-                .toISOString(),
-        },
-    },
-]
diff --git a/src/apps/review/src/mock-datas/index.ts b/src/apps/review/src/mock-datas/index.ts
index e5610a6af..31dc645f4 100644
--- a/src/apps/review/src/mock-datas/index.ts
+++ b/src/apps/review/src/mock-datas/index.ts
@@ -1,8 +1,2 @@
-export * from './MockChallenges'
-export * from './MockScorecard'
-export * from './MockReviews'
-export * from './MockAppeals'
 export * from './MockUploadUrl'
-export * from './MockSubmissions'
-export * from './MockSubmissionReviews'
 export * from './MockTabs'
diff --git a/src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx b/src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx
index 7db196640..5539d6ec6 100644
--- a/src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx
+++ b/src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx
@@ -34,11 +34,11 @@ interface Props {
 
 export const ActiveReviewsPage: FC<Props> = (props: Props) => {
     const {
-        cancelLoadMyRoleInfos,
+        cancelLoadChallengeRelativeInfos,
         loginUserInfo,
-        myRoleInfosMapping,
+        challengeRelativeInfosMapping,
         resourceRoleMapping,
-        loadMyRoleInfos,
+        loadChallengeRelativeInfos,
     }: ReviewAppContextModel = useContext(ReviewAppContext)
 
     const { challengeTypes, isLoading: isLoadingChallengeTypeOnly }: useFetchChallengeTypesProps
@@ -82,8 +82,8 @@ export const ActiveReviewsPage: FC<Props> = (props: Props) => {
         isLoading: isLoadingActiveReviews,
         loadActiveReviews,
     }: useFetchActiveReviewsProps = useFetchActiveReviews(
-        loadMyRoleInfos,
-        cancelLoadMyRoleInfos,
+        loadChallengeRelativeInfos,
+        cancelLoadChallengeRelativeInfos,
     )
 
     const breadCrumb = useMemo(
@@ -134,7 +134,7 @@ export const ActiveReviewsPage: FC<Props> = (props: Props) => {
                             datas={activeReviews}
                             className={styles.blockTable}
                             resourceRoleMapping={resourceRoleMapping}
-                            myRoleInfosMapping={myRoleInfosMapping}
+                            challengeRelativeInfosMapping={challengeRelativeInfosMapping}
                         />
                     )}
                 </>
diff --git a/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx b/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx
index 5b4caae77..67bc6b513 100644
--- a/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx
+++ b/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx
@@ -25,6 +25,7 @@ import { fetchTabs } from '../../../lib/services'
 import { ChallengeDetailContextModel, SelectOption } from '../../../lib/models'
 import { TAB } from '../../../config/index.config'
 import { getHandleUrl } from '../../../lib/utils'
+import { activeReviewAssigmentsRouteId, rootRoute } from '../../../config/routes.config'
 
 import styles from './ChallengeDetailsPage.module.scss'
 
@@ -49,6 +50,7 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
         review,
         reviewProgress,
         screening,
+        mappingReviewAppeal,
     }: useFetchScreeningReviewProps = useFetchScreeningReview()
 
     const [tabItems, setTabItems] = useState<SelectOption[]>([])
@@ -58,7 +60,7 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
             {
                 index: 1,
                 label: 'Active Reviews',
-                path: '/review/active-review-assigments/',
+                path: `${rootRoute}/${activeReviewAssigmentsRouteId}/`,
             },
             ...(isLoadingChallengeInfo
                 ? []
@@ -164,6 +166,7 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
                             isLoadingSubmission={isLoadingSubmission}
                             screening={screening}
                             review={review}
+                            mappingReviewAppeal={mappingReviewAppeal}
                         />
                     </div>
                 </>
diff --git a/src/apps/review/src/pages/active-review-assignements/ScorecardDetailsPage/ScorecardDetailsPage.tsx b/src/apps/review/src/pages/active-review-assignements/ScorecardDetailsPage/ScorecardDetailsPage.tsx
index 301929722..15695e8f0 100644
--- a/src/apps/review/src/pages/active-review-assignements/ScorecardDetailsPage/ScorecardDetailsPage.tsx
+++ b/src/apps/review/src/pages/active-review-assignements/ScorecardDetailsPage/ScorecardDetailsPage.tsx
@@ -1,26 +1,32 @@
 /**
  * Scorecard Details Page.
  */
-import { FC, useCallback, useEffect, useMemo, useState } from 'react'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { FC, useCallback, useContext, useMemo, useState } from 'react'
+import { useParams } from 'react-router-dom'
 import classNames from 'classnames'
 
+import { TableLoading } from '~/apps/admin/src/lib'
+
 import {
-    useFetchMockChallengeInfo,
-    useFetchMockChallengeInfoProps,
+    useAppNavigate,
+    useFetchSubmissionReviews,
+    useFetchSubmissionReviewsProps,
     useRole,
     useRoleProps,
 } from '../../../lib/hooks'
 import {
+    ChallengeDetailContext,
     ChallengeLinks,
     ConfirmModal,
     PageWrapper,
     ScorecardDetails,
 } from '../../../lib'
-import { SubmissionInfo } from '../../../lib/models'
+import { BreadCrumbData, ChallengeDetailContextModel } from '../../../lib/models'
 import { SubmissionBarInfo } from '../../../lib/components/SubmissionBarInfo'
 import { ChallengeLinksForAdmin } from '../../../lib/components/ChallengeLinksForAdmin'
-import { ADMIN, COPILOT, SUBMITTER } from '../../../config/index.config'
+import { ADMIN, COPILOT } from '../../../config/index.config'
+import { useIsEditReview, useIsEditReviewProps } from '../../../lib/hooks/useIsEditReview'
+import { activeReviewAssigmentsRouteId, rootRoute } from '../../../config/routes.config'
 
 import styles from './ScorecardDetailsPage.module.scss'
 
@@ -29,55 +35,67 @@ interface Props {
 }
 
 export const ScorecardDetailsPage: FC<Props> = (props: Props) => {
-    const navigate = useNavigate()
+    const navigate = useAppNavigate()
     const params = useParams()
     const { actionChallengeRole }: useRoleProps = useRole()
     const [showCloseConfirmation, setShowCloseConfirmation] = useState<boolean>(false)
     const [isChanged, setIsChanged] = useState(false)
-    const { challengeInfo, submissions }: useFetchMockChallengeInfoProps
-        = useFetchMockChallengeInfo(params.challengeId)
-    const [searchParams] = useSearchParams()
-    const [submission, setSubmission] = useState<SubmissionInfo>()
-    const isEdit = useMemo(
-        () => searchParams.get('viewMode') !== 'true',
-        [searchParams],
-    )
 
-    const breadCrumb = useMemo(() => [
+    const {
+        challengeInfo,
+        isLoadingChallengeInfo,
+    }: ChallengeDetailContextModel = useContext(ChallengeDetailContext)
+    const { isEdit }: useIsEditReviewProps = useIsEditReview()
+
+    const {
+        addAppeal,
+        addAppealResponse,
+        addManagerComment,
+        doDeleteAppeal,
+        mappingAppeals,
+        isLoading,
+        isSavingReview,
+        isSavingAppeal,
+        isSavingAppealResponse,
+        isSavingManagerComment,
+        reviewInfo,
+        scorecardInfo,
+        scorecardId,
+        submissionInfo,
+        saveReviewInfo,
+    }: useFetchSubmissionReviewsProps = useFetchSubmissionReviews()
+
+    const breadCrumb = useMemo<BreadCrumbData[]>(() => [
         {
             index: 1,
             label: 'Active Reviews',
-            path: '/review/active-review-assigments/',
+            path: `${rootRoute}/${activeReviewAssigmentsRouteId}/`,
+        },
+        {
+            fallback: './../../../../challenge-details',
+            index: 2,
+            label: challengeInfo?.name,
+            path: -1,
         },
-        { index: 2, label: challengeInfo?.name, path: -1 },
         {
             index: 3,
-            label: `Review Scorecard - ${params.scorecardId}`,
+            label: `Review Scorecard - ${params.submissionId}`,
         },
-    ], [challengeInfo?.name, params.scorecardId])
+    ], [challengeInfo?.name, params.submissionId])
 
+    /**
+     * Cancel edit
+     */
     const onCancelEdit = useCallback(() => {
         if (isChanged && isEdit) {
             setShowCloseConfirmation(true)
         } else {
-            navigate('./../../challenge-details')
+            navigate(-1, {
+                fallback: './../../../../challenge-details',
+            })
         }
     }, [isChanged, isEdit, navigate])
 
-    useEffect(() => {
-        if (submissions) {
-            setSubmission(
-                submissions.find(s => s.id === params.scorecardId),
-            )
-        }
-    }, [submissions, params.scorecardId])
-
-    useEffect(() => {
-        if (actionChallengeRole === SUBMITTER && isEdit) {
-            navigate('./../../challenge-details')
-        }
-    }, [actionChallengeRole, isEdit, navigate])
-
     return (
         <PageWrapper
             pageTitle={challengeInfo?.name ?? ''}
@@ -85,36 +103,61 @@ export const ScorecardDetailsPage: FC<Props> = (props: Props) => {
             titleUrl='emptyLink'
             breadCrumb={breadCrumb}
         >
-            <div className={styles.summary}>
-                {submission && <SubmissionBarInfo submission={submission} />}
-                {actionChallengeRole === ADMIN || actionChallengeRole === COPILOT ? (
-                    <ChallengeLinksForAdmin />
-                ) : (
-                    <ChallengeLinks />
-                )}
-            </div>
+            {isLoadingChallengeInfo ? (
+                <TableLoading />
+            ) : (
+                <>
+                    <div className={styles.summary}>
+                        <SubmissionBarInfo submission={submissionInfo} />
+                        {actionChallengeRole === ADMIN || actionChallengeRole === COPILOT ? (
+                            <ChallengeLinksForAdmin
+                                isSavingReview={isSavingReview}
+                                scorecardId={scorecardId}
+                                saveReviewInfo={saveReviewInfo}
+                            />
+                        ) : (
+                            <ChallengeLinks />
+                        )}
+                    </div>
 
-            <ScorecardDetails
-                isEdit={isEdit}
-                onCancelEdit={onCancelEdit}
-                setIsChanged={setIsChanged}
-            />
+                    <ScorecardDetails
+                        mappingAppeals={mappingAppeals}
+                        isEdit={isEdit}
+                        onCancelEdit={onCancelEdit}
+                        setIsChanged={setIsChanged}
+                        scorecardInfo={scorecardInfo}
+                        isLoading={isLoading}
+                        reviewInfo={reviewInfo}
+                        isSavingReview={isSavingReview}
+                        isSavingAppeal={isSavingAppeal}
+                        isSavingAppealResponse={isSavingAppealResponse}
+                        isSavingManagerComment={isSavingManagerComment}
+                        saveReviewInfo={saveReviewInfo}
+                        addAppeal={addAppeal}
+                        addAppealResponse={addAppealResponse}
+                        doDeleteAppeal={doDeleteAppeal}
+                        addManagerComment={addManagerComment}
+                    />
 
-            {isEdit && (
-                <ConfirmModal
-                    title='Discard Confirmation'
-                    action='discard'
-                    onClose={function onClose() {
-                        setShowCloseConfirmation(false)
-                    }}
-                    onConfirm={function onConfirm() {
-                        navigate(-1)
-                    }}
-                    open={showCloseConfirmation}
-                    maxWidth='578px'
-                >
-                    <div>Are you sure you want to discard the changes?</div>
-                </ConfirmModal>
+                    {isEdit && (
+                        <ConfirmModal
+                            title='Discard Confirmation'
+                            action='discard'
+                            onClose={function onClose() {
+                                setShowCloseConfirmation(false)
+                            }}
+                            onConfirm={function onConfirm() {
+                                navigate(-1, {
+                                    fallback: './../../../../challenge-details',
+                                })
+                            }}
+                            open={showCloseConfirmation}
+                            maxWidth='578px'
+                        >
+                            <div>Are you sure you want to discard the changes?</div>
+                        </ConfirmModal>
+                    )}
+                </>
             )}
         </PageWrapper>
     )
diff --git a/src/apps/review/src/review-app.routes.tsx b/src/apps/review/src/review-app.routes.tsx
index 3879d572e..3679de43a 100644
--- a/src/apps/review/src/review-app.routes.tsx
+++ b/src/apps/review/src/review-app.routes.tsx
@@ -88,7 +88,7 @@ export const reviewRoutes: ReadonlyArray<PlatformRoute> = [
                             {
                                 element: <ScorecardDetailsPage />,
                                 id: 'scorecard-details-page',
-                                route: 'scorecard-details/:scorecardId',
+                                route: 'scorecard-details/:submissionId/review/:resourceId',
                             },
                         ],
                         element: <ChallengeDetailContainer />,
diff --git a/src/apps/talent-search/src/lib/services/userflow-survey.ts b/src/apps/talent-search/src/lib/services/userflow-survey.ts
index 990f3384a..12f364b16 100644
--- a/src/apps/talent-search/src/lib/services/userflow-survey.ts
+++ b/src/apps/talent-search/src/lib/services/userflow-survey.ts
@@ -1,9 +1,7 @@
-import { TcUniNavFn } from 'universal-navigation'
+import { getTcUniNav } from '~/apps/platform/src/utils'
 
 import { CES_SURVEY_ID } from '../../config'
 
-declare let tcUniNav: TcUniNavFn
-
 export function triggerSurvey(): void {
-    tcUniNav('triggerFlow', CES_SURVEY_ID, {})
+    getTcUniNav()?.('triggerFlow', CES_SURVEY_ID, {})
 }