3 files changed, 40 insertions, 6 deletions
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 326499125fc..218e37602dd 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -262,12 +262,7 @@ li.note {
 }
 
 .milestone {
-  &.milestone-closed {
-    background: $gray-light;
-  }
-
   .progress {
-    margin-bottom: 0;
     margin-top: 4px;
     box-shadow: none;
     background-color: $border-gray-light;
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 1d247671761..86de88729ee 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -45,4 +45,9 @@
   &.status-box-upcoming {
     background: $gl-text-color-secondary;
   }
+
+  &.status-box-milestone {
+    color: $gl-text-color;
+    background: $gray-darker;
+  }
 }
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index dba83e56d72..46437ce5841 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -3,8 +3,20 @@
 }
 
 .milestones {
+  padding: $gl-padding-8;
+  margin-top: $gl-padding-8;
+  border-radius: $border-radius-default;
+  background-color: $theme-gray-100;
+
   .milestone {
-    padding: 10px 16px;
+    border: 0;
+    padding: $gl-padding-top $gl-padding;
+    border-radius: $border-radius-default;
+    background-color: $white-light;
+
+    &:not(:last-child) {
+      margin-bottom: $gl-padding-4;
+    }
 
     h4 {
       font-weight: $gl-font-weight-bold;
@@ -13,6 +25,24 @@
     .progress {
       width: 100%;
       height: 6px;
+      margin-bottom: $gl-padding-4;
+    }
+
+    .milestone-progress {
+      a {
+        color: $gl-link-color;
+      }
+    }
+
+    .status-box {
+      font-size: $tooltip-font-size;
+      margin-top: 0;
+      margin-right: $gl-padding-4;
+
+      @include media-breakpoint-down(xs) {
+        line-height: unset;
+        padding: $gl-padding-4 $gl-input-padding;
+      }
     }
   }
 }
@@ -229,6 +259,10 @@
   }
 }
 
+.milestone-range {
+  color: $gl-text-color-tertiary;
+}
+
 @include media-breakpoint-down(xs) {
   .milestone-banner-text,
   .milestone-banner-link {