diff --git a/assets/css/src/components/_progressBar.scss b/assets/css/src/components/_progressBar.scss
index 8fecf8dba8..3ac65fd87e 100644
--- a/assets/css/src/components/_progressBar.scss
+++ b/assets/css/src/components/_progressBar.scss
@@ -1,7 +1,79 @@
-.mailpoet_form {
-    margin: 0 0 20px 0
+.mailpoet_progress {
+  background-color: #efefef;
+  height: 25px;
+  padding: 0;
+  width: 100%;
+  margin: 0;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  position: relative;
 }
 
-.mailpoet_form td {
-    vertical-align: top !important
+.mailpoet_progress_label {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  margin: 2px 0 0 0;
+}
+
+.mailpoet_progress_bar {
+  position: absolute;
+  display: inline-block;
+  height: 100%;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
+  background-color: #34c2e3;
+  background-image: linear-gradient(top, #34c2e3, darken(#34c2e3, 20%));
+}
+
+.mailpoet_progress_complete {
+  .mailpoet_progress_bar {
+    background-color: hsla(191, 78%, 80%, 1);
+    background-image: linear-gradient(top,  hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1));
+  }
+}
+
+.mailpoet_stepped_progress_bar {
+  margin: auto;
+  width: 400px;
+
+  &:before {
+    position: relative;
+    top: 9px;
+    content: "";
+    display: block;
+    height: 2px;
+    width: 100%;
+    border-radius: 2px;
+    background-color: #d8d8d8;
+    margin: auto;
+  }
+}
+
+.mailpoet_stepped_progress_bar_step {
+  display: inline-block;
+
+  &:before {
+    position: relative;
+    content: "";
+    display: block;
+    height: 14px;
+    width: 14px;
+    border-radius: 14px;
+    background-color: #d8d8d8;
+    margin: auto;
+  }
+
+  &.active {
+    &:before {
+      background-color: #979797;
+    }
+  }
+}
+
+@media screen and (max-width: 520px) {
+  .mailpoet_stepped_progress_bar {
+    width: 360px;
+  }
 }