diff --git a/src-ts/lib/breadcrumb/Breadcrumb.module.scss b/src-ts/lib/breadcrumb/Breadcrumb.module.scss
index c93a17794..bec3f036d 100644
--- a/src-ts/lib/breadcrumb/Breadcrumb.module.scss
+++ b/src-ts/lib/breadcrumb/Breadcrumb.module.scss
@@ -38,7 +38,12 @@
             display: inline-flex;
             align-items: center;
             padding: 0;
-
+            @include ltesm {
+                flex: 0 1 auto;
+                &:first-child {
+                    flex: 1 0 auto;
+                }
+            }
             a {
                 @extend .overline;
                 display: block;
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss
index 0765e293e..d71602e47 100644
--- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss
+++ b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss
@@ -4,6 +4,17 @@
 .wrap {
     background-color: $tc-white;
     height: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+.background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
 }
 
 // TODO: add cross track theme
@@ -19,8 +30,6 @@
     }
 
     &-dev {
-        background-image: url('./assets/bg-dev.png');
-
         .certTitle {
             color: $tc-dev-track-color;
         }
@@ -31,8 +40,6 @@
     }
 
     &-datascience {
-        background-image: url('./assets/bg-datascience.png');
-
         .certTitle {
             color: $tc-datascience-track-color;
         }
@@ -43,8 +50,6 @@
     }
 
     &-design {
-        background-image: url('./assets/bg-design.png');
-
         .certTitle {
             color: $tc-design-track-color;
         }
@@ -55,8 +60,6 @@
     }
 
     &-qa {
-        background-image: url('./assets/bg-qa.png');
-
         .certTitle {
             color: $tc-qa-track-color;
         }
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.tsx b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.tsx
index 1311ec29c..43d716619 100644
--- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.tsx
+++ b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.tsx
@@ -9,6 +9,7 @@ import { TCACertificateType, TCACertification } from '../../data-providers'
 import { CertificateBadgeIcon } from '../../dynamic-icons'
 import { DougSigSvg } from '../../svgs'
 
+import { CertificateBackground } from './certificate-background'
 import styles from './TCACertificate.module.scss'
 
 interface TCACertificateProps {
@@ -47,7 +48,8 @@ const TCACertificate: FC<TCACertificateProps> = (props: TCACertificateProps) =>
             className={classNames(styles.wrap, props.viewStyle)}
             ref={props.elRef}
         >
-            <div className={classNames(styles.theme, styles[`theme-${certificateType.toLowerCase()}`])}>
+            <div className={styles.theme}>
+                <CertificateBackground className={styles.background} certType={certificateType} />
                 <div className={classNames(styles.details)}>
                     <div className={styles.headerWrap}>
                         <CertificateBadgeIcon
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-datascience.png b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-datascience.png
deleted file mode 100644
index 00edf295d..000000000
Binary files a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-datascience.png and /dev/null differ
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-design.png b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-design.png
deleted file mode 100644
index b1ec97686..000000000
Binary files a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-design.png and /dev/null differ
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-dev.png b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-dev.png
deleted file mode 100644
index 7d7c2e458..000000000
Binary files a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-dev.png and /dev/null differ
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-qa.png b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-qa.png
deleted file mode 100644
index 1f1840ca6..000000000
Binary files a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/assets/bg-qa.png and /dev/null differ
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss
new file mode 100644
index 000000000..a8b7b0ecb
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.module.scss
@@ -0,0 +1,28 @@
+@import '../../../../../../lib/styles/includes';
+
+.bg {
+    path:global(#tca-cert-bg_grad-el) {
+        fill: url(#tca-cert-bg--default);
+    }
+    &:global(.dev) {
+        path:global(#tca-cert-bg_grad-el) {
+            fill: url(#tca-cert-bg--dev);
+        }
+    }
+    &:global(.datascience) {
+        path:global(#tca-cert-bg_grad-el) {
+            fill: url(#tca-cert-bg--datascience);
+        }
+    }
+    &:global(.design) {
+        path:global(#tca-cert-bg_grad-el) {
+            fill: url(#tca-cert-bg--design);
+        }
+    }
+    &:global(.qa) {
+        path:global(#tca-cert-bg_grad-el) {
+            fill: url(#tca-cert-bg--qa);
+        }
+    }
+
+}
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx
new file mode 100644
index 000000000..a220af954
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/CertificateBackground.tsx
@@ -0,0 +1,20 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { TCACertificateType } from '../../../data-providers'
+
+import { ReactComponent as BackgroundSvg } from './certificate-bg.svg'
+import styles from './CertificateBackground.module.scss'
+
+interface CertificateBackgroundProps {
+    className?: string
+    certType: TCACertificateType
+}
+
+const CertificateBackground: FC<CertificateBackgroundProps> = (props: CertificateBackgroundProps) => (
+    <BackgroundSvg
+        className={classNames(props.className, styles.bg, (props.certType ?? '').toLowerCase())}
+    />
+)
+
+export default CertificateBackground
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/certificate-bg.svg b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/certificate-bg.svg
new file mode 100644
index 000000000..4f04ce340
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/certificate-bg.svg
@@ -0,0 +1,34 @@
+<svg width="880" height="700" viewBox="0 0 880 700" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 175.472C235.315 186.987 456.709 251.637 652.498 357.708C566.53 461.196 493.852 576.171 437.091 700H178.338L0 521.509V175.472Z" fill="#F4F4F4"/>
+    <path d="M539.131 700C588.643 591.984 650.267 490.704 722.259 397.91C777.207 431.528 829.883 468.512 880 508.576V700H539.131Z" fill="#F4F4F4"/>
+    <path d="M880 389.422C847.571 367.607 814.267 347 780.15 327.663C811.808 291.476 845.131 256.79 880 223.725V389.422Z" fill="#F4F4F4"/>
+    <path d="M711.299 290.929C763.566 234.907 819.961 182.806 880 135.113C880 98.0002 880 30.0003 880 0.000289281C582 0.000289281 48.5 -0.000650883 6.10352e-05 0.000289281C6.86646e-05 32.5009 6.10352e-05 109 6.10352e-05 129.592C8.64005 129.448 17.2974 129.376 25.9715 129.376C272.272 129.376 505.022 187.546 711.299 290.929Z" id="tca-cert-bg_grad-el" />
+    <path opacity="0.1" d="M533.633 700C583.373 587.386 644.398 485.026 719.29 390.338C774.591 424.512 826.8 463.174 880 506.728C880 465 880 426.5 880 385.077C845.835 361.618 813.366 339.985 778.674 320.083C810.834 284.426 843.224 249.846 880 216.19C880 184.5 880 161.5 880 128.019C818.976 175.229 763.526 226.679 710.038 283.077C473.506 163.508 227.164 120.385 1.73074e-05 124.461C1.2698e-05 136.001 1.73074e-05 158.001 1.73074e-05 170.301C232.89 187.45 449.706 241.361 650.204 350.263C565.909 451.138 493.12 566.616 433.654 700C462.5 700 507.5 700 533.633 700Z" fill="#F4F4F4"/>
+    <path opacity="0.1" d="M529.126 700C579.496 584.227 641.628 479.263 718.29 382.338C773.591 416.512 826.8 455.174 880 498.728C880 457 880 418.5 880 377.077C845.835 353.618 812.366 331.985 777.674 312.083C809.834 276.426 843.224 241.846 880 208.19C880 176.5 880 153.5 880 120.019C818.976 167.229 762.526 218.679 709.038 275.077C472.506 155.508 227.164 112.385 1.73074e-05 116.461C1.2698e-05 128.001 1.73074e-05 150.001 1.73074e-05 162.301C232.89 179.45 448.706 233.361 649.204 342.263C563.229 445.15 489.222 563.227 429.113 700C455 700 506.5 700 529.126 700Z" fill="#F4F4F4"/>
+    <path opacity="0.1" d="M524.671 700C575.648 581.057 638.866 473.49 717.29 374.337C772.591 408.511 826.8 447.174 880 490.728C880 449 880 410.5 880 369.077C845.835 345.618 811.366 323.985 776.674 304.083C808.834 268.425 843.224 233.846 880 200.189C880 168.5 880 145.499 880 112.019C818.976 159.228 761.526 210.679 708.038 267.076C471.506 147.508 227.164 104.384 1.73074e-05 108.461C1.2698e-05 120 1.73074e-05 142 1.73074e-05 154.3C232.89 171.45 447.706 225.361 648.204 334.262C560.557 439.15 485.348 559.824 424.622 700C464 700 496.5 700 524.671 700Z" fill="#F4F4F4"/>
+    <defs>
+        <linearGradient id="tca-cert-bg--dev" x1="5.82955e-05" y1="216.742" x2="852.084" y2="-12.2396" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#048467"/>
+            <stop offset="1" stop-color="#064871"/>
+        </linearGradient>
+        <linearGradient id="tca-cert-bg--datascience" x1="-2.73965e-06" y1="216.742" x2="852.083" y2="-12.2396" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#723390"/>
+            <stop offset="1" stop-color="#8C384F"/>
+        </linearGradient>
+        <linearGradient id="tca-cert-bg--design" x1="-2.73965e-06" y1="216.742" x2="852.083" y2="-12.2396" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#065D6E"/>
+            <stop offset="0.0001" stop-color="#06596E"/>
+            <stop offset="1" stop-color="#3E3B91"/>
+        </linearGradient>
+        <linearGradient id="tca-cert-bg--qa" x1="-2.73965e-06" y1="216.742" x2="852.083" y2="-12.2396" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#363D8C"/>
+            <stop offset="1" stop-color="#723390"/>
+        </linearGradient>
+        <linearGradient id="tca-cert-bg--default" x1="1.21858e-05" y1="290.929" x2="893.056" y2="237.458" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#048467"/>
+            <stop offset="0.338542" stop-color="#064871"/>
+            <stop offset="0.661458" stop-color="#6831A8"/>
+            <stop offset="1" stop-color="#8C384D"/>
+        </linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/index.ts b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/index.ts
new file mode 100644
index 000000000..e527ee9c4
--- /dev/null
+++ b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/index.ts
@@ -0,0 +1 @@
+export { default as CertificateBackground } from './CertificateBackground'