diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss
index faedcc9..9612e3a 100644
--- a/src/HorizontalStepper.scss
+++ b/src/HorizontalStepper.scss
@@ -43,8 +43,7 @@
 }
 
 .stepper-box {
-  background-color: white;
-  @include shadow(1);
+  background-color: transparent;
   min-height: 200px;
   .top {
     .stepper-button-top {
@@ -57,8 +56,8 @@
       align-items: center;
       justify-content: space-between;
       &.next {
-        border: 2px solid #3383c8;
-        color: #3383c8;
+        border: 2px solid #000;
+        color: #000;
         right: 1%;
         &.deactivated {
           border: 2px solid #cccccc !important;
@@ -67,6 +66,7 @@
         }
       }
       &.previous {
+        border: 2px solid #333333;
         color: #333333;
         left: 1%;
       }
@@ -120,9 +120,9 @@
         .circle {
           margin-bottom: 1rem;
           padding: 0 1rem;
-          background-color: white;
+          background-color: transparent;
           i {
-            background-color: #3383c8;
+            background-color: #000;
             color: #fff;
             border-radius: 100rem;
             padding: 1rem;
@@ -166,22 +166,24 @@
     }
     .stepper-button {
       padding: .5rem 1rem;
+      border-radius: 30px;
+      box-shadow: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      border-radius: 30px!important;
       &.next {
-        background-color: #3383c8;
+        background-color: #d80000;
         color: white;
-        @include shadow(1);
         &.deactivated {
           background-color: #cccccc !important;
           cursor: not-allowed !important;
         }
       }
       &.previous {
-        color: #333333;
+        color: #d80000;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue
index d3beaad..c1e2af6 100644
--- a/src/HorizontalStepper.vue
+++ b/src/HorizontalStepper.vue
@@ -30,10 +30,10 @@
             <transition :enter-active-class="enterAnimation" :leave-active-class="leaveAnimation" mode="out-in">
                 <!--If keep alive-->
                 <keep-alive v-if="keepAliveData">
-                    <component :is="steps[currentStep.index].component" :clickedNext="nextButton[currentStep.name]" @can-continue="proceed" @change-next="changeNextBtnValue" :current-step="currentStep"></component>
+                    <component :is="steps[currentStep.index].component" :isready="canContinue" :clickedNext="nextButton[currentStep.name]" @can-continue="proceed" @change-next="changeNextBtnValue" :current-step="currentStep"></component>
                 </keep-alive>
                 <!--If not show component and destroy it in each step change-->
-                <component v-else :is="steps[currentStep.index].component" :clickedNext="nextButton[currentStep.name]" @can-continue="proceed" @change-next="changeNextBtnValue" :current-step="currentStep"></component>
+                <component v-else :is="steps[currentStep.index].component" :isready="canContinue" :clickedNext="nextButton[currentStep.name]" @can-continue="proceed" @change-next="changeNextBtnValue" :current-step="currentStep"></component>
             </transition>
         </div>
         <div :class="['bottom', (currentStep.index > 0) ? '' : 'only-next']">
@@ -42,7 +42,7 @@
                 <span>{{ 'back' | translate(locale) }}</span>
             </div>
             <div :class="['stepper-button next', !canContinue ? 'deactivated' : '']" @click="nextStep()">
-                <span>{{ (finalStep) ? 'finish' : 'next' | translate(locale) }}</span>
+                <span>{{ (finalStep) ? lastButton : 'Next' }}</span>
                 <i class="material-icons">keyboard_arrow_right</i>
             </div>
         </div>
@@ -64,6 +64,10 @@ export default {
       type: String,
       default: "en"
     },
+    lastButton: {
+      type: String,
+      default: "Finish"
+    },
     topButtons: {
       type: Boolean,
       default: false
@@ -94,6 +98,10 @@ export default {
     reset: {
       type: Boolean,
       default: false
+    },
+    review: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -151,6 +159,17 @@ export default {
         if (!back) {
           this.$emit("completed-step", this.previousStep);
         }
+        
+        if(this.review) {
+            if(this.steps[index].completed) {
+              this.canContinue = true;
+            }
+        }
+        
+        if (!this.steps[index].required) {
+          this.canContinue = true;
+        } 
+        
       }
       this.$emit("active-step", this.currentStep);
     },
@@ -165,7 +184,13 @@ export default {
 
         this.activateStep(currentIndex);
       }
-      this.canContinue = false;
+      
+      if (!this.steps[this.currentStep.index].required) {
+          this.canContinue = true;
+      } else {
+          this.canContinue = false;
+      }
+      
       this.$forceUpdate();
     },
 
@@ -175,7 +200,11 @@ export default {
         this.nextStepAction()
       }
 
-      this.canContinue = false;
+      if (!this.steps[this.currentStep.index].required) {
+          this.canContinue = true;
+      } else {
+          this.canContinue = false;
+      }
 
       this.$emit("before-next-step", { currentStep: this.currentStep }, (next = true) => {
         this.canContinue = true;