diff --git a/lms/static/sass/views/_track_selection.scss b/lms/static/sass/views/_track_selection.scss
new file mode 100644
index 0000000000..3654a5116e
--- /dev/null
+++ b/lms/static/sass/views/_track_selection.scss
@@ -0,0 +1,243 @@
+@import "extends";
+
+.container-fluid {
+    max-width: 946px;
+}
+
+.col-6 {
+    width: calc((100% - 30px) / 2);
+    margin: 0 auto;
+}
+
+.verification-process h3 {
+    color: $gray-700;
+    font-size: 1.4rem;
+    text-align: center;
+    font-weight: 700;
+    line-height: 1.8rem;
+}
+
+.track-selection-choice li {
+    margin-bottom: 26px;
+}
+
+.track-selection-audit {
+    background-color: white;
+    border: 1px solid $gray-500;
+    position: relative;
+    float: right;
+}
+
+.track-selection-certificate {
+    float: left;
+}
+
+.track-selection-certificate .choice-bullets li:last-child {
+    margin-bottom: 2rem;
+}
+
+.certificate-container {
+    background-color: $info-100;
+    border: 1px solid $gray-500;
+    height: auto;
+    position: relative;
+}
+
+.trophy-icon {
+    padding: 10px;
+    color: $info-100;
+    position: absolute;
+}
+
+.upgrade-button {
+    text-align: center
+}
+
+.upgrade-button button {
+    background: $primary-500;
+    width: 90%;
+    height: 40px;
+    font-size: 16px;
+    box-shadow: none;
+    border-radius: 0px;
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+#track_selection_upgrade:hover {
+    background: $primary-300;
+    border-color: transparent;
+    color: #fff;
+}
+
+.audit-button {
+    text-align: center;
+}
+
+.audit-button button {
+    color: $primary-500;
+    width: 90%;
+    height: 40px;
+    font-size: 16px;
+    box-shadow: none;
+    border-radius: 0px;
+    border-color: $light-300;
+    background: white;
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+#track_selection_audit:hover {
+    background: $primary-500;
+    border-color: $primary-500;
+    color: #fff;
+    border-radius: 0px;
+}
+
+.certificate-container-bottom {
+    border: 1px solid $gray-500;
+    display: flex;
+    margin-top: -1px;
+    padding: 18px;
+    float: left;
+}
+
+.extra-verified-info {
+    float: right;
+    font-size: 14px;
+    margin-left: 12px;
+    line-height: 24px;
+}
+
+.choice-bullets {
+    padding: 0 3rem 0 2rem;
+    line-height: 24px;
+    font-size: 14px;
+}
+
+a:not(.btn), a:visited:not(.btn) {
+    color: $gray-700;
+}
+
+.choice-bullets li {
+    color: $gray-700;
+}
+
+.choice-title {
+    width: 100%;
+    display: inline-block;
+}
+
+.choice-title h4 {
+    text-align: center;
+    font-weight: 700;
+    color: $gray-700;
+    line-height: 28px;
+    font-size: 22px;
+}
+
+.price-display {
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px;
+    float: right;
+    margin: 0.75rem;
+    color: $gray-700;
+}
+
+.triangle-overlay {
+    border-color: $primary-700 transparent transparent $primary-700;
+    border-style: solid;
+    border-width: 45px;
+    height: 0;
+    width: 0;
+    position: absolute;
+}
+
+.info-icon {
+    margin-left: 0.1rem;
+    width: 1rem;
+    vertical-align: middle;
+}
+
+.collapsible-item {
+    letter-spacing: -0.3px;
+}
+
+.collapsible {
+    display: none;
+    text-decoration: underline;
+    color: $primary-500;
+    cursor: pointer;
+}
+
+.popover-icon {
+    color: $primary-500;
+    position: relative;
+}
+
+.popover {
+    visibility: hidden;
+    width: 132px;
+    background-color: #fff;
+    color: $gray-700;
+    border: 1px solid #B9BABE;
+    border-radius: 6px;
+    text-align: left;
+    padding: 0.8rem 1rem;
+    position: absolute;
+    z-index: 1;
+    top: -22px;
+    left: 178%;
+}
+
+.popover a {
+    text-decoration: underline;
+}
+
+.visible {
+    visibility: visible;
+}
+
+.popover:before {
+    position: absolute;
+    display: inline-block;
+    left: -18px;
+    top: 22px;
+    content: '';
+    border-width: 9px;
+    border-style: solid;
+    border-color: transparent #B9BABE transparent transparent;
+}
+
+.popover:after {
+    position: absolute;
+    display: inline-block;
+    border-width: 7px;
+    border-style: solid;
+    border-color: transparent #fff transparent transparent;
+    left: -14px;
+    top: 24px;
+    content: '';
+}
+
+@media (max-width: map-get($grid-breakpoints, 'sm')) {
+    .choice-bullets {
+        padding: 0 2rem 0 1rem;
+    }
+
+    .collapsible {
+        margin-bottom: 1.3rem;
+    }
+}
+
+@media (max-width: map-get($grid-breakpoints, 'md')) {
+    .col-6 {
+        width: 100%;
+    }
+
+    .audit-button button {
+        margin-top: 0;
+    }
+}
+  
\ No newline at end of file
diff --git a/lms/templates/course_modes/track_selection.html b/lms/templates/course_modes/track_selection.html
new file mode 100644
index 0000000000..9708ccddfc
--- /dev/null
+++ b/lms/templates/course_modes/track_selection.html
@@ -0,0 +1,189 @@
+<%page expression_filter="h"/>
+<%inherit file="../main.html" />
+<%namespace name='static' file='/static_content.html'/>
+<%!
+from django.utils.translation import ugettext as _
+from openedx.core.djangolib.markup import HTML, Text
+from django.urls import reverse
+from openedx.core.djangolib.js_utils import js_escaped_string
+%>
+
+<%namespace name='static' file='/static_content.html'/>
+<%block name="bodyclass">step-select-track verification-process</%block>
+<%block name="pagetitle">
+    ${_("Enroll In {course_name} | Upgrade Now").format(course_name=course_name)}
+</%block>
+
+<%block name="js_extra">
+    <script type="text/javascript">
+        // popover icon toggle
+        $(function(){
+            $('body').click(function (e) {
+                e.stopPropagation();
+                $('.popover').css({"visibility": "hidden", "opacity": 0});
+            });
+            $('.popover-icon').click(function(e){
+                e.stopPropagation();
+                if ($('.popover').css("visibility") == "hidden" || $('.popover').css("visibility") == "" ) {
+                    $('.popover').css({"visibility":"visible", "opacity": 1});   
+                } else {
+                    $('.popover').css({"visibility":"hidden", "opacity": 0});   
+                }
+            });
+        });
+
+        // resize window
+        var onresize = function(e) {
+            width = e.target.outerWidth;
+            if(width <= 768) {
+                $('.collapsible-item').css({"display":"none"});
+                $('.collapsible').css({"display":"block"});
+            };
+        }
+        window.addEventListener("resize", onresize);
+
+        // responsive: show more 
+        $(function(){
+            if($(window).width() <= 768) {
+            $('.collapsible-item').css({"display":"none"});
+            $('.collapsible').css({"display":"block"});
+            };
+        });
+        $(function(){
+            $('.collapsible').click(function(){
+                $('.collapsible').css({"display":"none"});
+            $('.collapsible-item').css({"display":"list-item"});
+            }); 
+        });
+    </script>
+</%block>
+<%static:webpack entry="Currency">
+    new Currency();
+</%static:webpack>
+
+<%block name="header_extras">
+    <link rel="stylesheet" type="text/css" href="${static.url('paragon/static/paragon.min.css')}" />
+</%block>
+
+<%block name="content">
+    <div id="currency_data" value="${currency_data}"></div>
+
+    <div class="container-md container-fluid mx-auto">
+        <section class="wrapper m-4 m-md-0">
+            <div class="wrapper-register-choose wrapper-content-main">
+                <article class="register-choose content-main">
+                    <header class="page-header content-main">
+                        <h3 class="py-3">
+                            ${_("Choose a path for your course in")} ${_(course_name)}
+                        </h3>
+                    </header>
+
+                    <form class="form-register-choose mb-4 mt-0" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
+                        % if "verified" in modes:
+                        <div class="track-selection-choice track-selection-certificate col-6 mb-5">
+                            <div class="certificate-container">
+                                <div class="triangle-overlay"></div>
+                                <span class="trophy-icon">
+                                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M26.6667 3.33333H23.3333V0H6.66667V3.33333H3.33333C1.5 3.33333 0 4.83333 0 6.66667V8.33333C0 12.5833 3.2 16.05 7.31667 16.5667C8.36667 19.0667 10.6167 20.95 13.3333 21.5V26.6667H6.66667V30H23.3333V26.6667H16.6667V21.5C19.3833 20.95 21.6333 19.0667 22.6833 16.5667C26.8 16.05 30 12.5833 30 8.33333V6.66667C30 4.83333 28.5 3.33333 26.6667 3.33333ZM3.33333 8.33333V6.66667H6.66667V13.0333C4.73333 12.3333 3.33333 10.5 3.33333 8.33333ZM26.6667 8.33333C26.6667 10.5 25.2667 12.3333 23.3333 13.0333V6.66667H26.6667V8.33333Z" fill="#EFF8FA"/>
+                                    </svg>
+                                </span>
+                                <p class="price-display">${currency_symbol}${min_price} ${currency}</p>
+                                <div class="choice-title"><h4>${_("Earn a certificate")}</h4></div>
+                                <div class="choice-bullets">
+                                    <ul>
+                                        <li>${Text(_("Showcase a {link_start}verified certificate{link_end} of completion on your resumé to advance your career")).format(
+                                            link_start=HTML('<b><u><a class="verified" href="https://www.edx.org/verified-certificate" target="_blank">'),
+                                            link_end=HTML('</a></u></b>'),
+                                        )}</li>
+                                        <li>${Text(_("Get {start_bold}access to all course activities{end_bold}, including both graded and non-graded assignments, while the course is running")).format(
+                                            start_bold=HTML('<b>'),
+                                            end_bold=HTML('</b>'),
+                                        )}</li>
+                                        <div class="collapsible">${_("Show more")}</div>
+                                        <li class="collapsible-item">
+                                            ${Text(_("{start_bold}Full access{end_bold} to course content and materials, even after the course ends")).format(
+                                                start_bold=HTML('<b>'),
+                                                end_bold=HTML('</b>'),
+                                            )}
+                                            <span class="popover-icon">
+                                                <i class="fa fa-question-circle" aria-hidden="true"></i>
+                                                <span class="popover">
+                                                    ${Text(_("{link_start}Learn more{link_end} about course access")).format(
+                                                        link_start=HTML('<u><a href="https://support.edx.org/hc/en-us/articles/360013426573-What-are-the-differences-between-audit-free-and-verified-paid-courses-" target="_blank">'),
+                                                        link_end=HTML('</a></u>'),
+                                                    )}
+                                                </span>
+                                            </span>
+                                        </li>
+                                        <li class="collapsible-item">${Text(_("Support our {start_bold}non-profit mission{end_bold} to increase access to high-quality education for everyone, everywhere")).format(
+                                            start_bold=HTML('<b>'),
+                                            end_bold=HTML('</b>'),
+                                        )}</li>
+                                    </ul>
+                                </div>
+                                <ul class="list-actions">
+                                    <li class="action action-select upgrade-button">
+                                        <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
+                                            <button id="track_selection_upgrade" type="submit" name="verified_mode" class="mt-2">
+                                                <span>${_('Upgrade Now')}</span>
+                                            </buton>
+                                    </li>
+                                </ul>
+                                <%static:require_module_async module_name="js/commerce/track_ecommerce_events" class_name="TrackECommerceEvents">
+                                var upgradeLink = $("#track_selection_upgrade");
+
+                                TrackECommerceEvents.trackUpsellClick(upgradeLink, 'track_selection', {
+                                    pageName: "track_selection",
+                                    linkType: "button",
+                                    linkCategory: "(none)"
+                                });
+
+                                </%static:require_module_async>
+                            </div>
+                            <div class="certificate-container-bottom">
+                                <span class="mt-1"><i class="fa fa-lightbulb-o fa-lg" aria-hidden="true"></i></span>
+                                <div class="extra-verified-info">${Text(_("Studies show that those who choose this option are  {start_bold}more engaged and motivated{end_bold} to complete their courses")).format(
+                                    start_bold=HTML('<b>'),
+                                    end_bold=HTML('</b>'),
+                                )}</div>
+                            </div>
+                        </div>
+                        % endif
+                        <div class="track-selection-choice track-selection-audit col-6">
+                            <p class="float-right m-3"><b>${_("FREE")}</b></p>
+                            <div class="choice-title"><h4>${_("Access this course")}</h4></div>
+                            <div class="choice-bullets">
+                                <ul>
+                                    <li>${Text(_("Get temporary access to  {start_bold}non-graded{end_bold} activities, including discussion forums and non-graded assignments")).format(
+                                        start_bold=HTML('<b>'),
+                                        end_bold=HTML('</b>'),
+                                    )}</li>
+                                    <li>${Text(_("Get {start_bold}temporary access{end_bold} to the course material, including videos and readings")).format(
+                                        start_bold=HTML('<b>'),
+                                        end_bold=HTML('</b>'),
+                                    )}</li>
+                                    % if audit_access_deadline:
+                                    <li>${_("Access expires and all progress will be lost on")} ${_(audit_access_deadline)}</li>
+                                    % else:
+                                    <li>${_("Access expires and all progress will be lost")}</li>
+                                    % endif
+                                </ul>
+                            </div>
+                            <ul class="list-actions audit-button">
+                                <li class="action action-select">
+                                    <input type="hidden" name="contribution" />
+                                    <button id="track_selection_audit" type="submit" name="audit_mode">
+                                        <span>${_('Continue')}</span>
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
+                    </form>
+                </article>
+            </div>
+        </section>
+    </div>
+</%block>