diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index b7596d09c..9044abc29 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -1014,49 +1014,49 @@
   }
 }
 
-#product-card-new {
-  border: none;
+.product-card-new {
   width: 22.5rem;
+  border: none !important;
   margin: 0 5px 10px 10px;
 }
 
-#product-card-new .product-image-container {
+.product-card-new .product-image-container {
   height: 220px;
   position: relative;
 }
 
-#product-card-new .product-image-container img {
+.product-card-new .product-image-container img {
   width: 100%;
   height: 100%;
 }
 
-#product-card-new .card-current-price {
+.product-card-new .card-current-price {
   font-size: 18px;
 }
 
-#product-card-new .product-rating .stars {
+.product-card-new .product-rating .stars {
   display: inline-block;
 }
 
-#product-card-new .product-rating span {
+.product-card-new .product-rating span {
   font-size: 14px;
   vertical-align: middle;
 }
 
-#product-card-new .card-body > div:not(:last-child) {
+.product-card-new .card-body > div:not(:last-child) {
   margin-bottom: 5px;
 }
 
-#product-card-new .product-price .sticker {
+.product-card-new .product-price .sticker {
   display: block;
 }
 
-#product-card-new .cart-wish-wrap .wishlist-icon {
+.product-card-new .cart-wish-wrap .wishlist-icon {
   height: 32px;
   display: table;
 }
 
-#product-card-new .cart-wish-wrap .wishlist-icon > i {
+.product-card-new .cart-wish-wrap .wishlist-icon > i {
   display: table-cell;
   vertical-align: middle;
 }
@@ -1573,7 +1573,7 @@
   padding-left: 0;
 }
 
-.account-content .account-layout .account-items-list.wishlist-container .col-3 #product-card-new {
+.account-content .account-layout .account-items-list.wishlist-container .col-3 .product-card-new {
   margin: 0;
   width: 22rem;
 }
@@ -1695,6 +1695,17 @@
   -webkit-transform: scale(1.3);
 }
 
+.checkout-process .styled-select {
+  cursor: pointer;
+}
+
+.checkout-process .styled-select + .select-icon {
+  top: 55%;
+  left: 92%;
+  font-size: 20px;
+  position: absolute;
+}
+
 .address-container .address-holder {
   margin-top: 15px;
 }
@@ -1812,11 +1823,6 @@
   margin-bottom: 20px;
 }
 
-.order-summary-container .order-summary .row > .col-8,
-.order-summary-container .order-summary .row .col-4 {
-  padding-right: 0;
-}
-
 .order-summary-container .order-summary > .row:not(:last-child) {
   margin-bottom: 10px;
 }
@@ -1862,7 +1868,7 @@
   margin-top: 20px;
 }
 
-#related-products-carousel #product-card-new:first-child {
+#related-products-carousel .product-card-new:first-child {
   margin-left: 0px !important;
 }
 
@@ -3630,7 +3636,7 @@ body::after {
   border: none;
 }
 
-#product-card-new:hover,
+.product-card-new:hover,
 .lg-card-container:hover,
 .general-container:hover {
   -webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
@@ -3641,7 +3647,7 @@ body::after {
   display: block;
 }
 
-.text-nowrap, #product-card-new .product-rating {
+.text-nowrap, .product-card-new .product-rating {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -3781,7 +3787,7 @@ a.default {
   cursor: pointer;
 }
 
-.VueCarousel .VueCarousel-slide:nth-of-type(1) #product-card-new {
+.VueCarousel .VueCarousel-slide:nth-of-type(1) .product-card-new {
   margin-left: 0px;
 }
 
@@ -3905,6 +3911,7 @@ button[disabled] {
   border: none;
   color: white;
   font-weight: 600;
+  cursor: default;
   padding: 2px 11px;
   background: #F05153;
 }
@@ -3933,7 +3940,7 @@ button[disabled] {
 }
 
 .product-detail .right .add-to-cart-btn button {
-  padding: 10px 15px;
+  padding: 9px 15px;
   text-transform: uppercase;
 }
 
@@ -5616,7 +5623,7 @@ mark,
   text-align: justify;
 }
 
-.text-nowrap, #product-card-new .product-rating {
+.text-nowrap, .product-card-new .product-rating {
   white-space: nowrap;
 }
 
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
index 3e85879b8..2c279458d 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -203,9 +203,9 @@
     }
 }
 
-#product-card-new {
-    border: none;
+.product-card-new {
     width: 22.5rem;
+    border: none !important;
     margin: 0 5px 10px 10px;
 
     .product-image-container {
@@ -289,7 +289,7 @@
     }
 }
 
-#product-card-new:hover {
+.product-card-new:hover {
     #quick-view-btn-container {
         // display: block;
     }
@@ -820,7 +820,7 @@
                 .col-3 {
                     padding-left: 0;
 
-                    #product-card-new {
+                    .product-card-new {
                         margin: 0;
                         width: 22rem;
                     }
@@ -973,6 +973,17 @@
         -ms-transform: scale(1.3);
         -webkit-transform: scale(1.3);
     }
+
+    .styled-select {
+        cursor: pointer;
+
+        + .select-icon {
+            top: 55%;
+            left: 92%;
+            font-size: 20px;
+            position: absolute;
+        }
+    }
 }
 
 .address-container {
@@ -1086,13 +1097,6 @@
             margin-bottom: 20px;
         }
 
-        .row {
-            > .col-8,
-            .col-4 {
-                padding-right: 0;
-            }
-        }
-
         > .row:not(:last-child) {
             margin-bottom: 10px;
         }
@@ -1138,7 +1142,7 @@
 }
 
 #related-products-carousel {
-    #product-card-new:first-child {
+    .product-card-new:first-child {
         margin-left: 0px !important;
     }
 }
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
index 3c2fe0578..518317de6 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
@@ -67,6 +67,7 @@
                     border: none;
                     color: white;
                     font-weight: 600;
+                    cursor: default;
                     padding: 2px 11px;
                     background: $button-danger;
 
@@ -137,7 +138,7 @@
             padding: 0px;
 
             button {
-                padding: 10px 15px;
+                padding: 9px 15px;
                 text-transform: uppercase;
 
                 span {
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
index 0abe9b6f2..0a6a0b9a0 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
@@ -478,7 +478,7 @@
         border: none;
     }
 }
-#product-card-new:hover,
+.product-card-new:hover,
 .lg-card-container:hover,
 .general-container:hover {
     box-shadow: 0 6px 14px 0 rgba(0,0,0,0.14);
@@ -634,7 +634,7 @@ a {
     cursor: pointer;
 
     .VueCarousel-slide:nth-of-type(1) {
-        #product-card-new {
+        .product-card-new {
             margin-left: 0px;
         }
     }
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage.blade.php
index b36a5f191..b4f6ddd1d 100644
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage.blade.php
@@ -11,7 +11,7 @@
 @push('scripts')
     <script type="text/x-template" id="checkout-template">
         <div id="checkout" class="checkout-process offset-1 row col-11">
-            <h1 class="row col-12">Checkout</h1>
+            <h1 class="row col-12">{{ __('velocity::app.checkout.checkout') }}</h1>
 
             <div class="row col-7">
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-info.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-info.blade.php
index 91391d553..38ce3cfe5 100644
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-info.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-info.blade.php
@@ -1,162 +1,55 @@
 <form data-vv-scope="address-form" class="custom-form">
     <div class="form-container" v-if="!this.new_billing_address">
-        <div class="form-header mb-30">
-            <h3 class="fw6 display-inbl">
-                1. {{ __('shop::app.checkout.onepage.billing-address') }}
-            </h3>
-
-            <a
-                class="theme-btn light pull-right text-up-14"
-                @click="newBillingAddress()">
-                {{ __('shop::app.checkout.onepage.new-address') }}
-            </a>
-        </div>
-
-        <div class="address-container row full-width">
-            <div class="col address-holder" v-for='(addresses, index) in this.allAddress'>
-                <div class="card">
-                    <div class="card-body row">
-
-                        <div class="col-1">
-
-                            <input
-                                type="radio"
-                                v-validate="'required'"
-                                name="billing[address_id]"
-                                :value="addresses.id"
-                                v-model="address.billing.address_id"
-                                @change="validateForm('address-form')"
-                                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.billing-address') }}&quot;" />
-
-                            <span class="checkmark"></span>
-                        </div>
-
-                        <div class="col-10">
-                            <h5 class="card-title fw6">
-                                @{{ allAddress.first_name }} @{{ allAddress.last_name }},
-                            </h5>
-
-                            <ul type="none">
-                                <li>@{{ addresses.address1 }},</li>
-                                <li>@{{ addresses.city }},</li>
-                                <li>@{{ addresses.state }},</li>
-                                <li>@{{ addresses.country }} @{{ addresses.postcode }}</li>
-                                <li>
-                                    {{ __('shop::app.customer.account.address.index.contact') }} : @{{ addresses.phone }}
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div id="message"></div>
-
-        <div
-            class="control-group"
-            :class="[errors.has('address-form.billing[address_id]') ? 'has-error' : '']">
-
-            <span
-                class="control-error"
-                v-if="errors.has('address-form.billing[address_id]')">
-                @{{ errors.first('address-form.billing[address_id]') }}
-            </span>
-        </div>
-
-        @if ($cart->haveStockableItems())
-            <div class="mt10 mb10" v-if="address.billing.address_id">
-                <span class="checkbox fs16 display-inbl">
-                    <input
-                        type="checkbox"
-                        class="ml0"
-                        id="billing[use_for_shipping]"
-                        name="billing[use_for_shipping]"
-                        v-model="address.billing.use_for_shipping" />
-
-                    <span class="ml-5">
-                        {{ __('shop::app.checkout.onepage.use_for_shipping') }}
-                    </span>
-                </span>
-            </div>
-        @endif
-    </div>
-
-    <div class="form-container" v-else>
-        <div class="form-header">
-            <h3 class="fw6 display-inbl">
-                1. {{ __('shop::app.checkout.onepage.billing-address') }}
-            </h3>
-
-            @auth('customer')
-                @if(count(auth('customer')->user()->addresses))
-                    <a
-                        class="theme-btn light pull-right text-up-14"
-                        @click="backToSavedBillingAddress()">
-
-                        {{ __('shop::app.checkout.onepage.back') }}
-                    </a>
-                @endif
-            @endauth
-        </div>
-
-        <div class="col-12">
-            @include('shop::checkout.onepage.customer-new-form', [
-                'billing' => true
-            ])
-        </div>
-    </div>
-
-    @if ($cart->haveStockableItems())
-        <div
-            class="form-container"
-            v-if="!address.billing.use_for_shipping && !this.new_shipping_address">
-
-            <div class="form-header mb-30">
+        <accordian :title="'{{ __('shop::app.checkout.onepage.billing-address') }}'" :active="true">
+            <div class="form-header mb-30" slot="header">
                 <h3 class="fw6 display-inbl">
-                    {{ __('shop::app.checkout.onepage.shipping-address') }}
+                    1. {{ __('shop::app.checkout.onepage.billing-address') }}
                 </h3>
 
-                <a class="theme-btn light pull-right text-up-14" @click="newShippingAddress()">
+                <a
+                    class="theme-btn light pull-right text-up-14"
+                    @click="newBillingAddress()">
                     {{ __('shop::app.checkout.onepage.new-address') }}
                 </a>
+
+                <i class="rango-arrow"></i>
             </div>
 
-            <div class="address-container row">
-                <div
-                    class="col address-holder"
-                    v-for='(addresses, index) in this.allAddress'>
+            <div slot="body">
+                <div class="address-container row full-width">
+                    <div class="col address-holder" v-for='(addresses, index) in this.allAddress'>
+                        <div class="card">
+                            <div class="card-body row">
 
-                    <div class="card">
-                        <div class="card-body row">
+                                <div class="col-1">
 
-                            <div class="col-1">
-                                <input
-                                    type="radio"
-                                    v-validate="'required'"
-                                    :value="addresses.id"
-                                    id="shipping[address_id]"
-                                    name="shipping[address_id]"
-                                    v-model="address.shipping.address_id"
-                                    data-vv-as="&quot;{{ __('shop::app.checkout.onepage.shipping-address') }}&quot;" />
+                                    <input
+                                        type="radio"
+                                        v-validate="'required'"
+                                        name="billing[address_id]"
+                                        :value="addresses.id"
+                                        v-model="address.billing.address_id"
+                                        @change="validateForm('address-form')"
+                                        data-vv-as="&quot;{{ __('shop::app.checkout.onepage.billing-address') }}&quot;" />
 
-                                <span class="checkmark"></span>
-                            </div>
+                                    <span class="checkmark"></span>
+                                </div>
 
-                            <div class="col-10">
-                                <h5 class="card-title fw6">
-                                    @{{ allAddress.first_name }} @{{ allAddress.last_name }},
-                                </h5>
+                                <div class="col-10">
+                                    <h5 class="card-title fw6">
+                                        @{{ allAddress.first_name }} @{{ allAddress.last_name }},
+                                    </h5>
 
-                                <ul type="none">
-                                    <li>@{{ addresses.address1 }},</li>
-                                    <li>@{{ addresses.city }},</li>
-                                    <li>@{{ addresses.state }},</li>
-                                    <li>@{{ addresses.country }} @{{ addresses.postcode }}</li>
-                                    <li>
-                                        {{ __('shop::app.customer.account.address.index.contact') }} : @{{ addresses.phone }}
-                                    </li>
-                                </ul>
+                                    <ul type="none">
+                                        <li>@{{ addresses.address1 }},</li>
+                                        <li>@{{ addresses.city }},</li>
+                                        <li>@{{ addresses.state }},</li>
+                                        <li>@{{ addresses.country }} @{{ addresses.postcode }}</li>
+                                        <li>
+                                            {{ __('shop::app.customer.account.address.index.contact') }} : @{{ addresses.phone }}
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -164,40 +57,163 @@
 
                 <div id="message"></div>
 
-                <div class="control-group" :class="[errors.has('address-form.shipping[address_id]') ? 'has-error' : '']">
-                    <span class="control-error" v-if="errors.has('address-form.shipping[address_id]')">
-                        @{{ errors.first('address-form.shipping[address_id]') }}
+                <div
+                    class="control-group"
+                    :class="[errors.has('address-form.billing[address_id]') ? 'has-error' : '']">
+
+                    <span
+                        class="control-error"
+                        v-if="errors.has('address-form.billing[address_id]')">
+                        @{{ errors.first('address-form.billing[address_id]') }}
                     </span>
                 </div>
+
+                @if ($cart->haveStockableItems())
+                    <div class="mt10 mb10" v-if="address.billing.address_id">
+                        <span class="checkbox fs16 display-inbl">
+                            <input
+                                type="checkbox"
+                                class="ml0"
+                                id="billing[use_for_shipping]"
+                                name="billing[use_for_shipping]"
+                                v-model="address.billing.use_for_shipping" />
+
+                            <span class="ml-5">
+                                {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+                            </span>
+                        </span>
+                    </div>
+                @endif
             </div>
-        </div>
+        </accordian>
+    </div>
 
-        <div
-            class="form-container"
-            v-if="!address.billing.use_for_shipping && this.new_shipping_address">
-
-            <div class="form-header">
+    <div class="form-container" v-else>
+        <accordian :title="'{{ __('shop::app.checkout.onepage.billing-address') }}'" :active="true">
+            <div class="form-header" slot="header">
                 <h3 class="fw6 display-inbl">
-                    {{ __('shop::app.checkout.onepage.shipping-address') }}
+                    1. {{ __('shop::app.checkout.onepage.billing-address') }}
                 </h3>
 
                 @auth('customer')
                     @if(count(auth('customer')->user()->addresses))
                         <a
                             class="theme-btn light pull-right text-up-14"
-                            @click="backToSavedShippingAddress()">
+                            @click="backToSavedBillingAddress()">
 
                             {{ __('shop::app.checkout.onepage.back') }}
                         </a>
                     @endif
                 @endauth
+
+                <i class="rango-arrow"></i>
             </div>
 
-            <div class="col-12">
+            <div class="col-12 no-padding" slot="body">
                 @include('shop::checkout.onepage.customer-new-form', [
-                    'shipping' => true
+                    'billing' => true
                 ])
             </div>
+        </accordian>
+    </div>
+
+    @if ($cart->haveStockableItems())
+        <div
+            class="form-container"
+            v-if="!address.billing.use_for_shipping && !this.new_shipping_address">
+
+            <accordian :title="'{{ __('shop::app.checkout.onepage.shipping-address') }}'" :active="true">
+                <div class="form-header mb-30" slot="header">
+                    <h3 class="fw6 display-inbl">
+                        {{ __('shop::app.checkout.onepage.shipping-address') }}
+                    </h3>
+
+                    <a class="theme-btn light pull-right text-up-14" @click="newShippingAddress()">
+                        {{ __('shop::app.checkout.onepage.new-address') }}
+                    </a>
+                    <i class="rango-arrow"></i>
+                </div>
+
+                <div class="address-container row" slot="body">
+                    <div
+                        class="col address-holder"
+                        v-for='(addresses, index) in this.allAddress'>
+
+                        <div class="card">
+                            <div class="card-body row">
+
+                                <div class="col-1">
+                                    <input
+                                        type="radio"
+                                        v-validate="'required'"
+                                        :value="addresses.id"
+                                        id="shipping[address_id]"
+                                        name="shipping[address_id]"
+                                        v-model="address.shipping.address_id"
+                                        data-vv-as="&quot;{{ __('shop::app.checkout.onepage.shipping-address') }}&quot;" />
+
+                                    <span class="checkmark"></span>
+                                </div>
+
+                                <div class="col-10">
+                                    <h5 class="card-title fw6">
+                                        @{{ allAddress.first_name }} @{{ allAddress.last_name }},
+                                    </h5>
+
+                                    <ul type="none">
+                                        <li>@{{ addresses.address1 }},</li>
+                                        <li>@{{ addresses.city }},</li>
+                                        <li>@{{ addresses.state }},</li>
+                                        <li>@{{ addresses.country }} @{{ addresses.postcode }}</li>
+                                        <li>
+                                            {{ __('shop::app.customer.account.address.index.contact') }} : @{{ addresses.phone }}
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="message"></div>
+
+                    <div class="control-group" :class="[errors.has('address-form.shipping[address_id]') ? 'has-error' : '']">
+                        <span class="control-error" v-if="errors.has('address-form.shipping[address_id]')">
+                            @{{ errors.first('address-form.shipping[address_id]') }}
+                        </span>
+                    </div>
+                </div>
+            </accordian>
+        </div>
+
+        <div
+            class="form-container"
+            v-if="!address.billing.use_for_shipping && this.new_shipping_address">
+
+            <accordian :title="'{{ __('shop::app.checkout.onepage.shipping-address') }}'" :active="true">
+                <div class="form-header" slot="header">
+                    <h3 class="fw6 display-inbl">
+                        {{ __('shop::app.checkout.onepage.shipping-address') }}
+                    </h3>
+
+                    @auth('customer')
+                        @if(count(auth('customer')->user()->addresses))
+                            <a
+                                class="theme-btn light pull-right text-up-14"
+                                @click="backToSavedShippingAddress()">
+
+                                {{ __('shop::app.checkout.onepage.back') }}
+                            </a>
+                        @endif
+                    @endauth
+                    <i class="rango-arrow"></i>
+                </div>
+
+                <div class="col-12 no-padding" slot="body">
+                    @include('shop::checkout.onepage.customer-new-form', [
+                        'shipping' => true
+                    ])
+                </div>
+            </accordian>
         </div>
     @endif
 </form>
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
index 7aa5e97f0..349a55be4 100644
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
@@ -2,413 +2,497 @@
     $isCustomer = auth()->guard('customer')->check();
 @endphp
 
-@if (isset($shipping) && $shipping)
-    <div class="row col-12" :class="[errors.has('address-form.shipping[first_name]') ? 'has-error' : '']">
-        <label for="shipping[first_name]" class="required">
-            {{ __('shop::app.checkout.onepage.first-name') }}
-        </label>
+<form>
+    @if (isset($shipping) && $shipping)
+        <div :class="`row col-12 ${errors.has('address-form.shipping[first_name]') ? 'has-error' : ''}`">
+            <label for="shipping[first_name]" class="required">
+                {{ __('shop::app.checkout.onepage.first-name') }}*
+            </label>
 
-        <input type="text" v-validate="'required'" class="control" id="shipping[first_name]" name="shipping[first_name]" v-model="address.shipping.first_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;"/>
+            <input
+                type="text"
+                class="control"
+                v-validate="'required'"
+                id="shipping[first_name]"
+                name="shipping[first_name]"
+                v-model="address.shipping.first_name"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;" />
 
-        <span class="control-error" v-if="errors.has('address-form.shipping[first_name]')">
-            @{{ errors.first('address-form.shipping[first_name]') }}
-        </span>
-    </div>
-
-    <div class="row col-12" :class="[errors.has('address-form.shipping[last_name]') ? 'has-error' : '']">
-        <label for="shipping[last_name]" class="required">
-            {{ __('shop::app.checkout.onepage.last-name') }}
-        </label>
-
-        <input type="text" v-validate="'required'" class="control" id="shipping[last_name]" name="shipping[last_name]" v-model="address.shipping.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>
-
-        <span class="control-error" v-if="errors.has('address-form.shipping[last_name]')">
-            @{{ errors.first('address-form.shipping[last_name]') }}
-        </span>
-    </div>
-
-    <div class="row col-12" :class="[errors.has('address-form.shipping[email]') ? 'has-error' : '']">
-        <label for="shipping[email]" class="required">
-            {{ __('shop::app.checkout.onepage.email') }}
-        </label>
-
-        <input type="text" v-validate="'required|email'" class="control" id="shipping[email]" name="shipping[email]" v-model="address.shipping.email" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;"/>
-
-        <span class="control-error" v-if="errors.has('address-form.shipping[email]')">
-            @{{ errors.first('address-form.shipping[email]') }}
-        </span>
-    </div>
-
-    <div class="row col-12" :class="[errors.has('address-form.shipping[address1][]') ? 'has-error' : '']">
-        <label for="shipping_address_0" class="required">
-            {{ __('shop::app.checkout.onepage.address1') }}
-        </label>
-
-        <input type="text" v-validate="'required'" class="control" id="shipping_address_0" name="shipping[address1][]" v-model="address.shipping.address1[0]" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;"/>
-
-        <span class="control-error" v-if="errors.has('address-form.shipping[address1][]')">
-            @{{ errors.first('address-form.shipping[address1][]') }}
-        </span>
-    </div>
-
-    @if (
-        core()->getConfigData('customer.settings.address.street_lines')
-        && core()->getConfigData('customer.settings.address.street_lines') > 1
-    )
-        <div class="row col-12">
-            @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
-                <input type="text" class="control" name="shipping[address1][{{ $i }}]" id="shipping_address_{{ $i }}" v-model="address.shipping.address1[{{$i}}]">
-            @endfor
-        </div>
-    @endif
-
-    <div class="row col-12" :class="[errors.has('address-form.shipping[city]') ? 'has-error' : '']">
-        <label for="shipping[city]" class="required">
-            {{ __('shop::app.checkout.onepage.city') }}
-        </label>
-
-        <input type="text" v-validate="'required'" class="control" id="shipping[city]" name="shipping[city]" v-model="address.shipping.city" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;"/>
-
-        <span class="control-error" v-if="errors.has('address-form.shipping[city]')">
-            @{{ errors.first('address-form.shipping[city]') }}
-        </span>
-    </div>
-
-    <div class="row col-12" :class="[errors.has('address-form.shipping[state]') ? 'has-error' : '']">
-        <label for="shipping[state]" class="required">
-            {{ __('shop::app.checkout.onepage.state') }}
-        </label>
-
-
-        <input type="text" v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="address.shipping.state" v-if="!haveStates('shipping')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"/>
-
-        <select v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="address.shipping.state" v-if="haveStates('shipping')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
-
-            <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
-
-            <option v-for='(state, index) in countryStates[address.shipping.country]' :value="state.code">
-                @{{ state.default_name }}
-            </option>
-
-        </select>
-
-        <span class="control-error" v-if="errors.has('address-form.shipping[state]')">
-            @{{ errors.first('address-form.shipping[state]') }}
-        </span>
-    </div>
-
-    <div class="row col-12" :class="[errors.has('address-form.shipping[postcode]') ? 'has-error' : '']">
-        <label for="shipping[postcode]" class="required">
-            {{ __('shop::app.checkout.onepage.postcode') }}
-        </label>
-
-        <input type="text" v-validate="'required'" class="control" id="shipping[postcode]" name="shipping[postcode]" v-model="address.shipping.postcode" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;"/>
-
-        <span class="control-error" v-if="errors.has('address-form.shipping[postcode]')">
-            @{{ errors.first('address-form.shipping[postcode]') }}
-        </span>
-    </div>
-
-    <div class="row col-12" :class="[errors.has('address-form.shipping[country]') ? 'has-error' : '']">
-        <label for="shipping[country]" class="required">
-            {{ __('shop::app.checkout.onepage.country') }}
-        </label>
-
-        <select type="text" v-validate="'required'" class="control" id="shipping[country]" name="shipping[country]" v-model="address.shipping.country" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
-            <option value=""></option>
-
-            @foreach (core()->countries() as $country)
-                <option value="{{ $country->code }}">{{ $country->name }}</option>
-            @endforeach
-        </select>
-
-        <span class="control-error" v-if="errors.has('address-form.shipping[country]')">
-            @{{ errors.first('address-form.shipping[country]') }}
-        </span>
-    </div>
-
-    <div class="row col-12" :class="[errors.has('address-form.shipping[phone]') ? 'has-error' : '']">
-        <label for="shipping[phone]" class="required">
-            {{ __('shop::app.checkout.onepage.phone') }}
-        </label>
-
-        <input type="text" v-validate="'required'" class="control" id="shipping[phone]" name="shipping[phone]" v-model="address.shipping.phone" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;"/>
-
-        <span class="control-error" v-if="errors.has('address-form.shipping[phone]')">
-            @{{ errors.first('address-form.shipping[phone]') }}
-        </span>
-    </div>
-
-    @auth('customer')
-        <div class="mb10">
-            <span class="checkbox fs16 display-inbl no-margin">
-                <input
-                    type="checkbox"
-                    class="ml0"
-                    id="shipping[save_as_address]"
-                    name="shipping[save_as_address]" v-model="address.shipping.save_as_address"/>
-
-                <span class="ml-5">
-                    {{ __('shop::app.checkout.onepage.save_as_address') }}
-                </span>
+            <span class="control-error" v-if="errors.has('address-form.shipping[first_name]')">
+                @{{ errors.first('address-form.shipping[first_name]') }}
             </span>
         </div>
-    @endauth
 
-@elseif (isset($billing) && $billing)
+        <div :class="`row col-12 ${errors.has('address-form.shipping[last_name]') ? 'has-error' : ''}`">
+            <label for="shipping[last_name]" class="required">
+                {{ __('shop::app.checkout.onepage.last-name') }}*
+            </label>
 
-    <div :class="`row col-12 ${errors.has('address-form.billing[email]') ? 'has-error' : ''}`">
+            <input
+                type="text"
+                class="control"
+                v-validate="'required'"
+                id="shipping[last_name]"
+                name="shipping[last_name]"
+                v-model="address.shipping.last_name"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;" />
 
-        <label for="billing[email]" class="required">
-            {{ __('shop::app.checkout.onepage.email') }}
-        </label>
-
-        <input
-            type="text"
-            class="control"
-            id="billing[email]"
-            name="billing[email]"
-            @blur="isCustomerExist"
-            v-validate="'required|email'"
-            v-model="address.billing.email"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;" />
-
-        <span class="control-error" v-if="errors.has('address-form.billing[email]')">
-            @{{ errors.first('address-form.billing[email]') }}
-        </span>
-    </div>
-
-    {{--  for customer login checkout   --}}
-    @if (! $isCustomer)
-        @include('shop::checkout.onepage.customer-checkout')
-    @endif
-
-    <div :class="`row col-12 ${errors.has('address-form.billing[first_name]') ? 'has-error' : ''}`">
-        <label for="billing[first_name]" class="required">
-            {{ __('shop::app.checkout.onepage.first-name') }}
-        </label>
-
-        <input
-            type="text"
-            class="control"
-            v-validate="'required'"
-            id="billing[first_name]"
-            name="billing[first_name]"
-            v-model="address.billing.first_name"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;" />
-
-        <span class="control-error" v-if="errors.has('address-form.billing[first_name]')">
-            @{{ errors.first('address-form.billing[first_name]') }}
-        </span>
-    </div>
-
-    <div :class="`row col-12 ${errors.has('address-form.billing[last_name]') ? 'has-error' : ''}`">
-        <label for="billing[last_name]" class="required">
-            {{ __('shop::app.checkout.onepage.last-name') }}
-        </label>
-
-        <input
-            type="text"
-            v-validate="'required'"
-            class="control"
-            id="billing[last_name]"
-            name="billing[last_name]"
-            v-model="address.billing.last_name"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;" />
-
-        <span class="control-error" v-if="errors.has('address-form.billing[last_name]')">
-            @{{ errors.first('address-form.billing[last_name]') }}
-        </span>
-    </div>
-
-    <div :class="`row col-12 ${errors.has('address-form.billing[address1][]') ? 'has-error' : ''}`">
-        <label for="billing_address_0" class="required">
-            {{ __('shop::app.checkout.onepage.address1') }}
-        </label>
-
-        <input
-            type="text"
-            class="control"
-            v-validate="'required'"
-            id="billing_address_0"
-            name="billing[address1][]"
-            v-model="address.billing.address1[0]"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;" />
-
-        <span class="control-error" v-if="errors.has('address-form.billing[address1][]')">
-            @{{ errors.first('address-form.billing[address1][]') }}
-        </span>
-    </div>
-
-    @if (core()->getConfigData('customer.settings.address.street_lines') && core()->getConfigData('customer.settings.address.street_lines') > 1)
-        <div class="row col-12" style="margin-top: -25px;">
-            @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
-                <input
-                    type="text"
-                    class="control"
-                    id="billing_address_{{ $i }}"
-                    name="billing[address1][{{ $i }}]"
-                    v-model="address.billing.address1[{{$i}}]" />
-            @endfor
-        </div>
-    @endif
-
-    <div :class="`row col-12 ${errors.has('address-form.billing[city]') ? 'has-error' : ''}`">
-        <label for="billing[city]" class="required">
-            {{ __('shop::app.checkout.onepage.city') }}
-        </label>
-
-        <input
-            type="text"
-            class="control"
-            id="billing[city]"
-            name="billing[city]"
-            v-validate="'required'"
-            v-model="address.billing.city"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;" />
-
-        <span class="control-error" v-if="errors.has('address-form.billing[city]')">
-            @{{ errors.first('address-form.billing[city]') }}
-        </span>
-    </div>
-
-    <div :class="`row col-12 ${errors.has('address-form.billing[country]') ? 'has-error' : ''}`">
-        <label for="billing[country]" class="required">
-            {{ __('shop::app.checkout.onepage.country') }}
-        </label>
-
-        <select
-            type="text"
-            class="control"
-            id="billing[country]"
-            name="billing[country]"
-            v-validate="'required'"
-            v-model="address.billing.country"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
-
-            <option value=""></option>
-
-            @foreach (core()->countries() as $country)
-
-                <option value="{{ $country->code }}">{{ $country->name }}</option>
-
-            @endforeach
-        </select>
-
-        <span class="control-error" v-if="errors.has('address-form.billing[country]')">
-            @{{ errors.first('address-form.billing[country]') }}
-        </span>
-    </div>
-
-    <div :class="`row col-12 ${errors.has('address-form.billing[state]') ? 'has-error' : ''}`">
-        <label for="billing[state]" class="required">
-            {{ __('shop::app.checkout.onepage.state') }}
-        </label>
-
-        <input
-            type="text"
-            class="control"
-            id="billing[state]"
-            name="billing[state]"
-            v-validate="'required'"
-            v-if="!haveStates('billing')"
-            v-model="address.billing.state"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;" />
-
-        <select
-            class="control"
-            id="billing[state]"
-            name="billing[state]"
-            v-validate="'required'"
-            v-if="haveStates('billing')"
-            v-model="address.billing.state"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
-
-            <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
-
-            <option v-for='(state, index) in countryStates[address.billing.country]' :value="state.code">
-                @{{ state.default_name }}
-            </option>
-
-        </select>
-
-        <span class="control-error" v-if="errors.has('address-form.billing[state]')">
-            @{{ errors.first('address-form.billing[state]') }}
-        </span>
-    </div>
-
-    <div :class="`row col-12 ${errors.has('address-form.billing[postcode]') ? 'has-error' : ''}`">
-        <label for="billing[postcode]" class="required">
-            {{ __('shop::app.checkout.onepage.postcode') }}
-        </label>
-
-        <input
-            type="text"
-            class="control"
-            id="billing[postcode]"
-            v-validate="'required'"
-            name="billing[postcode]"
-            v-model="address.billing.postcode"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;" />
-
-        <span class="control-error" v-if="errors.has('address-form.billing[postcode]')">
-            @{{ errors.first('address-form.billing[postcode]') }}
-        </span>
-    </div>
-
-    <div :class="`row col-12 ${errors.has('address-form.billing[phone]') ? 'has-error' : ''}`">
-        <label for="billing[phone]" class="required">
-            {{ __('shop::app.checkout.onepage.phone') }}
-        </label>
-
-        <input
-            type="text"
-            class="control"
-            id="billing[phone]"
-            name="billing[phone]"
-            v-validate="'required'"
-            v-model="address.billing.phone"
-            @change="validateForm('address-form')"
-            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;" />
-
-        <span class="control-error" v-if="errors.has('address-form.billing[phone]')">
-            @{{ errors.first('address-form.billing[phone]') }}
-        </span>
-    </div>
-
-    @if ($cart->haveStockableItems())
-        <div class="mb10">
-            <span class="checkbox fs16 display-inbl no-margin">
-                <input
-                    class="ml0"
-                    type="checkbox"
-                    @change="validateForm('address-form')"
-                    id="billing[use_for_shipping]"
-                    name="billing[use_for_shipping]"
-                    v-model="address.billing.use_for_shipping" />
-
-                <span class="ml-5">
-                    {{ __('shop::app.checkout.onepage.use_for_shipping') }}
-                </span>
+            <span class="control-error" v-if="errors.has('address-form.shipping[last_name]')">
+                @{{ errors.first('address-form.shipping[last_name]') }}
             </span>
         </div>
-    @endif
 
-    @auth('customer')
-        <div class="mb10">
-            <span class="checkbox fs16 display-inbl no-margin">
-                <input
-                    class="ml0"
-                    type="checkbox"
-                    id="billing[save_as_address]"
-                    name="billing[save_as_address]" v-model="address.billing.save_as_address"/>
+        <div :class="`row col-12 ${errors.has('address-form.shipping[email]') ? 'has-error' : ''}`">
+            <label for="shipping[email]" class="required">
+                {{ __('shop::app.checkout.onepage.email') }}*
+            </label>
 
-                <span class="ml-5">
-                    {{ __('shop::app.checkout.onepage.save_as_address') }}
-                </span>
+            <input
+                type="text"
+                class="control"
+                id="shipping[email]"
+                name="shipping[email]"
+                v-validate="'required|email'"
+                v-model="address.shipping.email"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[email]')">
+                @{{ errors.first('address-form.shipping[email]') }}
             </span>
         </div>
-        @php
-        @endphp
-    @endauth
-@endif
+
+        <div :class="`row col-12 ${errors.has('address-form.shipping[address1][]') ? 'has-error' : ''}`">
+            <label for="shipping_address_0" class="required">
+                {{ __('shop::app.checkout.onepage.address1') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                v-validate="'required'"
+                id="shipping_address_0"
+                name="shipping[address1][]"
+                v-model="address.shipping.address1[0]"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[address1][]')">
+                @{{ errors.first('address-form.shipping[address1][]') }}
+            </span>
+        </div>
+
+        @if (
+            core()->getConfigData('customer.settings.address.street_lines')
+            && core()->getConfigData('customer.settings.address.street_lines') > 1
+        )
+            <div class="row col-12">
+                @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                    <input
+                        type="text"
+                        class="control"
+                        id="shipping_address_{{ $i }}"
+                        name="shipping[address1][{{ $i }}]"
+                        v-model="address.shipping.address1[{{$i}}]" />
+                @endfor
+            </div>
+        @endif
+
+        <div :class="`row col-12 ${errors.has('address-form.shipping[city]') ? 'has-error' : ''}`">
+            <label for="shipping[city]" class="required">
+                {{ __('shop::app.checkout.onepage.city') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="shipping[city]"
+                name="shipping[city]"
+                v-validate="'required'"
+                v-model="address.shipping.city"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[city]')">
+                @{{ errors.first('address-form.shipping[city]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.shipping[country]') ? 'has-error' : ''}`">
+            <label for="shipping[country]" class="required">
+                {{ __('shop::app.checkout.onepage.country') }}*
+            </label>
+
+            <select
+                type="text"
+                id="shipping[country]"
+                v-validate="'required'"
+                name="shipping[country]"
+                class="control styled-select"
+                v-model="address.shipping.country"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
+
+                <option value=""></option>
+
+                @foreach (core()->countries() as $country)
+                    <option value="{{ $country->code }}">{{ $country->name }}</option>
+                @endforeach
+            </select>
+            <i class="select-icon rango-arrow-down"></i>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[country]')">
+                @{{ errors.first('address-form.shipping[country]') }}
+            </span>
+        </div>
+
+
+        <div :class="`row col-12 ${errors.has('address-form.shipping[state]') ? 'has-error' : ''}`">
+            <label for="shipping[state]" class="required">
+                {{ __('shop::app.checkout.onepage.state') }}*
+            </label>
+
+
+            <input
+                type="text"
+                class="control"
+                id="shipping[state]"
+                name="shipping[state]"
+                v-validate="'required'"
+                v-if="!haveStates('shipping')"
+                v-model="address.shipping.state"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;" />
+
+            <select
+                id="shipping[state]"
+                name="shipping[state]"
+                v-validate="'required'"
+                class="control styled-select"
+                v-if="haveStates('shipping')"
+                v-model="address.shipping.state"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
+
+                <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
+
+                <option v-for='(state, index) in countryStates[address.shipping.country]' :value="state.code">
+                    @{{ state.default_name }}
+                </option>
+            </select>
+            <i v-if="haveStates('shipping')" class="select-icon rango-arrow-down"></i>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[state]')">
+                @{{ errors.first('address-form.shipping[state]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.shipping[postcode]') ? 'has-error' : ''}`">
+            <label for="shipping[postcode]" class="required">
+                {{ __('shop::app.checkout.onepage.postcode') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="shipping[postcode]"
+                v-validate="'required'"
+                name="shipping[postcode]"
+                v-model="address.shipping.postcode"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[postcode]')">
+                @{{ errors.first('address-form.shipping[postcode]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.shipping[phone]') ? 'has-error' : ''}`">
+            <label for="shipping[phone]" class="required">
+                {{ __('shop::app.checkout.onepage.phone') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="shipping[phone]"
+                name="shipping[phone]"
+                v-validate="'required'"
+                v-model="address.shipping.phone"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[phone]')">
+                @{{ errors.first('address-form.shipping[phone]') }}
+            </span>
+        </div>
+
+        @auth('customer')
+            <div class="mb10">
+                <span class="checkbox fs16 display-inbl no-margin">
+                    <input
+                        class="ml0"
+                        type="checkbox"
+                        id="shipping[save_as_address]"
+                        name="shipping[save_as_address]"
+                        v-model="address.shipping.save_as_address"/>
+
+                    <span class="ml-5">
+                        {{ __('shop::app.checkout.onepage.save_as_address') }}
+                    </span>
+                </span>
+            </div>
+        @endauth
+
+    @elseif (isset($billing) && $billing)
+        <div :class="`row col-12 ${errors.has('address-form.billing[email]') ? 'has-error' : ''}`">
+            <label for="billing[email]" class="required">
+                {{ __('shop::app.checkout.onepage.email') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="billing[email]"
+                name="billing[email]"
+                @blur="isCustomerExist"
+                v-validate="'required|email'"
+                v-model="address.billing.email"
+                @change="validateForm('address-form')"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.billing[email]')">
+                @{{ errors.first('address-form.billing[email]') }}
+            </span>
+        </div>
+
+        {{--  for customer login checkout   --}}
+        @if (! $isCustomer)
+            @include('shop::checkout.onepage.customer-checkout')
+        @endif
+
+        <div :class="`row col-12 ${errors.has('address-form.billing[first_name]') ? 'has-error' : ''}`">
+            <label for="billing[first_name]" class="required">
+                {{ __('shop::app.checkout.onepage.first-name') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                v-validate="'required'"
+                id="billing[first_name]"
+                name="billing[first_name]"
+                v-model="address.billing.first_name"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.billing[first_name]')">
+                @{{ errors.first('address-form.billing[first_name]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.billing[last_name]') ? 'has-error' : ''}`">
+            <label for="billing[last_name]" class="required">
+                {{ __('shop::app.checkout.onepage.last-name') }}*
+            </label>
+
+            <input
+                type="text"
+                v-validate="'required'"
+                class="control"
+                id="billing[last_name]"
+                name="billing[last_name]"
+                v-model="address.billing.last_name"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.billing[last_name]')">
+                @{{ errors.first('address-form.billing[last_name]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.billing[address1][]') ? 'has-error' : ''}`">
+            <label for="billing_address_0" class="required">
+                {{ __('shop::app.checkout.onepage.address1') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                v-validate="'required'"
+                id="billing_address_0"
+                name="billing[address1][]"
+                v-model="address.billing.address1[0]"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.billing[address1][]')">
+                @{{ errors.first('address-form.billing[address1][]') }}
+            </span>
+        </div>
+
+        @if (
+            core()->getConfigData('customer.settings.address.street_lines')
+            && core()->getConfigData('customer.settings.address.street_lines') > 1
+        )
+            <div class="row col-12" style="margin-top: -25px;">
+                @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                    <input
+                        type="text"
+                        class="control"
+                        id="billing_address_{{ $i }}"
+                        name="billing[address1][{{ $i }}]"
+                        v-model="address.billing.address1[{{$i}}]" />
+                @endfor
+            </div>
+        @endif
+
+        <div :class="`row col-12 ${errors.has('address-form.billing[city]') ? 'has-error' : ''}`">
+            <label for="billing[city]" class="required">
+                {{ __('shop::app.checkout.onepage.city') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="billing[city]"
+                name="billing[city]"
+                v-validate="'required'"
+                v-model="address.billing.city"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.billing[city]')">
+                @{{ errors.first('address-form.billing[city]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.billing[country]') ? 'has-error' : ''}`">
+            <label for="billing[country]" class="required">
+                {{ __('shop::app.checkout.onepage.country') }}*
+            </label>
+
+            <select
+                type="text"
+                id="billing[country]"
+                name="billing[country]"
+                v-validate="'required'"
+                class="control styled-select"
+                v-model="address.billing.country"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
+
+                <option value=""></option>
+
+                @foreach (core()->countries() as $country)
+                    <option value="{{ $country->code }}">{{ $country->name }}</option>
+                @endforeach
+            </select>
+            <i class="select-icon rango-arrow-down"></i>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[country]')">
+                @{{ errors.first('address-form.billing[country]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.billing[state]') ? 'has-error' : ''}`">
+            <label for="billing[state]" class="required">
+                {{ __('shop::app.checkout.onepage.state') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="billing[state]"
+                name="billing[state]"
+                v-validate="'required'"
+                v-if="!haveStates('billing')"
+                v-model="address.billing.state"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;" />
+
+            <select
+                id="billing[state]"
+                name="billing[state]"
+                v-validate="'required'"
+                v-if="haveStates('billing')"
+                class="control styled-select"
+                v-model="address.billing.state"
+                @change="validateForm('address-form')"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
+
+                <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
+
+                <option v-for='(state, index) in countryStates[address.billing.country]' :value="state.code">
+                    @{{ state.default_name }}
+                </option>
+            </select>
+            <i v-if="haveStates('billing')" class="select-icon rango-arrow-down"></i>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[state]')">
+                @{{ errors.first('address-form.billing[state]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.billing[postcode]') ? 'has-error' : ''}`">
+            <label for="billing[postcode]" class="required">
+                {{ __('shop::app.checkout.onepage.postcode') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="billing[postcode]"
+                v-validate="'required'"
+                name="billing[postcode]"
+                v-model="address.billing.postcode"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.billing[postcode]')">
+                @{{ errors.first('address-form.billing[postcode]') }}
+            </span>
+        </div>
+
+        <div :class="`row col-12 ${errors.has('address-form.billing[phone]') ? 'has-error' : ''}`">
+            <label for="billing[phone]" class="required">
+                {{ __('shop::app.checkout.onepage.phone') }}*
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="billing[phone]"
+                name="billing[phone]"
+                v-validate="'required'"
+                v-model="address.billing.phone"
+                @change="validateForm('address-form')"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.billing[phone]')">
+                @{{ errors.first('address-form.billing[phone]') }}
+            </span>
+        </div>
+
+        @if ($cart->haveStockableItems())
+            <div class="mb10">
+                <span class="checkbox fs16 display-inbl no-margin">
+                    <input
+                        class="ml0"
+                        type="checkbox"
+                        @change="validateForm('address-form')"
+                        id="billing[use_for_shipping]"
+                        name="billing[use_for_shipping]"
+                        v-model="address.billing.use_for_shipping" />
+
+                    <span class="ml-5">
+                        {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+                    </span>
+                </span>
+            </div>
+        @endif
+
+        @auth('customer')
+            <div class="mb10">
+                <span class="checkbox fs16 display-inbl no-margin">
+                    <input
+                        class="ml0"
+                        type="checkbox"
+                        id="billing[save_as_address]"
+                        name="billing[save_as_address]" v-model="address.billing.save_as_address"/>
+
+                    <span class="ml-5">
+                        {{ __('shop::app.checkout.onepage.save_as_address') }}
+                    </span>
+                </span>
+            </div>
+            @php
+            @endphp
+        @endauth
+    @endif
+</form>
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/payment.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/payment.blade.php
index bf9eb10ca..084653e5c 100755
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/payment.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/payment.blade.php
@@ -1,53 +1,56 @@
 <form data-vv-scope="payment-form" class="payment-form">
     <div class="form-container">
-        <div class="form-header mb-30">
-            <h3 class="fw6 display-inbl">
-                3. {{ __('shop::app.checkout.onepage.payment-methods') }}
-            </h3>
-        </div>
+        <accordian :title="'{{ __('shop::app.checkout.payment-methods') }}'" :active="true">
+            <div class="form-header mb-30" slot="header">
+                <h3 class="fw6 display-inbl">
+                    3. {{ __('shop::app.checkout.onepage.payment-methods') }}
+                </h3>
+                <i class="rango-arrow"></i>
+            </div>
 
-        <div class="payment-methods">
-            @foreach ($paymentMethods as $payment)
+            <div class="payment-methods" slot="body">
+                @foreach ($paymentMethods as $payment)
 
-                {!! view_render_event('bagisto.shop.checkout.payment-method.before', ['payment' => $payment]) !!}
+                    {!! view_render_event('bagisto.shop.checkout.payment-method.before', ['payment' => $payment]) !!}
 
-                <div class="row col-12">
-                    <div>
-                        <label class="radio-container">
-                            <input
-                                v-validate="'required'"
-                                type="radio"
-                                id="{{ $payment['method'] }}"
-                                name="payment[method]"
-                                value="{{ $payment['method'] }}"
-                                v-model="payment.method"
-                                @change="methodSelected()"
-                                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.payment-method') }}&quot;" />
+                    <div class="row col-12">
+                        <div>
+                            <label class="radio-container">
+                                <input
+                                    v-validate="'required'"
+                                    type="radio"
+                                    id="{{ $payment['method'] }}"
+                                    name="payment[method]"
+                                    value="{{ $payment['method'] }}"
+                                    v-model="payment.method"
+                                    @change="methodSelected()"
+                                    data-vv-as="&quot;{{ __('shop::app.checkout.onepage.payment-method') }}&quot;" />
 
-                            <span class="checkmark"></span>
-                        </label>
-                    </div>
-
-                    <div class="pl30">
-                        <div class="row">
-                            <span class="payment-method method-label">
-                                <b>{{ $payment['method_title'] }}</b>
-                            </span>
+                                <span class="checkmark"></span>
+                            </label>
                         </div>
 
-                        <div class="row">
-                            <span class="method-summary">{{ __($payment['description']) }}</span>
+                        <div class="pl30">
+                            <div class="row">
+                                <span class="payment-method method-label">
+                                    <b>{{ $payment['method_title'] }}</b>
+                                </span>
+                            </div>
+
+                            <div class="row">
+                                <span class="method-summary">{{ __($payment['description']) }}</span>
+                            </div>
                         </div>
                     </div>
-                </div>
 
-                {!! view_render_event('bagisto.shop.checkout.payment-method.after', ['payment' => $payment]) !!}
+                    {!! view_render_event('bagisto.shop.checkout.payment-method.after', ['payment' => $payment]) !!}
 
-            @endforeach
+                @endforeach
 
-            <span class="control-error" v-if="errors.has('payment-form.payment[method]')">
-                @{{ errors.first('payment-form.payment[method]') }}
-            </span>
-        </div>
+                <span class="control-error" v-if="errors.has('payment-form.payment[method]')">
+                    @{{ errors.first('payment-form.payment[method]') }}
+                </span>
+            </div>
+        </accordian>
     </div>
 </form>
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/review.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/review.blade.php
index 34906bb6e..8140d29a6 100755
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/review.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/review.blade.php
@@ -1,167 +1,172 @@
 @inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage')
 
 <div class="form-container review-checkout-conainer">
-    <div class="form-header mb-30">
-        <h3 class="fw6 display-inbl">
-            4. {{ __('shop::app.checkout.onepage.summary') }}
-        </h3>
-    </div>
+    <accordian :title="'{{ __('shop::app.checkout.onepage.summary') }}'" :active="true">
+        <div class="form-header mb-30" slot="header">
+            <h3 class="fw6 display-inbl">
+                4. {{ __('shop::app.checkout.onepage.summary') }}
+            </h3>
+            <i class="rango-arrow"></i>
+        </div>
 
-    <div class="address-summary row">
-        @if ($billingAddress = $cart->billing_address)
-            <div class="billing-address col-6">
-                <div class="card-title mb-20">
-                    <b>{{ __('shop::app.checkout.onepage.billing-address') }}</b>
-                </div>
-
-                <div class="card-content">
-                    <ul type="none">
-                        <li>
-                            {{ $billingAddress->name }}
-                        </li><br />
-                        <li>
-                            {{ $billingAddress->address1 }}, <br />{{ $billingAddress->state }}
-                        </li><br />
-                        <li>
-                            {{ core()->country_name($billingAddress->country) }} {{ $billingAddress->postcode }}
-                        </li><br />
-
-                        <li>
-                            {{ __('shop::app.checkout.onepage.contact') }} : {{ $billingAddress->phone }}
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        @endif
-
-        @if ($cart->haveStockableItems() && $shippingAddress = $cart->shipping_address)
-            <div class="shipping-address col-6">
-                <div class="card-title mb-20">
-                    <b>{{ __('shop::app.checkout.onepage.shipping-address') }}</b>
-                </div>
-
-                <div class="card-content">
-                    <ul>
-                        <li>
-                            {{ $shippingAddress->name }}
-                        </li><br/>
-                        <li>
-                            {{ $shippingAddress->address1 }},<br/> {{ $shippingAddress->state }}
-                        </li><br/>
-                        <li>
-                            {{ core()->country_name($shippingAddress->country) }} {{ $shippingAddress->postcode }}
-                        </li><br/>
-
-                        <li>
-                            {{ __('shop::app.checkout.onepage.contact') }} : {{ $shippingAddress->phone }}
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        @endif
-
-    </div>
-
-    <div class="cart-item-list">
-        <h4 class="fw6">{{ __('velocity::app.checkout.items') }}</h4>
-
-        @foreach ($cart->items as $item)
-            @php
-                $productBaseImage = $item->product->getTypeInstance()->getBaseImage($item);
-            @endphp
-
-            <div class="row col-12 no-padding">
-                <div class="col-2 max-sm-img-dimention">
-                    <img src="{{ $productBaseImage['medium_image_url'] }}" />
-                </div>
-
-                <div class="col-10 no-padding fs16">
-
-                    {!! view_render_event('bagisto.shop.checkout.name.before', ['item' => $item]) !!}
-
-                        <div class="row fs20">
-                            <span class="col-12 link-color fw6">{{ $item->product->name }}</span>
+        <div slot="body">
+            <div class="address-summary row">
+                @if ($billingAddress = $cart->billing_address)
+                    <div class="billing-address col-6">
+                        <div class="card-title mb-20">
+                            <b>{{ __('shop::app.checkout.onepage.billing-address') }}</b>
                         </div>
 
-                    {!! view_render_event('bagisto.shop.checkout.name.after', ['item' => $item]) !!}
+                        <div class="card-content">
+                            <ul type="none">
+                                <li>
+                                    {{ $billingAddress->name }}
+                                </li><br />
+                                <li>
+                                    {{ $billingAddress->address1 }}, <br />{{ $billingAddress->state }}
+                                </li><br />
+                                <li>
+                                    {{ core()->country_name($billingAddress->country) }} {{ $billingAddress->postcode }}
+                                </li><br />
 
-                    <div class="row col-12">
-                        {!! view_render_event('bagisto.shop.checkout.price.before', ['item' => $item]) !!}
-                                <span class="value">
-                                    {{ core()->currency($item->base_price) }}
-                                </span>
-                        {!! view_render_event('bagisto.shop.checkout.price.after', ['item' => $item]) !!}
-
-                        <i class="rango-close text-down-4"></i>
-
-                        {!! view_render_event('bagisto.shop.checkout.quantity.before', ['item' => $item]) !!}
-                            <span class="value">
-                                {{ $item->quantity }} ({{ __('shop::app.checkout.onepage.quantity') }})
-                            </span>
-                        {!! view_render_event('bagisto.shop.checkout.quantity.after', ['item' => $item]) !!}
+                                <li>
+                                    {{ __('shop::app.checkout.onepage.contact') }} : {{ $billingAddress->phone }}
+                                </li>
+                            </ul>
+                        </div>
                     </div>
+                @endif
 
-                    <div class="row col-12">
-                        <b>{{ core()->currency($item->base_total) }}</b>
+                @if ($cart->haveStockableItems() && $shippingAddress = $cart->shipping_address)
+                    <div class="shipping-address col-6">
+                        <div class="card-title mb-20">
+                            <b>{{ __('shop::app.checkout.onepage.shipping-address') }}</b>
+                        </div>
+
+                        <div class="card-content">
+                            <ul>
+                                <li>
+                                    {{ $shippingAddress->name }}
+                                </li><br/>
+                                <li>
+                                    {{ $shippingAddress->address1 }},<br/> {{ $shippingAddress->state }}
+                                </li><br/>
+                                <li>
+                                    {{ core()->country_name($shippingAddress->country) }} {{ $shippingAddress->postcode }}
+                                </li><br/>
+
+                                <li>
+                                    {{ __('shop::app.checkout.onepage.contact') }} : {{ $shippingAddress->phone }}
+                                </li>
+                            </ul>
+                        </div>
                     </div>
+                @endif
 
-                    {!! view_render_event('bagisto.shop.checkout.options.before', ['item' => $item]) !!}
+            </div>
 
-                        @if (isset($item->additional['attributes']))
-                            <div class="item-options">
+            <div class="cart-item-list">
+                <h4 class="fw6">{{ __('velocity::app.checkout.items') }}</h4>
 
-                                @foreach ($item->additional['attributes'] as $attribute)
-                                    <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
-                                @endforeach
+                @foreach ($cart->items as $item)
+                    @php
+                        $productBaseImage = $item->product->getTypeInstance()->getBaseImage($item);
+                    @endphp
 
+                    <div class="row col-12 no-padding">
+                        <div class="col-2 max-sm-img-dimention">
+                            <img src="{{ $productBaseImage['medium_image_url'] }}" />
+                        </div>
+
+                        <div class="col-10 no-padding fs16">
+
+                            {!! view_render_event('bagisto.shop.checkout.name.before', ['item' => $item]) !!}
+
+                                <div class="row fs20">
+                                    <span class="col-12 link-color fw6">{{ $item->product->name }}</span>
+                                </div>
+
+                            {!! view_render_event('bagisto.shop.checkout.name.after', ['item' => $item]) !!}
+
+                            <div class="row col-12">
+                                {!! view_render_event('bagisto.shop.checkout.price.before', ['item' => $item]) !!}
+                                        <span class="value">
+                                            {{ core()->currency($item->base_price) }}
+                                        </span>
+                                {!! view_render_event('bagisto.shop.checkout.price.after', ['item' => $item]) !!}
+
+                                <i class="rango-close text-down-4"></i>
+
+                                {!! view_render_event('bagisto.shop.checkout.quantity.before', ['item' => $item]) !!}
+                                    <span class="value">
+                                        {{ $item->quantity }} ({{ __('shop::app.checkout.onepage.quantity') }})
+                                    </span>
+                                {!! view_render_event('bagisto.shop.checkout.quantity.after', ['item' => $item]) !!}
                             </div>
-                        @endif
 
-                    {!! view_render_event('bagisto.shop.checkout.options.after', ['item' => $item]) !!}
-                </div>
-            </div>
-        @endforeach
-    </div>
+                            <div class="row col-12">
+                                <b>{{ core()->currency($item->base_total) }}</b>
+                            </div>
 
-    <div class="order-description row fs16 cart-details">
-        <div class="col-4">
-            @if ($cart->haveStockableItems())
-                <div class="shipping mb20">
-                    <div class="decorator">
-                        <i class="icon shipping-icon"></i>
-                    </div>
+                            {!! view_render_event('bagisto.shop.checkout.options.before', ['item' => $item]) !!}
 
-                    <div class="text">
-                        <h4 class="fw6 fs18">
-                            {{ core()->currency($cart->selected_shipping_rate->base_price) }}
-                        </h4>
+                                @if (isset($item->additional['attributes']))
+                                    <div class="item-options">
 
-                        <div class="info">
-                            {{ $cart->selected_shipping_rate->method_title }}
+                                        @foreach ($item->additional['attributes'] as $attribute)
+                                            <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                        @endforeach
+
+                                    </div>
+                                @endif
+
+                            {!! view_render_event('bagisto.shop.checkout.options.after', ['item' => $item]) !!}
                         </div>
                     </div>
-                </div>
-            @endif
-
-            <div class="payment mb20">
-                <div class="decorator">
-                    <i class="icon payment-icon"></i>
-                </div>
-
-                <div class="text">
-                    <h4 class="fw6 fs18">
-                        {{ core()->getConfigData('sales.paymentmethods.' . $cart->payment->method . '.title') }}
-                    </h4>
-
-                    <span>{{ __('shop::app.customer.account.order.view.payment-method') }}</span>
-                </div>
+                @endforeach
             </div>
 
-            <slot name="place-order-btn"></slot>
-        </div>
+            <div class="order-description row fs16 cart-details">
+                <div class="col-4">
+                    @if ($cart->haveStockableItems())
+                        <div class="shipping mb20">
+                            <div class="decorator">
+                                <i class="icon shipping-icon"></i>
+                            </div>
 
-        <div class="col-6 order-summary-container bottom pt0 offset-2">
-            <slot name="summary-section"></slot>
+                            <div class="text">
+                                <h4 class="fw6 fs18">
+                                    {{ core()->currency($cart->selected_shipping_rate->base_price) }}
+                                </h4>
+
+                                <div class="info">
+                                    {{ $cart->selected_shipping_rate->method_title }}
+                                </div>
+                            </div>
+                        </div>
+                    @endif
+
+                    <div class="payment mb20">
+                        <div class="decorator">
+                            <i class="icon payment-icon"></i>
+                        </div>
+
+                        <div class="text">
+                            <h4 class="fw6 fs18">
+                                {{ core()->getConfigData('sales.paymentmethods.' . $cart->payment->method . '.title') }}
+                            </h4>
+
+                            <span>{{ __('shop::app.customer.account.order.view.payment-method') }}</span>
+                        </div>
+                    </div>
+
+                    <slot name="place-order-btn"></slot>
+                </div>
+
+                <div class="col-6 order-summary-container bottom pt0 offset-2">
+                    <slot name="summary-section"></slot>
+                </div>
+            </div>
         </div>
-    </div>
+    </accordian>
 </div>
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/shipping.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/shipping.blade.php
index 60f42ae63..7e6e26a05 100755
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/shipping.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/shipping.blade.php
@@ -1,59 +1,60 @@
 <form data-vv-scope="shipping-form" class="shipping-form">
     <div class="form-container">
-        <div class="form-header">
-            <h3 class="fw6 display-inbl">
-                2. {{ __('shop::app.checkout.onepage.shipping-method') }}
-            </h3>
-        </div>
+        <accordian :title="'{{ __('shop::app.checkout.onepage.shipping-method') }}'" :active="true">
+            <div class="form-header" slot="header">
+                <h3 class="fw6 display-inbl">
+                    2. {{ __('shop::app.checkout.onepage.shipping-method') }}
+                </h3>
+                <i class="rango-arrow"></i>
+            </div>
 
-        <div
-            class="shipping-methods"
-            :class="[errors.has('shipping-form.shipping_method') ? 'has-error' : '']">
+            <div :class="`shipping-methods ${errors.has('shipping-form.shipping_method') ? 'has-error' : ''}`" slot="body">
 
-            @foreach ($shippingRateGroups as $rateGroup)
+                @foreach ($shippingRateGroups as $rateGroup)
 
-                {!! view_render_event('bagisto.shop.checkout.shipping-method.before', ['rateGroup' => $rateGroup]) !!}
-                    @foreach ($rateGroup['rates'] as $rate)
-                        <div class="row col-12">
-                            <div>
-                                <label class="radio-container">
-                                    <input
-                                        v-validate="'required'"
-                                        type="radio"
-                                        id="{{ $rate->method }}"
-                                        name="shipping_method"
-                                        data-vv-as="&quot;{{ __('shop::app.checkout.onepage.shipping-method') }}&quot;"
-                                        value="{{ $rate->method }}"
-                                        v-model="selected_shipping_method"
-                                        @change="methodSelected()" />
+                    {!! view_render_event('bagisto.shop.checkout.shipping-method.before', ['rateGroup' => $rateGroup]) !!}
+                        @foreach ($rateGroup['rates'] as $rate)
+                            <div class="row col-12">
+                                <div>
+                                    <label class="radio-container">
+                                        <input
+                                            v-validate="'required'"
+                                            type="radio"
+                                            id="{{ $rate->method }}"
+                                            name="shipping_method"
+                                            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.shipping-method') }}&quot;"
+                                            value="{{ $rate->method }}"
+                                            v-model="selected_shipping_method"
+                                            @change="methodSelected()" />
 
-                                    <span class="checkmark"></span>
-                                </label>
-                            </div>
-
-                            <div class="pl30">
-                                <div class="row">
-                                    <b>{{ core()->currency($rate->base_price) }}</b>
+                                        <span class="checkmark"></span>
+                                    </label>
                                 </div>
 
-                                <div class="row">
-                                    <b>{{ $rate->method_title }}</b> - {{ __($rate->method_description) }}
+                                <div class="pl30">
+                                    <div class="row">
+                                        <b>{{ core()->currency($rate->base_price) }}</b>
+                                    </div>
+
+                                    <div class="row">
+                                        <b>{{ $rate->method_title }}</b> - {{ __($rate->method_description) }}
+                                    </div>
                                 </div>
                             </div>
-                        </div>
 
-                    @endforeach
+                        @endforeach
 
-                {!! view_render_event('bagisto.shop.checkout.shipping-method.after', ['rateGroup' => $rateGroup]) !!}
+                    {!! view_render_event('bagisto.shop.checkout.shipping-method.after', ['rateGroup' => $rateGroup]) !!}
 
-            @endforeach
+                @endforeach
 
-            <span
-                class="control-error"
-                v-if="errors.has('shipping-form.shipping_method')">
+                <span
+                    class="control-error"
+                    v-if="errors.has('shipping-form.shipping_method')">
 
-                @{{ errors.first('shipping-form.shipping_method') }}
-            </span>
-        </div>
+                    @{{ errors.first('shipping-form.shipping_method') }}
+                </span>
+            </div>
+        </accordian>
     </div>
 </form>
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
index aad68edc3..42aae7d3d 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
@@ -57,7 +57,7 @@
             </div>
         </div>
     @else
-        <div class="card grid-card" id="product-card-new">
+        <div class="card grid-card product-card-new">
             <a
                 href="{{ route('shop.productOrCategory.index', ['slug' => $product->url_key]) }}"
                 title="{{ $product->name }}"