diff --git a/package.json b/package.json
index cb675eadc..5cd91a712 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@vue/cli-plugin-eslint": "^3.2.0",
     "@vue/cli-service": "^3.2.0",
     "axios": "^0.19.0",
+    "vuelidate": "^0.7.4",
     "babel-eslint": "^10.0.1",
     "chart.js": "2.7.3",
     "eslint": "^5.8.0",
diff --git a/src/main.js b/src/main.js
index 8cef1b397..32b73d225 100644
--- a/src/main.js
+++ b/src/main.js
@@ -78,7 +78,9 @@ import 'prismjs/themes/prism-coy.css';
 import '@fullcalendar/core/main.min.css';
 import '@fullcalendar/daygrid/main.min.css';
 import '@fullcalendar/timegrid/main.min.css';
+import Vuelidate from 'vuelidate';
 
+Vue.use(Vuelidate);
 Vue.use(ToastService);
 
 Vue.directive('tooltip', Tooltip);
diff --git a/src/views/steps/ConfirmationDemo.vue b/src/views/steps/ConfirmationDemo.vue
old mode 100644
new mode 100755
index b01d2b1ec..7ed9245de
--- a/src/views/steps/ConfirmationDemo.vue
+++ b/src/views/steps/ConfirmationDemo.vue
@@ -1,12 +1,91 @@
 <template>
     <div class="stepsdemo-content">
-        <i class="pi pi-fw pi-check" />
-        <h1>Confirmation Component Content</h1>
+        <Card>
+            <template slot="title">
+                <div class="p-grid p-fluid p-justify-between wizard-header">
+                    <div class="p-col-8 wizard-header-content">
+                        <p class="card-header-message">Confirmation</p>
+                    </div>
+                    <div class="p-col-2 wizard-header-steps">
+                        <p class="card-header-message">Step 4/4</p>
+                    </div>
+                </div>
+            </template>
+            <template slot="content">
+                <div class="p-grid p-fluid wizard-content wizard-confirmation">
+                    <div class="p-col-12 p-md-3" style="max-width: 170px;">
+                        <label class="wizard-input-label">Your Name</label>
+                        <p>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</p>
+                    </div>
+                    <div class="p-col-12 p-md-3" style="max-width: 75px;">
+                        <label class="wizard-input-label">Your Age</label>
+                        <p>{{formData.age ? formData.age : '-'}}</p>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content wizard-confirmation">
+                    <div class="p-col-12 p-md-3" style="max-width: 170px;">
+                        <label class="wizard-input-label">Seat Class</label>
+                        <p>{{formData.class ? formData.class : '-'}}</p>
+                    </div>
+                    <div class="p-col-12 p-md-3" style="max-width: 130px;">
+                        <label class="wizard-input-label">Vagon Number</label>
+                        <p>{{formData.vagon ? formData.vagon : '-'}}</p>
+                    </div>
+                    <div class="p-col-12 p-md-2" style="max-width: 53px;">
+                        <label class="wizard-input-label">Seat</label>
+                        <p>{{formData.seat ? formData.seat : '-'}}</p>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content wizard-confirmation">
+                    <div class="p-col-12 p-md-4" style="max-width: 170px;">
+                        <label class="wizard-input-label">Cardholder Name</label>
+                        <p>{{formData.cardholderName ? formData.cardholderName : '-'}}</p>
+                    </div>
+                    <div class="p-col-12 p-md-3" style="max-width: 160px;">
+                        <label class="wizard-input-label">Cardholder Number</label>
+                        <p>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</p>
+                    </div>
+                    <div class="p-col-12 p-md-1" style="max-width: 53px;">
+                        <label class="wizard-input-label">Date</label>
+                        <p>{{formData.date ? formData.date : '-'}}</p>
+                    </div>
+                    <div class="p-col-12 p-md-1" style="max-width: 53px;">
+                        <label class="wizard-input-label">CVV</label>
+                        <p>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</p>
+                    </div>
+                </div>
+            </template>
+            <template slot="footer">
+                <div class="p-grid p-fluid p-justify-between wizard-footer">
+                    <div class="p-col-4 wizard-footer-back-button">
+                        <Button label="Back" class="disabled-button" @click="prevPage()" />
+                    </div>
+                    <div class="p-col-6 wizard-footer-complete-button">
+                        <Button label="Complete" @click="complete()" />
+                    </div>
+                </div>
+            </template>
+        </Card>
     </div>
 </template>
 
 <script>
 export default {
+    props: {
+        formData: Object
+    },
+    data() {
+        return {
 
+        }
+    },
+    methods: {
+        prevPage() {
+            this.$emit('prevPage', {pageIndex: 3});
+        },
+        complete() {
+            this.$emit('complete');
+        }
+    },
 }
 </script>
\ No newline at end of file
diff --git a/src/views/steps/PaymentDemo.vue b/src/views/steps/PaymentDemo.vue
old mode 100644
new mode 100755
index 311ee96e8..89a59e720
--- a/src/views/steps/PaymentDemo.vue
+++ b/src/views/steps/PaymentDemo.vue
@@ -1,12 +1,81 @@
 <template>
     <div class="stepsdemo-content">
-        <i class="pi pi-fw pi-money-bill" />
-        <h1>Payment Component Content</h1>
+        <Card>
+            <template slot="title">
+                <div class="p-grid p-fluid p-justify-between wizard-header">
+                    <div class="p-col-8 wizard-header-content">
+                        <p class="card-header-message">Payment Information</p>
+                    </div>
+                    <div class="p-col-2 wizard-header-steps">
+                        <p class="card-header-message">Step 3/4</p>
+                    </div>
+                </div>
+            </template>
+            <template slot="content">
+                <div class="p-grid p-fluid wizard-content-summary">
+                    <div class="p-col-12">
+                        <p>Complete your registration with Payment</p>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content">
+                    <div class="p-col-12 p-md-6" style="max-width: 391px;">
+                        <p class="wizard-input-header">Cardholder Name</p>
+                        <InputText type="text" v-model="cardholderName" />
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content">
+                    <div class="p-col-12 p-md-4" style="max-width: 252px">
+                        <p class="wizard-input-header">Cardholder Number</p>
+                        <InputMask mask="9999-9999-9999-9999" v-model="cardholderNumber" />
+                    </div>
+                    <div class="p-col-12 p-md-1" style="max-width: 69px">
+                        <p class="wizard-input-header">Date</p>
+                        <InputMask mask="99/99" v-model="date" />
+                    </div>
+                    <div class="p-col-12 p-md-1" style="max-width: 69px">
+                        <p class="wizard-input-header">CVV</p>
+                        <InputMask mask="999" v-model="cvv" />
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content" style="margin-top: .3em">
+                    <div class="p-col-12">
+                            <Checkbox id="remember" v-model="remember" :binary="true" />
+                            <label for="remember" class="p-checkbox-label">Save credit card information for future usage</label>
+                    </div>
+                </div>
+            </template>
+            <template slot="footer">
+                <div class="p-grid p-fluid p-justify-between wizard-footer" style="margin-top: .5em">
+                    <div class="p-col-4 wizard-footer-back-button">
+                        <Button label="Back" class="disabled-button" @click="prevPage()" />
+                    </div>
+                    <div class="p-col-4 wizard-footer-next-button">
+                        <Button label="Next" @click="nextPage()" />
+                    </div>
+                </div>
+            </template>
+        </Card>
     </div>
 </template>
 
 <script>
 export default {
-
+    data () {
+        return {
+            cardholderName:'',
+            cardholderNumber:'',
+            date:'',
+            cvv:'',
+            remember:false
+        }
+    },
+    methods: {
+        nextPage() {
+            this.$emit('nextPage', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
+        },
+        prevPage() {
+            this.$emit('prevPage', {pageIndex: 2});
+        }
+    }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue
old mode 100644
new mode 100755
index c61f705e7..4cb84d6bb
--- a/src/views/steps/PersonalDemo.vue
+++ b/src/views/steps/PersonalDemo.vue
@@ -1,12 +1,97 @@
 <template>
     <div class="stepsdemo-content">
-        <i class="pi pi-fw pi-user" />
-        <h1>Personal Component Content</h1>
+        <Card>
+            <template slot="title">
+                <div class="p-grid p-fluid p-justify-between wizard-header">
+                    <div class="p-col-8 wizard-header-content">
+                        <p class="card-header-message">Personal Information</p>
+                    </div>
+                    <div class="p-col-2 wizard-header-steps">
+                        <p class="card-header-message">Step 1/4</p>
+                    </div>
+                </div>
+            </template>
+            <template slot="content">
+                <div class="p-grid p-fluid wizard-content-summary">
+                    <div class="p-col-12">
+                        <p>Please enter your information and proceed to the next step</p>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content">
+                    <div class="p-col-12 p-md-4" style="padding-bottom: 0px; max-width: 235px;">
+                        <p>Your Name</p>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content">
+                    <div class="p-col-12 p-md-3" style="max-width: 176px;">
+                        <InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" />
+                        <label class="wizard-input-label">First</label>
+                        <ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px">Firstname is required.</ValidationMessage>
+                    </div>
+                    <div class="p-col-12 p-md-3" style="max-width: 176px;">
+                        <InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" />
+                        <label class="wizard-input-label">Last</label>
+                        <ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px">Lastname is required.</ValidationMessage>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content">
+                    <div class="p-col-12 p-md-3" style="max-width: 176px;">
+                            <p class="wizard-input-header">Your Age</p>
+                            <InputText v-model="$v.age.$model" :class="{'p-error':$v.age.$error && submitted}" />
+                            <ValidationMessage v-show="$v.age.$invalid && submitted" style="margin-top: .5em; font-size: 12px">Age should be number.</ValidationMessage>
+                    </div>
+                </div>
+            </template>
+            <template slot="footer">
+                <div class="p-grid p-fluid p-justify-between wizard-footer">
+                    <div class="p-col-4 wizard-footer-back-button">
+                        <Button label="Back" :disabled="true" class="disabled-button" />
+                    </div>
+                    <div class="p-col-4 wizard-footer-next-button">
+                        <Button label="Next" @click="nextPage(!$v.$invalid)" />
+                    </div>
+                </div>
+            </template>
+        </Card>
     </div>
 </template>
 
 <script>
-export default {
+import {required, minLength, integer} from 'vuelidate/lib/validators';
 
+export default {
+    data () {
+        return {
+            firstname: '',
+            lastname: '',
+            age: '',
+            submitted: false
+        }
+    },
+    validations: {
+        firstname: {
+            required
+        },
+        lastname: {
+            required
+        },
+        age: {
+            integer
+        }
+    },
+    methods: {
+        nextPage(isFormValid) {
+            this.submitted = true;
+
+            if (!isFormValid) {
+                return;
+            }
+
+            this.$emit('nextPage', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
+        }
+    }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
old mode 100644
new mode 100755
index 5c5d76e6b..2a173debf
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@@ -1,12 +1,100 @@
 <template>
     <div class="stepsdemo-content">
-        <i class="pi pi-fw pi-ticket" />
-        <h1>Seat Component Content</h1>
+        <Card>
+            <template slot="title">
+                <div class="p-grid p-fluid p-justify-between wizard-header">
+                    <div class="p-col-8 wizard-header-content">
+                        <p class="card-header-message">Seat Information</p>
+                    </div>
+                    <div class="p-col-2 wizard-header-steps">
+                        <p class="card-header-message">Step 2/4</p>
+                    </div>
+                </div>
+            </template>
+            <template slot="content">
+                <div class="p-grid p-fluid wizard-content-summary">
+                    <div class="p-col-12">
+                        <p>Please pick your seat and proceed to the payment</p>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content">
+                    <div class="p-col-12 p-md-4" style="padding-bottom: 0px; max-width: 235px;">
+                        <p>Class and Vagon</p>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content">
+                    <div class="p-col-12 p-md-3" style="max-width: 176px;">
+                        <Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
+                        <label class="wizard-input-label">Class</label>
+                    </div>
+                    <div class="p-col-12 p-md-3" style="max-width: 176px;">
+                        <Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
+                        <label class="wizard-input-label">Vagon</label>
+                    </div>
+                </div>
+                <div class="p-grid p-fluid wizard-content">
+                    <div class="p-col-12 p-md-3" style="max-width: 176px;">
+                        <p class="wizard-input-header">Seat</p>
+                        <Dropdown v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
+                    </div>
+                </div>
+            </template>
+            <template slot="footer">
+                <div class="p-grid p-fluid p-justify-between wizard-footer">
+                    <div class="p-col-4 wizard-footer-back-button">
+                        <Button label="Back" class="disabled-button" @click="prevPage()" />
+                    </div>
+                    <div class="p-col-4 wizard-footer-next-button">
+                        <Button label="Next" @click="nextPage()" />
+                    </div>
+                </div>
+            </template>
+        </Card>
     </div>
 </template>
 
 <script>
-export default {
+import {required, minLength, integer} from 'vuelidate/lib/validators';
 
+export default {
+    data () {
+        return {
+            selectedClass: '',
+            classes: [
+                {name: 'First Class', code: 'A', factor: 1},
+                {name: 'Second Class', code: 'B', factor: 2},
+                {name: 'Third Class', code: 'C', factor: 3}
+            ],
+            vagons: [],
+            selectedVagon: '',
+            seats: [],
+            selectedSeat: ''
+        }
+    },
+    methods: {
+        setVagons(event) {
+            if (this.selectedClass && event.value) {
+                this.vagons = [];
+                this.seats = [];
+                for(let i = 1; i < 3 * event.value.factor; i++) {
+                    this.vagons.push({vagon: i+event.value.code, type: event.value.name, factor: event.value.factor});
+                }
+            }            
+        },
+        setSeats(event) {
+            if (this.selectedVagon && event.value) {
+                this.seats = [];
+                for(let i = 1; i < 10 * event.value.factor; i++) {
+                    this.seats.push({seat: i, type: event.value.type});
+                }
+            } 
+        },
+        nextPage() {
+            this.$emit('nextPage', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
+        },
+        prevPage() {
+            this.$emit('prevPage', {pageIndex: 1});
+        }
+    }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
old mode 100644
new mode 100755
index d189d58e3..842df7008
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
-            <Steps :model="items" :readonly="false" />
-            <router-view/>
+            <Steps :model="items" :readonly="true" />
+            <keep-alive>
+                <router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" />
+            </keep-alive>
         </div>
 
         <StepsDoc />
@@ -37,12 +39,28 @@ export default {
             {
                 label: 'Confirmation',
                 to: '/steps/confirmation'
-            }]
+            }],
+            formObject: {}
         }
     },
     components: {
         'StepsDoc': StepsDoc
-	}
+    },
+    methods: {
+        nextPage(event) {
+            for (let field in event.formData) {
+                this.formObject[field] = event.formData[field]; 
+            }
+            
+            this.$router.push(this.items[event.pageIndex + 1].to);
+        },
+        prevPage(event) {
+            this.$router.push(this.items[event.pageIndex - 1].to);
+        },
+        complete() {
+            this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear,' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.', life: 3000});
+        }
+    }
 }
 </script>
 
@@ -61,5 +79,130 @@ export default {
         font-size: 2em;
         margin-top: .3em;
     }
+
+    .p-card-body {
+        padding: 0;
+        padding-bottom: 0;
+        padding-top: 0;
+        border-radius: 2px;
+        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
+        background-color: #f9f9f9;
+    }
+
+    .card-header-message {
+        font-size: 14px;
+        color: #ffffff;
+    }
+
+    .wizard-header {
+        background-color: #057ad8; 
+        margin:0; 
+        max-height: 48px;
+    }
+
+    .wizard-header-content {
+        align-self: center; 
+        padding: 0px;
+        font-weight: 600;
+        margin-left: 1em;
+    }
+
+    .wizard-header-steps {
+        align-self: center; 
+        text-align: center; 
+        max-width:90px;  
+        padding: 0px;
+        font-size: 14px; 
+        font-weight: normal;
+    }
+
+    .wizard-content {
+        padding-left: 1em;
+        margin-top: .1em;
+
+        p {
+            margin: 0;
+        }
+
+        &.wizard-confirmation {
+            box-shadow: 0 25px 0 -23px #ededed;
+            p {
+                font-weight: 600;
+                color: #484848;
+            }
+            label.wizard-input-label {
+                opacity: 0.6;
+                font-size: 14px;
+                color: #484848;
+            }
+        }
+    }
+
+    .wizard-content-summary {
+        margin-bottom: .1em;
+        padding-left: 1em;
+
+        p {
+            margin: 0;
+        }
+    }
+
+    .wizard-footer {
+        background-color: #ededed; 
+        margin-top: 2em; 
+        margin-left: 0; 
+        margin-right:0;
+
+        & button {
+            max-width: 59px;
+
+            &:disabled {
+                background-color: #a0a0a0;
+                border: none;
+                cursor: unset;
+            }
+        }
+    }
+
+    .wizard-footer-back-button {
+        align-self: center; 
+        text-align: left; 
+        margin-left: .5em;
+    }
+
+    .wizard-footer-next-button {
+        align-self: center; 
+        text-align: right; 
+        margin-right: .5em;
+    }
+
+    .wizard-footer-complete-button {
+        align-self: center; 
+        text-align: right; 
+        margin-right: .5em;
+
+        & button {
+            max-width: 88px;
+        }
+    }
+
+    .wizard-input-label {
+        font-size: 12px;
+        color: #898989;
+    }
+
+    p.wizard-input-header {
+        margin-bottom: 7px;
+    }
+
+    @media screen and (max-width: 768px) {
+        .wizard-content {
+            padding-right: 1em;
+        }
+
+        .wizard-header {
+            max-height: 66px;
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
old mode 100644
new mode 100755