diff --git a/dev-example/App.vue b/dev-example/App.vue
index 911c3ee..446a60b 100644
--- a/dev-example/App.vue
+++ b/dev-example/App.vue
@@ -10,6 +10,15 @@
                  @on-loading="setLoading"
                  @on-error="setError"
                  class="card" ref="wizard">
+      <template slot="step" scope="props">
+        <wizard-step :tab="props.tab"
+                     @click.native="props.navigateToTab(props.index)"
+                     :transition="props.transition"
+                     :key="props.tab.title"
+                     :index="props.index">
+        </wizard-step>
+      </template>
+
        <tab-content title="Personal details" icon="ti-user">
          My first tab
        </tab-content>
@@ -20,13 +29,6 @@
         <div v-if="error">
           {{error}}
         </div>
-      <template slot="footer" scope="props">
-        <div class="wizard-footer-right">
-          <wizard-button :style="props.fillButtonStyle">Cancel</wizard-button>
-          <wizard-button @click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
-        </div>
-
-      </template>
     </form-wizard>
   </div>
 </template>
diff --git a/dist/vue-form-wizard.js b/dist/vue-form-wizard.js
index b2e2333..25d1be4 100644
--- a/dist/vue-form-wizard.js
+++ b/dist/vue-form-wizard.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(a){if(i[a])return i[a].exports;var n=i[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,a){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:a})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=7)}([function(t,e){t.exports=function(t,e,i,a){var n,s=t=t||{},r=typeof t.default;"object"!==r&&"function"!==r||(n=t,s=t.default);var o="function"==typeof s?s.options:s;if(e&&(o.render=e.render,o.staticRenderFns=e.staticRenderFns),i&&(o._scopeId=i),a){var c=Object.create(o.computed||null);Object.keys(a).forEach(function(t){var e=a[t];c[t]=function(){return e}}),o.computed=c}return{esModule:n,exports:s,options:o}}},function(t,e,i){i(8);var a=i(0)(i(6),i(10),null,null);t.exports=a.exports},function(t,e,i){i(9);var a=i(0)(i(4),i(11),null,null);t.exports=a.exports},function(t,e,i){var a=i(0)(i(5),i(12),null,null);t.exports=a.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=i(1),n=i.n(a);e.default={name:"form-wizard",components:{WizardButton:n.a},props:{title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},hideButtons:{type:Boolean,default:!1},validateOnBack:Boolean,color:{type:String,default:"#e74c3c"},errorColor:{type:String,default:"#8b0000"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0,validator:function(t){return t>=0}}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},iconActiveStyle:function(){return{backgroundColor:this.color}},stepCheckedStyle:function(){return{borderColor:this.color}},errorStyle:function(){return{borderColor:this.errorColor,backgroundColor:this.errorColor}},stepTitleStyle:function(){return{color:this.tabs[this.activeTabIndex].validationError?this.errorColor:this.color}},isStepSquare:function(){return"square"===this.shape},isTabShape:function(){return"tab"===this.shape},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){return this.activeTabIndex>0?this.stepPercentage*(2*this.activeTabIndex+1):this.stepPercentage}},methods:{addTab:function(t){var e=this.$slots.default.indexOf(t.$vnode);this.tabs.splice(e,0,t),e<this.activeTabIndex+1&&(console.log("Changing tabs",e,this.activeTabIndex),this.maxStep=e,this.changeTab(this.activeTabIndex+1,e))},removeTab:function(t){var e=this.tabs,i=e.indexOf(t);i>-1&&(i===this.activeTabIndex&&(this.maxStep=this.activeTabIndex-1,this.changeTab(this.activeTabIndex,this.activeTabIndex-1)),i<this.activeTabIndex&&(this.maxStep=this.activeTabIndex-1,this.activeTabIndex=this.activeTabIndex-1),e.splice(i,1))},isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){var e=this;this.$emit("on-change",this.activeTabIndex,t);var i=t>this.activeTabIndex;if(t<=this.maxStep){var a=function(){e.changeTab(e.activeTabIndex,t)};i?this.beforeTabChange(this.activeTabIndex,a):(this.setValidationError(null),a())}},nextTab:function(){var t=this;this.$emit("on-change",this.activeTabIndex,this.activeTabIndex+1);var e=function(){t.activeTabIndex<t.tabCount-1?t.changeTab(t.activeTabIndex,t.activeTabIndex+1):(t.isLastStep=!0,t.$emit("finished"))};this.beforeTabChange(this.activeTabIndex,e)},prevTab:function(){var t=this;this.$emit("on-change",this.activeTabIndex,this.activeTabIndex-1);var e=function(){t.activeTabIndex>0&&(t.setValidationError(null),t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.validateOnBack?this.beforeTabChange(this.activeTabIndex,e):e()},finish:function(){var t=this,e=function(){t.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},setValidationError:function(t){this.tabs[this.activeTabIndex].validationError=t,this.$emit("on-error",t)},validateBeforeChange:function(t,e){var i=this;if(this.setValidationError(null),t.then&&"function"==typeof t.then)this.setLoading(!0),t.then(function(t){i.setLoading(!1);var a=!0===t;i.executeBeforeChange(a,e)}).catch(function(t){i.setLoading(!1),i.setValidationError(t)});else{var a=!0===t;this.executeBeforeChange(a,e)}},executeBeforeChange:function(t,e){this.$emit("on-validate",t,this.activeTabIndex),t?e():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange:function(t,e){if(!this.loading){var i=this.tabs[t];if(i&&void 0!==i.beforeChange){var a=i.beforeChange();this.validateBeforeChange(a,e)}else e()}},changeTab:function(t,e){var i=this.tabs[t],a=this.tabs[e];return i&&(i.active=!1),a&&(a.active=!0),this.activeTabIndex=e,this.checkStep(),this.tryChangeRoute(a),this.increaseMaxStep(),!0},tryChangeRoute:function(t){this.$router&&t.route&&this.$router.push(t.route)},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},checkRouteChange:function(t){var e=-1,i=this.tabs.find(function(i,a){var n=i.route===t;return n&&(e=a),n});if(i&&!i.active){var a=e>this.activeTabIndex;this.navigateToTab(e,a)}},deactivateTabs:function(){this.tabs.forEach(function(t){t.active=!1})},activateTab:function(t){this.deactivateTabs();var e=this.tabs[t];e.active=!0,this.tryChangeRoute(e)},activateTabAndCheckStep:function(t){this.activateTab(t),this.checkStep(),this.maxStep=this.startIndex,this.activeTabIndex=this.startIndex},initializeTabs:function(){this.tabs.length>0&&0===this.startIndex&&this.activateTab(this.activeTabIndex),this.startIndex<this.tabs.length?this.activateTabAndCheckStep(this.startIndex):window.console.warn("Prop startIndex set to "+this.startIndex+" is greater than the number of tabs - "+this.tabs.length+". Make sure that the starting index is less than the number of tabs registered")}},mounted:function(){this.initializeTabs()},watch:{"$route.path":function(t){this.checkRouteChange(t)}}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function},route:{type:[String,Object]}},data:function(){return{active:!1,validationError:null}},mounted:function(){this.$parent.addTab(this)},destroyed:function(){this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el),this.$parent.removeTab(this)}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=i(2),n=i.n(a),s=i(3),r=i.n(s),o=i(1),c=i.n(o);i.d(e,"FormWizard",function(){return n.a}),i.d(e,"TabContent",function(){return r.a}),i.d(e,"WizardButton",function(){return c.a});var u={install:function(t){t.component("form-wizard",n.a),t.component("tab-content",r.a),t.component("wizard-button",c.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(u),e.default=u},function(t,e){},function(t,e){},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("button",{staticClass:"wizard-btn btn-fill wizard-btn-wd",attrs:{type:"button"}},[t._t("default")],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"vue-form-wizard"},[i("div",{staticClass:"wizard-header"},[t._t("title",[i("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),i("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),i("div",{staticClass:"wizard-navigation"},[i("div",{staticClass:"wizard-progress-with-circle"},[i("div",{staticClass:"wizard-progress-bar",style:t.progressBarStyle})]),t._v(" "),i("ul",{staticClass:"wizard-nav wizard-nav-pills"},t._l(t.tabs,function(e,a){return i("li",{class:{active:e.active}},[i("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(a)}}},[i("div",{staticClass:"wizard-icon-circle",class:{checked:t.isChecked(a),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[t.isChecked(a)?t.stepCheckedStyle:{},e.validationError?t.errorStyle:{}]},[i("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?i("div",{staticClass:"wizard-icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[e.active?t.iconActiveStyle:{},e.validationError?t.errorStyle:{}]},[e.icon?i("i",{staticClass:"wizard-icon",class:e.icon}):i("i",{staticClass:"wizard-icon"},[t._v(t._s(a+1))])]):t._e(),t._v(" "),!e.active&&e.icon?i("i",{staticClass:"wizard-icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():i("i",{staticClass:"wizard-icon"},[t._v(t._s(a+1))])])],1),t._v(" "),i("span",{staticClass:"stepTitle",class:{active:e.active,has_error:e.validationError},style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),i("div",{staticClass:"wizard-tab-content"},[t._t("default")],2)]),t._v(" "),t.hideButtons?t._e():i("div",{staticClass:"wizard-card-footer clearfix"},[t._t("footer",[[t.displayPrevButton?i("span",{staticClass:"wizard-footer-left",on:{click:t.prevTab}},[t._t("prev",[i("wizard-button",{style:t.fillButtonStyle,attrs:{disabled:t.loading}},[t._v("\n            "+t._s(t.backButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?i("span",{staticClass:"wizard-footer-right",on:{click:t.finish}},[t._t("finish",[i("wizard-button",{style:t.fillButtonStyle},[t._v("\n            "+t._s(t.finishButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?t._e():i("span",{staticClass:"wizard-footer-right",on:{click:t.nextTab}},[t._t("next",[i("wizard-button",{style:t.fillButtonStyle,attrs:{disabled:t.loading}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)]],{nextTab:t.nextTab,prevTab:t.prevTab,activeTabIndex:t.activeTabIndex,isLastStep:t.isLastStep,fillButtonStyle:t.fillButtonStyle})],2)])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{directives:[{name:"show",rawName:"v-show",value:t.active,expression:"active"}],staticClass:"wizard-tab-container"},[t._t("default")],2)},staticRenderFns:[]}}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(i){if(a[i])return a[i].exports;var n=a[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var a={};return e.m=t,e.c=a,e.i=function(t){return t},e.d=function(t,a,i){e.o(t,a)||Object.defineProperty(t,a,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var a=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(a,"a",a),a},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=9)}([function(t,e){t.exports=function(t,e,a,i){var n,r=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(n=t,r=t.default);var o="function"==typeof r?r.options:r;if(e&&(o.render=e.render,o.staticRenderFns=e.staticRenderFns),a&&(o._scopeId=a),i){var c=Object.create(o.computed||null);Object.keys(i).forEach(function(t){var e=i[t];c[t]=function(){return e}}),o.computed=c}return{esModule:n,exports:r,options:o}}},function(t,e,a){a(10);var i=a(0)(a(7),a(13),null,null);t.exports=i.exports},function(t,e,a){a(12);var i=a(0)(a(8),a(16),null,null);t.exports=i.exports},function(t,e,a){a(11);var i=a(0)(a(5),a(14),null,null);t.exports=i.exports},function(t,e,a){var i=a(0)(a(6),a(15),null,null);t.exports=i.exports},function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=a(1),n=a.n(i),r=a(2),s=a.n(r);e.default={name:"form-wizard",components:{WizardButton:n.a,WizardStep:s.a},props:{title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},hideButtons:{type:Boolean,default:!1},validateOnBack:Boolean,color:{type:String,default:"#e74c3c"},errorColor:{type:String,default:"#8b0000"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0,validator:function(t){return t>=0}}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){return this.activeTabIndex>0?this.stepPercentage*(2*this.activeTabIndex+1):this.stepPercentage}},methods:{addTab:function(t){var e=this.$slots.default.indexOf(t.$vnode);this.tabs.splice(e,0,t),e<this.activeTabIndex+1&&(this.maxStep=e,this.changeTab(this.activeTabIndex+1,e))},removeTab:function(t){var e=this.tabs,a=e.indexOf(t);a>-1&&(a===this.activeTabIndex&&(this.maxStep=this.activeTabIndex-1,this.changeTab(this.activeTabIndex,this.activeTabIndex-1)),a<this.activeTabIndex&&(this.maxStep=this.activeTabIndex-1,this.activeTabIndex=this.activeTabIndex-1),e.splice(a,1))},navigateToTab:function(t){var e=this;this.$emit("on-change",this.activeTabIndex,t);var a=t>this.activeTabIndex;if(t<=this.maxStep){var i=function(){e.changeTab(e.activeTabIndex,t)};a?this.beforeTabChange(this.activeTabIndex,i):(this.setValidationError(null),i())}},nextTab:function(){var t=this;this.$emit("on-change",this.activeTabIndex,this.activeTabIndex+1);var e=function(){t.activeTabIndex<t.tabCount-1?t.changeTab(t.activeTabIndex,t.activeTabIndex+1):(t.isLastStep=!0,t.$emit("finished"))};this.beforeTabChange(this.activeTabIndex,e)},prevTab:function(){var t=this;this.$emit("on-change",this.activeTabIndex,this.activeTabIndex-1);var e=function(){t.activeTabIndex>0&&(t.setValidationError(null),t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.validateOnBack?this.beforeTabChange(this.activeTabIndex,e):e()},finish:function(){var t=this,e=function(){t.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},setValidationError:function(t){this.tabs[this.activeTabIndex].validationError=t,this.$emit("on-error",t)},validateBeforeChange:function(t,e){var a=this;if(this.setValidationError(null),t.then&&"function"==typeof t.then)this.setLoading(!0),t.then(function(t){a.setLoading(!1);var i=!0===t;a.executeBeforeChange(i,e)}).catch(function(t){a.setLoading(!1),a.setValidationError(t)});else{var i=!0===t;this.executeBeforeChange(i,e)}},executeBeforeChange:function(t,e){this.$emit("on-validate",t,this.activeTabIndex),t?e():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange:function(t,e){if(!this.loading){var a=this.tabs[t];if(a&&void 0!==a.beforeChange){var i=a.beforeChange();this.validateBeforeChange(i,e)}else e()}},changeTab:function(t,e){var a=this.tabs[t],i=this.tabs[e];return a&&(a.active=!1),i&&(i.active=!0),this.activeTabIndex=e,this.activateTabAndCheckStep(this.activeTabIndex),!0},tryChangeRoute:function(t){this.$router&&t.route&&this.$router.push(t.route)},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},checkRouteChange:function(t){var e=-1,a=this.tabs.find(function(a,i){var n=a.route===t;return n&&(e=i),n});if(a&&!a.active){var i=e>this.activeTabIndex;this.navigateToTab(e,i)}},deactivateTabs:function(){this.tabs.forEach(function(t){t.active=!1})},activateTab:function(t){this.deactivateTabs();var e=this.tabs[t];e.active=!0,e.checked=!0,this.tryChangeRoute(e)},activateTabAndCheckStep:function(t){this.activateTab(t),this.checkStep(),t>this.maxStep&&(this.maxStep=t),this.activeTabIndex=t},initializeTabs:function(){this.tabs.length>0&&0===this.startIndex&&this.activateTab(this.activeTabIndex),this.startIndex<this.tabs.length?this.activateTabAndCheckStep(this.startIndex):window.console.warn("Prop startIndex set to "+this.startIndex+" is greater than the number of tabs - "+this.tabs.length+". Make sure that the starting index is less than the number of tabs registered")}},mounted:function(){this.initializeTabs()},watch:{"$route.path":function(t){this.checkRouteChange(t)}}}},function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function},route:{type:[String,Object]}},data:function(){return{active:!1,validationError:null,checked:!1}},computed:{shape:function(){return this.$parent.shape},color:function(){return this.$parent.color},errorColor:function(){return this.$parent.errorColor}},mounted:function(){this.$parent.addTab(this)},destroyed:function(){this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el),this.$parent.removeTab(this)}}},function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={}},function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{tab:{type:Object,default:function(){}},transition:{type:String,default:""},index:{type:Number,default:0}},computed:{iconActiveStyle:function(){return{backgroundColor:this.tab.color}},stepCheckedStyle:function(){return{borderColor:this.tab.color}},errorStyle:function(){return{borderColor:this.tab.errorColor,backgroundColor:this.tab.errorColor}},stepTitleStyle:function(){return{color:this.tab.validationError?this.tab.errorColor:this.tab.color}},isStepSquare:function(){return"square"===this.tab.shape},isTabShape:function(){return"tab"===this.tab.shape}}}},function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=a(3),n=a.n(i),r=a(4),s=a.n(r),o=a(1),c=a.n(o),u=a(2),d=a.n(u);a.d(e,"FormWizard",function(){return n.a}),a.d(e,"TabContent",function(){return s.a}),a.d(e,"WizardButton",function(){return c.a}),a.d(e,"WizardStep",function(){return d.a});var l={install:function(t){t.component("form-wizard",n.a),t.component("tab-content",s.a),t.component("wizard-button",c.a),t.component("wizard-step",d.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(l),e.default=l},function(t,e){},function(t,e){},function(t,e){},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("button",{staticClass:"wizard-btn btn-fill wizard-btn-wd",attrs:{type:"button"}},[t._t("default")],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"vue-form-wizard"},[a("div",{staticClass:"wizard-header"},[t._t("title",[a("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),a("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),a("div",{staticClass:"wizard-navigation"},[a("div",{staticClass:"wizard-progress-with-circle"},[a("div",{staticClass:"wizard-progress-bar",style:t.progressBarStyle})]),t._v(" "),a("ul",{staticClass:"wizard-nav wizard-nav-pills"},[t._l(t.tabs,function(e,i){return t._t("step",[a("wizard-step",{key:e.title,attrs:{tab:e,transition:t.transition,index:i},nativeOn:{click:function(e){t.navigateToTab(i)}}})],{tab:e,index:i,navigateToTab:t.navigateToTab,transition:t.transition})})],2),t._v(" "),a("div",{staticClass:"wizard-tab-content"},[t._t("default")],2)]),t._v(" "),t.hideButtons?t._e():a("div",{staticClass:"wizard-card-footer clearfix"},[t._t("footer",[[t.displayPrevButton?a("span",{staticClass:"wizard-footer-left",on:{click:t.prevTab}},[t._t("prev",[a("wizard-button",{style:t.fillButtonStyle,attrs:{disabled:t.loading}},[t._v("\n            "+t._s(t.backButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?a("span",{staticClass:"wizard-footer-right",on:{click:t.finish}},[t._t("finish",[a("wizard-button",{style:t.fillButtonStyle},[t._v("\n            "+t._s(t.finishButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?t._e():a("span",{staticClass:"wizard-footer-right",on:{click:t.nextTab}},[t._t("next",[a("wizard-button",{style:t.fillButtonStyle,attrs:{disabled:t.loading}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)]],{nextTab:t.nextTab,prevTab:t.prevTab,activeTabIndex:t.activeTabIndex,isLastStep:t.isLastStep,fillButtonStyle:t.fillButtonStyle})],2)])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{directives:[{name:"show",rawName:"v-show",value:t.active,expression:"active"}],staticClass:"wizard-tab-container"},[t._t("default")],2)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("li",{class:{active:t.tab.active}},[a("a",[a("div",{staticClass:"wizard-icon-circle",class:{checked:t.tab.checked,square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[t.tab.checked?t.stepCheckedStyle:{},t.tab.validationError?t.errorStyle:{}]},[a("transition",{attrs:{name:t.transition,mode:"out-in"}},[t.tab.active?a("div",{staticClass:"wizard-icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[t.tab.active?t.iconActiveStyle:{},t.tab.validationError?t.errorStyle:{}]},[t.tab.icon?a("i",{staticClass:"wizard-icon",class:t.tab.icon}):a("i",{staticClass:"wizard-icon"},[t._v(t._s(t.index+1))])]):t._e(),t._v(" "),!t.tab.active&&t.tab.icon?a("i",{staticClass:"wizard-icon",class:t.tab.icon}):t._e(),t._v(" "),t.tab.active||t.tab.icon?t._e():a("i",{staticClass:"wizard-icon"},[t._v(t._s(t.index+1))])])],1),t._v(" "),a("span",{staticClass:"stepTitle",class:{active:t.tab.active,has_error:t.tab.validationError},style:t.tab.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(t.tab.title)+"\n          ")])])])},staticRenderFns:[]}}])});
\ No newline at end of file
diff --git a/dist/vue-form-wizard.min.css b/dist/vue-form-wizard.min.css
index 68a8029..639002a 100644
--- a/dist/vue-form-wizard.min.css
+++ b/dist/vue-form-wizard.min.css
@@ -1 +1 @@
-.vue-form-wizard .wizard-btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857;border-radius:4px}.vue-form-wizard .wizard-btn.disabled,.vue-form-wizard .wizard-btn[disabled],fieldset[disabled] .vue-form-wizard .wizard-btn{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);box-shadow:none}.vue-form-wizard *{box-sizing:border-box}.vue-form-wizard a{text-decoration:none}.vue-form-wizard .wizard-nav{margin-bottom:0;padding-left:0;list-style:none}.vue-form-wizard .wizard-nav>li{position:relative;display:block}.vue-form-wizard .wizard-nav>li>a{position:relative;display:block;padding:10px 15px}.vue-form-wizard .wizard-nav>li>a:focus,.vue-form-wizard .wizard-nav>li>a:hover{text-decoration:none;background-color:#eee}.vue-form-wizard .wizard-nav>li.disabled>a{color:#777}.vue-form-wizard .wizard-nav>li.disabled>a:focus,.vue-form-wizard .wizard-nav>li.disabled>a:hover{color:#777;text-decoration:none;background-color:transparent;cursor:not-allowed}.vue-form-wizard .wizard-progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);transition:width .6s ease}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn,.vue-form-wizard .wizard-btn{box-sizing:border-box;border-width:2px;background-color:transparent;font-size:14px;font-weight:600;padding:6px 12px}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn:focus,.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn:hover,.vue-form-wizard .wizard-btn:focus,.vue-form-wizard .wizard-btn:hover{outline:0!important}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn.wizard-btn-wd,.vue-form-wizard .wizard-btn-wd{min-width:140px}.vue-form-wizard .wizard-nav-pills{margin-top:0;position:relative;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.vue-form-wizard .wizard-nav-pills a,.vue-form-wizard .wizard-nav-pills li{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1}.vue-form-wizard .wizard-nav-pills>li>a,.vue-form-wizard .wizard-nav-pills a{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-form-wizard .wizard-nav-pills>li>a{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0 auto;color:rgba(0,0,0,.2);position:relative;top:3px;z-index:100}.vue-form-wizard .wizard-nav-pills>li>a:focus,.vue-form-wizard .wizard-nav-pills>li>a:hover{background-color:transparent;color:rgba(0,0,0,.2);outline:0!important;cursor:pointer}.vue-form-wizard .wizard-nav-pills>li.active>a,.vue-form-wizard .wizard-nav-pills>li.active>a:focus,.vue-form-wizard .wizard-nav-pills>li.active>a:hover{background-color:transparent;transition:font-size .2s linear}.vue-form-wizard .wizard-nav-pills>li.active>a .wizard-icon,.vue-form-wizard .wizard-nav-pills>li.active>a:focus .wizard-icon,.vue-form-wizard .wizard-nav-pills>li.active>a:hover .wizard-icon{color:#fff;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;transition:all .2s linear}.vue-form-wizard{padding-bottom:20px}.vue-form-wizard .is_error{border-color:#c84513!important}.vue-form-wizard .is_error .icon-container{background:#c84513!important}.vue-form-wizard .wizard-icon-circle{font-size:18px;border:3px solid #f3f2ee;border-radius:50%;font-weight:600;width:70px;height:70px;background-color:#fff;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center}.vue-form-wizard .wizard-icon-circle.square_shape{border-radius:0}.vue-form-wizard .wizard-icon-circle.tab_shape{width:100%;min-width:100px;height:40px;border:none;background-color:#f3f2ee;border-radius:0}.vue-form-wizard .wizard-icon-circle .wizard-icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:40%}.vue-form-wizard .wizard-icon-circle .wizard-icon-container.square_shape,.vue-form-wizard .wizard-icon-circle .wizard-icon-container.tab_shape{border-radius:0}.vue-form-wizard .wizard-icon-circle .wizard-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vue-form-wizard .wizard-tab-content{min-height:100px;padding:30px 20px 10px}.vue-form-wizard .wizard-header{padding:15px;position:relative;border-radius:3px 3px 0 0;z-index:3;text-align:center}.vue-form-wizard .wizard-title{color:#252422;font-weight:300;margin:0;text-align:center}.vue-form-wizard .category{font-size:14px;font-weight:400;color:#9a9a9a;margin-bottom:0;text-align:center}.vue-form-wizard .wizard-navigation .wizard-progress-with-circle{position:relative;top:40px;z-index:50;height:4px}.vue-form-wizard .wizard-navigation .wizard-progress-with-circle .wizard-progress-bar{box-shadow:none;transition:width .3s ease}.vue-form-wizard .clearfix:after{content:"";clear:both;display:table}.vue-form-wizard .wizard-card-footer{padding:0 20px}.vue-form-wizard .wizard-card-footer .wizard-footer-left{float:left}.vue-form-wizard .wizard-card-footer .wizard-footer-right{float:right}@media screen and (max-width:350px){.vue-form-wizard .wizard-card-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.vue-form-wizard .wizard-card-footer .wizard-footer-left,.vue-form-wizard .wizard-card-footer .wizard-footer-right{float:none;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vue-form-wizard .wizard-card-footer .wizard-footer-right button{margin-top:10px}}.fade-enter-active,.fade-leave-active{transition:opacity .15s}.fade-enter,.fade-leave-to{opacity:0}
\ No newline at end of file
+.vue-form-wizard .wizard-btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857;border-radius:4px}.vue-form-wizard .wizard-btn.disabled,.vue-form-wizard .wizard-btn[disabled],fieldset[disabled] .vue-form-wizard .wizard-btn{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);box-shadow:none}.vue-form-wizard *{box-sizing:border-box}.vue-form-wizard a{text-decoration:none}.vue-form-wizard .wizard-nav{margin-bottom:0;padding-left:0;list-style:none}.vue-form-wizard .wizard-nav>li{position:relative;display:block}.vue-form-wizard .wizard-nav>li>a{position:relative;display:block;padding:10px 15px}.vue-form-wizard .wizard-nav>li>a:focus,.vue-form-wizard .wizard-nav>li>a:hover{text-decoration:none;background-color:#eee}.vue-form-wizard .wizard-nav>li.disabled>a{color:#777}.vue-form-wizard .wizard-nav>li.disabled>a:focus,.vue-form-wizard .wizard-nav>li.disabled>a:hover{color:#777;text-decoration:none;background-color:transparent;cursor:not-allowed}.vue-form-wizard .wizard-progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);transition:width .6s ease}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn,.vue-form-wizard .wizard-btn{box-sizing:border-box;border-width:2px;background-color:transparent;font-size:14px;font-weight:600;padding:6px 12px}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn:focus,.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn:hover,.vue-form-wizard .wizard-btn:focus,.vue-form-wizard .wizard-btn:hover{outline:0!important}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn.wizard-btn-wd,.vue-form-wizard .wizard-btn-wd{min-width:140px}.vue-form-wizard .wizard-nav-pills{margin-top:0;position:relative;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.vue-form-wizard .wizard-nav-pills a,.vue-form-wizard .wizard-nav-pills li{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1}.vue-form-wizard .wizard-nav-pills>li>a,.vue-form-wizard .wizard-nav-pills a{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-form-wizard .wizard-nav-pills>li>a{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0 auto;color:rgba(0,0,0,.2);position:relative;top:3px;z-index:100}.vue-form-wizard .wizard-nav-pills>li>a:focus,.vue-form-wizard .wizard-nav-pills>li>a:hover{background-color:transparent;color:rgba(0,0,0,.2);outline:0!important;cursor:pointer}.vue-form-wizard .wizard-nav-pills>li.active>a,.vue-form-wizard .wizard-nav-pills>li.active>a:focus,.vue-form-wizard .wizard-nav-pills>li.active>a:hover{background-color:transparent;transition:font-size .2s linear}.vue-form-wizard .wizard-nav-pills>li.active>a .wizard-icon,.vue-form-wizard .wizard-nav-pills>li.active>a:focus .wizard-icon,.vue-form-wizard .wizard-nav-pills>li.active>a:hover .wizard-icon{color:#fff;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;transition:all .2s linear}.vue-form-wizard{padding-bottom:20px}.vue-form-wizard .is_error{border-color:#c84513!important}.vue-form-wizard .is_error .icon-container{background:#c84513!important}.vue-form-wizard .wizard-icon-circle{font-size:18px;border:3px solid #f3f2ee;border-radius:50%;font-weight:600;width:70px;height:70px;background-color:#fff;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center}.vue-form-wizard .wizard-icon-circle.square_shape{border-radius:0}.vue-form-wizard .wizard-icon-circle.tab_shape{width:100%;min-width:100px;height:40px;border:none;background-color:#f3f2ee;border-radius:0}.vue-form-wizard .wizard-icon-circle .wizard-icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:40%}.vue-form-wizard .wizard-icon-circle .wizard-icon-container.square_shape,.vue-form-wizard .wizard-icon-circle .wizard-icon-container.tab_shape{border-radius:0}.vue-form-wizard .wizard-icon-circle .wizard-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vue-form-wizard .wizard-tab-content{min-height:100px;padding:30px 20px 10px}.vue-form-wizard .wizard-header{padding:15px;position:relative;border-radius:3px 3px 0 0;z-index:3;text-align:center}.vue-form-wizard .wizard-title{color:#252422;font-weight:300;margin:0;text-align:center}.vue-form-wizard .category{font-size:14px;font-weight:400;color:#9a9a9a;margin-bottom:0;text-align:center}.vue-form-wizard .wizard-navigation .wizard-progress-with-circle{position:relative;top:40px;z-index:50;height:4px}.vue-form-wizard .wizard-navigation .wizard-progress-with-circle .wizard-progress-bar{box-shadow:none;transition:width .3s ease}.vue-form-wizard .clearfix:after{content:"";clear:both;display:table}.vue-form-wizard .wizard-card-footer{padding:0 20px}.vue-form-wizard .wizard-card-footer .wizard-footer-left{float:left}.vue-form-wizard .wizard-card-footer .wizard-footer-right{float:right}@media screen and (max-width:350px){.vue-form-wizard .wizard-card-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.vue-form-wizard .wizard-card-footer .wizard-footer-left,.vue-form-wizard .wizard-card-footer .wizard-footer-right{float:none;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vue-form-wizard .wizard-card-footer .wizard-footer-right button{margin-top:10px}}
\ No newline at end of file
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 501d697..6519571 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -12,31 +12,18 @@
              :style="progressBarStyle"></div>
       </div>
       <ul class="wizard-nav wizard-nav-pills">
-        <li v-for="(tab, index) in tabs" :class="{active:tab.active}">
-          <a href="" @click.prevent="navigateToTab(index)">
-            <div class="wizard-icon-circle"
-                 :class="{checked:isChecked(index),square_shape:isStepSquare, tab_shape:isTabShape}"
-                 :style="[isChecked(index)? stepCheckedStyle : {}, tab.validationError ? errorStyle : {}]">
-
-              <transition :name="transition" mode="out-in">
-                <div v-if="tab.active" class="wizard-icon-container"
-                     :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
-                     :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]">
-                  <i v-if="tab.icon" :class="tab.icon" class="wizard-icon"></i>
-                  <i v-else class="wizard-icon">{{index + 1}}</i>
-                </div>
-                <i v-if="!tab.active && tab.icon" :class="tab.icon" class="wizard-icon"></i>
-                <i v-if="!tab.active && !tab.icon" class="wizard-icon">{{index + 1}}</i>
-              </transition>
-
-            </div>
-            <span class="stepTitle"
-                  :class="{active:tab.active, has_error:tab.validationError}"
-                  :style="tab.active ? stepTitleStyle : {}">
-              {{tab.title}}
-            </span>
-          </a>
-        </li>
+        <slot name="step" v-for="(tab, index) in tabs"
+              :tab="tab"
+              :index="index"
+              :navigate-to-tab="navigateToTab"
+              :transition="transition">
+          <wizard-step :tab="tab"
+                       @click.native="navigateToTab(index)"
+                       :transition="transition"
+                       :key="tab.title"
+                       :index="index">
+          </wizard-step>
+        </slot>
       </ul>
       <div class="wizard-tab-content">
         <slot>
@@ -89,10 +76,12 @@
 </template>
 <script>
   import WizardButton from './WizardButton.vue'
+  import WizardStep from './WizardStep.vue'
   export default{
     name: 'form-wizard',
     components: {
-      WizardButton
+      WizardButton,
+      WizardStep
     },
     props: {
       title: {
@@ -181,34 +170,6 @@
           color: this.color
         }
       },
-      iconActiveStyle () {
-        return {
-          backgroundColor: this.color
-        }
-      },
-      stepCheckedStyle () {
-        return {
-          borderColor: this.color
-        }
-      },
-      errorStyle () {
-        return {
-          borderColor: this.errorColor,
-          backgroundColor: this.errorColor
-        }
-      },
-      stepTitleStyle () {
-        var isError = this.tabs[this.activeTabIndex].validationError
-        return {
-          color: isError ? this.errorColor : this.color
-        }
-      },
-      isStepSquare () {
-        return this.shape === 'square'
-      },
-      isTabShape () {
-        return this.shape === 'tab'
-      },
       fillButtonStyle () {
         return {
           backgroundColor: this.color,
@@ -234,7 +195,6 @@
         this.tabs.splice(index, 0, item)
         // if a step is added before the current one, go to it
         if (index < this.activeTabIndex + 1) {
-          console.log('Changing tabs', index, this.activeTabIndex)
           this.maxStep = index
           this.changeTab(this.activeTabIndex + 1, index)
         }
@@ -255,9 +215,6 @@
           tabs.splice(index, 1)
         }
       },
-      isChecked (index) {
-        return index <= this.maxStep
-      },
       navigateToTab (index) {
         this.$emit('on-change', this.activeTabIndex, index)
         let validate = index > this.activeTabIndex
@@ -363,9 +320,7 @@
           newTab.active = true
         }
         this.activeTabIndex = newIndex
-        this.checkStep()
-        this.tryChangeRoute(newTab)
-        this.increaseMaxStep()
+        this.activateTabAndCheckStep(this.activeTabIndex)
         return true
       },
       tryChangeRoute (tab) {
@@ -409,13 +364,16 @@
         this.deactivateTabs()
         let tab = this.tabs[index]
         tab.active = true
+        tab.checked = true
         this.tryChangeRoute(tab)
       },
       activateTabAndCheckStep (index) {
         this.activateTab(index)
         this.checkStep()
-        this.maxStep = this.startIndex
-        this.activeTabIndex = this.startIndex
+        if (index > this.maxStep) {
+          this.maxStep = index
+        }
+        this.activeTabIndex = index
       },
       initializeTabs () {
         if (this.tabs.length > 0 && this.startIndex === 0) {
@@ -440,13 +398,4 @@
 </script>
 <style lang="scss">
   @import "./../assets/wizard";
-
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .15s
-  }
-
-  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */
-  {
-    opacity: 0
-  }
 </style>
diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue
index 8315e60..90db118 100644
--- a/src/components/TabContent.vue
+++ b/src/components/TabContent.vue
@@ -34,7 +34,19 @@
     data () {
       return {
         active: false,
-        validationError: null
+        validationError: null,
+        checked: false
+      }
+    },
+    computed: {
+      shape () {
+        return this.$parent.shape
+      },
+      color () {
+        return this.$parent.color
+      },
+      errorColor () {
+        return this.$parent.errorColor
       }
     },
     mounted () {
diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue
new file mode 100644
index 0000000..a2d3de6
--- /dev/null
+++ b/src/components/WizardStep.vue
@@ -0,0 +1,79 @@
+<template>
+  <li :class="{active:tab.active}">
+    <a>
+      <div class="wizard-icon-circle"
+           :class="{checked: tab.checked,square_shape:isStepSquare, tab_shape:isTabShape}"
+           :style="[tab.checked ? stepCheckedStyle : {}, tab.validationError ? errorStyle : {}]">
+
+        <transition :name="transition" mode="out-in">
+          <div v-if="tab.active" class="wizard-icon-container"
+               :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
+               :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]">
+            <i v-if="tab.icon" :class="tab.icon" class="wizard-icon"></i>
+            <i v-else class="wizard-icon">{{index + 1}}</i>
+          </div>
+          <i v-if="!tab.active && tab.icon" :class="tab.icon" class="wizard-icon"></i>
+          <i v-if="!tab.active && !tab.icon" class="wizard-icon">{{index + 1}}</i>
+        </transition>
+
+      </div>
+      <span class="stepTitle"
+            :class="{active:tab.active, has_error:tab.validationError}"
+            :style="tab.active ? stepTitleStyle : {}">
+              {{tab.title}}
+            </span>
+    </a>
+  </li>
+</template>
+<script>
+  export default {
+    props: {
+      tab: {
+        type: Object,
+        default: () => {
+
+        }
+      },
+      transition: {
+        type: String,
+        default: ''
+      },
+      index: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      iconActiveStyle () {
+        return {
+          backgroundColor: this.tab.color
+        }
+      },
+      stepCheckedStyle () {
+        return {
+          borderColor: this.tab.color
+        }
+      },
+      errorStyle () {
+        return {
+          borderColor: this.tab.errorColor,
+          backgroundColor: this.tab.errorColor
+        }
+      },
+      stepTitleStyle () {
+        let isError = this.tab.validationError
+        return {
+          color: isError ? this.tab.errorColor : this.tab.color
+        }
+      },
+      isStepSquare () {
+        return this.tab.shape === 'square'
+      },
+      isTabShape () {
+        return this.tab.shape === 'tab'
+      }
+    }
+  }
+</script>
+<style>
+</style>
diff --git a/src/index.js b/src/index.js
index 71d5a0f..bb1b74d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,13 @@
 import FormWizard from './components/FormWizard.vue'
 import TabContent from './components/TabContent.vue'
 import WizardButton from './components/WizardButton.vue'
+import WizardStep from './components/WizardStep.vue'
 const VueFormWizard = {
   install (Vue) {
     Vue.component('form-wizard', FormWizard)
     Vue.component('tab-content', TabContent)
     Vue.component('wizard-button', WizardButton)
+    Vue.component('wizard-step', WizardStep)
   }
 }
 // Automatic installation if Vue has been added to the global scope.
@@ -17,5 +19,6 @@ export default VueFormWizard
 export {
   FormWizard,
   TabContent,
-  WizardButton
+  WizardButton,
+  WizardStep
 }