diff --git a/lms/djangoapps/learner_dashboard/views.py b/lms/djangoapps/learner_dashboard/views.py
index dd0beedeef..360ff6d368 100644
--- a/lms/djangoapps/learner_dashboard/views.py
+++ b/lms/djangoapps/learner_dashboard/views.py
@@ -43,7 +43,7 @@ def program_details(request, program_uuid):
         'show_dashboard_tabs': True,
         'nav_hidden': True,
         'disable_courseware_js': True,
-        'uses_pattern_library': True,
+        'uses_bootstrap': True,
     }
 
     return render_to_response('learner_dashboard/program_details.html', context)
diff --git a/lms/static/sass/_build-learner-dashboard.scss b/lms/static/sass/_build-learner-dashboard.scss
index 5b1a1ad16e..1974891d52 100644
--- a/lms/static/sass/_build-learner-dashboard.scss
+++ b/lms/static/sass/_build-learner-dashboard.scss
@@ -12,6 +12,4 @@
 @import 'elements/progress-circle';
 
 // Various View Styling
-@import 'views/course-entitlements';
-@import 'views/program-details';
 @import 'views/program-list';
diff --git a/lms/static/sass/bootstrap/_legacy.scss b/lms/static/sass/bootstrap/_legacy.scss
index eb6077a131..98a9cbb573 100644
--- a/lms/static/sass/bootstrap/_legacy.scss
+++ b/lms/static/sass/bootstrap/_legacy.scss
@@ -40,8 +40,7 @@ $grid-breakpoints-lg: 992px !default;
 // Wrap grids with grid-container.
 @mixin grid-container() {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   justify-content: flex-start;
   align-items: flex-start;
   box-sizing: border-box;
@@ -109,3 +108,41 @@ $shadow-l1: rgba(0, 0, 0, 0.1) !default;
 $shadow-l2: rgba(0, 0, 0, 0.05) !default;
 $shadow-d1: rgba(0, 0, 0, 0.4) !default;
 $shadow-d2: rgba($black, 0.6) !default;
+
+$primary-dark: rgba(6, 86, 131, 100) !default;
+$primary-dark1: mix($black, $blue, 20%) !default;
+$primary-dark2: desaturate($blue, 15%) !default;
+$primary-base: rgba(0, 117, 180, 100) !default;
+$primary-accent: rgba(41, 145, 195, 100) !default;
+
+$gray-dark: rgba(17, 17, 17, 100) !default;
+$gray-base: rgba(65, 65, 65, 100) !default;
+$gray-light1: rgb(252, 252, 252) !default;
+$gray-light2: mix($white, $gray, 60%) !default;
+$gray-light3: mix($white, $gray, 80%) !default;
+
+// ----------------------------
+// #COLORS- Bootstrap-style
+// ----------------------------
+
+$state-success-text: $black !default;
+$state-success-bg: #dff0d8 !default;
+$state-success-border: darken($state-success-bg, 5%) !default;
+
+$state-info-text: #31708f !default;
+$state-info-text-link: #245269 !default;
+$state-info-bg: #d9edf7 !default;
+$state-info-border: darken($state-info-bg, 7%) !default;
+
+$state-warning-text: $black !default;
+$state-warning-bg: #fcf8e3 !default;
+$state-warning-border: darken($state-warning-bg, 5%) !default;
+
+$state-danger-text: $black !default;
+$state-danger-bg: #f2dede !default;
+$state-danger-border: darken($state-danger-bg, 5%) !default;
+
+// logo colors
+$micromasters-color: #005585 !default;
+$zebra-stripe-color: rgb(249, 250, 252) !default;
+$divider-color: rgb(226, 231, 236) !default;
diff --git a/lms/static/sass/bootstrap/elements/_banners.scss b/lms/static/sass/bootstrap/elements/_banners.scss
new file mode 100644
index 0000000000..86f6d6a8ca
--- /dev/null
+++ b/lms/static/sass/bootstrap/elements/_banners.scss
@@ -0,0 +1,127 @@
+$full-width-banner-img-height: 260px !default;
+$full-width-banner-img-width: 1140px !default;
+$full-width-banner-margin: 20px;
+
+.full-width-banner {
+  position: relative;
+
+  .banner-background-wrapper {
+    height: $full-width-banner-img-height;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    background: $black;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: $black;
+      opacity: 0.65;
+
+      @include media-breakpoint-up(md) {
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .banner-background-image {
+    height: $full-width-banner-img-height;
+
+    @include media-breakpoint-up($full-width-banner-img-width) {
+      height: auto;
+      width: 100%;
+    }
+  }
+
+  .banner-content {
+    position: absolute;
+    top: 0;
+    left: $full-width-banner-margin;
+    right: $full-width-banner-margin;
+  }
+}
+
+.page-banner {
+  max-width: map-get($grid-breakpoints, xl);
+  margin: 0 auto;
+
+  .user-messages {
+    padding-top: $baseline;
+
+    // Hack: force override the global important rule
+    // that courseware links don't have an underline.
+    a:hover {
+      color: $link-color;
+      text-decoration: underline !important;
+    }
+
+    .user-messages-ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        margin: 5px 0;
+      }
+    }
+  }
+
+  .alert {
+    display: flex;
+    padding: $baseline;
+    border: 1px solid;
+
+    &:not(:last-child) {
+      margin-bottom: $baseline / 2;
+    }
+
+    .icon-alert {
+      @include margin-right($baseline);
+    }
+
+    .message-actions {
+      @include margin-left($baseline);
+    }
+
+    &.alert-info {
+      color: $state-info-text;
+      background-color: $state-info-bg;
+      border-color: $state-info-border;
+      box-shadow: none;
+      line-height: initial;
+
+      a,
+      a:visited,
+      .btn-link {
+        color: $state-info-text-link;
+        font-weight: bold;
+        border-color: transparent;
+      }
+    }
+
+    &.alert-success {
+      color: $state-success-text;
+      background-color: $state-success-bg;
+      border-color: $state-success-border;
+      box-shadow: none;
+    }
+
+    &.alert-warning {
+      color: $state-warning-text;
+      background-color: $state-warning-bg;
+      border-color: $state-warning-border;
+      box-shadow: none;
+    }
+
+    &.alert-danger {
+      color: $state-danger-text;
+      background-color: $state-danger-bg;
+      border-color: $state-danger-border;
+      box-shadow: none;
+    }
+  }
+}
diff --git a/lms/static/sass/bootstrap/elements/_progress-circle.scss b/lms/static/sass/bootstrap/elements/_progress-circle.scss
new file mode 100644
index 0000000000..fc3329a10e
--- /dev/null
+++ b/lms/static/sass/bootstrap/elements/_progress-circle.scss
@@ -0,0 +1,67 @@
+$progress-title-color: $primary-dark1 !default;
+$progress-complete-color: $primary-dark2 !default;
+$progress-incomplete-color: $gray-light2 !default;
+$progress-complete-number-color: $primary-dark1 !default;
+$progress-incomplete-number-color: $gray-600 !default;
+$progress-number-label-color: $gray-base !default;
+
+.program-progress {
+  width: 300px;
+  margin: 0 auto 30px;
+
+  @include media-breakpoint-up(md) {
+    margin-left: 0;
+  }
+}
+
+.progress-heading {
+  color: $progress-title-color;
+  text-align: center;
+  margin-bottom: 0;
+  font: {
+    size: 1.1em;
+    weight: 700;
+  }
+}
+
+.progress-circle-wrapper {
+  position: relative;
+  margin-top: -20px;
+  width: 300px;
+  height: 300px;
+
+  .progress-label {
+    position: absolute;
+    width: 100%;
+    top: 92px;
+    text-align: center;
+  }
+
+  .numbers {
+    font-size: 3em;
+    color: $progress-incomplete-number-color;
+
+    .complete {
+      color: $progress-complete-number-color;
+    }
+  }
+
+  .label {
+    font: {
+      size: 1.1em;
+      weight: 600;
+    }
+
+    color: $progress-number-label-color;
+  }
+}
+
+.progress-circle {
+  .complete {
+    stroke: $progress-complete-color;
+  }
+
+  .incomplete {
+    stroke: $progress-incomplete-color;
+  }
+}
diff --git a/lms/static/sass/bootstrap/lms-main.scss b/lms/static/sass/bootstrap/lms-main.scss
index 404aba2d2a..4553e51b33 100644
--- a/lms/static/sass/bootstrap/lms-main.scss
+++ b/lms/static/sass/bootstrap/lms-main.scss
@@ -18,6 +18,8 @@ $static-path: '../..';
 @import 'course/layout/reset_deadlines';
 @import 'shared/modal';
 @import 'shared/help-tab';
+@import './elements/banners';
+@import './elements/progress-circle';
 
 // Features
 @import 'features/bookmarks';
@@ -33,6 +35,8 @@ $static-path: '../..';
 // Individual Pages
 @import "views/program-marketing-page";
 @import "views/entitlement-support-page";
+@import "views/course-entitlements";
+@import "views/program-details";
 
 // Responsive Design
 @import '../header';
diff --git a/lms/static/sass/elements/_banners.scss b/lms/static/sass/elements/_banners.scss
index 52b59592b0..90147ec1c9 100644
--- a/lms/static/sass/elements/_banners.scss
+++ b/lms/static/sass/elements/_banners.scss
@@ -59,18 +59,17 @@ $full-width-banner-margin: 20px;
       text-decoration: underline !important;
     }
 
-  .user-messages-ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+    .user-messages-ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
 
-    li {
-      margin: 5px 0;
+      li {
+        margin: 5px 0;
+      }
     }
   }
 
-  }
-
   .alert {
     display: flex;
     padding: $baseline;
diff --git a/lms/static/sass/views/_course-entitlements.scss b/lms/static/sass/views/_course-entitlements.scss
index 03a9e31df4..6eb3d85bc5 100644
--- a/lms/static/sass/views/_course-entitlements.scss
+++ b/lms/static/sass/views/_course-entitlements.scss
@@ -120,9 +120,8 @@
     padding-top: $baseline/2;
 
     .action-header,
-    .action-controls .session-select{
+    .action-controls .session-select {
       font-size: $font-size-sm;
-
     }
   }
 }
diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss
index 880ea6f7b9..6d786588f1 100644
--- a/lms/static/sass/views/_program-details.scss
+++ b/lms/static/sass/views/_program-details.scss
@@ -4,7 +4,7 @@
 
 // +local variables/utilities:
 // ----------------------
-$btn-color-primary: palette(primary, dark);
+$btn-color-primary: $primary-dark;
 
 .program-details {
   .content-wrapper {
@@ -44,7 +44,7 @@ $btn-color-primary: palette(primary, dark);
   .breadcrumb-wrapper {
     padding: $full-width-banner-margin;
 
-    @media (min-width: $bp-screen-xl) {
+    @include media-breakpoint-up(xl) {
       padding-left: 0;
     }
   }
@@ -60,21 +60,21 @@ $btn-color-primary: palette(primary, dark);
     position: relative;
     font-size: font-size(x-small);
     line-height: line-height(x-small);
-    color: palette(grayscale, dark);
+    color: $gray-dark;
 
     &.active {
-      color: palette(grayscale, dark);
+      color: $gray-dark;
     }
   }
 
   .crumb-link {
     font-size: inherit;
     line-height: inherit;
-    color: palette(primary, base);
+    color: $primary-base;
 
     &:hover,
     &:focus {
-      color: palette(grayscale, black);
+      color: $gray-dark;
       text-decoration: underline;
     }
   }
@@ -102,7 +102,7 @@ $btn-color-primary: palette(primary, dark);
 
 .program-details-wrapper {
   .program-details-header {
-    background-color: $light-gray4;
+    background-color: $gray-light1;
     display: flex;
     color: black;
     font-family: 'Open Sans';
@@ -110,7 +110,7 @@ $btn-color-primary: palette(primary, dark);
     flex-wrap: wrap;
     padding: 40px 10px 35px;
 
-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
       padding: {
         left: 30px;
         right: 30px;
@@ -127,7 +127,7 @@ $btn-color-primary: palette(primary, dark);
     .hd-1 {
       font-size: 1.5em;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         font-size: 2.375em;
       }
     }
@@ -143,8 +143,10 @@ $btn-color-primary: palette(primary, dark);
       }
 
       /* IE11 CSS styles */
-      @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-        height: 50px;
+      @include media-breakpoint-up(md) {
+        @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+          height: 50px;
+        }
       }
     }
 
@@ -152,7 +154,7 @@ $btn-color-primary: palette(primary, dark);
       fill: $micromasters-color;
       width: 200px;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         width: 250px;
       }
     }
@@ -161,7 +163,7 @@ $btn-color-primary: palette(primary, dark);
       fill: xseries-color;
       width: 150px;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         width: 200px;
       }
     }
@@ -170,7 +172,7 @@ $btn-color-primary: palette(primary, dark);
       fill: $professional-certificate-color;
       width: 250px;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         width: 300px;
       }
     }
@@ -179,11 +181,11 @@ $btn-color-primary: palette(primary, dark);
       margin: 0;
       display: block;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         width: 70%;
       }
 
-      @media (min-width: $bp-screen-lg) {
+      @include media-breakpoint-up(lg) {
         width: 75%;
       }
 
@@ -197,24 +199,24 @@ $btn-color-primary: palette(primary, dark);
       text-align: center;
       display: flex;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         display: block;
       }
 
       .heading {
         font-family: $font-family-sans-serif;
         font-weight: bold;
-        color: palette(primary, dark);
+        color: $primary-dark;
         font-size: 0.9375em;
         margin-top: auto;
         margin-bottom: auto;
 
-        @media (min-width: $bp-screen-md) {
+        @include media-breakpoint-up(md) {
           @include margin-right(10px 0 0 0);
         }
       }
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         margin: initial;
         width: 30%;
 
@@ -226,7 +228,7 @@ $btn-color-primary: palette(primary, dark);
         }
       }
 
-      @media (min-width: $bp-screen-lg) {
+      @include media-breakpoint-up(lg) {
         width: 25%;
       }
     }
@@ -237,7 +239,7 @@ $btn-color-primary: palette(primary, dark);
     margin-bottom: 30px;
     padding: 30px 10px;
 
-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
       @include float(left);
       padding: {
         left: 30px;
@@ -248,7 +250,7 @@ $btn-color-primary: palette(primary, dark);
       position: relative;
     }
 
-    @media (min-width: $bp-screen-lg) {
+    @include media-breakpoint-up(lg) {
       width: calc(100% - 510px);
       max-width: 700px;
     }
@@ -261,7 +263,7 @@ $btn-color-primary: palette(primary, dark);
   .course-list-heading {
     font-family: $font-family-sans-serif;
     font-weight: bold;
-    color: palette(primary, dark);
+    color: $primary-dark;
     font-size: 0.9375em;
     line-height: normal;
     padding-bottom: 5px;
@@ -287,7 +289,7 @@ $btn-color-primary: palette(primary, dark);
       font-size: 0.9375em;
       width: 310px;
 
-      @media (min-width: $bp-screen-sm) {
+      @include media-breakpoint-up(sm) {
         width: auto;
       }
 
@@ -312,7 +314,7 @@ $btn-color-primary: palette(primary, dark);
       font-family: $font-family-sans-serif;
       font-weight: 600;
       font-size: 1.3em;
-      color: palette(grayscale, base);
+      color: $gray-base;
       margin-bottom: 5px;
       line-height: normal;
     }
@@ -326,6 +328,7 @@ $btn-color-primary: palette(primary, dark);
     .view-course-button {
       background: $btn-color-primary;
       border-color: $btn-color-primary;
+      color: $white;
       height: 37px;
       padding: 7px 18.5px 0;
       width: auto;
@@ -335,11 +338,13 @@ $btn-color-primary: palette(primary, dark);
       margin-top: 5px;
 
       /* IE11 CSS styles */
-      @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-        @include float(right);
+      @include media-breakpoint-up(lg) {
+        @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+          @include float(right);
+        }
       }
 
-      @media (min-width: $bp-screen-lg) {
+      @include media-breakpoint-up(lg) {
         margin-top: 0;
       }
     }
@@ -347,20 +352,22 @@ $btn-color-primary: palette(primary, dark);
     .enroll-button {
       width: 100%;
 
-      @media (min-width: $bp-screen-sm) {
+      @include media-breakpoint-up(sm) {
         width: initial;
         margin-bottom: 0;
         margin-top: 17px;
       }
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         width: initial;
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      button, .enroll-course-button {
+      button,
+      .enroll-course-button {
         background-color: $btn-color-primary;
+        color: $white;
         height: 37px;
         width: 128px;
         padding: 0;
@@ -374,8 +381,10 @@ $btn-color-primary: palette(primary, dark);
         }
 
         /* IE11 CSS styles */
-        @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-          @include float(right);
+        @include media-breakpoint-up(md) {
+          @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+            @include float(right);
+          }
         }
       }
 
@@ -390,17 +399,17 @@ $btn-color-primary: palette(primary, dark);
       font-family: $font-family-sans-serif;
       font-weight: bold;
       font-size: 0.9375em;
-      color: palette(grayscale, base);
+      color: $gray-base;
       margin-top: 6px;
       display: block;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         display: inline;
       }
     }
 
     .run-select-container {
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         margin-top: 8px;
         display: flex;
         flex-wrap: wrap;
@@ -415,23 +424,26 @@ $btn-color-primary: palette(primary, dark);
   }
 
   .upgrade-button {
-    background: palette(success, text);
-    border-color: palette(success, text);
+    background: theme-color("success");
+    border-color: theme-color("success");
+    color: $white;
     border-radius: 0;
     padding: 7px;
     text-align: center;
     font-size: 0.9375em;
 
     /* IE11 CSS styles */
-    @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      @include float(right);
+    @include media-breakpoint-up(md) {
+      @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        @include float(right);
+      }
     }
 
     &.complete-program {
       margin: 10px 15px 10px 5px;
       align-self: flex-start;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         align-self: flex-end;
       }
 
@@ -446,7 +458,7 @@ $btn-color-primary: palette(primary, dark);
     width: 100%;
     padding: 15px;
 
-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
       height: auto;
     }
 
@@ -455,7 +467,7 @@ $btn-color-primary: palette(primary, dark);
       flex-direction: column;
       justify-content: space-between;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         flex-wrap: wrap;
       }
     }
@@ -472,7 +484,7 @@ $btn-color-primary: palette(primary, dark);
       width: 100%;
       float: none;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         display: table-cell;
         vertical-align: top;
         float: left;
@@ -484,25 +496,25 @@ $btn-color-primary: palette(primary, dark);
         margin: 0;
 
         .course-title-link,
-        .course-title-link:visited{
-          color: palette(primary, base);
+        .course-title-link:visited {
+          color: $primary-base;
           text-decoration: underline;
         }
       }
 
       .run-period,
       .info-expires-at {
-        color: palette(grayscale, base);
+        color: $gray-base;
         font-size: 0.9375em;
       }
 
       .course-text .enrolled {
-        color: palette(grayscale, base);
+        color: $gray-base;
       }
     }
 
     .course-meta-container {
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         display: table;
         width: 100%;
       }
@@ -513,14 +525,14 @@ $btn-color-primary: palette(primary, dark);
     }
 
     .course-actions {
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         width: 100%;
         text-align: right;
         float: right;
       }
 
       .course-enroll-view {
-        @media (min-width: $bp-screen-md) {
+        @include media-breakpoint-up(md) {
           text-align: right;
         }
       }
@@ -533,14 +545,14 @@ $btn-color-primary: palette(primary, dark);
 
     .final-grade {
       .grade-header {
-        color: palette(grayscale, base);
+        color: $gray-base;
         font-weight: bold;
       }
 
       .grade-display {
         padding-right: 15px;
         font-size: 1.5em;
-        color: palette(primary, accent);
+        color: $primary-accent;
       }
     }
 
@@ -551,7 +563,7 @@ $btn-color-primary: palette(primary, dark);
         width: 100%;
         margin: 5px 0;
 
-        @media (min-width: $bp-screen-md) {
+        @include media-breakpoint-up(md) {
           margin-left: auto;
           width: initial;
         }
@@ -561,11 +573,11 @@ $btn-color-primary: palette(primary, dark);
         padding-top: 0;
         width: initial;
 
-        @media (min-width: $bp-screen-sm) {
+        @include media-breakpoint-up(sm) {
           width: 300px;
         }
 
-        @media (min-width: $bp-screen-md) {
+        @include media-breakpoint-up(md) {
           width: initial;
         }
 
@@ -573,36 +585,35 @@ $btn-color-primary: palette(primary, dark);
           font-family: $font-family-sans-serif;
           font-weight: bold;
           font-size: 0.9375em;
-          color: palette(grayscale, base);
+          color: $gray-base;
           display: block;
 
-          @media (min-width: $bp-screen-sm) {
+          @include media-breakpoint-up(sm) {
             display: inline;
           }
         }
 
         .price {
-          color: palette(success, text);
+          color: theme-color("success");
           font-weight: bold;
         }
       }
-
     }
 
     .certificate-status {
       .fa-check-circle {
-        color: palette(success, text);
+        color: theme-color("success");
       }
 
       .card-msg {
         font-family: $font-family-sans-serif;
         font-weight: bold;
         font-size: 0.9375em;
-        color: palette(grayscale, base);
+        color: $gray-base;
       }
 
       .certificate-status-msg {
-        color: palette(grayscale, base);
+        color: $gray-base;
         font-size: 0.9375em;
       }
     }
@@ -612,12 +623,12 @@ $btn-color-primary: palette(primary, dark);
       padding-top: 5px;
       width: 300px;
 
-      @media (min-width: $bp-screen-sm) {
+      @include media-breakpoint-up(sm) {
         padding-top: 10px;
         width: 500px;
       }
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         width: initial;
       }
     }
@@ -625,7 +636,7 @@ $btn-color-primary: palette(primary, dark);
     .expired-icon {
       @include float(left);
 
-      color: palette(primary, dark);
+      color: $primary-dark;
     }
 
     .expired-text {
@@ -650,7 +661,7 @@ $btn-color-primary: palette(primary, dark);
     font-size: 0.9375em;
     width: $baseline*15.5;
 
-    @media (min-width: $bp-screen-sm) {
+    @include media-breakpoint-up(sm) {
       width: auto;
     }
 
@@ -662,7 +673,7 @@ $btn-color-primary: palette(primary, dark);
   .divider-heading {
     font-family: $font-family-sans-serif;
     font-weight: bold;
-    color: palette(primary, dark);
+    color: $primary-dark;
     font-size: 0.9375em;
     line-height: normal;
     padding-bottom: $baseline*0.25;
@@ -686,11 +697,12 @@ $btn-color-primary: palette(primary, dark);
     @include margin-left($baseline*0.75);
 
     width: $baseline*15.5;
-    border-bottom: 1px solid $gray-l4;
+    border-bottom: 1px solid $gray-light3;
 
-    @media (min-width: $bp-screen-sm) {
-        width: auto;
+    @include media-breakpoint-up(sm) {
+      width: auto;
     }
+
     .pathway-info {
       margin: 15px 0;
       font-size: 0.9375em;
@@ -707,7 +719,7 @@ $btn-color-primary: palette(primary, dark);
     border-bottom: none;
   }
 
-  @media (min-width: $bp-screen-md) {
+  @include media-breakpoint-up(md) {
     @include float(right);
 
     width: $baseline*15;
@@ -715,7 +727,7 @@ $btn-color-primary: palette(primary, dark);
     position: relative;
   }
 
-  @media (min-width: $bp-screen-lg) {
+  @include media-breakpoint-up(lg) {
     width: $baseline*22.5;
 
     .program-progress {
@@ -731,11 +743,11 @@ $btn-color-primary: palette(primary, dark);
 .certificate-heading {
   margin-bottom: 10px;
 
-  @media (min-width: $bp-screen-md) {
+  @include media-breakpoint-up(md) {
     @include margin-right(30px);
   }
 
-  @media (min-width: $bp-screen-lg) {
+  @include media-breakpoint-up(lg) {
     @include margin-left(10px);
     @include margin-right(0);
   }
@@ -748,7 +760,7 @@ $btn-color-primary: palette(primary, dark);
   &:focus,
   &:hover {
     .program-cert {
-      border-color: $blue-d1;
+      border-color: $primary-dark1;
     }
   }
 }
@@ -757,11 +769,11 @@ $btn-color-primary: palette(primary, dark);
   width: 100%;
   border: 1px solid $divider-color;
 
-  @media (min-width: $bp-screen-md) {
+  @include media-breakpoint-up(md) {
     width: calc(100% - 30px);
   }
 
-  @media (min-width: $bp-screen-lg) {
+  @include media-breakpoint-up(lg) {
     width: 100%;
   }
 }
@@ -779,7 +791,7 @@ $btn-color-primary: palette(primary, dark);
     .image-link {
       flex: 0 0 100px;
 
-      @media (min-width: $bp-screen-md) {
+      @include media-breakpoint-up(md) {
         flex: 0 0 120px;
       }
     }
@@ -794,11 +806,11 @@ $btn-color-primary: palette(primary, dark);
       weight: 600;
     }
 
-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
       font-size: 0.9em;
     }
 
-    @media (min-width: $bp-screen-lg) {
+    @include media-breakpoint-up(lg) {
       font-size: 1.1em;
     }
 
@@ -806,21 +818,21 @@ $btn-color-primary: palette(primary, dark);
     &:focus,
     &:hover {
       .sample-cert {
-        border-color: $blue-d1;
+        border-color: $primary-dark1;
       }
     }
   }
 
   .sample-cert {
     width: 120px;
-    border: 3px solid $gray-l3;
+    border: 3px solid $gray-light2;
     border-radius: 5px;
 
-    @media (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
       width: 100px;
     }
 
-    @media (min-width: $bp-screen-lg) {
+    @include media-breakpoint-up(lg) {
       width: 120px;
     }
   }
diff --git a/lms/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss
index 89f27dc85c..d278f465de 100644
--- a/lms/static/sass/views/_program-list.scss
+++ b/lms/static/sass/views/_program-list.scss
@@ -37,7 +37,6 @@
       width: 100%;
       text-align: center;
       padding: 10px;
-
     }
 
     .advertise-message {
diff --git a/lms/templates/learner_dashboard/program_details.html b/lms/templates/learner_dashboard/program_details.html
index 37b1151dd5..b18c48d151 100644
--- a/lms/templates/learner_dashboard/program_details.html
+++ b/lms/templates/learner_dashboard/program_details.html
@@ -1,5 +1,5 @@
-## Override the default styles_version to the Pattern Library version (version 2)
-<%! main_css = "style-learner-dashboard" %>
+
+<%! main_css = "css/bootstrap/lms-main.css" %>
 
 <%page expression_filter="h"/>
 <%inherit file="../main.html" />