diff --git a/src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx b/src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx
index 5653f53b8..efb517500 100644
--- a/src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx
+++ b/src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx
@@ -2,7 +2,7 @@ import { FC, ReactNode, useContext } from 'react'
 import { Params, useParams } from 'react-router-dom'
 
 import { PageSubheaderPortalId } from '../../../config'
-import { TCACertificationsProviderData, useGetTCACertificationMOCK, useLearnBreadcrumb, WaveHero } from '../learn-lib'
+import { TCACertificationProviderData, useGetTCACertificationMOCK, useLearnBreadcrumb, WaveHero } from '../learn-lib'
 import {
     Breadcrumb,
     BreadcrumbItemModel,
@@ -39,9 +39,9 @@ const CertificationDetailsPage: FC<{}> = () => {
     const { initialized: profileReady }: ProfileContextData = useContext(profileContext)
 
     const {
-        certifications: [certification],
+        certification,
         ready: certificateReady,
-    }: TCACertificationsProviderData = useGetTCACertificationMOCK(dashedName as string)
+    }: TCACertificationProviderData = useGetTCACertificationMOCK(dashedName as string)
 
     const ready: boolean = profileReady && certificateReady
 
@@ -100,8 +100,8 @@ const CertificationDetailsPage: FC<{}> = () => {
                     <WaveHero
                         title={(
                             <HeroTitle
+                                certification={certification}
                                 certTitle={certification.title}
-                                providers={certification.providers}
                             />
                         )}
                         theme='grey'
diff --git a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx
index aaadbdbb8..fbb55f5be 100644
--- a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx
+++ b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx
@@ -2,8 +2,7 @@ import { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
 import { Button, IconOutline, IconSolid, Tooltip } from '../../../../lib'
-import { ProvidersLogoList } from '../providers-logo-list'
-import { LearnLevelIcon, TCACertification } from '../../learn-lib'
+import { LearnLevelIcon, ProvidersLogoList, TCACertification } from '../../learn-lib'
 
 import img from './certificate-placeholder.jpg'
 import styles from './CertificationDetailsSidebar.module.scss'
diff --git a/src-ts/tools/learn/certification-details/hero-title/HeroTitle.tsx b/src-ts/tools/learn/certification-details/hero-title/HeroTitle.tsx
index e857fffa1..adf63d782 100644
--- a/src-ts/tools/learn/certification-details/hero-title/HeroTitle.tsx
+++ b/src-ts/tools/learn/certification-details/hero-title/HeroTitle.tsx
@@ -1,25 +1,28 @@
 import { FC } from 'react'
 
-import { DevCertBadgeSvg, TCACertification } from '../../learn-lib'
-import { ProvidersLogoList } from '../providers-logo-list'
+import { TCACertBadge, TCACertification } from '../../learn-lib'
+import { ProvidersLogoList } from '../../learn-lib/providers-logo-list'
 
 import styles from './HeroTitle.module.scss'
 
 interface HeroTitleProps {
+    certification: TCACertification
     certTitle: string
-    providers: TCACertification['providers']
 }
 
 const HeroTitle: FC<HeroTitleProps> = (props: HeroTitleProps) => (
     <div className={styles.wrap}>
-        <DevCertBadgeSvg />
+        <TCACertBadge
+            learnerLevel={props.certification.learnerLevel}
+            certificationCategory={props.certification.certificationCategory}
+        />
         <div className={styles.text}>
             <h1 className={styles.title}>
                 {props.certTitle}
             </h1>
             <ProvidersLogoList
                 label='Content from'
-                providers={props.providers}
+                providers={props.certification.providers}
             />
         </div>
     </div>
diff --git a/src-ts/tools/learn/certification-details/providers-logo-list/providers-logo-map.tsx b/src-ts/tools/learn/certification-details/providers-logo-list/providers-logo-map.tsx
deleted file mode 100644
index 1d4d98a48..000000000
--- a/src-ts/tools/learn/certification-details/providers-logo-list/providers-logo-map.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ReactNode } from 'react'
-
-import { FccLogoBlackSvg, TcaProviderType, TcLogoSvg } from '../../learn-lib'
-
-export const providersLogoMap: {[key in TcaProviderType]: ReactNode} = {
-    freecodecamp: <FccLogoBlackSvg />,
-    topcoder: <TcLogoSvg />,
-}
-
-export function getProviderLogo(provider: TcaProviderType): ReactNode {
-    return providersLogoMap[provider]
-}
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts
index 19a9e2b28..ae4808e18 100644
--- a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts
@@ -4,3 +4,8 @@ export * from './tca-certificate-status-type'
 export * from './tca-certificate-level-type'
 export * from './tca-certification.model'
 export * from './tca-provider-type'
+export * from './tca-certification-provider.model-base'
+export * from './tca-certification-provider.model'
+export * from './tca-certification-resource.model'
+export * from './tca-certification-resourceable.type'
+export * from './tca-certification-category.model'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model-base.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model-base.ts
new file mode 100644
index 000000000..2ec892d4c
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model-base.ts
@@ -0,0 +1,8 @@
+import { TCAProviderType } from './tca-provider-type'
+
+export interface TCACertificationProviderBase {
+    id: number
+    name: TCAProviderType
+    description: string
+    url: string
+}
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model.ts
new file mode 100644
index 000000000..edea0cc79
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-provider.model.ts
@@ -0,0 +1,7 @@
+import { TCACertificationProviderBase } from './tca-certification-provider.model-base'
+import { TCACertificationResource } from './tca-certification-resource.model'
+
+export interface TCACertificationProvider extends TCACertificationProviderBase {
+    attributionStatement: string
+    CertificationResource: TCACertificationResource
+}
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resource.model.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resource.model.ts
new file mode 100644
index 000000000..e88d6fbf7
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resource.model.ts
@@ -0,0 +1,15 @@
+import { TCACertificationResourceable } from './tca-certification-resourceable.type'
+
+export interface TCACertificationResource {
+    id: number
+    topcoderCertificationId: number
+    resourceProviderId: number
+    resourceableId: number
+    resourceableType: TCACertificationResourceable
+    displayOrder: number
+    completionOrder: number
+    resourceDescription: string
+    resourceTitle: string
+    createdAt: Date
+    updatedAt: Date
+}
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resourceable.type.tsx b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resourceable.type.tsx
new file mode 100644
index 000000000..3b887c08e
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-resourceable.type.tsx
@@ -0,0 +1 @@
+export type TCACertificationResourceable = 'FreeCodeCampCertification'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification.model.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification.model.ts
index fe1c846ed..cb3f1d92a 100644
--- a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification.model.ts
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification.model.ts
@@ -1,26 +1,30 @@
 import { TCACertificationLearnLevel } from './tca-certificate-level-type'
 import { TCACertificationStatus } from './tca-certificate-status-type'
 import { TCACertificationCategory } from './tca-certification-category.model'
-import { TcaProviderType } from './tca-provider-type'
+import { TCACertificationProvider } from './tca-certification-provider.model'
+import { TCACertificationProviderBase } from './tca-certification-provider.model-base'
+import { TCACertificationResource } from './tca-certification-resource.model'
 
 export interface TCACertification {
     id: number
     title: string
-    certificationCategoryId: string
-    coursesCount: number
     dashedName: string
     description: string
     introText: string
     estimatedCompletionTime: number
+    status: TCACertificationStatus
+    sequentialCourses: boolean
     learnerLevel: TCACertificationLearnLevel
-    certificationCategory: TCACertificationCategory
+    certificationCategoryId: string
     stripeProductId?: string
     skills: string[]
     learningOutcomes: string[]
     prerequisites: string[]
     createdAt: Date
     updatedAt: Date
-    providers: Array<TcaProviderType>
-    sequentialCourses: boolean
-    status: TCACertificationStatus
+    certificationResources: Array<TCACertificationResource>
+    certificationCategory: TCACertificationCategory
+    resourceProviders: Array<TCACertificationProvider>
+    coursesCount: number
+    providers: Array<TCACertificationProviderBase>
 }
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certifications.provider.tsx b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certifications.provider.tsx
index 64b36848f..587b6e4e4 100644
--- a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certifications.provider.tsx
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certifications.provider.tsx
@@ -26,6 +26,17 @@ const TCACertificationMock: TCACertification[] = [{
     status: 'active',
     certificationCategoryId: '',
     skills: ['HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript'],
+    providers: [{
+        "id": 1,
+        "name": "freeCodeCamp",
+        "description": "Free courses about programming and some such",
+        "url": "freeCodeCamp.org"
+    }],
+    coursesCount: 5,
+    learningOutcomes: ['HTML', 'CSS', 'JavaScript'],
+    certificationCategory: {
+        "track": "DEV",
+    },
 },
 {
     id: 2,
@@ -38,6 +49,17 @@ const TCACertificationMock: TCACertification[] = [{
     learnerLevel: 'Expert',
     certificationCategoryId: '',
     skills: ['Python', 'TensorFlow', 'JSON'],
+    providers: [{
+        "id": 1,
+        "name": "freeCodeCamp",
+        "description": "Free courses about programming and some such",
+        "url": "freeCodeCamp.org"
+    }],
+    coursesCount: 1,
+    learningOutcomes: ['Python', 'TensorFlow', 'JSON'],
+    certificationCategory: {
+        "track": "DATASCIENCE",
+    },
 }]
 
 export function useGetAllTCACertifications(
@@ -91,7 +113,7 @@ export function useGetTCACertificationMOCK(
     certification: string,
 ): TCACertificationProviderData {
 
-    const data: TCACertification | undefined = find(TCACertificationMock, { dashedName: certification })
+    const data: TCACertification = find(TCACertificationMock, { dashedName: certification })
 
     return {
         certification: data,
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-provider-type.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-provider-type.ts
index fa5c8bc5e..583b5b09e 100644
--- a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-provider-type.ts
+++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-provider-type.ts
@@ -1 +1 @@
-export type TcaProviderType = 'freecodecamp' | 'topcoder'
+export type TCAProviderType = 'freeCodeCamp' | 'Topcoder'
diff --git a/src-ts/tools/learn/learn-lib/index.ts b/src-ts/tools/learn/learn-lib/index.ts
index b72d49eb0..b22b32f66 100755
--- a/src-ts/tools/learn/learn-lib/index.ts
+++ b/src-ts/tools/learn/learn-lib/index.ts
@@ -9,7 +9,9 @@ export * from './learn-breadcrumb-provider'
 export * from './learn-level-icon'
 export * from './learn-swr'
 export * from './my-course-card'
+export * from './providers-logo-list'
 export * from './svgs'
+export * from './tca-cert-badge'
 export * from './use-certificate-canvas-hook'
 export * from './use-certificate-print-hook'
 export * from './use-certificate-scaling-hook'
diff --git a/src-ts/tools/learn/certification-details/providers-logo-list/ProvidersLogoList.module.scss b/src-ts/tools/learn/learn-lib/providers-logo-list/ProvidersLogoList.module.scss
similarity index 100%
rename from src-ts/tools/learn/certification-details/providers-logo-list/ProvidersLogoList.module.scss
rename to src-ts/tools/learn/learn-lib/providers-logo-list/ProvidersLogoList.module.scss
diff --git a/src-ts/tools/learn/certification-details/providers-logo-list/ProvidersLogoList.tsx b/src-ts/tools/learn/learn-lib/providers-logo-list/ProvidersLogoList.tsx
similarity index 84%
rename from src-ts/tools/learn/certification-details/providers-logo-list/ProvidersLogoList.tsx
rename to src-ts/tools/learn/learn-lib/providers-logo-list/ProvidersLogoList.tsx
index 1630cd9db..944ebc24a 100644
--- a/src-ts/tools/learn/certification-details/providers-logo-list/ProvidersLogoList.tsx
+++ b/src-ts/tools/learn/learn-lib/providers-logo-list/ProvidersLogoList.tsx
@@ -1,7 +1,7 @@
 import { FC, Fragment } from 'react'
 import classNames from 'classnames'
 
-import { TCACertification } from '../../learn-lib'
+import { TCACertification } from '..'
 
 import { getProviderLogo } from './providers-logo-map'
 import styles from './ProvidersLogoList.module.scss'
@@ -19,7 +19,7 @@ const ProvidersLogoList: FC<ProvidersLogoListProps> = (props: ProvidersLogoListP
         </span>
         <div>
             {props.providers.map(p => (
-                <Fragment key={p}>{getProviderLogo(p)}</Fragment>
+                <Fragment key={`${p.id}-${p.name}`}>{getProviderLogo(p.name)}</Fragment>
             ))}
         </div>
     </div>
diff --git a/src-ts/tools/learn/certification-details/providers-logo-list/index.ts b/src-ts/tools/learn/learn-lib/providers-logo-list/index.ts
similarity index 100%
rename from src-ts/tools/learn/certification-details/providers-logo-list/index.ts
rename to src-ts/tools/learn/learn-lib/providers-logo-list/index.ts
diff --git a/src-ts/tools/learn/learn-lib/providers-logo-list/providers-logo-map.tsx b/src-ts/tools/learn/learn-lib/providers-logo-list/providers-logo-map.tsx
new file mode 100644
index 000000000..2d3d4ad7c
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/providers-logo-list/providers-logo-map.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from 'react'
+
+import { FccLogoBlackSvg, TcLogoSvg } from '../svgs'
+import { TCAProviderType } from '../data-providers'
+
+export const providersLogoMap: {[key in TCAProviderType]: ReactNode} = {
+    freeCodeCamp: <FccLogoBlackSvg />,
+    Topcoder: <TcLogoSvg />,
+}
+
+export function getProviderLogo(provider: TCAProviderType): ReactNode {
+    return providersLogoMap[provider]
+}
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-1.svg b/src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-1.svg
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-1.svg
rename to src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-1.svg
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-2.svg b/src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-2.svg
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-2.svg
rename to src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-2.svg
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-3.svg b/src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-3.svg
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-3.svg
rename to src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-3.svg
diff --git a/src-ts/tools/learn/learn-lib/svgs/index.ts b/src-ts/tools/learn/learn-lib/svgs/index.ts
index 9d46df366..e4dcbee80 100644
--- a/src-ts/tools/learn/learn-lib/svgs/index.ts
+++ b/src-ts/tools/learn/learn-lib/svgs/index.ts
@@ -2,7 +2,12 @@ export { ReactComponent as LearningHat } from './learning-hat.svg'
 export { ReactComponent as CertIcon } from './cert-icon.svg'
 export { ReactComponent as CourseIcon } from './course-icon.svg'
 export { ReactComponent as CrowdIcon } from './crowd-icon.svg'
-export { ReactComponent as DevCertBadgeSvg } from './dev-cert-badge.svg'
 export { ReactComponent as TcLogoSvg } from './tc-logo.svg'
 export { ReactComponent as FccLogoBlackSvg } from './vendor-fcc-logo-black.svg'
 export { ReactComponent as IconCertifSvg } from './icon-certif.svg'
+export { ReactComponent as DSCertBadge1Svg } from './ds-cert-badge-1.svg'
+export { ReactComponent as DSCertBadge2Svg } from './ds-cert-badge-2.svg'
+export { ReactComponent as DSCertBadge3Svg } from './ds-cert-badge-3.svg'
+export { ReactComponent as WebDevCertBadge1Svg } from './web-dev-cert-badge-1.svg'
+export { ReactComponent as WebDevCertBadge2Svg } from './web-dev-cert-badge-2.svg'
+export { ReactComponent as WebDevCertBadge3Svg } from './web-dev-cert-badge-3.svg'
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/web-dev-cert-badge-1.svg b/src-ts/tools/learn/learn-lib/svgs/web-dev-cert-badge-1.svg
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/web-dev-cert-badge-1.svg
rename to src-ts/tools/learn/learn-lib/svgs/web-dev-cert-badge-1.svg
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/web-dev-cert-badge-2.svg b/src-ts/tools/learn/learn-lib/svgs/web-dev-cert-badge-2.svg
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/web-dev-cert-badge-2.svg
rename to src-ts/tools/learn/learn-lib/svgs/web-dev-cert-badge-2.svg
diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/web-dev-cert-badge-3.svg b/src-ts/tools/learn/learn-lib/svgs/web-dev-cert-badge-3.svg
similarity index 100%
rename from src-ts/tools/learn/welcome/tc-certifications/assets/web-dev-cert-badge-3.svg
rename to src-ts/tools/learn/learn-lib/svgs/web-dev-cert-badge-3.svg
diff --git a/src-ts/tools/learn/learn-lib/tca-cert-badge/TCACertBadge.module.scss b/src-ts/tools/learn/learn-lib/tca-cert-badge/TCACertBadge.module.scss
new file mode 100644
index 000000000..5c9c9528a
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/tca-cert-badge/TCACertBadge.module.scss
@@ -0,0 +1,8 @@
+@import '../../../../lib/styles/includes';
+
+.tcaBadge {
+    @include ltemd {
+        width: 60px;
+        height: 56px;
+    }
+}
\ No newline at end of file
diff --git a/src-ts/tools/learn/learn-lib/tca-cert-badge/TCACertBadge.tsx b/src-ts/tools/learn/learn-lib/tca-cert-badge/TCACertBadge.tsx
new file mode 100644
index 000000000..6dfe9740a
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/tca-cert-badge/TCACertBadge.tsx
@@ -0,0 +1,35 @@
+import { FC } from 'react'
+import {
+    DSCertBadge1Svg,
+    DSCertBadge2Svg,
+    DSCertBadge3Svg,
+    TCACertificationCategory,
+    TCACertificationLearnLevel,
+    WebDevCertBadge1Svg,
+    WebDevCertBadge2Svg,
+    WebDevCertBadge3Svg,
+} from '..'
+import styles from './TCACertBadge.module.scss'
+
+interface TCACertBadgeProps {
+    learnerLevel: TCACertificationLearnLevel
+    certificationCategory: TCACertificationCategory
+}
+
+const badgesMap: any = {
+    DATASCIENCE: {
+        Beginner: <DSCertBadge1Svg className={styles.tcaBadge} />,
+        Expert: <DSCertBadge3Svg className={styles.tcaBadge} />,
+        Intermediate: <DSCertBadge2Svg className={styles.tcaBadge} />,
+    },
+    DEV: {
+        Beginner: <WebDevCertBadge1Svg className={styles.tcaBadge} />,
+        Expert: <WebDevCertBadge3Svg className={styles.tcaBadge} />,
+        Intermediate: <WebDevCertBadge2Svg className={styles.tcaBadge} />,
+    },
+}
+
+const TCACertBadge: FC<TCACertBadgeProps>
+    = (props: TCACertBadgeProps): JSX.Element => badgesMap[props.certificationCategory.track][props.learnerLevel]
+
+export default TCACertBadge
diff --git a/src-ts/tools/learn/learn-lib/tca-cert-badge/index.ts b/src-ts/tools/learn/learn-lib/tca-cert-badge/index.ts
new file mode 100644
index 000000000..ebdd8f2da
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/tca-cert-badge/index.ts
@@ -0,0 +1 @@
+export { default as TCACertBadge } from './TCACertBadge'
diff --git a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss
index f33367482..636b419de 100644
--- a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss
+++ b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss
@@ -41,5 +41,9 @@
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: $space-xxl;
+
+        @include ltemd {
+            grid-template-columns: 1fr;
+        }
     }
 }
diff --git a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx
index 81ea6cd46..4864d1702 100644
--- a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx
+++ b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx
@@ -13,7 +13,7 @@ interface TCCertificationsProps {
 const TCCertifications: FC<TCCertificationsProps> = (props: TCCertificationsProps) => {
     const renderListCard: (certification: TCACertification) => ReactNode
         = useCallback((certification: TCACertification) => (
-            <TCCertCard certification={certification} />
+            <TCCertCard certification={certification} key={certification.dashedName} />
         ), [])
 
     return (
diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss
index a39f64642..f75e0192f 100644
--- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss
+++ b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     background-color: $black-5;
-    padding: $space-xxl $space-lg;
+    padding: $space-xxxxl $space-xxl;
     border-radius: 8px;
 
     .cardHeader {
@@ -14,6 +14,10 @@
         padding-bottom: $space-xxl;
         margin-bottom: $space-xxl;
 
+        @include ltemd {
+            align-items: flex-start;
+        }
+
         .cardTitleWrap {
             display: flex;
             flex-direction: column;
@@ -50,7 +54,7 @@
     .skills {
         display: flex;
         flex-wrap: wrap;
-        margin: $space-sm 0;
+        margin-top: $space-sm;
 
         >div {
             margin-right: $space-sm;
@@ -66,12 +70,20 @@
         display: flex;
         align-items: center;
     }
+
+    .cardBottom {
+        margin-top: $space-xxl;
+
+        @include ltemd {
+            margin-top: $space-xl;
+        }
+    }
 }
 
 .infoText {
     font-style: italic;
     color: $black-60;
-    margin-right: $space-lg;
+    margin-right: $space-sm;
 
     &:last-child {
         margin-right: 0;
diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx
index d7ea8a717..4cb3e5516 100644
--- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx
+++ b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx
@@ -1,10 +1,16 @@
-import { FC, memo } from 'react'
+import { Dispatch, FC, memo, SetStateAction, useEffect, useState } from 'react'
 import classNames from 'classnames'
 
-import { FccLogoBlackSvg, IconSolid, Tooltip } from '../../../../../lib'
-import { LearnLevelIcon, TCACertification } from '../../../learn-lib'
+import { Button, ButtonStyle, IconSolid, Tooltip } from '../../../../../lib'
+import {
+    LearnLevelIcon,
+    ProvidersLogoList,
+    TCACertBadge,
+    TCACertification,
+    TCACertificationProviderBase,
+} from '../../../learn-lib'
 import { SkillLabel } from '../../skill'
-import { ReactComponent as TCACertBadgeDEV1 } from '../assets/web-dev-cert-badge-1.svg'
+import { getTCACertificationPath } from '../../../learn.routes'
 
 import styles from './TCCertCard.module.scss'
 
@@ -12,18 +18,37 @@ interface TCCertCardProps {
     certification: TCACertification
 }
 
-const EXCERPT_TEXT_LEN: number = 170
+const EXCERPT_TEXT_LEN: number = 165
 
 const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
     const desc: string = props.certification.description.slice(0, EXCERPT_TEXT_LEN)
-    const { skills }: { skills: string[] } = props.certification
+    const { skills, providers, dashedName }: {
+        skills: string[],
+        providers: Array<TCACertificationProviderBase>,
+        dashedName: string
+    } = props.certification
+    const [buttonLabel, setButtonLabel]: [string, Dispatch<SetStateAction<string>>]
+        = useState<string>('Details')
+    const [buttonStyle, setButtonStyle]: [string, Dispatch<SetStateAction<string>>]
+        = useState<string>('secondary')
+    const [link, setLink]: [string, Dispatch<SetStateAction<string>>]
+        = useState<string>(
+            getTCACertificationPath(dashedName),
+        )
+
+    useEffect(() => {
+
+    }, [])
 
     return (
         <div className={styles.wrap}>
             <div className={styles.cardHeader}>
                 {/* TODO: move this to import from learn-lib/svgs
                 when implementing render logic based on learneLevel field... */}
-                <TCACertBadgeDEV1 />
+                <TCACertBadge
+                    learnerLevel={props.certification.learnerLevel}
+                    certificationCategory={props.certification.certificationCategory}
+                />
                 <div className={styles.cardTitleWrap}>
                     <p className='body-large-medium'>{props.certification.title}</p>
                     <div className={styles.cardSubWrap}>
@@ -33,7 +58,7 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
                         </span>
                         <IconSolid.DocumentTextIcon width={16} height={16} />
                         <span className={classNames('body-small', styles.infoText)}>
-                            {/* {props.certification.estimatedCompletionTime} */}
+                            {props.certification.coursesCount}
                             {' courses'}
                         </span>
                         <IconSolid.ClockIcon width={16} height={16} />
@@ -41,10 +66,11 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
                             {props.certification.estimatedCompletionTime}
                             {' hours'}
                         </span>
-                        <IconSolid.CurrencyDollarIcon width={16} height={16} />
+                        {/* TODO: Uncomment this when paid certs come to prod! */}
+                        {/* <IconSolid.CurrencyDollarIcon width={16} height={16} />
                         <span className={classNames('body-small', styles.infoText)}>
                             {' One time payment'}
-                        </span>
+                        </span> */}
                     </div>
                 </div>
                 <div className={styles.newLabel}>NEW</div>
@@ -58,7 +84,7 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
             <div className={styles.skills}>
                 <span className={classNames('body-small', styles.infoText)}>skills taught</span>
                 {skills.slice(0, 3)
-                    .map(skill => <SkillLabel skill={skill} />)}
+                    .map(skill => <SkillLabel skill={skill} key={`${dashedName}:${skill}`} />)}
                 {skills.length > 3 && (
                     <Tooltip
                         content={skills.slice(0, 3)
@@ -70,7 +96,16 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
 
             <div className={styles.contentFrom}>
                 <span className={classNames('body-small', styles.infoText)}>content from</span>
-                <FccLogoBlackSvg />
+                <ProvidersLogoList label='' providers={providers} />
+            </div>
+
+            <div className={styles.cardBottom}>
+                <Button
+                    buttonStyle={buttonStyle as ButtonStyle}
+                    size='sm'
+                    label={buttonLabel}
+                    route={link}
+                />
             </div>
         </div>
     )