diff --git a/src/apps/admin/src/lib/components/common/Pagination/Pagination.module.scss b/src/apps/admin/src/lib/components/common/Pagination/Pagination.module.scss
index 013031b4a..dd4098a1f 100644
--- a/src/apps/admin/src/lib/components/common/Pagination/Pagination.module.scss
+++ b/src/apps/admin/src/lib/components/common/Pagination/Pagination.module.scss
@@ -6,18 +6,49 @@
     justify-content: flex-end;
     align-items: center;
     padding: 16px 0;
-    gap: $sp-4;
+    gap: $sp-2;
+
+    .pageNumbers button,
+    .previous,
+    .disabled,
+    .first,
+    .last,
+    .next {
+        box-shadow: none;
+        border: 1px solid #E9ECEF;
+        border-radius: 4px;
+        color: #0A0A0A;
+        font-weight: 400;
+        font-size: 14px;
+    }
+
+    .previous,
+    .first,
+    .last,
+    .next {
+        padding: 7px 11px;
+
+        &:disabled {
+            background-color: #E9ECEF !important;
+        }
+    }
+    
 
     .pageNumbers {
         display: flex;
         justify-content: center;
         align-items: center;
-        gap: $sp-1;
+        gap: $sp-2;
+
+        button {
+         padding: 3px 12px;
+        }
 
         button.active {
             color: $black-60;
             pointer-events: none;
-            box-shadow: inset 0 0 0 2px #{$black-60};
+            background-color: $teal-160;
+            color: white;
         }
     }
 
@@ -35,4 +66,8 @@
     @media (max-width: #{$mobile-max}) {
         justify-content: center;
     }
+
+    :global(.btn-style-secondary) {
+        box-shadow: none !important;
+    }
 }
diff --git a/src/apps/admin/src/lib/components/common/Pagination/Pagination.tsx b/src/apps/admin/src/lib/components/common/Pagination/Pagination.tsx
index 477b8e50d..80f7c15c6 100644
--- a/src/apps/admin/src/lib/components/common/Pagination/Pagination.tsx
+++ b/src/apps/admin/src/lib/components/common/Pagination/Pagination.tsx
@@ -74,7 +74,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronDoubleLeftIcon}
                 iconToLeft
-                label='FIRST'
                 disabled={props.page === 1 || props.disabled}
                 className={styles.first}
             />
@@ -84,7 +83,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronLeftIcon}
                 iconToLeft
-                label='PREVIOUS'
                 disabled={props.page === 1 || props.disabled}
                 className={styles.previous}
             />
@@ -93,7 +91,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                     <Button
                         key={`page-${i}`}
                         secondary
-                        variant='round'
                         label={`${i}`}
                         onClick={createHandlePageClick(i)}
                         className={i === props.page ? styles.active : ''}
@@ -107,7 +104,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronRightIcon}
                 iconToRight
-                label='NEXT'
                 disabled={props.page === totalPages || props.disabled}
                 className={styles.next}
             />
@@ -118,7 +114,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                     size='md'
                     icon={IconOutline.ChevronDoubleRightIcon}
                     iconToRight
-                    label='LAST'
                     disabled={props.page === totalPages || props.disabled}
                     className={styles.last}
                 />
diff --git a/src/apps/review/src/config/routes.config.ts b/src/apps/review/src/config/routes.config.ts
index dc3d060ea..43a656258 100644
--- a/src/apps/review/src/config/routes.config.ts
+++ b/src/apps/review/src/config/routes.config.ts
@@ -12,3 +12,5 @@ export const activeReviewAssigmentsRouteId = 'active-review-assigments'
 export const openOpportunitiesRouteId = 'open-opportunities'
 export const pastReviewAssignmentsRouteId = 'past-review-assignments'
 export const challengeDetailRouteId = ':challengeId'
+export const scorecardRouteId = 'scorecard'
+export const viewScorecardRouteId = ':scorecardId'
diff --git a/src/apps/review/src/lib/components/NavTabs/NavTabs.tsx b/src/apps/review/src/lib/components/NavTabs/NavTabs.tsx
index 3ae56fa0c..650ff9acd 100644
--- a/src/apps/review/src/lib/components/NavTabs/NavTabs.tsx
+++ b/src/apps/review/src/lib/components/NavTabs/NavTabs.tsx
@@ -3,6 +3,8 @@ import {
     FC,
     SetStateAction,
     useCallback,
+    useContext,
+    useEffect,
     useMemo,
     useRef,
     useState,
@@ -13,7 +15,10 @@ import classNames from 'classnames'
 
 import { useClickOutside } from '~/libs/shared/lib/hooks'
 
-import { getTabIdFromPathName, TabsConfig } from './config'
+import { ReviewAppContext } from '../../contexts'
+import { ReviewAppContextModel } from '../../models'
+
+import { getTabIdFromPathName, getTabsConfig } from './config'
 import styles from './NavTabs.module.scss'
 
 const NavTabs: FC = () => {
@@ -21,15 +26,24 @@ const NavTabs: FC = () => {
     const [isOpen, setIsOpen] = useState<boolean>(false)
     const triggerRef = useRef<HTMLDivElement>(null)
     const { pathname }: { pathname: string } = useLocation()
+
+    const { loginUserInfo }: ReviewAppContextModel = useContext(ReviewAppContext)
+    const userRoles = useMemo(() => loginUserInfo?.roles || [], [loginUserInfo?.roles])
+    const tabs = useMemo(() => getTabsConfig(userRoles), [userRoles])
+
     const activeTabPathName: string = useMemo<string>(
-        () => getTabIdFromPathName(pathname),
-        [pathname],
+        () => getTabIdFromPathName(pathname, userRoles),
+        [pathname, userRoles],
     )
     const [activeTab, setActiveTab]: [
         string,
         Dispatch<SetStateAction<string>>
     ] = useState<string>(activeTabPathName)
 
+    useEffect(() => {
+        setActiveTab(activeTabPathName)
+    }, [activeTabPathName])
+
     const handleTabChange = useCallback(
         (tabId: string) => {
             setActiveTab(tabId)
@@ -58,7 +72,7 @@ const NavTabs: FC = () => {
                     Review
                 </div>
                 <ul className={styles.tab}>
-                    {TabsConfig.map(tab => (
+                    {tabs.map(tab => (
                         <li
                             key={tab.id}
                             className={
diff --git a/src/apps/review/src/lib/components/NavTabs/config/tabs-config.ts b/src/apps/review/src/lib/components/NavTabs/config/tabs-config.ts
index 86f3f2eb2..e13edef82 100644
--- a/src/apps/review/src/lib/components/NavTabs/config/tabs-config.ts
+++ b/src/apps/review/src/lib/components/NavTabs/config/tabs-config.ts
@@ -5,25 +5,37 @@ import {
     activeReviewAssigmentsRouteId,
     openOpportunitiesRouteId,
     pastReviewAssignmentsRouteId,
+    scorecardRouteId,
 } from '~/apps/review/src/config/routes.config'
 
-export const TabsConfig: TabsNavItem[] = [
-    {
-        id: activeReviewAssigmentsRouteId,
-        title: 'Active Review Assignments',
-    },
-    {
-        id: openOpportunitiesRouteId,
-        title: 'Open Opportunities',
-    },
-    {
-        id: pastReviewAssignmentsRouteId,
-        title: 'Past Review Assignments',
-    },
-]
+export function getTabsConfig(userRoles: string[]): TabsNavItem[] {
+    const tabs: TabsNavItem[] = [
+        {
+            id: activeReviewAssigmentsRouteId,
+            title: 'Active Review Assignments',
+        },
+        {
+            id: openOpportunitiesRouteId,
+            title: 'Open Opportunities',
+        },
+        {
+            id: pastReviewAssignmentsRouteId,
+            title: 'Past Review Assignments',
+        },
+    ]
 
-export function getTabIdFromPathName(pathname: string): string {
-    const matchItem = _.find(TabsConfig, item => pathname.includes(`/${item.id}`))
+    if (userRoles.includes('administrator')) {
+        tabs.push({
+            id: scorecardRouteId,
+            title: 'Scorecards',
+        })
+    }
+
+    return tabs
+}
+
+export function getTabIdFromPathName(pathname: string, userRoles: string[]): string {
+    const matchItem = _.find(getTabsConfig(userRoles), item => pathname.includes(`/${item.id}`))
 
     if (matchItem) {
         return matchItem.id
diff --git a/src/apps/review/src/lib/components/ScorecardsFilter/ScorecardsFilter.module.scss b/src/apps/review/src/lib/components/ScorecardsFilter/ScorecardsFilter.module.scss
new file mode 100644
index 000000000..0022872f3
--- /dev/null
+++ b/src/apps/review/src/lib/components/ScorecardsFilter/ScorecardsFilter.module.scss
@@ -0,0 +1,176 @@
+@import '@libs/ui/styles/includes';
+
+.filtersContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 32px;
+  align-items: flex-end;
+  padding: 20px;
+  background-color: #E0E4E84D;
+  justify-content: center;
+  align-items: center;
+
+   .inputWrapper {
+        gap: $sp-1;
+        flex: 5;
+        min-width: 355px;
+        width: 100%;
+        margin-bottom: 0;
+        justify-content: end;
+        
+        label {
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+
+    .inputText {
+        color: $black-60;
+        box-sizing: border-box;
+        border: 0;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        height: auto;
+        border-radius: 0;
+
+        &:focus {
+            box-shadow: none;
+            border: none;
+            outline: none;
+            color: $black-100;
+        }
+
+        &::placeholder {
+            color: $black-60;
+            opacity: 1;
+            text-transform: none;
+        }
+    }
+
+    .inputIcon {
+        color: $black-60;
+    }
+
+
+
+  .searchInput {
+    flex: 5;
+    min-width: 355px;
+    width: 100%;
+    margin-bottom: 0;
+
+  }
+
+  .typeSelect {
+    flex: 2;
+    margin-bottom: 0;
+
+    > div:first-child {
+      padding: 3px 16px 4px 16px;
+    }
+  }
+
+  .projectTypeSelect {
+    flex: 1.5;
+    margin-bottom: 0;
+
+    > div:first-child {
+      padding: 3px 16px 4px 16px;
+    }
+  }
+
+  .categorySelect {
+    flex: 1.5;
+    margin-bottom: 0;
+
+    > div:first-child {
+      padding: 3px 16px 4px 16px;
+    }
+  }
+
+  .statusSelect {
+    flex: 1;
+    margin-bottom: 0;
+
+    > div:first-child {
+      padding: 3px 16px 4px 16px;
+    }
+  }
+
+  .clearButton {
+    flex: 0.5;
+    color: #767676;
+    text-transform: capitalize;
+    border-radius: 4px;
+    border: 1px #A8A8A8 solid;
+    box-shadow: none;
+    font-weight: 700;
+  }
+
+}
+
+@media (max-width: 768px) {
+  .filtersContainer {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+
+    .inputWrapper {
+      flex: 1 1 100%;
+      min-width: 0 !important;
+    }
+
+    // Two filters per row
+    .typeSelect,
+    .projectTypeSelect,
+    .categorySelect,
+    .statusSelect,
+    .clearButton {
+      flex: 1 1 calc(50% - 0.5rem);
+      min-width: 0;
+    }
+  }
+}
+
+@media (max-width: 1285px) and (min-width: 769px) {
+
+  .filtersContainer {
+
+    .typeSelect,
+    .projectTypeSelect,
+    .categorySelect,
+    .statusSelect {
+      flex: 1 1 20%;
+      min-width: 0;
+
+      > div:first-child {
+        white-space: normal;
+        min-width: 0;
+      }
+    }
+  }
+}
+
+
+@media (max-width: 500px) {
+  .filtersContainer > * {
+    flex: 1 1 100%;
+  }
+}
+
+:global(.input-el) {
+    margin-bottom: 0;
+    padding: 3px 16px 3px 16px;
+}
+
+:global(.input-wrapper) {
+    height: 38px;
+}
+
+:global(.btn-size-lg) {
+    padding: 6px 24px;
+}
+
diff --git a/src/apps/review/src/lib/components/ScorecardsFilter/ScorecardsFilter.tsx b/src/apps/review/src/lib/components/ScorecardsFilter/ScorecardsFilter.tsx
new file mode 100644
index 000000000..dfbd7349d
--- /dev/null
+++ b/src/apps/review/src/lib/components/ScorecardsFilter/ScorecardsFilter.tsx
@@ -0,0 +1,171 @@
+import React, { useCallback } from 'react'
+import classNames from 'classnames'
+
+import { Button, IconOutline, InputSelect, InputWrapper } from '~/libs/ui'
+
+import {
+    categoryByProjectType,
+    ProjectType,
+    ProjectTypeLabels,
+    ScorecardStatus,
+    ScorecardStatusLabels,
+    ScorecardType,
+    ScorecardTypeLabels,
+} from '../../models'
+
+import styles from './ScorecardsFilter.module.scss'
+
+interface ScorecardFiltersProps {
+  filters: {
+    name: string
+    type: string
+    projectType: string
+    category: string
+    status: string
+  }
+  onFiltersChange: (newFilters: ScorecardFiltersProps['filters']) => void
+}
+
+export const ScorecardFilters: React.FC<ScorecardFiltersProps> = (props: ScorecardFiltersProps) => {
+
+    const projectTypeOptions = [
+        { label: 'All Projects', value: '' },
+        ...Object.values(ProjectType)
+            .map(type => ({
+                label: ProjectTypeLabels[type],
+                value: type,
+            })),
+    ]
+
+    const typeOptions = [
+        { label: 'All Types', value: '' },
+        ...Object.values(ScorecardType)
+            .map(type => ({
+                label: ScorecardTypeLabels[type],
+                value: type,
+            })),
+    ]
+
+    const statusOptions = [
+        { label: 'All Status', value: '' },
+        ...Object.values(ScorecardStatus)
+            .map(status => ({
+                label: ScorecardStatusLabels[status],
+                value: status,
+            })),
+    ]
+
+    const categoryOptions = [
+        { label: 'All Categories', value: '' },
+        ...(props.filters.projectType
+            ? (categoryByProjectType[props.filters.projectType as ProjectType] || []).map(category => ({
+                label: category,
+                value: category,
+            }))
+            : []),
+    ]
+
+    const handleChange
+    = (key: keyof ScorecardFiltersProps['filters']) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const value = e.target.value
+        const newFilters = {
+            ...props.filters,
+            [key]: value,
+        }
+
+        // Clear category if projectType changed
+        if (key === 'projectType') {
+            newFilters.category = ''
+        }
+
+        props.onFiltersChange(newFilters)
+    }
+
+    const handleClear = useCallback(() => {
+        props.onFiltersChange({
+            category: '',
+            name: '',
+            projectType: '',
+            status: '',
+            type: '',
+        })
+    }, [])
+
+    return (
+        <div className={styles.filtersContainer}>
+            {/* Search */}
+            <InputWrapper
+                dirty={false}
+                disabled={false}
+                label=''
+                type='text'
+                className={styles.inputWrapper}
+            >
+                <input
+                    className={classNames(styles.inputText, 'body-small')}
+                    value={props.filters.name}
+                    onChange={handleChange('name')}
+                    placeholder='Scorecard Name'
+                    type='text'
+                />
+                <div className={styles.inputIcon}>
+                    <IconOutline.SearchIcon className='icon-lg' />
+                </div>
+            </InputWrapper>
+
+            {/* Type */}
+            <InputSelect
+                classNameWrapper={styles.typeSelect}
+                name='type'
+                options={typeOptions}
+                value={props.filters.type}
+                onChange={handleChange('type')}
+                dirty
+            />
+
+            {/* Project */}
+            <InputSelect
+                classNameWrapper={styles.projectTypeSelect}
+                name='projectType'
+                options={projectTypeOptions}
+                value={props.filters.projectType}
+                onChange={handleChange('projectType')}
+                dirty
+            />
+
+            {/* Category */}
+            <InputSelect
+                classNameWrapper={styles.categorySelect}
+                name='category'
+                options={categoryOptions}
+                value={props.filters.category}
+                onChange={handleChange('category')}
+                dirty
+                disabled={!props.filters.projectType}
+            />
+
+            {/* Status */}
+            <InputSelect
+                classNameWrapper={styles.statusSelect}
+                name='status'
+                options={statusOptions}
+                value={props.filters.status}
+                onChange={handleChange('status')}
+                dirty
+            />
+
+            {/* Clear */}
+            <Button
+                className={styles.clearButton}
+                label='Clear'
+                secondary
+                size='lg'
+                onClick={handleClear}
+                icon={IconOutline.XIcon}
+                iconToLeft
+            />
+        </div>
+    )
+}
+
+export default ScorecardFilters
diff --git a/src/apps/review/src/lib/components/ScorecardsFilter/index.ts b/src/apps/review/src/lib/components/ScorecardsFilter/index.ts
new file mode 100644
index 000000000..4df7fa9e7
--- /dev/null
+++ b/src/apps/review/src/lib/components/ScorecardsFilter/index.ts
@@ -0,0 +1 @@
+export { default as ScorecardsFilter } from './ScorecardsFilter'
diff --git a/src/apps/review/src/lib/components/TableScorecards/TableScorecards.module.scss b/src/apps/review/src/lib/components/TableScorecards/TableScorecards.module.scss
new file mode 100644
index 000000000..9b12cc5ed
--- /dev/null
+++ b/src/apps/review/src/lib/components/TableScorecards/TableScorecards.module.scss
@@ -0,0 +1,50 @@
+@import '@libs/ui/styles/includes';
+
+
+.action {
+    display: flex;
+    gap: 16px;
+    color: $link-blue-dark;
+    font-weight: 700;
+
+    .actionItem {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+
+        svg {
+            width: 20px;
+            height: 20px;
+        }
+    }
+}
+
+.tableCell {
+    vertical-align: middle;
+}
+
+.textBlue,
+.textBlue:hover {
+    color: $link-blue-dark;
+}
+
+.tableBreakCell {
+    white-space: break-spaces !important;
+}
+
+.tableCellCenter {
+    text-align: center;
+}
+
+.pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .paginationText {
+        font-size: 12px;
+        font-weight: 400;
+        color: #0A0A0A;
+    }
+}
+
diff --git a/src/apps/review/src/lib/components/TableScorecards/TableScorecards.tsx b/src/apps/review/src/lib/components/TableScorecards/TableScorecards.tsx
new file mode 100644
index 000000000..7a4f6c748
--- /dev/null
+++ b/src/apps/review/src/lib/components/TableScorecards/TableScorecards.tsx
@@ -0,0 +1,176 @@
+/**
+ * Table Active Reviews.
+ */
+import { Dispatch, FC, SetStateAction, useMemo } from 'react'
+import { Link } from 'react-router-dom'
+import { bind, noop } from 'lodash'
+import classNames from 'classnames'
+
+import { MobileTableColumn } from '~/apps/admin/src/lib/models/MobileTableColumn.model'
+import { useWindowSize, WindowSize } from '~/libs/shared'
+import { TableMobile } from '~/apps/admin/src/lib/components/common/TableMobile'
+import { Table, TableColumn } from '~/libs/ui'
+import { Pagination } from '~/apps/admin/src/lib'
+import { DuplicateIcon, PencilIcon } from '@heroicons/react/outline'
+
+import { ProjectType, ProjectTypeLabels, Scorecard, ScorecardStatusLabels, ScorecardTypeLabels } from '../../models'
+import { TableWrapper } from '../TableWrapper'
+
+import styles from './TableScorecards.module.scss'
+
+interface Props {
+    className?: string
+    datas: Scorecard[]
+    metadata?: any
+    perPage?: number
+    totalPages: number
+    page: number
+    setPage: Dispatch<SetStateAction<number>>
+    onClone: (scorecard: Scorecard) => unknown
+}
+
+export const TableScorecards: FC<Props> = (props: Props) => {
+    const { width: screenWidth }: WindowSize = useWindowSize()
+    const isTablet = useMemo(() => screenWidth <= 1000, [screenWidth])
+
+    const columns = useMemo<TableColumn<Scorecard>[]>(
+        () => [
+            {
+                className: styles.tableCell,
+                label: '#',
+                propertyName: 'index',
+                type: 'text',
+            },
+            {
+                className: classNames(styles.textBlue, styles.tableBreakCell, styles.tableCell),
+                label: 'Scorecard',
+                propertyName: 'name',
+                renderer: (data: Scorecard) => (
+                    <Link to={`${data.id}`}>
+                        {data.name}
+                    </Link>
+                ),
+                type: 'element',
+            },
+            {
+                className: classNames(styles.tableCell),
+                label: 'Type',
+                propertyName: 'type',
+                renderer: (data: Scorecard) => (
+                    <div>{ScorecardTypeLabels[data.type]}</div>
+                ),
+                type: 'element',
+            },
+            {
+                className: styles.tableCell,
+                label: 'Project Type',
+                propertyName: 'challengeTrack',
+                renderer: (data: Scorecard) => (
+                    <div>{ProjectTypeLabels[data.challengeTrack as ProjectType]}</div>
+                ),
+                type: 'element',
+            },
+            {
+                className: styles.tableCell,
+                label: 'Category',
+                propertyName: 'challengeType',
+                type: 'text',
+            },
+            {
+                className: styles.tableCell,
+                label: 'Status',
+                propertyName: 'status',
+                renderer: (data: Scorecard) => (
+                    <div>{ScorecardStatusLabels[data.status]}</div>
+                ),
+                type: 'element',
+            },
+            {
+                className: classNames(styles.tableCell, styles.tableCellCenter),
+                label: 'Action',
+                renderer: (data: Scorecard) => (
+                    <div className={styles.action}>
+                        <div className={styles.actionItem}>
+                            <PencilIcon />
+                            <span>Edit</span>
+                        </div>
+                        <div className={styles.actionItem} onClick={bind(props.onClone, this, data)}>
+                            <DuplicateIcon />
+                            <span>Clone</span>
+                        </div>
+                    </div>
+                ),
+                type: 'action',
+            },
+        ],
+        [],
+    )
+
+    const columnsMobile = useMemo<MobileTableColumn<Scorecard>[][]>(
+        () => columns.map(
+            column => [
+                {
+                    ...column,
+                    className: '',
+                    label: `${column.label as string} label`,
+                    mobileType: 'label',
+                    renderer: () => (
+                        <div>
+                            {column.label as string}
+                            :
+                        </div>
+                    ),
+                    type: 'element',
+                },
+                {
+                    ...column,
+                    mobileType: 'last-value',
+                },
+            ] as MobileTableColumn<Scorecard>[],
+        ),
+        [columns],
+    )
+
+    return (
+        <TableWrapper
+            className={classNames(
+                styles.container,
+                props.className,
+                'enhanced-table',
+            )}
+        >
+            {isTablet ? (
+                <TableMobile columns={columnsMobile} data={props.datas} />
+            ) : (
+                <Table
+                    columns={columns}
+                    data={props.datas}
+                    disableSorting
+                    onToggleSort={noop}
+                    removeDefaultSort
+                    className='enhanced-table-desktop'
+                />
+            )}
+            <div className={styles.pagination}>
+                <div className={styles.paginationText}>
+                    Showing 1-
+                    {props.perPage}
+                    {' '}
+                    of
+                    {' '}
+                    {props.metadata.total}
+                    {' '}
+                    results
+                </div>
+                <Pagination
+                    page={props.page}
+                    totalPages={props.totalPages}
+                    onPageChange={props.setPage}
+                />
+            </div>
+
+        </TableWrapper>
+    )
+}
+
+export default TableScorecards
diff --git a/src/apps/review/src/lib/components/TableScorecards/index.ts b/src/apps/review/src/lib/components/TableScorecards/index.ts
new file mode 100644
index 000000000..938aea3bf
--- /dev/null
+++ b/src/apps/review/src/lib/components/TableScorecards/index.ts
@@ -0,0 +1 @@
+export { default as TableScorecards } from './TableScorecards'
diff --git a/src/apps/review/src/lib/components/index.ts b/src/apps/review/src/lib/components/index.ts
index 853e5e92d..4099bcc24 100644
--- a/src/apps/review/src/lib/components/index.ts
+++ b/src/apps/review/src/lib/components/index.ts
@@ -14,3 +14,5 @@ export * from './TableReviewAppeals'
 export * from './ChallengeDetailsContent'
 export * from './ScorecardDetails'
 export * from './ConfirmModal'
+export * from './ScorecardsFilter'
+export * from './TableScorecards'
diff --git a/src/apps/review/src/lib/hooks/index.ts b/src/apps/review/src/lib/hooks/index.ts
index c554257cb..1fb530189 100644
--- a/src/apps/review/src/lib/hooks/index.ts
+++ b/src/apps/review/src/lib/hooks/index.ts
@@ -7,3 +7,4 @@ export * from './useFetchResource'
 export * from './useFetchChallengeTracks'
 export * from './useFetchChallengeTypes'
 export * from './useFetchChallengeResources'
+export * from './useFetchScorecards'
diff --git a/src/apps/review/src/lib/hooks/useFetchScorecards.ts b/src/apps/review/src/lib/hooks/useFetchScorecards.ts
new file mode 100644
index 000000000..d37f26bf0
--- /dev/null
+++ b/src/apps/review/src/lib/hooks/useFetchScorecards.ts
@@ -0,0 +1,63 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+import { Scorecard } from '../models'
+
+interface UseFetchScorecardsParams {
+  page: number
+  perPage: number
+  name?: string
+  challengeTrack?: string
+  scorecardType?: string
+  challengeType?: string
+  status?: string
+}
+
+export interface ScorecardsResponse {
+  scoreCards: Scorecard[]
+  metadata: any
+  error?: any
+  isValidating: boolean
+}
+
+const baseUrl = `${EnvironmentConfig.API.V6}/review`
+
+const PAGE_SIZE = 20
+
+export function useFetchScorecards(
+    {
+        page,
+        perPage = PAGE_SIZE,
+        name = '',
+        challengeTrack = '',
+        challengeType = '',
+        scorecardType = '',
+        status = '',
+    }: UseFetchScorecardsParams,
+): ScorecardsResponse {
+    const query = new URLSearchParams({
+        page: String(page),
+        perPage: String(perPage),
+        ...(name ? { name } : {}),
+        ...(scorecardType ? { scorecardType } : {}),
+        ...(challengeTrack ? { challengeTrack } : {}),
+        ...(challengeType ? { challengeType } : {}),
+        ...(status ? { status } : {}),
+    })
+
+    const fetcher = (url: string): Promise<ScorecardsResponse> => xhrGetAsync<ScorecardsResponse>(url)
+
+    const { data, error, isValidating }: SWRResponse<ScorecardsResponse, any> = useSWR<ScorecardsResponse>(
+        `${baseUrl}/scorecards?${query.toString()}`,
+        fetcher,
+    )
+
+    return {
+        error,
+        isValidating,
+        metadata: data?.metadata,
+        scoreCards: data?.scoreCards || [],
+    }
+}
diff --git a/src/apps/review/src/lib/models/Scorecard.model.ts b/src/apps/review/src/lib/models/Scorecard.model.ts
new file mode 100644
index 000000000..81c7c8f69
--- /dev/null
+++ b/src/apps/review/src/lib/models/Scorecard.model.ts
@@ -0,0 +1,97 @@
+/**
+ * Scorecard
+ */
+
+export enum ProjectType {
+  DEVELOPMENT = 'DEVELOPMENT',
+  DATA_SCIENCE = 'DATA_SCIENCE',
+  DESIGN = 'DESIGN',
+  QUALITY_ASSURANCE = 'QUALITY_ASSURANCE',
+}
+
+export const ProjectTypeLabels: Record<ProjectType, string> = {
+    [ProjectType.DEVELOPMENT]: 'Development',
+    [ProjectType.DATA_SCIENCE]: 'Data Science',
+    [ProjectType.DESIGN]: 'Design',
+    [ProjectType.QUALITY_ASSURANCE]: 'Quality Assurance',
+}
+
+export const categoryByProjectType = {
+    DATA_SCIENCE: ['Marathon Match'],
+    DESIGN: [
+        'Design',
+        'Banners/Icons',
+        'Web Design',
+        'Wireframes',
+        'Logo Design',
+        'Print/Presentation',
+        'Widget or Mobile Screen Design',
+        'Application Front-End Design',
+        'Design First2Finish',
+    ],
+    DEVELOPMENT: [
+        'Development',
+        'Security',
+        'Architecture',
+        'Deployment',
+        'Process',
+        'UI Prototype Competition',
+        'Conceptualization',
+        'RIA Build Competition',
+        'RIA Component Competition',
+        'Front-End Flash',
+        'First2Finish',
+        'Code',
+    ],
+    QUALITY_ASSURANCE: [
+        'Testing Competition',
+        'Test Suites',
+        'Test Scenarios',
+        'Reporting',
+        'Automated Testing',
+    ],
+} satisfies Record<ProjectType, string[]>
+
+export enum ScorecardStatus {
+  ACTIVE = 'ACTIVE',
+  INACTIVE = 'INACTIVE',
+  DELETED = 'DELETED',
+}
+
+export const ScorecardStatusLabels: Record<ScorecardStatus, string> = {
+    [ScorecardStatus.ACTIVE]: 'Active',
+    [ScorecardStatus.INACTIVE]: 'Inactive',
+    [ScorecardStatus.DELETED]: 'Deleted',
+}
+
+export enum ScorecardType {
+  SCREENING = 'SCREENING',
+  REVIEW = 'REVIEW',
+  APPROVAL = 'APPROVAL',
+  POST_MORTEM = 'POST_MORTEM',
+  SPECIFICATION_REVIEW = 'SPECIFICATION_REVIEW',
+  CHECKPOINT_SCREENING = 'CHECKPOINT_SCREENING',
+  CHECKPOINT_REVIEW = 'CHECKPOINT_REVIEW',
+  ITERATIVE_REVIEW = 'ITERATIVE_REVIEW',
+}
+
+export const ScorecardTypeLabels: Record<ScorecardType, string> = {
+    [ScorecardType.SCREENING]: 'Screening',
+    [ScorecardType.REVIEW]: 'Review',
+    [ScorecardType.APPROVAL]: 'Approval',
+    [ScorecardType.POST_MORTEM]: 'Post Mortem',
+    [ScorecardType.SPECIFICATION_REVIEW]: 'Specification Review',
+    [ScorecardType.CHECKPOINT_SCREENING]: 'Checkpoint Screening',
+    [ScorecardType.CHECKPOINT_REVIEW]: 'Checkpoint Review',
+    [ScorecardType.ITERATIVE_REVIEW]: 'Iterative Review',
+}
+
+export interface Scorecard {
+    id: string
+    name: string
+    type: ScorecardType
+    challengeTrack: ProjectType
+    category: string
+    status: ScorecardStatus
+    index?: number
+}
diff --git a/src/apps/review/src/lib/models/index.ts b/src/apps/review/src/lib/models/index.ts
index 8b8c6bb12..f7951da54 100644
--- a/src/apps/review/src/lib/models/index.ts
+++ b/src/apps/review/src/lib/models/index.ts
@@ -41,3 +41,4 @@ export * from './FormContactManager.model'
 export * from './BackendContactRequest.model'
 export * from './MyRoleInfosMappingType.type'
 export * from './ChallengeRole.type'
+export * from './Scorecard.model'
diff --git a/src/apps/review/src/lib/services/scorecards.service.ts b/src/apps/review/src/lib/services/scorecards.service.ts
index abe4b6770..f04745be2 100644
--- a/src/apps/review/src/lib/services/scorecards.service.ts
+++ b/src/apps/review/src/lib/services/scorecards.service.ts
@@ -1,8 +1,13 @@
 /**
  * Scorecards service
  */
+import { xhrPostAsync } from '~/libs/core'
+import { EnvironmentConfig } from '~/config'
+
 import { MockScorecard } from '../../mock-datas'
-import { adjustScorecardInfo, ScorecardInfo } from '../models'
+import { adjustScorecardInfo, Scorecard, ScorecardInfo } from '../models'
+
+const baseUrl = `${EnvironmentConfig.API.V6}/review/scorecards`
 
 /**
  * Fetch scorecard
@@ -10,3 +15,12 @@ import { adjustScorecardInfo, ScorecardInfo } from '../models'
  */
 export const fetchScorecards
   = async (): Promise<ScorecardInfo> => Promise.resolve(adjustScorecardInfo(MockScorecard) as ScorecardInfo)
+
+/**
+ * Clone scorecard
+ * @param scorecard Scorecard to clone
+ * @returns resolves to the cloned scorecard info
+ */
+export const cloneScorecard = async (scorecard: Pick<Scorecard, 'id'>): Promise<Scorecard> => (
+    xhrPostAsync(`${baseUrl}/${scorecard.id}/clone`, {})
+)
diff --git a/src/apps/review/src/pages/scorecards/ScorecardsContainer.tsx b/src/apps/review/src/pages/scorecards/ScorecardsContainer.tsx
new file mode 100644
index 000000000..d6a15b92c
--- /dev/null
+++ b/src/apps/review/src/pages/scorecards/ScorecardsContainer.tsx
@@ -0,0 +1,40 @@
+/**
+ * The router outlet.
+ */
+
+import { FC, PropsWithChildren, useContext, useEffect, useMemo } from 'react'
+import { Outlet, Routes, useLocation } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { reviewRoutes } from '../../review-app.routes'
+import { scorecardRouteId } from '../../config/routes.config'
+
+export const ScorecardsContainer: FC<PropsWithChildren> = () => {
+    const location = useLocation()
+    const childRoutes = useChildRoutes()
+
+    useEffect(() => {
+        window.scrollTo(0, 0)
+    }, [location.pathname])
+
+    return (
+        <>
+            <Outlet />
+            <Routes>{childRoutes}</Routes>
+        </>
+    )
+}
+
+function useChildRoutes(): Array<JSX.Element> | undefined {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => reviewRoutes[0].children
+            ?.find(r => r.id === scorecardRouteId)
+            ?.children?.map(getRouteElement),
+        [getRouteElement],
+    )
+    return childRoutes
+}
+
+export default ScorecardsContainer
diff --git a/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.module.scss b/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.module.scss
new file mode 100644
index 000000000..4da677ea0
--- /dev/null
+++ b/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.module.scss
@@ -0,0 +1,3 @@
+.totalScorecards {
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.tsx b/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.tsx
new file mode 100644
index 000000000..e8144d6d0
--- /dev/null
+++ b/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.tsx
@@ -0,0 +1,121 @@
+import { useNavigate } from 'react-router-dom'
+import { FC, useCallback, useMemo, useState } from 'react'
+import { toast } from 'react-toastify'
+
+import { PageTitle, useConfirmationModal } from '~/libs/ui'
+import { TableLoading } from '~/apps/admin/src/lib'
+
+import { Scorecard } from '../../../lib/models'
+import { cloneScorecard } from '../../../lib/services'
+import { PageWrapper, ScorecardsFilter, TableNoRecord, TableScorecards } from '../../../lib'
+import { ScorecardsResponse, useFetchScorecards } from '../../../lib/hooks'
+
+import styles from './ScorecardsListPage.module.scss'
+
+export const ScorecardsListPage: FC<{}> = () => {
+    const navigate = useNavigate()
+    const confirmation = useConfirmationModal()
+
+    const [filters, setFilters] = useState({
+        category: '',
+        name: '',
+        projectType: '',
+        status: '',
+        type: '',
+    })
+    const [page, setPage] = useState(1)
+    const perPage = 10
+
+    const breadCrumb = useMemo(
+        () => [{ index: 1, label: 'Scorecards' }],
+        [],
+    )
+
+    const {
+        scoreCards: scorecards,
+        metadata,
+        isValidating: isLoadingScorecards,
+    }: ScorecardsResponse = useFetchScorecards({
+        challengeTrack: filters.projectType,
+        challengeType: filters.category,
+        name: filters.name,
+        page,
+        perPage,
+        scorecardType: filters.type,
+        status: filters.status,
+    })
+
+    const handleFiltersChange = useCallback((newFilters: typeof filters) => {
+        setFilters(newFilters)
+        setPage(1)
+    }, [])
+
+    const handleScorecardClone = useCallback(async (scorecard: Scorecard) => {
+        if (!await confirmation.confirm({
+            action: 'Clone',
+            content: `Are you sure you want to clone "${scorecard.name}" scorecard?`,
+            title: 'Clone Scorecard',
+        })) {
+            return
+        }
+
+        try {
+            const cloned = await cloneScorecard({ id: scorecard.id })
+            if (!cloned || !cloned.id) {
+                toast.error('Failed to clone scorecard!')
+                return
+            }
+
+            toast.success('Scorecard cloned successfully!')
+            navigate(`${cloned.id}/details`)
+        } catch (error) {
+            toast.error('Failed to clone scorecard!')
+            console.error('Failed to clone scorecard:', error)
+        }
+    }, [navigate, confirmation])
+
+    return (
+        <PageWrapper
+            pageTitle='Scorecards'
+            breadCrumb={breadCrumb}
+        >
+            <PageTitle>Scorecards</PageTitle>
+            <div className={styles.totalScorecards}>
+                {metadata?.total}
+                {' '}
+                scorecards
+            </div>
+            <ScorecardsFilter
+                filters={filters}
+                onFiltersChange={handleFiltersChange}
+            />
+            {isLoadingScorecards ? (
+                <TableLoading />
+            ) : (
+                <>
+                    {scorecards.length === 0 ? (
+                        <TableNoRecord />
+                    ) : (
+                        <TableScorecards
+                            onClone={handleScorecardClone}
+                            totalPages={metadata?.totalPages}
+                            page={page}
+                            setPage={setPage}
+                            datas={scorecards.map((item, i) => ({
+                                ...item,
+                                index: (page - 1) * perPage + i + 1,
+                            }))}
+                            metadata={metadata}
+                            perPage={perPage}
+                        />
+                    )}
+
+                </>
+            )}
+            {confirmation.modal}
+        </PageWrapper>
+    )
+
+}
+
+export default ScorecardsListPage
diff --git a/src/apps/review/src/pages/scorecards/ScorecardsListPage/index.ts b/src/apps/review/src/pages/scorecards/ScorecardsListPage/index.ts
new file mode 100644
index 000000000..3a1089197
--- /dev/null
+++ b/src/apps/review/src/pages/scorecards/ScorecardsListPage/index.ts
@@ -0,0 +1 @@
+export { default as ScorecardsListPage } from './ScorecardsListPage'
diff --git a/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.module.scss b/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.tsx b/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.tsx
new file mode 100644
index 000000000..1de00f221
--- /dev/null
+++ b/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.tsx
@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+const ViewScorecardPage: FC = () => (
+    <div>View scorecard</div>
+)
+
+export default ViewScorecardPage
diff --git a/src/apps/review/src/pages/scorecards/ViewScorecardPage/index.ts b/src/apps/review/src/pages/scorecards/ViewScorecardPage/index.ts
new file mode 100644
index 000000000..2d8897c98
--- /dev/null
+++ b/src/apps/review/src/pages/scorecards/ViewScorecardPage/index.ts
@@ -0,0 +1 @@
+export { default as ViewScorecardPage } from './ViewScorecardPage'
diff --git a/src/apps/review/src/review-app.routes.tsx b/src/apps/review/src/review-app.routes.tsx
index 6c6e56f91..f508a8c4d 100644
--- a/src/apps/review/src/review-app.routes.tsx
+++ b/src/apps/review/src/review-app.routes.tsx
@@ -13,6 +13,7 @@ import {
     activeReviewAssigmentsRouteId,
     challengeDetailRouteId,
     rootRoute,
+    scorecardRouteId,
 } from './config/routes.config'
 
 const ReviewApp: LazyLoadedComponent = lazyLoad(() => import('./ReviewApp'))
@@ -36,6 +37,21 @@ const ScorecardDetailsPage: LazyLoadedComponent = lazyLoad(
     'ScorecardDetailsPage',
 )
 
+const ScorecardsContainer: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/scorecards/ScorecardsContainer'),
+    'ScorecardsContainer',
+)
+
+const ScorecardsListPage: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/scorecards/ScorecardsListPage'),
+    'ScorecardsListPage',
+)
+
+const ViewScorecardPage: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/scorecards/ViewScorecardPage'),
+    'ViewScorecardPage',
+)
+
 export const toolTitle: string = ToolTitle.review
 
 export const reviewRoutes: ReadonlyArray<PlatformRoute> = [
@@ -78,6 +94,24 @@ export const reviewRoutes: ReadonlyArray<PlatformRoute> = [
                 id: activeReviewAssigmentsRouteId,
                 route: activeReviewAssigmentsRouteId,
             },
+            {
+                children: [
+                    {
+                        element: <ScorecardsListPage />,
+                        id: 'list-scorecards-page',
+                        route: '',
+                    },
+                    {
+                        element: <ViewScorecardPage />,
+                        id: 'view-scorecard-page',
+                        route: ':scorecardId',
+                    },
+
+                ],
+                element: <ScorecardsContainer />,
+                id: scorecardRouteId,
+                route: scorecardRouteId,
+            },
         ],
         domain: AppSubdomain.review,
         element: <ReviewApp />,
diff --git a/src/apps/wallet-admin/src/lib/components/payment-method-table/PaymentMethodTable.tsx b/src/apps/wallet-admin/src/lib/components/payment-method-table/PaymentMethodTable.tsx
index 59834b28e..c91fc01d7 100644
--- a/src/apps/wallet-admin/src/lib/components/payment-method-table/PaymentMethodTable.tsx
+++ b/src/apps/wallet-admin/src/lib/components/payment-method-table/PaymentMethodTable.tsx
@@ -29,6 +29,7 @@ const PaymentProviderTable: React.FC<PaymentMethodTableProps> = (props: PaymentM
                         <th className='body-ultra-small-bold'>CONNECTED PROVIDER</th>
                         <th className='body-ultra-small-bold'>PROVIDER ID</th>
                         <th className='body-ultra-small-bold'>STATUS</th>
+                        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                         <th className='body-ultra-small'> </th>
                     </tr>
                 </thead>
diff --git a/src/apps/wallet-admin/src/lib/components/tax-forms-table/TaxFormTable.tsx b/src/apps/wallet-admin/src/lib/components/tax-forms-table/TaxFormTable.tsx
index 149be504a..6df26da92 100644
--- a/src/apps/wallet-admin/src/lib/components/tax-forms-table/TaxFormTable.tsx
+++ b/src/apps/wallet-admin/src/lib/components/tax-forms-table/TaxFormTable.tsx
@@ -30,6 +30,7 @@ const TaxFormTable: React.FC<TaxFormTableProps> = (props: TaxFormTableProps) =>
                         <th className='body-ultra-small-bold'>FORM</th>
                         <th className='body-ultra-small-bold'>DATE FILED</th>
                         <th className='body-ultra-small-bold'>STATUS</th>
+                        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                         <th className='body-ultra-small'> </th>
                     </tr>
                 </thead>
diff --git a/src/libs/ui/lib/styles/variables/_palette.scss b/src/libs/ui/lib/styles/variables/_palette.scss
index 89b2fe392..887a38277 100644
--- a/src/libs/ui/lib/styles/variables/_palette.scss
+++ b/src/libs/ui/lib/styles/variables/_palette.scss
@@ -112,6 +112,7 @@ $teal-25: #C6E6EA;
 // dark
 $teal-120: #1E94A3;
 $teal-140: #227681;
+$teal-160: #00797A;
 
 
 /*  BLUE */