diff --git a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx b/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
index 42743c501..5f4eff56e 100644
--- a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
+++ b/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
@@ -17,6 +17,7 @@ import {
     CoursesProviderData,
     CourseTitle,
     ResourceProviderData,
+    TCACertificationProgressBox,
     useGetCertification,
     useGetCourses,
     useGetResourceProvider,
@@ -28,7 +29,6 @@ import {
 import { getCoursePath } from '../learn.routes'
 
 import { CourseCurriculum } from './course-curriculum'
-import { TCACertificationBanner } from './tca-certification-banner'
 import styles from './CourseDetailsPage.module.scss'
 
 const CourseDetailsPage: FC<{}> = () => {
@@ -194,7 +194,7 @@ const CourseDetailsPage: FC<{}> = () => {
                                 trackType={certificate?.certificationCategory.track}
                             />
 
-                            <TCACertificationBanner
+                            <TCACertificationProgressBox
                                 userId={profile?.userId}
                                 className={styles.tcaCertBanner}
                                 fccCertificateId={certificate.id}
diff --git a/src-ts/tools/learn/course-details/tca-certification-banner/index.ts b/src-ts/tools/learn/course-details/tca-certification-banner/index.ts
deleted file mode 100644
index cc320fa2d..000000000
--- a/src-ts/tools/learn/course-details/tca-certification-banner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TCACertificationBanner } from './TCACertificationBanner'
diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
index 4b8052ffd..9cc04bebf 100644
--- a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
+++ b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
@@ -533,6 +533,7 @@ const FreeCodeCamp: FC<{}> = () => {
                         currentStep={`${moduleParam}/${lessonParam}`}
                         certificateProgress={certificateProgress}
                         refetchProgress={refetchProgress}
+                        userId={profile?.userId}
                     />
 
                     <div className={styles['course-frame']}>
diff --git a/src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.module.scss b/src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.module.scss
index 789554d72..10b70ceb8 100644
--- a/src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.module.scss
+++ b/src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.module.scss
@@ -28,4 +28,5 @@
     @extend .body-main-bold;
     flex: 0 0 auto;
     margin-bottom: $space-xl;
+    margin-top: $space-lg;
 }
\ No newline at end of file
diff --git a/src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.tsx b/src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.tsx
index afa9191d9..e5b5f8881 100644
--- a/src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.tsx
+++ b/src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.tsx
@@ -1,6 +1,12 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react'
 
-import { CollapsiblePane, CourseOutline, LearnCourse, LearnUserCertificationProgress } from '../../learn-lib'
+import {
+    CollapsiblePane,
+    CourseOutline,
+    LearnCourse,
+    LearnUserCertificationProgress,
+    TCACertificationProgressBox,
+} from '../../learn-lib'
 
 import styles from './FccSidebar.module.scss'
 
@@ -11,6 +17,7 @@ interface FccSidebarProps {
     courseDataReady: boolean
     currentStep: string
     refetchProgress: () => void
+    userId?: number
 }
 
 const FccSidebar: FC<FccSidebarProps> = (props: FccSidebarProps) => {
@@ -35,6 +42,12 @@ const FccSidebar: FC<FccSidebarProps> = (props: FccSidebarProps) => {
                 isOpen={isOpen}
             >
                 <div className={styles['course-outline-wrap']}>
+                    <TCACertificationProgressBox
+                        userId={props.userId}
+                        className={styles.tcaCertBanner}
+                        fccCertificateId={props.certificateProgress?.fccCertificationId}
+                        theme='sidebar'
+                    />
                     <div className={styles['course-outline-title']}>
                         {props.courseData?.title}
                     </div>
diff --git a/src-ts/tools/learn/learn-lib/index.ts b/src-ts/tools/learn/learn-lib/index.ts
index 3f19bc080..e9cb82e3c 100755
--- a/src-ts/tools/learn/learn-lib/index.ts
+++ b/src-ts/tools/learn/learn-lib/index.ts
@@ -15,6 +15,7 @@ export * from './skill'
 export * from './sticky-sidebar'
 export * from './svgs'
 export * from './tca-certificate-preview'
+export * from './tca-certification-progress-box'
 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/course-details/tca-certification-banner/TCACertificationBanner.module.scss b/src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.module.scss
similarity index 76%
rename from src-ts/tools/learn/course-details/tca-certification-banner/TCACertificationBanner.module.scss
rename to src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.module.scss
index bfd6670e9..bbc531de2 100644
--- a/src-ts/tools/learn/course-details/tca-certification-banner/TCACertificationBanner.module.scss
+++ b/src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.module.scss
@@ -93,4 +93,32 @@
             color: $turq-75;
         }
     }
+
+}
+    
+.wrap:global(.theme-sidebar) {
+    background: $black-5;
+    color: $tc-black;
+    border: 0 none;
+    padding: $space-lg;
+
+    .header {
+        > svg {
+            @include icon-size(36);
+        }
+
+        :global(.overline) {
+            font-size: 10px;
+            line-height: 12px;
+        }
+
+        :global(.body-main-bold) {
+            font-size: 14px;
+            line-height: 20px;
+        }
+    }
+
+    .statusBox {
+        background: $tc-white;
+    }
 }
\ No newline at end of file
diff --git a/src-ts/tools/learn/course-details/tca-certification-banner/TCACertificationBanner.tsx b/src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.tsx
similarity index 92%
rename from src-ts/tools/learn/course-details/tca-certification-banner/TCACertificationBanner.tsx
rename to src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.tsx
index 2d16baa3f..94d39d99a 100644
--- a/src-ts/tools/learn/course-details/tca-certification-banner/TCACertificationBanner.tsx
+++ b/src-ts/tools/learn/learn-lib/tca-certification-progress-box/TCACertificationProgressBox.tsx
@@ -15,10 +15,10 @@ import {
     useGetUserCertifications,
     UserCertificationProgressStatus,
     UserCertificationsProviderData,
-} from '../../learn-lib'
+} from '..'
 import { getTCACertificationPath } from '../../learn.routes'
 
-import styles from './TCACertificationBanner.module.scss'
+import styles from './TCACertificationProgressBox.module.scss'
 
 interface ProgressByIdCollection {
     [key: string]: LearnUserCertificationProgress
@@ -37,13 +37,14 @@ function getStatusBox(icon: ReactNode, text: string, theme: string = 'gray'): Re
     )
 }
 
-export interface TCACertificationBannerProps {
+export interface TCACertificationProgressBoxProps {
     userId?: number
     className?: string
     fccCertificateId?: string
+    theme?: 'sidebar'
 }
 
-const TCACertificationBanner: FC<TCACertificationBannerProps> = (props: TCACertificationBannerProps) => {
+const TCACertificationProgressBox: FC<TCACertificationProgressBoxProps> = (props: TCACertificationProgressBoxProps) => {
 
     const {
         certifications: tcaCertifications,
@@ -117,7 +118,7 @@ const TCACertificationBanner: FC<TCACertificationBannerProps> = (props: TCACerti
     }
 
     return (
-        <div className={classNames(props.className, styles.wrap)}>
+        <div className={classNames(props.className, styles.wrap, props.theme && `theme-${props.theme}`)}>
             <div className={styles.header}>
                 <CertificateBadgeIcon
                     type={certification.certificationCategory.track}
@@ -159,4 +160,4 @@ const TCACertificationBanner: FC<TCACertificationBannerProps> = (props: TCACerti
     )
 }
 
-export default TCACertificationBanner
+export default TCACertificationProgressBox
diff --git a/src-ts/tools/learn/learn-lib/tca-certification-progress-box/index.ts b/src-ts/tools/learn/learn-lib/tca-certification-progress-box/index.ts
new file mode 100644
index 000000000..586e37be2
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/tca-certification-progress-box/index.ts
@@ -0,0 +1 @@
+export { default as TCACertificationProgressBox } from './TCACertificationProgressBox'