diff --git a/src-ts/lib/styles/mixins/_layout.mixins.scss b/src-ts/lib/styles/mixins/_layout.mixins.scss
index 38d79f5e6..4e5af370a 100644
--- a/src-ts/lib/styles/mixins/_layout.mixins.scss
+++ b/src-ts/lib/styles/mixins/_layout.mixins.scss
@@ -22,6 +22,11 @@
     width: 100%;
 }
 
+@mixin socialPreviewImg {
+    width: 1200px;
+    height: 630px;
+}
+
 @mixin scrollbar {
     // firefox's solution for "customizing" scrollbars
     & {
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.module.scss b/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.module.scss
index 2a70f940c..d9b0568b9 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.module.scss
+++ b/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.module.scss
@@ -50,6 +50,11 @@
     background: #fff;
 
     box-shadow: 0 20px 36px rgba($tc-black, 0.22);
+
+    &:global(.large-container) {
+        aspect-ratio: unset;
+        @include socialPreviewImg;
+    }
 }
 
 .share-btn:global(.button.icon) {
@@ -72,4 +77,4 @@
     svg {
         @include icon-xxl;
     }
-}
\ No newline at end of file
+}
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx b/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx
index 448e75d07..3fb376920 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx
+++ b/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import html2canvas from 'html2canvas'
 import { FC, MutableRefObject, useEffect, useMemo, useRef } from 'react'
 import { NavigateFunction, useNavigate } from 'react-router-dom'
@@ -26,12 +27,15 @@ import { Certificate } from './certificate'
 import styles from './CertificateView.module.scss'
 import { useCertificateScaling } from './use-certificate-scaling.hook'
 
+export type CertificateViewStyle = 'large-container' | undefined
+
 interface CertificateViewProps {
     certification: string,
     hideActions?: boolean,
     onCertificationNotCompleted: () => void
     profile: UserProfile,
     provider: string,
+    viewStyle: CertificateViewStyle
 }
 
 const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps) => {
@@ -169,7 +173,10 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                                 />
                             </div>
                         )}
-                        <div className={styles['certificate-wrap']} ref={certificateWrapRef}>
+                        <div
+                            className={classNames(styles['certificate-wrap'], props.viewStyle)}
+                            ref={certificateWrapRef}
+                        >
                             <Certificate
                                 course={course?.title}
                                 userName={userName}
@@ -178,6 +185,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                                 completedDate={completedCertificate?.completedDate ?? ''}
                                 elRef={certificateElRef}
                                 type={certificate?.trackType}
+                                viewStyle={props.viewStyle}
                             />
                         </div>
                         {!props.hideActions && (
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss b/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss
index 025b44e2b..1ea492c07 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss
+++ b/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss
@@ -11,6 +11,18 @@
     padding: calc($space-mx + $space-lg);
     display: flex;
     flex-direction: column;
+    flex: 1;
+
+    &-inner {
+        max-width: 385px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .wrap:global(.large-container) & {
+        padding-left: calc($space-mx + $space-mxx);
+    }
 
     h2 {
         color: $blue-160;
@@ -30,7 +42,7 @@
         font-size: 80px;
         line-height: 72px;
     }
-    
+
     &:global(.theme-dev) {
         .username {
             color: $tc-dev-track-color;
@@ -97,6 +109,7 @@
 
     display: flex;
     flex-direction: column;
+    max-width: 500px;
 }
 
 .course-card {
@@ -147,7 +160,7 @@
     margin-top: $space-sm;
     display: flex;
     justify-content: flex-end;
-    
+
     svg {
         display: block;
         height: 16px;
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.tsx b/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.tsx
index be076dec3..68f842d6c 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.tsx
+++ b/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.tsx
@@ -19,6 +19,7 @@ interface CertificateProps {
     tcHandle?: string
     type?: LearnCertificateTrackType
     userName?: string
+    viewStyle?: 'large-container'
 }
 
 const Certificate: FC<CertificateProps> = (props: CertificateProps) => {
@@ -32,27 +33,29 @@ const Certificate: FC<CertificateProps> = (props: CertificateProps) => {
     return (
         <div
             {...elementSelector}
-            className={styles['wrap']}
+            className={classNames(styles['wrap'], props.viewStyle)}
             ref={props.elRef}
         >
             <div className={classNames(styles['details'], `theme-${certificateType.toLowerCase()}`)}>
-                <h2 className='details grad'>Topcoder Academy</h2>
-                <h3>Certificate of Course Completion</h3>
-                <h1 className={classNames(styles['username'], 'grad')}>
-                    {props.userName}
-                </h1>
-                <div className={classNames('large-subtitle', styles['tc-handle'])}>
-                    <span>Topcoder Handle: </span>
-                    <span>{props.tcHandle}</span>
-                </div>
-                <div className={styles['logos']}>
-                    <div className={styles['logo']}>
-                        <TcLogoSvg />
-                    </div>
-                    <div className={styles['divider']} />
-                    <div className={styles['logo']}>
-                        <TcAcademyLogoSvg />
+                <div className={styles['details-inner']}>
+                    <h2 className='details grad'>Topcoder Academy</h2>
+                    <h3>Certificate of Course Completion</h3>
+                    <h1 className={classNames(styles['username'], 'grad')}>
+                        {props.userName}
+                    </h1>
+                    <div className={classNames('large-subtitle', styles['tc-handle'])}>
+                        <span>Topcoder Handle: </span>
+                        <span>{props.tcHandle}</span>
                     </div>
+                    <div className={styles['logos']}>
+                        <div className={styles['logo']}>
+                            <TcLogoSvg />
+                        </div>
+                        <div className={styles['divider']} />
+                        <div className={styles['logo']}>
+                            <TcAcademyLogoSvg />
+                        </div>
+                </div>
                 </div>
             </div>
             <div className={styles['badges']}>
diff --git a/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx b/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx
index 0ea8c44be..ec7f42062 100644
--- a/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx
+++ b/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx
@@ -1,12 +1,12 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { Params, useParams } from 'react-router-dom'
+import { Params, useParams, useSearchParams } from 'react-router-dom'
 
 import {
     LoadingSpinner,
     profileGetAsync,
     UserProfile
 } from '../../../../lib'
-import CertificateView from '../certificate-view/CertificateView'
+import CertificateView, { CertificateViewStyle } from '../certificate-view/CertificateView'
 
 import styles from './UserCertificate.module.scss'
 
@@ -14,6 +14,8 @@ const UserCertificate: FC<{}> = () => {
 
     const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
     const routeParams: Params<string> = useParams()
+    const [queryParams]: [URLSearchParams, any] = useSearchParams()
+
     const [profile, setProfile]: [
         UserProfile | undefined,
         Dispatch<SetStateAction<UserProfile | undefined>>
@@ -59,6 +61,7 @@ const UserCertificate: FC<{}> = () => {
                         provider={providerParam}
                         onCertificationNotCompleted={() => { }}
                         hideActions
+                        viewStyle={queryParams.get('view-style') as CertificateViewStyle}
                     />
                 </div>
             )}