diff --git a/.env.development b/.env.development
index 66244ad78..aceee2814 100644
--- a/.env.development
+++ b/.env.development
@@ -3,3 +3,13 @@ REACT_APP_TERMS_API_URL=https://api.topcoder-dev.com/v5/terms
 REACT_APP_RESOURCES_API_URL=https://api.topcoder-dev.com/v6/resources
 REACT_APP_MEMBER_API_URL=https://api.topcoder-dev.com/v6/members
 REACT_APP_RESOURCE_ROLES_API_URL=https://api.topcoder-dev.com/v6/resource-roles
+REACT_APP_CONTENTFUL_ACCESS_TOKEN=CFPAT-ff4ab52ffbcc85488d7f65bdecd0726117d71a1ad3c71fef567c74f09a8b75a9
+REACT_APP_CONTENTFUL_SPACE_ID=b5f1djy59z3a
+REACT_APP_CONTENTFUL_CHANGELOG_ENTRY_ID=
+REACT_APP_CONTENTFUL_EDU_ACCESS_TOKEN=EXl1Y8-6VFyHBqJqlxGp2LKmyNJJPutDbKH977G07eg
+REACT_APP_CONTENTFUL_EDU_SPACE_ID=piwi0eufbb2g
+REACT_APP_CHALLENGE_API_URL=
+REACT_APP_CHALLENGE_API_VERSION=
+REACT_APP_COMMUNITY_APP_URL=
+REACT_APP_REVIEW_APP_URL=
+REACT_APP_DIRECT_PROJECT_URL=
diff --git a/package.json b/package.json
index 15d23e286..c921ae431 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.40.0",
+    "@contentful/rich-text-html-renderer": "^17.1.6",
     "@datadog/browser-logs": "^4.50.1",
     "@hello-pangea/dnd": "^18.0.1",
     "@heroicons/react": "^1.0.6",
diff --git a/src/apps/admin/src/lib/components/common/DropdownMenu/DropdownMenu.tsx b/src/apps/admin/src/lib/components/common/DropdownMenu/DropdownMenu.tsx
index 9d5f943c8..410e80966 100644
--- a/src/apps/admin/src/lib/components/common/DropdownMenu/DropdownMenu.tsx
+++ b/src/apps/admin/src/lib/components/common/DropdownMenu/DropdownMenu.tsx
@@ -10,10 +10,10 @@ import { usePopper } from 'react-popper'
 import cn from 'classnames'
 
 import { Placement } from '@popperjs/core'
-import { Portal } from '~/libs/ui'
-import { useClickOutsideMultipleElements } from '~/libs/shared'
+import { Portal } from '~/libs/ui/lib/components/portal'
+import { useClickOutsideMultipleElements } from '~/libs/shared/lib/hooks/use-click-outside.hook'
 
-import { useOnScroll } from '../../../hooks'
+import { useOnScroll } from '../../../hooks/useOnScroll'
 
 import styles from './DropdownMenu.module.scss'
 
diff --git a/src/apps/community/index.ts b/src/apps/community/index.ts
new file mode 100644
index 000000000..6f39cd49b
--- /dev/null
+++ b/src/apps/community/index.ts
@@ -0,0 +1 @@
+export * from './src'
diff --git a/src/apps/community/src/CommunityApp.tsx b/src/apps/community/src/CommunityApp.tsx
new file mode 100644
index 000000000..b3e70cefc
--- /dev/null
+++ b/src/apps/community/src/CommunityApp.tsx
@@ -0,0 +1,107 @@
+import { FC, useContext, useEffect, useMemo } from 'react'
+import {
+    Outlet,
+    Routes,
+    useLocation,
+    useNavigate,
+} from 'react-router-dom'
+
+import { AppSubdomain, EnvironmentConfig } from '~/config'
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { resolveCommunityIdFromHost } from './config/community-id.config'
+import {
+    communityLoaderRouteId,
+    forumListingRouteId,
+    rootRoute,
+} from './config/routes.config'
+import { Layout, type LayoutVariant } from './lib'
+import { toolTitle } from './community-app.routes'
+import './lib/styles/index.scss'
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function normalizePath(path: string): string {
+    const collapsed = path.replace(/\/{2,}/g, '/')
+    if (collapsed.length > 1 && collapsed.endsWith('/')) {
+        return collapsed.slice(0, -1)
+    }
+
+    return collapsed || '/'
+}
+
+/**
+ * Root shell for the community app routes.
+ *
+ * @returns The app layout and routed child content.
+ */
+const CommunityApp: FC = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+    const location = useLocation()
+    const navigate = useNavigate()
+    const childRoutes = useMemo(() => getChildRoutes(toolTitle), [getChildRoutes])
+    const routedCommunityId = useMemo(
+        () => resolveCommunityIdFromHost(window.location.host),
+        [],
+    )
+    const communityBasePath = useMemo(
+        () => normalizePath(withLeadingSlash(rootRoute)),
+        [],
+    )
+    const normalizedPath = useMemo(
+        () => normalizePath(location.pathname),
+        [location.pathname],
+    )
+    const isCommunityPage = normalizedPath.includes(`/${communityLoaderRouteId}`)
+    const isForumPage = normalizedPath.includes(`/${forumListingRouteId}`)
+
+    const variant: LayoutVariant
+        = EnvironmentConfig.SUBDOMAIN !== AppSubdomain.community
+            && !isCommunityPage
+            && !isForumPage
+            ? 'standard'
+            : 'community'
+
+    useEffect(() => {
+        if (!routedCommunityId || isCommunityPage) {
+            return
+        }
+
+        const isRootPath = normalizedPath === '/'
+            || normalizedPath === communityBasePath
+        if (!isRootPath) {
+            return
+        }
+
+        const destination = normalizePath(
+            `${communityBasePath}/${communityLoaderRouteId}/${routedCommunityId}`,
+        )
+        navigate(destination, { replace: true })
+    }, [
+        communityBasePath,
+        isCommunityPage,
+        navigate,
+        normalizedPath,
+        routedCommunityId,
+    ])
+
+    useEffect(() => {
+        document.body.classList.add('community-app')
+        return () => {
+            document.body.classList.remove('community-app')
+        }
+    }, [])
+
+    return (
+        <Layout variant={variant}>
+            <Outlet />
+            {childRoutes.length > 0 && <Routes>{childRoutes}</Routes>}
+        </Layout>
+    )
+}
+
+export default CommunityApp
diff --git a/src/apps/community/src/community-app.routes.tsx b/src/apps/community/src/community-app.routes.tsx
new file mode 100644
index 000000000..5c8adf3dc
--- /dev/null
+++ b/src/apps/community/src/community-app.routes.tsx
@@ -0,0 +1,50 @@
+/**
+ * App routes.
+ */
+import { AppSubdomain, ToolTitle } from '~/config'
+import {
+    lazyLoad,
+    LazyLoadedComponent,
+    PlatformRoute,
+} from '~/libs/core'
+
+import { rootRoute } from './config/routes.config'
+import {
+    challengeDetailRoutes,
+    challengeListingRoutes,
+    changelogRoutes,
+    communityLoaderRoutes,
+    forumRoutes,
+    homeRoutes,
+    submissionManagementRoutes,
+    submissionRoutes,
+    thriveRoutes,
+    timelineWallRoutes,
+} from './pages'
+
+const CommunityApp: LazyLoadedComponent = lazyLoad(() => import('./CommunityApp'))
+
+export const toolTitle: string = ToolTitle.community
+
+export const communityRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        children: [
+            ...challengeDetailRoutes,
+            ...challengeListingRoutes,
+            ...changelogRoutes,
+            ...communityLoaderRoutes,
+            ...forumRoutes,
+            ...homeRoutes,
+            ...submissionRoutes,
+            ...submissionManagementRoutes,
+            ...timelineWallRoutes,
+            ...thriveRoutes,
+        ],
+        domain: AppSubdomain.community,
+        element: <CommunityApp />,
+        id: toolTitle,
+        layoutVariant: 'community',
+        route: rootRoute,
+        title: toolTitle,
+    },
+]
diff --git a/src/apps/community/src/config/community-id.config.ts b/src/apps/community/src/config/community-id.config.ts
new file mode 100644
index 000000000..74b4e8bad
--- /dev/null
+++ b/src/apps/community/src/config/community-id.config.ts
@@ -0,0 +1,41 @@
+/**
+ * Community ids with explicit `__community__/{communityId}` route wiring.
+ */
+export const explicitCommunityIds = [
+    'wipro',
+    'veterans',
+    'qa',
+    'mobile',
+    'iot',
+    'cognitive',
+    'blockchain',
+    'cs',
+    'demoexpert',
+    'srmx',
+    'taskforce',
+    'tcproddev',
+    'community2',
+] as const
+
+export type ExplicitCommunityId = (typeof explicitCommunityIds)[number]
+
+const explicitCommunityIdSet: ReadonlySet<string> = new Set(explicitCommunityIds)
+
+/**
+ * Resolves a routed community id from a browser host value.
+ *
+ * @param host Browser `location.host` value.
+ * @returns Community id when the host subdomain matches a routed community.
+ */
+export function resolveCommunityIdFromHost(host: string): ExplicitCommunityId | undefined {
+    const hostname = host
+        .toLowerCase()
+        .split(':')[0]
+    const subdomain = hostname.split('.')[0]
+
+    if (!subdomain || !explicitCommunityIdSet.has(subdomain)) {
+        return undefined
+    }
+
+    return subdomain as ExplicitCommunityId
+}
diff --git a/src/apps/community/src/config/index.config.ts b/src/apps/community/src/config/index.config.ts
new file mode 100644
index 000000000..cc25510a8
--- /dev/null
+++ b/src/apps/community/src/config/index.config.ts
@@ -0,0 +1,50 @@
+/**
+ * Resource role id used to register challenge submitters.
+ */
+export const SUBMITTER_ROLE_ID = '732339e7-8e30-49d7-9198-cccf9451e221'
+
+/**
+ * Challenge statuses used by community challenge filters.
+ */
+export enum CHALLENGE_STATUS {
+    Active = 'Active',
+    Completed = 'Completed',
+    Draft = 'Draft',
+}
+
+/**
+ * Supported Thrive article types.
+ */
+export const THRIVE_ARTICLE_TYPES = ['Article', 'Video', 'Forum post'] as const
+
+/**
+ * Supported Thrive track keys.
+ */
+export const THRIVE_TRACK_KEYS = [
+    'dataScience',
+    'competitiveProgramming',
+    'design',
+    'development',
+    'qualityAssurance',
+    'topcoder',
+] as const
+
+/**
+ * Max retry attempts when checking term agreement status.
+ */
+export const TERMS_CHECK_MAX_ATTEMPTS = 5
+
+/**
+ * Delay between term status retries in milliseconds.
+ */
+export const TERMS_CHECK_DELAY_MS = 5000
+
+/**
+ * Wipro email domain used for challenge registration checks.
+ */
+export const WIPRO_EMAIL_DOMAIN = '@wipro.com'
+
+/**
+ * External TopGear redirect url.
+ */
+export const TOPGEAR_REDIRECT_URL = 'https://topgear-app.wipro.com'
diff --git a/src/apps/community/src/config/routes.config.ts b/src/apps/community/src/config/routes.config.ts
new file mode 100644
index 000000000..10192dc2f
--- /dev/null
+++ b/src/apps/community/src/config/routes.config.ts
@@ -0,0 +1,25 @@
+/**
+ * Common config for routes in community app.
+ */
+import { AppSubdomain, EnvironmentConfig } from '~/config'
+
+export const rootRoute: string
+    = EnvironmentConfig.SUBDOMAIN === AppSubdomain.community
+        ? ''
+        : '/community'
+
+export const challengeListingRouteId = 'challenges'
+export const challengeDetailRouteId = 'challenges/:challengeId'
+export const submissionRouteId = 'challenges/:challengeId/submit'
+export const submissionManagementRouteId = 'challenges/:challengeId/my-submissions'
+export const forumListingRouteId = 'forums'
+export const forumCreateTopicRouteId = 'forums/new'
+export const forumTopicRouteId = 'forums/:topicId'
+export const homeRouteId = 'home'
+export const thriveListingRouteId = 'thrive'
+export const thriveTracksRouteId = 'thrive/tracks'
+export const thriveSearchRouteId = 'thrive/search'
+export const thriveArticleRouteId = 'thrive/:articleTitle'
+export const changelogRouteId = 'changelog'
+export const timelineWallRouteId = 'timeline-wall'
+export const communityLoaderRouteId = '__community__'
diff --git a/src/apps/community/src/index.ts b/src/apps/community/src/index.ts
new file mode 100644
index 000000000..7e17c17d1
--- /dev/null
+++ b/src/apps/community/src/index.ts
@@ -0,0 +1,2 @@
+export { communityRoutes } from './community-app.routes'
+export { rootRoute as communityRootRoute } from './config/routes.config'
diff --git a/src/apps/community/src/lib/components/AccessDenied/AccessDenied.module.scss b/src/apps/community/src/lib/components/AccessDenied/AccessDenied.module.scss
new file mode 100644
index 000000000..c05d6f383
--- /dev/null
+++ b/src/apps/community/src/lib/components/AccessDenied/AccessDenied.module.scss
@@ -0,0 +1,37 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+    justify-content: center;
+    min-height: 420px;
+    padding: $sp-6 $sp-3;
+    text-align: center;
+}
+
+.logo {
+    color: var(--black-100);
+    height: 36px;
+    width: 200px;
+}
+
+.title {
+    color: var(--black-100);
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.message {
+    color: var(--GrayFontColor);
+    margin: 0;
+    max-width: 480px;
+}
+
+.meta {
+    color: var(--GrayFontColor);
+    font-size: 12px;
+    margin: 0;
+}
diff --git a/src/apps/community/src/lib/components/AccessDenied/AccessDenied.tsx b/src/apps/community/src/lib/components/AccessDenied/AccessDenied.tsx
new file mode 100644
index 000000000..9bb3dc79b
--- /dev/null
+++ b/src/apps/community/src/lib/components/AccessDenied/AccessDenied.tsx
@@ -0,0 +1,72 @@
+import { FC, useCallback } from 'react'
+
+import { authUrlLogin } from '~/libs/core'
+import { Button, TcLogoSvg } from '~/libs/ui'
+
+import styles from './AccessDenied.module.scss'
+
+export enum AccessDeniedCause {
+    NOT_AUTHENTICATED = 'NOT_AUTHENTICATED',
+    NOT_AUTHORIZED = 'NOT_AUTHORIZED',
+}
+
+export interface AccessDeniedProps {
+    cause: AccessDeniedCause
+    communityId?: string
+}
+
+/**
+ * Renders a standardized access denied view for authentication/authorization failures.
+ *
+ * @param props Access denied cause with optional community id for login attribution.
+ * @returns Access denied message with contextual action.
+ */
+const AccessDenied: FC<AccessDeniedProps> = (props: AccessDeniedProps) => {
+    const handleLogin = useCallback((): void => {
+        window.location.assign(authUrlLogin(window.location.href))
+    }, [])
+    const handleBackToHome = useCallback((): void => {
+        window.location.assign('/')
+    }, [])
+
+    if (props.cause === AccessDeniedCause.NOT_AUTHENTICATED) {
+        return (
+            <section className={styles.container}>
+                <TcLogoSvg className={styles.logo} />
+                <h1 className={styles.title}>Access Denied</h1>
+                <p className={styles.message}>
+                    You must be authenticated to access this page.
+                </p>
+                {props.communityId && (
+                    <p className={styles.meta}>
+                        Community:
+                        {' '}
+                        {props.communityId}
+                    </p>
+                )}
+                <Button
+                    label='Log In Here'
+                    onClick={handleLogin}
+                    primary
+                />
+            </section>
+        )
+    }
+
+    return (
+        <section className={styles.container}>
+            <TcLogoSvg className={styles.logo} />
+            <h1 className={styles.title}>Not Authorized</h1>
+            <p className={styles.message}>
+                You are not authorized to access this page.
+            </p>
+            <Button
+                label='Back to Home'
+                onClick={handleBackToHome}
+                secondary
+            />
+        </section>
+    )
+}
+
+export default AccessDenied
diff --git a/src/apps/community/src/lib/components/AccessDenied/index.ts b/src/apps/community/src/lib/components/AccessDenied/index.ts
new file mode 100644
index 000000000..1943711f0
--- /dev/null
+++ b/src/apps/community/src/lib/components/AccessDenied/index.ts
@@ -0,0 +1,2 @@
+export { default as AccessDenied } from './AccessDenied'
+export * from './AccessDenied'
diff --git a/src/apps/community/src/lib/components/CommunityHeader/CommunityHeader.module.scss b/src/apps/community/src/lib/components/CommunityHeader/CommunityHeader.module.scss
new file mode 100644
index 000000000..1d2375171
--- /dev/null
+++ b/src/apps/community/src/lib/components/CommunityHeader/CommunityHeader.module.scss
@@ -0,0 +1,225 @@
+@import '@libs/ui/styles/includes';
+
+.header {
+    background: #f8fafc;
+    border-bottom: 1px solid #e5e7eb;
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+    padding: $sp-3 $sp-4;
+    width: 100%;
+}
+
+.topBar {
+    align-items: center;
+    display: flex;
+    gap: $sp-3;
+}
+
+.mobileToggle {
+    align-items: center;
+    background: transparent;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    cursor: pointer;
+    display: none;
+    flex-direction: column;
+    gap: 3px;
+    height: 32px;
+    justify-content: center;
+    padding: 0;
+    width: 32px;
+
+    span {
+        background: #111827;
+        border-radius: 1px;
+        display: block;
+        height: 2px;
+        width: 14px;
+    }
+
+    @include ltesm {
+        display: inline-flex;
+    }
+}
+
+.logoBar {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: $sp-3;
+}
+
+.logoLink {
+    display: inline-flex;
+}
+
+.logoImage {
+    display: block;
+    max-height: 44px;
+    max-width: 220px;
+    object-fit: contain;
+}
+
+.userSection {
+    align-items: center;
+    display: flex;
+    gap: $sp-2;
+    margin-left: auto;
+    position: relative;
+}
+
+.userHandle {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: var(--black-100);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 14px;
+    font-weight: 600;
+    gap: $sp-2;
+    margin: 0;
+    padding: 0;
+}
+
+.avatarImage {
+    border-radius: 50%;
+    display: block;
+    height: 28px;
+    object-fit: cover;
+    width: 28px;
+}
+
+.avatarFallback {
+    align-items: center;
+    background: #e5e7eb;
+    border-radius: 50%;
+    display: inline-flex;
+    height: 28px;
+    justify-content: center;
+    overflow: hidden;
+    width: 28px;
+
+    :global(svg) {
+        height: 20px;
+        width: 20px;
+    }
+}
+
+.userDropdown {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    list-style: none;
+    margin: 0;
+    min-width: 180px;
+    padding: $sp-1 0;
+    position: absolute;
+    right: 0;
+    top: calc(100% + $sp-2);
+    z-index: 10;
+}
+
+.userDropdownItem {
+    color: var(--black-100);
+    display: block;
+    font-size: 14px;
+    padding: $sp-2 $sp-3;
+    text-decoration: none;
+
+    &:hover {
+        background: #f3f4f6;
+    }
+}
+
+.authButton {
+    background: transparent;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    color: var(--black-100);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    padding: $sp-2 $sp-3;
+}
+
+.authButtonPrimary {
+    background: #0d61bf;
+    border: 1px solid #0d61bf;
+    border-radius: 6px;
+    color: #fff;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    padding: $sp-2 $sp-3;
+}
+
+.nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $sp-3;
+
+    @include ltesm {
+        display: none;
+    }
+}
+
+.navOpen {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $sp-3;
+
+    @include ltesm {
+        border-top: 1px solid #e5e7eb;
+        display: flex;
+        flex-direction: column;
+        gap: $sp-2;
+        padding-top: $sp-2;
+    }
+}
+
+.navItem {
+    color: var(--black-100);
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.navItemActive {
+    color: var(--black-100);
+    font-size: 14px;
+    font-weight: 700;
+    text-decoration: underline;
+}
+
+@include ltesm {
+    .topBar {
+        gap: $sp-2;
+    }
+
+    .logoBar {
+        gap: $sp-2;
+    }
+
+    .logoImage {
+        max-height: 32px;
+        max-width: 140px;
+    }
+
+    .userHandle {
+        font-size: 12px;
+    }
+
+    .authButton,
+    .authButtonPrimary {
+        font-size: 12px;
+        padding: $sp-1 $sp-2;
+    }
+}
diff --git a/src/apps/community/src/lib/components/CommunityHeader/CommunityHeader.tsx b/src/apps/community/src/lib/components/CommunityHeader/CommunityHeader.tsx
new file mode 100644
index 000000000..4f8d7007a
--- /dev/null
+++ b/src/apps/community/src/lib/components/CommunityHeader/CommunityHeader.tsx
@@ -0,0 +1,385 @@
+import { FC, useCallback, useContext, useMemo, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import { EnvironmentConfig } from '~/config'
+import {
+    authUrlLogin,
+    authUrlSignup,
+    profileContext,
+    ProfileContextData,
+} from '~/libs/core'
+import { ConfigContextValue, useConfigContext } from '~/libs/shared'
+import { DefaultMemberIcon } from '~/libs/ui'
+
+import { CommunityMeta } from '../../models'
+
+import styles from './CommunityHeader.module.scss'
+
+interface CommunityHeaderProps {
+    baseUrl?: string
+    meta: CommunityMeta
+}
+
+interface ResolvedCommunityLogo {
+    alt: string
+    href: string
+    src: string
+}
+
+interface ResolvedMenuItem {
+    href: string
+    label: string
+    openNewTab: boolean
+}
+
+interface AvatarProps {
+    photoUrl?: string
+    userHandle: string
+    userRating?: number
+}
+
+/**
+ * Converts an unknown value into a string when possible.
+ *
+ * @param value Value from metadata payload.
+ * @returns Trimmed string or undefined.
+ */
+function asString(value: unknown): string | undefined {
+    return typeof value === 'string' && value.trim()
+        ? value
+        : undefined
+}
+
+/**
+ * Builds a normalized logo model from community metadata.
+ *
+ * @param logo Raw logo record.
+ * @param index Zero-based logo index.
+ * @returns Normalized logo model.
+ */
+function resolveLogo(logo: Record<string, unknown>, index: number): ResolvedCommunityLogo | undefined {
+    const src = asString(logo.img)
+        ?? asString(logo.image)
+        ?? asString(logo.imageUrl)
+        ?? asString(logo.imageURL)
+        ?? asString(logo.src)
+    if (!src) {
+        return undefined
+    }
+
+    return {
+        alt: asString(logo.alt)
+            ?? asString(logo.title)
+            ?? asString(logo.name)
+            ?? `community-logo-${index + 1}`,
+        href: asString(logo.href)
+            ?? asString(logo.link)
+            ?? asString(logo.url)
+            ?? '#',
+        src,
+    }
+}
+
+/**
+ * Builds a normalized menu item model from community metadata.
+ *
+ * @param menuItem Raw menu record.
+ * @returns Normalized menu item.
+ */
+function resolveMenuItem(menuItem: Record<string, unknown>): ResolvedMenuItem | undefined {
+    const label = asString(menuItem.title)
+        ?? asString(menuItem.label)
+        ?? asString(menuItem.name)
+        ?? asString(menuItem.text)
+    const href = asString(menuItem.href)
+        ?? asString(menuItem.link)
+        ?? asString(menuItem.url)
+        ?? asString(menuItem.path)
+
+    if (!label || !href) {
+        return undefined
+    }
+
+    return {
+        href,
+        label,
+        openNewTab: menuItem.openNewTab === true,
+    }
+}
+
+/**
+ * Removes trailing slashes from non-root pathnames before route comparisons.
+ *
+ * @param pathname Pathname to normalize.
+ * @returns Normalized pathname.
+ */
+function normalizePathname(pathname: string): string {
+    if (!pathname) {
+        return '/'
+    }
+
+    if (pathname !== '/' && pathname.endsWith('/')) {
+        return pathname.slice(0, -1)
+    }
+
+    return pathname
+}
+
+/**
+ * Removes the community base URL prefix for relative navigation item matching.
+ *
+ * @param pathname Current browser pathname.
+ * @param baseUrl Community route base URL.
+ * @returns Pathname without the base URL prefix.
+ */
+function stripBaseUrlPrefix(pathname: string, baseUrl?: string): string {
+    if (!baseUrl) {
+        return pathname
+    }
+
+    if (pathname === baseUrl) {
+        return '/'
+    }
+
+    if (pathname.startsWith(`${baseUrl}/`)) {
+        return pathname.slice(baseUrl.length) || '/'
+    }
+
+    return pathname
+}
+
+/**
+ * Renders the profile avatar image or default member icon.
+ *
+ * @param props Avatar data.
+ * @returns Profile avatar element.
+ */
+const Avatar: FC<AvatarProps> = (props: AvatarProps) => {
+    if (props.photoUrl) {
+        return (
+            <img
+                alt={`${props.userHandle} avatar`}
+                className={styles.avatarImage}
+                src={props.photoUrl}
+            />
+        )
+    }
+
+    const ratingLabel = typeof props.userRating === 'number'
+        ? `Rating ${props.userRating}`
+        : 'Unrated member'
+
+    return (
+        <span
+            aria-label={ratingLabel}
+            className={styles.avatarFallback}
+            title={ratingLabel}
+        >
+            <DefaultMemberIcon />
+        </span>
+    )
+}
+
+/**
+ * Community branded header that renders logos, metadata navigation and user actions.
+ *
+ * @param props Community metadata and optional base URL for relative links.
+ * @returns Community header with branding, nav and user menu.
+ */
+const CommunityHeader: FC<CommunityHeaderProps> = (props: CommunityHeaderProps) => {
+    const [isMobileOpen, setIsMobileOpen] = useState<boolean>(false)
+    const [isUserMenuOpen, setIsUserMenuOpen] = useState<boolean>(false)
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const { logoutUrl }: ConfigContextValue = useConfigContext()
+    const location = useLocation()
+
+    const logos = useMemo(
+        () => props.meta.logos
+            .map((logo, index) => resolveLogo(logo as Record<string, unknown>, index))
+            .filter((logo): logo is ResolvedCommunityLogo => Boolean(logo)),
+        [props.meta.logos],
+    )
+    const menuItems = useMemo(
+        () => props.meta.menuItems
+            .map(item => resolveMenuItem(item as Record<string, unknown>))
+            .filter((item): item is ResolvedMenuItem => Boolean(item)),
+        [props.meta.menuItems],
+    )
+
+    const isWiproMember = profile?.email?.includes('@wipro.com') === true
+    const communityBaseUrl = EnvironmentConfig.COMMUNITY_APP_URL ?? EnvironmentConfig.TOPCODER_URL
+    const profileLink = isWiproMember
+        ? 'https://topgear-app.wipro.com/user-details'
+        : `${EnvironmentConfig.TOPCODER_URL}/members/${profile?.handle ?? ''}`
+    const paymentsLink = isWiproMember
+        ? 'https://topgear-app.wipro.com/my_payments'
+        : `${communityBaseUrl}/PactsMemberServlet?module=PaymentHistory&full_list=false`
+    const routePathname = normalizePathname(stripBaseUrlPrefix(location.pathname, props.baseUrl))
+    const toggleMobileMenu = useCallback(() => {
+        setIsMobileOpen(previous => !previous)
+    }, [])
+    const toggleUserMenu = useCallback(() => {
+        setIsUserMenuOpen(previous => !previous)
+    }, [])
+    const closeUserMenu = useCallback(() => {
+        setIsUserMenuOpen(false)
+    }, [])
+    const navigateToLogin = useCallback(() => {
+        window.location.assign(authUrlLogin(window.location.href))
+    }, [])
+    const navigateToSignup = useCallback(() => {
+        window.location.assign(authUrlSignup())
+    }, [])
+
+    return (
+        <header className={styles.header}>
+            <div className={styles.topBar}>
+                <button
+                    aria-expanded={isMobileOpen}
+                    aria-label='Toggle navigation menu'
+                    className={styles.mobileToggle}
+                    onClick={toggleMobileMenu}
+                    type='button'
+                >
+                    <span />
+                    <span />
+                    <span />
+                </button>
+
+                {logos.length > 0 && (
+                    <div className={styles.logoBar}>
+                        {logos.map(logo => (
+                            <a
+                                className={styles.logoLink}
+                                href={logo.href}
+                                key={`${logo.href}-${logo.src}`}
+                                rel='noreferrer'
+                                target='_blank'
+                            >
+                                <img
+                                    alt={logo.alt}
+                                    className={styles.logoImage}
+                                    src={logo.src}
+                                />
+                            </a>
+                        ))}
+                    </div>
+                )}
+
+                <div className={styles.userSection}>
+                    {profile ? (
+                        <>
+                            <button
+                                aria-expanded={isUserMenuOpen}
+                                className={styles.userHandle}
+                                onClick={toggleUserMenu}
+                                type='button'
+                            >
+                                <span>{profile.handle}</span>
+                                <Avatar
+                                    photoUrl={profile.photoURL}
+                                    userHandle={profile.handle}
+                                    userRating={profile.maxRating?.rating}
+                                />
+                            </button>
+
+                            {isUserMenuOpen && (
+                                <ul className={styles.userDropdown}>
+                                    <li>
+                                        <a
+                                            className={styles.userDropdownItem}
+                                            href={profileLink}
+                                            onClick={closeUserMenu}
+                                        >
+                                            My Profile
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            className={styles.userDropdownItem}
+                                            href={paymentsLink}
+                                            onClick={closeUserMenu}
+                                            rel='noreferrer'
+                                            target='_blank'
+                                        >
+                                            Payments
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            className={styles.userDropdownItem}
+                                            href={EnvironmentConfig.URLS.ACCOUNT_SETTINGS}
+                                            onClick={closeUserMenu}
+                                        >
+                                            Settings
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            className={styles.userDropdownItem}
+                                            href={logoutUrl}
+                                            onClick={closeUserMenu}
+                                        >
+                                            Log Out
+                                        </a>
+                                    </li>
+                                </ul>
+                            )}
+                        </>
+                    ) : (
+                        <>
+                            <button
+                                className={styles.authButton}
+                                onClick={navigateToLogin}
+                                type='button'
+                            >
+                                Log In
+                            </button>
+                            <button
+                                className={styles.authButtonPrimary}
+                                onClick={navigateToSignup}
+                                type='button'
+                            >
+                                Join Topcoder
+                            </button>
+                        </>
+                    )}
+                </div>
+            </div>
+
+            {menuItems.length > 0 && (
+                <nav className={isMobileOpen ? styles.navOpen : styles.nav}>
+                    {menuItems.map(item => {
+                        const isExternalLink = item.href.startsWith('http')
+                        const href = isExternalLink
+                            ? item.href
+                            : `${props.baseUrl ?? ''}${item.href}`
+                        const isActive = isExternalLink
+                            ? normalizePathname(new URL(item.href).pathname) === normalizePathname(location.pathname)
+                            : normalizePathname(item.href) === routePathname
+
+                        return (
+                            <a
+                                className={isActive ? styles.navItemActive : styles.navItem}
+                                href={href}
+                                key={`${item.href}-${item.label}`}
+                                rel={item.openNewTab ? 'noreferrer' : undefined}
+                                target={item.openNewTab ? '_blank' : undefined}
+                            >
+                                {item.label}
+                            </a>
+                        )
+                    })}
+                </nav>
+            )}
+        </header>
+    )
+}
+
+export default CommunityHeader
+
+export type {
+    CommunityHeaderProps,
+    ResolvedCommunityLogo,
+    ResolvedMenuItem,
+}
diff --git a/src/apps/community/src/lib/components/CommunityHeader/index.ts b/src/apps/community/src/lib/components/CommunityHeader/index.ts
new file mode 100644
index 000000000..849d3ff6e
--- /dev/null
+++ b/src/apps/community/src/lib/components/CommunityHeader/index.ts
@@ -0,0 +1,5 @@
+import CommunityHeader from './CommunityHeader'
+
+export { CommunityHeader }
+export * from './CommunityHeader'
+export default CommunityHeader
diff --git a/src/apps/community/src/lib/components/CommunityLayout/CommunityLayout.module.scss b/src/apps/community/src/lib/components/CommunityLayout/CommunityLayout.module.scss
new file mode 100644
index 000000000..184abda96
--- /dev/null
+++ b/src/apps/community/src/lib/components/CommunityLayout/CommunityLayout.module.scss
@@ -0,0 +1,20 @@
+@import '@libs/ui/styles/includes';
+
+.layout {
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.content {
+    flex: 1;
+}
+
+.footer {
+    background: #f8fafc;
+    border-top: 1px solid #e5e7eb;
+    color: var(--GrayFontColor);
+    font-size: 12px;
+    padding: $sp-3 $sp-4;
+}
diff --git a/src/apps/community/src/lib/components/CommunityLayout/CommunityLayout.tsx b/src/apps/community/src/lib/components/CommunityLayout/CommunityLayout.tsx
new file mode 100644
index 000000000..26e5ca3a5
--- /dev/null
+++ b/src/apps/community/src/lib/components/CommunityLayout/CommunityLayout.tsx
@@ -0,0 +1,55 @@
+import { FC, ReactNode } from 'react'
+
+import { CommunityMeta } from '../../models'
+import { CommunityHeader } from '../CommunityHeader'
+
+import styles from './CommunityLayout.module.scss'
+
+interface CommunityLayoutProps {
+    baseUrl?: string
+    children: ReactNode
+    meta: CommunityMeta
+}
+
+/**
+ * Extracts footer text from a community metadata blob.
+ *
+ * @param metadata Arbitrary community metadata.
+ * @returns Footer text when configured.
+ */
+function getFooterText(metadata: Record<string, unknown>): string | undefined {
+    const footerText = metadata.footerText
+    return typeof footerText === 'string' && footerText.trim()
+        ? footerText
+        : undefined
+}
+
+/**
+ * Community shell that renders metadata-driven branding, navigation and route content.
+ *
+ * @param props Community metadata, community route base URL and nested route content.
+ * @returns Header/content/footer community layout.
+ */
+const CommunityLayout: FC<CommunityLayoutProps> = (props: CommunityLayoutProps) => {
+    const footerText = getFooterText(props.meta.metadata)
+        ?? '© Topcoder. All rights reserved.'
+
+    return (
+        <div className={styles.layout}>
+            <CommunityHeader
+                baseUrl={props.baseUrl}
+                meta={props.meta}
+            />
+
+            <main className={styles.content}>
+                {props.children}
+            </main>
+
+            <footer className={styles.footer}>
+                {footerText}
+            </footer>
+        </div>
+    )
+}
+
+export default CommunityLayout
diff --git a/src/apps/community/src/lib/components/CommunityLayout/index.ts b/src/apps/community/src/lib/components/CommunityLayout/index.ts
new file mode 100644
index 000000000..0349825ba
--- /dev/null
+++ b/src/apps/community/src/lib/components/CommunityLayout/index.ts
@@ -0,0 +1,2 @@
+export { default as CommunityLayout } from './CommunityLayout'
+export * from './CommunityLayout'
diff --git a/src/apps/community/src/lib/components/Layout/Layout.module.scss b/src/apps/community/src/lib/components/Layout/Layout.module.scss
new file mode 100644
index 000000000..798b0cc28
--- /dev/null
+++ b/src/apps/community/src/lib/components/Layout/Layout.module.scss
@@ -0,0 +1,29 @@
+@import '@libs/ui/styles/includes';
+
+.contentLayoutOuter {
+    margin: $sp-6 auto !important;
+}
+
+.contentLayoutInner {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.standardLayout {
+    position: relative;
+}
+
+.communityLayout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
+.communityHeaderSlot,
+.communityFooterSlot {
+    width: 100%;
+}
+
+.communityContent {
+    flex: 1;
+}
diff --git a/src/apps/community/src/lib/components/Layout/Layout.tsx b/src/apps/community/src/lib/components/Layout/Layout.tsx
new file mode 100644
index 000000000..d507f11cc
--- /dev/null
+++ b/src/apps/community/src/lib/components/Layout/Layout.tsx
@@ -0,0 +1,52 @@
+import { FC, PropsWithChildren } from 'react'
+
+import { AppFooter } from '~/apps/platform/src/components/app-footer'
+import { AppHeader } from '~/apps/platform/src/components/app-header'
+import { ContentLayout } from '~/libs/ui'
+
+import styles from './Layout.module.scss'
+
+export type LayoutVariant = 'standard' | 'community'
+
+interface LayoutProps {
+    variant?: LayoutVariant
+}
+
+/**
+ * Passthrough layout used by routes that do not need additional wrappers.
+ *
+ * @param props Child content to render.
+ * @returns The child content unchanged.
+ */
+export const NullLayout: FC<PropsWithChildren> = props => (
+    <>{props.children}</>
+)
+
+/**
+ * Shared community app layout.
+ *
+ * @param props Layout variant and nested route content.
+ * @returns The standard app shell/content layout or plain community children.
+ */
+export const Layout: FC<PropsWithChildren<LayoutProps>> = props => {
+    const variant: LayoutVariant = props.variant ?? 'standard'
+
+    if (variant === 'community') {
+        return <>{props.children}</>
+    }
+
+    return (
+        <>
+            <AppHeader navType='tool' />
+            <ContentLayout
+                innerClass={styles.contentLayoutInner}
+                outerClass={styles.contentLayoutOuter}
+            >
+                <div className={styles.standardLayout}>{props.children}</div>
+            </ContentLayout>
+            <AppFooter />
+        </>
+    )
+}
+
+export default Layout
diff --git a/src/apps/community/src/lib/components/Layout/index.ts b/src/apps/community/src/lib/components/Layout/index.ts
new file mode 100644
index 000000000..a2e510e8c
--- /dev/null
+++ b/src/apps/community/src/lib/components/Layout/index.ts
@@ -0,0 +1,2 @@
+export * from './Layout'
+export { default as Layout } from './Layout'
diff --git a/src/apps/community/src/lib/components/TermsModal/TermsModal.module.scss b/src/apps/community/src/lib/components/TermsModal/TermsModal.module.scss
new file mode 100644
index 000000000..22856b97a
--- /dev/null
+++ b/src/apps/community/src/lib/components/TermsModal/TermsModal.module.scss
@@ -0,0 +1,140 @@
+@import '@libs/ui/styles/includes';
+
+.modalBody {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+    min-height: 520px;
+}
+
+.layout {
+    display: flex;
+    flex: 1;
+    gap: $sp-3;
+    min-height: 0;
+}
+
+.sidebar {
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    display: flex;
+    flex: 0 0 30%;
+    flex-direction: column;
+    gap: $sp-1;
+    min-height: 0;
+    overflow: auto;
+    padding: $sp-2;
+}
+
+.termItem {
+    align-items: center;
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 6px;
+    color: var(--GrayFontColor);
+    cursor: pointer;
+    display: flex;
+    font-size: 13px;
+    gap: $sp-2;
+    justify-content: space-between;
+    padding: $sp-2;
+    text-align: left;
+}
+
+.termItemActive {
+    border-color: var(--teal-100);
+    box-shadow: inset 0 0 0 1px var(--teal-100);
+}
+
+.termTitle {
+    line-height: 1.4;
+}
+
+.agreedIcon {
+    color: var(--green-100);
+    flex: 0 0 auto;
+    height: 16px;
+    width: 16px;
+}
+
+.content {
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    padding: $sp-3;
+}
+
+.contentScroll {
+    color: var(--GrayFontColor);
+    flex: 1;
+    line-height: 1.5;
+    min-height: 0;
+    overflow: auto;
+    white-space: pre-wrap;
+}
+
+.docuSignFrame {
+    border: 0;
+    flex: 1;
+    min-height: 420px;
+    width: 100%;
+}
+
+.actions {
+    display: flex;
+    gap: $sp-2;
+    justify-content: flex-end;
+    margin-top: $sp-3;
+}
+
+.spinnerWrap {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    min-height: 220px;
+}
+
+.emptyState {
+    align-items: center;
+    color: var(--GrayFontColor);
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+}
+
+.link {
+    word-break: break-word;
+}
+
+.error {
+    background: #fff1f0;
+    border: 1px solid #f5c2c7;
+    border-radius: 6px;
+    color: #842029;
+    font-size: 12px;
+    padding: $sp-2;
+}
+
+@media (max-width: 768px) {
+    .modalBody {
+        min-height: 360px;
+    }
+
+    .layout {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        flex-basis: auto;
+        max-height: 180px;
+    }
+
+    .docuSignFrame {
+        min-height: 300px;
+    }
+}
diff --git a/src/apps/community/src/lib/components/TermsModal/TermsModal.tsx b/src/apps/community/src/lib/components/TermsModal/TermsModal.tsx
new file mode 100644
index 000000000..8dddab478
--- /dev/null
+++ b/src/apps/community/src/lib/components/TermsModal/TermsModal.tsx
@@ -0,0 +1,284 @@
+import {
+    FC,
+    MouseEvent,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react'
+import classNames from 'classnames'
+
+import {
+    BaseModal,
+    Button,
+    IconCheck,
+    LoadingSpinner,
+} from '~/libs/ui'
+
+import { useTerms } from '../../hooks'
+import type { TermInfo } from '../../models'
+
+import styles from './TermsModal.module.scss'
+
+interface TermsModalProps {
+    challengeId: string
+    onAllAgreed: () => void
+    onClose: () => void
+    termIds: string[]
+}
+
+/**
+ * Builds a DocuSign callback URL that returns to the current page.
+ *
+ * @param templateId DocuSign template id to persist in the callback URL.
+ * @returns Absolute callback URL with `docuSignReturn` query param.
+ */
+function buildDocuSignReturnUrl(templateId: string): string {
+    const returnUrl = new URL(window.location.href)
+    returnUrl.searchParams.set('docuSignReturn', templateId)
+
+    return returnUrl.toString()
+}
+
+/**
+ * Displays the challenge terms flow and captures all required agreements.
+ *
+ * @param props Challenge term ids with completion and close callbacks.
+ * @returns Terms modal with sidebar navigation and agreeability-specific content.
+ */
+const TermsModal: FC<TermsModalProps> = (props: TermsModalProps) => {
+    const {
+        agreeTerm,
+        checkStatus,
+        clearDocuSignUrl,
+        getDocuSignUrl,
+        loadTerms,
+        selectTerm,
+        signDocuSign,
+        state,
+    }: ReturnType<typeof useTerms> = useTerms()
+    const notifiedAllAgreedRef = useRef(false)
+    const activeTemplateRef = useRef<string | undefined>(undefined)
+    const loadedTemplateRef = useRef<string | undefined>(undefined)
+    const signedTemplateRef = useRef<string | undefined>(undefined)
+    const requestedTemplateRef = useRef<string | undefined>(undefined)
+
+    useEffect(() => {
+        notifiedAllAgreedRef.current = false
+        requestedTemplateRef.current = undefined
+        loadTerms(props.termIds)
+            .catch(() => undefined)
+    }, [loadTerms, props.termIds])
+
+    useEffect(() => {
+        if (!state.canRegister || notifiedAllAgreedRef.current) {
+            return
+        }
+
+        notifiedAllAgreedRef.current = true
+        props.onAllAgreed()
+    }, [props.onAllAgreed, state.canRegister])
+
+    const selectedDocuSignTemplateId = useMemo(() => {
+        if (state.selectedTerm?.agreeabilityType !== 'DocuSignable') {
+            return undefined
+        }
+
+        return state.selectedTerm.docusignTemplateId
+    }, [state.selectedTerm])
+
+    useEffect(() => {
+        if (activeTemplateRef.current === selectedDocuSignTemplateId) {
+            return
+        }
+
+        activeTemplateRef.current = selectedDocuSignTemplateId
+        loadedTemplateRef.current = undefined
+        requestedTemplateRef.current = undefined
+        clearDocuSignUrl()
+    }, [clearDocuSignUrl, selectedDocuSignTemplateId])
+
+    useEffect(() => {
+        if (!selectedDocuSignTemplateId) {
+            return
+        }
+
+        const shouldRequestUrl = !state.docuSignUrl || loadedTemplateRef.current !== selectedDocuSignTemplateId
+        if (!shouldRequestUrl) {
+            return
+        }
+
+        requestedTemplateRef.current = selectedDocuSignTemplateId
+        const returnUrl = buildDocuSignReturnUrl(selectedDocuSignTemplateId)
+        getDocuSignUrl(selectedDocuSignTemplateId, returnUrl)
+            .then(() => {
+                loadedTemplateRef.current = selectedDocuSignTemplateId
+            })
+            .catch(() => undefined)
+    }, [getDocuSignUrl, selectedDocuSignTemplateId, state.docuSignUrl])
+
+    const hasDocuSignUrlForSelectedTemplate = Boolean(
+        state.docuSignUrl
+        && selectedDocuSignTemplateId
+        && loadedTemplateRef.current === selectedDocuSignTemplateId,
+    )
+
+    useEffect(() => {
+        const templateId = new URLSearchParams(window.location.search)
+            .get('docuSignReturn')
+        if (!templateId || signedTemplateRef.current === templateId) {
+            return
+        }
+
+        const matchedTerm = state.terms.find(term => term.docusignTemplateId === templateId)
+        if (!matchedTerm) {
+            return
+        }
+
+        signedTemplateRef.current = templateId
+        signDocuSign(matchedTerm.id)
+        checkStatus(props.termIds)
+            .catch(() => undefined)
+    }, [checkStatus, props.termIds, signDocuSign, state.terms])
+
+    const handleSelectTerm = useCallback((event: MouseEvent<HTMLButtonElement>): void => {
+        const termId = event.currentTarget.dataset.termId
+        if (!termId) {
+            return
+        }
+
+        const term = state.terms.find(item => item.id === termId)
+        if (term) {
+            selectTerm(term)
+        }
+    }, [selectTerm, state.terms])
+
+    const handleAgree = useCallback(async (): Promise<void> => {
+        if (!state.selectedTerm) {
+            return
+        }
+
+        await agreeTerm(state.selectedTerm.id)
+        await checkStatus(props.termIds)
+    }, [agreeTerm, checkStatus, props.termIds, state.selectedTerm])
+
+    const renderTermContent = useCallback((term: TermInfo): JSX.Element => {
+        if (term.agreeabilityType === 'Electronically-agreeable') {
+            return (
+                <>
+                    <div className={styles.contentScroll}>{term.text ?? 'No term text available.'}</div>
+
+                    <div className={styles.actions}>
+                        <Button onClick={handleAgree} primary>
+                            I Agree
+                        </Button>
+                    </div>
+                </>
+            )
+        }
+
+        if (term.agreeabilityType === 'DocuSignable') {
+            if (!term.docusignTemplateId) {
+                return (
+                    <div className={styles.emptyState}>
+                        DocuSign template id is not available for this term.
+                    </div>
+                )
+            }
+
+            if (!hasDocuSignUrlForSelectedTemplate) {
+                return (
+                    <div className={styles.spinnerWrap}>
+                        <LoadingSpinner inline />
+                    </div>
+                )
+            }
+
+            return (
+                <iframe
+                    className={styles.docuSignFrame}
+                    src={state.docuSignUrl}
+                    title={`docuSign-${props.challengeId}-${term.id}`}
+                />
+            )
+        }
+
+        return (
+            <>
+                <div className={styles.contentScroll}>
+                    {term.text && <p>{term.text}</p>}
+                    {!term.text && term.url && (
+                        <a
+                            className={styles.link}
+                            href={term.url}
+                            rel='noreferrer'
+                            target='_blank'
+                        >
+                            {term.url}
+                        </a>
+                    )}
+                    {!term.text && !term.url && (
+                        <p>No additional term details are available.</p>
+                    )}
+                </div>
+
+                <div className={styles.actions}>
+                    <Button onClick={props.onClose} secondary>
+                        Close
+                    </Button>
+                </div>
+            </>
+        )
+    }, [handleAgree, hasDocuSignUrlForSelectedTemplate, props.challengeId, props.onClose, state.docuSignUrl])
+
+    return (
+        <BaseModal
+            allowBodyScroll
+            onClose={props.onClose}
+            open
+            size='lg'
+            title='Terms and Conditions'
+        >
+            <div className={styles.modalBody}>
+                {state.error && <div className={styles.error}>{state.error}</div>}
+
+                {(state.isLoading || state.isCheckingStatus) ? (
+                    <div className={styles.spinnerWrap}>
+                        <LoadingSpinner inline />
+                    </div>
+                ) : (
+                    <div className={styles.layout}>
+                        <aside className={styles.sidebar}>
+                            {state.terms.map(term => (
+                                <button
+                                    className={classNames(
+                                        styles.termItem,
+                                        term.id === state.selectedTerm?.id && styles.termItemActive,
+                                    )}
+                                    data-term-id={term.id}
+                                    key={term.id}
+                                    onClick={handleSelectTerm}
+                                    type='button'
+                                >
+                                    <span className={styles.termTitle}>{term.title ?? term.id}</span>
+                                    {term.agreed && (
+                                        <IconCheck className={styles.agreedIcon} />
+                                    )}
+                                </button>
+                            ))}
+                        </aside>
+
+                        <div className={styles.content}>
+                            {state.selectedTerm
+                                ? renderTermContent(state.selectedTerm)
+                                : <div className={styles.emptyState}>No terms available.</div>}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </BaseModal>
+    )
+}
+
+export { TermsModal, type TermsModalProps }
+export default TermsModal
diff --git a/src/apps/community/src/lib/components/TermsModal/index.ts b/src/apps/community/src/lib/components/TermsModal/index.ts
new file mode 100644
index 000000000..1436d3e00
--- /dev/null
+++ b/src/apps/community/src/lib/components/TermsModal/index.ts
@@ -0,0 +1,2 @@
+export { default as TermsModal } from './TermsModal'
+export type { TermsModalProps } from './TermsModal'
diff --git a/src/apps/community/src/lib/components/index.ts b/src/apps/community/src/lib/components/index.ts
new file mode 100644
index 000000000..e393dd8d5
--- /dev/null
+++ b/src/apps/community/src/lib/components/index.ts
@@ -0,0 +1,5 @@
+export * from './AccessDenied'
+export * from './CommunityHeader'
+export * from './CommunityLayout'
+export * from './Layout'
+export * from './TermsModal'
diff --git a/src/apps/community/src/lib/hooks/index.ts b/src/apps/community/src/lib/hooks/index.ts
new file mode 100644
index 000000000..194a78c2f
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/index.ts
@@ -0,0 +1,13 @@
+export * from './useChallenge'
+export * from './useChallenges'
+export * from './useCommunityMeta'
+export * from './useMemberSubmissions'
+export * from './useMySubmissions'
+export * from './useRegistrants'
+export * from './useSubmitChallenge'
+export * from './useSubmissions'
+export * from './useThriveArticle'
+export * from './useTerms'
+export * from './useThriveArticles'
+export * from './useUserGroups'
+export * from './useTimelineWall'
diff --git a/src/apps/community/src/lib/hooks/useChallenge.ts b/src/apps/community/src/lib/hooks/useChallenge.ts
new file mode 100644
index 000000000..fa0b062e1
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useChallenge.ts
@@ -0,0 +1,33 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { ChallengeInfo } from '../models'
+import { fetchChallengeById } from '../services'
+
+export interface UseChallengeResult {
+    challenge: ChallengeInfo | undefined
+    isLoading: boolean
+}
+
+/**
+ * Fetches details for a single challenge.
+ *
+ * @param challengeId Optional challenge identifier.
+ * @returns Challenge info and loading status.
+ */
+export function useChallenge(challengeId?: string): UseChallengeResult {
+    const {
+        data: challenge,
+        isValidating: isLoading,
+    }: SWRResponse<ChallengeInfo, Error> = useSWR<ChallengeInfo, Error>(
+        `community/challenge/${challengeId}`,
+        {
+            fetcher: () => fetchChallengeById(challengeId ?? ''),
+            isPaused: () => !challengeId,
+        },
+    )
+
+    return {
+        challenge,
+        isLoading,
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useChallenges.ts b/src/apps/community/src/lib/hooks/useChallenges.ts
new file mode 100644
index 000000000..81d5c1f17
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useChallenges.ts
@@ -0,0 +1,60 @@
+import { useCallback, useMemo } from 'react'
+import qs from 'qs'
+import useSWR, { SWRResponse } from 'swr'
+
+import { PaginatedResponse } from '~/libs/core'
+
+import {
+    BackendChallengeInfo,
+    ChallengeInfo,
+    convertBackendChallengeInfo,
+} from '../models'
+import { ChallengeListParams, fetchChallenges } from '../services'
+
+export interface UseChallengesResult {
+    challenges: ChallengeInfo[]
+    isLoading: boolean
+    total: number
+}
+
+/**
+ * Fetches community challenges with list filters.
+ *
+ * @param params Challenge list filters.
+ * @returns Converted challenges, total count, and loading status.
+ */
+export function useChallenges(params: ChallengeListParams): UseChallengesResult {
+    const key = `community/challenges/${qs.stringify(params, {
+        arrayFormat: 'repeat',
+        skipNulls: true,
+    })}`
+    const fetcher = useCallback(
+        () => fetchChallenges(params),
+        [params],
+    )
+    const {
+        data,
+        isValidating: isLoading,
+    }: SWRResponse<PaginatedResponse<BackendChallengeInfo[]>, Error>
+        = useSWR<PaginatedResponse<BackendChallengeInfo[]>, Error>(
+            key,
+            fetcher,
+            {
+                revalidateOnFocus: false,
+                revalidateOnReconnect: false,
+            },
+        )
+
+    const challenges = useMemo<ChallengeInfo[]>(
+        () => (data?.data ?? [])
+            .map((challenge, index) => convertBackendChallengeInfo(challenge, index))
+            .filter((challenge): challenge is ChallengeInfo => Boolean(challenge)),
+        [data?.data],
+    )
+
+    return {
+        challenges,
+        isLoading: !data && isLoading,
+        total: data?.total ?? 0,
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useCommunityMeta.ts b/src/apps/community/src/lib/hooks/useCommunityMeta.ts
new file mode 100644
index 000000000..3c82d1f45
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useCommunityMeta.ts
@@ -0,0 +1,41 @@
+import { useCallback } from 'react'
+import useSWR, { SWRResponse } from 'swr'
+
+import { CommunityMeta } from '../models'
+import { fetchCommunityMeta } from '../services'
+
+export interface UseCommunityMetaResult {
+    communityMeta: CommunityMeta | undefined
+    isLoading: boolean
+}
+
+/**
+ * Fetches metadata for a selected community.
+ *
+ * @param communityId Optional community id.
+ * @returns Community metadata and loading status.
+ */
+export function useCommunityMeta(communityId?: string): UseCommunityMetaResult {
+    const fetcher = useCallback(
+        () => fetchCommunityMeta(communityId ?? ''),
+        [communityId],
+    )
+    const {
+        data: communityMeta,
+        isValidating: isLoading,
+    }: SWRResponse<CommunityMeta, Error> = useSWR<CommunityMeta, Error>(
+        communityId
+            ? `community/meta/${communityId}`
+            : undefined,
+        fetcher,
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+        },
+    )
+
+    return {
+        communityMeta,
+        isLoading: Boolean(communityId) && !communityMeta && isLoading,
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useMemberSubmissions.ts b/src/apps/community/src/lib/hooks/useMemberSubmissions.ts
new file mode 100644
index 000000000..97ea20646
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useMemberSubmissions.ts
@@ -0,0 +1,56 @@
+import { useContext } from 'react'
+import useSWR, { SWRResponse } from 'swr'
+
+import { profileContext, ProfileContextData } from '~/libs/core'
+
+import { SubmissionInfo } from '../models'
+import { fetchMemberSubmissions } from '../services'
+
+export interface UseMemberSubmissionsResult {
+    isLoading: boolean
+    submissions: SubmissionInfo[]
+}
+
+/**
+ * Builds the SWR cache key for member-scoped submissions.
+ *
+ * @param memberId Member identifier from profile context.
+ * @returns Stable SWR key when member id exists, otherwise undefined.
+ */
+export function getMemberSubmissionsSwrKey(
+    memberId?: string,
+): string | undefined {
+    if (!memberId) {
+        return undefined
+    }
+
+    return `community/member-submissions/${memberId}`
+}
+
+/**
+ * Fetches recent submissions for the logged-in member.
+ *
+ * @returns Member submissions and loading status.
+ */
+export function useMemberSubmissions(): UseMemberSubmissionsResult {
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const memberId = profile?.userId
+        ? `${profile.userId}`
+        : undefined
+    const key = getMemberSubmissionsSwrKey(memberId)
+
+    const {
+        data: submissions,
+        isValidating: isLoading,
+    }: SWRResponse<SubmissionInfo[], Error> = useSWR<SubmissionInfo[], Error>(
+        key,
+        {
+            fetcher: () => fetchMemberSubmissions(memberId ?? ''),
+        },
+    )
+
+    return {
+        isLoading,
+        submissions: submissions ?? [],
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useMySubmissions.ts b/src/apps/community/src/lib/hooks/useMySubmissions.ts
new file mode 100644
index 000000000..1c11ee1d4
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useMySubmissions.ts
@@ -0,0 +1,60 @@
+import { useContext } from 'react'
+import useSWR, { SWRResponse } from 'swr'
+
+import { profileContext, ProfileContextData } from '~/libs/core'
+
+import { SubmissionInfo } from '../models'
+import { fetchMySubmissions } from '../services'
+
+export interface UseMySubmissionsResult {
+    isLoading: boolean
+    submissions: SubmissionInfo[]
+}
+
+/**
+ * Builds the SWR cache key for member submissions in a challenge.
+ *
+ * @param challengeId Challenge identifier from route context.
+ * @param memberId Current member identifier from profile context.
+ * @returns Stable cache key when both inputs are present, otherwise undefined to pause SWR.
+ * @remarks Used by both `useMySubmissions` and submission delete invalidation to keep cache scope aligned.
+ */
+export function getMySubmissionsSwrKey(
+    challengeId?: string,
+    memberId?: string,
+): string | undefined {
+    if (!challengeId || !memberId) {
+        return undefined
+    }
+
+    return `community/my-submissions/${challengeId}/${memberId}`
+}
+
+/**
+ * Fetches submissions for the current user and selected challenge.
+ *
+ * @param challengeId Optional challenge identifier.
+ * @returns Member submissions and loading status.
+ */
+export function useMySubmissions(challengeId?: string): UseMySubmissionsResult {
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const memberId = profile?.userId
+        ? `${profile.userId}`
+        : undefined
+    const key = getMySubmissionsSwrKey(challengeId, memberId)
+
+    const {
+        data: submissions,
+        isValidating: isLoading,
+    }: SWRResponse<SubmissionInfo[], Error> = useSWR<SubmissionInfo[], Error>(
+        key,
+        {
+            fetcher: () => fetchMySubmissions(challengeId ?? '', memberId ?? ''),
+        },
+    )
+
+    return {
+        isLoading,
+        submissions: submissions ?? [],
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useRegistrants.ts b/src/apps/community/src/lib/hooks/useRegistrants.ts
new file mode 100644
index 000000000..dbd1c0ba6
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useRegistrants.ts
@@ -0,0 +1,33 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { type BackendRegistrant } from '../models'
+import { fetchChallengeRegistrants } from '../services'
+
+export interface UseRegistrantsResult {
+    isLoading: boolean
+    registrants: BackendRegistrant[]
+}
+
+/**
+ * Fetches challenge registrants for the challenge detail registrants tab.
+ *
+ * @param challengeId Optional challenge identifier.
+ * @returns Registrants and loading status.
+ */
+export function useRegistrants(challengeId?: string): UseRegistrantsResult {
+    const {
+        data: registrants,
+        isValidating: isLoading,
+    }: SWRResponse<BackendRegistrant[], Error> = useSWR<BackendRegistrant[], Error>(
+        `community/registrants/${challengeId}`,
+        {
+            fetcher: () => fetchChallengeRegistrants(challengeId ?? ''),
+            isPaused: () => !challengeId,
+        },
+    )
+
+    return {
+        isLoading,
+        registrants: registrants ?? [],
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useSubmissions.ts b/src/apps/community/src/lib/hooks/useSubmissions.ts
new file mode 100644
index 000000000..3dfb9e7ab
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useSubmissions.ts
@@ -0,0 +1,33 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { SubmissionInfo } from '../models'
+import { fetchSubmissions } from '../services'
+
+export interface UseSubmissionsResult {
+    isLoading: boolean
+    submissions: SubmissionInfo[]
+}
+
+/**
+ * Fetches submissions for a challenge.
+ *
+ * @param challengeId Optional challenge identifier.
+ * @returns Submissions and loading status.
+ */
+export function useSubmissions(challengeId?: string): UseSubmissionsResult {
+    const {
+        data: submissions,
+        isValidating: isLoading,
+    }: SWRResponse<SubmissionInfo[], Error> = useSWR<SubmissionInfo[], Error>(
+        `community/submissions/${challengeId}`,
+        {
+            fetcher: () => fetchSubmissions(challengeId ?? ''),
+            isPaused: () => !challengeId,
+        },
+    )
+
+    return {
+        isLoading,
+        submissions: submissions ?? [],
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useSubmitChallenge.ts b/src/apps/community/src/lib/hooks/useSubmitChallenge.ts
new file mode 100644
index 000000000..c95af0e1a
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useSubmitChallenge.ts
@@ -0,0 +1,75 @@
+import { useCallback, useState } from 'react'
+
+import {
+    submitChallenge,
+    type SubmitChallengePayload,
+} from '../services'
+
+export interface UseSubmitChallengeResult {
+    agreed: boolean
+    error: string
+    isSubmitting: boolean
+    submitDone: boolean
+    uploadProgress: number
+    reset: () => void
+    setAgreed: (value: boolean) => void
+    submit: (payload: SubmitChallengePayload) => Promise<void>
+}
+
+/**
+ * Manages submission form state and executes the submission request.
+ *
+ * @returns Upload state, submit/reset handlers and terms agreement state.
+ */
+export function useSubmitChallenge(): UseSubmitChallengeResult {
+    const [agreed, setAgreed] = useState<boolean>(false)
+    const [error, setError] = useState<string>('')
+    const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
+    const [submitDone, setSubmitDone] = useState<boolean>(false)
+    const [uploadProgress, setUploadProgress] = useState<number>(0)
+
+    const submit = useCallback(async (payload: SubmitChallengePayload): Promise<void> => {
+        setError('')
+        setIsSubmitting(true)
+        setSubmitDone(false)
+        setUploadProgress(0.1)
+
+        try {
+            await submitChallenge(payload)
+            setUploadProgress(1)
+            setSubmitDone(true)
+        } catch (submissionError) {
+            const message = submissionError instanceof Error
+                ? submissionError.message
+                : 'Failed to submit challenge.'
+            setError(message)
+            setUploadProgress(0)
+            setSubmitDone(false)
+        } finally {
+            setIsSubmitting(false)
+        }
+    }, [])
+
+    const reset = useCallback((): void => {
+        setAgreed(false)
+        setError('')
+        setIsSubmitting(false)
+        setSubmitDone(false)
+        setUploadProgress(0)
+    }, [])
+
+    const handleSetAgreed = useCallback((value: boolean): void => {
+        setAgreed(value)
+    }, [])
+
+    return {
+        agreed,
+        error,
+        isSubmitting,
+        reset,
+        setAgreed: handleSetAgreed,
+        submit,
+        submitDone,
+        uploadProgress,
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useTerms.ts b/src/apps/community/src/lib/hooks/useTerms.ts
new file mode 100644
index 000000000..c3d67e9b6
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useTerms.ts
@@ -0,0 +1,376 @@
+/* eslint-disable unicorn/no-null */
+import {
+    useCallback,
+    useReducer,
+} from 'react'
+
+import {
+    TERMS_CHECK_DELAY_MS,
+    TERMS_CHECK_MAX_ATTEMPTS,
+} from '../../config/index.config'
+import { TermInfo } from '../models'
+import {
+    agreeTerm as agreeTermService,
+    fetchDocuSignUrl,
+    fetchTermsForChallenge,
+} from '../services'
+
+/**
+ * Terms state handled by the community terms hook.
+ */
+export interface TermsState {
+    canRegister: boolean
+    docuSignUrl: string
+    error: string | null
+    isCheckingStatus: boolean
+    isLoading: boolean
+    selectedTerm: TermInfo | null
+    terms: TermInfo[]
+}
+
+type TermsAction
+    = {
+        canRegister?: boolean
+        terms: TermInfo[]
+        type: 'SET_TERMS'
+    }
+    | {
+        isCheckingStatus: boolean
+        type: 'SET_CHECKING_STATUS'
+    }
+    | {
+        isLoading: boolean
+        type: 'SET_LOADING'
+    }
+    | {
+        error: string | null
+        type: 'SET_ERROR'
+    }
+    | {
+        docuSignUrl: string
+        type: 'SET_DOCUSIGN_URL'
+    }
+    | {
+        selectedTerm: TermInfo | null
+        type: 'SET_SELECTED_TERM'
+    }
+    | {
+        termId: string
+        type: 'MARK_TERM_AGREED'
+    }
+
+const initialTermsState: TermsState = {
+    canRegister: false,
+    docuSignUrl: '',
+    error: null,
+    isCheckingStatus: false,
+    isLoading: false,
+    selectedTerm: null,
+    terms: [],
+}
+
+function delay(timeoutMs: number): Promise<void> {
+    return new Promise(resolve => {
+        setTimeout(resolve, timeoutMs)
+    })
+}
+
+function getSelectedTerm(terms: TermInfo[]): TermInfo | null {
+    return terms.find(term => !term.agreed) ?? null
+}
+
+function sortTerms(terms: TermInfo[]): TermInfo[] {
+    return [...terms].sort((a, b) => Number(a.agreed) - Number(b.agreed))
+}
+
+function toErrorMessage(error: unknown): string {
+    if (error instanceof Error) {
+        return error.message
+    }
+
+    return 'Something went wrong while processing terms'
+}
+
+function termsReducer(state: TermsState, action: TermsAction): TermsState {
+    if (action.type === 'SET_CHECKING_STATUS') {
+        return {
+            ...state,
+            isCheckingStatus: action.isCheckingStatus,
+        }
+    }
+
+    if (action.type === 'SET_DOCUSIGN_URL') {
+        return {
+            ...state,
+            docuSignUrl: action.docuSignUrl,
+        }
+    }
+
+    if (action.type === 'SET_ERROR') {
+        return {
+            ...state,
+            error: action.error,
+        }
+    }
+
+    if (action.type === 'SET_LOADING') {
+        return {
+            ...state,
+            isLoading: action.isLoading,
+        }
+    }
+
+    if (action.type === 'SET_SELECTED_TERM') {
+        return {
+            ...state,
+            selectedTerm: action.selectedTerm,
+        }
+    }
+
+    if (action.type === 'SET_TERMS') {
+        const terms = sortTerms(action.terms)
+        const canRegister = action.canRegister ?? terms.every(term => term.agreed)
+
+        return {
+            ...state,
+            canRegister,
+            selectedTerm: getSelectedTerm(terms),
+            terms,
+        }
+    }
+
+    const terms = sortTerms(
+        state.terms.map(term => {
+            if (term.id === action.termId) {
+                return {
+                    ...term,
+                    agreed: true,
+                }
+            }
+
+            return term
+        }),
+    )
+
+    return {
+        ...state,
+        canRegister: terms.every(term => term.agreed),
+        selectedTerm: getSelectedTerm(terms),
+        terms,
+    }
+}
+
+async function checkTermsStatus(termIds: string[], attemptsLeft: number): Promise<TermInfo[]> {
+    const latestTerms = await fetchTermsForChallenge(termIds)
+    const allAgreed = latestTerms.every(term => term.agreed)
+
+    if (allAgreed || attemptsLeft <= 1) {
+        return latestTerms
+    }
+
+    await delay(TERMS_CHECK_DELAY_MS)
+    return checkTermsStatus(termIds, attemptsLeft - 1)
+}
+
+export interface UseTermsResult {
+    agreeTerm(termId: string): Promise<void>
+    checkStatus(termIds: string[]): Promise<void>
+    /**
+     * Clears the cached DocuSign URL so the DocuSign iframe can return to loading state.
+     */
+    clearDocuSignUrl(): void
+    getDocuSignUrl(templateId: string, returnUrl?: string): Promise<void>
+    loadTerms(termIds: string[]): Promise<void>
+    selectTerm(term: TermInfo): void
+    signDocuSign(termId: string): void
+    state: TermsState
+}
+
+/**
+ * Manages challenge terms loading and agreement state transitions.
+ *
+ * @returns Terms state and transition helpers.
+ */
+export function useTerms(): UseTermsResult {
+    const [state, dispatch] = useReducer(termsReducer, initialTermsState)
+
+    const loadTerms = useCallback(async (termIds: string[]): Promise<void> => {
+        dispatch({
+            error: null,
+            type: 'SET_ERROR',
+        })
+        dispatch({
+            isLoading: true,
+            type: 'SET_LOADING',
+        })
+
+        if (!termIds.length) {
+            dispatch({
+                canRegister: true,
+                terms: [],
+                type: 'SET_TERMS',
+            })
+            dispatch({
+                isLoading: false,
+                type: 'SET_LOADING',
+            })
+
+            return
+        }
+
+        try {
+            const terms = await fetchTermsForChallenge(termIds)
+            dispatch({
+                terms,
+                type: 'SET_TERMS',
+            })
+        } catch (error) {
+            dispatch({
+                error: toErrorMessage(error),
+                type: 'SET_ERROR',
+            })
+        } finally {
+            dispatch({
+                isLoading: false,
+                type: 'SET_LOADING',
+            })
+        }
+    }, [])
+
+    const agreeTerm = useCallback(async (termId: string): Promise<void> => {
+        dispatch({
+            error: null,
+            type: 'SET_ERROR',
+        })
+        dispatch({
+            isLoading: true,
+            type: 'SET_LOADING',
+        })
+
+        try {
+            const response = await agreeTermService(termId)
+            if (!response.success) {
+                throw new Error('Failed to agree term')
+            }
+
+            dispatch({
+                termId,
+                type: 'MARK_TERM_AGREED',
+            })
+        } catch (error) {
+            dispatch({
+                error: toErrorMessage(error),
+                type: 'SET_ERROR',
+            })
+        } finally {
+            dispatch({
+                isLoading: false,
+                type: 'SET_LOADING',
+            })
+        }
+    }, [])
+
+    /**
+     * Clears the currently stored DocuSign recipient URL.
+     */
+    const clearDocuSignUrl = useCallback((): void => {
+        dispatch({
+            docuSignUrl: '',
+            type: 'SET_DOCUSIGN_URL',
+        })
+    }, [])
+
+    const getDocuSignUrl = useCallback(async (
+        templateId: string,
+        returnUrl?: string,
+    ): Promise<void> => {
+        dispatch({
+            error: null,
+            type: 'SET_ERROR',
+        })
+
+        try {
+            const response = await fetchDocuSignUrl(templateId, returnUrl)
+            dispatch({
+                docuSignUrl: response.recipientViewUrl,
+                type: 'SET_DOCUSIGN_URL',
+            })
+        } catch (error) {
+            dispatch({
+                error: toErrorMessage(error),
+                type: 'SET_ERROR',
+            })
+        }
+    }, [])
+
+    const signDocuSign = useCallback((termId: string): void => {
+        dispatch({
+            termId,
+            type: 'MARK_TERM_AGREED',
+        })
+    }, [])
+
+    const checkStatus = useCallback(async (termIds: string[]): Promise<void> => {
+        dispatch({
+            error: null,
+            type: 'SET_ERROR',
+        })
+        dispatch({
+            isCheckingStatus: true,
+            type: 'SET_CHECKING_STATUS',
+        })
+
+        if (!termIds.length) {
+            dispatch({
+                canRegister: true,
+                terms: [],
+                type: 'SET_TERMS',
+            })
+            dispatch({
+                isCheckingStatus: false,
+                type: 'SET_CHECKING_STATUS',
+            })
+
+            return
+        }
+
+        try {
+            const latestTerms = await checkTermsStatus(
+                termIds,
+                TERMS_CHECK_MAX_ATTEMPTS,
+            )
+            dispatch({
+                terms: latestTerms,
+                type: 'SET_TERMS',
+            })
+        } catch (error) {
+            dispatch({
+                error: toErrorMessage(error),
+                type: 'SET_ERROR',
+            })
+        } finally {
+            dispatch({
+                isCheckingStatus: false,
+                type: 'SET_CHECKING_STATUS',
+            })
+        }
+    }, [])
+
+    const selectTerm = useCallback((term: TermInfo): void => {
+        dispatch({
+            selectedTerm: term,
+            type: 'SET_SELECTED_TERM',
+        })
+    }, [])
+
+    return {
+        agreeTerm,
+        checkStatus,
+        clearDocuSignUrl,
+        getDocuSignUrl,
+        loadTerms,
+        selectTerm,
+        signDocuSign,
+        state,
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useThriveArticle.ts b/src/apps/community/src/lib/hooks/useThriveArticle.ts
new file mode 100644
index 000000000..2f5c1c6e7
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useThriveArticle.ts
@@ -0,0 +1,34 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { ThriveArticle } from '../models'
+import { fetchThriveArticleBySlug } from '../services'
+
+export interface UseThriveArticleResult {
+    article: ThriveArticle | undefined
+    isLoading: boolean
+}
+
+/**
+ * Fetches one Thrive article by slug.
+ *
+ * @param slug Thrive article slug from route params.
+ * @returns Article and loading status.
+ */
+export function useThriveArticle(
+    slug: string | undefined,
+): UseThriveArticleResult {
+    const {
+        data: article,
+        isValidating: isLoading,
+    }: SWRResponse<ThriveArticle | undefined, Error> = useSWR<ThriveArticle | undefined, Error>(
+        slug ? `thrive/article/${slug}` : undefined,
+        {
+            fetcher: () => fetchThriveArticleBySlug(slug ?? ''),
+        },
+    )
+
+    return {
+        article,
+        isLoading,
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useThriveArticles.ts b/src/apps/community/src/lib/hooks/useThriveArticles.ts
new file mode 100644
index 000000000..632f2f544
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useThriveArticles.ts
@@ -0,0 +1,34 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { ThriveArticle } from '../models'
+import { fetchThriveArticles, ThriveArticleParams } from '../services'
+
+export interface UseThriveArticlesResult {
+    articles: ThriveArticle[]
+    isLoading: boolean
+}
+
+/**
+ * Fetches Thrive articles for the provided query params.
+ *
+ * @param params Thrive article query params.
+ * @returns Thrive articles and loading status.
+ */
+export function useThriveArticles(
+    params?: ThriveArticleParams,
+): UseThriveArticlesResult {
+    const {
+        data: articles,
+        isValidating: isLoading,
+    }: SWRResponse<ThriveArticle[], Error> = useSWR<ThriveArticle[], Error>(
+        params ? `thrive/articles/${JSON.stringify(params)}` : undefined,
+        {
+            fetcher: () => fetchThriveArticles(params as ThriveArticleParams),
+        },
+    )
+
+    return {
+        articles: articles ?? [],
+        isLoading,
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useTimelineWall.ts b/src/apps/community/src/lib/hooks/useTimelineWall.ts
new file mode 100644
index 000000000..e39c36cbc
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useTimelineWall.ts
@@ -0,0 +1,252 @@
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+
+import { EnvironmentConfig } from '~/config'
+
+import { type TimelineEvent } from '../models'
+import {
+    approveTimelineEvent,
+    createTimelineEvent,
+    deleteTimelineEvent,
+    getCurrentUser,
+    getMemberAvatar,
+    getPendingApprovals,
+    getTimelineEvents,
+    rejectTimelineEvent,
+    type RejectTimelineEventBody,
+} from '../services'
+
+interface TimelineConfigExtension {
+    TIMELINE?: {
+        FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL?: number
+    }
+}
+
+interface UseTimelineWallActions {
+    approveEvent: (token: string, id: string) => Promise<void>
+    deleteEvent: (token: string, id: string) => Promise<void>
+    fetchAvatar: (handle: string) => Promise<void>
+    loadCurrentUser: (token: string) => Promise<void>
+    loadEvents: () => Promise<void>
+    loadPendingApprovals: (token: string) => Promise<void>
+    removeEvent: (
+        token: string,
+        id: string,
+        body: RejectTimelineEventBody,
+    ) => Promise<void>
+    submitEvent: (token: string, formData: FormData) => Promise<void>
+}
+
+export interface UseTimelineWallResult extends UseTimelineWallActions {
+    events: TimelineEvent[]
+    isAdmin: boolean
+    loading: boolean
+    loadingApprovals: boolean
+    pendingApprovals: TimelineEvent[]
+    uploading: boolean
+    uploadResult: string
+    userAvatars: Record<string, string>
+}
+
+function getPendingApprovalsPollingInterval(): number {
+    const timelineConfig
+        = (EnvironmentConfig as unknown as TimelineConfigExtension).TIMELINE
+    const pollingInterval = timelineConfig?.FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL
+
+    return typeof pollingInterval === 'number' && pollingInterval > 0
+        ? pollingInterval
+        : 0
+}
+
+/**
+ * Provides timeline wall state and actions for timeline and moderation flows.
+ *
+ * @returns Timeline wall data, loading states, and mutation handlers.
+ */
+export function useTimelineWall(): UseTimelineWallResult {
+    const [events, setEvents] = useState<TimelineEvent[]>([])
+    const [pendingApprovals, setPendingApprovals] = useState<TimelineEvent[]>([])
+    const [isAdmin, setIsAdmin] = useState<boolean>(false)
+    const [loading, setLoading] = useState<boolean>(true)
+    const [loadingApprovals, setLoadingApprovals] = useState<boolean>(false)
+    const [uploading, setUploading] = useState<boolean>(false)
+    const [uploadResult, setUploadResult] = useState<string>('')
+    const [userAvatars, setUserAvatars] = useState<Record<string, string>>({})
+    const [pendingApprovalsToken, setPendingApprovalsToken] = useState<string | undefined>(undefined)
+
+    const inFlightAvatarRequestsRef = useRef<Record<string, boolean>>({})
+    const pendingApprovalsIntervalRef = useRef<number | undefined>(undefined)
+
+    const pendingApprovalsPollingInterval = useMemo(
+        () => getPendingApprovalsPollingInterval(),
+        [],
+    )
+
+    const loadEvents = useCallback(async (): Promise<void> => {
+        setLoading(true)
+
+        try {
+            const allEvents = await getTimelineEvents()
+            setEvents(allEvents)
+        } catch {
+            setEvents([])
+        } finally {
+            setLoading(false)
+        }
+    }, [])
+
+    const loadPendingApprovals = useCallback(async (token: string): Promise<void> => {
+        setPendingApprovalsToken(token)
+        setLoadingApprovals(true)
+
+        try {
+            const approvals = await getPendingApprovals(token)
+            setPendingApprovals(approvals)
+        } catch {
+            setPendingApprovals([])
+        } finally {
+            setLoadingApprovals(false)
+        }
+    }, [])
+
+    const loadCurrentUser = useCallback(async (token: string): Promise<void> => {
+        setPendingApprovalsToken(token)
+
+        try {
+            const currentUser = await getCurrentUser(token)
+            setIsAdmin(currentUser.isAdmin === true)
+        } catch {
+            setIsAdmin(false)
+        }
+    }, [])
+
+    const submitEvent = useCallback(async (
+        token: string,
+        formData: FormData,
+    ): Promise<void> => {
+        setUploading(true)
+        setUploadResult('')
+
+        try {
+            const result = await createTimelineEvent(token, formData)
+            setUploadResult(result)
+            await loadEvents()
+        } finally {
+            setUploading(false)
+        }
+    }, [loadEvents])
+
+    const removeEvent = useCallback(async (
+        token: string,
+        id: string,
+        body: RejectTimelineEventBody,
+    ): Promise<void> => {
+        await rejectTimelineEvent(token, id, body)
+        await Promise.all([
+            loadEvents(),
+            loadPendingApprovals(token),
+        ])
+    }, [loadEvents, loadPendingApprovals])
+
+    const deleteEvent = useCallback(async (
+        token: string,
+        id: string,
+    ): Promise<void> => {
+        await deleteTimelineEvent(token, id)
+        await Promise.all([
+            loadEvents(),
+            loadPendingApprovals(token),
+        ])
+    }, [loadEvents, loadPendingApprovals])
+
+    const approveEvent = useCallback(async (
+        token: string,
+        id: string,
+    ): Promise<void> => {
+        await approveTimelineEvent(token, id)
+        await Promise.all([
+            loadEvents(),
+            loadPendingApprovals(token),
+        ])
+    }, [loadEvents, loadPendingApprovals])
+
+    const fetchAvatar = useCallback(async (handle: string): Promise<void> => {
+        if (!handle || userAvatars[handle] || inFlightAvatarRequestsRef.current[handle]) {
+            return
+        }
+
+        inFlightAvatarRequestsRef.current[handle] = true
+
+        try {
+            const avatar = await getMemberAvatar(handle)
+            setUserAvatars(previous => ({
+                ...previous,
+                [avatar.handle]: avatar.photoURL,
+            }))
+        } finally {
+            delete inFlightAvatarRequestsRef.current[handle]
+        }
+    }, [userAvatars])
+
+    useEffect(() => {
+        loadEvents()
+            .catch(() => undefined)
+    }, [loadEvents])
+
+    useEffect(() => {
+        if (pendingApprovalsIntervalRef.current) {
+            window.clearInterval(pendingApprovalsIntervalRef.current)
+            pendingApprovalsIntervalRef.current = undefined
+        }
+
+        if (!isAdmin || !pendingApprovalsToken) {
+            return undefined
+        }
+
+        loadPendingApprovals(pendingApprovalsToken)
+            .catch(() => undefined)
+
+        if (pendingApprovalsPollingInterval > 0) {
+            pendingApprovalsIntervalRef.current = window.setInterval(() => {
+                loadPendingApprovals(pendingApprovalsToken)
+                    .catch(() => undefined)
+            }, pendingApprovalsPollingInterval)
+        }
+
+        return () => {
+            if (pendingApprovalsIntervalRef.current) {
+                window.clearInterval(pendingApprovalsIntervalRef.current)
+                pendingApprovalsIntervalRef.current = undefined
+            }
+        }
+    }, [
+        isAdmin,
+        loadPendingApprovals,
+        pendingApprovalsPollingInterval,
+        pendingApprovalsToken,
+    ])
+
+    return {
+        approveEvent,
+        deleteEvent,
+        events,
+        fetchAvatar,
+        isAdmin,
+        loadCurrentUser,
+        loadEvents,
+        loading,
+        loadingApprovals,
+        loadPendingApprovals,
+        pendingApprovals,
+        removeEvent,
+        submitEvent,
+        uploading,
+        uploadResult,
+        userAvatars,
+    }
+}
diff --git a/src/apps/community/src/lib/hooks/useUserGroups.ts b/src/apps/community/src/lib/hooks/useUserGroups.ts
new file mode 100644
index 000000000..5156a8c16
--- /dev/null
+++ b/src/apps/community/src/lib/hooks/useUserGroups.ts
@@ -0,0 +1,56 @@
+import qs from 'qs'
+import useSWR, { SWRResponse } from 'swr'
+
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+interface BackendUserGroup {
+    id: string
+}
+
+export interface UseUserGroupsResult {
+    groupIds: string[]
+    isLoading: boolean
+}
+
+const groupsBaseUrl = `${EnvironmentConfig.API.V6}`
+
+/**
+ * Fetches all group memberships for a user.
+ *
+ * @param userId User identifier.
+ * @returns Group objects returned by groups API.
+ */
+async function fetchUserGroups(userId: number): Promise<BackendUserGroup[]> {
+    return xhrGetAsync<BackendUserGroup[]>(
+        `${groupsBaseUrl}/groups/?${qs.stringify({
+            memberId: userId,
+            membershipType: 'user',
+        })}`,
+    )
+}
+
+/**
+ * Returns ids of groups that include the specified user as a direct member.
+ *
+ * @param userId User identifier.
+ * @returns Group id list and loading state.
+ */
+export function useUserGroups(userId: number | undefined): UseUserGroupsResult {
+    const {
+        data,
+        isValidating: isLoading,
+    }: SWRResponse<BackendUserGroup[], Error> = useSWR<BackendUserGroup[], Error>(
+        `community/user-groups/${userId}`,
+        {
+            fetcher: () => fetchUserGroups(userId ?? 0),
+            isPaused: () => userId === undefined,
+        },
+    )
+
+    return {
+        groupIds: (data ?? [])
+            .map(group => group.id),
+        isLoading,
+    }
+}
diff --git a/src/apps/community/src/lib/index.ts b/src/apps/community/src/lib/index.ts
new file mode 100644
index 000000000..92ef74e63
--- /dev/null
+++ b/src/apps/community/src/lib/index.ts
@@ -0,0 +1,5 @@
+export * from './components'
+export * from './hooks'
+export * from './models'
+export * from './services'
+export * from './utils'
diff --git a/src/apps/community/src/lib/models/BackendChallengeInfo.model.ts b/src/apps/community/src/lib/models/BackendChallengeInfo.model.ts
new file mode 100644
index 000000000..0db4513a0
--- /dev/null
+++ b/src/apps/community/src/lib/models/BackendChallengeInfo.model.ts
@@ -0,0 +1,267 @@
+import moment from 'moment'
+
+import type { BackendSubmission } from './BackendSubmission.model'
+import { convertBackendSubmission } from './SubmissionInfo.model'
+import { ChallengeInfo, ChallengeTrack, ChallengeType } from './ChallengeInfo.model'
+
+export interface BackendChallengeType {
+    abbreviation?: string
+    id?: string
+    name: string
+}
+
+export interface BackendChallengeTrack {
+    abbreviation?: string
+    id?: string
+    name: string
+    track?: string
+}
+
+export interface BackendChallengePhase {
+    actualEndDate?: string
+    actualStartDate?: string
+    constraints?: Array<Record<string, unknown>>
+    description?: string
+    duration?: number
+    id: string
+    isOpen?: boolean
+    name: string
+    phaseId?: string
+    predecessor?: string
+    scheduledEndDate?: string
+    scheduledStartDate?: string
+}
+
+export interface BackendChallengePrize {
+    [key: string]: unknown
+}
+
+export interface BackendChallengePrizeSet {
+    description?: string
+    prizes: BackendChallengePrize[]
+    type: string
+}
+
+export interface BackendChallengeTerm {
+    id: string
+    roleId?: string
+}
+
+export interface BackendChallengeWinner {
+    handle?: string
+    maxRating?: number | null
+    placement?: number
+    type?: string
+    userId?: number
+}
+
+export interface BackendRegistrant {
+    countryCode?: string
+    countryFlag?: string
+    created: string
+    memberHandle: string
+    rating?: number
+    submissionDate?: string
+}
+
+export interface BackendCheckpointResult {
+    expanded?: boolean
+    feedback?: string
+    submissionId: string
+}
+
+export interface BackendChallengeCheckpoints {
+    checkpointResults: BackendCheckpointResult[]
+    generalFeedback?: string
+    numberOfPassedScreeningSubmissions?: number
+}
+
+export interface BackendDiscussion {
+    id?: string
+    name?: string
+    provider?: string
+    type?: string
+    url?: string
+}
+
+export interface BackendChallengeLegacy {
+    [key: string]: unknown
+    wiproAllowed?: boolean
+}
+
+/**
+ * Raw challenge data from challenge-api-v6.
+ */
+export interface BackendChallengeInfo {
+    checkpoints?: BackendChallengeCheckpoints
+    currentPhase?: BackendChallengePhase
+    description: string
+    descriptionFormat: string
+    discussions: BackendDiscussion[]
+    events?: Array<{ eventName: string }>
+    endDate?: string
+    funChallenge?: boolean
+    id: string
+    isRegistered?: boolean
+    legacy: BackendChallengeLegacy
+    legacyId?: number
+    metadata: Record<string, unknown>
+    name: string
+    numOfCheckpointSubmissions: number
+    numOfRegistrants: number
+    numOfSubmissions: number
+    phases: BackendChallengePhase[]
+    privateDescription?: string
+    prizeSets: BackendChallengePrizeSet[]
+    registrants?: BackendRegistrant[]
+    registrationEndDate: string
+    registrationStartDate: string
+    reliabilityBonus?: number
+    round1Introduction?: string
+    round2Introduction?: string
+    roundId?: string
+    skills?: Array<{ name: string }>
+    startDate: string
+    status: string
+    submissions?: BackendSubmission[]
+    submissionEndDate: string
+    submissionStartDate: string
+    tags: string[]
+    terms: BackendChallengeTerm[]
+    track: string | BackendChallengeTrack
+    trackId: string
+    type: string | BackendChallengeType
+    typeId: string
+    userDetails?: { roles: string[] }
+    winners: BackendChallengeWinner[]
+    groups: Array<Record<string, unknown>>
+}
+
+const TABLE_DATE_FORMAT = 'MMM DD YYYY, HH:mm A'
+
+function normalizeTrack(
+    track: BackendChallengeInfo['track'],
+    trackId: string,
+): ChallengeTrack {
+    if (typeof track === 'object') {
+        return {
+            abbreviation: track.abbreviation,
+            id: track.id ?? trackId,
+            name: track.name,
+            track: track.track,
+        }
+    }
+
+    return {
+        id: trackId,
+        name: track,
+    }
+}
+
+function normalizeType(
+    type: BackendChallengeInfo['type'],
+    typeId: string,
+): ChallengeType {
+    if (typeof type === 'object') {
+        return {
+            abbreviation: type.abbreviation,
+            id: type.id ?? typeId,
+            name: type.name,
+        }
+    }
+
+    return {
+        id: typeId,
+        name: type,
+    }
+}
+
+function resolveCurrentPhaseEndDate(
+    currentPhase?: BackendChallengePhase,
+): string | undefined {
+    if (!currentPhase) {
+        return undefined
+    }
+
+    return currentPhase.actualEndDate ?? currentPhase.scheduledEndDate
+}
+
+function toTimeLeftString(currentPhaseEndDate?: string): string | undefined {
+    if (!currentPhaseEndDate) {
+        return undefined
+    }
+
+    const targetDate = new Date(currentPhaseEndDate)
+    const diff = targetDate.getTime() - Date.now()
+
+    if (!Number.isFinite(diff) || diff <= 0) {
+        return 'Ended'
+    }
+
+    const hourMs = 60 * 60 * 1000
+    const dayMs = 24 * hourMs
+    const minuteMs = 60 * 1000
+
+    if (diff >= dayMs) {
+        const days = Math.floor(diff / dayMs)
+        const hours = Math.floor((diff % dayMs) / hourMs)
+
+        return `${days}d ${hours}h`
+    }
+
+    if (diff >= hourMs) {
+        const hours = Math.floor(diff / hourMs)
+        const minutes = Math.floor((diff % hourMs) / minuteMs)
+
+        return `${hours}h ${minutes}m`
+    }
+
+    const minutes = Math.max(Math.floor(diff / minuteMs), 1)
+    return `${minutes}m`
+}
+
+/**
+ * Converts backend challenge data into a frontend challenge model.
+ *
+ * @param data Raw challenge data from challenge-api-v6.
+ * @param index Optional positional index for list rendering.
+ * @returns Converted challenge data.
+ */
+export function convertBackendChallengeInfo(
+    data: BackendChallengeInfo | undefined,
+    index?: number,
+): ChallengeInfo | undefined {
+    if (!data) {
+        return data
+    }
+
+    const currentPhaseEndDate = resolveCurrentPhaseEndDate(data.currentPhase)
+
+    return {
+        ...data,
+        checkpoints: data.checkpoints,
+        currentPhaseEndDateString: currentPhaseEndDate
+            ? moment(currentPhaseEndDate)
+                .local()
+                .format(TABLE_DATE_FORMAT)
+            : undefined,
+        discussionsUrl: data.discussions[0]?.url,
+        events: data.events,
+        funChallenge: data.funChallenge,
+        index,
+        isRegistered: data.isRegistered,
+        isWiproAllowed: data.legacy?.wiproAllowed !== false,
+        privateDescription: data.privateDescription,
+        registrants: data.registrants,
+        reliabilityBonus: data.reliabilityBonus,
+        round1Introduction: data.round1Introduction,
+        round2Introduction: data.round2Introduction,
+        roundId: data.roundId,
+        skills: data.skills,
+        submissions: data.submissions?.map(convertBackendSubmission),
+        timeLeft: toTimeLeftString(currentPhaseEndDate),
+        track: normalizeTrack(data.track, data.trackId),
+        type: normalizeType(data.type, data.typeId),
+        userDetails: data.userDetails,
+    }
+}
diff --git a/src/apps/community/src/lib/models/BackendCommunityMeta.model.ts b/src/apps/community/src/lib/models/BackendCommunityMeta.model.ts
new file mode 100644
index 000000000..67def04e5
--- /dev/null
+++ b/src/apps/community/src/lib/models/BackendCommunityMeta.model.ts
@@ -0,0 +1,40 @@
+/**
+ * Raw menu item as returned by groups-api-v6 community metadata endpoints.
+ */
+export interface BackendMenuItem {
+    [key: string]: unknown
+}
+
+/**
+ * Raw logo item as returned by groups-api-v6 community metadata endpoints.
+ */
+export interface BackendLogo {
+    [key: string]: unknown
+}
+
+/**
+ * Raw challenge filter metadata returned for a community.
+ */
+export interface BackendChallengeFilter {
+    groupIds: string[]
+    tags?: string[]
+}
+
+/**
+ * Raw community metadata from `GET /communities/:communityId/meta`.
+ */
+export interface BackendCommunityMeta {
+    authorizedGroupIds: string[]
+    challengeFilter: BackendChallengeFilter
+    communityId: string
+    communityName: string
+    description: string
+    groupIds: string[]
+    hidden: boolean
+    logos: BackendLogo[]
+    mainSubdomain?: string
+    menuItems: BackendMenuItem[]
+    metadata: Record<string, unknown>
+    subdomains: string[]
+    terms: string[]
+}
diff --git a/src/apps/community/src/lib/models/BackendSubmission.model.ts b/src/apps/community/src/lib/models/BackendSubmission.model.ts
new file mode 100644
index 000000000..5778379f6
--- /dev/null
+++ b/src/apps/community/src/lib/models/BackendSubmission.model.ts
@@ -0,0 +1,20 @@
+/**
+ * Raw submission response from submissions-api-v6.
+ */
+export interface BackendSubmission {
+    challengeId: string
+    created?: string
+    createdAt?: string
+    id: string
+    legacySubmissionId?: string
+    memberHandle?: string
+    memberId: string
+    review?: Record<string, unknown> | Array<Record<string, unknown>>
+    status: string
+    submittedDate?: string
+    submitterHandle?: string
+    type: string
+    updated?: string
+    updatedAt?: string
+    url?: string | null
+}
diff --git a/src/apps/community/src/lib/models/ChallengeInfo.model.ts b/src/apps/community/src/lib/models/ChallengeInfo.model.ts
new file mode 100644
index 000000000..d8af9a1e8
--- /dev/null
+++ b/src/apps/community/src/lib/models/ChallengeInfo.model.ts
@@ -0,0 +1,51 @@
+import type {
+    BackendChallengeCheckpoints,
+    BackendChallengeInfo,
+    BackendRegistrant,
+} from './BackendChallengeInfo.model'
+import type { SubmissionInfo } from './SubmissionInfo.model'
+
+/**
+ * Normalized challenge type.
+ */
+export interface ChallengeType {
+    abbreviation?: string
+    id: string
+    name: string
+}
+
+/**
+ * Normalized challenge track.
+ */
+export interface ChallengeTrack {
+    abbreviation?: string
+    id: string
+    name: string
+    track?: string
+}
+
+/**
+ * Challenge data consumed by the community app.
+ */
+export interface ChallengeInfo extends Omit<BackendChallengeInfo, 'track' | 'type'> {
+    checkpoints?: BackendChallengeCheckpoints
+    currentPhaseEndDateString?: string
+    discussionsUrl?: string
+    events?: Array<{ eventName: string }>
+    funChallenge?: boolean
+    index?: number
+    isRegistered?: boolean
+    isWiproAllowed: boolean
+    privateDescription?: string
+    registrants?: BackendRegistrant[]
+    reliabilityBonus?: number
+    round1Introduction?: string
+    round2Introduction?: string
+    roundId?: string
+    skills?: Array<{ name: string }>
+    submissions?: SubmissionInfo[]
+    timeLeft?: string
+    track: ChallengeTrack
+    type: ChallengeType
+    userDetails?: { roles: string[] }
+}
diff --git a/src/apps/community/src/lib/models/CommunityMeta.model.ts b/src/apps/community/src/lib/models/CommunityMeta.model.ts
new file mode 100644
index 000000000..1a762f598
--- /dev/null
+++ b/src/apps/community/src/lib/models/CommunityMeta.model.ts
@@ -0,0 +1,39 @@
+import type {
+    BackendChallengeFilter,
+    BackendCommunityMeta,
+    BackendLogo,
+    BackendMenuItem,
+} from './BackendCommunityMeta.model'
+
+/**
+ * Normalized community metadata used by the community frontend.
+ */
+export interface CommunityMeta {
+    authorizedGroupIds: string[]
+    challengeFilter: BackendChallengeFilter
+    communityId: string
+    communityName: string
+    description: string
+    groupIds: string[]
+    hidden: boolean
+    logos: BackendLogo[]
+    mainSubdomain?: string
+    menuItems: BackendMenuItem[]
+    metadata: Record<string, unknown>
+    subdomains: string[]
+    terms: string[]
+}
+
+/**
+ * Converts backend community metadata into the frontend model.
+ *
+ * @param data Raw backend community metadata.
+ * @returns Frontend community metadata.
+ */
+export function convertBackendCommunityMeta(
+    data: BackendCommunityMeta,
+): CommunityMeta {
+    return {
+        ...data,
+    }
+}
diff --git a/src/apps/community/src/lib/models/SubmissionInfo.model.ts b/src/apps/community/src/lib/models/SubmissionInfo.model.ts
new file mode 100644
index 000000000..09205af5c
--- /dev/null
+++ b/src/apps/community/src/lib/models/SubmissionInfo.model.ts
@@ -0,0 +1,34 @@
+import type { BackendSubmission } from './BackendSubmission.model'
+
+/**
+ * Submission data used by the community app.
+ */
+export interface SubmissionInfo {
+    challengeId: string
+    created: string
+    id: string
+    legacySubmissionId?: string
+    memberHandle?: string
+    memberId: string
+    review?: Record<string, unknown> | Array<Record<string, unknown>>
+    status: string
+    type: string
+    updated: string
+    url: string
+}
+
+/**
+ * Converts raw backend submission data into the frontend submission model.
+ *
+ * @param data Raw backend submission.
+ * @returns Converted submission model.
+ */
+export function convertBackendSubmission(data: BackendSubmission): SubmissionInfo {
+    return {
+        ...data,
+        created: data.created ?? data.submittedDate ?? data.createdAt ?? '',
+        memberHandle: data.memberHandle ?? data.submitterHandle,
+        updated: data.updated ?? data.updatedAt ?? '',
+        url: data.url ?? '',
+    }
+}
diff --git a/src/apps/community/src/lib/models/TermInfo.model.ts b/src/apps/community/src/lib/models/TermInfo.model.ts
new file mode 100644
index 000000000..e46d8d2e1
--- /dev/null
+++ b/src/apps/community/src/lib/models/TermInfo.model.ts
@@ -0,0 +1,39 @@
+/**
+ * Raw term payload from `GET /terms/:id`.
+ */
+export interface BackendTerm {
+    agreeabilityType: string
+    agreed: boolean
+    docusignTemplateId?: string
+    id: string
+    legacyId?: number
+    text?: string
+    title?: string
+    url?: string
+}
+
+/**
+ * Term data consumed by the community app.
+ */
+export interface TermInfo {
+    agreeabilityType: string
+    agreed: boolean
+    docusignTemplateId?: string
+    id: string
+    legacyId?: number
+    text?: string
+    title?: string
+    url?: string
+}
+
+/**
+ * Converts backend term payload to the frontend term model.
+ *
+ * @param data Raw term payload.
+ * @returns Converted term model.
+ */
+export function convertBackendTerm(data: BackendTerm): TermInfo {
+    return {
+        ...data,
+    }
+}
diff --git a/src/apps/community/src/lib/models/ThriveArticle.model.ts b/src/apps/community/src/lib/models/ThriveArticle.model.ts
new file mode 100644
index 000000000..2bed3300f
--- /dev/null
+++ b/src/apps/community/src/lib/models/ThriveArticle.model.ts
@@ -0,0 +1,509 @@
+/**
+ * Supported Thrive article content types.
+ */
+export type ThriveArticleType = 'Article' | 'Video' | 'Forum post'
+
+/**
+ * Generic Contentful entry shape.
+ */
+export interface BackendContentfulEntry<T> {
+    fields: T
+    sys: {
+        contentType?: {
+            sys?: {
+                id?: string
+            }
+        }
+        id: string
+    }
+}
+
+/**
+ * Contentful link object.
+ */
+export interface BackendContentfulLink {
+    sys: {
+        id: string
+    }
+}
+
+/**
+ * Includes container returned by Contentful collection queries.
+ */
+export interface BackendContentfulAssetFields {
+    file?: {
+        url?: string
+    }
+}
+
+/**
+ * Minimal Contentful author fields used by Thrive cards.
+ */
+export interface BackendContentfulAuthorFields {
+    name?: string
+    tcHandle?: string
+    avatar?: BackendContentfulLink
+}
+
+/**
+ * Minimal Contentful category fields used by Thrive article sidebars.
+ */
+export interface BackendContentfulCategoryFields {
+    name?: string
+    trackParent?: string
+}
+
+/**
+ * Minimal Contentful fields used by recommended Thrive article cards.
+ */
+export interface BackendContentfulRecommendedFields {
+    contentUrl?: string
+    externalArticle?: boolean
+    featuredImage?: BackendContentfulLink
+    slug?: string
+    title?: string
+}
+
+/**
+ * Unified includes entry fields used by article conversion helpers.
+ */
+export interface BackendContentfulIncludesEntryFields
+    extends BackendContentfulAuthorFields,
+        BackendContentfulCategoryFields,
+        BackendContentfulRecommendedFields {
+    [key: string]: unknown
+}
+
+/**
+ * Includes container returned by Contentful collection queries.
+ */
+export interface BackendContentfulIncludes {
+    Asset?: Array<BackendContentfulEntry<BackendContentfulAssetFields>>
+    Entry?: Array<BackendContentfulEntry<BackendContentfulIncludesEntryFields>>
+}
+
+/**
+ * Raw Contentful fields for a Thrive article entry.
+ */
+export interface BackendThriveArticleFields {
+    bodyContent?: BackendContentfulLink
+    content?: string
+    contentCategory?: BackendContentfulLink[]
+    contentAuthor?: BackendContentfulLink[]
+    contentUrl?: string
+    creationDate?: string
+    externalArticle?: boolean
+    featuredImage?: BackendContentfulLink
+    leftSidebarContent?: BackendContentfulLink
+    openExternalLinksInNewTab?: boolean
+    readTime?: string
+    recommended?: BackendContentfulLink[]
+    slug?: string
+    tags?: string[]
+    title?: string
+    trackCategory?: string
+    type?: ThriveArticleType
+    upvotes?: number
+}
+
+/**
+ * Normalized Thrive author information.
+ */
+export interface AuthorInfo {
+    avatarUrl: string
+    id: string
+    name: string
+    tcHandle: string
+}
+
+/**
+ * Normalized Thrive content category.
+ */
+export interface ContentCategory {
+    id: string
+    name: string
+    trackParent: string
+}
+
+/**
+ * Normalized recommended Thrive article.
+ */
+export interface RecommendedArticle {
+    contentUrl: string
+    externalArticle: boolean
+    featuredImage: string
+    id: string
+    slug: string
+    title: string
+}
+
+/**
+ * Supported Contentful component types rendered inside Thrive articles.
+ */
+export type ThriveStructuredEntryType = 'banner' | 'contentBlock' | 'image' | 'viewport'
+
+/**
+ * Base shape for recursive structured content nodes.
+ */
+export interface ThriveStructuredEntryBase {
+    id: string
+    type: ThriveStructuredEntryType
+}
+
+/**
+ * Normalized content block entry.
+ */
+export interface ThriveContentBlockStructuredEntry extends ThriveStructuredEntryBase {
+    baseTheme: string
+    imageUrl: string
+    text: string
+    type: 'contentBlock'
+}
+
+/**
+ * Normalized banner entry.
+ */
+export interface ThriveBannerStructuredEntry extends ThriveStructuredEntryBase {
+    backgroundImageUrl: string
+    baseTheme: string
+    text: string
+    type: 'banner'
+}
+
+/**
+ * Normalized image entry.
+ */
+export interface ThriveImageStructuredEntry extends ThriveStructuredEntryBase {
+    alt: string
+    sourceMobileUrl: string
+    sourceUrl: string
+    type: 'image'
+}
+
+/**
+ * Normalized viewport entry for grouped child content.
+ */
+export interface ThriveViewportStructuredEntry extends ThriveStructuredEntryBase {
+    items: Array<
+        ThriveBannerStructuredEntry
+        | ThriveContentBlockStructuredEntry
+        | ThriveImageStructuredEntry
+        | ThriveViewportStructuredEntry
+    >
+    theme: string
+    type: 'viewport'
+}
+
+/**
+ * Union for structured Contentful components rendered recursively on Thrive pages.
+ */
+export type ThriveStructuredEntry
+    = ThriveBannerStructuredEntry
+    | ThriveContentBlockStructuredEntry
+    | ThriveImageStructuredEntry
+    | ThriveViewportStructuredEntry
+
+/**
+ * Normalized Thrive article model used by the community app.
+ */
+export interface ThriveArticle {
+    body: string
+    bodyContent?: ThriveStructuredEntry
+    contentAuthor: string
+    contentAuthors: AuthorInfo[]
+    contentCategory: ContentCategory[]
+    contentUrl: string
+    creationDate: string
+    externalArticle: boolean
+    featuredImage: string
+    id: string
+    leftSidebarContent?: ThriveStructuredEntry
+    openExternalLinksInNewTab: boolean
+    readTime: string
+    recommended: RecommendedArticle[]
+    slug: string
+    tags: string[]
+    title: string
+    trackCategory: string
+    type: ThriveArticleType
+    upvotes: number
+}
+
+function normalizeImageUrl(url?: string): string {
+    if (!url) {
+        return ''
+    }
+
+    return url.startsWith('//') ? `https:${url}` : url
+}
+
+function isContentfulLink(value: unknown): value is BackendContentfulLink {
+    return (
+        typeof value === 'object'
+        && value !== null
+        && typeof (value as BackendContentfulLink).sys?.id === 'string'
+    )
+}
+
+function asContentfulLink(value: unknown): BackendContentfulLink | undefined {
+    return isContentfulLink(value) ? value : undefined
+}
+
+function asContentfulLinks(value: unknown): BackendContentfulLink[] {
+    if (!Array.isArray(value)) {
+        return []
+    }
+
+    return value.filter(isContentfulLink)
+}
+
+function asString(value: unknown): string {
+    return typeof value === 'string' ? value : ''
+}
+
+function resolveAssetUrl(
+    assetLink: BackendContentfulLink | undefined,
+    includes?: BackendContentfulIncludes,
+): string {
+    const assetId = assetLink?.sys?.id
+
+    if (!assetId || !includes?.Asset?.length) {
+        return ''
+    }
+
+    const asset = includes.Asset.find(entry => entry.sys.id === assetId)
+    return normalizeImageUrl(asset?.fields?.file?.url)
+}
+
+function resolveAuthors(
+    authorLinks: BackendContentfulLink[] | undefined,
+    includes?: BackendContentfulIncludes,
+): AuthorInfo[] {
+    if (!authorLinks?.length || !includes?.Entry?.length) {
+        return []
+    }
+
+    return authorLinks
+        .map(link => {
+            const authorId = link?.sys?.id ?? ''
+            const author = includes.Entry?.find(entry => entry.sys.id === authorId)
+            const avatarId = author?.fields?.avatar?.sys?.id
+            const avatar = avatarId
+                ? includes?.Asset?.find(asset => asset.sys.id === avatarId)
+                : undefined
+
+            return {
+                avatarUrl: normalizeImageUrl(avatar?.fields?.file?.url),
+                id: authorId,
+                name: author?.fields?.name ?? '',
+                tcHandle: author?.fields?.tcHandle ?? '',
+            }
+        })
+        .filter(author => !!author.id)
+}
+
+function resolveCategories(
+    categoryLinks: BackendContentfulLink[] | undefined,
+    includes?: BackendContentfulIncludes,
+): ContentCategory[] {
+    if (!categoryLinks?.length || !includes?.Entry?.length) {
+        return []
+    }
+
+    return categoryLinks
+        .map(link => {
+            const categoryId = link?.sys?.id ?? ''
+            const category = includes.Entry?.find(entry => entry.sys.id === categoryId)
+
+            return {
+                id: categoryId,
+                name: category?.fields?.name ?? '',
+                trackParent: category?.fields?.trackParent ?? '',
+            }
+        })
+        .filter(category => !!category.id)
+}
+
+function resolveRecommended(
+    recommendedLinks: BackendContentfulLink[] | undefined,
+    includes?: BackendContentfulIncludes,
+): RecommendedArticle[] {
+    if (!recommendedLinks?.length || !includes?.Entry?.length) {
+        return []
+    }
+
+    return recommendedLinks
+        .map(link => {
+            const recommendedId = link?.sys?.id ?? ''
+            const recommendedEntry
+                = includes.Entry?.find(entry => entry.sys.id === recommendedId)
+            return {
+                contentUrl: recommendedEntry?.fields?.contentUrl ?? '',
+                externalArticle: recommendedEntry?.fields?.externalArticle ?? false,
+                featuredImage: resolveAssetUrl(
+                    recommendedEntry?.fields?.featuredImage,
+                    includes,
+                ),
+                id: recommendedId,
+                slug: recommendedEntry?.fields?.slug ?? '',
+                title: recommendedEntry?.fields?.title ?? '',
+            }
+        })
+        .filter(recommended => !!recommended.id)
+}
+
+function resolveFeaturedImage(
+    featuredImage: BackendContentfulLink | undefined,
+    includes?: BackendContentfulIncludes,
+): string {
+    return resolveAssetUrl(featuredImage, includes)
+}
+
+function resolveType(value: string | undefined): ThriveArticleType {
+    if (value === 'Forum post' || value === 'Video') {
+        return value
+    }
+
+    return 'Article'
+}
+
+const SUPPORTED_STRUCTURED_ENTRY_TYPES: ReadonlySet<ThriveStructuredEntryType> = new Set<ThriveStructuredEntryType>([
+    'banner',
+    'contentBlock',
+    'image',
+    'viewport',
+])
+
+function resolveStructuredEntry(
+    entryLink: BackendContentfulLink | undefined,
+    includes?: BackendContentfulIncludes,
+    visitedEntryIds: Set<string> = new Set(),
+): ThriveStructuredEntry | undefined {
+    const entryId = entryLink?.sys?.id
+    if (!entryId || !includes?.Entry?.length || visitedEntryIds.has(entryId)) {
+        return undefined
+    }
+
+    const entry = includes.Entry.find(includeEntry => includeEntry.sys.id === entryId)
+    const entryType = entry?.sys?.contentType?.sys?.id
+    if (!entry || !entryType || !SUPPORTED_STRUCTURED_ENTRY_TYPES.has(entryType as ThriveStructuredEntryType)) {
+        return undefined
+    }
+
+    visitedEntryIds.add(entryId)
+    const fields = entry.fields
+
+    switch (entryType) {
+        case 'viewport': {
+
+            const items = asContentfulLinks(fields.content)
+                .map(childEntry => resolveStructuredEntry(childEntry, includes, visitedEntryIds))
+                .filter(
+                    (childEntry): childEntry is ThriveStructuredEntry => childEntry !== undefined,
+                )
+
+            visitedEntryIds.delete(entryId)
+
+            return {
+                id: entryId,
+                items,
+                theme: asString(fields.theme),
+                type: 'viewport',
+            }
+        }
+
+        case 'contentBlock': {
+
+            const resolvedEntry: ThriveContentBlockStructuredEntry = {
+                baseTheme: asString(fields.baseTheme),
+                id: entryId,
+                imageUrl: resolveAssetUrl(asContentfulLink(fields.image), includes),
+                text: asString(fields.text),
+                type: 'contentBlock',
+            }
+
+            visitedEntryIds.delete(entryId)
+
+            return resolvedEntry
+        }
+
+        case 'banner': {
+
+            const resolvedEntry: ThriveBannerStructuredEntry = {
+                backgroundImageUrl: resolveAssetUrl(
+                    asContentfulLink(fields.backgroundImage),
+                    includes,
+                ),
+                baseTheme: asString(fields.baseTheme),
+                id: entryId,
+                text: asString(fields.text),
+                type: 'banner',
+            }
+
+            visitedEntryIds.delete(entryId)
+
+            return resolvedEntry
+        }
+
+        case 'image': {
+
+            const resolvedEntry: ThriveImageStructuredEntry = {
+                alt: asString(fields.alt) || asString(fields.name),
+                id: entryId,
+                sourceMobileUrl: resolveAssetUrl(
+                    asContentfulLink(fields.sourceMobile),
+                    includes,
+                ),
+                sourceUrl: resolveAssetUrl(asContentfulLink(fields.source), includes),
+                type: 'image',
+            }
+
+            visitedEntryIds.delete(entryId)
+
+            return resolvedEntry
+        }
+
+        default:
+
+            visitedEntryIds.delete(entryId)
+            return undefined
+    }
+}
+
+/**
+ * Converts a Contentful article entry into the normalized Thrive article model.
+ *
+ * @param entry Raw Contentful article entry.
+ * @param includes Optional includes map for linked assets and authors.
+ * @returns Converted Thrive article.
+ */
+export function convertContentfulArticle(
+    entry: BackendContentfulEntry<BackendThriveArticleFields>,
+    includes?: BackendContentfulIncludes,
+): ThriveArticle {
+    const fields = entry.fields ?? {}
+    const contentAuthors = resolveAuthors(fields.contentAuthor, includes)
+
+    return {
+        body: fields.content ?? '',
+        bodyContent: resolveStructuredEntry(fields.bodyContent, includes),
+        contentAuthor: contentAuthors[0]?.name ?? '',
+        contentAuthors,
+        contentCategory: resolveCategories(fields.contentCategory, includes),
+        contentUrl: fields.contentUrl ?? '',
+        creationDate: fields.creationDate ?? '',
+        externalArticle: fields.externalArticle ?? false,
+        featuredImage: resolveFeaturedImage(fields.featuredImage, includes),
+        id: entry.sys.id,
+        leftSidebarContent: resolveStructuredEntry(fields.leftSidebarContent, includes),
+        openExternalLinksInNewTab: fields.openExternalLinksInNewTab !== false,
+        readTime: fields.readTime ?? '',
+        recommended: resolveRecommended(fields.recommended, includes),
+        slug: fields.slug ?? '',
+        tags: fields.tags ?? [],
+        title: fields.title ?? '',
+        trackCategory: fields.trackCategory ?? '',
+        type: resolveType(fields.type),
+        upvotes: fields.upvotes ?? 0,
+    }
+}
diff --git a/src/apps/community/src/lib/models/TimelineEvent.model.ts b/src/apps/community/src/lib/models/TimelineEvent.model.ts
new file mode 100644
index 000000000..8e9ab81fd
--- /dev/null
+++ b/src/apps/community/src/lib/models/TimelineEvent.model.ts
@@ -0,0 +1,53 @@
+/**
+ * Raw timeline event response from backend.
+ */
+export type TimelineEventStatus = 'approved' | 'pending' | 'rejected'
+
+export interface BackendTimelineEvent {
+    approvedAt?: string
+    createdBy: string
+    description: string
+    eventDate: string
+    id: string
+    mediaFiles: string[]
+    rejectionReason?: string
+    status: TimelineEventStatus
+    title: string
+}
+
+/**
+ * Timeline event model used by the community app.
+ */
+export interface TimelineEvent {
+    approvedAt?: string
+    createdBy: string
+    description: string
+    eventDate: string
+    id: string
+    mediaFiles: string[]
+    rejectionReason?: string
+    status: TimelineEventStatus
+    title: string
+}
+
+/**
+ * Converts raw timeline event data into the frontend timeline model.
+ *
+ * @param data Raw timeline event.
+ * @returns Converted timeline event.
+ */
+export function convertBackendTimelineEvent(
+    data: BackendTimelineEvent,
+): TimelineEvent {
+    return {
+        approvedAt: data.approvedAt,
+        createdBy: data.createdBy,
+        description: data.description,
+        eventDate: data.eventDate,
+        id: data.id,
+        mediaFiles: data.mediaFiles,
+        rejectionReason: data.rejectionReason,
+        status: data.status,
+        title: data.title,
+    }
+}
diff --git a/src/apps/community/src/lib/models/index.ts b/src/apps/community/src/lib/models/index.ts
new file mode 100644
index 000000000..2eb29c8e9
--- /dev/null
+++ b/src/apps/community/src/lib/models/index.ts
@@ -0,0 +1,9 @@
+export * from './BackendChallengeInfo.model'
+export * from './BackendCommunityMeta.model'
+export * from './BackendSubmission.model'
+export * from './ChallengeInfo.model'
+export * from './CommunityMeta.model'
+export * from './SubmissionInfo.model'
+export * from './TermInfo.model'
+export * from './ThriveArticle.model'
+export * from './TimelineEvent.model'
diff --git a/src/apps/community/src/lib/services/challenges.service.spec.ts b/src/apps/community/src/lib/services/challenges.service.spec.ts
new file mode 100644
index 000000000..82b0900c2
--- /dev/null
+++ b/src/apps/community/src/lib/services/challenges.service.spec.ts
@@ -0,0 +1,101 @@
+/* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports */
+import { xhrGetPaginatedAsync } from '~/libs/core'
+
+import { SUBMITTER_ROLE_ID } from '../../config/index.config'
+
+import { fetchChallengeRegistrants } from './challenges.service'
+
+jest.mock('~/config', () => ({
+    EnvironmentConfig: {
+        API: {
+            V6: 'https://example.com/v6',
+        },
+    },
+}), {
+    virtual: true,
+})
+jest.mock('~/libs/core', () => ({
+    xhrDeleteAsync: jest.fn(),
+    xhrGetAsync: jest.fn(),
+    xhrGetPaginatedAsync: jest.fn(),
+    xhrPostAsync: jest.fn(),
+}), {
+    virtual: true,
+})
+
+describe('fetchChallengeRegistrants', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('loads submitter resources from the flat resources endpoint', async () => {
+        const mockedGetPaginated = xhrGetPaginatedAsync as jest.Mock
+        const expectedFirstPageUrl = 'https://example.com/v6/resources?challengeId=challenge-1&page=1'
+            + `&perPage=500&roleId=${SUBMITTER_ROLE_ID}`
+        const expectedSecondPageUrl = 'https://example.com/v6/resources?challengeId=challenge-1&page=2'
+            + `&perPage=500&roleId=${SUBMITTER_ROLE_ID}`
+
+        mockedGetPaginated
+            .mockResolvedValueOnce({
+                data: [{
+                    countryInfo: {
+                        countryCode: 'US',
+                        countryFlag: 'https://example.com/us.svg',
+                    },
+                    created: '2026-06-01T09:52:10.000Z',
+                    memberHandle: 'member1',
+                    rating: 1200,
+                    submissionTime: '2026-06-01T10:52:10.000Z',
+                }],
+                page: 1,
+                perPage: 500,
+                total: 2,
+                totalPages: 2,
+            })
+            .mockResolvedValueOnce({
+                data: [{
+                    countryCode: 'CA',
+                    countryFlag: 'https://example.com/ca.svg',
+                    createdAt: '2026-06-01T11:02:17.000Z',
+                    submissionDate: '2026-06-01T12:02:17.000Z',
+                    userHandle: 'member2',
+                }],
+                page: 2,
+                perPage: 500,
+                total: 2,
+                totalPages: 2,
+            })
+
+        await expect(fetchChallengeRegistrants('challenge-1'))
+            .resolves
+            .toEqual([
+                {
+                    countryCode: 'US',
+                    countryFlag: 'https://example.com/us.svg',
+                    created: '2026-06-01T09:52:10.000Z',
+                    memberHandle: 'member1',
+                    rating: 1200,
+                    submissionDate: '2026-06-01T10:52:10.000Z',
+                },
+                {
+                    countryCode: 'CA',
+                    countryFlag: 'https://example.com/ca.svg',
+                    created: '2026-06-01T11:02:17.000Z',
+                    memberHandle: 'member2',
+                    rating: undefined,
+                    submissionDate: '2026-06-01T12:02:17.000Z',
+                },
+            ])
+
+        expect(xhrGetPaginatedAsync)
+            .toHaveBeenNthCalledWith(
+                1,
+                expectedFirstPageUrl,
+            )
+        expect(xhrGetPaginatedAsync)
+            .toHaveBeenNthCalledWith(
+                2,
+                expectedSecondPageUrl,
+            )
+    })
+})
diff --git a/src/apps/community/src/lib/services/challenges.service.ts b/src/apps/community/src/lib/services/challenges.service.ts
new file mode 100644
index 000000000..d8c46f099
--- /dev/null
+++ b/src/apps/community/src/lib/services/challenges.service.ts
@@ -0,0 +1,209 @@
+import qs from 'qs'
+
+import { EnvironmentConfig } from '~/config'
+import {
+    type PaginatedResponse,
+    xhrDeleteAsync,
+    xhrGetAsync,
+    xhrGetPaginatedAsync,
+    xhrPostAsync,
+} from '~/libs/core'
+
+import { SUBMITTER_ROLE_ID } from '../../config/index.config'
+import {
+    type BackendChallengeInfo,
+    type BackendRegistrant,
+    type ChallengeInfo,
+    convertBackendChallengeInfo,
+} from '../models'
+
+/**
+ * Query params for community challenge listing.
+ */
+export interface ChallengeListParams {
+    /**
+     * Active phase filter, e.g. `Registration`.
+     */
+    currentPhaseName?: string
+    groups?: string[]
+    /**
+     * Current member id for "My Challenges" filters.
+     */
+    memberId?: string
+    page?: number
+    perPage?: number
+    /**
+     * Upper date boundary for registration start date.
+     */
+    registrationStartDateEnd?: string
+    sortBy?: string
+    sortOrder?: string
+    status?: string
+    tags?: string[]
+    /**
+     * Challenge tracks filter, e.g. `Dev`, `Des`, `DS`, `QA`.
+     */
+    tracks?: string[]
+    /**
+     * Challenge types filter, e.g. `CH`, `F2F`, `TSK`, `MM`.
+     */
+    types?: string[]
+    /**
+     * Challenge name search text.
+     */
+    name?: string
+}
+
+/**
+ * Raw challenge resource returned by the resources endpoint.
+ */
+export interface BackendResource {
+    challengeId: string
+    id: string
+    memberHandle?: string
+    memberId: string
+    roleId: string
+}
+
+interface BackendRegistrantResource {
+    countryCode?: string
+    countryFlag?: string
+    countryInfo?: {
+        countryCode?: string
+        countryFlag?: string
+    }
+    created?: string
+    createdAt?: string
+    memberHandle?: string
+    submissionDate?: string
+    submissionTime?: string
+    rating?: number
+    userHandle?: string
+}
+
+const challengeBaseUrl = `${EnvironmentConfig.API.V6}`
+
+/**
+ * Fetches community challenges with optional filters.
+ *
+ * @param params Challenge list filters.
+ * @returns Paginated backend challenge payload.
+ */
+export const fetchChallenges = async (
+    params: ChallengeListParams,
+): Promise<PaginatedResponse<BackendChallengeInfo[]>> => {
+    const query = qs.stringify(params, {
+        arrayFormat: 'repeat',
+        skipNulls: true,
+    })
+    const endpoint = query
+        ? `${challengeBaseUrl}/challenges?${query}`
+        : `${challengeBaseUrl}/challenges`
+
+    return xhrGetPaginatedAsync<BackendChallengeInfo[]>(endpoint)
+}
+
+/**
+ * Fetches challenge details by id.
+ *
+ * @param id Challenge identifier.
+ * @returns Converted challenge info.
+ */
+export const fetchChallengeById = async (id: string): Promise<ChallengeInfo> => {
+    const result = await xhrGetAsync<BackendChallengeInfo>(
+        `${challengeBaseUrl}/challenges/${id}`,
+    )
+
+    return convertBackendChallengeInfo(result) as ChallengeInfo
+}
+
+/**
+ * Registers the current member as challenge submitter.
+ *
+ * @param challengeId Challenge identifier.
+ */
+export const registerForChallenge = async (challengeId: string): Promise<void> => {
+    await xhrPostAsync<{ challengeId: string; roleId: string }, BackendResource>(
+        `${challengeBaseUrl}/resources`,
+        {
+            challengeId,
+            roleId: SUBMITTER_ROLE_ID,
+        },
+    )
+}
+
+/**
+ * Unregisters the current member from challenge resources.
+ *
+ * @param resourceId Resource identifier to remove.
+ */
+export const unregisterFromChallenge = async (resourceId: string): Promise<void> => {
+    await xhrDeleteAsync<void>(`${challengeBaseUrl}/resources/${resourceId}`)
+}
+
+/**
+ * Fetches resources for a challenge.
+ *
+ * @param challengeId Challenge identifier.
+ * @returns Paginated resource data.
+ */
+export const fetchChallengeResources = async (
+    challengeId: string,
+): Promise<PaginatedResponse<BackendResource[]>> => {
+    const query = qs.stringify({ challengeId })
+
+    return xhrGetPaginatedAsync<BackendResource[]>(
+        `${challengeBaseUrl}/resources?${query}`,
+    )
+}
+
+/**
+ * Fetches submitter registrants for a challenge from the v6 resources API.
+ *
+ * @param challengeId Challenge identifier.
+ * @returns Registrant records required by challenge detail view.
+ */
+export const fetchChallengeRegistrants = async (
+    challengeId: string,
+): Promise<BackendRegistrant[]> => {
+    const perPage = 500
+    const firstPageQuery = qs.stringify({
+        challengeId,
+        page: 1,
+        perPage,
+        roleId: SUBMITTER_ROLE_ID,
+    })
+    const firstPage = await xhrGetPaginatedAsync<BackendRegistrantResource[]>(
+        `${challengeBaseUrl}/resources?${firstPageQuery}`,
+    )
+    const remainingPages = await Promise.all(
+        Array.from(
+            { length: Math.max(firstPage.totalPages - 1, 0) },
+            (_ignoredValue, index) => {
+                const query = qs.stringify({
+                    challengeId,
+                    page: index + 2,
+                    perPage,
+                    roleId: SUBMITTER_ROLE_ID,
+                })
+
+                return xhrGetPaginatedAsync<BackendRegistrantResource[]>(
+                    `${challengeBaseUrl}/resources?${query}`,
+                )
+            },
+        ),
+    )
+    const resources = [
+        ...firstPage.data,
+        ...remainingPages.flatMap(page => page.data),
+    ]
+
+    return resources.map(resource => ({
+        countryCode: resource.countryCode ?? resource.countryInfo?.countryCode,
+        countryFlag: resource.countryFlag ?? resource.countryInfo?.countryFlag,
+        created: resource.created ?? resource.createdAt ?? '',
+        memberHandle: resource.memberHandle ?? resource.userHandle ?? '',
+        rating: resource.rating,
+        submissionDate: resource.submissionDate ?? resource.submissionTime,
+    }))
+}
diff --git a/src/apps/community/src/lib/services/communities.service.ts b/src/apps/community/src/lib/services/communities.service.ts
new file mode 100644
index 000000000..38e33a208
--- /dev/null
+++ b/src/apps/community/src/lib/services/communities.service.ts
@@ -0,0 +1,39 @@
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+import {
+    type BackendCommunityMeta,
+    type CommunityMeta,
+    convertBackendCommunityMeta,
+} from '../models'
+
+const communityBaseUrl = `${EnvironmentConfig.API.V6}`
+
+/**
+ * Fetches all communities.
+ *
+ * @returns List of converted community metadata entries.
+ */
+export const fetchCommunities = async (): Promise<CommunityMeta[]> => {
+    const communities = await xhrGetAsync<BackendCommunityMeta[]>(
+        `${communityBaseUrl}/communities`,
+    )
+
+    return communities.map(convertBackendCommunityMeta)
+}
+
+/**
+ * Fetches metadata for a single community.
+ *
+ * @param communityId Community identifier.
+ * @returns Converted community metadata.
+ */
+export const fetchCommunityMeta = async (
+    communityId: string,
+): Promise<CommunityMeta> => {
+    const result = await xhrGetAsync<BackendCommunityMeta>(
+        `${communityBaseUrl}/communities/${communityId}/meta`,
+    )
+
+    return convertBackendCommunityMeta(result)
+}
diff --git a/src/apps/community/src/lib/services/contentful.service.ts b/src/apps/community/src/lib/services/contentful.service.ts
new file mode 100644
index 000000000..a99926f9e
--- /dev/null
+++ b/src/apps/community/src/lib/services/contentful.service.ts
@@ -0,0 +1,266 @@
+import axios, { type AxiosInstance } from 'axios'
+import qs from 'qs'
+
+import { EnvironmentConfig } from '~/config'
+
+import {
+    type BackendContentfulEntry,
+    type BackendContentfulIncludes,
+    type BackendThriveArticleFields,
+    convertContentfulArticle,
+    type ThriveArticle,
+    type ThriveArticleType,
+} from '../models'
+
+type ContentfulQueryPrimitive = boolean | number | string
+
+/**
+ * Generic Contentful query object.
+ */
+export type ContentfulQuery = Record<
+    string,
+    ContentfulQueryPrimitive | ContentfulQueryPrimitive[] | undefined
+>
+
+/**
+ * Contentful collection payload used by the community app.
+ */
+export interface ContentfulCollection {
+    items: Array<BackendContentfulEntry<BackendThriveArticleFields>>
+    includes?: BackendContentfulIncludes
+    limit?: number
+    skip?: number
+    total?: number
+}
+
+/**
+ * Parameters for querying Thrive articles.
+ */
+export interface ThriveArticleParams {
+    limit?: number
+    phrase?: string
+    skip?: number
+    sortBy?: 'date' | 'likes'
+    tags?: string[]
+    track?: string
+    type?: ThriveArticleType
+}
+
+/**
+ * Checks whether a string resembles a Contentful entry id.
+ *
+ * @param value Candidate identifier.
+ * @returns True when the string appears to be an entry id.
+ */
+function isEntryId(value: string): boolean {
+    return /^[A-Za-z0-9]{8,}$/.test(value)
+}
+
+function findBestTitleMatch(
+    items: Array<BackendContentfulEntry<BackendThriveArticleFields>>,
+    title: string,
+): BackendContentfulEntry<BackendThriveArticleFields> | undefined {
+    if (!items.length) {
+        return undefined
+    }
+
+    const normalizedTitle = title.trim()
+        .toLocaleLowerCase()
+    const exactMatch = items.find(item => item.fields.title?.trim()
+        .toLocaleLowerCase() === normalizedTitle)
+
+    return exactMatch ?? items[0]
+}
+
+function buildThriveQuery(params: ThriveArticleParams): ContentfulQuery {
+    const query: ContentfulQuery = {
+        content_type: 'article',
+        include: 3,
+        limit: params.limit ?? 5,
+        skip: params.skip ?? 0,
+    }
+
+    if (params.phrase) {
+        query.query = params.phrase
+    }
+
+    if (params.tags?.length) {
+        query['fields.tags[all]'] = params.tags.join(',')
+    }
+
+    if (params.track) {
+        query['fields.trackCategory'] = params.track
+    }
+
+    if (params.type) {
+        query['fields.type'] = params.type
+    }
+
+    query.order = params.sortBy === 'likes'
+        ? '-fields.upvotes,-fields.creationDate'
+        : '-fields.creationDate'
+
+    return query
+}
+
+/**
+ * Creates a dedicated axios instance for Contentful API calls.
+ *
+ * @param spaceId Contentful space id.
+ * @param accessToken Contentful access token.
+ * @returns Axios instance configured for the target space.
+ */
+export function createContentfulInstance(
+    spaceId: string,
+    accessToken: string,
+): AxiosInstance {
+    const baseUrl = `${EnvironmentConfig.CONTENTFUL.BASE_URL}/spaces/${spaceId}/environments/master`
+
+    return axios.create({
+        baseURL: baseUrl,
+        headers: {
+            Authorization: `Bearer ${accessToken}`,
+            'Content-Type': 'application/json',
+        },
+    })
+}
+
+/**
+ * Fetches a single entry by id from Contentful.
+ *
+ * @param entryId Entry identifier.
+ * @param spaceId Contentful space id. Defaults to configured default space id.
+ * @param accessToken Contentful access token. Defaults to configured default token.
+ * @returns Contentful entry payload.
+ */
+export async function fetchContentfulEntry(
+    entryId: string,
+    spaceId: string = EnvironmentConfig.CONTENTFUL.SPACE_ID,
+    accessToken: string = EnvironmentConfig.CONTENTFUL.ACCESS_TOKEN,
+): Promise<unknown> {
+    const instance = createContentfulInstance(spaceId, accessToken)
+    if (isEntryId(entryId)) {
+        try {
+            const response = await instance.get(`/entries/${entryId}`)
+            return response.data
+        } catch (error: unknown) {
+            const status = (error as { response?: { status?: number } }).response?.status
+            if (status !== 404) {
+                throw error
+            }
+        }
+    }
+
+    const queryString = qs.stringify(
+        {
+            'fields.name': entryId,
+            include: 2,
+            limit: 1,
+        },
+        {
+            arrayFormat: 'repeat',
+            encodeValuesOnly: true,
+        },
+    )
+    const response = await instance.get<ContentfulCollection>(`/entries?${queryString}`)
+
+    return response.data.items[0]
+}
+
+/**
+ * Fetches entries from Contentful using a query object.
+ *
+ * @param query Query params.
+ * @param spaceId Contentful space id.
+ * @param accessToken Contentful access token.
+ * @returns Contentful collection payload.
+ */
+export async function fetchContentfulEntries(
+    query: ContentfulQuery,
+    spaceId: string,
+    accessToken: string,
+): Promise<ContentfulCollection> {
+    const instance = createContentfulInstance(spaceId, accessToken)
+    const queryString = qs.stringify(query, {
+        arrayFormat: 'repeat',
+        encodeValuesOnly: true,
+    })
+    const endpoint = queryString ? `/entries?${queryString}` : '/entries'
+    const response = await instance.get<ContentfulCollection>(endpoint)
+
+    return response.data
+}
+
+/**
+ * Fetches Thrive articles from the EDU Contentful space.
+ *
+ * @param params Thrive query params.
+ * @returns Normalized Thrive articles.
+ */
+export async function fetchThriveArticles(
+    params: ThriveArticleParams,
+): Promise<ThriveArticle[]> {
+    const collection = await fetchContentfulEntries(
+        buildThriveQuery(params),
+        EnvironmentConfig.CONTENTFUL.EDU_SPACE_ID,
+        EnvironmentConfig.CONTENTFUL.EDU_ACCESS_TOKEN,
+    )
+
+    return collection.items.map(item => convertContentfulArticle(item, collection.includes))
+}
+
+/**
+ * Fetches a single Thrive article from the EDU Contentful space by slug.
+ * Falls back to legacy title-based matching when no slug match is found.
+ *
+ * @param slug Thrive article slug.
+ * @returns Converted Thrive article when found.
+ */
+export async function fetchThriveArticleBySlug(
+    slug: string,
+): Promise<ThriveArticle | undefined> {
+    const collection = await fetchContentfulEntries(
+        {
+            content_type: 'article',
+            'fields.slug': slug,
+            include: 3,
+            limit: 1,
+        },
+        EnvironmentConfig.CONTENTFUL.EDU_SPACE_ID,
+        EnvironmentConfig.CONTENTFUL.EDU_ACCESS_TOKEN,
+    )
+
+    if (collection.items.length) {
+        return convertContentfulArticle(collection.items[0], collection.includes)
+    }
+
+    const titleFallbackCollection = await fetchContentfulEntries(
+        {
+            content_type: 'article',
+            'fields.title[match]': slug,
+            include: 3,
+            limit: 20,
+        },
+        EnvironmentConfig.CONTENTFUL.EDU_SPACE_ID,
+        EnvironmentConfig.CONTENTFUL.EDU_ACCESS_TOKEN,
+    )
+    const matchedEntry = findBestTitleMatch(titleFallbackCollection.items, slug)
+    if (!matchedEntry) {
+        return undefined
+    }
+
+    return convertContentfulArticle(matchedEntry, titleFallbackCollection.includes)
+}
+
+/**
+ * Fetches the configured changelog entry from the default Contentful space.
+ *
+ * @returns Changelog entry payload.
+ */
+export async function fetchChangelogEntry(): Promise<unknown> {
+    return fetchContentfulEntry(
+        EnvironmentConfig.CONTENTFUL.CHANGELOG_ENTRY_ID,
+        EnvironmentConfig.CONTENTFUL.SPACE_ID,
+        EnvironmentConfig.CONTENTFUL.ACCESS_TOKEN,
+    )
+}
diff --git a/src/apps/community/src/lib/services/index.ts b/src/apps/community/src/lib/services/index.ts
new file mode 100644
index 000000000..fba48c1c5
--- /dev/null
+++ b/src/apps/community/src/lib/services/index.ts
@@ -0,0 +1,6 @@
+export * from './challenges.service'
+export * from './communities.service'
+export * from './contentful.service'
+export * from './submissions.service'
+export * from './terms.service'
+export * from './timeline-wall.service'
diff --git a/src/apps/community/src/lib/services/submissions.service.spec.ts b/src/apps/community/src/lib/services/submissions.service.spec.ts
new file mode 100644
index 000000000..d54ead5fb
--- /dev/null
+++ b/src/apps/community/src/lib/services/submissions.service.spec.ts
@@ -0,0 +1,144 @@
+/* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports */
+import { xhrGetPaginatedAsync } from '~/libs/core'
+
+import {
+    fetchMemberSubmissions,
+    fetchMySubmissions,
+    fetchSubmissions,
+} from './submissions.service'
+
+jest.mock('~/config', () => ({
+    EnvironmentConfig: {
+        API: {
+            V6: 'https://example.com/v6',
+        },
+    },
+}), {
+    virtual: true,
+})
+jest.mock('~/libs/core', () => ({
+    xhrDeleteAsync: jest.fn(),
+    xhrGetAsync: jest.fn(),
+    xhrGetBlobAsync: jest.fn(),
+    xhrGetPaginatedAsync: jest.fn(),
+    xhrPostAsync: jest.fn(),
+}), {
+    virtual: true,
+})
+
+describe('community submissions service', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('unwraps data/meta submissions responses and maps submitter fields', async () => {
+        const mockedGetPaginated = xhrGetPaginatedAsync as jest.Mock
+
+        mockedGetPaginated.mockResolvedValue({
+            data: {
+                data: [{
+                    challengeId: 'challenge-1',
+                    createdAt: '2026-06-01T10:02:43.973Z',
+                    id: 'submission-1',
+                    memberId: '88778748',
+                    status: 'ACTIVE',
+                    submittedDate: '2026-06-01T10:02:43.972Z',
+                    submitterHandle: 'disnadiji',
+                    type: 'CONTEST_SUBMISSION',
+                    updatedAt: '2026-06-01T10:02:45.716Z',
+                    url: undefined,
+                }],
+                meta: {
+                    page: 1,
+                    perPage: 500,
+                    totalCount: 1,
+                    totalPages: 1,
+                },
+            },
+            page: 0,
+            perPage: 0,
+            total: 0,
+            totalPages: 0,
+        })
+
+        await expect(fetchSubmissions('challenge-1'))
+            .resolves
+            .toEqual([
+                expect.objectContaining({
+                    created: '2026-06-01T10:02:43.972Z',
+                    id: 'submission-1',
+                    memberHandle: 'disnadiji',
+                    updated: '2026-06-01T10:02:45.716Z',
+                    url: '',
+                }),
+            ])
+        expect(xhrGetPaginatedAsync)
+            .toHaveBeenCalledWith(
+                'https://example.com/v6/submissions?challengeId=challenge-1&perPage=500',
+            )
+    })
+
+    it('keeps compatibility with bare-array submission responses', async () => {
+        const mockedGetPaginated = xhrGetPaginatedAsync as jest.Mock
+
+        mockedGetPaginated.mockResolvedValue({
+            data: [{
+                challengeId: 'challenge-1',
+                created: '2026-06-01T09:52:33.677Z',
+                id: 'submission-2',
+                memberHandle: 'disna56',
+                memberId: '88782573',
+                status: 'ACTIVE',
+                type: 'CONTEST_SUBMISSION',
+                updated: '2026-06-01T09:52:35.013Z',
+                url: 'https://example.com/submission.zip',
+            }],
+            page: 1,
+            perPage: 500,
+            total: 1,
+            totalPages: 1,
+        })
+
+        await expect(fetchSubmissions('challenge-1'))
+            .resolves
+            .toEqual([
+                expect.objectContaining({
+                    created: '2026-06-01T09:52:33.677Z',
+                    id: 'submission-2',
+                    memberHandle: 'disna56',
+                    updated: '2026-06-01T09:52:35.013Z',
+                    url: 'https://example.com/submission.zip',
+                }),
+            ])
+    })
+
+    it('applies the same payload handling to member-scoped fetchers', async () => {
+        const mockedGetPaginated = xhrGetPaginatedAsync as jest.Mock
+
+        mockedGetPaginated.mockResolvedValue({
+            data: {
+                data: [{
+                    challengeId: 'challenge-1',
+                    id: 'submission-3',
+                    memberId: '88778748',
+                    status: 'ACTIVE',
+                    submittedDate: '2026-06-01T10:02:43.972Z',
+                    submitterHandle: 'disnadiji',
+                    type: 'CONTEST_SUBMISSION',
+                    updatedAt: '2026-06-01T10:02:45.716Z',
+                }],
+            },
+            page: 0,
+            perPage: 0,
+            total: 0,
+            totalPages: 0,
+        })
+
+        await expect(fetchMySubmissions('challenge-1', '88778748'))
+            .resolves
+            .toHaveLength(1)
+        await expect(fetchMemberSubmissions('88778748'))
+            .resolves
+            .toHaveLength(1)
+    })
+})
diff --git a/src/apps/community/src/lib/services/submissions.service.ts b/src/apps/community/src/lib/services/submissions.service.ts
new file mode 100644
index 000000000..56e12a39f
--- /dev/null
+++ b/src/apps/community/src/lib/services/submissions.service.ts
@@ -0,0 +1,199 @@
+import qs from 'qs'
+
+import { EnvironmentConfig } from '~/config'
+import {
+    xhrDeleteAsync,
+    xhrGetAsync,
+    xhrGetBlobAsync,
+    xhrGetPaginatedAsync,
+    xhrPostAsync,
+} from '~/libs/core'
+
+import {
+    type BackendSubmission,
+    convertBackendSubmission,
+    type SubmissionInfo,
+} from '../models'
+
+const submissionsBaseUrl = `${EnvironmentConfig.API.V6}`
+
+export type SubmitChallengeType
+    = 'CONTEST_SUBMISSION'
+    | 'CHECKPOINT_SUBMISSION'
+    | 'STUDIO_FINAL_FIX_SUBMISSION'
+
+export interface SubmitChallengePayload {
+    challengeId: string
+    fileType?: string
+    memberId: string
+    type: SubmitChallengeType
+    url: string
+}
+
+interface BackendSubmissionsResponse {
+    data?: BackendSubmission[]
+    meta?: Record<string, unknown>
+}
+
+type BackendSubmissionsPayload = BackendSubmission[] | BackendSubmissionsResponse
+
+/**
+ * Extracts submission rows from either the current `{ data, meta }` submissions API
+ * response or older bare-array payloads.
+ *
+ * @param payload Response payload returned by the submissions API wrapper.
+ * @returns Backend submission rows used by community submission converters.
+ * @throws Does not throw; unexpected response shapes return an empty list.
+ */
+function extractBackendSubmissions(payload: BackendSubmissionsPayload): BackendSubmission[] {
+    if (Array.isArray(payload)) {
+        return payload
+    }
+
+    return Array.isArray(payload.data)
+        ? payload.data
+        : []
+}
+
+/**
+ * Fetches challenge submissions for the current member context.
+ *
+ * @param challengeId Challenge identifier.
+ * @returns Converted submissions list.
+ */
+export const fetchSubmissions = async (
+    challengeId: string,
+): Promise<SubmissionInfo[]> => {
+    const query = qs.stringify({
+        challengeId,
+        perPage: 500,
+    })
+    const response = await xhrGetPaginatedAsync<BackendSubmissionsPayload>(
+        `${submissionsBaseUrl}/submissions?${query}`,
+    )
+
+    return extractBackendSubmissions(response.data)
+        .map(convertBackendSubmission)
+}
+
+/**
+ * Fetches submissions created by a specific member for a challenge.
+ *
+ * @param challengeId Challenge identifier.
+ * @param memberId Member identifier.
+ * @returns Converted submissions list.
+ */
+export const fetchMySubmissions = async (
+    challengeId: string,
+    memberId: string,
+): Promise<SubmissionInfo[]> => {
+    const query = qs.stringify({
+        challengeId,
+        memberId,
+        perPage: 500,
+    })
+    const response = await xhrGetPaginatedAsync<BackendSubmissionsPayload>(
+        `${submissionsBaseUrl}/submissions?${query}`,
+    )
+
+    return extractBackendSubmissions(response.data)
+        .map(convertBackendSubmission)
+}
+
+/**
+ * Fetches recent submissions created by a member across challenges.
+ *
+ * @param memberId Member identifier.
+ * @param perPage Number of submissions to fetch. Defaults to 5.
+ * @returns Converted submissions list.
+ */
+export const fetchMemberSubmissions = async (
+    memberId: string,
+    perPage: number = 5,
+): Promise<SubmissionInfo[]> => {
+    const query = qs.stringify({
+        memberId,
+        perPage,
+    })
+    const response = await xhrGetPaginatedAsync<BackendSubmissionsPayload>(
+        `${submissionsBaseUrl}/submissions?${query}`,
+    )
+
+    return extractBackendSubmissions(response.data)
+        .map(convertBackendSubmission)
+}
+
+/**
+ * Fetches artifact ids associated with a submission.
+ *
+ * @param submissionId Submission identifier.
+ * @returns Artifact id list.
+ */
+export const fetchSubmissionArtifacts = async (
+    submissionId: string,
+): Promise<string[]> => {
+    const artifacts = await xhrGetAsync<Array<{ id?: string } | string>>(
+        `${submissionsBaseUrl}/submissions/${submissionId}/artifacts`,
+    )
+
+    return artifacts
+        .map(item => (typeof item === 'string' ? item : item.id))
+        .filter((item): item is string => Boolean(item))
+}
+
+/**
+ * Downloads a specific submission artifact.
+ *
+ * @param submissionId Submission identifier.
+ * @param artifactId Artifact identifier.
+ * @returns Artifact blob payload.
+ */
+export const downloadSubmissionArtifact = async (
+    submissionId: string,
+    artifactId: string,
+): Promise<Blob> => xhrGetBlobAsync<Blob>(
+    `${submissionsBaseUrl}/submissions/${submissionId}/artifacts/${artifactId}/download`,
+)
+
+/**
+ * Creates a submission record for a challenge.
+ *
+ * @param payload Submission payload.
+ * @returns Created backend submission payload.
+ */
+export const submitChallenge = async (
+    payload: SubmitChallengePayload,
+): Promise<BackendSubmission> => {
+    const body = new FormData()
+    body.append('challengeId', payload.challengeId)
+    body.append('memberId', payload.memberId)
+    body.append('type', payload.type)
+    body.append('url', payload.url)
+
+    if (payload.fileType) {
+        body.append('fileType', payload.fileType)
+    }
+
+    return xhrPostAsync<FormData, BackendSubmission>(
+        `${submissionsBaseUrl}/submissions`,
+        body,
+        {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+        },
+    )
+}
+
+/**
+ * Deletes a submission.
+ *
+ * @param submissionId Submission identifier.
+ */
+export const deleteSubmission = async (
+    submissionId: string,
+): Promise<void> => {
+    await xhrDeleteAsync<void>(
+        `${submissionsBaseUrl}/submissions/${submissionId}`,
+    )
+}
diff --git a/src/apps/community/src/lib/services/terms.service.ts b/src/apps/community/src/lib/services/terms.service.ts
new file mode 100644
index 000000000..32d5e140a
--- /dev/null
+++ b/src/apps/community/src/lib/services/terms.service.ts
@@ -0,0 +1,84 @@
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync, xhrPostAsync } from '~/libs/core'
+
+import {
+    type BackendTerm,
+    convertBackendTerm,
+    type TermInfo,
+} from '../models'
+
+const termsBaseUrl = `${EnvironmentConfig.API.V6}`
+
+/**
+ * DocuSign view url response.
+ */
+export interface DocuSignResponse {
+    envelopeId: string
+    recipientViewUrl: string
+}
+
+/**
+ * Fetches full details for a term.
+ *
+ * @param termId Term identifier.
+ * @returns Converted term details.
+ */
+export const fetchTermDetails = async (termId: string): Promise<TermInfo> => {
+    const response = await xhrGetAsync<BackendTerm>(`${termsBaseUrl}/terms/${termId}`)
+
+    return convertBackendTerm(response)
+}
+
+/**
+ * Fetches all term details for a challenge in parallel.
+ *
+ * @param termIds Term identifiers.
+ * @returns Converted term list.
+ */
+export const fetchTermsForChallenge = async (
+    termIds: string[],
+): Promise<TermInfo[]> => Promise.all(termIds.map(fetchTermDetails))
+
+/**
+ * Records agreement for a term.
+ *
+ * @param termId Term identifier.
+ * @returns Agreement result.
+ */
+export const agreeTerm = async (
+    termId: string,
+): Promise<{ success: boolean }> => {
+    const response = await xhrPostAsync<Record<string, never>, { success?: boolean }>(
+        `${termsBaseUrl}/terms/${termId}/agree`,
+        {},
+    )
+
+    return {
+        success: response.success === true,
+    }
+}
+
+/**
+ * Fetches a DocuSign recipient view URL for a template.
+ *
+ * @param templateId DocuSign template id.
+ * @param returnUrl Optional callback url after signing.
+ * @returns DocuSign view payload.
+ */
+export const fetchDocuSignUrl = async (
+    templateId: string,
+    returnUrl?: string,
+): Promise<DocuSignResponse> => {
+    const response = await xhrPostAsync<{
+        returnUrl?: string
+        templateId: string
+    }, DocuSignResponse>(
+        `${termsBaseUrl}/terms/docusignViewURL`,
+        {
+            returnUrl,
+            templateId,
+        },
+    )
+
+    return response
+}
diff --git a/src/apps/community/src/lib/services/timeline-wall.service.ts b/src/apps/community/src/lib/services/timeline-wall.service.ts
new file mode 100644
index 000000000..b53d3ade4
--- /dev/null
+++ b/src/apps/community/src/lib/services/timeline-wall.service.ts
@@ -0,0 +1,206 @@
+import axios, { AxiosResponse } from 'axios'
+
+import { EnvironmentConfig } from '~/config'
+
+import {
+    type BackendTimelineEvent,
+    convertBackendTimelineEvent,
+    type TimelineEvent,
+} from '../models'
+
+const DEFAULT_AVATAR_URL
+    = 'https://images.ctfassets.net/b5f1djy59z3a/4PTwZVSf3W7qgs9WssqbVa/'
+        + '4c51312671a4b9acbdfd7f5e22320b62/default_avatar.svg'
+
+const timelineWallInstance = axios.create({
+    baseURL: EnvironmentConfig.TIMELINE_WALL_API,
+})
+
+interface TimelineCurrentUserResponse {
+    isAdmin: boolean
+}
+
+interface BackendMemberResponse {
+    photoURL?: string
+}
+
+export interface RejectTimelineEventBody {
+    note?: string
+    reason: string
+}
+
+export interface MemberAvatar {
+    handle: string
+    photoURL: string
+}
+
+function getAuthHeaders(token: string): Record<string, string> {
+    return {
+        Authorization: `Bearer ${token}`,
+    }
+}
+
+/**
+ * Fetches all approved timeline events.
+ *
+ * @returns Converted timeline events sorted by backend defaults.
+ * @throws AxiosError When the timeline wall API request fails.
+ */
+export async function getTimelineEvents(): Promise<TimelineEvent[]> {
+    const response = await timelineWallInstance.get<BackendTimelineEvent[]>('/timelineEvents')
+
+    return response.data.map(convertBackendTimelineEvent)
+}
+
+/**
+ * Fetches timeline events that require admin review.
+ *
+ * @param tokenV3 User auth token.
+ * @returns Converted pending timeline events.
+ * @throws AxiosError When the request is unauthorized or fails.
+ */
+export async function getPendingApprovals(
+    tokenV3: string,
+): Promise<TimelineEvent[]> {
+    const response = await timelineWallInstance.get<BackendTimelineEvent[]>('/timelineEvents/review', {
+        headers: getAuthHeaders(tokenV3),
+    })
+
+    return response.data.map(convertBackendTimelineEvent)
+}
+
+/**
+ * Fetches the currently authenticated timeline user.
+ *
+ * @param tokenV3 User auth token.
+ * @returns Current user role flags.
+ * @throws AxiosError When the request is unauthorized or fails.
+ */
+export async function getCurrentUser(
+    tokenV3: string,
+): Promise<TimelineCurrentUserResponse> {
+    const response = await timelineWallInstance.get<TimelineCurrentUserResponse>('/auth/currentUser', {
+        headers: getAuthHeaders(tokenV3),
+    })
+
+    return {
+        isAdmin: response.data.isAdmin === true,
+    }
+}
+
+/**
+ * Creates a new timeline event.
+ *
+ * @param tokenV3 User auth token.
+ * @param formData Multipart payload containing timeline event fields.
+ * @returns Empty string on success, otherwise an error message.
+ */
+export async function createTimelineEvent(
+    tokenV3: string,
+    formData: FormData,
+): Promise<string> {
+    try {
+        await timelineWallInstance.post<FormData, AxiosResponse<unknown>>(
+            '/timelineEvents',
+            formData,
+            {
+                headers: {
+                    ...getAuthHeaders(tokenV3),
+                    'Content-Type': 'multipart/form-data',
+                },
+            },
+        )
+
+        return ''
+    } catch (error: unknown) {
+        if (axios.isAxiosError(error)) {
+            const message = (error.response?.data as { message?: string })?.message
+            if (message) {
+                return message
+            }
+        }
+
+        return 'There was an error during add event.'
+    }
+}
+
+/**
+ * Deletes a timeline event by id.
+ *
+ * @param tokenV3 User auth token.
+ * @param id Timeline event id.
+ * @throws AxiosError When the request is unauthorized or fails.
+ */
+export async function deleteTimelineEvent(
+    tokenV3: string,
+    id: string,
+): Promise<void> {
+    await timelineWallInstance.delete(`/timelineEvents/${encodeURIComponent(id)}`, {
+        headers: getAuthHeaders(tokenV3),
+    })
+}
+
+/**
+ * Approves a pending timeline event.
+ *
+ * @param tokenV3 User auth token.
+ * @param id Timeline event id.
+ * @throws AxiosError When the request is unauthorized or fails.
+ */
+export async function approveTimelineEvent(
+    tokenV3: string,
+    id: string,
+): Promise<void> {
+    await timelineWallInstance.put(
+        `/timelineEvents/${encodeURIComponent(id)}/approve`,
+        undefined,
+        {
+            headers: getAuthHeaders(tokenV3),
+        },
+    )
+}
+
+/**
+ * Rejects a pending timeline event.
+ *
+ * @param tokenV3 User auth token.
+ * @param id Timeline event id.
+ * @param body Rejection reason payload.
+ * @throws AxiosError When the request is unauthorized or fails.
+ */
+export async function rejectTimelineEvent(
+    tokenV3: string,
+    id: string,
+    body: RejectTimelineEventBody,
+): Promise<void> {
+    await timelineWallInstance.put(
+        `/timelineEvents/${encodeURIComponent(id)}/reject`,
+        body,
+        {
+            headers: {
+                ...getAuthHeaders(tokenV3),
+                'Content-Type': 'application/json; charset=utf-8',
+            },
+        },
+    )
+}
+
+/**
+ * Fetches member avatar metadata from the V5 members endpoint.
+ *
+ * @param handle Member handle.
+ * @returns Member handle and resolved avatar URL.
+ * @throws AxiosError When the profile request fails.
+ */
+export async function getMemberAvatar(
+    handle: string,
+): Promise<MemberAvatar> {
+    const response = await axios.get<BackendMemberResponse>(
+        `${EnvironmentConfig.API.V5}/members/${encodeURIComponent(handle)}`,
+    )
+
+    return {
+        handle,
+        photoURL: response.data.photoURL || DEFAULT_AVATAR_URL,
+    }
+}
diff --git a/src/apps/community/src/lib/styles/index.scss b/src/apps/community/src/lib/styles/index.scss
new file mode 100644
index 000000000..009e65067
--- /dev/null
+++ b/src/apps/community/src/lib/styles/index.scss
@@ -0,0 +1,30 @@
+@import '@libs/ui/styles/includes';
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+:root {
+    --Yellow: #CF8835;
+    --Red: #C1294F;
+    --RedError: #D34E3B;
+    --Primary: #545f71;
+    --Secondary: #9ba5b7;
+    --Tertiary: #eef1f4;
+    --GrayBorder: #e2e8f0;
+    --DarkBlue: #2b3545;
+    --VeryLightBlue: #e0f3ff;
+    --Link: #0d61bf;
+    --FontColor: #0a0a0a;
+    --GrayFontColor: #767676;
+    --TableBorderColor: #A8A8A8;
+    --ButtonColor: #0B3D56;
+    --Actived: #00797A;
+    --TableSubHeader: #E0E4E8;
+    --TableColumn: rgba(224, 228, 232, 0.3);
+    --invertButtonColor: #fff;
+    --Appeal: #E9ECEF;
+    --EditorBorder: rgba(168, 168, 168, 0.5);
+}
+
+.community-app {
+    font-family: 'Nunito Sans', sans-serif;
+}
diff --git a/src/apps/community/src/lib/utils/challenge-detail.utils.ts b/src/apps/community/src/lib/utils/challenge-detail.utils.ts
new file mode 100644
index 000000000..d32cc2028
--- /dev/null
+++ b/src/apps/community/src/lib/utils/challenge-detail.utils.ts
@@ -0,0 +1,159 @@
+import { EnvironmentConfig } from '~/config'
+
+import {
+    type BackendChallengePhase,
+    type BackendChallengePrize,
+    type BackendChallengeWinner,
+    ChallengeInfo,
+} from '../models'
+
+export interface PlacementPrize extends BackendChallengePrize {
+    type?: string
+    value: number
+}
+
+function getChallengeTypeName(challenge: ChallengeInfo): string {
+    if (typeof challenge.type === 'string') {
+        return challenge.type
+    }
+
+    return challenge.type?.name ?? ''
+}
+
+function getForumId(challenge: ChallengeInfo): number {
+    const forumId = challenge.legacy?.forumId
+    const parsed = Number(forumId)
+
+    if (!Number.isFinite(parsed) || parsed <= 0) {
+        return 0
+    }
+
+    return parsed
+}
+
+/**
+ * Checks whether registration should be blocked for Wipro emails.
+ *
+ * @param email Current member email.
+ * @param isWiproAllowed Challenge-level Wipro override.
+ * @returns True when registration should be blocked.
+ */
+export function isWiproRegistrationBlocked(
+    email: string | undefined,
+    isWiproAllowed: boolean | undefined,
+): boolean {
+    if (isWiproAllowed !== false) {
+        return false
+    }
+
+    return /@wipro\.com$/i.test((email ?? '').trim())
+}
+
+/**
+ * Returns winners to show in the Winners tab.
+ *
+ * @param challenge Challenge details.
+ * @returns Filtered winner list.
+ */
+export function getDisplayWinners(challenge: ChallengeInfo): BackendChallengeWinner[] {
+    const winners = challenge.winners ?? []
+    const typeName = getChallengeTypeName(challenge)
+
+    if (typeName === 'Task') {
+        return winners
+    }
+
+    return winners.filter(winner => {
+        const winnerType = winner.type?.toLowerCase()
+        return winner.type === undefined || winnerType === 'final'
+    })
+}
+
+/**
+ * Returns non-zero placement prizes for the challenge.
+ *
+ * @param challenge Challenge details.
+ * @returns Placement prize list.
+ */
+export function getPlacementPrizes(challenge: ChallengeInfo): PlacementPrize[] {
+    const placementSet = challenge.prizeSets.find(
+        prizeSet => prizeSet.type.toLowerCase() === 'placement',
+    )
+
+    if (!placementSet) {
+        return []
+    }
+
+    return placementSet.prizes.filter(prize => {
+        const value = Number((prize as PlacementPrize).value)
+        return Number.isFinite(value) && value > 0
+    })
+        .map(prize => ({
+            ...(prize as PlacementPrize),
+            value: Number((prize as PlacementPrize).value),
+        }))
+}
+
+/**
+ * Determines whether the challenge is a Marathon Match.
+ *
+ * @param challenge Challenge details.
+ * @returns True when challenge is a Marathon Match.
+ */
+export function isMarathonMatch(challenge: ChallengeInfo): boolean {
+    if (challenge.legacy?.subTrack === 'MARATHON_MATCH') {
+        return true
+    }
+
+    return getChallengeTypeName(challenge) === 'Marathon Match'
+}
+
+/**
+ * Checks if there is an open Submission phase.
+ *
+ * @param phases Challenge phases.
+ * @returns True when an open Submission phase exists.
+ */
+export function hasOpenSubmissionPhase(
+    phases: BackendChallengePhase[] | undefined,
+): boolean {
+    if (!phases?.length) {
+        return false
+    }
+
+    return phases.some(phase => phase.name === 'Submission' && phase.isOpen === true)
+}
+
+/**
+ * Determines whether a challenge is in the Design track.
+ *
+ * @param challenge Challenge details.
+ * @returns True for design challenges.
+ */
+export function isDesignChallenge(challenge: ChallengeInfo): boolean {
+    return challenge.track.name.toLowerCase() === 'design'
+}
+
+/**
+ * Resolves the challenge forum/discussion URL.
+ *
+ * @param challenge Challenge details.
+ * @returns Discussion URL when available.
+ */
+export function getForumLink(challenge: ChallengeInfo): string | undefined {
+    if (challenge.discussionsUrl) {
+        return challenge.discussionsUrl
+    }
+
+    const forumId = getForumId(challenge)
+
+    if (!forumId) {
+        return undefined
+    }
+
+    const path = isDesignChallenge(challenge)
+        ? `/?module=ThreadList&forumID=${forumId}`
+        : `/?module=Category&categoryID=${forumId}`
+
+    return `${EnvironmentConfig.ADMIN.ONLINE_REVIEW_URL}${path}`
+}
diff --git a/src/apps/community/src/lib/utils/challenge-listing.buckets.ts b/src/apps/community/src/lib/utils/challenge-listing.buckets.ts
new file mode 100644
index 000000000..4c5bd0011
--- /dev/null
+++ b/src/apps/community/src/lib/utils/challenge-listing.buckets.ts
@@ -0,0 +1,59 @@
+import { ChallengeListParams } from '../services'
+
+/**
+ * Bucket ids used by challenge listing tabs.
+ */
+export enum ChallengeBucket {
+    ActiveChallenges = 'active-challenges',
+    PastChallenges = 'past-challenges',
+    Engagements = 'engagements',
+}
+
+/**
+ * Visible label for each challenge bucket.
+ */
+export const BUCKET_LABELS: Record<ChallengeBucket, string> = {
+    [ChallengeBucket.ActiveChallenges]: 'Active Challenges',
+    [ChallengeBucket.PastChallenges]: 'Past Challenges',
+    [ChallengeBucket.Engagements]: 'Engagements',
+}
+
+/**
+ * Sort options displayed in the challenge listing filter bar.
+ */
+export const SORT_OPTIONS: ReadonlyArray<{ label: string; value: string }> = [
+    { label: 'Most recent', value: 'startDate' },
+    { label: 'Prize high to low', value: 'overview.totalPrizes-high-to-low' },
+    { label: 'Prize low to high', value: 'overview.totalPrizes-low-to-high' },
+    { label: 'Title A–Z', value: 'name' },
+]
+
+/**
+ * Converts a bucket selection into challenge API params.
+ *
+ * @param bucket Selected listing bucket.
+ * @param memberId Logged in member id for member-scoped mappings.
+ * @returns Partial challenge query params for the bucket.
+ */
+export function bucketToParams(
+    bucket: ChallengeBucket,
+    memberId?: string,
+): Partial<ChallengeListParams> {
+    switch (bucket) {
+        case ChallengeBucket.ActiveChallenges:
+            return {
+                status: 'Active',
+            }
+        case ChallengeBucket.PastChallenges:
+            return {
+                status: 'Completed',
+            }
+        case ChallengeBucket.Engagements:
+            return {
+                memberId,
+                types: ['TSK'],
+            }
+        default:
+            return {}
+    }
+}
diff --git a/src/apps/community/src/lib/utils/index.ts b/src/apps/community/src/lib/utils/index.ts
new file mode 100644
index 000000000..7e5911bfd
--- /dev/null
+++ b/src/apps/community/src/lib/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './challenge-detail.utils'
+export * from './challenge-listing.buckets'
diff --git a/src/apps/community/src/pages/challenge-detail/ChallengeDetail.module.scss b/src/apps/community/src/pages/challenge-detail/ChallengeDetail.module.scss
new file mode 100644
index 000000000..502ffaf93
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/ChallengeDetail.module.scss
@@ -0,0 +1,64 @@
+@import '@libs/ui/styles/includes';
+
+.page {
+    @include font-roboto;
+
+    color: $black-100;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    margin: 0 auto;
+    max-width: 1440px;
+    padding: 40px 32px 112px;
+    width: 100%;
+
+    a,
+    button,
+    h1,
+    h2,
+    h3,
+    input,
+    label,
+    p,
+    select,
+    span,
+    textarea {
+        font-family: $font-roboto;
+        letter-spacing: 0;
+        text-transform: none;
+    }
+}
+
+.tabContent {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.emptyState {
+    background: $tc-white;
+    border-radius: 8px;
+    color: $black-80;
+    padding: 40px;
+    text-align: center;
+}
+
+.spinnerWrap {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 320px;
+}
+
+.inlineLoading {
+    color: $black-80;
+    font-size: 12px;
+    text-align: right;
+}
+
+@media (max-width: 768px) {
+    .page {
+        gap: 24px;
+        padding: 32px 16px 72px;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-detail/ChallengeDetail.tsx b/src/apps/community/src/pages/challenge-detail/ChallengeDetail.tsx
new file mode 100644
index 000000000..e1dcabc73
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/ChallengeDetail.tsx
@@ -0,0 +1,634 @@
+/* eslint-disable complexity */
+import {
+    FC,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import { useParams, useSearchParams } from 'react-router-dom'
+import { mutate } from 'swr'
+import { toast } from 'react-toastify'
+
+import { authUrlLogin, profileContext, ProfileContextData } from '~/libs/core'
+import {
+    LoadingSpinner,
+    type TabsNavItem,
+} from '~/libs/ui'
+
+import {
+    challengeListingRouteId,
+    rootRoute,
+} from '../../config/routes.config'
+import { SUBMITTER_ROLE_ID } from '../../config/index.config'
+import type {
+    BackendChallengeCheckpoints,
+    ChallengeInfo,
+    CommunityMeta,
+    PlacementPrize,
+    UseChallengeResult,
+    UseRegistrantsResult,
+    UseSubmissionsResult,
+    UseThriveArticlesResult,
+} from '../../lib'
+import {
+    fetchChallengeResources,
+    getDisplayWinners,
+    getPlacementPrizes,
+    hasOpenSubmissionPhase,
+    isDesignChallenge,
+    isMarathonMatch,
+    isWiproRegistrationBlocked,
+    registerForChallenge,
+    TermsModal,
+    unregisterFromChallenge,
+    useChallenge,
+    useCommunityMeta,
+    useRegistrants,
+    useSubmissions,
+    useTerms,
+    useThriveArticles,
+} from '../../lib'
+
+import { ChallengeDiscussion } from './components/ChallengeDiscussion'
+import { ChallengeHeader } from './components/ChallengeHeader'
+import { Checkpoints } from './components/Checkpoints'
+import { Registrants } from './components/Registrants'
+import { SecurityReminderModal } from './components/SecurityReminderModal'
+import { Specification } from './components/Specification'
+import { Submissions } from './components/Submissions'
+import { ThriveArticlesSidebar } from './components/ThriveArticlesSidebar'
+import { Winners } from './components/Winners'
+import styles from './ChallengeDetail.module.scss'
+
+const WIPRO_REGISTRATION_BLOCKED_MESSAGE = 'Wipro employees are not allowed to participate in this Topcoder challenge.'
+
+enum ChallengeDetailTab {
+    checkpoints = 'checkpoints',
+    details = 'details',
+    discussion = 'discussion',
+    registrants = 'registrants',
+    submissions = 'submissions',
+    winners = 'winners',
+}
+
+interface SortOption {
+    field: string
+    sort: 'asc' | 'desc'
+}
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function getFirstNonOtherTag(tags: string[] | undefined): string | undefined {
+    return tags?.find(tag => tag.toLowerCase() !== 'other')
+}
+
+function getSubmissionsViewable(challenge: ChallengeInfo): boolean {
+    const metadata = challenge.metadata as unknown
+
+    if (Array.isArray(metadata)) {
+        const match = metadata.find(item => (
+            typeof item === 'object'
+            && Boolean(item)
+            && (item as { name?: string }).name === 'submissionsViewable'
+        )) as { value?: string | boolean } | undefined
+
+        return match?.value === true || `${match?.value}` === 'true'
+    }
+
+    if (metadata && typeof metadata === 'object') {
+        const value = (metadata as Record<string, unknown>).submissionsViewable
+        return value === true || `${value}` === 'true'
+    }
+
+    return false
+}
+
+/**
+ * Challenge detail page container with real challenge data tabs and mock discussion data.
+ *
+ * @returns Challenge detail page content.
+ */
+const ChallengeDetail: FC = () => {
+    const [searchParams, setSearchParams] = useSearchParams()
+    const { challengeId }: { challengeId?: string } = useParams<{ challengeId: string }>()
+    const { isLoggedIn, profile }: ProfileContextData = useContext(profileContext)
+
+    const [activeTab, setActiveTab] = useState<ChallengeDetailTab>(ChallengeDetailTab.details)
+    const [allTermIds, setAllTermIds] = useState<string[]>([])
+    const [checkpointFeedbackState, setCheckpointFeedbackState] = useState<Record<string, boolean>>({})
+    const [registering, setRegistering] = useState(false)
+    const [registrantsSort, setRegistrantsSort] = useState<SortOption>({
+        field: 'Registration Date',
+        sort: 'asc',
+    })
+    const [showDeadlineDetail, setShowDeadlineDetail] = useState(false)
+    const [showSecurityReminder, setShowSecurityReminder] = useState(false)
+    const [showTermsModal, setShowTermsModal] = useState(false)
+    const [submissionsSort, setSubmissionsSort] = useState<SortOption>({
+        field: 'Submission Date',
+        sort: 'desc',
+    })
+    const [unregistering, setUnregistering] = useState(false)
+
+    const communityId = searchParams.get('communityId') ?? undefined
+    const { challenge, isLoading: isLoadingChallenge }: UseChallengeResult = useChallenge(challengeId)
+    const { communityMeta }: { communityMeta: CommunityMeta | undefined } = useCommunityMeta(communityId)
+    const {
+        isLoading: isLoadingRegistrants,
+        registrants,
+    }: UseRegistrantsResult = useRegistrants(challengeId)
+    const {
+        isLoading: isLoadingSubmissions,
+        submissions,
+    }: UseSubmissionsResult = useSubmissions(challengeId)
+    const {
+        loadTerms,
+        signDocuSign,
+        state: termsState,
+    }: ReturnType<typeof useTerms> = useTerms()
+    const termsStateRef = useRef(termsState)
+    const processedDocuSignTemplateRef = useRef<string | undefined>(undefined)
+
+    const thrivePhrase = useMemo(() => {
+        if (!challenge || isDesignChallenge(challenge)) {
+            return undefined
+        }
+
+        return getFirstNonOtherTag(challenge.tags)
+    }, [challenge])
+
+    const { articles }: UseThriveArticlesResult = useThriveArticles(
+        thrivePhrase
+            ? {
+                limit: 3,
+                phrase: thrivePhrase,
+                type: 'Article',
+            }
+            : undefined,
+    )
+
+    const challengePrizes: PlacementPrize[] = useMemo(
+        () => (challenge ? getPlacementPrizes(challenge) : []),
+        [challenge],
+    )
+    const displayWinners = useMemo(
+        () => (challenge ? getDisplayWinners(challenge) : []),
+        [challenge],
+    )
+
+    const isLegacyMM = challenge
+        ? isMarathonMatch(challenge) && Boolean(challenge.roundId)
+        : false
+    const hasRegistered = challenge?.isRegistered ?? false
+    const allAvailableTermIds = useMemo(() => {
+        const challengeTermIds = (challenge?.terms ?? [])
+            .map(term => (typeof term === 'string' ? term : term.id))
+            .filter((termId): termId is string => Boolean(termId))
+
+        return Array.from(new Set([
+            ...challengeTermIds,
+            ...(communityMeta?.terms ?? []),
+        ]))
+    }, [challenge?.terms, communityMeta?.terms])
+    const submissionEnded = challenge
+        ? challenge.status === 'COMPLETED' || !hasOpenSubmissionPhase(challenge.phases)
+        : true
+
+    const challengeRegistrants = registrants.length
+        ? registrants
+        : challenge?.registrants ?? []
+    const challengeSubmissions = submissions.length
+        ? submissions
+        : challenge?.submissions ?? []
+    const registrantCount = challenge
+        ? Math.max(challengeRegistrants.length, challenge.numOfRegistrants ?? 0)
+        : 0
+    const submissionCount = challenge
+        ? Math.max(
+            challengeSubmissions.length,
+            challenge.numOfSubmissions + (challenge.numOfCheckpointSubmissions ?? 0),
+        )
+        : 0
+
+    const mySubmissions = useMemo(() => {
+        if (!profile?.handle) {
+            return []
+        }
+
+        return challengeSubmissions.filter(submission => submission.memberHandle === profile.handle)
+    }, [challengeSubmissions, profile?.handle])
+
+    const checkpoints: BackendChallengeCheckpoints | undefined = useMemo(() => {
+        if (!challenge?.checkpoints) {
+            return undefined
+        }
+
+        return {
+            ...challenge.checkpoints,
+            checkpointResults: challenge.checkpoints.checkpointResults.map(item => ({
+                ...item,
+                expanded: checkpointFeedbackState[item.submissionId] ?? item.expanded ?? false,
+            })),
+        }
+    }, [challenge?.checkpoints, checkpointFeedbackState])
+
+    const tabs = useMemo<ReadonlyArray<TabsNavItem<ChallengeDetailTab>>>(() => {
+        const nextTabs: TabsNavItem<ChallengeDetailTab>[] = [
+            {
+                id: ChallengeDetailTab.details,
+                title: 'Details',
+            },
+        ]
+
+        if (!challenge) {
+            return nextTabs
+        }
+
+        nextTabs.push({
+            badges: [
+                {
+                    count: registrantCount,
+                    type: 'info',
+                },
+            ],
+            id: ChallengeDetailTab.registrants,
+            title: 'Registrants',
+        })
+
+        if (isDesignChallenge(challenge) && (challenge.numOfCheckpointSubmissions ?? 0) > 0) {
+            nextTabs.push({
+                id: ChallengeDetailTab.checkpoints,
+                title: 'Checkpoints',
+            })
+        }
+
+        nextTabs.push({
+            badges: [
+                {
+                    count: submissionCount,
+                    type: 'info',
+                },
+            ],
+            id: ChallengeDetailTab.submissions,
+            title: 'Submissions',
+        })
+
+        if (displayWinners.length > 0 && !isLegacyMM) {
+            nextTabs.push({
+                id: ChallengeDetailTab.winners,
+                title: 'Winners',
+            })
+        }
+
+        nextTabs.push({
+            id: ChallengeDetailTab.discussion,
+            title: 'Challenge Discussion',
+        })
+
+        return nextTabs
+    }, [challenge, displayWinners.length, isLegacyMM, registrantCount, submissionCount])
+
+    useEffect(() => {
+        const activeTabExists = tabs.some(tab => tab.id === activeTab)
+
+        if (!activeTabExists) {
+            setActiveTab(ChallengeDetailTab.details)
+        }
+    }, [activeTab, tabs])
+
+    useEffect(() => {
+        const queryTab = (searchParams.get('tab') ?? undefined) as ChallengeDetailTab | undefined
+
+        if (queryTab && tabs.some(tab => tab.id === queryTab)) {
+            setActiveTab(queryTab)
+        }
+    }, [searchParams, tabs])
+
+    useEffect(() => {
+        termsStateRef.current = termsState
+    }, [termsState])
+
+    useEffect(() => {
+        const docuSignTemplateId = searchParams.get('docuSignReturn')
+        if (!docuSignTemplateId || !challenge || processedDocuSignTemplateRef.current === docuSignTemplateId) {
+            return undefined
+        }
+
+        processedDocuSignTemplateRef.current = docuSignTemplateId
+        let canceled = false
+        const processDocuSignReturn = async (): Promise<void> => {
+            try {
+                if (allAvailableTermIds.length) {
+                    await loadTerms(allAvailableTermIds)
+                    await new Promise<void>(resolve => {
+                        setTimeout(resolve, 0)
+                    })
+
+                    if (canceled) {
+                        return
+                    }
+
+                    const matchingTerm = termsStateRef.current.terms.find(term => (
+                        term.docusignTemplateId === docuSignTemplateId
+                    ))
+
+                    if (matchingTerm) {
+                        signDocuSign(matchingTerm.id)
+                    }
+                }
+            } finally {
+                if (!canceled) {
+                    const nextSearchParams = new URLSearchParams(searchParams)
+                    nextSearchParams.delete('docuSignReturn')
+                    setSearchParams(nextSearchParams, { replace: true })
+                }
+            }
+        }
+
+        processDocuSignReturn()
+            .catch(() => undefined)
+
+        return () => {
+            canceled = true
+        }
+    }, [
+        allAvailableTermIds,
+        challenge,
+        loadTerms,
+        searchParams,
+        setSearchParams,
+        signDocuSign,
+    ])
+
+    const challengesUrl = useMemo(() => {
+        const path = withLeadingSlash(`${rootRoute}/${challengeListingRouteId}`.replace(/\/{2,}/g, '/'))
+        const query = searchParams.toString()
+
+        return query
+            ? `${path}?${query}`
+            : path
+    }, [searchParams])
+
+    const handleRegisterClick = useCallback((): void => {
+        if (isWiproRegistrationBlocked(profile?.email, challenge?.isWiproAllowed)) {
+            toast.error(WIPRO_REGISTRATION_BLOCKED_MESSAGE)
+            return
+        }
+
+        if (!isLoggedIn) {
+            window.location.assign(authUrlLogin(window.location.href))
+            return
+        }
+
+        setShowSecurityReminder(true)
+    }, [challenge?.isWiproAllowed, isLoggedIn, profile?.email])
+
+    const onRegisterConfirmed = useCallback(async (): Promise<void> => {
+        if (!challengeId) {
+            return
+        }
+
+        setRegistering(true)
+        setAllTermIds(allAvailableTermIds)
+
+        try {
+            await loadTerms(allAvailableTermIds)
+            await new Promise<void>(resolve => {
+                setTimeout(resolve, 0)
+            })
+
+            if (termsStateRef.current.canRegister) {
+                await registerForChallenge(challengeId)
+                await Promise.all([
+                    mutate(`community/challenge/${challengeId}`),
+                    mutate(`community/registrants/${challengeId}`),
+                    mutate(`community/submissions/${challengeId}`),
+                ])
+            } else {
+                setShowTermsModal(true)
+            }
+        } catch {
+            toast.error('Failed to register for this challenge.')
+        } finally {
+            setRegistering(false)
+        }
+    }, [allAvailableTermIds, challengeId, loadTerms])
+
+    const handleAllTermsAgreed = useCallback(async (): Promise<void> => {
+        if (!challengeId) {
+            return
+        }
+
+        setShowTermsModal(false)
+        setRegistering(true)
+
+        try {
+            await registerForChallenge(challengeId)
+            await Promise.all([
+                mutate(`community/challenge/${challengeId}`),
+                mutate(`community/registrants/${challengeId}`),
+                mutate(`community/submissions/${challengeId}`),
+            ])
+        } catch {
+            toast.error('Failed to register for this challenge.')
+        } finally {
+            setRegistering(false)
+        }
+    }, [challengeId])
+
+    const handleTermsModalClose = useCallback((): void => {
+        setShowTermsModal(false)
+    }, [])
+
+    const handleUnregisterClick = useCallback(async (): Promise<void> => {
+        if (!challengeId || !profile?.userId) {
+            return
+        }
+
+        setUnregistering(true)
+
+        try {
+            const resources = await fetchChallengeResources(challengeId)
+            const memberId = `${profile.userId}`
+            const resource = resources.data.find(item => (
+                item.memberId === memberId && item.roleId === SUBMITTER_ROLE_ID
+            ))
+
+            if (!resource?.id) {
+                toast.error('Unable to find a challenge registration for your account.')
+                return
+            }
+
+            await unregisterFromChallenge(resource.id)
+            await Promise.all([
+                mutate(`community/challenge/${challengeId}`),
+                mutate(`community/registrants/${challengeId}`),
+                mutate(`community/submissions/${challengeId}`),
+            ])
+        } catch {
+            toast.error('Failed to unregister from this challenge.')
+        } finally {
+            setUnregistering(false)
+        }
+    }, [challengeId, profile?.userId])
+
+    const handleToggleDeadline = useCallback((): void => {
+        setShowDeadlineDetail(previous => !previous)
+    }, [])
+
+    const handleToggleCheckpointFeedback = useCallback((submissionId: string, expanded: boolean): void => {
+        setCheckpointFeedbackState(previous => ({
+            ...previous,
+            [submissionId]: expanded,
+        }))
+    }, [])
+    const handleTabChange = useCallback((tab: string): void => {
+        setActiveTab(tab as ChallengeDetailTab)
+    }, [])
+    const handleSecurityReminderCancel = useCallback((): void => {
+        setShowSecurityReminder(false)
+    }, [])
+    const handleSecurityReminderOk = useCallback((): void => {
+        setShowSecurityReminder(false)
+        onRegisterConfirmed()
+            .catch(() => undefined)
+    }, [onRegisterConfirmed])
+
+    const isLoading = isLoadingChallenge
+
+    if (isLoading) {
+        return (
+            <section className={styles.page}>
+                <div className={styles.spinnerWrap}>
+                    <LoadingSpinner />
+                </div>
+            </section>
+        )
+    }
+
+    if (!challenge) {
+        return (
+            <section className={styles.page}>
+                <div className={styles.emptyState}>Challenge not found.</div>
+            </section>
+        )
+    }
+
+    return (
+        <section className={styles.page}>
+            <ChallengeHeader
+                activeTab={activeTab}
+                challenge={challenge}
+                challengePrizes={challengePrizes}
+                challengesUrl={challengesUrl}
+                displayWinners={displayWinners}
+                hasRegistered={hasRegistered}
+                isLegacyMM={isLegacyMM}
+                isLoggedIn={isLoggedIn}
+                mySubmissions={mySubmissions}
+                onRegisterClick={handleRegisterClick}
+                onTabChange={handleTabChange}
+                onToggleDeadlines={handleToggleDeadline}
+                onUnregisterClick={handleUnregisterClick}
+                registering={registering}
+                showDeadlineDetail={showDeadlineDetail}
+                submissionEnded={submissionEnded}
+                tabs={tabs}
+                unregistering={unregistering}
+            />
+
+            <div className={styles.tabContent}>
+                {activeTab === ChallengeDetailTab.details && (
+                    <Specification
+                        challenge={challenge}
+                        communityMeta={communityMeta}
+                        isLoggedIn={isLoggedIn}
+                    />
+                )}
+
+                {activeTab === ChallengeDetailTab.registrants && (
+                    <Registrants
+                        challenge={challenge}
+                        checkpointResults={checkpoints?.checkpointResults ?? []}
+                        notFoundCountryFlagUrl={{}}
+                        onSortChange={setRegistrantsSort}
+                        registrants={challengeRegistrants}
+                        results={displayWinners}
+                        sort={registrantsSort}
+                        statisticsData={[]}
+                    />
+                )}
+
+                {activeTab === ChallengeDetailTab.checkpoints && checkpoints && (
+                    <Checkpoints
+                        checkpoints={checkpoints}
+                        onToggleFeedback={handleToggleCheckpointFeedback}
+                    />
+                )}
+
+                {activeTab === ChallengeDetailTab.submissions && (
+                    <Submissions
+                        auth={{
+                            handle: profile?.handle,
+                            userId: profile?.userId,
+                        }}
+                        challenge={challenge}
+                        isLegacyMM={isLegacyMM}
+                        isLoggedIn={isLoggedIn}
+                        onSortChange={setSubmissionsSort}
+                        sort={submissionsSort}
+                        submissionEnded={submissionEnded}
+                        submissions={challengeSubmissions}
+                    />
+                )}
+
+                {activeTab === ChallengeDetailTab.winners && (
+                    <Winners
+                        isDesign={isDesignChallenge(challenge)}
+                        isLoggedIn={isLoggedIn}
+                        isMM={isMarathonMatch(challenge)}
+                        prizes={challengePrizes}
+                        submissions={challengeSubmissions}
+                        viewable={getSubmissionsViewable(challenge)}
+                        winners={displayWinners}
+                    />
+                )}
+
+                {activeTab === ChallengeDetailTab.discussion && (
+                    <ChallengeDiscussion challengeName={challenge.name} />
+                )}
+            </div>
+
+            {!!articles.length && <ThriveArticlesSidebar articles={articles} />}
+
+            {(isLoadingRegistrants || isLoadingSubmissions) && (
+                <div className={styles.inlineLoading}>Updating challenge data...</div>
+            )}
+
+            {showSecurityReminder && (
+                <SecurityReminderModal
+                    onCancel={handleSecurityReminderCancel}
+                    onOk={handleSecurityReminderOk}
+                />
+            )}
+
+            {showTermsModal && (
+                <TermsModal
+                    challengeId={challengeId!}
+                    onAllAgreed={handleAllTermsAgreed}
+                    onClose={handleTermsModalClose}
+                    termIds={allTermIds}
+                />
+            )}
+        </section>
+    )
+}
+
+export default ChallengeDetail
diff --git a/src/apps/community/src/pages/challenge-detail/challenge-detail.routes.tsx b/src/apps/community/src/pages/challenge-detail/challenge-detail.routes.tsx
new file mode 100644
index 000000000..b23122046
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/challenge-detail.routes.tsx
@@ -0,0 +1,16 @@
+import { PlatformRoute } from '~/libs/core'
+
+import { challengeDetailRouteId } from '../../config/routes.config'
+
+import ChallengeDetail from './ChallengeDetail'
+
+/**
+ * Route definitions for the challenge detail page module.
+ */
+export const challengeDetailRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: false,
+        element: <ChallengeDetail />,
+        route: challengeDetailRouteId,
+    },
+]
diff --git a/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/ChallengeDiscussion.module.scss b/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/ChallengeDiscussion.module.scss
new file mode 100644
index 000000000..481c9765f
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/ChallengeDiscussion.module.scss
@@ -0,0 +1,279 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    align-items: flex-start;
+    display: grid;
+    gap: 32px;
+    grid-template-columns: 326px 1fr;
+}
+
+.sidebar,
+.topicList {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.sidebarCard,
+.topicCard {
+    background: $tc-white;
+    border-radius: 8px;
+}
+
+.sidebarCard {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px;
+
+    h2,
+    h3,
+    p {
+        margin: 0;
+    }
+
+    h2 {
+        font-size: 26px;
+        font-weight: $font-weight-bold;
+        line-height: 30px;
+    }
+
+    h3 {
+        font-size: 16px;
+        font-weight: $font-weight-bold;
+        line-height: 22px;
+    }
+
+    p {
+        color: $black-80;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    a {
+        color: $link-blue-dark;
+        font-size: 14px;
+        font-weight: $font-weight-bold;
+        text-decoration: none;
+    }
+}
+
+.newTopicButton {
+    align-items: center;
+    background: $turq-160;
+    border: 0;
+    border-radius: 24px;
+    color: $tc-white;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 14px;
+    font-weight: $font-weight-bold;
+    gap: 4px;
+    justify-content: center;
+    line-height: 24px;
+    padding: 8px 24px 8px 20px;
+    text-transform: uppercase;
+    width: fit-content;
+
+    svg {
+        height: 16px;
+        width: 16px;
+    }
+}
+
+.searchField,
+.selectField {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    input,
+    select {
+        background: $tc-white;
+        border: 1px solid $black-40;
+        border-radius: 4px;
+        color: $black-100;
+        font-size: 14px;
+        line-height: 22px;
+        min-height: 40px;
+        padding: 8px 10px;
+        width: 100%;
+    }
+}
+
+.searchField {
+    position: relative;
+
+    svg {
+        color: $black-80;
+        height: 16px;
+        left: 10px;
+        position: absolute;
+        top: 12px;
+        width: 16px;
+    }
+
+    input {
+        padding-left: 32px;
+    }
+}
+
+.selectField {
+    span {
+        font-size: 12px;
+        font-weight: $font-weight-bold;
+        line-height: 16px;
+        text-transform: uppercase;
+    }
+}
+
+.radioGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    label {
+        align-items: center;
+        display: inline-flex;
+        font-size: 16px;
+        gap: 8px;
+        line-height: 24px;
+    }
+
+    input {
+        accent-color: $turq-160;
+        height: 20px;
+        width: 20px;
+    }
+}
+
+.topicCard {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 28px 24px;
+
+    p {
+        color: $black-100;
+        font-size: 16px;
+        line-height: 22px;
+        margin: 0;
+        max-width: 800px;
+    }
+}
+
+.topicMain {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    h2 {
+        color: $black-100;
+        font-size: 24px;
+        font-weight: $font-weight-bold;
+        line-height: 30px;
+        margin: 0;
+    }
+}
+
+.topicMeta,
+.topicFooter,
+.topicAuthorGroup {
+    align-items: center;
+    color: $black-80;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 14px;
+    gap: 16px;
+    line-height: 20px;
+}
+
+.topicFooter {
+    justify-content: space-between;
+}
+
+.kindChip,
+.roleChip {
+    align-items: center;
+    border-radius: 2px;
+    display: inline-flex;
+    font-size: 11px;
+    font-weight: $font-weight-medium;
+    line-height: 10px;
+    padding: 3px 4px;
+}
+
+.announcement {
+    background: $green-140;
+    color: $tc-white;
+}
+
+.discussion {
+    background: $blue-15;
+    color: $blue-140;
+}
+
+.roleChip {
+    background: $tc-white;
+    border: 1px solid $black-60;
+    color: $black-80;
+}
+
+.cardRule {
+    background: $black-10;
+    border-radius: 1px;
+    height: 2px;
+    width: 100%;
+}
+
+.authorLine {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.avatar {
+    align-items: center;
+    border-radius: 50%;
+    color: $tc-white;
+    display: inline-flex;
+    font-size: 11px;
+    font-weight: $font-weight-bold;
+    height: 32px;
+    justify-content: center;
+    width: 32px;
+}
+
+.blue {
+    background: $blue-100;
+}
+
+.gold {
+    background: $gold-1;
+    color: $black-100;
+}
+
+.green {
+    background: $green-100;
+}
+
+.orange {
+    background: $orange-100;
+}
+
+.red {
+    background: $red-100;
+}
+
+.handle {
+    color: $black-100;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+@media (max-width: 1024px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/ChallengeDiscussion.tsx b/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/ChallengeDiscussion.tsx
new file mode 100644
index 000000000..e5cf3c6b4
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/ChallengeDiscussion.tsx
@@ -0,0 +1,182 @@
+import { FC, useMemo } from 'react'
+import classNames from 'classnames'
+
+import { IconOutline } from '~/libs/ui'
+
+import {
+    sampleForumTopics,
+} from '../../../forums/sample-data'
+import {
+    ForumAuthor,
+    ForumTopic,
+    ForumTopicKind,
+} from '../../../forums/types'
+
+import styles from './ChallengeDiscussion.module.scss'
+
+interface ChallengeDiscussionProps {
+    challengeName: string
+}
+
+interface TopicCardProps {
+    topic: ForumTopic
+}
+
+const topicKindLabel: Record<ForumTopicKind, string> = {
+    announcement: 'Announcement',
+    discussion: 'Discussion',
+}
+
+/**
+ * Returns the initials displayed in mock forum avatar placeholders.
+ *
+ * @param author Forum author metadata.
+ * @returns Uppercase author initials.
+ */
+function getAuthorInitials(author: ForumAuthor): string {
+    return author.handle
+        .split('.')
+        .map(part => part.charAt(0))
+        .join('')
+        .slice(0, 2)
+        .toUpperCase()
+}
+
+/**
+ * Renders a compact forum author line for the mock discussion data.
+ *
+ * @param props Forum author metadata.
+ * @returns Author identity row.
+ */
+const AuthorLine: FC<{ author: ForumAuthor }> = (
+    props: { author: ForumAuthor },
+) => (
+    <div className={styles.authorLine}>
+        <span className={classNames(styles.avatar, styles[props.author.avatarTone])}>
+            {getAuthorInitials(props.author)}
+        </span>
+        <strong className={styles.handle}>{props.author.handle}</strong>
+        <span className={styles.roleChip}>{props.author.role}</span>
+    </div>
+)
+
+/**
+ * Renders one mock forum topic summary.
+ *
+ * @param props Topic data to display.
+ * @returns Topic card for the discussion tab.
+ */
+const TopicCard: FC<TopicCardProps> = (props: TopicCardProps) => (
+    <article className={styles.topicCard}>
+        <div className={styles.topicMain}>
+            <h2>{props.topic.title}</h2>
+            <div className={styles.topicMeta}>
+                <span className={classNames(styles.kindChip, styles[props.topic.kind])}>
+                    {topicKindLabel[props.topic.kind]}
+                </span>
+                <span>
+                    {props.topic.postCount}
+                    {' '}
+                    posts
+                </span>
+                <span aria-hidden='true'>|</span>
+                <span>
+                    {props.topic.viewCount}
+                    {' '}
+                    views
+                </span>
+            </div>
+        </div>
+        <p>{props.topic.body}</p>
+        <div className={styles.cardRule} />
+        <div className={styles.topicFooter}>
+            <div className={styles.topicAuthorGroup}>
+                <AuthorLine author={props.topic.author} />
+                <span>
+                    Last post:
+                    {' '}
+                    {props.topic.lastPostAt}
+                </span>
+            </div>
+            <span>
+                Created:
+                {' '}
+                {props.topic.createdAt}
+            </span>
+        </div>
+    </article>
+)
+
+/**
+ * Renders the challenge discussion tab using temporary mock forum content.
+ *
+ * @param props Current challenge metadata for the discussion heading.
+ * @returns Mock challenge discussion layout.
+ */
+const ChallengeDiscussion: FC<ChallengeDiscussionProps> = (
+    props: ChallengeDiscussionProps,
+) => {
+    const totalPosts = useMemo(
+        () => sampleForumTopics.reduce(
+            (total: number, topic: ForumTopic) => total + topic.postCount,
+            0,
+        ),
+        [],
+    )
+
+    return (
+        <section className={styles.container}>
+            <aside className={styles.sidebar}>
+                <section className={styles.sidebarCard}>
+                    <h2>{props.challengeName}</h2>
+                    <p>
+                        {sampleForumTopics.length}
+                        {' '}
+                        topics
+                        <span aria-hidden='true'> | </span>
+                        {totalPosts}
+                        {' '}
+                        posts
+                    </p>
+                    <h3>Links:</h3>
+                    <a href='/community/forums'>General Forums</a>
+                    <button className={styles.newTopicButton} type='button'>
+                        <IconOutline.PlusIcon />
+                        New Topic
+                    </button>
+                </section>
+
+                <section className={styles.sidebarCard}>
+                    <label className={styles.searchField}>
+                        <IconOutline.SearchIcon />
+                        <input placeholder='Search Topic' type='search' />
+                    </label>
+                    <label className={styles.selectField}>
+                        <span>Sort by</span>
+                        <select defaultValue='Most Recent'>
+                            <option>Most Recent</option>
+                            <option>Most Active</option>
+                            <option>Oldest</option>
+                        </select>
+                    </label>
+                    <div className={styles.radioGroup}>
+                        {['All Topics', 'Unread', 'Announcements', 'Discussions'].map(label => (
+                            <label key={label}>
+                                <input defaultChecked={label === 'All Topics'} name='topic-filter' type='radio' />
+                                {label}
+                            </label>
+                        ))}
+                    </div>
+                </section>
+            </aside>
+
+            <main className={styles.topicList}>
+                {sampleForumTopics.map(topic => (
+                    <TopicCard key={topic.id} topic={topic} />
+                ))}
+            </main>
+        </section>
+    )
+}
+
+export default ChallengeDiscussion
diff --git a/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/index.ts b/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/index.ts
new file mode 100644
index 000000000..f11fe1a57
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ChallengeDiscussion/index.ts
@@ -0,0 +1 @@
+export { default as ChallengeDiscussion } from './ChallengeDiscussion'
diff --git a/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/ChallengeHeader.module.scss b/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/ChallengeHeader.module.scss
new file mode 100644
index 000000000..d967a5636
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/ChallengeHeader.module.scss
@@ -0,0 +1,347 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.challengeTitleRow {
+    align-items: flex-start;
+    display: flex;
+    gap: 16px;
+}
+
+.backCircle {
+    align-items: center;
+    border: 1.5px solid $turq-160;
+    border-radius: 50%;
+    color: $turq-160;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 24px;
+    justify-content: center;
+    margin-top: 8px;
+    transform: rotate(90deg);
+    width: 24px;
+
+    svg {
+        height: 16px;
+        width: 16px;
+    }
+}
+
+.title {
+    color: $black-100;
+    font-size: 34px;
+    font-weight: $font-weight-medium;
+    line-height: 40px;
+    margin: 0;
+}
+
+.tagRow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.smallTag {
+    background: $black-10;
+    border-radius: 2px;
+    color: $black-100;
+    font-size: 11px;
+    font-weight: $font-weight-medium;
+    line-height: 10px;
+    padding: 3px 4px;
+}
+
+.keyInformation {
+    background: $tc-white;
+    border: 1px solid $black-20;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.keyTitle {
+    color: $black-100;
+    font-size: 18px;
+    font-weight: $font-weight-medium;
+    line-height: 22px;
+    padding: 24px 24px 0;
+    text-transform: uppercase;
+}
+
+.prizeRow {
+    align-items: center;
+    display: flex;
+    gap: 24px;
+    justify-content: space-between;
+    padding: 48px 24px 16px;
+}
+
+.prizes {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 48px;
+}
+
+.prize {
+    align-items: center;
+    display: inline-flex;
+    gap: 8px;
+
+    strong {
+        color: $black-100;
+        font-size: 24px;
+        font-weight: $font-weight-medium;
+        line-height: 32px;
+    }
+}
+
+.prizeBadge {
+    align-items: center;
+    border-radius: 20px;
+    display: inline-flex;
+    font-size: 16px;
+    font-weight: $font-weight-medium;
+    height: 40px;
+    justify-content: center;
+    min-width: 40px;
+    padding: 8px;
+}
+
+.gold {
+    background: $gold-1;
+    color: $black-100;
+}
+
+.silver {
+    background: $silver-1;
+    color: $black-100;
+}
+
+.bronze {
+    background: $bronze-1;
+    color: $black-100;
+}
+
+.turquoise {
+    background: $turq-15;
+    color: $black-100;
+}
+
+.noPrizes {
+    color: $black-80;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.challengeActions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.primaryPill,
+.outlinePill,
+.primaryPillLink,
+.outlinePillLink {
+    align-items: center;
+    border-radius: 50px !important;
+    display: inline-flex;
+    font-size: 14px;
+    font-weight: $font-weight-bold;
+    gap: 6px;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 40px;
+    padding: 8px 24px;
+    text-decoration: none;
+    text-transform: uppercase !important;
+
+    svg {
+        height: 16px;
+        width: 16px;
+    }
+}
+
+.primaryPill,
+.primaryPillLink {
+    background: $turq-160 !important;
+    color: $tc-white !important;
+}
+
+.outlinePill,
+.outlinePillLink {
+    background: $tc-white !important;
+    border: 1px solid $turq-160;
+    color: $turq-160 !important;
+}
+
+.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.bonus {
+    color: $black-100;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0;
+    padding: 0 24px 48px;
+
+    span {
+        color: $blue-140;
+    }
+}
+
+.deadlineBar {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-top: 1px solid $black-20;
+    color: $black-100;
+    cursor: pointer;
+    display: flex;
+    font-size: 16px;
+    gap: 16px;
+    line-height: 26px;
+    padding: 16px 24px;
+    text-align: left;
+    width: 100%;
+}
+
+.deadlineDivider {
+    background: $black-60;
+    height: 26px;
+    width: 2px;
+}
+
+.deadlineIcon {
+    color: $black-100;
+    height: 32px;
+    margin-left: auto;
+    transition: transform 0.15s ease-in-out;
+    width: 32px;
+}
+
+.deadlineIconOpen {
+    transform: rotate(180deg);
+}
+
+.deadlinesPanel {
+    border-top: 1px solid $black-20;
+    padding: 16px 24px 24px;
+}
+
+.timezone {
+    color: $black-80;
+    font-size: 12px;
+    margin: 0 0 16px;
+}
+
+.deadlineItem {
+    &:not(:last-child) {
+        border-bottom: 1px solid $black-10;
+        margin-bottom: 12px;
+        padding-bottom: 12px;
+    }
+}
+
+.deadlineName {
+    color: $black-100;
+    font-weight: $font-weight-bold;
+    margin: 0;
+}
+
+.deadlineRange {
+    color: $black-80;
+    margin: 4px 0 0;
+}
+
+.challengeTabs {
+    align-items: stretch;
+    background: $tc-white;
+    border-top: 1px solid $black-20;
+    display: flex;
+    min-height: 42px;
+    overflow-x: auto;
+}
+
+.tabButton {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: $black-80;
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: 14px;
+    font-weight: $font-weight-medium;
+    gap: 4px;
+    line-height: 20px;
+    padding: 12px 16px 10px;
+}
+
+.tabBadge {
+    align-items: center;
+    background: $link-blue-dark;
+    border-radius: 50px;
+    color: $tc-white;
+    display: inline-flex;
+    font-size: 14px;
+    justify-content: center;
+    line-height: 16px;
+    min-width: 24px;
+    padding: 0 8px;
+}
+
+.activeTab {
+    border-bottom: 2px solid $link-blue-dark;
+    color: $link-blue-dark;
+}
+
+@media (max-width: 1024px) {
+    .prizeRow {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .challengeActions {
+        justify-content: flex-start;
+    }
+}
+
+@media (max-width: 768px) {
+    .title {
+        font-size: 26px;
+        line-height: 32px;
+    }
+
+    .prizeRow {
+        padding-top: 24px;
+    }
+
+    .prizes {
+        gap: 16px;
+    }
+
+    .deadlineBar {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .deadlineDivider {
+        display: none;
+    }
+
+    .deadlineIcon {
+        margin-left: 0;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/ChallengeHeader.tsx b/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/ChallengeHeader.tsx
new file mode 100644
index 000000000..c1e070253
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/ChallengeHeader.tsx
@@ -0,0 +1,410 @@
+/* eslint-disable complexity */
+import { FC, MouseEvent, useCallback, useMemo } from 'react'
+import { generatePath, Link } from 'react-router-dom'
+import classNames from 'classnames'
+import moment from 'moment'
+
+import {
+    Button,
+    IconOutline,
+    type TabsNavItem,
+} from '~/libs/ui'
+
+import {
+    challengeDetailRouteId,
+    rootRoute,
+} from '../../../../config/routes.config'
+import {
+    type BackendChallengePhase,
+    type BackendChallengeWinner,
+    ChallengeInfo,
+    isDesignChallenge,
+    PlacementPrize,
+} from '../../../../lib'
+
+import styles from './ChallengeHeader.module.scss'
+
+type ChallengeDetailTabId = 'checkpoints' | 'details' | 'discussion' | 'registrants' | 'submissions' | 'winners'
+
+interface ChallengeHeaderProps {
+    activeTab: ChallengeDetailTabId
+    challenge: ChallengeInfo
+    challengePrizes: PlacementPrize[]
+    challengesUrl: string
+    displayWinners: BackendChallengeWinner[]
+    hasRegistered: boolean
+    isLegacyMM: boolean
+    isLoggedIn: boolean
+    mySubmissions: Array<{ id: string }>
+    onRegisterClick: () => void
+    onTabChange: (tab: ChallengeDetailTabId) => void
+    onToggleDeadlines: () => void
+    onUnregisterClick: () => void
+    registering: boolean
+    showDeadlineDetail: boolean
+    submissionEnded: boolean
+    tabs: ReadonlyArray<TabsNavItem<ChallengeDetailTabId>>
+    unregistering: boolean
+}
+
+function formatDate(date: string | undefined): string {
+    if (!date) {
+        return 'TBD'
+    }
+
+    return moment(date)
+        .local()
+        .format('MMM DD, YYYY HH:mm')
+}
+
+function getPhaseEndDate(phase: BackendChallengePhase): string | undefined {
+    return phase.actualEndDate ?? phase.scheduledEndDate
+}
+
+function toTypeName(challenge: ChallengeInfo): string {
+    if (typeof challenge.type === 'string') {
+        return challenge.type
+    }
+
+    return challenge.type.name
+}
+
+/**
+ * Formats a placement prize value for the header prize strip.
+ *
+ * @param prize Challenge placement prize.
+ * @returns Human-readable prize value.
+ */
+function formatPrizeValue(prize: PlacementPrize): string {
+    if (prize.type === 'POINT') {
+        return `${prize.value.toLocaleString('en-US')} pts`
+    }
+
+    return new Intl.NumberFormat('en-US', {
+        currency: 'USD',
+        maximumFractionDigits: 0,
+        style: 'currency',
+    })
+        .format(prize.value)
+}
+
+/**
+ * Formats a zero-based prize index into a placement label.
+ *
+ * @param index Zero-based prize index.
+ * @returns Ordinal prize label.
+ */
+function formatPlacementLabel(index: number): string {
+    if (index === 0) {
+        return '1st'
+    }
+
+    if (index === 1) {
+        return '2nd'
+    }
+
+    if (index === 2) {
+        return '3rd'
+    }
+
+    return `${index + 1}th`
+}
+
+/**
+ * Returns the visual tone used for a placement badge.
+ *
+ * @param index Zero-based prize index.
+ * @returns CSS module tone key.
+ */
+function getPrizeTone(index: number): string {
+    if (index === 0) {
+        return 'gold'
+    }
+
+    if (index === 1) {
+        return 'silver'
+    }
+
+    if (index === 2) {
+        return 'bronze'
+    }
+
+    return 'turquoise'
+}
+
+const DeadlinesPanel: FC<{ phases: BackendChallengePhase[] }> = (
+    props: { phases: BackendChallengePhase[] },
+) => (
+    <div className={styles.deadlinesPanel}>
+        <p className={styles.timezone}>
+            Timezone:
+            {' '}
+            {Intl.DateTimeFormat()
+                .resolvedOptions().timeZone}
+        </p>
+        {props.phases.map(phase => (
+            <div className={styles.deadlineItem} key={`${phase.id}-${phase.name}`}>
+                <p className={styles.deadlineName}>{phase.name}</p>
+                <p className={styles.deadlineRange}>
+                    {formatDate(phase.actualStartDate ?? phase.scheduledStartDate)}
+                    {' - '}
+                    {formatDate(getPhaseEndDate(phase))}
+                </p>
+            </div>
+        ))}
+    </div>
+)
+
+/**
+ * Renders the challenge detail header with actions, deadlines and tabs.
+ *
+ * @param props Header state and action handlers.
+ * @returns Challenge detail header block.
+ */
+const ChallengeHeader: FC<ChallengeHeaderProps> = (props: ChallengeHeaderProps) => {
+    const isDesign = isDesignChallenge(props.challenge)
+    const typeName = toTypeName(props.challenge)
+    const tagLabels = useMemo(() => Array.from(new Set([
+        props.challenge.track.name,
+        typeName,
+        ...props.challenge.tags,
+    ]))
+        .filter(Boolean)
+        .slice(0, 6), [
+        props.challenge.tags,
+        props.challenge.track.name,
+        typeName,
+    ])
+    const prizeRows = useMemo(() => props.challengePrizes.map((prize, index) => ({
+        label: formatPlacementLabel(index),
+        prize,
+        tone: getPrizeTone(index),
+    })), [props.challengePrizes])
+
+    const sortedPhases = useMemo(() => [...props.challenge.phases]
+        .sort((a, b) => {
+            const timeA = getPhaseEndDate(a)
+                ? new Date(getPhaseEndDate(a) as string)
+                    .getTime()
+                : 0
+            const timeB = getPhaseEndDate(b)
+                ? new Date(getPhaseEndDate(b) as string)
+                    .getTime()
+                : 0
+
+            return timeA - timeB
+        }), [props.challenge.phases])
+
+    const registrationPhase = props.challenge.phases.find(phase => (
+        phase.name.toLowerCase()
+            .includes('registration')
+    ))
+
+    const registrationEnded = props.challenge.status === 'COMPLETED'
+        || registrationPhase?.isOpen !== true
+    const hasSubmissions = props.mySubmissions.length > 0
+
+    const registerButtonDisabled = props.registering
+        || registrationEnded
+        || props.isLegacyMM
+        || props.challenge.status !== 'ACTIVE'
+    const unregisterButtonDisabled = props.unregistering
+        || registrationEnded
+        || hasSubmissions
+        || props.isLegacyMM
+    const submitButtonDisabled = !props.hasRegistered
+        || props.unregistering
+        || props.submissionEnded
+        || props.isLegacyMM
+
+    const checkpointPrizeSet = props.challenge.prizeSets.find(prizeSet => (
+        prizeSet.type.toLowerCase() === 'checkpoint'
+    ))
+
+    const checkpointBonus = checkpointPrizeSet?.prizes?.[0] as { type?: string; value?: number } | undefined
+    const checkpointBonusText = checkpointBonus?.value
+        ? checkpointBonus.type === 'POINT'
+            ? `${checkpointBonus.value} pts checkpoint bonus`
+            : `$${checkpointBonus.value} checkpoint bonus`
+        : undefined
+
+    const nextOpenPhase = sortedPhases.find(phase => phase.isOpen && phase.name !== 'Registration')
+    const currentDeadlineValue = props.challenge.timeLeft
+        ?? (nextOpenPhase ? formatDate(getPhaseEndDate(nextOpenPhase)) : 'No open phase')
+    const registerLabel = props.isLoggedIn
+        ? 'Register'
+        : 'Login to Register'
+    const challengeDetailPath = useMemo(() => {
+        const detailPath = generatePath(challengeDetailRouteId, { challengeId: props.challenge.id })
+
+        return `/${`${rootRoute}/${detailPath}`
+            .replace(/\/{2,}/g, '/')
+            .replace(/^\/+/, '')}`
+    }, [props.challenge.id])
+    const submitPath = `${challengeDetailPath}/submit`
+    const viewSubmissionsPath = `${challengeDetailPath}/my-submissions`
+    const handleSubmitLinkClick = useCallback((event: MouseEvent<HTMLAnchorElement>): void => {
+        if (submitButtonDisabled) {
+            event.preventDefault()
+        }
+    }, [submitButtonDisabled])
+    const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>): void => {
+        const tab = event.currentTarget.dataset.tab as ChallengeDetailTabId | undefined
+
+        if (tab) {
+            props.onTabChange(tab)
+        }
+    }, [props])
+
+    return (
+        <header className={styles.container}>
+            <div className={styles.challengeTitleRow}>
+                <Link className={styles.backCircle} to={props.challengesUrl} aria-label='Back to Challenges'>
+                    <IconOutline.ChevronDownIcon />
+                </Link>
+                <div>
+                    <h1 className={styles.title}>{props.challenge.name}</h1>
+                    <div className={styles.tagRow}>
+                        {tagLabels.map(tag => (
+                            <span className={styles.smallTag} key={tag}>{tag}</span>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.keyInformation}>
+                <div className={styles.keyTitle}>Key information</div>
+                <div className={styles.prizeRow}>
+                    <div className={styles.prizes}>
+                        {prizeRows.length
+                            ? prizeRows.map(row => (
+                                <div
+                                    className={styles.prize}
+                                    key={`${row.label}-${row.prize.type ?? 'USD'}-${row.prize.value}`}
+                                >
+                                    <span className={classNames(styles.prizeBadge, styles[row.tone])}>
+                                        {row.label}
+                                    </span>
+                                    <strong>{formatPrizeValue(row.prize)}</strong>
+                                </div>
+                            ))
+                            : <span className={styles.noPrizes}>No prizes listed</span>}
+                    </div>
+                    <div className={styles.challengeActions}>
+                        {props.hasRegistered ? (
+                            <Button
+                                className={styles.outlinePill}
+                                disabled={unregisterButtonDisabled}
+                                onClick={props.onUnregisterClick}
+                                secondary
+                                size='lg'
+                            >
+                                Unregister
+                            </Button>
+                        ) : (
+                            <Button
+                                className={styles.primaryPill}
+                                disabled={registerButtonDisabled}
+                                onClick={props.onRegisterClick}
+                                primary
+                                size='lg'
+                            >
+                                {registerLabel}
+                            </Button>
+                        )}
+
+                        <Link
+                            className={classNames(styles.primaryPillLink, submitButtonDisabled && styles.disabled)}
+                            onClick={handleSubmitLinkClick}
+                            to={submitPath}
+                        >
+                            <IconOutline.UploadIcon />
+                            Submit a solution
+                        </Link>
+
+                        {isDesign && props.hasRegistered && hasSubmissions && (
+                            <Link className={styles.outlinePillLink} to={viewSubmissionsPath}>
+                                View Submissions
+                            </Link>
+                        )}
+                    </div>
+                </div>
+
+                {(checkpointBonusText || props.challenge.reliabilityBonus || props.displayWinners.length > 0) && (
+                    <p className={styles.bonus}>
+                        {checkpointBonusText && (
+                            <>
+                                <span>Bonus:</span>
+                                {' '}
+                                {checkpointBonusText}
+                            </>
+                        )}
+                        {props.challenge.reliabilityBonus && (
+                            <>
+                                {checkpointBonusText ? ' | ' : ''}
+                                <span>Reliability Bonus:</span>
+                                {' $'}
+                                {props.challenge.reliabilityBonus.toFixed(0)}
+                            </>
+                        )}
+                        {props.displayWinners.length > 0 && (
+                            <>
+                                {(checkpointBonusText || props.challenge.reliabilityBonus) ? ' | ' : ''}
+                                <span>Winners announced:</span>
+                                {' '}
+                                {props.displayWinners.length}
+                            </>
+                        )}
+                    </p>
+                )}
+
+                <button className={styles.deadlineBar} onClick={props.onToggleDeadlines} type='button'>
+                    <span>
+                        Next Deadline:
+                        {' '}
+                        <strong>{nextOpenPhase?.name ?? 'No open phase'}</strong>
+                    </span>
+                    <span className={styles.deadlineDivider} />
+                    <span>
+                        Current Deadline Ends:
+                        {' '}
+                        <strong>{currentDeadlineValue}</strong>
+                    </span>
+                    <IconOutline.ChevronDownIcon
+                        className={classNames(
+                            styles.deadlineIcon,
+                            props.showDeadlineDetail && styles.deadlineIconOpen,
+                        )}
+                    />
+                </button>
+
+                {props.showDeadlineDetail && <DeadlinesPanel phases={sortedPhases} />}
+
+                <nav className={styles.challengeTabs} aria-label='Challenge sections'>
+                    {props.tabs.map(tab => (
+                        <button
+                            aria-current={props.activeTab === tab.id ? 'page' : undefined}
+                            className={classNames(
+                                styles.tabButton,
+                                props.activeTab === tab.id && styles.activeTab,
+                            )}
+                            data-tab={tab.id}
+                            key={tab.id}
+                            onClick={handleTabClick}
+                            type='button'
+                        >
+                            {tab.title}
+                            {tab.badges?.map(badge => (
+                                <span className={styles.tabBadge} key={badge.type}>
+                                    {badge.count}
+                                </span>
+                            ))}
+                        </button>
+                    ))}
+                </nav>
+            </div>
+        </header>
+    )
+}
+
+export default ChallengeHeader
diff --git a/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/index.ts b/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/index.ts
new file mode 100644
index 000000000..92a876fe3
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ChallengeHeader/index.ts
@@ -0,0 +1 @@
+export { default as ChallengeHeader } from './ChallengeHeader'
diff --git a/src/apps/community/src/pages/challenge-detail/components/Checkpoints/Checkpoints.module.scss b/src/apps/community/src/pages/challenge-detail/components/Checkpoints/Checkpoints.module.scss
new file mode 100644
index 000000000..65385f59f
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Checkpoints/Checkpoints.module.scss
@@ -0,0 +1,63 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    padding: $sp-5;
+}
+
+.title {
+    color: var(--DarkBlue);
+    font-size: 24px;
+    margin: 0 0 $sp-2;
+}
+
+.subtitle {
+    color: var(--GrayFontColor);
+    margin: 0 0 $sp-4;
+}
+
+.generalFeedback {
+    border-bottom: 1px solid var(--GrayBorder);
+    margin-bottom: $sp-4;
+    padding-bottom: $sp-4;
+}
+
+.items {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+}
+
+.item {
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+}
+
+.toggle {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    padding: $sp-3;
+    width: 100%;
+}
+
+.toggleTitle {
+    color: var(--DarkBlue);
+    font-weight: 600;
+}
+
+.toggleIcon {
+    color: var(--GrayFontColor);
+    font-size: 12px;
+    text-transform: uppercase;
+}
+
+.feedback {
+    border-top: 1px solid var(--GrayBorder);
+    padding: $sp-3;
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/Checkpoints/Checkpoints.tsx b/src/apps/community/src/pages/challenge-detail/components/Checkpoints/Checkpoints.tsx
new file mode 100644
index 000000000..6b185fefa
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Checkpoints/Checkpoints.tsx
@@ -0,0 +1,74 @@
+import { FC, MouseEvent, useCallback } from 'react'
+import DOMPurify from 'dompurify'
+
+import { BackendChallengeCheckpoints } from '../../../../lib'
+
+import styles from './Checkpoints.module.scss'
+
+interface CheckpointsProps {
+    checkpoints: BackendChallengeCheckpoints
+    onToggleFeedback: (submissionId: string, expanded: boolean) => void
+}
+
+/**
+ * Renders checkpoint general feedback and per-submission expandable feedback.
+ *
+ * @param props Checkpoint data and expand/collapse handler.
+ * @returns Checkpoint feedback content.
+ */
+const Checkpoints: FC<CheckpointsProps> = (props: CheckpointsProps) => {
+    const handleToggleClick = useCallback((event: MouseEvent<HTMLButtonElement>): void => {
+        const submissionId = event.currentTarget.dataset.submissionId ?? ''
+        const expanded = event.currentTarget.dataset.expanded === 'true'
+
+        props.onToggleFeedback(submissionId, !expanded)
+    }, [props])
+
+    return (
+        <section className={styles.container}>
+            <h2 className={styles.title}>Checkpoint Winners & General Feedback</h2>
+            <p className={styles.subtitle}>Check forums for general feedback</p>
+
+            <div
+                className={styles.generalFeedback}
+                dangerouslySetInnerHTML={{
+                    __html: DOMPurify.sanitize(props.checkpoints.generalFeedback ?? ''),
+                }}
+            />
+
+            <div className={styles.items}>
+                {(props.checkpoints.checkpointResults ?? []).map(result => {
+                    const expanded = result.expanded === true
+
+                    return (
+                        <article className={styles.item} key={result.submissionId}>
+                            <button
+                                className={styles.toggle}
+                                data-expanded={expanded}
+                                data-submission-id={result.submissionId}
+                                onClick={handleToggleClick}
+                                type='button'
+                            >
+                                <span className={styles.toggleTitle}>
+                                    Feedback #
+                                    {result.submissionId}
+                                </span>
+                                <span className={styles.toggleIcon}>{expanded ? 'Hide' : 'Show'}</span>
+                            </button>
+                            {expanded && (
+                                <div
+                                    className={styles.feedback}
+                                    dangerouslySetInnerHTML={{
+                                        __html: DOMPurify.sanitize(result.feedback ?? '<span>Empty Feedback</span>'),
+                                    }}
+                                />
+                            )}
+                        </article>
+                    )
+                })}
+            </div>
+        </section>
+    )
+}
+
+export default Checkpoints
diff --git a/src/apps/community/src/pages/challenge-detail/components/Checkpoints/index.ts b/src/apps/community/src/pages/challenge-detail/components/Checkpoints/index.ts
new file mode 100644
index 000000000..bc6c9ca94
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Checkpoints/index.ts
@@ -0,0 +1 @@
+export { default as Checkpoints } from './Checkpoints'
diff --git a/src/apps/community/src/pages/challenge-detail/components/Registrants/Registrants.module.scss b/src/apps/community/src/pages/challenge-detail/components/Registrants/Registrants.module.scss
new file mode 100644
index 000000000..edfef9614
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Registrants/Registrants.module.scss
@@ -0,0 +1,105 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: $tc-white;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.header {
+    background: $black-5;
+    border-bottom: 2px solid $black-10;
+    display: grid;
+    gap: 16px;
+    padding: 16px 24px;
+}
+
+.headCell {
+    background: transparent;
+    border: 0;
+    color: $black-100;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: $font-weight-bold;
+    line-height: 16px;
+    padding: 0;
+    text-align: left;
+    text-transform: uppercase !important;
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    display: grid;
+    gap: 16px;
+    padding: 18px 24px;
+
+    &:not(:first-child) {
+        border-top: 1px solid $black-10;
+    }
+}
+
+.cell {
+    align-items: center;
+    color: $black-80;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 14px;
+    gap: 8px;
+    line-height: 20px;
+    min-width: 0;
+}
+
+.memberLink {
+    color: $link-blue-dark;
+    font-weight: $font-weight-bold;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+}
+
+.flag {
+    border: 1px solid $black-20;
+    border-radius: 50%;
+    height: 18px;
+    object-fit: cover;
+    width: 18px;
+}
+
+.placement {
+    background: $turq-15;
+    border-radius: 50px;
+    color: $turq-160;
+    font-size: 11px;
+    font-weight: $font-weight-bold;
+    line-height: 16px;
+    padding: 2px 8px;
+}
+
+.note {
+    color: $black-60;
+    font-size: 11px;
+    line-height: 16px;
+    text-transform: uppercase !important;
+}
+
+.emptyState {
+    background: $tc-white;
+    border-radius: 8px;
+    color: $black-80;
+    padding: 40px;
+    text-align: center;
+}
+
+@media (max-width: 768px) {
+    .header {
+        display: none;
+    }
+
+    .row {
+        grid-template-columns: 1fr !important;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/Registrants/Registrants.tsx b/src/apps/community/src/pages/challenge-detail/components/Registrants/Registrants.tsx
new file mode 100644
index 000000000..1a98d5a7b
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Registrants/Registrants.tsx
@@ -0,0 +1,393 @@
+import { FC, MouseEvent, useCallback, useMemo } from 'react'
+import moment from 'moment'
+
+import { EnvironmentConfig } from '~/config'
+
+import {
+    type BackendChallengeWinner,
+    type BackendCheckpointResult,
+    type BackendRegistrant,
+    ChallengeInfo,
+    getPlacementPrizes,
+    isDesignChallenge,
+} from '../../../../lib'
+
+import styles from './Registrants.module.scss'
+
+type SortDirection = 'asc' | 'desc'
+
+interface SortOption {
+    field: string
+    sort: SortDirection
+}
+
+interface RegistrantsProps {
+    challenge: ChallengeInfo
+    checkpointResults: BackendCheckpointResult[]
+    notFoundCountryFlagUrl: Record<string, boolean>
+    onSortChange: (sort: SortOption) => void
+    registrants: BackendRegistrant[]
+    results: BackendChallengeWinner[]
+    sort: SortOption
+    statisticsData: Array<Record<string, unknown>>
+}
+
+function formatDate(date: string | undefined): string {
+    if (!date) {
+        return '-'
+    }
+
+    return moment(date)
+        .local()
+        .format('MMM DD, YYYY HH:mm')
+}
+
+function getCheckpointPhaseDate(challenge: ChallengeInfo): number {
+    const checkpointPhase = challenge.phases.find(phase => phase.name === 'Checkpoint Submission')
+    const date = checkpointPhase?.actualEndDate ?? checkpointPhase?.scheduledEndDate
+
+    if (!date) {
+        return 0
+    }
+
+    return new Date(date)
+        .getTime()
+}
+
+function getCheckpointSubmissionDate(
+    challenge: ChallengeInfo,
+    registrant: BackendRegistrant,
+): string | undefined {
+    const checkpointEnd = getCheckpointPhaseDate(challenge)
+
+    if (!checkpointEnd) {
+        return undefined
+    }
+
+    if (!registrant.submissionDate) {
+        return undefined
+    }
+
+    const submitted = new Date(registrant.submissionDate)
+        .getTime()
+    return submitted <= checkpointEnd
+        ? registrant.submissionDate
+        : undefined
+}
+
+function getStatisticsSubmissionDate(
+    registrant: BackendRegistrant,
+    statisticsData: Array<Record<string, unknown>>,
+): string | undefined {
+    const stat = statisticsData.find(entry => `${entry.handle ?? ''}` === registrant.memberHandle)
+
+    if (!stat) {
+        return undefined
+    }
+
+    const submissions = Array.isArray(stat.submissions)
+        ? stat.submissions as Array<{ created?: string }>
+        : []
+
+    if (!submissions.length) {
+        return undefined
+    }
+
+    const dates = submissions
+        .map(submission => submission.created)
+        .filter((date): date is string => Boolean(date))
+        .sort((a, b) => new Date(a)
+            .getTime() - new Date(b)
+            .getTime())
+
+    return dates[0]
+}
+
+function getFinalSubmissionDate(
+    challenge: ChallengeInfo,
+    registrant: BackendRegistrant,
+    statisticsData: Array<Record<string, unknown>>,
+): string | undefined {
+    const checkpointEnd = getCheckpointPhaseDate(challenge)
+    const submissionDate = registrant.submissionDate
+
+    if (!submissionDate) {
+        return getStatisticsSubmissionDate(registrant, statisticsData)
+    }
+
+    if (!checkpointEnd) {
+        return submissionDate
+    }
+
+    const submitted = new Date(submissionDate)
+        .getTime()
+
+    if (submitted > checkpointEnd) {
+        return submissionDate
+    }
+
+    return getStatisticsSubmissionDate(registrant, statisticsData)
+}
+
+function compareValues(
+    valueA: number | string,
+    valueB: number | string,
+    sort: SortDirection,
+): number {
+    if (valueA === valueB) {
+        return 0
+    }
+
+    const result = valueA > valueB
+        ? 1
+        : -1
+
+    return sort === 'desc'
+        ? result * -1
+        : result
+}
+
+/**
+ * Sorts registrants by the selected table column and direction.
+ *
+ * @param registrants Registrant list.
+ * @param field Active sort field.
+ * @param sort Sort direction.
+ * @param challenge Challenge details for round-specific date handling.
+ * @param statisticsData Optional statistics data fallback for submissions.
+ * @returns Sorted registrants array.
+ */
+export function sortRegistrants(
+    registrants: BackendRegistrant[],
+    field: string,
+    sort: SortDirection,
+    challenge?: ChallengeInfo,
+    statisticsData: Array<Record<string, unknown>> = [],
+): BackendRegistrant[] {
+    const challengeData = challenge as ChallengeInfo
+
+    return [...registrants].sort((a, b) => {
+        if (field === 'Rating') {
+            return compareValues(a.rating ?? 0, b.rating ?? 0, sort)
+        }
+
+        if (field === 'Username') {
+            return compareValues(
+                a.memberHandle.toLowerCase(),
+                b.memberHandle.toLowerCase(),
+                sort,
+            )
+        }
+
+        if (field === 'Registration Date') {
+            return compareValues(
+                new Date(a.created)
+                    .getTime(),
+                new Date(b.created)
+                    .getTime(),
+                sort,
+            )
+        }
+
+        if (field === 'Round 1 Submitted Date') {
+            const checkpointA = getCheckpointSubmissionDate(challengeData, a)
+            const checkpointB = getCheckpointSubmissionDate(challengeData, b)
+
+            return compareValues(
+                checkpointA ? new Date(checkpointA)
+                    .getTime() : 0,
+                checkpointB ? new Date(checkpointB)
+                    .getTime() : 0,
+                sort,
+            )
+        }
+
+        const submittedA = getFinalSubmissionDate(challengeData, a, statisticsData)
+        const submittedB = getFinalSubmissionDate(challengeData, b, statisticsData)
+
+        return compareValues(
+            submittedA ? new Date(submittedA)
+                .getTime() : 0,
+            submittedB ? new Date(submittedB)
+                .getTime() : 0,
+            sort,
+        )
+    })
+}
+
+function getPlacement(
+    places: number,
+    results: BackendChallengeWinner[],
+    handle: string,
+): number {
+    const winner = results.find(result => (
+        result.handle === handle
+        && (result.placement ?? 0) <= places
+    ))
+
+    return winner?.placement ?? -1
+}
+
+/**
+ * Renders the challenge registrants table and sorting controls.
+ *
+ * @param props Registrants tab data.
+ * @returns Registrants tab content.
+ */
+const Registrants: FC<RegistrantsProps> = (props: RegistrantsProps) => {
+    const isDesign = isDesignChallenge(props.challenge)
+    const places = getPlacementPrizes(props.challenge).length
+    const twoRounds = Boolean(props.challenge.round1Introduction && props.challenge.round2Introduction)
+    const columnCount = (isDesign ? 3 : 4) + (twoRounds ? 1 : 0)
+    const gridStyle = {
+        gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+    }
+
+    const sortedRegistrants = useMemo(() => sortRegistrants(
+        props.registrants,
+        props.sort.field,
+        props.sort.sort,
+        props.challenge,
+        props.statisticsData,
+    ), [
+        props.challenge,
+        props.registrants,
+        props.sort.field,
+        props.sort.sort,
+        props.statisticsData,
+    ])
+
+    const toggleSort = useCallback((field: string): void => {
+        const nextSort: SortDirection = props.sort.field === field && props.sort.sort === 'desc'
+            ? 'asc'
+            : 'desc'
+
+        props.onSortChange({
+            field,
+            sort: nextSort,
+        })
+    }, [props])
+    const handleSortClick = useCallback((event: MouseEvent<HTMLButtonElement>): void => {
+        const field = event.currentTarget.dataset.field ?? ''
+        toggleSort(field)
+    }, [toggleSort])
+    const hasCheckpointFeedback = props.checkpointResults.length > 0
+
+    if (!sortedRegistrants.length) {
+        return (
+            <div className={styles.emptyState}>
+                No registrants found.
+            </div>
+        )
+    }
+
+    return (
+        <div className={styles.container} role='table'>
+            <div className={styles.header} role='row' style={gridStyle}>
+                {!isDesign && (
+                    <button
+                        className={styles.headCell}
+                        data-field='Rating'
+                        onClick={handleSortClick}
+                        type='button'
+                    >
+                        Rating
+                    </button>
+                )}
+                <button
+                    className={styles.headCell}
+                    data-field='Username'
+                    onClick={handleSortClick}
+                    type='button'
+                >
+                    Username
+                </button>
+                <button
+                    className={styles.headCell}
+                    data-field='Registration Date'
+                    onClick={handleSortClick}
+                    type='button'
+                >
+                    Registration Date
+                </button>
+                {twoRounds && (
+                    <button
+                        className={styles.headCell}
+                        data-field='Round 1 Submitted Date'
+                        onClick={handleSortClick}
+                        type='button'
+                    >
+                        Round 1 Submitted Date
+                    </button>
+                )}
+                <button
+                    className={styles.headCell}
+                    data-field='Submitted Date'
+                    onClick={handleSortClick}
+                    type='button'
+                >
+                    {twoRounds ? 'Round 2 Submitted Date' : 'Submitted Date'}
+                </button>
+            </div>
+
+            <div className={styles.body} role='rowgroup'>
+                {sortedRegistrants.map(registrant => {
+                    const finalDate = getFinalSubmissionDate(
+                        props.challenge,
+                        registrant,
+                        props.statisticsData,
+                    )
+                    const checkpointDate = getCheckpointSubmissionDate(props.challenge, registrant)
+                    const placement = getPlacement(places, props.results, registrant.memberHandle)
+                    const showCountryFlag = Boolean(
+                        registrant.countryFlag
+                        && registrant.countryCode
+                        && !props.notFoundCountryFlagUrl[registrant.countryCode],
+                    )
+
+                    return (
+                        <div
+                            className={styles.row}
+                            key={registrant.memberHandle}
+                            role='row'
+                            style={gridStyle}
+                        >
+                            {!isDesign && <div className={styles.cell}>{registrant.rating ?? '-'}</div>}
+                            <div className={styles.cell}>
+                                <a
+                                    className={styles.memberLink}
+                                    href={`${EnvironmentConfig.TOPCODER_URL}/members/${registrant.memberHandle}`}
+                                    rel='noreferrer'
+                                    target='_blank'
+                                >
+                                    {registrant.memberHandle}
+                                </a>
+                                {showCountryFlag && (
+                                    <img
+                                        alt={registrant.countryCode}
+                                        className={styles.flag}
+                                        src={registrant.countryFlag}
+                                    />
+                                )}
+                            </div>
+                            <div className={styles.cell}>{formatDate(registrant.created)}</div>
+                            {twoRounds && <div className={styles.cell}>{formatDate(checkpointDate)}</div>}
+                            <div className={styles.cell}>
+                                {formatDate(finalDate)}
+                                {placement > 0 && (
+                                    <span className={styles.placement}>
+                                        #
+                                        {placement}
+                                    </span>
+                                )}
+                                {hasCheckpointFeedback && <span className={styles.note}>feedback available</span>}
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}
+
+export default Registrants
diff --git a/src/apps/community/src/pages/challenge-detail/components/Registrants/index.ts b/src/apps/community/src/pages/challenge-detail/components/Registrants/index.ts
new file mode 100644
index 000000000..d3cf4f987
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Registrants/index.ts
@@ -0,0 +1 @@
+export { default as Registrants } from './Registrants'
diff --git a/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/SecurityReminderModal.module.scss b/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/SecurityReminderModal.module.scss
new file mode 100644
index 000000000..260559c3f
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/SecurityReminderModal.module.scss
@@ -0,0 +1,13 @@
+@import '@libs/ui/styles/includes';
+
+.body {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-4;
+}
+
+.actions {
+    display: flex;
+    gap: $sp-2;
+    justify-content: flex-end;
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/SecurityReminderModal.tsx b/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/SecurityReminderModal.tsx
new file mode 100644
index 000000000..56300b25e
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/SecurityReminderModal.tsx
@@ -0,0 +1,45 @@
+import { FC } from 'react'
+
+import { BaseModal, Button } from '~/libs/ui'
+
+import styles from './SecurityReminderModal.module.scss'
+
+interface SecurityReminderModalProps {
+    onCancel: () => void
+    onOk: () => void
+}
+
+/**
+ * Displays a registration security reminder before continuing.
+ *
+ * @param props Modal callbacks.
+ * @returns Security reminder modal.
+ */
+const SecurityReminderModal: FC<SecurityReminderModalProps> = (
+    props: SecurityReminderModalProps,
+) => (
+    <BaseModal
+        allowBodyScroll
+        onClose={props.onCancel}
+        open
+        title='Important Reminder'
+    >
+        <div className={styles.body}>
+            <p>
+                In accordance with the Terms & Conditions and Code of Conduct, you agree to keep private
+                any downloaded data and delete it after challenge completion.
+            </p>
+
+            <div className={styles.actions}>
+                <Button onClick={props.onCancel} secondary>
+                    Cancel
+                </Button>
+                <Button onClick={props.onOk} primary>
+                    I Agree
+                </Button>
+            </div>
+        </div>
+    </BaseModal>
+)
+
+export default SecurityReminderModal
diff --git a/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/index.ts b/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/index.ts
new file mode 100644
index 000000000..0eb2439aa
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/SecurityReminderModal/index.ts
@@ -0,0 +1 @@
+export { default as SecurityReminderModal } from './SecurityReminderModal'
diff --git a/src/apps/community/src/pages/challenge-detail/components/Specification/Specification.module.scss b/src/apps/community/src/pages/challenge-detail/components/Specification/Specification.module.scss
new file mode 100644
index 000000000..e60d79570
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Specification/Specification.module.scss
@@ -0,0 +1,272 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    align-items: flex-start;
+    display: grid;
+    gap: 32px;
+    grid-template-columns: minmax(0, 1fr) 326px;
+}
+
+.main {
+    background: $tc-white;
+    border-radius: 8px;
+    padding: 28px 24px;
+}
+
+.section {
+    &:not(:last-child) {
+        border-bottom: 2px solid $black-10;
+        margin-bottom: 24px;
+        padding-bottom: 24px;
+    }
+
+    h2 {
+        color: $black-100;
+        font-size: 24px;
+        font-weight: $font-weight-bold;
+        line-height: 30px;
+        margin: 0 0 16px;
+    }
+
+    p,
+    li {
+        color: $black-100;
+        font-size: 16px;
+        line-height: 24px;
+    }
+
+    p {
+        margin: 0 0 12px;
+    }
+
+    ol,
+    ul {
+        margin: 0;
+        padding-left: 20px;
+    }
+
+    a {
+        color: $link-blue-dark;
+    }
+}
+
+.note {
+    margin-top: 16px !important;
+}
+
+.richText {
+    color: $black-100;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.richText > :global(:first-child) {
+    margin-top: 0;
+}
+
+.richText > :global(:last-child) {
+    margin-bottom: 0;
+}
+
+.richText :global(blockquote) {
+    border-left: 4px solid $black-20;
+    color: $black-80;
+    margin: 16px 0;
+    padding-left: 16px;
+}
+
+.richText :global(code) {
+    background: $black-10;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 0.9em;
+    padding: 2px 4px;
+}
+
+.richText :global(pre) {
+    background: $black-10;
+    border-radius: 6px;
+    overflow-x: auto;
+    padding: 12px;
+}
+
+.richText :global(pre code) {
+    background: transparent;
+    padding: 0;
+}
+
+.richText :global(table) {
+    border-collapse: collapse;
+    display: block;
+    margin: 16px 0;
+    max-width: 100%;
+    overflow: auto;
+    width: 100%;
+}
+
+.richText :global(th),
+.richText :global(td) {
+    border: 1px solid $black-20;
+    padding: 6px 13px;
+}
+
+.richText :global(th) {
+    background: $black-5;
+    font-weight: $font-weight-bold;
+}
+
+.sideBar {
+    align-self: start;
+    background: $tc-white;
+    border-radius: 8px;
+    padding: 32px 24px;
+    position: sticky;
+    top: 24px;
+}
+
+.sideBarInner {
+    > :first-child {
+        margin-top: 0;
+    }
+}
+
+.sideBarSection {
+    margin-top: 32px;
+}
+
+.sideBarTitle {
+    color: $black-100;
+    font-size: 20px;
+    font-weight: $font-weight-medium;
+    line-height: 26px;
+    margin: 0 0 8px;
+}
+
+.sideBarSubTitle {
+    color: $black-100;
+    font-size: 16px;
+    font-weight: $font-weight-medium;
+    line-height: 24px;
+    margin: 8px 0 0;
+}
+
+.linkParagraph,
+.valueWithTooltip,
+.sideBarText {
+    color: $black-100;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0 0 7px;
+
+    a {
+        color: $link-blue-dark;
+        font-weight: $font-weight-medium;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.linkParagraph,
+.valueWithTooltip {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.infoIcon {
+    align-items: center;
+    color: $black-60;
+    display: inline-flex;
+    height: 18px;
+    justify-content: center;
+    width: 18px;
+
+    svg {
+        height: 18px;
+        width: 18px;
+    }
+}
+
+.tooltipOverlay {
+    max-width: 240px;
+}
+
+.tooltipContent {
+    h4 {
+        color: $tc-white;
+        font-size: 13px;
+        font-weight: $font-weight-bold;
+        line-height: 20px;
+        margin: 0 0 4px;
+    }
+
+    p {
+        color: $black-5;
+        font-size: 13px;
+        line-height: 20px;
+        margin: 0;
+    }
+}
+
+.sidebarOrderedList,
+.sourceFilesList {
+    color: $black-100;
+    font-size: 13px;
+    line-height: 20px;
+    margin: 8px 0 8px;
+    padding-left: 20px;
+
+    li {
+        margin-bottom: 4px;
+    }
+
+    a {
+        color: $link-blue-dark;
+    }
+}
+
+.termList {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+}
+
+.term {
+    a {
+        color: $link-blue-dark;
+        font-size: 16px;
+        font-weight: $font-weight-medium;
+        line-height: 24px;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.legacyChallengeId {
+    margin-top: 32px;
+
+    h3 {
+        color: $black-60;
+        font-size: 14px;
+        font-weight: $font-weight-normal;
+        line-height: 22px;
+        margin: 0;
+    }
+}
+
+@media (max-width: 1024px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+
+    .sideBar {
+        position: static;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/Specification/Specification.tsx b/src/apps/community/src/pages/challenge-detail/components/Specification/Specification.tsx
new file mode 100644
index 000000000..0a6f6bfd2
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Specification/Specification.tsx
@@ -0,0 +1,990 @@
+import { FC, ReactNode, useMemo } from 'react'
+import useSWR, { SWRResponse } from 'swr'
+
+import { EnvironmentConfig } from '~/config'
+import { renderRichTextToHtml } from '~/libs/shared'
+import {
+    IconOutline,
+    Tooltip,
+} from '~/libs/ui'
+
+import {
+    ChallengeInfo,
+    CommunityMeta,
+    fetchTermsForChallenge,
+    getForumLink,
+    isDesignChallenge,
+    isMarathonMatch,
+    TermInfo,
+} from '../../../../lib'
+
+import styles from './Specification.module.scss'
+
+const DESIGN_CHALLENGE_SUBMISSION_URL
+    = 'https://www.topcoder.com/thrive/articles/Formatting%20Your%20Submission%20for%20Design%20Challenges'
+const DESIGN_CHALLENGE_TYPES_URL = 'https://www.topcoder.com/thrive/articles/Design%20Challenge%20Types'
+const EXTENSION_VSCODE_URL
+    = 'https://marketplace.visualstudio.com/items?itemName=Topcoder.topcoder-workflow&ssr=false#overview'
+const FONT_POLICY_URL
+    = 'https://help.topcoder.com/hc/en-us/articles/217959447-Font-Policy-for-Design-Challenges'
+const HOW_TO_COMPETE_IN_MARATHON_URL
+    = 'https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20a%20Marathon%20Match'
+const PASS_SCREENING_URL
+    = 'https://help.topcoder.com/hc/en-us/articles/217959577-How-to-Pass-Screening-in-Design-Challenges'
+const STOCK_ART_POLICY_URL
+    = 'http://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions'
+const TEMPLATES_REPO_URL = 'https://github.com/topcoder-platform-templates'
+const TOPCODER_CHALLENGES_EXPLAINED_URL
+    = 'https://www.topcoder.com/thrive/articles/all-about-topcoder-challenges-tasks-and-gig-work-opportunities'
+const TOPGEAR_TERMS_URL = 'https://topgear.topcoder.com/challenges/terms/detail/f1d8cca9-ac24-473c-998d-02f499a829cb'
+const USABLE_CODE_DEV_URL = 'https://www.topcoder.com/thrive/articles/Usable%20Code%20in%20Dev%20Challenges'
+
+interface ChallengeWithReviewType extends ChallengeInfo {
+    reviewType?: string
+}
+
+interface DesignSubmissionSectionProps {
+    challenge: ChallengeInfo
+    forumLink?: string
+}
+
+interface EligibleEventSectionProps {
+    eventDetail?: {
+        description?: string
+        eventName?: string
+    }
+}
+
+interface InfoTooltipProps {
+    content: ReactNode
+}
+
+interface RichTextProps {
+    html: string
+}
+
+interface ChallengeTermLink {
+    id: string
+    title?: string
+}
+
+interface SideBarProps {
+    challenge: ChallengeInfo
+    challengeTerms: ChallengeTermLink[]
+    forumLink?: string
+    isDesign: boolean
+    isDevelop: boolean
+    isLoggedIn: boolean
+    isLoadingTerms: boolean
+    isMM: boolean
+    isWipro: boolean
+    terms: TermInfo[]
+}
+
+interface SidebarLinkProps {
+    children: ReactNode
+    href: string
+    openNewTab?: boolean
+    title?: string
+    tooltip?: ReactNode
+}
+
+interface SidebarSectionProps {
+    children: ReactNode
+    title: string
+}
+
+interface SpecificationProps {
+    challenge: ChallengeInfo
+    communityMeta?: CommunityMeta
+    isLoggedIn: boolean
+}
+
+interface TermsSectionProps {
+    isLoggedIn: boolean
+    isLoading: boolean
+    termDetails: TermInfo[]
+    terms: ChallengeTermLink[]
+}
+
+interface ChallengeTermRecord {
+    id?: string
+    name?: unknown
+    title?: unknown
+}
+
+interface TermTitleSource {
+    id: string
+    title?: string
+}
+
+interface ReviewStyleSectionProps {
+    reviewType: string
+}
+
+interface ChallengeLinksSectionProps {
+    challenge: ChallengeInfo
+    isDesign: boolean
+    isDevelop: boolean
+    isMM: boolean
+    isWipro: boolean
+}
+
+/**
+ * Converts scalar metadata values into strings for conditional rendering.
+ *
+ * @param value Metadata value from challenge-api-v6.
+ * @returns String representation, or an empty string for unsupported values.
+ */
+function stringifyMetadataValue(value: unknown): string {
+    if (value === undefined) {
+        return ''
+    }
+
+    if (typeof value === 'string') {
+        return value
+    }
+
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return `${value}`
+    }
+
+    return ''
+}
+
+/**
+ * Reads a metadata value from either the legacy array shape or the object shape.
+ *
+ * @param metadata Challenge metadata payload.
+ * @param key Metadata key to read.
+ * @returns Metadata value as a string.
+ */
+function getMetadataValue(metadata: unknown, key: string): string {
+    if (Array.isArray(metadata)) {
+        const item = metadata.find(entry => (
+            typeof entry === 'object'
+            && Boolean(entry)
+            && (entry as { name?: string }).name === key
+        )) as { value?: unknown } | undefined
+
+        return stringifyMetadataValue(item?.value)
+    }
+
+    if (typeof metadata === 'object' && Boolean(metadata)) {
+        return stringifyMetadataValue((metadata as Record<string, unknown>)[key])
+    }
+
+    return ''
+}
+
+/**
+ * Determines whether a metadata flag should be treated as enabled.
+ *
+ * @param value Metadata flag value.
+ * @returns True for common enabled flag values.
+ */
+function isMetadataEnabled(value: string): boolean {
+    return ['1', 'true', 'yes'].includes(
+        value.trim()
+            .toLowerCase(),
+    )
+}
+
+/**
+ * Extracts a scorecard id from the matching challenge phase.
+ *
+ * @param challenge Challenge details.
+ * @param phaseName Phase name to inspect.
+ * @returns Scorecard id, or an empty string when missing.
+ */
+function getScorecardId(challenge: ChallengeInfo, phaseName: string): string {
+    const phase = challenge.phases.find(item => item.name === phaseName)
+
+    if (!phase?.constraints) {
+        return ''
+    }
+
+    const scorecard = phase.constraints.find(constraint => (
+        typeof constraint.name === 'string'
+        && constraint.name === 'Scorecard'
+    )) as { value?: string | number } | undefined
+
+    if (!scorecard?.value) {
+        return ''
+    }
+
+    return `${scorecard.value}`
+}
+
+/**
+ * Checks whether a scorecard id points to a legacy Online Review scorecard.
+ *
+ * @param scorecardId Scorecard id from phase constraints.
+ * @returns True when the id is a positive numeric value.
+ */
+function hasScorecard(scorecardId: string): boolean {
+    const parsedScorecardId = Number(scorecardId)
+
+    return Number.isFinite(parsedScorecardId) && parsedScorecardId > 0
+}
+
+/**
+ * Normalizes mixed challenge group payloads into group ids.
+ *
+ * @param groups Challenge groups from the API.
+ * @returns Group id list.
+ */
+function normalizeGroupIds(groups: Array<Record<string, unknown> | string>): string[] {
+    return groups.map(group => {
+        if (typeof group === 'string') {
+            return group
+        }
+
+        if (typeof group.groupId === 'string') {
+            return group.groupId
+        }
+
+        if (typeof group.id === 'string') {
+            return group.id
+        }
+
+        return ''
+    })
+        .filter(Boolean)
+}
+
+/**
+ * Extracts term link data from the challenge term payload.
+ *
+ * @param terms Challenge terms from the API.
+ * @returns Unique term links with any available display title.
+ */
+function getChallengeTermLinks(terms: ChallengeInfo['terms']): ChallengeTermLink[] {
+    const seenTermIds = new Set<string>()
+
+    return terms.reduce<ChallengeTermLink[]>((result, term) => {
+        const termRecord = term as ChallengeTermRecord | string
+        const termId = typeof termRecord === 'string' ? termRecord : termRecord.id
+
+        if (!termId || seenTermIds.has(termId)) {
+            return result
+        }
+
+        seenTermIds.add(termId)
+        result.push({
+            id: termId,
+            title: typeof termRecord === 'string'
+                ? undefined
+                : readTermTitle(termRecord),
+        })
+
+        return result
+    }, [])
+}
+
+/**
+ * Reads a human-friendly term title from a challenge term record.
+ *
+ * @param term Challenge term record.
+ * @returns Term title when present.
+ */
+function readTermTitle(term: ChallengeTermRecord): string | undefined {
+    if (typeof term.title === 'string' && term.title.trim()) {
+        return term.title
+    }
+
+    if (typeof term.name === 'string' && term.name.trim()) {
+        return term.name
+    }
+
+    return undefined
+}
+
+/**
+ * Gets the best available term display name without exposing raw term ids.
+ *
+ * @param term Challenge term source.
+ * @param termDetails Loaded term details.
+ * @param index Term position in the sidebar.
+ * @returns Display label for the term link.
+ */
+function getTermDisplayName(
+    term: ChallengeTermLink,
+    termDetails: Map<string, TermTitleSource>,
+    index: number,
+): string {
+    const loadedTerm = termDetails.get(term.id)
+    const loadedTitle = loadedTerm?.title?.trim()
+    const challengeTitle = term.title?.trim()
+
+    return loadedTitle
+        || challengeTitle
+        || `Challenge term ${index + 1}`
+}
+
+/**
+ * Safely parses the design source file type metadata.
+ *
+ * @param value JSON-encoded file type metadata.
+ * @returns Source file type labels.
+ */
+function parseFileTypes(value: string): string[] {
+    if (!value) {
+        return []
+    }
+
+    try {
+        const parsedValue = JSON.parse(value) as unknown
+
+        if (!Array.isArray(parsedValue)) {
+            return []
+        }
+
+        return parsedValue.filter((item): item is string => (
+            typeof item === 'string' && Boolean(item.trim())
+        ))
+    } catch {
+        return []
+    }
+}
+
+/**
+ * Formats the legacy design submission limit metadata.
+ *
+ * @param value Submission limit metadata value.
+ * @returns Human-readable submission limit.
+ */
+function getSubmissionLimitDisplay(value: string): string {
+    const submissionLimit = Number(value)
+
+    if (!Number.isFinite(submissionLimit) || submissionLimit <= 0) {
+        return 'Unlimited'
+    }
+
+    if (submissionLimit === 1) {
+        return '1 submission'
+    }
+
+    return `${submissionLimit} submissions`
+}
+
+/**
+ * Resolves the review type used by the legacy sidebar copy.
+ *
+ * @param challenge Challenge details.
+ * @returns Review type key.
+ */
+function getReviewType(challenge: ChallengeInfo): string {
+    const challengeReviewType = (challenge as ChallengeWithReviewType).reviewType
+    const legacyReviewType = (challenge.legacy as { reviewType?: string }).reviewType
+
+    return challengeReviewType ?? legacyReviewType ?? 'COMMUNITY'
+}
+
+/**
+ * Renders sanitized challenge rich text.
+ *
+ * @param props Sanitized HTML content.
+ * @returns Rendered rich text block.
+ */
+const RichText: FC<RichTextProps> = (props: RichTextProps) => (
+    <div
+        className={styles.richText}
+        dangerouslySetInnerHTML={{ __html: props.html }}
+    />
+)
+
+/**
+ * Renders the legacy information icon tooltip.
+ *
+ * @param props Tooltip content.
+ * @returns Information icon with hover tooltip.
+ */
+const InfoTooltip: FC<InfoTooltipProps> = (props: InfoTooltipProps) => (
+    <Tooltip
+        className={styles.tooltipOverlay}
+        content={<div className={styles.tooltipContent}>{props.content}</div>}
+        disableWrap
+    >
+        <span className={styles.infoIcon}>
+            <IconOutline.InformationCircleIcon />
+        </span>
+    </Tooltip>
+)
+
+/**
+ * Renders a grouped sidebar section.
+ *
+ * @param props Section title and content.
+ * @returns Sidebar section.
+ */
+const SidebarSection: FC<SidebarSectionProps> = (props: SidebarSectionProps) => (
+    <div className={styles.sideBarSection}>
+        <h2 className={styles.sideBarTitle}>{props.title}</h2>
+        {props.children}
+    </div>
+)
+
+/**
+ * Renders a link row with optional tooltip.
+ *
+ * @param props Link details.
+ * @returns Sidebar link row.
+ */
+const SidebarLink: FC<SidebarLinkProps> = (props: SidebarLinkProps) => (
+    <p className={styles.linkParagraph}>
+        <a
+            href={props.href}
+            rel={props.openNewTab ? 'noreferrer' : undefined}
+            target={props.openNewTab ? '_blank' : undefined}
+            title={props.title}
+        >
+            {props.children}
+        </a>
+        {props.tooltip && <InfoTooltip content={props.tooltip} />}
+    </p>
+)
+
+/**
+ * Renders eligible event information from the challenge payload.
+ *
+ * @param props Event details from the challenge.
+ * @returns Eligible event sidebar section.
+ */
+const EligibleEventSection: FC<EligibleEventSectionProps> = (props: EligibleEventSectionProps) => {
+    if (!props.eventDetail?.eventName) {
+        return <></>
+    }
+
+    return (
+        <div className={styles.sideBarSection}>
+            <h3 className={styles.sideBarSubTitle}>ELIGIBLE EVENTS:</h3>
+            <SidebarLink href={`//${props.eventDetail.eventName}.topcoder.com`} openNewTab>
+                {props.eventDetail.description ?? props.eventDetail.eventName}
+            </SidebarLink>
+        </div>
+    )
+}
+
+/**
+ * Renders the legacy review style sidebar section.
+ *
+ * @param props Review type data.
+ * @returns Review style section.
+ */
+const ReviewStyleSection: FC<ReviewStyleSectionProps> = (props: ReviewStyleSectionProps) => {
+    const isPeerReview = props.reviewType === 'PEER'
+    const reviewTypeTitle = isPeerReview ? 'Peer Review' : 'Community Review Board'
+    const reviewTypeDescription = isPeerReview
+        ? 'Your peers perform a thorough review based on scorecards.'
+        : 'Community Review Board performs a thorough review based on scorecards.'
+
+    return (
+        <SidebarSection title='Review style'>
+            <h3 className={styles.sideBarSubTitle}>Final Review</h3>
+            <p className={styles.valueWithTooltip}>
+                {reviewTypeTitle}
+                <InfoTooltip
+                    content={(
+                        <>
+                            <h4>Final Review:</h4>
+                            <p>{reviewTypeDescription}</p>
+                        </>
+                    )}
+                />
+            </p>
+
+            <h3 className={styles.sideBarSubTitle}>Approval</h3>
+            <p className={styles.valueWithTooltip}>
+                User Sign-Off
+                <InfoTooltip
+                    content={(
+                        <>
+                            <h4>Approval:</h4>
+                            <p>Customer has final opportunity to sign-off on the delivered assets.</p>
+                        </>
+                    )}
+                />
+            </p>
+        </SidebarSection>
+    )
+}
+
+/**
+ * Renders legacy non-Marathon challenge links.
+ *
+ * @param props Challenge link inputs.
+ * @returns Challenge links sidebar section.
+ */
+const ChallengeLinksSection: FC<ChallengeLinksSectionProps> = (props: ChallengeLinksSectionProps) => {
+    if (props.isMM) {
+        return (
+            <SidebarSection title='Challenge links'>
+                <SidebarLink
+                    href={HOW_TO_COMPETE_IN_MARATHON_URL}
+                    openNewTab
+                    title='How To Compete in a Marathon Match'
+                >
+                    How To Compete in a Marathon Match
+                </SidebarLink>
+            </SidebarSection>
+        )
+    }
+
+    const environment = getMetadataValue(props.challenge.metadata, 'environment')
+    const codeRepo = getMetadataValue(props.challenge.metadata, 'codeRepo')
+    const reviewScorecardId = getScorecardId(props.challenge, 'Review')
+    const screeningScorecardId = getScorecardId(props.challenge, 'Screening')
+    const scorecardBaseUrl = `${EnvironmentConfig.ADMIN.ONLINE_REVIEW_URL}/actions/ViewScorecard?scid=`
+
+    return (
+        <SidebarSection title='Challenge links'>
+            {props.isDevelop && environment && (
+                <SidebarLink href={environment}>Environment</SidebarLink>
+            )}
+            {props.isDevelop && codeRepo && (
+                <SidebarLink href={codeRepo}>Code Repository</SidebarLink>
+            )}
+            {hasScorecard(screeningScorecardId) && (
+                <SidebarLink href={`${scorecardBaseUrl}${screeningScorecardId}`}>
+                    Screening Scorecard
+                </SidebarLink>
+            )}
+            {hasScorecard(reviewScorecardId) && !props.isDesign && (
+                <SidebarLink
+                    href={`${scorecardBaseUrl}${reviewScorecardId}`}
+                    tooltip={(
+                        <>
+                            <h4>See how you&apos;ll be reviewed.</h4>
+                            <p>
+                                Make sure you review the scorecard before you start.
+                                This will show you how your submission will be judged and scored.
+                            </p>
+                        </>
+                    )}
+                >
+                    Review Scorecard
+                </SidebarLink>
+            )}
+            {!props.isWipro && !props.isDesign && (
+                <SidebarLink
+                    href={USABLE_CODE_DEV_URL}
+                    openNewTab
+                    title='Useable Code Rules'
+                    tooltip={(
+                        <>
+                            <h4>Useable Code Rules</h4>
+                            <p>A set of guidelines to help determine if code is acceptable or not.</p>
+                        </>
+                    )}
+                >
+                    Useable Code Rules
+                </SidebarLink>
+            )}
+        </SidebarSection>
+    )
+}
+
+/**
+ * Renders the legacy design-specific sidebar blocks.
+ *
+ * @param props Challenge and forum data.
+ * @returns Design sidebar sections.
+ */
+const DesignSubmissionSection: FC<DesignSubmissionSectionProps> = (props: DesignSubmissionSectionProps) => {
+    const discussionLinks = props.challenge.discussions.filter(discussion => (
+        discussion.type?.toLowerCase() === 'challenge' && Boolean(discussion.url)
+    ))
+    const fileTypes = parseFileTypes(getMetadataValue(props.challenge.metadata, 'fileTypes'))
+    const submissionLimit = getMetadataValue(props.challenge.metadata, 'submissionLimit')
+    const submissionLimitDisplay = getSubmissionLimitDisplay(submissionLimit)
+
+    return (
+        <>
+            <SidebarSection title='Submission format'>
+                <h3 className={styles.sideBarSubTitle}>Your Design Files:</h3>
+                <ol className={styles.sidebarOrderedList}>
+                    <li>Look for instructions in this challenge regarding what files to provide.</li>
+                    <li>Place your submission files into a &quot;Submission.zip&quot; file.</li>
+                    <li>Place all of your source files into a &quot;Source.zip&quot; file.</li>
+                    <li>Declare your fonts, stock photos, and icons in a &quot;Declaration.txt&quot; file.</li>
+                    <li>Create a JPG preview file.</li>
+                    <li>Place the 4 files you just created into a single zip file. This will be what you upload.</li>
+                </ol>
+                <p className={styles.linkParagraph}>
+                    Trouble formatting your submission or want to learn more?
+                    {' '}
+                    <a href={DESIGN_CHALLENGE_SUBMISSION_URL}>Read the FAQ.</a>
+                </p>
+
+                <h3 className={styles.sideBarSubTitle}>Fonts, Stock Photos, and Icons:</h3>
+                <p className={styles.sideBarText}>
+                    All fonts, stock photos, and icons within your design must be declared when you submit.
+                    DO NOT include any 3rd party files in your submission or source files. Read about the
+                    {' '}
+                    <a href={FONT_POLICY_URL}>policy.</a>
+                </p>
+
+                <h3 className={styles.sideBarSubTitle}>Screening:</h3>
+                <p className={styles.sideBarText}>
+                    All submissions are screened for eligibility before the challenge holder picks winners.
+                    Don&apos;t let your hard work go to waste. Learn more about how to
+                    {' '}
+                    <a href={PASS_SCREENING_URL}>pass screening.</a>
+                </p>
+            </SidebarSection>
+
+            <SidebarSection title='Challenge links'>
+                {(props.forumLink || discussionLinks.length > 0) && (
+                    <p className={styles.linkParagraph}>
+                        Questions?
+                        {' '}
+                        {!discussionLinks.length && props.forumLink && (
+                            <a href={props.forumLink} rel='noopener noreferrer' target='_blank'>
+                                Ask in the Challenge Discussion Forums.
+                            </a>
+                        )}
+                    </p>
+                )}
+                {discussionLinks.map(discussion => (
+                    <SidebarLink
+                        href={discussion.url ?? ''}
+                        key={discussion.id ?? discussion.url}
+                        openNewTab
+                    >
+                        CHALLENGE DISCUSSION
+                    </SidebarLink>
+                ))}
+            </SidebarSection>
+
+            <SidebarSection title='Source files'>
+                {!!fileTypes.length && (
+                    <ul className={styles.sourceFilesList}>
+                        {fileTypes.map(fileType => <li key={fileType}>{fileType}</li>)}
+                    </ul>
+                )}
+                <p className={styles.sideBarText}>You must include all source files with your submission.</p>
+            </SidebarSection>
+
+            <SidebarSection title='Submission limit'>
+                <p className={styles.linkParagraph}>
+                    {submissionLimit ? submissionLimitDisplay : <strong>{submissionLimitDisplay}</strong>}
+                </p>
+            </SidebarSection>
+        </>
+    )
+}
+
+/**
+ * Renders challenge term links when the member is logged in.
+ *
+ * @param props Term ids and loaded term details.
+ * @returns Challenge terms sidebar section.
+ */
+const TermsSection: FC<TermsSectionProps> = (props: TermsSectionProps) => {
+    if (!props.isLoggedIn || !props.terms.length) {
+        return <></>
+    }
+
+    const termsById: Map<string, TermTitleSource> = new Map(props.termDetails.map(term => [term.id, term]))
+    const hasDisplayableTermNames = props.termDetails.length > 0
+        || props.terms.some(term => Boolean(term.title))
+    const showLoadingOnly = props.isLoading && !hasDisplayableTermNames
+
+    return (
+        <SidebarSection title='Challenge terms'>
+            {showLoadingOnly && (
+                <p className={styles.sideBarText}>Loading terms...</p>
+            )}
+            {!showLoadingOnly && (
+                <div className={styles.termList}>
+                    {props.terms.map((term, index) => (
+                        <div className={styles.term} key={term.id}>
+                            <a href={`${EnvironmentConfig.TOPCODER_URL}/challenges/terms/detail/${term.id}`}>
+                                {getTermDisplayName(term, termsById, index)}
+                            </a>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </SidebarSection>
+    )
+}
+
+/**
+ * Renders the legacy toolbox links.
+ *
+ * @returns Toolbox sidebar section.
+ */
+const ToolboxSection: FC = () => (
+    <SidebarSection title='Toolbox'>
+        <SidebarLink
+            href={EXTENSION_VSCODE_URL}
+            openNewTab
+            title='Topcoder Extension for VSCode'
+            tooltip={(
+                <>
+                    <h4>Topcoder Extension for VSCode</h4>
+                    <p>
+                        Shortcuts to perform actions related to Topcoder platform without having to open a browser.
+                    </p>
+                </>
+            )}
+        >
+            Topcoder Extension for VSCode
+        </SidebarLink>
+        <SidebarLink href={TEMPLATES_REPO_URL} openNewTab title='Topcoder Templates repository'>
+            Topcoder Templates repository
+        </SidebarLink>
+    </SidebarSection>
+)
+
+/**
+ * Renders the legacy challenge detail sidebar.
+ *
+ * @param props Challenge metadata and loaded terms.
+ * @returns Challenge detail sidebar.
+ */
+const SideBar: FC<SideBarProps> = (props: SideBarProps) => {
+    const topCrowdFlag = getMetadataValue(props.challenge.metadata, 'is_platform')
+
+    if (isMetadataEnabled(topCrowdFlag)) {
+        return <></>
+    }
+
+    const eventDetail = props.challenge.events?.[0] as EligibleEventSectionProps['eventDetail']
+
+    return (
+        <aside className={styles.sideBar}>
+            <div className={styles.sideBarInner}>
+                <SidebarSection title='Learn'>
+                    <SidebarLink href={props.isWipro ? TOPGEAR_TERMS_URL : TOPCODER_CHALLENGES_EXPLAINED_URL}>
+                        {props.isWipro ? 'TopGear Challenges Explained' : 'Topcoder Challenges Explained'}
+                    </SidebarLink>
+                </SidebarSection>
+
+                <EligibleEventSection eventDetail={eventDetail} />
+
+                {!props.isDesign && !props.isMM && (
+                    <ReviewStyleSection reviewType={getReviewType(props.challenge)} />
+                )}
+
+                {!props.isDesign && (
+                    <ChallengeLinksSection
+                        challenge={props.challenge}
+                        isDesign={props.isDesign}
+                        isDevelop={props.isDevelop}
+                        isMM={props.isMM}
+                        isWipro={props.isWipro}
+                    />
+                )}
+
+                {props.isDesign && (
+                    <DesignSubmissionSection
+                        challenge={props.challenge}
+                        forumLink={props.forumLink}
+                    />
+                )}
+
+                <TermsSection
+                    isLoggedIn={props.isLoggedIn}
+                    isLoading={props.isLoadingTerms}
+                    termDetails={props.terms}
+                    terms={props.challengeTerms}
+                />
+
+                {!props.isWipro && <ToolboxSection />}
+
+                {!!props.challenge.legacyId && (
+                    <div className={styles.legacyChallengeId}>
+                        <h3>
+                            ID:
+                            {' '}
+                            {props.challenge.legacyId}
+                        </h3>
+                    </div>
+                )}
+            </div>
+        </aside>
+    )
+}
+
+/**
+ * Renders challenge specifications and sidebar metadata.
+ *
+ * @param props Challenge and community context data.
+ * @returns Specification tab content.
+ */
+const Specification: FC<SpecificationProps> = (props: SpecificationProps) => {
+    const isDesign = isDesignChallenge(props.challenge)
+    const isDevelop = props.challenge.track.name.toLowerCase() === 'development'
+    const isMM = isMarathonMatch(props.challenge)
+    const forumLink = getForumLink(props.challenge)
+    const challengeTerms = useMemo(
+        () => getChallengeTermLinks(props.challenge.terms),
+        [props.challenge.terms],
+    )
+    const challengeTermIds = useMemo(
+        () => challengeTerms.map(term => term.id),
+        [challengeTerms],
+    )
+    const {
+        data: sidebarTerms = [],
+        isValidating: isLoadingSidebarTerms,
+    }: SWRResponse<TermInfo[], Error> = useSWR<TermInfo[], Error>(
+        props.isLoggedIn && challengeTermIds.length
+            ? ['community/challenge-terms', ...challengeTermIds]
+            : undefined,
+        () => fetchTermsForChallenge(challengeTermIds),
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+        },
+    )
+    const descriptionHtml = useMemo(
+        () => renderRichTextToHtml(props.challenge.description),
+        [props.challenge.description],
+    )
+    const privateDescriptionHtml = useMemo(
+        () => renderRichTextToHtml(props.challenge.privateDescription ?? ''),
+        [props.challenge.privateDescription],
+    )
+
+    const isWipro = useMemo(() => {
+        if (props.communityMeta?.communityId === 'wipro') {
+            return true
+        }
+
+        if (!props.communityMeta?.groupIds?.length) {
+            return false
+        }
+
+        const challengeGroupIds = normalizeGroupIds(props.challenge.groups as Array<Record<string, unknown> | string>)
+
+        return props.communityMeta.groupIds.some(groupId => challengeGroupIds.includes(groupId))
+    }, [props.challenge.groups, props.communityMeta])
+
+    const allowStockArt = isMetadataEnabled(getMetadataValue(props.challenge.metadata, 'allowStockArt'))
+
+    return (
+        <section className={styles.container}>
+            <div className={styles.main}>
+                {!isDesign && (
+                    <>
+                        {descriptionHtml && (
+                            <article className={styles.section}>
+                                <h2>Challenge Overview</h2>
+                                <RichText html={descriptionHtml} />
+                            </article>
+                        )}
+
+                        {privateDescriptionHtml && props.challenge.isRegistered && (
+                            <article className={styles.section}>
+                                <h2>Registered User Additional Information</h2>
+                                <RichText html={privateDescriptionHtml} />
+                            </article>
+                        )}
+                    </>
+                )}
+
+                {isDesign && (
+                    <>
+                        {descriptionHtml && (
+                            <article className={styles.section}>
+                                <h2>Challenge Summary</h2>
+                                <RichText html={descriptionHtml} />
+                                <p className={styles.note}>
+                                    Please read the challenge specification carefully and watch the forums for any
+                                    questions or feedback concerning this challenge. It is important that you monitor
+                                    any updates provided by the client or Studio Admins in the forums. Please post any
+                                    questions you might have for the client in the forums.
+                                </p>
+                            </article>
+                        )}
+
+                        {privateDescriptionHtml && props.challenge.isRegistered && (
+                            <article className={styles.section}>
+                                <h2>Registered User Additional Information</h2>
+                                <RichText html={privateDescriptionHtml} />
+                            </article>
+                        )}
+
+                        <article className={styles.section}>
+                            <h2>Stock Photography</h2>
+                            <p>
+                                {allowStockArt
+                                    ? 'Stock photography is allowed in this challenge.'
+                                    : (
+                                        'Stock photography is not allowed in this challenge. '
+                                        + 'All submitted elements must be designed solely by you.'
+                                    )}
+                                {' '}
+                                <a href={STOCK_ART_POLICY_URL}>See this page for more details.</a>
+                            </p>
+                        </article>
+
+                        <article className={styles.section}>
+                            <h2>How To Submit</h2>
+                            <ul>
+                                <li>
+                                    New to Studio?
+                                    {' '}
+                                    <a href={DESIGN_CHALLENGE_TYPES_URL}>Learn how to compete here</a>
+                                </li>
+                                <li>
+                                    Upload your submission in three parts (
+                                    <a href={DESIGN_CHALLENGE_SUBMISSION_URL}>Learn more here</a>
+                                    ). Your design should be finalized and should contain only a single design concept.
+                                </li>
+                                <li>
+                                    If your submission wins, your source files must be correct and final fixes
+                                    (if applicable) must be completed before payment can be released.
+                                </li>
+                                <li>
+                                    You may submit as many times as you&apos;d like during the submission phase, but
+                                    only
+                                    the number of files listed above in the Submission Limit that you rank the highest
+                                    will be considered.
+                                </li>
+                            </ul>
+                        </article>
+
+                        <article className={styles.section}>
+                            <h2>Winner Selection</h2>
+                            <p>
+                                Submissions are viewable to the client as they are entered into the challenge.
+                                Winners are selected by the client and are chosen solely at the client&apos;s
+                                discretion.
+                            </p>
+                        </article>
+                    </>
+                )}
+
+                {isWipro && (
+                    <article className={styles.section}>
+                        <h2>Payments</h2>
+                        <p>
+                            For employees of Wipro Technologies, reward payouts and winner points are processed
+                            through Wipro payroll/wallet rules after successful acceptance.
+                        </p>
+                    </article>
+                )}
+            </div>
+
+            <SideBar
+                challenge={props.challenge}
+                challengeTerms={challengeTerms}
+                forumLink={forumLink}
+                isDesign={isDesign}
+                isDevelop={isDevelop}
+                isLoggedIn={props.isLoggedIn}
+                isLoadingTerms={isLoadingSidebarTerms}
+                isMM={isMM}
+                isWipro={isWipro}
+                terms={sidebarTerms}
+            />
+        </section>
+    )
+}
+
+export default Specification
diff --git a/src/apps/community/src/pages/challenge-detail/components/Specification/index.ts b/src/apps/community/src/pages/challenge-detail/components/Specification/index.ts
new file mode 100644
index 000000000..a443bb9c7
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Specification/index.ts
@@ -0,0 +1 @@
+export { default as Specification } from './Specification'
diff --git a/src/apps/community/src/pages/challenge-detail/components/Submissions/Submissions.module.scss b/src/apps/community/src/pages/challenge-detail/components/Submissions/Submissions.module.scss
new file mode 100644
index 000000000..9106ff026
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Submissions/Submissions.module.scss
@@ -0,0 +1,122 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: $tc-white;
+    border-radius: 8px;
+    padding: 24px;
+}
+
+.downloadWrap {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 16px;
+}
+
+.downloadButton {
+    background: $turq-160;
+    border: 0;
+    border-radius: 24px;
+    color: $tc-white;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: $font-weight-bold;
+    line-height: 24px;
+    padding: 8px 24px;
+    text-transform: uppercase !important;
+}
+
+.banner,
+.bannerMuted {
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 16px;
+    padding: 12px 16px;
+}
+
+.banner {
+    background: $blue-10;
+    color: $blue-140;
+}
+
+.bannerMuted {
+    background: $black-5;
+    color: $black-80;
+}
+
+.table {
+    border: 1px solid $black-10;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.header {
+    background: $black-5;
+    border-bottom: 2px solid $black-10;
+    display: grid;
+    gap: 16px;
+    padding: 16px;
+}
+
+.headCell {
+    background: transparent;
+    border: 0;
+    color: $black-100;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: $font-weight-bold;
+    line-height: 16px;
+    padding: 0;
+    text-align: left;
+    text-transform: uppercase !important;
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    display: grid;
+    gap: 16px;
+    padding: 18px 16px;
+
+    &:not(:first-child) {
+        border-top: 1px solid $black-10;
+    }
+}
+
+.columns3 {
+    grid-column: span 1;
+}
+
+.rowColumns3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cell {
+    color: $black-80;
+    font-size: 14px;
+    line-height: 20px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.emptyState {
+    background: $tc-white;
+    border-radius: 8px;
+    color: $black-80;
+    padding: 40px;
+    text-align: center;
+}
+
+@media (max-width: 768px) {
+    .header {
+        display: none;
+    }
+
+    .row {
+        grid-template-columns: 1fr !important;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/Submissions/Submissions.tsx b/src/apps/community/src/pages/challenge-detail/components/Submissions/Submissions.tsx
new file mode 100644
index 000000000..14a60ec88
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Submissions/Submissions.tsx
@@ -0,0 +1,266 @@
+import { FC, MouseEvent, useCallback, useMemo } from 'react'
+import classNames from 'classnames'
+import moment from 'moment'
+
+import {
+    ChallengeInfo,
+    isMarathonMatch,
+    SubmissionInfo,
+} from '../../../../lib'
+
+import styles from './Submissions.module.scss'
+
+type SortDirection = 'asc' | 'desc'
+
+interface SortOption {
+    field: string
+    sort: SortDirection
+}
+
+interface SubmissionsProps {
+    auth: {
+        handle?: string
+        userId?: number
+    }
+    challenge: ChallengeInfo
+    isLegacyMM: boolean
+    isLoggedIn: boolean
+    onSortChange: (sort: SortOption) => void
+    sort: SortOption
+    submissionEnded: boolean
+    submissions: SubmissionInfo[]
+}
+
+function formatDate(date: string | undefined): string {
+    if (!date) {
+        return '-'
+    }
+
+    return moment(date)
+        .local()
+        .format('MMM DD, YYYY HH:mm')
+}
+
+function toScore(value: unknown): number | undefined {
+    const parsed = Number(value)
+
+    if (!Number.isFinite(parsed)) {
+        return undefined
+    }
+
+    return parsed
+}
+
+function getInitialScore(submission: SubmissionInfo): number | undefined {
+    const review = submission.review as Record<string, unknown> | undefined
+    const row = submission as SubmissionInfo & { initialScore?: number | string }
+
+    return toScore(review?.initialScore ?? row.initialScore)
+}
+
+function getFinalScore(submission: SubmissionInfo): number | undefined {
+    const review = submission.review as Record<string, unknown> | undefined
+    const row = submission as SubmissionInfo & { finalScore?: number | string }
+
+    return toScore(review?.finalScore ?? row.finalScore)
+}
+
+function compare(
+    valueA: number | string,
+    valueB: number | string,
+    sort: SortDirection,
+): number {
+    if (valueA === valueB) {
+        return 0
+    }
+
+    const result = valueA > valueB
+        ? 1
+        : -1
+
+    return sort === 'desc'
+        ? result * -1
+        : result
+}
+
+function sortSubmissions(
+    sort: SortOption,
+    submissions: SubmissionInfo[],
+): SubmissionInfo[] {
+    return [...submissions].sort((a, b) => {
+        if (sort.field === 'Username') {
+            return compare(
+                (a.memberHandle ?? '').toLowerCase(),
+                (b.memberHandle ?? '').toLowerCase(),
+                sort.sort,
+            )
+        }
+
+        if (sort.field === 'Submission Date') {
+            return compare(
+                new Date(a.created)
+                    .getTime(),
+                new Date(b.created)
+                    .getTime(),
+                sort.sort,
+            )
+        }
+
+        if (sort.field === 'Initial Score') {
+            return compare(
+                getInitialScore(a) ?? Number.NEGATIVE_INFINITY,
+                getInitialScore(b) ?? Number.NEGATIVE_INFINITY,
+                sort.sort,
+            )
+        }
+
+        return compare(
+            getFinalScore(a) ?? Number.NEGATIVE_INFINITY,
+            getFinalScore(b) ?? Number.NEGATIVE_INFINITY,
+            sort.sort,
+        )
+    })
+}
+
+/**
+ * Renders the submissions tab table for standard and Marathon Match challenges.
+ *
+ * @param props Submission table context.
+ * @returns Submissions tab content.
+ */
+const Submissions: FC<SubmissionsProps> = (props: SubmissionsProps) => {
+    const hideDownloadForMMRDM = true
+    const isMM = isMarathonMatch(props.challenge)
+    const columnCount = isMM ? 3 : 4
+    const gridStyle = {
+        gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+    }
+    const sortedSubmissions = useMemo(
+        () => sortSubmissions(props.sort, props.submissions),
+        [props.sort, props.submissions],
+    )
+
+    const canShowDownloadAll = !hideDownloadForMMRDM
+        && isMM
+        && props.isLoggedIn
+        && Boolean(props.auth.userId)
+
+    const toggleSort = useCallback((field: string): void => {
+        const nextSort: SortDirection = props.sort.field === field && props.sort.sort === 'desc'
+            ? 'asc'
+            : 'desc'
+
+        props.onSortChange({
+            field,
+            sort: nextSort,
+        })
+    }, [props])
+    const handleSortClick = useCallback((event: MouseEvent<HTMLButtonElement>): void => {
+        const field = event.currentTarget.dataset.field ?? ''
+        toggleSort(field)
+    }, [toggleSort])
+
+    if (!sortedSubmissions.length) {
+        return (
+            <div className={styles.emptyState}>
+                No submissions found.
+            </div>
+        )
+    }
+
+    return (
+        <section className={styles.container}>
+            {canShowDownloadAll && (
+                <div className={styles.downloadWrap}>
+                    <button className={styles.downloadButton} type='button'>
+                        Download All
+                    </button>
+                </div>
+            )}
+
+            {props.submissionEnded && (
+                <div className={styles.banner}>
+                    Submission phase has ended.
+                </div>
+            )}
+
+            {props.isLegacyMM && (
+                <div className={styles.bannerMuted}>
+                    Legacy Marathon Match details are shown in simplified mode.
+                </div>
+            )}
+
+            <div className={styles.table} role='table'>
+                <div className={styles.header} role='row' style={gridStyle}>
+                    <button
+                        className={classNames(styles.headCell, isMM && styles.columns3)}
+                        data-field='Username'
+                        onClick={handleSortClick}
+                        type='button'
+                    >
+                        Username
+                    </button>
+                    <button
+                        className={classNames(styles.headCell, isMM && styles.columns3)}
+                        data-field='Submission Date'
+                        onClick={handleSortClick}
+                        type='button'
+                    >
+                        Submission Date
+                    </button>
+                    {!isMM && (
+                        <button
+                            className={styles.headCell}
+                            data-field='Initial Score'
+                            onClick={handleSortClick}
+                            type='button'
+                        >
+                            Initial Score
+                        </button>
+                    )}
+                    <button
+                        className={classNames(styles.headCell, isMM && styles.columns3)}
+                        data-field='Final Score'
+                        onClick={handleSortClick}
+                        type='button'
+                    >
+                        {isMM ? 'Score' : 'Final Score'}
+                    </button>
+                </div>
+
+                <div className={styles.body} role='rowgroup'>
+                    {sortedSubmissions.map(submission => {
+                        const initialScore = getInitialScore(submission)
+                        const finalScore = getFinalScore(submission)
+
+                        return (
+                            <div
+                                className={classNames(styles.row, isMM && styles.rowColumns3)}
+                                key={submission.id}
+                                role='row'
+                                style={gridStyle}
+                            >
+                                <div className={classNames(styles.cell, isMM && styles.columns3)}>
+                                    {submission.memberHandle ?? '-'}
+                                </div>
+                                <div className={classNames(styles.cell, isMM && styles.columns3)}>
+                                    {formatDate(submission.created)}
+                                </div>
+                                {!isMM && (
+                                    <div className={styles.cell}>
+                                        {initialScore === undefined ? 'N/A' : initialScore.toFixed(2)}
+                                    </div>
+                                )}
+                                <div className={classNames(styles.cell, isMM && styles.columns3)}>
+                                    {finalScore === undefined ? 'N/A' : finalScore.toFixed(2)}
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Submissions
diff --git a/src/apps/community/src/pages/challenge-detail/components/Submissions/index.ts b/src/apps/community/src/pages/challenge-detail/components/Submissions/index.ts
new file mode 100644
index 000000000..203fc9024
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Submissions/index.ts
@@ -0,0 +1 @@
+export { default as Submissions } from './Submissions'
diff --git a/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/ThriveArticlesSidebar.module.scss b/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/ThriveArticlesSidebar.module.scss
new file mode 100644
index 000000000..e2307d835
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/ThriveArticlesSidebar.module.scss
@@ -0,0 +1,70 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    margin-top: $sp-5;
+    padding: $sp-5;
+}
+
+.header {
+    margin-bottom: $sp-4;
+}
+
+.title {
+    color: var(--DarkBlue);
+    font-size: 22px;
+    margin: 0;
+}
+
+.cards {
+    display: grid;
+    gap: $sp-3;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.card {
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.imageWrap {
+    display: block;
+}
+
+.image {
+    display: block;
+    height: 150px;
+    object-fit: cover;
+    width: 100%;
+}
+
+.content {
+    padding: $sp-3;
+}
+
+.cardTitle {
+    color: var(--DarkBlue);
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.meta {
+    color: var(--GrayFontColor);
+    font-size: 12px;
+    margin: $sp-2 0 0;
+}
+
+@media (max-width: 1024px) {
+    .cards {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 768px) {
+    .cards {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/ThriveArticlesSidebar.tsx b/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/ThriveArticlesSidebar.tsx
new file mode 100644
index 000000000..e87560ee0
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/ThriveArticlesSidebar.tsx
@@ -0,0 +1,80 @@
+import { FC, useMemo } from 'react'
+import { Link } from 'react-router-dom'
+import moment from 'moment'
+
+import { rootRoute } from '../../../../config/routes.config'
+import { ThriveArticle } from '../../../../lib'
+
+import styles from './ThriveArticlesSidebar.module.scss'
+
+interface ThriveArticlesSidebarProps {
+    articles: ThriveArticle[]
+}
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+/**
+ * Renders up to three recommended Thrive article cards.
+ *
+ * @param props Thrive article list.
+ * @returns Recommended article section.
+ */
+const ThriveArticlesSidebar: FC<ThriveArticlesSidebarProps> = (
+    props: ThriveArticlesSidebarProps,
+) => {
+    const cards = useMemo(() => props.articles.slice(0, 3), [props.articles])
+
+    if (!cards.length) {
+        return <></>
+    }
+
+    return (
+        <section className={styles.container} id='recommendedThriveArticles'>
+            <header className={styles.header}>
+                <h2 className={styles.title}>Recommended Thrive Articles</h2>
+            </header>
+
+            <div className={styles.cards}>
+                {cards.map(article => {
+                    const articlePath = withLeadingSlash(
+                        `${rootRoute}/thrive/${encodeURIComponent(article.slug || article.title || article.id)}`
+                            .replace(/\/{2,}/g, '/'),
+                    )
+
+                    return (
+                        <article className={styles.card} key={article.id}>
+                            {article.featuredImage && (
+                                <Link className={styles.imageWrap} to={articlePath}>
+                                    <img
+                                        alt={article.title}
+                                        className={styles.image}
+                                        src={article.featuredImage}
+                                    />
+                                </Link>
+                            )}
+
+                            <div className={styles.content}>
+                                <Link className={styles.cardTitle} to={articlePath}>
+                                    {article.title}
+                                </Link>
+                                <p className={styles.meta}>
+                                    {article.contentAuthor || 'Topcoder Thrive'}
+                                    {article.creationDate
+                                        ? ` • ${moment(article.creationDate)
+                                            .format('MMM DD, YYYY')}`
+                                        : ''}
+                                </p>
+                            </div>
+                        </article>
+                    )
+                })}
+            </div>
+        </section>
+    )
+}
+
+export default ThriveArticlesSidebar
diff --git a/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/index.ts b/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/index.ts
new file mode 100644
index 000000000..2cd5518f5
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/ThriveArticlesSidebar/index.ts
@@ -0,0 +1 @@
+export { default as ThriveArticlesSidebar } from './ThriveArticlesSidebar'
diff --git a/src/apps/community/src/pages/challenge-detail/components/Winners/Winners.module.scss b/src/apps/community/src/pages/challenge-detail/components/Winners/Winners.module.scss
new file mode 100644
index 000000000..e3efc42e9
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Winners/Winners.module.scss
@@ -0,0 +1,86 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    padding: $sp-4;
+}
+
+.downloadWrap {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: $sp-3;
+}
+
+.downloadButton {
+    background: #137d60;
+    border: 0;
+    border-radius: 4px;
+    color: #fff;
+    padding: $sp-2 $sp-3;
+}
+
+.table {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+}
+
+.row {
+    align-items: center;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    display: grid;
+    gap: $sp-2;
+    grid-template-columns: 80px 1fr 160px;
+    padding: $sp-3;
+}
+
+.colPlacement {
+    color: var(--DarkBlue);
+    font-weight: 700;
+}
+
+.colHandle {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-1;
+
+    a {
+        color: var(--DarkBlue);
+        font-weight: 700;
+        text-decoration: none;
+    }
+}
+
+.submission {
+    color: var(--GrayFontColor);
+    font-size: 12px;
+}
+
+.colPrize {
+    color: var(--DarkBlue);
+    font-weight: 700;
+    text-align: right;
+}
+
+.emptyState {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    color: var(--GrayFontColor);
+    padding: $sp-5;
+    text-align: center;
+}
+
+@media (max-width: 768px) {
+    .row {
+        grid-template-columns: 60px 1fr;
+    }
+
+    .colPrize {
+        grid-column: 1 / span 2;
+        text-align: left;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-detail/components/Winners/Winners.tsx b/src/apps/community/src/pages/challenge-detail/components/Winners/Winners.tsx
new file mode 100644
index 000000000..caa4239dc
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Winners/Winners.tsx
@@ -0,0 +1,165 @@
+import { FC, useMemo } from 'react'
+
+import { EnvironmentConfig } from '~/config'
+
+import type { BackendChallengeWinner } from '../../../../lib/models/BackendChallengeInfo.model'
+import type { SubmissionInfo } from '../../../../lib/models/SubmissionInfo.model'
+import type { PlacementPrize } from '../../../../lib/utils/challenge-detail.utils'
+
+import styles from './Winners.module.scss'
+
+interface WinnersProps {
+    isDesign: boolean
+    isLoggedIn: boolean
+    isMM: boolean
+    prizes: PlacementPrize[]
+    submissions: SubmissionInfo[]
+    viewable: boolean
+    winners: BackendChallengeWinner[]
+}
+
+interface WinnerRow {
+    prize: PlacementPrize | undefined
+    submissionId?: string
+    winner: BackendChallengeWinner
+}
+
+function formatOrdinal(placement: number | undefined): string {
+    if (!placement) {
+        return '-'
+    }
+
+    if (placement === 1) {
+        return '1st'
+    }
+
+    if (placement === 2) {
+        return '2nd'
+    }
+
+    if (placement === 3) {
+        return '3rd'
+    }
+
+    return `${placement}th`
+}
+
+function getSubmissionIdByPlacement(
+    submissions: SubmissionInfo[],
+    placement: number | undefined,
+): string | undefined {
+    if (!placement) {
+        return undefined
+    }
+
+    const match = submissions.find(submission => {
+        const row = submission as SubmissionInfo & {
+            placement?: number
+            submissionId?: string
+        }
+
+        return row.placement === placement
+    }) as (SubmissionInfo & { submissionId?: string }) | undefined
+
+    return match?.submissionId ?? match?.id
+}
+
+function formatPrize(prize: PlacementPrize | undefined): string {
+    if (!prize) {
+        return 'N/A'
+    }
+
+    if (prize.type === 'POINT') {
+        return `${prize.value.toLocaleString('en-US')}`
+    }
+
+    return new Intl.NumberFormat('en-US', {
+        currency: 'USD',
+        maximumFractionDigits: 0,
+        style: 'currency',
+    })
+        .format(prize.value)
+}
+
+/**
+ * Renders winner placement rows with handles and prize amounts.
+ *
+ * @param props Winners data and prize context.
+ * @returns Winners tab content.
+ */
+const Winners: FC<WinnersProps> = (props: WinnersProps) => {
+    const hideDownloadForMMRDM = true
+    const canShowDownloadAll = !hideDownloadForMMRDM
+        && props.isMM
+        && props.isLoggedIn
+        && props.winners.length > 0
+
+    const rows = useMemo<WinnerRow[]>(() => props.winners.map(winner => {
+        const prize = props.prizes[(winner.placement ?? 1) - 1]
+        const submissionId = props.viewable
+            ? getSubmissionIdByPlacement(props.submissions, winner.placement)
+            : undefined
+
+        return {
+            prize,
+            submissionId,
+            winner,
+        }
+    }), [props.prizes, props.submissions, props.viewable, props.winners])
+
+    if (!rows.length) {
+        return (
+            <div className={styles.emptyState}>
+                Winners will appear here once announced.
+            </div>
+        )
+    }
+
+    return (
+        <section className={styles.container}>
+            {canShowDownloadAll && (
+                <div className={styles.downloadWrap}>
+                    <button className={styles.downloadButton} type='button'>
+                        Download All
+                    </button>
+                </div>
+            )}
+
+            <div className={styles.table} role='table'>
+                {rows.map((row: WinnerRow) => (
+                    <div
+                        className={styles.row}
+                        key={`${row.winner.handle ?? 'winner'}-${row.winner.placement ?? 0}`}
+                        role='row'
+                    >
+                        <div className={styles.colPlacement} role='cell'>
+                            {formatOrdinal(row.winner.placement)}
+                        </div>
+                        <div className={styles.colHandle} role='cell'>
+                            {row.winner.handle ? (
+                                <a
+                                    href={`${EnvironmentConfig.TOPCODER_URL}/members/${row.winner.handle}`}
+                                    rel='noreferrer'
+                                    target={props.isDesign ? '_self' : '_blank'}
+                                >
+                                    {row.winner.handle}
+                                </a>
+                            ) : '-'}
+                            {row.submissionId && (
+                                <span className={styles.submission}>
+                                    #
+                                    {row.submissionId}
+                                </span>
+                            )}
+                        </div>
+                        <div className={styles.colPrize} role='cell'>
+                            {formatPrize(row.prize)}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </section>
+    )
+}
+
+export default Winners
diff --git a/src/apps/community/src/pages/challenge-detail/components/Winners/index.ts b/src/apps/community/src/pages/challenge-detail/components/Winners/index.ts
new file mode 100644
index 000000000..6dd5d0f5a
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/components/Winners/index.ts
@@ -0,0 +1 @@
+export { default as Winners } from './Winners'
diff --git a/src/apps/community/src/pages/challenge-detail/index.ts b/src/apps/community/src/pages/challenge-detail/index.ts
new file mode 100644
index 000000000..d3456a619
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-detail/index.ts
@@ -0,0 +1,2 @@
+export { default as ChallengeDetail } from './ChallengeDetail'
+export * from './challenge-detail.routes'
diff --git a/src/apps/community/src/pages/challenge-listing/ChallengeCard/ChallengeCard.module.scss b/src/apps/community/src/pages/challenge-listing/ChallengeCard/ChallengeCard.module.scss
new file mode 100644
index 000000000..7408ada9c
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/ChallengeCard/ChallengeCard.module.scss
@@ -0,0 +1,173 @@
+@import '@libs/ui/styles/includes';
+
+.card {
+    align-items: center;
+    background: transparent;
+    border-bottom: 1px solid var(--GrayBorder);
+    border-radius: 0;
+    display: flex;
+    flex-direction: row;
+    gap: $sp-4;
+    padding: $sp-4 0;
+}
+
+.leftPanel {
+    align-items: flex-start;
+    display: flex;
+    flex: 1;
+    gap: $sp-3;
+    min-width: 0;
+}
+
+.trackIcon {
+    align-items: center;
+    border-radius: 6px;
+    color: #fff;
+    display: flex;
+    flex-shrink: 0;
+    font-size: 14px;
+    font-weight: 700;
+    height: 40px;
+    justify-content: center;
+    width: 40px;
+}
+
+.challengeInfo {
+    min-width: 0;
+}
+
+.title {
+    color: var(--Link);
+    display: block;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.endDate {
+    color: var(--GrayFontColor);
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+    margin-top: 4px;
+}
+
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $sp-1;
+    margin-top: $sp-2;
+}
+
+.tag {
+    background: #f4f5f7;
+    border-radius: 999px;
+    color: var(--FontColor);
+    display: inline-block;
+    font-size: 11px;
+    line-height: 16px;
+    max-width: 180px;
+    overflow: hidden;
+    padding: 2px 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.prizePanel {
+    flex-shrink: 0;
+    text-align: left;
+    width: 80px;
+}
+
+.prizeValue {
+    color: var(--FontColor);
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 26px;
+}
+
+.prizeCaption {
+    color: var(--GrayFontColor);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    margin-top: 2px;
+    text-transform: uppercase;
+}
+
+.statusPanel {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    gap: $sp-2;
+    width: 260px;
+}
+
+.phaseName {
+    color: var(--FontColor);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    text-transform: uppercase;
+}
+
+.progressBar {
+    background: var(--GrayBorder);
+    border-radius: 3px;
+    height: 6px;
+    overflow: hidden;
+    width: 100%;
+}
+
+.progressValue {
+    background: #7b2fbe;
+    border-radius: 3px;
+    display: block;
+    height: 100%;
+}
+
+.timeLeft {
+    color: var(--GrayFontColor);
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.stats {
+    align-items: center;
+    display: flex;
+    gap: $sp-3;
+}
+
+.statLink {
+    align-items: center;
+    color: var(--FontColor);
+    display: inline-flex;
+    font-size: 13px;
+    gap: 6px;
+    line-height: 18px;
+    text-decoration: none;
+
+    &:hover {
+        color: var(--Link);
+    }
+}
+
+@media (max-width: 1024px) {
+    .card {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .prizePanel,
+    .statusPanel {
+        width: 100%;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-listing/ChallengeCard/ChallengeCard.tsx b/src/apps/community/src/pages/challenge-listing/ChallengeCard/ChallengeCard.tsx
new file mode 100644
index 000000000..3c1a84253
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/ChallengeCard/ChallengeCard.tsx
@@ -0,0 +1,279 @@
+import { FC, useMemo } from 'react'
+import { generatePath, Link } from 'react-router-dom'
+import moment from 'moment'
+
+import { challengeDetailRouteId, rootRoute } from '../../../config/routes.config'
+import { ChallengeInfo } from '../../../lib'
+
+import styles from './ChallengeCard.module.scss'
+
+const DATE_FORMAT = 'MMM DD YYYY, HH:mm A'
+
+type PrizeMode = 'money-usd' | 'points'
+
+interface ChallengeCardProps {
+    challenge: ChallengeInfo
+    prizeMode?: PrizeMode
+}
+
+interface ChallengeWithOverview extends ChallengeInfo {
+    overview?: {
+        totalPrizes?: number
+    }
+}
+
+const TYPE_ABBREVIATIONS_BY_NAME: Readonly<Record<string, string>> = {
+    challenge: 'CH',
+    first2finish: 'F2F',
+    marathonmatch: 'MM',
+    task: 'TSK',
+}
+
+const TYPE_BG_COLORS: Readonly<Record<string, string>> = {
+    CH: 'rgba(22, 103, 154, 0.5)',
+    F2F: '#0D61BF',
+    MM: '#1A7F4C',
+    TSK: '#1C9B9B',
+}
+
+const TYPE_TEXT_COLORS: Readonly<Record<string, string>> = {
+    CH: '#2A2A2A',
+    F2F: '#FFFFFF',
+    MM: '#FFFFFF',
+    TSK: '#FFFFFF',
+}
+
+function getTypeColor(typeAbbreviation: string): string {
+    return TYPE_BG_COLORS[typeAbbreviation] ?? '#0D61BF'
+}
+
+function getTypeTextColor(typeAbbreviation: string): string {
+    return TYPE_TEXT_COLORS[typeAbbreviation] ?? '#FFFFFF'
+}
+
+function normalizeTypeName(name?: string): string {
+    return (name ?? '').replace(/[^a-z0-9]/gi, '')
+        .toLowerCase()
+}
+
+function getTypeAbbreviation(challenge: ChallengeInfo): string {
+    const rawAbbreviation = challenge.type?.abbreviation?.trim()
+    if (rawAbbreviation) {
+        return rawAbbreviation.toUpperCase()
+    }
+
+    const mappedAbbreviation = TYPE_ABBREVIATIONS_BY_NAME[normalizeTypeName(challenge.type?.name)]
+    if (mappedAbbreviation) {
+        return mappedAbbreviation
+    }
+
+    const name = challenge.type?.name?.trim() ?? ''
+    if (!name) {
+        return 'CH'
+    }
+
+    const words = name.split(/\s+/)
+        .filter(Boolean)
+    if (words.length >= 2) {
+        return `${words[0][0]}${words[1][0]}`
+            .toUpperCase()
+    }
+
+    return name.slice(0, 3)
+        .toUpperCase()
+}
+
+function getRegistrationEndDate(challenge: ChallengeInfo): string {
+    const registrationPhase = challenge.phases.find(
+        phase => phase.name.toLowerCase()
+            .includes('registration'),
+    )
+    const date = registrationPhase?.actualEndDate ?? registrationPhase?.scheduledEndDate
+
+    if (!date) {
+        return 'N/A'
+    }
+
+    return moment(date)
+        .local()
+        .format(DATE_FORMAT)
+}
+
+function getActiveNonRegistrationPhase(
+    challenge: ChallengeInfo,
+): ChallengeInfo['phases'][number] | undefined {
+    return challenge.phases
+        .filter(phase => (
+            Boolean(phase.isOpen)
+            && phase.name.toLowerCase() !== 'registration'
+        ))
+        .sort((a, b) => moment(a.scheduledEndDate)
+            .diff(b.scheduledEndDate))[0]
+}
+
+/**
+ * Calculates current open phase progress as a percentage in range [0, 100].
+ *
+ * @param challenge Challenge model with phases.
+ * @returns Progress percentage for the current open non-registration phase.
+ */
+export function getPhaseProgress(challenge: ChallengeInfo): number {
+    const phase = getActiveNonRegistrationPhase(challenge)
+    if (!phase?.actualStartDate || !phase?.scheduledEndDate) {
+        return 0
+    }
+
+    const start = moment(phase.actualStartDate)
+    const end = moment(phase.scheduledEndDate)
+
+    if (!start.isValid() || !end.isValid() || !end.isAfter(start)) {
+        return 0
+    }
+
+    const totalMs = end.diff(start)
+    const elapsedMs = moment()
+        .diff(start)
+    const progress = (elapsedMs / totalMs) * 100
+
+    return Math.min(Math.max(progress, 0), 100)
+}
+
+function getCurrentPhaseName(challenge: ChallengeInfo): string {
+    return getActiveNonRegistrationPhase(challenge)?.name
+        ?? challenge.currentPhase?.name
+        ?? 'Stalled'
+}
+
+function getTimeLeftLabel(challenge: ChallengeInfo): string {
+    if (!challenge.timeLeft || challenge.timeLeft === 'Ended') {
+        return 'Ended'
+    }
+
+    return `${challenge.timeLeft} to go`
+}
+
+/**
+ * Builds a challenge detail path scoped to the community app root route.
+ *
+ * @param challengeId Challenge identifier.
+ * @returns Absolute challenge detail route path.
+ */
+function getChallengeDetailPath(challengeId: string): string {
+    const detailPath = generatePath(challengeDetailRouteId, { challengeId })
+    const routePath = `${rootRoute}/${detailPath}`
+        .replace(/\/{2,}/g, '/')
+
+    return routePath.startsWith('/')
+        ? routePath
+        : `/${routePath}`
+}
+
+/**
+ * Renders a single challenge row for the challenge listing page.
+ *
+ * @param props Challenge item and prize display mode.
+ * @returns Challenge row with left details, prize and status sections.
+ */
+const ChallengeCard: FC<ChallengeCardProps> = (props: ChallengeCardProps) => {
+    const detailPath = useMemo(
+        () => getChallengeDetailPath(props.challenge.id),
+        [props.challenge.id],
+    )
+    const totalPrizes = useMemo(
+        () => (props.challenge as ChallengeWithOverview).overview?.totalPrizes ?? 0,
+        [props.challenge],
+    )
+    const prizeLabel = useMemo(() => {
+        if (!totalPrizes) {
+            return 'N/A'
+        }
+
+        if (props.prizeMode === 'points') {
+            return `${totalPrizes.toLocaleString('en-US')} pts`
+        }
+
+        return new Intl.NumberFormat(
+            'en-US',
+            {
+                currency: 'USD',
+                maximumFractionDigits: 0,
+                style: 'currency',
+            },
+        )
+            .format(totalPrizes)
+    }, [props.prizeMode, totalPrizes])
+    const phaseProgress = useMemo(
+        () => getPhaseProgress(props.challenge),
+        [props.challenge],
+    )
+    const typeAbbreviation = useMemo(
+        () => getTypeAbbreviation(props.challenge),
+        [props.challenge],
+    )
+    const totalSubmissions = props.challenge.numOfSubmissions
+        + (props.challenge.numOfCheckpointSubmissions ?? 0)
+
+    return (
+        <article className={styles.card}>
+            <div className={styles.leftPanel}>
+                <span
+                    className={styles.trackIcon}
+                    style={{
+                        backgroundColor: getTypeColor(typeAbbreviation),
+                        color: getTypeTextColor(typeAbbreviation),
+                    }}
+                >
+                    {typeAbbreviation}
+                </span>
+
+                <div className={styles.challengeInfo}>
+                    <Link className={styles.title} to={detailPath}>
+                        {props.challenge.name}
+                    </Link>
+                    <span className={styles.endDate}>
+                        Ends
+                        {' '}
+                        {getRegistrationEndDate(props.challenge)}
+                    </span>
+                    <div className={styles.tags}>
+                        {props.challenge.tags.slice(0, 4)
+                            .map(tag => (
+                                <span className={styles.tag} key={tag} title={tag}>
+                                    {tag}
+                                </span>
+                            ))}
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.prizePanel}>
+                <div className={styles.prizeValue}>{prizeLabel}</div>
+                <div className={styles.prizeCaption}>Purse</div>
+            </div>
+
+            <div className={styles.statusPanel}>
+                <div className={styles.phaseName}>{getCurrentPhaseName(props.challenge)}</div>
+                <div className={styles.progressBar}>
+                    <span
+                        className={styles.progressValue}
+                        style={{ width: `${phaseProgress}%` }}
+                    />
+                </div>
+                <div className={styles.timeLeft}>{getTimeLeftLabel(props.challenge)}</div>
+                <div className={styles.stats}>
+                    <Link className={styles.statLink} to={`${detailPath}?tab=registrants`}>
+                        <span aria-hidden>&#128100;</span>
+                        {props.challenge.numOfRegistrants.toLocaleString('en-US')}
+                    </Link>
+                    <Link className={styles.statLink} to={`${detailPath}?tab=submissions`}>
+                        <span aria-hidden>&#128196;</span>
+                        {totalSubmissions.toLocaleString('en-US')}
+                    </Link>
+                </div>
+            </div>
+        </article>
+    )
+}
+
+export default ChallengeCard
+export type { ChallengeCardProps, PrizeMode }
diff --git a/src/apps/community/src/pages/challenge-listing/ChallengeCard/index.ts b/src/apps/community/src/pages/challenge-listing/ChallengeCard/index.ts
new file mode 100644
index 000000000..309d855de
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/ChallengeCard/index.ts
@@ -0,0 +1,2 @@
+export { default as ChallengeCard } from './ChallengeCard'
+export type { ChallengeCardProps, PrizeMode } from './ChallengeCard'
diff --git a/src/apps/community/src/pages/challenge-listing/ChallengeFilters/ChallengeFilters.module.scss b/src/apps/community/src/pages/challenge-listing/ChallengeFilters/ChallengeFilters.module.scss
new file mode 100644
index 000000000..702c1cdf0
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/ChallengeFilters/ChallengeFilters.module.scss
@@ -0,0 +1,151 @@
+@import '@libs/ui/styles/includes';
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-4;
+    min-width: 240px;
+    width: 280px;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+}
+
+.search {
+    position: relative;
+}
+
+.searchIcon {
+    color: var(--GrayFontColor);
+    display: block;
+    height: 14px;
+    left: 12px;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 14px;
+    z-index: 2;
+}
+
+.searchInput {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 6px;
+    color: var(--FontColor);
+    font-size: 14px;
+    height: 56px;
+    line-height: 20px;
+    margin: 0;
+    outline: 0;
+    padding: 0 12px 0 38px;
+    width: 100%;
+
+    &::placeholder {
+        color: var(--GrayFontColor);
+        opacity: 1;
+    }
+
+    &:focus {
+        border-color: #137d60;
+    }
+}
+
+.heading {
+    color: var(--GrayFontColor);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+    margin: 0;
+    text-transform: uppercase;
+}
+
+.radioList {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+}
+
+.radioItem {
+    align-items: center;
+    color: var(--FontColor);
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 400;
+    gap: $sp-2;
+    line-height: 20px;
+
+    input {
+        appearance: none;
+        background: #fff;
+        border: 1.5px solid #7f7f7f;
+        border-radius: 50%;
+        display: inline-block;
+        height: 20px;
+        margin: 0;
+        position: relative;
+        width: 20px;
+
+        &:checked {
+            border-color: #137d60;
+
+            &::after {
+                background: #137d60;
+                border-radius: 50%;
+                content: '';
+                height: 10px;
+                left: 50%;
+                position: absolute;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                width: 10px;
+            }
+        }
+    }
+}
+
+.categoryGrid {
+    display: grid;
+    gap: $sp-3;
+    grid-template-columns: 1fr 1fr;
+}
+
+.typeList {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+}
+
+.toggleItem {
+    align-items: center;
+    display: flex;
+    gap: $sp-2;
+}
+
+.toggleLabel {
+    color: var(--FontColor);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.srOnly {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+@media (max-width: 1024px) {
+    .sidebar {
+        min-width: 0;
+        width: 100%;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-listing/ChallengeFilters/ChallengeFilters.tsx b/src/apps/community/src/pages/challenge-listing/ChallengeFilters/ChallengeFilters.tsx
new file mode 100644
index 000000000..54ee127a0
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/ChallengeFilters/ChallengeFilters.tsx
@@ -0,0 +1,174 @@
+import { ChangeEvent, FC, FocusEvent, useCallback, useMemo } from 'react'
+
+import { Button, FormToggleSwitch, IconOutline } from '~/libs/ui'
+
+import styles from './ChallengeFilters.module.scss'
+
+export enum SidebarBucket {
+    All = 'all',
+    MyChallenges = 'my-challenges',
+    OpenForRegistration = 'open-for-registration',
+    OpenForReview = 'open-for-review',
+    CopilotOpportunities = 'copilot-opportunities',
+}
+
+export const SIDEBAR_BUCKET_LABELS: Record<SidebarBucket, string> = {
+    [SidebarBucket.All]: 'All',
+    [SidebarBucket.MyChallenges]: 'My Challenges',
+    [SidebarBucket.OpenForRegistration]: 'Open for Registration',
+    [SidebarBucket.OpenForReview]: 'Open for Review',
+    [SidebarBucket.CopilotOpportunities]: 'Copilot Opportunities',
+}
+
+interface ToggleOption {
+    key: string
+    label: string
+}
+
+const TRACK_OPTIONS: ReadonlyArray<ToggleOption> = [
+    { key: 'Design', label: 'Design' },
+    { key: 'Development', label: 'Development' },
+    { key: 'DataScience', label: 'Data Science' },
+    { key: 'QA', label: 'QA' },
+]
+
+const TYPE_OPTIONS: ReadonlyArray<ToggleOption> = [
+    { key: 'Challenge', label: 'Challenge' },
+    { key: 'First2Finish', label: 'First2Finish' },
+    { key: 'MarathonMatch', label: 'Marathon Match' },
+    { key: 'Task', label: 'Task' },
+]
+
+export interface ChallengeFiltersProps {
+    activeBucket: SidebarBucket
+    isLoggedIn: boolean
+    onBucketChange: (bucket: SidebarBucket) => void
+    onClear: () => void
+    onSearchChange: (value: string) => void
+    onTrackToggle: (track: string, on: boolean) => void
+    onTypeToggle: (type: string, on: boolean) => void
+    search: string
+    tracks: Record<string, boolean>
+    types: Record<string, boolean>
+}
+
+/**
+ * Left sidebar filter controls for challenge listing.
+ *
+ * @param props Sidebar filter values and change handlers.
+ * @returns Sidebar with search, bucket radios, category/type toggles and reset action.
+ */
+const ChallengeFilters: FC<ChallengeFiltersProps> = (props: ChallengeFiltersProps) => {
+    const handleSearchChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            props.onSearchChange(event.target.value)
+        },
+        [props.onSearchChange],
+    )
+
+    const handleBucketChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            props.onBucketChange(event.target.value as SidebarBucket)
+        },
+        [props.onBucketChange],
+    )
+    const trackToggleHandlers = useMemo(() => {
+        const handlers: Record<string, (event: FocusEvent<HTMLInputElement>) => void> = {}
+        TRACK_OPTIONS.forEach(option => {
+            handlers[option.key] = (event: FocusEvent<HTMLInputElement>) => {
+                props.onTrackToggle(option.key, event.target.checked)
+            }
+        })
+
+        return handlers
+    }, [props.onTrackToggle])
+    const typeToggleHandlers = useMemo(() => {
+        const handlers: Record<string, (event: FocusEvent<HTMLInputElement>) => void> = {}
+        TYPE_OPTIONS.forEach(option => {
+            handlers[option.key] = (event: FocusEvent<HTMLInputElement>) => {
+                props.onTypeToggle(option.key, event.target.checked)
+            }
+        })
+
+        return handlers
+    }, [props.onTypeToggle])
+
+    return (
+        <aside className={styles.sidebar}>
+            <div className={styles.section}>
+                <div className={styles.search}>
+                    <IconOutline.SearchIcon className={styles.searchIcon} aria-hidden />
+                    <input
+                        aria-label='Search active'
+                        className={styles.searchInput}
+                        name='challenge-sidebar-search'
+                        onChange={handleSearchChange}
+                        placeholder='Search active'
+                        type='text'
+                        value={props.search}
+                    />
+                </div>
+            </div>
+
+            <div className={styles.section}>
+                <div className={styles.radioList}>
+                    {Object.values(SidebarBucket)
+                        .filter(bucket => props.isLoggedIn || bucket !== SidebarBucket.MyChallenges)
+                        .map(bucket => (
+                            <label className={styles.radioItem} key={bucket}>
+                                <input
+                                    checked={props.activeBucket === bucket}
+                                    name='challenge-sidebar-bucket'
+                                    onChange={handleBucketChange}
+                                    type='radio'
+                                    value={bucket}
+                                />
+                                <span>{SIDEBAR_BUCKET_LABELS[bucket]}</span>
+                            </label>
+                        ))}
+                </div>
+            </div>
+
+            <div className={styles.section}>
+                <h3 className={styles.heading}>Category</h3>
+                <div className={styles.categoryGrid}>
+                    {TRACK_OPTIONS.map(option => (
+                        <div className={styles.toggleItem} key={option.key}>
+                            <FormToggleSwitch
+                                name={`track-${option.key}`}
+                                onChange={trackToggleHandlers[option.key]}
+                                value={Boolean(props.tracks[option.key])}
+                            />
+                            <span className={styles.toggleLabel}>{option.label}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <div className={styles.section}>
+                <h3 className={styles.heading}>Type</h3>
+                <div className={styles.typeList}>
+                    {TYPE_OPTIONS.map(option => (
+                        <div className={styles.toggleItem} key={option.key}>
+                            <FormToggleSwitch
+                                name={`type-${option.key}`}
+                                onChange={typeToggleHandlers[option.key]}
+                                value={Boolean(props.types[option.key])}
+                            />
+                            <span className={styles.toggleLabel}>{option.label}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <Button
+                fullWidth
+                label='Reset filters'
+                onClick={props.onClear}
+                secondary
+            />
+        </aside>
+    )
+}
+
+export default ChallengeFilters
diff --git a/src/apps/community/src/pages/challenge-listing/ChallengeFilters/index.ts b/src/apps/community/src/pages/challenge-listing/ChallengeFilters/index.ts
new file mode 100644
index 000000000..7404bfd99
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/ChallengeFilters/index.ts
@@ -0,0 +1,6 @@
+export { default as ChallengeFilters } from './ChallengeFilters'
+export {
+    SIDEBAR_BUCKET_LABELS,
+    SidebarBucket,
+    type ChallengeFiltersProps,
+} from './ChallengeFilters'
diff --git a/src/apps/community/src/pages/challenge-listing/ChallengeListing.module.scss b/src/apps/community/src/pages/challenge-listing/ChallengeListing.module.scss
new file mode 100644
index 000000000..d8006dc7b
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/ChallengeListing.module.scss
@@ -0,0 +1,191 @@
+@import '@libs/ui/styles/includes';
+
+.page {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-5;
+    margin: 0 auto;
+    max-width: 1280px;
+    padding: $sp-6 $sp-4 $sp-8;
+    width: 100%;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+}
+
+.title {
+    color: var(--DarkBlue);
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 44px;
+    margin: 0;
+}
+
+.tabs {
+    border-bottom: 1px solid var(--GrayBorder);
+}
+
+.tabList {
+    align-items: flex-end;
+    background: #fff;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    gap: 24px;
+    min-height: 48px;
+    overflow-x: auto;
+    padding: 0 8px;
+}
+
+.tabButton {
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    color: #2a2a2a;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    padding: 12px 8px 10px;
+    text-transform: uppercase;
+    white-space: nowrap;
+
+    &:hover {
+        border-bottom-color: #16679a;
+        color: #16679a;
+    }
+}
+
+.tabButtonActive {
+    border-bottom-color: #16679a;
+    color: #16679a;
+    font-weight: 700;
+}
+
+.body {
+    display: grid;
+    gap: $sp-6;
+    grid-template-columns: 280px 1fr;
+}
+
+.mainPanel {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.panelHeader {
+    align-items: flex-end;
+    border-bottom: 1px solid var(--GrayBorder);
+    display: flex;
+    gap: $sp-4;
+    justify-content: space-between;
+    margin-bottom: $sp-2;
+    padding-bottom: $sp-3;
+}
+
+.panelTitle {
+    color: var(--DarkBlue);
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    margin: 0;
+}
+
+.sort {
+    align-items: center;
+    display: flex;
+    gap: $sp-2;
+}
+
+.sortLabel {
+    color: var(--GrayFontColor);
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.sortSelect {
+    border: 1px solid var(--GrayBorder);
+    border-radius: 6px;
+    color: var(--FontColor);
+    font-size: 14px;
+    line-height: 20px;
+    min-height: 42px;
+    min-width: 220px;
+    padding: 10px 12px;
+}
+
+.cardsTable {
+    :global(.TableCell) {
+        max-width: none;
+        padding: 0;
+    }
+
+    :global(.TableCell_blockCell) {
+        display: block;
+    }
+
+    :global(tbody > tr:first-child .TableCell) {
+        border-top: 0;
+    }
+}
+
+.emptyState {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    color: var(--GrayFontColor);
+    font-size: 16px;
+    line-height: 24px;
+    padding: $sp-6;
+    text-align: center;
+}
+
+.loadMore {
+    display: flex;
+    justify-content: center;
+    margin-top: $sp-4;
+}
+
+@media (max-width: 1024px) {
+    .body {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .page {
+        padding: $sp-4 $sp-3 $sp-6;
+    }
+
+    .title {
+        font-size: 28px;
+        line-height: 36px;
+    }
+
+    .tabList {
+        gap: 0;
+        padding: 0;
+    }
+
+    .tabButton {
+        padding: 12px 10px 10px;
+    }
+
+    .panelHeader {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .sort {
+        width: 100%;
+    }
+
+    .sortSelect {
+        min-width: 0;
+        width: 100%;
+    }
+}
diff --git a/src/apps/community/src/pages/challenge-listing/ChallengeListing.tsx b/src/apps/community/src/pages/challenge-listing/ChallengeListing.tsx
new file mode 100644
index 000000000..ec7718faf
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/ChallengeListing.tsx
@@ -0,0 +1,506 @@
+/* eslint-disable complexity */
+import { ChangeEvent, FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import classNames from 'classnames'
+
+import { profileContext, ProfileContextData } from '~/libs/core'
+import { EnvironmentConfig } from '~/config'
+import {
+    Breadcrumb,
+    BreadcrumbItemModel,
+    Button,
+    LoadingSpinner,
+    Table,
+    TableColumn,
+} from '~/libs/ui'
+
+import { challengeListingRouteId, rootRoute } from '../../config/routes.config'
+import {
+    bucketToParams,
+    BUCKET_LABELS,
+    ChallengeBucket,
+    ChallengeInfo,
+    ChallengeListParams,
+    SORT_OPTIONS,
+    useChallenges,
+    UseChallengesResult,
+    useCommunityMeta,
+    UseCommunityMetaResult,
+} from '../../lib'
+
+import {
+    ChallengeFilters,
+    SidebarBucket,
+    SIDEBAR_BUCKET_LABELS,
+} from './ChallengeFilters'
+import ChallengeCard, { type PrizeMode } from './ChallengeCard/ChallengeCard'
+import styles from './ChallengeListing.module.scss'
+
+const DEFAULT_SORT = 'startDate'
+
+const DEFAULT_TRACKS: Record<string, boolean> = {
+    DataScience: true,
+    Design: true,
+    Development: true,
+    QA: true,
+}
+
+const DEFAULT_TYPES: Record<string, boolean> = {
+    Challenge: true,
+    First2Finish: true,
+    MarathonMatch: true,
+    Task: true,
+}
+
+const TRACK_QUERY_VALUE: Record<string, string> = {
+    DataScience: 'DS',
+    Design: 'Des',
+    Development: 'Dev',
+    QA: 'QA',
+}
+
+const TYPE_QUERY_VALUE: Record<string, string> = {
+    Challenge: 'CH',
+    First2Finish: 'F2F',
+    MarathonMatch: 'MM',
+    Task: 'TSK',
+}
+
+function getSortParams(sortBy: string): Pick<ChallengeListParams, 'sortBy' | 'sortOrder'> {
+    if (sortBy.endsWith('-high-to-low')) {
+        return {
+            sortBy: sortBy.replace('-high-to-low', ''),
+            sortOrder: 'desc',
+        }
+    }
+
+    if (sortBy.endsWith('-low-to-high')) {
+        return {
+            sortBy: sortBy.replace('-low-to-high', ''),
+            sortOrder: 'asc',
+        }
+    }
+
+    if (sortBy === 'name') {
+        return {
+            sortBy,
+            sortOrder: 'asc',
+        }
+    }
+
+    return {
+        sortBy,
+        sortOrder: 'desc',
+    }
+}
+
+/**
+ * Converts active sidebar bucket selection into challenge query params.
+ *
+ * @param bucket Active sidebar bucket.
+ * @param memberId Current member id.
+ * @returns API params for active tab bucket selection.
+ */
+function sidebarBucketToParams(
+    bucket: SidebarBucket,
+    memberId?: string,
+): Partial<ChallengeListParams> {
+    switch (bucket) {
+        case SidebarBucket.All:
+            return {}
+        case SidebarBucket.MyChallenges:
+            return {
+                memberId,
+            }
+        case SidebarBucket.OpenForRegistration:
+            return {
+                currentPhaseName: 'Registration',
+            }
+        case SidebarBucket.OpenForReview:
+            return {
+                currentPhaseName: 'Review',
+            }
+        case SidebarBucket.CopilotOpportunities:
+            return {
+                tags: ['Copilot'],
+            }
+        default:
+            return {}
+    }
+}
+
+/**
+ * Prepends a leading slash to a route when missing.
+ *
+ * @param route Route path.
+ * @returns Route path with leading slash.
+ */
+function withLeadingSlash(route: string): string {
+    return route.startsWith('/')
+        ? route
+        : `/${route}`
+}
+
+/**
+ * Community challenge listing route component with tab navigation, sidebar filters and paginated rows.
+ *
+ * @returns Challenge listing page content.
+ */
+const ChallengeListing: FC = () => {
+    const [searchParams] = useSearchParams()
+    const { isLoggedIn, profile }: ProfileContextData = useContext(profileContext)
+    const [activeTab, setActiveTab] = useState<ChallengeBucket>(
+        ChallengeBucket.ActiveChallenges,
+    )
+    const [activeBucket, setActiveBucket] = useState<SidebarBucket>(
+        SidebarBucket.OpenForRegistration,
+    )
+    const [search, setSearch] = useState<string>('')
+    const [sortBy, setSortBy] = useState<string>(DEFAULT_SORT)
+    const [tracks, setTracks] = useState<Record<string, boolean>>(DEFAULT_TRACKS)
+    const [types, setTypes] = useState<Record<string, boolean>>(DEFAULT_TYPES)
+    const [page, setPage] = useState<number>(1)
+    const [allChallenges, setAllChallenges] = useState<ChallengeInfo[]>([])
+
+    const prizeMode: PrizeMode = searchParams.get('prizeMode') === 'points'
+        ? 'points'
+        : 'money-usd'
+    const communityId = searchParams.get('communityId') ?? undefined
+    const memberId = profile?.userId ? `${profile.userId}` : undefined
+    const { communityMeta, isLoading: isLoadingCommunityMeta }: UseCommunityMetaResult
+        = useCommunityMeta(communityId)
+
+    const tabs = useMemo<ReadonlyArray<{ id: ChallengeBucket; title: string }>>(() => (
+        Object.values(ChallengeBucket)
+            .map(bucket => ({
+                id: bucket,
+                title: BUCKET_LABELS[bucket],
+            }))
+    ), [])
+
+    const selectedTracks = useMemo<string[]>(
+        () => Object.entries(TRACK_QUERY_VALUE)
+            .filter(([key]) => tracks[key])
+            .map(([, value]) => value),
+        [tracks],
+    )
+    const selectedTypes = useMemo<string[]>(
+        () => Object.entries(TYPE_QUERY_VALUE)
+            .filter(([key]) => types[key])
+            .map(([, value]) => value),
+        [types],
+    )
+
+    const tabParams = useMemo(
+        () => bucketToParams(activeTab, memberId),
+        [activeTab, memberId],
+    )
+    const sidebarParams = useMemo(
+        () => (
+            activeTab === ChallengeBucket.ActiveChallenges
+                ? sidebarBucketToParams(activeBucket, memberId)
+                : {}
+        ),
+        [activeBucket, activeTab, memberId],
+    )
+    const sortParams = useMemo(() => getSortParams(sortBy), [sortBy])
+    const groupIds = communityMeta?.challengeFilter?.groupIds
+    const trimmedSearch = useMemo<string>(() => search.trim(), [search])
+
+    const listingParams = useMemo<ChallengeListParams>(() => ({
+        ...tabParams,
+        ...sidebarParams,
+        ...sortParams,
+        groups: groupIds?.length ? groupIds : undefined,
+        name: trimmedSearch || undefined,
+        page,
+        tracks: selectedTracks.length ? selectedTracks : undefined,
+        types: selectedTypes.length ? selectedTypes : undefined,
+    }), [
+        groupIds,
+        page,
+        selectedTracks,
+        selectedTypes,
+        sidebarParams,
+        sortParams,
+        tabParams,
+        trimmedSearch,
+    ])
+
+    const {
+        challenges,
+        isLoading: isLoadingChallenges,
+        total,
+    }: UseChallengesResult = useChallenges(listingParams)
+
+    const listingKey = useMemo(() => JSON.stringify({
+        ...tabParams,
+        ...sidebarParams,
+        ...sortParams,
+        groups: groupIds ?? [],
+        name: trimmedSearch,
+        tracks: selectedTracks,
+        types: selectedTypes,
+    }), [
+        groupIds,
+        selectedTracks,
+        selectedTypes,
+        sidebarParams,
+        sortParams,
+        tabParams,
+        trimmedSearch,
+    ])
+    const listingPath = useMemo(() => {
+        const route = withLeadingSlash(`${rootRoute}/${challengeListingRouteId}`)
+            .replace(/\/{2,}/g, '/')
+        const query = searchParams.toString()
+
+        return query
+            ? `${route}?${query}`
+            : route
+    }, [searchParams])
+    const breadcrumbs = useMemo<Array<BreadcrumbItemModel>>(() => {
+        const items: Array<BreadcrumbItemModel> = [
+            {
+                name: 'Community',
+                url: rootRoute || '/',
+            },
+        ]
+
+        if (communityMeta?.communityName) {
+            items.push({
+                name: communityMeta.communityName,
+                url: listingPath,
+            })
+        }
+
+        items.push({
+            name: 'Challenges',
+            url: listingPath,
+        })
+
+        return items
+    }, [communityMeta?.communityName, listingPath])
+    const challengeTableColumns = useMemo<ReadonlyArray<TableColumn<ChallengeInfo>>>(() => [
+        {
+            columnId: 'challenge',
+            isSortable: false,
+            label: 'Challenges',
+            renderer: (challenge: ChallengeInfo): JSX.Element => (
+                <ChallengeCard
+                    challenge={challenge}
+                    prizeMode={prizeMode}
+                />
+            ),
+            type: 'element',
+        },
+    ], [prizeMode])
+
+    useEffect(() => {
+        setAllChallenges([])
+        setPage(1)
+    }, [listingKey])
+
+    useEffect(() => {
+        if (!isLoggedIn && activeBucket === SidebarBucket.MyChallenges) {
+            setActiveBucket(SidebarBucket.OpenForRegistration)
+        }
+    }, [activeBucket, isLoggedIn])
+
+    useEffect(() => {
+        setAllChallenges(previous => {
+            if (page <= 1) {
+                return challenges
+            }
+
+            const merged = new Map(previous.map(challenge => [challenge.id, challenge]))
+            challenges.forEach(challenge => {
+                merged.set(challenge.id, challenge)
+            })
+
+            return Array.from(merged.values())
+        })
+    }, [challenges, page])
+
+    const hasFilterSelection = selectedTracks.length > 0 && selectedTypes.length > 0
+    const visibleChallenges = useMemo<ChallengeInfo[]>(
+        () => (
+            hasFilterSelection
+                ? allChallenges
+                : []
+        ),
+        [allChallenges, hasFilterSelection],
+    )
+    const hasMoreChallenges = allChallenges.length < total
+    const isLoading = (isLoadingChallenges || (!!communityId && isLoadingCommunityMeta)) && hasFilterSelection
+    const title = communityMeta?.communityName
+        ? `${communityMeta.communityName} Challenges`
+        : 'Challenges'
+    const panelTitle = activeTab === ChallengeBucket.ActiveChallenges
+        ? SIDEBAR_BUCKET_LABELS[activeBucket]
+        : BUCKET_LABELS[activeTab]
+
+    const handleTabChange = useCallback((bucket: ChallengeBucket): void => {
+        setActiveTab(bucket)
+        setPage(1)
+    }, [])
+    const handleBucketChange = useCallback((bucket: SidebarBucket): void => {
+        setActiveBucket(bucket)
+        setPage(1)
+    }, [])
+    const handleTrackToggle = useCallback((track: string, on: boolean): void => {
+        setTracks(previous => ({
+            ...previous,
+            [track]: on,
+        }))
+        setPage(1)
+    }, [])
+    const handleTypeToggle = useCallback((type: string, on: boolean): void => {
+        setTypes(previous => ({
+            ...previous,
+            [type]: on,
+        }))
+        setPage(1)
+    }, [])
+    const handleClearFilters = useCallback((): void => {
+        setSearch('')
+        setSortBy(DEFAULT_SORT)
+        setTracks(DEFAULT_TRACKS)
+        setTypes(DEFAULT_TYPES)
+        setPage(1)
+    }, [])
+    const handleSortChange = useCallback((event: ChangeEvent<HTMLSelectElement>): void => {
+        setSortBy(event.target.value)
+        setPage(1)
+    }, [])
+    const handleSearchChange = useCallback((value: string): void => {
+        setSearch(value)
+        setPage(1)
+    }, [])
+    const handleLoadMore = useCallback((): void => {
+        setPage(previous => previous + 1)
+    }, [])
+    const handleEngagementsTabClick = useCallback((): void => {
+        window.location.assign(EnvironmentConfig.ENGAGEMENTS_URL)
+    }, [])
+    const tabClickHandlers: Record<ChallengeBucket, () => void> = useMemo(() => {
+        const handlers = {} as Record<ChallengeBucket, () => void>
+
+        Object.values(ChallengeBucket)
+            .forEach(bucket => {
+                if (bucket === ChallengeBucket.Engagements) {
+                    handlers[bucket] = handleEngagementsTabClick
+                    return
+                }
+
+                handlers[bucket] = () => handleTabChange(bucket)
+            })
+
+        return handlers
+    }, [handleEngagementsTabClick, handleTabChange])
+
+    return (
+        <section className={styles.page}>
+            <header className={styles.header}>
+                <Breadcrumb
+                    items={breadcrumbs}
+                    renderInline
+                />
+                <h1 className={styles.title}>{title}</h1>
+            </header>
+
+            <div className={styles.tabs}>
+                <div
+                    aria-label='Challenge buckets'
+                    className={styles.tabList}
+                    role='tablist'
+                >
+                    {tabs.map(tab => (
+                        <button
+                            aria-selected={activeTab === tab.id}
+                            className={classNames(
+                                styles.tabButton,
+                                activeTab === tab.id && styles.tabButtonActive,
+                            )}
+                            id={`challenge-tab-${tab.id}`}
+                            key={tab.id}
+                            onClick={tabClickHandlers[tab.id]}
+                            role='tab'
+                            type='button'
+                        >
+                            {tab.title}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            <div className={styles.body}>
+                <ChallengeFilters
+                    activeBucket={activeBucket}
+                    isLoggedIn={isLoggedIn}
+                    onBucketChange={handleBucketChange}
+                    onClear={handleClearFilters}
+                    onSearchChange={handleSearchChange}
+                    onTrackToggle={handleTrackToggle}
+                    onTypeToggle={handleTypeToggle}
+                    search={search}
+                    tracks={tracks}
+                    types={types}
+                />
+
+                <div className={styles.mainPanel}>
+                    <div className={styles.panelHeader}>
+                        <h2 className={styles.panelTitle}>{panelTitle}</h2>
+                        <div className={styles.sort}>
+                            <label className={styles.sortLabel} htmlFor='challenge-sort'>
+                                Sort By
+                            </label>
+                            <select
+                                className={styles.sortSelect}
+                                id='challenge-sort'
+                                onChange={handleSortChange}
+                                value={sortBy}
+                            >
+                                {SORT_OPTIONS.map(option => (
+                                    <option key={option.value} value={option.value}>
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                    </div>
+
+                    <LoadingSpinner hide={!isLoading} />
+
+                    {!isLoading && visibleChallenges.length === 0 && (
+                        <div className={styles.emptyState}>
+                            No challenges found.
+                        </div>
+                    )}
+
+                    {visibleChallenges.length > 0 && (
+                        <Table
+                            className={styles.cardsTable}
+                            columns={challengeTableColumns}
+                            data={visibleChallenges}
+                            disableSorting
+                            preventDefault
+                        />
+                    )}
+
+                    {!isLoading && hasMoreChallenges && (
+                        <div className={styles.loadMore}>
+                            <Button
+                                label='Load More'
+                                onClick={handleLoadMore}
+                                primary
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default ChallengeListing
diff --git a/src/apps/community/src/pages/challenge-listing/challenge-listing.routes.tsx b/src/apps/community/src/pages/challenge-listing/challenge-listing.routes.tsx
new file mode 100644
index 000000000..facd30bcc
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/challenge-listing.routes.tsx
@@ -0,0 +1,16 @@
+import { PlatformRoute } from '~/libs/core'
+
+import { challengeListingRouteId } from '../../config/routes.config'
+
+import ChallengeListing from './ChallengeListing'
+
+/**
+ * Route definitions for the challenge listing page module.
+ */
+export const challengeListingRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: false,
+        element: <ChallengeListing />,
+        route: challengeListingRouteId,
+    },
+]
diff --git a/src/apps/community/src/pages/challenge-listing/index.ts b/src/apps/community/src/pages/challenge-listing/index.ts
new file mode 100644
index 000000000..665e1ef50
--- /dev/null
+++ b/src/apps/community/src/pages/challenge-listing/index.ts
@@ -0,0 +1,2 @@
+export { default as ChallengeListing } from './ChallengeListing'
+export * from './challenge-listing.routes'
diff --git a/src/apps/community/src/pages/changelog/ChangelogPage.module.scss b/src/apps/community/src/pages/changelog/ChangelogPage.module.scss
new file mode 100644
index 000000000..710210449
--- /dev/null
+++ b/src/apps/community/src/pages/changelog/ChangelogPage.module.scss
@@ -0,0 +1,64 @@
+.page {
+    margin: 0 auto;
+    max-width: 1220px;
+    padding: 0 16px 34px;
+}
+
+.content {
+    background: #fff;
+    border: 1px solid #e2e2e2;
+    border-radius: 8px;
+    margin-top: 14px;
+    padding: 26px;
+}
+
+.title {
+    font-size: 34px;
+    margin: 0 0 16px;
+}
+
+.loading {
+    min-height: 120px;
+}
+
+.body {
+    color: #2c2c2c;
+    font-size: 16px;
+    line-height: 1.7;
+}
+
+.body :global(h1),
+.body :global(h2),
+.body :global(h3),
+.body :global(h4) {
+    color: #121212;
+    margin-bottom: 8px;
+    margin-top: 26px;
+}
+
+.body :global(p),
+.body :global(ul),
+.body :global(ol) {
+    margin-bottom: 14px;
+}
+
+.body :global(a) {
+    color: #0d61ff;
+}
+
+@media (max-width: 768px) {
+    .page {
+        padding: 0 10px 26px;
+    }
+
+    .content {
+        border-radius: 0;
+        margin-left: -10px;
+        margin-right: -10px;
+        padding: 18px 14px;
+    }
+
+    .title {
+        font-size: 28px;
+    }
+}
diff --git a/src/apps/community/src/pages/changelog/ChangelogPage.tsx b/src/apps/community/src/pages/changelog/ChangelogPage.tsx
new file mode 100644
index 000000000..513e04ffb
--- /dev/null
+++ b/src/apps/community/src/pages/changelog/ChangelogPage.tsx
@@ -0,0 +1,154 @@
+/* eslint-disable ordered-imports/ordered-imports */
+import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
+import {
+    FC,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
+import DOMPurify from 'dompurify'
+
+import {
+    Breadcrumb,
+    type BreadcrumbItemModel,
+    LoadingSpinner,
+} from '~/libs/ui'
+
+import {
+    changelogRouteId,
+    rootRoute,
+} from '../../config/routes.config'
+import { fetchChangelogEntry } from '../../lib/services'
+
+import styles from './ChangelogPage.module.scss'
+
+interface ContentfulEntry {
+    fields?: Record<string, unknown>
+}
+
+interface ContentfulRichTextDocument {
+    content?: unknown[]
+    nodeType?: string
+}
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function isRichTextDocument(value: unknown): value is ContentfulRichTextDocument {
+    if (!value || typeof value !== 'object') {
+        return false
+    }
+
+    const document = value as ContentfulRichTextDocument
+
+    return document.nodeType === 'document' && Array.isArray(document.content)
+}
+
+function resolveChangelogBodyDocument(entry: unknown): ContentfulRichTextDocument | undefined {
+    const fields = (entry as ContentfulEntry)?.fields
+
+    if (!fields) {
+        return undefined
+    }
+
+    const bodyCandidate = fields.body
+    if (isRichTextDocument(bodyCandidate)) {
+        return bodyCandidate
+    }
+
+    const contentCandidate = fields.content
+    if (isRichTextDocument(contentCandidate)) {
+        return contentCandidate
+    }
+
+    const firstDocument = Object.values(fields)
+        .find(value => isRichTextDocument(value))
+
+    return isRichTextDocument(firstDocument)
+        ? firstDocument
+        : undefined
+}
+
+/**
+ * Community changelog page sourced from Contentful.
+ *
+ * @returns Sanitized changelog HTML content.
+ */
+const ChangelogPage: FC = () => {
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    const [contentHtml, setContentHtml] = useState<string>('')
+
+    const breadcrumbs = useMemo<Array<BreadcrumbItemModel>>(() => [
+        {
+            name: 'Changelog',
+            url: withLeadingSlash(`${rootRoute}/${changelogRouteId}`)
+                .replace(/\/{2,}/g, '/'),
+        },
+    ], [])
+
+    useEffect(() => {
+        let isMounted = true
+
+        async function fetchChangelog(): Promise<void> {
+            try {
+                const entry = await fetchChangelogEntry()
+                const changelogDocument = resolveChangelogBodyDocument(entry)
+
+                if (!isMounted) {
+                    return
+                }
+
+                if (!changelogDocument) {
+                    setContentHtml('')
+                    return
+                }
+
+                const renderedHtml = documentToHtmlString(changelogDocument as never)
+                setContentHtml(DOMPurify.sanitize(renderedHtml))
+            } finally {
+                if (isMounted) {
+                    setIsLoading(false)
+                }
+            }
+        }
+
+        fetchChangelog()
+            .catch(() => undefined)
+
+        return () => {
+            isMounted = false
+        }
+    }, [])
+
+    return (
+        <section className={styles.page}>
+            <Breadcrumb
+                items={breadcrumbs}
+                renderInline
+            />
+
+            <article className={styles.content}>
+                <h1 className={styles.title}>Changelog</h1>
+
+                {isLoading ? (
+                    <div className={styles.loading}>
+                        <LoadingSpinner />
+                    </div>
+                ) : (
+                    <div
+                        className={styles.body}
+                        // eslint-disable-next-line react/no-danger
+                        dangerouslySetInnerHTML={{
+                            __html: contentHtml || '<p>No changelog content is currently available.</p>',
+                        }}
+                    />
+                )}
+            </article>
+        </section>
+    )
+}
+
+export default ChangelogPage
diff --git a/src/apps/community/src/pages/changelog/changelog.routes.tsx b/src/apps/community/src/pages/changelog/changelog.routes.tsx
new file mode 100644
index 000000000..5b7848c55
--- /dev/null
+++ b/src/apps/community/src/pages/changelog/changelog.routes.tsx
@@ -0,0 +1,22 @@
+import {
+    lazyLoad,
+    LazyLoadedComponent,
+    PlatformRoute,
+} from '~/libs/core'
+
+import { changelogRouteId } from '../../config/routes.config'
+
+const ChangelogPage: LazyLoadedComponent = lazyLoad(
+    () => import('./ChangelogPage'),
+)
+
+/**
+ * Route definitions for the changelog page module.
+ */
+export const changelogRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: false,
+        element: <ChangelogPage />,
+        route: changelogRouteId,
+    },
+]
diff --git a/src/apps/community/src/pages/changelog/index.ts b/src/apps/community/src/pages/changelog/index.ts
new file mode 100644
index 000000000..9351b4306
--- /dev/null
+++ b/src/apps/community/src/pages/changelog/index.ts
@@ -0,0 +1 @@
+export * from './changelog.routes'
diff --git a/src/apps/community/src/pages/communities/CommunityContentPage/CommunityContentPage.tsx b/src/apps/community/src/pages/communities/CommunityContentPage/CommunityContentPage.tsx
new file mode 100644
index 000000000..67437b93d
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityContentPage/CommunityContentPage.tsx
@@ -0,0 +1,173 @@
+import { FC, useMemo } from 'react'
+import { useLocation, useParams } from 'react-router-dom'
+import useSWR, { SWRResponse } from 'swr'
+
+import { EnvironmentConfig } from '~/config'
+import { LoadingSpinner } from '~/libs/ui'
+
+import { fetchContentfulEntry } from '../../../lib/services'
+import { useCommunityContext } from '../CommunityContext'
+
+interface CommunityPageRouteState {
+    contentfulId?: string
+    spaceName?: string
+}
+
+interface CommunityPageMetaConfig {
+    contentfulId?: string
+    spaceName?: string
+}
+
+interface CommunityMetadataPages {
+    [slug: string]: CommunityPageMetaConfig
+}
+
+/**
+ * Reads a string value from Contentful-style localized field values.
+ *
+ * @param value Field value.
+ * @returns First available string value.
+ */
+function readString(value: unknown): string | undefined {
+    if (typeof value === 'string') {
+        return value
+    }
+
+    if (!value || typeof value !== 'object') {
+        return undefined
+    }
+
+    return Object.values(value as Record<string, unknown>)
+        .find(item => typeof item === 'string') as string | undefined
+}
+
+/**
+ * Resolves page slug from current location and community route params.
+ *
+ * @param pathname Current pathname.
+ * @param communityId Active community id.
+ * @returns Page slug key for metadata lookup.
+ */
+function resolvePageSlug(pathname: string, communityId?: string): string {
+    if (!communityId) {
+        return 'home'
+    }
+
+    const segments = pathname.replace(/\/+$/, '')
+        .split('/')
+        .filter(Boolean)
+    const communitySegmentIndex = segments.findIndex(segment => segment === communityId)
+    const pageSlug = communitySegmentIndex >= 0
+        ? segments[communitySegmentIndex + 1]
+        : undefined
+
+    return pageSlug ?? 'home'
+}
+
+/**
+ * Renders a Contentful entry payload for community content pages.
+ *
+ * @param entry Contentful entry payload.
+ * @returns Rendered page content.
+ */
+function renderContent(entry: unknown): JSX.Element {
+    if (!entry || typeof entry !== 'object') {
+        return (
+            <p>
+                No content available for this page.
+            </p>
+        )
+    }
+
+    const record = entry as Record<string, unknown>
+    const fields = record.fields as Record<string, unknown> | undefined
+    const title = readString(fields?.title) ?? readString(fields?.name)
+    const content = readString(fields?.content)
+        ?? readString(fields?.body)
+        ?? readString(fields?.description)
+        ?? readString(fields?.text)
+
+    if (!content) {
+        return (
+            <pre>
+                {JSON.stringify(entry, undefined, 2)}
+            </pre>
+        )
+    }
+
+    return (
+        <article>
+            {title && <h1>{title}</h1>}
+            <div dangerouslySetInnerHTML={{ __html: content }} />
+        </article>
+    )
+}
+
+/**
+ * Generic Contentful-driven community page renderer.
+ *
+ * @returns Community page content from Contentful metadata configuration.
+ */
+const CommunityContentPage: FC = () => {
+    const location = useLocation()
+    const { communityId }: { communityId?: string } = useParams<{ communityId: string }>()
+    const routeState = location.state as CommunityPageRouteState | undefined
+    const communityContext = useCommunityContext()
+    const pageSlug = useMemo(
+        () => resolvePageSlug(location.pathname, communityId),
+        [communityId, location.pathname],
+    )
+    const pageConfigFromMeta = useMemo<CommunityPageMetaConfig | undefined>(() => {
+        const metadata = communityContext?.meta.metadata as Record<string, unknown> | undefined
+        const pages = metadata?.pages as CommunityMetadataPages | undefined
+        if (!pages) {
+            return undefined
+        }
+
+        return pages[pageSlug]
+    }, [communityContext?.meta.metadata, pageSlug])
+    const contentfulId = routeState?.contentfulId ?? pageConfigFromMeta?.contentfulId
+    const spaceName = routeState?.spaceName
+        ?? pageConfigFromMeta?.spaceName
+        ?? EnvironmentConfig.CONTENTFUL.SPACE_ID
+
+    const {
+        data,
+        error,
+        isValidating: isLoading,
+    }: SWRResponse<unknown, Error> = useSWR<unknown, Error>(
+        `community/contentful-entry/${spaceName}/${contentfulId}`,
+        {
+            fetcher: () => fetchContentfulEntry(contentfulId ?? '', spaceName),
+            isPaused: () => !contentfulId,
+        },
+    )
+
+    if (!contentfulId) {
+        return (
+            <section>
+                <p>No Contentful entry is configured for this page.</p>
+            </section>
+        )
+    }
+
+    if (isLoading) {
+        return <LoadingSpinner />
+    }
+
+    if (error) {
+        return (
+            <section>
+                <p>Unable to load community page content right now.</p>
+            </section>
+        )
+    }
+
+    return (
+        <section>
+            {renderContent(data)}
+        </section>
+    )
+}
+
+export default CommunityContentPage
diff --git a/src/apps/community/src/pages/communities/CommunityContentPage/index.ts b/src/apps/community/src/pages/communities/CommunityContentPage/index.ts
new file mode 100644
index 000000000..5d89b0afa
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityContentPage/index.ts
@@ -0,0 +1 @@
+export { default as CommunityContentPage } from './CommunityContentPage'
diff --git a/src/apps/community/src/pages/communities/CommunityContext/community.context-provider.tsx b/src/apps/community/src/pages/communities/CommunityContext/community.context-provider.tsx
new file mode 100644
index 000000000..2d4def774
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityContext/community.context-provider.tsx
@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from 'react'
+
+import {
+    communityContext,
+    CommunityContextValue,
+} from './community.context'
+
+export interface CommunityContextProviderProps {
+    value: CommunityContextValue
+}
+
+/**
+ * Provides active community metadata and membership state to nested pages.
+ *
+ * @param props Provider value and child content.
+ * @returns Context provider wrapper.
+ */
+export const CommunityContextProvider: FC<PropsWithChildren<CommunityContextProviderProps>>
+    = (props: PropsWithChildren<CommunityContextProviderProps>) => (
+        <communityContext.Provider value={props.value}>
+            {props.children}
+        </communityContext.Provider>
+    )
diff --git a/src/apps/community/src/pages/communities/CommunityContext/community.context.ts b/src/apps/community/src/pages/communities/CommunityContext/community.context.ts
new file mode 100644
index 000000000..3b6e7f3f5
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityContext/community.context.ts
@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react'
+
+import { CommunityMeta } from '../../../lib'
+
+export interface CommunityContextValue {
+    isMember: boolean
+    meta: CommunityMeta
+}
+
+export const communityContext = createContext<CommunityContextValue | undefined>(undefined)
+
+/**
+ * Accesses active community metadata from context.
+ *
+ * @returns Community context value when available.
+ */
+export function useCommunityContext(): CommunityContextValue | undefined {
+    return useContext(communityContext)
+}
diff --git a/src/apps/community/src/pages/communities/CommunityContext/index.ts b/src/apps/community/src/pages/communities/CommunityContext/index.ts
new file mode 100644
index 000000000..ed4b1d5b2
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityContext/index.ts
@@ -0,0 +1,2 @@
+export * from './community.context'
+export * from './community.context-provider'
diff --git a/src/apps/community/src/pages/communities/CommunityLeaderboardPage/CommunityLeaderboardPage.module.scss b/src/apps/community/src/pages/communities/CommunityLeaderboardPage/CommunityLeaderboardPage.module.scss
new file mode 100644
index 000000000..997a90f3a
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityLeaderboardPage/CommunityLeaderboardPage.module.scss
@@ -0,0 +1,58 @@
+.page {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-height: 640px;
+}
+
+.header {
+    align-items: baseline;
+    display: flex;
+    gap: 16px;
+    justify-content: space-between;
+}
+
+.title {
+    color: #262628;
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 34px;
+    margin: 0;
+}
+
+.message {
+    color: #555;
+    margin: 0;
+}
+
+.link {
+    color: #0d61bf;
+    font-size: 14px;
+    text-decoration: none;
+}
+
+.link:hover {
+    text-decoration: underline;
+}
+
+.frame {
+    background: #fff;
+    border: 0;
+    border-radius: 8px;
+    height: calc(100vh - 280px);
+    min-height: 520px;
+    width: 100%;
+}
+
+@media (max-width: 767px) {
+    .header {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .frame {
+        height: 70vh;
+        min-height: 420px;
+    }
+}
diff --git a/src/apps/community/src/pages/communities/CommunityLeaderboardPage/CommunityLeaderboardPage.tsx b/src/apps/community/src/pages/communities/CommunityLeaderboardPage/CommunityLeaderboardPage.tsx
new file mode 100644
index 000000000..cb5d2cd98
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityLeaderboardPage/CommunityLeaderboardPage.tsx
@@ -0,0 +1,102 @@
+import { FC, useMemo } from 'react'
+
+import type { CommunityMeta } from '../../../lib/models'
+import { useCommunityContext } from '../CommunityContext'
+
+import styles from './CommunityLeaderboardPage.module.scss'
+
+/**
+ * Reads a non-empty string from unknown data.
+ *
+ * @param value Source value.
+ * @returns Normalized string value.
+ */
+function readString(value: unknown): string | undefined {
+    if (typeof value !== 'string') {
+        return undefined
+    }
+
+    const trimmed = value.trim()
+    return trimmed.length > 0
+        ? trimmed
+        : undefined
+}
+
+/**
+ * Resolves an embeddable leaderboard URL from community metadata.
+ *
+ * @param communityMeta Community metadata object.
+ * @returns Leaderboard URL when configured.
+ */
+function resolveLeaderboardUrl(communityMeta?: CommunityMeta): string | undefined {
+    const metadata = communityMeta?.metadata as Record<string, unknown> | undefined
+    const leaderboardConfig = metadata?.leaderboard as Record<string, unknown> | undefined
+    const topLevelUrl = readString(
+        (communityMeta as CommunityMeta & { leaderboardApiUrl?: unknown } | undefined)?.leaderboardApiUrl,
+    )
+    const metadataUrl = readString(metadata?.leaderboardApiUrl)
+        ?? readString(leaderboardConfig?.apiUrl)
+        ?? readString(leaderboardConfig?.url)
+
+    const candidateUrl = topLevelUrl ?? metadataUrl
+    if (!candidateUrl) {
+        return undefined
+    }
+
+    try {
+        const parsedUrl = new URL(candidateUrl)
+        return parsedUrl.protocol === 'https:' || parsedUrl.protocol === 'http:'
+            ? parsedUrl.toString()
+            : undefined
+    } catch {
+        return undefined
+    }
+}
+
+/**
+ * Shared leaderboard route page for community routes.
+ *
+ * @returns Embedded leaderboard view or fallback state.
+ */
+const CommunityLeaderboardPage: FC = () => {
+    const communityContext = useCommunityContext()
+    const leaderboardUrl = useMemo(
+        () => resolveLeaderboardUrl(communityContext?.meta),
+        [communityContext?.meta],
+    )
+
+    if (!leaderboardUrl) {
+        return (
+            <section className={styles.page}>
+                <h1 className={styles.title}>Leaderboard</h1>
+                <p className={styles.message}>
+                    Leaderboard data is not configured for this community.
+                </p>
+            </section>
+        )
+    }
+
+    return (
+        <section className={styles.page}>
+            <header className={styles.header}>
+                <h1 className={styles.title}>Leaderboard</h1>
+                <a
+                    className={styles.link}
+                    href={leaderboardUrl}
+                    rel='noreferrer'
+                    target='_blank'
+                >
+                    Open leaderboard in a new tab
+                </a>
+            </header>
+            <iframe
+                className={styles.frame}
+                loading='lazy'
+                src={leaderboardUrl}
+                title='Community Leaderboard'
+            />
+        </section>
+    )
+}
+
+export default CommunityLeaderboardPage
diff --git a/src/apps/community/src/pages/communities/CommunityLeaderboardPage/index.ts b/src/apps/community/src/pages/communities/CommunityLeaderboardPage/index.ts
new file mode 100644
index 000000000..40ed1d609
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityLeaderboardPage/index.ts
@@ -0,0 +1 @@
+export { default as CommunityLeaderboardPage } from './CommunityLeaderboardPage'
diff --git a/src/apps/community/src/pages/communities/CommunityLoader.test.tsx b/src/apps/community/src/pages/communities/CommunityLoader.test.tsx
new file mode 100644
index 000000000..1624ebcc1
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityLoader.test.tsx
@@ -0,0 +1,399 @@
+/* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports */
+import { useContext } from 'react'
+import { MemoryRouter, Routes } from 'react-router-dom'
+import { render, screen, waitFor } from '@testing-library/react'
+
+import { routerContext } from '../../../../../libs/core/lib/router/router-context/router.context'
+import { RouterProvider } from '../../../../../libs/core/lib/router/router-context/router.context-provider'
+import {
+    challengeDetailRouteId,
+    challengeListingRouteId,
+    communityLoaderRouteId,
+} from '../../config/routes.config'
+import { useCommunityMeta, useUserGroups } from '../../lib/hooks'
+import profileContext from '../../../../../libs/core/lib/profile/profile-context/profile.context'
+
+import { communityLoaderRoutes } from './community.routes'
+
+const mockAuthUrlLogin = jest.fn(
+    (returnUrl?: string) => `https://accounts.topcoder-dev.com?retUrl=${encodeURIComponent(returnUrl ?? '')}`,
+)
+
+jest.mock('~/config', () => ({
+    AppSubdomain: {
+        community: 'community',
+    },
+    EnvironmentConfig: {
+        AUTH: {
+            ACCOUNTS_APP_CONNECTOR: 'https://accounts.topcoder-dev.com',
+        },
+        SUBDOMAIN: 'community',
+    },
+    ToolTitle: {
+        tcAcademy: 'tcAcademy',
+    },
+}), { virtual: true })
+
+jest.mock('~/libs/core', () => {
+    const profileContextModule = jest.requireActual(
+        '../../../../../libs/core/lib/profile/profile-context/profile.context',
+    )
+    const routerContextModule = jest.requireActual(
+        '../../../../../libs/core/lib/router/router-context/router.context',
+    )
+
+    return {
+        authUrlLogin: (returnUrl?: string) => mockAuthUrlLogin(returnUrl),
+        profileContext: profileContextModule.default,
+        routerContext: routerContextModule.routerContext,
+    }
+}, { virtual: true })
+
+jest.mock('~/libs/ui', () => ({
+    Button: (props: { label: string }) => (
+        <button type='button'>{props.label}</button>
+    ),
+    LoadingSpinner: () => <div>loading</div>,
+    TcLogoSvg: () => <svg />,
+}), { virtual: true })
+
+jest.mock('../../../../../libs/core/lib/auth', () => ({
+    authUrlLogin: () => 'https://accounts.topcoder-dev.com?retUrl=http%3A%2F%2Flocalhost%2F',
+}))
+
+jest.mock('../../../../../libs/core/lib/profile', () => {
+    const profileContextModule = jest.requireActual(
+        '../../../../../libs/core/lib/profile/profile-context/profile.context',
+    )
+
+    return {
+        profileContext: profileContextModule.default,
+    }
+})
+
+jest.mock('../../../../../libs/core/lib/router/restricted.route', () => {
+    const React = jest.requireActual('react')
+    const profileContextModule = jest.requireActual(
+        '../../../../../libs/core/lib/profile/profile-context/profile.context',
+    )
+    const MockRestrictedRoute = (props: { children: JSX.Element, loginUrl: string }): JSX.Element => {
+        const profileContextData = React.useContext(profileContextModule.default)
+        if (profileContextData.profile) {
+            return props.children
+        }
+
+        return <div data-testid='restricted-route'>{props.loginUrl}</div>
+    }
+
+    return {
+        __esModule: true,
+        default: MockRestrictedRoute,
+    }
+})
+
+jest.mock('../../lib/components', () => ({
+    AccessDenied: (props: { cause: string }) => (
+        <div data-testid='access-denied'>{props.cause}</div>
+    ),
+    AccessDeniedCause: {
+        NOT_AUTHENTICATED: 'NOT_AUTHENTICATED',
+        NOT_AUTHORIZED: 'NOT_AUTHORIZED',
+    },
+    CommunityLayout: (props: { children?: JSX.Element | JSX.Element[] }) => (
+        <div data-testid='community-layout'>{props.children}</div>
+    ),
+}))
+
+jest.mock('../../lib/hooks', () => ({
+    useCommunityMeta: jest.fn(),
+    useUserGroups: jest.fn(),
+}))
+
+jest.mock('../challenge-detail', () => ({
+    ChallengeDetail: () => <div>challenge-detail-route</div>,
+}))
+
+jest.mock('../challenge-listing', () => ({
+    ChallengeListing: () => <div>challenge-listing-route</div>,
+}))
+
+jest.mock('../submission-management/SubmissionManagementPage', () => ({
+    __esModule: true,
+    default: () => <div>submission-management-route</div>,
+}))
+
+jest.mock('../submission/SubmissionPage', () => ({
+    __esModule: true,
+    default: () => <div>submission-route</div>,
+}))
+
+jest.mock('./CommunityContentPage', () => ({
+    CommunityContentPage: () => <div>community-content-route</div>,
+}))
+
+jest.mock('./CommunityLeaderboardPage', () => ({
+    CommunityLeaderboardPage: () => <div>community-leaderboard-route</div>,
+}))
+
+interface RenderCommunityRouteOptions {
+    authorizedGroupIds?: string[]
+    communityMeta?: any
+    groupIds?: string[]
+    path: string
+    profile?: any
+    route: any
+}
+
+interface RouteRendererProps {
+    route: any
+}
+
+const baseCommunityPath = `/${communityLoaderRouteId}/demo`
+const dynamicCommunityLoaderRoute = getRouteById(communityLoaderRouteId)
+const mockedUseCommunityMeta: jest.Mock = useCommunityMeta as unknown as jest.Mock
+const mockedUseUserGroups: jest.Mock = useUserGroups as unknown as jest.Mock
+const wiproCommunityLoaderRoute = getRouteByPath(`${communityLoaderRouteId}/wipro`)
+
+function buildCommunityMeta(authorizedGroupIds: string[], communityGroupIds: string[] = []): any {
+    return {
+        authorizedGroupIds,
+        challengeFilter: {},
+        communityId: 'demo',
+        communityName: 'Demo Community',
+        description: '',
+        groupIds: communityGroupIds,
+        hidden: false,
+        logos: [],
+        menuItems: [],
+        metadata: {},
+        subdomains: [],
+        terms: [],
+    }
+}
+
+function getChildRoute(route: any, path: string): any {
+    const childRoute = route.children
+        ?.find((candidate: any) => candidate.route === path)
+
+    if (!childRoute) {
+        throw new Error(`Expected child route '${path}' to exist.`)
+    }
+
+    return childRoute
+}
+
+function getProfileContextData(profile?: any): any {
+    return {
+        changePassword: async () => Promise.resolve(),
+        initialized: true,
+        isLoggedIn: !!profile,
+        profile,
+        updateProfile: async () => Promise.resolve(),
+        updateProfileContext: () => undefined,
+    }
+}
+
+function getRouteById(routeId: string): any {
+    const route = communityLoaderRoutes
+        .find((candidate: any) => candidate.id === routeId)
+
+    if (!route) {
+        throw new Error(`Expected route '${routeId}' to exist.`)
+    }
+
+    return route
+}
+
+function getRouteByPath(path: string): any {
+    const route = communityLoaderRoutes
+        .find((candidate: any) => candidate.route === path)
+
+    if (!route) {
+        throw new Error(`Expected route path '${path}' to exist.`)
+    }
+
+    return route
+}
+
+const RouteRenderer = (props: RouteRendererProps): JSX.Element => {
+    const routerContextData: any = useContext(routerContext)
+
+    return (
+        <Routes>
+            {routerContextData.getRouteElement(props.route)}
+        </Routes>
+    )
+}
+
+function renderCommunityRoute(options: RenderCommunityRouteOptions): void {
+    const routeMeta = 'communityMeta' in options
+        ? options.communityMeta
+        : buildCommunityMeta(
+            options.authorizedGroupIds ?? [],
+            options.groupIds ?? [],
+        )
+
+    mockedUseCommunityMeta.mockReturnValue({
+        communityMeta: routeMeta,
+        isLoading: false,
+    })
+    mockedUseUserGroups.mockReturnValue({
+        groupIds: options.groupIds ?? [],
+        isLoading: false,
+    })
+
+    render(
+        <MemoryRouter initialEntries={[options.path]}>
+            <profileContext.Provider value={getProfileContextData(options.profile)}>
+                <RouterProvider
+                    allRoutes={[options.route]}
+                    rootCustomer='/'
+                    rootLoggedOut='/'
+                    rootMember='/'
+                >
+                    <RouteRenderer route={options.route} />
+                </RouterProvider>
+            </profileContext.Provider>
+        </MemoryRouter>,
+    )
+}
+
+describe('CommunityLoader auth model', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('keeps challenge routes public while protecting /home', () => {
+        const challengeDetailRoute = getChildRoute(dynamicCommunityLoaderRoute, challengeDetailRouteId)
+        const challengeListingRoute = getChildRoute(dynamicCommunityLoaderRoute, challengeListingRouteId)
+        const homeRoute = getChildRoute(dynamicCommunityLoaderRoute, 'home')
+
+        expect(homeRoute.authRequired)
+            .toBe(true)
+        expect(challengeDetailRoute.authRequired)
+            .toBe(false)
+        expect(challengeListingRoute.authRequired)
+            .toBe(false)
+    })
+
+    it('renders anonymous users on the public challenge listing route', async () => {
+        renderCommunityRoute({
+            path: `${baseCommunityPath}/${challengeListingRouteId}`,
+            route: dynamicCommunityLoaderRoute,
+        })
+
+        expect(await screen.findByText('challenge-listing-route'))
+            .toBeTruthy()
+        expect(screen.queryByTestId('access-denied'))
+            .toBeNull()
+        expect(screen.queryByTestId('community-layout'))
+            .toBeTruthy()
+        expect(screen.queryByTestId('restricted-route'))
+            .toBeNull()
+    })
+
+    it('renders anonymous users on the public challenge detail route', async () => {
+        renderCommunityRoute({
+            path: `${baseCommunityPath}/challenges/challenge-1`,
+            route: dynamicCommunityLoaderRoute,
+        })
+
+        expect(await screen.findByText('challenge-detail-route'))
+            .toBeTruthy()
+        expect(screen.queryByTestId('access-denied'))
+            .toBeNull()
+        expect(screen.queryByTestId('restricted-route'))
+            .toBeNull()
+    })
+
+    it('routes anonymous /home requests through login redirect handling', async () => {
+        renderCommunityRoute({
+            path: `${baseCommunityPath}/home`,
+            route: dynamicCommunityLoaderRoute,
+        })
+
+        const restrictedRoute = await screen.findByTestId('restricted-route')
+        expect(restrictedRoute.textContent)
+            .toContain('retUrl=')
+        expect(screen.queryByText('community-content-route'))
+            .toBeNull()
+    })
+
+    it.each([
+        `${baseCommunityPath}/home`,
+        `${baseCommunityPath}/${challengeListingRouteId}`,
+    ])(
+        'shows NOT_AUTHORIZED for authenticated users outside authorized groups on %s',
+        async (path: string) => {
+            renderCommunityRoute({
+                authorizedGroupIds: ['authorized-group'],
+                groupIds: ['different-group'],
+                path,
+                profile: {
+                    isCustomer: false,
+                    roles: [],
+                    userId: 123,
+                },
+                route: dynamicCommunityLoaderRoute,
+            })
+
+            expect((await screen.findByTestId('access-denied')).textContent)
+                .toBe('NOT_AUTHORIZED')
+            expect(screen.queryByTestId('restricted-route'))
+                .toBeNull()
+        },
+    )
+
+    it('allows authenticated members to render protected child routes', async () => {
+        renderCommunityRoute({
+            authorizedGroupIds: ['authorized-group'],
+            groupIds: ['authorized-group'],
+            path: `${baseCommunityPath}/home`,
+            profile: {
+                isCustomer: false,
+                roles: [],
+                userId: 321,
+            },
+            route: dynamicCommunityLoaderRoute,
+        })
+
+        expect(await screen.findByText('community-content-route'))
+            .toBeTruthy()
+        expect(screen.queryByTestId('access-denied'))
+            .toBeNull()
+        expect(screen.queryByTestId('restricted-route'))
+            .toBeNull()
+    })
+
+    it('shows NOT_AUTHORIZED when community metadata is unavailable', async () => {
+        renderCommunityRoute({
+            communityMeta: undefined,
+            path: `${baseCommunityPath}/${challengeListingRouteId}`,
+            profile: {
+                isCustomer: false,
+                roles: [],
+                userId: 99,
+            },
+            route: dynamicCommunityLoaderRoute,
+        })
+
+        expect((await screen.findByTestId('access-denied')).textContent)
+            .toBe('NOT_AUTHORIZED')
+        expect(screen.queryByText('challenge-listing-route'))
+            .toBeNull()
+    })
+
+    it('redirects anonymous wipro traffic through the login URL', async () => {
+        renderCommunityRoute({
+            path: `/${communityLoaderRouteId}/wipro/${challengeListingRouteId}`,
+            route: wiproCommunityLoaderRoute,
+        })
+
+        await waitFor(() => {
+            expect(mockAuthUrlLogin)
+                .toHaveBeenCalledWith(window.location.href)
+        })
+        expect(screen.queryByText('loading'))
+            .toBeTruthy()
+    })
+})
diff --git a/src/apps/community/src/pages/communities/CommunityLoader/CommunityLoader.tsx b/src/apps/community/src/pages/communities/CommunityLoader/CommunityLoader.tsx
new file mode 100644
index 000000000..02f09f5ce
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityLoader/CommunityLoader.tsx
@@ -0,0 +1,133 @@
+import { FC, useContext, useEffect, useMemo } from 'react'
+import { Outlet, Routes, useParams } from 'react-router-dom'
+
+import {
+    authUrlLogin,
+    profileContext,
+    ProfileContextData,
+    routerContext,
+    RouterContextData,
+} from '~/libs/core'
+import { LoadingSpinner } from '~/libs/ui'
+
+import { communityLoaderRouteId } from '../../../config/routes.config'
+import { TOPGEAR_REDIRECT_URL } from '../../../config/index.config'
+import {
+    useCommunityMeta,
+    useUserGroups,
+} from '../../../lib/hooks'
+import {
+    AccessDenied,
+    AccessDeniedCause,
+    CommunityLayout,
+} from '../../../lib/components'
+import { CommunityContextProvider } from '../CommunityContext'
+
+interface CommunityLoaderProps {
+    communityId?: string
+    routeId?: string
+}
+
+/**
+ * Checks whether two string lists have any shared value.
+ *
+ * @param left First list.
+ * @param right Second list.
+ * @returns True when at least one item exists in both lists.
+ */
+function hasIntersection(left: string[], right: string[]): boolean {
+    if (!left.length || !right.length) {
+        return false
+    }
+
+    const values = new Set(left)
+    return right.some(value => values.has(value))
+}
+
+/**
+ * Community route loader that resolves metadata, applies access checks and renders children.
+ * The community layout base URL is derived from the resolved `communityId` and effective route id.
+ * Anonymous users can continue to child routes, where route-level `authRequired` controls public/private access.
+ * Authenticated users who are not in `authorizedGroupIds` are shown a not-authorized screen.
+ * The `wipro` community always redirects to TopGear (or to login if unauthenticated).
+ *
+ * @param props Optional fixed community and route ids for static route wiring.
+ * @returns Community shell with nested routes or access denied state.
+ */
+const CommunityLoader: FC<CommunityLoaderProps> = (props: CommunityLoaderProps) => {
+    const { communityId: routeCommunityId }: { communityId?: string } = useParams<{ communityId: string }>()
+    const communityId = props.communityId ?? routeCommunityId
+    const routeParentId = props.routeId ?? communityLoaderRouteId
+    const baseUrl = `/${routeParentId}/${communityId}`
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => getChildRoutes(routeParentId),
+        [routeParentId, getChildRoutes],
+    )
+    const {
+        communityMeta,
+        isLoading: isLoadingCommunityMeta,
+    }: ReturnType<typeof useCommunityMeta> = useCommunityMeta(communityId)
+    const {
+        groupIds,
+        isLoading: isLoadingGroups,
+    }: ReturnType<typeof useUserGroups> = useUserGroups(profile?.userId)
+
+    useEffect(() => {
+        if (communityId !== 'wipro') {
+            return
+        }
+
+        if (profile) {
+            window.location.href = TOPGEAR_REDIRECT_URL
+            return
+        }
+
+        window.location.href = authUrlLogin(window.location.href)
+    }, [communityId, profile])
+
+    if (!communityId || communityId === 'wipro') {
+        return <LoadingSpinner />
+    }
+
+    if (isLoadingCommunityMeta || isLoadingGroups) {
+        return <LoadingSpinner />
+    }
+
+    if (!communityMeta) {
+        return <AccessDenied cause={AccessDeniedCause.NOT_AUTHORIZED} />
+    }
+
+    const isMember = hasIntersection(
+        communityMeta.groupIds ?? [],
+        groupIds,
+    )
+    const authorizedGroupIds = communityMeta.authorizedGroupIds ?? []
+    const isAuthorized = hasIntersection(authorizedGroupIds, groupIds)
+
+    if (authorizedGroupIds.length > 0 && profile && !isAuthorized) {
+        return <AccessDenied cause={AccessDeniedCause.NOT_AUTHORIZED} />
+    }
+
+    return (
+        <CommunityContextProvider
+            value={{
+                isMember,
+                meta: communityMeta,
+            }}
+        >
+            <CommunityLayout
+                baseUrl={baseUrl}
+                meta={communityMeta}
+            >
+                <Outlet />
+                <Routes>
+                    {childRoutes}
+                </Routes>
+            </CommunityLayout>
+        </CommunityContextProvider>
+    )
+}
+
+export default CommunityLoader
diff --git a/src/apps/community/src/pages/communities/CommunityLoader/index.ts b/src/apps/community/src/pages/communities/CommunityLoader/index.ts
new file mode 100644
index 000000000..a287322cf
--- /dev/null
+++ b/src/apps/community/src/pages/communities/CommunityLoader/index.ts
@@ -0,0 +1 @@
+export { default as CommunityLoader } from './CommunityLoader'
diff --git a/src/apps/community/src/pages/communities/community.routes.spec.tsx b/src/apps/community/src/pages/communities/community.routes.spec.tsx
new file mode 100644
index 000000000..a95c14389
--- /dev/null
+++ b/src/apps/community/src/pages/communities/community.routes.spec.tsx
@@ -0,0 +1,331 @@
+import { useContext } from 'react'
+import { createRoot } from 'react-dom/client'
+import { act } from 'react-dom/test-utils'
+import { MemoryRouter, Routes } from 'react-router-dom'
+
+import { routerContext } from '../../../../../libs/core/lib/router/router-context/router.context'
+import { RouterProvider } from '../../../../../libs/core/lib/router/router-context/router.context-provider'
+import {
+    challengeDetailRouteId,
+    challengeListingRouteId,
+    communityLoaderRouteId,
+} from '../../config/routes.config'
+import { useCommunityMeta, useUserGroups } from '../../lib/hooks'
+import profileContext from '../../../../../libs/core/lib/profile/profile-context/profile.context'
+
+import { communityLoaderRoutes } from './community.routes'
+
+jest.mock('~/config', () => ({
+    AppSubdomain: {
+        community: 'community',
+    },
+    EnvironmentConfig: {
+        AUTH: {
+            ACCOUNTS_APP_CONNECTOR: 'https://accounts.topcoder-dev.com',
+        },
+        SUBDOMAIN: 'community',
+    },
+    ToolTitle: {
+        tcAcademy: 'tcAcademy',
+    },
+}), { virtual: true })
+
+jest.mock('~/libs/core', () => {
+    const profileContextModule = jest.requireActual(
+        '../../../../../libs/core/lib/profile/profile-context/profile.context',
+    )
+    const routerContextModule = jest.requireActual(
+        '../../../../../libs/core/lib/router/router-context/router.context',
+    )
+
+    return {
+        authUrlLogin: () => 'https://accounts.topcoder-dev.com?retUrl=http%3A%2F%2Flocalhost%2F',
+        profileContext: profileContextModule.default,
+        routerContext: routerContextModule.routerContext,
+    }
+}, { virtual: true })
+
+jest.mock('~/libs/ui', () => ({
+    Button: (props: { label: string }) => (
+        <button type='button'>{props.label}</button>
+    ),
+    LoadingSpinner: () => <div>loading</div>,
+    TcLogoSvg: () => <svg />,
+}), { virtual: true })
+
+jest.mock('../../../../../libs/core/lib/auth', () => ({
+    authUrlLogin: () => 'https://accounts.topcoder-dev.com?retUrl=http%3A%2F%2Flocalhost%2F',
+}))
+
+jest.mock('../../../../../libs/core/lib/profile', () => {
+    const profileContextModule = jest.requireActual(
+        '../../../../../libs/core/lib/profile/profile-context/profile.context',
+    )
+
+    return {
+        profileContext: profileContextModule.default,
+    }
+})
+
+jest.mock('../../../../../libs/core/lib/router/restricted.route', () => ({
+    __esModule: true,
+    default: (props: { loginUrl: string }) => (
+        <div data-testid='restricted-route'>{props.loginUrl}</div>
+    ),
+}))
+
+jest.mock('../../lib/components', () => ({
+    AccessDenied: (props: { cause: string }) => (
+        <div data-testid='access-denied'>{props.cause}</div>
+    ),
+    AccessDeniedCause: {
+        NOT_AUTHENTICATED: 'NOT_AUTHENTICATED',
+        NOT_AUTHORIZED: 'NOT_AUTHORIZED',
+    },
+    CommunityLayout: (props: { children?: JSX.Element | JSX.Element[] }) => (
+        <div data-testid='community-layout'>{props.children}</div>
+    ),
+}))
+
+jest.mock('../../lib/hooks', () => ({
+    useCommunityMeta: jest.fn(),
+    useUserGroups: jest.fn(),
+}))
+
+jest.mock('../challenge-detail', () => ({
+    ChallengeDetail: () => <div>challenge-detail-route</div>,
+}))
+
+jest.mock('../challenge-listing', () => ({
+    ChallengeListing: () => <div>challenge-listing-route</div>,
+}))
+
+jest.mock('../submission-management/SubmissionManagementPage', () => ({
+    __esModule: true,
+    default: () => <div>submission-management-route</div>,
+}))
+
+jest.mock('../submission/SubmissionPage', () => ({
+    __esModule: true,
+    default: () => <div>submission-route</div>,
+}))
+
+jest.mock('./CommunityContentPage', () => ({
+    CommunityContentPage: () => <div>community-content-route</div>,
+}))
+
+jest.mock('./CommunityLeaderboardPage', () => ({
+    CommunityLeaderboardPage: () => <div>community-leaderboard-route</div>,
+}))
+
+interface RenderCommunityRouteOptions {
+    authorizedGroupIds?: string[]
+    groupIds: string[]
+    path: string
+    profile?: any
+}
+
+interface RouteRendererProps {
+    route: any
+}
+
+const baseCommunityPath = `/${communityLoaderRouteId}/demo`
+const communityLoaderRoute = getCommunityLoaderRoute()
+const mockedUseCommunityMeta: jest.Mock = useCommunityMeta as unknown as jest.Mock
+const mockedUseUserGroups: jest.Mock = useUserGroups as unknown as jest.Mock
+
+let container: HTMLDivElement
+let root: ReturnType<typeof createRoot>
+
+function buildCommunityMeta(authorizedGroupIds: string[]): any {
+    return {
+        authorizedGroupIds,
+        challengeFilter: {},
+        communityId: 'demo',
+        communityName: 'Demo Community',
+        description: '',
+        groupIds: [],
+        hidden: false,
+        logos: [],
+        menuItems: [],
+        metadata: {},
+        subdomains: [],
+        terms: [],
+    }
+}
+
+function flushEffects(): Promise<void> {
+    return act(async () => {
+        await Promise.resolve()
+    })
+}
+
+function getChildRoute(path: string): any {
+    const route = communityLoaderRoute.children
+        ?.find((candidate: any) => candidate.route === path)
+
+    if (!route) {
+        throw new Error(`Expected child route '${path}' to exist.`)
+    }
+
+    return route
+}
+
+function getCommunityLoaderRoute(): any {
+    const route = communityLoaderRoutes
+        .find((candidate: any) => candidate.id === communityLoaderRouteId)
+
+    if (!route) {
+        throw new Error('Expected a dynamic community loader route configuration.')
+    }
+
+    return route
+}
+
+function getElementByTestId(testId: string): HTMLElement | null {
+    return container.querySelector(`[data-testid='${testId}']`)
+}
+
+function getProfileContextData(profile?: any): any {
+    return {
+        changePassword: async () => Promise.resolve(),
+        initialized: true,
+        isLoggedIn: !!profile,
+        profile,
+        updateProfile: async () => Promise.resolve(),
+        updateProfileContext: () => undefined,
+    }
+}
+
+const RouteRenderer = (props: RouteRendererProps): JSX.Element => {
+    const routerContextData: any = useContext(routerContext)
+
+    return (
+        <Routes>
+            {routerContextData.getRouteElement(props.route)}
+        </Routes>
+    )
+}
+
+function renderCommunityRoute(options: RenderCommunityRouteOptions): void {
+    mockedUseCommunityMeta.mockReturnValue({
+        communityMeta: buildCommunityMeta(options.authorizedGroupIds ?? []),
+        isLoading: false,
+    })
+    mockedUseUserGroups.mockReturnValue({
+        groupIds: options.groupIds,
+        isLoading: false,
+    })
+
+    act(() => {
+        root.render(
+            <MemoryRouter initialEntries={[options.path]}>
+                <profileContext.Provider value={getProfileContextData(options.profile)}>
+                    <RouterProvider
+                        allRoutes={[communityLoaderRoute]}
+                        rootCustomer='/'
+                        rootLoggedOut='/'
+                        rootMember='/'
+                    >
+                        <RouteRenderer route={communityLoaderRoute} />
+                    </RouterProvider>
+                </profileContext.Provider>
+            </MemoryRouter>,
+        )
+    })
+}
+
+describe('communityLoaderRoutes auth split', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+        container = document.createElement('div')
+        document.body.append(container)
+        root = createRoot(container)
+    })
+
+    afterEach(() => {
+        act(() => {
+            root.unmount()
+        })
+        container.remove()
+    })
+
+    it('marks protected community content routes as auth required and keeps challenge routes public', () => {
+        const defaultRoute = getChildRoute('')
+        const homeRoute = getChildRoute('home')
+        const learnRoute = getChildRoute('learn')
+        const challengeDetailRoute = getChildRoute(challengeDetailRouteId)
+        const challengeListingRoute = getChildRoute(challengeListingRouteId)
+
+        expect(defaultRoute.authRequired)
+            .toBe(true)
+        expect(homeRoute.authRequired)
+            .toBe(true)
+        expect(learnRoute.authRequired)
+            .toBe(true)
+        expect(challengeDetailRoute.authRequired)
+            .toBe(false)
+        expect(challengeListingRoute.authRequired)
+            .toBe(false)
+    })
+
+    it('renders challenge listing for anonymous users', async () => {
+        renderCommunityRoute({
+            groupIds: [],
+            path: `${baseCommunityPath}/${challengeListingRouteId}`,
+        })
+        await flushEffects()
+
+        expect(container.textContent?.includes('challenge-listing-route'))
+            .toBe(true)
+        expect(getElementByTestId('restricted-route'))
+            .toBeNull()
+    })
+
+    it('renders challenge detail for anonymous users', async () => {
+        renderCommunityRoute({
+            groupIds: [],
+            path: `${baseCommunityPath}/challenges/challenge-1`,
+        })
+        await flushEffects()
+
+        expect(container.textContent?.includes('challenge-detail-route'))
+            .toBe(true)
+        expect(getElementByTestId('restricted-route'))
+            .toBeNull()
+    })
+
+    it('routes anonymous users on /home through the login redirect path', async () => {
+        renderCommunityRoute({
+            groupIds: [],
+            path: `${baseCommunityPath}/home`,
+        })
+        await flushEffects()
+
+        expect(getElementByTestId('restricted-route')?.textContent)
+            .toContain('retUrl=')
+        expect(container.textContent?.includes('community-content-route'))
+            .toBe(false)
+    })
+
+    it('shows NOT_AUTHORIZED when an authenticated user is outside authorizedGroupIds', async () => {
+        const profile = {
+            isCustomer: false,
+            roles: [],
+            userId: 123,
+        }
+
+        renderCommunityRoute({
+            authorizedGroupIds: ['authorized-group'],
+            groupIds: ['different-group'],
+            path: `${baseCommunityPath}/${challengeListingRouteId}`,
+            profile,
+        })
+        await flushEffects()
+
+        expect(getElementByTestId('access-denied')?.textContent)
+            .toBe('NOT_AUTHORIZED')
+        expect(container.textContent?.includes('challenge-listing-route'))
+            .toBe(false)
+    })
+})
diff --git a/src/apps/community/src/pages/communities/community.routes.tsx b/src/apps/community/src/pages/communities/community.routes.tsx
new file mode 100644
index 000000000..16736f4c3
--- /dev/null
+++ b/src/apps/community/src/pages/communities/community.routes.tsx
@@ -0,0 +1,191 @@
+import { FC, useEffect } from 'react'
+
+import { PlatformRoute } from '~/libs/core'
+import { LoadingSpinner } from '~/libs/ui'
+
+import {
+    type ExplicitCommunityId,
+    explicitCommunityIds,
+} from '../../config/community-id.config'
+import {
+    challengeDetailRouteId,
+    challengeListingRouteId,
+    communityLoaderRouteId,
+    submissionManagementRouteId,
+    submissionRouteId,
+} from '../../config/routes.config'
+import { ChallengeDetail } from '../challenge-detail'
+import { ChallengeListing } from '../challenge-listing'
+import SubmissionManagementPage from '../submission-management/SubmissionManagementPage'
+import SubmissionPage from '../submission/SubmissionPage'
+
+import { CommunityContentPage } from './CommunityContentPage'
+import { CommunityLeaderboardPage } from './CommunityLeaderboardPage'
+import { CommunityLoader } from './CommunityLoader'
+
+interface ExternalRedirectProps {
+    to: string
+}
+
+/**
+ * Performs a hard browser redirect to an external URL.
+ *
+ * @param props Destination URL.
+ * @returns Loading spinner shown during redirect.
+ */
+const ExternalRedirect: FC<ExternalRedirectProps> = (props: ExternalRedirectProps) => {
+    useEffect(() => {
+        window.location.replace(props.to)
+    }, [props.to])
+
+    return <LoadingSpinner />
+}
+
+const TCO_ARCHIVE_URL = 'https://archive.topcoder.com/TCO/index.html'
+const TCO_COMMUNITY_IDS = Array.from(
+    { length: 23 },
+    (_, index) => `tco${String(index + 1)
+        .padStart(2, '0')}`,
+)
+const GENERIC_CONTENT_ROUTES: ReadonlyArray<string> = [
+    'learn',
+    'get-started',
+    'about',
+    'assets',
+    'bsic-incubator',
+    'ibm-cloud',
+    'resources',
+    'catalog',
+    'faq',
+]
+const STATIC_COMMUNITY_CONTENT_ROUTES: Readonly<Record<ExplicitCommunityId, ReadonlyArray<string>>> = {
+    blockchain: ['learn', 'bsic-incubator'],
+    cognitive: ['get-started', 'ibm-cloud', 'resources'],
+    community2: ['learn'],
+    cs: ['learn', 'catalog', 'faq'],
+    demoexpert: ['learn'],
+    iot: ['get-started', 'about', 'assets'],
+    mobile: [],
+    qa: ['learn'],
+    srmx: ['learn'],
+    taskforce: [],
+    tcproddev: ['learn'],
+    veterans: ['learn'],
+    wipro: [],
+}
+
+const tcoRedirectRoutes: ReadonlyArray<PlatformRoute> = TCO_COMMUNITY_IDS.map(communityId => ({
+    element: (
+        <ExternalRedirect to={TCO_ARCHIVE_URL} />
+    ),
+    route: `${communityLoaderRouteId}/${communityId}`,
+}))
+
+/**
+ * Generates a unique route id for static community loader routes.
+ *
+ * @param communityId Community identifier.
+ * @returns Route id used for looking up child routes.
+ */
+function getStaticCommunityRouteId(communityId: string): string {
+    return `${communityLoaderRouteId}-${communityId}`
+}
+
+/**
+ * Builds child routes for a community landing route.
+ *
+ * @param contentRoutes Additional content-page slugs for the community.
+ * @returns Child route list.
+ */
+function createCommunityChildRoutes(contentRoutes: ReadonlyArray<string>): Array<PlatformRoute> {
+    const normalizedContentRoutes = Array.from(
+        new Set(
+            contentRoutes
+                .map(route => route.trim())
+                .filter(Boolean)
+                .filter(route => route !== 'home' && route !== 'leaderboard'),
+        ),
+    )
+
+    return [
+        {
+            authRequired: true,
+            element: <CommunityContentPage />,
+            route: '',
+        },
+        {
+            authRequired: true,
+            element: <CommunityContentPage />,
+            route: 'home',
+        },
+        {
+            authRequired: true,
+            element: <CommunityLeaderboardPage />,
+            route: 'leaderboard',
+        },
+        {
+            authRequired: false,
+            element: <ChallengeListing />,
+            route: challengeListingRouteId,
+        },
+        {
+            authRequired: false,
+            element: <ChallengeDetail />,
+            route: challengeDetailRouteId,
+        },
+        {
+            authRequired: true,
+            element: <SubmissionPage />,
+            route: submissionRouteId,
+        },
+        {
+            authRequired: true,
+            element: <SubmissionManagementPage />,
+            route: submissionManagementRouteId,
+        },
+        ...normalizedContentRoutes.map(route => ({
+            authRequired: true,
+            element: <CommunityContentPage />,
+            route,
+        })),
+    ]
+}
+
+/**
+ * Creates a static community loader route at `__community__/{communityId}`.
+ *
+ * @param communityId Community identifier.
+ * @returns Static route definition with shared child routes.
+ */
+function createStaticCommunityRoute(communityId: ExplicitCommunityId): PlatformRoute {
+    const routeId = getStaticCommunityRouteId(communityId)
+
+    return {
+        children: createCommunityChildRoutes(STATIC_COMMUNITY_CONTENT_ROUTES[communityId]),
+        element: (
+            <CommunityLoader
+                communityId={communityId}
+                routeId={routeId}
+            />
+        ),
+        id: routeId,
+        route: `${communityLoaderRouteId}/${communityId}`,
+    }
+}
+
+const staticCommunityRoutes: Array<PlatformRoute> = explicitCommunityIds
+    .map(communityId => createStaticCommunityRoute(communityId))
+
+/**
+ * Community route tree mounted at `__community__/:communityId`.
+ */
+export const communityLoaderRoutes: ReadonlyArray<PlatformRoute> = [
+    ...tcoRedirectRoutes,
+    ...staticCommunityRoutes,
+    {
+        children: createCommunityChildRoutes(GENERIC_CONTENT_ROUTES),
+        element: <CommunityLoader routeId={communityLoaderRouteId} />,
+        id: communityLoaderRouteId,
+        route: `${communityLoaderRouteId}/:communityId`,
+    },
+]
diff --git a/src/apps/community/src/pages/communities/index.ts b/src/apps/community/src/pages/communities/index.ts
new file mode 100644
index 000000000..b30604a4c
--- /dev/null
+++ b/src/apps/community/src/pages/communities/index.ts
@@ -0,0 +1,4 @@
+export * from './CommunityContext'
+export * from './CommunityLeaderboardPage'
+export * from './CommunityLoader'
+export * from './community.routes'
diff --git a/src/apps/community/src/pages/forums/ForumsPage.module.scss b/src/apps/community/src/pages/forums/ForumsPage.module.scss
new file mode 100644
index 000000000..e32dbdcca
--- /dev/null
+++ b/src/apps/community/src/pages/forums/ForumsPage.module.scss
@@ -0,0 +1,1287 @@
+@import '@libs/ui/styles/includes';
+
+.page {
+    @include font-roboto;
+
+    background: #f9f9f9;
+    color: $black-100;
+    min-height: 100vh;
+
+    a,
+    button,
+    h1,
+    h2,
+    h3,
+    input,
+    label,
+    p,
+    select,
+    span,
+    textarea {
+        font-family: $font-roboto;
+        letter-spacing: 0;
+        text-transform: none;
+    }
+}
+
+.topBar {
+    align-items: center;
+    background: $tc-white;
+    box-shadow: 0 4px 6px rgba($tc-black, 0.1);
+    display: flex;
+    height: 72px;
+    justify-content: space-between;
+    padding: 6px 32px;
+}
+
+.logoWrap {
+    align-items: center;
+    display: flex;
+    gap: 6px;
+}
+
+.logoMark {
+    color: #2a2a2a;
+    fill: currentcolor;
+    height: 24px;
+    width: 67px;
+}
+
+.logoType {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    margin-top: 2px;
+}
+
+.logoText {
+    color: $black-80;
+    font-size: 21px;
+    font-weight: $font-weight-normal;
+    line-height: 21px;
+}
+
+.wipro {
+    color: $black-80;
+    font-size: 8px;
+    line-height: 10px;
+}
+
+.desktopNav {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    gap: 32px;
+    margin-left: 32px;
+
+    a {
+        color: $link-blue-dark;
+        font-size: 14px;
+        font-weight: $font-weight-bold;
+        text-decoration: none;
+    }
+}
+
+.navDivider {
+    background: $black-20;
+    display: block;
+    height: 40px;
+    width: 1px;
+}
+
+.topActions {
+    align-items: center;
+    display: flex;
+    gap: 24px;
+}
+
+.headerIcon,
+.mobileMenuIcon {
+    color: $black-80;
+    height: 24px;
+    width: 24px;
+}
+
+.mobileMenuIcon {
+    display: none;
+}
+
+.headerAvatar {
+    align-items: center;
+    background: $blue-25;
+    border-radius: 50%;
+    color: $blue-160;
+    display: inline-flex;
+    font-size: 11px;
+    font-weight: $font-weight-bold;
+    height: 32px;
+    justify-content: center;
+    width: 32px;
+}
+
+.main {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    margin: 0 auto;
+    max-width: 1440px;
+    padding: 40px 32px 112px;
+}
+
+.challengeHeader {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.challengeTitleRow {
+    align-items: flex-start;
+    display: flex;
+    gap: 16px;
+
+    h1 {
+        font-size: 34px;
+        font-weight: $font-weight-medium;
+        line-height: 40px;
+        margin: 0;
+    }
+}
+
+.backCircle {
+    align-items: center;
+    border: 1.5px solid $turq-160;
+    border-radius: 50%;
+    color: $turq-160;
+    display: inline-flex;
+    height: 24px;
+    justify-content: center;
+    margin-top: 8px;
+    transform: rotate(90deg);
+    width: 24px;
+
+    svg {
+        height: 16px;
+        width: 16px;
+    }
+}
+
+.tagRow {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.smallTag {
+    background: $black-10;
+    border-radius: 2px;
+    color: $black-100;
+    font-size: 11px;
+    font-weight: $font-weight-medium;
+    line-height: 10px;
+    padding: 3px 4px;
+}
+
+.keyInformation {
+    background: $tc-white;
+    border: 1px solid $black-20;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.keyTitle {
+    font-size: 18px;
+    font-weight: $font-weight-medium;
+    line-height: 22px;
+    padding: 24px 24px 0;
+    text-transform: uppercase;
+}
+
+.prizeRow {
+    align-items: center;
+    display: flex;
+    gap: 24px;
+    justify-content: space-between;
+    padding: 48px 24px 16px;
+}
+
+.prizes {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 48px;
+}
+
+.prize {
+    align-items: center;
+    display: inline-flex;
+    gap: 8px;
+
+    strong {
+        font-size: 24px;
+        font-weight: $font-weight-medium;
+        line-height: 32px;
+    }
+}
+
+.prizeBadge {
+    align-items: center;
+    border-radius: 20px;
+    display: inline-flex;
+    font-size: 16px;
+    font-weight: $font-weight-medium;
+    height: 40px;
+    justify-content: center;
+    min-width: 40px;
+    padding: 8px;
+}
+
+.gold {
+    background: $gold-1;
+    color: $black-100;
+}
+
+.silver {
+    background: $silver-1;
+    color: $black-100;
+}
+
+.bronze {
+    background: $bronze-1;
+    color: $black-100;
+}
+
+.turquoise {
+    background: $turq-15;
+    color: $black-100;
+}
+
+.challengeActions {
+    display: flex;
+    gap: 8px;
+}
+
+.primaryPill,
+.outlinePill,
+.deleteButton {
+    border-radius: 50px !important;
+    text-transform: uppercase !important;
+
+    svg {
+        height: 16px;
+        width: 16px;
+    }
+}
+
+.primaryPill {
+    background: $turq-160 !important;
+}
+
+.outlinePill {
+    color: $turq-160 !important;
+}
+
+.deleteButton {
+    background: #ef476f !important;
+}
+
+.bonus {
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0;
+    padding: 0 24px 48px;
+
+    span {
+        color: $blue-140;
+    }
+}
+
+.deadlineBar {
+    align-items: center;
+    border-top: 1px solid $black-20;
+    display: flex;
+    font-size: 16px;
+    gap: 16px;
+    line-height: 26px;
+    padding: 16px 24px;
+}
+
+.deadlineDivider {
+    background: $black-60;
+    height: 26px;
+    width: 2px;
+}
+
+.deadlineIcon {
+    height: 32px;
+    margin-left: auto;
+    width: 32px;
+}
+
+.challengeTabs {
+    align-items: stretch;
+    background: $tc-white;
+    display: flex;
+    min-height: 42px;
+
+    a {
+        align-items: center;
+        color: $black-80;
+        display: inline-flex;
+        font-size: 14px;
+        font-weight: $font-weight-medium;
+        gap: 4px;
+        line-height: 20px;
+        padding: 12px 16px 10px;
+        text-decoration: none;
+    }
+
+    span {
+        align-items: center;
+        background: $link-blue-dark;
+        border-radius: 50px;
+        color: $tc-white;
+        display: inline-flex;
+        font-size: 14px;
+        justify-content: center;
+        line-height: 16px;
+        min-width: 24px;
+        padding: 0 8px;
+    }
+}
+
+.activeTab {
+    border-bottom: 2px solid $link-blue-dark;
+    color: $link-blue-dark !important;
+}
+
+.forumGrid,
+.createGrid {
+    align-items: flex-start;
+    display: grid;
+    gap: 32px;
+    grid-template-columns: 326px 1fr;
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.sidebarCard {
+    background: $tc-white;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px;
+
+    h2,
+    h3,
+    p {
+        margin: 0;
+    }
+
+    h2 {
+        font-size: 26px;
+        font-weight: $font-weight-bold;
+        line-height: 30px;
+    }
+
+    h3 {
+        font-size: 16px;
+        font-weight: $font-weight-bold;
+        line-height: 22px;
+    }
+
+    p {
+        color: $black-80;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    a {
+        color: $link-blue-dark;
+        font-size: 14px;
+        font-weight: $font-weight-bold;
+        text-decoration: none;
+    }
+}
+
+.newTopicButton,
+.centerNewTopicButton {
+    align-items: center;
+    background: $turq-160;
+    border-radius: 24px;
+    color: $tc-white !important;
+    display: inline-flex;
+    font-size: 14px !important;
+    font-weight: $font-weight-bold;
+    gap: 4px;
+    justify-content: center;
+    line-height: 24px;
+    padding: 8px 24px 8px 20px;
+    text-decoration: none;
+    text-transform: uppercase !important;
+    width: fit-content;
+
+    svg {
+        height: 16px;
+        width: 16px;
+    }
+}
+
+.centerNewTopicButton {
+    align-self: center;
+}
+
+.searchField,
+.selectField {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    input,
+    select {
+        background: $tc-white;
+        border: 1px solid $black-40;
+        border-radius: 4px;
+        color: $black-100;
+        font-size: 14px;
+        line-height: 22px;
+        min-height: 40px;
+        padding: 8px 10px;
+        width: 100%;
+    }
+}
+
+.searchField {
+    position: relative;
+
+    svg {
+        color: $black-80;
+        height: 16px;
+        left: 10px;
+        position: absolute;
+        top: 12px;
+        width: 16px;
+    }
+
+    input {
+        padding-left: 32px;
+    }
+}
+
+.selectField {
+    span {
+        font-size: 12px;
+        font-weight: $font-weight-bold;
+        letter-spacing: 1px;
+        line-height: 16px;
+        text-transform: uppercase;
+    }
+}
+
+.radioGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    label {
+        align-items: center;
+        display: inline-flex;
+        font-size: 16px;
+        gap: 8px;
+        line-height: 24px;
+    }
+
+    input {
+        accent-color: $turq-160;
+        height: 20px;
+        width: 20px;
+    }
+}
+
+.topicList,
+.postsColumn,
+.createForm {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.topicCard,
+.postCard,
+.commentComposer,
+.createForm {
+    background: $tc-white;
+    border-radius: 8px;
+    padding: 28px 24px;
+}
+
+.topicCard {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    p {
+        color: $black-100;
+        font-size: 16px;
+        line-height: 22px;
+        margin: 0;
+        max-width: 800px;
+    }
+}
+
+.topicMain {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    a {
+        color: $black-100;
+        text-decoration: none;
+    }
+
+    h2 {
+        font-size: 24px;
+        font-weight: $font-weight-bold;
+        line-height: 30px;
+        margin: 0;
+    }
+}
+
+.topicMeta,
+.topicFooter,
+.topicAuthorGroup {
+    align-items: center;
+    color: $black-80;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 14px;
+    gap: 16px;
+    line-height: 20px;
+}
+
+.topicFooter {
+    justify-content: space-between;
+}
+
+.kindChip,
+.roleChip {
+    align-items: center;
+    border-radius: 2px;
+    display: inline-flex;
+    font-size: 11px;
+    font-weight: $font-weight-medium;
+    line-height: 10px;
+    padding: 3px 4px;
+}
+
+.announcement {
+    background: $green-140;
+    color: $tc-white;
+}
+
+.discussion {
+    background: $blue-15;
+    color: $blue-140;
+}
+
+.roleChip {
+    background: $tc-white;
+    border: 1px solid $black-60;
+    color: $black-80;
+}
+
+.cardRule,
+.listDivider {
+    background: $black-10;
+    border-radius: 1px;
+    height: 2px;
+    width: 100%;
+}
+
+.listDivider {
+    margin-top: 8px;
+}
+
+.authorLine {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.compactAuthor {
+    gap: 6px;
+}
+
+.avatar {
+    align-items: center;
+    border-radius: 50%;
+    color: $tc-white;
+    display: inline-flex;
+    font-size: 11px;
+    font-weight: $font-weight-bold;
+    height: 32px;
+    justify-content: center;
+    width: 32px;
+}
+
+.blue {
+    background: $handle-blue;
+}
+
+.green {
+    background: $handle-green;
+}
+
+.orange {
+    background: $legacy-100;
+}
+
+.red {
+    background: $red-100;
+}
+
+.handle {
+    color: $handle-yellow;
+    font-size: 14px;
+    font-weight: $font-weight-medium;
+    line-height: 22px;
+}
+
+.detailStack {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.breadcrumbBar {
+    align-items: center;
+    background: $tc-white;
+    display: flex;
+    gap: 8px;
+    min-height: 56px;
+    padding: 0 24px;
+    text-transform: uppercase;
+
+    a,
+    span {
+        color: $black-100;
+        font-size: 12px;
+        font-weight: $font-weight-bold;
+        letter-spacing: 1px;
+        line-height: 16px;
+        text-decoration: none;
+    }
+
+    svg {
+        color: $black-80;
+        height: 16px;
+        transform: rotate(-90deg);
+        width: 16px;
+    }
+}
+
+.postCard {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.postDate {
+    color: $black-80;
+    font-size: 14px;
+    line-height: 20px;
+    margin: -12px 0 0 44px;
+}
+
+.postBody {
+    color: $black-100;
+    font-size: 16px;
+    line-height: 22px;
+    max-width: 800px;
+
+    p,
+    pre {
+        margin: 0 0 16px;
+    }
+
+    pre {
+        background: $black-5;
+        border-radius: 4px;
+        overflow-x: auto;
+        padding: 12px;
+    }
+
+    a {
+        color: $link-blue-dark;
+    }
+}
+
+.postActions {
+    align-items: center;
+    color: $turq-160;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 14px;
+    font-weight: $font-weight-bold;
+    gap: 16px;
+    line-height: 20px;
+    text-transform: uppercase;
+
+    button {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        color: $turq-160;
+        cursor: pointer;
+        display: inline-flex;
+        font-size: 14px;
+        font-weight: $font-weight-bold;
+        gap: 6px;
+        padding: 0;
+        text-transform: uppercase;
+    }
+
+    svg {
+        height: 16px;
+        width: 16px;
+    }
+}
+
+.vote {
+    align-items: center;
+    display: inline-flex;
+    gap: 6px;
+}
+
+.dangerAction {
+    color: #ef476f !important;
+}
+
+.commentComposer {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    h2 {
+        font-size: 16px;
+        line-height: 22px;
+        margin: 0;
+    }
+}
+
+.createForm {
+    gap: 16px;
+}
+
+.fieldLabel {
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+    gap: 8px;
+    line-height: 22px;
+
+    input {
+        border: 1px solid $black-40;
+        border-radius: 4px;
+        font-size: 14px;
+        line-height: 20px;
+        min-height: 40px;
+        padding: 10px;
+    }
+}
+
+.hiddenComposer {
+    display: none;
+}
+
+.markdownWrap {
+    background: $tc-white;
+    border: 1px solid rgba($black-40, 0.5);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.toolbar {
+    align-items: center;
+    border-bottom: 1px solid rgba($black-40, 0.5);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    min-height: 38px;
+}
+
+.toolbarButton {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-right: 1px solid rgba($black-40, 0.5);
+    color: $black-80;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 14px;
+    gap: 4px;
+    height: 38px;
+    justify-content: center;
+    min-width: 38px;
+    padding: 8px;
+
+    svg {
+        height: 18px;
+        width: 18px;
+    }
+}
+
+.editorBody {
+    display: flex;
+    padding: 16px;
+
+    textarea {
+        border: 0;
+        color: $black-100;
+        flex: 1;
+        font: inherit;
+        min-height: inherit;
+        outline: none;
+        resize: vertical;
+        width: 100%;
+    }
+}
+
+.editorHelp {
+    align-items: center;
+    border-top: 1px solid rgba($black-40, 0.5);
+    color: $black-80;
+    display: flex;
+    font-size: 14px;
+    justify-content: space-between;
+    line-height: 20px;
+    padding: 12px 0 0;
+}
+
+.previewToggle {
+    align-self: flex-start;
+    background: transparent;
+    border: 0;
+    color: $turq-160;
+    cursor: pointer;
+    font-weight: $font-weight-bold;
+    margin: 0 16px 12px;
+    padding: 0;
+}
+
+.formActions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding-top: 8px;
+}
+
+.visibilityNote {
+    flex: 1;
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+    text-align: right;
+}
+
+.guidelines {
+    color: $black-100;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    gap: 10px;
+    line-height: 20px;
+    margin: 0;
+    padding-left: 18px;
+
+    li::marker {
+        color: $turq-160;
+    }
+}
+
+.modalOverlay {
+    align-items: flex-start;
+    background: rgba($tc-black, 0.55);
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    left: 0;
+    padding-top: 377px;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 50;
+}
+
+.deleteModal {
+    background: $tc-white;
+    border: 1px solid $black-20;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 28px 24px;
+    width: 343px;
+
+    h2,
+    p {
+        margin: 0;
+    }
+
+    h2 {
+        font-size: 26px;
+        font-weight: $font-weight-bold;
+        line-height: 30px;
+    }
+
+    p {
+        font-size: 16px;
+        line-height: 22px;
+    }
+}
+
+.footer {
+    background: #0f172a;
+    color: $tc-white;
+    padding: 80px 0;
+}
+
+.footerInner {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    margin: 0 auto;
+    max-width: 1346px;
+    padding: 0 40px;
+}
+
+.footerLogo {
+    height: 52px;
+    width: 104px;
+}
+
+.footerRule {
+    background: $tc-white;
+    height: 1px;
+    width: 100%;
+}
+
+.footerColumns {
+    align-items: flex-start;
+    display: grid;
+    gap: 40px;
+    grid-template-columns: 1fr 120px 140px 180px;
+}
+
+.footerAbout,
+.footerLinks {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    h2,
+    p {
+        margin: 0;
+    }
+
+    h2 {
+        font-size: 16px;
+        font-weight: $font-weight-bold;
+        line-height: 22px;
+    }
+
+    p,
+    a {
+        color: $tc-white;
+        font-size: 14px;
+        line-height: 20px;
+        text-decoration: none;
+    }
+}
+
+.expertButton {
+    background: $tc-white;
+    border: 1px solid #0b3d56;
+    border-radius: 4px;
+    color: #0b3d56;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+    line-height: 22px;
+    padding: 8px 24px;
+}
+
+.socials {
+    display: flex;
+    gap: 8px;
+
+    svg,
+    span {
+        align-items: center;
+        border: 1px solid $tc-white;
+        border-radius: 2px;
+        display: inline-flex;
+        font-size: 10px;
+        height: 22px;
+        justify-content: center;
+        text-transform: uppercase;
+        width: 22px;
+    }
+
+    svg {
+        color: $tc-white;
+        padding: 3px;
+    }
+}
+
+.copyright {
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+    line-height: 22px;
+    margin: 0;
+}
+
+@media (max-width: 900px) {
+    .topBar {
+        height: 100px;
+        padding: 40px 24px 8px;
+    }
+
+    .logo {
+        height: 32px;
+        width: 135px;
+    }
+
+    .logoMark {
+        height: 20px;
+        width: 56px;
+    }
+
+    .logoText {
+        font-size: 17px;
+        line-height: 17px;
+    }
+
+    .wipro {
+        font-size: 8px;
+    }
+
+    .desktopNav,
+    .headerIcon {
+        display: none;
+    }
+
+    .mobileMenuIcon {
+        display: block;
+        order: -1;
+    }
+
+    .topActions {
+        gap: 16px;
+    }
+
+    .main {
+        gap: 16px;
+        padding: 24px 16px 48px;
+    }
+
+    .challengeTitleRow {
+        gap: 8px;
+
+        h1 {
+            font-size: 24px;
+            line-height: 30px;
+        }
+    }
+
+    .backCircle {
+        height: 16px;
+        margin-top: 4px;
+        width: 16px;
+
+        svg {
+            height: 12px;
+            width: 12px;
+        }
+    }
+
+    .keyTitle {
+        font-size: 14px;
+        line-height: 20px;
+        padding: 16px 16px 0;
+        text-align: center;
+    }
+
+    .prizeRow {
+        align-items: stretch;
+        flex-direction: column;
+        gap: 16px;
+        padding: 24px 16px 12px;
+    }
+
+    .prizes {
+        gap: 16px;
+        justify-content: center;
+    }
+
+    .prize {
+        flex-direction: column;
+        gap: 4px;
+
+        strong {
+            font-size: 14px;
+            line-height: 20px;
+        }
+    }
+
+    .prizeBadge {
+        font-size: 11px;
+        height: 32px;
+        min-width: 32px;
+    }
+
+    .challengeActions {
+        flex-direction: column;
+    }
+
+    .bonus {
+        font-size: 12px;
+        line-height: 18px;
+        padding: 0 16px 16px;
+        text-align: center;
+    }
+
+    .deadlineBar {
+        align-items: flex-start;
+        flex-direction: column;
+        font-size: 12px;
+        gap: 4px;
+        line-height: 18px;
+        padding: 12px 16px;
+        position: relative;
+    }
+
+    .deadlineDivider {
+        display: none;
+    }
+
+    .deadlineIcon {
+        height: 24px;
+        position: absolute;
+        right: 12px;
+        top: 16px;
+        width: 24px;
+    }
+
+    .challengeTabs {
+        flex-direction: column;
+
+        a:not(.activeTab) {
+            display: none;
+        }
+
+        .activeTab {
+            justify-content: space-between;
+
+            &::after {
+                content: '⌄';
+                font-size: 16px;
+            }
+        }
+    }
+
+    .forumGrid,
+    .createGrid {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .sidebar,
+    .topicList,
+    .postsColumn,
+    .createForm {
+        width: 100%;
+    }
+
+    .sidebarCard,
+    .topicCard,
+    .postCard,
+    .commentComposer,
+    .createForm {
+        padding: 20px 16px;
+    }
+
+    .sidebarCard h2,
+    .topicMain h2 {
+        font-size: 24px;
+        line-height: 30px;
+    }
+
+    .topicFooter,
+    .topicAuthorGroup,
+    .postActions,
+    .formActions,
+    .editorHelp {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .breadcrumbBar {
+        min-height: 48px;
+        overflow-x: auto;
+        padding: 0 16px;
+    }
+
+    .toolbar {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+    }
+
+    .editorBody {
+        min-height: 220px !important;
+    }
+
+    .visibilityNote {
+        text-align: left;
+    }
+
+    .modalOverlay {
+        align-items: center;
+        padding: 16px;
+    }
+
+    .deleteModal {
+        width: 100%;
+    }
+
+    .footer {
+        padding: 80px 0;
+    }
+
+    .footerInner {
+        gap: 24px;
+        padding: 0 40px;
+    }
+
+    .footerColumns {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 40px;
+    }
+
+    .footerAbout {
+        width: 100%;
+    }
+}
diff --git a/src/apps/community/src/pages/forums/ForumsPage.tsx b/src/apps/community/src/pages/forums/ForumsPage.tsx
new file mode 100644
index 000000000..09ab6b585
--- /dev/null
+++ b/src/apps/community/src/pages/forums/ForumsPage.tsx
@@ -0,0 +1,814 @@
+/* eslint-disable complexity */
+import {
+    ChangeEvent,
+    FC,
+    ReactNode,
+    useCallback,
+    useMemo,
+    useState,
+} from 'react'
+import {
+    generatePath,
+    Link,
+    useNavigate,
+    useParams,
+    useSearchParams,
+} from 'react-router-dom'
+import ReactMarkdown from 'react-markdown'
+import classNames from 'classnames'
+
+import {
+    Button,
+    IconOutline,
+    LogoIcon,
+    SocialIconInstagram,
+    SocialIconLinkedIn,
+    SocialIconTwitter,
+    SocialIconYoutube,
+    TCLogoSvg,
+} from '~/libs/ui'
+
+import {
+    forumCreateTopicRouteId,
+    forumListingRouteId,
+    forumTopicRouteId,
+    rootRoute,
+} from '../../config/routes.config'
+
+import {
+    sampleForumChallenge,
+    sampleForumPosts,
+    sampleForumTopics,
+} from './sample-data'
+import {
+    ForumAuthor,
+    ForumPost,
+    ForumRole,
+    ForumTopic,
+    ForumTopicKind,
+} from './types'
+import styles from './ForumsPage.module.scss'
+
+export enum ForumsPageMode {
+    create = 'create',
+    detail = 'detail',
+    list = 'list',
+}
+
+interface ForumsPageProps {
+    mode: ForumsPageMode
+}
+
+interface RoleAwareProps {
+    role: ForumRole
+}
+
+interface TopicPathOptions {
+    role: ForumRole
+    topicId: string
+}
+
+interface MarkdownEditorProps {
+    minHeight?: number
+    onChange?: (value: string) => void
+    placeholder: string
+    value: string
+}
+
+interface TopicCardProps extends RoleAwareProps {
+    topic: ForumTopic
+}
+
+interface PostCardProps extends RoleAwareProps {
+    onDeleteClick: (postId: string) => void
+    post: ForumPost
+}
+
+interface DeleteConfirmationProps {
+    onCancel: () => void
+    onDelete: () => void
+}
+
+const topicKindLabel: Record<ForumTopicKind, string> = {
+    announcement: 'Announcement',
+    discussion: 'Discussion',
+}
+
+/**
+ * Builds a normalized app path from a community route fragment.
+ *
+ * @param route Route fragment from the community route config.
+ * @param role Current sample role to preserve in navigation.
+ * @returns Absolute route path with the role query string when needed.
+ */
+function getRoutePath(route: string, role: ForumRole): string {
+    const path = `/${`${rootRoute}/${route}`
+        .replace(/\/{2,}/g, '/')
+        .replace(/^\/+/, '')}`
+
+    return role === 'member'
+        ? path
+        : `${path}?role=${role}`
+}
+
+/**
+ * Builds a topic-detail path for the selected sample role.
+ *
+ * @param options Topic id and current sample role.
+ * @returns Absolute route path for the topic detail screen.
+ */
+function getTopicPath(options: TopicPathOptions): string {
+    const route = generatePath(forumTopicRouteId, { topicId: options.topicId })
+
+    return getRoutePath(route, options.role)
+}
+
+/**
+ * Reads the supported forum role from URL search params.
+ *
+ * @param searchParams Current URL search params.
+ * @returns Supported role, defaulting to member.
+ */
+function getRoleFromSearchParams(searchParams: URLSearchParams): ForumRole {
+    const role = searchParams.get('role')
+
+    if (role === 'admin' || role === 'copilot') {
+        return role
+    }
+
+    return 'member'
+}
+
+/**
+ * Returns the first letters used for the sample avatar fallback.
+ *
+ * @param author Forum author data.
+ * @returns Uppercase avatar initials.
+ */
+function getAuthorInitials(author: ForumAuthor): string {
+    return author.handle
+        .split('.')
+        .map(part => part.charAt(0))
+        .join('')
+        .slice(0, 2)
+        .toUpperCase()
+}
+
+/**
+ * Renders the Figma-style public header used by the sample forum screens.
+ *
+ * @returns Header element for desktop and mobile layouts.
+ */
+const ForumTopBar: FC = () => (
+    <header className={styles.topBar}>
+        <div className={styles.logoWrap}>
+            <LogoIcon className={styles.logoMark} viewBox='0 0 56 20' />
+            <span className={styles.logoType}>
+                <span className={styles.logoText}>topcoder</span>
+                <span className={styles.wipro}>a wipro company</span>
+            </span>
+        </div>
+        <nav className={styles.desktopNav}>
+            <span className={styles.navDivider} />
+            <a href='/community/challenges'>Opportunities</a>
+        </nav>
+        <div className={styles.topActions}>
+            <IconOutline.ViewGridIcon className={styles.headerIcon} />
+            <span className={styles.headerAvatar}>JG</span>
+            <IconOutline.MenuIcon className={styles.mobileMenuIcon} />
+        </div>
+    </header>
+)
+
+/**
+ * Renders the dark Topcoder footer from the forum design.
+ *
+ * @returns Footer element with grouped navigation and social links.
+ */
+const ForumFooter: FC = () => (
+    <footer className={styles.footer}>
+        <div className={styles.footerInner}>
+            <TCLogoSvg className={styles.footerLogo} />
+            <div className={styles.footerRule} />
+            <div className={styles.footerColumns}>
+                <section className={styles.footerAbout}>
+                    <h2>About Topcoder</h2>
+                    <p>
+                        Over 25 years ago, Topcoder pioneered competitive coding, transforming coding into a sport by
+                        providing a platform for top developers worldwide to compete, enhance skills, and connect within
+                        a global community.
+                    </p>
+                    <p>
+                        Today, Topcoder enables businesses to access this vast pool of elite talent, harnessing the
+                        skills and expertise of our global community to solve complex problems, drive innovation, and
+                        deliver high-quality results faster.
+                    </p>
+                </section>
+                <section className={styles.footerLinks}>
+                    <h2>For Clients</h2>
+                    <a href='/'>How it Works</a>
+                    <a href='/'>The Talent</a>
+                    <a href='/'>Case Studies</a>
+                </section>
+                <section className={styles.footerLinks}>
+                    <h2>For Freelancers</h2>
+                    <a href='/'>I&apos;m a Freelancer</a>
+                    <a href='/'>Blogs</a>
+                </section>
+                <section className={styles.footerLinks}>
+                    <h2>Resources</h2>
+                    <button className={styles.expertButton} type='button'>Talk to an expert</button>
+                    <div className={styles.socials} aria-label='Social links'>
+                        <SocialIconLinkedIn />
+                        <span>dc</span>
+                        <SocialIconInstagram />
+                        <SocialIconTwitter />
+                        <SocialIconYoutube />
+                    </div>
+                    <a href='/'>Support</a>
+                    <a href='/'>Terms and Conditions</a>
+                    <a href='/'>Privacy Policy</a>
+                </section>
+            </div>
+            <div className={styles.footerRule} />
+            <p className={styles.copyright}>Copyright (c) 2025 Topcoder. All Rights Reserved.</p>
+        </div>
+    </footer>
+)
+
+/**
+ * Renders the shared challenge heading, prize summary, deadline bar and tabs.
+ *
+ * @param props Current role used to preserve navigation state.
+ * @returns Challenge context header for forum screens.
+ */
+const ForumChallengeHeader: FC<RoleAwareProps> = (props: RoleAwareProps) => (
+    <section className={styles.challengeHeader}>
+        <div className={styles.challengeTitleRow}>
+            <span className={styles.backCircle} aria-hidden='true'>
+                <IconOutline.ChevronDownIcon />
+            </span>
+            <div>
+                <h1>{sampleForumChallenge.name}</h1>
+                <div className={styles.tagRow}>
+                    {sampleForumChallenge.tags.map(tag => (
+                        <span className={styles.smallTag} key={tag}>{tag}</span>
+                    ))}
+                </div>
+            </div>
+        </div>
+        <div className={styles.keyInformation}>
+            <div className={styles.keyTitle}>Key information</div>
+            <div className={styles.prizeRow}>
+                <div className={styles.prizes}>
+                    {sampleForumChallenge.prizes.map(prize => (
+                        <div className={styles.prize} key={prize.label}>
+                            <span className={classNames(styles.prizeBadge, styles[prize.tone])}>
+                                {prize.label}
+                            </span>
+                            <strong>{prize.amount}</strong>
+                        </div>
+                    ))}
+                </div>
+                <div className={styles.challengeActions}>
+                    <Button className={styles.outlinePill} secondary size='lg'>Unregister</Button>
+                    <Button className={styles.primaryPill} primary size='lg'>
+                        <IconOutline.UploadIcon />
+                        Submit a solution
+                    </Button>
+                </div>
+            </div>
+            <p className={styles.bonus}>
+                <span>Bonus:</span>
+                {' '}
+                5 Checkpoints Awarded Worth $50 Each
+            </p>
+            <div className={styles.deadlineBar}>
+                <span>
+                    Next Deadline:
+                    {' '}
+                    <strong>{sampleForumChallenge.nextDeadline}</strong>
+                </span>
+                <span className={styles.deadlineDivider} />
+                <span>
+                    Current Deadline Ends:
+                    {' '}
+                    <strong>{sampleForumChallenge.currentDeadline}</strong>
+                </span>
+                <IconOutline.ChevronDownIcon className={styles.deadlineIcon} />
+            </div>
+        </div>
+        <nav className={styles.challengeTabs} aria-label='Challenge sections'>
+            <a href='/'>Details</a>
+            <a href='/'>
+                Registrants
+                <span>{sampleForumChallenge.registrantCount}</span>
+            </a>
+            <a href='/'>
+                Submissions
+                <span>{sampleForumChallenge.submissionCount}</span>
+            </a>
+            <Link className={styles.activeTab} to={getRoutePath(forumListingRouteId, props.role)}>
+                Challenge Discussion
+            </Link>
+        </nav>
+    </section>
+)
+
+/**
+ * Renders a compact forum author avatar and role chip.
+ *
+ * @param props Author data and optional compact layout flag.
+ * @returns Author identity row.
+ */
+const AuthorLine: FC<{ author: ForumAuthor; compact?: boolean }> = (
+    props: { author: ForumAuthor; compact?: boolean },
+) => (
+    <div className={classNames(styles.authorLine, props.compact && styles.compactAuthor)}>
+        <span className={classNames(styles.avatar, styles[props.author.avatarTone])}>
+            {getAuthorInitials(props.author)}
+        </span>
+        <strong className={styles.handle}>{props.author.handle}</strong>
+        <span className={styles.roleChip}>{props.author.role}</span>
+    </div>
+)
+
+/**
+ * Renders the discussion metadata, search and filter sidebar.
+ *
+ * @param props Current sample role.
+ * @returns Sidebar cards for list and detail screens.
+ */
+const ForumSidebar: FC<RoleAwareProps> = (props: RoleAwareProps) => (
+    <aside className={styles.sidebar}>
+        <section className={styles.sidebarCard}>
+            <h2>React Component Library Development Discussion</h2>
+            <p>
+                {sampleForumTopics.length}
+                {' '}
+                topics
+                <span aria-hidden='true'> | </span>
+                {sampleForumTopics.reduce((total: number, topic: ForumTopic) => total + topic.postCount, 0)}
+                {' '}
+                posts
+            </p>
+            <h3>Links:</h3>
+            <a href='/'>General Forums</a>
+            <Link className={styles.newTopicButton} to={getRoutePath(forumCreateTopicRouteId, props.role)}>
+                <IconOutline.PlusIcon />
+                New Topic
+            </Link>
+        </section>
+        <section className={styles.sidebarCard}>
+            <label className={styles.searchField}>
+                <IconOutline.SearchIcon />
+                <input placeholder='Search Topic' type='search' />
+            </label>
+            <label className={styles.selectField}>
+                <span>Sort by</span>
+                <select defaultValue='Most Recent'>
+                    <option>Most Recent</option>
+                    <option>Most Active</option>
+                    <option>Oldest</option>
+                </select>
+            </label>
+            <div className={styles.radioGroup}>
+                {['All Topics', 'Unread', 'Announcements', 'Discussions'].map((label: string) => (
+                    <label key={label}>
+                        <input defaultChecked={label === 'All Topics'} name='topic-filter' type='radio' />
+                        {label}
+                    </label>
+                ))}
+            </div>
+        </section>
+        <section className={styles.sidebarCard}>
+            <h3>Discussion Info:</h3>
+            <AuthorLine author={sampleForumTopics[0].author} compact />
+            <div className={styles.cardRule} />
+            <p>
+                Last post:
+                {' '}
+                {sampleForumTopics[0].lastPostAt}
+            </p>
+            <p>
+                Created:
+                {' '}
+                {sampleForumTopics[0].createdAt}
+            </p>
+        </section>
+    </aside>
+)
+
+/**
+ * Renders a topic summary card.
+ *
+ * @param props Topic data and current sample role.
+ * @returns Linkable topic card.
+ */
+const TopicCard: FC<TopicCardProps> = (props: TopicCardProps) => (
+    <article className={styles.topicCard}>
+        <div className={styles.topicMain}>
+            <Link to={getTopicPath({ role: props.role, topicId: props.topic.id })}>
+                <h2>{props.topic.title}</h2>
+            </Link>
+            <div className={styles.topicMeta}>
+                <span className={classNames(styles.kindChip, styles[props.topic.kind])}>
+                    {topicKindLabel[props.topic.kind]}
+                </span>
+                <span>
+                    {props.topic.postCount}
+                    {' '}
+                    posts
+                </span>
+                <span>|</span>
+                <span>
+                    {props.topic.viewCount}
+                    {' '}
+                    views
+                </span>
+            </div>
+        </div>
+        <p>{props.topic.body}</p>
+        <div className={styles.cardRule} />
+        <div className={styles.topicFooter}>
+            <div className={styles.topicAuthorGroup}>
+                <AuthorLine author={props.topic.author} compact />
+                <span>
+                    Last post:
+                    {' '}
+                    {props.topic.lastPostAt}
+                </span>
+            </div>
+            <span>
+                Created:
+                {' '}
+                {props.topic.createdAt}
+            </span>
+        </div>
+    </article>
+)
+
+/**
+ * Renders the topic-list screen from sample data.
+ *
+ * @param props Current sample role.
+ * @returns Topic list layout.
+ */
+const TopicListView: FC<RoleAwareProps> = (props: RoleAwareProps) => (
+    <div className={styles.forumGrid}>
+        <ForumSidebar role={props.role} />
+        <main className={styles.topicList}>
+            {sampleForumTopics.map(topic => (
+                <TopicCard key={topic.id} role={props.role} topic={topic} />
+            ))}
+            <div className={styles.listDivider} />
+            <Link className={styles.centerNewTopicButton} to={getRoutePath(forumCreateTopicRouteId, props.role)}>
+                <IconOutline.PlusIcon />
+                New Topic
+            </Link>
+        </main>
+    </div>
+)
+
+/**
+ * Renders one markdown toolbar button.
+ *
+ * @param props Button label or icon node.
+ * @returns Toolbar button.
+ */
+const ToolbarButton: FC<{ children: ReactNode; title: string }> = (
+    props: { children: ReactNode; title: string },
+) => (
+    <button className={styles.toolbarButton} title={props.title} type='button'>
+        {props.children}
+    </button>
+)
+
+/**
+ * Renders the markdown editor control used by forum compose flows.
+ *
+ * @param props Placeholder, value and optional minimum height.
+ * @returns Markdown editor surface.
+ */
+const MarkdownEditor: FC<MarkdownEditorProps> = (props: MarkdownEditorProps) => {
+    const [preview, setPreview] = useState(false)
+    const handlePreviewToggle = useCallback((): void => {
+        setPreview(previous => !previous)
+    }, [])
+    const handleChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>): void => {
+        props.onChange?.(event.target.value)
+    }, [props])
+
+    return (
+        <div className={styles.markdownWrap}>
+            <div className={styles.toolbar}>
+                <ToolbarButton title='Bold'>B</ToolbarButton>
+                <ToolbarButton title='Italic'><em>I</em></ToolbarButton>
+                <ToolbarButton title='Underline'><u>U</u></ToolbarButton>
+                <ToolbarButton title='Heading 1'>H1</ToolbarButton>
+                <ToolbarButton title='Heading 2'>H2</ToolbarButton>
+                <ToolbarButton title='Heading 3'>H3</ToolbarButton>
+                <ToolbarButton title='Font size'>
+                    16
+                    <IconOutline.ChevronDownIcon />
+                </ToolbarButton>
+                <ToolbarButton title='Align left'>L</ToolbarButton>
+                <ToolbarButton title='Align center'>C</ToolbarButton>
+                <ToolbarButton title='Align right'>R</ToolbarButton>
+                <ToolbarButton title='Numbered list'>1.</ToolbarButton>
+                <ToolbarButton title='Bulleted list'>-</ToolbarButton>
+                <ToolbarButton title='Link'><IconOutline.LinkIcon /></ToolbarButton>
+                <ToolbarButton title='Image'><IconOutline.PhotographIcon /></ToolbarButton>
+                <ToolbarButton title='Code'><IconOutline.CodeIcon /></ToolbarButton>
+                <ToolbarButton title='Table'><IconOutline.TableIcon /></ToolbarButton>
+                <ToolbarButton title='Preview'>
+                    <IconOutline.DocumentSearchIcon />
+                </ToolbarButton>
+                <ToolbarButton title='Fullscreen'>
+                    <IconOutline.ExternalLinkIcon />
+                </ToolbarButton>
+            </div>
+            <div className={styles.editorBody} style={{ minHeight: props.minHeight ?? 248 }}>
+                {preview ? (
+                    <ReactMarkdown>{props.value || props.placeholder}</ReactMarkdown>
+                ) : (
+                    <textarea onChange={handleChange} placeholder={props.placeholder} value={props.value} />
+                )}
+            </div>
+            <div className={styles.editorHelp}>
+                <span>You can use Markdown formatting. Files will be uploaded when you post.</span>
+                <span>16000 character remaining</span>
+            </div>
+            <button className={styles.previewToggle} onClick={handlePreviewToggle} type='button'>
+                {preview ? 'Edit Markdown' : 'Preview Markdown'}
+            </button>
+        </div>
+    )
+}
+
+/**
+ * Renders an individual post inside a topic.
+ *
+ * @param props Post data, current role and delete callback.
+ * @returns Post card with reactions and role-aware actions.
+ */
+const PostCard: FC<PostCardProps> = (props: PostCardProps) => {
+    const canModerate = props.role === 'admin'
+    const canEdit = props.role === 'admin' || props.post.isEditable === true
+    const handleDeleteClick = useCallback((): void => {
+        props.onDeleteClick(props.post.id)
+    }, [props])
+
+    return (
+        <article className={styles.postCard}>
+            <AuthorLine author={props.post.author} />
+            <p className={styles.postDate}>{props.post.createdAt}</p>
+            <div className={styles.postBody}>
+                <ReactMarkdown>{props.post.body}</ReactMarkdown>
+            </div>
+            <div className={styles.cardRule} />
+            <div className={styles.postActions}>
+                <span className={styles.vote}>
+                    <IconOutline.ThumbUpIcon />
+                    {props.post.upVotes}
+                </span>
+                <span className={styles.vote}>
+                    <IconOutline.ThumbDownIcon />
+                    {props.post.downVotes}
+                </span>
+                <button type='button'>
+                    <IconOutline.ReplyIcon />
+                    Reply
+                </button>
+                <button type='button'>Quote</button>
+                {canEdit && (
+                    <button type='button'>
+                        <IconOutline.PencilIcon />
+                        Edit
+                    </button>
+                )}
+                {canModerate && (
+                    <button className={styles.dangerAction} onClick={handleDeleteClick} type='button'>
+                        <IconOutline.TrashIcon />
+                        Delete
+                    </button>
+                )}
+            </div>
+        </article>
+    )
+}
+
+/**
+ * Renders the admin delete confirmation overlay.
+ *
+ * @param props Confirm and cancel callbacks.
+ * @returns Modal overlay.
+ */
+const DeleteConfirmation: FC<DeleteConfirmationProps> = (props: DeleteConfirmationProps) => (
+    <div className={styles.modalOverlay}>
+        <section className={styles.deleteModal} role='dialog' aria-modal='true' aria-labelledby='delete-title'>
+            <h2 id='delete-title'>Delete Confirmation</h2>
+            <p>Are you sure you want to permanently delete this post? This action cannot be undone</p>
+            <div className={styles.cardRule} />
+            <div className={styles.formActions}>
+                <Button className={styles.deleteButton} onClick={props.onDelete} primary>Delete</Button>
+                <Button className={styles.outlinePill} onClick={props.onCancel} secondary>Cancel</Button>
+            </div>
+        </section>
+    </div>
+)
+
+/**
+ * Renders the topic-detail screen from sample data.
+ *
+ * @param props Current sample role.
+ * @returns Topic detail layout.
+ */
+const TopicDetailView: FC<RoleAwareProps> = (props: RoleAwareProps) => {
+    const [deletePostId, setDeletePostId] = useState<string>()
+    const [comment, setComment] = useState('')
+    const topic = sampleForumTopics.find(item => item.id === 'typescript-interface-definitions')
+        ?? sampleForumTopics[0]
+    const handleCancelDelete = useCallback((): void => {
+        setDeletePostId(undefined)
+    }, [])
+    const handleConfirmDelete = useCallback((): void => {
+        setDeletePostId(undefined)
+    }, [])
+    const handleDeleteClick = useCallback((postId: string): void => {
+        setDeletePostId(postId)
+    }, [])
+
+    return (
+        <div className={styles.detailStack}>
+            <div className={styles.breadcrumbBar}>
+                <Link to={getRoutePath(forumListingRouteId, props.role)}>Discussions</Link>
+                <IconOutline.ChevronDownIcon />
+                <span>{topic.title}</span>
+            </div>
+            <div className={styles.forumGrid}>
+                <aside className={styles.sidebar}>
+                    <section className={styles.sidebarCard}>
+                        <h2>{topic.title}</h2>
+                        <p>
+                            {topic.postCount}
+                            {' '}
+                            post
+                            <span aria-hidden='true'> | </span>
+                            3 participant
+                        </p>
+                    </section>
+                    <section className={styles.sidebarCard}>
+                        <h3>Topic Info:</h3>
+                        <AuthorLine author={topic.author} compact />
+                        <div className={styles.cardRule} />
+                        <p>
+                            Last post:
+                            {' '}
+                            {topic.lastPostAt}
+                        </p>
+                        <p>
+                            Created:
+                            {' '}
+                            {topic.createdAt}
+                        </p>
+                    </section>
+                </aside>
+                <main className={styles.postsColumn}>
+                    {sampleForumPosts.map(post => (
+                        <PostCard
+                            key={post.id}
+                            onDeleteClick={handleDeleteClick}
+                            post={post}
+                            role={props.role}
+                        />
+                    ))}
+                    <section className={styles.commentComposer}>
+                        <h2>Leave a Comment</h2>
+                        <MarkdownEditor onChange={setComment} placeholder='Comment...' value={comment} />
+                        <div className={styles.formActions}>
+                            <Button className={styles.primaryPill} primary>Post Comment</Button>
+                            <Button className={styles.outlinePill} secondary>Preview</Button>
+                        </div>
+                    </section>
+                </main>
+            </div>
+            {deletePostId && (
+                <DeleteConfirmation
+                    onCancel={handleCancelDelete}
+                    onDelete={handleConfirmDelete}
+                />
+            )}
+        </div>
+    )
+}
+
+/**
+ * Renders the create-topic sample screen.
+ *
+ * @param props Current sample role.
+ * @returns Create-topic form.
+ */
+const CreateTopicView: FC<RoleAwareProps> = (props: RoleAwareProps) => {
+    const navigate = useNavigate()
+    const [title, setTitle] = useState('')
+    const [body, setBody] = useState('')
+    const handleTitleChange = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
+        setTitle(event.target.value)
+    }, [])
+    const handleCreate = useCallback((): void => {
+        navigate(getRoutePath(forumListingRouteId, props.role))
+    }, [navigate, props.role])
+
+    return (
+        <div className={styles.detailStack}>
+            <div className={styles.breadcrumbBar}>
+                <Link to={getRoutePath(forumListingRouteId, props.role)}>Discussions</Link>
+                <IconOutline.ChevronDownIcon />
+                <span>New Discussion</span>
+            </div>
+            <div className={styles.createGrid}>
+                <aside className={styles.sidebar}>
+                    <section className={styles.sidebarCard}>
+                        <h2>Start New Discussion</h2>
+                        <p>
+                            Create a new topic in
+                            {' '}
+                            <strong>React Component Library Development</strong>
+                        </p>
+                    </section>
+                    <section className={styles.sidebarCard}>
+                        <h3>Discussion Guidelines</h3>
+                        <ul className={styles.guidelines}>
+                            <li>Be clear and specific in your topic title</li>
+                            <li>Provide context and details in your description</li>
+                            <li>Search existing topics before creating duplicates</li>
+                            <li>Use appropriate formatting to make your post readable</li>
+                            <li>Be respectful and constructive in your communication</li>
+                        </ul>
+                    </section>
+                </aside>
+                <main className={styles.createForm}>
+                    <label className={styles.fieldLabel}>
+                        Topic Title
+                        <input
+                            onChange={handleTitleChange}
+                            placeholder='Enter a clear, descriptive title about your topic ...'
+                            type='text'
+                            value={title}
+                        />
+                    </label>
+                    <MarkdownEditor
+                        minHeight={280}
+                        onChange={setBody}
+                        placeholder='Describe your question, share insights, or start a discussion about the challenge.'
+                        value={body}
+                    />
+                    <div className={styles.formActions}>
+                        <Button className={styles.primaryPill} onClick={handleCreate} primary>Create Topic</Button>
+                        <Button className={styles.outlinePill} secondary>Preview</Button>
+                        <p className={styles.visibilityNote}>
+                            Your topic will be visible to all challenge participants
+                        </p>
+                    </div>
+                </main>
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Top-level sample forum page routed by mode.
+ *
+ * @param props Route mode to render list, detail, or create screens.
+ * @returns Complete forum sample page with Figma-style shell.
+ */
+const ForumsPage: FC<ForumsPageProps> = (props: ForumsPageProps) => {
+    const [searchParams] = useSearchParams()
+    const { topicId }: { topicId?: string } = useParams<{ topicId: string }>()
+    const role = useMemo(() => getRoleFromSearchParams(searchParams), [searchParams])
+    const content = useMemo(() => {
+        if (props.mode === ForumsPageMode.create) {
+            return <CreateTopicView role={role} />
+        }
+
+        if (props.mode === ForumsPageMode.detail || topicId) {
+            return <TopicDetailView role={role} />
+        }
+
+        return <TopicListView role={role} />
+    }, [props.mode, role, topicId])
+
+    return (
+        <div className={styles.page}>
+            <ForumTopBar />
+            <main className={styles.main}>
+                <ForumChallengeHeader role={role} />
+                {content}
+            </main>
+            <ForumFooter />
+        </div>
+    )
+}
+
+export default ForumsPage
diff --git a/src/apps/community/src/pages/forums/forum.routes.tsx b/src/apps/community/src/pages/forums/forum.routes.tsx
new file mode 100644
index 000000000..520ebf037
--- /dev/null
+++ b/src/apps/community/src/pages/forums/forum.routes.tsx
@@ -0,0 +1,30 @@
+import { PlatformRoute } from '~/libs/core'
+
+import {
+    forumCreateTopicRouteId,
+    forumListingRouteId,
+    forumTopicRouteId,
+} from '../../config/routes.config'
+
+import ForumsPage, { ForumsPageMode } from './ForumsPage'
+
+/**
+ * Route definitions for the sample forum screens.
+ */
+export const forumRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: false,
+        element: <ForumsPage mode={ForumsPageMode.list} />,
+        route: forumListingRouteId,
+    },
+    {
+        authRequired: false,
+        element: <ForumsPage mode={ForumsPageMode.create} />,
+        route: forumCreateTopicRouteId,
+    },
+    {
+        authRequired: false,
+        element: <ForumsPage mode={ForumsPageMode.detail} />,
+        route: forumTopicRouteId,
+    },
+]
diff --git a/src/apps/community/src/pages/forums/index.ts b/src/apps/community/src/pages/forums/index.ts
new file mode 100644
index 000000000..d3abe7870
--- /dev/null
+++ b/src/apps/community/src/pages/forums/index.ts
@@ -0,0 +1 @@
+export * from './forum.routes'
diff --git a/src/apps/community/src/pages/forums/sample-data.ts b/src/apps/community/src/pages/forums/sample-data.ts
new file mode 100644
index 000000000..d56bdad18
--- /dev/null
+++ b/src/apps/community/src/pages/forums/sample-data.ts
@@ -0,0 +1,177 @@
+/* eslint-disable sort-keys */
+import {
+    ForumAuthor,
+    ForumChallenge,
+    ForumPost,
+    ForumTopic,
+} from './types'
+
+export const forumAuthors: Record<string, ForumAuthor> = {
+    admin: {
+        avatarTone: 'red',
+        handle: 'tcadmin',
+        role: 'Administrator',
+    },
+    copilot: {
+        avatarTone: 'gold',
+        handle: 'fajar.mln',
+        role: 'Copilot',
+    },
+    kharm: {
+        avatarTone: 'blue',
+        handle: 'kharm',
+        role: 'Author',
+    },
+    tourist: {
+        avatarTone: 'orange',
+        handle: 'tourist',
+        role: 'Member',
+    },
+    yuki: {
+        avatarTone: 'green',
+        handle: 'yuki.dev',
+        role: 'Member',
+    },
+}
+
+export const sampleForumChallenge: ForumChallenge = {
+    name: 'React Component Library Development Challenge',
+    tags: ['Challenge', 'React'],
+    prizes: [
+        {
+            amount: '$1,000',
+            label: '1st',
+            tone: 'gold',
+        },
+        {
+            amount: '$500',
+            label: '2nd',
+            tone: 'silver',
+        },
+        {
+            amount: '$200',
+            label: '3rd',
+            tone: 'bronze',
+        },
+        {
+            amount: '$100',
+            label: '4th',
+            tone: 'turquoise',
+        },
+        {
+            amount: '$50',
+            label: '5th',
+            tone: 'turquoise',
+        },
+    ],
+    registrantCount: 38,
+    submissionCount: 19,
+    nextDeadline: 'Submission',
+    currentDeadline: '3d 8h',
+}
+
+export const sampleForumTopics: ForumTopic[] = [
+    {
+        id: 'welcome',
+        title: 'Welcome to React Component Library Development Challenge',
+        kind: 'announcement',
+        body: [
+            'Important guidelines and requirements for the challenge.',
+            'Please read carefully before starting development.',
+        ].join(' '),
+        author: forumAuthors.copilot,
+        createdAt: '20 Aug 2025, 08:08 AM',
+        lastPostAt: '3 Sept 2025, 10:58 AM',
+        postCount: 1,
+        viewCount: 0,
+    },
+    {
+        id: 'typescript-interface-definitions',
+        title: 'TypeScript Interface Definitions - Need Clarification',
+        kind: 'discussion',
+        body: 'Questions about prop validation, variant typing, and reusable component interface patterns.',
+        author: forumAuthors.kharm,
+        createdAt: '20 Aug 2025, 08:08 AM',
+        lastPostAt: '3 Sept 2025, 10:58 AM',
+        postCount: 3,
+        unread: true,
+        viewCount: 3,
+    },
+    {
+        id: 'storybook-coverage',
+        title: 'Storybook Coverage Expectations',
+        kind: 'discussion',
+        body: 'Should every component variant include a separate story, or can grouped controls cover variant states?',
+        author: forumAuthors.yuki,
+        createdAt: '21 Aug 2025, 02:15 PM',
+        lastPostAt: '2 Sept 2025, 09:12 PM',
+        postCount: 5,
+        viewCount: 18,
+    },
+    {
+        id: 'accessibility-testing',
+        title: 'Accessibility testing scope for interactive components',
+        kind: 'discussion',
+        body: 'Looking for guidance on keyboard focus, ARIA naming, and contrast requirements for the library.',
+        author: forumAuthors.tourist,
+        createdAt: '22 Aug 2025, 11:43 AM',
+        lastPostAt: '1 Sept 2025, 04:35 PM',
+        postCount: 4,
+        viewCount: 12,
+    },
+]
+
+export const sampleForumPosts: ForumPost[] = [
+    {
+        id: 'post-1',
+        author: forumAuthors.kharm,
+        createdAt: '20 Aug 2025, 08:08 AM',
+        upVotes: 0,
+        downVotes: 0,
+        isEditable: true,
+        body: [
+            "I'm working on the TypeScript interfaces and have a few questions about the prop validation patterns",
+            'mentioned in the spec.',
+            '',
+            'For the Button component, the spec mentions "flexible variant system" - should this be implemented as:',
+            "1. String literals: `variant: 'primary' | 'secondary' | 'ghost'`",
+            '2. Or more flexible: `variant?: string`',
+            '',
+            'Also, regarding the size prop - should we use a scale system or specific size names?',
+            'Any guidance would be appreciated!',
+            '',
+            'https://prnt.sc/zeYNoKumQBTN',
+        ].join('\n'),
+    },
+    {
+        id: 'post-2',
+        author: forumAuthors.tourist,
+        createdAt: '20 Aug 2025, 08:08 AM',
+        upVotes: 3,
+        downVotes: 0,
+        body: '+1 for priority clarification.',
+    },
+    {
+        id: 'post-3',
+        author: forumAuthors.copilot,
+        createdAt: '20 Aug 2025, 08:08 AM',
+        upVotes: 4,
+        downVotes: 0,
+        body: [
+            'Good question! For maximum type safety and developer experience, I recommend using string literals',
+            'for both variant and size:',
+            '',
+            '```typescript',
+            'interface ButtonProps {',
+            "  variant?: 'primary' | 'secondary' | 'ghost' | 'outline';",
+            "  size?: 'sm' | 'md' | 'lg';",
+            '  children: React.ReactNode;',
+            '  onClick?: () => void;',
+            '}',
+            '```',
+            '',
+            'This provides IntelliSense support and prevents typos. You can always extend the union types later',
+            'if needed.',
+        ].join('\n'),
+    },
+]
diff --git a/src/apps/community/src/pages/forums/types.ts b/src/apps/community/src/pages/forums/types.ts
new file mode 100644
index 000000000..1eecad952
--- /dev/null
+++ b/src/apps/community/src/pages/forums/types.ts
@@ -0,0 +1,46 @@
+export type ForumRole = 'admin' | 'copilot' | 'member'
+export type ForumTopicKind = 'announcement' | 'discussion'
+export type ForumAuthorRole = 'Administrator' | 'Author' | 'Copilot' | 'Member'
+
+export interface ForumAuthor {
+    avatarTone: 'blue' | 'gold' | 'green' | 'orange' | 'red'
+    handle: string
+    role: ForumAuthorRole
+}
+
+export interface ForumPost {
+    author: ForumAuthor
+    body: string
+    createdAt: string
+    downVotes: number
+    id: string
+    isEditable?: boolean
+    upVotes: number
+}
+
+export interface ForumTopic {
+    author: ForumAuthor
+    body: string
+    createdAt: string
+    id: string
+    kind: ForumTopicKind
+    lastPostAt: string
+    postCount: number
+    title: string
+    unread?: boolean
+    viewCount: number
+}
+
+export interface ForumChallenge {
+    currentDeadline: string
+    name: string
+    nextDeadline: string
+    prizes: ReadonlyArray<{
+        amount: string
+        label: string
+        tone: 'bronze' | 'gold' | 'silver' | 'turquoise'
+    }>
+    registrantCount: number
+    submissionCount: number
+    tags: string[]
+}
diff --git a/src/apps/community/src/pages/home/HomePage.module.scss b/src/apps/community/src/pages/home/HomePage.module.scss
new file mode 100644
index 000000000..84a366531
--- /dev/null
+++ b/src/apps/community/src/pages/home/HomePage.module.scss
@@ -0,0 +1,27 @@
+@import '@libs/ui/styles/includes';
+
+.page {
+    display: grid;
+    gap: $sp-4;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
+    margin: 0 auto;
+    max-width: 1280px;
+    padding: $sp-6 $sp-4 $sp-8;
+    width: 100%;
+}
+
+.leftColumn,
+.centerColumn,
+.rightColumn {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-4;
+    min-width: 0;
+}
+
+@media (max-width: 768px) {
+    .page {
+        grid-template-columns: 1fr;
+        padding: $sp-4 $sp-3 $sp-6;
+    }
+}
diff --git a/src/apps/community/src/pages/home/HomePage.tsx b/src/apps/community/src/pages/home/HomePage.tsx
new file mode 100644
index 000000000..e12f6b267
--- /dev/null
+++ b/src/apps/community/src/pages/home/HomePage.tsx
@@ -0,0 +1,51 @@
+import { FC, useContext, useEffect } from 'react'
+
+import { authUrlLogin, profileContext, ProfileContextData } from '~/libs/core'
+
+import { ChallengesFeedPanel } from './components/ChallengesFeedPanel'
+import { MySubmissionsPanel } from './components/MySubmissionsPanel'
+import { TCTimeWidget } from './components/TCTimeWidget'
+import { ThriveArticlesFeedPanel } from './components/ThriveArticlesFeedPanel'
+import styles from './HomePage.module.scss'
+
+/**
+ * Community home dashboard page.
+ *
+ * @returns Home page content.
+ */
+const HomePage: FC = () => {
+    const { isLoggedIn }: ProfileContextData = useContext(profileContext)
+
+    useEffect(() => {
+        document.title = 'Home | Topcoder'
+    }, [])
+
+    useEffect(() => {
+        if (!isLoggedIn) {
+            window.location.assign(authUrlLogin(window.location.href))
+        }
+    }, [isLoggedIn])
+
+    if (!isLoggedIn) {
+        return <></>
+    }
+
+    return (
+        <section className={styles.page}>
+            <div className={styles.leftColumn}>
+                <TCTimeWidget />
+            </div>
+
+            <div className={styles.centerColumn}>
+                <ChallengesFeedPanel />
+                <MySubmissionsPanel />
+            </div>
+
+            <div className={styles.rightColumn}>
+                <ThriveArticlesFeedPanel />
+            </div>
+        </section>
+    )
+}
+
+export default HomePage
diff --git a/src/apps/community/src/pages/home/components/ChallengesFeedPanel/ChallengesFeedPanel.module.scss b/src/apps/community/src/pages/home/components/ChallengesFeedPanel/ChallengesFeedPanel.module.scss
new file mode 100644
index 000000000..78ff12b22
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/ChallengesFeedPanel/ChallengesFeedPanel.module.scss
@@ -0,0 +1,78 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    padding: $sp-4;
+}
+
+.header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: $sp-3;
+}
+
+.title {
+    color: var(--DarkBlue);
+    font-size: 22px;
+    margin: 0;
+}
+
+.viewAll {
+    color: var(--Link);
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.rows {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    align-items: center;
+    border-top: 1px solid var(--GrayBorder);
+    display: flex;
+    gap: $sp-3;
+    justify-content: space-between;
+    padding: $sp-3 0;
+
+    &:first-child {
+        border-top: 0;
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+}
+
+.challengeName {
+    color: var(--DarkBlue);
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.prize {
+    color: var(--GrayFontColor);
+    font-size: 14px;
+    margin: 0;
+    white-space: nowrap;
+}
+
+.emptyState {
+    color: var(--GrayFontColor);
+    font-size: 14px;
+    margin: 0;
+}
+
+.loading {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 80px;
+}
diff --git a/src/apps/community/src/pages/home/components/ChallengesFeedPanel/ChallengesFeedPanel.tsx b/src/apps/community/src/pages/home/components/ChallengesFeedPanel/ChallengesFeedPanel.tsx
new file mode 100644
index 000000000..cd96ee6f0
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/ChallengesFeedPanel/ChallengesFeedPanel.tsx
@@ -0,0 +1,110 @@
+import { FC } from 'react'
+import { generatePath, Link } from 'react-router-dom'
+
+import { LoadingSpinner } from '~/libs/ui'
+
+import {
+    challengeDetailRouteId,
+    challengeListingRouteId,
+    rootRoute,
+} from '../../../../config/routes.config'
+import {
+    ChallengeInfo,
+    getPlacementPrizes,
+    useChallenges,
+    UseChallengesResult,
+} from '../../../../lib'
+
+import styles from './ChallengesFeedPanel.module.scss'
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function getPrizeDisplay(challenge: ChallengeInfo): string {
+    if (challenge.funChallenge) {
+        return 'Fun'
+    }
+
+    const placementPrizes = getPlacementPrizes(challenge)
+
+    if (!placementPrizes.length) {
+        return '$0'
+    }
+
+    const prizeTotal = placementPrizes.reduce(
+        (total, prize) => total + Number(prize.value || 0),
+        0,
+    )
+    const isPointBasedPrize = placementPrizes[0].type === 'POINT'
+
+    return isPointBasedPrize
+        ? `${prizeTotal.toLocaleString()} pts`
+        : `$${prizeTotal.toLocaleString()}`
+}
+
+/**
+ * Displays open opportunities for registration.
+ *
+ * @returns Challenges feed panel content.
+ */
+const ChallengesFeedPanel: FC = () => {
+    const {
+        challenges,
+        isLoading,
+    }: UseChallengesResult = useChallenges({
+        currentPhaseName: 'Registration',
+        perPage: 5,
+        sortBy: 'updated',
+        sortOrder: 'desc',
+        status: 'ACTIVE',
+    })
+
+    const listingPath = withLeadingSlash(`${rootRoute}/${challengeListingRouteId}`)
+        .replace(/\/{2,}/g, '/')
+
+    return (
+        <section className={styles.container}>
+            <header className={styles.header}>
+                <h2 className={styles.title}>Opportunities</h2>
+                <Link className={styles.viewAll} to={listingPath}>View all</Link>
+            </header>
+
+            {isLoading && (
+                <div className={styles.loading}>
+                    <LoadingSpinner inline />
+                </div>
+            )}
+
+            {!isLoading && !challenges.length && (
+                <p className={styles.emptyState}>No open challenges</p>
+            )}
+
+            {!isLoading && challenges.length > 0 && (
+                <div className={styles.rows}>
+                    {challenges.map(challenge => {
+                        const challengePath = withLeadingSlash(
+                            `${rootRoute}/${generatePath(challengeDetailRouteId, {
+                                challengeId: challenge.id,
+                            })}`,
+                        )
+                            .replace(/\/{2,}/g, '/')
+
+                        return (
+                            <article className={styles.row} key={challenge.id}>
+                                <Link className={styles.challengeName} to={challengePath}>
+                                    {challenge.name}
+                                </Link>
+                                <p className={styles.prize}>{getPrizeDisplay(challenge)}</p>
+                            </article>
+                        )
+                    })}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default ChallengesFeedPanel
diff --git a/src/apps/community/src/pages/home/components/ChallengesFeedPanel/index.ts b/src/apps/community/src/pages/home/components/ChallengesFeedPanel/index.ts
new file mode 100644
index 000000000..7ae066b51
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/ChallengesFeedPanel/index.ts
@@ -0,0 +1 @@
+export { default as ChallengesFeedPanel } from './ChallengesFeedPanel'
diff --git a/src/apps/community/src/pages/home/components/MySubmissionsPanel/MySubmissionsPanel.module.scss b/src/apps/community/src/pages/home/components/MySubmissionsPanel/MySubmissionsPanel.module.scss
new file mode 100644
index 000000000..d41106d40
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/MySubmissionsPanel/MySubmissionsPanel.module.scss
@@ -0,0 +1,91 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    padding: $sp-4;
+}
+
+.header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: $sp-3;
+}
+
+.title {
+    color: var(--DarkBlue);
+    font-size: 22px;
+    margin: 0;
+}
+
+.viewAll {
+    color: var(--Link);
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.rows {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    align-items: center;
+    border-top: 1px solid var(--GrayBorder);
+    display: flex;
+    gap: $sp-3;
+    justify-content: space-between;
+    padding: $sp-3 0;
+
+    &:first-child {
+        border-top: 0;
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+}
+
+.details {
+    min-width: 0;
+}
+
+.challengeName {
+    color: var(--DarkBlue);
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.date {
+    color: var(--GrayFontColor);
+    font-size: 12px;
+    margin: $sp-1 0 0;
+}
+
+.submissionsLink {
+    color: var(--Link);
+    font-size: 13px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.emptyState {
+    color: var(--GrayFontColor);
+    font-size: 14px;
+    margin: 0;
+}
+
+.loading {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 80px;
+}
diff --git a/src/apps/community/src/pages/home/components/MySubmissionsPanel/MySubmissionsPanel.tsx b/src/apps/community/src/pages/home/components/MySubmissionsPanel/MySubmissionsPanel.tsx
new file mode 100644
index 000000000..58b9f21b3
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/MySubmissionsPanel/MySubmissionsPanel.tsx
@@ -0,0 +1,117 @@
+import { FC, useContext } from 'react'
+import { generatePath, Link } from 'react-router-dom'
+import moment from 'moment'
+
+import { profileContext, ProfileContextData } from '~/libs/core'
+import { LoadingSpinner } from '~/libs/ui'
+
+import {
+    challengeListingRouteId,
+    rootRoute,
+    submissionManagementRouteId,
+} from '../../../../config/routes.config'
+import {
+    SubmissionInfo,
+    useMemberSubmissions,
+    UseMemberSubmissionsResult,
+} from '../../../../lib'
+
+import styles from './MySubmissionsPanel.module.scss'
+
+interface ExtendedSubmissionInfo extends SubmissionInfo {
+    challenge?: {
+        name?: string
+    }
+    challengeName?: string
+}
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function getChallengeName(submission: SubmissionInfo): string {
+    const extendedSubmission = submission as ExtendedSubmissionInfo
+
+    return extendedSubmission.challengeName
+        || extendedSubmission.challenge?.name
+        || submission.challengeId
+}
+
+function formatSubmissionDate(createdAt: string): string {
+    const value = moment(createdAt)
+
+    return value.isValid()
+        ? value.format('MMM DD, YYYY')
+        : '-'
+}
+
+/**
+ * Displays the logged-in member's recent submissions.
+ *
+ * @returns Member submissions panel or an empty fragment when not logged in.
+ */
+const MySubmissionsPanel: FC = () => {
+    const { isLoggedIn }: ProfileContextData = useContext(profileContext)
+    const {
+        isLoading,
+        submissions,
+    }: UseMemberSubmissionsResult = useMemberSubmissions()
+
+    if (!isLoggedIn) {
+        return <></>
+    }
+
+    const listingPath = withLeadingSlash(`${rootRoute}/${challengeListingRouteId}`)
+        .replace(/\/{2,}/g, '/')
+    const myBucketPath = `${listingPath}?bucket=my`
+
+    return (
+        <section className={styles.container}>
+            <header className={styles.header}>
+                <h2 className={styles.title}>My Submissions</h2>
+                <Link className={styles.viewAll} to={myBucketPath}>View all</Link>
+            </header>
+
+            {isLoading && (
+                <div className={styles.loading}>
+                    <LoadingSpinner inline />
+                </div>
+            )}
+
+            {!isLoading && !submissions.length && (
+                <p className={styles.emptyState}>No submissions yet</p>
+            )}
+
+            {!isLoading && submissions.length > 0 && (
+                <div className={styles.rows}>
+                    {submissions.map(submission => {
+                        const submissionPath = withLeadingSlash(
+                            `${rootRoute}/${generatePath(submissionManagementRouteId, {
+                                challengeId: submission.challengeId,
+                            })}`,
+                        )
+                            .replace(/\/{2,}/g, '/')
+
+                        return (
+                            <article className={styles.row} key={submission.id}>
+                                <div className={styles.details}>
+                                    <p className={styles.challengeName}>{getChallengeName(submission)}</p>
+                                    <p className={styles.date}>
+                                        Submitted
+                                        {' '}
+                                        {formatSubmissionDate(submission.created)}
+                                    </p>
+                                </div>
+                                <Link className={styles.submissionsLink} to={submissionPath}>View</Link>
+                            </article>
+                        )
+                    })}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default MySubmissionsPanel
diff --git a/src/apps/community/src/pages/home/components/MySubmissionsPanel/index.ts b/src/apps/community/src/pages/home/components/MySubmissionsPanel/index.ts
new file mode 100644
index 000000000..0ae6ff5e4
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/MySubmissionsPanel/index.ts
@@ -0,0 +1 @@
+export { default as MySubmissionsPanel } from './MySubmissionsPanel'
diff --git a/src/apps/community/src/pages/home/components/TCTimeWidget/TCTimeWidget.module.scss b/src/apps/community/src/pages/home/components/TCTimeWidget/TCTimeWidget.module.scss
new file mode 100644
index 000000000..b7c2246aa
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/TCTimeWidget/TCTimeWidget.module.scss
@@ -0,0 +1,21 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    padding: $sp-4;
+}
+
+.title {
+    color: var(--DarkBlue);
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+}
+
+.time {
+    color: var(--GrayFontColor);
+    font-size: 16px;
+    margin: $sp-2 0 0;
+}
diff --git a/src/apps/community/src/pages/home/components/TCTimeWidget/TCTimeWidget.tsx b/src/apps/community/src/pages/home/components/TCTimeWidget/TCTimeWidget.tsx
new file mode 100644
index 000000000..90add5ce7
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/TCTimeWidget/TCTimeWidget.tsx
@@ -0,0 +1,47 @@
+import { FC, useEffect, useState } from 'react'
+import moment from 'moment-timezone'
+
+import styles from './TCTimeWidget.module.scss'
+
+const TOPCODER_TIMEZONE = 'America/New_York'
+
+function formatTimezoneOffset(offsetMinutes: number): string {
+    const offsetHours = offsetMinutes / 60
+    const sign = offsetHours >= 0 ? '+' : ''
+
+    return `UTC${sign}${offsetHours}`
+}
+
+function formatTopcoderTime(): string {
+    const now = moment.tz(new Date(), TOPCODER_TIMEZONE)
+
+    return `${now.format('MMM Do, HH:mm')} ${formatTimezoneOffset(now.utcOffset())}`
+}
+
+/**
+ * Displays current Topcoder time in America/New_York timezone.
+ *
+ * @returns Time widget content.
+ */
+const TCTimeWidget: FC = () => {
+    const [tcTime, setTCTime] = useState<string>(() => formatTopcoderTime())
+
+    useEffect(() => {
+        const intervalId = window.setInterval(() => {
+            setTCTime(formatTopcoderTime())
+        }, 60000)
+
+        return () => {
+            window.clearInterval(intervalId)
+        }
+    }, [])
+
+    return (
+        <section className={styles.container}>
+            <h2 className={styles.title}>Topcoder Time</h2>
+            <p className={styles.time}>{tcTime}</p>
+        </section>
+    )
+}
+
+export default TCTimeWidget
diff --git a/src/apps/community/src/pages/home/components/TCTimeWidget/index.ts b/src/apps/community/src/pages/home/components/TCTimeWidget/index.ts
new file mode 100644
index 000000000..8b3b0bcb1
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/TCTimeWidget/index.ts
@@ -0,0 +1 @@
+export { default as TCTimeWidget } from './TCTimeWidget'
diff --git a/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/ThriveArticlesFeedPanel.module.scss b/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/ThriveArticlesFeedPanel.module.scss
new file mode 100644
index 000000000..9bde26875
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/ThriveArticlesFeedPanel.module.scss
@@ -0,0 +1,62 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: #fff;
+    border: 1px solid var(--GrayBorder);
+    border-radius: 8px;
+    padding: $sp-4;
+}
+
+.header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: $sp-3;
+}
+
+.title {
+    color: var(--DarkBlue);
+    font-size: 22px;
+    margin: 0;
+}
+
+.viewAll {
+    color: var(--Link);
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.rows {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    border-top: 1px solid var(--GrayBorder);
+    padding: $sp-3 0;
+
+    &:first-child {
+        border-top: 0;
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+}
+
+.articleName {
+    color: var(--DarkBlue);
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.loading {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 80px;
+}
diff --git a/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/ThriveArticlesFeedPanel.tsx b/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/ThriveArticlesFeedPanel.tsx
new file mode 100644
index 000000000..cd982fcbb
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/ThriveArticlesFeedPanel.tsx
@@ -0,0 +1,73 @@
+import { FC } from 'react'
+import { Link } from 'react-router-dom'
+
+import { LoadingSpinner } from '~/libs/ui'
+
+import { rootRoute } from '../../../../config/routes.config'
+import {
+    useThriveArticles,
+    UseThriveArticlesResult,
+} from '../../../../lib'
+
+import styles from './ThriveArticlesFeedPanel.module.scss'
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+/**
+ * Displays a feed of Thrive article links.
+ *
+ * @returns Thrive article feed panel content.
+ */
+const ThriveArticlesFeedPanel: FC = () => {
+    const {
+        articles,
+        isLoading,
+    }: UseThriveArticlesResult = useThriveArticles({ limit: 5 })
+    const thrivePath = withLeadingSlash(`${rootRoute}/thrive`)
+        .replace(/\/{2,}/g, '/')
+
+    return (
+        <section className={styles.container}>
+            <header className={styles.header}>
+                <h2 className={styles.title}>Thrive Articles</h2>
+                <Link
+                    className={styles.viewAll}
+                    to={thrivePath}
+                >
+                    View all
+                </Link>
+            </header>
+
+            {isLoading && (
+                <div className={styles.loading}>
+                    <LoadingSpinner inline />
+                </div>
+            )}
+
+            {!isLoading && (
+                <div className={styles.rows}>
+                    {articles.map(article => {
+                        const articlePath = withLeadingSlash(
+                            `${rootRoute}/thrive/${encodeURIComponent(article.slug || article.title)}`,
+                        )
+                            .replace(/\/{2,}/g, '/')
+
+                        return (
+                            <article className={styles.row} key={article.id}>
+                                <Link className={styles.articleName} to={articlePath}>
+                                    {article.title}
+                                </Link>
+                            </article>
+                        )
+                    })}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default ThriveArticlesFeedPanel
diff --git a/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/index.ts b/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/index.ts
new file mode 100644
index 000000000..30b40b8d3
--- /dev/null
+++ b/src/apps/community/src/pages/home/components/ThriveArticlesFeedPanel/index.ts
@@ -0,0 +1 @@
+export { default as ThriveArticlesFeedPanel } from './ThriveArticlesFeedPanel'
diff --git a/src/apps/community/src/pages/home/home.routes.tsx b/src/apps/community/src/pages/home/home.routes.tsx
new file mode 100644
index 000000000..5321ac724
--- /dev/null
+++ b/src/apps/community/src/pages/home/home.routes.tsx
@@ -0,0 +1,25 @@
+import {
+    lazyLoad,
+    LazyLoadedComponent,
+    PlatformRoute,
+} from '~/libs/core'
+
+import { homeRouteId } from '../../config/routes.config'
+
+const HomePage: LazyLoadedComponent = lazyLoad(() => import('./HomePage'))
+
+/**
+ * Route definitions for the home page module.
+ */
+export const homeRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: true,
+        element: <HomePage />,
+        route: '',
+    },
+    {
+        authRequired: true,
+        element: <HomePage />,
+        route: homeRouteId,
+    },
+]
diff --git a/src/apps/community/src/pages/home/index.ts b/src/apps/community/src/pages/home/index.ts
new file mode 100644
index 000000000..d1f730df5
--- /dev/null
+++ b/src/apps/community/src/pages/home/index.ts
@@ -0,0 +1 @@
+export * from './home.routes'
diff --git a/src/apps/community/src/pages/index.ts b/src/apps/community/src/pages/index.ts
new file mode 100644
index 000000000..7ba563bb5
--- /dev/null
+++ b/src/apps/community/src/pages/index.ts
@@ -0,0 +1,10 @@
+export * from './challenge-detail'
+export * from './challenge-listing'
+export * from './changelog'
+export * from './communities'
+export * from './forums'
+export * from './home'
+export * from './submission'
+export * from './submission-management'
+export * from './timeline-wall'
+export * from './thrive'
diff --git a/src/apps/community/src/pages/submission-management/SubmissionManagementPage.module.scss b/src/apps/community/src/pages/submission-management/SubmissionManagementPage.module.scss
new file mode 100644
index 000000000..656650fc4
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/SubmissionManagementPage.module.scss
@@ -0,0 +1,84 @@
+@import '@libs/ui/styles/includes';
+
+.page {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-4;
+    margin: 0 auto;
+    max-width: 1240px;
+    padding: $sp-6 $sp-4 $sp-8;
+    width: 100%;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+
+    h1 {
+        color: var(--Black, #2a2a2a);
+        font-size: 30px;
+        margin: 0;
+    }
+}
+
+.content {
+    background: #fff;
+    border: 1px solid var(--GrayBorder, #d0d0d0);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+    padding: $sp-4;
+}
+
+.contentHeader {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-1;
+
+    h2 {
+        margin: 0 0 $sp-1;
+    }
+}
+
+.deadline {
+    color: var(--GrayFontColor, #767676);
+    margin: 0;
+
+    span {
+        color: var(--Black, #2a2a2a);
+    }
+}
+
+.recommendation {
+    color: var(--GrayFontColor, #767676);
+    margin: $sp-2 0 0;
+}
+
+.footer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.error {
+    color: #ef476f;
+    margin: 0;
+}
+
+.spinnerWrap {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 360px;
+}
+
+@media (max-width: 900px) {
+    .footer {
+        justify-content: stretch;
+
+        :global(.btn) {
+            width: 100%;
+        }
+    }
+}
diff --git a/src/apps/community/src/pages/submission-management/SubmissionManagementPage.tsx b/src/apps/community/src/pages/submission-management/SubmissionManagementPage.tsx
new file mode 100644
index 000000000..f836d10f8
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/SubmissionManagementPage.tsx
@@ -0,0 +1,262 @@
+/* eslint-disable complexity */
+import { FC, useCallback, useContext, useMemo, useState } from 'react'
+import { generatePath, useParams, useSearchParams } from 'react-router-dom'
+import { mutate } from 'swr'
+
+import { profileContext, ProfileContextData } from '~/libs/core'
+import {
+    LinkButton,
+    LoadingSpinner,
+} from '~/libs/ui'
+
+import {
+    challengeDetailRouteId,
+    rootRoute,
+    submissionRouteId,
+} from '../../config/routes.config'
+import {
+    deleteSubmission,
+    getMySubmissionsSwrKey,
+    useChallenge,
+    useMySubmissions,
+} from '../../lib'
+import type {
+    BackendChallengePhase,
+    UseChallengeResult,
+    UseMySubmissionsResult,
+} from '../../lib'
+
+import { SubmissionsTable } from './components/SubmissionsTable'
+import styles from './SubmissionManagementPage.module.scss'
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function getPhaseEndDate(
+    phase?: BackendChallengePhase,
+): string | undefined {
+    return phase?.actualEndDate || phase?.scheduledEndDate
+}
+
+function formatTimeRemaining(endDate?: string): string {
+    if (!endDate) {
+        return 'The challenge has ended'
+    }
+
+    const nowMs = Date.now()
+    const endMs = +(new Date(endDate))
+
+    if (!Number.isFinite(endMs) || endMs <= nowMs) {
+        return 'The challenge has ended'
+    }
+
+    const diff = endMs - nowMs
+    const dayMs = 24 * 60 * 60 * 1000
+    const hourMs = 60 * 60 * 1000
+    const minuteMs = 60 * 1000
+
+    const days = Math.floor(diff / dayMs)
+    const hours = Math.floor((diff % dayMs) / hourMs)
+    const minutes = Math.floor((diff % hourMs) / minuteMs)
+
+    return `${days > 0 ? `${days}D ` : ''}${hours}H ${minutes}M`
+}
+
+/**
+ * Submission management page for current user submissions.
+ *
+ * @returns Submission management content.
+ */
+const SubmissionManagementPage: FC = () => {
+    const { challengeId }: { challengeId?: string } = useParams<{ challengeId: string }>()
+    const [searchParams] = useSearchParams()
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const memberId = profile?.userId
+        ? `${profile.userId}`
+        : undefined
+    const [deleteError, setDeleteError] = useState<string>('')
+
+    const {
+        challenge,
+        isLoading: isLoadingChallenge,
+    }: UseChallengeResult = useChallenge(challengeId)
+    const {
+        isLoading: isLoadingSubmissions,
+        submissions,
+    }: UseMySubmissionsResult = useMySubmissions(challengeId)
+
+    const queryString = searchParams.toString()
+    const challengeDetailPath = useMemo(() => withLeadingSlash(
+        `${rootRoute}/${generatePath(challengeDetailRouteId, {
+            challengeId: challengeId ?? '',
+        })}`,
+    )
+        .replace(/\/{2,}/g, '/'), [challengeId])
+    const challengeDetailUrl = useMemo(() => (
+        queryString
+            ? `${challengeDetailPath}?${queryString}`
+            : challengeDetailPath
+    ), [challengeDetailPath, queryString])
+    const submitPath = useMemo(() => withLeadingSlash(
+        `${rootRoute}/${generatePath(submissionRouteId, {
+            challengeId: challengeId ?? '',
+        })}`,
+    )
+        .replace(/\/{2,}/g, '/'), [challengeId])
+    const submitUrl = useMemo(() => (
+        queryString
+            ? `${submitPath}?${queryString}`
+            : submitPath
+    ), [queryString, submitPath])
+
+    const isLoading = isLoadingChallenge || isLoadingSubmissions
+    const mySubmissionsSwrKey = useMemo(
+        () => getMySubmissionsSwrKey(challengeId, memberId),
+        [challengeId, memberId],
+    )
+
+    const currentDeadlinePhase = useMemo(() => {
+        if (!challenge?.phases?.length) {
+            return undefined
+        }
+
+        return [...challenge.phases]
+            .filter(phase => phase.name !== 'Registration' && phase.isOpen)
+            .sort((phaseA, phaseB) => {
+                const phaseAEndDate = +(new Date(getPhaseEndDate(phaseA) || 0))
+                const phaseBEndDate = +(new Date(getPhaseEndDate(phaseB) || 0))
+                return phaseAEndDate - phaseBEndDate
+            })[0]
+    }, [challenge?.phases])
+
+    const submissionPhase = useMemo(() => {
+        if (!challenge?.phases?.length) {
+            return undefined
+        }
+
+        return challenge.phases.find(phase => phase.name === 'Submission')
+    }, [challenge?.phases])
+
+    const submissionPhaseStartDate = useMemo(() => {
+        if (!challenge?.phases?.length) {
+            return undefined
+        }
+
+        const openSubmissionPhase = challenge.phases.find(phase => (
+            (phase.name === 'Submission' || phase.name === 'Checkpoint Submission')
+            && phase.isOpen
+        ))
+
+        return openSubmissionPhase?.actualStartDate || openSubmissionPhase?.scheduledStartDate
+    }, [challenge?.phases])
+
+    const isDesign = (challenge?.track.name || '').toLowerCase() === 'design'
+    const recommendationText = isDesign
+        ? 'We recommend downloading each submission to verify the uploaded .zip files and declaration accuracy.'
+        : 'We recommend downloading each submission to verify the uploaded .zip content before final review.'
+
+    const submissionEndDate = submissionPhase
+        ? getPhaseEndDate(submissionPhase)
+        : undefined
+    const isSubmissionPhaseOpen = submissionPhase?.isOpen === true
+    const showSubmitButton = !!submissionEndDate
+        && isSubmissionPhaseOpen
+        && +(new Date(submissionEndDate)) > Date.now()
+
+    const handleDelete = useCallback(async (submissionId: string): Promise<void> => {
+        if (!mySubmissionsSwrKey) {
+            return
+        }
+
+        setDeleteError('')
+
+        try {
+            await deleteSubmission(submissionId)
+            await mutate(mySubmissionsSwrKey)
+        } catch (error) {
+            setDeleteError(
+                error instanceof Error
+                    ? error.message
+                    : 'Failed to delete submission.',
+            )
+        }
+    }, [mySubmissionsSwrKey])
+
+    const handleTableDelete = useCallback((submissionId: string): void => {
+        handleDelete(submissionId)
+            .catch(() => undefined)
+    }, [handleDelete])
+
+    const deadlineText = useMemo(() => {
+        if (`${challenge?.status}`.toLowerCase() === 'completed') {
+            return 'The challenge has ended'
+        }
+
+        return `Current Deadline Ends: ${formatTimeRemaining(getPhaseEndDate(currentDeadlinePhase))}`
+    }, [challenge?.status, currentDeadlinePhase])
+
+    if (!profile?.userId) {
+        return (
+            <div className={styles.spinnerWrap}>
+                <LoadingSpinner />
+            </div>
+        )
+    }
+
+    if (isLoading || !challenge) {
+        return (
+            <div className={styles.spinnerWrap}>
+                <LoadingSpinner />
+            </div>
+        )
+    }
+
+    return (
+        <section className={styles.page}>
+            <header className={styles.header}>
+                <LinkButton label='Back to Challenge Details' secondary to={challengeDetailUrl} />
+                <h1>{challenge.name}</h1>
+            </header>
+
+            <div className={styles.content}>
+                <div className={styles.contentHeader}>
+                    <h2>Manage your submissions</h2>
+                    <p className={styles.deadline}>
+                        Current Deadline:
+                        {' '}
+                        <span>{currentDeadlinePhase?.name || 'No open phase'}</span>
+                    </p>
+                    <p className={styles.deadline}>
+                        {deadlineText}
+                    </p>
+                    <p className={styles.recommendation}>{recommendationText}</p>
+                    {!!deleteError && <p className={styles.error}>{deleteError}</p>}
+                </div>
+
+                <SubmissionsTable
+                    challenge={challenge}
+                    isDesign={isDesign}
+                    onDelete={handleTableDelete}
+                    submissionPhaseStartDate={submissionPhaseStartDate}
+                    submissions={submissions}
+                />
+            </div>
+
+            {showSubmitButton && (
+                <div className={styles.footer}>
+                    <LinkButton
+                        label={submissions.length > 0 ? 'Update Submission' : 'Add Submission'}
+                        primary
+                        to={submitUrl}
+                    />
+                </div>
+            )}
+        </section>
+    )
+}
+
+export { SubmissionManagementPage }
+export default SubmissionManagementPage
diff --git a/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/DownloadArtifactsModal.module.scss b/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/DownloadArtifactsModal.module.scss
new file mode 100644
index 000000000..e0772bbb1
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/DownloadArtifactsModal.module.scss
@@ -0,0 +1,49 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+    min-height: 120px;
+}
+
+.loading {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 120px;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.listItem {
+    align-items: center;
+    border: 1px solid var(--GrayBorder, #d0d0d0);
+    border-radius: 6px;
+    display: flex;
+    justify-content: space-between;
+    padding: $sp-2 $sp-3;
+}
+
+.artifactId {
+    color: var(--Black, #2a2a2a);
+    font-size: 14px;
+    overflow-wrap: anywhere;
+}
+
+.error {
+    color: #ef476f;
+    margin: 0;
+}
+
+.empty {
+    color: var(--GrayFontColor, #767676);
+    margin: 0;
+}
diff --git a/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/DownloadArtifactsModal.tsx b/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/DownloadArtifactsModal.tsx
new file mode 100644
index 000000000..5d9aef0b8
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/DownloadArtifactsModal.tsx
@@ -0,0 +1,147 @@
+import {
+    FC,
+    MouseEvent,
+    useCallback,
+    useEffect,
+    useState,
+} from 'react'
+
+import { Button, IconOutline, LoadingSpinner } from '~/libs/ui'
+import { BaseModal } from '~/libs/ui/lib/components/modals/base-modal'
+
+import {
+    downloadSubmissionArtifact,
+    fetchSubmissionArtifacts,
+} from '../../../../lib'
+
+import styles from './DownloadArtifactsModal.module.scss'
+
+interface DownloadArtifactsModalProps {
+    onClose: () => void
+    submissionId: string
+}
+
+/**
+ * Modal listing submission artifacts with direct download actions.
+ *
+ * @param props Submission id and close handler.
+ * @returns Artifacts download modal.
+ */
+const DownloadArtifactsModal: FC<DownloadArtifactsModalProps> = (props: DownloadArtifactsModalProps) => {
+    const [artifacts, setArtifacts] = useState<string[]>([])
+    const [error, setError] = useState<string>('')
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+
+    useEffect(() => {
+        let canceled = false
+
+        const loadArtifacts = async (): Promise<void> => {
+            setIsLoading(true)
+            setError('')
+
+            try {
+                const artifactIds = await fetchSubmissionArtifacts(props.submissionId)
+                if (!canceled) {
+                    setArtifacts(artifactIds)
+                }
+            } catch (loadError) {
+                if (!canceled) {
+                    setError(
+                        loadError instanceof Error
+                            ? loadError.message
+                            : 'Failed to load artifacts.',
+                    )
+                }
+            } finally {
+                if (!canceled) {
+                    setIsLoading(false)
+                }
+            }
+        }
+
+        loadArtifacts()
+        return () => {
+            canceled = true
+        }
+    }, [props.submissionId])
+
+    const handleDownload = useCallback(async (artifactId: string): Promise<void> => {
+        const blob = await downloadSubmissionArtifact(props.submissionId, artifactId)
+        const objectUrl = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = objectUrl
+        link.download = `submission-artifact-${props.submissionId}-${artifactId}.zip`
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
+        window.URL.revokeObjectURL(objectUrl)
+    }, [props.submissionId])
+
+    const handleArtifactDownloadClick = useCallback((event: MouseEvent<HTMLButtonElement>): void => {
+        const artifactId = event.currentTarget.dataset.artifactId
+
+        if (!artifactId) {
+            return
+        }
+
+        handleDownload(artifactId)
+            .catch(downloadError => {
+                setError(
+                    downloadError instanceof Error
+                        ? downloadError.message
+                        : 'Failed to download artifact.',
+                )
+            })
+    }, [handleDownload])
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='md'
+            title='Artifacts'
+            buttons={(
+                <Button
+                    label='Close'
+                    onClick={props.onClose}
+                    primary
+                />
+            )}
+        >
+            <div className={styles.container}>
+                {isLoading && (
+                    <div className={styles.loading}>
+                        <LoadingSpinner inline />
+                    </div>
+                )}
+
+                {!isLoading && !!error && (
+                    <p className={styles.error}>{error}</p>
+                )}
+
+                {!isLoading && !error && artifacts.length === 0 && (
+                    <p className={styles.empty}>No artifacts found.</p>
+                )}
+
+                {!isLoading && !error && artifacts.length > 0 && (
+                    <ul className={styles.list}>
+                        {artifacts.map(artifactId => (
+                            <li className={styles.listItem} key={artifactId}>
+                                <span className={styles.artifactId}>{artifactId}</span>
+                                <Button
+                                    data-artifact-id={artifactId}
+                                    icon={IconOutline.DownloadIcon}
+                                    onClick={handleArtifactDownloadClick}
+                                    primary
+                                />
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </BaseModal>
+    )
+}
+
+export { DownloadArtifactsModal }
+export default DownloadArtifactsModal
diff --git a/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/index.ts b/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/index.ts
new file mode 100644
index 000000000..f04cd765c
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/DownloadArtifactsModal/index.ts
@@ -0,0 +1 @@
+export * from './DownloadArtifactsModal'
diff --git a/src/apps/community/src/pages/submission-management/components/ScreeningDetails/ScreeningDetails.module.scss b/src/apps/community/src/pages/submission-management/components/ScreeningDetails/ScreeningDetails.module.scss
new file mode 100644
index 000000000..42925b711
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/ScreeningDetails/ScreeningDetails.module.scss
@@ -0,0 +1,64 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background: #f9fbfc;
+    border: 1px solid var(--GrayBorder, #d0d0d0);
+    border-radius: 6px;
+    padding: $sp-3;
+}
+
+.header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    gap: $sp-2;
+}
+
+.title {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.message {
+    color: var(--GrayFontColor, #767676);
+    font-size: 13px;
+    margin: $sp-2 0 0;
+}
+
+.warnings {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+    margin-top: $sp-2;
+}
+
+.warningItem {
+    border-top: 1px solid var(--GrayBorder, #d0d0d0);
+    padding-top: $sp-2;
+}
+
+.warningTitle {
+    color: var(--Black, #2a2a2a);
+    font-size: 13px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.warningDetail {
+    color: var(--GrayFontColor, #767676);
+    font-size: 13px;
+    margin: $sp-1 0 0;
+}
+
+.passed {
+    color: #0ab88a;
+}
+
+.failed {
+    color: #ef476f;
+}
+
+.pending {
+    color: #ff8a00;
+}
diff --git a/src/apps/community/src/pages/submission-management/components/ScreeningDetails/ScreeningDetails.tsx b/src/apps/community/src/pages/submission-management/components/ScreeningDetails/ScreeningDetails.tsx
new file mode 100644
index 000000000..102dadaa3
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/ScreeningDetails/ScreeningDetails.tsx
@@ -0,0 +1,147 @@
+import {
+    FC,
+    useCallback,
+    useMemo,
+    useState,
+} from 'react'
+import classNames from 'classnames'
+
+import { Button } from '~/libs/ui'
+
+import styles from './ScreeningDetails.module.scss'
+
+interface ScreeningWarning {
+    brief?: string
+    details?: string
+}
+
+interface ScreeningObject {
+    status?: string
+    warnings?: ScreeningWarning[]
+}
+
+interface ScreeningDetailsProps {
+    screeningObject?: ScreeningObject
+    submissionId: string
+}
+
+interface ScreeningStatusInfo {
+    className: string
+    message: string
+    title: string
+}
+
+function resolveScreeningStatusInfo(
+    screeningObject: ScreeningObject | undefined,
+): ScreeningStatusInfo {
+    const status = (screeningObject?.status || '').toLowerCase()
+    const warnings = screeningObject?.warnings ?? []
+    const hasWarnings = warnings.length > 0
+
+    if (status === 'pending') {
+        return {
+            className: styles.pending,
+            message: 'Your submission has been received and will be screened after the phase ends.',
+            title: 'Pending',
+        }
+    }
+
+    if (status === 'passed' && !hasWarnings) {
+        return {
+            className: styles.passed,
+            message: 'You have passed screening.',
+            title: 'Passed Screening',
+        }
+    }
+
+    if (status === 'failed' && !hasWarnings) {
+        return {
+            className: styles.failed,
+            message: 'You have failed screening.',
+            title: 'Failed Screening',
+        }
+    }
+
+    if (status === 'passed' && hasWarnings) {
+        return {
+            className: styles.passed,
+            message: `You passed screening with ${warnings.length} warning(s).`,
+            title: 'Passed Screening With Warnings',
+        }
+    }
+
+    if (status === 'failed' && hasWarnings) {
+        return {
+            className: styles.failed,
+            message: 'You failed screening and received warning details.',
+            title: 'Failed Screening With Warnings',
+        }
+    }
+
+    return {
+        className: styles.pending,
+        message: 'Your submission may undergo AI-assisted review during the submission phase.',
+        title: 'Screening Status',
+    }
+}
+
+/**
+ * Renders screening status and warning details for one submission.
+ *
+ * @param props Screening payload and submission identifier.
+ * @returns Screening details block.
+ */
+const ScreeningDetails: FC<ScreeningDetailsProps> = (props: ScreeningDetailsProps) => {
+    const [expanded, setExpanded] = useState<boolean>(false)
+    const warnings = props.screeningObject?.warnings ?? []
+    const statusInfo = useMemo(
+        () => resolveScreeningStatusInfo(props.screeningObject),
+        [props.screeningObject],
+    )
+    const handleToggleExpanded = useCallback((): void => {
+        setExpanded(previous => !previous)
+    }, [])
+
+    return (
+        <div className={styles.container} data-submission-id={props.submissionId}>
+            <div className={styles.header}>
+                <p className={classNames(styles.title, statusInfo.className)}>
+                    {statusInfo.title}
+                </p>
+                {warnings.length > 0 && (
+                    <Button
+                        label={expanded ? 'Hide Details' : 'Show Details'}
+                        onClick={handleToggleExpanded}
+                        secondary
+                    />
+                )}
+            </div>
+
+            <p className={styles.message}>{statusInfo.message}</p>
+
+            {expanded && warnings.length > 0 && (
+                <div className={styles.warnings}>
+                    {warnings.map((warning, index) => (
+                        <div
+                            className={styles.warningItem}
+                            key={`${props.submissionId}-${warning.brief || ''}-${warning.details || ''}`}
+                        >
+                            <p className={styles.warningTitle}>
+                                Warning
+                                {' '}
+                                {index + 1}
+                                :
+                                {' '}
+                                {warning.brief || 'Details'}
+                            </p>
+                            <p className={styles.warningDetail}>{warning.details}</p>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export { ScreeningDetails }
+export default ScreeningDetails
diff --git a/src/apps/community/src/pages/submission-management/components/ScreeningDetails/index.ts b/src/apps/community/src/pages/submission-management/components/ScreeningDetails/index.ts
new file mode 100644
index 000000000..706932bf5
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/ScreeningDetails/index.ts
@@ -0,0 +1 @@
+export * from './ScreeningDetails'
diff --git a/src/apps/community/src/pages/submission-management/components/SubmissionsTable/SubmissionsTable.module.scss b/src/apps/community/src/pages/submission-management/components/SubmissionsTable/SubmissionsTable.module.scss
new file mode 100644
index 000000000..56e2c5859
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/SubmissionsTable/SubmissionsTable.module.scss
@@ -0,0 +1,39 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+}
+
+.idCell {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.v5Id {
+    color: var(--GrayFontColor, #767676);
+    font-size: 11px;
+}
+
+.actions {
+    align-items: center;
+    display: flex;
+    gap: $sp-1;
+    justify-content: center;
+}
+
+.detailsWrap {
+    display: block;
+    width: 100%;
+}
+
+.error {
+    color: #ef476f;
+    margin: 0;
+}
+
+:global(.TableCell.action) {
+    min-width: 220px;
+}
diff --git a/src/apps/community/src/pages/submission-management/components/SubmissionsTable/SubmissionsTable.tsx b/src/apps/community/src/pages/submission-management/components/SubmissionsTable/SubmissionsTable.tsx
new file mode 100644
index 000000000..9f7a62083
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/SubmissionsTable/SubmissionsTable.tsx
@@ -0,0 +1,403 @@
+import { FC, useCallback, useMemo, useState } from 'react'
+import moment from 'moment'
+
+import {
+    Button,
+    IconOutline,
+    Table,
+    TableColumn,
+    Tooltip,
+} from '~/libs/ui'
+
+import {
+    type ChallengeInfo,
+    downloadSubmissionArtifact,
+    fetchSubmissionArtifacts,
+    type SubmissionInfo,
+} from '../../../../lib'
+import { DownloadArtifactsModal } from '../DownloadArtifactsModal'
+import { ScreeningDetails } from '../ScreeningDetails'
+import { type WorkflowRun, WorkflowRuns } from '../WorkflowRuns'
+
+import styles from './SubmissionsTable.module.scss'
+
+const TERMINAL_STATUSES = [
+    'COMPLETED',
+    'FAILURE',
+    'CANCELLED',
+    'SUCCESS',
+]
+
+interface ScreeningWarning {
+    brief?: string
+    details?: string
+}
+
+interface ScreeningData {
+    status?: string
+    warnings?: ScreeningWarning[]
+}
+
+type WorkflowRunsData = WorkflowRun[] | Record<string, WorkflowRun>
+
+interface SubmissionWithDetails extends SubmissionInfo {
+    review?: Record<string, unknown> & {
+        workflowRuns?: WorkflowRunsData
+    }
+    screening?: ScreeningData
+    workflowRuns?: WorkflowRunsData
+}
+
+interface SubmissionsTableProps {
+    challenge: ChallengeInfo
+    isDesign: boolean
+    onDelete: (submissionId: string) => void
+    submissionPhaseStartDate?: string
+    submissions: SubmissionInfo[]
+}
+
+function getWorkflowRuns(
+    submission: SubmissionWithDetails,
+): WorkflowRunsData | undefined {
+    if (submission.workflowRuns) {
+        return submission.workflowRuns
+    }
+
+    return submission.review?.workflowRuns
+}
+
+function isWorkflowRunTerminal(
+    submission: SubmissionWithDetails,
+): boolean {
+    const runs = getWorkflowRuns(submission)
+
+    if (!runs) {
+        return true
+    }
+
+    const runValues = Array.isArray(runs)
+        ? runs
+        : Object.values(runs)
+
+    if (!runValues.length) {
+        return true
+    }
+
+    return runValues.every(run => TERMINAL_STATUSES.includes((run.status || '').toUpperCase()))
+}
+
+function canDeleteSubmission(
+    submission: SubmissionWithDetails,
+    submissionPhaseStartDate?: string,
+): boolean {
+    if (!submissionPhaseStartDate) {
+        return true
+    }
+
+    return moment(submission.created)
+        .isAfter(submissionPhaseStartDate)
+}
+
+function downloadBlob(blob: Blob, filename: string): void {
+    const objectUrl = window.URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = objectUrl
+    anchor.download = filename
+    document.body.appendChild(anchor)
+    anchor.click()
+    anchor.remove()
+    window.URL.revokeObjectURL(objectUrl)
+}
+
+function getScreeningLabel(screening: ScreeningData | undefined): string {
+    if (!screening?.status) {
+        return 'Pending'
+    }
+
+    const status = screening.status.toLowerCase()
+
+    if (status === 'passed') {
+        return screening.warnings?.length
+            ? 'Passed w/Warnings'
+            : 'Passed'
+    }
+
+    if (status === 'failed') {
+        return screening.warnings?.length
+            ? 'Failed w/Warnings'
+            : 'Failed'
+    }
+
+    if (status === 'pending') {
+        return 'Pending'
+    }
+
+    return screening.status
+}
+
+interface SubmissionActionButtonsProps {
+    deleteDisabled: boolean
+    isDesign: boolean
+    onDelete: (submissionId: string) => void
+    onDownload: (submission: SubmissionWithDetails) => void
+    onOpenArtifacts: (submissionId: string) => void
+    onToggleDetails: (submissionId: string) => void
+    showDetails: boolean
+    submission: SubmissionWithDetails
+}
+
+const SubmissionActionButtons: FC<SubmissionActionButtonsProps>
+    = (props: SubmissionActionButtonsProps) => {
+        const handleDeleteClick = useCallback((): void => {
+            props.onDelete(props.submission.id)
+        }, [props])
+
+        const handleDownloadClick = useCallback((): void => {
+            props.onDownload(props.submission)
+        }, [props])
+
+        const handleOpenArtifactsClick = useCallback((): void => {
+            props.onOpenArtifacts(props.submission.id)
+        }, [props])
+
+        const handleToggleDetailsClick = useCallback((): void => {
+            props.onToggleDetails(props.submission.id)
+        }, [props])
+
+        return (
+            <div className={styles.actions}>
+                <Button
+                    icon={IconOutline.DownloadIcon}
+                    onClick={handleDownloadClick}
+                    primary
+                />
+                <Button
+                    icon={IconOutline.CollectionIcon}
+                    onClick={handleOpenArtifactsClick}
+                    primary
+                />
+                {props.isDesign && (
+                    props.deleteDisabled
+                        ? (
+                            <Tooltip content='You can delete this submission only after the review is complete'>
+                                <Button
+                                    disabled
+                                    icon={IconOutline.TrashIcon}
+                                    primary
+                                />
+                            </Tooltip>
+                        )
+                        : (
+                            <Button
+                                icon={IconOutline.TrashIcon}
+                                onClick={handleDeleteClick}
+                                primary
+                            />
+                        )
+                )}
+                <Button
+                    icon={props.showDetails
+                        ? IconOutline.ChevronUpIcon
+                        : IconOutline.ChevronDownIcon}
+                    onClick={handleToggleDetailsClick}
+                    primary
+                />
+            </div>
+        )
+    }
+
+/**
+ * Table view for current-member submissions in challenge details.
+ *
+ * @param props Challenge context and submission handlers.
+ * @returns Submission rows with actions and expandable details.
+ */
+const SubmissionsTable: FC<SubmissionsTableProps> = (props: SubmissionsTableProps) => {
+    const [artifactsModalSubmissionId, setArtifactsModalSubmissionId] = useState<string | undefined>(undefined)
+    const [showDetails, setShowDetails] = useState<Record<string, boolean>>({})
+    const [tableError, setTableError] = useState<string>('')
+
+    const submissionRows = useMemo(
+        () => (props.submissions || []).map(submission => submission as SubmissionWithDetails),
+        [props.submissions],
+    )
+
+    const handleDownload = useCallback(async (submission: SubmissionWithDetails): Promise<void> => {
+        try {
+            const primaryArtifactBlob = await downloadSubmissionArtifact(submission.id, submission.id)
+            downloadBlob(primaryArtifactBlob, `submission-${submission.id}.zip`)
+            return
+        } catch {
+            // fallback to first artifact when direct artifact id lookup is not available
+        }
+
+        const artifacts = await fetchSubmissionArtifacts(submission.id)
+        const firstArtifactId = artifacts[0]
+
+        if (!firstArtifactId) {
+            throw new Error('No downloadable artifact found for this submission.')
+        }
+
+        const blob = await downloadSubmissionArtifact(submission.id, firstArtifactId)
+        downloadBlob(blob, `submission-${submission.id}.zip`)
+    }, [])
+    const handleDownloadWithError = useCallback((submission: SubmissionWithDetails): void => {
+        handleDownload(submission)
+            .catch(error => {
+                setTableError(
+                    error instanceof Error
+                        ? error.message
+                        : 'Failed to download submission.',
+                )
+            })
+    }, [handleDownload])
+
+    const toggleShowDetails = useCallback((submissionId: string): void => {
+        setShowDetails(previous => ({
+            ...previous,
+            [submissionId]: !previous[submissionId],
+        }))
+    }, [])
+    const handleOpenArtifactsModal = useCallback((submissionId: string): void => {
+        setArtifactsModalSubmissionId(submissionId)
+    }, [])
+    const handleCloseArtifactsModal = useCallback((): void => {
+        setArtifactsModalSubmissionId(undefined)
+    }, [])
+
+    const columns = useMemo<ReadonlyArray<TableColumn<SubmissionWithDetails>>>(() => {
+        const baseColumns: Array<TableColumn<SubmissionWithDetails>> = [
+            {
+                columnId: 'id',
+                isSortable: false,
+                label: 'ID',
+                renderer: submission => (
+                    <div className={styles.idCell}>
+                        <span>{submission.legacySubmissionId || '-'}</span>
+                        <span className={styles.v5Id}>{submission.id}</span>
+                    </div>
+                ),
+                type: 'element',
+            },
+            {
+                columnId: 'type',
+                isSortable: false,
+                label: 'Type',
+                propertyName: 'type',
+                type: 'text',
+            },
+            {
+                columnId: 'created',
+                isSortable: false,
+                label: 'Submission Date',
+                renderer: submission => (
+                    <span>
+                        {moment(submission.created)
+                            .local()
+                            .format('MMM DD, YYYY hh:mm A')}
+                    </span>
+                ),
+                type: 'element',
+            },
+        ]
+
+        if (props.isDesign) {
+            baseColumns.push({
+                columnId: 'screening',
+                isSortable: false,
+                label: 'Screening Status',
+                renderer: submission => (
+                    <span>{getScreeningLabel(submission.screening)}</span>
+                ),
+                type: 'element',
+            })
+        }
+
+        baseColumns.push({
+            columnId: 'actions',
+            isSortable: false,
+            label: 'Actions',
+            renderer: submission => {
+                const workflowComplete = isWorkflowRunTerminal(submission)
+                const canDelete = canDeleteSubmission(submission, props.submissionPhaseStartDate)
+                const deleteDisabled = !workflowComplete || !canDelete
+
+                return (
+                    <SubmissionActionButtons
+                        deleteDisabled={deleteDisabled}
+                        isDesign={props.isDesign}
+                        onDelete={props.onDelete}
+                        onDownload={handleDownloadWithError}
+                        onOpenArtifacts={handleOpenArtifactsModal}
+                        onToggleDetails={toggleShowDetails}
+                        showDetails={showDetails[submission.id]}
+                        submission={submission}
+                    />
+                )
+            },
+            type: 'action',
+        })
+
+        baseColumns.push({
+            columnId: 'details',
+            isExpand: true,
+            renderer: submission => (
+                <div className={styles.detailsWrap}>
+                    {showDetails[submission.id] && (
+                        <>
+                            <WorkflowRuns
+                                challengeId={props.challenge.id}
+                                workflowRuns={getWorkflowRuns(submission)}
+                            />
+                            {props.isDesign && (
+                                <ScreeningDetails
+                                    screeningObject={submission.screening}
+                                    submissionId={submission.id}
+                                />
+                            )}
+                        </>
+                    )}
+                </div>
+            ),
+            type: 'element',
+        })
+
+        return baseColumns
+    }, [
+        handleDownloadWithError,
+        handleOpenArtifactsModal,
+        props.challenge.id,
+        props.isDesign,
+        props.onDelete,
+        props.submissionPhaseStartDate,
+        showDetails,
+        toggleShowDetails,
+    ])
+
+    return (
+        <section className={styles.container}>
+            {!!tableError && (
+                <p className={styles.error}>{tableError}</p>
+            )}
+
+            <Table
+                columns={columns}
+                data={submissionRows}
+                disableSorting
+                expandMode='always'
+                preventDefault
+                showExpand
+            />
+
+            {artifactsModalSubmissionId && (
+                <DownloadArtifactsModal
+                    onClose={handleCloseArtifactsModal}
+                    submissionId={artifactsModalSubmissionId}
+                />
+            )}
+        </section>
+    )
+}
+
+export { SubmissionsTable }
+export default SubmissionsTable
diff --git a/src/apps/community/src/pages/submission-management/components/SubmissionsTable/index.ts b/src/apps/community/src/pages/submission-management/components/SubmissionsTable/index.ts
new file mode 100644
index 000000000..21a56744d
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/SubmissionsTable/index.ts
@@ -0,0 +1 @@
+export * from './SubmissionsTable'
diff --git a/src/apps/community/src/pages/submission-management/components/WorkflowRuns/WorkflowRuns.module.scss b/src/apps/community/src/pages/submission-management/components/WorkflowRuns/WorkflowRuns.module.scss
new file mode 100644
index 000000000..d3eb5b241
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/WorkflowRuns/WorkflowRuns.module.scss
@@ -0,0 +1,23 @@
+@import '@libs/ui/styles/includes';
+
+.wrapper {
+    margin-bottom: $sp-3;
+}
+
+.table {
+    border-collapse: collapse;
+    width: 100%;
+
+    th,
+    td {
+        border-bottom: 1px solid var(--GrayBorder, #d0d0d0);
+        font-size: 13px;
+        padding: $sp-2;
+        text-align: left;
+    }
+
+    th {
+        color: var(--GrayFontColor, #767676);
+        text-transform: uppercase;
+    }
+}
diff --git a/src/apps/community/src/pages/submission-management/components/WorkflowRuns/WorkflowRuns.tsx b/src/apps/community/src/pages/submission-management/components/WorkflowRuns/WorkflowRuns.tsx
new file mode 100644
index 000000000..38c0b6970
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/WorkflowRuns/WorkflowRuns.tsx
@@ -0,0 +1,127 @@
+import { FC, useMemo } from 'react'
+import moment from 'moment'
+
+import styles from './WorkflowRuns.module.scss'
+
+const TABLE_DATE_FORMAT = 'MMM DD YYYY, HH:mm A'
+
+interface WorkflowInfo {
+    id?: string
+    name?: string
+    scorecard?: {
+        minimumPassingScore?: number
+    }
+}
+
+interface WorkflowRun {
+    completedAt?: string
+    createdAt?: string
+    score?: number
+    status?: string
+    workflow?: WorkflowInfo
+}
+
+interface WorkflowRunsProps {
+    challengeId: string
+    workflowRuns?: WorkflowRun[] | Record<string, WorkflowRun>
+}
+
+function toRuns(
+    workflowRuns: WorkflowRunsProps['workflowRuns'],
+): WorkflowRun[] {
+    if (!workflowRuns) {
+        return []
+    }
+
+    return Array.isArray(workflowRuns)
+        ? workflowRuns
+        : Object.values(workflowRuns)
+}
+
+function getRunStatusText(run: WorkflowRun): string {
+    const status = (run.status || '').toUpperCase()
+
+    if (status === 'IN_PROGRESS' || status === 'QUEUED') {
+        return 'PENDING'
+    }
+
+    if (status === 'FAILED' || status === 'FAILURE' || status === 'CANCELLED') {
+        return 'FAILED'
+    }
+
+    if (status === 'SUCCESS' || status === 'COMPLETED') {
+        const minimumPassingScore = run.workflow?.scorecard?.minimumPassingScore || 0
+        const score = run.score || 0
+        return score >= minimumPassingScore
+            ? 'PASSED'
+            : 'FAILED'
+    }
+
+    return status || 'UNKNOWN'
+}
+
+function getRunKey(
+    challengeId: string,
+    run: WorkflowRun,
+): string {
+    return [
+        challengeId,
+        run.workflow?.id || run.workflow?.name || 'workflow',
+        run.createdAt || run.completedAt || 'date',
+        run.status || 'status',
+    ].join('-')
+}
+
+/**
+ * Displays workflow run statuses associated with a submission.
+ *
+ * @param props Workflow runs grouped by submission.
+ * @returns Workflow runs table.
+ */
+const WorkflowRuns: FC<WorkflowRunsProps> = (props: WorkflowRunsProps) => {
+    const runs = useMemo(() => toRuns(props.workflowRuns)
+        .sort((runA, runB) => {
+            const timeA = +(new Date(runA.createdAt || runA.completedAt || 0))
+            const timeB = +(new Date(runB.createdAt || runB.completedAt || 0))
+            return timeB - timeA
+        }), [props.workflowRuns])
+
+    if (!runs.length) {
+        return <></>
+    }
+
+    return (
+        <div className={styles.wrapper}>
+            <table className={styles.table}>
+                <thead>
+                    <tr>
+                        <th>Workflow</th>
+                        <th>Created Date</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {runs.map(run => (
+                        <tr key={getRunKey(props.challengeId, run)}>
+                            <td>{run.workflow?.name || 'AI Reviewer'}</td>
+                            <td>
+                                {(run.createdAt || run.completedAt)
+                                    ? moment(run.createdAt || run.completedAt)
+                                        .local()
+                                        .format(TABLE_DATE_FORMAT)
+                                    : '-'}
+                            </td>
+                            <td>{getRunStatusText(run)}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+export type {
+    WorkflowRun,
+}
+export { WorkflowRuns }
+export default WorkflowRuns
diff --git a/src/apps/community/src/pages/submission-management/components/WorkflowRuns/index.ts b/src/apps/community/src/pages/submission-management/components/WorkflowRuns/index.ts
new file mode 100644
index 000000000..f7022d437
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/components/WorkflowRuns/index.ts
@@ -0,0 +1 @@
+export * from './WorkflowRuns'
diff --git a/src/apps/community/src/pages/submission-management/index.ts b/src/apps/community/src/pages/submission-management/index.ts
new file mode 100644
index 000000000..2c9725fdf
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/index.ts
@@ -0,0 +1 @@
+export * from './submission-management.routes'
diff --git a/src/apps/community/src/pages/submission-management/submission-management.routes.tsx b/src/apps/community/src/pages/submission-management/submission-management.routes.tsx
new file mode 100644
index 000000000..30936f037
--- /dev/null
+++ b/src/apps/community/src/pages/submission-management/submission-management.routes.tsx
@@ -0,0 +1,16 @@
+import { PlatformRoute } from '~/libs/core'
+
+import { submissionManagementRouteId } from '../../config/routes.config'
+
+import SubmissionManagementPage from './SubmissionManagementPage'
+
+/**
+ * Route definitions for submission management page module.
+ */
+export const submissionManagementRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: true,
+        element: <SubmissionManagementPage />,
+        route: submissionManagementRouteId,
+    },
+]
diff --git a/src/apps/community/src/pages/submission/SubmissionPage.module.scss b/src/apps/community/src/pages/submission/SubmissionPage.module.scss
new file mode 100644
index 000000000..796e76510
--- /dev/null
+++ b/src/apps/community/src/pages/submission/SubmissionPage.module.scss
@@ -0,0 +1,132 @@
+@import '@libs/ui/styles/includes';
+
+.page {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-4;
+    margin: 0 auto;
+    max-width: 1240px;
+    padding: $sp-6 $sp-4 $sp-8;
+    width: 100%;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+
+    h1 {
+        color: var(--Black, #2a2a2a);
+        font-size: 30px;
+        margin: 0;
+    }
+}
+
+.form {
+    background: #fff;
+    border: 1px solid var(--GrayBorder, #d0d0d0);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+}
+
+.columns {
+    display: grid;
+    gap: $sp-5;
+    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
+    padding: $sp-5;
+}
+
+.leftColumn {
+    h2 {
+        margin: 0 0 $sp-2;
+    }
+}
+
+.rightColumn {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+}
+
+.instructions {
+    color: var(--GrayFontColor, #767676);
+    font-size: 14px;
+    line-height: 22px;
+}
+
+.subText {
+    margin: 0 0 $sp-2;
+}
+
+.steps {
+    margin: 0;
+    padding-left: $sp-5;
+}
+
+.warning {
+    color: #ef476f;
+    margin: $sp-2 0 0;
+}
+
+.terms {
+    border-top: 1px solid var(--GrayBorder, #d0d0d0);
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+    padding: $sp-4 $sp-5;
+
+    p {
+        color: var(--GrayFontColor, #767676);
+        margin: 0;
+    }
+}
+
+.agreeControl {
+    align-items: center;
+    display: inline-flex;
+    gap: $sp-2;
+    width: fit-content;
+}
+
+.submitRow {
+    border-top: 1px solid var(--GrayBorder, #d0d0d0);
+    display: flex;
+    justify-content: flex-end;
+    padding: $sp-4 $sp-5;
+}
+
+.accessDenied,
+.notPermitted {
+    background: #fff;
+    border: 1px solid var(--GrayBorder, #d0d0d0);
+    border-radius: 8px;
+    padding: $sp-5;
+    text-align: center;
+}
+
+.errorText {
+    color: #ef476f;
+    margin: 0;
+}
+
+.spinnerWrap {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 360px;
+}
+
+@media (max-width: 900px) {
+    .columns {
+        grid-template-columns: 1fr;
+    }
+
+    .submitRow {
+        justify-content: stretch;
+
+        :global(.btn) {
+            width: 100%;
+        }
+    }
+}
diff --git a/src/apps/community/src/pages/submission/SubmissionPage.tsx b/src/apps/community/src/pages/submission/SubmissionPage.tsx
new file mode 100644
index 000000000..98c7db613
--- /dev/null
+++ b/src/apps/community/src/pages/submission/SubmissionPage.tsx
@@ -0,0 +1,424 @@
+/* eslint-disable complexity */
+import {
+    ChangeEvent,
+    FC,
+    FormEvent,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
+import { generatePath, useNavigate, useParams, useSearchParams } from 'react-router-dom'
+
+import { EnvironmentConfig } from '~/config'
+import { authUrlLogin, profileContext, ProfileContextData } from '~/libs/core'
+import {
+    Button,
+    LinkButton,
+    LoadingSpinner,
+} from '~/libs/ui'
+
+import {
+    challengeDetailRouteId,
+    challengeListingRouteId,
+    rootRoute,
+} from '../../config/routes.config'
+import {
+    hasOpenSubmissionPhase,
+    useChallenge,
+    useCommunityMeta,
+    useSubmitChallenge,
+} from '../../lib'
+import type {
+    BackendChallengePhase,
+    ChallengeInfo,
+    SubmitChallengeType,
+    UseChallengeResult,
+    UseCommunityMetaResult,
+    UseSubmitChallengeResult,
+} from '../../lib'
+
+import {
+    FilePicker,
+    type FilestackData,
+} from './components/FilePicker'
+import { UploadingState } from './components/UploadingState'
+import styles from './SubmissionPage.module.scss'
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function getPhaseName(phase: BackendChallengePhase): string {
+    const extendedPhase = phase as BackendChallengePhase & { phaseType?: string }
+    return (extendedPhase.phaseType || phase.name || '').toLowerCase()
+}
+
+function isCompleted(challenge: ChallengeInfo): boolean {
+    return `${challenge.status}`.toLowerCase() === 'completed'
+}
+
+function isOpenPhase(
+    phase: BackendChallengePhase | undefined,
+): boolean {
+    return phase?.isOpen === true
+}
+
+function getSubmissionType(
+    phases: BackendChallengePhase[],
+): SubmitChallengeType {
+    const checkpointPhase = phases.find(phase => getPhaseName(phase) === 'checkpoint submission')
+    const submissionPhase = phases.find(phase => getPhaseName(phase) === 'submission')
+    const finalFixPhase = phases.find(phase => getPhaseName(phase) === 'final fix')
+
+    if (isOpenPhase(checkpointPhase)) {
+        return 'CHECKPOINT_SUBMISSION'
+    }
+
+    if (checkpointPhase && !isOpenPhase(checkpointPhase) && isOpenPhase(submissionPhase)) {
+        return 'CONTEST_SUBMISSION'
+    }
+
+    if (isOpenPhase(finalFixPhase)) {
+        return 'STUDIO_FINAL_FIX_SUBMISSION'
+    }
+
+    return 'CONTEST_SUBMISSION'
+}
+
+function getTopGearInstructionText(): JSX.Element {
+    return (
+        <>
+            <p className={styles.subText}>Steps for Submission:</p>
+            <ol className={styles.steps}>
+                <li>Upload the challenge deliverable to the approved repository.</li>
+                <li>Copy the deliverable URL and click &quot;SET URL&quot;.</li>
+                <li>Check the agreement box.</li>
+                <li>Click Submit.</li>
+            </ol>
+            <p className={styles.warning}>
+                Ensure that the submitted link reflects the deliverable for this challenge only.
+            </p>
+        </>
+    )
+}
+
+function getStandardInstructionText(trackName: string): JSX.Element {
+    const normalizedTrack = trackName.toLowerCase()
+    const isDesign = normalizedTrack.includes('design')
+    const isEngineeringTrack = normalizedTrack.includes('development')
+        || normalizedTrack.includes('data science')
+        || normalizedTrack.includes('qa')
+
+    return (
+        <>
+            <p>
+                Please follow the instructions on the challenge details page for how your submission
+                should be organized.
+            </p>
+            {isEngineeringTrack && (
+                <p className={styles.subText}>
+                    Upload your entire submission as a single .zip file.
+                </p>
+            )}
+            {isDesign && (
+                <ol className={styles.steps}>
+                    <li>Place your files into a Submission.zip file.</li>
+                    <li>Place source files into a Source.zip file.</li>
+                    <li>Create a .jpg preview file.</li>
+                    <li>Create Declaration.txt describing used assets/fonts/icons.</li>
+                    <li>Zip these files into a single .zip and upload it.</li>
+                </ol>
+            )}
+        </>
+    )
+}
+
+/**
+ * Challenge submission page.
+ *
+ * @returns Submission upload page content.
+ */
+const SubmissionPage: FC = () => {
+    const { challengeId }: { challengeId?: string } = useParams<{ challengeId: string }>()
+    const [searchParams] = useSearchParams()
+    const navigate = useNavigate()
+    const { isLoggedIn, profile }: ProfileContextData = useContext(profileContext)
+
+    const [selectedFile, setSelectedFile] = useState<FilestackData | undefined>(undefined)
+    const [filePickerError, setFilePickerError] = useState<string>('')
+
+    const communityId = searchParams.get('communityId') ?? undefined
+    const {
+        challenge,
+        isLoading: isLoadingChallenge,
+    }: UseChallengeResult = useChallenge(challengeId)
+    const {
+        communityMeta,
+    }: UseCommunityMetaResult = useCommunityMeta(communityId)
+    const {
+        agreed,
+        error,
+        isSubmitting,
+        reset,
+        setAgreed,
+        submit,
+        submitDone,
+        uploadProgress,
+    }: UseSubmitChallengeResult = useSubmitChallenge()
+
+    const queryString = searchParams.toString()
+    const isTopGear = communityMeta?.mainSubdomain === 'topgear'
+    const hasRegistered = challenge?.isRegistered === true
+
+    const challengeDetailPath = useMemo(() => withLeadingSlash(
+        `${rootRoute}/${generatePath(challengeDetailRouteId, {
+            challengeId: challengeId ?? '',
+        })}`,
+    )
+        .replace(/\/{2,}/g, '/'), [challengeId])
+    const challengeDetailUrl = useMemo(() => (
+        queryString
+            ? `${challengeDetailPath}?${queryString}`
+            : challengeDetailPath
+    ), [challengeDetailPath, queryString])
+    const challengesUrl = useMemo(() => withLeadingSlash(
+        `${rootRoute}/${challengeListingRouteId}`,
+    )
+        .replace(/\/{2,}/g, '/'), [])
+    const challengesListingUrl = useMemo(() => (
+        queryString
+            ? `${challengesUrl}?${queryString}`
+            : challengesUrl
+    ), [challengesUrl, queryString])
+
+    const submissionType = useMemo<SubmitChallengeType>(() => {
+        if (!challenge?.phases?.length) {
+            return 'CONTEST_SUBMISSION'
+        }
+
+        return getSubmissionType(challenge.phases)
+    }, [challenge?.phases])
+
+    const submissionPermitted = useMemo(() => {
+        if (!challenge) {
+            return false
+        }
+
+        const submissionEnded = isCompleted(challenge) || !hasOpenSubmissionPhase(challenge.phases)
+        const hasFirstPlacement = (challenge.winners || []).some(winner => (
+            winner.placement === 1
+            && !!winner.handle
+            && winner.handle === profile?.handle
+        ))
+        const canSubmitFinalFixes = hasFirstPlacement && challenge.phases.some(phase => (
+            getPhaseName(phase) === 'final fix'
+            && phase.isOpen === true
+        ))
+
+        return !submissionEnded || canSubmitFinalFixes
+    }, [challenge, profile?.handle])
+
+    const submitDisabled = !agreed || !selectedFile?.filename || !!filePickerError
+    const shouldRenderUploadingState = isSubmitting || submitDone || !!error
+
+    useEffect(() => {
+        if (!isLoggedIn) {
+            window.location.assign(authUrlLogin(window.location.href))
+        }
+    }, [isLoggedIn])
+
+    const resetSubmissionForm = useCallback((): void => {
+        reset()
+        setSelectedFile(undefined)
+        setFilePickerError('')
+    }, [reset])
+
+    const submitSelectedFile = useCallback(async (): Promise<void> => {
+        if (!challengeId || !profile?.userId || !selectedFile) {
+            return
+        }
+
+        await submit({
+            challengeId,
+            fileType: selectedFile.fileType,
+            memberId: `${profile.userId}`,
+            type: submissionType,
+            url: selectedFile.fileUrl,
+        })
+    }, [challengeId, profile?.userId, selectedFile, submit, submissionType])
+
+    const handleSubmit = useCallback(async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+        event.preventDefault()
+        await submitSelectedFile()
+    }, [submitSelectedFile])
+    const handleBackToChallenge = useCallback((): void => {
+        navigate(challengeDetailUrl)
+    }, [challengeDetailUrl, navigate])
+
+    const handleFileSelected = useCallback((data: FilestackData): void => {
+        setSelectedFile(data)
+        setFilePickerError('')
+    }, [])
+
+    const handleFileError = useCallback((message: string): void => {
+        setFilePickerError(message)
+    }, [])
+
+    const handleAgreeChange = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
+        setAgreed(event.target.checked)
+    }, [setAgreed])
+
+    if (!isLoggedIn) {
+        return <LoadingSpinner />
+    }
+
+    if (isLoadingChallenge || !challenge) {
+        return (
+            <div className={styles.spinnerWrap}>
+                <LoadingSpinner />
+            </div>
+        )
+    }
+
+    if (!hasRegistered) {
+        return (
+            <section className={styles.page}>
+                <div className={styles.header}>
+                    <LinkButton label='Back to Challenge' secondary to={challengeDetailUrl} />
+                </div>
+                <div className={styles.accessDenied}>
+                    <h2>Access Denied</h2>
+                    <p>You must register for this challenge before submitting.</p>
+                    <LinkButton label='Go to Challenge Details' primary to={challengeDetailUrl} />
+                </div>
+            </section>
+        )
+    }
+
+    if (!submissionPermitted) {
+        return (
+            <section className={styles.page}>
+                <div className={styles.header}>
+                    <LinkButton label='Back to Challenge' secondary to={challengeDetailUrl} />
+                </div>
+                <div className={styles.notPermitted}>
+                    <h2>Submissions are not permitted at this time.</h2>
+                </div>
+            </section>
+        )
+    }
+
+    if (shouldRenderUploadingState) {
+        return (
+            <section className={styles.page}>
+                <div className={styles.header}>
+                    <LinkButton label='Back to Challenges' secondary to={challengesListingUrl} />
+                </div>
+
+                <UploadingState
+                    challengeId={challenge.id}
+                    challengeName={challenge.name}
+                    challengesUrl={challengesListingUrl}
+                    error={error}
+                    isSubmitting={isSubmitting}
+                    onBack={handleBackToChallenge}
+                    onReset={resetSubmissionForm}
+                    onRetry={submitSelectedFile}
+                    submitDone={submitDone}
+                    track={challenge.track.name}
+                    uploadProgress={uploadProgress}
+                />
+            </section>
+        )
+    }
+
+    return (
+        <section className={styles.page}>
+            <div className={styles.header}>
+                <LinkButton label='Back to Challenge Details' secondary to={challengeDetailUrl} />
+                <h1>{challenge.name}</h1>
+            </div>
+
+            <form className={styles.form} onSubmit={handleSubmit}>
+                <div className={styles.columns}>
+                    <div className={styles.leftColumn}>
+                        <h2>{isTopGear ? 'URL' : 'Submission Upload'}</h2>
+                        <div className={styles.instructions}>
+                            {isTopGear
+                                ? getTopGearInstructionText()
+                                : getStandardInstructionText(challenge.track.name)}
+                        </div>
+                    </div>
+
+                    <div className={styles.rightColumn}>
+                        <FilePicker
+                            challengeId={challenge.id}
+                            isTopGear={isTopGear}
+                            onError={handleFileError}
+                            onFileSelected={handleFileSelected}
+                            userId={`${profile?.userId ?? ''}`}
+                        />
+                        {!!filePickerError && (
+                            <p className={styles.errorText}>{filePickerError}</p>
+                        )}
+                    </div>
+                </div>
+
+                <div className={styles.terms}>
+                    <p>
+                        {isTopGear
+                            ? (
+                                <>
+                                    Submitting your link means you agree to the
+                                    {' '}
+                                    <a
+                                        href={EnvironmentConfig.NDA_TERMS_URL}
+                                        rel='noreferrer noopener'
+                                        target='_blank'
+                                    >
+                                        TopGear terms and conditions
+                                    </a>
+                                    .
+                                </>
+                            )
+                            : (
+                                <>
+                                    Submitting your files means you agree to the
+                                    {' '}
+                                    <a
+                                        href={EnvironmentConfig.TERMS_URL}
+                                        rel='noreferrer noopener'
+                                        target='_blank'
+                                    >
+                                        Topcoder terms of use
+                                    </a>
+                                    .
+                                </>
+                            )}
+                    </p>
+
+                    <label className={styles.agreeControl} htmlFor='submission-agree'>
+                        <input
+                            checked={agreed}
+                            id='submission-agree'
+                            onChange={handleAgreeChange}
+                            type='checkbox'
+                        />
+                        <span>I understand and agree</span>
+                    </label>
+                </div>
+
+                <div className={styles.submitRow}>
+                    <Button disabled={submitDisabled} label='Submit' primary type='submit' />
+                </div>
+            </form>
+        </section>
+    )
+}
+
+export { SubmissionPage }
+export default SubmissionPage
diff --git a/src/apps/community/src/pages/submission/components/FilePicker/FilePicker.module.scss b/src/apps/community/src/pages/submission/components/FilePicker/FilePicker.module.scss
new file mode 100644
index 000000000..3ed9bcd65
--- /dev/null
+++ b/src/apps/community/src/pages/submission/components/FilePicker/FilePicker.module.scss
@@ -0,0 +1,78 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+}
+
+.description {
+    color: var(--GrayFontColor, #767676);
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+}
+
+.picker {
+    align-items: center;
+    background: #fff;
+    border: 1px dashed var(--GrayBorder, #d0d0d0);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+    min-height: 220px;
+    justify-content: center;
+    padding: $sp-5;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.drag {
+    background: #f3fbfb;
+    border-color: var(--turq-160, #0ab88a);
+}
+
+.topgear {
+    align-items: stretch;
+    min-height: 180px;
+}
+
+.filename {
+    color: var(--Black, #2a2a2a);
+    font-size: 14px;
+    font-weight: 500;
+    margin: 0;
+    word-break: break-word;
+}
+
+.upload {
+    color: var(--GrayFontColor, #767676);
+    font-size: 13px;
+    margin: 0;
+}
+
+.urlInputContainer {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+    width: 100%;
+
+    input {
+        border: 1px solid var(--GrayBorder, #d0d0d0);
+        border-radius: 6px;
+        font-size: 14px;
+        height: 42px;
+        padding: 0 $sp-3;
+        width: 100%;
+    }
+}
+
+.invalidMessage {
+    color: #ef476f;
+    font-size: 12px;
+    line-height: 18px;
+}
+
+.inputInvalid {
+    border-color: #ef476f !important;
+}
diff --git a/src/apps/community/src/pages/submission/components/FilePicker/FilePicker.tsx b/src/apps/community/src/pages/submission/components/FilePicker/FilePicker.tsx
new file mode 100644
index 000000000..2249a1660
--- /dev/null
+++ b/src/apps/community/src/pages/submission/components/FilePicker/FilePicker.tsx
@@ -0,0 +1,326 @@
+/* eslint-disable complexity */
+import {
+    ChangeEvent,
+    DragEvent,
+    FC,
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
+import {
+    Client,
+    init,
+    PickerFileMetadata,
+    PickerOptions,
+    StoreUploadOptions,
+    UploadOptions,
+} from 'filestack-js'
+import classNames from 'classnames'
+
+import { EnvironmentConfig } from '~/config'
+import { Button } from '~/libs/ui'
+
+import styles from './FilePicker.module.scss'
+
+// eslint-disable-next-line max-len
+const URL_REGEX = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i
+
+export interface FilestackData {
+    container: string
+    fileType?: string
+    fileUrl: string
+    filename: string
+    key: string
+    mimetype: string
+    size: number
+}
+
+export interface FilePickerProps {
+    challengeId: string
+    isTopGear: boolean
+    onError: (message: string) => void
+    onFileSelected: (data: FilestackData) => void
+    userId: string
+}
+
+function getDomainRegexPattern(): string | undefined {
+    const pattern = EnvironmentConfig.TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS?.trim()
+    return pattern || undefined
+}
+
+function isDomainAllowed(url: string): boolean {
+    const pattern = getDomainRegexPattern()
+    if (!pattern) {
+        return true
+    }
+
+    const domainReg = new RegExp(`^https?://(${pattern})/.+`)
+    return domainReg.test(url)
+}
+
+function extractFilenameFromUrl(url: string): string {
+    const noQuery = url.split('?')[0]
+    const name = noQuery.substring(noQuery.lastIndexOf('/') + 1)
+    return name || 'submission-url'
+}
+
+/**
+ * Filestack-based picker for challenge submissions.
+ *
+ * @param props Challenge, member and callback context for file selection.
+ * @returns Submission upload picker UI.
+ */
+const FilePicker: FC<FilePickerProps> = (props: FilePickerProps) => {
+    const [client, setClient] = useState<Client | undefined>(undefined)
+    const [dragged, setDragged] = useState<boolean>(false)
+    const [fileName, setFileName] = useState<string>('')
+    const [inputUrl, setInputUrl] = useState<string>('')
+    const [invalidDomain, setInvalidDomain] = useState<boolean>(false)
+    const [invalidUrl, setInvalidUrl] = useState<boolean>(false)
+    const [uploadProgress, setUploadProgress] = useState<number | undefined>(undefined)
+
+    useEffect(() => {
+        if (props.isTopGear) {
+            return
+        }
+
+        try {
+            const nextClient = init(EnvironmentConfig.FILESTACK.API_KEY, {
+                cname: EnvironmentConfig.FILESTACK.CNAME,
+                security: EnvironmentConfig.FILESTACK.SECURITY
+                    ? {
+                        policy: EnvironmentConfig.FILESTACK.SECURITY.POLICY,
+                        signature: EnvironmentConfig.FILESTACK.SECURITY.SIGNATURE,
+                    }
+                    : undefined,
+            })
+            setClient(nextClient)
+        } catch (error) {
+            props.onError(
+                error instanceof Error
+                    ? error.message
+                    : 'Failed to initialize uploader.',
+            )
+        }
+    }, [props.isTopGear, props.onError])
+
+    const getStorePath = useCallback((): string => (
+        `${props.challengeId}-${props.userId}-SUBMISSION_ZIP-${Date.now()}.zip`
+    ), [props.challengeId, props.userId])
+
+    const onUploadSuccess = useCallback((file: PickerFileMetadata, path: string): void => {
+        const container = file.container || EnvironmentConfig.FILESTACK.CONTAINER
+        const selectedFileName = file.filename || file.originalPath || path
+        setFileName(selectedFileName)
+        setUploadProgress(undefined)
+        props.onError('')
+        props.onFileSelected({
+            container,
+            filename: selectedFileName,
+            fileUrl: `https://s3.amazonaws.com/${container}/${path}`,
+            key: file.key || path,
+            mimetype: file.mimetype || '',
+            size: file.size || 0,
+        })
+    }, [props.onError, props.onFileSelected])
+
+    const handleOpenPicker = useCallback((): void => {
+        if (!client) {
+            props.onError('Uploader is not ready yet.')
+            return
+        }
+
+        const path = getStorePath()
+        const storeTo = {
+            container: EnvironmentConfig.FILESTACK.CONTAINER,
+            path,
+            region: EnvironmentConfig.FILESTACK.REGION,
+        }
+        const pickerOptions: PickerOptions = {
+            accept: ['.zip'],
+            fromSources: [
+                'local_file_system',
+                'googledrive',
+                'dropbox',
+                'onedrive',
+                'github',
+                'url',
+            ],
+            maxSize: 500 * 1024 * 1024,
+            onFileUploadFailed: () => props.onError('File upload failed.'),
+            onFileUploadFinished: file => onUploadSuccess(file, path),
+            startUploadingWhenMaxFilesReached: true,
+            storeTo,
+        }
+
+        client.picker(pickerOptions)
+            .open()
+    }, [client, getStorePath, onUploadSuccess, props.onError])
+
+    const handleDrop = useCallback(async (event: DragEvent<HTMLDivElement>): Promise<void> => {
+        event.preventDefault()
+        event.stopPropagation()
+        setDragged(false)
+
+        if (!client) {
+            props.onError('Uploader is not ready yet.')
+            return
+        }
+
+        const file = event.dataTransfer.files?.[0]
+        if (!file) {
+            return
+        }
+
+        if (!file.name.endsWith('.zip')) {
+            props.onError('Wrong file type. Please upload a .zip file.')
+            return
+        }
+
+        setFileName(file.name)
+        setUploadProgress(0)
+        props.onError('')
+
+        const path = getStorePath()
+        const uploadOptions: UploadOptions = {
+            onProgress: progress => {
+                setUploadProgress(progress.totalPercent ?? 0)
+            },
+            progressInterval: 1000,
+        }
+        const storeTo: StoreUploadOptions = {
+            container: EnvironmentConfig.FILESTACK.CONTAINER,
+            path,
+            region: EnvironmentConfig.FILESTACK.REGION,
+        }
+
+        try {
+            const uploadedFile = await client.upload(file, uploadOptions, storeTo)
+            onUploadSuccess(uploadedFile as PickerFileMetadata, path)
+        } catch (error) {
+            props.onError(
+                error instanceof Error
+                    ? error.message
+                    : 'File upload failed.',
+            )
+            setUploadProgress(undefined)
+        }
+    }, [client, getStorePath, onUploadSuccess, props.onError])
+
+    const handleSetTopGearUrl = useCallback((): void => {
+        const validUrl = URL_REGEX.test(inputUrl)
+        const validDomain = isDomainAllowed(inputUrl)
+
+        if (!validUrl || !validDomain) {
+            setInvalidUrl(!validUrl)
+            setInvalidDomain(validUrl && !validDomain)
+            props.onError(
+                !validUrl
+                    ? 'Invalid URL.'
+                    : 'Ensure that you submit a valid allowed SharePoint link only.',
+            )
+            return
+        }
+
+        setInvalidUrl(false)
+        setInvalidDomain(false)
+        props.onError('')
+
+        const filename = extractFilenameFromUrl(inputUrl)
+        setFileName(filename)
+        props.onFileSelected({
+            container: EnvironmentConfig.FILESTACK.CONTAINER,
+            filename,
+            fileType: 'url',
+            fileUrl: inputUrl,
+            key: '',
+            mimetype: '',
+            size: 0,
+        })
+    }, [inputUrl, props.onError, props.onFileSelected])
+
+    const handleDragEnter = useCallback((): void => {
+        setDragged(true)
+    }, [])
+    const handleDragLeave = useCallback((): void => {
+        setDragged(false)
+    }, [])
+    const handleDragOver = useCallback((event: DragEvent<HTMLDivElement>): void => {
+        event.preventDefault()
+    }, [])
+    const handleInputUrlChange = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
+        setInputUrl(event.target.value)
+    }, [])
+
+    const progressLabel = useMemo(() => {
+        if (uploadProgress === undefined || uploadProgress >= 100) {
+            return undefined
+        }
+
+        return `${uploadProgress.toFixed(0)}%`
+    }, [uploadProgress])
+
+    return (
+        <div className={styles.container}>
+            <p className={styles.description}>
+                {props.isTopGear
+                    ? 'Set your submission URL.'
+                    : 'Drag and drop your .zip file here or use the picker.'}
+            </p>
+
+            <div
+                className={classNames(
+                    styles.picker,
+                    dragged && styles.drag,
+                    props.isTopGear && styles.topgear,
+                )}
+                onDragEnter={!props.isTopGear ? handleDragEnter : undefined}
+                onDragLeave={!props.isTopGear ? handleDragLeave : undefined}
+                onDragOver={!props.isTopGear ? handleDragOver : undefined}
+                onDrop={!props.isTopGear ? handleDrop : undefined}
+            >
+                {!!fileName && (
+                    <p className={styles.filename}>
+                        {fileName}
+                    </p>
+                )}
+
+                {!!progressLabel && (
+                    <p className={styles.upload}>
+                        Uploading:
+                        {' '}
+                        {progressLabel}
+                    </p>
+                )}
+
+                {props.isTopGear && (
+                    <div className={styles.urlInputContainer}>
+                        {invalidUrl && <div className={styles.invalidMessage}>* Invalid URL</div>}
+                        {invalidDomain && (
+                            <div className={styles.invalidMessage}>
+                                Ensure that you submit a valid allowed domain link only.
+                            </div>
+                        )}
+                        <input
+                            className={classNames(invalidUrl && styles.inputInvalid)}
+                            onChange={handleInputUrlChange}
+                            placeholder='URL'
+                            type='text'
+                            value={inputUrl}
+                        />
+                    </div>
+                )}
+
+                <Button
+                    label={props.isTopGear ? 'SET URL' : 'SELECT A FILE'}
+                    onClick={props.isTopGear ? handleSetTopGearUrl : handleOpenPicker}
+                    primary
+                />
+            </div>
+        </div>
+    )
+}
+
+export { FilePicker }
+export default FilePicker
diff --git a/src/apps/community/src/pages/submission/components/FilePicker/index.ts b/src/apps/community/src/pages/submission/components/FilePicker/index.ts
new file mode 100644
index 000000000..6b04886ba
--- /dev/null
+++ b/src/apps/community/src/pages/submission/components/FilePicker/index.ts
@@ -0,0 +1 @@
+export * from './FilePicker'
diff --git a/src/apps/community/src/pages/submission/components/UploadingState/UploadingState.module.scss b/src/apps/community/src/pages/submission/components/UploadingState/UploadingState.module.scss
new file mode 100644
index 000000000..767b2fea3
--- /dev/null
+++ b/src/apps/community/src/pages/submission/components/UploadingState/UploadingState.module.scss
@@ -0,0 +1,56 @@
+@import '@libs/ui/styles/includes';
+
+.panel {
+    align-items: center;
+    background: #fff;
+    border: 1px solid var(--GrayBorder, #d0d0d0);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+    margin: 0 auto;
+    max-width: 620px;
+    padding: $sp-6 $sp-5;
+    text-align: center;
+    width: 100%;
+}
+
+.title {
+    color: var(--Black, #2a2a2a);
+    font-size: 24px;
+    margin: 0;
+}
+
+.challengeName {
+    color: var(--GrayFontColor, #767676);
+    margin: 0;
+}
+
+.loading {
+    margin: $sp-1 0;
+}
+
+.progressText {
+    color: var(--GrayFontColor, #767676);
+    margin: 0;
+}
+
+.error {
+    color: #ef476f;
+    margin: 0;
+    max-width: 420px;
+}
+
+.actions {
+    display: flex;
+    gap: $sp-3;
+    justify-content: center;
+    margin-top: $sp-2;
+}
+
+@media (max-width: 768px) {
+    .actions {
+        flex-direction: column;
+        width: 100%;
+    }
+}
diff --git a/src/apps/community/src/pages/submission/components/UploadingState/UploadingState.tsx b/src/apps/community/src/pages/submission/components/UploadingState/UploadingState.tsx
new file mode 100644
index 000000000..da58f86e9
--- /dev/null
+++ b/src/apps/community/src/pages/submission/components/UploadingState/UploadingState.tsx
@@ -0,0 +1,98 @@
+import { FC } from 'react'
+import { generatePath } from 'react-router-dom'
+
+import {
+    Button,
+    LinkButton,
+    LoadingSpinner,
+    ProgressBar,
+} from '~/libs/ui'
+
+import {
+    rootRoute,
+    submissionManagementRouteId,
+} from '../../../../config/routes.config'
+
+import styles from './UploadingState.module.scss'
+
+interface UploadingStateProps {
+    challengeId: string
+    challengeName: string
+    challengesUrl: string
+    error: string
+    isSubmitting: boolean
+    onBack: () => void
+    onReset: () => void
+    onRetry: () => void
+    submitDone: boolean
+    track?: string
+    uploadProgress: number
+}
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+/**
+ * Displays challenge submission upload progress, success and error states.
+ *
+ * @param props Upload lifecycle state and action handlers.
+ * @returns Upload state content.
+ */
+const UploadingState: FC<UploadingStateProps> = (props: UploadingStateProps) => {
+    const mySubmissionsPath = withLeadingSlash(
+        `${rootRoute}/${generatePath(submissionManagementRouteId, {
+            challengeId: props.challengeId,
+        })}`,
+    )
+        .replace(/\/{2,}/g, '/')
+
+    if (props.isSubmitting) {
+        return (
+            <section className={styles.panel} data-challenges-url={props.challengesUrl}>
+                <h2 className={styles.title}>Uploading your submission...</h2>
+                <p className={styles.challengeName}>{props.challengeName}</p>
+                <div className={styles.loading}>
+                    <LoadingSpinner inline />
+                </div>
+                <ProgressBar
+                    progress={Math.max(0, Math.min(1, props.uploadProgress))}
+                    track={props.track}
+                />
+                <p className={styles.progressText}>
+                    {Math.round(Math.max(0, Math.min(1, props.uploadProgress)) * 100)}
+                    %
+                </p>
+            </section>
+        )
+    }
+
+    if (props.submitDone) {
+        return (
+            <section className={styles.panel} data-challenges-url={props.challengesUrl}>
+                <h2 className={styles.title}>Submission Uploaded</h2>
+                <p className={styles.challengeName}>{props.challengeName}</p>
+                <div className={styles.actions}>
+                    <Button label='Add Submission' onClick={props.onReset} primary />
+                    <LinkButton label='My Submissions' secondary to={mySubmissionsPath} />
+                </div>
+            </section>
+        )
+    }
+
+    return (
+        <section className={styles.panel} data-challenges-url={props.challengesUrl}>
+            <h2 className={styles.title}>Upload Failed</h2>
+            <p className={styles.error}>{props.error || 'Unable to upload submission.'}</p>
+            <div className={styles.actions}>
+                <Button label='Cancel' onClick={props.onBack} secondary />
+                <Button label='Try Again' onClick={props.onRetry} primary />
+            </div>
+        </section>
+    )
+}
+
+export { UploadingState }
+export default UploadingState
diff --git a/src/apps/community/src/pages/submission/components/UploadingState/index.ts b/src/apps/community/src/pages/submission/components/UploadingState/index.ts
new file mode 100644
index 000000000..aa6f0ac3b
--- /dev/null
+++ b/src/apps/community/src/pages/submission/components/UploadingState/index.ts
@@ -0,0 +1 @@
+export * from './UploadingState'
diff --git a/src/apps/community/src/pages/submission/index.ts b/src/apps/community/src/pages/submission/index.ts
new file mode 100644
index 000000000..6bc55ba04
--- /dev/null
+++ b/src/apps/community/src/pages/submission/index.ts
@@ -0,0 +1 @@
+export * from './submission.routes'
diff --git a/src/apps/community/src/pages/submission/submission.routes.tsx b/src/apps/community/src/pages/submission/submission.routes.tsx
new file mode 100644
index 000000000..760139655
--- /dev/null
+++ b/src/apps/community/src/pages/submission/submission.routes.tsx
@@ -0,0 +1,16 @@
+import { PlatformRoute } from '~/libs/core'
+
+import { submissionRouteId } from '../../config/routes.config'
+
+import SubmissionPage from './SubmissionPage'
+
+/**
+ * Route definitions for the submission page module.
+ */
+export const submissionRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: true,
+        element: <SubmissionPage />,
+        route: submissionRouteId,
+    },
+]
diff --git a/src/apps/community/src/pages/thrive/ThriveArticlePage.module.scss b/src/apps/community/src/pages/thrive/ThriveArticlePage.module.scss
new file mode 100644
index 000000000..e520dbe43
--- /dev/null
+++ b/src/apps/community/src/pages/thrive/ThriveArticlePage.module.scss
@@ -0,0 +1,696 @@
+@import '@libs/ui/styles/includes';
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+    width: 100%;
+}
+
+.bannerContainer,
+.bannerContainerDefaultImage {
+    background-color: #e9e9e9;
+    margin: 0 auto $sp-9;
+    overflow: visible;
+    width: 100%;
+}
+
+.loading {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 360px;
+}
+
+.notFound {
+    color: var(--GrayFontColor);
+    font-size: 18px;
+    margin: $sp-6 auto;
+}
+
+.bannerInner {
+    align-items: center;
+    display: flex;
+    margin: auto;
+    max-width: 1280px;
+    padding: 75px 0 45px;
+}
+
+.bannerInnerLeft {
+    display: flex;
+    flex: 2;
+    flex-direction: column;
+    margin-right: 130px;
+}
+
+.articleDate {
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    line-height: 16px;
+    margin: 0;
+    text-transform: uppercase;
+}
+
+.articleTitle {
+    color: #2a2a2a;
+    font-family: BarlowCondensed, sans-serif;
+    font-size: 60px;
+    font-weight: 500;
+    line-height: 58px;
+    margin: $sp-2 0 $sp-7;
+    text-transform: uppercase;
+}
+
+.bannerInnerRight {
+    position: relative;
+    width: 445px;
+    z-index: 1;
+}
+
+.siteHeaderBackground {
+    height: 355px;
+    position: absolute;
+    top: -95px;
+    width: 100%;
+}
+
+.bannerSvg {
+    height: 0;
+    position: absolute;
+    width: 0;
+}
+
+.bannerClippedImageHolder {
+    -webkit-clip-path: url(#thrive-banner-clip-path);
+    background-position: center center;
+    background-size: cover;
+    clip-path: url(#thrive-banner-clip-path);
+    height: 355px;
+    width: 100%;
+}
+
+.bannerBottomShape {
+    bottom: -10px;
+    left: -2px;
+    position: relative;
+    width: calc(100% + 4px);
+}
+
+.contentContainer,
+.contentContainerWithBanner {
+    display: flex;
+    margin: 0 auto 90px;
+    max-width: 1280px;
+    width: 100%;
+}
+
+.contentLeftBar {
+    flex-shrink: 0;
+    max-width: 164px;
+    width: 100%;
+}
+
+.authorContainer {
+    color: #2a2a2a;
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+    gap: $sp-2;
+    line-height: 24px;
+    margin-top: $sp-1;
+}
+
+.authorWrapper {
+    align-items: center;
+    display: flex;
+}
+
+.authorInfos {
+    display: flex;
+    flex-direction: column;
+}
+
+.avatar {
+    border-radius: 50%;
+    height: 40px;
+    margin-right: $sp-2;
+    object-fit: cover;
+    width: 40px;
+}
+
+.name {
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.handle {
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+}
+
+.label {
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    line-height: 16px;
+    margin: 0 0 $sp-1;
+    text-transform: uppercase;
+}
+
+.separator {
+    background: linear-gradient(90deg, rgba(42, 42, 42, 0.12), rgba(42, 42, 42, 0.35), rgba(42, 42, 42, 0.12));
+    height: 1px;
+    margin: $sp-5 0;
+    width: 100%;
+}
+
+.duration {
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.catsWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+}
+
+.catsContainer {
+    align-items: flex-start;
+    border-left: 3px solid #e9e9e9;
+    display: flex;
+    flex-direction: column;
+    gap: $sp-1;
+    margin-left: 6px;
+    padding-left: 7px;
+}
+
+.catItem {
+    background-color: #fff;
+    border: 1px solid #2a2a2a;
+    border-radius: 5px;
+    color: #2a2a2a;
+    display: inline-block;
+    font-family: Roboto, sans-serif;
+    font-size: 11px;
+    letter-spacing: 0.4px;
+    line-height: 15px;
+    padding: 4px 6px;
+    text-decoration: none;
+}
+
+.tagContainer {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+}
+
+.tagItem {
+    background-color: #fff;
+    border: 1px solid #2a2a2a;
+    border-radius: 5px;
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 11px;
+    letter-spacing: 0.4px;
+    line-height: 15px;
+    padding: 4px 6px;
+    text-decoration: none;
+}
+
+.shareButtons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $sp-2;
+}
+
+.shareButton {
+    background-color: #2a2a2a;
+    border-radius: 999px;
+    color: #fff;
+    display: inline-flex;
+    font-family: Roboto, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+    line-height: 16px;
+    padding: $sp-1 $sp-2;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.structuredSidebarContent {
+    width: 100%;
+}
+
+.sidebarAd {
+    background-color: #2a2a2a;
+    border-radius: 8px;
+    margin-top: $sp-4;
+    padding: $sp-3;
+}
+
+.sidebarAdTitle {
+    color: #fff;
+    font-family: BarlowCondensed, sans-serif;
+    font-size: 22px;
+    letter-spacing: 0.4px;
+    line-height: 24px;
+    margin: 0 0 $sp-1;
+    text-transform: uppercase;
+}
+
+.sidebarAdText {
+    color: rgba(255, 255, 255, 0.85);
+    font-family: Roboto, sans-serif;
+    font-size: 12px;
+    line-height: 18px;
+    margin: 0 0 $sp-3;
+}
+
+.sidebarAdLink {
+    color: #12c188;
+    font-family: Roboto, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.structuredBodyContent {
+    margin: 0 0 $sp-5;
+}
+
+.structuredViewport {
+    display: flex;
+    flex-direction: column;
+    gap: $sp-3;
+    width: 100%;
+}
+
+.structuredContentBlock {
+    background-color: #f7f7f7;
+    border-radius: 8px;
+    overflow: hidden;
+    padding: $sp-3;
+}
+
+.structuredBanner {
+    background-color: #2a2a2a;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 8px;
+    color: #fff;
+    min-height: 140px;
+    overflow: hidden;
+    padding: $sp-4;
+}
+
+.structuredMarkdown {
+    color: inherit;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 22px;
+}
+
+.structuredMarkdown :global(*:last-child) {
+    margin-bottom: 0;
+}
+
+.structuredPicture {
+    display: block;
+    width: 100%;
+}
+
+.structuredImage {
+    border-radius: 8px;
+    display: block;
+    height: auto;
+    width: 100%;
+}
+
+.articleContent {
+    flex: 1;
+    min-width: 0;
+    overflow: auto;
+}
+
+.articleBody {
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 16px;
+    line-height: 26px;
+
+    :global(h1),
+    :global(h2),
+    :global(h3),
+    :global(h4),
+    :global(h5),
+    :global(h6) {
+        color: #2a2a2a;
+        margin: $sp-3 0;
+        text-transform: uppercase;
+    }
+
+    :global(p) {
+        margin: 0 0 $sp-5;
+    }
+
+    :global(ul),
+    :global(ol) {
+        margin: 0 0 $sp-5;
+        padding-left: 30px;
+    }
+
+    :global(ul) {
+        list-style-type: disc;
+    }
+
+    :global(ol) {
+        list-style-type: decimal;
+    }
+
+    :global(blockquote) {
+        border-left: 4px solid #12c188;
+        font-size: 20px;
+        margin: $sp-5 0;
+        padding-left: $sp-4;
+        text-transform: uppercase;
+    }
+
+    :global(table) {
+        border-collapse: collapse;
+        margin: 0 0 $sp-5;
+        width: 100%;
+    }
+
+    :global(th),
+    :global(td) {
+        border-bottom: 1px solid #ededf2;
+        font-size: 15px;
+        padding: $sp-2 $sp-3;
+        text-align: left;
+    }
+
+    :global(img) {
+        border-radius: 6px;
+        height: auto;
+        max-width: 70%;
+    }
+
+    :global(code) {
+        background-color: #f7f7f7;
+        border-radius: 4px;
+        color: #2a2a2a;
+        font-family: Menlo, Monaco, Consolas, monospace;
+        font-size: 14px;
+        padding: 2px 4px;
+    }
+
+    :global(pre) {
+        background-color: #f7f7f7;
+        border-radius: 6px;
+        margin-bottom: $sp-5;
+        overflow: auto;
+        padding: $sp-3;
+    }
+
+    :global(a) {
+        color: var(--Link);
+        text-decoration: underline;
+    }
+}
+
+.videoContainer {
+    margin: $sp-7 0 $sp-6;
+}
+
+.videoFrame {
+    border: 0;
+    border-radius: 10px;
+    min-height: 360px;
+    width: 100%;
+}
+
+.actionContainer {
+    align-items: center;
+    display: flex;
+    gap: $sp-2;
+    margin: $sp-6 0;
+}
+
+.action {
+    align-items: center;
+    background-color: #fafafb;
+    border-radius: 40px;
+    display: flex;
+    justify-content: flex-start;
+    min-height: 60px;
+    min-width: 150px;
+    padding: 8px 9px;
+}
+
+.action span {
+    color: #2a2a2a;
+    font-family: Barlow, sans-serif;
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    line-height: 26px;
+}
+
+.circleGreenIcon,
+.circleRedIcon {
+    align-items: center;
+    border-radius: 100%;
+    color: #fff;
+    display: flex;
+    font-family: Barlow, sans-serif;
+    font-size: 24px;
+    font-weight: 700;
+    height: 42px;
+    justify-content: center;
+    margin-right: 13px;
+    user-select: none;
+    width: 42px;
+}
+
+.circleGreenIcon {
+    background-color: #12c188;
+}
+
+.circleRedIcon {
+    background-color: #e90c5a;
+}
+
+.discordButton {
+    background-color: #12c188;
+    border-radius: 999px;
+    color: #fff;
+    display: inline-flex;
+    font-family: Barlow, sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    line-height: 16px;
+    padding: $sp-3 $sp-5;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.recommendedContainer {
+    background-color: #f4f4f4;
+    margin-top: 65px;
+    width: 100%;
+}
+
+.recommendedTopShape {
+    background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 65%, #f4f4f4 100%);
+    height: 120px;
+}
+
+.recommendedTitle {
+    color: #2a2a2a;
+    font-family: BarlowCondensed, sans-serif;
+    font-size: 48px;
+    font-weight: 500;
+    letter-spacing: 0.3px;
+    line-height: 50px;
+    margin: 0;
+    padding: 55px 0;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.recommended {
+    display: grid;
+    gap: $sp-5;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin: 0 auto;
+    max-width: 1280px;
+    padding: 0 0 78px;
+}
+
+.recommendedCard {
+    background-color: #555;
+    border-radius: 10px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    min-height: 477px;
+}
+
+.recommendedImage {
+    background-position: center center;
+    background-size: cover;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    height: 200px;
+    width: 100%;
+}
+
+.recommendedCardTitle {
+    font-family: Barlow, sans-serif;
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    line-height: 26px;
+    margin: 0;
+    padding: 36px 46px 7px;
+    text-transform: uppercase;
+}
+
+.recommendedCardTitle a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.recommendedCardContent {
+    color: #fff;
+    font-family: Barlow, sans-serif;
+    font-size: 17px;
+    line-height: 23px;
+    margin: 0 46px;
+}
+
+.readMore {
+    color: #fff;
+    font-family: Barlow, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    line-height: 14px;
+    margin: $sp-5 46px 0;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+@media (max-width: 1280px) and (min-width: 768px) {
+    .bannerInner,
+    .contentContainer,
+    .contentContainerWithBanner,
+    .recommended {
+        padding-left: $sp-4;
+        padding-right: $sp-4;
+    }
+
+    .bannerInnerLeft {
+        margin-right: 80px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .recommended {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 767px) {
+    .bannerContainer,
+    .bannerContainerDefaultImage {
+        margin-bottom: 220px;
+    }
+
+    .bannerInner {
+        flex-direction: column;
+        padding: 45px $sp-4 90px;
+    }
+
+    .bannerInnerLeft {
+        margin-right: 0;
+    }
+
+    .articleTitle {
+        font-size: 42px;
+        line-height: 44px;
+        margin-bottom: $sp-5;
+    }
+
+    .bannerInnerRight {
+        max-width: 445px;
+        width: 100%;
+    }
+
+    .siteHeaderBackground {
+        height: auto;
+        top: 0;
+    }
+
+    .contentContainer,
+    .contentContainerWithBanner {
+        flex-direction: column;
+        margin: $sp-7 auto;
+    }
+
+    .contentLeftBar {
+        max-width: 100%;
+        padding: 0 $sp-4;
+    }
+
+    .articleContent {
+        padding: 0 $sp-4;
+    }
+
+    .articleBody :global(img) {
+        max-width: 100%;
+    }
+
+    .videoFrame {
+        min-height: 240px;
+    }
+
+    .actionContainer {
+        flex-wrap: wrap;
+    }
+
+    .recommendedTopShape {
+        height: 60px;
+    }
+
+    .recommendedTitle {
+        font-size: 36px;
+        line-height: 38px;
+        padding: $sp-8 $sp-4;
+    }
+
+    .recommended {
+        grid-template-columns: minmax(0, 1fr);
+        padding: 0 $sp-4 78px;
+    }
+
+    .recommendedCardTitle {
+        padding-top: $sp-3;
+    }
+}
diff --git a/src/apps/community/src/pages/thrive/ThriveArticlePage.tsx b/src/apps/community/src/pages/thrive/ThriveArticlePage.tsx
new file mode 100644
index 000000000..a114756c7
--- /dev/null
+++ b/src/apps/community/src/pages/thrive/ThriveArticlePage.tsx
@@ -0,0 +1,661 @@
+import { marked } from 'marked'
+import {
+    FC,
+    MouseEvent,
+    useCallback,
+    useEffect,
+    useMemo,
+} from 'react'
+import { Link, useParams } from 'react-router-dom'
+import DOMPurify from 'dompurify'
+import moment from 'moment'
+
+import {
+    Breadcrumb,
+    BreadcrumbItemModel,
+    LoadingSpinner,
+} from '~/libs/ui'
+
+import {
+    rootRoute,
+    thriveListingRouteId,
+    thriveSearchRouteId,
+    thriveTracksRouteId,
+} from '../../config/routes.config'
+import {
+    ContentCategory,
+    ThriveStructuredEntry,
+    useThriveArticle,
+    UseThriveArticleResult,
+} from '../../lib'
+
+import styles from './ThriveArticlePage.module.scss'
+
+const DEFAULT_BANNER_IMAGE
+    = 'https://images.ctfassets.net/piwi0eufbb2g/'
+        + '7v2hlDsVep7FWufHw0lXpQ/2505e61a880e68fab4e80cd0e8ec1814/'
+        + '0C37CB5E-B253-4804-8935-78E64E67589E.png?w=1200&h=630'
+const THRIVE_BANNER_BOTTOM_SHAPE
+    = 'https://images.ctfassets.net/piwi0eufbb2g/'
+        + '3StLyQh5ne1Lk9H7C1oVxv/52f17a02122212052e44585d3e79fcf7/'
+        + '29320408-E820-48E1-B0FD-539EAC296910.svg'
+const THRIVE_BANNER_CLIP_PATH
+    = 'M0.477,1 C0.72,0.999,1,0.804,1,0.56 C1,0.316,0.766,-0.067,0.528,0.021 '
+        + 'C0.343,0.089,0.145,-0.088,0.076,0.063 C0.016,0.193,-0.071,0.456,0.101,0.618 '
+        + 'C0.274,0.782,0.234,1,0.477,1'
+const VIDEO_IFRAME_ALLOW
+    = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; '
+        + 'picture-in-picture; web-share'
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function buildThrivePath(routeId: string, params?: Record<string, string>): string {
+    const basePath = withLeadingSlash(`${rootRoute}/${routeId}`)
+        .replace(/\/{2,}/g, '/')
+
+    if (!params || !Object.keys(params).length) {
+        return basePath
+    }
+
+    const query = new URLSearchParams(params)
+    return `${basePath}?${query.toString()}`
+}
+
+function buildArticlePath(slugOrTitle: string): string {
+    return withLeadingSlash(`${rootRoute}/thrive/${encodeURIComponent(slugOrTitle)}`)
+        .replace(/\/{2,}/g, '/')
+}
+
+function getYouTubeEmbedUrl(url: string): string {
+    if (!url) {
+        return ''
+    }
+
+    try {
+        const parsed = new URL(url)
+        const videoId = parsed.searchParams.get('v')
+
+        if (parsed.hostname.includes('youtu.be')) {
+            const shortenedId = parsed.pathname.replace('/', '')
+            return shortenedId
+                ? `https://www.youtube.com/embed/${shortenedId}`
+                : ''
+        }
+
+        if (parsed.hostname.includes('youtube.com') && parsed.pathname.startsWith('/embed/')) {
+            return url
+        }
+
+        if (parsed.hostname.includes('youtube.com') && videoId) {
+            return `https://www.youtube.com/embed/${videoId}`
+        }
+    } catch {
+        return ''
+    }
+
+    return ''
+}
+
+function toSafeHtml(markdownContent: string): string {
+    if (!markdownContent) {
+        return ''
+    }
+
+    return DOMPurify.sanitize(marked.parse(markdownContent) as string)
+}
+
+interface StructuredEntryRendererProps {
+    entry: ThriveStructuredEntry
+}
+
+/**
+ * Recursively renders supported Contentful structured entries.
+ *
+ * @param props Structured entry payload.
+ * @returns Rendered entry node.
+ */
+// eslint-disable-next-line complexity
+const StructuredEntryRenderer: FC<StructuredEntryRendererProps> = (
+    props: StructuredEntryRendererProps,
+) => {
+    switch (props.entry.type) {
+        case 'viewport': {
+
+            if (!props.entry.items.length) {
+                return <></>
+            }
+
+            return (
+                <div className={styles.structuredViewport} data-theme={props.entry.theme || undefined}>
+                    {props.entry.items.map(item => (
+                        <StructuredEntryRenderer entry={item} key={item.id} />
+                    ))}
+                </div>
+            )
+        }
+
+        case 'contentBlock': {
+
+            return (
+                <div
+                    className={styles.structuredContentBlock}
+                    data-theme={props.entry.baseTheme || undefined}
+                >
+                    {props.entry.imageUrl && (
+                        <img
+                            alt='Thrive content block'
+                            className={styles.structuredImage}
+                            src={props.entry.imageUrl}
+                        />
+                    )}
+                    {props.entry.text && (
+                        <div
+                            className={styles.structuredMarkdown}
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML={{ __html: toSafeHtml(props.entry.text) }}
+                        />
+                    )}
+                </div>
+            )
+        }
+
+        case 'banner': {
+
+            const bannerStyle = props.entry.backgroundImageUrl
+                ? {
+                    backgroundImage: `url(${props.entry.backgroundImageUrl})`,
+                }
+                : undefined
+
+            return (
+                <section
+                    className={styles.structuredBanner}
+                    data-theme={props.entry.baseTheme || undefined}
+                    style={bannerStyle}
+                >
+                    {props.entry.text && (
+                        <div
+                            className={styles.structuredMarkdown}
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML={{ __html: toSafeHtml(props.entry.text) }}
+                        />
+                    )}
+                </section>
+            )
+        }
+
+        case 'image': {
+
+            const fallbackSource = props.entry.sourceUrl || props.entry.sourceMobileUrl
+            if (!fallbackSource) {
+                return <></>
+            }
+
+            return (
+                <picture className={styles.structuredPicture}>
+                    {props.entry.sourceMobileUrl && (
+                        <source media='(max-width: 768px)' srcSet={props.entry.sourceMobileUrl} />
+                    )}
+                    <img
+                        alt={props.entry.alt || 'Thrive content image'}
+                        className={styles.structuredImage}
+                        loading='lazy'
+                        src={fallbackSource}
+                    />
+                </picture>
+            )
+        }
+
+        default:
+
+            return <></>
+    }
+}
+
+/**
+ * Thrive article detail page.
+ *
+ * @returns Thrive article content by route slug.
+ */
+// eslint-disable-next-line complexity
+const ThriveArticlePage: FC = () => {
+    const { articleTitle }: { articleTitle?: string } = useParams<{ articleTitle: string }>()
+    const {
+        article,
+        isLoading,
+    }: UseThriveArticleResult = useThriveArticle(articleTitle)
+
+    const communityPath = rootRoute || '/'
+    const thrivePath = buildThrivePath(thriveListingRouteId)
+    const breadcrumbs = useMemo<Array<BreadcrumbItemModel>>(() => [
+        {
+            name: 'Community',
+            url: communityPath,
+        },
+        {
+            name: 'Thrive',
+            url: thrivePath,
+        },
+        {
+            name: article?.title || articleTitle || 'Article',
+            url: withLeadingSlash(`${rootRoute}/thrive/${encodeURIComponent(articleTitle ?? '')}`)
+                .replace(/\/{2,}/g, '/'),
+        },
+    ], [article?.title, articleTitle, communityPath, thrivePath])
+
+    const articleBodyHtml = useMemo<string>(() => toSafeHtml(article?.body ?? ''), [article?.body])
+
+    const creationDateLabel = useMemo<string>(() => {
+        if (!article?.creationDate) {
+            return ''
+        }
+
+        const value = moment(article.creationDate)
+
+        return value.isValid()
+            ? value.format('MMMM D, YYYY')
+            : ''
+    }, [article?.creationDate])
+
+    const groupedCategories = useMemo<Record<string, ContentCategory[]>>(() => {
+        if (!article?.contentCategory.length) {
+            return {}
+        }
+
+        return article.contentCategory.reduce((accumulator, category) => {
+            const key = category.trackParent || 'General'
+
+            if (!accumulator[key]) {
+                accumulator[key] = []
+            }
+
+            accumulator[key].push(category)
+
+            return accumulator
+        }, {} as Record<string, ContentCategory[]>)
+    }, [article?.contentCategory])
+
+    const shareUrl = useMemo<string>(() => {
+        if (typeof window === 'undefined') {
+            return ''
+        }
+
+        return encodeURIComponent(window.location.href)
+    }, [])
+
+    const videoEmbedUrl = useMemo<string>(() => {
+        if (!article?.contentUrl || article.type !== 'Video') {
+            return ''
+        }
+
+        return getYouTubeEmbedUrl(article.contentUrl)
+    }, [article?.contentUrl, article?.type])
+
+    const shouldRedirectToExternalArticle = Boolean(
+        article?.externalArticle
+        && article.contentUrl,
+    )
+
+    const handleArticleContentClick = useCallback((event: MouseEvent<HTMLDivElement>) => {
+        if (!article || article.openExternalLinksInNewTab === false || typeof window === 'undefined') {
+            return
+        }
+
+        const target = event.target as HTMLElement | null
+        const anchor = target?.closest('a') as HTMLAnchorElement | null
+
+        if (!anchor?.href) {
+            return
+        }
+
+        try {
+            const targetUrl = new URL(anchor.href, window.location.href)
+            if (targetUrl.host.includes('topcoder')) {
+                return
+            }
+
+            window.open(targetUrl.toString(), '_blank', 'noopener,noreferrer')
+            event.preventDefault()
+        } catch {
+            // Ignore malformed hrefs from article content.
+        }
+    }, [article])
+
+    useEffect(() => {
+        if (article?.title && typeof document !== 'undefined') {
+            document.title = article.title
+        }
+    }, [article?.title])
+
+    useEffect(() => {
+        if (!article?.externalArticle || !article.contentUrl || typeof window === 'undefined') {
+            return
+        }
+
+        window.location.replace(article.contentUrl)
+    }, [article?.contentUrl, article?.externalArticle])
+
+    if (isLoading || shouldRedirectToExternalArticle) {
+        return (
+            <div className={styles.wrapper}>
+                <Breadcrumb
+                    items={breadcrumbs}
+                    renderInline
+                />
+                <div className={styles.loading}>
+                    <LoadingSpinner />
+                </div>
+            </div>
+        )
+    }
+
+    if (!article) {
+        return (
+            <section className={styles.wrapper}>
+                <Breadcrumb
+                    items={breadcrumbs}
+                    renderInline
+                />
+                <p className={styles.notFound}>Article not found</p>
+            </section>
+        )
+    }
+
+    const bannerImage = article.featuredImage || DEFAULT_BANNER_IMAGE
+    const sidebarAuthorFallback = article.contentAuthor || 'Topcoder Thrive'
+
+    return (
+        <section className={styles.wrapper}>
+            <Breadcrumb
+                items={breadcrumbs}
+                renderInline
+            />
+
+            <div className={article.featuredImage ? styles.bannerContainer : styles.bannerContainerDefaultImage}>
+                <div className={styles.bannerInner}>
+                    <div className={styles.bannerInnerLeft}>
+                        <h4 className={styles.articleDate}>{creationDateLabel}</h4>
+                        <h1 className={styles.articleTitle}>{article.title}</h1>
+                    </div>
+
+                    <div className={styles.bannerInnerRight}>
+                        <div className={styles.siteHeaderBackground}>
+                            <svg className={styles.bannerSvg}>
+                                <clipPath id='thrive-banner-clip-path' clipPathUnits='objectBoundingBox'>
+                                    <path d={THRIVE_BANNER_CLIP_PATH} />
+                                </clipPath>
+                            </svg>
+                            <div
+                                className={styles.bannerClippedImageHolder}
+                                style={{ backgroundImage: `url(${bannerImage})` }}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <img
+                    alt='Thrive banner shape'
+                    className={styles.bannerBottomShape}
+                    src={THRIVE_BANNER_BOTTOM_SHAPE}
+                />
+            </div>
+
+            <div className={article.featuredImage ? styles.contentContainerWithBanner : styles.contentContainer}>
+                <aside className={styles.contentLeftBar}>
+                    <div className={styles.authorContainer}>
+                        {article.contentAuthors.length > 0 && article.contentAuthors.map(author => (
+                            <div className={styles.authorWrapper} key={author.id}>
+                                {author.avatarUrl && (
+                                    <img
+                                        alt={`${author.name} avatar`}
+                                        className={styles.avatar}
+                                        src={author.avatarUrl}
+                                    />
+                                )}
+                                <div className={styles.authorInfos}>
+                                    <span className={styles.name}>{author.name}</span>
+                                    {author.tcHandle && (
+                                        <span className={styles.handle}>{author.tcHandle}</span>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                        {!article.contentAuthors.length && (
+                            <div className={styles.authorWrapper}>
+                                <div className={styles.authorInfos}>
+                                    <span className={styles.name}>{sidebarAuthorFallback}</span>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    <div className={styles.separator} />
+                    <h3 className={styles.label}>Duration</h3>
+                    <span className={styles.duration}>{article.readTime || '-'}</span>
+
+                    <div className={styles.separator} />
+                    <h3 className={styles.label}>Categories</h3>
+                    <div className={styles.catsWrapper}>
+                        {Object.entries(groupedCategories)
+                            .map(([trackParent, categories]) => (
+                                <div className={styles.catsContainer} key={trackParent}>
+                                    <Link
+                                        className={styles.catItem}
+                                        to={buildThrivePath(thriveTracksRouteId, { track: trackParent })}
+                                    >
+                                        {trackParent}
+                                    </Link>
+                                    {categories.map(category => (
+                                        <Link
+                                            className={styles.catItem}
+                                            key={category.id}
+                                            to={buildThrivePath(thriveTracksRouteId, {
+                                                tax: category.name,
+                                                track: category.trackParent || trackParent,
+                                            })}
+                                        >
+                                            {category.name}
+                                        </Link>
+                                    ))}
+                                </div>
+                            ))}
+                        {!Object.keys(groupedCategories).length && (
+                            <span className={styles.duration}>-</span>
+                        )}
+                    </div>
+
+                    <div className={styles.separator} />
+                    <h3 className={styles.label}>Tags</h3>
+                    <div className={styles.tagContainer}>
+                        {article.tags.map(tag => (
+                            <Link
+                                className={styles.tagItem}
+                                key={tag}
+                                to={buildThrivePath(thriveSearchRouteId, { tags: tag })}
+                            >
+                                {tag}
+                            </Link>
+                        ))}
+                        {!article.tags.length && (
+                            <span className={styles.duration}>-</span>
+                        )}
+                    </div>
+
+                    <div className={styles.separator} />
+                    <h3 className={styles.label}>Share</h3>
+                    <div className={styles.shareButtons}>
+                        <a
+                            className={styles.shareButton}
+                            href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
+                            rel='noopener noreferrer'
+                            target='_blank'
+                        >
+                            LinkedIn
+                        </a>
+                        <a
+                            className={styles.shareButton}
+                            href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&src=share_button`}
+                            rel='noopener noreferrer'
+                            target='_blank'
+                        >
+                            Facebook
+                        </a>
+                        <a
+                            className={styles.shareButton}
+                            href={`https://twitter.com/intent/tweet?url=${shareUrl}`}
+                            rel='noopener noreferrer'
+                            target='_blank'
+                        >
+                            Twitter
+                        </a>
+                    </div>
+
+                    <div className={styles.separator} />
+                    {article.leftSidebarContent ? (
+                        <div className={styles.structuredSidebarContent}>
+                            <StructuredEntryRenderer entry={article.leftSidebarContent} />
+                        </div>
+                    ) : (
+                        <div className={styles.sidebarAd}>
+                            <p className={styles.sidebarAdTitle}>Topcoder Thrive</p>
+                            <p className={styles.sidebarAdText}>
+                                Discover more stories from the community.
+                            </p>
+                            <Link className={styles.sidebarAdLink} to={buildThrivePath(thriveListingRouteId)}>
+                                Browse articles
+                            </Link>
+                        </div>
+                    )}
+                </aside>
+
+                <div className={styles.articleContent} onClick={handleArticleContentClick}>
+                    {article.bodyContent && (
+                        <div className={styles.structuredBodyContent}>
+                            <StructuredEntryRenderer entry={article.bodyContent} />
+                        </div>
+                    )}
+
+                    {articleBodyHtml && (
+                        <div
+                            className={styles.articleBody}
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML={{ __html: articleBodyHtml }}
+                        />
+                    )}
+
+                    {videoEmbedUrl && (
+                        <div className={styles.videoContainer}>
+                            <iframe
+                                allow={VIDEO_IFRAME_ALLOW}
+                                allowFullScreen
+                                className={styles.videoFrame}
+                                referrerPolicy='strict-origin-when-cross-origin'
+                                src={videoEmbedUrl}
+                                title={article.title}
+                            />
+                        </div>
+                    )}
+
+                    <div className={styles.actionContainer}>
+                        <div className={styles.action}>
+                            <div className={styles.circleGreenIcon}>+</div>
+                            <span>{article.upvotes}</span>
+                        </div>
+                        <div className={styles.action}>
+                            <div className={styles.circleRedIcon}>-</div>
+                            <span>0</span>
+                        </div>
+                    </div>
+
+                    <div className={styles.actionContainer}>
+                        <a
+                            className={styles.discordButton}
+                            href='https://discord.gg/topcoder?ref=thrive-article'
+                            rel='noopener noreferrer'
+                            target='_blank'
+                        >
+                            Chat on Discord
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            {article.recommended.length > 0 && (
+                <section className={styles.recommendedContainer}>
+                    <div className={styles.recommendedTopShape} />
+                    <h3 className={styles.recommendedTitle}>Recommended for you</h3>
+                    <div className={styles.recommended}>
+                        {article.recommended.slice(0, 3)
+                            .map(recommendedArticle => {
+                                const isExternal
+                                = recommendedArticle.externalArticle
+                                    && !!recommendedArticle.contentUrl
+                                const recommendedPath = buildArticlePath(
+                                    recommendedArticle.slug
+                                    || recommendedArticle.title
+                                    || recommendedArticle.id,
+                                )
+                                const recommendedImage
+                                = recommendedArticle.featuredImage || DEFAULT_BANNER_IMAGE
+
+                                return (
+                                    <article
+                                        className={styles.recommendedCard}
+                                        key={recommendedArticle.id}
+                                    >
+                                        <div
+                                            className={styles.recommendedImage}
+                                            style={{
+                                                backgroundImage: `url(${recommendedImage})`,
+                                            }}
+                                        />
+
+                                        <h4 className={styles.recommendedCardTitle}>
+                                            {isExternal ? (
+                                                <a
+                                                    href={recommendedArticle.contentUrl}
+                                                    rel='noopener noreferrer'
+                                                    target='_blank'
+                                                >
+                                                    {recommendedArticle.title}
+                                                </a>
+                                            ) : (
+                                                <Link to={recommendedPath}>
+                                                    {recommendedArticle.title}
+                                                </Link>
+                                            )}
+                                        </h4>
+
+                                        <p className={styles.recommendedCardContent}>
+                                            Explore this article on Topcoder Thrive.
+                                        </p>
+
+                                        {isExternal ? (
+                                            <a
+                                                className={styles.readMore}
+                                                href={recommendedArticle.contentUrl}
+                                                rel='noopener noreferrer'
+                                                target='_blank'
+                                            >
+                                                Read More
+                                            </a>
+                                        ) : (
+                                            <Link className={styles.readMore} to={recommendedPath}>
+                                                Read More
+                                            </Link>
+                                        )}
+                                    </article>
+                                )
+                            })}
+                    </div>
+                </section>
+            )}
+        </section>
+    )
+}
+
+export default ThriveArticlePage
diff --git a/src/apps/community/src/pages/thrive/ThriveListingPage.module.scss b/src/apps/community/src/pages/thrive/ThriveListingPage.module.scss
new file mode 100644
index 000000000..659aee180
--- /dev/null
+++ b/src/apps/community/src/pages/thrive/ThriveListingPage.module.scss
@@ -0,0 +1,111 @@
+@import '@libs/ui/styles/includes';
+
+.wrapper {
+    margin: 0 auto;
+    max-width: 1080px;
+    padding: $sp-6 $sp-4 $sp-8;
+    width: 100%;
+}
+
+.header {
+    margin: $sp-5 0 $sp-6;
+}
+
+.heading {
+    color: #2a2a2a;
+    font-family: BarlowCondensed, sans-serif;
+    font-size: 48px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    line-height: 52px;
+    margin: 0 0 $sp-2;
+    text-transform: uppercase;
+}
+
+.subheading {
+    color: #4a4a4a;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    letter-spacing: 0.3px;
+    line-height: 20px;
+    margin: 0;
+    text-transform: uppercase;
+}
+
+.loading {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 240px;
+}
+
+.list {
+    display: grid;
+    gap: $sp-4;
+}
+
+.articleCard {
+    background: #fff;
+    border: 1px solid #dfdfdf;
+    border-radius: 8px;
+    padding: $sp-4;
+}
+
+.articleTitle {
+    margin: 0 0 $sp-2;
+}
+
+.articleTitle a {
+    color: #0f6efc;
+    font-family: Barlow, sans-serif;
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+    line-height: 30px;
+    text-decoration: none;
+}
+
+.articleTitle a:hover {
+    text-decoration: underline;
+}
+
+.meta {
+    color: #646464;
+    font-family: Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    margin: 0 0 $sp-2;
+}
+
+.excerpt {
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 15px;
+    line-height: 24px;
+    margin: 0;
+    white-space: pre-wrap;
+}
+
+.emptyState {
+    color: #646464;
+    font-family: Roboto, sans-serif;
+    font-size: 16px;
+    line-height: 22px;
+    margin: $sp-4 0 0;
+}
+
+@media (max-width: 767px) {
+    .wrapper {
+        padding-top: $sp-4;
+    }
+
+    .heading {
+        font-size: 36px;
+        line-height: 40px;
+    }
+
+    .articleTitle a {
+        font-size: 21px;
+        line-height: 26px;
+    }
+}
diff --git a/src/apps/community/src/pages/thrive/ThriveListingPage.tsx b/src/apps/community/src/pages/thrive/ThriveListingPage.tsx
new file mode 100644
index 000000000..017f84378
--- /dev/null
+++ b/src/apps/community/src/pages/thrive/ThriveListingPage.tsx
@@ -0,0 +1,172 @@
+import { FC, useMemo } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import moment from 'moment'
+
+import {
+    Breadcrumb,
+    BreadcrumbItemModel,
+    LoadingSpinner,
+} from '~/libs/ui'
+
+import { rootRoute } from '../../config/routes.config'
+import {
+    ThriveArticle,
+    useThriveArticles,
+    UseThriveArticlesResult,
+} from '../../lib'
+
+import styles from './ThriveListingPage.module.scss'
+
+function withLeadingSlash(path: string): string {
+    return path.startsWith('/')
+        ? path
+        : `/${path}`
+}
+
+function buildArticlePath(article: ThriveArticle): string {
+    return withLeadingSlash(
+        `${rootRoute}/thrive/${encodeURIComponent(article.slug || article.title || article.id)}`,
+    )
+        .replace(/\/{2,}/g, '/')
+}
+
+function normalizeQueryValues(values: string[]): string[] {
+    return Array.from(
+        new Set(
+            values
+                .flatMap(value => value.split(','))
+                .map(value => value.trim())
+                .filter(Boolean),
+        ),
+    )
+}
+
+function articleMatchesTaxonomy(article: ThriveArticle, taxonomies: string[]): boolean {
+    if (!taxonomies.length) {
+        return true
+    }
+
+    const normalizedTaxonomies = taxonomies.map(taxonomy => taxonomy.toLocaleLowerCase())
+    return article.contentCategory.some(category => normalizedTaxonomies.includes(
+        category.name.toLocaleLowerCase(),
+    ))
+}
+
+/**
+ * Thrive article listing and search page.
+ *
+ * Supports the route shapes `/thrive`, `/thrive/tracks`, and `/thrive/search`.
+ *
+ * @returns Query-driven list of Thrive articles.
+ */
+const ThriveListingPage: FC = () => {
+    const [searchParams] = useSearchParams()
+    const communityPath = rootRoute || '/'
+    const thrivePath = withLeadingSlash(`${rootRoute}/thrive`)
+        .replace(/\/{2,}/g, '/')
+    const track = (searchParams.get('track') || '').trim()
+    const tags = useMemo<string[]>(
+        () => normalizeQueryValues(searchParams.getAll('tags')),
+        [searchParams],
+    )
+    const taxonomies = useMemo<string[]>(
+        () => normalizeQueryValues(searchParams.getAll('tax')),
+        [searchParams],
+    )
+    const thriveQuery = useMemo(() => ({
+        limit: 100,
+        ...(track ? { track } : {}),
+        ...(tags.length ? { tags } : {}),
+    }), [tags, track])
+    const {
+        articles,
+        isLoading,
+    }: UseThriveArticlesResult = useThriveArticles(thriveQuery)
+    const filteredArticles = useMemo<ThriveArticle[]>(
+        () => articles.filter(article => articleMatchesTaxonomy(article, taxonomies)),
+        [articles, taxonomies],
+    )
+    const heading = useMemo<string>(() => {
+        if (track && taxonomies.length) {
+            return `${track} · ${taxonomies.join(', ')}`
+        }
+
+        if (track) {
+            return track
+        }
+
+        if (tags.length) {
+            return `Tag: ${tags.join(', ')}`
+        }
+
+        return 'All Thrive Articles'
+    }, [tags, taxonomies, track])
+    const breadcrumbs = useMemo<Array<BreadcrumbItemModel>>(() => [
+        {
+            name: 'Community',
+            url: communityPath,
+        },
+        {
+            name: 'Thrive',
+            url: thrivePath,
+        },
+    ], [communityPath, thrivePath])
+
+    return (
+        <section className={styles.wrapper}>
+            <Breadcrumb
+                items={breadcrumbs}
+                renderInline
+            />
+
+            <header className={styles.header}>
+                <h1 className={styles.heading}>{heading}</h1>
+                <p className={styles.subheading}>
+                    {filteredArticles.length}
+                    {' '}
+                    article
+                    {filteredArticles.length === 1 ? '' : 's'}
+                </p>
+            </header>
+
+            {isLoading && (
+                <div className={styles.loading}>
+                    <LoadingSpinner />
+                </div>
+            )}
+
+            {!isLoading && (
+                <div className={styles.list}>
+                    {filteredArticles.map(article => (
+                        <article className={styles.articleCard} key={article.id}>
+                            <h2 className={styles.articleTitle}>
+                                <Link to={buildArticlePath(article)}>
+                                    {article.title}
+                                </Link>
+                            </h2>
+                            <p className={styles.meta}>
+                                {article.contentAuthor || 'Topcoder Thrive'}
+                                {article.creationDate
+                                    ? ` · ${moment(article.creationDate)
+                                        .format('MMM D, YYYY')}`
+                                    : ''}
+                            </p>
+                            <p className={styles.excerpt}>
+                                {(article.body || '')
+                                    .replace(/\s+/g, ' ')
+                                    .trim()
+                                    .slice(0, 220)}
+                                {(article.body || '').length > 220 ? '...' : ''}
+                            </p>
+                        </article>
+                    ))}
+                    {!filteredArticles.length && (
+                        <p className={styles.emptyState}>No Thrive articles found for this filter.</p>
+                    )}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default ThriveListingPage
diff --git a/src/apps/community/src/pages/thrive/index.ts b/src/apps/community/src/pages/thrive/index.ts
new file mode 100644
index 000000000..a71290001
--- /dev/null
+++ b/src/apps/community/src/pages/thrive/index.ts
@@ -0,0 +1 @@
+export * from './thrive.routes'
diff --git a/src/apps/community/src/pages/thrive/thrive.routes.tsx b/src/apps/community/src/pages/thrive/thrive.routes.tsx
new file mode 100644
index 000000000..716d9c5d8
--- /dev/null
+++ b/src/apps/community/src/pages/thrive/thrive.routes.tsx
@@ -0,0 +1,37 @@
+import {
+    lazyLoad,
+    LazyLoadedComponent,
+    PlatformRoute,
+} from '~/libs/core'
+
+import {
+    thriveArticleRouteId,
+    thriveListingRouteId,
+    thriveSearchRouteId,
+    thriveTracksRouteId,
+} from '../../config/routes.config'
+
+const ThriveListingPage: LazyLoadedComponent = lazyLoad(() => import('./ThriveListingPage'))
+const ThriveArticlePage: LazyLoadedComponent = lazyLoad(() => import('./ThriveArticlePage'))
+
+/**
+ * Route definitions for the Thrive article page module.
+ */
+export const thriveRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        element: <ThriveListingPage />,
+        route: thriveListingRouteId,
+    },
+    {
+        element: <ThriveListingPage />,
+        route: thriveTracksRouteId,
+    },
+    {
+        element: <ThriveListingPage />,
+        route: thriveSearchRouteId,
+    },
+    {
+        element: <ThriveArticlePage />,
+        route: thriveArticleRouteId,
+    },
+]
diff --git a/src/apps/community/src/pages/timeline-wall/TimelineWallPage.module.scss b/src/apps/community/src/pages/timeline-wall/TimelineWallPage.module.scss
new file mode 100644
index 000000000..bc27b3ed7
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/TimelineWallPage.module.scss
@@ -0,0 +1,203 @@
+.container {
+    margin: 0 auto;
+    max-width: 1260px;
+    padding: 0 16px 28px;
+}
+
+.header {
+    align-items: center;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+    min-height: 180px;
+    overflow: hidden;
+    position: relative;
+}
+
+.headerAdmin {
+    justify-content: flex-start;
+    padding: 0 18px;
+}
+
+.headerWithDiscuss {
+    justify-content: space-between;
+}
+
+.headerBg {
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 0;
+}
+
+.hideDesktop {
+    display: none;
+}
+
+.headerTitle {
+    color: #fff;
+    font-size: 42px;
+    margin: 0;
+    position: relative;
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+    z-index: 1;
+}
+
+.headerTabs {
+    display: flex;
+    gap: 10px;
+    position: relative;
+    z-index: 1;
+}
+
+.tabItem {
+    align-items: center;
+    background: rgba(255, 255, 255, 0.14);
+    border: 0;
+    border-radius: 999px;
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 14px;
+    font-weight: 600;
+    gap: 8px;
+    min-height: 38px;
+    padding: 0 16px;
+    position: relative;
+}
+
+.selected {
+    background: #fff;
+    color: #0d61ff;
+}
+
+.selectIndicator {
+    border-radius: 2px;
+    bottom: -6px;
+    height: 2px;
+    left: 16px;
+    opacity: 0;
+    position: absolute;
+    right: 16px;
+}
+
+.selected .selectIndicator {
+    background: #0d61ff;
+    opacity: 1;
+}
+
+.tag {
+    align-items: center;
+    background: #f05a28;
+    border-radius: 999px;
+    color: #fff;
+    display: inline-flex;
+    font-size: 11px;
+    font-weight: 700;
+    height: 18px;
+    justify-content: center;
+    min-width: 18px;
+    padding: 0 6px;
+}
+
+.discussButton {
+    align-items: center;
+    background: #ffffff;
+    border-radius: 999px;
+    color: #0d61ff;
+    display: inline-flex;
+    font-size: 13px;
+    font-weight: 700;
+    gap: 8px;
+    letter-spacing: 0.02em;
+    padding: 11px 16px;
+    position: relative;
+    text-decoration: none;
+    z-index: 1;
+}
+
+.filterDropdown {
+    align-items: center;
+    background: rgba(255, 255, 255, 0.95);
+    border: 0;
+    border-radius: 999px;
+    color: #0d61ff;
+    cursor: pointer;
+    display: none;
+    font-size: 14px;
+    font-weight: 600;
+    gap: 8px;
+    padding: 8px 14px;
+    position: relative;
+    z-index: 1;
+}
+
+.tabContent {
+    margin-top: 6px;
+}
+
+.hidden {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 0 10px 22px;
+    }
+
+    .header {
+        border-radius: 0;
+        margin: 0 -10px 14px;
+        min-height: 130px;
+        padding: 0 12px;
+    }
+
+    .hideMobile {
+        display: none;
+    }
+
+    .hideDesktop {
+        display: block;
+    }
+
+    .headerTitle {
+        font-size: 26px;
+        padding-top: 16px;
+        text-align: center;
+    }
+
+    .headerTabs {
+        gap: 6px;
+        margin-top: 22px;
+    }
+
+    .tabItem {
+        font-size: 12px;
+        min-height: 34px;
+        padding: 0 10px;
+    }
+
+    .tag {
+        font-size: 10px;
+        height: 16px;
+        min-width: 16px;
+    }
+
+    .discussButton {
+        display: none;
+    }
+
+    .filterDropdown {
+        display: inline-flex;
+    }
+
+    .headerAdmin {
+        align-items: flex-start;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+}
diff --git a/src/apps/community/src/pages/timeline-wall/TimelineWallPage.tsx b/src/apps/community/src/pages/timeline-wall/TimelineWallPage.tsx
new file mode 100644
index 000000000..aebca188a
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/TimelineWallPage.tsx
@@ -0,0 +1,368 @@
+/* eslint-disable no-void */
+/* eslint-disable ordered-imports/ordered-imports */
+/* eslint-disable react/jsx-no-bind */
+import {
+    FC,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
+import classNames from 'classnames'
+import moment from 'moment'
+
+import { EnvironmentConfig } from '~/config'
+import {
+    profileContext,
+    ProfileContextData,
+    tokenGetAsync,
+} from '~/libs/core'
+import {
+    IconOutline,
+    LoadingSpinner,
+} from '~/libs/ui'
+
+import {
+    useTimelineWall,
+    type UseTimelineWallResult,
+} from '../../lib'
+import { type RejectTimelineEventBody } from '../../lib/services'
+import {
+    PendingApprovals,
+    TimelineEvents,
+} from './components'
+import topBanner from './assets/top-banner.png'
+import topBannerMobile from './assets/top-banner-mobile.png'
+
+import styles from './TimelineWallPage.module.scss'
+
+interface TimelineFilterValue {
+    month: number
+    year: number
+}
+
+interface TimelineConfigExtension {
+    TIMELINE?: {
+        FORUM_LINK?: string
+    }
+}
+
+const FORUM_LINK = (EnvironmentConfig as unknown as TimelineConfigExtension)
+    .TIMELINE?.FORUM_LINK ?? `${EnvironmentConfig.TOPCODER_URL}/community`
+
+/**
+ * Public timeline wall page with optional authenticated admin moderation tools.
+ *
+ * @returns Timeline wall content.
+ */
+const TimelineWallPage: FC = () => {
+    const currentTime = new Date()
+    const thisYear = currentTime.getFullYear()
+
+    const [tab, setTab] = useState<number>(0)
+    const [authToken, setAuthToken] = useState<string | undefined>(undefined)
+    const [showRightFilterMobile, setShowRightFilterMobile] = useState<boolean>(false)
+    const [isMobile, setIsMobile] = useState<boolean>(window.innerWidth <= 768)
+    const [selectedFilterValue, setSelectedFilterValue] = useState<TimelineFilterValue>({
+        month: -1,
+        year: 0,
+    })
+
+    const { isLoggedIn }: ProfileContextData = useContext(profileContext)
+
+    const {
+        approveEvent,
+        deleteEvent,
+        events,
+        fetchAvatar,
+        isAdmin,
+        loadCurrentUser,
+        loadEvents,
+        loading,
+        loadingApprovals,
+        pendingApprovals,
+        removeEvent,
+        submitEvent,
+        uploading,
+        uploadResult,
+        userAvatars,
+    }: UseTimelineWallResult = useTimelineWall()
+
+    useEffect(() => {
+        document.title = 'Timeline Wall | Topcoder'
+    }, [])
+
+    useEffect(() => {
+        const handleResize = (): void => {
+            setIsMobile(window.innerWidth <= 768)
+        }
+
+        window.addEventListener('resize', handleResize)
+
+        return () => {
+            window.removeEventListener('resize', handleResize)
+        }
+    }, [])
+
+    useEffect(() => {
+        let active = true
+
+        async function resolveAuthToken(): Promise<void> {
+            if (!isLoggedIn) {
+                if (active) {
+                    setAuthToken(undefined)
+                }
+
+                return
+            }
+
+            const tokenData = await tokenGetAsync()
+
+            if (!active) {
+                return
+            }
+
+            setAuthToken(tokenData.token)
+
+            if (tokenData.token) {
+                await loadCurrentUser(tokenData.token)
+            }
+        }
+
+        void resolveAuthToken()
+
+        return () => {
+            active = false
+        }
+    }, [isLoggedIn, loadCurrentUser])
+
+    useEffect(() => {
+        if (!events.length) {
+            return
+        }
+
+        const uniqueHandles = Array.from(new Set(events.map(item => item.createdBy)))
+        uniqueHandles.forEach(handle => {
+            if (!userAvatars[handle]) {
+                void fetchAvatar(handle)
+            }
+        })
+    }, [events, fetchAvatar, userAvatars])
+
+    useEffect(() => {
+        if (!pendingApprovals.length) {
+            return
+        }
+
+        const uniqueHandles = Array.from(new Set(pendingApprovals.map(item => item.createdBy)))
+        uniqueHandles.forEach(handle => {
+            if (!userAvatars[handle]) {
+                void fetchAvatar(handle)
+            }
+        })
+    }, [fetchAvatar, pendingApprovals, userAvatars])
+
+    useEffect(() => {
+        const currentYear = selectedFilterValue.year
+        const currentMonth = Math.max(selectedFilterValue.month, 0)
+        const maxYear = 2032
+        let target: HTMLElement | undefined
+        let date = moment(`${currentYear}-${currentMonth + 1}`)
+            .format('YYYY-MM')
+
+        while (!target) {
+            target = document.getElementById(`${isMobile ? 'mobile-' : 'desktop-'}${moment(date)
+                .year()}-${(moment(date)
+                .month())
+                .toString()
+                .padStart(2, '0')}`)
+                || undefined
+
+            if (target || !moment(date)
+                .isValid() || moment(date)
+                .year() > maxYear) {
+                break
+            }
+
+            date = moment(date)
+                .add(1, 'months')
+                .format('YYYY-MM')
+        }
+
+        if (target) {
+            const yOffset = -10
+            const coordinate = target.getBoundingClientRect().top + window.pageYOffset + yOffset
+            window.scrollTo({
+                behavior: 'smooth',
+                top: coordinate,
+            })
+        } else {
+            window.scrollTo({
+                behavior: 'smooth',
+                top: 0,
+            })
+        }
+    }, [isMobile, selectedFilterValue])
+
+    const sortedEvents = useMemo(
+        () => [...events].sort(
+            (left, right) => moment(right.eventDate)
+                .valueOf() - moment(left.eventDate)
+                .valueOf(),
+        ),
+        [events],
+    )
+
+    const shouldShowDiscuss = useMemo(() => {
+        if (tab !== 0) {
+            return false
+        }
+
+        if (isAdmin) {
+            return !isMobile
+        }
+
+        return true
+    }, [isAdmin, isMobile, tab])
+
+    return (
+        <div className={styles.container}>
+            <div
+                className={classNames(
+                    styles.header,
+                    isAdmin && styles.headerAdmin,
+                    shouldShowDiscuss && styles.headerWithDiscuss,
+                )}
+            >
+                <img alt='top-banner' className={classNames(styles.headerBg, styles.hideMobile)} src={topBanner} />
+                <img
+                    alt='top-banner-mobile'
+                    className={classNames(styles.headerBg, styles.hideDesktop)}
+                    src={topBannerMobile}
+                />
+
+                {isAdmin ? (
+                    <div className={styles.headerTabs}>
+                        <button
+                            className={classNames(styles.tabItem, tab === 0 && styles.selected)}
+                            onClick={() => setTab(0)}
+                            type='button'
+                        >
+                            Timeline View
+                            <span className={styles.selectIndicator} />
+                        </button>
+                        <button
+                            className={classNames(styles.tabItem, tab === 1 && styles.selected)}
+                            onClick={() => setTab(1)}
+                            type='button'
+                        >
+                            Pending Approvals
+                            <span className={styles.selectIndicator} />
+                            {!!pendingApprovals.length && (
+                                <span className={styles.tag}>{pendingApprovals.length}</span>
+                            )}
+                        </button>
+                    </div>
+                ) : (
+                    <h1 className={styles.headerTitle}>Topcoder Timeline Wall</h1>
+                )}
+
+                {shouldShowDiscuss && (
+                    <a
+                        className={styles.discussButton}
+                        href={FORUM_LINK}
+                        rel='noopener noreferrer'
+                        target='_blank'
+                    >
+                        <span>DISCUSS</span>
+                        <IconOutline.ArrowRightIcon width={16} />
+                    </a>
+                )}
+
+                <button
+                    className={styles.filterDropdown}
+                    onClick={() => setShowRightFilterMobile(true)}
+                    type='button'
+                >
+                    <span>{selectedFilterValue.year || thisYear}</span>
+                    <IconOutline.ChevronDownIcon width={16} />
+                </button>
+            </div>
+
+            {loading ? (
+                <LoadingSpinner />
+            ) : (
+                <>
+                    <TimelineEvents
+                        className={classNames(styles.tabContent, tab === 1 && styles.hidden)}
+                        events={sortedEvents}
+                        isAdmin={isAdmin}
+                        isAuthenticated={Boolean(authToken)}
+                        onDeleteEvent={async (id: string) => {
+                            if (!authToken) {
+                                return
+                            }
+
+                            await deleteEvent(authToken, id)
+                        }}
+                        onDoneAddEvent={() => {
+                            void loadEvents()
+                        }}
+                        onSubmitEvent={async (formData: FormData) => {
+                            if (!authToken) {
+                                return
+                            }
+
+                            await submitEvent(authToken, formData)
+                        }}
+                        selectedFilterValue={selectedFilterValue}
+                        setSelectedFilterValue={setSelectedFilterValue}
+                        setShowRightFilterMobile={setShowRightFilterMobile}
+                        showRightFilterMobile={showRightFilterMobile}
+                        uploadResult={uploadResult}
+                        uploading={uploading}
+                        userAvatars={userAvatars}
+                    />
+
+                    {loadingApprovals ? (
+                        <div className={classNames(styles.tabContent, tab === 0 && styles.hidden)}>
+                            <LoadingSpinner />
+                        </div>
+                    ) : (
+                        <PendingApprovals
+                            className={classNames(styles.tabContent, tab === 0 && styles.hidden)}
+                            events={pendingApprovals}
+                            onApproveEvent={async (id: string) => {
+                                if (!authToken) {
+                                    return
+                                }
+
+                                await approveEvent(authToken, id)
+                            }}
+                            onDeleteEvent={async (id: string) => {
+                                if (!authToken) {
+                                    return
+                                }
+
+                                await deleteEvent(authToken, id)
+                            }}
+                            onRejectEvent={async (
+                                id: string,
+                                body: RejectTimelineEventBody,
+                            ) => {
+                                if (!authToken) {
+                                    return
+                                }
+
+                                await removeEvent(authToken, id, body)
+                            }}
+                            userAvatars={userAvatars}
+                        />
+                    )}
+                </>
+            )}
+        </div>
+    )
+}
+
+export default TimelineWallPage
diff --git a/src/apps/community/src/pages/timeline-wall/assets/top-banner-mobile.png b/src/apps/community/src/pages/timeline-wall/assets/top-banner-mobile.png
new file mode 100644
index 000000000..1481fb1ff
Binary files /dev/null and b/src/apps/community/src/pages/timeline-wall/assets/top-banner-mobile.png differ
diff --git a/src/apps/community/src/pages/timeline-wall/assets/top-banner.png b/src/apps/community/src/pages/timeline-wall/assets/top-banner.png
new file mode 100644
index 000000000..ba5ec29ba
Binary files /dev/null and b/src/apps/community/src/pages/timeline-wall/assets/top-banner.png differ
diff --git a/src/apps/community/src/pages/timeline-wall/components/AddEventButton/AddEventButton.module.scss b/src/apps/community/src/pages/timeline-wall/components/AddEventButton/AddEventButton.module.scss
new file mode 100644
index 000000000..b0c8c6721
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/AddEventButton/AddEventButton.module.scss
@@ -0,0 +1,163 @@
+.container {
+    margin-bottom: 20px;
+}
+
+.noLogin {
+    background: #f8f8f8;
+    border: 1px dashed #c8c8c8;
+    border-radius: 8px;
+    color: #5a5a5a;
+    padding: 16px;
+}
+
+.addTriggerButton {
+    align-items: center;
+    background: linear-gradient(132deg, #0f56e8, #1296ff);
+    border: 0;
+    border-radius: 8px;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    padding: 14px 16px;
+    width: 100%;
+}
+
+.addTriggerText {
+    font-size: 16px;
+    font-weight: 500;
+    text-align: left;
+}
+
+.iconsWrap {
+    align-items: center;
+    display: flex;
+    gap: 10px;
+}
+
+.iconItem {
+    align-items: center;
+    display: inline-flex;
+    font-size: 12px;
+    gap: 6px;
+}
+
+.separator {
+    background: rgba(255, 255, 255, 0.45);
+    display: block;
+    height: 18px;
+    width: 1px;
+}
+
+.addEventForm {
+    background: #fff;
+    border: 1px solid #d8d8d8;
+    border-radius: 8px;
+    padding: 16px;
+}
+
+.header {
+    align-items: center;
+    display: flex;
+    font-size: 18px;
+    font-weight: 600;
+    justify-content: space-between;
+    margin-bottom: 14px;
+}
+
+.closeButton {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    font-size: 18px;
+}
+
+.formFields {
+    display: grid;
+    gap: 8px;
+}
+
+.label {
+    color: #5b5b5b;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    margin-top: 4px;
+    text-transform: uppercase;
+}
+
+.input,
+.textArea {
+    border: 1px solid #cccccc;
+    border-radius: 6px;
+    font-size: 14px;
+    padding: 10px 12px;
+}
+
+.textArea {
+    line-height: 1.5;
+    min-height: 120px;
+    resize: vertical;
+}
+
+.filePickerWrap {
+    margin-top: 4px;
+}
+
+.fileHelpText {
+    color: #6a6a6a;
+    font-size: 12px;
+    margin: 8px 0 0;
+}
+
+.actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+    margin-top: 16px;
+}
+
+.cancelButton,
+.submitButton {
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    min-width: 128px;
+    padding: 10px 16px;
+    text-transform: uppercase;
+}
+
+.cancelButton {
+    background: #edf2ff;
+    color: #0d61ff;
+}
+
+.submitButton {
+    background: #0d61ff;
+    color: #fff;
+}
+
+.submitButton:disabled {
+    background: #b8c8ea;
+    cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+    .addTriggerButton {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .actions {
+        flex-direction: column;
+    }
+
+    .cancelButton,
+    .submitButton {
+        width: 100%;
+    }
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/AddEventButton/AddEventButton.tsx b/src/apps/community/src/pages/timeline-wall/components/AddEventButton/AddEventButton.tsx
new file mode 100644
index 000000000..4fbdcdcc2
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/AddEventButton/AddEventButton.tsx
@@ -0,0 +1,244 @@
+/* eslint-disable no-void */
+/* eslint-disable react/jsx-no-bind */
+import {
+    ChangeEvent,
+    Dispatch,
+    FC,
+    SetStateAction,
+    useMemo,
+    useState,
+} from 'react'
+
+import {
+    IconOutline,
+    InputFilePicker,
+} from '~/libs/ui'
+
+import { ModalEventAdd } from '../ModalEventAdd'
+
+import styles from './AddEventButton.module.scss'
+
+interface AddEventButtonProps {
+    isAdmin: boolean
+    isAuthenticated: boolean
+    onDoneAddEvent: () => void
+    onSubmitEvent: (formData: FormData) => Promise<void>
+    uploadResult: string
+    uploading: boolean
+}
+
+interface AddEventFormValues {
+    date: string
+    description: string
+    eventName: string
+    files: File[]
+}
+
+const defaultFormValues: AddEventFormValues = {
+    date: '',
+    description: '',
+    eventName: '',
+    files: [],
+}
+
+/**
+ * Entry component for creating a new timeline event submission.
+ *
+ * @param props Event submission permissions and callbacks.
+ * @returns Add event panel and input form.
+ */
+const AddEventButton: FC<AddEventButtonProps> = (props: AddEventButtonProps) => {
+    const [formData, setFormData]: [
+        AddEventFormValues,
+        Dispatch<SetStateAction<AddEventFormValues>>
+    ] = useState<AddEventFormValues>(defaultFormValues)
+    const [showAddForm, setShowAddForm] = useState<boolean>(false)
+    const [showResultModal, setShowResultModal] = useState<boolean>(false)
+
+    const canSubmitForm = useMemo(
+        () => Boolean(formData.eventName.trim())
+            && Boolean(formData.date)
+            && Boolean(formData.description.trim()),
+        [formData.date, formData.description, formData.eventName],
+    )
+
+    function setFieldValue<K extends keyof AddEventFormValues>(
+        key: K,
+        value: AddEventFormValues[K],
+    ): void {
+        setFormData(previous => ({
+            ...previous,
+            [key]: value,
+        }))
+    }
+
+    function submitEvent(): void {
+        const payload = new FormData()
+
+        payload.append('title', formData.eventName.trim())
+        payload.append('description', formData.description.trim())
+        payload.append('eventDate', formData.date)
+        formData.files.forEach(file => {
+            payload.append('mediaFiles', file)
+        })
+
+        setShowResultModal(true)
+        setShowAddForm(false)
+        setFormData(defaultFormValues)
+
+        void props.onSubmitEvent(payload)
+    }
+
+    return (
+        <div className={styles.container}>
+            {!props.isAuthenticated && (
+                <div className={styles.noLogin}>
+                    Please login or create an account to add an event.
+                </div>
+            )}
+
+            {props.isAuthenticated && !showAddForm && (
+                <button
+                    className={styles.addTriggerButton}
+                    onClick={() => setShowAddForm(true)}
+                    type='button'
+                >
+                    <span className={styles.addTriggerText}>What event would you like to add?</span>
+                    <div className={styles.iconsWrap}>
+                        <span className={styles.iconItem}>
+                            <IconOutline.PhotographIcon width={18} />
+                            <span>Photo</span>
+                        </span>
+                        <span className={styles.separator} />
+                        <span className={styles.iconItem}>
+                            <IconOutline.VideoCameraIcon width={18} />
+                            <span>Video</span>
+                        </span>
+                    </div>
+                </button>
+            )}
+
+            {props.isAuthenticated && showAddForm && (
+                <div className={styles.addEventForm}>
+                    <div className={styles.header}>
+                        <span>Add New Event</span>
+                        <button
+                            className={styles.closeButton}
+                            onClick={() => {
+                                setFormData(defaultFormValues)
+                                setShowAddForm(false)
+                            }}
+                            type='button'
+                        >
+                            ✕
+                        </button>
+                    </div>
+
+                    <div className={styles.formFields}>
+                        <label className={styles.label} htmlFor='timeline-event-name'>
+                            Event Name
+                        </label>
+                        <input
+                            className={styles.input}
+                            id='timeline-event-name'
+                            maxLength={38}
+                            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                                setFieldValue('eventName', event.target.value)
+                            }}
+                            placeholder='Enter event title'
+                            type='text'
+                            value={formData.eventName}
+                        />
+
+                        <label className={styles.label} htmlFor='timeline-event-date'>
+                            Event Date
+                        </label>
+                        <input
+                            className={styles.input}
+                            id='timeline-event-date'
+                            max={new Date()
+                                .toISOString()
+                                .slice(0, 10)}
+                            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                                setFieldValue('date', event.target.value)
+                            }}
+                            type='date'
+                            value={formData.date}
+                        />
+
+                        <label className={styles.label} htmlFor='timeline-event-description'>
+                            Description
+                        </label>
+                        <textarea
+                            className={styles.textArea}
+                            id='timeline-event-description'
+                            maxLength={240}
+                            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                                setFieldValue('description', event.target.value)
+                            }}
+                            placeholder='Tell your community about this memory'
+                            rows={5}
+                            value={formData.description}
+                        />
+
+                        <div className={styles.filePickerWrap}>
+                            <span className={styles.label}>Media File</span>
+                            <InputFilePicker
+                                fileConfig={{
+                                    acceptFileType: 'image/*,video/*',
+                                }}
+                                name='timeline-event-file'
+                                onChange={(fileList: FileList | undefined) => {
+                                    setFieldValue(
+                                        'files',
+                                        fileList ? Array.from(fileList)
+                                            .slice(0, 3) : [],
+                                    )
+                                }}
+                            />
+                            <p className={styles.fileHelpText}>
+                                Drag and drop support is unavailable here. Use browse to attach up to 3 photos/videos.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className={styles.actions}>
+                        <button
+                            className={styles.cancelButton}
+                            onClick={() => {
+                                setFormData(defaultFormValues)
+                                setShowAddForm(false)
+                            }}
+                            type='button'
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            className={styles.submitButton}
+                            disabled={!canSubmitForm}
+                            onClick={submitEvent}
+                            type='button'
+                        >
+                            Share Event
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            <ModalEventAdd
+                isAdmin={props.isAdmin}
+                onClose={() => {
+                    setShowResultModal(false)
+                    if (props.isAdmin) {
+                        props.onDoneAddEvent()
+                    }
+                }}
+                open={showResultModal}
+                uploadResult={props.uploadResult}
+                uploading={props.uploading}
+            />
+        </div>
+    )
+}
+
+export default AddEventButton
diff --git a/src/apps/community/src/pages/timeline-wall/components/AddEventButton/index.ts b/src/apps/community/src/pages/timeline-wall/components/AddEventButton/index.ts
new file mode 100644
index 000000000..00007bd24
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/AddEventButton/index.ts
@@ -0,0 +1 @@
+export { default as AddEventButton } from './AddEventButton'
diff --git a/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/ApprovalItem.module.scss b/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/ApprovalItem.module.scss
new file mode 100644
index 000000000..a3eb74150
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/ApprovalItem.module.scss
@@ -0,0 +1,141 @@
+.container {
+    background: #fff;
+    border: 1px solid #d8d8d8;
+    border-radius: 10px;
+    margin-bottom: 16px;
+    padding: 14px;
+}
+
+.header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.metaLeft {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.dateLabel {
+    color: #7a7a7a;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.avatar {
+    border-radius: 50%;
+    height: 24px;
+    object-fit: cover;
+    width: 24px;
+}
+
+.handleLink {
+    color: #0d61ff;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.title {
+    font-size: 20px;
+    line-height: 1.2;
+    margin: 0 0 8px;
+}
+
+.description {
+    color: #454545;
+    line-height: 1.55;
+    margin: 0;
+}
+
+.photoContainer {
+    display: grid;
+    gap: 8px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-top: 12px;
+}
+
+.photoButton {
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 0;
+}
+
+.photoButton img {
+    display: block;
+    height: 112px;
+    object-fit: cover;
+    width: 100%;
+}
+
+.actions {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 14px;
+}
+
+.trashButton {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: #c21b2d;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    padding: 0;
+}
+
+.actionButtons {
+    display: flex;
+    gap: 8px;
+}
+
+.rejectButton,
+.approveButton {
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 700;
+    min-width: 104px;
+    padding: 9px 14px;
+    text-transform: uppercase;
+}
+
+.rejectButton {
+    background: #edf2ff;
+    color: #0d61ff;
+}
+
+.approveButton {
+    background: #13a54a;
+    color: #fff;
+}
+
+@media (max-width: 768px) {
+    .photoContainer {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .actions {
+        align-items: stretch;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .actionButtons {
+        width: 100%;
+    }
+
+    .rejectButton,
+    .approveButton {
+        flex: 1;
+    }
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/ApprovalItem.tsx b/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/ApprovalItem.tsx
new file mode 100644
index 000000000..eb88ee321
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/ApprovalItem.tsx
@@ -0,0 +1,150 @@
+/* eslint-disable no-void */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/no-array-index-key */
+import {
+    FC,
+    useMemo,
+    useState,
+} from 'react'
+import moment from 'moment'
+
+import { EnvironmentConfig } from '~/config'
+import { IconOutline } from '~/libs/ui'
+
+import { type TimelineEvent } from '../../../../lib/models'
+import { type RejectTimelineEventBody } from '../../../../lib/services'
+import { ModalConfirmReject } from '../ModalConfirmReject'
+import { ModalDeleteConfirmation } from '../ModalDeleteConfirmation'
+import { ModalPhotoViewer } from '../ModalPhotoViewer'
+
+import styles from './ApprovalItem.module.scss'
+
+const DEFAULT_AVATAR_URL
+    = 'https://images.ctfassets.net/b5f1djy59z3a/4PTwZVSf3W7qgs9WssqbVa/'
+        + '4c51312671a4b9acbdfd7f5e22320b62/default_avatar.svg'
+
+interface ApprovalItemProps {
+    event: TimelineEvent
+    onApproveEvent: (id: string) => Promise<void> | void
+    onDeleteEvent: (id: string) => Promise<void> | void
+    onRejectEvent: (
+        id: string,
+        body: RejectTimelineEventBody,
+    ) => Promise<void> | void
+    userAvatars: Record<string, string>
+}
+
+/**
+ * Displays one pending approval entry for admin moderation.
+ *
+ * @param props Pending event details and action handlers.
+ * @returns Pending approval card.
+ */
+const ApprovalItem: FC<ApprovalItemProps> = (props: ApprovalItemProps) => {
+    const [showRejectModal, setShowRejectModal] = useState<boolean>(false)
+    const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false)
+    const [showPhotoModal, setShowPhotoModal] = useState<boolean>(false)
+    const [selectedPhoto, setSelectedPhoto] = useState<number>(0)
+
+    const photoUrl = useMemo(
+        () => props.userAvatars[props.event.createdBy] || DEFAULT_AVATAR_URL,
+        [props.event.createdBy, props.userAvatars],
+    )
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <div className={styles.metaLeft}>
+                    <span className={styles.dateLabel}>
+                        {moment(props.event.eventDate)
+                            .format('MMM DD, YYYY')}
+                    </span>
+                    <img alt='avatar' className={styles.avatar} src={photoUrl} />
+                    <a
+                        className={styles.handleLink}
+                        href={`${EnvironmentConfig.TOPCODER_URL}/members/${props.event.createdBy}`}
+                        rel='noopener noreferrer'
+                        target='_blank'
+                    >
+                        {props.event.createdBy}
+                    </a>
+                </div>
+            </div>
+
+            <h4 className={styles.title}>{props.event.title}</h4>
+            <p className={styles.description}>{props.event.description}</p>
+
+            {!!props.event.mediaFiles.length && (
+                <div className={styles.photoContainer}>
+                    {props.event.mediaFiles.map((mediaUrl, index) => (
+                        <button
+                            className={styles.photoButton}
+                            key={`${props.event.id}-${mediaUrl}-${index}`}
+                            onClick={() => {
+                                setSelectedPhoto(index)
+                                setShowPhotoModal(true)
+                            }}
+                            type='button'
+                        >
+                            <img alt={`${props.event.title} media ${index + 1}`} src={mediaUrl} />
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            <div className={styles.actions}>
+                <button
+                    className={styles.trashButton}
+                    onClick={() => setShowDeleteModal(true)}
+                    type='button'
+                >
+                    <IconOutline.TrashIcon width={18} />
+                </button>
+                <div className={styles.actionButtons}>
+                    <button
+                        className={styles.rejectButton}
+                        onClick={() => setShowRejectModal(true)}
+                        type='button'
+                    >
+                        Reject
+                    </button>
+                    <button
+                        className={styles.approveButton}
+                        onClick={() => {
+                            void props.onApproveEvent(props.event.id)
+                        }}
+                        type='button'
+                    >
+                        Approve
+                    </button>
+                </div>
+            </div>
+
+            <ModalConfirmReject
+                onClose={() => setShowRejectModal(false)}
+                onReject={(body: RejectTimelineEventBody) => {
+                    void props.onRejectEvent(props.event.id, body)
+                }}
+                open={showRejectModal}
+            />
+
+            <ModalDeleteConfirmation
+                handle={props.event.createdBy}
+                id={props.event.id}
+                onClose={() => setShowDeleteModal(false)}
+                onDelete={props.onDeleteEvent}
+                open={showDeleteModal}
+                title={props.event.title}
+            />
+
+            <ModalPhotoViewer
+                onClose={() => setShowPhotoModal(false)}
+                open={showPhotoModal}
+                photos={props.event.mediaFiles}
+                selectedPhoto={selectedPhoto}
+            />
+        </div>
+    )
+}
+
+export default ApprovalItem
diff --git a/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/index.ts b/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/index.ts
new file mode 100644
index 000000000..e50497864
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ApprovalItem/index.ts
@@ -0,0 +1 @@
+export { default as ApprovalItem } from './ApprovalItem'
diff --git a/src/apps/community/src/pages/timeline-wall/components/EventItem/EventItem.module.scss b/src/apps/community/src/pages/timeline-wall/components/EventItem/EventItem.module.scss
new file mode 100644
index 000000000..ad5f117a8
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/EventItem/EventItem.module.scss
@@ -0,0 +1,168 @@
+.container {
+    background: #fff;
+    border: 1px solid #d8d8d8;
+    border-radius: 10px;
+    margin-bottom: 18px;
+    position: relative;
+}
+
+.colorGreen {
+    border-top: 3px solid #2dbd6d;
+}
+
+.colorRed {
+    border-top: 3px solid #f25f5c;
+}
+
+.colorPurple {
+    border-top: 3px solid #6e61ff;
+}
+
+.dot {
+    background: #1f74ff;
+    border-radius: 50%;
+    height: 10px;
+    position: absolute;
+    top: 28px;
+    width: 10px;
+}
+
+.dotLeft {
+    left: -26px;
+}
+
+.dotRight {
+    right: -26px;
+}
+
+.content {
+    padding: 14px;
+}
+
+.header {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    display: flex;
+    font-size: 20px;
+    font-weight: 600;
+    justify-content: space-between;
+    line-height: 1.2;
+    margin-bottom: 8px;
+    text-align: left;
+    width: 100%;
+}
+
+.flipVertical {
+    transform: rotate(180deg);
+}
+
+.contentText {
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    background: transparent;
+    border: 0;
+    color: #454545;
+    cursor: pointer;
+    display: -webkit-box;
+    line-height: 1.5;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    text-align: left;
+    width: 100%;
+}
+
+.expanded {
+    -webkit-line-clamp: initial;
+    overflow: visible;
+}
+
+.photoContainer {
+    display: grid;
+    gap: 8px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-top: 12px;
+}
+
+.onePhoto {
+    grid-template-columns: 1fr;
+}
+
+.twoPhoto {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.photoButton {
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 0;
+}
+
+.photoButton img {
+    display: block;
+    height: 145px;
+    object-fit: cover;
+    width: 100%;
+}
+
+.bottom {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 14px;
+}
+
+.bottomLeft {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.avatar {
+    border-radius: 50%;
+    height: 23px;
+    object-fit: cover;
+    width: 23px;
+}
+
+.handleLink {
+    color: #0d61ff;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.dateLabel {
+    color: #7e7e7e;
+    font-size: 13px;
+}
+
+.deleteButton {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: #ca1f2f;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    padding: 0;
+}
+
+@media (max-width: 768px) {
+    .dot {
+        display: none;
+    }
+
+    .header {
+        font-size: 18px;
+    }
+
+    .photoButton img {
+        height: 120px;
+    }
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/EventItem/EventItem.tsx b/src/apps/community/src/pages/timeline-wall/components/EventItem/EventItem.tsx
new file mode 100644
index 000000000..24f64cc2f
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/EventItem/EventItem.tsx
@@ -0,0 +1,165 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/no-array-index-key */
+import {
+    FC,
+    useMemo,
+    useState,
+} from 'react'
+import classNames from 'classnames'
+import moment from 'moment'
+
+import { EnvironmentConfig } from '~/config'
+import { IconOutline } from '~/libs/ui'
+
+import { type TimelineEvent } from '../../../../lib/models'
+import { ModalDeleteConfirmation } from '../ModalDeleteConfirmation'
+import { ModalPhotoViewer } from '../ModalPhotoViewer'
+
+import styles from './EventItem.module.scss'
+
+const DEFAULT_AVATAR_URL
+    = 'https://images.ctfassets.net/b5f1djy59z3a/4PTwZVSf3W7qgs9WssqbVa/'
+        + '4c51312671a4b9acbdfd7f5e22320b62/default_avatar.svg'
+
+interface EventItemProps {
+    className?: string
+    eventItem: TimelineEvent & { color?: 'green' | 'purple' | 'red' }
+    idPrefix: string
+    isAdmin: boolean
+    isLeft?: boolean
+    onDeleteEvent: (id: string) => Promise<void> | void
+    userAvatars: Record<string, string>
+}
+
+/**
+ * Renders one approved timeline event card.
+ *
+ * @param props Event details and moderation handlers.
+ * @returns Timeline event card.
+ */
+const EventItem: FC<EventItemProps> = (props: EventItemProps) => {
+    const [isExpanded, setIsExpanded] = useState<boolean>(false)
+    const [showModalPhoto, setShowModalPhoto] = useState<boolean>(false)
+    const [selectedPhoto, setSelectedPhoto] = useState<number>(0)
+    const [showModalDelete, setShowModalDelete] = useState<boolean>(false)
+
+    const photoUrl = useMemo(
+        () => props.userAvatars[props.eventItem.createdBy] || DEFAULT_AVATAR_URL,
+        [props.eventItem.createdBy, props.userAvatars],
+    )
+
+    const mediaFiles = props.eventItem.mediaFiles || []
+
+    return (
+        <div
+            className={classNames(
+                styles.container,
+                props.className,
+                props.eventItem.color === 'green' && styles.colorGreen,
+                props.eventItem.color === 'purple' && styles.colorPurple,
+                props.eventItem.color === 'red' && styles.colorRed,
+            )}
+            id={`${props.idPrefix}${moment(props.eventItem.eventDate)
+                .format('YYYY-MM')}`}
+        >
+            {!props.isLeft && <div className={classNames(styles.dot, styles.dotLeft)} />}
+            <div className={styles.content}>
+                <button
+                    className={styles.header}
+                    onClick={() => setIsExpanded(previous => !previous)}
+                    type='button'
+                >
+                    <span>{props.eventItem.title}</span>
+                    <IconOutline.ChevronDownIcon
+                        className={classNames(isExpanded && styles.flipVertical)}
+                        width={18}
+                    />
+                </button>
+
+                <button
+                    className={classNames(styles.contentText, isExpanded && styles.expanded)}
+                    onClick={() => setIsExpanded(previous => !previous)}
+                    type='button'
+                >
+                    {props.eventItem.description}
+                </button>
+
+                {!!mediaFiles.length && (
+                    <div
+                        className={classNames(
+                            styles.photoContainer,
+                            mediaFiles.length === 1 && styles.onePhoto,
+                            mediaFiles.length === 2 && styles.twoPhoto,
+                        )}
+                    >
+                        {mediaFiles.map((mediaUrl, index) => (
+                            <button
+                                className={styles.photoButton}
+                                key={`${props.eventItem.id}-${mediaUrl}-${index}`}
+                                onClick={() => {
+                                    setSelectedPhoto(index)
+                                    setShowModalPhoto(true)
+                                }}
+                                type='button'
+                            >
+                                <img alt={`${props.eventItem.title} media ${index + 1}`} src={mediaUrl} />
+                            </button>
+                        ))}
+                    </div>
+                )}
+
+                <div className={styles.bottom}>
+                    <div className={styles.bottomLeft}>
+                        <img alt='avatar' className={styles.avatar} src={photoUrl} />
+                        <a
+                            className={styles.handleLink}
+                            href={`${EnvironmentConfig.TOPCODER_URL}/members/${props.eventItem.createdBy}`}
+                            rel='noopener noreferrer'
+                            target='_blank'
+                        >
+                            {props.eventItem.createdBy}
+                        </a>
+                        <span className={styles.dateLabel}>
+                            {' • '}
+                            {moment(props.eventItem.eventDate)
+                                .format('MMM DD, YYYY')}
+                        </span>
+                    </div>
+                    {props.isAdmin && (
+                        <button
+                            className={styles.deleteButton}
+                            onClick={() => setShowModalDelete(true)}
+                            type='button'
+                        >
+                            <IconOutline.TrashIcon width={17} />
+                        </button>
+                    )}
+                </div>
+            </div>
+            {props.isLeft && <div className={classNames(styles.dot, styles.dotRight)} />}
+
+            <ModalPhotoViewer
+                onClose={() => setShowModalPhoto(false)}
+                open={showModalPhoto}
+                photos={mediaFiles}
+                selectedPhoto={selectedPhoto}
+            />
+
+            <ModalDeleteConfirmation
+                handle={props.eventItem.createdBy}
+                id={props.eventItem.id}
+                onClose={() => setShowModalDelete(false)}
+                onDelete={props.onDeleteEvent}
+                open={showModalDelete}
+                title={props.eventItem.title}
+            />
+        </div>
+    )
+}
+
+EventItem.defaultProps = {
+    className: undefined,
+    isLeft: false,
+}
+
+export default EventItem
diff --git a/src/apps/community/src/pages/timeline-wall/components/EventItem/index.ts b/src/apps/community/src/pages/timeline-wall/components/EventItem/index.ts
new file mode 100644
index 000000000..fdc7dc1a1
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/EventItem/index.ts
@@ -0,0 +1 @@
+export { default as EventItem } from './EventItem'
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/ModalConfirmReject.module.scss b/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/ModalConfirmReject.module.scss
new file mode 100644
index 000000000..d1be8f1c2
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/ModalConfirmReject.module.scss
@@ -0,0 +1,38 @@
+.description {
+    color: #2a2a2a;
+    font-size: 15px;
+    line-height: 1.6;
+    margin: 0 0 16px;
+}
+
+.label {
+    color: #5c5c5c;
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+}
+
+.input,
+.textArea {
+    border: 1px solid #cccccc;
+    border-radius: 6px;
+    font-size: 14px;
+    margin-bottom: 14px;
+    padding: 10px 12px;
+    width: 100%;
+}
+
+.textArea {
+    line-height: 1.5;
+    resize: vertical;
+}
+
+.actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/ModalConfirmReject.tsx b/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/ModalConfirmReject.tsx
new file mode 100644
index 000000000..31f87156c
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/ModalConfirmReject.tsx
@@ -0,0 +1,115 @@
+/* eslint-disable no-void */
+/* eslint-disable react/jsx-no-bind */
+import {
+    ChangeEvent,
+    FC,
+    useMemo,
+    useState,
+} from 'react'
+
+import {
+    BaseModal,
+    Button,
+} from '~/libs/ui'
+
+import { type RejectTimelineEventBody } from '../../../../lib/services'
+
+import styles from './ModalConfirmReject.module.scss'
+
+interface ModalConfirmRejectProps {
+    onClose: () => void
+    onReject: (body: RejectTimelineEventBody) => Promise<void> | void
+    open: boolean
+}
+
+const rejectionReasons: string[] = [
+    'Not related to Topcoder community timeline',
+    'Contains inappropriate content',
+    'Insufficient event details',
+    'Duplicate submission',
+]
+
+/**
+ * Modal used by admins to reject pending timeline events.
+ *
+ * @param props Modal state and reject callback.
+ * @returns Reject confirmation modal.
+ */
+const ModalConfirmReject: FC<ModalConfirmRejectProps> = (
+    props: ModalConfirmRejectProps,
+) => {
+    const [reason, setReason] = useState<string>('')
+    const [note, setNote] = useState<string>('')
+
+    const canSubmit = useMemo(
+        () => Boolean(reason) && Boolean(note.trim()),
+        [note, reason],
+    )
+
+    return (
+        <BaseModal
+            allowBodyScroll
+            onClose={props.onClose}
+            open={props.open}
+            title='Confirm Reject Event'
+        >
+            <p className={styles.description}>
+                Please provide a reason for rejecting this event.
+                {' '}
+                This action cannot be undone.
+            </p>
+
+            <label className={styles.label} htmlFor='reject-reason'>
+                Rejection Reason
+            </label>
+            <select
+                className={styles.input}
+                id='reject-reason'
+                onChange={(event: ChangeEvent<HTMLSelectElement>) => {
+                    setReason(event.target.value)
+                }}
+                value={reason}
+            >
+                <option value=''>Select a reason</option>
+                {rejectionReasons.map(option => (
+                    <option key={option} value={option}>{option}</option>
+                ))}
+            </select>
+
+            <label className={styles.label} htmlFor='reject-note'>
+                Note
+            </label>
+            <textarea
+                className={styles.textArea}
+                id='reject-note'
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                    setNote(event.target.value)
+                }}
+                rows={4}
+                value={note}
+            />
+
+            <div className={styles.actions}>
+                <Button
+                    label='Cancel'
+                    onClick={props.onClose}
+                    secondary
+                />
+                <Button
+                    disabled={!canSubmit}
+                    label='Reject'
+                    onClick={() => {
+                        void props.onReject({
+                            note,
+                            reason,
+                        })
+                        props.onClose()
+                    }}
+                    primary
+                />
+            </div>
+        </BaseModal>
+    )
+}
+
+export default ModalConfirmReject
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/index.ts b/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/index.ts
new file mode 100644
index 000000000..48e518263
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalConfirmReject/index.ts
@@ -0,0 +1 @@
+export { default as ModalConfirmReject } from './ModalConfirmReject'
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/ModalDeleteConfirmation.module.scss b/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/ModalDeleteConfirmation.module.scss
new file mode 100644
index 000000000..2493fa748
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/ModalDeleteConfirmation.module.scss
@@ -0,0 +1,6 @@
+.description {
+    color: #2a2a2a;
+    font-size: 15px;
+    line-height: 1.6;
+    margin: 0;
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/ModalDeleteConfirmation.tsx b/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/ModalDeleteConfirmation.tsx
new file mode 100644
index 000000000..bd2367a13
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/ModalDeleteConfirmation.tsx
@@ -0,0 +1,54 @@
+/* eslint-disable no-void */
+/* eslint-disable react/jsx-no-bind */
+import { FC } from 'react'
+
+import { ConfirmModal } from '~/libs/ui'
+
+import styles from './ModalDeleteConfirmation.module.scss'
+
+interface ModalDeleteConfirmationProps {
+    handle: string
+    id: string
+    onClose: () => void
+    onDelete: (id: string) => Promise<void> | void
+    open: boolean
+    title: string
+}
+
+/**
+ * Confirmation modal used before deleting a timeline event.
+ *
+ * @param props Delete target and callbacks.
+ * @returns Delete confirmation dialog.
+ */
+const ModalDeleteConfirmation: FC<ModalDeleteConfirmationProps> = (
+    props: ModalDeleteConfirmationProps,
+) => (
+    <ConfirmModal
+        action='Yes, Delete'
+        onClose={props.onClose}
+        onConfirm={() => {
+            void props.onDelete(props.id)
+            props.onClose()
+        }}
+        open={props.open}
+        title='Delete Confirmation'
+    >
+        <p className={styles.description}>
+            Are you sure you want to delete the event
+            {' '}
+            <strong>
+                “
+                {props.title}
+                ”
+            </strong>
+            {' '}
+            from
+            {' '}
+            <strong>{props.handle}</strong>
+            ?
+        </p>
+    </ConfirmModal>
+)
+
+export default ModalDeleteConfirmation
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/index.ts b/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/index.ts
new file mode 100644
index 000000000..55927ad4f
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalDeleteConfirmation/index.ts
@@ -0,0 +1 @@
+export { default as ModalDeleteConfirmation } from './ModalDeleteConfirmation'
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/ModalEventAdd.module.scss b/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/ModalEventAdd.module.scss
new file mode 100644
index 000000000..032835746
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/ModalEventAdd.module.scss
@@ -0,0 +1,21 @@
+.description {
+    color: #2a2a2a;
+    font-size: 15px;
+    line-height: 1.6;
+    margin: 0;
+}
+
+.error {
+    color: #ca1f2f;
+}
+
+.loadingWrap {
+    min-height: 100px;
+}
+
+.actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+    margin-top: 16px;
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/ModalEventAdd.tsx b/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/ModalEventAdd.tsx
new file mode 100644
index 000000000..99f31fe52
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/ModalEventAdd.tsx
@@ -0,0 +1,65 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import {
+    BaseModal,
+    Button,
+    LoadingSpinner,
+} from '~/libs/ui'
+
+import styles from './ModalEventAdd.module.scss'
+
+interface ModalEventAddProps {
+    isAdmin: boolean
+    onClose: () => void
+    open: boolean
+    uploading: boolean
+    uploadResult: string
+}
+
+/**
+ * Displays upload status feedback after submitting a timeline event.
+ *
+ * @param props Upload state and close callback.
+ * @returns Submission confirmation modal.
+ */
+const ModalEventAdd: FC<ModalEventAddProps> = (props: ModalEventAddProps) => {
+    const successMessage = props.isAdmin
+        ? 'Thank you! Your event was added to the Timeline Wall.'
+        : 'Thank you! Your event was submitted for review. You will receive an email once review is completed.'
+
+    return (
+        <BaseModal
+            allowBodyScroll
+            onClose={props.onClose}
+            open={props.open}
+            title={props.uploadResult ? 'Error' : 'Confirmation'}
+        >
+            {props.uploading ? (
+                <div className={styles.loadingWrap}>
+                    <LoadingSpinner />
+                </div>
+            ) : (
+                <p className={classNames(styles.description, props.uploadResult && styles.error)}>
+                    {props.uploadResult || successMessage}
+                </p>
+            )}
+
+            <div className={styles.actions}>
+                <Button
+                    label='Cancel'
+                    onClick={props.onClose}
+                    secondary
+                />
+                <Button
+                    disabled={props.uploading}
+                    label='OK'
+                    onClick={props.onClose}
+                    primary
+                />
+            </div>
+        </BaseModal>
+    )
+}
+
+export default ModalEventAdd
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/index.ts b/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/index.ts
new file mode 100644
index 000000000..b3d4c90d0
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalEventAdd/index.ts
@@ -0,0 +1 @@
+export { default as ModalEventAdd } from './ModalEventAdd'
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/ModalPhotoViewer.module.scss b/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/ModalPhotoViewer.module.scss
new file mode 100644
index 000000000..70ea702d2
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/ModalPhotoViewer.module.scss
@@ -0,0 +1,68 @@
+.modalBody {
+    padding: 0 0 16px;
+}
+
+.content {
+    align-items: center;
+    background: #000;
+    display: flex;
+    justify-content: center;
+    min-height: 420px;
+    position: relative;
+}
+
+.mainMedia {
+    max-height: 70vh;
+    max-width: 100%;
+    object-fit: contain;
+}
+
+.navButton {
+    align-items: center;
+    background: rgba(255, 255, 255, 0.9);
+    border: 0;
+    border-radius: 999px;
+    cursor: pointer;
+    display: inline-flex;
+    height: 38px;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 38px;
+}
+
+.leftButton {
+    left: 14px;
+}
+
+.rightButton {
+    right: 14px;
+}
+
+.bottom {
+    display: grid;
+    gap: 8px;
+    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
+    margin-top: 12px;
+}
+
+.thumbnail {
+    background: #fff;
+    border: 1px solid #d7d7d7;
+    border-radius: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 0;
+}
+
+.thumbnail img {
+    display: block;
+    height: 68px;
+    object-fit: cover;
+    width: 100%;
+}
+
+.selected {
+    border-color: #0d61ff;
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/ModalPhotoViewer.tsx b/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/ModalPhotoViewer.tsx
new file mode 100644
index 000000000..6b0064f37
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/ModalPhotoViewer.tsx
@@ -0,0 +1,117 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/no-array-index-key */
+import {
+    Dispatch,
+    FC,
+    SetStateAction,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
+import classNames from 'classnames'
+
+import { BaseModal, IconOutline } from '~/libs/ui'
+
+import styles from './ModalPhotoViewer.module.scss'
+
+interface ModalPhotoViewerProps {
+    onClose: () => void
+    open: boolean
+    photos: string[]
+    selectedPhoto: number
+}
+
+/**
+ * Displays timeline event photos in a full-size viewer.
+ *
+ * @param props Modal state and photo URLs.
+ * @returns Photo viewer modal.
+ */
+const ModalPhotoViewer: FC<ModalPhotoViewerProps> = (
+    props: ModalPhotoViewerProps,
+) => {
+    const [localSelectedPhoto, setLocalSelectedPhoto]: [
+        number,
+        Dispatch<SetStateAction<number>>
+    ] = useState<number>(props.selectedPhoto)
+
+    useEffect(() => {
+        setLocalSelectedPhoto(props.selectedPhoto)
+    }, [props.selectedPhoto])
+
+    const selectedPhotoUrl = useMemo(
+        () => props.photos[localSelectedPhoto],
+        [localSelectedPhoto, props.photos],
+    )
+
+    if (!props.open || !props.photos.length) {
+        return <></>
+    }
+
+    return (
+        <BaseModal
+            allowBodyScroll
+            bodyClassName={styles.modalBody}
+            onClose={props.onClose}
+            open={props.open}
+            size='lg'
+        >
+            <div className={styles.content}>
+                {selectedPhotoUrl && (
+                    <img
+                        alt='Timeline media'
+                        className={styles.mainMedia}
+                        src={selectedPhotoUrl}
+                    />
+                )}
+
+                {props.photos.length > 1 && (
+                    <>
+                        <button
+                            className={classNames(styles.navButton, styles.leftButton)}
+                            onClick={() => {
+                                const nextIndex = localSelectedPhoto - 1 < 0
+                                    ? props.photos.length - 1
+                                    : localSelectedPhoto - 1
+                                setLocalSelectedPhoto(nextIndex)
+                            }}
+                            type='button'
+                        >
+                            <IconOutline.ChevronLeftIcon width={24} />
+                        </button>
+                        <button
+                            className={classNames(styles.navButton, styles.rightButton)}
+                            onClick={() => {
+                                const nextIndex = localSelectedPhoto + 1 >= props.photos.length
+                                    ? 0
+                                    : localSelectedPhoto + 1
+                                setLocalSelectedPhoto(nextIndex)
+                            }}
+                            type='button'
+                        >
+                            <IconOutline.ChevronRightIcon width={24} />
+                        </button>
+                    </>
+                )}
+            </div>
+
+            <div className={styles.bottom}>
+                {props.photos.map((photo, index) => (
+                    <button
+                        className={classNames(
+                            styles.thumbnail,
+                            index === localSelectedPhoto && styles.selected,
+                        )}
+                        key={`${photo}-${index}`}
+                        onClick={() => setLocalSelectedPhoto(index)}
+                        type='button'
+                    >
+                        <img alt={`Timeline thumbnail ${index + 1}`} src={photo} />
+                    </button>
+                ))}
+            </div>
+        </BaseModal>
+    )
+}
+
+export default ModalPhotoViewer
diff --git a/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/index.ts b/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/index.ts
new file mode 100644
index 000000000..2a12edd7c
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/ModalPhotoViewer/index.ts
@@ -0,0 +1 @@
+export { default as ModalPhotoViewer } from './ModalPhotoViewer'
diff --git a/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/PendingApprovals.module.scss b/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/PendingApprovals.module.scss
new file mode 100644
index 000000000..5276f2b82
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/PendingApprovals.module.scss
@@ -0,0 +1,16 @@
+.container {
+    padding-top: 16px;
+}
+
+.content {
+    margin: 0 auto;
+    max-width: 1100px;
+}
+
+.emptyState {
+    color: #6a6a6a;
+    display: block;
+    font-size: 16px;
+    padding: 20px 0;
+    text-align: center;
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/PendingApprovals.tsx b/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/PendingApprovals.tsx
new file mode 100644
index 000000000..9c554728f
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/PendingApprovals.tsx
@@ -0,0 +1,53 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { type TimelineEvent } from '../../../../lib/models'
+import { type RejectTimelineEventBody } from '../../../../lib/services'
+import { ApprovalItem } from '../ApprovalItem'
+
+import styles from './PendingApprovals.module.scss'
+
+interface PendingApprovalsProps {
+    className?: string
+    events: TimelineEvent[]
+    onApproveEvent: (id: string) => Promise<void> | void
+    onDeleteEvent: (id: string) => Promise<void> | void
+    onRejectEvent: (
+        id: string,
+        body: RejectTimelineEventBody,
+    ) => Promise<void> | void
+    userAvatars: Record<string, string>
+}
+
+/**
+ * Admin tab content that lists pending timeline submissions.
+ *
+ * @param props Pending events and moderation callbacks.
+ * @returns Pending approvals list.
+ */
+const PendingApprovals: FC<PendingApprovalsProps> = (props: PendingApprovalsProps) => (
+    <div className={classNames(styles.container, props.className)}>
+        <div className={styles.content}>
+            {props.events.map(item => (
+                <ApprovalItem
+                    event={item}
+                    key={item.id}
+                    onApproveEvent={props.onApproveEvent}
+                    onDeleteEvent={props.onDeleteEvent}
+                    onRejectEvent={props.onRejectEvent}
+                    userAvatars={props.userAvatars}
+                />
+            ))}
+        </div>
+
+        {!props.events.length && (
+            <span className={styles.emptyState}>No pending events.</span>
+        )}
+    </div>
+)
+
+PendingApprovals.defaultProps = {
+    className: undefined,
+}
+
+export default PendingApprovals
diff --git a/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/index.ts b/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/index.ts
new file mode 100644
index 000000000..c34fc4f1d
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/PendingApprovals/index.ts
@@ -0,0 +1 @@
+export { default as PendingApprovals } from './PendingApprovals'
diff --git a/src/apps/community/src/pages/timeline-wall/components/RightFilter/RightFilter.module.scss b/src/apps/community/src/pages/timeline-wall/components/RightFilter/RightFilter.module.scss
new file mode 100644
index 000000000..8162498b4
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/RightFilter/RightFilter.module.scss
@@ -0,0 +1,96 @@
+.container {
+    align-self: flex-start;
+    background: #fff;
+    border: 1px solid #d8d8d8;
+    border-radius: 8px;
+    max-height: calc(100vh - 170px);
+    overflow: hidden;
+    position: sticky;
+    top: 90px;
+    width: 260px;
+}
+
+.header {
+    align-items: center;
+    border-bottom: 1px solid #ececec;
+    display: none;
+    justify-content: space-between;
+    padding: 12px 16px;
+}
+
+.closeButton {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    font-size: 18px;
+}
+
+.content {
+    max-height: calc(100vh - 220px);
+    overflow: auto;
+    padding: 12px;
+}
+
+.listItem {
+    margin-bottom: 8px;
+}
+
+.blockItem {
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    color: #2a2a2a;
+    cursor: pointer;
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 8px 10px;
+    text-align: left;
+    width: 100%;
+}
+
+.blockItem:hover {
+    background: #f5f7ff;
+}
+
+.selected {
+    color: #0d61ff;
+}
+
+.fullSelected {
+    background: #edf3ff;
+}
+
+.blockItemTitle {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+}
+
+.childList {
+    margin-left: 10px;
+}
+
+.monthSelected {
+    border-left: 2px solid #0d61ff;
+    padding-left: 8px;
+}
+
+@media (max-width: 768px) {
+    .container {
+        border: 0;
+        border-radius: 0;
+        max-height: none;
+        position: static;
+        top: auto;
+        width: 100%;
+    }
+
+    .header {
+        display: flex;
+    }
+
+    .content {
+        max-height: 70vh;
+    }
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/RightFilter/RightFilter.tsx b/src/apps/community/src/pages/timeline-wall/components/RightFilter/RightFilter.tsx
new file mode 100644
index 000000000..9325c0819
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/RightFilter/RightFilter.tsx
@@ -0,0 +1,186 @@
+/* eslint-disable react/jsx-no-bind */
+import {
+    FC,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
+import classNames from 'classnames'
+import moment from 'moment'
+
+import { type TimelineEvent } from '../../../../lib/models'
+
+import styles from './RightFilter.module.scss'
+
+interface TimelineFilterValue {
+    month: number
+    year: number
+}
+
+interface FilterYear {
+    months: Array<{
+        label: string
+        value: number
+    }>
+    year: number
+}
+
+interface RightFilterProps {
+    className?: string
+    events: TimelineEvent[]
+    selectedFilterValue: TimelineFilterValue
+    setSelectedFilterValue: (value: TimelineFilterValue) => void
+}
+
+/**
+ * Sidebar filter for jumping to a year or month in the timeline wall.
+ *
+ * @param props Filter state and event list.
+ * @returns Year/month filter panel.
+ */
+const RightFilter: FC<RightFilterProps> = (props: RightFilterProps) => {
+    const [yearList, setYearList] = useState<FilterYear[]>([])
+
+    const earliestEventYear = useMemo(() => {
+        if (!props.events.length) {
+            return 2002
+        }
+
+        const eventYears = props.events
+            .map(event => moment(event.eventDate)
+                .year())
+            .filter(year => Number.isFinite(year))
+
+        if (!eventYears.length) {
+            return 2002
+        }
+
+        return Math.min(Math.min(...eventYears), 2002)
+    }, [props.events])
+
+    useEffect(() => {
+        const now = new Date()
+        const currentYear = now.getFullYear()
+        const currentMonth = now.getMonth()
+        const years: FilterYear[] = []
+
+        for (let year = currentYear; year >= earliestEventYear; year -= 1) {
+            const months: FilterYear['months'] = []
+            const maxMonth = year === currentYear ? currentMonth : 11
+
+            for (let month = maxMonth; month >= 0; month -= 1) {
+                months.push({
+                    label: moment()
+                        .month(month)
+                        .format('MMMM'),
+                    value: month,
+                })
+            }
+
+            years.push({
+                months,
+                year,
+            })
+        }
+
+        setYearList(years)
+    }, [earliestEventYear])
+
+    return (
+        <div className={classNames(styles.container, props.className)}>
+            <div className={styles.header}>
+                <span>Timeline Wall</span>
+                <button
+                    className={styles.closeButton}
+                    onClick={() => props.setSelectedFilterValue(props.selectedFilterValue)}
+                    type='button'
+                >
+                    ✕
+                </button>
+            </div>
+
+            <div className={styles.content}>
+                {yearList.map(yearObject => {
+                    const isOnlyYearSelected = yearObject.year === props.selectedFilterValue.year
+                        && props.selectedFilterValue.month < 0
+                    const isYearSelected = yearObject.year === props.selectedFilterValue.year
+
+                    return (
+                        <div className={styles.listItem} key={yearObject.year}>
+                            <button
+                                className={classNames(
+                                    styles.blockItem,
+                                    isYearSelected && styles.selected,
+                                    isOnlyYearSelected && styles.fullSelected,
+                                )}
+                                onClick={() => {
+                                    if (isOnlyYearSelected) {
+                                        props.setSelectedFilterValue({
+                                            month: -1,
+                                            year: 0,
+                                        })
+                                        return
+                                    }
+
+                                    props.setSelectedFilterValue({
+                                        month: -1,
+                                        year: yearObject.year,
+                                    })
+                                }}
+                                type='button'
+                            >
+                                <div className={styles.blockItemTitle}>
+                                    <span>{yearObject.year}</span>
+                                </div>
+                            </button>
+
+                            <div
+                                className={classNames(
+                                    styles.childList,
+                                    isYearSelected
+                                    && props.selectedFilterValue.month >= 0
+                                    && styles.monthSelected,
+                                )}
+                            >
+                                {yearObject.months.map(month => {
+                                    const isMonthSelected = yearObject.year === props.selectedFilterValue.year
+                                        && props.selectedFilterValue.month === month.value
+
+                                    return (
+                                        <button
+                                            className={classNames(
+                                                styles.blockItem,
+                                                isMonthSelected && styles.selected,
+                                                isMonthSelected && styles.fullSelected,
+                                            )}
+                                            key={`${yearObject.year}-${month.value}`}
+                                            onClick={() => {
+                                                if (isMonthSelected) {
+                                                    props.setSelectedFilterValue({
+                                                        month: -1,
+                                                        year: 0,
+                                                    })
+                                                    return
+                                                }
+
+                                                props.setSelectedFilterValue({
+                                                    month: month.value,
+                                                    year: yearObject.year,
+                                                })
+                                            }}
+                                            type='button'
+                                        >
+                                            <span>{month.label}</span>
+                                        </button>
+                                    )
+                                })}
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}
+
+export default RightFilter
diff --git a/src/apps/community/src/pages/timeline-wall/components/RightFilter/index.ts b/src/apps/community/src/pages/timeline-wall/components/RightFilter/index.ts
new file mode 100644
index 000000000..6e8bb3793
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/RightFilter/index.ts
@@ -0,0 +1 @@
+export { default as RightFilter } from './RightFilter'
diff --git a/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/TimelineEvents.module.scss b/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/TimelineEvents.module.scss
new file mode 100644
index 000000000..a4f2e8c4f
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/TimelineEvents.module.scss
@@ -0,0 +1,100 @@
+.container {
+    display: flex;
+    gap: 20px;
+}
+
+.leftContent {
+    flex: 1;
+    min-width: 0;
+}
+
+.rightFilter {
+    flex: 0 0 260px;
+}
+
+.eventsGrid {
+    display: grid;
+    gap: 18px;
+    grid-template-columns: 1fr 1fr;
+    position: relative;
+}
+
+.reparator {
+    background: #dfe6f2;
+    bottom: 8px;
+    left: 50%;
+    position: absolute;
+    top: 8px;
+    transform: translateX(-50%);
+    width: 1px;
+}
+
+.dot {
+    background: #1f74ff;
+    border-radius: 50%;
+    height: 10px;
+    left: 50%;
+    position: absolute;
+    top: 0;
+    transform: translate(-50%, -50%);
+    width: 10px;
+}
+
+.blockLeft,
+.blockRight,
+.blockMobile {
+    position: relative;
+}
+
+.blockMobile {
+    display: none;
+}
+
+.emptyState {
+    color: #6a6a6a;
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+    text-align: center;
+}
+
+.mobileOnly {
+    display: none;
+}
+
+.desktopOnly {
+    display: block;
+}
+
+@media (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .rightFilter {
+        flex: auto;
+    }
+}
+
+@media (max-width: 768px) {
+    .eventsGrid {
+        grid-template-columns: 1fr;
+    }
+
+    .reparator,
+    .desktopOnly {
+        display: none;
+    }
+
+    .mobileOnly {
+        display: block;
+    }
+
+    .blockMobile {
+        display: block;
+    }
+
+    .mobileHidden {
+        display: none;
+    }
+}
diff --git a/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/TimelineEvents.tsx b/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/TimelineEvents.tsx
new file mode 100644
index 000000000..06410cc13
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/TimelineEvents.tsx
@@ -0,0 +1,174 @@
+/* eslint-disable react/jsx-no-bind */
+import {
+    FC,
+    useEffect,
+    useState,
+} from 'react'
+import classNames from 'classnames'
+
+import { type TimelineEvent } from '../../../../lib/models'
+import { AddEventButton } from '../AddEventButton'
+import { EventItem } from '../EventItem'
+import { RightFilter } from '../RightFilter'
+
+import styles from './TimelineEvents.module.scss'
+
+interface TimelineFilterValue {
+    month: number
+    year: number
+}
+
+interface TimelineEventsProps {
+    className?: string
+    events: TimelineEvent[]
+    isAdmin: boolean
+    isAuthenticated: boolean
+    onDeleteEvent: (id: string) => Promise<void> | void
+    onDoneAddEvent: () => void
+    onSubmitEvent: (formData: FormData) => Promise<void>
+    selectedFilterValue: TimelineFilterValue
+    setSelectedFilterValue: (value: TimelineFilterValue) => void
+    setShowRightFilterMobile: (value: boolean) => void
+    showRightFilterMobile: boolean
+    uploadResult: string
+    uploading: boolean
+    userAvatars: Record<string, string>
+}
+
+const colors: Array<'green' | 'purple' | 'red'> = ['green', 'red', 'purple']
+
+interface ColoredTimelineEvent extends TimelineEvent {
+    color: 'green' | 'purple' | 'red'
+}
+
+/**
+ * Timeline tab content containing add-event form, timeline cards, and date filters.
+ *
+ * @param props Timeline state and actions.
+ * @returns Timeline events layout.
+ */
+const TimelineEvents: FC<TimelineEventsProps> = (props: TimelineEventsProps) => {
+    const [leftItems, setLeftItems] = useState<ColoredTimelineEvent[]>([])
+    const [rightItems, setRightItems] = useState<ColoredTimelineEvent[]>([])
+    const [mobileItems, setMobileItems] = useState<ColoredTimelineEvent[]>([])
+
+    useEffect(() => {
+        let leftHeight = 135
+        let rightHeight = 56
+
+        const leftItemsBuffer: ColoredTimelineEvent[] = []
+        const rightItemsBuffer: ColoredTimelineEvent[] = []
+        const mobileItemsBuffer: ColoredTimelineEvent[] = []
+
+        for (let index = 0; index < props.events.length; index += 1) {
+            const event = props.events[index]
+            const cellHeight = event.mediaFiles.length > 0 ? 291 : 155
+            const coloredEvent: ColoredTimelineEvent = {
+                ...event,
+                color: colors[index % colors.length],
+            }
+
+            if (leftHeight <= rightHeight) {
+                leftItemsBuffer.push(coloredEvent)
+                leftHeight += cellHeight
+            } else {
+                rightItemsBuffer.push(coloredEvent)
+                rightHeight += cellHeight
+            }
+
+            mobileItemsBuffer.push(coloredEvent)
+        }
+
+        setLeftItems(leftItemsBuffer)
+        setRightItems(rightItemsBuffer)
+        setMobileItems(mobileItemsBuffer)
+    }, [props.events])
+
+    return (
+        <div className={classNames(styles.container, props.className)}>
+            <div className={styles.leftContent}>
+                <AddEventButton
+                    isAdmin={props.isAdmin}
+                    isAuthenticated={props.isAuthenticated}
+                    onDoneAddEvent={props.onDoneAddEvent}
+                    onSubmitEvent={props.onSubmitEvent}
+                    uploadResult={props.uploadResult}
+                    uploading={props.uploading}
+                />
+
+                {!!props.events.length && (
+                    <div className={styles.eventsGrid}>
+                        <div className={styles.reparator}>
+                            <div className={styles.dot} />
+                        </div>
+
+                        <div className={classNames(styles.blockLeft, styles.desktopOnly)}>
+                            {leftItems.map(item => (
+                                <EventItem
+                                    eventItem={item}
+                                    idPrefix='desktop-'
+                                    isAdmin={props.isAdmin}
+                                    isLeft
+                                    key={item.id}
+                                    onDeleteEvent={props.onDeleteEvent}
+                                    userAvatars={props.userAvatars}
+                                />
+                            ))}
+                        </div>
+
+                        <div className={classNames(styles.blockRight, styles.desktopOnly)}>
+                            {rightItems.map(item => (
+                                <EventItem
+                                    eventItem={item}
+                                    idPrefix='desktop-'
+                                    isAdmin={props.isAdmin}
+                                    key={item.id}
+                                    onDeleteEvent={props.onDeleteEvent}
+                                    userAvatars={props.userAvatars}
+                                />
+                            ))}
+                        </div>
+
+                        <div className={classNames(styles.blockMobile, styles.mobileOnly)}>
+                            {mobileItems.map(item => (
+                                <EventItem
+                                    eventItem={item}
+                                    idPrefix='mobile-'
+                                    isAdmin={props.isAdmin}
+                                    key={item.id}
+                                    onDeleteEvent={props.onDeleteEvent}
+                                    userAvatars={props.userAvatars}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {!props.events.length && (
+                    <span className={styles.emptyState}>
+                        No events have been added. Be the first who adds one.
+                    </span>
+                )}
+            </div>
+
+            <RightFilter
+                className={classNames(
+                    styles.rightFilter,
+                    !props.showRightFilterMobile && styles.mobileHidden,
+                )}
+                events={props.events}
+                selectedFilterValue={props.selectedFilterValue}
+                setSelectedFilterValue={(newFilter: TimelineFilterValue) => {
+                    props.setSelectedFilterValue(newFilter)
+                    props.setShowRightFilterMobile(false)
+                }}
+            />
+        </div>
+    )
+}
+
+TimelineEvents.defaultProps = {
+    className: undefined,
+}
+
+export default TimelineEvents
diff --git a/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/index.ts b/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/index.ts
new file mode 100644
index 000000000..8d15f6864
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/TimelineEvents/index.ts
@@ -0,0 +1 @@
+export { default as TimelineEvents } from './TimelineEvents'
diff --git a/src/apps/community/src/pages/timeline-wall/components/index.ts b/src/apps/community/src/pages/timeline-wall/components/index.ts
new file mode 100644
index 000000000..0e4e84911
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/components/index.ts
@@ -0,0 +1,10 @@
+export * from './AddEventButton'
+export * from './ApprovalItem'
+export * from './EventItem'
+export * from './ModalConfirmReject'
+export * from './ModalDeleteConfirmation'
+export * from './ModalEventAdd'
+export * from './ModalPhotoViewer'
+export * from './PendingApprovals'
+export * from './RightFilter'
+export * from './TimelineEvents'
diff --git a/src/apps/community/src/pages/timeline-wall/index.ts b/src/apps/community/src/pages/timeline-wall/index.ts
new file mode 100644
index 000000000..bfd30b5b7
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/index.ts
@@ -0,0 +1 @@
+export * from './timeline-wall.routes'
diff --git a/src/apps/community/src/pages/timeline-wall/timeline-wall.routes.tsx b/src/apps/community/src/pages/timeline-wall/timeline-wall.routes.tsx
new file mode 100644
index 000000000..d671241c6
--- /dev/null
+++ b/src/apps/community/src/pages/timeline-wall/timeline-wall.routes.tsx
@@ -0,0 +1,22 @@
+import {
+    lazyLoad,
+    LazyLoadedComponent,
+    PlatformRoute,
+} from '~/libs/core'
+
+import { timelineWallRouteId } from '../../config/routes.config'
+
+const TimelineWallPage: LazyLoadedComponent = lazyLoad(
+    () => import('./TimelineWallPage'),
+)
+
+/**
+ * Route definitions for the timeline wall page module.
+ */
+export const timelineWallRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: false,
+        element: <TimelineWallPage />,
+        route: timelineWallRouteId,
+    },
+]
diff --git a/src/apps/platform/src/PlatformApp.tsx b/src/apps/platform/src/PlatformApp.tsx
index e9c34cceb..6b9e3f51c 100644
--- a/src/apps/platform/src/PlatformApp.tsx
+++ b/src/apps/platform/src/PlatformApp.tsx
@@ -1,6 +1,10 @@
-import { FC } from 'react'
+import { FC, useContext } from 'react'
 import { toast, ToastContainer } from 'react-toastify'
+import { useLocation } from 'react-router-dom'
 
+import { AppSubdomain, EnvironmentConfig } from '~/config'
+import { communityRootRoute } from '~/apps/community'
+import { routerContext, RouterContextData } from '~/libs/core'
 import { NotificationsContainer, useViewportUnitsFix } from '~/libs/shared'
 
 import { AppFooter } from './components/app-footer'
@@ -8,12 +12,22 @@ import { AppHeader } from './components/app-header'
 import { Providers } from './providers'
 import { PlatformRouter } from './platform-router'
 
-const PlatformApp: FC<{}> = () => {
-    useViewportUnitsFix()
+const PlatformShell: FC = () => {
+    const { activeLayoutVariant }: RouterContextData = useContext(routerContext)
+    const location = useLocation()
+    const isCommunityRoute: boolean = EnvironmentConfig.SUBDOMAIN === AppSubdomain.community
+        || (!!communityRootRoute && (
+            location.pathname === communityRootRoute
+            || location.pathname.startsWith(`${communityRootRoute}/`)
+        ))
+    const showPlatformHeaderAndFooter: boolean = activeLayoutVariant === 'standard' && !isCommunityRoute
+    const headerNavType: 'tool' | 'community' = activeLayoutVariant === 'community' || isCommunityRoute
+        ? 'community'
+        : 'tool'
 
     return (
-        <Providers>
-            <AppHeader />
+        <>
+            {showPlatformHeaderAndFooter && <AppHeader navType={headerNavType} />}
             <NotificationsContainer />
             <div className='root-container'>
                 <PlatformRouter />
@@ -29,7 +43,17 @@ const PlatformApp: FC<{}> = () => {
                 draggable
                 pauseOnHover
             />
-            <AppFooter />
+            {showPlatformHeaderAndFooter && <AppFooter />}
+        </>
+    )
+}
+
+const PlatformApp: FC<{}> = () => {
+    useViewportUnitsFix()
+
+    return (
+        <Providers>
+            <PlatformShell />
         </Providers>
     )
 }
diff --git a/src/apps/platform/src/components/app-header/AppHeader.tsx b/src/apps/platform/src/components/app-header/AppHeader.tsx
index 6381cf483..4cd31e315 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 } from 'universal-navigation'
+import type { AuthUser as NavAuthUser, NavigationType } from 'universal-navigation'
 import classNames from 'classnames'
 
 import { EnvironmentConfig, PageSubheaderPortalId } from '~/config'
@@ -36,7 +36,17 @@ interface NavigationRequest {
     path: string
 }
 
-const AppHeader: FC<{}> = () => {
+interface AppHeaderProps {
+    navType?: 'tool' | 'community'
+}
+
+/**
+ * Application header that initializes and maintains Topcoder universal navigation.
+ *
+ * @param props Optional uni-nav type override. Defaults to `'tool'`.
+ * @returns Universal navigation mount container.
+ */
+const AppHeader: FC<AppHeaderProps> = (props: AppHeaderProps) => {
 
     const { activeToolName, activeToolRoute, routeNavConfigs }: RouterContextData = useContext(routerContext)
     const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
@@ -45,6 +55,7 @@ const AppHeader: FC<{}> = () => {
     const headerInit: MutableRefObject<boolean> = useRef(false)
     const navElementId: string = PageSubheaderPortalId
     const navigate: NavigateFunction = useNavigate()
+    const navType: 'tool' | 'community' = props.navType ?? 'tool'
 
     // userinfo will be an empty object until profileReady=true
     // userinfo will be {user: undefined} if user is logged out
@@ -85,24 +96,30 @@ const AppHeader: FC<{}> = () => {
             return
         }
 
-        headerInit.current = true
-
-        getTcUniNav()?.(
-            'init',
-            navElementId,
-            {
-                handleNavigation: navigationHandler,
-                onReady() { setReady(true) },
-                showSalesCta: routeNavConfigs?.showSalesCta,
-                signIn() { window.location.href = authUrlLogin() },
-                signOut() { window.location.href = logoutUrl },
-                signUp() { window.location.href = authUrlSignup() },
-                toolName: activeToolName,
-                toolRoot: activeToolRoute,
-                type: 'tool',
-                ...userInfo,
-            },
-        )
+        const tcUniNav = getTcUniNav()
+        if (!tcUniNav) {
+            return
+        }
+
+        try {
+            tcUniNav(
+                'init',
+                navElementId,
+                {
+                    handleNavigation: navigationHandler,
+                    onReady() { setReady(true) },
+                    showSalesCta: routeNavConfigs?.showSalesCta,
+                    signIn() { window.location.href = authUrlLogin() },
+                    signOut() { window.location.href = logoutUrl },
+                    signUp() { window.location.href = authUrlSignup() },
+                    toolName: activeToolName,
+                    toolRoot: activeToolRoute,
+                    type: navType as NavigationType,
+                    ...userInfo,
+                },
+            )
+            headerInit.current = true
+        } catch {}
     }, [
         activeToolName,
         activeToolRoute,
@@ -112,20 +129,31 @@ const AppHeader: FC<{}> = () => {
         profileReady,
         logoutUrl,
         routeNavConfigs,
+        navType,
     ])
 
     // update uni-nav's tool details
     useEffect(() => {
+        if (!headerInit.current) {
+            return
+        }
 
-        getTcUniNav()?.(
-            'update',
-            navElementId,
-            {
-                showSalesCta: routeNavConfigs?.showSalesCta,
-                toolName: activeToolName,
-                toolRoot: activeToolRoute,
-            },
-        )
+        const tcUniNav = getTcUniNav()
+        if (!tcUniNav) {
+            return
+        }
+
+        try {
+            tcUniNav(
+                'update',
+                navElementId,
+                {
+                    showSalesCta: routeNavConfigs?.showSalesCta,
+                    toolName: activeToolName,
+                    toolRoot: activeToolRoute,
+                },
+            )
+        } catch {}
     }, [
         activeToolName,
         activeToolRoute,
@@ -136,18 +164,25 @@ const AppHeader: FC<{}> = () => {
     // update uni-nav's user/auth details
     useEffect(() => {
 
-        if (!profileReady) {
+        if (!profileReady || !headerInit.current) {
+            return
+        }
+
+        const tcUniNav = getTcUniNav()
+        if (!tcUniNav) {
             return
         }
 
-        getTcUniNav()?.(
-            'update',
-            navElementId,
-            {
-                ...userInfo,
-                signOut() { window.location.href = logoutUrl },
-            },
-        )
+        try {
+            tcUniNav(
+                'update',
+                navElementId,
+                {
+                    ...userInfo,
+                    signOut() { window.location.href = logoutUrl },
+                },
+            )
+        } catch {}
     }, [
         profileReady,
         userInfo,
diff --git a/src/apps/platform/src/platform-router/PlatformRouter.tsx b/src/apps/platform/src/platform-router/PlatformRouter.tsx
index ae6c3805b..cc84bd105 100644
--- a/src/apps/platform/src/platform-router/PlatformRouter.tsx
+++ b/src/apps/platform/src/platform-router/PlatformRouter.tsx
@@ -6,6 +6,10 @@ import { routerContext, RouterContextData } from '~/libs/core'
 const PlatformRouter: FC<{}> = () => {
     const { allRoutes, getRouteElement }: RouterContextData = useContext(routerContext)
 
+    if (!allRoutes.length) {
+        return <></>
+    }
+
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => getRouteElement(route))
 
diff --git a/src/apps/platform/src/platform.routes.tsx b/src/apps/platform/src/platform.routes.tsx
index 0bc933be7..8214219f4 100644
--- a/src/apps/platform/src/platform.routes.tsx
+++ b/src/apps/platform/src/platform.routes.tsx
@@ -12,6 +12,7 @@ import { copilotsRoutes } from '~/apps/copilots'
 import { adminRoutes } from '~/apps/admin'
 import { reportsRoutes } from '~/apps/reports'
 import { reviewRoutes } from '~/apps/review'
+import { communityRoutes } from '~/apps/community'
 import { workRoutes } from '~/apps/work'
 import { calendarRoutes } from '~/apps/calendar'
 import { engagementsRoutes } from '~/apps/engagements'
@@ -44,6 +45,7 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...walletAdminRoutes,
     ...accountsRoutes,
     ...reviewRoutes,
+    ...communityRoutes,
     ...workRoutes,
     ...calendarRoutes,
     ...engagementsRoutes,
diff --git a/src/apps/platform/src/providers/platform-router.provider.tsx b/src/apps/platform/src/providers/platform-router.provider.tsx
index 08fd81377..237f6d439 100644
--- a/src/apps/platform/src/providers/platform-router.provider.tsx
+++ b/src/apps/platform/src/providers/platform-router.provider.tsx
@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react'
 
+import { communityRootRoute } from '~/apps/community'
 import { learnRootRoute } from '~/apps/learn'
 import { RouterProvider } from '~/libs/core'
 
@@ -11,9 +12,9 @@ interface PlatformRouterProviderProps {
 
 export const PlatformRouterProvider: FC<PlatformRouterProviderProps> = props => (
     <RouterProvider
-        rootCustomer={learnRootRoute}
-        rootLoggedOut={learnRootRoute}
-        rootMember={learnRootRoute}
+        rootCustomer={learnRootRoute ?? communityRootRoute}
+        rootLoggedOut={learnRootRoute ?? communityRootRoute}
+        rootMember={learnRootRoute ?? communityRootRoute}
         allRoutes={platformRoutes}
     >
         {props.children}
diff --git a/src/apps/profiles/src/config/constants.ts b/src/apps/profiles/src/config/constants.ts
index b53971427..c87855b8a 100644
--- a/src/apps/profiles/src/config/constants.ts
+++ b/src/apps/profiles/src/config/constants.ts
@@ -1,6 +1,6 @@
 // import { EnvironmentConfig } from '~/config'
 
-import { UserRole } from '~/libs/core'
+import { UserRole } from '~/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum'
 
 export enum TRACKS_PROFILE_MAP {
     DEVELOP = 'Developer',
diff --git a/src/apps/profiles/src/lib/helpers.ts b/src/apps/profiles/src/lib/helpers.ts
index 1a854dc0b..00f8358cc 100644
--- a/src/apps/profiles/src/lib/helpers.ts
+++ b/src/apps/profiles/src/lib/helpers.ts
@@ -1,5 +1,6 @@
 /* eslint-disable complexity */
-import { UserProfile, UserRole, UserTrait } from '~/libs/core'
+import { UserProfile, UserTrait } from '~/libs/core'
+import { UserRole } from '~/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum'
 import { availabilityOptions, preferredRoleOptions } from '~/libs/shared/lib/components/modify-open-to-work-modal'
 
 import { ADMIN_ROLES, EMAIL_VIEW_ROLES, PHONE_NUMBER_ROLES } from '../config'
diff --git a/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx b/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx
index 4fe48e5a8..7f7fcbf8c 100644
--- a/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx
+++ b/src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx
@@ -3,7 +3,8 @@ import { trim } from 'lodash'
 import cityTimezones from 'city-timezones'
 import moment from 'moment-timezone'
 
-import { profileContext, ProfileContextData, useCountryName, UserProfile, UserRole } from '~/libs/core'
+import { profileContext, ProfileContextData, useCountryName, UserProfile } from '~/libs/core'
+import { UserRole } from '~/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum'
 import { IconOutline, IconSolid, Tooltip } from '~/libs/ui'
 
 import { EditMemberPropertyBtn } from '../../components'
diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
index 9ae99e3c9..e096e7565 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
+++ b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
@@ -9,11 +9,11 @@ import {
     NamesAndHandleAppearance,
     useMemberTraits,
     UserProfile,
-    UserRole,
     UserTrait,
     UserTraitIds,
     UserTraits,
 } from '~/libs/core'
+import { UserRole } from '~/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum'
 import { ProfilePicture, useCheckIsMobile } from '~/libs/shared'
 import { Tooltip } from '~/libs/ui'
 
diff --git a/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx b/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
index ab56ec0a5..641869ec9 100644
--- a/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
+++ b/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
@@ -33,6 +33,10 @@ import {
     isContestReviewPhaseSubmission,
     shouldIncludeInReviewPhase,
 } from '../../utils/reviewPhaseGuards'
+import {
+    isContestSubmissionType,
+    isFinalFixSubmissionType,
+} from '../../constants'
 
 import TabContentApproval from './TabContentApproval'
 import TabContentCheckpoint from './TabContentCheckpoint'
@@ -90,6 +94,7 @@ const SUBMISSION_TAB_KEYS = new Set([
     normalizeType('ai screening'),
     normalizeType('submission / screening'),
     normalizeType('topgear submission'),
+    normalizeType('final fix'),
 ])
 
 const CHECKPOINT_REVIEW_KEY = normalizeType('checkpoint review')
@@ -152,19 +157,20 @@ const renderSubmissionTab = ({
     const isSubmissionTab = selectedTabNormalized === 'submission'
     const isSpecificationSubmissionTab = selectedTabNormalized === 'specificationsubmission'
     const isTopgearSubmissionTab = selectedTabNormalized === 'topgearsubmission'
+    const isFinalFixTab = selectedTabNormalized.startsWith('finalfix')
     const shouldRestrictToContestSubmissions = selectedTabNormalized
         .startsWith('submission')
         || isSpecificationSubmissionTab
         || selectedTabNormalized === AI_SCREENING_KEY
         || isTopgearSubmissionTab
-    const visibleSubmissions = shouldRestrictToContestSubmissions
-        ? submissions.filter(
-            submission => normalizeType(submission.type) === 'contestsubmission',
-        )
-        : submissions
+    const visibleSubmissions = isFinalFixTab
+        ? submissions.filter(submission => isFinalFixSubmissionType(submission.type))
+        : shouldRestrictToContestSubmissions
+            ? submissions.filter(submission => isContestSubmissionType(submission.type))
+            : submissions
     const canShowSubmissionList = (allowTopgearSubmissionList || !isTopgearSubmissionTab)
         && selectedTabNormalized !== 'screening'
-        && visibleSubmissions.length > 0
+        && (visibleSubmissions.length > 0 || isFinalFixTab)
 
     if (canShowSubmissionList) {
         return (
diff --git a/src/apps/review/src/lib/constants.ts b/src/apps/review/src/lib/constants.ts
index de5ecb563..9aa5c2220 100644
--- a/src/apps/review/src/lib/constants.ts
+++ b/src/apps/review/src/lib/constants.ts
@@ -1,5 +1,6 @@
 export const SUBMISSION_TYPE_CONTEST = 'CONTEST_SUBMISSION'
 export const SUBMISSION_TYPE_CHECKPOINT = 'CHECKPOINT_SUBMISSION'
+export const SUBMISSION_TYPE_FINAL_FIX = 'STUDIO_FINAL_FIX_SUBMISSION'
 export const TABLE_DATE_FORMAT = 'MMM DD, HH:mm A'
 export const SUBMISSION_DOWNLOAD_RESTRICTION_MESSAGE
   = 'This challenge is a private challenge. You do not have permission to download submissions.'
@@ -13,6 +14,7 @@ const normalizeSubmissionType = (value?: string | null): string => (
 
 const NORMALIZED_CONTEST_SUBMISSION_TYPE = normalizeSubmissionType(SUBMISSION_TYPE_CONTEST)
 const NORMALIZED_CHECKPOINT_SUBMISSION_TYPE = normalizeSubmissionType(SUBMISSION_TYPE_CHECKPOINT)
+const NORMALIZED_FINAL_FIX_SUBMISSION_TYPE = normalizeSubmissionType(SUBMISSION_TYPE_FINAL_FIX)
 
 interface SubmissionTypeMatchOptions {
     defaultToContest?: boolean
@@ -33,3 +35,7 @@ export const isContestSubmissionType = (
 export const isCheckpointSubmissionType = (
     value?: string | null,
 ): boolean => normalizeSubmissionType(value) === NORMALIZED_CHECKPOINT_SUBMISSION_TYPE
+
+export const isFinalFixSubmissionType = (
+    value?: string | null,
+): boolean => normalizeSubmissionType(value) === NORMALIZED_FINAL_FIX_SUBMISSION_TYPE
diff --git a/src/apps/review/src/lib/hooks/useFetchScreeningReview.ts b/src/apps/review/src/lib/hooks/useFetchScreeningReview.ts
index 0589d5b1e..607d8b9c8 100644
--- a/src/apps/review/src/lib/hooks/useFetchScreeningReview.ts
+++ b/src/apps/review/src/lib/hooks/useFetchScreeningReview.ts
@@ -30,7 +30,10 @@ import {
     convertBackendSubmissionToSubmissionInfo,
 } from '../models'
 import { fetchAllChallengeReviews } from '../services'
-import { isCheckpointSubmissionType, isContestSubmissionType } from '../constants'
+import {
+    isCheckpointSubmissionType,
+    isContestSubmissionType,
+} from '../constants'
 import { debugLog, DEBUG_CHECKPOINT_PHASES, isPhaseAllowedForReview, truncateForLog, warnLog } from '../utils'
 import { registerChallengeReviewKey } from '../utils/reviewCacheRegistry'
 import { normalizeReviewMetadata } from '../utils/metadataMatching'
diff --git a/src/apps/review/src/lib/utils/submitterReviewResolution.spec.ts b/src/apps/review/src/lib/utils/submitterReviewResolution.spec.ts
index cb8f24a7f..a3c56868f 100644
--- a/src/apps/review/src/lib/utils/submitterReviewResolution.spec.ts
+++ b/src/apps/review/src/lib/utils/submitterReviewResolution.spec.ts
@@ -101,4 +101,22 @@ describe('buildSubmitterReviewSubmission', () => {
         expect(result)
             .toBeUndefined()
     })
+
+    it('allows final-fix submissions for submitter review rows', () => {
+        const result = buildSubmitterReviewSubmission({
+            defaultId: 'fallback-review-row',
+            matchingSubmission: buildSubmission({
+                type: 'STUDIO_FINAL_FIX_SUBMISSION',
+            }),
+            resourceMemberIdMapping: {},
+            review: buildReview(),
+        })
+
+        expect(result)
+            .toMatchObject({
+                id: 'submission-1',
+                memberId: '1001',
+                reviewTypeId: 'Review',
+            })
+    })
 })
diff --git a/src/apps/review/src/lib/utils/submitterReviewResolution.ts b/src/apps/review/src/lib/utils/submitterReviewResolution.ts
index 165cadaad..dfeb6303e 100644
--- a/src/apps/review/src/lib/utils/submitterReviewResolution.ts
+++ b/src/apps/review/src/lib/utils/submitterReviewResolution.ts
@@ -11,7 +11,10 @@ import {
     convertBackendSubmissionToSubmissionInfo,
     type SubmissionInfo,
 } from '../models/SubmissionInfo.model'
-import { isContestSubmissionType } from '../constants'
+import {
+    isContestSubmissionType,
+    isFinalFixSubmissionType,
+} from '../constants'
 
 import {
     resolveFallbackSubmissionId,
@@ -28,12 +31,12 @@ export interface BuildSubmitterReviewSubmissionArgs {
 }
 
 /**
- * Builds a submitter-facing review row from the resolved submission when present, while
- * allowing legacy review-only fallbacks when older challenges cannot be mapped back to a
- * modern submission record.
+ * Builds a submitter-facing review row from a resolved contest or final-fix submission
+ * when present, while allowing legacy review-only fallbacks when older challenges cannot
+ * be mapped back to a modern submission record.
  *
  * @param args - Review row inputs including the matched submission when available.
- * @returns Submitter-facing review row or undefined when the matched submission is not contest-based.
+ * @returns Submitter-facing review row or undefined when the matched submission type is unsupported.
  */
 export function buildSubmitterReviewSubmission({
     defaultId,
@@ -41,7 +44,10 @@ export function buildSubmitterReviewSubmission({
     resourceMemberIdMapping,
     review,
 }: BuildSubmitterReviewSubmissionArgs): SubmissionInfo | undefined {
-    if (matchingSubmission && !isContestSubmissionType(matchingSubmission.type)) {
+    const isSupportedSubmissionType = isContestSubmissionType(matchingSubmission?.type)
+        || isFinalFixSubmissionType(matchingSubmission?.type)
+
+    if (matchingSubmission && !isSupportedSubmissionType) {
         return undefined
     }
 
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 b939fb9bf..e00f46a3e 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
@@ -82,6 +82,8 @@ const isSubmissionDataTab = (label?: string): boolean => {
     }
 
     return normalized.includes('submission')
+        || normalized.includes('final fix')
+        || normalized.includes('finalfix')
         || normalized.includes('screening')
         || normalized.includes('checkpoint')
         || normalized.includes('review')
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 4287114b3..107243197 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -15,6 +15,7 @@ export enum AppSubdomain {
     calendar = 'calendar',
     engagements = 'engagements',
     customer = 'customer',
+    community = 'community',
     reports = 'reports'
 }
 
@@ -36,6 +37,7 @@ export enum ToolTitle {
     calendar = 'Calendar',
     engagements = 'Engagements',
     customer = 'Customer',
+    community = 'Community',
     reports = 'Reports'
 }
 
diff --git a/src/config/environments/default.env.ts b/src/config/environments/default.env.ts
index d29f0f7a8..dc7a3840c 100644
--- a/src/config/environments/default.env.ts
+++ b/src/config/environments/default.env.ts
@@ -74,6 +74,20 @@ export const API = {
     V6: `https://api.${TC_DOMAIN}/v6`,
 }
 
+export const CONTENTFUL = {
+    ACCESS_TOKEN: getReactEnv<string>('CONTENTFUL_ACCESS_TOKEN', ''),
+    BASE_URL: 'https://cdn.contentful.com',
+    CHANGELOG_ENTRY_ID: getReactEnv<string>('CONTENTFUL_CHANGELOG_ENTRY_ID', ''),
+    EDU_ACCESS_TOKEN: getReactEnv<string>('CONTENTFUL_EDU_ACCESS_TOKEN', ''),
+    EDU_SPACE_ID: getReactEnv<string>('CONTENTFUL_EDU_SPACE_ID', ''),
+    SPACE_ID: getReactEnv<string>('CONTENTFUL_SPACE_ID', ''),
+}
+
+export const TIMELINE_WALL_API = getReactEnv<string>(
+    'TIMELINE_WALL_API',
+    `https://timeline-wall-api.${TC_DOMAIN}`,
+)
+
 export const STANDARDIZED_SKILLS_API = `${API.V5}/standardized-skills`
 export const TC_FINANCE_API = `${API.V6}/finance`
 export const TC_AI_API = `${API.V6}/ai`
@@ -138,6 +152,10 @@ export const TERMS_URL
     = 'https://www.topcoder-dev.com/challenges/terms/detail/317cd8f9-d66c-4f2a-8774-63c612d99cd4'
 export const NDA_TERMS_URL
     = 'https://www.topcoder-dev.com/challenges/terms/detail/e5811a7b-43d1-407a-a064-69e5015b4900'
+export const TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS = getReactEnv<string>(
+    'TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS',
+    '',
+)
 export const PRIVACY_POLICY_URL = `${TOPCODER_URL}/policy`
 
 export const GAMIFICATION_ORG_ID = getReactEnv<string>(
diff --git a/src/config/environments/global-config.model.ts b/src/config/environments/global-config.model.ts
index 0f2706c12..d22dc62a4 100644
--- a/src/config/environments/global-config.model.ts
+++ b/src/config/environments/global-config.model.ts
@@ -28,6 +28,15 @@ export interface GlobalConfig {
         V6: string
         URL: string
     },
+    CONTENTFUL: {
+        BASE_URL: string
+        SPACE_ID: string
+        ACCESS_TOKEN: string
+        EDU_SPACE_ID: string
+        EDU_ACCESS_TOKEN: string
+        CHANGELOG_ENTRY_ID: string
+    },
+    TIMELINE_WALL_API: string,
     STANDARDIZED_SKILLS_API: string,
     TC_FINANCE_API: string,
     TC_AI_API: string,
@@ -56,6 +65,7 @@ export interface GlobalConfig {
     }
     TERMS_URL?: string
     NDA_TERMS_URL?: string
+    TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS?: string
     MEMBER_VERIFY_LOOKER: number
     ENABLE_TCA_CERT_MONETIZATION: boolean
     VANILLA_FORUM: {
diff --git a/src/libs/core/lib/router/platform-route.model.ts b/src/libs/core/lib/router/platform-route.model.ts
index c3c41743c..693dc05fc 100644
--- a/src/libs/core/lib/router/platform-route.model.ts
+++ b/src/libs/core/lib/router/platform-route.model.ts
@@ -1,5 +1,7 @@
 import { RouteNavConfig } from './route-nav-config.model'
 
+export type PlatformRouteLayoutVariant = 'standard' | 'community'
+
 export interface PlatformRoute {
     domain?: string
     alternativePaths?: Array<string>
@@ -8,6 +10,7 @@ export interface PlatformRoute {
     disabled?: boolean
     element: JSX.Element
     id?: string
+    layoutVariant?: PlatformRouteLayoutVariant
     roleErrorRoute?: string
     rolesRequired?: Array<string>
     route: string
diff --git a/src/libs/core/lib/router/router-context/router.context-provider.tsx b/src/libs/core/lib/router/router-context/router.context-provider.tsx
index 5eefc7bcd..c40c8e6c2 100644
--- a/src/libs/core/lib/router/router-context/router.context-provider.tsx
+++ b/src/libs/core/lib/router/router-context/router.context-provider.tsx
@@ -65,6 +65,7 @@ export const RouterProvider: FC<RouterProviderProps> = (props: RouterProviderPro
                 : props.rootMember
 
         const contextData: RouterContextData = {
+            activeLayoutVariant: activeRoute?.layoutVariant ?? 'standard',
             activeToolName: activeRoute?.title || activeRoute?.id,
             activeToolRoute: !!activeRoute ? `https://${window.location.hostname}${activeRoute.route}` : undefined,
             allRoutes,
diff --git a/src/libs/core/lib/router/router-context/router.context.tsx b/src/libs/core/lib/router/router-context/router.context.tsx
index c4e7773f0..8474c4084 100644
--- a/src/libs/core/lib/router/router-context/router.context.tsx
+++ b/src/libs/core/lib/router/router-context/router.context.tsx
@@ -1,11 +1,12 @@
 import { Context, createContext, ReactElement } from 'react'
 
-import { PlatformRoute } from '../platform-route.model'
+import { PlatformRoute, PlatformRouteLayoutVariant } from '../platform-route.model'
 import { RouteNavConfig } from '../route-nav-config.model'
 
 export interface RouterContextData {
     activeToolName?: string
     activeToolRoute?: string
+    activeLayoutVariant: PlatformRouteLayoutVariant
     routeNavConfigs?: RouteNavConfig
     allRoutes: Array<PlatformRoute>
     getChildren: (parent: string) => Array<PlatformRoute>
@@ -20,6 +21,7 @@ export interface RouterContextData {
 }
 
 export const routerContextDefaultData: RouterContextData = {
+    activeLayoutVariant: 'standard',
     allRoutes: [],
     getChildren: () => [],
     getChildRoutes: () => [],
diff --git a/src/libs/shared/lib/components/add-edit-work-experience-form/AddEditWorkExperienceForm.tsx b/src/libs/shared/lib/components/add-edit-work-experience-form/AddEditWorkExperienceForm.tsx
index b368c46fe..0756ac0c5 100644
--- a/src/libs/shared/lib/components/add-edit-work-experience-form/AddEditWorkExperienceForm.tsx
+++ b/src/libs/shared/lib/components/add-edit-work-experience-form/AddEditWorkExperienceForm.tsx
@@ -11,11 +11,13 @@ import {
 import { bind, trim } from 'lodash'
 
 import { InputDatePicker, InputSelect, InputText } from '~/libs/ui'
-import { UserTrait } from '~/libs/core'
-import { FieldHtmlEditor, InputSkillSelector } from '~/libs/shared'
 import { INDUSTRIES_OPTIONS } from '~/libs/shared/lib/constants'
 import { getIndustryOptionsWithOthersLast } from '~/libs/shared/lib/utils/industry'
-import { fetchSkillsByIds } from '~/libs/shared/lib/services/standard-skills'
+import { fetchSkillsByIds } from '~/libs/shared/lib/services/standard-skills/standard-skills.service'
+import type { UserTrait } from '~/libs/core/lib/profile/user-traits.model'
+
+import { FieldHtmlEditor } from '../field-html-editor'
+import { InputSkillSelector } from '../input-skill-selector'
 
 import styles from './AddEditWorkExperienceForm.module.scss'
 
diff --git a/src/libs/shared/lib/components/add-edit-work-experience-modal/AddEditWorkExperienceModal.tsx b/src/libs/shared/lib/components/add-edit-work-experience-modal/AddEditWorkExperienceModal.tsx
index ef1eec664..79e70f1a3 100644
--- a/src/libs/shared/lib/components/add-edit-work-experience-modal/AddEditWorkExperienceModal.tsx
+++ b/src/libs/shared/lib/components/add-edit-work-experience-modal/AddEditWorkExperienceModal.tsx
@@ -1,7 +1,7 @@
 import { FC, useRef } from 'react'
 
 import { BaseModal, Button } from '~/libs/ui'
-import { UserTrait } from '~/libs/core'
+import type { UserTrait } from '~/libs/core/lib/profile/user-traits.model'
 
 import { AddEditWorkExperienceForm } from '../add-edit-work-experience-form'
 import type { AddEditWorkExperienceFormRef } from '../add-edit-work-experience-form'
diff --git a/src/libs/shared/lib/components/contact-support-form/ContactSupportForm.tsx b/src/libs/shared/lib/components/contact-support-form/ContactSupportForm.tsx
index 55d6da44f..b83ee1fe9 100644
--- a/src/libs/shared/lib/components/contact-support-form/ContactSupportForm.tsx
+++ b/src/libs/shared/lib/components/contact-support-form/ContactSupportForm.tsx
@@ -7,8 +7,8 @@ import {
     formGetInputModel,
     FormInputModel,
     FormValue,
-    LoadingSpinner,
-} from '~/libs/ui'
+} from '~/libs/ui/lib/components/form'
+import { LoadingSpinner } from '~/libs/ui/lib/components/loading-spinner'
 
 import { ContactSupportFormField } from './contact-support-form.config'
 import { ContactSupportRequest } from './contact-support-functions'
diff --git a/src/libs/shared/lib/components/contact-support-form/contact-support-form.config.ts b/src/libs/shared/lib/components/contact-support-form/contact-support-form.config.ts
index acba4f009..c2855c7b4 100644
--- a/src/libs/shared/lib/components/contact-support-form/contact-support-form.config.ts
+++ b/src/libs/shared/lib/components/contact-support-form/contact-support-form.config.ts
@@ -1,4 +1,5 @@
-import { FormDefinition, validatorEmail, validatorRequired } from '~/libs/ui'
+import type { FormDefinition } from '~/libs/ui/lib/components/form/form-definition.model'
+import { validatorEmail, validatorRequired } from '~/libs/ui/lib/components/form/validator-functions'
 
 export enum ContactSupportFormField {
     email = 'email',
diff --git a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx
index 70f4f9847..50ff6a02a 100644
--- a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx
+++ b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx
@@ -1,9 +1,9 @@
 import { FC, useCallback, useState } from 'react'
 
-import { UserSkill } from '~/libs/core'
-import { SkillPill } from '~/libs/shared'
+import type { UserSkill } from '~/libs/core/lib/profile/user-skill.model'
 
 import { SkillsList } from '../skills-list'
+import { SkillPill } from '../skill-pill'
 import { SkillPillProps } from '../skill-pill/SkillPill'
 
 import styles from './GroupedSkillsUI.module.scss'
diff --git a/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx b/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
index c92f29e6d..7b24ed69e 100644
--- a/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
+++ b/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
@@ -3,8 +3,8 @@ import { SelectInstance } from 'react-select'
 import { noop } from 'lodash'
 
 import { InputMultiselect, InputMultiselectOption, InputMultiselectThemes } from '~/libs/ui'
-import { SearchUserSkill, UserSkill } from '~/libs/core'
 import { TCASkillType } from '~/apps/learn/src/lib'
+import type { SearchUserSkill, UserSkill } from '~/libs/core/lib/profile/user-skill.model'
 
 import { autoCompleteSkills, isSkillVerified } from '../../services/standard-skills'
 
diff --git a/src/libs/shared/lib/components/modals/contact-support-modal/ContactSupportModal.tsx b/src/libs/shared/lib/components/modals/contact-support-modal/ContactSupportModal.tsx
index 7d01c9736..9b4c0ab37 100644
--- a/src/libs/shared/lib/components/modals/contact-support-modal/ContactSupportModal.tsx
+++ b/src/libs/shared/lib/components/modals/contact-support-modal/ContactSupportModal.tsx
@@ -1,6 +1,7 @@
 import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react'
 
-import { BaseModal, FormDefinition, formGetInputFields, formOnReset } from '~/libs/ui'
+import { FormDefinition, formGetInputFields, formOnReset } from '~/libs/ui/lib/components/form'
+import { BaseModal } from '~/libs/ui/lib/components/modals/base-modal'
 
 import { ContactSupportForm, contactSupportFormDef } from '../../contact-support-form'
 
diff --git a/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.tsx b/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.tsx
index 8b3433cf1..99902a38e 100644
--- a/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.tsx
+++ b/src/libs/shared/lib/components/work-experience-card/WorkExperienceCard.tsx
@@ -5,8 +5,8 @@ import DOMPurify from 'dompurify'
 import classNames from 'classnames'
 import moment from 'moment'
 
-import { UserTrait } from '~/libs/core'
 import { getIndustryOptionLabel } from '~/libs/shared/lib/utils/industry'
+import type { UserTrait } from '~/libs/core/lib/profile/user-traits.model'
 
 import styles from './WorkExperienceCard.module.scss'
 
diff --git a/src/libs/shared/lib/services/standard-skills/skills.utils.ts b/src/libs/shared/lib/services/standard-skills/skills.utils.ts
index 97d518f1b..6ce95a45e 100644
--- a/src/libs/shared/lib/services/standard-skills/skills.utils.ts
+++ b/src/libs/shared/lib/services/standard-skills/skills.utils.ts
@@ -1,6 +1,7 @@
 import { find } from 'lodash'
 
-import { UserSkill, UserSkillLevelTypes } from '~/libs/core'
+import { UserSkillLevelTypes } from '~/libs/core/lib/profile/user-skill.model'
+import type { UserSkill } from '~/libs/core/lib/profile/user-skill.model'
 
 export const isSkillVerified = (skill: Pick<UserSkill, 'levels'>): boolean => (
     !!find(skill.levels, { name: UserSkillLevelTypes.verified })
diff --git a/src/libs/shared/lib/services/standard-skills/standard-skills.service.ts b/src/libs/shared/lib/services/standard-skills/standard-skills.service.ts
index dce2aad8b..8c827f0ce 100644
--- a/src/libs/shared/lib/services/standard-skills/standard-skills.service.ts
+++ b/src/libs/shared/lib/services/standard-skills/standard-skills.service.ts
@@ -2,7 +2,8 @@ import { useMemo } from 'react'
 import useSWR, { SWRResponse } from 'swr'
 
 import { EnvironmentConfig } from '~/config'
-import { SearchUserSkill, UserSkill, xhrGetAsync, xhrPostAsync, xhrPutAsync } from '~/libs/core'
+import type { SearchUserSkill, UserSkill } from '~/libs/core/lib/profile/user-skill.model'
+import { xhrGetAsync, xhrPostAsync, xhrPutAsync } from '~/libs/core/lib/xhr/xhr-functions'
 
 const baseUrl = `${EnvironmentConfig.API.V5}/standardized-skills`
 
diff --git a/src/libs/shared/lib/utils/rich-text.spec.ts b/src/libs/shared/lib/utils/rich-text.spec.ts
index ee27bc406..f25b40947 100644
--- a/src/libs/shared/lib/utils/rich-text.spec.ts
+++ b/src/libs/shared/lib/utils/rich-text.spec.ts
@@ -26,6 +26,25 @@ describe('rich-text utils', () => {
             .toContain('<script>')
     })
 
+    it('preserves safe image markup and removes unsafe image handlers', () => {
+        const rendered = renderRichTextToHtml('![Preview](https://example.com/preview.png "Preview")')
+        const unsafeRendered = renderRichTextToHtml(
+            '<img src="https://example.com/preview.png" alt="Preview" onerror="alert(1)">',
+        )
+
+        expect(rendered)
+            .toContain('<img')
+        expect(rendered)
+            .toContain('src="https://example.com/preview.png"')
+        expect(rendered)
+            .toContain('alt="Preview"')
+        expect(rendered)
+            .toContain('title="Preview"')
+        expect(unsafeRendered)
+            .not
+            .toContain('onerror')
+    })
+
     it('extracts readable plain text from html lists', () => {
         const plainText = renderRichTextToPlainText('<ul><li>First</li><li>Second</li></ul>')
 
diff --git a/src/libs/shared/lib/utils/rich-text.ts b/src/libs/shared/lib/utils/rich-text.ts
index 3364a2559..743680e47 100644
--- a/src/libs/shared/lib/utils/rich-text.ts
+++ b/src/libs/shared/lib/utils/rich-text.ts
@@ -3,6 +3,7 @@ import DOMPurify from 'dompurify'
 
 const RICH_TEXT_ALLOWED_ATTRIBUTES = [
     'align',
+    'alt',
     'border',
     'cellpadding',
     'cellspacing',
@@ -12,8 +13,10 @@ const RICH_TEXT_ALLOWED_ATTRIBUTES = [
     'href',
     'rel',
     'rowspan',
+    'src',
     'style',
     'target',
+    'title',
     'type',
     'width',
 ]
@@ -32,6 +35,7 @@ const RICH_TEXT_ALLOWED_TAGS = [
     'h5',
     'h6',
     'hr',
+    'img',
     'li',
     'ol',
     'p',
diff --git a/src/libs/ui/lib/components/form/form-input.model.ts b/src/libs/ui/lib/components/form/form-input.model.ts
index 4edd0d742..551a5e4e9 100644
--- a/src/libs/ui/lib/components/form/form-input.model.ts
+++ b/src/libs/ui/lib/components/form/form-input.model.ts
@@ -1,9 +1,9 @@
 import { ReactNode } from 'react'
 
-import { FormInputAutocompleteOption } from './form-groups'
+import type { FormInputAutocompleteOption } from './form-groups'
 import { InputEvent } from './form-input.event'
-import { ValidatorFn } from './validator-functions'
-import { InputSelectOption } from './form-groups/form-input'
+import type { ValidatorFn } from './validator-functions'
+import type { InputSelectOption } from './form-groups/form-input'
 
 export interface FormRadioButtonOption {
     checked: boolean
diff --git a/src/libs/ui/lib/components/form/validator-functions/validator.functions.ts b/src/libs/ui/lib/components/form/validator-functions/validator.functions.ts
index 793c7f38b..5cfffe673 100644
--- a/src/libs/ui/lib/components/form/validator-functions/validator.functions.ts
+++ b/src/libs/ui/lib/components/form/validator-functions/validator.functions.ts
@@ -1,5 +1,4 @@
-import { formGetInput } from '../form-functions'
-import { InputValue } from '../form-input.model'
+import type { InputValue } from '../form-input.model'
 
 function checkForBooleanValueAndThrowError(value: InputValue): void {
     if (typeof value === 'boolean') {
@@ -183,7 +182,8 @@ function getOtherField(formElements?: HTMLFormControlsCollection, otherFieldName
     }
 
     // get the other form field
-    const otherField: HTMLInputElement | undefined = formGetInput(formElements, otherFieldName)
+    const otherField: HTMLInputElement | undefined
+        = formElements.namedItem(otherFieldName) as HTMLInputElement | undefined
 
     // if there is no other field, we have a problem
     if (!otherField) {
diff --git a/src/libs/ui/lib/components/table/Table.tsx b/src/libs/ui/lib/components/table/Table.tsx
index c611bd46d..aea62f4b8 100644
--- a/src/libs/ui/lib/components/table/Table.tsx
+++ b/src/libs/ui/lib/components/table/Table.tsx
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import classNames from 'classnames'
 
 import { Sort } from '~/apps/admin/src/platform/gamification-admin/src/game-lib'
-import { useWindowSize, WindowSize } from '~/libs/shared'
+import { useWindowSize, WindowSize } from '~/libs/shared/lib/hooks/use-window-size.hook'
 
 import { Button } from '../button'
 import { IconOutline } from '../svgs'
diff --git a/src/libs/ui/lib/components/table/table-cell/TableCell.tsx b/src/libs/ui/lib/components/table/table-cell/TableCell.tsx
index 3dab6d99c..1b9f54ca4 100644
--- a/src/libs/ui/lib/components/table/table-cell/TableCell.tsx
+++ b/src/libs/ui/lib/components/table/table-cell/TableCell.tsx
@@ -1,12 +1,12 @@
 import { CSSProperties, ElementType, MouseEvent } from 'react'
 import classNames from 'classnames'
 
-import { IconOutline } from '~/libs/ui'
 import {
     textFormatDateLocaleShortString,
     textFormatMoneyLocaleString,
 } from '~/libs/shared/lib/utils'
 
+import { IconOutline } from '../../svgs'
 import { TableCellType } from '../table-cell.type'
 
 import styles from './TableCell.module.scss'
diff --git a/src/libs/ui/lib/components/tabs-navbar/TabsNavbarItem.tsx b/src/libs/ui/lib/components/tabs-navbar/TabsNavbarItem.tsx
index 02f566c36..f51730575 100644
--- a/src/libs/ui/lib/components/tabs-navbar/TabsNavbarItem.tsx
+++ b/src/libs/ui/lib/components/tabs-navbar/TabsNavbarItem.tsx
@@ -13,8 +13,8 @@ import {
 } from 'react'
 import classNames from 'classnames'
 
-import { DropdownMenu } from '~/apps/admin/src/lib'
-import { useWindowSize, WindowSize } from '~/libs/shared'
+import { DropdownMenu } from '~/apps/admin/src/lib/components/common/DropdownMenu'
+import { useWindowSize, WindowSize } from '~/libs/shared/lib/hooks/use-window-size.hook'
 
 import { IconOutline } from '../svgs'
 
diff --git a/src/libs/ui/lib/components/verified-member-badge/VerifiedMemberBadge.tsx b/src/libs/ui/lib/components/verified-member-badge/VerifiedMemberBadge.tsx
index 3f90911ec..da0a2ee9a 100644
--- a/src/libs/ui/lib/components/verified-member-badge/VerifiedMemberBadge.tsx
+++ b/src/libs/ui/lib/components/verified-member-badge/VerifiedMemberBadge.tsx
@@ -1,7 +1,8 @@
 import { FC } from 'react'
 import classNames from 'classnames'
 
-import { IconOutline, Tooltip, VerifiedMemberFlagSvg } from '~/libs/ui'
+import { Tooltip } from '../tooltip'
+import { IconOutline, VerifiedMemberFlagSvg } from '../svgs'
 
 import styles from './VerifiedMemberBadge.module.scss'
 
diff --git a/tsconfig.json b/tsconfig.json
index e87786564..9cc5b850c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,6 +26,9 @@
             "./node_modules/@types"
         ]
     },
+    "files": [
+        "src/apps/community/src/pages/communities/CommunityLoader.test.tsx"
+    ],
     "include": [
         "src",
     ],
diff --git a/yarn.lock b/yarn.lock
index d7bb311c3..92673906b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1102,6 +1102,11 @@
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.29.2.tgz#9a6e2d05f4b6692e1801cd4fb176ad823930ed5e"
   integrity sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==
 
+"@babel/runtime@^7.20.13":
+  version "7.28.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
+  integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
+
 "@babel/template@^7.28.6", "@babel/template@^7.3.3":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.28.6.tgz#0e7e56ecedb78aeef66ce7972b082fce76a23e57"
@@ -1249,11 +1254,27 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@contentful/rich-text-html-renderer@^17.1.6":
+  version "17.1.6"
+  resolved "https://registry.yarnpkg.com/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-17.1.6.tgz#892129d97c10555039195d9c08a6a7beff639de6"
+  integrity sha512-q1tdl9sdP3VYF/8GmQIkSLq5kcFSJGKzWpXO39Nyw4AXrT70gT/pC4wIFUjb75jf67uga3OGz7JBzdKy4NtkNA==
+  dependencies:
+    "@contentful/rich-text-types" "^17.2.5"
+    escape-html "^1.0.3"
+
 "@contentful/rich-text-types@^16.0.2":
   version "16.8.5"
   resolved "https://registry.yarnpkg.com/@contentful/rich-text-types/-/rich-text-types-16.8.5.tgz#832c8b428612f5181908bc1033c6ef9f48f1ce83"
   integrity sha512-q18RJuJCOuYveGiCIjE5xLCQc5lZ3L2Qgxrlg/H2YEobDFqdtmklazRi1XwEWaK3tMg6yVXBzKKkQfLB4qW14A==
 
+"@contentful/rich-text-types@^17.2.5":
+  version "17.2.5"
+  resolved "https://registry.yarnpkg.com/@contentful/rich-text-types/-/rich-text-types-17.2.5.tgz#d8edc86fbbf0760a4533e28369ca07e08809d850"
+  integrity sha512-EA5vTfROZePoPmSlqLVd+luL/ev8CjnI20y6vWFVPlLRxQbv4XytXRzatydPE63CqfsPylF7NCn2z8rTLhnWfg==
+  dependencies:
+    "@lingui/core" "^5.4.1"
+    is-plain-obj "^3.0.0"
+
 "@craco/craco@^3.1.1", "@craco/craco@^3.2.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-3.6.0.tgz#4b4ce7dacda8ac64731c18b1542f70127cd3eb8e"
@@ -2373,6 +2394,22 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
+"@lingui/core@^5.4.1":
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/@lingui/core/-/core-5.9.2.tgz#63b58a68e1f85970078a8bc3edc92e1d22221763"
+  integrity sha512-2K2lIEiUJ9VNTZU0igiRUubIUvcHu8TEuS4uRrrA5f2DGgCtHD5o7rw6OO9cM1RxZFCC5rpRwIMDeXHrc44W3g==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@lingui/message-utils" "5.9.2"
+
+"@lingui/message-utils@5.9.2":
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/@lingui/message-utils/-/message-utils-5.9.2.tgz#ab4c4cba9eccb29349a65335dc812cf5291778d9"
+  integrity sha512-PQA+bP4TBX7F5nmrEm9eDk+xddepjO7okI6bsOQ+6LIw1eJMvh9w/Xt3AoKTgzBCwd1ZwyqzBOelrX6sa6y+fg==
+  dependencies:
+    "@messageformat/parser" "^5.0.0"
+    js-sha256 "^0.10.1"
+
 "@marijn/find-cluster-break@^1.0.0":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"
@@ -2386,6 +2423,13 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
+"@messageformat/parser@^5.0.0":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@messageformat/parser/-/parser-5.1.1.tgz#ca7d6c18e9f3f6b6bc984a465dac16da00106055"
+  integrity sha512-3p0YRGCcTUCYvBKLIxtDDyrJ0YijGIwrTRu1DT8gIviIDZru8H23+FkY6MJBzM1n9n20CiM4VeDYuBsrrwnLjg==
+  dependencies:
+    moo "^0.5.1"
+
 "@napi-rs/wasm-runtime@^1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz#a46bbfedc29751b7170c5d23bc1d8ee8c7e3c1e1"
@@ -8772,7 +8816,7 @@ escalade@^3.1.1, escalade@^3.2.0:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
@@ -12240,6 +12284,11 @@ js-base64@^2.1.9:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+js-sha256@^0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.10.1.tgz#b40104ba1368e823fdd5f41b66b104b15a0da60d"
+  integrity sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -13854,6 +13903,11 @@ money@^0.2.0:
   resolved "https://registry.yarnpkg.com/money/-/money-0.2.0.tgz#7eada2df1009df935fa18d4fb1d620ddacce02c2"
   integrity sha512-0AblpmOvf7yXW9Or4iBHvms38blV74pwjF/G3qI2PDbcAowQEYgEJPqvnuGBYTuWXtZQSrN5g49RqyezdKhwGg==
 
+moo@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
+  integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
+
 mri@^1.1.0, mri@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"