diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 4c529fe0f..5d303c0c4 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #cd3a3a;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 1015f465d..22903beaa 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #cd3a3a;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 9043f0732..559e9f69a 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #cd3a3a;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 653283019..8b4411ebc 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #a80000;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 5570706e1..26c9ca7ba 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #a80000;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index 45948ac9b..28673d7f0 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #a80000;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 022d2aefd..fe81c34a1 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #a80000;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index cb83f863a..d6f6f8482 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: e7a3a3;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 743e9f727..87c4991a2 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #f44336;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index da5bd9e04..0ace2920a 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #f44336;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index a58586fb6..7fb16c26b 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #f44336;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 7e89b79c9..1eca4c438 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #f44336;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index 00e07c4dc..12d06b1d0 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #f44336;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 2639b1b3c..22f0db268 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #f44336;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 9b8d80618..865e9808a 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #f44336;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index 7002c02b7..a5db7d5e7 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #f44336;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 0f3eb40c3..9476b7947 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #e57373;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index eecd2e60a..076113136 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #e57373;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index c90a052bf..71fef54e3 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #e57373;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index d66ce49b9..8705b6dfc 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #e57373;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index ef04e20be..d187b34a9 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #e57373;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index f5e2bcb05..30ff3c6c6 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #e57373;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 1f2d7d9ec..419605812 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #e57373;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index dc5074bb1..e08ae1985 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -19,6 +19,10 @@
   opacity: 0.5;
 }
 
+.p-error, .p-invalid {
+  color: #e57373;
+}
+
 .pi {
   font-size: 1rem;
 }
diff --git a/src/views/steps/ConfirmationDemo.vue b/src/views/steps/ConfirmationDemo.vue
index cbe39c499..8e0a256f4 100755
--- a/src/views/steps/ConfirmationDemo.vue
+++ b/src/views/steps/ConfirmationDemo.vue
@@ -2,67 +2,50 @@
     <div class="stepsdemo-content">
         <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>
+                Confirmation
             </template>
             <template slot="content">
-                <div class="p-grid p-fluid wizard-content wizard-confirmation">
-                    <div class="p-col-12 p-md-3">
-                        <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-1">
-                        <label class="wizard-input-label">Your Age</label>
-                        <p>{{formData.age ? formData.age : '-'}}</p>
-                    </div>
+                <div class="p-field p-col-12">
+                    <label for="class">Name</label>
+                    <b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
                 </div>
-                <div class="p-grid p-fluid wizard-content wizard-confirmation">
-                    <div class="p-col-12 p-md-3">
-                        <label class="wizard-input-label">Seat Class</label>
-                        <p>{{formData.class ? formData.class : '-'}}</p>
-                    </div>
-                    <div class="p-col-12 p-md-3">
-                        <label class="wizard-input-label">Vagon Number</label>
-                        <p>{{formData.vagon ? formData.vagon : '-'}}</p>
-                    </div>
-                    <div class="p-col-12 p-md-1">
-                        <label class="wizard-input-label">Seat</label>
-                        <p>{{formData.seat ? formData.seat : '-'}}</p>
-                    </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Age</label>
+                    <b>{{formData.age ? formData.age : '-'}}</b>
                 </div>
-                <div class="p-grid p-fluid wizard-content wizard-confirmation">
-                    <div class="p-col-12 p-md-3">
-                        <label class="wizard-input-label">Cardholder Name</label>
-                        <p>{{formData.cardholderName ? formData.cardholderName : '-'}}</p>
-                    </div>
-                    <div class="p-col-12 p-md-3">
-                        <label class="wizard-input-label">Cardholder Number</label>
-                        <p>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</p>
-                    </div>
-                    <div class="p-col-12 p-md-1">
-                        <label class="wizard-input-label">Date</label>
-                        <p>{{formData.date ? formData.date : '-'}}</p>
-                    </div>
-                    <div class="p-col-12 p-md-1">
-                        <label class="wizard-input-label">CVV</label>
-                        <p>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</p>
-                    </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Seat Class</label>
+                    <b>{{formData.class ? formData.class : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Wagon Number</label>
+                    <b>{{formData.vagon ? formData.vagon : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Seat</label>
+                    <b>{{formData.seat ? formData.seat : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Cardholder Name</label>
+                    <b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Card Number</label>
+                    <b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">Date</label>
+                    <b>{{formData.date ? formData.date : '-'}}</b>
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="Age">CVV</label>
+                    <b>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</b>
                 </div>
             </template>
             <template slot="footer">
-                <div class="p-grid p-fluid p-justify-between wizard-footer demo-footer">
-                    <div class="p-col-4 wizard-footer-back-button">
-                        <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
-                    </div>
-                    <div class="p-col-6 wizard-footer-complete-button">
-                        <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" />
-                    </div>
+                <div class="p-grid p-nogutter p-justify-between">
+                    <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
+                    <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/>
                 </div>
             </template>
         </Card>
diff --git a/src/views/steps/PaymentDemo.vue b/src/views/steps/PaymentDemo.vue
index 13919e6ba..8846299bf 100755
--- a/src/views/steps/PaymentDemo.vue
+++ b/src/views/steps/PaymentDemo.vue
@@ -2,56 +2,36 @@
     <div class="stepsdemo-content">
         <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>
+                Payment Information
             </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-8" style="max-width: 391px;">
-                        <p class="wizard-input-header">Cardholder Name</p>
+                <div class="p-fluid p-formgrid p-grid">
+                    <div class="p-field p-col-12">
+                        <label for="class">Class</label>
                         <InputText type="text" v-model="cardholderName" />
                     </div>
-                </div>
-                <div class="p-grid p-fluid wizard-content">
-                    <div class="p-col-12 p-md-5" style="max-width: 252px">
-                        <p class="wizard-input-header">Cardholder Number</p>
-                        <InputMask mask="9999-9999-9999-9999" v-model="cardholderNumber" />
+                    <div class="p-field p-col-8">
+                        <label id="number" for="lastname">Number</label>
+                        <InputMask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber" />
                     </div>
-                    <div class="p-col-12 p-md-2" style="max-width: 69px">
-                        <p class="wizard-input-header">Date</p>
-                        <InputMask mask="99/99" v-model="date" />
+                    <div class="p-field p-col-2">
+                        <label id="date" for="date">Date</label>
+                        <InputMask id="date" mask="99/99" v-model="date" />
                     </div>
-                    <div class="p-col-12 p-md-2" style="max-width: 69px">
-                        <p class="wizard-input-header">CVV</p>
-                        <InputMask mask="999" v-model="cvv" />
+                    <div class="p-field p-col-2">
+                        <label for="cvv">CVV</label>
+                        <InputMask id="cvv" 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 class="p-field-checkbox p-col-12">
+                        <Checkbox id="remember" v-model="remember" :binary="true" />
+                        <label for="remember" class="p-checkbox-label">Save credit card information for future</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()" icon="pi pi-angle-left" />
-                    </div>
-                    <div class="p-col-4 wizard-footer-next-button">
-                        <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right"/>
-                    </div>
+                <div class="p-grid p-nogutter p-justify-between">
+                    <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                    <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
             </template>
         </Card>
diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue
index 31dd6438b..e8aa236d4 100755
--- a/src/views/steps/PersonalDemo.vue
+++ b/src/views/steps/PersonalDemo.vue
@@ -2,52 +2,31 @@
     <div class="stepsdemo-content">
         <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>
+                Personal Information
             </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 class="p-fluid">
+                    <div class="p-field">
+                        <label for="firstname">Firstname</label>
+                        <InputText id="firstname" v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" />
+                        <small v-show="$v.firstname.$invalid && submitted" class="p-error">Firstname is required.</small>
                     </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 class="p-field">
+                        <label for="lastname">Lastname</label>
+                        <InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" />
+                        <small v-show="$v.lastname.$invalid && submitted" class="p-error">Lastname is required.</small>
                     </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-invalid':$v.firstname.$invalid && submitted}" placeholder="Firstname"/>
-                        <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-invalid':$v.lastname.$invalid && submitted}" placeholder="Lastname" />
-                        <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-invalid':$v.age.$error && submitted}" />
-                            <ValidationMessage v-show="$v.age.$invalid && submitted" style="margin-top: .5em; font-size: 12px">Age should be number.</ValidationMessage>
+                    <div class="p-field">
+                        <label for="age">Age</label>
+                        <InputText id="age" v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" />
+                        <small v-show="$v.age.$invalid && submitted" class="p-error">Age should be a number.</small>
                     </div>
                 </div>
             </template>
             <template slot="footer">
-                <div class="p-grid p-fluid p-justify-between wizard-footer demo-footer">
-                    <div class="p-col-4 wizard-footer-back-button">
-                        <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
-                    </div>
-                    <div class="p-col-4 wizard-footer-next-button">
-                        <Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
-                    </div>
+                <div class="p-grid p-nogutter p-justify-between">
+                    <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                    <Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
                 </div>
             </template>
         </Card>
@@ -89,7 +68,4 @@ export default {
         }
     }
 }
-</script>
-
-<style>
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
index ba5ad008f..df108cd9a 100755
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@@ -1,50 +1,29 @@
 <template>
     <div class="stepsdemo-content">
         <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 slot="title">
+                Seat Information
             </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 class="p-fluid p-formgrid p-grid">
+                    <div class="p-field p-col-12 p-md-6">
+                        <label for="class">Class</label>
+                        <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
                     </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 class="p-field p-col-12 p-md-6">
+                        <label for="lastname">Wagon</label>
+                        <Dropdown inputId="wagon" v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
                     </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" />
-                    </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" />
-                    </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 class="p-field p-col-12">
+                        <label for="seat">Seat</label>
+                        <Dropdown inputId="seat" 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 demo-footer">
-                    <div class="p-col-4 wizard-footer-back-button">
-                        <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
-                    </div>
-                    <div class="p-col-4 wizard-footer-next-button">
-                        <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
-                    </div>
+                <div class="p-grid p-nogutter p-justify-between">
+                    <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                    <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
             </template>
         </Card>
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index 5f71a8e0c..4d566b25f 100755
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <Steps :model="items" :readonly="true" style="margin-bottom: 2em"/>
+            <Steps :model="items" :readonly="true" style="margin-bottom: 1rem"/>
             <keep-alive>
                 <router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" />
             </keep-alive>
@@ -65,142 +65,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/deep/ .stepsdemo-content  {
-    h1 {
-        font-weight: 400;
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 24px;
-        margin-top: 1em;
-    }
-
-    i {
-        vertical-align: middle;
-        font-size: 2em;
-        margin-top: .3em;
-    }
-
-    .p-card-body {
-        padding: 0;
-    }
-
-    .p-card-content {
-        padding: 1em;
-    }
-
-    .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;
-            }
-            label.wizard-input-label {
-                opacity: 0.6;
-                font-size: 14px;
-            }
-        }
-    }
-
-    .wizard-content-summary {
-        margin-bottom: .1em;
-        padding-left: 1em;
-
-        p {
-            margin: 0;
-        }
-    }
-
-    .wizard-footer {
-        margin-top: 2em;
-        margin-left: 0;
-        margin-right:0;
-
-        button {
-            max-width: 75px;
-        }
-    }
-
-    .wizard-footer-back-button {
-        align-self: center;
-        text-align: left;
-        margin-left: .5em;
-
-        span.pi {
-            margin-top: -.4em;
-        }
-    }
-
-    .wizard-footer-next-button {
-        align-self: center;
-        text-align: right;
-        margin-right: .5em;
-
-        span.pi {
-            margin-top: -.4em;
-        }
-    }
-
-    .wizard-footer-complete-button {
-        align-self: center;
-        text-align: right;
-        margin-right: .5em;
-
-        button {
-            max-width: 108px;
-        }
-    }
-
-    .wizard-input-label {
-        font-size: 12px;
-    }
-
-    p.wizard-input-header {
-        margin-bottom: 7px;
-    }
-
-    @media screen and (max-width: 768px) {
-        .wizard-content {
-            padding-right: 1em;
-        }
-
-        .wizard-header {
-            max-height: 66px;
-        }
-    }
+/deep/ b {
+    display: block
 }
 </style>
\ No newline at end of file
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index 59516e7a2..0566b3d6c 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -125,7 +125,7 @@ export default {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;Steps :model="items" :readonly="true"  style="margin-bottom: 1em" /&gt;
+&lt;Steps :model="items" :readonly="true"  style="margin-bottom: 1rem" /&gt;
 &lt;keep-alive&gt;
     &lt;router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" /&gt;
 &lt;/keep-alive&gt;
@@ -183,52 +183,31 @@ export default {
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
         &lt;template slot="title"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-header"&gt;
-                &lt;div class="p-col-8 wizard-header-content"&gt;
-                    &lt;p class="card-header-message"&gt;Personal Information&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-2 wizard-header-steps"&gt;
-                    &lt;p class="card-header-message"&gt;Step 1/4&lt;/p&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
+            Personal Information
         &lt;/template&gt;
         &lt;template slot="content"&gt;
-            &lt;div class="p-grid p-fluid wizard-content-summary"&gt;
-                &lt;div class="p-col-12"&gt;
-                    &lt;p&gt;Please enter your information and proceed to the next step&lt;/p&gt;
+            &lt;div class="p-fluid"&gt;
+                &lt;div class="p-field"&gt;
+                    &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
+                    &lt;InputText id="firstname" v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" /&gt;
+                    &lt;small v-show="$v.firstname.$invalid && submitted" class="p-error"&gt;Firstname is required.&lt;/small&gt;
                 &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content"&gt;
-                &lt;div class="p-col-12 p-md-4" style="padding-bottom: 0px; max-width: 235px;"&gt;
-                    &lt;p&gt;Your Name&lt;/p&gt;
+                &lt;div class="p-field"&gt;
+                    &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
+                    &lt;InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" /&gt;
+                    &lt;small v-show="$v.lastname.$invalid && submitted" class="p-error"&gt;Lastname is required.&lt;/small&gt;
                 &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content"&gt;
-                &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
-                    &lt;InputText v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" placeholder="Firstname" /&gt;
-                    &lt;ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px"&gt;Firstname is required.&lt;/ValidationMessage&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
-                    &lt;InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" placeholder="Lastname"/&gt;
-                    &lt;ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px"&gt;Lastname is required.&lt;/ValidationMessage&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content"&gt;
-                &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
-                        &lt;p class="wizard-input-header"&gt;Your Age&lt;/p&gt;
-                        &lt;InputText v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" /&gt;
-                        &lt;ValidationMessage v-show="$v.age.$invalid && submitted" style="margin-top: .5em; font-size: 12px"&gt;Age should be number.&lt;/ValidationMessage&gt;
+                &lt;div class="p-field"&gt;
+                    &lt;label for="age"&gt;Age&lt;/label&gt;
+                    &lt;InputText id="age" v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" /&gt;
+                    &lt;small v-show="$v.age.$invalid && submitted" class="p-error"&gt;Age should be a number.&lt;/small&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/template&gt;
         &lt;template slot="footer"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
-                &lt;div class="p-col-4 wizard-footer-back-button"&gt;
-                    &lt;Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" /&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-4 wizard-footer-next-button"&gt;
-                    &lt;Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" /&gt;
-                &lt;/div&gt;
+            &lt;div class="p-grid p-nogutter p-justify-between"&gt;
+                &lt;Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" /&gt;
+                &lt;Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" /&gt;
             &lt;/div&gt;
         &lt;/template&gt;
     &lt;/Card&gt;
@@ -276,56 +255,35 @@ export default {
             <TabPanel header="Seat">
 <CodeHighlight>
 <template v-pre>
-&lt;div class="stepsdemo-content"&gt;
-    &lt;Card&gt;
-        &lt;template slot="title"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-header"&gt;
-                &lt;div class="p-col-8 wizard-header-content"&gt;
-                    &lt;p class="card-header-message"&gt;Seat Information&lt;/p&gt;
+    &lt;div class="stepsdemo-content"&gt;
+        &lt;Card&gt;
+           &lt;template slot="title"&gt;
+                Seat Information
+            &lt;/template&gt;
+            &lt;template slot="content"&gt;
+                &lt;div class="p-fluid p-formgrid p-grid"&gt;
+                    &lt;div class="p-field p-col-12 p-md-6"&gt;
+                        &lt;label for="class"&gt;Class&lt;/label&gt;
+                        &lt;Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" /&gt;
+                    &lt;/div&gt;
+                    &lt;div class="p-field p-col-12 p-md-6"&gt;
+                        &lt;label for="lastname"&gt;Wagon&lt;/label&gt;
+                        &lt;Dropdown inputId="wagon" v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" /&gt;
+                    &lt;/div&gt;
+                    &lt;div class="p-field p-col-12"&gt;
+                        &lt;label for="seat"&gt;Seat&lt;/label&gt;
+                        &lt;Dropdown inputId="seat" v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" /&gt;
+                    &lt;/div&gt;
                 &lt;/div&gt;
-                &lt;div class="p-col-2 wizard-header-steps"&gt;
-                    &lt;p class="card-header-message"&gt;Step 2/4&lt;/p&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/template&gt;
-        &lt;template slot="content"&gt;
-            &lt;div class="p-grid p-fluid wizard-content-summary"&gt;
-                &lt;div class="p-col-12"&gt;
-                    &lt;p&gt;Please pick your seat and proceed to the payment&lt;/p&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content"&gt;
-                &lt;div class="p-col-12 p-md-4" style="padding-bottom: 0px; max-width: 235px;"&gt;
-                    &lt;p&gt;Class and Vagon&lt;/p&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content"&gt;
-                &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
-                    &lt;Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" /&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
-                    &lt;Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" /&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content"&gt;
-                &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
-                    &lt;p class="wizard-input-header"&gt;Seat&lt;/p&gt;
-                    &lt;Dropdown v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" /&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/template&gt;
-        &lt;template slot="footer"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
-                &lt;div class="p-col-4 wizard-footer-back-button"&gt;
-                    &lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-4 wizard-footer-next-button"&gt;
+            &lt;/template&gt;
+            &lt;template slot="footer"&gt;
+                &lt;div class="p-grid p-nogutter p-justify-between"&gt;
+                    &lt;Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" /&gt;
                     &lt;Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" /&gt;
                 &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/template&gt;
-    &lt;/Card&gt;
-&lt;/div&gt;
+            &lt;/template&gt;
+        &lt;/Card&gt;
+    &lt;/div&gt;
 </template>
 </CodeHighlight>
 
@@ -379,56 +337,36 @@ export default {
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
         &lt;template slot="title"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-header"&gt;
-                &lt;div class="p-col-8 wizard-header-content"&gt;
-                    &lt;p class="card-header-message"&gt;Payment Information&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-2 wizard-header-steps"&gt;
-                    &lt;p class="card-header-message"&gt;Step 3/4&lt;/p&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
+            Payment Information
         &lt;/template&gt;
         &lt;template slot="content"&gt;
-            &lt;div class="p-grid p-fluid wizard-content-summary"&gt;
-                &lt;div class="p-col-12"&gt;
-                    &lt;p&gt;Complete your registration with Payment&lt;/p&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content"&gt;
-                &lt;div class="p-col-12 p-md-8" style="max-width: 391px;"&gt;
-                    &lt;p class="wizard-input-header"&gt;Cardholder Name&lt;/p&gt;
+            &lt;div class="p-fluid p-formgrid p-grid"&gt;
+                &lt;div class="p-field p-col-12"&gt;
+                    &lt;label for="class"&gt;Class&lt;/label&gt;
                     &lt;InputText type="text" v-model="cardholderName" /&gt;
                 &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content"&gt;
-                &lt;div class="p-col-12 p-md-5" style="max-width: 252px"&gt;
-                    &lt;p class="wizard-input-header"&gt;Cardholder Number&lt;/p&gt;
-                    &lt;InputMask mask="9999-9999-9999-9999" v-model="cardholderNumber" /&gt;
+                &lt;div class="p-field p-col-8"&gt;
+                    &lt;label id="number" for="lastname"&gt;Number&lt;/label&gt;
+                    &lt;InputMask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber" /&gt;
                 &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-2" style="max-width: 69px"&gt;
-                    &lt;p class="wizard-input-header"&gt;Date&lt;/p&gt;
-                    &lt;InputMask mask="99/99" v-model="date" /&gt;
+                &lt;div class="p-field p-col-2"&gt;
+                    &lt;label id="date" for="date"&gt;Date&lt;/label&gt;
+                    &lt;InputMask id="date" mask="99/99" v-model="date" /&gt;
                 &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-2" style="max-width: 69px"&gt;
-                    &lt;p class="wizard-input-header"&gt;CVV&lt;/p&gt;
-                    &lt;InputMask mask="999" v-model="cvv" /&gt;
+                &lt;div class="p-field p-col-2"&gt;
+                    &lt;label for="cvv"&gt;CVV&lt;/label&gt;
+                    &lt;InputMask id="cvv" mask="999" v-model="cvv" /&gt;
                 &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content" style="margin-top: .3em"&gt;
-                &lt;div class="p-col-12"&gt;
-                        &lt;Checkbox id="remember" v-model="remember" :binary="true" /&gt;
-                        &lt;label for="remember" class="p-checkbox-label"&gt;Save credit card information for future usage&lt;/label&gt;
+                &lt;div class="p-field-checkbox p-col-12"&gt;
+                    &lt;Checkbox id="remember" v-model="remember" :binary="true" /&gt;
+                    &lt;label for="remember" class="p-checkbox-label"&gt;Save credit card information for future&lt;/label&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/template&gt;
         &lt;template slot="footer"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-footer" style="margin-top: .5em"&gt;
-                &lt;div class="p-col-4 wizard-footer-back-button"&gt;
-                    &lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-4 wizard-footer-next-button"&gt;
-                    &lt;Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right"/&gt;
-                &lt;/div&gt;
+            &lt;div class="p-grid p-nogutter p-justify-between"&gt;
+                &lt;Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" /&gt;
+                &lt;Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" /&gt;
             &lt;/div&gt;
         &lt;/template&gt;
     &lt;/Card&gt;
@@ -464,67 +402,50 @@ export default {
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
         &lt;template slot="title"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-header"&gt;
-                &lt;div class="p-col-8 wizard-header-content"&gt;
-                    &lt;p class="card-header-message"&gt;Confirmation&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-2 wizard-header-steps"&gt;
-                    &lt;p class="card-header-message"&gt;Step 4/4&lt;/p&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
+            Confirmation
         &lt;/template&gt;
         &lt;template slot="content"&gt;
-            &lt;div class="p-grid p-fluid wizard-content wizard-confirmation"&gt;
-                &lt;div class="p-col-12 p-md-3"&gt;
-                    &lt;label class="wizard-input-label"&gt;Your Name&lt;/label&gt;
-                    &lt;p&gt;{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-1"&gt;
-                    &lt;label class="wizard-input-label"&gt;Your Age&lt;/label&gt;
-                    &lt;p&gt;{{formData.age ? formData.age : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="class"&gt;Name&lt;/label&gt;
+                &lt;b&gt;{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}&lt;/b&gt;
             &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content wizard-confirmation"&gt;
-                &lt;div class="p-col-12 p-md-3"&gt;
-                    &lt;label class="wizard-input-label"&gt;Seat Class&lt;/label&gt;
-                    &lt;p&gt;{{formData.class ? formData.class : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-3"&gt;
-                    &lt;label class="wizard-input-label"&gt;Vagon Number&lt;/label&gt;
-                    &lt;p&gt;{{formData.vagon ? formData.vagon : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-1"&gt;
-                    &lt;label class="wizard-input-label"&gt;Seat&lt;/label&gt;
-                    &lt;p&gt;{{formData.seat ? formData.seat : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="Age"&gt;Age&lt;/label&gt;
+                &lt;b&gt;{{formData.age ? formData.age : '-'}}&lt;/b&gt;
             &lt;/div&gt;
-            &lt;div class="p-grid p-fluid wizard-content wizard-confirmation"&gt;
-                &lt;div class="p-col-12 p-md-3"&gt;
-                    &lt;label class="wizard-input-label"&gt;Cardholder Name&lt;/label&gt;
-                    &lt;p&gt;{{formData.cardholderName ? formData.cardholderName : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-3"&gt;
-                    &lt;label class="wizard-input-label"&gt;Cardholder Number&lt;/label&gt;
-                    &lt;p&gt;{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-1"&gt;
-                    &lt;label class="wizard-input-label"&gt;Date&lt;/label&gt;
-                    &lt;p&gt;{{formData.date ? formData.date : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-1"&gt;
-                    &lt;label class="wizard-input-label"&gt;CVV&lt;/label&gt;
-                    &lt;p&gt;{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}&lt;/p&gt;
-                &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="Age"&gt;Seat Class&lt;/label&gt;
+                &lt;b&gt;{{formData.class ? formData.class : '-'}}&lt;/b&gt;
+            &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="Age"&gt;Wagon Number&lt;/label&gt;
+                &lt;b&gt;{{formData.vagon ? formData.vagon : '-'}}&lt;/b&gt;
+            &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="Age"&gt;Seat&lt;/label&gt;
+                &lt;b&gt;{{formData.seat ? formData.seat : '-'}}&lt;/b&gt;
+            &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="Age"&gt;Cardholder Name&lt;/label&gt;
+                &lt;b&gt;{{formData.cardholderName ? formData.cardholderName : '-'}}&lt;/b&gt;
+            &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="Age"&gt;Card Number&lt;/label&gt;
+                &lt;b&gt;{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}&lt;/b&gt;
+            &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="Age"&gt;Date&lt;/label&gt;
+                &lt;b&gt;{{formData.date ? formData.date : '-'}}&lt;/b&gt;
+            &lt;/div&gt;
+            &lt;div class="p-field p-col-12"&gt;
+                &lt;label for="Age"&gt;CVV&lt;/label&gt;
+                &lt;b&gt;{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}&lt;/b&gt;
             &lt;/div&gt;
         &lt;/template&gt;
         &lt;template slot="footer"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
-                &lt;div class="p-col-4 wizard-footer-back-button"&gt;
-                    &lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-6 wizard-footer-complete-button"&gt;
-                    &lt;Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" /&gt;
-                &lt;/div&gt;
+            &lt;div class="p-grid p-nogutter p-justify-between"&gt;
+                &lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt;
+                &lt;Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/&gt;
             &lt;/div&gt;
         &lt;/template&gt;
     &lt;/Card&gt;